loan/expert-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

LFFE-10 Merge branch 'feature/LFFE-10_implemention_of_report_page' into 'develop'

Browse Source
This commit is contained in:
AmirHossein Mahmoodi
2023-11-18 07:42:59 +00:00
parent 046651869a 3b8d2b8d01
commit 764164e37c
26 changed files with 1087 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
src/components/dashboard/reports/ExcelExport/index.jsx Normal file
View File

@@ -0,0 +1,135 @@
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';
import {useTranslations} from "next-intl";
import ProvinceFilter from "@/components/dashboard/reports/Filter/ProvinceFilter";
import YearFilter from "@/components/dashboard/reports/Filter/YearFilter";
import {useState} from "react";
import {useFormik} from "formik";
import {GET_EXPORT} from "@/core/data/apiRoutes";
import moment from "jalali-moment";
import FileSaver from 'file-saver';
import useRequest from "@/lib/app/hooks/useRequest";
import {periodOfYear} from "@/core/utils/yearPeriodFinder";
const ExcelExport = () => {
const t = useTranslations();
const requestServer = useRequest()
const filterItem = [
{type: "province", type_fa: "استان", multiple: false},
{type: "year", type_fa: "سال", multiple: false}
];
const filter_by_province = filterItem.find((item) => item.type === "province");
const filter_by_year = filterItem.find((item) => item.type === "year");
const [filteredText, setFilteredText] = useState({province: "", year: ""});
const formik = useFormik({
initialValues: {
...(filter_by_year && {
date: filter_by_year.multiple ? [] : `${moment().format('jYYYY')}`
}),
...(filter_by_province && {
province_id: filter_by_province.multiple ? [] : ""
}),
from_date: periodOfYear(moment().format('jYYYY')).from,
to_date: periodOfYear(moment().format('jYYYY')).to
}, onSubmit: (values, {setSubmitting}) => {
const province = values.province_id;
const fields = [
values.from_date ? {key: "from_date", value: values.from_date} : null,
values.to_date ? {key: "to_date", value: values.to_date} : null,
...(Array.isArray(province)
? province.length !== 0
? province.map((item, index) => ({key: `province_id[${index}]`, value: item}))
: []
: province
? [{key: "province_id", value: province}]
: []
),
].filter(Boolean);
const queryString = fields.length !== 0
? `?${fields.map((option) => `${option.key}=${option.value}`).join('&')}`
: '';
setSubmitting(true)
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);
}).catch(() => {
}).finally(() => {
setSubmitting(false);
});
},
});
return (
<Stack sx={{width: "95%", mx: "auto"}}>
<Accordion elevation={0} sx={{
width: "100%",
mb: 2,
borderBottom: 2,
borderBottomColor: "divider",
backgroundColor: "#f1f1f1"
}}>
<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")}
</Typography>
</Box>
<FileUploadIcon sx={{color: "primary.main"}}/>
</Box>
</AccordionSummary>
<AccordionDetails
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}
setFilteredText={setFilteredText}/> : ""
}
{filter_by_year ?
<YearFilter formik={formik} multiple={filter_by_year.multiple}
setFilteredText={setFilteredText}/> : ""
}
</Stack>
<Stack>
<Button onClick={formik.handleSubmit} variant="contained"
disabled={formik.isSubmitting}
sx={{backgroundColor: "success.main"}}
startIcon={formik.isSubmitting ?
<CircularProgress size={20} color="inherit"/> :
<BackupIcon/>}
>
{t("filters.export")}
</Button>
</Stack>
</AccordionDetails>
</Accordion>
</Stack>
)
};
export default ExcelExport;

111
src/components/dashboard/reports/Filter/ProvinceFilter.jsx Normal file
View File

