61 lines
3.3 KiB
JavaScript
61 lines
3.3 KiB
JavaScript
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_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; |