77 lines
3.8 KiB
JavaScript
77 lines
3.8 KiB
JavaScript
import { Box, Grid, Typography } from "@mui/material";
|
|
import RadialBarSemiCircularChart from "./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_budget !== 0 ? (item.total_amount / item.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 > 100 ? 100 : percentage)}
|
|
formatter={(val) => `${Math.round(percentage)}%`}
|
|
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;
|