update add filter trx code in history transaction and approval transaction

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

@@ -15,6 +15,10 @@ const ListToolbar = () => {
     return date.toISOString().split('T')[0];
   };
 
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('code')?.getFilterValue() as string) ?? ''
+  );
+
   // useEffect to set the default date values
   useEffect(() => {
     const today = new Date();
@@ -34,6 +38,15 @@ const ListToolbar = () => {
     }
   }, [trxDate, table]);
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('code')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
+
   useEffect(() => {
     if (trxDate.from && trxDate.to) {
       handleFilterData();
@@ -69,6 +82,17 @@ const ListToolbar = () => {
               name="to"
             />
           </label>
+
+          <label className="input input-sm w-1/3">
+            <KeenIcon icon="magnifier" />
+            <input
+              type="text"
+              placeholder="Search Transaction ID"
+              value={searchValue}
+              onChange={(event) => setSearchValue(event.target.value)}
+            />
+          </label>
+
         </div>
 
         <div className="ml-auto">
@@ -79,10 +103,16 @@ const ListToolbar = () => {
               onClick={() => {
                 const today = new Date();
                 const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+
+                setSearchValue('');
                 settrxDate({
                   from: formatDate(firstDayOfMonth),
                   to: formatDate(today),
                 });
+
+                table.getColumn('code')?.setFilterValue('');
+                table.setPageIndex(0);
+
                 reload();
               }}
             >

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

@@ -63,6 +63,15 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
+      {
+        accessorKey: 'code',
+        header: ({ column }) => <DataGridColumnHeader title="Transaction Code" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
       {
         accessorKey: 'transaction_date',
         header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
@@ -164,12 +173,12 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
       },
       {
         accessorKey: 'status_approve',
-        header: 'Status',
+        header: 'Status Approval',
         cell: ({ row }) => {
           const statusCode = row.original.status_approve;
           let label = '';
           let badgeClass = '';
-      
+
           switch (statusCode) {
             case 'Y':
               label = 'APPROVED';
@@ -184,14 +193,14 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
               badgeClass = 'bg-gray-100 text-gray-800';
               break;
           }
-      
+
           return (
             <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
               {label}
             </span>
           );
         },
-      },      
+      },
       {
         id: 'actions',
         header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
@@ -234,43 +243,69 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
 
   const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
-      let startdate, enddate;
+      const today = new Date();
+      const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
 
-      if (!filter || filter.length === 0) {
+      // Default values
-        const today = new Date();
+      let startdate = firstDayOfMonth.toISOString().split('T')[0];
-        const nextWeek = new Date();
+      let enddate = today.toISOString().split('T')[0];
-        nextWeek.setDate(today.getDate() + 7);
+      let transactioncode = '';
-        startdate = today.toISOString().split('T')[0];
+      // let transactionstatus = '';
-        enddate = nextWeek.toISOString().split('T')[0];
+
-      } else {
+      if (Array.isArray(filter)) {
-        startdate = filter[0]?.value?.from;
+        filter.forEach((f: any) => {
-        enddate = filter[0]?.value?.to;
+          // console.log(f.id);
+          if (f.id === 'transaction_date' && f.value?.from && f.value?.to) {
+            startdate = f.value.from;
+            enddate = f.value.to;
+          }
+
+          if (f.id === 'code' && f.value) {
+            transactioncode = f.value;
+          }
+
+          // if (f.id === 'status' && f.value) {
+          //   transactionstatus = f.value;
+          // }
+        });
       }
 
       const formattedFilter = {
         "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}%`
+        // }
       };
 
+
       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)
       });
 
-      setTransaction(response?.data?.list || []);
+      if (!response || !response.data) {
-      return {
+        console.warn('No data received:', response);
-        data: response?.data?.list || [],
+        return { data: [], totalCount: 0 };
-        totalCount: response?.data?.total_count || 0,
+      }
-      };
+
+      setTransaction(response.data.list);
+      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
     }
   };
 

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

@@ -3,6 +3,13 @@ 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';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
@@ -10,11 +17,39 @@ const ListToolbar = () => {
   // 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 formatDate = (date: Date): string => {
     return date.toISOString().split('T')[0];
   };
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('code')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
+
+  // useEffect(() => {
+  //   const timer = setTimeout(() => {
+  //     table.getColumn('status')?.setFilterValue(statusValue);
+  //     table.setPageIndex(0);
+  //   }, 200);
+  //   return () => clearTimeout(timer);
+  // }, [statusValue, table]);
+
+
+
   // useEffect to set the default date values
   useEffect(() => {
     const today = new Date();
@@ -69,6 +104,33 @@ const ListToolbar = () => {
               name="to"
             />
           </label>
+
+          {/* <Select
+            value={statusValue}
+            onValueChange={(value) => {
+              setStatusValue(value);
+            }}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="Select Status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="C">COMPLETE</SelectItem>
+              <SelectItem value="F">FAILED</SelectItem>
+              <SelectItem value="O">ON PROCESS</SelectItem>
+            </SelectContent>
+          </Select> */}
+
+          <label className="input input-sm w-1/3">
+            <KeenIcon icon="magnifier" />
+            <input
+              type="text"
+              placeholder="Search Transaction ID"
+              value={searchValue}
+              onChange={(event) => setSearchValue(event.target.value)}
+            />
+          </label>
+
         </div>
 
         <div className="ml-auto">
@@ -79,10 +141,18 @@ const ListToolbar = () => {
               onClick={() => {
                 const today = new Date();
                 const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+
+                setSearchValue('');
+                // setStatusValue('');
                 settrxDate({
                   from: formatDate(firstDayOfMonth),
                   to: formatDate(today),
                 });
+
+                table.getColumn('code')?.setFilterValue('');
+                // table.getColumn('status')?.setFilterValue('');
+                table.setPageIndex(0);
+
                 reload();
               }}
             >

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

@@ -70,15 +70,15 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      // {
+      {
-      //   accessorKey: 'transaction_date',
+        accessorKey: 'code',
-      //   header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Transaction Code" column={column} />,
-      //   enableSorting: false,
+        enableSorting: false,
-      //   enableHiding: false,
+        enableHiding: false,
-      //   meta: {
+        meta: {
-      //     headerClassName: 'w-[250px]'
+          headerClassName: 'w-[250px]'
-      //   }
+        }
-      // },
+      },
       {
         accessorKey: 'transaction_date',
         header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
@@ -242,30 +242,47 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
 
   const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
-      let startdate;
+      const today = new Date();
-      let enddate;
+      const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
-      let formattedFilter;
 
-      if (filter == undefined || filter.length == 0) {
+      // Default values
-        const today = new Date();
+      let startdate = firstDayOfMonth.toISOString().split('T')[0];
+      let enddate = today.toISOString().split('T')[0];
+      let transactioncode = '';
+      // let transactionstatus = '';
 
-        // Tanggal 1 di bulan sekarang
+      if (Array.isArray(filter)) {
-        const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+        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;
+          }
 
-        startdate = firstDayOfMonth.toISOString().split('T')[0];
+          if (f.id === 'code' && f.value) {
-        enddate = today.toISOString().split('T')[0];
+            transactioncode = f.value;
-      } else if (filter != undefined || filter.length != 0) {
+          }
-        startdate = filter[0].value.from;
+
-        enddate = filter[0].value.to;
+          // if (f.id === 'status' && f.value) {
+          //   transactionstatus = f.value;
+          // }
+        });
       }
 
-      formattedFilter = {
+      const formattedFilter = {
         "Transactions.transaction_date": {
-          from: startdate + " 00:00:00",
+          from: `${startdate} 00:00:00`,
-          to: enddate + " 23:59:59"
+          to: `${enddate} 23:59:59`
-        }
+        },
+        "Transactions.code": {
+          like: `%${transactioncode}%`
+        },
+        // "Transactions.status": {
+        //   like: `%${transactionstatus}%`
+        // }
       };
 
+
       const response = await GetData(`${API_URL}/transaction/history`, {
         limit,
         page: page + 1,
@@ -275,13 +292,21 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         filter: JSON.stringify(formattedFilter)
       });
 
-      setTransaction(response?.data.list);
+      if (!response || !response.data) {
-      return { data: response?.data.list, totalCount: response?.data.total_count };
+        console.warn('No data received:', response);
+        return { data: [], totalCount: 0 };
+      }
+
+      setTransaction(response.data.list);
+      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 (
     <ManageTransactionContext.Provider
       value={{