update add filter trx code in history transaction and approval transaction

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