add date filter to manage notification

src/pages/notification/blocks/ListToolbar.tsx

@@ -1,50 +1,126 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageNotificationContext } from '../hooks/useManageNotificationContext';
 import { Button } from '@/components/ui/button';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { DateRangePicker } from '@/pages/dashboards/home/blocks';
+
+const getOneMonthsAgo = () => {
+  const today = new Date();
+  return new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
+};
+
+const formatDate = (date: Date): string => date.toISOString().split('T')[0];
 
 const ListToolBar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useManageNotificationContext();
+  const [dateRange, setDateRange] = useState({ from: '', to: '' });
   const [searchValue, setSearchValue] = useState<string>(
     (table.getColumn('content')?.getFilterValue() as string) ?? ''
   );
 
-  const handleKeyDown = (event: React.KeyboardEvent) => {
+  useEffect(() => {
-    if (event.key === 'Enter') {
+    const today = new Date();
-      handleSearch();
+    const threeMonthsAgo = getOneMonthsAgo();
-    }
+    setDateRange({ from: formatDate(threeMonthsAgo), to: formatDate(today) });
-  };
+  }, []);
-
-  const handleSearch = () => {
-    table.getColumn('content')?.setFilterValue(searchValue);
-    table.setPageIndex(0);
-  };
 
   useEffect(() => {
     const timer = setTimeout(() => {
       table.getColumn('content')?.setFilterValue(searchValue);
       table.setPageIndex(0);
     }, 200);
-
     return () => clearTimeout(timer);
   }, [searchValue, table]);
 
+  const handleFilterByDate = useCallback(() => {
+    try {
+      table.getColumn('created_at')?.setFilterValue(dateRange);
+    } catch (error) {
+      toast.error('Error applying date filter');
+      console.error('Error applying date filter:', error);
+    }
+  }, [dateRange, table]);
+
+  useEffect(() => {
+    if (dateRange.from && dateRange.to) {
+      handleFilterByDate();
+    }
+  }, [dateRange, handleFilterByDate]);
+
+  const handleClearAllFilters = () => {
+    const today = new Date();
+    const oneMonthAgo = getOneMonthsAgo();
+    const resetDateRange = {
+      from: formatDate(oneMonthAgo),
+      to: formatDate(today)
+    };
+
+    setSearchValue('');
+    setDateRange(resetDateRange);
+
+    table.getColumn('content')?.setFilterValue('');
+    table.getColumn('created_at')?.setFilterValue(resetDateRange);
+
+    setTimeout(() => {
+      table.setPageIndex(0);
+      reload();
+    }, 0);
+  };
+
+  const handleRefresh = () => {
+    const today = new Date();
+    const threeMonthsAgo = getOneMonthsAgo();
+    const resetDateRange = {
+      from: formatDate(threeMonthsAgo),
+      to: formatDate(today)
+    };
+
+    setSearchValue('');
+    setDateRange(resetDateRange);
+
+    table.setColumnFilters([{ id: 'created_at', value: resetDateRange }]);
+    table.setPageIndex(0);
+    reload();
+  };
+
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
-        <div className="flex justify-between w-full items-center">
+        <div className="flex flex-wrap gap-3">
-          <div className="flex w-[50%] gap-3 items-center">
+          <label className="input input-sm w-[160px]">
-            <label className="input input-sm w-1/3">
+            From
-              <KeenIcon icon="magnifier" />
+            <input
-              <input
+              type="date"
-                type="text"
+              placeholder="From"
-                placeholder="Search notifications"
+              value={dateRange.from}
-                value={searchValue}
+              onChange={(event) => setDateRange({ ...dateRange, from: event.target.value })}
-                onChange={(event) => setSearchValue(event.target.value)}
+              name="from"
-              />
+            />
-            </label>
+          </label>
-            {/* <DefaultTooltip title={'Search'} placement={'top'}>
+
+          <label className="input input-sm w-[160px]">
+            To
+            <input
+              type="date"
+              placeholder="To"
+              value={dateRange.to}
+              onChange={(event) => setDateRange({ ...dateRange, to: event.target.value })}
+              name="to"
+            />
+          </label>
+
+          <label className="input input-sm w-1/3">
+            <KeenIcon icon="magnifier" />
+            <input
+              type="text"
+              placeholder="Search Notification"
+              value={searchValue}
+              onChange={(e) => setSearchValue(e.target.value)}
+            />
+          </label>
+          {/* <DefaultTooltip title={'Search'} placement={'top'}>
               <Button
                 variant="outline"
                 className="h-7.5 disabled:bg-gray-400"
@@ -53,21 +129,30 @@ const ListToolBar = () => {
                 <KeenIcon icon="magnifier" />
               </Button>
             </DefaultTooltip> */}
