diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index 8eb5b34..0746af1 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -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": "عملکرد مدیر", diff --git a/src/components/dashboard/reports/Filter/index.jsx b/src/components/dashboard/reports/Filter/index.jsx index 36ef14d..3a84d2f 100644 --- a/src/components/dashboard/reports/Filter/index.jsx +++ b/src/components/dashboard/reports/Filter/index.jsx @@ -73,7 +73,6 @@ const Filter = ({title, filterItem, setFilterOption, isLoadingReportList, mutate : [] ), ].filter(Boolean); - setFilterOption(fields) }, []); return ( diff --git a/src/components/dashboard/reports/LoanDetails/FunctionalityCharts.jsx b/src/components/dashboard/reports/LoanDetails/FunctionalityCharts.jsx new file mode 100644 index 0000000..937fc34 --- /dev/null +++ b/src/components/dashboard/reports/LoanDetails/FunctionalityCharts.jsx @@ -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 ( + + { + 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 ( + + {ItemName} + `${val}%`} + label={t("reports.dynamic_label_functionality", { + total: (innerObject.total).toLocaleString("en"), + done: (innerObject.total - innerObject.pending).toLocaleString("en") + })}/> + + ) + }) + } + + ) +}; + +export default FunctionalityCharts; diff --git a/src/components/dashboard/reports/LoanDetails/RadialBarSemiCircularChart.jsx b/src/components/dashboard/reports/LoanDetails/RadialBarSemiCircularChart.jsx index 3417e8e..c37f3b9 100644 --- a/src/components/dashboard/reports/LoanDetails/RadialBarSemiCircularChart.jsx +++ b/src/components/dashboard/reports/LoanDetails/RadialBarSemiCircularChart.jsx @@ -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 } } } diff --git a/src/components/dashboard/reports/LoanDetails/ReferredCharts.jsx b/src/components/dashboard/reports/LoanDetails/ReferredCharts.jsx new file mode 100644 index 0000000..7f29513 --- /dev/null +++ b/src/components/dashboard/reports/LoanDetails/ReferredCharts.jsx @@ -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 ( + + {Object.entries(reportList).map(([entryKey, innerObject]) => { + const ItemName = DataItemsName.find(item => item.id === entryKey).name; + return ( + + + {ItemName} + + + {innerObject.map((item, index) => { + let percentage = item.total_amount !== 0 ? item.total_amount / innerObject.total_budget * 100 : 0; + return ( + + + {item.vehicle_type} + + {t("reports.dynamic_total_budget", { + total_budget: (item.total_budget / 1000000).toLocaleString("en"), + })} + + + `${val}%`} + label={t("reports.dynamic_label_referred", { + count: (item.count).toLocaleString("en"), + total_amount: (item.total_amount / 1000000).toLocaleString("en") + })}/> + + ); + })} + + + ); + })} + + ); +}; + +export default ReferredCharts; \ No newline at end of file diff --git a/src/components/dashboard/reports/LoanDetails/functionalityCharts.jsx b/src/components/dashboard/reports/LoanDetails/functionalityCharts.jsx deleted file mode 100644 index 200544d..0000000 --- a/src/components/dashboard/reports/LoanDetails/functionalityCharts.jsx +++ /dev/null @@ -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 ( - - {isLoadingReportList ? ( - - } - loading={isLoadingReportList} - label={t("reports.loading_fetching_reports")} - width={100} - height={100} - sx={{position: "absolute", bgcolor: "#f7f7f7e6"}} - /> - - ) : errorReportList ? ( - - {t("reports.error_fetching_reports")} - - ) : ( - <> - { - 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 ( - - {ItemName} - - - ) - }) - } - - )} - - ) -}; - -export default FunctionalityCharts; diff --git a/src/components/dashboard/reports/LoanDetails/index.jsx b/src/components/dashboard/reports/LoanDetails/index.jsx index b0e9b9a..1178246 100644 --- a/src/components/dashboard/reports/LoanDetails/index.jsx +++ b/src/components/dashboard/reports/LoanDetails/index.jsx @@ -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 ( { + setFilterOption1(fields); + setFilterOption2(fields) + }} + isLoadingReportList={isLoadingReportList1 || isLoadingReportList2} + mutate={() => { + mutate1(); + mutate2() + }} /> - {isLoadingReportList1 ? ( + {isLoadingReportList1 || isLoadingReportList2 ? ( } - loading={isLoadingReportList1} + loading={isLoadingReportList1 || isLoadingReportList2} label={t("reports.loading_fetching_reports")} width={100} height={100} sx={{position: "absolute", bgcolor: "#f7f7f7e6"}} /> - ) : errorReportList1 ? ( + ) : errorReportList1 || errorReportList2 ? ( { }}>{t("reports.error_fetching_reports")} ) : ( - <> - { - 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 ( - - {ItemName} - - - ) - }) - } - - )} + + + + + + ) + } ) diff --git a/src/components/dashboard/reports/LoanDetails/referredCharts.jsx b/src/components/dashboard/reports/LoanDetails/referredCharts.jsx deleted file mode 100644 index e69de29..0000000