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

src/components/home/index.jsx

@@ -14,7 +14,7 @@ function HomeComponent() {
                         accessorKey: 'name.firstName',
                         header: 'نام',
                         id: "firstName",
-                        enableColumnFilter: false,
+                        enableColumnFilter: true,
                         datatype: "text",
                         filterFn: "contains",
                         enableClickToCopy: true,
@@ -67,7 +67,6 @@ function HomeComponent() {
                     "greaterThan",
                     "fuzzy"
                 ],
-
             },
             {
                 accessorKey: 'state',
@@ -87,7 +86,7 @@ function HomeComponent() {
                 header: 'محدوده',
                 id: "price",
                 enableColumnFilter: true,
-                datatype: "nemeric",
+                datatype: "numeric",
                 filterFn: "between",
                 columnFilterModeOptions: [
                     "equals",
@@ -102,23 +101,18 @@ function HomeComponent() {
                 enableColumnFilter: true,
                 datatype: "date",
                 filterFn: "between",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "between"
-                ],
             },
             {
                 accessorKey: 'company',
                 header: 'نام شرکت',
                 id: "company",
                 enableColumnFilter: true,
-                datatype: "select2",
+                datatype: "numeric",
                 filterFn: "equals",
-                columnFilterModeOptions: [
+                columnSelectOption: [
-                    "equals",
+                    {value: 1, label: "وایتل"},
-                    "notEquals",
+                    {value: 2, label: "اسنپ"},
-                    "contains"
+                    {value: 3, label: "تپسی"}
                 ],
             },
             {
@@ -126,12 +120,12 @@ function HomeComponent() {
                 header: 'منطقه',
                 id: "area",
                 enableColumnFilter: true,
-                datatype: "text",
+                datatype: "numeric",
                 filterFn: "equals",
-                columnFilterModeOptions: [
+                columnSelectOption: [
-                    "equals",
+                    {value: 1, label: "وایتل"},
-                    "notEquals",
+                    {value: 2, label: "اسنپ"},
-                    "contains"
+                    {value: 3, label: "تپسی"}
                 ],
             },
         ],

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
+            {column.datatype === "numeric" && column._filterFn === "between" ? (
-                id={column.id}
+                <CustomTextFieldRange
-                label={column.header}
+                    column={column}
-                value={value}
+                    value={value}
-                fullWidth
+                    defaultFilterTranslation={defaultFilterTranslation}
-                helperText={<Typography variant="button" sx={{color: "#16534a"}}>
+                    handleOpenFilterBox={handleOpenFilterBox}
-                    نوع فیلتر: {defaultFilterTranslation}
+                />
-                </Typography>}
+            ) : column.datatype === "numeric" && column._filterFn === "equals" && Array.isArray(column.columnSelectOption) ? (
-                variant="outlined"
+                <CustomSelect
-                size="normal"
+                    column={column}
-                sx={{marginY: 1}}
+                    value={value}
-                InputProps={{
+                    defaultFilterTranslation={defaultFilterTranslation}
-                    endAdornment: (
+                    handleOpenFilterBox={handleOpenFilterBox}
-                        <InputAdornment position="end" sx={{cursor: "pointer"}} onClick={HandleOpenFilterBox}>
+                />
-                            <FilterListIcon/>
+            ) : column.datatype === "date" && column._filterFn === "equals" ? (
-                        </InputAdornment>
+                <CustomDatePicker
-                    ),
+                    column={column}
-                }}
+                    value={value}
-            />
+                    defaultFilterTranslation={defaultFilterTranslation}
-            <FilterOptionList handleCloseFilterBox={handleCloseFilterBox} anchorEl={anchorEl}
+                    handleOpenFilterBox={handleOpenFilterBox}
-                              filterOption={column.columnFilterModeOptions}
+                />
-                              defaultFilter={defaultFilter}
+            ) : column.datatype === "date" && column._filterFn === "between" ? (
-                              columnFilterModeOptionFa={columnFilterModeOptionFa}/>
+                <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;