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