@@ -0,0 +1,111 @@
import {
Box,
FormControl,
IconButton,
InputAdornment,
InputLabel,
MenuItem,
OutlinedInput,
Select,
Typography
} from "@mui/material";
import {useTranslations} from "next-intl";
import useProvince from "@/lib/app/hooks/useProvince";
import ClearIcon from '@mui/icons-material/Clear';
const provinceList = [
{name: "قزوین", id: 1},
{name: "تبریز", id: 2},
{name: "مشهد", id: 3}
]
const ProvinceFilter = ({formik, multiple, setFilteredText}) => {
const {errorProvinceList, isLoadingProvinceList, provinceList} = useProvince();
const t = useTranslations();
const provinceChange = (event) => {
const {target: {value}} = event;
formik.handleChange(event);
formik.setFieldValue('province_id', value);
if (Array.isArray(value)) {
const province_names = []
value.map((item) => {
province_names.push(provinceList.find(province => province.id === item).name)
})
setFilteredText(prevState => ({
...prevState,
province: province_names.length !== 0 ? `| ${t("filters.provinces")}: ${province_names.join(' , ')}` : ""
}));
} else {
const selectedProvince = provinceList.find(province => province.id === value);
setFilteredText(prevState => ({
...prevState,
province: `| ${t("filters.province")}: ${selectedProvince.name}`
}));
}
};
const needAdorment = multiple
? formik.values.province_id.length === 0 :
formik.values.province_id === "";
return (
<FormControl sx={{width: 300, mx: 1, my: {xs: 1, lg: 0}}}>
<InputLabel size="small">{t("filters.choose_province")}</InputLabel>
<Select
name="province_id"
multiple={multiple}
size="small"
variant="outlined"
value={formik.values.province_id}
onChange={provinceChange}
onBlur={formik.handleBlur("province_id")}
input={<OutlinedInput label={t("filters.choose_province")}/>}
disabled={isLoadingProvinceList || errorProvinceList}
renderValue={multiple ? (selected) => (
<Box sx={{
display: 'flex', gap: 0.7, overflow: "hidden",
width: '100%', pr: 4
}}>
{selected.map((value) => {
const selectedProvince = provinceList.find(province => province.id === value);
return (
<Typography key={value} variant="button">
{selectedProvince ? selectedProvince.name : ''}
</Typography>
);
})}
</Box>
) : undefined}
endAdornment={
!needAdorment ?
<InputAdornment position="end" sx={{mr: 2}}>
<IconButton
onClick={() => multiple
? formik.setFieldValue('province_id', [])
: formik.setFieldValue('province_id', "")
}
size="small">
<ClearIcon/>
</IconButton>
</InputAdornment> : null
}
>
{isLoadingProvinceList ? (
<MenuItem>
{t("filters.text_field_loading_provinces_list")}
</MenuItem>
) : errorProvinceList ? (
<MenuItem>
{t("filters.text_field_error_fetching_provinces")}
</MenuItem>
) : (
provinceList.map((item) => (
<MenuItem key={item.id} value={item.id}>
{item.name}
</MenuItem>
))
)}
</Select>
</FormControl>
)
};
export default ProvinceFilter;

66
src/components/dashboard/reports/Filter/YearFilter.jsx Normal file
View File

@@ -0,0 +1,66 @@
import {Box, Chip, FormControl, InputLabel, MenuItem, OutlinedInput, Select} from "@mui/material";
import moment from "jalali-moment";
import {useTranslations} from "next-intl";
import {periodOfYear} from "@/core/utils/yearPeriodFinder";
const currentShamsiYear = moment().format('jYYYY');
const shamsiYearList = Array.from({length: currentShamsiYear - 1399}, (_, index) => (currentShamsiYear - index).toString());
const YearFilter = ({formik, multiple, setFilteredText}) => {
const t = useTranslations();
const yearChange = (event) => {
const {target: {value}} = event;
formik.handleChange(event);
formik.setFieldValue('date', value);
const {from, to} = periodOfYear(value);
formik.setFieldValue('from_date', from);
formik.setFieldValue('to_date', to);
if (Array.isArray(value)) {
setFilteredText(prevState => ({
...prevState,
year: `| ${t("filters.years")}: ${value.join(' , ')}`
}));
} else {
setFilteredText(prevState => ({
...prevState,
year: `| ${t("filters.year")}: ${value}`
}));
}
};
return (
<FormControl sx={{width: 300, mx: 1, my: {xs: 1, lg: 0}}}>
<InputLabel size="small">{t("filters.choose_year")}</InputLabel>
<Select
name="date"
multiple={multiple}
size="small"
variant="outlined"
value={formik.values.date}
onChange={yearChange}
onBlur={formik.handleBlur("date")}
input={<OutlinedInput label={t("filters.choose_year")}/>}
renderValue={multiple ? (selected) => (
<Box sx={{display: 'flex', flexWrap: 'wrap', gap: 0.5}}>
{selected.map((value) => (
<Chip key={value} label={value}
sx={{color: "#fff", backgroundColor: "primary.dark"}}/>
))}
</Box>
) : undefined}
>
{
shamsiYearList.map((year) => (
<MenuItem
key={year}
value={year}
>
{year}
</MenuItem>
))
}
</Select>
</FormControl>
)
};
export default YearFilter;

144
src/components/dashboard/reports/Filter/index.jsx Normal file
View File

@@ -0,0 +1,144 @@
import {
Accordion,
AccordionDetails,
AccordionSummary,
Box,
Button,
CircularProgress,
IconButton,
Stack,
Tooltip,
Typography
} from "@mui/material";
import {useFormik} from "formik";
import ProvinceFilter from "../Filter/ProvinceFilter";
import YearFilter from "../Filter/YearFilter";
import FilterAltIcon from '@mui/icons-material/FilterAlt';
import EqualizerIcon from '@mui/icons-material/Equalizer';
import {useTranslations} from "next-intl";
import TroubleshootIcon from '@mui/icons-material/Troubleshoot';
import CachedIcon from '@mui/icons-material/Cached';
import {useEffect, useState} from "react";
import moment from "jalali-moment";
import {periodOfYear} from "@/core/utils/yearPeriodFinder";
const Filter = ({title, filterItem, setFilterOption, isLoadingReportList, mutate}) => {
const t = useTranslations();
const filter_by_province = filterItem.find((item) => item.type === "province");
const filter_by_year = filterItem.find((item) => item.type === "year");
const [expanded, setExpanded] = useState(false);
const [filteredText, setFilteredText] = useState({province: "", year: ""});
const [stepValue, setStepValue] = useState({
...(filter_by_year && {
date: filter_by_year.multiple ? [] : `${moment().format('jYYYY')}`
}),
...(filter_by_province && {
province_id: filter_by_province.multiple ? [] : ""
}),
from_date: periodOfYear(moment().format('jYYYY')).from,
to_date: periodOfYear(moment().format('jYYYY')).to
})
const formik = useFormik({
enableReinitialize: true,
initialValues: stepValue, onSubmit: (values, {setSubmitting}) => {
setStepValue(values)
const province = values.province_id;
const fields = [
values.from_date ? {key: "from_date", value: values.from_date} : null,
values.to_date ? {key: "to_date", value: values.to_date} : null,
...(Array.isArray(province)
? province.length !== 0
? province.map((item, index) => ({key: `province_id[${index}]`, value: item}))
: []
: province
? [{key: "province_id", value: province}]
: []
),
].filter(Boolean);
setFilterOption(fields)
},
});
useEffect(() => {
const province = formik.values.province_id;
const fields = [
formik.values.from_date ? {key: "from_date", value: formik.values.from_date} : null,
formik.values.to_date ? {key: "to_date", value: formik.values.to_date} : null,
...(Array.isArray(province)
? province.length !== 0
? province.map((item, index) => ({key: `province_id[${index}]`, value: item}))
: []
: province
? [{key: "province_id", value: province}]
: []
),
].filter(Boolean);
setFilterOption(fields)
}, []);
return (
<Accordion elevation={0} expanded={expanded} onChange={() => {
}} sx={{
mb: 2,
borderBottom: 2,
borderBottomColor: "divider",
backgroundColor: "#f1f1f1",
}}>
<AccordionSummary sx={{cursor: "unset !important"}}>
<Box sx={{width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between"}}>
<Box sx={{display: "flex", alignItems: "center", gap: 0.5}}>
<EqualizerIcon sx={{color: "primary.main"}}/>
<Typography sx={{fontWeight: 500, color: "primary.main"}}>{title}</Typography>
<Typography variant="caption" sx={{fontWeight: 500}} color="error">
{filteredText.province} {filteredText.year}
</Typography>
</Box>
<Box>
<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",
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}
setFilteredText={setFilteredText}/> : ""
}
{filter_by_year ?
<YearFilter formik={formik} multiple={filter_by_year.multiple}
setFilteredText={setFilteredText}/> : ""
}
</Stack>
<Stack>
<Button onClick={formik.handleSubmit} variant="contained"
disabled={isLoadingReportList || !formik.dirty}
startIcon={isLoadingReportList ?
<CircularProgress size={20} color="inherit"/> :
<TroubleshootIcon/>}
>{t("filters.filter")}</Button>
</Stack>
</AccordionDetails>
</Accordion>
)
};
export default Filter;

47
src/components/dashboard/reports/LoanDetails/RadialBarChart.jsx Normal file
View File

@@ -0,0 +1,47 @@
import Chart from "@/core/components/Chart";
import {calculateGradientColor} from "@/core/utils/gradientColorHandler";
const RadialBarChart = ({data}) => {
const specialOption = {
title: {
text: undefined,
},
plotOptions: {
radialBar: {
startAngle: -90,
endAngle: 90,
track: {
background: "#e7e7e7",
strokeWidth: '90%',
margin: 5, // margin is in pixels
dropShadow: {
enabled: true,
top: 2,
left: 0,
color: '#999',
opacity: 1,
blur: 2
}
},
dataLabels: {
name: {
show: false
},
value: {
offsetY: -2,
fontSize: '22px'
}
}
}
},
fill: {
colors: calculateGradientColor(data)
},
};
const series = [data]
return (
<Chart chartId="LoanProgressBar" type="radialBar" specialOption={specialOption} series={series}/>
)
};
export default RadialBarChart;

46
src/components/dashboard/reports/LoanDetails/RadialBarSemiCircularChart.jsx Normal file
View File

@@ -0,0 +1,46 @@
import Chart from "@/core/components/Chart";
import {calculateGradientColor} from "@/core/utils/gradientColorHandler";
const RadialBarSemiCircularChart = ({data, label}) => {
const specialOption = {
title: {
text: undefined,
},
plotOptions: {
radialBar: {
startAngle: -110,
endAngle: 110,
track: {
background: "#e7e7e7",
strokeWidth: '80%',
},
dataLabels: {
name: {
fontSize: '20px',
offsetY: 110,
color: "#8c8c8c"
},
value: {
offsetY: 50,
fontSize: '50px',
fontWeight: 500,
color: "#8c8c8c",
formatter: function (val) {
return val + "%";
}
}
}
}
},
fill: {
colors: calculateGradientColor(data)
},
labels: [label],
};
const series = [data]
return (
<Chart chartId="LoanProgressBar" type="radialBar" specialOption={specialOption} series={series}/>
)
};
export default RadialBarSemiCircularChart;

51
src/components/dashboard/reports/LoanDetails/RadialBarStrokedChart.jsx Normal file
View File

