LFFE-10 complete sending data part from filters to main page of it and start to sending request and showing witch items are filtering after this

public/locales/fa/app.json

@@ -471,5 +471,8 @@
     "button-add": "ثبت"
   },
   "reports": {
+    "loan_progress": "درصد پیشرفت تسویه وام",
+    "loan_distribution": "درصد توضیع وام ها در هر مرحله",
+    "filter_as": "فیلتر های اعمال شده"
   }
 }

src/components/dashboard/reports/Filter/ProvinceFilter.jsx

@@ -0,0 +1,55 @@
+import {Box, Chip, FormControl, InputLabel, MenuItem, OutlinedInput, Select} from "@mui/material";
+
+const provinceList = [
+    {name: "قزوین", id: 1},
+    {name: "تبریز", id: 2},
+    {name: "مشهد", id: 3}
+]
+
+const ProvinceFilter = ({formik, multiple}) => {
+    const provinceChange = (event) => {
+        const {target: {value}} = event;
+        formik.handleChange(event);
+        formik.setFieldValue('province_id', value);
+    };
+    return (
+        <FormControl sx={{width: 300, mx: 1}}>
+            <InputLabel size="small">انتخاب استان</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="انتخاب استان"/>}
+                renderValue={multiple ? (selected) => (
+                    <Box sx={{display: 'flex', flexWrap: 'wrap', gap: 0.5}}>
+                        {selected.map((value) => {
+                            const selectedProvince = provinceList.find(province => province.id === value);
+                            return (
+                                <Chip
+                                    key={value}
+                                    label={selectedProvince ? selectedProvince.name : ''}
+                                    sx={{color: "#fff", backgroundColor: "primary.dark"}}
+                                />
+                            );
+                        })}
+                    </Box>
+                ) : undefined}
+            >
+                {provinceList.map((province) => (
+                    <MenuItem
+                        key={province.id}
+                        value={province.id}
+                    >
+                        {province.name}
+                    </MenuItem>
+                ))}
+            </Select>
+        </FormControl>
+    )
+};
+
+export default ProvinceFilter;

src/components/dashboard/reports/Filter/YearFilter.jsx

