complete validation and make validation for between type on numeric and date inputs

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

@@ -63,24 +63,25 @@ function FilterBody({columns, drawerState, setDrawerState}) {
 
     const validationSchema = Yup.object().shape(
         columns.reduce((acc, column) => {
-            if (column._filterFn === "between" && column.datatype === "numeric") {
+            if (column._filterFn === "between") {
-                acc[column.id] = Yup.array().of(Yup.string()).test({
+                acc[column.id] = Yup.object().shape({
-                    test(value, ctx) {
+                    value: Yup.array()
-                        console.log("vavavava", value)
+                        .of(Yup.string().nullable())
-                        const [start, end] = value.value || ["", ""];
+                        .test({
-                        const startInt = parseInt(start, 10);
+                            test(value, ctx) {
-                        const endInt = parseInt(end, 10);
+                                const [start, end] = value || ["", ""];
-                        if (start && end && endInt <= startInt) {
+                                if (column.datatype === "numeric" && start && end && parseInt(end, 10) <= parseInt(start, 10)) {
-                            return ctx.createError({
+                                    return ctx.createError({
-                                message: `مقدار وارده باید بیشتر از (${start}) باشد`
+                                        message: `مقدار وارده باید بیشتر از (${start}) باشد`,
-                            });
+                                    });
-                        } else if ((start && !end) || (!start && end)) {
+                                } else if ((start && !end) || (!start && end)) {
-                            return ctx.createError({
+                                    return ctx.createError({
-                                message: "این بخش را تکمیل نمایید"
+                                        message: "این بخش را تکمیل نمایید",
-                            });
+                                    });
-                        }
+                                }
-                        return true;
+                                return true;
-                    }
+                            },
+                        }),
                 });
             }
             return acc;

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

@@ -70,6 +70,8 @@ function FilterBodyField({
                     setFieldValue={setFieldValue}
                     defaultFilterTranslation={defaultFilterTranslation}
                     handleOpenFilterBox={handleOpenFilterBox}
+                    errors={errors}
+                    touched={touched}
                 />
             ) : column.datatype === "array" && filterParameters.filterFn === "equals" ? (
                 <CustomSelectMultiple

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

@@ -4,8 +4,7 @@ import React from "react";
 import {Box, Typography} from "@mui/material";
 import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
 
-function CustomDatePickerRange({column, filterParameters, defaultFilterTranslation, setFieldValue}) {
+function CustomDatePickerRange({column, filterParameters, defaultFilterTranslation, setFieldValue, errors, touched}) {
-
     return (
         <Box sx={{display: "flex", gap: 1}}>
             <MuiDatePicker
@@ -26,6 +25,8 @@ function CustomDatePickerRange({column, filterParameters, defaultFilterTranslati
                 setFieldValue={setFieldValue}
                 minDate={filterParameters.value[0]}
                 placeholder={`تا تاریخ`}
+                helperText={errors?.[`${column.id}`]?.value ? errors?.[`${column.id}`]?.value : null}
+                error={Boolean(errors?.[`${column.id}`]?.value)}
             />
         </Box>
     );

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

@@ -6,7 +6,12 @@ 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}) {
+function MuiDatePicker({value, setFieldValue, name, minDate, maxDate, helperText, placeholder, error}) {
+
+    // console.log("error", error);
+    //
+    // console.log("helperText", helperText)
+
     return (
         <Box sx={{display: "flex", flexDirection: "column", my: 1}}>
             <LocalizationProvider dateAdapter={AdapterDateFnsJalali}
@@ -19,7 +24,6 @@ function MuiDatePicker({value, setFieldValue, name, minDate, maxDate, helperText
                     name={name}
                     aria-describedby="component-helper-text"
                     onChange={(value) => {
-                        console.log(value)
                         const date = new Date(value);
                         const formattedDate = moment(date)
                             .locale("en")
@@ -30,6 +34,7 @@ function MuiDatePicker({value, setFieldValue, name, minDate, maxDate, helperText
                     maxDate={maxDate ? new Date(maxDate) : null}
                     slotProps={{
                         textField: {
+                            error: error,
                             placeholder: placeholder,
                             InputProps: {
                                 endAdornment: (
@@ -56,7 +61,7 @@ function MuiDatePicker({value, setFieldValue, name, minDate, maxDate, helperText
                         },
                     }}
                 />
-                <FormHelperText id="component-helper-text" sx={{ml: 2}}>
+                <FormHelperText id="component-helper-text" sx={{ml: 2, color: error ? '#d32f2f' : "unset"}}>
                     {helperText ? helperText : ""}
                 </FormHelperText>
             </LocalizationProvider>

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

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