From 585cd326b749790e51779401e584b3cb084e29a3 Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Wed, 16 Apr 2025 17:33:51 +0700
Subject: [PATCH] adding button on search on masterdata

---
 .../master/products/blocks/ListToolbar.tsx    | 25 +++++++++++++++--
 .../products/hooks/ManageProductsContext.tsx  |  2 +-
 .../master/profession/blocks/ListToolbar.tsx  | 27 +++++++++++++++++--
 .../hooks/ManageProfessionContext.tsx         |  4 +--
 .../master/provider/blocks/ListToolbar.tsx    | 23 ++++++++++++++--
 .../provider/hooks/ManageProviderContext.tsx  |  4 +--
 .../master/reward/blocks/ListToolbar.tsx      | 23 ++++++++++++++--
 .../reward/hooks/ManageRewardContext.tsx      |  5 ++--
 8 files changed, 98 insertions(+), 15 deletions(-)

diff --git a/src/pages/master/products/blocks/ListToolbar.tsx b/src/pages/master/products/blocks/ListToolbar.tsx
index 92bd362..efb5d3a 100644
--- a/src/pages/master/products/blocks/ListToolbar.tsx
+++ b/src/pages/master/products/blocks/ListToolbar.tsx
@@ -1,10 +1,24 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageProductsContext } from '../hooks/useManageProductsContext';
 import { Button } from '@/components/ui/button';
+import { useState } from 'react';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useManageProductsContext();
+  const[searchProduct, setSearchProduct] = useState('');
+
+
+  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">
@@ -16,10 +30,16 @@ const ListToolbar = () => {
               <input
                 type="text"
                 placeholder="Search Products"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+                value={ searchProduct}
+                onChange={(event) => setSearchProduct(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"
@@ -37,6 +57,7 @@ const ListToolbar = () => {
               variant="outline"
               className="h-7.5 text-[0.8rem]"
               onClick={() => handleAddDialog(true)}
+              onKeyDown={handleKeyDown}
             >
               Add Data
             </Button>
diff --git a/src/pages/master/products/hooks/ManageProductsContext.tsx b/src/pages/master/products/hooks/ManageProductsContext.tsx
index 236e306..f785421 100644
--- a/src/pages/master/products/hooks/ManageProductsContext.tsx
+++ b/src/pages/master/products/hooks/ManageProductsContext.tsx
@@ -231,7 +231,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
           );
         },
         meta: {
-          headerClassName: 'w-[100px]',
+          headerClassName: 'w-[100px] text-center',
           cellClassName: 'text-center'
         }
       }
diff --git a/src/pages/master/profession/blocks/ListToolbar.tsx b/src/pages/master/profession/blocks/ListToolbar.tsx
index 9c04194..0e5b23d 100644
--- a/src/pages/master/profession/blocks/ListToolbar.tsx
+++ b/src/pages/master/profession/blocks/ListToolbar.tsx
@@ -1,10 +1,27 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageProfessionContext } from '../hooks/useManageProfessionContext';
 import { Button } from '@/components/ui/button';