@@ -0,0 +1,47 @@
+import {Box, Chip, FormControl, InputLabel, MenuItem, OutlinedInput, Select} from "@mui/material";
+import moment from "jalali-moment";
+
+const currentShamsiYear = moment().format('jYYYY');
+const shamsiYearList = Array.from({length: currentShamsiYear - 1399}, (_, index) => (currentShamsiYear - index).toString());
+
+const YearFilter = ({formik, multiple}) => {
+    const yearChange = (event) => {
+        const {target: {value}} = event;
+        formik.handleChange(event);
+        formik.setFieldValue('date', value);
+    };
+    return (
+        <FormControl sx={{width: 300, mx: 1}}>
+            <InputLabel size="small">انتخاب سال</InputLabel>
+            <Select
+                name="date"
+                multiple={multiple}
+                size="small"
+                variant="outlined"
+                value={formik.values.date}
+                onChange={yearChange}
+                onBlur={formik.handleBlur("date")}
+                input={<OutlinedInput label="انتخاب سال"/>}
+                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;

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

@@ -1,135 +1,79 @@
-import {
-    Accordion,
-    AccordionDetails,
-    AccordionSummary,
-    Box,
-    Button,
-    Chip,
-    FormControl,
-    InputLabel,
-    MenuItem,
-    OutlinedInput,
-    Select,
-    Stack,
-    Typography
-} from "@mui/material";
+import {Accordion, AccordionDetails, AccordionSummary, Box, Button, Stack, Typography} from "@mui/material";
 import {useFormik} from "formik";
-import {useState} from "react";
-import QueryStatsIcon from '@mui/icons-material/QueryStats';
+import ProvinceFilter from "./ProvinceFilter";
+import YearFilter from "./YearFilter";
+import FilterAltIcon from '@mui/icons-material/FilterAlt';
+import {useTranslations} from "next-intl";
+import TroubleshootIcon from '@mui/icons-material/Troubleshoot';
+import moment from "jalali-moment";
 
-const provinceList = [
-    'قزوین',
-    'تبریز',
-    'مشهد',
-];
-const yearList = [
-    '1401',
-    '1402',
-    '1403',
-]
+const periodOfYear = (year) => {
+    const isLeapYear = moment.jIsLeapYear(year);
+    const firstDayGeorgian = moment.from(`${year}/01/01`, 'fa').format('YYYY-MM-DD');
+    const lastDayGeorgian = moment.from(`${year}/12/${isLeapYear ? '30' : '29'}`, 'fa').format('YYYY-MM-DD');
+    return {
+        from: firstDayGeorgian,
+        to: lastDayGeorgian
+    }
+}
+
+const Filter = ({title, filterItem, expanded}) => {
+    const t = useTranslations();
+
+    const filter_by_province = filterItem.find((item) => item.type === "province");
+    const filter_by_year = filterItem.find((item) => item.type === "year");
 
-const Filter = ({title}) => {
-    const [province, setProvince] = useState([]);
-    const [year, setYear] = useState([]);
-    const provinceChange = (event) => {
-        const {
-            target: {value},
-        } = event;
-        setProvince(typeof value === 'string' ? value.split(',') : value);
-    };
-    const yearChange = (event) => {
-        const {
-            target: {value},
-        } = event;
-        setYear(typeof value === 'string' ? value.split(',') : value);
-    };
     const formik = useFormik({
         initialValues: {
-            date: "",
-            province_id: "",
+            ...(filter_by_year && {
+                date: filter_by_year.multiple ? [] : ""
+            }),
+            ...(filter_by_province && {
+                province_id: filter_by_province.multiple ? [] : ""
+            })
         }, onSubmit: (values, {setSubmitting}) => {
-            const formData = new FormData();
-            formData.append("date", values.date);
-            formData.append("province_id", values.province_id);
-
+            const dates = values.date
+            dates.map((date) => {
+                periodOfYear(date);
+            })
+            console.log("val", values);
         },
     });
-
     return (
-        <Accordion elevation='0' sx={{
+        <Accordion elevation={0} sx={{
             mb: 2,
             borderBottom: 2,
             borderBottomColor: "divider",
-            backgroundColor: "#f8f8f8"
+            backgroundColor: "#f1f1f1"
         }}>
-            <AccordionSummary sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
-                <Box>
-                    <Typography sx={{fontWeight: 500, color: "primary.main"}}>{title}</Typography>
-                </Box>
-                <Box>
-                    <Button variant="contained" size="small" endIcon={<QueryStatsIcon/>}>فیلتر</Button>
+            <AccordionSummary>
+                <Box sx={{width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between"}}>
+                    <Box sx={{display: "flex", alignItems: "center", gap: 0.5}}>
+                        <Typography sx={{fontWeight: 500, color: "primary.main"}}>{title}</Typography>
+                        <Typography variant="caption" sx={{fontWeight: 500}} color="error">
+                            | {t("reports.filter_as")} :
+                        </Typography>
+                    </Box>
+                    <FilterAltIcon sx={{color: "primary.main"}}/>
                 </Box>
             </AccordionSummary>
-            <AccordionDetails>
-                <Stack sx={{flexDirection: {xs: "column", sm: "row"}, alignItems: "center",}}>
-                    <FormControl sx={{width: 300, mx: 1}}>
-                        <InputLabel size="small">انتخاب استان</InputLabel>
-                        <Select
-                            multiple
-                            size="small"
-                            variant="outlined"
-                            value={province}
-                            onChange={provinceChange}
-                            input={<OutlinedInput label="انتخاب استان"/>}
-                            renderValue={(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>
-                            )}
-                        >
-                            {provinceList.map((province) => (
-                                <MenuItem
-                                    key={province}
-                                    value={province}
-                                >
-                                    {province}
-                                </MenuItem>
-                            ))}
-                        </Select>
-                    </FormControl>
-                    <FormControl sx={{width: 300, mx: 1}}>
-                        <InputLabel size="small">انتخاب سال</InputLabel>
-                        <Select
-                            multiple
-                            size="small"
-                            variant="outlined"
-                            value={year}
-                            onChange={yearChange}
-                            input={<OutlinedInput label="انتخاب سال"/>}
-                            renderValue={(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>
-                            )}
-                        >
-                            {yearList.map((year) => (
-                                <MenuItem
-                                    key={year}
-                                    value={year}
-                                >
-                                    {year}
-                                </MenuItem>
-                            ))}
-                        </Select>
-                    </FormControl>
+            <AccordionDetails sx={{display: "flex", 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}/> : ""
+                    }
+                    {filter_by_year ?
+                        <YearFilter formik={formik} multiple={filter_by_year.multiple}/> : ""
+                    }
+                </Stack>
+                <Stack>
+                    <Button onClick={formik.handleSubmit} variant="contained"
+                            disabled={formik.isSubmitting || !formik.dirty}
+                            startIcon={<TroubleshootIcon/>}
+                    >اعمال فیلتر</Button>
                 </Stack>
             </AccordionDetails>
+
         </Accordion>
     )
 };

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

@@ -1,6 +1,8 @@
-import {Chip, Divider, Grid, Paper} from "@mui/material";
+import {Grid, Paper} from "@mui/material";
 import PolarChart from "./PolarChart";
 import Pie from "./PieChart";
+import {useTranslations} from "next-intl";
+import Filter from "@/components/dashboard/reports/Filter";
 
 const fakeData = [
     {name: "آذربایجان شرقی", data: 0},
@@ -36,12 +38,16 @@ const fakeData = [
     {name: "یزد", data: 60}
 ];
 
-const LoanDistribution = (props) => {
+const LoanDistribution = () => {
+    const t = useTranslations();
     return (
-        <Paper elevation={2} sx={{width: "95%", mx: "auto", my: 2, py: 2, background: "#f7f7f7e6"}}>
-            <Divider variant="middle" textAlign="center">
-                <Chip variant="outlined" label="درصد توضیع وام ها در هر مرحله" sx={{color: "#7e7e7e"}}/>
-            </Divider>
+        <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: false},
+                        {type: "year", type_fa: "سال", multiple: true}
+                    ]}
+            />
             <Grid container spacing={2} sx={{justifyContent: "space-between"}}>
                 <Grid item xs={5} sx={{height: "300px"}}>
                     <PolarChart data={fakeData}/>

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

@@ -1,6 +1,7 @@
 import {Grid, Paper} from "@mui/material";
 import BarChart from "./BarChart";
 import Filter from "../Filter";
+import {useTranslations} from "next-intl";
 
 const fakeData = [
     {name: "آذربایجان شرقی", data: 0},
@@ -36,10 +37,16 @@ const fakeData = [
     {name: "یزد", data: 60}
 ];
 
-const LoanProgress = (props) => {
+const LoanProgress = () => {
+    const t = useTranslations();
     return (
         <Paper elevation={2} sx={{width: "95%", mx: "auto", my: 2, pb: 2, background: "#f7f7f7e6"}}>
-            <Filter title="درصد پیشرفت تسویه وام"/>
+            <Filter title={t("reports.loan_progress")}
+                    filterItem={[
+                        {type: "province", type_fa: "استان", multiple: false},
+                        {type: "year", type_fa: "سال", multiple: true}
+                    ]}
+            />
             <Grid container spacing={2}>
                 <Grid item xs={12} sx={{height: "400px"}}>
                     <BarChart data={fakeData}/>