working on datepickerrange problems

package.json

@@ -22,12 +22,13 @@
     "formik": "^2.4.5",
     "jalali-moment": "^3.3.11",
     "material-react-table": "^2.11.2",
-    "next": "14.1.0",
+    "next": "^14.2.3",
     "react": "^18",
     "react-dom": "^18",
     "sass": "^1.75.0",
     "stylis": "^4.3.1",
-    "stylis-plugin-rtl": "^2.1.1"
+    "stylis-plugin-rtl": "^2.1.1",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "eslint": "^8",

src/components/home/index.jsx

@@ -94,13 +94,21 @@ function HomeComponent() {
                     "between"
                 ],
             },
+            {
+                accessorKey: 'created_at',
+                header: 'تاریخ ساخت',
+                id: "created_at",
+                enableColumnFilter: true,
+                datatype: "date",
+                filterFn: "between",
+            },
             {
                 accessorKey: 'updated_at',
                 header: 'تاریخ بروزرسانی',
                 id: "updated_at",
                 enableColumnFilter: true,
                 datatype: "date",
-                filterFn: "between",
+                filterFn: "equals",
             },
             {
                 accessorKey: 'company',
@@ -120,7 +128,7 @@ function HomeComponent() {
                 header: 'منطقه',
                 id: "area",
                 enableColumnFilter: true,
-                datatype: "numeric",
+                datatype: "array",
                 filterFn: "equals",
                 columnSelectOption: [
                     {value: 1, label: "وایتل"},

src/core/components/DataTable/filter/FilterBody.jsx

@@ -6,10 +6,10 @@ import useTableSetting from "@/lib/hooks/useTableSetting";
 import {useEffect, useState} from "react";
 import FilterBodyField from "@/core/components/DataTable/filter/FilterBodyField";
 import FilterHeader from "@/core/components/DataTable/filter/FilterHeader";
+import * as Yup from "yup";
 
 const ScrollBox = styled(Box)({
     flexGrow: 1,
-    padding: '16px',
     overflowY: 'scroll',
     maxWidth: "450px",
     '::-webkit-scrollbar': {
@@ -40,8 +40,10 @@ function FilterBody({columns, drawerState, setDrawerState}) {
         const values = columns.reduce((acc, column) => {
             if (!column.enableColumnFilter) return acc;
             const filter = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters']?.find((filter) => filter.id === column.id);
-            if (column.datatype === 'select2') {
+            if (column.datatype === 'array') {
                 acc[column.id] = filter?.value || [];
+            } else if (column._filterFn === "between") {
+                acc[column.id] = filter?.value || ["", ""];
             } else {
                 acc[column.id] = filter?.value || '';
             }
@@ -50,6 +52,33 @@ function FilterBody({columns, drawerState, setDrawerState}) {
         setInitialValues(values);
     }, [columns, settingStore, userId, pageName, tableName]);
 
+    console.log("initialValues", initialValues)
+
+    const validationSchema = Yup.object().shape(
+        columns.reduce((acc, column) => {
+            if (column._filterFn === "between") {
+                acc[column.id] = Yup.array().of(Yup.string()).test({
+                    test(value, ctx) {
+                        const [start, end] = value || ["", ""];
+                        const startInt = parseInt(start, 10);
+                        const endInt = parseInt(end, 10);
+                        if (start && end && endInt <= startInt) {
+                            return ctx.createError({
+                                message: `مقدار وارده باید بیشتر از (${start}) باشد`
+                            });
+                        } else if (start && !end) {
+                            return ctx.createError({
+                                message: "این بخش را پر نمایید"
+                            });
+                        }
+                        return true;
+                    }
+                });
+            }
+            return acc;
+        }, {})
+    );
+
     const handleSubmit = (values) => {
         console.log("Form values:", values);
     };
@@ -58,44 +87,50 @@ function FilterBody({columns, drawerState, setDrawerState}) {
         <Drawer open={drawerState} onClose={() => setDrawerState(false)}
                 sx={{overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%"}}>
             <FilterHeader setDrawerState={setDrawerState}/>
-            <ScrollBox>
+            {Object.keys(initialValues).length > 0 && (
-                {Object.keys(initialValues).length > 0 && (
+                <ScrollBox>
                     <Formik
                         initialValues={initialValues}
                         onSubmit={handleSubmit}
+                        validationSchema={validationSchema}
                     >
-                        {({values, handleChange, handleBlur}) => (
+                        {({values, handleChange, handleBlur, setFieldValue, errors, touched}) => (
                             <Form>
-                                {columns.map((column) => (
+                                <Box sx={{px: 1, py: 2}}>
-                                    column.enableColumnFilter && (
+                                    {columns.map((column) => (
-                                        <FilterBodyField
+                                        column.enableColumnFilter && (
-                                            key={column.id}
+                                            <FilterBodyField
-                                            column={column}
+                                                key={column.id}
-                                            value={values[column.id]}
+                                                column={column}
-                                            onChange={handleChange}
+                                                value={values[column.id]}
-                                            onBlur={handleBlur}
+                                                handleChange={handleChange}
-                                        />
+                                                handleBlur={handleBlur}
-                                    )
+                                                setFieldValue={setFieldValue}
-                                ))}
+                                                errors={errors}
+                                                touched={touched}
+                                            />
+                                        )
+                                    ))}
+                                </Box>
+                                <Box sx={{
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    pb: 2
+                                }}>
+                                    <Button variant="contained" size="large" type="submit"
+                                            sx={{
+                                                boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
+                                                backgroundColor: "#16534a", ':hover': {
+                                                    backgroundColor: "#16534a",
+                                                }, width: "50%"
+                                            }}>اعمال فیلتر</Button>
+                                </Box>
                             </Form>
                         )}
                     </Formik>
-                )}
+                </ScrollBox>
-            </ScrollBox>
+            )}
-            <Box sx={{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
-                py: 1,
-            }}>
-                <Button variant="contained" size="large" onClick={handleSubmit}
-                        sx={{
-                            backgroundColor: "#16534a", ':hover': {
-                                backgroundColor: "#16534a",
-                            }, width: "50%"
-                        }}>اعمال فیلتر</Button>
-            </Box>
         </Drawer>
     );
 }

src/core/components/DataTable/filter/FilterBodyField.jsx

@@ -6,9 +6,9 @@ import useTableSetting from "@/lib/hooks/useTableSetting";
 import CustomSelect from "@/core/components/DataTable/filter/fieldsType/CustomSelect";
 import CustomTextField from "@/core/components/DataTable/filter/fieldsType/CustomTextField";
 import CustomTextFieldRange from "@/core/components/DataTable/filter/fieldsType/CustomTextFieldRange";
-import CustomDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDatePicker";
+import CustomDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker";
 import CustomSelectMultiple from "@/core/components/DataTable/filter/fieldsType/CustomSelectMultiple";
-import CustomDatePickerRange from "@/core/components/DataTable/filter/fieldsType/CustomDatePickerRange";
+import CustomDatePickerRange from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange";
 
 const columnFilterModeOptionFa = {
     equals: "برابر",
@@ -20,7 +20,7 @@ const columnFilterModeOptionFa = {
     between: "مابین"
 }
 
-function FilterBodyField({column, value}) {
+function FilterBodyField({column, value, handleChange, handleBlur, setFieldValue, errors, touched}) {
     const [anchorEl, setAnchorEl] = useState(null);
     const [userId, setUserId] = useState(0);
     const [pageName, setPageName] = useState('testPage');
@@ -28,7 +28,6 @@ function FilterBodyField({column, value}) {
     const {settingStore} = useTableSetting();
     const defaultFilter = (settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.fn || column._filterFn;
     const defaultFilterTranslation = columnFilterModeOptionFa[defaultFilter] || defaultFilter;
-
     const handleOpenFilterBox = (event) => {
         setAnchorEl(event.currentTarget);
     };
@@ -43,11 +42,16 @@ function FilterBodyField({column, value}) {
                     value={value}
                     defaultFilterTranslation={defaultFilterTranslation}
                     handleOpenFilterBox={handleOpenFilterBox}
+                    handleBlur={handleBlur}
+                    handleChange={handleChange}
+                    errors={errors}
+                    touched={touched}
                 />
             ) : column.datatype === "numeric" && column._filterFn === "equals" && Array.isArray(column.columnSelectOption) ? (
                 <CustomSelect
                     column={column}
                     value={value}
+                    setFieldValue={setFieldValue}
                     defaultFilterTranslation={defaultFilterTranslation}
                     handleOpenFilterBox={handleOpenFilterBox}
                 />
@@ -55,6 +59,7 @@ function FilterBodyField({column, value}) {
                 <CustomDatePicker
                     column={column}
                     value={value}
+                    setFieldValue={setFieldValue}
                     defaultFilterTranslation={defaultFilterTranslation}
                     handleOpenFilterBox={handleOpenFilterBox}
                 />
@@ -69,6 +74,7 @@ function FilterBodyField({column, value}) {
                 <CustomSelectMultiple
                     column={column}
                     value={value}
+                    setFieldValue={setFieldValue}
                     defaultFilterTranslation={defaultFilterTranslation}
                     handleOpenFilterBox={handleOpenFilterBox}
                 />
@@ -78,6 +84,8 @@ function FilterBodyField({column, value}) {
                     value={value}
                     defaultFilterTranslation={defaultFilterTranslation}
                     handleOpenFilterBox={handleOpenFilterBox}
+                    handleBlur={handleBlur}
+                    handleChange={handleChange}
                 />
             )}
             {Array.isArray(column.columnFilterModeOptions) && anchorEl !== null && (

src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import DatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/DatePicker";
+
+function CustomDatePicker({column, value, defaultFilterTranslation, setFieldValue}) {
+    return (
+        <DatePicker
+            column={column}
+            value={value}
+            defaultFilterTranslation={defaultFilterTranslation}
+            setFieldValue={setFieldValue}
+        />
+    );
+}
+
+export default CustomDatePicker;

src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx

@@ -0,0 +1,25 @@
+'use client'
+
+import DatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/DatePicker";
+import React from "react";
+
+function CustomDatePickerRange({column, value, defaultFilterTranslation, setFieldValue}) {
+    return (
+        <>
+            <DatePicker
+                column={column}
+                value={value}
+                defaultFilterTranslation={defaultFilterTranslation}
+                setFieldValue={setFieldValue}
+            />
+            <DatePicker
+                column={column}
+                value={value}
+                defaultFilterTranslation={defaultFilterTranslation}
+                setFieldValue={setFieldValue}
+            />
+        </>
+    );
+}
+
+export default CustomDatePickerRange;

src/core/components/DataTable/filter/fieldsType/CustomDate/DatePicker.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import {LocalizationProvider, MobileDatePicker} from "@mui/x-date-pickers";
+import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
+import {faIR} from "@mui/x-date-pickers/locales";
+import {IconButton, InputAdornment, Typography} from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import moment from "jalali-moment";
+
+function DatePicker({column, value, defaultFilterTranslation, setFieldValue}) {
+    return (
+        <LocalizationProvider
+            dateAdapter={AdapterDateFnsJalali}
+            localeText={
+                faIR.components.MuiLocalizationProvider.defaultProps.localeText
+            }
+        >
+            <MobileDatePicker
+                value={value ? new Date(value) : null}
+                sx={{my: 1, width: "100%"}}
+                id={column.id}
+                name={column.id}
+                onChange={(value) => {
+                    const date = new Date(value);
+                    const formattedDate = moment(date)
+                        .locale("en")
+                        .format("YYYY-MM-DD");
+                    setFieldValue(column.id, formattedDate);
+                }}
+                slotProps={{
+                    textField: {
+                        placeholder: "تاریخ خود را وارد کنید",
+                        helperText: (
+                            <Typography variant="button" sx={{color: "#16534a"}}>
+                                نوع فیلتر: {defaultFilterTranslation} (تاریخ)
+                            </Typography>
+                        ),
+                        InputProps: {
+                            endAdornment: (
+                                <InputAdornment position="end">
+                                    <IconButton
+                                        size="small"
+                                        onClick={(event) => {
+                                            event.stopPropagation();
+                                            setFieldValue(column.id, "");
+                                        }}
+                                        sx={{
+                                            color: "#bfbfbf",
+                                            '&:hover': {
+                                                backgroundColor: 'rgba(189, 189, 189, 0.1)',
+                                                color: "#363434"
+                                            },
+                                        }}
+                                    >
+                                        <ClearIcon/>
+                                    </IconButton>
+                                </InputAdornment>
+                            ),
+                        },
+                    },
+                }}
+            />
+        </LocalizationProvider>
+    );
+}
+
+export default DatePicker;

src/core/components/DataTable/filter/fieldsType/CustomDatePicker.jsx

@@ -1,30 +0,0 @@
-'use client'
-
-import {InputAdornment, TextField, Typography} from "@mui/material";
-import FilterListIcon from '@mui/icons-material/FilterList';
-
-function CustomDatePicker({column, value, defaultFilterTranslation, handleOpenFilterBox}) {
-    return (
-        <TextField
-            id={column.id}
-            label={column.header}
-            value={value}
-            fullWidth
-            helperText={<Typography variant="button" sx={{color: "#16534a"}}>
-                نوع فیلتر: {defaultFilterTranslation}
-            </Typography>}
-            variant="outlined"
-            size="normal"
-            sx={{marginY: 1}}
-            InputProps={{
-                endAdornment: (
-                    <InputAdornment position="end" sx={{cursor: "pointer"}} onClick={handleOpenFilterBox}>
-                        <FilterListIcon/>
-                    </InputAdornment>
-                ),
-            }}
-        />
-    );
-}
-
-export default CustomDatePicker;

src/core/components/DataTable/filter/fieldsType/CustomDatePickerRange.jsx

@@ -1,30 +0,0 @@
-'use client'
-
-import {InputAdornment, TextField, Typography} from "@mui/material";
-import FilterListIcon from '@mui/icons-material/FilterList';
-
-function CustomDatePickerRange({column, value, defaultFilterTranslation, handleOpenFilterBox}) {
-    return (
-        <TextField
-            id={column.id}
-            label={column.header}
-            value={value}
-            fullWidth
-            helperText={<Typography variant="button" sx={{color: "#16534a"}}>
-                نوع فیلتر: {defaultFilterTranslation}
-            </Typography>}
-            variant="outlined"
-            size="normal"
-            sx={{marginY: 1}}
-            InputProps={{
-                endAdornment: (
-                    <InputAdornment position="end" sx={{cursor: "pointer"}} onClick={handleOpenFilterBox}>
-                        <FilterListIcon/>
-                    </InputAdornment>
-                ),
-            }}
-        />
-    );
-}
-
-export default CustomDatePickerRange;

src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx

@@ -1,27 +1,22 @@
 'use client'
 
 import {FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography} from "@mui/material";
-import {useState} from "react";
 
-function CustomSelect({column, value, defaultFilterTranslation}) {
+function CustomSelect({column, value, defaultFilterTranslation, setFieldValue}) {
-    const [fieldValue, setFieldValue] = useState(value);
     const columnSelectOption = column.columnSelectOption;
 
-    const handleChange = (event) => {
-        setFieldValue(event.target.value);
-    };
-
     return (
         <FormControl fullWidth sx={{marginY: 1}}>
-            <InputLabel htmlFor="uncontrolled-native"
+            <InputLabel id={`label${column.id}`}>{column.header}</InputLabel>
-                        id={`label${column.id}`}>{column.header}</InputLabel>
             <Select
                 labelId={`label${column.id}`}
                 id={column.id}
                 name={column.header}
-                value={fieldValue}
+                value={value}
                 input={<OutlinedInput label={column.header}/>}
-                onChange={handleChange}
+                onChange={(e) => {
+                    setFieldValue(column.id, e.target.value)
+                }}
             >
                 {columnSelectOption.map((option) => (
                     <MenuItem

src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx

@@ -1,9 +1,25 @@
 'use client'
 
-import {FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography} from "@mui/material";
+import {
+    Box,
+    Chip,
+    FormControl,
+    FormHelperText,
+    InputLabel,
+    MenuItem,
+    OutlinedInput,
+    Select,
+    Typography
+} from "@mui/material";
 
-function CustomSelectMultiple({column, value, defaultFilterTranslation}) {
+function CustomSelectMultiple({column, value, defaultFilterTranslation, setFieldValue}) {
     const columnSelectOption = column.columnSelectOption;
+
+    const getLabelForValue = (value) => {
+        const option = columnSelectOption.find(opt => opt.value === value);
+        return option ? option.label : value;
+    };
+
     return (
         <FormControl fullWidth sx={{marginY: 1}}>
             <InputLabel htmlFor="uncontrolled-native"
@@ -12,8 +28,18 @@ function CustomSelectMultiple({column, value, defaultFilterTranslation}) {
                 labelId={`label${column.id}`}
                 id={column.id}
                 value={value}
+                multiple
+                onChange={(e) => {
+                    setFieldValue(column.id, e.target.value)
+                }}
+                renderValue={(selected) => (
+                    <Box sx={{display: 'flex', flexWrap: 'wrap', gap: 0.5}}>
+                        {selected.map((value) => (
+                            <Chip key={value} label={getLabelForValue(value)}/>
+                        ))}
+                    </Box>
+                )}
                 input={<OutlinedInput label={column.header}/>}
-                // onChange={handleChange}
             >
                 {columnSelectOption.map((option) => (
                     <MenuItem

src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx

@@ -3,12 +3,15 @@
 import {InputAdornment, TextField, Typography} from "@mui/material";
 import FilterListIcon from '@mui/icons-material/FilterList';
 
-function CustomTextField({column, value, defaultFilterTranslation, handleOpenFilterBox}) {
+function CustomTextField({column, value, defaultFilterTranslation, handleOpenFilterBox, handleChange, handleBlur}) {
     return (
         <TextField
             id={column.id}
+            name={column.id}
             label={column.header}
             value={value}
+            onChange={handleChange}
+            onBlur={handleBlur}
             fullWidth
             helperText={<Typography variant="button" sx={{color: "#16534a"}}>
                 نوع فیلتر: {defaultFilterTranslation}

src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx

@@ -1,31 +1,41 @@
-'use client'
-
 import {Box, InputAdornment, TextField, Typography} from "@mui/material";
 import FilterListIcon from '@mui/icons-material/FilterList';
 
-function CustomTextFieldRange({column, value, defaultFilterTranslation, handleOpenFilterBox}) {
+function CustomTextFieldRange({
+                                  column,
+                                  value,
+                                  defaultFilterTranslation,
+                                  handleOpenFilterBox,
+                                  handleChange,
+                                  handleBlur,
+                                  errors,
+                                  touched
+                              }) {
     return (
         <Box sx={{display: "flex"}}>
             <TextField
-                id={column.id}
+                id={`${column.id}[0]`}
-                label={<Typography>
+                name={`${column.id}[0]`}
-                    از {column.header}
+                onChange={handleChange}
-                </Typography>}
+                onBlur={handleBlur}
-                value={value}
+                label={<Typography>از {column.header}</Typography>}
+                value={value[0]}
                 fullWidth
-                helperText={<Typography variant="button" sx={{color: "#16534a"}}>
+                helperText={<Typography variant="button" sx={{color: "#16534a"}}>نوع
-                    نوع فیلتر: {defaultFilterTranslation}
+                    فیلتر: {defaultFilterTranslation}</Typography>}
-                </Typography>}
                 variant="outlined"
                 size="normal"
                 sx={{marginY: 1, marginRight: 1}}
             />
             <TextField
-                id={column.id}
+                id={`${column.id}[1]`}
-                label={<Typography>
+                name={`${column.id}[1]`}
-                    تا {column.header}
+                onChange={handleChange}
-                </Typography>}
+                onBlur={handleBlur}
-                value={value}
+                error={touched?.[column.id] && Boolean(errors?.[column.id])}
+                helperText={touched?.[column.id] ? errors?.[column.id] : null}
+                label={<Typography>تا {column.header}</Typography>}
+                value={value[1]}
                 fullWidth
                 variant="outlined"
                 size="normal"