fix refresh on kyc

src/pages/members/kyc/blocks/ListToolBar.tsx

@@ -1,40 +1,45 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { Button } from '@/components/ui/button';
 import { useKycContext } from '../hooks';
+import { useState } from 'react';
 
-const ListToolBar = () => {
+interface ListToolbarProps {
+  onReload: () => void;
+  isReloading: boolean;
+}
+
+const ListToolBar = ({ onReload, isReloading }: ListToolbarProps) => {
   const { table, reload } = useDataGrid();
+  const [usernameFilter, setUsernameFilter] = useState('');
+
+  const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setUsernameFilter(e.target.value);
+    table.getColumn('username')?.setFilterValue(e.target.value);
+  };
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
         <div className="flex justify-between w-full items-center">
-          <div className="flex w-[50%] gap-3 items-center">
-            <label className="input input-sm w-1/3">
-              <KeenIcon icon="magnifier" />
-              <input
-                type="text"
-                placeholder="Search users"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
-              />
-            </label>
-            <DefaultTooltip title={'Filter'} placement={'top'}>
-              <Button
-                variant="outline"
-                className="h-7.5 disabled:bg-gray-400"
-                // disabled={isLoading}
-                // onClick={handleFilterData}
-              >
-                {/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
-                <KeenIcon icon="filter" />
-              </Button>
-            </DefaultTooltip>
+          <div className="flex gap-3 items-center">
+            <input
+              type="text"
+              placeholder="Search Username"
+              value={usernameFilter}
+              onChange={handleUsernameChange}
+              className="input input-sm w-40"
+            />
           </div>
           <div className="flex gap-3 items-center">
-            <DefaultTooltip title={'Refresh'} placement={'top'}>
-              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
-                <KeenIcon icon="arrows-circle" />
+            <DefaultTooltip title={isReloading ? 'Refreshing...' : 'Refresh'} placement={'top'}>
+              <Button variant="outline" className="h-7.5" onClick={onReload} disabled={isReloading}>
+                {isReloading ? (
+                  <div className="animate-spin">
+                    <KeenIcon icon="arrows-circle" />
+                  </div>
+                ) : (
+                  <KeenIcon icon="arrows-circle" />
+                )}
               </Button>
             </DefaultTooltip>
           </div>