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();

src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx

@@ -250,7 +250,7 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
       let startdate = firstDayOfMonth.toISOString().split('T')[0];
       let enddate = today.toISOString().split('T')[0];
       let transactioncode = '';
-      // let transactionstatus = '';
+      let approvalstatus = '';
 
       if (Array.isArray(filter)) {
         filter.forEach((f: any) => {
@@ -264,35 +264,37 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
             transactioncode = f.value;
           }
 
-          // if (f.id === 'status' && f.value) {
-          //   transactionstatus = f.value;
-          // }
+          if (f.id === 'status_approve' && f.value) {
+            approvalstatus = f.value;
+          }
         });
       }
 
-      const formattedFilter = {
+      // Constructing filter object with dynamic properties
+      const formattedFilter: any = {
         "Transactions.transaction_date": {
           from: `${startdate} 00:00:00`,
-          to: `${enddate} 23:59:59`
+          to: `${enddate} 23:59:59`,
         },
-        "Transactions.code": {
-          like: `%${transactioncode}%`
-        },
-
-        "Transactions.status_approve": { in: ["W", "Y", "N"] },
-        // "Transactions.status": {
-        //   like: `%${transactionstatus}%`
-        // }
       };
 
+      if (transactioncode) {
+        formattedFilter["Transactions.code"] = { like: `%${transactioncode}%` };
+      }
 
+      // Handle approval status filter
+      formattedFilter["Transactions.status_approve"] = approvalstatus
+        ? approvalstatus
+        : { in: ["W", "Y", "N"] };
+
+      // Fetch data from API
       const response = await GetData(`${API_URL}/transaction/history`, {
         limit,
         page: page + 1,
         with_deleted: false,
         order_field: "Transactions.created_at",
         order_direction: 'DESC',
-        filter: JSON.stringify(formattedFilter)
+        filter: JSON.stringify(formattedFilter),
       });
 
       if (!response || !response.data) {
@@ -300,12 +302,12 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
         return { data: [], totalCount: 0 };
       }
 
-      setTransaction(response.data.list);
+      setTransaction(response.data.list); // Assuming this is a state setter
       return { data: response.data.list, totalCount: response.data.total_count };
 
     } catch (error) {
       console.error('Error fetching transaction', error);
-      return { data: [], totalCount: 0 }; // optional: fail-safe fallback
+      return { data: [], totalCount: 0 }; // Fail-safe fallback
     }
   };