fix refresh on kyc

src/pages/members/kyc/Kyc.tsx

@@ -1,4 +1,10 @@
-import { Container, DataGridInner, DataGridProvider, TDataGridProps } from '@/components';
+import {
+  Container,
+  DataGridInner,
+  DataGridProvider,
+  TDataGridProps,
+  useDataGrid
+} from '@/components';
 import { DataTable } from '@/components/ui/DataTable';
 import { Table } from '@tanstack/react-table';
 import React, { createContext, useContext, useState, useEffect } from 'react';
@@ -17,6 +23,7 @@ import DetailMember from '../manage-members/blocks/DetailMember';
 import { Breadcrumbs, Link } from '@mui/material';
 import { Helmet } from 'react-helmet';
 import { ListToolBar } from './blocks/ListToolBar';
+import { RefreshCw } from 'lucide-react';
 
 const Kyc = () => {
   const [loading, setLoading] = useState(false);
@@ -26,6 +33,7 @@ const Kyc = () => {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [dialogType, setDialogType] = useState('');
+  const [isReloading, setIsReloading] = useState(false);
   const closeDialog = () => setIsDialogOpen(false);
   const { getUser } = useAuthContext();
 
@@ -65,6 +73,9 @@ const Kyc = () => {
     } catch (error: any) {
       toast.error(error.message);
       console.log(error);
+    } finally {
+      setLoading(false);
+      setIsReloading(false);
     }
   }
 
@@ -89,6 +100,11 @@ const Kyc = () => {
     setMember(initialMember);
   };
 
+  const handleReload = () => {
+    setIsReloading(true);
+    fetchCustomers();
+  };
+
   const handleYes = async () => {
     setLoading(true);
     const userLogin: any = await getUser();
@@ -172,6 +188,7 @@ const Kyc = () => {
     } finally {
       await fetchCustomers();
       setLoading(false);
+      setIsReloading(false);
     }
   };
 
@@ -237,12 +254,20 @@ const Kyc = () => {
           </Link>
         </Breadcrumbs>
         {/* <div className="w-full overflow-x-auto"> */}
-        <div className="grid gap-5 lg:gap-7.5 mt-5">
+        <div className="grid gap-5 lg:gap-7.5 mt-5 relative">
+          {isReloading && (
+            <div className="absolute inset-0 bg-white/70 z-10 flex items-center justify-center">
+              <div className="flex flex-col items-center">
+                <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
+                <span className="text-slate-500 font-medium">Refreshing data...</span>
+              </div>
+            </div>
+          )}
           <DataGridProvider
             data={members}
             columns={getColumns(handleUpdate)}
             pagination={{ size: 25 }}
-            toolbar={<ListToolBar />}
+            toolbar={<ListToolBar onReload={handleReload} isReloading={isReloading} />}
             layout={{ card: true }}
             sorting={[{ id: 'created_at', desc: true }]}
             serverSide={false}

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">
+          <div className="flex gap-3 items-center">
-            <label className="input input-sm w-1/3">
+            <input
-              <KeenIcon icon="magnifier" />
+              type="text"
-              <input
+              placeholder="Search Username"
-                type="text"
+              value={usernameFilter}
-                placeholder="Search users"
+              onChange={handleUsernameChange}
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+              className="input input-sm w-40"
-                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>
           <div className="flex gap-3 items-center">
-            <DefaultTooltip title={'Refresh'} placement={'top'}>
+            <DefaultTooltip title={isReloading ? 'Refreshing...' : 'Refresh'} placement={'top'}>
-              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+              <Button variant="outline" className="h-7.5" onClick={onReload} disabled={isReloading}>
-                <KeenIcon icon="arrows-circle" />
+                {isReloading ? (
+                  <div className="animate-spin">
+                    <KeenIcon icon="arrows-circle" />
+                  </div>
+                ) : (
+                  <KeenIcon icon="arrows-circle" />
+                )}
               </Button>
             </DefaultTooltip>
           </div>

src/pages/members/manage-members/ManageMembers.tsx

@@ -73,12 +73,11 @@ const ManageMembers = () => {
       toast.error(error.message);
       console.log(error);
     } finally {
-      setLoading(false)
+      setLoading(false);
       setIsReloading(false);
     }
   }
 
-
   const handleUpdate = (data: any) => {
     setDialogType('update');
     setSelectedMember(data.id);
@@ -235,27 +234,33 @@ const ManageMembers = () => {
         {/* <div className="w-full overflow-x-auto px-4"> */}
 
         <div className="grid gap-5 lg:gap-7.5 mt-5 relative">
-  {isReloading && (
+          {isReloading && (
-    <div className="absolute inset-0 bg-white/70 z-10 flex items-center justify-center">
+            <div className="absolute inset-0 bg-white/70 z-10 flex items-center justify-center">
-      <div className="flex flex-col items-center">
+              <div className="flex flex-col items-center">
-        <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
+                <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
-        <span className="text-slate-500 font-medium">Refreshing data...</span>
+                <span className="text-slate-500 font-medium">Refreshing data...</span>
-      </div>
+              </div>
-    </div>
+            </div>
-  )}
+          )}
-  <DataGridProvider
+          <DataGridProvider
-    data={members}
+            data={members}
-    pagination={{ size: 20 }}
+            pagination={{ size: 25 }}
-    columns={getColumns(handleUpdate)}
+            columns={getColumns(handleUpdate)}
-    layout={{ card: true }}
+            layout={{ card: true }}
-    serverSide={false}
+            serverSide={false}
-    toolbar={<ListToolbar createMember={createMember} onReload={handleReload} isReloading={isReloading} />}
+            toolbar={
-    onRowSelectionChange={(selected, table: any) => {
+              <ListToolbar
-      const selectedRow = table.getSelectedRowModel().rows[0];
+                createMember={createMember}
-      if (selectedRow) handleUpdate(selectedRow.original);
+                onReload={handleReload}
-    }}
+                isReloading={isReloading}
-  ></DataGridProvider>
+              />
-</div>
+            }
+            onRowSelectionChange={(selected, table: any) => {
+              const selectedRow = table.getSelectedRowModel().rows[0];
+              if (selectedRow) handleUpdate(selectedRow.original);
+            }}
+          ></DataGridProvider>
+        </div>
         {/* </div> */}
       </Container>
     </>