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

src/app/(withAuth)/dashboard/azmayesh/loading.jsx

@@ -1,7 +1,7 @@
-'use client'
+"use client";
-import PageLoading from "@/core/components/PageLoading"
+import PageLoading from "@/core/components/PageLoading";
 
 const Loading = () => {
-    return <PageLoading />
+    return <PageLoading />;
-}
+};
-export default Loading
+export default Loading;

src/app/(withAuth)/dashboard/azmayesh_type/loading.jsx

@@ -1,7 +1,7 @@
-'use client'
+"use client";
-import PageLoading from "@/core/components/PageLoading"
+import PageLoading from "@/core/components/PageLoading";
 
 const Loading = () => {
-    return <PageLoading />
+    return <PageLoading />;
-}
+};
-export default Loading
+export default Loading;

src/app/(withAuth)/dashboard/loading.jsx

@@ -1,7 +1,7 @@
-'use client'
+"use client";
-import PageLoading from "@/core/components/PageLoading"
+import PageLoading from "@/core/components/PageLoading";
 
 const Loading = () => {
-    return <PageLoading />
+    return <PageLoading />;
-}
+};
-export default Loading
+export default Loading;

src/app/(withAuth)/dashboard/road-patrols/operator/loading.jsx

@@ -1,7 +1,7 @@
-'use client'
+"use client";
-import PageLoading from "@/core/components/PageLoading"
+import PageLoading from "@/core/components/PageLoading";
 
 const Loading = () => {
-    return <PageLoading />
+    return <PageLoading />;
-}
+};
-export default Loading
+export default Loading;

src/app/(withAuth)/dashboard/road-patrols/supervisor/loading.jsx

