diff --git a/src/Layout/Dashboard/LayoutModel.tsx b/src/Layout/Dashboard/LayoutModel.tsx
index 597ea72..a7bdbfe 100644
--- a/src/Layout/Dashboard/LayoutModel.tsx
+++ b/src/Layout/Dashboard/LayoutModel.tsx
@@ -21,6 +21,8 @@ interface LayoutModalProps {
   ModelClassName?: string;
   width?: string;
   isLoading?: boolean;
+  buttonTitle?:string;
+  initialButtonName?:boolean
 }
 
 const LayoutModel = ({
@@ -35,6 +37,8 @@ const LayoutModel = ({
   ModelClassName,
   width = "800px",
   isLoading = false,
+  buttonTitle,
+  initialButtonName = true,
 }: LayoutModalProps) => {
   const { isOpen, setIsOpen } = useModalState((state) => state);
   const { setObjectToEdit } = useObjectToEdit();
@@ -67,7 +71,7 @@ const LayoutModel = ({
         onCancel={handleCancel}
       >
 
-<Formik
+    <Formik
       enableReinitialize={true}
       initialValues={getInitialValues}
       validationSchema={getValidationSchema}
@@ -84,9 +88,9 @@ const LayoutModel = ({
         
         return <Form className="w-100">
 
-<header>
+      <header>
             <span>
-              {t(`practical.${isAddModal ? "add" : "edit"}`)}{" "}
+              {t(`practical.${isAddModal ? "add" : "edit"}`)}{" "} 
               {t(`models.${modelTitle}`)}{" "}
             </span>
             <MdCancel onClick={handleCancel} />
@@ -105,7 +109,10 @@ const LayoutModel = ({
                 disabled={status === QueryStatusEnum.LOADING || !formik.dirty}
                 type="submit"
               >
-                {t(`practical.${isAddModal ? "add" : "edit"}`)}
+                {
+                  initialButtonName ?  t(`practical.${isAddModal ? "add" : "edit"}`)
+                                    :  t(`practical.${buttonTitle}`)
+                }
                 {status === QueryStatusEnum.LOADING && (
                   <span className="Spinier_Div">
                     <Spin />
diff --git a/src/Pages/Admin/Profile/Page.tsx b/src/Pages/Admin/Profile/Page.tsx
index def9cc2..14b4cad 100644
--- a/src/Pages/Admin/Profile/Page.tsx
+++ b/src/Pages/Admin/Profile/Page.tsx
@@ -41,12 +41,12 @@ const Page = () => {
               <TitleDetailsForm />
               <PasswordDetailsForm/>              
               <AttachmentForm />
-              <div className="resellerButton">
+              {/* <div className="resellerButton">
                 <button type="button">{t("practical.cancel")}</button>
                 <button type="submit">
                   {t("practical.add")} {t("models.reseller")}
                 </button>
-              </div>
+              </div> */}
             </Form>
           </Formik>
         </div>
diff --git a/src/Pages/Admin/Reseller/Add/Page.tsx b/src/Pages/Admin/Reseller/Add/Page.tsx
index 8a16bc0..88e066a 100644
--- a/src/Pages/Admin/Reseller/Add/Page.tsx
+++ b/src/Pages/Admin/Reseller/Add/Page.tsx
@@ -1,22 +1,40 @@
 import { useTranslation } from "react-i18next";
 import useSetPageTitle from "../../../../Hooks/useSetPageTitle";
 import PageHeader from "../../../../Layout/Dashboard/PageHeader";
-import { Suspense } from "react";
+import { Suspense, useEffect } from "react";
 import { Spin } from "antd";
 import { ModalEnum } from "../../../../enums/Model";
-import { canAddReSeller } from "../../../../utils/hasAbilityFn";
 import PersonalDetailsForm from "../Form/PersonalDetailsForm";
 import { Formik, Form } from "formik";
 import { getInitialValues, getValidationSchema } from "../Form/formUtils";
 import TitleDetailsForm from "../Form/TitleDetailsForm";
 import AttachmentForm from "../Form/AttachmentForm";
+import { useAddReseller } from "../../../../api/reseller";
+import { useNavigate } from "react-router-dom";
+import { QueryStatusEnum } from "../../../../enums/QueryStatus";
 
 const TableHeader = () => {
   const [t] = useTranslation();
+  const Navigate = useNavigate();
+  const {mutate, isSuccess,status} = useAddReseller();
   useSetPageTitle(t(`page_header.add_reseller`));
-  const handelSubmit = (values: any) => {
-    console.log(values, "values");
+  const handleSubmit = (values: any) => {
+    const DataToSend = {
+        ...values,
+        location: {
+            lat: values.lat, 
+            lng: values.lng,
+        },
+    };    
+    mutate(DataToSend); 
   };
+    useEffect(() => {
+      if(isSuccess === true){
+        console.log(1);
+        Navigate('/reseller')
+      }
+    }, [isSuccess])
+    
   return (
     <div className="TableWithHeader">
       <Suspense fallback={<Spin />}>
@@ -29,19 +47,26 @@ const TableHeader = () => {
           <Formik
             initialValues={getInitialValues({})}
             validationSchema={getValidationSchema}
-            onSubmit={handelSubmit}
+            onSubmit={handleSubmit}
           >
-            <Form className="Form_details_container">
-              <PersonalDetailsForm />
-              <TitleDetailsForm />
-              <AttachmentForm />
-              <div className="resellerButton">
-                <button type="button">{t("practical.cancel")}</button>
-                <button type="submit">
-                  {t("practical.add")} {t("models.reseller")}
-                </button>
-              </div>
-            </Form>
+            {({ resetForm }) => ( 
+                <Form className="Form_details_container">
+                    <PersonalDetailsForm />
+                    <TitleDetailsForm />
+                    <AttachmentForm />
+                    <div className="resellerButton">
+                        <button type="button" onClick={() => Navigate('/reseller')}>{t("practical.cancel")}</button>
+                        <button type="submit">
+                            {t("practical.add")} {t("models.reseller")}
+                            {status === QueryStatusEnum.LOADING && (
+                              <span className="Spinier_Div">
+                                <Spin />
+                              </span>
+                            )}
+                        </button>
+                    </div>
+                </Form>
+            )}
           </Formik>
         </div>
       </Suspense>
diff --git a/src/Pages/Admin/Reseller/Edit/Page.tsx b/src/Pages/Admin/Reseller/Edit/Page.tsx
index c8fca3a..f02915c 100644
--- a/src/Pages/Admin/Reseller/Edit/Page.tsx
+++ b/src/Pages/Admin/Reseller/Edit/Page.tsx
@@ -1,24 +1,46 @@
 import { useTranslation } from "react-i18next";
 import useSetPageTitle from "../../../../Hooks/useSetPageTitle";
 import PageHeader from "../../../../Layout/Dashboard/PageHeader";
-import { Suspense } from "react";
+import { Suspense, useEffect } from "react";
 import { Spin } from "antd";
 import { ModalEnum } from "../../../../enums/Model";
 import PersonalDetailsForm from "../Form/PersonalDetailsForm";
 import { Formik, Form } from "formik";
-import { getInitialValues, getValidationSchema } from "../Form/formUtils";
+import { getInitialValues, getInitialValuesEdit, getValidationSchema } from "../Form/formUtils";
 import TitleDetailsForm from "../Form/TitleDetailsForm";
 import AttachmentForm from "../Form/AttachmentForm";
 import useModalHandler from "../../../../utils/useModalHandler";
+import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
+import { useUpdateReseller } from "../../../../api/reseller";
+import { useNavigate } from "react-router-dom";
+import { QueryStatusEnum } from "../../../../enums/QueryStatus";
 
 const TableHeader = ({canEdit,ModelAbility}:{canEdit?: any;ModelAbility?: any;}) => {
 
   const [t] = useTranslation();
+  const { objectToEdit , setObjectToEdit } = useObjectToEdit();
+  const {mutate, isSuccess,status} = useUpdateReseller();
+  const Navigate = useNavigate()
+  console.log(objectToEdit);
+  
   useSetPageTitle(t(`page_header.add_reseller`));
-  const handelSubmit = (values: any) => {
-    console.log(values, "values");
+  const handleSubmit = (values: any) => {
+    const DataToSend = {
+        ...values,
+        location: {
+            lat: values.lat, 
+            lng: values.lng,
+        },
+    };    
+    mutate(DataToSend); 
   };
-  const { handel_open_model } = useModalHandler();
+    useEffect(() => {
+      if(isSuccess === true){
+        console.log(1);
+        Navigate('/reseller')
+      }
+    }, [isSuccess])
+    
 
   return (
     <div className="TableWithHeader">
@@ -30,21 +52,28 @@ const TableHeader = ({canEdit,ModelAbility}:{canEdit?: any;ModelAbility?: any;})
         />
         <div>
           <Formik
-            initialValues={getInitialValues({})}
+            initialValues={getInitialValuesEdit(objectToEdit)}
             validationSchema={getValidationSchema}
-            onSubmit={handelSubmit}
+            onSubmit={handleSubmit}
           >
+          {({ resetForm }) => ( 
             <Form className="Form_details_container">
-              <PersonalDetailsForm />
+              <PersonalDetailsForm isEdit={true} />
               <TitleDetailsForm />
               <AttachmentForm />
               <div className="resellerButton">
-                <button type="button">{t("practical.cancel")}</button>
+                <button type="button" onClick={()=>Navigate('/reseller')}>{t("practical.cancel")}</button>
                 <button type="submit">
                   {t("practical.edit")} {t("models.reseller")}
+                  {status === QueryStatusEnum.LOADING && (
+                  <span className="Spinier_Div">
+                    <Spin />
+                  </span>
+                )}
                 </button>
               </div>
             </Form>
+            )}
           </Formik>
         </div>
       </Suspense>
diff --git a/src/Pages/Admin/Reseller/Form/PersonalDetailsForm.tsx b/src/Pages/Admin/Reseller/Form/PersonalDetailsForm.tsx
index 46381e4..554d6ca 100644
--- a/src/Pages/Admin/Reseller/Form/PersonalDetailsForm.tsx
+++ b/src/Pages/Admin/Reseller/Form/PersonalDetailsForm.tsx
@@ -6,7 +6,7 @@ import { convert_data_to_select } from "../../../../Layout/app/Const";
 import { userTypeOptions } from "../../../../config/userTypeOptions";
 import { statusType } from "../../../../config/statusType";
 
-const PersonalDetailsForm = () => {
+const PersonalDetailsForm = ({isEdit}:{isEdit?:boolean}) => {
   const [t] = useTranslation();
   return (
     <div className="PersonalDetailsForm">
@@ -16,6 +16,55 @@ const PersonalDetailsForm = () => {
       </header>
       <main className="main_form_body">
         <ValidationField
+          name={"first_name"}
+          placeholder={"_"}
+          label={"first_name"}
+        />
+        <ValidationField
+          name={"last_name"}
+          placeholder={"_"}
+          label={"last_name"}
+        />
+        <ValidationField
+          name={"contact_number1"}
+          placeholder={"_"}
+          label={"contact_number1"}
+        />
+
+        <ValidationField
+          name={"contact_number2"}
+          placeholder={"_"}
+          label={"contact_number2"}
+        />
+        <ValidationField
+          name={"username"}
+          placeholder={"_"}
+          label={"username"}
+          type="text"
+        />
+        {isEdit? "" :
+          <ValidationField
+            name={"password"}
+            placeholder={"_"}
+            label={"password"}
+          /> 
+        }
+        <ValidationField
+          name={"card_number"}
+          placeholder={"_"}
+          label={"ID Number"}
+        />
+        <ValidationField
+          name={"location_lat"}
+          placeholder={"_"}
+          label={"lat"}
+        />
+        <ValidationField
+          name={"location_lng"}
+          placeholder={"_"}
+          label={"lng"}
+        />
+        {/* <ValidationField
           name={"id_number"}
           placeholder={"_"}
           label={"ID Number"}
@@ -67,7 +116,7 @@ const PersonalDetailsForm = () => {
           placeholder={"_"}
           label={"Seller Percentage"}
           type="text"
-        />
+        /> */}
       </main>
     </div>
   );
diff --git a/src/Pages/Admin/Reseller/Form/TitleDetailsForm.tsx b/src/Pages/Admin/Reseller/Form/TitleDetailsForm.tsx
index e7faa2a..a925fc4 100644
--- a/src/Pages/Admin/Reseller/Form/TitleDetailsForm.tsx
+++ b/src/Pages/Admin/Reseller/Form/TitleDetailsForm.tsx
@@ -15,13 +15,13 @@ const TitleDetailsForm = () => {
       </header>
       <main className="main_form_body">
         <ValidationField
-          name={"city_id"}
+          name={"area_id"}
           placeholder={"_"}
           label={"city"}
-          type="Select"
-          option={nationalities}
+          // type="Select"
+          // option={nationalities}
         />
-        <ValidationField name={"address"} placeholder={"_"} label={"address"} />
+        {/* <ValidationField name={"address"} placeholder={"_"} label={"address"} /> */}
       </main>
     </div>
   );
diff --git a/src/Pages/Admin/Reseller/Form/formUtils.ts b/src/Pages/Admin/Reseller/Form/formUtils.ts
index b14915a..b9ecdf9 100644
--- a/src/Pages/Admin/Reseller/Form/formUtils.ts
+++ b/src/Pages/Admin/Reseller/Form/formUtils.ts
@@ -1,13 +1,89 @@
 import * as Yup from "yup";
+import { objectToKeyValueArray } from "../../../../utils/objectToKeyValueArray";
 
-export const getInitialValues = (objectToEdit: Partial<any>) => {
+interface Location {
+    lat: number;
+    lng: number;
+}
+interface User {
+  username: string;
+  phone_number?: number;
+  type?:string
+}
+
+
+interface PersonalDetailsForm {
+    id: number;
+    first_name: string | null;
+    last_name: string | null;
+    location: Location[]; 
+    contact_number1: string | null;
+    contact_number2: string | null;
+    card_number: string | null;
+    username: string | null;
+    password: string | null;
+    area_id: number | null;
+}
+
+interface PersonalDetailsEditForm {
+  id: number;
+  first_name: string | null;
+  last_name: string | null;
+  location: Location[]; 
+  contact_number1: string | null;
+  contact_number2: string | null;
+  card_number: string | null;
+  user: User;
+  area_id: number | null;
+}
+
+export const getInitialValues = (objectToEdit: Partial<PersonalDetailsForm>) => {
+  const location = objectToEdit?.location?.[0] || { lat: 0, lng: 0 }; 
   return {
-    id: objectToEdit?.id ?? null,
-    name: objectToEdit?.name ?? null,
+      id: objectToEdit?.id ?? 0,
+      first_name: objectToEdit?.first_name ?? null,
+      last_name: objectToEdit?.last_name ?? null,
+      location_lat: location.lat, 
+      location_lng: location.lng, 
+      contact_number1: objectToEdit?.contact_number1 ?? null,
+      contact_number2: objectToEdit?.contact_number2 ?? null,
+      card_number: objectToEdit?.card_number ?? null,
+      username: objectToEdit?.username ?? null,
+      password: objectToEdit?.password ?? null,
+      area_id: objectToEdit?.area_id ?? null,
   };
 };
 
 export const getValidationSchema = () => {
   // validate input
-  return Yup.object().shape({});
+  return  Yup.object().shape({
+    id: Yup.number().required(),
+    first_name: Yup.string().required('first_name is required'),
+    last_name: Yup.string().required('last_name is required'),
+    location_lat: Yup.string().required('lat is required'),
+    location_lng: Yup.string().required('lng is required'),
+    contact_number1: Yup.string().required('contact_number1 is required'),
+    contact_number2: Yup.string().required('contact_number2 is required'),
+    username: Yup.string().required('username is required'),
+    area_id: Yup.number().required('area_id is required'),
+  });
 };
+
+
+export const getInitialValuesEdit = (objectToEdit: Partial<PersonalDetailsEditForm>) => {
+  const location = objectToEdit?.location || { lat: 0, lng: 0 };   
+  console.log(objectToEdit);
+  
+  return {
+      id: objectToEdit?.id ?? 0,
+      first_name: objectToEdit?.first_name ?? null,
+      last_name: objectToEdit?.last_name ?? null,
+      location_lat: location.lat, 
+      location_lng: location.lng,
+      contact_number1: objectToEdit?.contact_number1 ?? null,
+      contact_number2: objectToEdit?.contact_number2 ?? null,
+      card_number: objectToEdit?.card_number ?? null,
+      username: objectToEdit?.user?.username ?? null,
+      area_id: objectToEdit?.area_id ?? null,
+  };
+};
\ No newline at end of file
diff --git a/src/Pages/Admin/Reseller/Page.tsx b/src/Pages/Admin/Reseller/Page.tsx
index 40fc2df..e01a922 100644
--- a/src/Pages/Admin/Reseller/Page.tsx
+++ b/src/Pages/Admin/Reseller/Page.tsx
@@ -11,6 +11,7 @@ import PageHeader from "../../../Layout/Dashboard/PageHeader";
 import FilterLayout from "../../../Layout/Dashboard/FilterLayout";
 import FilterForm from "./Form/FilterForm";
 import EditReSeller from "./Edit/Page";
+import { useDeleteReseller } from "../../../api/reseller";
 const Table = lazy(() => import("./Table"));
 const DeleteModalForm = lazy(
   () => import("../../../Layout/Dashboard/DeleteModels"),
@@ -25,7 +26,7 @@ const TableHeader = () => {
     {name:`${t(`page_header.home`)}`, path:"/"},
     {name:`${t(`page_header.reseller`)}`, path:"reseller"}
   ]);
-  const deleteMutation = useDeleteTag();
+  const deleteMutation = useDeleteReseller();
   return (
     <div className="TableWithHeader">
       <Suspense fallback={<Spin />}>
diff --git a/src/Pages/Admin/Reseller/useTableColumns.tsx b/src/Pages/Admin/Reseller/useTableColumns.tsx
index 9de525b..2272b2a 100644
--- a/src/Pages/Admin/Reseller/useTableColumns.tsx
+++ b/src/Pages/Admin/Reseller/useTableColumns.tsx
@@ -4,13 +4,14 @@ import useModalHandler from "../../../utils/useModalHandler";
 import { ModalEnum } from "../../../enums/Model";
 import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import {
   canDeleteReSeller,
   canEditReSeller,
   canShowReSeller,
 } from "../../../utils/hasAbilityFn";
 import ActionButtons from "../../../Components/Table/ActionButtons";
+import { ABILITIES_ENUM } from "../../../enums/abilities";
 
 export const useColumns = () => {
   const { handel_open_model } = useModalHandler();
@@ -27,9 +28,9 @@ export const useColumns = () => {
     handel_open_model(ModalEnum?.RE_SELLER_DELETE);
   };
 
-  const handleEdit = (record: ReSeller) => {
+  const handleEdit = (record: ReSeller) => {        
     setObjectToEdit(record);
-    handel_open_model(ModalEnum?.RE_SELLER_EDIT);
+    navigate(`/${ABILITIES_ENUM?.RE_SELLER}/${record?.id}/edit`)
   };
   const [t] = useTranslation();
 
diff --git a/src/Pages/Admin/Setting/Form/Notification/NotificationCard.tsx b/src/Pages/Admin/Setting/Form/Notification/NotificationCard.tsx
index 1455fc7..3a58237 100644
--- a/src/Pages/Admin/Setting/Form/Notification/NotificationCard.tsx
+++ b/src/Pages/Admin/Setting/Form/Notification/NotificationCard.tsx
@@ -12,7 +12,7 @@ const NotificationCard = ({
     const {t} = useTranslation();
 
   return (
-    <div className='notification_card'>
+    <div className='notification_card_setting'>
         <div>
             <h5>{t(`${name}`)}</h5>
             <p>{t(`${description}`)}</p>
diff --git a/src/Pages/ReSeller/Collections/Model/CollectionInfoCard.tsx b/src/Pages/ReSeller/Collections/Model/CollectionInfoCard.tsx
index 8a84457..1a7d7cf 100644
--- a/src/Pages/ReSeller/Collections/Model/CollectionInfoCard.tsx
+++ b/src/Pages/ReSeller/Collections/Model/CollectionInfoCard.tsx
@@ -5,7 +5,7 @@ const CollectionInfoCard = ({label,value}:{label:string,value:string}) => {
     const {t} = useTranslation();
   return (
     <div className='collection_info_card'>
-        <h5>{t(label)}</h5>
+        <h5>{t(`card.${label}`)}</h5>
         <p>{t(value)}</p>
     </div>
   )
diff --git a/src/Pages/ReSeller/Collections/Model/CollectionsCards.tsx b/src/Pages/ReSeller/Collections/Model/CollectionsCards.tsx
new file mode 100644
index 0000000..8019084
--- /dev/null
+++ b/src/Pages/ReSeller/Collections/Model/CollectionsCards.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import CollectionInfoCard from './CollectionInfoCard'
+import { useTranslation } from 'react-i18next'
+
+const CollectionsCards = ({data}:{data?:any}) => {
+    const {t} = useTranslation();
+  return (
+    <>
+        <CollectionInfoCard 
+         label={t('total_sells')} 
+         value={"210"}
+         />
+        <CollectionInfoCard 
+         label={t('reseller_profit')} 
+         value={"210"}
+         />
+         <CollectionInfoCard 
+         label={t('company_profit')} 
+         value={"210"}
+         />
+         <CollectionInfoCard 
+         label={t('collected')} 
+         value={"210"}
+         />
+         <CollectionInfoCard 
+         label={t('residual')} 
+         value={"210"}
+         />
+    </>
+  )
+}
+
+export default CollectionsCards
\ No newline at end of file
diff --git a/src/Pages/ReSeller/Collections/Page.tsx b/src/Pages/ReSeller/Collections/Page.tsx
index 37b68ad..37f9b22 100644
--- a/src/Pages/ReSeller/Collections/Page.tsx
+++ b/src/Pages/ReSeller/Collections/Page.tsx
@@ -5,8 +5,7 @@ import useSetPageTitle from "../../../Hooks/useSetPageTitle";
 import PageHeader from "../../../Layout/Dashboard/PageHeader";
 import FilterLayout from "../../../Layout/Dashboard/FilterLayout";
 import FilterForm from "./Model/FilterForm";
-import CollectionInfoCard from "./Model/CollectionInfoCard";
-import { CollectionData } from "../../../faker/item";
+import CollectionsCards from "./Model/CollectionsCards";
 const Table = lazy(() => import("./Table"));
 
 const TableHeader = () => {
@@ -23,9 +22,7 @@ const TableHeader = () => {
           pageTitle="collections"
         />
           <div className="collection_infos">
-            {CollectionData?.map((collection:any)=>(
-              <CollectionInfoCard label={collection.label} value={collection.value}/>
-            ))}
+          <CollectionsCards/>
         </div>
         <FilterLayout
           sub_children={<FilterForm />}
diff --git a/src/Pages/ReSeller/Collections/Table.tsx b/src/Pages/ReSeller/Collections/Table.tsx
index 3c2f8c8..c2dbb6f 100644
--- a/src/Pages/ReSeller/Collections/Table.tsx
+++ b/src/Pages/ReSeller/Collections/Table.tsx
@@ -3,13 +3,13 @@ import DataTable from "../../../Layout/Dashboard/Table/DataTable";
 import { useColumns } from "./useTableColumns";
 import useSearchQuery from "../../../api/utils/useSearchQuery";
 import { useFilterState } from "../../../Components/Utils/Filter/FilterState";
-import { useGetAllSales } from "../../../api/sales";
+import { useGetAllCollections } from "../../../api/collections";
 
 const App: React.FC = () => {
   const [searchQuery] = useSearchQuery("name");
   const { filterState } = useFilterState();
 
-  const response = useGetAllSales({
+  const response = useGetAllCollections({
     name: searchQuery,
     pagination: true,
     ...filterState,
diff --git a/src/Pages/ReSeller/Collections/index.tsx b/src/Pages/ReSeller/Collections/index.tsx
index 447f22d..4a66640 100644
--- a/src/Pages/ReSeller/Collections/index.tsx
+++ b/src/Pages/ReSeller/Collections/index.tsx
@@ -3,15 +3,9 @@ import Table from "./Table";
 
 import { FaPlus } from "react-icons/fa";
 
-import AddModalForm from "./Model/AddModel";
-import EditModalForm from "./Model/EditModel";
-// import DeleteModalForm from "../../";
 
 export {
   Table,
   useColumns,
-  AddModalForm,
-  EditModalForm,
-  // DeleteModalForm,
   FaPlus,
 };
diff --git a/src/Pages/ReSeller/Profile/Page.tsx b/src/Pages/ReSeller/Profile/Page.tsx
index def9cc2..14b4cad 100644
--- a/src/Pages/ReSeller/Profile/Page.tsx
+++ b/src/Pages/ReSeller/Profile/Page.tsx
@@ -41,12 +41,12 @@ const Page = () => {
               <TitleDetailsForm />
               <PasswordDetailsForm/>              
               <AttachmentForm />
-              <div className="resellerButton">
+              {/* <div className="resellerButton">
                 <button type="button">{t("practical.cancel")}</button>
                 <button type="submit">
                   {t("practical.add")} {t("models.reseller")}
                 </button>
-              </div>
+              </div> */}
             </Form>
           </Formik>
         </div>
diff --git a/src/Pages/ReSeller/Sales/Model/AddModel.tsx b/src/Pages/ReSeller/Sales/Model/AddModel.tsx
index dd0547e..e210318 100644
--- a/src/Pages/ReSeller/Sales/Model/AddModel.tsx
+++ b/src/Pages/ReSeller/Sales/Model/AddModel.tsx
@@ -1,31 +1,53 @@
 import React from "react";
 import { getInitialValues, getValidationSchema } from "./formUtil";
 import { ModalEnum } from "../../../../enums/Model";
-import LayoutModel from "../../../../Layout/Dashboard/LayoutModel";
 import { QueryStatusEnum } from "../../../../enums/QueryStatus";
-import ModelForm from "./ModelForm";
-import { useAddStudentPackage } from "../../../../api/studentPackage";
+import ValidationModelForm from "./ValidationModelForm";
+import SalesModelForm from "./SalesModelForm";
+import SubmitModelForm from "./SubmitModelForm";
+
 import { useAddSales } from "../../../../api/sales";
+import LayoutModel from "./LayoutModel";
 
 const AddModel: React.FC = () => {
   const { mutate, status } = useAddSales();
 
   const handleSubmit = (values: any) => {
-    mutate({
-      ...values,
-    });
+    // mutate({
+    //   ...values,
+    // });
   };
+  enum modal {
+    Number= 0,
+    Package= 1,
+    Sure= 2
+  } 
+
+  const Forms = {
+    [modal.Number]:  <ValidationModelForm /> ,
+    [modal.Package] : <SalesModelForm /> ,
+    [modal.Sure]:  <SubmitModelForm /> 
+  }
+  // const modelTitle = Forms.[modal.Number] ? "sale" : Forms.Package ? "adcs" : "Ascas";  
+  
+  
   return (
     <>
       <LayoutModel
         status={status as QueryStatusEnum}
         ModelEnum={ModalEnum.Sales_ADD}
-        modelTitle="sale"
+        modelTitle={"modelTitle"}
         handleSubmit={handleSubmit}
         getInitialValues={getInitialValues({})}
         getValidationSchema={getValidationSchema}
+        initialButtonName={false}
+        buttonTitle="search"
       >
-        <ModelForm />
+        {/* {Forms["Number"]} */}
+        <>
+        <SalesModelForm/>
+        </>
+
       </LayoutModel>
     </>
   );
diff --git a/src/Pages/ReSeller/Sales/Model/LayoutModel.tsx b/src/Pages/ReSeller/Sales/Model/LayoutModel.tsx
new file mode 100644
index 0000000..1e05b87
--- /dev/null
+++ b/src/Pages/ReSeller/Sales/Model/LayoutModel.tsx
@@ -0,0 +1,103 @@
+import React, { useEffect } from "react";
+import { Divider, Modal, Spin } from "antd";
+import { useModalState } from "../../../../zustand/Modal";
+import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
+import { useTranslation } from "react-i18next";
+import { QueryStatusEnum } from "../../../../enums/QueryStatus";
+import SpinContainer from "../../../../Components/Layout/SpinContainer";
+import { MdCancel } from "react-icons/md";
+import { Form, Formik } from "formik";
+
+interface LayoutModalProps {
+  isAddModal?: boolean;
+  modelTitle: string;
+  handleSubmit: (values: any) => void;
+  getInitialValues: any;
+  getValidationSchema: any;
+  children: React.ReactNode;
+  status: QueryStatusEnum;
+  ModelEnum: any;
+  ModelClassName?: string;
+  width?: string;
+  isLoading?: boolean;
+  buttonTitle?:string;
+  initialButtonName?:boolean
+}
+
+const LayoutModel = ({
+  isAddModal = true,
+  children,
+  handleSubmit = () => {},
+  getInitialValues,
+  getValidationSchema,
+  status,
+  modelTitle,
+  ModelEnum,
+  ModelClassName,
+  width = "800px",
+  isLoading = false,
+  buttonTitle,
+  initialButtonName = true,
+}: LayoutModalProps) => {
+  const { isOpen, setIsOpen } = useModalState((state) => state);
+  const { setObjectToEdit } = useObjectToEdit();
+  useEffect(() => {
+    if (isAddModal && status === QueryStatusEnum.SUCCESS) {
+      setIsOpen("isSuccess");
+      setObjectToEdit({});
+      return;
+    }
+    if (status === QueryStatusEnum.SUCCESS) {
+      setIsOpen("");
+      setObjectToEdit({});
+    }
+  }, [setIsOpen, status]);
+
+  const handleCancel = () => {
+    setIsOpen("");
+    setObjectToEdit({});
+  };
+
+  const [t] = useTranslation();
+  return (
+    <>
+      <Modal
+        className={"ModalForm " + ModelClassName}
+        centered
+        width={width}
+        footer={null}
+        open={isOpen === ModelEnum}
+        onCancel={handleCancel}
+      >
+
+    <Formik
+      enableReinitialize={true}
+      initialValues={getInitialValues}
+      validationSchema={getValidationSchema}
+      onSubmit={handleSubmit}
+      
+    >
+      {(formik) => {
+        useEffect(() => {
+          if (isOpen === "" || isOpen === "isSuccess") {
+            formik.setErrors({});
+            formik.resetForm();
+          }
+        }, [isOpen]);
+        
+        return <Form className="w-100 reseller_modal_form">
+
+          <Divider />
+          <main className="main_modal">
+            {isLoading ? <SpinContainer /> : children}
+          </main>
+
+        </Form>;
+      }}
+    </Formik>
+      </Modal>
+    </>
+  );
+};
+
+export default LayoutModel;
diff --git a/src/Pages/ReSeller/Sales/Model/ModelForm.tsx b/src/Pages/ReSeller/Sales/Model/ModelForm.tsx
deleted file mode 100644
index 4cace32..0000000
--- a/src/Pages/ReSeller/Sales/Model/ModelForm.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Col, Row } from "reactstrap";
-import ValidationField from "../../../../Components/ValidationField/ValidationField";
-import useFormatDataToSelect from "../../../../utils/useFormatDataToSelect";
-
-const Form = ({ isEdit }: { isEdit?: boolean }) => {
-  const typeOptions = [
-    { id: "student", name: "student" },
-    { id: "reseller", name: "reseller" },
-    { id: "admin", name: "admin" },
-  ];
-  const typeArray = useFormatDataToSelect(typeOptions);
-
-  return (
-    <Row className="w-100">
-      <Col>
-        <ValidationField
-          placeholder="phone_number"
-          label="phone_number"
-          name="phone_number"
-        />
-      </Col>
-    </Row>
-  );
-};
-
-export default Form;
diff --git a/src/Pages/ReSeller/Sales/Model/SalesModelForm.tsx b/src/Pages/ReSeller/Sales/Model/SalesModelForm.tsx
new file mode 100644
index 0000000..90b826d
--- /dev/null
+++ b/src/Pages/ReSeller/Sales/Model/SalesModelForm.tsx
@@ -0,0 +1,62 @@
+import { Col, Row } from "reactstrap";
+import ValidationField from "../../../../Components/ValidationField/ValidationField";
+import useFormatDataToSelect from "../../../../utils/useFormatDataToSelect";
+import { useFormikContext } from "formik";
+import { useModalState } from "../../../../zustand/Modal";
+import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
+import { useTranslation } from "react-i18next";
+import { QueryStatusEnum } from "../../../../enums/QueryStatus";
+import { Divider, Spin } from "antd";
+import { MdCancel } from "react-icons/md";
+
+const Form = ({status}:{status?:any}) => {
+  
+  const {values,setFieldValue} = useFormikContext<any>()
+  console.log(values?.currentModalIndex);
+  const { isOpen, setIsOpen } = useModalState((state) => state);
+  const { setObjectToEdit } = useObjectToEdit();
+  const {t} = useTranslation();
+  const formik = useFormikContext();
+  const handleNext = ()=>{
+    setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 )
+  }
+  const handleCancel = () => {
+    setIsOpen("");
+    setObjectToEdit({});
+  };
+
+  return (
+    values?.currentModalIndex == 0 &&      
+
+    <div className="w-100">
+    <header className="modal_title">
+      <span>
+        {t(`models.add_sales`)}{" "}
+      </span>
+      <MdCancel onClick={handleCancel} />
+    </header>
+    <Divider />
+sac
+      {values?.currentModalIndex}
+      <div className="buttons">
+        <div className="back_button pointer" onClick={handleCancel}>
+          {t("practical.cancel")}
+        </div>
+        <button
+          className="add_button"
+          disabled={status === QueryStatusEnum.LOADING || !formik.dirty}
+          onClick={handleNext}
+          >
+          {t(`practical.search`)}
+          {status === QueryStatusEnum.LOADING && (
+            <span className="Spinier_Div">
+              <Spin />
+            </span>
+          )}
+        </button>
+      </div>  
+    </div>
+  );
+};
+
+export default Form;
diff --git a/src/Pages/ReSeller/Sales/Model/SubmitModelForm.tsx b/src/Pages/ReSeller/Sales/Model/SubmitModelForm.tsx
new file mode 100644
index 0000000..e037a5c
--- /dev/null
+++ b/src/Pages/ReSeller/Sales/Model/SubmitModelForm.tsx
@@ -0,0 +1,62 @@
+import { Col, Row } from "reactstrap";
+import ValidationField from "../../../../Components/ValidationField/ValidationField";
+import useFormatDataToSelect from "../../../../utils/useFormatDataToSelect";
+import { useFormikContext } from "formik";
+import { useModalState } from "../../../../zustand/Modal";
+import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
+import { useTranslation } from "react-i18next";
+import { QueryStatusEnum } from "../../../../enums/QueryStatus";
+import { Divider, Spin } from "antd";
+import { MdCancel } from "react-icons/md";
+
+const Form = ({status}:{status?:any}) => {
+  
+  const {values,setFieldValue} = useFormikContext<any>()
+  console.log(values?.currentModalIndex);
+  const { isOpen, setIsOpen } = useModalState((state) => state);
+  const { setObjectToEdit } = useObjectToEdit();
+  const {t} = useTranslation();
+  const formik = useFormikContext();
+  const handleNext = ()=>{
+    setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 )
+  }
+  const handleCancel = () => {
+    setIsOpen("");
+    setObjectToEdit({});
+  };
+
+  return (
+    values?.currentModalIndex == 1 &&      
+
+    <div className="w-100">
+    <header className="modal_title">
+      <span>
+        {t(`models.are_you_sure_about_sale`)}{" "}
+      </span>
+      <MdCancel onClick={handleCancel} />
+    </header>
+    <Divider />
+
+    {values?.currentModalIndex}
+      <div className="buttons">
+        <div className="back_button pointer" onClick={handleCancel}>
+          {t("practical.cancel")}
+        </div>
+        <button
+          className="add_button"
+          disabled={status === QueryStatusEnum.LOADING || !formik.dirty}
+          onClick={handleNext}
+          >
+          {t(`practical.search`)}
+          {status === QueryStatusEnum.LOADING && (
+            <span className="Spinier_Div">
+              <Spin />
+            </span>
+          )}
+        </button>
+      </div>  
+    </div>
+  );
+};
+
+export default Form;
diff --git a/src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx b/src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx
new file mode 100644
index 0000000..1e5de1c
--- /dev/null
+++ b/src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx
@@ -0,0 +1,72 @@
+import { Col, Row } from "reactstrap";
+import ValidationField from "../../../../Components/ValidationField/ValidationField";
+import useFormatDataToSelect from "../../../../utils/useFormatDataToSelect";
+import { useFormikContext } from "formik";
+import { useModalState } from "../../../../zustand/Modal";
+import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
+import { useTranslation } from "react-i18next";
+import { QueryStatusEnum } from "../../../../enums/QueryStatus";
+import { Divider, Spin } from "antd";
+import { MdCancel } from "react-icons/md";
+
+const Form = ({status}:{status?:any}) => {
+  
+  const {values,setFieldValue} = useFormikContext<any>()
+  console.log(values?.currentModalIndex);
+  const { isOpen, setIsOpen } = useModalState((state) => state);
+  const { setObjectToEdit } = useObjectToEdit();
+  const {t} = useTranslation();
+  const formik = useFormikContext();
+  const handleNext = ()=>{
+    setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 )
+  }
+  const handleCancel = () => {
+    setIsOpen("");
+    setObjectToEdit({});
+  };
+
+  return (
+    values?.currentModalIndex == 1 &&      
+
+    <div className="w-100">
+    <header className="modal_title">
+      <span>
+        {t(`models.`)}{" "}
+      </span>
+      <MdCancel onClick={handleCancel} />
+    </header>
+    <Divider />
+
+    <Row className="w-100">
+      <Col>
+        <ValidationField
+          placeholder="phone_number"
+          label="phone_number"
+          name="phone_number"
+        />
+          <Divider className="margin_auto"/>
+      </Col>
+          {values?.currentModalIndex}
+          <div className="buttons">
+            <div className="back_button pointer" onClick={handleCancel}>
+              {t("practical.cancel")}
+            </div>
+            <button
+              className="add_button"
+              disabled={status === QueryStatusEnum.LOADING || !formik.dirty}
+              onClick={handleNext}
+              >
+              {t(`practical.search`)}
+              {status === QueryStatusEnum.LOADING && (
+                <span className="Spinier_Div">
+                  <Spin />
+                </span>
+              )}
+            </button>
+          </div>  
+      </Row>
+    </div>
+  );
+};
+
+export default Form;
diff --git a/src/Pages/ReSeller/Sales/Model/formUtil.ts b/src/Pages/ReSeller/Sales/Model/formUtil.ts
index d2aa9da..154cb77 100644
--- a/src/Pages/ReSeller/Sales/Model/formUtil.ts
+++ b/src/Pages/ReSeller/Sales/Model/formUtil.ts
@@ -4,10 +4,16 @@ export const getInitialValues = (objectToEdit: any): any => {
   return {
     id: objectToEdit?.id ?? null,
     phone_number: objectToEdit?.phone_number ?? null,
+    currentModalIndex: 0
   };
 };
+
 export const getValidationSchema = () => {
   return Yup.object().shape({
-    phone_number: Yup.number().required("validation.required"),
+    phone_number: Yup.string()
+      .required("Phone number is required")
+      .length(10, "Phone number must be exactly 10 numbers") 
+      .matches(/^\d{10}$/, "Phone number must be a valid 10-number number"),
+    currentModalIndex: Yup.number().max(2)
   });
-};
+};
\ No newline at end of file
diff --git a/src/Pages/ReSeller/Sales/Page.tsx b/src/Pages/ReSeller/Sales/Page.tsx
index f0856a9..cec13a9 100644
--- a/src/Pages/ReSeller/Sales/Page.tsx
+++ b/src/Pages/ReSeller/Sales/Page.tsx
@@ -4,7 +4,6 @@ import { lazy, Suspense } from "react";
 import { Spin } from "antd";
 import { canAddSales } from "../../../utils/hasAbilityFn";
 import useSetPageTitle from "../../../Hooks/useSetPageTitle";
-import { useDeleteTag } from "../../../api/tags";
 import PageHeader from "../../../Layout/Dashboard/PageHeader";
 import FilterLayout from "../../../Layout/Dashboard/FilterLayout";
 import FilterForm from "./Model/FilterForm";
diff --git a/src/Routes.tsx b/src/Routes.tsx
index c8c15e7..0a91cad 100644
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@@ -1,6 +1,8 @@
 import { TCrudRoute, TMenuItem } from "./types/App";
 import { FaCashRegister, FaHome, FaMoneyBill, FaPaperclip, FaSellcast, FaTag, FaUser, FaUserShield } from "react-icons/fa";
 import { GoDotFill } from "react-icons/go";
+import { MdOutlineSell } from "react-icons/md";
+import { CgProfile } from "react-icons/cg";
 import { GrGroup } from "react-icons/gr";
 import React from "react";
 
@@ -182,7 +184,7 @@ export const menuItems: TMenuItem[] = [
   {
     header: "page_header.sales",
     element: <Sales />,
-    icon: <FaSellcast />,
+    icon: <MdOutlineSell />,
     text: "sidebar.sales",
     path: `/${ABILITIES_ENUM?.Sales}`,
     abilities: ABILITIES_ENUM?.Sales,
@@ -193,7 +195,7 @@ export const menuItems: TMenuItem[] = [
   {
     header: "page_header.collections",
     element: <Collections />,
-    icon: <FaSellcast />,
+    icon: <FaMoneyBill  />,
     text: "sidebar.collections",
     path: `/${ABILITIES_ENUM?.Collections}`,
     abilities: ABILITIES_ENUM?.Collections,
@@ -204,7 +206,7 @@ export const menuItems: TMenuItem[] = [
   {
     header: "page_header.profile",
     element: <ProfileReSeller />,
-    icon: <FaSellcast />,
+    icon: <CgProfile />,
     text: "sidebar.profile",
     path: `/${ABILITIES_ENUM?.PROFILE}`,
     abilities: ABILITIES_ENUM?.Profile_RE_SELLER,
@@ -266,7 +268,6 @@ export const CrudRoute: TCrudRoute[] = [
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 2,
   },
-
   {
     header: "page_header.add_reseller",
     element: <AddReSeller />,
diff --git a/src/Styles/Pages/Classes.scss b/src/Styles/Pages/Classes.scss
index 28e5736..caf5093 100644
--- a/src/Styles/Pages/Classes.scss
+++ b/src/Styles/Pages/Classes.scss
@@ -100,4 +100,11 @@
 .transparent_bg{
   background: transparent !important;
   color: #fff !important;
+}
+
+
+.margin_auto{
+  @include Flex;
+  min-width: 100% !important;
+  margin-inline: auto !important;
 }
\ No newline at end of file
diff --git a/src/Styles/Pages/index.scss b/src/Styles/Pages/index.scss
index 3e2a456..e0073ab 100644
--- a/src/Styles/Pages/index.scss
+++ b/src/Styles/Pages/index.scss
@@ -15,3 +15,4 @@
 @import './profile.scss';
 @import './collections.scss';
 @import './setting.scss';
+@import './sales.scss';
diff --git a/src/Styles/Pages/reSeller.scss b/src/Styles/Pages/reSeller.scss
index dafc561..c99df2a 100644
--- a/src/Styles/Pages/reSeller.scss
+++ b/src/Styles/Pages/reSeller.scss
@@ -73,4 +73,13 @@
   .main_form_body{
     border-radius: 10px;
   }
-}
\ No newline at end of file
+}
+
+
+
+
+
+
+
+
+
diff --git a/src/Styles/Pages/sales.scss b/src/Styles/Pages/sales.scss
new file mode 100644
index 0000000..7544b3f
--- /dev/null
+++ b/src/Styles/Pages/sales.scss
@@ -0,0 +1,6 @@
+.reseller_modal_form{
+    width: 100%;
+    .modal_title{
+        height: 5vh;
+    }
+}
\ No newline at end of file
diff --git a/src/Styles/Pages/setting.scss b/src/Styles/Pages/setting.scss
index 9660a5a..463a0f8 100644
--- a/src/Styles/Pages/setting.scss
+++ b/src/Styles/Pages/setting.scss
@@ -52,7 +52,7 @@
 
 
 .setting_tab_header,
-.notification_card,
+.notification_card_setting,
 .security_card {
     display: flex;
     justify-content: space-between;
@@ -87,7 +87,7 @@
     margin-bottom: 30px;
 }
 
-.notification_card{
+.notification_card_setting{
     &:nth-last-child(1) {
         border: none;
     }
diff --git a/src/api/collections.ts b/src/api/collections.ts
index 3546a5c..520c905 100644
--- a/src/api/collections.ts
+++ b/src/api/collections.ts
@@ -6,5 +6,5 @@ const API = {
 
 const KEY = "collections";
 
-export const useGetAllSales = (params?: any, options?: any) =>
+export const useGetAllCollections = (params?: any, options?: any) =>
   useGetQuery(KEY, API.GET, params, options);
diff --git a/src/api/sales.ts b/src/api/sales.ts
index fb15fcf..c99c15d 100644
--- a/src/api/sales.ts
+++ b/src/api/sales.ts
@@ -2,10 +2,11 @@ import useAddMutation from "./helper/useAddMutation";
 import useGetQuery from "./helper/useGetQuery";
 
 const API = {
-  GET: "/sales",
-  ADD: "/sales",
-  DELETE: "/sales",
-  UPDATE: "/sales",
+  GET: "/resellers/studentPackage",
+  ADD: "/resellers/studentPackage",
+  GET_BY_PHONE: "/resellers/studentPackage/student",
+  GET_SUMMERY: "/resellers/studentPackage/summery",
+
 };
 
 const KEY = "sales";
diff --git a/src/translate/ar.json b/src/translate/ar.json
index e2f6fdd..acbdf18 100644
--- a/src/translate/ar.json
+++ b/src/translate/ar.json
@@ -306,7 +306,8 @@
     "Devices associated with the account":"الأجهزة المرتبطة بالحساب",
     "account_activities":"أنشطة الحساب",
     "This will close your account. Your account will be interactive when you log in again":"سيؤدي هذا إلى إغلاق حسابك. سيكون حسابك تفاعليا عند تسجيل الدخول مرة أخرى",
-    "Your account will be permanently deleted":"سيتم حذف حسابك نهائيا"
+    "Your account will be permanently deleted":"سيتم حذف حسابك نهائيا",
+    "search":"بحث"
   },
   "Table": {
     "header": "",
@@ -387,7 +388,9 @@
     "sale":"عملية بيع",
     "collections": "التحصيلات",
     "phone_number":"رقم الهاتف",
-    "email_address":"عنوان البريد الإلكتروني"
+    "email_address":"عنوان البريد الإلكتروني",
+    "add_sales":"إضافة عملية بيع",
+    "are_you_sure_about_sale":"هل أنت متأكد من عملية البيع ؟"
   },
   "education_class_actions": {
     "Student_Records": "سجلات الطلاب",
@@ -516,7 +519,11 @@
     "role":"الدور",
     "submit_password":"تأكيد كلمة المرور",
     "join_date":"تاريخ الانضمام",
-    "verify":"التحقق"
+    "verify":"التحقق",
+    "contact_number1":"رقم الهاتف",
+    "contact_number2":"رقم الهاتف الإضافي",
+    "lat":"الطول",
+    "lng":"العرض"
   },
   "select": {
     "enums": {
@@ -897,7 +904,8 @@
     "collections": "التحصيلات",
     "sales":"المبيعات",
     "edit_manager":"تعديل مدير",
-    "setting":"الإعدادات"
+    "setting":"الإعدادات",
+    "edit_reseller":"تعديل البائع"
   },
   "page_header": {
     "home": "لوحة القيادة",
@@ -963,6 +971,13 @@
     "upload_your_photo_and_personal_data_here":"قم بتحميل صورتك وبياناتك الشخصية هنا",
     "get_notified_of_whats_happening_now_you_can_turn_it_off_at_any_time":"احصل على إشعار بما يحدث الآن ، يمكنك إيقاف تشغيله في أي وقت"
   },
+  "card" : {
+    "residual":"المتبقي",
+    "collected":"تم تحصيله",
+    "company_profit":"المستحقات",
+    "reseller_profit":"نسبة الأرباح (10%)",
+    "total_sells":"إجمالي المبيعات"
+  },
   "alphabet": {
     "A": "A",
     "B": "B",
diff --git a/src/utils/objectToKeyValueArray.ts b/src/utils/objectToKeyValueArray.ts
new file mode 100644
index 0000000..6dc5239
--- /dev/null
+++ b/src/utils/objectToKeyValueArray.ts
@@ -0,0 +1,9 @@
+export function objectToKeyValueArray(obj: { [key: string]: any } | null | undefined): Array<{ key: string; value: any }> {
+    if (!obj) {
+      return [{ key: '', value: '' }]
+    }
+    return Object.entries(obj).map(([key, value]) => ({
+      key,
+      value
+    }));
+  }
\ No newline at end of file