@@ -0,0 +1,51 @@
import Chart from "@/core/components/Chart";
import {calculateGradientColor} from "@/core/utils/gradientColorHandler";
import {useTranslations} from "next-intl";
const RadialBarStrokedChart = ({data, label}) => {
const t = useTranslations();
const specialOption = {
title: {
text: undefined,
},
plotOptions: {
radialBar: {
startAngle: -110,
endAngle: 110,
track: {
background: "#e7e7e7",
strokeWidth: '80%',
},
dataLabels: {
name: {
fontSize: '20px',
offsetY: 110,
color: "#8c8c8c"
},
value: {
offsetY: 50,
fontSize: '50px',
fontWeight: 500,
color: "#8c8c8c",
formatter: function (val) {
return val + "%";
}
}
}
}
},
stroke: {
dashArray: 4
},
fill: {
colors: calculateGradientColor(data)
},
labels: [label],
};
const series = [data]
return (
<Chart chartId="LoanProgressBar" type="radialBar" specialOption={specialOption} series={series}/>
)
};
export default RadialBarStrokedChart;

37
src/components/dashboard/reports/LoanDetails/index.jsx Normal file
View File

@@ -0,0 +1,37 @@
import {Grid, Paper} from "@mui/material";
import {useTranslations} from "next-intl";
import RadialBarSemiCircularChart from "@/components/dashboard/reports/LoanDetails/RadialBarSemiCircularChart";
import RadialBarStrokedChart from "@/components/dashboard/reports/LoanDetails/RadialBarStrokedChart";
const LoanDetails = () => {
const t = useTranslations();
return (
<Paper elevation={2} sx={{width: "95%", mx: "auto", my: 2, pb: 2, background: "#f7f7f7e6"}}>
{/*<Filter title={t("reports.loan_details")}*/}
{/* filterItem={[*/}
{/* {type: "province", type_fa: "استان", multiple: false},*/}
{/* {type: "year", type_fa: "سال", multiple: false}*/}
{/* ]}*/}
{/* setFilterOption={setFilterOption}*/}
{/* isLoadingReportList={isLoadingReportList}*/}
{/*/>*/}
<Grid container sx={{justifyContent: {xs: "center", md: "space-between"}}}>
<Grid item xs={12} sm={10} md={5} sx={{aspectRatio: "1/0.75"}}>
<RadialBarSemiCircularChart data={20} label={t("reports.cost_of_loan_refer_to_bank")}/>
</Grid>
<Grid item xs={12} sm={10} md={5} sx={{aspectRatio: "1/0.75"}}>
<RadialBarSemiCircularChart data={60} label={t("reports.number_of_loan_refer_to_bank")}/>
</Grid>
<Grid item xs={12} sm={10} md={5} sx={{aspectRatio: "1/0.75"}}>
<RadialBarSemiCircularChart data={95} label={t("reports.cost_of_payed_loan")}/>
</Grid>
<Grid item xs={12} sm={10} md={5} sx={{aspectRatio: "1/0.75"}}>
<RadialBarStrokedChart data={15} label={t("reports.number_of_payed_loan")}/>
</Grid>
</Grid>
</Paper>
)
};
export default LoanDetails;

34
src/components/dashboard/reports/LoanDistribution/PieChart.jsx Normal file
View File

@@ -0,0 +1,34 @@
import Chart from "@/core/components/Chart";
import {useTheme} from "@mui/material/styles";
import {useMediaQuery} from "@mui/material";
const Pie = ({data}) => {
const theme = useTheme();
const upperMd = useMediaQuery((theme.breakpoints.up("md")))
const specialOption = {
title: {
text: undefined,
},
fill: {
opacity: 0.9,
},
labels: data.map((item) => ` ${item.state_name}`),
dataLabels: {
enabled: true,
style: {
fontSize: '14px',
fontWeight: 300,
},
},
legend: {
show: upperMd
}
};
const series = data.map((item) => +item.percentage)
return (
<Chart chartId="LoanDistributionPie" type="pie" specialOption={specialOption} series={series}/>
)
};
export default Pie;

41
src/components/dashboard/reports/LoanDistribution/PolarChart.jsx Normal file
View File

@@ -0,0 +1,41 @@
import Chart from "@/core/components/Chart";
import {useTheme} from "@mui/material/styles";
import {useMediaQuery} from "@mui/material";
const PolarChart = ({data}) => {
const theme = useTheme();
const upperMd = useMediaQuery((theme.breakpoints.up("md")))
const specialOption = {
title: {
text: undefined,
},
plotOptions: {
polarArea: {
rings: {
strokeWidth: 2,
strokeColor: '#e3e3e3',
},
},
},
fill: {
opacity: 0.9,
},
labels: data.map((item) => ` ${item.state_name}`),
dataLabels: {
enabled: true,
style: {
fontSize: '14px',
fontWeight: 400,
},
},
legend: {
show: upperMd
}
};
const series = data.map((item) => +item.percentage)
return (
<Chart chartId="LoanDistributionPolar" type="polarArea" specialOption={specialOption} series={series}/>
)
};
export default PolarChart;

60
src/components/dashboard/reports/LoanDistribution/index.jsx Normal file
View File

@@ -0,0 +1,60 @@
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();
const {errorReportList, isLoadingReportList, reportList, setFilterOption, mutate} = useChart(GET_LOAN_DISTRIBUTION);
return (
<Paper elevation={2} sx={{width: "95%", mx: "auto", my: 2, pb: 2, background: "#f7f7f7e6"}}>
<Filter title={t("reports.loan_distribution")}
filterItem={[
{type: "province", type_fa: "استان", multiple: true},
{type: "year", type_fa: "سال", multiple: false}
]}
setFilterOption={setFilterOption}
isLoadingReportList={isLoadingReportList}
mutate={mutate}
/>
<Grid container sx={{justifyContent: {xs: "center", md: "space-between", position: "relative"}}}>
{isLoadingReportList ? (
<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: "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={6} xl={5} sx={{aspectRatio: "1/0.75"}}>
<PolarChart data={reportList}/>
</Grid>
<Grid item xs={12} sm={10} md={6} xl={5} sx={{aspectRatio: "1/0.75"}}>
<Pie data={reportList}/>
</Grid>
</>
)}
</Grid>
</Paper>
)
};
export default LoanDistribution;

64
src/components/dashboard/reports/LoanProgress/BarChart.jsx Normal file
View File

@@ -0,0 +1,64 @@
import {calculateGradientColor} from "@/core/utils/gradientColorHandler";
import Chart from "@/core/components/Chart";
const BarChart = ({data}) => {
const usableArray = data.map(({province_name, percentage, ...rest}) => ({
x: province_name,
y: +percentage,
...rest,
}));
let colorArray = data.map((obj) => calculateGradientColor(obj.percentage));
const specialOption = {
title: {
text: undefined,
},
plotOptions: {
bar: {
distributed: true,
horizontal: false,
},
},
legend: {
show: false,
},
colors: colorArray,
xaxis: {
labels: {
rotate: 45,
rotateAlways: false,
trim: false,
style: {
fontWeight: 600,
fontSize: '11px',
colors: '#7e7e7e',
},
},
},
yaxis: {
min: 0,
max: 100,
labels: {
formatter: function (val) {
return val + '%';
},
},
},
dataLabels: {
enabled: true,
style: {
fontSize: '14px',
fontWeight: 400,
},
},
};
const series = [
{
name: 'درصد پیشرفت',
data: usableArray,
},
];
return <Chart chartId="LoanProgressBar" type="bar" specialOption={specialOption} series={series}/>;
};
export default BarChart;

67
src/components/dashboard/reports/LoanProgress/index.jsx Normal file
View File

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

17
src/components/dashboard/reports/index.jsx Normal file
View File

@@ -0,0 +1,17 @@
import LoanProgress from "@/components/dashboard/reports/LoanProgress";
import LoanDistribution from "@/components/dashboard/reports/LoanDistribution";
import LoanDetails from "@/components/dashboard/reports/LoanDetails";
import ExcelExport from "@/components/dashboard/reports/ExcelExport";
const DashboardReportsComponent = (props) => {
return (
<>
<ExcelExport/>
<LoanProgress/>
<LoanDistribution/>
<LoanDetails/>
</>
)
};
export default DashboardReportsComponent;