DatePicker finished and start changing menu filter type value

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

@@ -22,10 +22,7 @@ const ScrollBox = styled(Box)({
     '::-webkit-scrollbar-thumb': {
         background: '#16534a',
         borderRadius: '0px',
-    },
+    }
-    '::-webkit-scrollbar-thumb:hover': {
-        background: '#ffffff',
-    },
 });
 
 function FilterBody({columns, drawerState, setDrawerState}) {
@@ -52,11 +49,9 @@ 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") {
+            if (column._filterFn === "between" && column.datatype === "numeric") {
                 acc[column.id] = Yup.array().of(Yup.string()).test({
                     test(value, ctx) {
                         const [start, end] = value || ["", ""];
@@ -66,9 +61,9 @@ function FilterBody({columns, drawerState, setDrawerState}) {
                             return ctx.createError({
                                 message: `مقدار وارده باید بیشتر از (${start}) باشد`
                             });
-                        } else if (start && !end) {
+                        } else if ((start && !end) || (!start && end)) {
                             return ctx.createError({
-                                message: "این بخش را پر نمایید"
+                                message: "این بخش را تکمیل نمایید"
                             });
                         }
                         return true;
@@ -79,8 +74,9 @@ function FilterBody({columns, drawerState, setDrawerState}) {
         }, {})
     );
 
-    const handleSubmit = (values) => {
+    const handleSubmit = (values, {setSubmitting}) => {
         console.log("Form values:", values);
+        setSubmitting(false);
     };
 
     return (
@@ -94,7 +90,17 @@ function FilterBody({columns, drawerState, setDrawerState}) {
                         onSubmit={handleSubmit}
                         validationSchema={validationSchema}
                     >
-                        {({values, handleChange, handleBlur, setFieldValue, errors, touched}) => (
+                        {({
+                              values,
+                              handleChange,
+                              handleBlur,
+                              setFieldValue,
+                              errors,
+                              touched,
+                              isSubmitting,
+                              isValid,
+                              dirty
+                          }) => (
                             <Form>
                                 <Box sx={{px: 1, py: 2}}>
                                     {columns.map((column) => (
@@ -118,13 +124,19 @@ function FilterBody({columns, drawerState, setDrawerState}) {
                                     alignItems: 'center',
                                     pb: 2
                                 }}>
-                                    <Button variant="contained" size="large" type="submit"
+                                    <Button
-                                            sx={{
+                                        type="submit"
-                                                boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
+                                        variant="contained"
-                                                backgroundColor: "#16534a", ':hover': {
+                                        size="large"
-                                                    backgroundColor: "#16534a",
+                                        disabled={isSubmitting || !isValid || !dirty}
-                                                }, width: "50%"
+                                        sx={{
-                                            }}>اعمال فیلتر</Button>
+                                            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>
                         )}

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

@@ -67,6 +67,7 @@ function FilterBodyField({column, value, handleChange, handleBlur, setFieldValue
                 <CustomDatePickerRange
                     column={column}
                     value={value}
+                    setFieldValue={setFieldValue}
                     defaultFilterTranslation={defaultFilterTranslation}
                     handleOpenFilterBox={handleOpenFilterBox}
                 />
@@ -92,6 +93,7 @@ function FilterBodyField({column, value, handleChange, handleBlur, setFieldValue
                 <FilterOptionList
                     handleCloseFilterBox={handleCloseFilterBox}
                     anchorEl={anchorEl}
+                    setanchorEl={setAnchorEl}
                     filterOption={column.columnFilterModeOptions}
                     defaultFilter={defaultFilter}
                     columnFilterModeOptionFa={columnFilterModeOptionFa}

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

@@ -3,10 +3,13 @@
 import {ListItem, Menu} from "@mui/material";
 import {useState} from "react";
 
-function FilterOptionList({defaultFilter, filterOption, handleCloseFilterBox, anchorEl, columnFilterModeOptionFa}) {
+function FilterOptionList({defaultFilter, filterOption, anchorEl, columnFilterModeOptionFa, handleCloseFilterBox}) {
-
     const [selectedFilter, setSelectedFilter] = useState(defaultFilter);
 
+    const handleChnageItem = (event, index) => {
+        setSelectedFilter(filterOption[index]);
+    }
+
     return (
         <Menu
             id="simple-menu"
@@ -17,6 +20,7 @@ function FilterOptionList({defaultFilter, filterOption, handleCloseFilterBox, an
         >
             {filterOption.map((option, index) => (
                 <ListItem key={index}
+                          onClick={(event) => handleChnageItem(event, index)}
                           selected={option === selectedFilter}
                           sx={{cursor: 'pointer', width: "100px", display: "flex", justifyContent: "center"}}>
                     {columnFilterModeOptionFa[option]}
@@ -26,4 +30,4 @@ function FilterOptionList({defaultFilter, filterOption, handleCloseFilterBox, an
     );
 }
 
-export default FilterOptionList;
+export default FilterOptionList;

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

@@ -1,13 +1,19 @@
 import React from 'react';
-import DatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/DatePicker";
+import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
+import {Typography} from "@mui/material";
 
 function CustomDatePicker({column, value, defaultFilterTranslation, setFieldValue}) {
     return (
-        <DatePicker
+        <MuiDatePicker
-            column={column}
+            name={column.id}
             value={value}
-            defaultFilterTranslation={defaultFilterTranslation}
             setFieldValue={setFieldValue}
+            placeholder={column.header}
+            helperText={
+                <Typography variant="button" sx={{color: "#16534a"}}>
+                    نوع فیلتر: {defaultFilterTranslation} (تاریخ)
+                </Typography>
+            }
         />
     );
 }

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

@@ -1,24 +1,33 @@
 'use client'
 
-import DatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/DatePicker";
 import React from "react";
+import {Box, Typography} from "@mui/material";
+import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
 
 function CustomDatePickerRange({column, value, defaultFilterTranslation, setFieldValue}) {
+
     return (
-        <>
+        <Box sx={{display: "flex", gap: 1}}>
-            <DatePicker
+            <MuiDatePicker
-                column={column}
+                name={`${column.id}[0]`}
-                value={value}
+                value={value[0]}
-                defaultFilterTranslation={defaultFilterTranslation}
                 setFieldValue={setFieldValue}
+                maxDate={value[1]}
+                placeholder={`از تاریخ`}
+                helperText={
+                    <Typography variant="button" sx={{color: "#16534a"}}>
+                        نوع فیلتر: {defaultFilterTranslation} (تاریخ)
+                    </Typography>
+                }
             />
-            <DatePicker
+            <MuiDatePicker
-                column={column}
+                name={`${column.id}[1]`}
-                value={value}
+                value={value[1]}
-                defaultFilterTranslation={defaultFilterTranslation}
                 setFieldValue={setFieldValue}
+                minDate={value[0]}
+                placeholder={`تا تاریخ`}
             />
-        </>
+        </Box>
     );
 }
 

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

@@ -1,66 +0,0 @@
-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/CustomDate/MuiDatePicker.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 {Box, FormHelperText, IconButton, InputAdornment} from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import moment from "jalali-moment";
+
+function MuiDatePicker({value, setFieldValue, name, minDate, maxDate, helperText, placeholder}) {
+    return (
+        <Box sx={{display: "flex", flexDirection: "column", my: 1}}>
+            <LocalizationProvider dateAdapter={AdapterDateFnsJalali}
+                                  localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
+            >
+                <MobileDatePicker
+                    value={value ? new Date(value) : null}
+                    sx={{width: "100%"}}
+                    id={name}
+                    name={name}
+                    aria-describedby="component-helper-text"
+                    onChange={(value) => {
+                        const date = new Date(value);
+                        const formattedDate = moment(date)
+                            .locale("en")
+                            .format("YYYY-MM-DD");
+                        setFieldValue(name, formattedDate);
+                    }}
+                    minDate={minDate ? new Date(minDate) : null}
+                    maxDate={maxDate ? new Date(maxDate) : null}
+                    slotProps={{
+                        textField: {
+                            placeholder: placeholder,
+                            InputProps: {
+                                endAdornment: (
+                                    <InputAdornment position="end">
+                                        <IconButton
+                                            size="small"
+                                            onClick={(event) => {
+                                                event.stopPropagation();
+                                                setFieldValue(name, "");
+                                            }}
+                                            sx={{
+                                                color: "#bfbfbf",
+                                                '&:hover': {
+                                                    backgroundColor: 'rgba(189, 189, 189, 0.1)',
+                                                    color: "#363434"
+                                                },
+                                            }}
+                                        >
+                                            <ClearIcon/>
+                                        </IconButton>
+                                    </InputAdornment>
+                                ),
+                            },
+                        },
+                    }}
+                />
+                <FormHelperText id="component-helper-text" sx={{ml: 2}}>
+                    {helperText ? helperText : ""}
+                </FormHelperText>
+            </LocalizationProvider>
+        </Box>
+    );
+}
+
+export default MuiDatePicker;

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

@@ -21,6 +21,7 @@ function CustomTextFieldRange({
                 label={<Typography>از {column.header}</Typography>}
                 value={value[0]}
                 fullWidth
+                error={touched?.[column.id] && Boolean(errors?.[column.id])}
                 helperText={<Typography variant="button" sx={{color: "#16534a"}}>نوع
                     فیلتر: {defaultFilterTranslation}</Typography>}
                 variant="outlined"