src/Components/Utils/Filter/FilterState.ts

@@ -1,8 +1,7 @@
 import { create } from "zustand";
 
 interface FilterState {
-  filterState: {};
-  InitialValue: {};
+  filterState: any[];
   setFilterState: (data: any) => void;
   clearFilterState: () => void;
   setWithOldValue: (data: any) => void;
@@ -10,14 +9,15 @@ interface FilterState {
 }
 
 export const useFilterState = create<FilterState>((set, get) => ({
-  filterState: {},
-  InitialValue:{name:""},
+  filterState: [],
   setFilterState: (data) => set(() => ({ filterState: data })),
   clearFilterState: () => set(() => ({ filterState: [] })),
   setWithOldValue: (data) =>
-    set((state) => ({ filterState: {...state.filterState, data} })),
+    set((state) => ({ filterState: [...state.filterState, data] })),
   setInitialValue: (data) => {
-      set(() => ({ InitialValue: data }));
+    if (get().filterState.length < 1) {
+      set(() => ({ filterState: data }));
+    }
   },
 }));
 

src/Components/Utils/Filter/useFilter.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useEffect, useState } from "react";
 import { FaFilter } from "react-icons/fa";
-import { Form, Formik, FormikConfig, FormikHelpers, useFormikContext } from "formik";
+import { Form, Formik, FormikConfig, FormikHelpers } from "formik";
 import { Button, ButtonProps, Divider, Modal } from "antd";
 import { useTranslation } from "react-i18next";
 import { useModalState } from "./Modal";
@@ -8,6 +8,7 @@ import { useFilterState } from "./FilterState";
 import { ModalEnum } from "../../../enums/Model";
 import { QueryStatusEnum } from "../../../enums/QueryStatus";
 import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
+import FormikForm from "../../../Layout/Dashboard/FormikForm";
 import SpinContainer from "../../Layout/SpinContainer";
 import { TbFlagCancel } from "react-icons/tb";
 import { XFilled } from "@ant-design/icons";
@@ -35,14 +36,12 @@ interface SubmitButtonProps extends Omit<ButtonProps, "loading"> {}
 
 const useFilter = () => {
   const { setIsOpen, isOpen } = useModalState((state) => state);
-  const { filterState, setFilterState, clearFilterState ,InitialValue} = useFilterState();
+  const { filterState, setFilterState, clearFilterState } = useFilterState();
   const [t] = useTranslation();
   const [formValues, setFormValues] = useState({});
-  const formik = useFormikContext()
+
   // Define the type for the callback
   type SubmitCallback = () => void;
-  // console.log(formik?.values);
-  // console.log(InitialValue);
 
   const FilterButton = () => {
     const handleState = () => {
@@ -67,9 +66,6 @@ const useFilter = () => {
       setFilterState({})
     }, [])
     
-
-   
-    
   const FilterBody = ({
     onSubmit,
     children,
@@ -104,7 +100,6 @@ const useFilter = () => {
       setFormValues({});
      
     };
-    
     const handleOpen = () => {
       setIsOpen(true);
       // setObjectToEdit({});
@@ -127,27 +122,20 @@ const useFilter = () => {
         <Formik
           enableReinitialize={true}
           onSubmit={handleSubmit}
-          initialValues={{}}
+          initialValues={formValues}
           onReset={handleCancel}
           {...formikProps}
         >
-          {(formik) => {
-  
-            return (
-              <Form>
-             
-              <div>
-                <header> {t("models.filter")}  <FaXmark onClick={()=>handleCancel(true)} /> </header>
-                <Divider />
-                <main className="main_modal">
-                  {isLoading ? <SpinContainer /> : children}
-                  <Divider />
-                </main>
-              </div>
-              </Form>
-         )
-          }}
-       
+          <Form>
+          <div>
+            <header> {t("models.filter")}  <FaXmark onClick={()=>handleCancel(true)} /> </header>
+            <Divider />
+            <main className="main_modal">
+              {isLoading ? <SpinContainer /> : children}
+              <Divider />
+            </main>
+          </div>
+          </Form>
         </Formik>
       </Modal>
     </>

src/Components/ValidationField/View/Default.tsx

@@ -4,6 +4,7 @@ import useFormField from "../../../Hooks/useFormField";
 import { Field } from "formik";
 import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
 import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
+import { FieldProps } from "../utils/types";
 
 const Default = ({
   name,

src/Layout/Dashboard/FilterLayout.tsx

@@ -6,6 +6,7 @@ import { translateOptions } from "../../utils/translatedOptions";
 import { search_array } from "../../Routes";
 import PaginationColumn from "../../Components/Filter/PaginationColumn";
 import OrderBySelect from "../../Components/Filter/OrderBySelect";
+import LayoutFilterModal from "./LayoutFilterModal";
 import { BiFilterAlt } from "react-icons/bi";
 import { MdKeyboardArrowDown } from "react-icons/md";
 import SearchField from "../../Components/DataTable/SearchField";

src/Layout/Dashboard/FormikForm.tsx

@@ -7,7 +7,7 @@ interface FormValues {
 interface FormikFormProps {
   handleSubmit: (values: any) => void;
   initialValues: FormValues;
-  validationSchema?: any;
+  validationSchema: any;
   title?: string;
   children: ReactNode;
   ButtonName?: string;

src/Pages/Admin/Grade/Model/FilterForm.tsx

@@ -1,11 +1,8 @@
 import React from "react";
 import ValidationField from "../../../../Components/ValidationField/ValidationField";
 import { Col, Row } from "reactstrap";
-import { useFormikContext } from "formik";
 
 const FilterForm = () => {
-  const formik = useFormikContext();
-  
   return (
     <div>
       <Row>

src/zustand/ObjectToEditState.ts

@@ -27,7 +27,7 @@ interface ModelState {
 }
 
 export const useObjectToEdit = create<ModelState>((set) => ({
-  c: null,
+  objectToEdit: null,
   setObjectToEdit: (data) => set(() => ({ objectToEdit: data })),
   OldObjectToEdit: null,
   setOldObjectToEdit: (data) => set(() => ({ OldObjectToEdit: data })),