From 86b3bf40e8835e04585d1dfa574eec2b8689fb26 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Mon, 28 Apr 2025 13:35:12 +0700
Subject: [PATCH 1/4] set username and name on tittle and dropdown profile
 button

---
 src/layouts/demo2/header/HeaderTopbar.tsx    | 2 +-
 src/partials/dropdowns/user/DropdownUser.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/demo2/header/HeaderTopbar.tsx b/src/layouts/demo2/header/HeaderTopbar.tsx
index 30e26f1..4786e5c 100644
--- a/src/layouts/demo2/header/HeaderTopbar.tsx
+++ b/src/layouts/demo2/header/HeaderTopbar.tsx
@@ -32,7 +32,7 @@ const HeaderTopbar = () => {
         <span
           className={`font-semibold text-lg leading-tight ${isSticky ? 'text-black' : 'text-white'}`}
         >
-          {getAuth()?.user.username}
+          {getAuth()?.user.name}
         </span>
         <span className={`text-xs ${isSticky ? 'text-gray-700' : 'text-white'}`}>
           as {getAuth()?.role_name}
diff --git a/src/partials/dropdowns/user/DropdownUser.tsx b/src/partials/dropdowns/user/DropdownUser.tsx
index c272635..e7e523d 100644
--- a/src/partials/dropdowns/user/DropdownUser.tsx
+++ b/src/partials/dropdowns/user/DropdownUser.tsx
@@ -45,7 +45,7 @@ const DropdownUser = ({ menuItemRef }: IDropdownUserProps) => {
             alt=""
           /> */}
           <div className="flex flex-col">
-            <p className="text-[14px] text-gray-800 font-semibold">{auth?.user.name}</p>
+            <p className="text-[14px] text-gray-800 font-semibold">{auth?.user.username}</p>
             <p className="text-xs text-gray-600 hover:text-primary font-medium leading-none">
               {auth?.user.email}
             </p>

From 02bc3dc4b9cf5a58bec7e0bd070096e13c544141 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Mon, 28 Apr 2025 13:53:40 +0700
Subject: [PATCH 2/4] fix loader animation on DataGridLoader

---
 src/components/data-grid/DataGridLoader.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/data-grid/DataGridLoader.tsx b/src/components/data-grid/DataGridLoader.tsx
index 03666a5..31334ad 100644
--- a/src/components/data-grid/DataGridLoader.tsx
+++ b/src/components/data-grid/DataGridLoader.tsx
@@ -4,9 +4,9 @@ import { RefreshCw } from 'lucide-react';
 
 export const DataGridLoader = () => {
   return (
-    <div className="fixed inset-0 bg-white/25 flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
-      <div className="bg-card flex items-center border shadow-sm rounded-md">
-        <div className="flex flex-col items-center">
+    <div className="absolute inset-0 bg-white/50 flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
+      <div className="bg-white flex items-center rounded-3xl">
+        <div className="flex flex-col items-center p-5">
           <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
           <span className="text-slate-500 font-medium">Refreshing data...</span>
         </div>

From 6d02b7787aa8bae4850aebc094b4f814c429db3f Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Mon, 28 Apr 2025 13:54:58 +0700
Subject: [PATCH 3/4] fix replacing the loader by using a DataGridLoader

---
 src/pages/members/kyc/Kyc.tsx                 | 31 +++++-----
 .../members/manage-members/ManageMembers.tsx  | 61 ++++++++++---------
 2 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/src/pages/members/kyc/Kyc.tsx b/src/pages/members/kyc/Kyc.tsx
index bf04b12..0d226a4 100644
--- a/src/pages/members/kyc/Kyc.tsx
+++ b/src/pages/members/kyc/Kyc.tsx
@@ -1,6 +1,7 @@
 import {
   Container,
   DataGridInner,
+  DataGridLoader,
   DataGridProvider,
   TDataGridProps,
   useDataGrid
@@ -36,11 +37,8 @@ const Kyc = () => {
   };
   const { getUser } = useAuthContext();
 
-  useEffect(() => {
-    fetchCustomers();
-  }, [member]);
-
   async function fetchCustomers() {
+    setIsReloading(true);
     try {
       let customers = await axios.get(`${BASE_URL}/customer/list`, {
         params: {
@@ -73,7 +71,7 @@ const Kyc = () => {
       toast.error(error.message);
       console.log(error);
     } finally {
-      setLoading(false);
+      // setLoading(false);
       setIsReloading(false);
     }
   }
@@ -101,7 +99,7 @@ const Kyc = () => {
   };
 
   const handleYes = async () => {
-    setLoading(true);
+    // setLoading(true);
     const userLogin: any = await getUser();
     const updateData: any = member;
     const customerId = member.id;
@@ -179,7 +177,7 @@ const Kyc = () => {
       setDialogOpen(false);
       setIsDialogOpen(false);
       await fetchCustomers();
-      setLoading(false);
+      // setLoading(false);
       setIsReloading(false);
     }
   };
@@ -188,7 +186,11 @@ const Kyc = () => {
     setIsDialogOpen(el);
   }
 
-  if (loading) return <LoaderTransparant />;
+  useEffect(() => {
+    fetchCustomers();
+  }, [member]);
+
+  // if (isReloading) return <DataGridLoader />;
 
   return (
     <>
@@ -237,12 +239,13 @@ const Kyc = () => {
         {/* <div className="w-full overflow-x-auto"> */}
         <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>
+            <DataGridLoader />
+            // <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}
diff --git a/src/pages/members/manage-members/ManageMembers.tsx b/src/pages/members/manage-members/ManageMembers.tsx
index f676bbc..79f246e 100644
--- a/src/pages/members/manage-members/ManageMembers.tsx
+++ b/src/pages/members/manage-members/ManageMembers.tsx
@@ -6,7 +6,7 @@ import axios from 'axios';
 import DetailMember from './blocks/DetailMember';
 import ConfirmDialog from '@/components/confirm';
 import { useAuthContext } from '@/auth';
-import { Container, DataGridInner, LoaderTransparant } from '@/components';
+import { Container, DataGridInner, DataGridLoader, LoaderTransparant } from '@/components';
 import { DataGridProvider } from '@/components';
 import { toast } from 'sonner';
 import { Breadcrumbs, Link } from '@mui/material';
@@ -34,13 +34,8 @@ const ManageMembers = () => {
   };
   const { getUser } = useAuthContext();
 
-  useEffect(() => {
-    setLoading(true);
-    fetchCustomers();
-    setLoading(false);
-  }, []);
-
   async function fetchCustomers(): Promise<void> {
+    setIsReloading(true);
     try {
       let customers = await axios.get(`${BASE_URL}/customer/list`, {
         params: {
@@ -62,6 +57,8 @@ const ManageMembers = () => {
         return el;
       });
       setMembers(resMembers);
+      // setIsReloading(false);
+
       let getProfession: any = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, {
         params: {
           limit: 50,
@@ -73,20 +70,20 @@ const ManageMembers = () => {
       });
       setProfession(getProfession.data.data.list);
       let getGroups = await axios.get(`${BASE_URL_CUSTOMER}/groups/list`, {
-          params: {
-            limit: 50,
-            page: 1,
-            with_deleted: false,
-            order_field: 'name',
-            order_direction: 'ASC'
-          }
+        params: {
+          limit: 50,
+          page: 1,
+          with_deleted: false,
+          order_field: 'name',
+          order_direction: 'ASC'
+        }
       });
       setGroups(getGroups.data.data.list);
     } catch (error: any) {
       toast.error(error.message);
       console.log(error);
     } finally {
-      setLoading(false);
+      // setLoading(false);
       setIsReloading(false);
     }
   }
@@ -115,8 +112,9 @@ const ManageMembers = () => {
   };
 
   const handleYes = async () => {
+    setIsReloading(true);
     try {
-      setLoading(true);
+      // setLoading(true);
       const userLogin: any = await getUser();
       const updateData: any = member;
       updateData.updated_by = userLogin.data ? userLogin.data.id : '';
@@ -193,14 +191,14 @@ const ManageMembers = () => {
       }
     } catch (error: any) {
       if (error?.response?.data?.message) {
-        toast.error(`${error?.response?.data?.error}.\n${error?.response?.data?.message}`)
-      }
-      else toast.error(error.message);
+        toast.error(`${error?.response?.data?.error}.\n${error?.response?.data?.message}`);
+      } else toast.error(error.message);
     } finally {
       setDialogOpen(false);
       closeDialog();
       await fetchCustomers();
-      setLoading(false);
+      // setLoading(false);
+      setIsReloading(false);
     }
   };
 
@@ -208,7 +206,11 @@ const ManageMembers = () => {
     setIsDialogOpen(el);
   }
 
-  if (loading) return <LoaderTransparant />;
+  useEffect(() => {
+    fetchCustomers();
+  }, []);
+
+  // if (isReloading) return <DataGridLoader />;
 
   return (
     <>
@@ -255,14 +257,15 @@ const ManageMembers = () => {
 
         <div className="grid gap-5 lg:gap-7.5 mt-5 relative">
           {isReloading && (
-            <div className="fixed inset-0 bg-transparent flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
-              <div className="bg-card flex items-center border shadow-sm rounded-md">
-                <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>
-            </div>
+            <DataGridLoader />
+            // <div className="fixed inset-0 bg-transparent flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
+            //   <div className="bg-card flex items-center border shadow-sm rounded-md">
+            //     <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>
+            // </div>
           )}
           <DataGridProvider
             data={members}

From ade89ae9936013c856be7a9d47b19748a4c650a7 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Mon, 28 Apr 2025 14:26:30 +0700
Subject: [PATCH 4/4] fix animation loader

---
 src/components/data-grid/DataGridLoader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/data-grid/DataGridLoader.tsx b/src/components/data-grid/DataGridLoader.tsx
index 31334ad..4802bb6 100644
--- a/src/components/data-grid/DataGridLoader.tsx
+++ b/src/components/data-grid/DataGridLoader.tsx
@@ -4,7 +4,7 @@ import { RefreshCw } from 'lucide-react';
 
 export const DataGridLoader = () => {
   return (
-    <div className="absolute inset-0 bg-white/50 flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
+    <div className="fixed inset-0 bg-white/50 flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
       <div className="bg-white flex items-center rounded-3xl">
         <div className="flex flex-col items-center p-5">
           <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />