Files
expert-front/src/components/dashboard/old-reports/LoanProgress/index.jsx

67 lines
3.0 KiB
JavaScript

import {Grid, Paper, Typography} from "@mui/material";
import BarChart from "./BarChart";
import Filter from "../Filter";
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();
const {errorReportList, isLoadingReportList, reportList, setFilterOption, mutate} = useChart(GET_PROVINCE_PROGRESS);
return (
<Paper elevation={2} sx={{width: "95%", mx: "auto", my: 2, pb: 2, background: "#f7f7f7e6"}}>
<Filter title={t("reports.loan_progress")}
filterItem={[
{type: "year", type_fa: "سال", multiple: false}
]}
setFilterOption={setFilterOption}
isLoadingReportList={isLoadingReportList}
mutate={mutate}
/>
<Grid container>
{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>
</Paper>
)
};
export default LoanProgress;