complete reports with filtering and both part of referred and functionality

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 (
+        <Grid container sx={{width: "100%"}}>
+            {
+                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 (
+                        <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;