create custom components for fileds and start to get hand dirty on datepicker (step2)

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

@@ -1,10 +1,14 @@
 'use client'
 
-import {InputAdornment, TextField, Typography} from "@mui/material";
-import FilterListIcon from '@mui/icons-material/FilterList';
 import {useState} from "react";
 import FilterOptionList from "@/core/components/DataTable/filter/FilterOptionList";
 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 CustomSelectMultiple from "@/core/components/DataTable/filter/fieldsType/CustomSelectMultiple";
+import CustomDatePickerRange from "@/core/components/DataTable/filter/fieldsType/CustomDatePickerRange";
 
 const columnFilterModeOptionFa = {
     equals: "برابر",
@@ -25,40 +29,68 @@ function FilterBodyField({column, value}) {
     const defaultFilter = (settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.fn || column._filterFn;
     const defaultFilterTranslation = columnFilterModeOptionFa[defaultFilter] || defaultFilter;
 
-    const HandleOpenFilterBox = (event) => {
+    const handleOpenFilterBox = (event) => {
         setAnchorEl(event.currentTarget);
     };
     const handleCloseFilterBox = () => {
         setAnchorEl(null);
     };
-
     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>
-                    ),
-                }}
-            />
-            <FilterOptionList handleCloseFilterBox={handleCloseFilterBox} anchorEl={anchorEl}
-                              filterOption={column.columnFilterModeOptions}
-                              defaultFilter={defaultFilter}
-                              columnFilterModeOptionFa={columnFilterModeOptionFa}/>
+            {column.datatype === "numeric" && column._filterFn === "between" ? (
+                <CustomTextFieldRange
+                    column={column}
+                    value={value}
+                    defaultFilterTranslation={defaultFilterTranslation}
+                    handleOpenFilterBox={handleOpenFilterBox}
+                />
+            ) : column.datatype === "numeric" && column._filterFn === "equals" && Array.isArray(column.columnSelectOption) ? (
+                <CustomSelect
+                    column={column}
+                    value={value}
+                    defaultFilterTranslation={defaultFilterTranslation}
+                    handleOpenFilterBox={handleOpenFilterBox}
+                />
+            ) : column.datatype === "date" && column._filterFn === "equals" ? (
+                <CustomDatePicker
+                    column={column}
+                    value={value}
+                    defaultFilterTranslation={defaultFilterTranslation}
+                    handleOpenFilterBox={handleOpenFilterBox}
+                />
+            ) : column.datatype === "date" && column._filterFn === "between" ? (
+                <CustomDatePickerRange
+                    column={column}
+                    value={value}
+                    defaultFilterTranslation={defaultFilterTranslation}
+                    handleOpenFilterBox={handleOpenFilterBox}
+                />
+            ) : column.datatype === "array" && column._filterFn === "equals" ? (
+                <CustomSelectMultiple
+                    column={column}
+                    value={value}
+                    defaultFilterTranslation={defaultFilterTranslation}
+                    handleOpenFilterBox={handleOpenFilterBox}
+                />
+            ) : (
+                <CustomTextField
+                    column={column}
+                    value={value}
+                    defaultFilterTranslation={defaultFilterTranslation}
+                    handleOpenFilterBox={handleOpenFilterBox}
+                />
+            )}
+            {Array.isArray(column.columnFilterModeOptions) && anchorEl !== null && (
+                <FilterOptionList
+                    handleCloseFilterBox={handleCloseFilterBox}
+                    anchorEl={anchorEl}
+                    filterOption={column.columnFilterModeOptions}
+                    defaultFilter={defaultFilter}
+                    columnFilterModeOptionFa={columnFilterModeOptionFa}
+                />
+            )}
         </>
     );
 }
 
-export default FilterBodyField;
+export default FilterBodyField;

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

@@ -0,0 +1,30 @@
+'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

@@ -0,0 +1,30 @@
+'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

@@ -0,0 +1,44 @@
+'use client'
+
+import {FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography} from "@mui/material";
+import {useState} from "react";
+
+function CustomSelect({column, value, defaultFilterTranslation}) {
+    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"
+                        id={`label${column.id}`}>{column.header}</InputLabel>
+            <Select
+                labelId={`label${column.id}`}
+                id={column.id}
+                name={column.header}
+                value={fieldValue}
+                input={<OutlinedInput label={column.header}/>}
+                onChange={handleChange}
+            >
+                {columnSelectOption.map((option) => (
+                    <MenuItem
+                        key={option.value}
+                        value={option.value}
+                    >
+                        {option.label}
+                    </MenuItem>
+                ))}
+            </Select>
+            <FormHelperText>
+                <Typography variant="button" sx={{color: "#16534a"}}>
+                    نوع فیلتر: {defaultFilterTranslation}
+                </Typography>
+            </FormHelperText>
+        </FormControl>
+    );
+}
+
+export default CustomSelect;

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

@@ -0,0 +1,36 @@
+'use client'
+
+import {FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography} from "@mui/material";
+
+function CustomSelectMultiple({column, value, defaultFilterTranslation}) {
+    const columnSelectOption = column.columnSelectOption;
+    return (
+        <FormControl fullWidth sx={{marginY: 1}}>
+            <InputLabel htmlFor="uncontrolled-native"
+                        id={`label${column.id}`}>{column.header}</InputLabel>
+            <Select
+                labelId={`label${column.id}`}
+                id={column.id}
+                value={value}
+                input={<OutlinedInput label={column.header}/>}
+                // onChange={handleChange}
+            >
+                {columnSelectOption.map((option) => (
+                    <MenuItem
+                        key={option.value}
+                        value={option.value}
+                    >
+                        {option.label}
+                    </MenuItem>
+                ))}
+            </Select>
+            <FormHelperText>
+                <Typography variant="button" sx={{color: "#16534a"}}>
+                    نوع فیلتر: {defaultFilterTranslation}
+                </Typography>
+            </FormHelperText>
+        </FormControl>
+    );
+}
+
+export default CustomSelectMultiple;

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

@@ -0,0 +1,30 @@
+'use client'
+
+import {InputAdornment, TextField, Typography} from "@mui/material";
+import FilterListIcon from '@mui/icons-material/FilterList';
+
+function CustomTextField({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 CustomTextField;

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

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