adding button on search on masterdata

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

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'
         }
       }