@@ -1,7 +1,7 @@
-'use client'
+"use client";
-import PageLoading from "@/core/components/PageLoading"
+import PageLoading from "@/core/components/PageLoading";
 
 const Loading = () => {
-    return <PageLoading />
+    return <PageLoading />;
-}
+};
-export default Loading
+export default Loading;

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") : "-"}

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") : "-"}

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>

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",
             },
         ],
         []

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",
             },
         ],
         []

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",
             },
         ],
         []

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",
             },
         ],
         []

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">

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">

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}`);

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 }) {
+function FilterBody({ columns, drawerState, setDrawerState }) {
-    const { settingStore } = useTableSetting();
-    const [initialValues, setInitialValues] = useState({});
-    const [validationSchema, setValidationSchema] = useState({});
     const { filterData, setFilterData } = useDataTable();
+    const [validationSchema, setValidationSchema] = useState(Yup.object({}));
 
     useEffect(() => {
-        setInitialValues(filterData);
+        const schema = Yup.object(
-    }, [columns, settingStore, user_id, page_name, table_name, filterData]);
+            Object.keys(filterData).reduce((acc, key) => {
-
+                const initialValue = filterData[key];
-    useEffect(() => {
+                if (initialValue.filterMode === "between") {
-        const generatedSchema = Yup.object().shape(
-            Object.keys(initialValues).reduce((acc, key) => {
-                const initialValue = initialValues[key];
-                if (initialValue.filterFn === "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);
+        setValidationSchema(schema);
-    }, [initialValues]);
+    }, [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);
+        setFilterData(data);
-        setSubmitting(false);
     };
 
     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}>
+                    <form onSubmit={handleSubmit(onSubmit)}>
-                        {({
+                        <Box sx={{ px: 1, py: 2 }}>
-                            values,
+                            {columns.map(
-                            handleChange,
+                                (column) =>
-                            handleBlur,
+                                    column.enableColumnFilter && (
-                            setFieldValue,
+                                        <Controller
-                            errors,
+                                            key={column.id}
-                            touched,
+                                            name={`${column.id}`}
-                            isSubmitting,
+                                            control={control}
-                            isValid,
+                                            render={({ field: { value, onBlur, onChange } }) => {
-                            dirty,
+                                                let dependencyField;
-                            resetForm,
+                                                if (column.dependencyId) {
-                        }) => (
+                                                    dependencyField = useWatch({ control, name: column.dependencyId });
-                            <Form>
+                                                }
-                                <Box sx={{ px: 1, py: 2 }}>
+                                                return (
-                                    {columns.map(
+                                                    <FilterBodyField
-                                        (column) =>
+                                                        column={column}
-                                            column.enableColumnFilter && (
+                                                        filterParameters={value}
-                                                <FilterBodyField
+                                                        handleChange={onChange}
-                                                    key={column.id}
+                                                        handleBlur={onBlur}
-                                                    column={column}
+                                                        dependencyFieldValue={dependencyField}
-                                                    filterParameters={values[column.id]}
+                                                        resetForm={() => reset()}
-                                                    handleChange={handleChange}
+                                                        errors={errors}
-                                                    handleBlur={handleBlur}
+                                                    />
-                                                    dependencyFieldValue={
+                                                );
-                                                        column.dependencyId ? getIn(values, column.dependencyId) : null
+                                            }}
-                                                    }
+                                        />
-                                                    setFieldValue={setFieldValue}
+                                    )
-                                                    resetForm={resetForm}
+                            )}
-                                                    errors={errors}
+                        </Box>
-                                                    touched={touched}
+                        <Box
-                                                />
+                            sx={{
-                                            )
+                                display: "flex",
-                                    )}
+                                justifyContent: "center",
-                                </Box>
+                                alignItems: "center",
-                                <Box
+                                pb: 2,
-                                    sx={{
+                            }}
-                                        display: "flex",
+                        >
-                                        justifyContent: "center",
+                            <Button
-                                        alignItems: "center",
+                                type="submit"
-                                        pb: 2,
+                                variant="contained"
-                                    }}
+                                size="large"
-                                >
+                                disabled={!isDirty || !isValid}
-                                    <Button
+                                sx={{
-                                        type="submit"
+                                    px: 8,
-                                        variant="contained"
+                                    boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
-                                        size="large"
+                                    backgroundColor: "primary2",
-                                        disabled={isSubmitting || !isValid || !dirty}
+                                    ":hover": {
-                                        sx={{
+                                        backgroundColor: "primary2",
-                                            px: 8,
+                                    },
-                                            boxShadow:
+                                }}
-                                                "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
+                            >
-                                            backgroundColor: "primary2",
+                                اعمال فیلتر
-                                            ":hover": {
+                            </Button>
-                                                backgroundColor: "primary2",
+                        </Box>
-                                            },
+                    </form>
-                                        }}
-                                    >
-                                        اعمال فیلتر
-                                    </Button>
-                                </Box>
-                            </Form>
-                        )}
-                    </Formik>
                 </ScrollBox>
             )}
         </Drawer>

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 { useState } from "react";
-import CustomDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker";
-import CustomSelectMultiple from "@/core/components/DataTable/filter/fieldsType/CustomSelectMultiple";
 
 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" ? (
+            {renderField()}
-                <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)}
-                />
-            )}
             {Array.isArray(column.columnFilterModeOptions) && (
                 <FilterOptionList
                     column={column}
                     anchorEl={anchorEl}
                     setAnchorEl={setAnchorEl}
                     filterParameters={filterParameters}
-                    filterType={filterParameters.filterFn}
+                    filterType={filterParameters.filterMode}
-                    setFieldValue={setFieldValue}
+                    handleChange={handleChange}
                     resetForm={resetForm}
                     filterOption={column.columnFilterModeOptions}
                     columnFilterModeOptionFa={columnFilterModeOptionFa}

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" ? ["", ""] : "");
+        handleChange({
-        setFieldValue(`${column.id}.filterFn`, filterOption[index]);
+            ...filterParameters,
+            value: filterOption[index] === "between" ? ["", ""] : "",
+            filterMode: filterOption[index],
+        });
         setSelectedFilter(filterOption[index]);
         setAnchorEl(null);
     };

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" }}>

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>

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);

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 }) {
+function CustomSelect({ column, dependencyFieldValue, filterParameters, defaultFilterTranslation, handleChange }) {
-    const columnSelectOption = column.columnSelectOption(dependencyFieldValue);
+    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) => {
+                onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
-                    setFieldValue(`${column.id}.value`, e.target.value);
-                }}
             >
                 <MenuItem value="">{column.header}</MenuItem>
                 {columnSelectOption.map((option) => (

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) => {
+                onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
-                    setFieldValue(`${column.id}.value`, e.target.value);
-                }}
                 renderValue={(selected) => (
                     <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
                         {selected.map((value) => (

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={

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)}
+                error={Boolean(errors?.[`${column.id}`]?.value)}
-                helperText={touched?.[`${column.id}`]?.value ? errors?.[`${column.id}`]?.value : null}
+                helperText={errors?.[`${column.id}`]?.value ? errors?.[`${column.id}`]?.value.message : null}
                 label={<Typography>تا {column.header}</Typography>}
                 value={filterParameters.value[1]}
                 fullWidth

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";

src/core/components/PageLoading.jsx

@@ -1,10 +1,12 @@
-'use client'
+"use client";
-import { Paper } from "@mui/material"
+import { Paper } from "@mui/material";
-import LoadingHardPage from "./LoadingHardPage"
+import LoadingHardPage from "./LoadingHardPage";
 
 const PageLoading = () => {
-    return <Paper elevation={0} sx={{ position: "relative", overflowX: "hidden", width: '100%', height: '100%' }}>
+    return (
-        <LoadingHardPage width={100} height={100} loading={true} sx={{ position: 'absolute' }} />
+        <Paper elevation={0} sx={{ position: "relative", overflowX: "hidden", width: "100%", height: "100%" }}>
-    </Paper>
+            <LoadingHardPage width={100} height={100} loading={true} sx={{ position: "absolute" }} />
-}
+        </Paper>
-export default PageLoading
+    );
+};
+export default PageLoading;

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 (