update for filter transaction

2025-04-21 15:39:09 +07:00
parent 7f87e0ee44
commit 2db0287cc2
4 changed files with 160 additions and 61 deletions
--- a/src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx
+++ b/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();
--- a/src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx
+++ b/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
    }
  };

--- a/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
+++ b/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
@ -3,30 +3,30 @@ import { useTransactionContext } from '../hooks/useTransactionContext';
 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';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';

 const ListToolbar = () => {
  const { table, reload } = useDataGrid();

-  // Set the initial state for trxDate
  const [trxDate, settrxDate] = useState({ from: '', to: '' });
-
  const [searchValue, setSearchValue] = useState<string>(
    (table.getColumn('code')?.getFilterValue() as string) ?? ''
  );

+  const [statusValue, setStatusValue] = useState<string>(
+    (table.getColumn('status')?.getFilterValue() as string) ?? ''
+  );

-  // const [statusValue, setStatusValue] = useState<string>(
-  //   (table.getColumn('status')?.getFilterValue() as string) ?? ''
-  // );
+  const [typeValue, setTypeValue] = useState<string>(
+    (table.getState().columnFilters.find(f => f.id === 'kind')?.value as string) ?? ''
+  );

-  // Function to format date to YYYY-MM-DD
  const formatDate = (date: Date): string => {
    return date.toISOString().split('T')[0];
  };
@ -40,17 +40,25 @@ const ListToolbar = () => {
    return () => clearTimeout(timer);
  }, [searchValue, table]);

-  // useEffect(() => {
-  //   const timer = setTimeout(() => {
-  //     table.getColumn('status')?.setFilterValue(statusValue);
-  //     table.setPageIndex(0);
-  //   }, 200);
-  //   return () => clearTimeout(timer);
-  // }, [statusValue, table]);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('status')?.setFilterValue(statusValue);
+      table.setPageIndex(0);
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [statusValue, table]);

+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.setColumnFilters((prev) => [
+        ...prev.filter((f) => f.id !== 'kind'),
+        { id: 'kind', value: typeValue },
+      ]);
+      table.setPageIndex(0);
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [typeValue, table]);

-
-  // useEffect to set the default date values
  useEffect(() => {
    const today = new Date();
    const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
@ -105,13 +113,13 @@ const ListToolbar = () => {
            />
          </label>

-          {/* <Select
+          <Select
            value={statusValue}
            onValueChange={(value) => {
              setStatusValue(value);
            }}
          >
-            <SelectTrigger>
+            <SelectTrigger className="input input-sm w-[160px] h-[31px]">
              <SelectValue placeholder="Select Status" />
            </SelectTrigger>
            <SelectContent>
@ -119,7 +127,25 @@ const ListToolbar = () => {
              <SelectItem value="F">FAILED</SelectItem>
              <SelectItem value="O">ON PROCESS</SelectItem>
            </SelectContent>
-          </Select> */}
+          </Select>
+
+          <Select
+            value={typeValue}
+            onValueChange={(value) => {
+              setTypeValue(value);
+            }}
+          >
+            <SelectTrigger className="input input-sm w-[160px] h-[31px]">
+              <SelectValue placeholder="Select Type" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="T">TRANSFER</SelectItem>
+              <SelectItem value="P">PURCHASE</SelectItem>
+              <SelectItem value="W">WITHDRAW</SelectItem>
+              <SelectItem value="U">TOP UP</SelectItem>
+              <SelectItem value="R">RETURN</SelectItem>
+            </SelectContent>
+          </Select>

          <label className="input input-sm w-1/3">
            <KeenIcon icon="magnifier" />
@ -130,7 +156,6 @@ const ListToolbar = () => {
              onChange={(event) => setSearchValue(event.target.value)}
            />
          </label>
-
        </div>

        <div className="ml-auto">
@ -143,16 +168,20 @@ const ListToolbar = () => {
                const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);

                setSearchValue('');
-                // setStatusValue('');
+                setStatusValue('');
+                setTypeValue('');
                settrxDate({
                  from: formatDate(firstDayOfMonth),
                  to: formatDate(today),
                });

-                table.getColumn('code')?.setFilterValue('');
-                // table.getColumn('status')?.setFilterValue('');
-                table.setPageIndex(0);
+                table.setColumnFilters([
+                  { id: 'code', value: '' },
+                  { id: 'status', value: '' },
+                  { id: 'kind', value: '' },
+                ]);

+                table.setPageIndex(0);
                reload();
              }}
            >
--- a/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
+++ b/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
@ -79,6 +79,25 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
          headerClassName: 'w-[250px]'
        }
      },
+      {
+        accessorFn: (row) => {
+          switch (row.kind) {
+            case 'T': return 'TRANSFER';
+            case 'P': return 'PURCHASE';
+            case 'W': return 'WITHDRAW';
+            case 'U': return 'TOP UP';
+            case 'R': return 'RETURN';
+            default: return '_';
+          }
+        },
+        accessorKey: 'kind',
+        header: ({ column }) => <DataGridColumnHeader title="Transaction Kind" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
      {
        accessorKey: 'transaction_date',
        header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
@ -249,11 +268,12 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
      let startdate = firstDayOfMonth.toISOString().split('T')[0];
      let enddate = today.toISOString().split('T')[0];
      let transactioncode = '';
-      // let transactionstatus = '';
+      let transactionstatus = '';
+      let type = ''

      if (Array.isArray(filter)) {
+        // console.log(filter);
        filter.forEach((f: any) => {
-          // console.log(f.id);
          if (f.id === 'transaction_date' && f.value?.from && f.value?.to) {
            startdate = f.value.from;
            enddate = f.value.to;
@ -263,25 +283,37 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
            transactioncode = f.value;
          }

-          // if (f.id === 'status' && f.value) {
-          //   transactionstatus = f.value;
-          // }
+          if (f.id === 'status' && f.value) {
+            transactionstatus = f.value;
+          }
+
+          if (f.id === 'kind' && f.value) {
+            type = f.value;
+          }
        });
      }

-      const formattedFilter = {
+      // Build filter object dynamically
+      const formattedFilter: any = {
        "Transactions.transaction_date": {
          from: `${startdate} 00:00:00`,
          to: `${enddate} 23:59:59`
-        },
-        "Transactions.code": {
-          like: `%${transactioncode}%`
-        },
-        // "Transactions.status": {
-        //   like: `%${transactionstatus}%`
-        // }
+        }
      };

+      if (transactioncode) {
+        formattedFilter["Transactions.code"] = {
+          like: `%${transactioncode}%`
+        };
+      }
+
+      if (transactionstatus) {
+        formattedFilter["Transactions.status"] = transactionstatus;
+      }
+
+      if (type) {
+        formattedFilter["Transactions.kind"] = type;
+      }

      const response = await GetData(`${API_URL}/transaction/history`, {
        limit,
@ -302,7 +334,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {

    } catch (error) {
      console.error('Error fetching transaction', error);
-      return { data: [], totalCount: 0 }; // optional: fail-safe fallback
+      return { data: [], totalCount: 0 };
    }
  };