Merge branch 'feature/migrate_formik_to_react_hook_form' into 'develop'

Feature/migrate formik to react hook form See merge request witel-front-end/rms!42
2024-12-18 10:34:40 +00:00
parent f0fb662a1c 8f770d3000
commit f2ef4cd1db
28 changed files with 331 additions and 319 deletions
--- a/src/app/(withAuth)/dashboard/azmayesh/loading.jsx
+++ b/src/app/(withAuth)/dashboard/azmayesh/loading.jsx
@@ -1,7 +1,7 @@
-'use client'
-import PageLoading from "@/core/components/PageLoading"
+"use client";
+import PageLoading from "@/core/components/PageLoading";

 const Loading = () => {
-    return <PageLoading />
-}
-export default Loading
+    return <PageLoading />;
+};
+export default Loading;
--- a/src/app/(withAuth)/dashboard/azmayesh_type/loading.jsx
+++ b/src/app/(withAuth)/dashboard/azmayesh_type/loading.jsx
@@ -1,7 +1,7 @@
-'use client'
-import PageLoading from "@/core/components/PageLoading"
+"use client";
+import PageLoading from "@/core/components/PageLoading";

 const Loading = () => {
-    return <PageLoading />
-}
-export default Loading
+    return <PageLoading />;
+};
+export default Loading;
--- a/src/app/(withAuth)/dashboard/loading.jsx
+++ b/src/app/(withAuth)/dashboard/loading.jsx
@@ -1,7 +1,7 @@
-'use client'
-import PageLoading from "@/core/components/PageLoading"
+"use client";
+import PageLoading from "@/core/components/PageLoading";

 const Loading = () => {
-    return <PageLoading />
-}
-export default Loading
+    return <PageLoading />;
+};
+export default Loading;
--- a/src/app/(withAuth)/dashboard/road-patrols/operator/loading.jsx
+++ b/src/app/(withAuth)/dashboard/road-patrols/operator/loading.jsx
@@ -1,7 +1,7 @@
-'use client'
-import PageLoading from "@/core/components/PageLoading"
+"use client";
+import PageLoading from "@/core/components/PageLoading";

 const Loading = () => {
-    return <PageLoading />
-}
-export default Loading
+    return <PageLoading />;
+};
+export default Loading;
--- a/src/app/(withAuth)/dashboard/road-patrols/supervisor/loading.jsx
+++ b/src/app/(withAuth)/dashboard/road-patrols/supervisor/loading.jsx
@@ -1,7 +1,7 @@
-'use client'
-import PageLoading from "@/core/components/PageLoading"
+"use client";
+import PageLoading from "@/core/components/PageLoading";

 const Loading = () => {
-    return <PageLoading />
-}
-export default Loading
+    return <PageLoading />;
+};
+export default Loading;
--- a/src/components/dashboard/azmayesh/AzmayeshList.jsx
+++ b/src/components/dashboard/azmayesh/AzmayeshList.jsx
@@ -18,7 +18,7 @@ const AzmayeshList = () => {
                id: "id",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "notEquals",
+                filterMode: "notEquals",
            },
            {
                accessorKey: "azmayesh_type_name",
@@ -26,7 +26,7 @@ const AzmayeshList = () => {
                id: "azmayesh_type_name",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "notEquals",
+                filterMode: "notEquals",
            },
            {
                accessorKey: "project_name",
@@ -34,7 +34,7 @@ const AzmayeshList = () => {
                id: "project_name",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "lat",
@@ -43,7 +43,7 @@ const AzmayeshList = () => {
                enableColumnFilter: false,
                datatype: "text",
                enableSorting: false,
-                filterFn: "equals",
+                filterMode: "equals",
                Cell: ({ row }) => <ShowLocation lat={row.original.lat} lng={row.original.lng} />,
            },
            {
@@ -52,7 +52,7 @@ const AzmayeshList = () => {
                id: "employer",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "consultant",
@@ -60,7 +60,7 @@ const AzmayeshList = () => {
                id: "consultant",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "contractor",
@@ -68,7 +68,7 @@ const AzmayeshList = () => {
                id: "contractor",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "applicant",
@@ -76,7 +76,7 @@ const AzmayeshList = () => {
                id: "applicant",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "work_number",
@@ -84,7 +84,7 @@ const AzmayeshList = () => {
                id: "work_number",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "request_number",
@@ -92,7 +92,7 @@ const AzmayeshList = () => {
                id: "request_number",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "request_date",
@@ -100,7 +100,7 @@ const AzmayeshList = () => {
                id: "request_date",
                enableColumnFilter: false,
                datatype: "date",
-                filterFn: "equals",
+                filterMode: "equals",
                Cell: ({ renderedCellValue }) => (
                    <Typography variant="body2">
                        {renderedCellValue ? moment(renderedCellValue).locale("fa").format("YYYY/MM/DD") : "-"}
@@ -113,7 +113,7 @@ const AzmayeshList = () => {
                id: "report_date",
                enableColumnFilter: false,
                datatype: "date",
-                filterFn: "equals",
+                filterMode: "equals",
                Cell: ({ renderedCellValue }) => (
                    <Typography variant="body2">
                        {renderedCellValue ? moment(renderedCellValue).locale("fa").format("YYYY/MM/DD") : "-"}
@@ -126,7 +126,7 @@ const AzmayeshList = () => {
                id: "updated_at",
                enableColumnFilter: false,
                datatype: "date",
-                filterFn: "equals",
+                filterMode: "equals",
                Cell: ({ renderedCellValue }) => (
                    <Typography variant="body2">
                        {renderedCellValue ? moment(renderedCellValue).locale("fa").format("HH:mm | YYYY/MM/DD") : "-"}
--- a/src/components/dashboard/azmayeshType/AzmayeshTypeList.jsx
+++ b/src/components/dashboard/azmayeshType/AzmayeshTypeList.jsx
@@ -17,7 +17,7 @@ const AzmayeshTypeList = () => {
                id: "id",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "notEquals",
+                filterMode: "notEquals",
            },
            {
                accessorKey: "name",
@@ -25,7 +25,7 @@ const AzmayeshTypeList = () => {
                id: "name",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "notEquals",
+                filterMode: "notEquals",
            },
            {
                accessorKey: "updated_at",
@@ -33,7 +33,7 @@ const AzmayeshTypeList = () => {
                id: "updated_at",
                enableColumnFilter: false,
                datatype: "date",
-                filterFn: "equals",
+                filterMode: "equals",
                Cell: ({ renderedCellValue }) => (
                    <Typography variant="body2">
                        {renderedCellValue ? moment(renderedCellValue).locale("fa").format("HH:mm | YYYY/MM/DD") : "-"}
--- a/src/components/dashboard/carDetails/CarDetailsContent.jsx
+++ b/src/components/dashboard/carDetails/CarDetailsContent.jsx
@@ -63,7 +63,6 @@ const CarDetailsContent = ({ setOpenCarDialog }) => {
    const handleSubmit = async (values, props) => {
        props.setSubmitting(true);
        setOpenCarDetailContent(true);
-        console.log(values);
    };

    const formik = useFormik({
@@ -71,7 +70,7 @@ const CarDetailsContent = ({ setOpenCarDialog }) => {
        validationSchema,
        onSubmit: handleSubmit,
    });
-    console.log(formik.errors);
+
    return (
        <>
            <DialogContent>
--- a/src/components/dashboard/inquiryPrivacy/assistant/zaminGov/TaskList.jsx
+++ b/src/components/dashboard/inquiryPrivacy/assistant/zaminGov/TaskList.jsx
@@ -14,7 +14,7 @@ const TaskList = () => {
                id: "id",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "notEquals",
+                filterMode: "notEquals",
            },
            {
                accessorKey: "aplication_number",
@@ -22,7 +22,7 @@ const TaskList = () => {
                id: "aplication_number",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "notEquals",
+                filterMode: "notEquals",
            },
            {
                accessorKey: "application_date",
@@ -30,7 +30,7 @@ const TaskList = () => {
                id: "application_date",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "province",
@@ -38,7 +38,7 @@ const TaskList = () => {
                id: "province",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "township",
@@ -46,7 +46,7 @@ const TaskList = () => {
                id: "township",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "city",
@@ -54,7 +54,7 @@ const TaskList = () => {
                id: "city",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "county",
@@ -62,7 +62,7 @@ const TaskList = () => {
                id: "county",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "village",
@@ -70,7 +70,7 @@ const TaskList = () => {
                id: "village",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "land_area",
@@ -78,7 +78,7 @@ const TaskList = () => {
                id: "land_area",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "design_area",
@@ -86,7 +86,7 @@ const TaskList = () => {
                id: "design_area",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "organization",
@@ -94,7 +94,7 @@ const TaskList = () => {
                id: "organization",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "design_group",
@@ -102,7 +102,7 @@ const TaskList = () => {
                id: "design_group",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "design_title",
@@ -110,7 +110,7 @@ const TaskList = () => {
                id: "design_title",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "state",
@@ -118,7 +118,7 @@ const TaskList = () => {
                id: "state",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
        ],
        []
--- a/src/components/dashboard/inquiryPrivacy/cityAdmin/zaminGov/TaskList.jsx
+++ b/src/components/dashboard/inquiryPrivacy/cityAdmin/zaminGov/TaskList.jsx
@@ -14,7 +14,7 @@ const TaskList = () => {
                id: "id",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "notEquals",
+                filterMode: "notEquals",
            },
            {
                accessorKey: "aplication_number",
@@ -22,7 +22,7 @@ const TaskList = () => {
                id: "aplication_number",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "notEquals",
+                filterMode: "notEquals",
            },
            {
                accessorKey: "application_date",
@@ -30,7 +30,7 @@ const TaskList = () => {
                id: "application_date",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "province",
@@ -38,7 +38,7 @@ const TaskList = () => {
                id: "province",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "township",
@@ -46,7 +46,7 @@ const TaskList = () => {
                id: "township",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "city",
@@ -54,7 +54,7 @@ const TaskList = () => {
                id: "city",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "county",
@@ -62,7 +62,7 @@ const TaskList = () => {
                id: "county",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "village",
@@ -70,7 +70,7 @@ const TaskList = () => {
                id: "village",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "land_area",
@@ -78,7 +78,7 @@ const TaskList = () => {
                id: "land_area",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "design_area",
@@ -86,7 +86,7 @@ const TaskList = () => {
                id: "design_area",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "organization",
@@ -94,7 +94,7 @@ const TaskList = () => {
                id: "organization",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "design_group",
@@ -102,7 +102,7 @@ const TaskList = () => {
                id: "design_group",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "design_title",
@@ -110,7 +110,7 @@ const TaskList = () => {
                id: "design_title",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "state",
@@ -118,7 +118,7 @@ const TaskList = () => {
                id: "state",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
        ],
        []
--- a/src/components/dashboard/inquiryPrivacy/generalManager/zaminGov/TaskList.jsx
+++ b/src/components/dashboard/inquiryPrivacy/generalManager/zaminGov/TaskList.jsx
@@ -14,7 +14,7 @@ const TaskList = () => {
                id: "id",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "notEquals",
+                filterMode: "notEquals",
            },
            {
                accessorKey: "aplication_number",
@@ -22,7 +22,7 @@ const TaskList = () => {
                id: "aplication_number",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "notEquals",
+                filterMode: "notEquals",
            },
            {
                accessorKey: "application_date",
@@ -30,7 +30,7 @@ const TaskList = () => {
                id: "application_date",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "province",
@@ -38,7 +38,7 @@ const TaskList = () => {
                id: "province",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "township",
@@ -46,7 +46,7 @@ const TaskList = () => {
                id: "township",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "city",
@@ -54,7 +54,7 @@ const TaskList = () => {
                id: "city",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "county",
@@ -62,7 +62,7 @@ const TaskList = () => {
                id: "county",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "village",
@@ -70,7 +70,7 @@ const TaskList = () => {
                id: "village",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "land_area",
@@ -78,7 +78,7 @@ const TaskList = () => {
                id: "land_area",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "design_area",
@@ -86,7 +86,7 @@ const TaskList = () => {
                id: "design_area",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "organization",
@@ -94,7 +94,7 @@ const TaskList = () => {
                id: "organization",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "design_group",
@@ -102,7 +102,7 @@ const TaskList = () => {
                id: "design_group",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "design_title",
@@ -110,7 +110,7 @@ const TaskList = () => {
                id: "design_title",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "state",
@@ -118,7 +118,7 @@ const TaskList = () => {
                id: "state",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
        ],
        []
--- a/src/components/dashboard/inquiryPrivacy/provinceAdmin/zaminGov/TaskList.jsx
+++ b/src/components/dashboard/inquiryPrivacy/provinceAdmin/zaminGov/TaskList.jsx
@@ -14,7 +14,7 @@ const TaskList = () => {
                id: "id",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "notEquals",
+                filterMode: "notEquals",
            },
            {
                accessorKey: "aplication_number",
@@ -22,7 +22,7 @@ const TaskList = () => {
                id: "aplication_number",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "notEquals",
+                filterMode: "notEquals",
            },
            {
                accessorKey: "application_date",
@@ -30,7 +30,7 @@ const TaskList = () => {
                id: "application_date",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "province",
@@ -38,7 +38,7 @@ const TaskList = () => {
                id: "province",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "township",
@@ -46,7 +46,7 @@ const TaskList = () => {
                id: "township",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "city",
@@ -54,7 +54,7 @@ const TaskList = () => {
                id: "city",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "county",
@@ -62,7 +62,7 @@ const TaskList = () => {
                id: "county",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "village",
@@ -70,7 +70,7 @@ const TaskList = () => {
                id: "village",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "land_area",
@@ -78,7 +78,7 @@ const TaskList = () => {
                id: "land_area",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "design_area",
@@ -86,7 +86,7 @@ const TaskList = () => {
                id: "design_area",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "organization",
@@ -94,7 +94,7 @@ const TaskList = () => {
                id: "organization",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "design_group",
@@ -102,7 +102,7 @@ const TaskList = () => {
                id: "design_group",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "design_title",
@@ -110,7 +110,7 @@ const TaskList = () => {
                id: "design_title",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
            {
                accessorKey: "state",
@@ -118,7 +118,7 @@ const TaskList = () => {
                id: "state",
                enableColumnFilter: false,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
            },
        ],
        []
--- a/src/components/dashboard/roadPatrols/operator/OperatorList.jsx
+++ b/src/components/dashboard/roadPatrols/operator/OperatorList.jsx
@@ -16,7 +16,7 @@ const OperatorList = () => {
                id: "id",
                enableColumnFilter: true,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
            },
            {
@@ -25,7 +25,7 @@ const OperatorList = () => {
                id: "operator_name",
                enableColumnFilter: true,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
            },
            {
@@ -34,7 +34,7 @@ const OperatorList = () => {
                id: "phone_number",
                enableColumnFilter: true,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
            },
            {
@@ -43,7 +43,7 @@ const OperatorList = () => {
                id: "car_id",
                enableColumnFilter: true,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
            },
            {
@@ -52,7 +52,7 @@ const OperatorList = () => {
                id: "start_date",
                enableColumnFilter: true,
                datatype: "date",
-                filterFn: "equals",
+                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
                Cell: ({ renderedCellValue }) => (
                    <Typography variant="body2">
@@ -66,7 +66,7 @@ const OperatorList = () => {
                id: "end_date",
                enableColumnFilter: true,
                datatype: "date",
-                filterFn: "equals",
+                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
                Cell: ({ renderedCellValue }) => (
                    <Typography variant="body2">
@@ -80,7 +80,7 @@ const OperatorList = () => {
                id: "register_date",
                enableColumnFilter: true,
                datatype: "date",
-                filterFn: "equals",
+                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
                Cell: ({ renderedCellValue }) => (
                    <Typography variant="body2">
--- a/src/components/dashboard/roadPatrols/supervisor/SupervisorList.jsx
+++ b/src/components/dashboard/roadPatrols/supervisor/SupervisorList.jsx
@@ -19,7 +19,7 @@ const OperatorList = () => {
                id: "id",
                enableColumnFilter: true,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
            },
            {
@@ -28,7 +28,7 @@ const OperatorList = () => {
                id: "province",
                enableColumnFilter: true,
                datatype: "numeric",
-                filterFn: "equals",
+                filterMode: "equals",
                columnSelectOption: () => {
                    if (loadingProvinces) {
                        return [{ value: "", label: "در حال بارگذاری..." }];
@@ -50,7 +50,7 @@ const OperatorList = () => {
                id: "office",
                enableColumnFilter: true,
                datatype: "numeric",
-                filterFn: "equals",
+                filterMode: "equals",
                dependencyId: "province",
                columnSelectOption: (dependencyField) => {
                    if (dependencyField.value === "") {
@@ -66,7 +66,7 @@ const OperatorList = () => {
                id: "operator_name",
                enableColumnFilter: true,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
            },
            {
@@ -75,7 +75,7 @@ const OperatorList = () => {
                id: "phone_number",
                enableColumnFilter: true,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
            },
            {
@@ -84,7 +84,7 @@ const OperatorList = () => {
                id: "car_id",
                enableColumnFilter: true,
                datatype: "text",
-                filterFn: "equals",
+                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
            },
            {
@@ -93,7 +93,7 @@ const OperatorList = () => {
                id: "start_date",
                enableColumnFilter: true,
                datatype: "date",
-                filterFn: "equals",
+                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
                Cell: ({ renderedCellValue }) => (
                    <Typography variant="body2">
@@ -107,7 +107,7 @@ const OperatorList = () => {
                id: "end_date",
                enableColumnFilter: true,
                datatype: "date",
-                filterFn: "equals",
+                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
                Cell: ({ renderedCellValue }) => (
                    <Typography variant="body2">
@@ -121,7 +121,7 @@ const OperatorList = () => {
                id: "register_date",
                enableColumnFilter: true,
                datatype: "date",
-                filterFn: "equals",
+                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
                Cell: ({ renderedCellValue }) => (
                    <Typography variant="body2">
--- a/src/core/components/DataTable/Main.js
+++ b/src/core/components/DataTable/Main.js
@@ -39,7 +39,13 @@ const DataTable_Main = (props) => {
            }
            return value === "" || value === null || value === undefined;
        };
-        const filteredFilterData = Object.values(filterData).filter((filter) => !isValueEmpty(filter.value));
+
+        const filteredFilterData = Object.values(filterData)
+            .filter((filter) => !isValueEmpty(filter.value))
+            .map(({ filterMode, ...rest }) => ({
+                ...rest,
+                fn: filterMode,
+            }));

        const params = new URLSearchParams();
        params.set("start", `${pagination.pageIndex * pagination.pageSize}`);
--- a/src/core/components/DataTable/filter/FilterBody.jsx
+++ b/src/core/components/DataTable/filter/FilterBody.jsx
@@ -1,13 +1,13 @@
 "use client";

-import { Box, Button, Drawer, styled } from "@mui/material";
-import { Form, Formik, getIn } from "formik";
-import useTableSetting from "@/lib/hooks/useTableSetting";
-import { useEffect, useState } from "react";
-import FilterHeader from "@/core/components/DataTable/filter/FilterHeader";
-import * as Yup from "yup";
 import FilterBodyField from "@/core/components/DataTable/filter/FilterBodyField";
+import FilterHeader from "@/core/components/DataTable/filter/FilterHeader";
 import useDataTable from "@/lib/hooks/useDataTable";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Box, Button, Drawer, styled } from "@mui/material";
+import { useEffect, useState } from "react";
+import { Controller, useForm, useWatch } from "react-hook-form";
+import * as Yup from "yup";

 const ScrollBox = styled(Box)({
    flexGrow: 1,
@@ -26,21 +26,15 @@ const ScrollBox = styled(Box)({
    },
 });

-function FilterBody({ columns, drawerState, setDrawerState, user_id, page_name, table_name }) {
-    const { settingStore } = useTableSetting();
-    const [initialValues, setInitialValues] = useState({});
-    const [validationSchema, setValidationSchema] = useState({});
+function FilterBody({ columns, drawerState, setDrawerState }) {
    const { filterData, setFilterData } = useDataTable();
+    const [validationSchema, setValidationSchema] = useState(Yup.object({}));

    useEffect(() => {
-        setInitialValues(filterData);
-    }, [columns, settingStore, user_id, page_name, table_name, filterData]);
-
-    useEffect(() => {
-        const generatedSchema = Yup.object().shape(
-            Object.keys(initialValues).reduce((acc, key) => {
-                const initialValue = initialValues[key];
-                if (initialValue.filterFn === "between") {
+        const schema = Yup.object(
+            Object.keys(filterData).reduce((acc, key) => {
+                const initialValue = filterData[key];
+                if (initialValue.filterMode === "between") {
                    acc[key] = Yup.object().shape({
                        value: Yup.array()
                            .of(Yup.string().nullable())
@@ -68,13 +62,23 @@ function FilterBody({ columns, drawerState, setDrawerState, user_id, page_name,
            }, {})
        );

-        setValidationSchema(generatedSchema);
-    }, [initialValues]);
+        setValidationSchema(schema);
+    }, [filterData]);

-    const handleSubmit = (values, { setSubmitting }) => {
+    const {
+        handleSubmit,
+        control,
+        reset,
+        formState: { errors, isDirty, isValid },
+    } = useForm({
+        defaultValues: filterData,
+        resolver: yupResolver(validationSchema),
+        mode: "onChange",
+    });
+
+    const onSubmit = (data) => {
        setDrawerState(false);
-        setFilterData(values);
-        setSubmitting(false);
+        setFilterData(data);
    };

    return (
@@ -84,72 +88,64 @@ function FilterBody({ columns, drawerState, setDrawerState, user_id, page_name,
            sx={{ overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%", zIndex: "1300" }}
        >
            <FilterHeader setDrawerState={setDrawerState} />
-            {Object.keys(initialValues).length > 0 && (
+            {Object.keys(filterData).length > 0 && (
                <ScrollBox>
-                    <Formik initialValues={initialValues} onSubmit={handleSubmit} validationSchema={validationSchema}>
-                        {({
-                            values,
-                            handleChange,
-                            handleBlur,
-                            setFieldValue,
-                            errors,
-                            touched,
-                            isSubmitting,
-                            isValid,
-                            dirty,
-                            resetForm,
-                        }) => (
-                            <Form>
-                                <Box sx={{ px: 1, py: 2 }}>
-                                    {columns.map(
-                                        (column) =>
-                                            column.enableColumnFilter && (
-                                                <FilterBodyField
-                                                    key={column.id}
-                                                    column={column}
-                                                    filterParameters={values[column.id]}
-                                                    handleChange={handleChange}
-                                                    handleBlur={handleBlur}
-                                                    dependencyFieldValue={
-                                                        column.dependencyId ? getIn(values, column.dependencyId) : null
-                                                    }
-                                                    setFieldValue={setFieldValue}
-                                                    resetForm={resetForm}
-                                                    errors={errors}
-                                                    touched={touched}
-                                                />
-                                            )
-                                    )}
-                                </Box>
-                                <Box
-                                    sx={{
-                                        display: "flex",
-                                        justifyContent: "center",
-                                        alignItems: "center",
-                                        pb: 2,
-                                    }}
-                                >
-                                    <Button
-                                        type="submit"
-                                        variant="contained"
-                                        size="large"
-                                        disabled={isSubmitting || !isValid || !dirty}
-                                        sx={{
-                                            px: 8,
-                                            boxShadow:
-                                                "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
-                                            backgroundColor: "primary2",
-                                            ":hover": {
-                                                backgroundColor: "primary2",
-                                            },
-                                        }}
-                                    >
-                                        اعمال فیلتر
-                                    </Button>
-                                </Box>
-                            </Form>
-                        )}
-                    </Formik>
+                    <form onSubmit={handleSubmit(onSubmit)}>
+                        <Box sx={{ px: 1, py: 2 }}>
+                            {columns.map(
+                                (column) =>
+                                    column.enableColumnFilter && (
+                                        <Controller
+                                            key={column.id}
+                                            name={`${column.id}`}
+                                            control={control}
+                                            render={({ field: { value, onBlur, onChange } }) => {
+                                                let dependencyField;
+                                                if (column.dependencyId) {
+                                                    dependencyField = useWatch({ control, name: column.dependencyId });
+                                                }
+                                                return (
+                                                    <FilterBodyField
+                                                        column={column}
+                                                        filterParameters={value}
+                                                        handleChange={onChange}
+                                                        handleBlur={onBlur}
+                                                        dependencyFieldValue={dependencyField}
+                                                        resetForm={() => reset()}
+                                                        errors={errors}
+                                                    />
+                                                );
+                                            }}
+                                        />
+                                    )
+                            )}
+                        </Box>
+                        <Box
+                            sx={{
+                                display: "flex",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                pb: 2,
+                            }}
+                        >
+                            <Button
+                                type="submit"
+                                variant="contained"
+                                size="large"
+                                disabled={!isDirty || !isValid}
+                                sx={{
+                                    px: 8,
+                                    boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
+                                    backgroundColor: "primary2",
+                                    ":hover": {
+                                        backgroundColor: "primary2",
+                                    },
+                                }}
+                            >
+                                اعمال فیلتر
+                            </Button>
+                        </Box>
+                    </form>
                </ScrollBox>
            )}
        </Drawer>
--- a/src/core/components/DataTable/filter/FilterBodyField.jsx
+++ b/src/core/components/DataTable/filter/FilterBodyField.jsx
@@ -1,11 +1,11 @@
-import { useState } from "react";
 import FilterOptionList from "@/core/components/DataTable/filter/FilterOptionList";
+import CustomDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker";
+import CustomDatePickerRange from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange";
 import CustomSelect from "@/core/components/DataTable/filter/fieldsType/CustomSelect";
+import CustomSelectMultiple from "@/core/components/DataTable/filter/fieldsType/CustomSelectMultiple";
 import CustomTextField from "@/core/components/DataTable/filter/fieldsType/CustomTextField";
 import CustomTextFieldRange from "@/core/components/DataTable/filter/fieldsType/CustomTextFieldRange";
-import CustomDatePickerRange from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange";
-import CustomDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker";
-import CustomSelectMultiple from "@/core/components/DataTable/filter/fieldsType/CustomSelectMultiple";
+import { useState } from "react";

 const columnFilterModeOptionFa = {
    equals: "برابر",
@@ -24,82 +24,71 @@ function FilterBodyField({
    handleBlur,
    dependencyFieldValue,
    setFieldValue,
-    errors,
-    touched,
    resetForm,
+    errors,
 }) {
    const [anchorEl, setAnchorEl] = useState(null);
-    const defaultFilterTranslation = columnFilterModeOptionFa[filterParameters.filterFn] || filterParameters.filterFn;
+    const defaultFilterTranslation =
+        columnFilterModeOptionFa[filterParameters.filterMode] || filterParameters.filterMode;

    const handleOpenFilterBox = (event) => {
        setAnchorEl(event.currentTarget);
    };
+
+    const renderField = () => {
+        const commonProps = {
+            column,
+            filterParameters,
+            defaultFilterTranslation,
+            handleOpenFilterBox,
+            dependencyFieldValue,
+            setFieldValue,
+            handleChange,
+            handleBlur,
+            errors,
+        };
+
+        switch (filterParameters.datatype) {
+            case "numeric":
+                if (filterParameters.filterMode === "between") {
+                    return <CustomTextFieldRange {...commonProps} />;
+                }
+                if (filterParameters.filterMode === "equals") {
+                    return <CustomSelect {...commonProps} />;
+                }
+                break;
+
+            case "date":
+                if (filterParameters.filterMode === "equals") {
+                    return <CustomDatePicker {...commonProps} />;
+                }
+                if (filterParameters.filterMode === "between") {
+                    return <CustomDatePickerRange {...commonProps} />;
+                }
+                break;
+
+            case "array":
+                if (filterParameters.filterMode === "equals") {
+                    return <CustomSelectMultiple {...commonProps} />;
+                }
+                break;
+
+            default:
+                return <CustomTextField {...commonProps} />;
+        }
+    };
+
    return (
        <>
-            {filterParameters.datatype === "numeric" && filterParameters.filterFn === "between" ? (
-                <CustomTextFieldRange
-                    column={column}
-                    filterParameters={filterParameters}
-                    defaultFilterTranslation={defaultFilterTranslation}
-                    handleOpenFilterBox={handleOpenFilterBox}
-                    handleBlur={handleBlur}
-                    handleChange={handleChange}
-                    errors={errors}
-                    touched={touched}
-                />
-            ) : filterParameters.datatype === "numeric" && filterParameters.filterFn === "equals" ? (
-                <CustomSelect
-                    column={column}
-                    filterParameters={filterParameters}
-                    dependencyFieldValue={dependencyFieldValue}
-                    setFieldValue={setFieldValue}
-                    defaultFilterTranslation={defaultFilterTranslation}
-                    handleOpenFilterBox={handleOpenFilterBox}
-                />
-            ) : filterParameters.datatype === "date" && filterParameters.filterFn === "equals" ? (
-                <CustomDatePicker
-                    column={column}
-                    filterParameters={filterParameters}
-                    setFieldValue={setFieldValue}
-                    defaultFilterTranslation={defaultFilterTranslation}
-                    handleOpenFilterBox={handleOpenFilterBox}
-                />
-            ) : filterParameters.datatype === "date" && filterParameters.filterFn === "between" ? (
-                <CustomDatePickerRange
-                    column={column}
-                    filterParameters={filterParameters}
-                    setFieldValue={setFieldValue}
-                    defaultFilterTranslation={defaultFilterTranslation}
-                    handleOpenFilterBox={handleOpenFilterBox}
-                    errors={errors}
-                    touched={touched}
-                />
-            ) : filterParameters.datatype === "array" && filterParameters.filterFn === "equals" ? (
-                <CustomSelectMultiple
-                    column={column}
-                    filterParameters={filterParameters}
-                    setFieldValue={setFieldValue}
-                    defaultFilterTranslation={defaultFilterTranslation}
-                    handleOpenFilterBox={handleOpenFilterBox}
-                />
-            ) : (
-                <CustomTextField
-                    column={column}
-                    filterParameters={filterParameters}
-                    defaultFilterTranslation={defaultFilterTranslation}
-                    handleOpenFilterBox={handleOpenFilterBox}
-                    handleBlur={handleBlur}
-                    handleChange={(e) => setFieldValue(`${column.id}.value`, e.target.value)}
-                />
-            )}
+            {renderField()}
            {Array.isArray(column.columnFilterModeOptions) && (
                <FilterOptionList
                    column={column}
                    anchorEl={anchorEl}
                    setAnchorEl={setAnchorEl}
                    filterParameters={filterParameters}
-                    filterType={filterParameters.filterFn}
-                    setFieldValue={setFieldValue}
+                    filterType={filterParameters.filterMode}
+                    handleChange={handleChange}
                    resetForm={resetForm}
                    filterOption={column.columnFilterModeOptions}
                    columnFilterModeOptionFa={columnFilterModeOptionFa}
--- a/src/core/components/DataTable/filter/FilterOptionList.jsx
+++ b/src/core/components/DataTable/filter/FilterOptionList.jsx
@@ -4,19 +4,22 @@ import { ListItem, Menu } from "@mui/material";
 import { useState } from "react";

 function FilterOptionList({
-    column,
    filterType,
    filterOption,
+    filterParameters,
    anchorEl,
    columnFilterModeOptionFa,
    setAnchorEl,
-    setFieldValue,
+    handleChange,
 }) {
    const [selectedFilter, setSelectedFilter] = useState(filterType);

    const handleChangeItem = (event, index) => {
-        setFieldValue(`${column.id}.value`, filterOption[index] === "between" ? ["", ""] : "");
-        setFieldValue(`${column.id}.filterFn`, filterOption[index]);
+        handleChange({
+            ...filterParameters,
+            value: filterOption[index] === "between" ? ["", ""] : "",
+            filterMode: filterOption[index],
+        });
        setSelectedFilter(filterOption[index]);
        setAnchorEl(null);
    };
--- a/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx
@@ -2,12 +2,14 @@ import React from "react";
 import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
 import { Typography } from "@mui/material";

-function CustomDatePicker({ column, filterParameters, defaultFilterTranslation, setFieldValue }) {
+function CustomDatePicker({ column, filterParameters, defaultFilterTranslation, handleChange }) {
    return (
        <MuiDatePicker
            name={`${column.id}.value`}
            value={filterParameters.value}
-            setFieldValue={setFieldValue}
+            setFieldValue={(name, formattedDate) => {
+                handleChange({ ...filterParameters, value: formattedDate });
+            }}
            placeholder={column.header}
            helperText={
                <Typography variant="button" sx={{ color: "#155175" }}>
--- a/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx
@@ -4,13 +4,15 @@ 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, errors, touched }) {
+function CustomDatePickerRange({ column, filterParameters, defaultFilterTranslation, handleChange, errors }) {
    return (
        <Box sx={{ display: "flex", gap: 1 }}>
            <MuiDatePicker
                name={`${column.id}.value[0]`}
                value={filterParameters.value[0]}
-                setFieldValue={setFieldValue}
+                setFieldValue={(name, formattedDate) => {
+                    handleChange({ ...filterParameters, value: [formattedDate, filterParameters.value[1]] });
+                }}
                maxDate={filterParameters.value[1]}
                placeholder={`از تاریخ`}
                helperText={
@@ -22,10 +24,12 @@ function CustomDatePickerRange({ column, filterParameters, defaultFilterTranslat
            <MuiDatePicker
                name={`${column.id}.value[1]`}
                value={filterParameters.value[1]}
-                setFieldValue={setFieldValue}
+                setFieldValue={(name, formattedDate) => {
+                    handleChange({ ...filterParameters, value: [filterParameters.value[0], formattedDate] });
+                }}
                minDate={filterParameters.value[0]}
                placeholder={`تا تاریخ`}
-                helperText={errors?.[`${column.id}`]?.value ? errors?.[`${column.id}`]?.value : null}
+                helperText={errors?.[`${column.id}`]?.value ? errors?.[`${column.id}`]?.value.message : null}
                error={Boolean(errors?.[`${column.id}`]?.value)}
            />
        </Box>
--- a/src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx
@@ -18,6 +18,7 @@ function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperTex
                    sx={{ width: "100%" }}
                    id={name}
                    name={name}
+                    closeOnSelect={true}
                    aria-describedby="component-helper-text"
                    onChange={(value) => {
                        const date = new Date(value);
--- a/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx
@@ -1,9 +1,22 @@
 "use client";

 import { FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography } from "@mui/material";
+import { useEffect, useMemo } from "react";

-function CustomSelect({ column, dependencyFieldValue, filterParameters, defaultFilterTranslation, setFieldValue }) {
-    const columnSelectOption = column.columnSelectOption(dependencyFieldValue);
+function CustomSelect({ column, dependencyFieldValue, filterParameters, defaultFilterTranslation, handleChange }) {
+    const columnSelectOption = useMemo(() => {
+        return column?.columnSelectOption?.(dependencyFieldValue) || [];
+    }, [dependencyFieldValue]);
+
+    useEffect(() => {
+        const isValidValue = columnSelectOption.some((option) => option.value === filterParameters.value);
+        if (!isValidValue) {
+            handleChange({ ...filterParameters, value: "" });
+        }
+    }, [columnSelectOption, filterParameters.value, handleChange]);
+
+    const isValidValue = columnSelectOption.some((option) => option.value === filterParameters.value);
+    const selectedValue = isValidValue ? filterParameters.value : "";

    return (
        <FormControl fullWidth sx={{ marginY: 1 }}>
@@ -12,11 +25,9 @@ function CustomSelect({ column, dependencyFieldValue, filterParameters, defaultF
                labelId={`label${column.id}`}
                id={column.id}
                name={`${column.id}.value`}
-                value={filterParameters.value}
+                value={selectedValue}
                input={<OutlinedInput label={column.header} />}
-                onChange={(e) => {
-                    setFieldValue(`${column.id}.value`, e.target.value);
-                }}
+                onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
            >
                <MenuItem value="">{column.header}</MenuItem>
                {columnSelectOption.map((option) => (
--- a/src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx
@@ -12,7 +12,7 @@ import {
    Typography,
 } from "@mui/material";

-function CustomSelectMultiple({ column, filterParameters, defaultFilterTranslation, setFieldValue }) {
+function CustomSelectMultiple({ column, filterParameters, defaultFilterTranslation, handleChange }) {
    const columnSelectOption = column.columnSelectOption;

    const getLabelForValue = (value) => {
@@ -30,9 +30,7 @@ function CustomSelectMultiple({ column, filterParameters, defaultFilterTranslati
                id={column.id}
                value={filterParameters.value}
                multiple
-                onChange={(e) => {
-                    setFieldValue(`${column.id}.value`, e.target.value);
-                }}
+                onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
                renderValue={(selected) => (
                    <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
                        {selected.map((value) => (
--- a/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx
@@ -3,11 +3,11 @@ import FilterListIcon from "@mui/icons-material/FilterList";

 function CustomTextField({
    column,
-    filterParameters,
    defaultFilterTranslation,
+    filterParameters,
    handleOpenFilterBox,
-    handleChange,
    handleBlur,
+    handleChange,
 }) {
    return (
        <TextField
@@ -15,7 +15,7 @@ function CustomTextField({
            name={column.id}
            label={column.header}
            value={filterParameters.value}
-            onChange={handleChange}
+            onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
            onBlur={handleBlur}
            fullWidth
            helperText={
--- a/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx
@@ -3,20 +3,21 @@ import FilterListIcon from "@mui/icons-material/FilterList";

 function CustomTextFieldRange({
    column,
-    filterParameters,
    defaultFilterTranslation,
    handleOpenFilterBox,
    handleChange,
+    filterParameters,
    handleBlur,
    errors,
-    touched,
 }) {
    return (
        <Box sx={{ display: "flex" }}>
            <TextField
                id={`${column.id}.value[0]`}
                name={`${column.id}.value[0]`}
-                onChange={handleChange}
+                onChange={(e) =>
+                    handleChange({ ...filterParameters, value: [e.target.value, filterParameters.value[1]] })
+                }
                onBlur={handleBlur}
                label={<Typography>از {column.header}</Typography>}
                value={filterParameters.value[0]}
@@ -34,10 +35,12 @@ function CustomTextFieldRange({
            <TextField
                id={`${column.id}.value[1]`}
                name={`${column.id}.value[1]`}
-                onChange={handleChange}
+                onChange={(e) =>
+                    handleChange({ ...filterParameters, value: [filterParameters.value[0], e.target.value] })
+                }
                onBlur={handleBlur}
-                error={touched?.[`${column.id}`]?.value && Boolean(errors?.[`${column.id}`]?.value)}
-                helperText={touched?.[`${column.id}`]?.value ? errors?.[`${column.id}`]?.value : null}
+                error={Boolean(errors?.[`${column.id}`]?.value)}
+                helperText={errors?.[`${column.id}`]?.value ? errors?.[`${column.id}`]?.value.message : null}
                label={<Typography>تا {column.header}</Typography>}
                value={filterParameters.value[1]}
                fullWidth
--- a/src/core/components/LoadingHardPage.jsx
+++ b/src/core/components/LoadingHardPage.jsx
@@ -1,4 +1,4 @@
-'use client'
+"use client";
 import { Backdrop, Box, Stack, styled, Typography, useTheme } from "@mui/material";
 import SvgLoading from "@/core/components/svgs/SvgLoading";
 import SvgError from "@/core/components/svgs/SvgError";
--- a/src/core/components/PageLoading.jsx
+++ b/src/core/components/PageLoading.jsx
@@ -1,10 +1,12 @@
-'use client'
-import { Paper } from "@mui/material"
-import LoadingHardPage from "./LoadingHardPage"
+"use client";
+import { Paper } from "@mui/material";
+import LoadingHardPage from "./LoadingHardPage";

 const PageLoading = () => {
-    return <Paper elevation={0} sx={{ position: "relative", overflowX: "hidden", width: '100%', height: '100%' }}>
-        <LoadingHardPage width={100} height={100} loading={true} sx={{ position: 'absolute' }} />
-    </Paper>
-}
-export default PageLoading
+    return (
+        <Paper elevation={0} sx={{ position: "relative", overflowX: "hidden", width: "100%", height: "100%" }}>
+            <LoadingHardPage width={100} height={100} loading={true} sx={{ position: "absolute" }} />
+        </Paper>
+    );
+};
+export default PageLoading;
--- a/src/lib/contexts/DataTable.js
+++ b/src/lib/contexts/DataTable.js
@@ -29,34 +29,27 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns,
                acc[column.id] = {
                    id: column.id,
                    value: storeFilter?.value || [],
-                    filterFn: storeFilter?.filterFn || column._filterFn,
+                    filterMode: storeFilter?.filterMode || column.filterMode,
                    datatype: column.datatype,
                };
-            } else if (column._filterFn === "between") {
+            } else if (column.filterMode === "between") {
                acc[column.id] = {
                    id: column.id,
                    value: storeFilter?.value || ["", ""],
-                    filterFn: storeFilter?.filterFn || column._filterFn,
+                    filterMode: storeFilter?.filterMode || column.filterMode,
                    datatype: column.datatype,
                };
            } else {
                acc[column.id] = {
                    id: column.id,
                    value: storeFilter?.value || "",
-                    filterFn: storeFilter?.filterFn || column._filterFn,
+                    filterMode: storeFilter?.filterMode || column.filterMode,
                    datatype: column.datatype,
                };
            }
            return acc;
        }, {});
-        setFilterData(filterValues);
-        setInitFilter(filterValues);
-        setSortData(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || initialSort);
-        setInitSort(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || initialSort);
-        setInitStates(true);
-    }, [settingStore, isInitStates]);

-    useEffect(() => {
        const getHideValues = (columns) => {
            return columns.reduce((acc, column) => {
                const columnId = column.id;
@@ -74,7 +67,12 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns,
        const hideValues = getHideValues(columns);
        setHideData(hideValues);
        setInitHide(hideValues);
-    }, [settingStore, isInitStates]);
+        setFilterData(filterValues);
+        setInitFilter(filterValues);
+        setSortData(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || initialSort);
+        setInitSort(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || initialSort);
+        setInitStates(true);
+    }, [settingStore]);

    useEffect(() => {
        if (