-          </div>
+        </div>
-          <div className="flex gap-3 items-center">
+
+        <div className="flex gap-3 ml-auto">
+          <Button
+            variant="outline"
+            className="h-7.5 text-[0.8rem]"
+            onClick={() => handleAddDialog(true)}
+          >
+            Add Data
+          </Button>
+          <DefaultTooltip title={'Reset Filter'} placement={'top'}>
             <Button
               variant="outline"
-              className="h-7.5 text-[0.8rem]"
+              className="h-8 disabled:bg-gray-400"
-              onClick={() => handleAddDialog(true)}
+              onClick={handleClearAllFilters}
             >
-              Add Data
+              <KeenIcon icon="arrow-circle-left" />
             </Button>
-            <DefaultTooltip title={'Refresh'} placement={'top'}>
+          </DefaultTooltip>
-              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+          <DefaultTooltip title={'Refresh'} placement={'top'}>
-                <KeenIcon icon="arrows-circle" />
+            <Button variant="outline" className="h-7.5" onClick={() => reload()}>
-              </Button>
+              <KeenIcon icon="arrows-circle" />
-            </DefaultTooltip>
+            </Button>
-          </div>
+          </DefaultTooltip>
         </div>
       </div>
     </div>

src/pages/notification/hooks/ManageNotificationContext.tsx

@@ -86,7 +86,8 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
         enableSorting: true,
         enableHiding: false,
         meta: {
-          headerClassName: 'w-[350px]'
+          headerClassName: 'w-[350px]',
+          searchable: true
         }
       },
       {
@@ -111,7 +112,7 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
         enableHiding: false
       },
       {
-        accessorFn: (row) => row.created_at,
+        accessorKey: 'created_at',
         id: 'created_at',
         header: ({ column }) => <DataGridColumnHeader title="Date Create" column={column} />,
         enableSorting: true,
@@ -124,16 +125,36 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
 
   const getNotificationList = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
-      sorting = sorting.length === 0 ? [{ id: 'created_at', desc: true }] : sorting;
+      const sortField = sorting.length > 0 ? sorting[0].id : 'created_at';
-      filter =
+      const sortDirection = sorting.length > 0 ? (sorting[0].desc ? 'DESC' : 'ASC') : 'DESC';
-        filter.length == 0 ? {} : { content: { like: `%${filter[0].value?.toLowerCase()}%` } };
+
+      // Initialize filter object
+      let filterParams: any = {};
+
+      // Process filter array
+      if (Array.isArray(filter)) {
+        filter.forEach((f: any) => {
+          if (f.id === 'content' && f.value) {
+            filterParams.content = { like: `%${f.value.toLowerCase()}%` };
+          }
+
+          // Handle date range filter
+          if (f.id === 'created_at' && f.value?.from && f.value?.to) {
+            filterParams.created_at = {
+              from: `${f.value.from} 00:00:00`,
+              to: `${f.value.to} 23:59:59`
+            };
+          }
+        });
+      }
+
       const response = await GetData(`${API_URL_NOTIFICATION}/list`, {
         limit: limit,
         page: page + 1,
         with_deleted: false,
-        order_field: sorting[0].id,
+        order_field: sortField,
-        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
+        order_direction: sortDirection,
-        filter: JSON.stringify(filter)
+        filter: JSON.stringify(filterParams)
       });
       // console.log('API Response notif: ', response.);
       return { data: response?.data.list, totalCount: response?.data.total_count };