update filter date time on notification

src/pages/notification/blocks/ListToolbar.tsx

@@ -5,22 +5,23 @@ import { useCallback, useEffect, useState } from 'react';
 import { toast } from 'sonner';
 import { DateRangePicker } from '@/pages/dashboards/home/blocks';
 
-const formatDate = (date: Date): string => date.toISOString().split('T')[0];
+const formatDate = (date: Date): string => date.toLocaleDateString('sv-SE');
+const formatDateTime = (date: Date): string => date.toISOString();
+const getLocalDateString = (date: Date): string => {
+  return date.toLocaleDateString('sv-SE');
+};
 
 const ListToolBar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useManageNotificationContext();
-  const [dateRange, setDateRange] = useState({ from: '', to: '' });
+  const [dateRange, setDateRange] = useState({
+    from: getLocalDateString(new Date()),
+    to: getLocalDateString(new Date())
+  });
   const [searchValue, setSearchValue] = useState<string>(
     (table.getColumn('content')?.getFilterValue() as string) ?? ''
   );
 
-  useEffect(() => {
-    const today = new Date();
-    const formatted = formatDate(today);
-    setDateRange({ from: formatted, to: formatted });
-  }, []);
-
   useEffect(() => {
     const timer = setTimeout(() => {
       table.getColumn('content')?.setFilterValue(searchValue);
@@ -31,13 +32,25 @@ const ListToolBar = () => {
 
   useEffect(() => {
     const today = new Date();
-    const formatted = formatDate(today);
-    const initialDateRange = { from: formatted, to: formatted };
+    // Set waktu ke awal hari (00:00:00)
+    const startOfDay = new Date(today);
+    startOfDay.setHours(0, 0, 0, 0);
+    // Set waktu ke akhir hari (23:59:59)
+    const endOfDay = new Date(today);
+    endOfDay.setHours(23, 59, 59, 999);
+
+    const initialDateRange = {
+      from: formatDate(startOfDay), // << Gunakan formatDate di sini
+      to: formatDate(endOfDay)
+    };
 
     setDateRange(initialDateRange);
 
     try {
-      table.getColumn('created_at')?.setFilterValue(initialDateRange);
+      table.getColumn('created_at')?.setFilterValue({
+        from: formatDateTime(startOfDay),
+        to: formatDateTime(endOfDay)
+      });
     } catch (error) {
       toast.error('Error applying initial date filter');
       console.error('Initial date filter error:', error);
@@ -46,16 +59,28 @@ const ListToolBar = () => {
 
   const handleClearAllFilters = () => {
     const today = new Date();
+
+    const startOfDay = new Date(today);
+    startOfDay.setHours(0, 0, 0, 0);
+
+    const endOfDay = new Date(today);
+    endOfDay.setHours(23, 59, 59, 999);
+
+    // Set ulang filter tanggal dengan waktu
     const resetDateRange = {
-      from: formatDate(today),
-      to: formatDate(today)
+      from: formatDate(startOfDay), // YYYY-MM-DD untuk input date
+      to: formatDate(endOfDay)
     };
 
     setSearchValue('');
     setDateRange(resetDateRange);
 
     table.getColumn('content')?.setFilterValue('');
-    table.getColumn('created_at')?.setFilterValue(resetDateRange);
+
+    table.getColumn('created_at')?.setFilterValue({
+      from: formatDateTime(startOfDay),
+      to: formatDateTime(endOfDay)
+    });
 
     setTimeout(() => {
       table.setPageIndex(0);
@@ -75,9 +100,24 @@ const ListToolBar = () => {
   useEffect(() => {
     const checkNewDay = () => {
       const now = new Date();
-      const formattedNow = formatDate(now);
-      if (formattedNow !== dateRange.from || formattedNow !== dateRange.to) {
-        setDateRange({ from: formattedNow, to: formattedNow });
+      const currentDate = formatDate(now); // Tetap gunakan formatDate untuk perbandingan tanggal saja
+
+      // Periksa apakah tanggal sekarang berbeda dengan tanggal yang difilter
+      if (currentDate !== formatDate(new Date(dateRange.from))) {
+        const startOfDay = new Date(now);
+        startOfDay.setHours(0, 0, 0, 0);
+        const endOfDay = new Date(now);
+        endOfDay.setHours(23, 59, 59, 999);
+
+        setDateRange({
+          from: formatDate(startOfDay), // hanya YYYY-MM-DD
+          to: formatDate(endOfDay)
+        });
+
+        table.getColumn('created_at')?.setFilterValue({
+          from: formatDateTime(startOfDay),
+          to: formatDateTime(endOfDay)
+        });
       }
     };
 
@@ -95,7 +135,16 @@ const ListToolBar = () => {
               type="date"
               placeholder="From"
               value={dateRange.from}
-              onChange={(event) => setDateRange({ ...dateRange, from: event.target.value })}
+              onChange={(e) => {
+                setDateRange({ ...dateRange, from: e.target.value });
+                // Untuk filter, konversi ke Date object dengan waktu awal hari
+                const date = new Date(e.target.value);
+                date.setHours(0, 0, 0, 0);
+                table.getColumn('created_at')?.setFilterValue({
+                  from: date.toISOString(),
+                  to: new Date(dateRange.to).toISOString()
+                });
+              }}
               name="from"
             />
           </label>
@@ -106,7 +155,16 @@ const ListToolBar = () => {
               type="date"
               placeholder="To"
               value={dateRange.to}
-              onChange={(event) => setDateRange({ ...dateRange, to: event.target.value })}
+              onChange={(e) => {
+                setDateRange({ ...dateRange, to: e.target.value });
+                // Untuk filter, konversi ke Date object dengan waktu akhir hari
+                const date = new Date(e.target.value);
+                date.setHours(23, 59, 59, 999);
+                table.getColumn('created_at')?.setFilterValue({
+                  from: new Date(dateRange.from).toISOString(),
+                  to: date.toISOString()
+                });
+              }}
               name="to"
             />
           </label>