fixing managemember

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

@@ -3,7 +3,6 @@ import { apiConfig } from '@/config/api.config';
 import { getColumns, Members, initialMember } from './Columns';
 import { useState, useEffect } from 'react';
 import axios from 'axios';
-// import CustomerDialog from './CustomerDetailModal';
 import DetailMember from './blocks/DetailMember';
 import ConfirmDialog from '@/components/confirm';
 import { useAuthContext } from '@/auth';
@@ -15,6 +14,7 @@ const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
 const BASE_URL = apiConfig.service_customer;
 import { Helmet } from 'react-helmet';
 import ListToolbar from './blocks/ListToolBar';
+import { RefreshCw } from 'lucide-react';
 const ManageMembers = () => {
   const [loading, setLoading] = useState(false);
   const [members, setMembers] = useState([]);
@@ -24,6 +24,7 @@ const ManageMembers = () => {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [dialogType, setDialogType] = useState('');
+  const [isReloading, setIsReloading] = useState(false);
   const closeDialog = () => {
     setIsDialogOpen(false);
     setMember(initialMember);
@@ -36,7 +37,7 @@ const ManageMembers = () => {
     setLoading(false);
   }, []);
 
-  async function fetchCustomers() {
+  async function fetchCustomers(): Promise<void> {
     try {
       let customers = await axios.get(`${BASE_URL}/customer/list`, {
         params: {
@@ -46,7 +47,7 @@ const ManageMembers = () => {
           order_field: 'created_at',
           order_direction: 'DESC'
         }
-      });
+      }); 
       let temp = 1;
       let resMembers = customers.data.data.list.map((el: any) => {
         el.no = temp++;
@@ -71,8 +72,12 @@ const ManageMembers = () => {
     } catch (error: any) {
       toast.error(error.message);
       console.log(error);
+    } finally {
+      setLoading(false)
+      setIsReloading(false);
     }
   }
+  
 
   const handleUpdate = (data: any) => {
     setDialogType('update');
@@ -92,7 +97,10 @@ const ManageMembers = () => {
     setMember(data);
     setDialogOpen(true);
   }
-
+  const handleReload = () => {
+    setIsReloading(true);
+    fetchCustomers();
+  };
   const handleYes = async () => {
     setLoading(true);
     const userLogin: any = await getUser();
@@ -225,20 +233,29 @@ const ManageMembers = () => {
           </Link>
         </Breadcrumbs>
         {/* <div className="w-full overflow-x-auto px-4"> */}
-        <div className="grid gap-5 lg:gap-7.5 mt-5">
-          <DataGridProvider
-            data={members}
-            pagination={{ size: 25 }}
-            columns={getColumns(handleUpdate)}
-            layout={{ card: true }}
-            serverSide={false}
-            toolbar={<ListToolbar createMember={createMember} />}
-            onRowSelectionChange={(selected, table: any) => {
-              const selectedRow = table.getSelectedRowModel().rows[0];
-              if (selectedRow) handleUpdate(selectedRow.original);
-            }}
-          ></DataGridProvider>
-        </div>
+        
+        <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}
+    pagination={{ size: 20 }}
+    columns={getColumns(handleUpdate)}
+    layout={{ card: true }}
+    serverSide={false}
+    toolbar={<ListToolbar createMember={createMember} onReload={handleReload} isReloading={isReloading} />}
+    onRowSelectionChange={(selected, table: any) => {
+      const selectedRow = table.getSelectedRowModel().rows[0];
+      if (selectedRow) handleUpdate(selectedRow.original);
+    }}
+  ></DataGridProvider>
+</div>
         {/* </div> */}
       </Container>
     </>