364 lines
18 KiB
JavaScript
364 lines
18 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",
|
|
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>
|
|
<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")}
|
|
</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
|
|
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;
|