This commit is contained in:
Raja Oktafrianto
2025-04-28 14:49:15 +07:00
5 changed files with 54 additions and 48 deletions

View File

@ -4,9 +4,9 @@ import { RefreshCw } from 'lucide-react';
export const DataGridLoader = () => { export const DataGridLoader = () => {
return ( 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="fixed inset-0 bg-white/50 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="bg-white flex items-center rounded-3xl">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center p-5">
<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>

View File

@ -32,7 +32,7 @@ const HeaderTopbar = () => {
<span <span
className={`font-semibold text-lg leading-tight ${isSticky ? 'text-black' : 'text-white'}`} className={`font-semibold text-lg leading-tight ${isSticky ? 'text-black' : 'text-white'}`}
> >
{getAuth()?.user.username} {getAuth()?.user.name}
</span> </span>
<span className={`text-xs ${isSticky ? 'text-gray-700' : 'text-white'}`}> <span className={`text-xs ${isSticky ? 'text-gray-700' : 'text-white'}`}>
as {getAuth()?.role_name} as {getAuth()?.role_name}

View File

@ -1,6 +1,7 @@
import { import {
Container, Container,
DataGridInner, DataGridInner,
DataGridLoader,
DataGridProvider, DataGridProvider,
TDataGridProps, TDataGridProps,
useDataGrid useDataGrid
@ -36,11 +37,8 @@ const Kyc = () => {
}; };
const { getUser } = useAuthContext(); const { getUser } = useAuthContext();
useEffect(() => {
fetchCustomers();
}, [member]);
async function fetchCustomers() { async function fetchCustomers() {
setIsReloading(true);
try { try {
let customers = await axios.get(`${BASE_URL}/customer/list`, { let customers = await axios.get(`${BASE_URL}/customer/list`, {
params: { params: {
@ -73,7 +71,7 @@ const Kyc = () => {
toast.error(error.message); toast.error(error.message);
console.log(error); console.log(error);
} finally { } finally {
setLoading(false); // setLoading(false);
setIsReloading(false); setIsReloading(false);
} }
} }
@ -101,7 +99,7 @@ const Kyc = () => {
}; };
const handleYes = async () => { const handleYes = async () => {
setLoading(true); // setLoading(true);
const userLogin: any = await getUser(); const userLogin: any = await getUser();
const updateData: any = member; const updateData: any = member;
const customerId = member.id; const customerId = member.id;
@ -179,7 +177,7 @@ const Kyc = () => {
setDialogOpen(false); setDialogOpen(false);
setIsDialogOpen(false); setIsDialogOpen(false);
await fetchCustomers(); await fetchCustomers();
setLoading(false); // setLoading(false);
setIsReloading(false); setIsReloading(false);
} }
}; };
@ -188,7 +186,11 @@ const Kyc = () => {
setIsDialogOpen(el); setIsDialogOpen(el);
} }
if (loading) return <LoaderTransparant />; useEffect(() => {
fetchCustomers();
}, [member]);
// if (isReloading) return <DataGridLoader />;
return ( return (
<> <>
@ -237,12 +239,13 @@ const Kyc = () => {
{/* <div className="w-full overflow-x-auto"> */} {/* <div className="w-full overflow-x-auto"> */}
<div className="grid gap-5 lg:gap-7.5 mt-5 relative"> <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"> <DataGridLoader />
<div className="flex flex-col items-center"> // <div className="absolute inset-0 bg-white/70 z-10 flex items-center justify-center">
<RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" /> // <div className="flex flex-col items-center">
<span className="text-slate-500 font-medium">Refreshing data...</span> // <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
</div> // <span className="text-slate-500 font-medium">Refreshing data...</span>
</div> // </div>
// </div>
)} )}
<DataGridProvider <DataGridProvider
data={members} data={members}

View File

@ -6,7 +6,7 @@ import axios from 'axios';
import DetailMember from './blocks/DetailMember'; import DetailMember from './blocks/DetailMember';
import ConfirmDialog from '@/components/confirm'; import ConfirmDialog from '@/components/confirm';
import { useAuthContext } from '@/auth'; import { useAuthContext } from '@/auth';
import { Container, DataGridInner, LoaderTransparant } from '@/components'; import { Container, DataGridInner, DataGridLoader, LoaderTransparant } from '@/components';
import { DataGridProvider } from '@/components'; import { DataGridProvider } from '@/components';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { Breadcrumbs, Link } from '@mui/material'; import { Breadcrumbs, Link } from '@mui/material';
@ -34,13 +34,8 @@ const ManageMembers = () => {
}; };
const { getUser } = useAuthContext(); const { getUser } = useAuthContext();
useEffect(() => {
setLoading(true);
fetchCustomers();
setLoading(false);
}, []);
async function fetchCustomers(): Promise<void> { async function fetchCustomers(): Promise<void> {
setIsReloading(true);
try { try {
let customers = await axios.get(`${BASE_URL}/customer/list`, { let customers = await axios.get(`${BASE_URL}/customer/list`, {
params: { params: {
@ -62,6 +57,8 @@ const ManageMembers = () => {
return el; return el;
}); });
setMembers(resMembers); setMembers(resMembers);
// setIsReloading(false);
let getProfession: any = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, { let getProfession: any = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, {
params: { params: {
limit: 50, limit: 50,
@ -86,7 +83,7 @@ const ManageMembers = () => {
toast.error(error.message); toast.error(error.message);
console.log(error); console.log(error);
} finally { } finally {
setLoading(false); // setLoading(false);
setIsReloading(false); setIsReloading(false);
} }
} }
@ -115,8 +112,9 @@ const ManageMembers = () => {
}; };
const handleYes = async () => { const handleYes = async () => {
setIsReloading(true);
try { try {
setLoading(true); // setLoading(true);
const userLogin: any = await getUser(); const userLogin: any = await getUser();
const updateData: any = member; const updateData: any = member;
updateData.updated_by = userLogin.data ? userLogin.data.id : ''; updateData.updated_by = userLogin.data ? userLogin.data.id : '';
@ -193,14 +191,14 @@ const ManageMembers = () => {
} }
} catch (error: any) { } catch (error: any) {
if (error?.response?.data?.message) { if (error?.response?.data?.message) {
toast.error(`${error?.response?.data?.error}.\n${error?.response?.data?.message}`) toast.error(`${error?.response?.data?.error}.\n${error?.response?.data?.message}`);
} } else toast.error(error.message);
else toast.error(error.message);
} finally { } finally {
setDialogOpen(false); setDialogOpen(false);
closeDialog(); closeDialog();
await fetchCustomers(); await fetchCustomers();
setLoading(false); // setLoading(false);
setIsReloading(false);
} }
}; };
@ -208,7 +206,11 @@ const ManageMembers = () => {
setIsDialogOpen(el); setIsDialogOpen(el);
} }
if (loading) return <LoaderTransparant />; useEffect(() => {
fetchCustomers();
}, []);
// if (isReloading) return <DataGridLoader />;
return ( return (
<> <>
@ -255,14 +257,15 @@ const ManageMembers = () => {
<div className="grid gap-5 lg:gap-7.5 mt-5 relative"> <div className="grid gap-5 lg:gap-7.5 mt-5 relative">
{isReloading && ( {isReloading && (
<div className="fixed inset-0 bg-transparent flex items-center justify-center z-50 text-muted-foreground px-4 py-2"> <DataGridLoader />
<div className="bg-card flex items-center border shadow-sm rounded-md"> // <div className="fixed inset-0 bg-transparent flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
<div className="flex flex-col items-center"> // <div className="bg-card flex items-center border shadow-sm rounded-md">
<RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" /> // <div className="flex flex-col items-center">
<span className="text-slate-500 font-medium">Refreshing data...</span> // <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
</div> // <span className="text-slate-500 font-medium">Refreshing data...</span>
</div> // </div>
</div> // </div>
// </div>
)} )}
<DataGridProvider <DataGridProvider
data={members} data={members}

View File

@ -45,7 +45,7 @@ const DropdownUser = ({ menuItemRef }: IDropdownUserProps) => {
alt="" alt=""
/> */} /> */}
<div className="flex flex-col"> <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"> <p className="text-xs text-gray-600 hover:text-primary font-medium leading-none">
{auth?.user.email} {auth?.user.email}
</p> </p>