256 lines
12 KiB
JavaScript
256 lines
12 KiB
JavaScript
import FullPageLayout from "@/layouts/FullPageLayout";
|
|
import CenterLayout from "@/layouts/CenterLayout";
|
|
import {Box, Stack, Typography, Card, CardContent, CardHeader, useTheme, useMediaQuery} from "@mui/material";
|
|
import { useEffect, useState } from "react";
|
|
import useRequest from "@/lib/app/hooks/useRequest";
|
|
import {useTranslations} from "next-intl";
|
|
import {GET_LOAN_STATISTICS} from "@/core/data/apiRoutes";
|
|
|
|
const DashboardFirstComponent = () => {
|
|
const theme = useTheme();
|
|
const t = useTranslations();
|
|
const requestServer = useRequest({ auth: true, notification: false });
|
|
const [data, setData] = useState(null);
|
|
const isXL = useMediaQuery(theme.breakpoints.up('xl'));
|
|
|
|
useEffect(() => {
|
|
requestServer(
|
|
`${GET_LOAN_STATISTICS}`,
|
|
"get"
|
|
)
|
|
.then((res) => {
|
|
setData(res.data.data);
|
|
})
|
|
.catch(() => {});
|
|
}, []);
|
|
|
|
if (!data) return "";
|
|
|
|
return (
|
|
<>
|
|
<FullPageLayout>
|
|
<CenterLayout>
|
|
<Stack sx={{ display: 'flex', justifyContent: 'center', gap: '20px' ,width: '100%' , flexDirection: "row",padding: 3, alignItems: 'flex-end',}}>
|
|
<Card sx={{height:"200px" , width: '20%', boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px", borderRadius: '5px' }}>
|
|
<CardHeader
|
|
sx={{
|
|
height: '50px',
|
|
backgroundColor: 'rgba(8, 64, 112, 0.08)',
|
|
color: 'primary.main',
|
|
textAlign:'center',
|
|
}}
|
|
titleTypographyProps={{
|
|
variant: 'body1',
|
|
style: {
|
|
textAlign: 'center',
|
|
fontWeight: 'bold',
|
|
},
|
|
sx: {
|
|
[theme.breakpoints.down('xl')]: {
|
|
fontSize: '12px',
|
|
},
|
|
}
|
|
}}
|
|
title={t("Dashboard.total_number_loan_offers")}
|
|
/>
|
|
<CardContent sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent:'center', height: 'calc(100% - 50px)', padding: "0 !important"}}>
|
|
<Box
|
|
sx={{
|
|
borderBottom: '6px solid',
|
|
borderColor: 'primary.main',
|
|
borderRadius: '6px 6px 6px 6px',
|
|
width: '90%',
|
|
textAlign:'center',
|
|
}}
|
|
>
|
|
<Typography variant={isXL ? 'h5' : 'h6'} sx={{lineHeight: 1.5 , fontWeight:'bold'}}>
|
|
{Number(data.proposedCount).toLocaleString("en")}
|
|
</Typography>
|
|
</Box>
|
|
<Box component={'img'} sx={{width: '40px', height: '40px', mt:2}}
|
|
src={'/images/pie-chart.png'}/>
|
|
</CardContent>
|
|
</Card>
|
|
<Card sx={{height:"250px" , width: '20%', boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px", borderRadius: '5px' }}>
|
|
<CardHeader
|
|
sx={{
|
|
height: '50px',
|
|
backgroundColor: 'rgba(8, 64, 112, 0.08)',
|
|
color: 'primary.main',
|
|
textAlign:'center',
|
|
fontSize: '14px',
|
|
fontWeight: 'bold',
|
|
}}
|
|
titleTypographyProps={{
|
|
variant: 'body1',
|
|
style: {
|
|
textAlign: 'center',
|
|
fontWeight: 'bold',
|
|
},
|
|
sx: {
|
|
[theme.breakpoints.down('xl')]: {
|
|
fontSize: '12px',
|
|
},
|
|
}
|
|
}}
|
|
title={t("Dashboard.total_amount_proposed_loan")}
|
|
/>
|
|
<CardContent sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent:'center', height: 'calc(100% - 50px)', padding: "0 !important"}}>
|
|
<Box
|
|
sx={{
|
|
borderBottom: '6px solid',
|
|
borderColor: 'primary.main',
|
|
borderRadius: '6px 6px 6px 6px',
|
|
width: '90%',
|
|
textAlign:'center',
|
|
}}
|
|
>
|
|
<Typography variant={isXL ? 'h5' : 'h6'} sx={{ lineHeight: 1.5, fontWeight: 'bold' }}>
|
|
{(Number(data.totalProposedAmount)/1000000).toLocaleString("en")}
|
|
<Box component="span" sx={{ fontSize: '9px' , paddingLeft: '3px'}}>
|
|
میلیون ریال
|
|
</Box>
|
|
</Typography>
|
|
</Box>
|
|
<Box component={'img'} sx={{width: '40px', height: '40px' , mt:2}}
|
|
src={'/images/rial.png'}/>
|
|
</CardContent>
|
|
</Card>
|
|
<Card sx={{height:"300px", width: '20%', boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px", borderRadius: '5px' }}>
|
|
<CardHeader
|
|
sx={{
|
|
height: '50px',
|
|
backgroundColor: 'rgba(8, 64, 112, 0.08)',
|
|
color: 'primary.main',
|
|
textAlign:'center',
|
|
fontSize: '14px',
|
|
fontWeight: 'bold',
|
|
}}
|
|
titleTypographyProps={{
|
|
variant: 'body1',
|
|
style: {
|
|
textAlign: 'center',
|
|
fontWeight: 'bold',
|
|
},
|
|
sx: {
|
|
[theme.breakpoints.down('xl')]: {
|
|
fontSize: '12px',
|
|
},
|
|
}
|
|
}}
|
|
title={t("Dashboard.total_number_requests")}
|
|
/>
|
|
<CardContent sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent:'center', height: 'calc(100% - 50px)', padding: "0 !important"}}>
|
|
<Box
|
|
sx={{
|
|
borderBottom: '6px solid',
|
|
borderColor: 'primary.main',
|
|
borderRadius: '6px 6px 6px 6px',
|
|
width: '90%',
|
|
textAlign:'center',
|
|
}}
|
|
>
|
|
<Typography variant={isXL ? 'h5' : 'h6'} sx={{lineHeight: 1.5 , fontWeight:'bold'}}>
|
|
{Number(data.totalApprovedLoans).toLocaleString("en")}
|
|
</Typography>
|
|
</Box>
|
|
<Box component={'img'} sx={{width: '40px', height: '40px' , mt:2}}
|
|
src={'/images/pie-chart.png'}/>
|
|
</CardContent>
|
|
</Card>
|
|
<Card sx={{height:"250px", width: '20%', boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px", borderRadius: '5px' }}>
|
|
<CardHeader
|
|
sx={{
|
|
height: '50px',
|
|
backgroundColor: 'rgba(8, 64, 112, 0.08)',
|
|
color: 'primary.main',
|
|
textAlign:'center',
|
|
fontSize: '14px',
|
|
fontWeight: 'bold',
|
|
}}
|
|
titleTypographyProps={{
|
|
variant: 'body1',
|
|
style: {
|
|
textAlign: 'center',
|
|
fontWeight: 'bold',
|
|
},
|
|
sx: {
|
|
[theme.breakpoints.down('xl')]: {
|
|
fontSize: '12px',
|
|
},
|
|
}
|
|
}}
|
|
title={t("Dashboard.total_amount_approved_loans")}
|
|
/>
|
|
<CardContent sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent:'center', height: 'calc(100% - 50px)', padding: "0 !important"}}>
|
|
<Box
|
|
sx={{
|
|
borderBottom: '6px solid',
|
|
borderColor: 'primary.main',
|
|
borderRadius: '6px 6px 6px 6px',
|
|
width: '90%',
|
|
textAlign:'center',
|
|
}}
|
|
>
|
|
<Typography variant={isXL ? 'h5' : 'h6'} sx={{ lineHeight: 1.5, fontWeight: 'bold' }}>
|
|
{(Number(data.totalApprovedAmount) / 1000000).toLocaleString("en")}
|
|
<Box component="span" sx={{ fontSize: '9px' , paddingLeft: '3px' }}>
|
|
میلیون ریال
|
|
</Box>
|
|
</Typography>
|
|
</Box>
|
|
<Box component={'img'} sx={{width: '40px', height: '40px' , mt:2}}
|
|
src={'/images/rial.png'}/>
|
|
</CardContent>
|
|
</Card>
|
|
<Card sx={{height:"200px", width: '20%', boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px", borderRadius: '5px' }}>
|
|
<CardHeader
|
|
sx={{
|
|
height: '50px',
|
|
backgroundColor: 'rgba(8, 64, 112, 0.08)',
|
|
color: 'primary.main',
|
|
textAlign:'center',
|
|
fontSize: '14px',
|
|
fontWeight: 'bold',
|
|
}}
|
|
titleTypographyProps={{
|
|
variant: 'body1',
|
|
style: {
|
|
textAlign: 'center',
|
|
fontWeight: 'bold',
|
|
},
|
|
sx: {
|
|
[theme.breakpoints.down('xl')]: {
|
|
fontSize: '12px',
|
|
},
|
|
}
|
|
}}
|
|
title={t("Dashboard.number_approved_loans")}
|
|
/>
|
|
<CardContent sx={{display: 'flex', flexDirection: 'column', alignItems: 'center' , justifyContent:'center', height: 'calc(100% - 50px)' , padding: "0 !important"}}>
|
|
<Box
|
|
sx={{
|
|
borderBottom: '6px solid',
|
|
borderColor: 'primary.main',
|
|
borderRadius: '6px 6px 6px 6px',
|
|
width: '90%',
|
|
textAlign:'center',
|
|
alignSelf: 'center',
|
|
}}
|
|
>
|
|
<Typography variant={isXL ? 'h5' : 'h6'} sx={{lineHeight: 1.5 , fontWeight:'bold'}}>
|
|
{Number(data.approvedCount).toLocaleString("en")}
|
|
</Typography>
|
|
</Box>
|
|
<Box component={'img'} sx={{width: '40px', height: '40px' , mt:2}}
|
|
src={'/images/pie-chart.png'}/>
|
|
</CardContent>
|
|
</Card>
|
|
</Stack>
|
|
</CenterLayout>
|
|
</FullPageLayout>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DashboardFirstComponent; |