design filter part and do step1 (default value for filterFn)

src/components/home/index.jsx

@@ -14,10 +14,9 @@ function HomeComponent() {
                         accessorKey: 'name.firstName',
                         header: 'نام',
                         id: "firstName",
-                        enableColumnFilter: true,
+                        enableColumnFilter: false,
                         datatype: "text",
                         filterFn: "contains",
-                        inputType: "textField",
                         enableClickToCopy: true,
                         columnFilterModeOptions: [
                             "equals",
@@ -32,7 +31,6 @@ function HomeComponent() {
                         enableColumnFilter: true,
                         datatype: "text",
                         filterFn: "equals",
-                        inputType: "textField",
                         columnFilterModeOptions: [
                             "equals",
                             "notEquals",
@@ -48,7 +46,6 @@ function HomeComponent() {
                 enableColumnFilter: true,
                 datatype: "text",
                 filterFn: "notEquals",
-                inputType: "textField",
                 columnFilterModeOptions: [
                     "equals",
                     "notEquals",
@@ -62,7 +59,6 @@ function HomeComponent() {
                 enableColumnFilter: true,
                 datatype: "text",
                 filterFn: "equals",
-                inputType: "textField",
                 columnFilterModeOptions: [
                     "equals",
                     "notEquals",
@@ -80,7 +76,6 @@ function HomeComponent() {
                 enableColumnFilter: true,
                 datatype: "text",
                 filterFn: "contains",
-                inputType: "textField",
                 columnFilterModeOptions: [
                     "equals",
                     "notEquals",
@@ -94,7 +89,11 @@ function HomeComponent() {
                 enableColumnFilter: true,
                 datatype: "nemeric",
                 filterFn: "between",
-                inputType: "betweenNum",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "between"
+                ],
             },
             {
                 accessorKey: 'updated_at',
@@ -103,16 +102,24 @@ function HomeComponent() {
                 enableColumnFilter: true,
                 datatype: "date",
                 filterFn: "between",
-                inputType: "betweenDate",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "between"
+                ],
             },
             {
                 accessorKey: 'company',
                 header: 'نام شرکت',
                 id: "company",
                 enableColumnFilter: true,
-                datatype: "text",
+                datatype: "select2",
                 filterFn: "equals",
-                inputType: "select2",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains"
+                ],
             },
             {
                 accessorKey: 'area',
@@ -121,7 +128,11 @@ function HomeComponent() {
                 enableColumnFilter: true,
                 datatype: "text",
                 filterFn: "equals",
-                inputType: "select",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains"
+                ],
             },
         ],
         [],

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

@@ -1,58 +1,103 @@
 'use client'
 
-import {Box, Drawer, IconButton, Typography} from "@mui/material";
-import CancelIcon from '@mui/icons-material/Cancel';
+import {Box, Button, Drawer, styled} from "@mui/material";
+import {Form, Formik} from "formik";
+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";
+
+const ScrollBox = styled(Box)({
+    flexGrow: 1,
+    padding: '16px',
+    overflowY: 'scroll',
+    maxWidth: "450px",
+    '::-webkit-scrollbar': {
+        width: '5px',
+    },
+    '::-webkit-scrollbar-track': {
+        boxShadow: 'inset 0 0 5px #fff',
+        borderRadius: '5px',
+    },
+    '::-webkit-scrollbar-thumb': {
+        background: '#16534a',
+        borderRadius: '0px',
+    },
+    '::-webkit-scrollbar-thumb:hover': {
+        background: '#ffffff',
+    },
+});
 
 function FilterBody({columns, drawerState, setDrawerState}) {
-    // const initialValues = columns.reduce((acc, column) => {
-    //     if (column.enableColumnFilter) {
-    //         const filter = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters']?.find((filter) => filter.id === column.id);
-    //         if (column.filterFn === 'betweenNum' || column.filterFn === 'betweenDate') {
-    //             acc[column.id] = filter?.value || ["", ""];
-    //         } else if (column.type === 'select2') {
-    //             acc[column.id] = filter?.value || [];
-    //         } else {
-    //             acc[column.id] = filter?.value || '';
-    //         }
-    //     }
-    //     return acc;
-    // }, {});
-    // const initialValues = {};
+    const [userId, setUserId] = useState(0);
+    const [pageName, setPageName] = useState('testPage');
+    const [tableName, setTableName] = useState('testTable');
+    const {settingStore, filterAction} = useTableSetting();
+
+    const [initialValues, setInitialValues] = useState({});
+
+    useEffect(() => {
+        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') {
+                acc[column.id] = filter?.value || [];
+            } else {
+                acc[column.id] = filter?.value || '';
+            }
+            return acc;
+        }, {});
+        setInitialValues(values);
+    }, [columns, settingStore, userId, pageName, tableName]);
+
+    const handleSubmit = (values) => {
+        console.log("Form values:", values);
+    };
+
     return (
-        <Drawer open={drawerState} onClose={() => {
-            setDrawerState(false)
-        }}>
-            <Box
-                sx={{
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    px: 2,
-                    py: 1,
-                    backgroundColor: "#095b8c",
-                    width: 400
-                }}>
-                <Typography variant="h5" sx={{color: "#fff"}}>فیلتر</Typography>
-                <IconButton sx={{color: "#fff"}} onClick={() => {
-                    setDrawerState(false)
-                }}>
-                    <CancelIcon sx={{fontSize: "1.2em"}}/>
-                </IconButton>
-            </Box>
-            <Box sx={{display: "flex", flexDirection: "column"}}>
-                {/*<Formik*/}
-                {/*    initialValues={initialValues}*/}
-                {/*    onSubmit={handleSubmit}*/}
-                {/*    validationSchema={validationSchema}*/}
-                {/*>*/}
-                {columns.map((column) => {
-                    <FilterBodyField column={column}/>
-                })}
-                {/*</Formik>*/}
+        <Drawer open={drawerState} onClose={() => setDrawerState(false)}
+                sx={{overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%"}}>
+            <FilterHeader setDrawerState={setDrawerState}/>
+            <ScrollBox>
+                {Object.keys(initialValues).length > 0 && (
+                    <Formik
+                        initialValues={initialValues}
+                        onSubmit={handleSubmit}
+                    >
+                        {({values, handleChange, handleBlur}) => (
+                            <Form>
+                                {columns.map((column) => (
+                                    column.enableColumnFilter && (
+                                        <FilterBodyField
+                                            key={column.id}
+                                            column={column}
+                                            value={values[column.id]}
+                                            onChange={handleChange}
+                                            onBlur={handleBlur}
+                                        />
+                                    )
+                                ))}
+                            </Form>
+                        )}
+                    </Formik>
+                )}
+            </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>
     );
 }
 
-export default FilterBody;
+export default FilterBody;

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

@@ -1,8 +1,63 @@
 'use client'
 
-function FilterBodyField({column}) {
+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";
+
+const columnFilterModeOptionFa = {
+    equals: "برابر",
+    notEquals: "نابرابر",
+    contains: "شامل",
+    lessThan: "کوچکتر",
+    greaterThan: "بزرگتر",
+    fuzzy: "فازی",
+    between: "مابین"
+}
+
+function FilterBodyField({column, value}) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [userId, setUserId] = useState(0);
+    const [pageName, setPageName] = useState('testPage');
+    const [tableName, setTableName] = useState('testTable');
+    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);
+    };
+    const handleCloseFilterBox = () => {
+        setAnchorEl(null);
+    };
+
     return (
-        asdasdasd
+        <>
+            <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}/>
+        </>
     );
 }
 

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

@@ -0,0 +1,32 @@
+'use client'
+
+import {Box, IconButton, Typography} from "@mui/material";
+import CancelIcon from '@mui/icons-material/Cancel';
+import FilterAltIcon from '@mui/icons-material/FilterAlt';
+
+function FilterHeader({setDrawerState}) {
+    return (
+        <Box
+            sx={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                px: 2,
+                py: 1,
+                backgroundColor: "#16534a",
+                boxShadow: "rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px",
+                maxWidth: "450px"
+            }}
+        >
+            <Box sx={{display: "flex", alignItems: "center"}}>
+                <FilterAltIcon sx={{color: "#fff"}}/>
+                <Typography variant="h6" sx={{color: "#fff"}}>فیلتر</Typography>
+            </Box>
+            <IconButton sx={{color: "#fff"}} onClick={() => setDrawerState(false)}>
+                <CancelIcon sx={{fontSize: "1em"}}/>
+            </IconButton>
+        </Box>
+    );
+}
+
+export default FilterHeader;

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

@@ -0,0 +1,29 @@
+'use client'
+
+import {ListItem, Menu} from "@mui/material";
+import {useState} from "react";
+
+function FilterOptionList({defaultFilter, filterOption, handleCloseFilterBox, anchorEl, columnFilterModeOptionFa}) {
+
+    const [selectedFilter, setSelectedFilter] = useState(defaultFilter);
+
+    return (
+        <Menu
+            id="simple-menu"
+            anchorEl={anchorEl}
+            keepMounted
+            open={Boolean(anchorEl)}
+            onClose={handleCloseFilterBox}
+        >
+            {filterOption.map((option, index) => (
+                <ListItem key={index}
+                          selected={option === selectedFilter}
+                          sx={{cursor: 'pointer', width: "100px", display: "flex", justifyContent: "center"}}>
+                    {columnFilterModeOptionFa[option]}
+                </ListItem>
+            ))}
+        </Menu>
+    );
+}
+
+export default FilterOptionList;