adding handle debounce on some sub modules in master data

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

@@ -1,12 +1,12 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { Button } from '@/components/ui/button';
 import { useManageAldeiasContext } from '../hooks/useManageAldeiasContext';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog, handleSearchDialog } = useManageAldeiasContext();
-  const [searchValue, setSearchValue] = useState('');
+  const [searchValue, setSearchValue] = useState<string>((table.getColumn('name')?.getFilterValue() as string) ?? '');
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === 'Enter') {
@@ -14,6 +14,13 @@ const ListToolbar = () => {
     }
   };
 
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        table.getColumn('name')?.setFilterValue(searchValue);
+      }, 200);
+  
+      return () => clearTimeout(timer);
+    }, [searchValue, table]);
   const handleSearch = () => {
     table.getColumn('name')?.setFilterValue(searchValue);
     table.setPageIndex(0);
@@ -28,17 +35,11 @@ const ListToolbar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Aldeia"
+                placeholder="Search Transaction Type"
                 value={searchValue}
                 onChange={(event) => setSearchValue(event.target.value)}
-                onKeyDown={handleKeyDown}
               />
             </label>
-            <DefaultTooltip title={'Search'} placement={'top'}>
-              <Button variant="outline" className="h-7.5" onClick={handleSearch}>
-                <KeenIcon icon="magnifier" />
-              </Button>
-            </DefaultTooltip>
             {/* <DefaultTooltip title={'Filter'} placement={'top'}>
               <Button
                 variant="outline"

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

@@ -1,24 +1,21 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageProductsContext } from '../hooks/useManageProductsContext';
 import { Button } from '@/components/ui/button';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useManageProductsContext();
-  const[searchProduct, setSearchProduct] = useState('');
+  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]);
 
-  const handleSearch = ()=>{
-    table.getColumn('name')?.setFilterValue(searchProduct);
-    table.setPageIndex(0);
-  }
-
-  const handleKeyDown = (event:React.KeyboardEvent) =>{
-    if(event.key==='Enter'){
-      handleSearch();
-    }
-  }
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -29,17 +26,11 @@ const ListToolbar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Products"
+                placeholder="Search Transaction Type"
-                value={ searchProduct}
+                value={searchValue}
-                onChange={(event) => setSearchProduct(event.target.value)}
+                onChange={(event) => setSearchValue(event.target.value)}
-                onKeyDown={handleKeyDown}
               />
             </label>
-                        <DefaultTooltip title={'Search'} placement={'top'}>
-                        <Button variant="outline" className="h-7.5" onClick={handleSearch}>
-                            <KeenIcon icon="magnifier" />
-                          </Button>
-                        </DefaultTooltip>
             {/* <DefaultTooltip title={'Filter'} placement={'top'}>
               <Button
                 variant="outline"
@@ -57,7 +48,6 @@ const ListToolbar = () => {
               variant="outline"
               className="h-7.5 text-[0.8rem]"
               onClick={() => handleAddDialog(true)}
-              onKeyDown={handleKeyDown}
             >
               Add Data
             </Button>

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

@@ -1,24 +1,21 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageProfessionContext } from '../hooks/useManageProfessionContext';
 import { Button } from '@/components/ui/button';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { set } from 'date-fns';
 
 const ListToolbar = () => {
   const { reload, table } = useDataGrid();
   const { handleAddDialog } = useManageProfessionContext();
-  const [searchProfession, setSearchProfession]= useState('');
+  const [searchValue, setSearchValue] = useState<string>((table.getColumn('name')?.getFilterValue() as string) ?? '');
 
-  const handleKeyDown = (event: React.KeyboardEvent) =>{
+    useEffect(() => {
-    if(event.key==='Enter'){
+      const timer = setTimeout(() => {
-      handleSearch();
+        table.getColumn('name')?.setFilterValue(searchValue);
-    }
+      }, 200);
-  }
+  
-
+      return () => clearTimeout(timer);
-  const handleSearch = () =>{
+    }, [searchValue, table]);
-    table.getColumn('name')?.setFilterValue(searchProfession);
-    table.setPageIndex(0);
-  }
 
 
 
@@ -32,19 +29,12 @@ const ListToolbar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Profession"
+                placeholder="Search Transaction Type"
-                value={searchProfession}
+                value={searchValue}
-                onChange={(event) =>
+                onChange={(event) => setSearchValue(event.target.value)}
-                  setSearchProfession(event.target.value)
-                }
-                onKeyDown={handleKeyDown}
               />
             </label>
-            <DefaultTooltip title={'Search'} placement={'top'}>
+
-            <Button variant="outline" className="h-7.5" onClick={handleSearch}>
-                <KeenIcon icon="magnifier" />
-              </Button>
-            </DefaultTooltip>
             {/* <DefaultTooltip title={'Filter'} placement={'top'}>
               <Button
                 variant="outline"

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

@@ -1,23 +1,20 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageProviderContext } from '../hooks/useManageProviderContext';
 import { Button } from '@/components/ui/button';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 const ListToolbar = () => {
   const { reload, table } = useDataGrid();
   const { handleAddDialog } = useManageProviderContext();
-  const [searchProvider, setSearchProvider] = useState('');
+ const [searchValue, setSearchValue] = useState<string>((table.getColumn('name')?.getFilterValue() as string) ?? '');
-  
-  const handleSearch = () =>{
-    table.getColumn('name')?.setFilterValue(searchProvider);
-    table.setPageIndex(0);
-  }
 
-  const handleKeyDown = (event: React.KeyboardEvent)=>{
+    useEffect(() => {
-    if(event.key === 'Enter'){
+      const timer = setTimeout(() => {
-      handleSearch();
+        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,19 +25,12 @@ const ListToolbar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Provider"
+                placeholder="Search Transaction Type"
-                value={searchProvider}
+                value={searchValue}
-                onChange={(event) =>
+                onChange={(event) => setSearchValue(event.target.value)}
-                  setSearchProvider(event.target.value)
-                }
-                onKeyDown={handleKeyDown}
               />
             </label>
-            <DefaultTooltip title={'Search'} placement={'top'}>
+
-            <Button variant="outline" className="h-7.5" onClick={handleSearch}>
-                <KeenIcon icon="magnifier" />
-              </Button>
-            </DefaultTooltip>
             {/* <DefaultTooltip title={'Filter'} placement={'top'}>
               <Button
                 variant="outline"

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 = () =>{
+    useEffect(() => {
-    table.getColumn('name')?.setFilterValue(searchReward);
+      const timer = setTimeout(() => {
-    table.setPageIndex(0);
+        table.getColumn('name')?.setFilterValue(searchValue);
-  }
+      }, 200);
-
+  
-  const handleKeyDown = (event: React.KeyboardEvent)=>{
+      return () => clearTimeout(timer);
-    if(event.key === 'Enter'){
+    }, [searchValue, table]);
-      handleSearch();
-    }
-  }
 
   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"
+                placeholder="Search Transaction Type"
-                value={searchReward}
+                value={searchValue}
-                onChange={(event) => setSearchReward(event.target.value)}
+                onChange={(event) => setSearchValue(event.target.value)}
-                onKeyDown={handleKeyDown}
               />
             </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