LFFE-10 complete chart page of loan

2023-11-15 14:27:23 +03:30
parent fbbba0cc3c
commit e928e0aa41
8 changed files with 110 additions and 52 deletions
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -523,8 +523,10 @@
    "years": "سال های",
    "text_field_loading_provinces_list": "درحال دریافت استان ها",
    "text_field_error_fetching_provinces": "خطا در دریافت استان ها",
+    "filter_btn": "فیلتر",
    "filter": "اعمال فیلتر",
    "excel_export": "خروجی به اکسل",
-    "export": "دریافت"
+    "export": "دریافت",
+    "update_again": "بروزرسانی مجدد"
  }
 }
--- a/src/components/dashboard/reports/ExcelExport/index.jsx
+++ b/src/components/dashboard/reports/ExcelExport/index.jsx
@@ -1,4 +1,13 @@
-import {Accordion, AccordionDetails, AccordionSummary, Box, Button, Stack, Typography} from "@mui/material";
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    Box,
+    Button,
+    CircularProgress,
+    Stack,
+    Typography
+} from "@mui/material";
 import FileUploadIcon from '@mui/icons-material/FileUpload';
 import AssignmentIcon from '@mui/icons-material/Assignment';
 import BackupIcon from '@mui/icons-material/Backup';
@@ -53,7 +62,11 @@ const ExcelExport = () => {
                ? `?${fields.map((option) => `${option.key}=${option.value}`).join('&')}`
                : '';
            setSubmitting(true)
-            requestServer(`${GET_EXPORT}${queryString}`, 'GET', {auth: true, requestOptions: {responseType: 'blob'}})
+            requestServer(`${GET_EXPORT}${queryString}`, 'GET', {
+                auth: true,
+                notification: false,
+                requestOptions: {responseType: 'blob'}
+            })
                .then((response) => {
                    const filename = `گزارش درخواست های وام ناوگان تاریخ_${moment().format('jYYYY_jMM_jDD')}.xlsx`;
                    FileSaver.saveAs(response.data, filename);
@@ -85,7 +98,13 @@ const ExcelExport = () => {
                    </Box>
                </AccordionSummary>
                <AccordionDetails
-                    sx={{display: "flex", justifyContent: "space-between", alignItems: "center", mx: "auto",}}>
+                    sx={{
+                        display: "flex",
+                        flexDirection: {xs: "column", sm: "row"},
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                        mx: "auto",
+                    }}>
                    <Stack sx={{flexDirection: {xs: "column", sm: "row"}, alignItems: "center", flexWrap: 'wrap'}}>
                        {filter_by_province ?
                            <ProvinceFilter formik={formik} multiple={filter_by_province.multiple}
@@ -100,7 +119,9 @@ const ExcelExport = () => {
                        <Button onClick={formik.handleSubmit} variant="contained"
                                disabled={formik.isSubmitting}
                                sx={{backgroundColor: "success.main"}}
-                                startIcon={<BackupIcon/>}
+                                startIcon={formik.isSubmitting ?
+                                    <CircularProgress size={20} color="inherit"/> :
+                                    <BackupIcon/>}
                        >
                            {t("filters.export")}
                        </Button>
--- a/src/components/dashboard/reports/Filter/ProvinceFilter.jsx
+++ b/src/components/dashboard/reports/Filter/ProvinceFilter.jsx
@@ -47,7 +47,7 @@ const ProvinceFilter = ({formik, multiple, setFilteredText}) => {
        ? formik.values.province_id.length === 0 :
        formik.values.province_id === "";
    return (
-        <FormControl sx={{width: 300, mx: 1}}>
+        <FormControl sx={{width: 300, mx: 1, my: {xs: 1, lg: 0}}}>
            <InputLabel size="small">{t("filters.choose_province")}</InputLabel>
            <Select
                name="province_id"
--- a/src/components/dashboard/reports/Filter/YearFilter.jsx
+++ b/src/components/dashboard/reports/Filter/YearFilter.jsx
@@ -28,7 +28,7 @@ const YearFilter = ({formik, multiple, setFilteredText}) => {
        }
    };
    return (
-        <FormControl sx={{width: 300, mx: 1}}>
+        <FormControl sx={{width: 300, mx: 1, my: {xs: 1, lg: 0}}}>
            <InputLabel size="small">{t("filters.choose_year")}</InputLabel>
            <Select
                name="date"
--- a/src/components/dashboard/reports/Filter/index.jsx
+++ b/src/components/dashboard/reports/Filter/index.jsx
@@ -7,6 +7,7 @@ import {
    CircularProgress,
    IconButton,
    Stack,
+    Tooltip,
    Typography
 } from "@mui/material";
 import {useFormik} from "formik";
@@ -21,7 +22,6 @@ import {useEffect, useState} from "react";
 import moment from "jalali-moment";
 import {periodOfYear} from "@/core/utils/yearPeriodFinder";

-CachedIcon
 const Filter = ({title, filterItem, setFilterOption, isLoadingReportList, mutate}) => {
    const t = useTranslations();
    const filter_by_province = filterItem.find((item) => item.type === "province");
@@ -97,18 +97,27 @@ const Filter = ({title, filterItem, setFilterOption, isLoadingReportList, mutate
                        </Typography>
                    </Box>
                    <Box>
-                        <IconButton onClick={() => mutate()}
-                                    size="small">
-                            <CachedIcon sx={{color: "success.main"}}/>
-                        </IconButton>
-                        <IconButton onClick={() => setExpanded((prevExpanded) => !prevExpanded)}
-                                    size="small">
-                            <FilterAltIcon sx={{color: "success.main"}}/>
-                        </IconButton>
+                        <Tooltip title={t("filters.update_again")} arrow>
+                            <IconButton onClick={() => mutate()}
+                                        size="small">
+                                <CachedIcon color="primary"/>
+                            </IconButton>
+                        </Tooltip>
+                        <Tooltip title={t("filters.filter_btn")} arrow>
+                            <IconButton onClick={() => setExpanded((prevExpanded) => !prevExpanded)}
+                                        size="small">
+                                <FilterAltIcon color="primary"/>
+                            </IconButton>
+                        </Tooltip>
                    </Box>
                </Box>
            </AccordionSummary>
-            <AccordionDetails sx={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
+            <AccordionDetails sx={{
+                display: "flex",
+                flexDirection: {xs: "column", sm: "row"},
+                justifyContent: "space-between",
+                alignItems: "center"
+            }}>
                <Stack sx={{flexDirection: {xs: "column", sm: "row"}, alignItems: "center", flexWrap: 'wrap'}}>
                    {filter_by_province ?
                        <ProvinceFilter formik={formik} multiple={filter_by_province.multiple}
--- a/src/components/dashboard/reports/LoanDistribution/index.jsx
+++ b/src/components/dashboard/reports/LoanDistribution/index.jsx
@@ -1,10 +1,12 @@
-import {Box, CircularProgress, Grid, Paper, Typography} from "@mui/material";
+import {Grid, Paper, Typography} from "@mui/material";
 import PolarChart from "./PolarChart";
 import Pie from "./PieChart";
 import {useTranslations} from "next-intl";
 import Filter from "@/components/dashboard/reports/Filter";
 import useChart from "@/lib/app/hooks/useChart";
 import {GET_LOAN_DISTRIBUTION} from "@/core/data/apiRoutes";
+import LoadingHardPage from "@/core/components/LoadingHardPage";
+import AnalyticsIcon from "@mui/icons-material/Analytics";

 const LoanDistribution = () => {
    const t = useTranslations();
@@ -20,34 +22,32 @@ const LoanDistribution = () => {
                    isLoadingReportList={isLoadingReportList}
                    mutate={mutate}
            />
-            <Grid container sx={{justifyContent: {xs: "center", md: "space-between"}}}>
+            <Grid container sx={{justifyContent: {xs: "center", md: "space-between", position: "relative"}}}>
                {isLoadingReportList ? (
-                    <Box sx={{
-                        height: "100%",
-                        display: "flex",
-                        flexDirection: "column",
-                        alignItems: "center",
-                        justifyContent: "center"
-                    }}>
-                        <Grid item xs={12} sx={{aspectRatio: "1/0.75"}}>
-                            <CircularProgress sx={{mb: 1, color: "#c2c2c2"}}/>
-                            <Typography variant="h6"
-                                        sx={{color: "#c2c2c2", letterSpacing: "0.2rem"}}
-                            >
-                                {t("reports.loading_fetching_reports")}
-                            </Typography>
-                        </Grid>
-                    </Box>
+                    <Grid item xs={12} sx={{aspectRatio: "3/0.95"}}>
+                        <LoadingHardPage
+                            icon={<AnalyticsIcon sx={{width: "inherit", height: "inherit"}}/>}
+                            loading={isLoadingReportList}
+                            label={t("reports.loading_fetching_reports")}
+                            width={100}
+                            height={100}
+                            sx={{position: "absolute", bgcolor: "#f7f7f7e6"}}
+                        />
+                    </Grid>
                ) : errorReportList ? (
-                    <Grid item xs={12} sx={{aspectRatio: "1/0.75"}}>
-                        <Typography variant="caption">{t("reports.error_fetching_reports")}</Typography>
+                    <Grid item xs={12}
+                          sx={{aspectRatio: "3/0.95", display: "flex", justifyContent: "center", alignItems: "center"}}>
+                        <Typography variant="h6" sx={{
+                            color: "#858585",
+                            letterSpacing: "0.1rem"
+                        }}>{t("reports.error_fetching_reports")}</Typography>
                    </Grid>
                ) : (
                    <>
-                        <Grid item xs={12} sm={10} md={5} sx={{aspectRatio: "1/0.75"}}>
+                        <Grid item xs={12} sm={10} md={6} xl={5} sx={{aspectRatio: "1/0.75"}}>
                            <PolarChart data={reportList}/>
                        </Grid>
-                        <Grid item xs={12} sm={10} md={5} sx={{aspectRatio: "1/0.75"}}>
+                        <Grid item xs={12} sm={10} md={6} xl={5} sx={{aspectRatio: "1/0.75"}}>
                            <Pie data={reportList}/>
                        </Grid>
                    </>
--- a/src/components/dashboard/reports/LoanProgress/index.jsx
+++ b/src/components/dashboard/reports/LoanProgress/index.jsx
@@ -5,6 +5,7 @@ import {useTranslations} from "next-intl";
 import useChart from "@/lib/app/hooks/useChart";
 import {GET_PROVINCE_PROGRESS} from "@/core/data/apiRoutes";
 import LoadingHardPage from "@/core/components/LoadingHardPage";
+import AnalyticsIcon from '@mui/icons-material/Analytics';

 const LoanProgress = () => {
    const t = useTranslations();
@@ -20,19 +21,44 @@ const LoanProgress = () => {
                    mutate={mutate}
            />
            <Grid container>
-                <Grid item xs={12} sx={{aspectRatio: {xs: "1/1", sm: "1/1", md: "1/0.4", xl: "1/0.3"}}}>
-                    {isLoadingReportList ? (
-                        // <LoadingHardPage icon={routingItem?.icon}
-                        //                  label={routingItem?.key ? `${t('routing_to')} ${t(routingItem?.key)}` : ''}
-                        //                  loading={routing} width={100} height={100}
-                        //                  sx={{position: "absolute", bgcolor: "#fffc"}}>
-
-                        ) : errorReportList ? (
-                        <Typography variant="caption">{t("reports.error_fetching_reports")}</Typography>
-                    ) : (
+                {isLoadingReportList ? (
+                    <Grid item xs={12}
+                          sx={{
+                              display: "flex",
+                              justifyContent: "center",
+                              alignItems: "center",
+                              aspectRatio: {xs: "1/1", sm: "1/1", md: "1/0.4", xl: "1/0.3", position: "relative"}
+                          }}>
+                        <LoadingHardPage
+                            icon={<AnalyticsIcon sx={{width: "inherit", height: "inherit"}}/>}
+                            loading={isLoadingReportList}
+                            label={t("reports.loading_fetching_reports")}
+                            width={100}
+                            height={100}
+                            sx={{position: "absolute", bgcolor: "#f7f7f7e6"}}
+                        />
+                    </Grid>
+                ) : errorReportList ? (
+                    <Grid item xs={12}
+                          sx={{
+                              display: "flex",
+                              justifyContent: "center",
+                              alignItems: "center",
+                              aspectRatio: {xs: "1/1", sm: "1/1", md: "1/0.4", xl: "1/0.3", position: "relative"}
+                          }}>
+                        <Typography variant="h6" sx={{
+                            color: "#858585",
+                            letterSpacing: "0.1rem"
+                        }}>{t("reports.error_fetching_reports")}</Typography>
+                    </Grid>
+                ) : (
+                    <Grid item xs={12}
+                          sx={{
+                              aspectRatio: {xs: "1/1", sm: "1/1", md: "1/0.4", xl: "1/0.3", position: "relative"}
+                          }}>
                        <BarChart data={reportList}/>
-                    )}
-                </Grid>
+                    </Grid>
+                )}
            </Grid>
        </Paper>
    )
--- a/src/lib/app/hooks/useChart.jsx
+++ b/src/lib/app/hooks/useChart.jsx
@@ -21,7 +21,7 @@ const useChart = (chart_url) => {
        isValidating,
        mutate
    } = useSWR(filterOption.length !== 0 ? `${chart_url}${queryString}` : "", fetcher, {
-        revalidateIfStale: false,
+        revalidateIfStale: true,
        revalidateOnFocus: false,
        revalidateOnReconnect: false,
        keepPreviousData: true