dashboard export number
This commit is contained in:
Yasiu1376
BIN
public/images/pie-chart.png
Normal file
BIN
public/images/pie-chart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
public/images/rial.png
Normal file
BIN
public/images/rial.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@@ -120,7 +120,12 @@
|
||||
"edit_profile": "ویرایش پروفایل",
|
||||
"expert_management": "مدیریت کارشناسان",
|
||||
"user_management_page": "مدیریت کاربر",
|
||||
"loan_history": "کارتابل نظارت"
|
||||
"loan_history": "کارتابل نظارت",
|
||||
"total_number_loan_offers": "تعداد کل وام های پیشنهادی",
|
||||
"total_amount_proposed_loan": "مبلغ کل وام های پیشنهادی",
|
||||
"total_number_requests": "تعداد کل درخواست ها",
|
||||
"total_amount_approved_loans": "مبلغ کل وام های تصویب شده",
|
||||
"number_approved_loans": "تعداد وام های تصویب شده"
|
||||
},
|
||||
"MuiDatePicker": {
|
||||
"date_picker_birthday": "تاریخ"
|
||||
|
||||
@@ -1,16 +1,21 @@
|
||||
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import { Box, Divider, Stack, Typography } 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";
|
||||
|
||||
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(
|
||||
`${process.env.NEXT_PUBLIC_BASE_URL}/dashboard/reports/navgan/statistics`,
|
||||
`${GET_LOAN_STATISTICS}`,
|
||||
"get"
|
||||
)
|
||||
.then((res) => {
|
||||
@@ -25,66 +30,223 @@ const DashboardFirstComponent = () => {
|
||||
<>
|
||||
<FullPageLayout>
|
||||
<CenterLayout>
|
||||
<Box sx={{ width: 600 }}>
|
||||
<Divider>وام های واجد شرایط</Divider>
|
||||
<Stack
|
||||
sx={{ py: 2, px: 1 }}
|
||||
direction={"row"}
|
||||
alignItems={"center"}
|
||||
justifyContent={"space-between"}
|
||||
<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>تعداد کل</Typography>
|
||||
<Typography variant={"h5"}>
|
||||
{Number(data.totalApprovedLoans).toLocaleString("en")}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Divider sx={{ mt: 2 }}>وام های پیشنهادی</Divider>
|
||||
<Stack
|
||||
sx={{ py: 2, px: 1 }}
|
||||
direction={"row"}
|
||||
alignItems={"center"}
|
||||
justifyContent={"space-between"}
|
||||
>
|
||||
<Typography>تعداد کل</Typography>
|
||||
<Typography variant={"h5"}>
|
||||
<Typography variant={isXL ? 'h5' : 'h6'} sx={{lineHeight: 1.5 , fontWeight:'bold'}}>
|
||||
{Number(data.proposedCount).toLocaleString("en")}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack
|
||||
sx={{ py: 2, px: 1 }}
|
||||
direction={"row"}
|
||||
alignItems={"center"}
|
||||
justifyContent={"space-between"}
|
||||
</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>مبلغ کل (میلیون ریال)</Typography>
|
||||
<Typography variant={"h5"}>
|
||||
{Number(data.totalProposedAmount).toLocaleString("en")}
|
||||
<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>
|
||||
</Stack>
|
||||
<Divider sx={{ mt: 2 }}>وام های تصویب شده</Divider>
|
||||
<Stack
|
||||
sx={{ py: 2, px: 1 }}
|
||||
direction={"row"}
|
||||
alignItems={"center"}
|
||||
justifyContent={"space-between"}
|
||||
</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>تعداد کل</Typography>
|
||||
<Typography variant={"h5"}>
|
||||
<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>
|
||||
</Stack>
|
||||
<Stack
|
||||
sx={{ py: 2, px: 1 }}
|
||||
direction={"row"}
|
||||
alignItems={"center"}
|
||||
justifyContent={"space-between"}
|
||||
>
|
||||
<Typography>مبلغ کل (میلیون ریال)</Typography>
|
||||
<Typography variant={"h5"}>
|
||||
{Number(data.totalApprovedAmount).toLocaleString("en")}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Box component={'img'} sx={{width: '40px', height: '40px' , mt:2}}
|
||||
src={'/images/pie-chart.png'}/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Stack>
|
||||
</CenterLayout>
|
||||
</FullPageLayout>
|
||||
</>
|
||||
|
||||
@@ -231,3 +231,7 @@ export const GET_LOAN_DISTRIBUTION = BASE_URL + "/dashboard/reports/navgan/loan_
|
||||
export const GET_LOAN_HISTORY = BASE_URL + "/dashboard/navgan_loans"
|
||||
export const GET_HISTORY_DETAIL = BASE_URL + "/dashboard/navgan_loans"
|
||||
export const EXPORT_LOAN_HISTORY = BASE_URL + "/dashboard/navgan_loans/export"
|
||||
|
||||
// loan statistics
|
||||
export const GET_LOAN_STATISTICS = BASE_URL + "/dashboard/reports/navgan/statistics"
|
||||
|
||||
|
||||
Reference in New Issue
Block a user