+import { useState } from 'react';
+import { set } from 'date-fns';
 
 const ListToolbar = () => {
   const { reload, table } = useDataGrid();
   const { handleAddDialog } = useManageProfessionContext();
+  const [searchProfession, setSearchProfession]= useState('');
+
+  const handleKeyDown = (event: React.KeyboardEvent) =>{
+    if(event.key==='Enter'){
+      handleSearch();
+    }
+  }
+
+  const handleSearch = () =>{
+    table.getColumn('name')?.setFilterValue(searchProfession);
+    table.setPageIndex(0);
+  }
+
+
+
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -16,12 +33,18 @@ const ListToolbar = () => {
               <input
                 type="text"
                 placeholder="Search Profession"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                value={searchProfession}
                 onChange={(event) =>
-                  table.getColumn('name')?.setFilterValue(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"
diff --git a/src/pages/master/profession/hooks/ManageProfessionContext.tsx b/src/pages/master/profession/hooks/ManageProfessionContext.tsx
index 1ec9abb..6639f90 100644
--- a/src/pages/master/profession/hooks/ManageProfessionContext.tsx
+++ b/src/pages/master/profession/hooks/ManageProfessionContext.tsx
@@ -102,7 +102,7 @@ const ManageProfessionContextProvider = ({ children }: { children: React.ReactNo
           );
         },
         meta: {
-          headerClassName: 'w-[100px]',
+          headerClassName: 'w-[100px] text-center',
           cellClassName: 'text-center'
         }
       }
@@ -151,7 +151,7 @@ const ManageProfessionContextProvider = ({ children }: { children: React.ReactNo
         pagination={{ size: 10 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
-        sorting={[{ id: 'id', desc: false }]}
+        sorting={[{ id: 'name', desc: false }]}
         serverSide={true}
         onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
           getProfessionLists(pageIndex, pageSize, sorting, columnFilters)
diff --git a/src/pages/master/provider/blocks/ListToolbar.tsx b/src/pages/master/provider/blocks/ListToolbar.tsx
index 6915202..b60b23f 100644
--- a/src/pages/master/provider/blocks/ListToolbar.tsx
+++ b/src/pages/master/provider/blocks/ListToolbar.tsx
@@ -1,10 +1,23 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageProviderContext } from '../hooks/useManageProviderContext';
 import { Button } from '@/components/ui/button';
+import { useState } from 'react';
 
 const ListToolbar = () => {
   const { reload, table } = useDataGrid();
   const { handleAddDialog } = useManageProviderContext();
+  const [searchProvider, setSearchProvider] = useState('');
+  
+  const handleSearch = () =>{
+    table.getColumn('name')?.setFilterValue(searchProvider);
+    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">
@@ -16,12 +29,18 @@ const ListToolbar = () => {
               <input
                 type="text"
                 placeholder="Search Provider"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                value={searchProvider}
                 onChange={(event) =>
-                  table.getColumn('name')?.setFilterValue(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"
diff --git a/src/pages/master/provider/hooks/ManageProviderContext.tsx b/src/pages/master/provider/hooks/ManageProviderContext.tsx
index 0df1c51..fd29bca 100644
--- a/src/pages/master/provider/hooks/ManageProviderContext.tsx
+++ b/src/pages/master/provider/hooks/ManageProviderContext.tsx
@@ -129,7 +129,7 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
           );
         },
         meta: {
-          headerClassName: 'w-[100px]',
+          headerClassName: 'w-[100px] text-center',
           cellClassName: 'text-center'
         }
       },
@@ -158,7 +158,7 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
           );
         },
         meta: {
-          headerClassName: 'w-[100px]',
+          headerClassName: 'w-[100px] text-center',
           cellClassName: 'text-center'
         }
       }
diff --git a/src/pages/master/reward/blocks/ListToolbar.tsx b/src/pages/master/reward/blocks/ListToolbar.tsx
index 5c85468..764e826 100644
--- a/src/pages/master/reward/blocks/ListToolbar.tsx
+++ b/src/pages/master/reward/blocks/ListToolbar.tsx
@@ -1,10 +1,23 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { Button } from '@/components/ui/button';
 import { useManageRewardContext } from '../hooks/useManageRewardContext';
+import { useState } from 'react';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useManageRewardContext();
+  const [searchReward, setSearchReward] = useState('');
+
+  const handleSearch = () =>{
+    table.getColumn('name')?.setFilterValue(searchReward);
+    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">
@@ -16,10 +29,16 @@ const ListToolbar = () => {
               <input
                 type="text"
                 placeholder="Search Reward"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+                value={searchReward}
+                onChange={(event) => setSearchReward(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
diff --git a/src/pages/master/reward/hooks/ManageRewardContext.tsx b/src/pages/master/reward/hooks/ManageRewardContext.tsx
index 32b8116..1d4d2f3 100644
--- a/src/pages/master/reward/hooks/ManageRewardContext.tsx
+++ b/src/pages/master/reward/hooks/ManageRewardContext.tsx
@@ -110,7 +110,8 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
           );
         },
         meta: {
-          headerClassName: 'w-[250px]'
+          headerClassName: 'w-[250px] text-center',
+          cellClassName: 'text-center'
         }
       },
       {
@@ -138,7 +139,7 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
           );
         },
         meta: {
-          heaaderClassName: 'w-[100px]',
+          headerClassName: 'w-[100px] text-center',
           cellClassName: 'text-center'
         }
       }