update search filter

- add debounce
- set default value page to 1 each time search

src/pages/master/reward/blocks/ListToolbar.tsx

@@ -6,15 +6,18 @@ import { useEffect, useState } from 'react';
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useManageRewardContext();
-  const [searchValue, setSearchValue] = useState<string>((table.getColumn('name')?.getFilterValue() as string) ?? '');
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('name')?.getFilterValue() as string) ?? ''
+  );
 
-    useEffect(() => {
-      const timer = setTimeout(() => {
-        table.getColumn('name')?.setFilterValue(searchValue);
-      }, 200);
-  
-      return () => clearTimeout(timer);
-    }, [searchValue, table]);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('name')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -25,7 +28,7 @@ const ListToolbar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Transaction Type"
+                placeholder="Search"
                 value={searchValue}
                 onChange={(event) => setSearchValue(event.target.value)}
               />