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) => {
-    if (event.key === 'Enter') {
-      handleSearch();
-    }
-  };
-
-  const handleSearch = () => {
-    table.getColumn('content')?.setFilterValue(searchValue);
-    table.setPageIndex(0);
-  };
+  useEffect(() => {
+    const today = new Date();
+    const threeMonthsAgo = getOneMonthsAgo();
+    setDateRange({ from: formatDate(threeMonthsAgo), to: formatDate(today) });
+  }, []);
 
   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 w-[50%] gap-3 items-center">
-            <label className="input input-sm w-1/3">
-              <KeenIcon icon="magnifier" />
-              <input
-                type="text"
-                placeholder="Search notifications"
-                value={searchValue}
-                onChange={(event) => setSearchValue(event.target.value)}
-              />
-            </label>
-            {/* <DefaultTooltip title={'Search'} placement={'top'}>
+        <div className="flex flex-wrap gap-3">
+          <label className="input input-sm w-[160px]">
+            From
+            <input
+              type="date"
+              placeholder="From"
+              value={dateRange.from}
+              onChange={(event) => setDateRange({ ...dateRange, from: event.target.value })}
+              name="from"
+            />
+          </label>
+
+          <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 className="flex gap-3 items-center">
+        </div>
+
+        <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]"
-              onClick={() => handleAddDialog(true)}
+              className="h-8 disabled:bg-gray-400"
+              onClick={handleClearAllFilters}
             >
-              Add Data
+              <KeenIcon icon="arrow-circle-left" />
             </Button>
-            <DefaultTooltip title={'Refresh'} placement={'top'}>
-              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
-                <KeenIcon icon="arrows-circle" />
-              </Button>
-            </DefaultTooltip>
-          </div>
+          </DefaultTooltip>
+          <DefaultTooltip title={'Refresh'} placement={'top'}>
+            <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+              <KeenIcon icon="arrows-circle" />
+            </Button>
+          </DefaultTooltip>
         </div>
       </div>
     </div>