loan/expert-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

complete reports with filtering and both part of referred and functionality

Browse Source
This commit is contained in:
Mohammad Jalali
2024-01-15 15:56:43 +03:30
parent 9e807614ec
commit 3519057a62
8 changed files with 134 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/locales/fa/app.json
View File

@@ -603,7 +603,11 @@
"loading_permissions_list": "درحال دریافت لیست دسترسی ها"
},
"reports": {
"dynamic_label": "{done} از {total} انجام شده",
"dynamic_label_functionality": "{done} از {total} انجام شده",
"dynamic_total_budget": "ابلاغ تسهیلات: {total_budget} میلیون ریال",
"dynamic_label_referred": "{count} فقره در مجموع {total_amount} میلیون ریال",
"referred_loans_to_bank": "ارسال مدیرکل به بانک",
"paid_loans": "پرداخت شده بانک",
"expert": "عملکرد کارشناس",
"transportation_assistant": "عملکرد معاون",
"province_manager": "عملکرد مدیر",

1
src/components/dashboard/reports/Filter/index.jsx
View File

@@ -73,7 +73,6 @@ const Filter = ({title, filterItem, setFilterOption, isLoadingReportList, mutate
: []
),
].filter(Boolean);
setFilterOption(fields)
}, []);
return (

41
src/components/dashboard/reports/LoanDetails/FunctionalityCharts.jsx Normal file
View File

@@ -0,0 +1,41 @@
import {Grid, Typography} from "@mui/material";
import {useTranslations} from "next-intl";
import RadialBarSemiCircularChart from "@/components/dashboard/reports/LoanDetails/RadialBarSemiCircularChart";
const FunctionalityCharts = ({reportList}) => {
const t = useTranslations();
const DataItemsName = [
{id: "expert", name: t("reports.expert")},
{id: "transportation_assistant", name: t("reports.transportation_assistant")},
{id: "province_manager", name: t("reports.province_manager")},
{id: "bank", name: t("reports.bank")}
]
return (
<Grid container sx={{width: "100%"}}>
{
Object.entries(reportList).map(([entryKey, innerObject]) => {
let percentage = innerObject.total !== 0 ? (innerObject.total - innerObject.pending) / innerObject.total * 100 : 0;
const ItemName = DataItemsName.find(item => item.id === entryKey).name;
return (
<Grid key={entryKey} item xs={12} sm={10} md={6} xl={3}
sx={{textAlign: "center"}}>
<Typography sx={{
fontSize: "1.3rem",
fontWeight: "600",
color: "primary.main"
}}>{ItemName}</Typography>
<RadialBarSemiCircularChart data={Math.round(percentage)}
formatter={(val) => `${val}%`}
label={t("reports.dynamic_label_functionality", {
total: (innerObject.total).toLocaleString("en"),
done: (innerObject.total - innerObject.pending).toLocaleString("en")
})}/>
</Grid>
)
})
}
</Grid>
)
};
export default FunctionalityCharts;

12
src/components/dashboard/reports/LoanDetails/RadialBarSemiCircularChart.jsx
View File

@@ -1,7 +1,7 @@
import Chart from "@/core/components/Chart";
import {calculateGradientColor} from "@/core/utils/gradientColorHandler";
const RadialBarSemiCircularChart = ({data, label}) => {
const RadialBarSemiCircularChart = ({data, label, formatter}) => {
const specialOption = {
title: {
text: undefined,
@@ -16,18 +16,16 @@ const RadialBarSemiCircularChart = ({data, label}) => {
},
dataLabels: {
name: {
fontSize: '1.1rem',
offsetY: 20,
fontSize: '1rem',
offsetY: 30,
color: "#8c8c8c"
},
value: {
offsetY: -50,
offsetY: -30,
fontSize: '30px',
fontWeight: 500,
color: "#8c8c8c",
formatter: function (val) {
return val + "%";
}
formatter: formatter
}
}
}

60
src/components/dashboard/reports/LoanDetails/ReferredCharts.jsx Normal file
View File

@@ -0,0 +1,60 @@
import {Box, Grid, Typography} from "@mui/material";
import RadialBarSemiCircularChart from "@/components/dashboard/reports/LoanDetails/RadialBarSemiCircularChart";
import {useTranslations} from "next-intl"; // Make sure to import React if it's not already imported
const ReferredCharts = ({reportList}) => {
const t = useTranslations();
const DataItemsName = [
{id: "referred_loans_to_bank", name: t("reports.referred_loans_to_bank")},
{id: "paid_loans", name: t("reports.paid_loans")}
];
return (
<Grid container sx={{width: "100%", mt: 3}}>
{Object.entries(reportList).map(([entryKey, innerObject]) => {
const ItemName = DataItemsName.find(item => item.id === entryKey).name;
return (
<Grid key={entryKey} item xs={12} xl={6}
sx={{display: "flex", flexDirection: "column", alignItems: "center"}}>
<Box sx={{mb: 2}}>
<Typography sx={{
fontSize: "1.3rem",
fontWeight: "600",
color: "primary.main"
}}>{ItemName}</Typography>
</Box>
<Grid container sx={{width: "100%"}}>
{innerObject.map((item, index) => {
let percentage = item.total_amount !== 0 ? item.total_amount / innerObject.total_budget * 100 : 0;
return (
<Grid key={index} item xs={12} md={6} sx={{textAlign: "center"}}>
<Box>
<Typography sx={{
fontSize: "1.1rem",
fontWeight: "600",
color: "#8c8c8c"
}}>{item.vehicle_type}</Typography>
<Typography variant="caption">
{t("reports.dynamic_total_budget", {
total_budget: (item.total_budget / 1000000).toLocaleString("en"),
})}
</Typography>
</Box>
<RadialBarSemiCircularChart data={Math.round(percentage)}
formatter={(val) => `${val}%`}
label={t("reports.dynamic_label_referred", {
count: (item.count).toLocaleString("en"),
total_amount: (item.total_amount / 1000000).toLocaleString("en")
})}/>
</Grid>
);
})}
</Grid>
</Grid>
);
})}
</Grid>
);
};
export default ReferredCharts;

66
src/components/dashboard/reports/LoanDetails/functionalityCharts.jsx
View File

@@ -1,66 +0,0 @@
import {Grid, Typography} from "@mui/material";
import {useTranslations} from "next-intl";
import LoadingHardPage from "@/core/components/LoadingHardPage";
import AnalyticsIcon from "@mui/icons-material/Analytics";
import RadialBarSemiCircularChart from "@/components/dashboard/reports/LoanDetails/RadialBarSemiCircularChart";
const FunctionalityCharts = () => {
const t = useTranslations();
const DataItemsName = [
{id: "expert", name: t("reports.expert")},
{id: "transportation_assistant", name: t("reports.transportation_assistant")},
{id: "province_manager", name: t("reports.province_manager")},
{id: "bank", name: t("reports.bank")}
]
return (
<Grid container sx={{justifyContent: {xs: "center", position: "relative"}}}>
{isLoadingReportList ? (
<Grid item xs={12} sx={{aspectRatio: "3/0.95"}}>
<LoadingHardPage
icon={<AnalyticsIcon sx={{width: "inherit", height: "inherit"}}/>}
loading={isLoadingReportList}
label={t("reports.loading_fetching_reports")}
width={100}
height={100}
sx={{position: "absolute", bgcolor: "#f7f7f7e6"}}
/>
</Grid>
) : errorReportList ? (
<Grid item xs={12}
sx={{aspectRatio: "3/0.95", display: "flex", justifyContent: "center", alignItems: "center"}}>
<Typography variant="h6" sx={{
color: "#858585",
letterSpacing: "0.1rem"
}}>{t("reports.error_fetching_reports")}</Typography>
</Grid>
) : (
<>
{
Object.entries(reportList).map(([entryKey, innerObject]) => {
let percentage = innerObject.total !== 0 ? (innerObject.total - innerObject.pending) / innerObject.total * 100 : 0;
const ItemName = DataItemsName.find(item => item.id === entryKey).name;
return (
<Grid key={entryKey} item xs={12} sm={10} md={6} xl={3}
sx={{textAlign: "center"}}>
<Typography sx={{
fontSize: "1.3rem",
fontWeight: "600",
color: "#8c8c8c"
}}>{ItemName}</Typography>
<RadialBarSemiCircularChart data={Math.round(percentage)}
label={t("reports.dynamic_label", {
total: innerObject.total,
done: innerObject.total - innerObject.pending
})}/>
</Grid>
)
})
}
</>
)}
</Grid>
)
};
export default FunctionalityCharts;

64
src/components/dashboard/reports/LoanDetails/index.jsx
View File

@@ -1,20 +1,15 @@
import {Grid, Paper, Typography} from "@mui/material";
import {Divider, Grid, Paper, Stack, Typography} from "@mui/material";
import {useTranslations} from "next-intl";
import Filter from "@/components/dashboard/reports/Filter";
import useChart from "@/lib/app/hooks/useChart";
import {GET_LOAN_EXPERTPROGRESS, GET_LOAN_REFERREDLOANS} from "@/core/data/apiRoutes";
import LoadingHardPage from "@/core/components/LoadingHardPage";
import AnalyticsIcon from "@mui/icons-material/Analytics";
import RadialBarSemiCircularChart from "@/components/dashboard/reports/LoanDetails/RadialBarSemiCircularChart";
import FunctionalityCharts from "@/components/dashboard/reports/LoanDetails/FunctionalityCharts";
import ReferredCharts from "@/components/dashboard/reports/LoanDetails/ReferredCharts";
const LoanDetails = () => {
const t = useTranslations();
const DataItemsName = [
{id: "expert", name: t("reports.expert")},
{id: "transportation_assistant", name: t("reports.transportation_assistant")},
{id: "province_manager", name: t("reports.province_manager")},
{id: "bank", name: t("reports.bank")}
]
const {
errorReportList: errorReportList1,
@@ -36,26 +31,30 @@ const LoanDetails = () => {
return (
<Paper elevation={2} sx={{width: "95%", mx: "auto", my: 2, pb: 2, background: "#f7f7f7e6"}}>
<Filter title={t("reports.loan_details")}
filterItem={[
{type: "province", type_fa: "استان", multiple: false},
]}
setFilterOption={setFilterOption}
isLoadingReportList={isLoadingReportList}
mutate={mutate}
filterItem={[{type: "province", type_fa: "استان", multiple: false},]}
setFilterOption={(fields) => {
setFilterOption1(fields);
setFilterOption2(fields)
}}
isLoadingReportList={isLoadingReportList1 || isLoadingReportList2}
mutate={() => {
mutate1();
mutate2()
}}
/>
<Grid container sx={{justifyContent: {xs: "center", position: "relative"}}}>
{isLoadingReportList1 ? (
{isLoadingReportList1 || isLoadingReportList2 ? (
<Grid item xs={12} sx={{aspectRatio: "3/0.95"}}>
<LoadingHardPage
icon={<AnalyticsIcon sx={{width: "inherit", height: "inherit"}}/>}
loading={isLoadingReportList1}
loading={isLoadingReportList1 || isLoadingReportList2}
label={t("reports.loading_fetching_reports")}
width={100}
height={100}
sx={{position: "absolute", bgcolor: "#f7f7f7e6"}}
/>
</Grid>
) : errorReportList1 ? (
) : errorReportList1 || errorReportList2 ? (
<Grid item xs={12}
sx={{aspectRatio: "3/0.95", display: "flex", justifyContent: "center", alignItems: "center"}}>
<Typography variant="h6" sx={{
@@ -64,30 +63,13 @@ const LoanDetails = () => {
}}>{t("reports.error_fetching_reports")}</Typography>
</Grid>
) : (
<>
{
Object.entries(reportList1).map(([entryKey, innerObject]) => {
let percentage = innerObject.total !== 0 ? (innerObject.total - innerObject.pending) / innerObject.total * 100 : 0;
const ItemName = DataItemsName.find(item => item.id === entryKey).name;
return (
<Grid key={entryKey} item xs={12} sm={10} md={6} xl={3}
sx={{textAlign: "center"}}>
<Typography sx={{
fontSize: "1.3rem",
fontWeight: "600",
color: "#8c8c8c"
}}>{ItemName}</Typography>
<RadialBarSemiCircularChart data={Math.round(percentage)}
label={t("reports.dynamic_label", {
total: innerObject.total,
done: innerObject.total - innerObject.pending
})}/>
</Grid>
)
})
}
</>
)}
<Stack sx={{width: "100%"}}>
<FunctionalityCharts reportList={reportList1}/>
<Divider/>
<ReferredCharts reportList={reportList2}/>
</Stack>
)
}
</Grid>
</Paper>
)

0
src/components/dashboard/reports/LoanDetails/referredCharts.jsx
View File