48 lines
2.1 KiB
JavaScript
48 lines
2.1 KiB
JavaScript
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.pending !== 64
|
|
? ((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;
|