adding handle debounce on some sub modules in master data

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

@@ -1,23 +1,20 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { Button } from '@/components/ui/button';
 import { useManageRewardContext } from '../hooks/useManageRewardContext';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useManageRewardContext();
-  const [searchReward, setSearchReward] = useState('');
+  const [searchValue, setSearchValue] = useState<string>((table.getColumn('name')?.getFilterValue() as string) ?? '');
 
-  const handleSearch = () =>{
-    table.getColumn('name')?.setFilterValue(searchReward);
-    table.setPageIndex(0);
-  }
-
-  const handleKeyDown = (event: React.KeyboardEvent)=>{
-    if(event.key === 'Enter'){
-      handleSearch();
-    }
-  }
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        table.getColumn('name')?.setFilterValue(searchValue);
+      }, 200);
+  
+      return () => clearTimeout(timer);
+    }, [searchValue, table]);
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -28,17 +25,11 @@ const ListToolbar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Reward"
-                value={searchReward}
-                onChange={(event) => setSearchReward(event.target.value)}
-                onKeyDown={handleKeyDown}
+                placeholder="Search Transaction Type"
+                value={searchValue}
+                onChange={(event) => setSearchValue(event.target.value)}
               />
             </label>
-            <DefaultTooltip title={'Search'} placement={'top'}>
-            <Button variant="outline" className="h-7.5" onClick={handleSearch}>
-                <KeenIcon icon="magnifier" />
-              </Button>
-            </DefaultTooltip>
           </div>
           <div className="flex gap-3 items-center">
             <Button