fix detail member

src/pages/members/kyc/Kyc.tsx

@@ -1,8 +1,13 @@
-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';
-import { ManageKycContextProvider } from './hooks';
 import { getColumns, initialMember } from './Columns';
 import { useAuthContext } from '@/auth';
 import { LoaderTransparant } from '@/components';
@@ -17,6 +22,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 +32,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 +72,9 @@ const Kyc = () => {
     } catch (error: any) {
       toast.error(error.message);
       console.log(error);
+    } finally {
+      setLoading(false);
+      setIsReloading(false);
     }
   }
 
@@ -85,6 +95,15 @@ const Kyc = () => {
     setDialogOpen(true);
   }
 
+  const resetForm = () => {
+    setMember(initialMember);
+  };
+
+  const handleReload = () => {
+    setIsReloading(true);
+    fetchCustomers();
+  };
+
   const handleYes = async () => {
     setLoading(true);
     const userLogin: any = await getUser();
@@ -165,6 +184,7 @@ const Kyc = () => {
       setIsDialogOpen(false);
       await fetchCustomers();
       setLoading(false);
+      setIsReloading(false);
     }
   };
 
@@ -227,12 +247,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}