Feature/report refahi

src/components/dashboard/reports/refahi/LoanDetails/ReferredCharts.jsx

@@ -0,0 +1,76 @@
+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;