update for filter transaction

src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx

@@ -3,6 +3,13 @@ import { useTransactionContext } from '../hooks/useApprovalTransactionContext';
 import { Button } from '@/components/ui/button';
 import { useCallback, useState, useEffect } from 'react';
 import { toast } from 'sonner';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
@@ -10,6 +17,18 @@ const ListToolbar = () => {
   // Set the initial state for trxDate
   const [trxDate, settrxDate] = useState({ from: '', to: '' });
 
+  const [statusApproval, setStatusApproval] = useState<string>(
+    (table.getColumn('status_approve')?.getFilterValue() as string) ?? ''
+  );
+
+  useEffect(() => {
+      const timer = setTimeout(() => {
+        table.getColumn('status_approve')?.setFilterValue(statusApproval);
+        table.setPageIndex(0);
+      }, 200);
+      return () => clearTimeout(timer);
+    }, [statusApproval, table]);
+
   // Function to format date to YYYY-MM-DD
   const formatDate = (date: Date): string => {
     return date.toISOString().split('T')[0];
@@ -83,6 +102,22 @@ const ListToolbar = () => {
             />
           </label>
 
+          <Select
+            value={statusApproval}
+            onValueChange={(value) => {
+              setStatusApproval(value);
+            }}
+          >
+            <SelectTrigger className="input input-sm w-[160px] h-[31px]">
+              <SelectValue placeholder="Select Status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="Y">APPROVED</SelectItem>
+              <SelectItem value="N">REJECT</SelectItem>
+              <SelectItem value="W">WAITING APPROVAL</SelectItem>
+            </SelectContent>
+          </Select>
+
           <label className="input input-sm w-1/3">
             <KeenIcon icon="magnifier" />
             <input
@@ -111,6 +146,7 @@ const ListToolbar = () => {
                 });
 
                 table.getColumn('code')?.setFilterValue('');
+                table.getColumn('status_approve')?.setFilterValue('');
                 table.setPageIndex(0);
 
                 reload();