Feature/user info request
This commit is contained in:
AmirHossein Mahmoodi
@@ -1,246 +1,363 @@
|
||||
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import {Box, Stack, Typography, Card, CardContent, CardHeader, useTheme, useMediaQuery} from "@mui/material";
|
||||
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";
|
||||
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'));
|
||||
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(() => {});
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
requestServer(`${GET_LOAN_STATISTICS}`, "get")
|
||||
.then((res) => {
|
||||
setData(res.data.data);
|
||||
})
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
|
||||
if (!data) return "";
|
||||
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
|
||||
return (
|
||||
<>
|
||||
<FullPageLayout>
|
||||
<CenterLayout>
|
||||
<Stack
|
||||
sx={{
|
||||
height: '50px',
|
||||
backgroundColor: 'rgba(8, 64, 112, 0.08)',
|
||||
color: 'primary.main',
|
||||
textAlign:'center',
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
gap: "20px",
|
||||
width: "100%",
|
||||
flexDirection: "row",
|
||||
padding: 3,
|
||||
alignItems: "flex-end",
|
||||
}}
|
||||
titleTypographyProps={{
|
||||
variant: 'body1',
|
||||
sx: {
|
||||
textAlign: 'center',
|
||||
fontWeight: 'bold',
|
||||
[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
|
||||
>
|
||||
<Card
|
||||
sx={{
|
||||
borderBottom: '6px solid',
|
||||
borderColor: 'primary.main',
|
||||
borderRadius: '6px 6px 6px 6px',
|
||||
width: '90%',
|
||||
textAlign:'center',
|
||||
height: "200px",
|
||||
width: "20%",
|
||||
boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px",
|
||||
borderRadius: "5px",
|
||||
}}
|
||||
>
|
||||
<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',
|
||||
sx: {
|
||||
textAlign: 'center',
|
||||
fontWeight: 'bold',
|
||||
[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'}}>
|
||||
{t("million_rial")}
|
||||
<CardHeader
|
||||
sx={{
|
||||
height: "50px",
|
||||
backgroundColor: "rgba(8, 64, 112, 0.08)",
|
||||
color: "primary.main",
|
||||
textAlign: "center",
|
||||
}}
|
||||
titleTypographyProps={{
|
||||
variant: "body1",
|
||||
sx: {
|
||||
textAlign: "center",
|
||||
fontWeight: "bold",
|
||||
[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>
|
||||
</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',
|
||||
sx: {
|
||||
textAlign: 'center',
|
||||
fontWeight: 'bold',
|
||||
[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
|
||||
<Box
|
||||
component={"img"}
|
||||
sx={{ width: "40px", height: "40px", mt: 2 }}
|
||||
src={"/images/pie-chart.png"}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card
|
||||
sx={{
|
||||
borderBottom: '6px solid',
|
||||
borderColor: 'primary.main',
|
||||
borderRadius: '6px 6px 6px 6px',
|
||||
width: '90%',
|
||||
textAlign:'center',
|
||||
height: "250px",
|
||||
width: "20%",
|
||||
boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px",
|
||||
borderRadius: "5px",
|
||||
}}
|
||||
>
|
||||
<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',
|
||||
sx: {
|
||||
textAlign: 'center',
|
||||
fontWeight: 'bold',
|
||||
[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' }}>
|
||||
{t("million_rial")}
|
||||
<CardHeader
|
||||
sx={{
|
||||
height: "50px",
|
||||
backgroundColor: "rgba(8, 64, 112, 0.08)",
|
||||
color: "primary.main",
|
||||
textAlign: "center",
|
||||
fontSize: "14px",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
titleTypographyProps={{
|
||||
variant: "body1",
|
||||
sx: {
|
||||
textAlign: "center",
|
||||
fontWeight: "bold",
|
||||
[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" }}>
|
||||
{t("million_rial")}
|
||||
</Box>
|
||||
</Typography>
|
||||
</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',
|
||||
sx: {
|
||||
textAlign: 'center',
|
||||
fontWeight: 'bold',
|
||||
[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
|
||||
<Box
|
||||
component={"img"}
|
||||
sx={{ width: "40px", height: "40px", mt: 2 }}
|
||||
src={"/images/rial.png"}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card
|
||||
sx={{
|
||||
borderBottom: '6px solid',
|
||||
borderColor: 'primary.main',
|
||||
borderRadius: '6px 6px 6px 6px',
|
||||
width: '90%',
|
||||
textAlign:'center',
|
||||
alignSelf: 'center',
|
||||
height: "300px",
|
||||
width: "20%",
|
||||
boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px",
|
||||
borderRadius: "5px",
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
<CardHeader
|
||||
sx={{
|
||||
height: "50px",
|
||||
backgroundColor: "rgba(8, 64, 112, 0.08)",
|
||||
color: "primary.main",
|
||||
textAlign: "center",
|
||||
fontSize: "14px",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
titleTypographyProps={{
|
||||
variant: "body1",
|
||||
sx: {
|
||||
textAlign: "center",
|
||||
fontWeight: "bold",
|
||||
[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",
|
||||
sx: {
|
||||
textAlign: "center",
|
||||
fontWeight: "bold",
|
||||
[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" }}>
|
||||
{t("million_rial")}
|
||||
</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",
|
||||
sx: {
|
||||
textAlign: "center",
|
||||
fontWeight: "bold",
|
||||
[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;
|
||||
export default DashboardFirstComponent;
|
||||
|
||||
Reference in New Issue
Block a user