Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard

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) ?? ''
   // );
 
-  // Function to format date to YYYY-MM-DD
+  const [typeValue, setTypeValue] = useState<string>(
+    (table.getState().columnFilters.find(f => f.id === 'kind')?.value as string) ?? ''
+  );
+
   const formatDate = (date: Date): string => {
     return date.toISOString().split('T')[0];
   };
@@ -48,9 +48,17 @@ const ListToolbar = () => {
   //   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);
@@ -111,7 +119,7 @@ const ListToolbar = () => {
               setStatusValue(value);
             }}
           >
-            <SelectTrigger>
+            <SelectTrigger className="input input-sm w-[160px] h-[31px]">
               <SelectValue placeholder="Select Status" />
             </SelectTrigger>
             <SelectContent>
@@ -121,6 +129,24 @@ const ListToolbar = () => {
             </SelectContent>
           </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" />
             <input
@@ -130,7 +156,6 @@ const ListToolbar = () => {
               onChange={(event) => setSearchValue(event.target.value)}
             />
           </label>
-
         </div>
 
         <div className="ml-auto">
@@ -139,20 +164,27 @@ const ListToolbar = () => {
               variant="outline"
               className="h-7.5"
               onClick={() => {
+                // Preserve trxDate values (from, to) and reset others
                 const today = new Date();
                 const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
 
+                // Only reset filters excluding from and to
                 setSearchValue('');
                 // setStatusValue('');
+                setTypeValue('');
                 settrxDate({
                   from: formatDate(firstDayOfMonth),
                   to: formatDate(today),
                 });
 
-                table.getColumn('code')?.setFilterValue('');
-                // table.getColumn('status')?.setFilterValue('');
-                table.setPageIndex(0);
+                // Reset other filters except for date range
+                table.setColumnFilters([
+                  { id: 'code', value: '' },
+                  // { id: 'status', value: '' },
+                  { id: 'kind', value: '' },
+                ]);
 
+                table.setPageIndex(0);
                 reload();
               }}
             >

src/pages/transaction/history-transaction/hooks/TransactionContext.tsx

@@ -61,6 +61,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} />,
@@ -220,10 +239,11 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
       let enddate = today.toISOString().split('T')[0];
       let transactioncode = '';
       // 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;
@@ -236,22 +256,34 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
           // 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,
@@ -272,7 +304,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 };
     }
   };