complete excel export in reports page

public/locales/fa/app.json

@@ -629,6 +629,7 @@
     "provinces": "استان های",
     "province": "استان",
     "all_provinces": "تمامی استان ها",
+    "excel_export_reports": "خروجی به اکسل گزارش عملکرد",
     "year": "سال",
     "years": "سال های",
     "text_field_loading_provinces_list": "درحال دریافت استان ها",

src/components/dashboard/reports/ExcelExport/index.jsx

@@ -0,0 +1,63 @@
+import {Accordion, AccordionSummary, Box, Button, CircularProgress, Stack, Typography} from "@mui/material";
+import AssignmentIcon from '@mui/icons-material/Assignment';
+import BackupIcon from '@mui/icons-material/Backup';
+import {useTranslations} from "next-intl";
+import {GET_EXCEL_EXPORT} from "@/core/data/apiRoutes";
+import moment from "jalali-moment";
+import FileSaver from 'file-saver';
+import useRequest from "@/lib/app/hooks/useRequest";
+import {useState} from "react";
+
+const ExcelExport = () => {
+    const t = useTranslations();
+    const requestServer = useRequest();
+    const [loading, setLoading] = useState(false);
+
+    const clickHandler = () => {
+        setLoading(true)
+        requestServer(GET_EXCEL_EXPORT, 'get', {
+            auth: true,
+            requestOptions: {responseType: 'blob'}
+        }).then((response) => {
+            const filename = `گزارش عملکرد_${moment().format('jYYYY_jMM_jDD')}.xlsx`;
+            FileSaver.saveAs(response.data, filename);
+        }).catch(() => {
+        }).finally(() => {
+            setLoading(false)
+        })
+    }
+
+    return (
+        <Stack sx={{width: "95%", mx: "auto"}}>
+            <Accordion elevation={0} sx={{
+                width: "100%",
+                mb: 2,
+                borderBottom: 2,
+                borderBottomColor: "divider",
+                backgroundColor: "#f1f1f1"
+            }} expanded={false}>
+                <AccordionSummary>
+                    <Box sx={{width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between"}}>
+                        <Box sx={{display: "flex", alignItems: "center", gap: 0.5}}>
+                            <AssignmentIcon sx={{color: "primary.main"}}/>
+                            <Typography sx={{fontWeight: 500, color: "primary.main"}}>
+                                {t("filters.excel_export_reports")}
+                            </Typography>
+                        </Box>
+                        <Button onClick={clickHandler} variant="contained"
+                                sx={{backgroundColor: "success.main"}}
+                                disabled={loading}
+                                startIcon={loading ?
+                                    <CircularProgress size={20} color="inherit"/> :
+                                    <BackupIcon/>}
+                        >
+                            {t("filters.export")}
+                        </Button>
+                    </Box>
+                </AccordionSummary>
+            </Accordion>
+        </Stack>
+    )
+};
+
+export default ExcelExport;

src/components/dashboard/reports/LoanDetails/FunctionalityCharts.jsx

@@ -14,7 +14,7 @@ const FunctionalityCharts = ({reportList}) => {
         <Grid container sx={{width: "100%"}}>
             {
                 Object.entries(reportList).map(([entryKey, innerObject]) => {
-                    let percentage = innerObject.total !== 0 ? (innerObject.total - innerObject.pending) / innerObject.total * 100 : 0;
+                    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}

src/components/dashboard/reports/index.jsx

@@ -1,8 +1,10 @@
 import LoanDetails from "@/components/dashboard/reports/LoanDetails";
+import ExcelExport from "@/components/dashboard/reports/ExcelExport";
 
 const DashboardReportsComponent = (props) => {
     return (
         <>
+            <ExcelExport/>
             <LoanDetails/>
         </>
     )

src/core/data/apiRoutes.js

@@ -225,6 +225,7 @@ export const GET_PERMISSIONS_LIST =
 
 // reports
 export const GET_EXPORT = BASE_URL + "/dashboard/exports/navgan"
+export const GET_EXCEL_EXPORT = BASE_URL + ""
 export const GET_PROVINCE_PROGRESS = BASE_URL + "/dashboard/reports/navgan/province_progress"
 export const GET_LOAN_DISTRIBUTION = BASE_URL + "/dashboard/reports/navgan/loan_distribution"
 export const GET_LOAN_EXPERTPROGRESS = BASE_URL + "/dashboard/reports/navgan/expert_progress"