end seller page

add package item
end package
2024-08-19 15:13:54 +03:00 · 2024-08-18 16:07:34 +03:00 · 2024-08-18 15:25:56 +03:00
73 changed files with 5546 additions and 6503 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -10,6 +10,7 @@
    "Groupbutton",
    "handelnavigate",
    "Karim",
+    "latlng",
    "queryqlent",
    "registraion",
    "SENDNOTIFICATION",
--- a/package.json
+++ b/package.json
@ -18,6 +18,7 @@
    "formik": "^2.4.6",
    "html-to-image": "^1.11.11",
    "i18next": "^23.11.5",
+    "leaflet": "^1.9.4",
    "path-to-regexp": "^6.2.2",
    "pdf-lib": "^1.17.1",
    "react": "^18.3.1",
@ -26,6 +27,7 @@
    "react-dragula": "^1.1.17",
    "react-i18next": "^13.5.0",
    "react-icons": "^4.12.0",
+    "react-leaflet": "^4.2.1",
    "react-query": "^3.39.3",
    "react-router-dom": "^6.23.1",
    "react-toastify": "^9.1.3",
@ -66,6 +68,7 @@
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
+    "@types/leaflet": "^1.9.12",
    "@types/node": "^20.14.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/Components/ValidationField/Ui/KarimSpinner.tsx
+++ b/src/Components/ValidationField/Ui/KarimSpinner.tsx
@ -1,24 +0,0 @@
-import React from "react";
-import { Spin } from "antd";
-
-interface Props {
-  loading: boolean;
-  children: React.ReactNode;
-  className?: string;
-}
-
-const KarimSpinner: React.FC<Props> = ({ loading, className, children }) => {
-  return (
-    <div className={className ?? ""}>
-      {loading ? (
-        <div className="text-center">
-          <Spin />
-        </div>
-      ) : (
-        children
-      )}
-    </div>
-  );
-};
-
-export default KarimSpinner;
--- a/src/Components/ValidationField/Ui/SearchBar.scss
+++ b/src/Components/ValidationField/Ui/SearchBar.scss
@ -1,37 +0,0 @@
-.SearchBar {
-  // margin-top: 20px;
-  .group {
-    display: flex;
-    align-items: center;
-    position: relative;
-    max-width: 350px;
-    width: 350px;
-  }
-
-  .input {
-    width: 100%;
-    height: 40px;
-    padding: 0 1rem;
-    padding-left: 2.5rem;
-    border-radius: 8px;
-    outline: none;
-    font-weight: 500;
-    background: var(--bg);
-    color: var(--text);
-    border: none;
-    box-shadow: 2px 2px 7px 0 var(--bg);
-  }
-
-  .input::placeholder {
-    color: var(--subtext);
-    opacity: 0.4;
-  }
-
-  .icon {
-    position: absolute;
-    left: 1rem;
-    fill: var(--subtext);
-    width: 1rem;
-    height: 1rem;
-  }
-}
--- a/src/Components/ValidationField/Ui/SearchBar.tsx
+++ b/src/Components/ValidationField/Ui/SearchBar.tsx
@ -1,45 +0,0 @@
-import React, { useState } from "react";
-import "./SearchBar.scss";
-import { useNavigate, useSearchParams } from "react-router-dom";
-const SearchBar = () => {
-  const [searchQuery, setSearchQuery] = useState("");
-  const [searchParams] = useSearchParams();
-  const navigate = useNavigate();
-
-  const handleChange = (event: any) => {
-    const { value } = event.target;
-    setSearchQuery(value);
-    updateUrlParams(value);
-  };
-
-  const updateUrlParams = (value: any) => {
-    navigate(`?search=${value}`, { replace: true });
-  };
-
-  return (
-    <div className="SearchBar">
-      <div className="group">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          xmlnsXlink="http://www.w3.org/1999/xlink"
-          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1b5stb0 icon"
-          focusable="false"
-          aria-hidden="true"
-          viewBox="0 0 24 24"
-          data-testid="SearchIcon"
-        >
-          <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
-        </svg>
-        <input
-          placeholder="Search Product...."
-          type="search"
-          className="input"
-          value={searchQuery}
-          onChange={handleChange}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default SearchBar;
--- a/src/Components/ValidationField/ValidationField.tsx
+++ b/src/Components/ValidationField/ValidationField.tsx
@ -6,17 +6,16 @@ import {
  File,
  DataRange,
  SelectField,
-  Default,
  CheckboxField,
  MaltyFile,
  SearchField,
  TextField,
  DropFile,
+  Default,
 } from "./View";
 import { ValidationFieldProps, ValidationFieldType } from "./utils/types";
 import LocalSearchField from "./View/LocalSearch";
 import NumberFormate from "./View/NumberFormate";
-import NumberField from "./View/NumberField";

 const components: { [key: string]: React.FC<any> } = {
  Select: SelectField,
@ -31,12 +30,11 @@ const components: { [key: string]: React.FC<any> } = {
  MaltyFile: MaltyFile,
  Checkbox: CheckboxField,
  NumberFormate: NumberFormate,
-  Number: NumberField,
 };

 const ValidationField: React.FC<ValidationFieldProps> = React.memo(
-  ({ type, ...otherProps }: any) => {
-    const Component = components[type as ValidationFieldType];
+  ({ type = "text", ...otherProps }) => {
+    const Component = components[type ?? ("text" as ValidationFieldType)];

    if (!Component) {
      return <Default {...otherProps} />;
--- a/src/Components/ValidationField/View/CheckboxField.tsx
+++ b/src/Components/ValidationField/View/CheckboxField.tsx
@ -1,7 +1,7 @@
 import React from "react";
 import useFormField from "../../../Hooks/useFormField";
-import { Checkbox, Form } from "antd";
-import { getNestedValue } from "../utils/getNestedValue";
+import { Checkbox } from "antd";
+import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
 const CheckboxField = ({
  name,
  label,
@ -13,25 +13,21 @@ const CheckboxField = ({
 }: any) => {
  const { t, formik, isError, errorMsg } = useFormField(name, props);
  const CheckboxhandleChange = (value: any) => {
-    formik.setFieldValue(name, value?.target?.checked ? 1 : 0);
+    formik.setFieldValue(name, value?.target?.checked);
  };

  return (
-    <div className={Group ? "d-inline mt-3 Checkboxs" : ``}>
-      <Form.Item
-        hasFeedback
-        validateStatus={isError ? "error" : ""}
-        help={isError ? errorMsg : ""}
-      >
+    <div className={Group ? "d-inline mt-3 Checkbox" : ``}>
+      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
        <Checkbox
          onChange={onChange || CheckboxhandleChange}
          disabled={isDisabled}
-          checked={formik.values?.[name] === 1}
+          checked={formik.values?.[name] ?? false}
          className={className}
        >
          {t(`input.${label ? label : name}`)}
        </Checkbox>
-      </Form.Item>
+      </ValidationFieldContainer>
    </div>
  );
 };
--- a/src/Components/ValidationField/View/DataRange.tsx
+++ b/src/Components/ValidationField/View/DataRange.tsx
@ -3,6 +3,8 @@ import { Form, DatePicker } from "antd";
 import React from "react";
 import useFormField from "../../../Hooks/useFormField";
 import { MdOutlineEdit } from "react-icons/md";
+import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
+import { ValidationFieldContainer } from "../components/ValidationFieldContainer";

 const { RangePicker } = DatePicker;

@ -24,28 +26,16 @@ const DataRange = ({
  };
  return (
    <div className="ValidationField w-100 ">
-      {no_label ? (
-        <label htmlFor={name} className="text">
-          <span>empty</span>
-        </label>
-      ) : label_icon ? (
-        <div className="LabelWithIcon">
-          <label htmlFor={name} className="text">
-            {t(`input.${label ? label : name}`)}
-          </label>
-          <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
-        </div>
-      ) : (
-        <label htmlFor={name} className="text">
-          {t(`input.${label ? label : name}`)}
-        </label>
-      )}
+      <ValidationFieldLabel
+        name={name}
+        label={label}
+        label_icon={label_icon}
+        no_label={no_label}
+        placeholder={placeholder}
+        t={t}
+      />

-      <Form.Item
-        hasFeedback
-        validateStatus={isError ? "error" : ""}
-        help={isError ? errorMsg : ""}
-      >
+      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
        <RangePicker
          placeholder={placeholder}
          size="large"
@ -55,8 +45,9 @@ const DataRange = ({
          onChange={onChange || onCalendarChange}
          disabled={isDisabled}
          defaultValue={formik.values[name]}
+          id={name}
        />
-      </Form.Item>
+      </ValidationFieldContainer>
    </div>
  );
 };
--- a/src/Components/ValidationField/View/Date.tsx
+++ b/src/Components/ValidationField/View/Date.tsx
@ -3,6 +3,9 @@ import React from "react";
 import useFormField from "../../../Hooks/useFormField";
 import { MdOutlineEdit } from "react-icons/md";
 import dayjs from "dayjs";
+import { DateEnum } from "../../../enums/Date";
+import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
+import { ValidationFieldContainer } from "../components/ValidationFieldContainer";

 const Date = ({
  name,
@ -21,34 +24,21 @@ const Date = ({
  const FormikValue = formik.values[name];
  const onCalendarChange = (value: any) => {
    formik.setFieldValue(name, value);
-    // console.log(value,"value ");
  };

-  const Formater = "YYYY/MM/DD";
+  const Formatter = [DateEnum?.FORMATE, DateEnum?.FORMATE2];
  return (
    <div className="ValidationField w-100 ">
-      {no_label ? (
-        <label htmlFor={name} className="text">
-          <span>empty</span>
-        </label>
-      ) : label_icon ? (
-        <div className="LabelWithIcon">
-          <label htmlFor={name} className="text">
-            {t(`input.${label ? label : name}`)}
-          </label>
-          <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
-        </div>
-      ) : (
-        <label htmlFor={name} className="text">
-          {t(`input.${label ? label : name}`)}
-        </label>
-      )}
+      <ValidationFieldLabel
+        name={name}
+        label={label}
+        label_icon={label_icon}
+        no_label={no_label}
+        placeholder={placeholder}
+        t={t}
+      />

-      <Form.Item
-        hasFeedback
-        validateStatus={isError ? "error" : ""}
-        help={isError ? errorMsg : ""}
-      >
+      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
        <DatePicker
          picker={picker}
          placeholder={t(`input.${placeholder}`)}
@ -58,10 +48,11 @@ const Date = ({
          size="large"
          onChange={onChange || onCalendarChange}
          disabled={isDisabled}
-          format={Formater}
+          format={Formatter}
+          id={name}
        />
        {/* <DatePicker onChange={onChange} /> */}
-      </Form.Item>
+      </ValidationFieldContainer>
    </div>
  );
 };
--- a/src/Components/ValidationField/View/Default.tsx
+++ b/src/Components/ValidationField/View/Default.tsx
@ -1,9 +1,10 @@
-import { Form, Input } from "antd";
+import { Input } from "antd";
 import React from "react";
 import useFormField from "../../../Hooks/useFormField";
-import { MdOutlineEdit } from "react-icons/md";
 import { Field } from "formik";
-import { ValidationFieldPropsInput } from "../utils/types";
+import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
+import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
+import { FieldProps } from "../utils/types";

 const Default = ({
  name,
@ -14,52 +15,34 @@ const Default = ({
  type,
  no_label,
  label_icon,
-  label2,
  ...props
-}: ValidationFieldPropsInput) => {
+}: any) => {
  const { errorMsg, isError, t } = useFormField(name, props);

  return (
    <div className="ValidationField w-100">
-      {label2 ? (
-        <label htmlFor={name} className="text">
-          {label2}
-        </label>
-      ) : no_label ? (
-        <label htmlFor={name} className="text">
-          <span>empty</span>
-        </label>
-      ) : label_icon ? (
-        <div className="LabelWithIcon">
-          <label htmlFor={name} className="text">
-            {t(`input.${label ? label : name}`)}
-          </label>
-          <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
-        </div>
-      ) : (
-        <label htmlFor={name} className="text">
-          {t(`input.${label ? label : placeholder ? placeholder : name}`)}
-        </label>
-      )}
+      <ValidationFieldLabel
+        name={name}
+        label={label}
+        label_icon={label_icon}
+        no_label={no_label}
+        placeholder={placeholder}
+        t={t}
+      />

-      <Form.Item
-        hasFeedback
-        validateStatus={isError ? "error" : ""}
-        help={isError ? errorMsg : ""}
-      >
+      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
        <Field
          as={Input}
          type={type ?? "text"}
-          placeholder={t(
-            `input.${placeholder ? placeholder : label ? label : name}`,
-          )}
+          placeholder={t(`input.${placeholder || label || name}`)}
          name={name}
+          id={name}
          disabled={isDisabled}
          size="large"
          {...(type === "number" && { min: 0 })}
          {...props}
        />
-      </Form.Item>
+      </ValidationFieldContainer>
    </div>
  );
 };
--- a/src/Components/ValidationField/View/DropFile.tsx.tsx
+++ b/src/Components/ValidationField/View/DropFile.tsx.tsx
@ -3,7 +3,6 @@ import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
 import { message, Upload } from "antd";
 import type { GetProp, UploadProps } from "antd";
 import useFormField from "../../../Hooks/useFormField";
-import { ImageBaseURL } from "../../../api/config";

 type FileType = Parameters<GetProp<UploadProps, "beforeUpload">>[0];

@ -12,7 +11,7 @@ const DropFile = ({
  label,
  onChange,
  isDisabled,
-  placholder,
+  placeholder,
  className,
  props,
  no_label,
@ -23,7 +22,7 @@ const DropFile = ({

  const FormikValue =
    typeof FormikName === "string"
-      ? ImageBaseURL + FormikName
+      ? FormikName
      : FormikName instanceof File
        ? URL.createObjectURL(FormikName)
        : "";
@ -71,6 +70,7 @@ const DropFile = ({
        showUploadList={false}
        customRequest={customRequest}
        onChange={onChange || handleChange}
+        id={name}
      >
        {imageUrl ? (
          <img
--- a/src/Components/ValidationField/View/File.tsx
+++ b/src/Components/ValidationField/View/File.tsx
@ -1,14 +1,14 @@
 import { Button, Upload, UploadFile } from "antd";
 import useFormField from "../../../Hooks/useFormField";
 import { UploadOutlined } from "@ant-design/icons";
-import { useMemo } from "react";
+import React, { useMemo } from "react";

 const File = ({
  name,
  label,
  onChange,
  isDisabled,
-  placholder,
+  placeholder,
  className,
  props,
 }: any) => {
@ -16,29 +16,29 @@ const File = ({
  let imageUrl = formik?.values?.[name] ?? null;

  const fileList: UploadFile[] = useMemo(() => {
-    if (!imageUrl) return [];
+    if (!imageUrl) {
+      return [];
+    }

    return [
      typeof imageUrl === "string"
        ? {
            uid: "-1",
-            name: "uploaded-image",
+            name: "",
            status: "done",
            url: imageUrl,
            thumbUrl: imageUrl,
          }
        : {
            uid: imageUrl.uid || "-1",
-            name: imageUrl.name || "uploaded-image",
+            name: imageUrl.name || "",
            status: "done",
            originFileObj: imageUrl,
          },
    ];
  }, [imageUrl]);
-  // console.log(1);

  const FilehandleChange = (value: any) => {
-    // console.log(value,"filevalue");
    if (value.fileList.length === 0) {
      formik.setFieldValue(name, null);
    } else {
@ -62,12 +62,15 @@ const File = ({
        onChange={onChange || FilehandleChange}
        customRequest={customRequest}
        className={` w-100`}
+        id={name}
      >
        <Button
          className={isError ? "isError w-100 " : " w-100"}
          icon={<UploadOutlined />}
        >
-          {placholder ?? t("input.Click_to_upload_the_image")}
+          {placeholder
+            ? t(`input.${placeholder}`)
+            : t("input.Click_to_upload_the_image")}
        </Button>
        <div className="Error_color"> {isError ? "required" : ""}</div>
        {errorMsg}
@ -76,4 +79,4 @@ const File = ({
  );
 };

-export default File;
+export default React.memo(File);
--- a/src/Components/ValidationField/View/LocalSearch.tsx
+++ b/src/Components/ValidationField/View/LocalSearch.tsx
@ -1,8 +1,9 @@
-import { Form, Select } from "antd";
+import { Select } from "antd";
 import React, { useState } from "react";
 import useFormField from "../../../Hooks/useFormField";
-import { MdOutlineEdit } from "react-icons/md";
 import { translateOptions } from "../utils/translatedOptions";
+import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
+import { ValidationFieldContainer } from "../components/ValidationFieldContainer";

 const LocalSelectField = ({
  name,
@ -13,9 +14,9 @@ const LocalSelectField = ({
  isMulti,
  onChange,
  className,
-  props,
  no_label,
  label_icon,
+  ...props
 }: any) => {
  const { errorMsg, isError, t, formik } = useFormField(name, props);

@ -29,13 +30,6 @@ const LocalSelectField = ({
    option?.label?.toString().toLowerCase().includes(input.toLowerCase()) ||
    option?.value?.toString().toLowerCase().includes(input.toLowerCase());

-  const SelectableChange = (value: {
-    value: string;
-    label: React.ReactNode;
-  }) => {
-    formik.setFieldValue(name, value);
-  };
-
  const handleSelectChange = (value: any) => {
    formik.setFieldValue(name, value);
    if (onChange) onChange(value);
@ -47,35 +41,21 @@ const LocalSelectField = ({

  return (
    <div className="ValidationField w-100">
-      {no_label ? (
-        <label htmlFor={name} className="text">
-          <span>empty</span>
-        </label>
-      ) : label_icon ? (
-        <div className="LabelWithIcon">
-          <label htmlFor={name} className="text">
-            {t(`input.${label ? label : name}`)}
-          </label>
-          <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
-        </div>
-      ) : (
-        <label htmlFor={name} className="text">
-          {t(`input.${label ? label : name}`)}
-        </label>
-      )}
-      <Form.Item
-        hasFeedback
-        validateStatus={isError ? "error" : ""}
-        help={isError ? errorMsg : ""}
-      >
+      <ValidationFieldLabel
+        name={name}
+        label={label}
+        label_icon={label_icon}
+        no_label={no_label}
+        placeholder={placeholder}
+        t={t}
+      />
+      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
        <Select
-          placeholder={t(
-            `input.${placeholder ? placeholder : label ? label : name}`,
-          )}
+          placeholder={t(`input.${placeholder || label || name}`)}
          disabled={isDisabled}
          options={translateOptions(option, t)}
          size="large"
-          className={`${className} ${isError ? "Select_error" : ""} w-100`}
+          className={`${className} ${isError ? "SelectError" : ""} w-100`}
          value={formik.values[name]}
          allowClear
          {...(isMulti && { mode: "multiple" })}
@ -84,8 +64,11 @@ const LocalSelectField = ({
          filterOption={handleSearch} // Custom filter function
          searchValue={searchValue} // Control the search input value
          onSearch={handleSearchChange} // Update search input value on change
+          id={name}
+          fieldNames={{ label: "name", value: "id" }}
+          {...props}
        />
-      </Form.Item>
+      </ValidationFieldContainer>
    </div>
  );
 };
--- a/src/Components/ValidationField/View/MaltyFile.tsx
+++ b/src/Components/ValidationField/View/MaltyFile.tsx
@ -1,6 +1,6 @@
+import React, { useMemo } from "react";
 import { Button, Upload } from "antd";
 import { UploadOutlined } from "@ant-design/icons";
-
 import useFormField from "../../../Hooks/useFormField";

 const MaltyFile = ({
@ -15,28 +15,28 @@ const MaltyFile = ({
  const { formik, t, isError } = useFormField(name, props);
  let imageUrl = formik?.values?.[name] ?? null;

-  // Mapping formik values to fileList format
-  const fileList = imageUrl
-    ? imageUrl.map((file: any, index: number) => {
-        // console.log(file,"file");
-
-        return file instanceof File
-          ? {
-              uid: index,
-              name: file?.name,
-              status: "done",
-              originFileObj: file,
-            }
-          : {
-              uid: index,
-              id: file?.id,
-              name: file?.name,
-              status: "done",
-              url: file?.url || "",
-              thumbUrl: file?.url || "",
-            };
-      })
-    : [];
+  // Memoizing the fileList to prevent unnecessary recalculations
+  const fileList = useMemo(() => {
+    return imageUrl
+      ? imageUrl.map((file: any, index: number) => {
+          return file instanceof File
+            ? {
+                uid: index,
+                name: file?.name,
+                status: "done",
+                originFileObj: file,
+              }
+            : {
+                uid: index,
+                id: file?.id,
+                name: file?.name,
+                status: "done",
+                url: file?.url || "",
+                thumbUrl: file?.url || "",
+              };
+        })
+      : [];
+  }, [imageUrl]); // Dependency array ensures it recalculates only when imageUrl changes

  const FilehandleChange = ({ fileList }: any) => {
    if (fileList.length === 0) {
@ -48,6 +48,7 @@ const MaltyFile = ({
      );
    }
  };
+
  // Custom request function
  const customRequest = async ({ onSuccess }: any) => {
    // Perform any necessary actions before onSuccess is called
@ -63,19 +64,20 @@ const MaltyFile = ({
      <Upload
        disabled={isDisabled}
        listType="picture"
-        fileList={fileList} // Using fileList instead of defaultFileList
+        fileList={fileList} // Using memoized fileList
        onChange={onChange || FilehandleChange}
        customRequest={customRequest}
        className={`${className} w-100`}
        multiple // Allow multiple files to be selected
+        id={name}
      >
        <Button
-          className={isError ? "isError w-100" : " w-100"}
+          className={isError ? "isError w-100" : "w-100"}
          icon={<UploadOutlined />}
        >
          {t(`input.` + placeholder) ?? t("input.upload_image")}
        </Button>
-        <div className="Error_color"> {isError ? "required" : ""}</div>
+        <div className="Error_color">{isError ? "required" : ""}</div>
      </Upload>
    </div>
  );
--- a/src/Components/ValidationField/View/NumberField.tsx
+++ b/src/Components/ValidationField/View/NumberField.tsx
@ -1,70 +0,0 @@
-import { Form, Input, InputNumber } from "antd";
-import React from "react";
-import useFormField from "../../../Hooks/useFormField";
-import { MdOutlineEdit } from "react-icons/md";
-import { Field } from "formik";
-import { ValidationFieldPropsInput } from "../utils/types";
-
-const NumberField = ({
-  name,
-  label,
-  placeholder,
-  isDisabled,
-  onChange,
-  type,
-  no_label,
-  label_icon,
-  ...props
-}: ValidationFieldPropsInput) => {
-  const { errorMsg, isError, t, formik } = useFormField(name, props);
-
-  const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    console.log("Change:", e);
-    formik.setFieldValue(name, e);
-  };
-
-  return (
-    <div className="ValidationField w-100">
-      {no_label ? (
-        <label htmlFor={name} className="text">
-          <span>empty</span>
-        </label>
-      ) : label_icon ? (
-        <div className="LabelWithIcon">
-          <label htmlFor={name} className="text">
-            {t(`input.${label ? label : name}`)}
-          </label>
-          <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
-        </div>
-      ) : (
-        <label htmlFor={name} className="text">
-          {t(`input.${label ? label : placeholder ? placeholder : name}`)}
-        </label>
-      )}
-
-      <Form.Item
-        hasFeedback
-        validateStatus={isError ? "error" : ""}
-        help={isError ? errorMsg : ""}
-      >
-        <Field
-          as={InputNumber}
-          type={type ?? "text"}
-          placeholder={t(
-            `input.${placeholder ? placeholder : label ? label : name}`,
-          )}
-          name={name}
-          disabled={isDisabled}
-          size="large"
-          onChange={handleChange}
-          {...(type === "number" && { min: 0 })}
-          {...props}
-        />
-      </Form.Item>
-    </div>
-  );
-};
-
-export default React.memo(NumberField);
--- a/src/Components/ValidationField/View/NumberFormate.tsx
+++ b/src/Components/ValidationField/View/NumberFormate.tsx
@ -1,18 +1,19 @@
-import { Form, Input, InputNumber } from "antd";
+import { InputNumber } from "antd";
 import React from "react";
 import useFormField from "../../../Hooks/useFormField";
-import { MdOutlineEdit } from "react-icons/md";
 import { Field } from "formik";
+import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
+import { ValidationFieldContainer } from "../components/ValidationFieldContainer";

 const NumberFormate = ({
  name,
  label,
  placeholder,
  isDisabled,
-  props,
  type,
  no_label,
  label_icon,
+  ...props
 }: any) => {
  const { errorMsg, isError, t, formik } = useFormField(name, props);
  const SelectableChange = (value: {
@ -23,28 +24,15 @@ const NumberFormate = ({
  };
  return (
    <div className="ValidationField w-100">
-      {no_label ? (
-        <label htmlFor={name} className="text">
-          <span>empty</span>
-        </label>
-      ) : label_icon ? (
-        <div className="LabelWithIcon">
-          <label htmlFor={name} className="text">
-            {t(`input.${label ? label : name}`)}
-          </label>
-          <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
-        </div>
-      ) : (
-        <label htmlFor={name} className="text">
-          {t(`input.${label ? label : placeholder ? placeholder : name}`)}
-        </label>
-      )}
-
-      <Form.Item
-        hasFeedback
-        validateStatus={isError ? "error" : ""}
-        help={isError ? errorMsg : ""}
-      >
+      <ValidationFieldLabel
+        name={name}
+        label={label}
+        label_icon={label_icon}
+        no_label={no_label}
+        placeholder={placeholder}
+        t={t}
+      />
+      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
        <Field
          as={InputNumber}
          formatter={(value: any) =>
@ -57,16 +45,16 @@ const NumberFormate = ({
          type={type ?? "text"}
          value={formik.values[name]}
          onChange={SelectableChange}
-          placeholder={t(
-            `input.${placeholder ? placeholder : label ? label : name}`,
-          )}
+          placeholder={t(`input.${placeholder || label || name}`)}
          name={name}
          disabled={isDisabled}
          size="large"
+          id={name}
+          {...props}

          //  onChange={onChange ? onChange : handleChange}
        />
-      </Form.Item>
+      </ValidationFieldContainer>
    </div>
  );
 };
--- a/src/Components/ValidationField/View/SearchField.tsx
+++ b/src/Components/ValidationField/View/SearchField.tsx
@ -1,87 +1,143 @@
-import { Form, Select, Spin } from "antd";
+import { Select, Spin } from "antd";
 import React, { useEffect, useState } from "react";
 import useFormField from "../../../Hooks/useFormField";
-import { useNavigate } from "react-router-dom";
-import { MdOutlineEdit } from "react-icons/md";
+import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
+import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
+import { SearchFieldProps } from "../utils/types";
+import { useValidationValidationParamState } from "../state/ValidationValidationParamState";
+import { useDebounce } from "../../../Hooks/useDebounce";

 const SearchField = ({
  name,
  label,
  placeholder,
  isDisabled,
-  searchBy,
-  option,
+  searchBy = "search",
+  option = [],
  isMulti,
  onChange,
  className,
-  props,
  no_label,
  label_icon,
  isLoading,
-}: any) => {
+  canChangePage,
+  PageName,
+  page,
+  ...props
+}: SearchFieldProps) => {
  const { errorMsg, isError, t, formik } = useFormField(name, props);
-  const [searchQuery, setSearchQuery] = useState<string>("");
-  const navigate = useNavigate();
-  useEffect(() => {
-    const searchParams = new URLSearchParams(window?.location?.search);
-    setSearchQuery(searchParams?.get("search") || "");
-  }, []);
+  const { pushValidationParamState, setValidationParamState } =
+    useValidationValidationParamState();

-  const SelectableChange = (value: {
-    value: string;
-    label: React.ReactNode;
-  }) => {
+  const [AllPagesOption, setAllPagesOption] = useState<any>([]);
+
+  useEffect(() => {
+    if (option?.length > 0) {
+      const NewOption = [...option, ...AllPagesOption];
+      const FilteredOption = NewOption.filter(
+        (value, index, self) =>
+          index === self.findIndex((t) => t.id === value.id),
+      );
+      const sortedNewOption = FilteredOption.sort((a, b) => a.id - b.id);
+      setAllPagesOption(sortedNewOption);
+    }
+  }, [option]);
+  useEffect(() => {
+    if (page === 1) {
+      setAllPagesOption(option);
+    }
+  }, [page]);
+
+  const SelectableChange = (value: any) => {
    formik?.setFieldValue(name, value);
+    const isCleared = value?.length === 0 || !value;
+
+    if (isCleared) {
+      if (PageName) {
+        setValidationParamState({
+          [PageName]: 1,
+        });
+      }
+    }
+    console.log(value, "value");
  };
-  const SearchHandleChange = (value: any) => {
-    navigate(`${window?.location?.pathname}?${searchBy}=${value}`, {
-      replace: true,
+
+  const handleChange = useDebounce((value: string) => {
+    if (PageName) {
+      pushValidationParamState({
+        [PageName]: 1,
+      });
+    }
+    pushValidationParamState({
+      [searchBy]: value,
    });
+  });
+
+  const handleBlur = () => {
+    if (PageName && page === 1) {
+      setValidationParamState({
+        [PageName]: null,
+      });
+    }
+    if (PageName && page !== 1) {
+      setValidationParamState({
+        [PageName]: 1,
+      });
+      // setAllPagesOption([]);
+    }
  };

+  const handleScroll = (event: any) => {
+    const target = event.target;
+    const isAtBottom =
+      target.scrollHeight === target.scrollTop + target.clientHeight;
+
+    if (isAtBottom && canChangePage && PageName && page) {
+      console.log("Scrolled to the last option!");
+      let newPage = page + 1;
+      pushValidationParamState({
+        [PageName]: newPage,
+      });
+    }
+  };
+
+  console.log(AllPagesOption);
+    console.log(option,"option");
+    
+
  return (
-    <div className="ValidationField w-100 ">
-      {no_label ? (
-        <label htmlFor={name} className="text">
-          <span>empty</span>
-        </label>
-      ) : label_icon ? (
-        <div className="LabelWithIcon">
-          <label htmlFor={name} className="text">
-            {t(`input.${label ? label : name}`)}
-          </label>
-          <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
-        </div>
-      ) : (
-        <label htmlFor={name} className="text">
-          {t(`input.${label ? label : name}`)}
-        </label>
-      )}
-
-      <Form.Item
-        hasFeedback
-        validateStatus={isError ? "error" : ""}
-        help={isError ? errorMsg : ""}
-      >
+    <div className="ValidationField w-100">
+      <ValidationFieldLabel
+        name={name}
+        label={label}
+        label_icon={label_icon}
+        no_label={no_label}
+        placeholder={placeholder}
+        t={t}
+      />
+      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
        <Select
-          placeholder={t(
-            `input.${placeholder ? placeholder : label ? label : name}`,
-          )}
+          placeholder={t(`input.${placeholder || label || name}`)}
          disabled={isDisabled}
-          options={option}
+          options={AllPagesOption}
          size="large"
          className={`${className} w-100`}
          value={formik.values[name]}
-          loading={isLoading}
+          // loading={isLoading}
          allowClear
          {...(isMulti && { mode: "multiple" })}
          onChange={onChange || SelectableChange}
          showSearch
-          optionFilterProp="label"
-          notFoundContent={isLoading ? <Spin /> : "لا يوجد"}
-          onSearch={SearchHandleChange}
+          optionFilterProp="name"
+          notFoundContent={isLoading ? <Spin /> : t("validation.undefined")}
+          onSearch={handleChange}
+          onBlur={handleBlur}
+          id={name}
+          onPopupScroll={handleScroll}
+          fieldNames={{ label: "name", value: "id" }}
+          {...props}
        />
-      </Form.Item>
+      </ValidationFieldContainer>
    </div>
  );
 };
--- a/src/Components/ValidationField/View/SelectField.tsx
+++ b/src/Components/ValidationField/View/SelectField.tsx
@ -1,8 +1,10 @@
-import { Form, Select, Spin } from "antd";
+import { Select } from "antd";
 import React from "react";
 import useFormField from "../../../Hooks/useFormField";
-import { MdOutlineEdit } from "react-icons/md";
 import { translateOptions } from "../utils/translatedOptions";
+import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
+import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
+import { SelectFieldProps } from "../utils/types";

 const SelectField = ({
  name,
@ -13,10 +15,11 @@ const SelectField = ({
  isMulti,
  onChange,
  className,
-  props,
  no_label,
  label_icon,
-}: any) => {
+  isLoading,
+  ...props
+}: SelectFieldProps) => {
  const { errorMsg, isError, t, formik } = useFormField(name, props);
  const SelectableChange = (value: {
    value: string;
@ -24,47 +27,36 @@ const SelectField = ({
  }) => {
    formik.setFieldValue(name, value);
  };
-  // console.log(name,"Select");
-
+  const options = translateOptions(option, t);
  return (
    <div className="ValidationField w-100">
-      {no_label ? (
-        <label htmlFor={name} className="text">
-          <span>empty</span>
-        </label>
-      ) : label_icon ? (
-        <div className="LabelWithIcon">
-          <label htmlFor={name} className="text">
-            {t(`input.${label ? label : name}`)}
-          </label>
-          <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
-        </div>
-      ) : (
-        <label htmlFor={name} className="text">
-          {t(`input.${label ? label : name}`)}
-        </label>
-      )}
+      <ValidationFieldLabel
+        name={name}
+        label={label}
+        label_icon={label_icon}
+        no_label={no_label}
+        placeholder={placeholder}
+        t={t}
+      />

-      <Form.Item
-        hasFeedback
-        validateStatus={isError ? "error" : ""}
-        help={isError ? errorMsg : ""}
-      >
+      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
        <Select
-          placeholder={t(
-            `input.${placeholder ? placeholder : label ? label : name}`,
-          )}
+          placeholder={t(`input.${placeholder || label || name}`)}
          disabled={isDisabled}
-          options={translateOptions(option, t)}
-          loading={option?.length < 1}
+          options={options}
+          {...(isLoading && { loading: isLoading })}
          size="large"
-          className={`${className} ${isError ? "Select_error" : ""} w-100`}
+          className={`${className} ${isError ? "SelectError" : ""} w-100`}
          value={formik.values[name]}
          allowClear
          {...(isMulti && { mode: "multiple" })}
          onChange={onChange || SelectableChange}
+          showSearch={false}
+          id={name}
+          fieldNames={{label:"name",value:"id"}}
+          {...props}
        />
-      </Form.Item>
+      </ValidationFieldContainer>
    </div>
  );
 };
--- a/src/Components/ValidationField/View/TextAreaField.tsx
+++ b/src/Components/ValidationField/View/TextAreaField.tsx
@ -1,7 +1,8 @@
-import { Form, Input } from "antd";
+import { Input } from "antd";
 import React from "react";
 import useFormField from "../../../Hooks/useFormField";
 import { Field } from "formik";
+import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
 const { TextArea } = Input;

 const TextAreaField = ({
@ -11,14 +12,12 @@ const TextAreaField = ({
  isDisabled,
  onChange,
  props,
-  type,
 }: any) => {
  const { formik, isError, errorMsg, t } = useFormField(name, props);

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
  ) => {
-    // console.log('Change:', e.target.value);
    formik.setFieldValue(name, e.target.value);
  };

@ -27,11 +26,7 @@ const TextAreaField = ({
      <label htmlFor={name} className="text">
        {t(`input.${label ? label : name}`)}
      </label>
-      <Form.Item
-        hasFeedback
-        validateStatus={isError ? "error" : ""}
-        help={isError ? errorMsg : ""}
-      >
+      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
        <Field
          as={TextArea}
          placeholder={t(`input.${placeholder ? placeholder : name}`)}
@ -39,10 +34,10 @@ const TextAreaField = ({
          disabled={isDisabled}
          size="large"
          onChange={onChange || handleChange}
-
+          id={name}
          //  onChange={onChange ? onChange : handleChange}
        />
-      </Form.Item>
+      </ValidationFieldContainer>
    </div>
  );
 };
--- a/src/Components/ValidationField/View/TextField.tsx
+++ b/src/Components/ValidationField/View/TextField.tsx
@ -3,6 +3,8 @@ import React from "react";
 import useFormField from "../../../Hooks/useFormField";
 import { MdOutlineEdit } from "react-icons/md";
 import { Field } from "formik";
+import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
+import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
 const { TextArea } = Input;

 const TextField = ({
@ -21,33 +23,20 @@ const TextField = ({
  const TextFilehandleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
  ) => {
-    // console.log('Change:', e.target.value);
    formik.setFieldValue(name, e.target.value);
  };
  return (
    <div className={`ValidationField w-100 ${className ?? ""} `}>
-      {no_label ? (
-        <label htmlFor={name} className="text">
-          <span>empty</span>
-        </label>
-      ) : label_icon ? (
-        <div className="LabelWithIcon">
-          <label htmlFor={name} className="text">
-            {label2 ? label2 : t(`input.${label ? label : name}`)}
-          </label>
-          <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
-        </div>
-      ) : (
-        <label htmlFor={name} className="text">
-          {label2 ? label2 : t(`input.${label ? label : name}`)}
-        </label>
-      )}
+      <ValidationFieldLabel
+        name={name}
+        label={label}
+        label_icon={label_icon}
+        no_label={no_label}
+        placeholder={placeholder}
+        t={t}
+      />

-      <Form.Item
-        hasFeedback
-        validateStatus={isError ? "error" : ""}
-        help={isError ? errorMsg : ""}
-      >
+      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
        <Field
          as={TextArea}
          placeholder={t(`input.${placeholder ? placeholder : name}`)}
@ -58,8 +47,9 @@ const TextField = ({
          maxLength={1000}
          onChange={onChange || TextFilehandleChange}
          style={{ height: 120 }}
+          id={name}
        />
-      </Form.Item>
+      </ValidationFieldContainer>
    </div>
  );
 };
--- a/src/Components/ValidationField/View/Time.tsx
+++ b/src/Components/ValidationField/View/Time.tsx
@ -3,6 +3,7 @@ import React from "react";
 import useFormField from "../../../Hooks/useFormField";
 import { MdOutlineEdit } from "react-icons/md";
 import dayjs from "dayjs";
+import { ValidationFieldLabel } from "../components/ValidationFieldLabel";

 const Time = ({
  name,
@ -20,27 +21,19 @@ const Time = ({
    formik.setFieldValue(name, value);
  };

-  const Formater = "H:mm";
+  const Formatter = "H:mm";
  const FormikValue = formik.values[name];

  return (
    <div className="ValidationField w-100 ">
-      {no_label ? (
-        <label htmlFor={name} className="text">
-          <span>empty</span>
-        </label>
-      ) : label_icon ? (
-        <div className="LabelWithIcon">
-          <label htmlFor={name} className="text">
-            {t(`input.${label ? label : name}`)}
-          </label>
-          <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
-        </div>
-      ) : (
-        <label htmlFor={name} className="text">
-          {t(`input.${label ? label : name}`)}
-        </label>
-      )}
+      <ValidationFieldLabel
+        name={name}
+        label={label}
+        label_icon={label_icon}
+        no_label={no_label}
+        placeholder={placeholder}
+        t={t}
+      />

      <Form.Item
        hasFeedback
@ -51,14 +44,13 @@ const Time = ({
          allowClear
          className={`${className} w-100`}
          size="large"
-          value={FormikValue ? dayjs(FormikValue, Formater) : null}
+          value={FormikValue ? dayjs(FormikValue, Formatter) : null}
          onChange={onChange || onCalendarChange}
          disabled={isDisabled}
-          placeholder={t(
-            `input.${placeholder ? placeholder : label ? label : name}`,
-          )}
-          format={Formater}
+          placeholder={t(`input.${placeholder || label || name}`)}
+          format={Formatter}
          needConfirm={false}
+          id={name}
        />
      </Form.Item>
    </div>
--- a/src/Components/ValidationField/components/ValidationFieldContainer.tsx
+++ b/src/Components/ValidationField/components/ValidationFieldContainer.tsx
@ -0,0 +1,24 @@
+import React, { FC } from "react";
+import { Form } from "antd";
+
+interface ValidationFieldContainerProps {
+  children: React.ReactNode;
+  isError: boolean;
+  errorMsg: string;
+}
+
+export const ValidationFieldContainer: FC<ValidationFieldContainerProps> = ({
+  children,
+  isError,
+  errorMsg,
+}) => (
+  <div className="ValidationFieldContainer">
+    <Form.Item
+      hasFeedback
+      validateStatus={isError ? "error" : ""}
+      help={isError ? errorMsg : ""}
+    >
+      {children}
+    </Form.Item>
+  </div>
+);
--- a/src/Components/ValidationField/components/ValidationFieldLabel.tsx
+++ b/src/Components/ValidationField/components/ValidationFieldLabel.tsx
@ -0,0 +1,39 @@
+import React from "react";
+import { MdOutlineEdit } from "react-icons/md";
+
+interface ValidationFieldLabelProps {
+  name: string;
+  label?: string;
+  no_label?: boolean;
+  label_icon?: boolean;
+  placeholder?: string;
+  t: (key: string) => string;
+}
+
+export const ValidationFieldLabel: React.FC<ValidationFieldLabelProps> = ({
+  name,
+  label,
+  placeholder,
+  no_label,
+  label_icon,
+  t,
+}) => (
+  <>
+    {no_label ? (
+      <label htmlFor={name} className="text">
+        <span>empty</span>
+      </label>
+    ) : label_icon ? (
+      <div className="LabelWithIcon">
+        <label htmlFor={name} className="text">
+          {t(`input.${label ? label : name}`)}
+        </label>
+        <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
+      </div>
+    ) : (
+      <label htmlFor={name} className="text">
+        {t(`input.${label ? label : name}`)}
+      </label>
+    )}
+  </>
+);
--- a/src/Components/ValidationField/index.tsx
+++ b/src/Components/ValidationField/index.tsx
@ -2,7 +2,6 @@ import { useState } from "react";
 import { ErrorMessage, useField, Field, useFormikContext } from "formik";
 import { useTranslation } from "react-i18next";
 import { FaExclamationCircle } from "react-icons/fa";
-import { convert_data_to_select } from "../../Layout/app/Const";

 export {
  useState,
@ -12,5 +11,4 @@ export {
  useFormikContext,
  useTranslation,
  FaExclamationCircle,
-  convert_data_to_select,
 };
--- a/src/Components/ValidationField/state/ValidationValidationParamState.ts
+++ b/src/Components/ValidationField/state/ValidationValidationParamState.ts
@ -0,0 +1,36 @@
+import { create } from "zustand";
+
+interface ValidationParamState {
+  [key: string]: any;
+}
+
+interface ModalState {
+  ValidationParamState: ValidationParamState;
+  setValidationParamState: (validationParamState: ValidationParamState) => void;
+  pushValidationParamState: (
+    validationParamState: ValidationParamState,
+  ) => void;
+  clearValidationParamState: () => void;
+}
+
+export const useValidationValidationParamState = create<ModalState>((set) => ({
+  ValidationParamState: {},
+
+  setValidationParamState: (validationParamState) =>
+    set(() => ({
+      ValidationParamState: validationParamState,
+    })),
+
+  pushValidationParamState: (validationParamState) =>
+    set((state) => ({
+      ValidationParamState: {
+        ...state.ValidationParamState,
+        ...validationParamState,
+      },
+    })),
+
+  clearValidationParamState: () =>
+    set({
+      ValidationParamState: {},
+    }),
+}));
--- a/src/Components/ValidationField/utils/ValidationField.scss
+++ b/src/Components/ValidationField/utils/ValidationField.scss
@ -21,7 +21,7 @@
    border: 1px solid var(--border-color);
  }

-  .Select_error {
+  .SelectError {
    .ant-select-selector {
      border: 1px solid red !important;
    }
@ -60,12 +60,9 @@
 .ant-upload-select {
  width: 100%;
 }
-.Checkboxs {
+.Checkbox {
  padding: 4%;
 }
-.ant-checkbox-wrapper {
-  min-width: 100px;
-}
 .SearchField {
  button {
    background: var(--primary);
@ -201,27 +198,3 @@ input:-webkit-autofill:hover {
 .TwoSelectGroupbutton {
  margin-bottom: 20px;
 }
-
-.ant-checkbox-wrapper {
-  margin-top: 25px !important;
-}
-
-.add_new_button {
-  margin-bottom: 20px;
-  svg {
-    color: var(--primary);
-  }
-}
-.ValidationField:has(.input_number) {
-  max-width: 100px;
-
-  .input_number {
-    max-width: 100px;
-  }
-}
-
-.flex {
-  display: flex;
-  gap: 30px;
-  max-width: 80% !important;
-}
--- a/src/Components/ValidationField/utils/getNestedValue.ts
+++ b/src/Components/ValidationField/utils/getNestedValue.ts
@ -1,7 +0,0 @@
-export function getNestedValue(obj: any, path: any) {
-  return path
-    .replace(/\?.\[|\]\[|\]\.?/g, ".") // Replace question mark and square brackets
-    .split(".") // Split by dots
-    .filter(Boolean) // Remove empty strings
-    .reduce((acc: any, key: any) => acc && acc[key], obj); // Access nested properties
-}
--- a/src/Components/ValidationField/utils/translatedOptions.ts
+++ b/src/Components/ValidationField/utils/translatedOptions.ts
@ -1,6 +1,7 @@
 export const translateOptions = (options: any, t: any) => {
-  return options.map((opt: any) => ({
+  return options?.map((opt: any) => ({
    ...opt,
-    label: t(`${opt.label}`),
+    label: t(`${opt?.label}`),
+    name: t(`${opt?.name}`),
  }));
 };
--- a/src/Components/ValidationField/utils/types.ts
+++ b/src/Components/ValidationField/utils/types.ts
@ -1,194 +1,80 @@
-import { InputProps } from "antd";
+import { InputProps, SelectProps } from "antd";

-export type ValidationFieldType =
-  | "text"
-  | "Select"
-  | "LocalSearch"
-  | "Search"
-  | "DataRange"
-  | "Date"
-  | "Time"
-  | "File"
-  | "MaltyFile"
-  | "DropFile"
-  | "Checkbox"
-  | "number"
-  | "password"
-  | "email"
-  | "TextArea";
-
-export interface ValidationFieldPropsText {
+// Common properties for all field types
+interface BaseFieldProps {
  name: string;
-  no_label?: boolean;
-  label_icon?: boolean;
-  type: "text";
-  placeholder?: string;
  label?: string;
+  placeholder?: string;
  className?: string;
  isDisabled?: boolean;
  onChange?: (value: any) => void;
  dir?: "ltr" | "rtl";
+  no_label?: boolean;
+  label_icon?: boolean;
 }

-export interface ValidationFieldPropsSelect {
-  name: string;
-  no_label?: boolean;
-  label_icon?: boolean;
-  type: "Select";
-  placeholder?: string;
-  label?: string;
-  className?: string;
-  isDisabled?: boolean;
-  onChange?: any;
-  dir?: "ltr" | "rtl";
-  option: any[];
-  isMulti?: boolean;
-}
+// Specific field type properties
+export type SelectFieldProps = BaseFieldProps &
+  SelectProps & {
+    type: "Select" | "LocalSearch";
+    option: any[];
+    isMulti?: boolean;
+    isLoading?: boolean;
+    searchBy?: string;
+    canChangePage?: boolean;
+    PageName?: string;
+    page?: number;
+  };

-export interface ValidationFieldPropsLocalSearch {
-  name: string;
-  no_label?: boolean;
-  label_icon?: boolean;
-  type: "LocalSearch";
-  placeholder?: string;
-  label?: string;
-  className?: string;
-  isDisabled?: boolean;
-  onChange?: (value: any) => void;
-  dir?: "ltr" | "rtl";
-  option: any[];
-  isMulti?: boolean;
-}
-export interface ValidationFieldPropsSearch {
-  name: string;
-  no_label?: boolean;
-  label_icon?: boolean;
-  type: "Search";
-  placeholder?: string;
-  label?: string;
-  className?: string;
-  isDisabled?: boolean;
-  onChange?: (value: any) => void;
-  dir?: "ltr" | "rtl";
-  option: any[];
-  isMulti?: boolean;
-  searchBy: string;
-  isLoading?: any;
-}
-export interface ValidationFieldPropsDataRange {
-  name: string;
-  no_label?: boolean;
-  label_icon?: boolean;
-  type: "DataRange";
-  placeholder?: string;
-  label?: string;
-  className?: string;
-  isDisabled?: boolean;
-  onChange?: (value: any) => void;
-  dir?: "ltr" | "rtl";
+export type SearchFieldProps = BaseFieldProps &
+  SelectProps & {
+    type: "Search";
+    option: any[];
+    isMulti?: boolean;
+    isLoading: boolean;
+    searchBy: string;
+    canChangePage: boolean;
+    PageName: string;
+    page: number;
+  };
+
+type DateFieldProps = BaseFieldProps & {
+  type: "DataRange" | "Date" | "Time";
  Format?: "YYYY/MM/DD" | "MM/DD" | "YYYY/MM" | "YYYY-MM-DD HH:mm:ss.SSS";
-}
-export interface ValidationFieldPropsDate {
-  name: string;
-  no_label?: boolean;
-  label_icon?: boolean;
-  type: "Date";
-  placeholder?: string;
-  label?: string;
-  className?: string;
-  isDisabled?: boolean;
-  onChange?: (value: any) => void;
-  dir?: "ltr" | "rtl";
  picker?: "data" | "week" | "month" | "quarter" | "year";
-}
+};

-export interface ValidationFieldPropsTime {
-  name: string;
-  no_label?: boolean;
-  label_icon?: boolean;
-  type: "Time";
-  label?: string;
-  placeholder?: string;
-  className?: string;
-  isDisabled?: boolean;
-  onChange?: (value: any) => void;
-  dir?: "ltr" | "rtl";
-}
-
-export interface ValidationFieldPropsFile {
-  name: string;
-  no_label?: boolean;
-  label_icon?: boolean;
+type FileFieldProps = BaseFieldProps & {
  type: "File" | "MaltyFile" | "DropFile";
-  placeholder?: string;
-  label?: string;
-  className?: string;
-  isDisabled?: boolean;
-  onChange?: (value: any) => void;
-  dir?: "ltr" | "rtl";
-}
-export interface ValidationFieldPropsCheckbox {
-  name: string;
-  no_label?: boolean;
-  label_icon?: boolean;
+};
+
+type CheckboxFieldProps = BaseFieldProps & {
  type: "Checkbox";
-  label?: string;
-  className?: string;
-  isDisabled?: boolean;
-  onChange?: (value: any) => void;
-  dir?: "ltr" | "rtl";
  Group?: boolean;
-}
-export interface ValidationFieldPropstext {
-  name: string;
-  no_label?: boolean;
-  label_icon?: boolean;
-  type?:
-    | "text"
-    | "number"
-    | "password"
-    | "email"
-    | "TextArea"
-    | "NumberFormate";
-  label?: string;
-  label2?: string;
-  className?: string;
-  placeholder?: string;
-  isDisabled?: boolean;
-  onChange?: (value: any) => void;
-  dir?: "ltr" | "rtl";
-  Group?: boolean;
-  [key: string]: any; // Index signature to allow any additional props
-}
+};

-///// new
-export interface BaseField {
-  name: string;
-  label?: string;
-  placeholder?: string;
-}
-export type OmitBaseType = "placeholder" | "name" | "label" | "type";
-
-export type OmitPicker = OmitBaseType | "format";
-
-export interface ValidationFieldPropsInput
-  extends Omit<InputProps, OmitBaseType>,
-    BaseField {
-  type: "text" | "number" | "password" | "email" | "Number";
-  isDisabled?: boolean;
-  no_label?: string;
-  label_icon?: string;
-  label2?: string;
-}
+export type FieldProps = BaseFieldProps &
+  InputProps & {
+    type?:
+      | "text"
+      | "number"
+      | "password"
+      | "email"
+      | "TextArea"
+      | "NumberFormate";
+    label2?: string;
+    Group?: boolean;
+    [key: string]: any;
+  };

+// Union type for all field types
 export type ValidationFieldProps =
-  | ValidationFieldPropsInput
-  | ValidationFieldPropsSelect
-  | ValidationFieldPropsLocalSearch
-  | ValidationFieldPropsDataRange
-  | ValidationFieldPropsDate
-  | ValidationFieldPropsTime
-  | ValidationFieldPropsFile
-  | ValidationFieldPropsCheckbox
-  | ValidationFieldPropstext
-  | ValidationFieldPropsSearch;
+  | SelectFieldProps
+  | DateFieldProps
+  | FileFieldProps
+  | CheckboxFieldProps
+  | SearchFieldProps
+  | FieldProps;
+
+// Validation field type
+export type ValidationFieldType = ValidationFieldProps["type"];
--- a/src/Hooks/useDebounce.ts
+++ b/src/Hooks/useDebounce.ts
@ -0,0 +1,25 @@
+import { useCallback, useRef } from "react";
+
+export const DEBOUNCE_DELAY = 500;
+
+export const useDebounce = (
+  callback: (...args: any[]) => void,
+  delay: number = DEBOUNCE_DELAY,
+) => {
+  const timeoutRef = useRef<any>(null);
+
+  const debouncedCallback = useCallback(
+    (...args: any[]) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = setTimeout(() => {
+        callback(...args);
+      }, delay);
+    },
+    [callback, delay],
+  );
+
+  return debouncedCallback;
+};
--- a/src/Pages/Package/Field/ConfigurationField.tsx
+++ b/src/Pages/Package/Field/ConfigurationField.tsx
@ -0,0 +1,9 @@
+import React from 'react'
+
+const ConfigurationField = () => {
+  return (
+    <div>ConfigurationField</div>
+  )
+}
+
+export default ConfigurationField
--- a/src/Pages/Package/Field/FieldGroup.tsx
+++ b/src/Pages/Package/Field/FieldGroup.tsx
@ -0,0 +1,96 @@
+import React from "react";
+import { Input, Button } from "antd";
+import { useFormikContext } from "formik";
+import { useTranslation } from "react-i18next";
+
+interface FieldGroupProps {
+  array_name: string;
+  title:string;
+  static?: boolean;
+  only_value?: boolean;
+}
+
+const FieldGroup: React.FC<FieldGroupProps> = ({ array_name ,title,static:isStatic,only_value}) => {
+  const { values, setFieldValue } = useFormikContext<any>();
+  const addFieldGroup = () => {
+    setFieldValue(array_name, [
+      ...(values?.[array_name] || []),
+      { key: null, value: null },
+    ]);
+  };
+  const deleteFieldGroup = () => {
+    const updatedArray = values?.[array_name]?.slice(0, -1) || [];
+    setFieldValue(array_name, updatedArray);
+  };
+
+
+  const handleChangeKey = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    const Selects = values?.[array_name] ?? [];
+    Selects[index].key = e.target.value;
+    setFieldValue(array_name, Selects);
+  };
+
+  const handleChangeValue = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    const Selects = values?.[array_name] ?? [];
+    Selects[index].value = e.target.value;
+    setFieldValue(array_name, Selects);
+  };
+
+  const selectsArray = values?.[array_name] ?? [];
+  const { t } = useTranslation();
+
+  return (
+    <>
+    <label htmlFor={array_name} className="text">
+    <h5 className="mb-2">{t(`header.${title}`)}</h5>
+        </label>
+      {selectsArray.map((group: { key: string; value: string }, index: number) => (
+        <div key={index} className="d-flex gap-2 mb-3">
+          <Input
+            placeholder={t("practical.key")}
+            onChange={(e) => handleChangeKey(e, index)}
+            value={group.key}
+            size="large"
+            style={{ width: "100%" }}
+            allowClear
+            disabled={only_value}
+          />
+          <Input
+            placeholder={t("practical.value")}
+            onChange={(e) => handleChangeValue(e, index)}
+            value={group.value}
+            size="large"
+            style={{ width: "100%" }}
+            allowClear
+            
+          />
+        </div>
+      ))}
+      {!isStatic &&
+  <div className="d-flex gap-2 mb-4">
+  <Button
+    type="dashed"
+    onClick={addFieldGroup}
+  >
+    {t("practical.add_new")}
+  </Button>
+  <Button
+    type="dashed"
+    onClick={deleteFieldGroup}
+  >
+    {t("practical.delete_last")}
+  </Button>
+  </div>
+      }
+    
+    </>
+  );
+};
+
+export default FieldGroup;
--- a/src/Pages/Package/Model/AddModel.tsx
+++ b/src/Pages/Package/Model/AddModel.tsx
@ -6,52 +6,60 @@ import { QueryStatusEnum } from "../../../enums/QueryStatus";
 import ModelForm from "./ModelForm";
 import { useAddPackage } from "../../../api/package";
 import FormikForm from "../../../Layout/Dashboard/FormikForm";
+import { Spin } from "antd";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import useSetPageTitle from "../../../Hooks/useSetPageTitle";
+import { PackageInitialValues } from "../../../types/Package";
+import { arrayToObject } from "../../../utils/arrayToObject";

 const AddModel: React.FC = () => {
-  const { mutate, status } = useAddPackage();
+  const { mutate, status ,isLoading} = useAddPackage();
+  const [t] = useTranslation();
+  const navigate = useNavigate()
+  const handleSubmit = (values: PackageInitialValues) => {
+    const DataToSend = JSON.parse(JSON.stringify(values) ); 
+    console.log(DataToSend,"DataToSend");
+    console.log(values?.configuration);
+    
+    const  configuration = JSON.stringify(arrayToObject(values?.configuration )) ;
+    console.log(configuration);

-  const handleSubmit = (values: any) => {
    mutate({
      ...values,
    });
  };
+
+  useSetPageTitle(t(`page_header.package`));
+
  return (
-    <>
-      {/* <LayoutModel
-        status={status as QueryStatusEnum}
-        ModelEnum={ModalEnum.Package_ADD}
-        modelTitle="package"
-        handleSubmit={handleSubmit}
-        getInitialValues={getInitialValues({})}
-        getValidationSchema={getValidationSchema}
-      >
-        <ModelForm />
-        moaz
-      </LayoutModel> */}
-        casascaas
+    <div className="page">
        <FormikForm
        handleSubmit={handleSubmit}
-        initialValues={getInitialValues('')}
+        initialValues={getInitialValues({})}
        validationSchema={getValidationSchema}
      > 
+
+      <header>
+        {t("header.add_new_package")}
+      </header>
+  
        <main className="w-100 exercise_add_main">
-          <ModelForm />
+        <ModelForm />
+            <div className="exercise_add_buttons">
+              <button disabled={isLoading} className="relative button center" type="submit">
+                {t("practical.add")}

-          <div className="exercise_add_buttons">
-            {/* <div onClick={handleCancel}>{t("practical.back")}</div> */}
-            {/* <button disabled={isLoading} className="relative" type="submit">
-              {t("practical.add")}
-
-              {isLoading && (
-                <span className="Spinier_Div">
-                  <Spin />
-                </span>
-              )}
-            </button> */}
-          </div>
-        </main>
+                {isLoading && (
+                  <span className="Spinier_Div">
+                    <Spin />
+                  </span>
+                )}
+              </button>
+            </div>
+          </main>
      </FormikForm>
-    </>
+    </div>
  );
 };

--- a/src/Pages/Package/Model/EditModel.tsx
+++ b/src/Pages/Package/Model/EditModel.tsx
@ -1,35 +1,72 @@
 import React from "react";
 import { getInitialValues, getValidationSchema } from "./formUtil";
-import { ModalEnum } from "../../../enums/Model";
-import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
 import ModelForm from "./ModelForm";
-import { QueryStatusEnum } from "../../../enums/QueryStatus";
+import FormikForm from "../../../Layout/Dashboard/FormikForm";
+import { Spin } from "antd";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useParams } from "react-router-dom";
+import useSetPageTitle from "../../../Hooks/useSetPageTitle";
+import { PackageInitialValues } from "../../../types/Package";
+import { arrayToObject } from "../../../utils/arrayToObject";
+import { useGetAllPackage, useUpdatePackage } from "../../../api/package";
+import { ParamsEnum } from "../../../enums/params";
 import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
-import { useUpdatePackage } from "../../../api/package";
+import SpinContainer from "../../../Components/Layout/SpinContainer";

 const EditModel: React.FC = () => {
-  const { mutate, status } = useUpdatePackage();
-  const { objectToEdit } = useObjectToEdit((state) => state);
+  const { mutate, status ,isLoading} = useUpdatePackage();
+  const [t] = useTranslation();
+  const {package_id} = useParams<ParamsEnum>();
+  const {objectToEdit} = useObjectToEdit();
+  
+  const {data,isLoading:isLoadingData} = useGetAllPackage({show:package_id})
+  console.log(data?.data,"data");
+  
+  const handleSubmit = (values: PackageInitialValues) => {
+    const DataToSend = JSON.parse(JSON.stringify(values) ); 
+    console.log(DataToSend,"DataToSend");
+    console.log(values?.configuration);
+    
+    const  configuration = JSON.stringify(arrayToObject(values?.configuration )) ;
+    console.log(configuration);

-  const handleSubmit = (values: any) => {
    mutate({
      ...values,
    });
  };
+
+  useSetPageTitle(t(`page_header.package`));
+  if(isLoadingData){
+    return <SpinContainer/>
+  }
  return (
-    <>
-      <LayoutModel
-        status={status as QueryStatusEnum}
-        ModelEnum={ModalEnum.Package_EDIT}
-        modelTitle="package_details"
+    <div className="page">
+        <FormikForm
        handleSubmit={handleSubmit}
-        getInitialValues={getInitialValues(objectToEdit)}
-        getValidationSchema={getValidationSchema}
-        isAddModal={false}
+        initialValues={getInitialValues(data?.data)}
+        validationSchema={getValidationSchema}
      > 
+
+      <header>
+        {t("header.edit_package")}
+      </header>
+  
+        <main className="w-100 exercise_Edit_main">
        <ModelForm />
-      </LayoutModel>
-    </>
+            <div className="exercise_Edit_buttons">
+              <button disabled={isLoading} className="relative button center" type="submit">
+                {t("practical.edit")}
+
+                {isLoading && (
+                  <span className="Spinier_Div">
+                    <Spin />
+                  </span>
+                )}
+              </button>
+            </div>
+          </main>
+      </FormikForm>
+    </div>
  );
 };

--- a/src/Pages/Package/Model/ModelForm.tsx
+++ b/src/Pages/Package/Model/ModelForm.tsx
@ -1,15 +1,236 @@
 import { Col, Row } from "reactstrap";
 import ValidationField from "../../../Components/ValidationField/ValidationField";
+import { useGetAllGrade } from "../../../api/grade";
+import { useGetAllSubject } from "../../../api/subject";
+import { useGetAllUnit } from "../../../api/unit";
+import { useGetAllCurriculum } from "../../../api/curriculum";
+import { useGetAllLesson } from "../../../api/lesson";
+import { useFormikContext } from "formik";
+import { PackageInitialValues } from "../../../types/Package";
+import { useValidationValidationParamState } from "../../../Components/ValidationField/state/ValidationValidationParamState";
+import { useEffect } from "react";
+import ConfigurationField from "../Field/ConfigurationField";
+import FieldGroup from "../Field/FieldGroup";

 const Form = () => {
+  const { values, setFieldValue } = useFormikContext<PackageInitialValues>();
+
+  const { ValidationParamState } = useValidationValidationParamState();
+  const {
+    GradeName, GradeCurrentPage,
+    SubjectName, SubjectCurrentPage,
+    UnitName, UnitCurrentPage,
+    CurriculumName, CurriculumCurrentPage,
+    LessonName, LessonCurrentPage
+
+
+  } = ValidationParamState;
+
+  const { curriculums_ids, grade_id, subjects_ids, units_ids, lessons_ids } = values;
+
+
+
+
+  /// grade_id 
+  const GradeDisabled = !!grade_id;
+  const { data: Grade, isLoading: isLoadingGrade } = useGetAllGrade({
+    name: GradeName,
+    page: GradeCurrentPage
+  });
+  const GradeOption = Grade?.data ?? []
+  const canChangeGradePage = !!Grade?.links?.next;
+  const GradePage = Grade?.meta?.currentPage;
+
+
+  /// subjects_ids 
+  const SubjectDisabled = !!subjects_ids && subjects_ids?.length > 0;
+  const { data: Subject, isLoading: isLoadingSubject } = useGetAllSubject({
+    grade_id: grade_id,
+    name: SubjectName,
+    page: SubjectCurrentPage
+  }, { enabled: GradeDisabled });
+  const SubjectOption = Subject?.data ?? []
+  const canChangeSubjectPage = !!Subject?.links?.next;
+  const SubjectPage = Subject?.meta?.currentPage;
+
+  /// units_ids 
+  const UnitDisabled = !!units_ids && units_ids?.length > 0;
+  const { data: Unit, isLoading: isLoadingUnit } = useGetAllUnit({
+    subjects_ids: subjects_ids,
+    name: UnitName,
+    page: UnitCurrentPage
+  }, { enabled: SubjectDisabled });
+  const UnitOption = Unit?.data ?? []
+  const canChangeUnitPage = !!Unit?.links?.next;
+  const UnitPage = Unit?.meta?.currentPage;
+
+  /// curriculums_ids 
+  const CurriculumDisabled = !!curriculums_ids && curriculums_ids?.length > 0;
+  const { data: Curriculum, isLoading: isLoadingCurriculum } = useGetAllCurriculum({
+    units_ids: units_ids,
+    name: CurriculumName,
+    page: CurriculumCurrentPage
+  }, { enabled: UnitDisabled });
+  const CurriculumOption = Curriculum?.data ?? []
+  const canChangeCurriculumPage = !!Curriculum?.links?.next;
+  const CurriculumPage = Curriculum?.meta?.currentPage;
+
+  /// lessons_ids 
+  const { data: Lesson, isLoading: isLoadingLesson } = useGetAllLesson({
+    curriculums_ids: curriculums_ids,
+    name: LessonName,
+    page: LessonCurrentPage
+  }, { enabled: CurriculumDisabled });
+  const LessonOption = Lesson?.data ?? []
+  const canChangeLessonPage = !!Lesson?.links?.next;
+  const LessonPage = Lesson?.meta?.currentPage;
+
+
+
+  useEffect(() => {
+    const GradeChildren = (subjects_ids && subjects_ids?.length > 0 || units_ids && units_ids?.length > 0 || curriculums_ids && curriculums_ids?.length > 0 || lessons_ids && lessons_ids?.length > 0);
+
+    if (!grade_id && GradeChildren) {
+      setFieldValue("subjects_ids", []);
+      setFieldValue("units_ids", []);
+      setFieldValue("curriculums_ids", []);
+      setFieldValue("lessons_ids", []);
+      return;
+    }
+    console.log(1);
+    
+    const SubjectChildren = (units_ids && units_ids?.length > 0 || curriculums_ids && curriculums_ids?.length > 0 || lessons_ids && lessons_ids?.length > 0)
+    console.log( subjects_ids && subjects_ids?.length < 1 && SubjectChildren);
+    
+    if (subjects_ids && subjects_ids?.length < 1 && SubjectChildren) {
+      console.log(1);
+      
+      setFieldValue("units_ids", []);
+      setFieldValue("curriculums_ids", []);
+      setFieldValue("lessons_ids", []);
+      return;
+    }
+    const UnitChildren = (curriculums_ids && curriculums_ids?.length > 0 || lessons_ids && lessons_ids?.length > 0)
+    if (units_ids && units_ids?.length < 1 && UnitChildren) {
+      setFieldValue("curriculums_ids", []);
+      setFieldValue("lessons_ids", []);
+      return;
+    }
+    const CurriculumChildren = (lessons_ids && lessons_ids?.length > 0)
+    if (curriculums_ids && curriculums_ids?.length < 1 && CurriculumChildren) {
+      setFieldValue("lessons_ids", []);
+      return;
+    }
+  }, [grade_id, subjects_ids, units_ids, curriculums_ids])
+
+
  return (
    <Row className="w-100">
      <Col>
        <ValidationField placeholder="name" label="name" name="name" />
-        <ValidationField placeholder="price" label="price" name="price" />
-        <ValidationField placeholder="name" label="name" name="name" />
+        <ValidationField placeholder="price" label="price" name="price" type="number" />
+        <FieldGroup array_name='configuration' title='configuration' />
+      </Col>
+      <Col>
+
+        {/* 
+              grade_id
+        */}
+        <ValidationField
+          searchBy="GradeName"
+          name="grade_id"
+          label="grade"
+          type="Search"
+          option={GradeOption}
+          isLoading={isLoadingGrade}
+          canChangePage={canChangeGradePage}
+          PageName={"GradeCurrentPage"}
+          page={GradePage}
+
+        />
+
+        {/* 
+              subjects_ids
+        */}
+
+        <ValidationField
+          searchBy="SubjectName"
+          name="subjects_ids"
+          label="subject"
+          type="Search"
+          option={SubjectOption}
+          isMulti
+          isLoading={isLoadingSubject}
+          canChangePage={canChangeSubjectPage}
+          PageName={"SubjectCurrentPage"}
+          page={SubjectPage}
+          disabled={!GradeDisabled}
+
+        />
+
+
+        {/* 
+              units_ids
+        */}
+
+        <ValidationField
+          searchBy="UnitName"
+          name="units_ids"
+          label="unit"
+          type="Search"
+          option={UnitOption}
+          isMulti
+          isLoading={isLoadingUnit}
+          canChangePage={canChangeUnitPage}
+          PageName={"UnitCurrentPage"}
+          page={UnitPage}
+          disabled={!SubjectDisabled}
+
+        />
+
+
+        {/* 
+              curriculums_ids
+        */}
+
+        <ValidationField
+          searchBy="CurriculumName"
+          name="curriculums_ids"
+          label="curriculum"
+          type="Search"
+          option={CurriculumOption}
+          isMulti
+          isLoading={isLoadingCurriculum}
+          canChangePage={canChangeCurriculumPage}
+          PageName={"CurriculumCurrentPage"}
+          page={CurriculumPage}
+          disabled={!UnitDisabled}
+
+        />
+
+
+
+        {/* 
+              lessons_ids
+        */}
+
+        <ValidationField
+          searchBy="LessonName"
+          name="lessons_ids"
+          label="lesson"
+          type="Search"
+          option={LessonOption}
+          isMulti
+          isLoading={isLoadingLesson}
+          canChangePage={canChangeLessonPage}
+          PageName={"LessonCurrentPage"}
+          page={LessonPage}
+          disabled={!CurriculumDisabled}
+
+        />

      </Col>
+
    </Row>
  );
 };
--- a/src/Pages/Package/Model/formUtil.ts
+++ b/src/Pages/Package/Model/formUtil.ts
@ -1,16 +1,32 @@
 import * as Yup from "yup";
-export const getInitialValues = (objectToEdit: any): any => {
+import { Package, PackageInitialValues } from "../../../types/Package";
+import { arrayToObject } from "../../../utils/arrayToObject";
+import { objectToArray } from "../../../utils/objectToArray";
+export const getInitialValues = (objectToEdit: Partial<Package>): PackageInitialValues => {
+  console.log(objectToEdit,"objectToEdit");
+  
+  const configuration = Array.isArray(objectToEdit?.configuration) ? objectToEdit?.configuration : objectToArray(objectToEdit?.configuration)
  return {
    id: objectToEdit?.id ?? null,
    name: objectToEdit?.name ?? null,
    price: objectToEdit?.price ?? null,
    grade_id: objectToEdit?.grade_id ?? null,
-
+    curriculums_ids: objectToEdit?.curriculums_ids ?? [],
+    lessons_ids: objectToEdit?.lessons_ids ?? [],
+    subjects_ids: objectToEdit?.subjects_ids ?? [],
+    units_ids: objectToEdit?.units_ids ?? [],
+    configuration: configuration ?? [{key:"",value:""}],
  };
 };

 export const getValidationSchema = () => {
  return Yup.object().shape({
    name: Yup.string().required("validation.required"),
+    price: Yup.number().required("validation.required").typeError("validation.Must_be_a_number"),
+    grade_id: Yup.string().required("validation.required"),
+    curriculums_ids: Yup.array().of(Yup.number().required()).min(1,"validation.must_have_on_item").required("validation.required"),
+    lessons_ids: Yup.array().of(Yup.number().required()).min(1,"validation.must_have_on_item").required("validation.required"),
+    subjects_ids: Yup.array().of(Yup.number().required()).min(1,"validation.must_have_on_item").required("validation.required"),
+    units_ids: Yup.array().of(Yup.number().required()).min(1,"validation.must_have_on_item").required("validation.required"),
  });
 };
--- a/src/Pages/Package/PackageItem/Field/ConfigurationField.tsx
+++ b/src/Pages/Package/PackageItem/Field/ConfigurationField.tsx
@ -0,0 +1,9 @@
+import React from 'react'
+
+const ConfigurationField = () => {
+  return (
+    <div>ConfigurationField</div>
+  )
+}
+
+export default ConfigurationField
--- a/src/Pages/Package/PackageItem/Field/FieldGroup.tsx
+++ b/src/Pages/Package/PackageItem/Field/FieldGroup.tsx
@ -0,0 +1,96 @@
+import React from "react";
+import { Input, Button } from "antd";
+import { useFormikContext } from "formik";
+import { useTranslation } from "react-i18next";
+
+interface FieldGroupProps {
+  array_name: string;
+  title:string;
+  static?: boolean;
+  only_value?: boolean;
+}
+
+const FieldGroup: React.FC<FieldGroupProps> = ({ array_name ,title,static:isStatic,only_value}) => {
+  const { values, setFieldValue } = useFormikContext<any>();
+  const addFieldGroup = () => {
+    setFieldValue(array_name, [
+      ...(values?.[array_name] || []),
+      { key: null, value: null },
+    ]);
+  };
+  const deleteFieldGroup = () => {
+    const updatedArray = values?.[array_name]?.slice(0, -1) || [];
+    setFieldValue(array_name, updatedArray);
+  };
+
+
+  const handleChangeKey = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    const Selects = values?.[array_name] ?? [];
+    Selects[index].key = e.target.value;
+    setFieldValue(array_name, Selects);
+  };
+
+  const handleChangeValue = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    const Selects = values?.[array_name] ?? [];
+    Selects[index].value = e.target.value;
+    setFieldValue(array_name, Selects);
+  };
+
+  const selectsArray = values?.[array_name] ?? [];
+  const { t } = useTranslation();
+
+  return (
+    <>
+    <label htmlFor={array_name} className="text">
+    <h5 className="mb-2">{t(`header.${title}`)}</h5>
+        </label>
+      {selectsArray.map((group: { key: string; value: string }, index: number) => (
+        <div key={index} className="d-flex gap-2 mb-3">
+          <Input
+            placeholder={t("practical.key")}
+            onChange={(e) => handleChangeKey(e, index)}
+            value={group.key}
+            size="large"
+            style={{ width: "100%" }}
+            allowClear
+            disabled={only_value}
+          />
+          <Input
+            placeholder={t("practical.value")}
+            onChange={(e) => handleChangeValue(e, index)}
+            value={group.value}
+            size="large"
+            style={{ width: "100%" }}
+            allowClear
+            
+          />
+        </div>
+      ))}
+      {!isStatic &&
+  <div className="d-flex gap-2 mb-4">
+  <Button
+    type="dashed"
+    onClick={addFieldGroup}
+  >
+    {t("practical.add_new")}
+  </Button>
+  <Button
+    type="dashed"
+    onClick={deleteFieldGroup}
+  >
+    {t("practical.delete_last")}
+  </Button>
+  </div>
+      }
+    
+    </>
+  );
+};
+
+export default FieldGroup;
--- a/src/Pages/Package/PackageItem/Model/AddModel.tsx
+++ b/src/Pages/Package/PackageItem/Model/AddModel.tsx
@ -0,0 +1,66 @@
+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 { useAddPackage } from "../../../../api/package";
+import FormikForm from "../../../../Layout/Dashboard/FormikForm";
+import { Spin } from "antd";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import useSetPageTitle from "../../../../Hooks/useSetPageTitle";
+import { PackageInitialValues } from "../../../../types/Package";
+import { arrayToObject } from "../../../../utils/arrayToObject";
+
+const AddModel: React.FC = () => {
+  const { mutate, status ,isLoading} = useAddPackage();
+  const [t] = useTranslation();
+  const navigate = useNavigate()
+  const handleSubmit = (values: PackageInitialValues) => {
+    const DataToSend = JSON.parse(JSON.stringify(values) ); 
+    console.log(DataToSend,"DataToSend");
+    console.log(values?.configuration);
+    
+    const  configuration = JSON.stringify(arrayToObject(values?.configuration )) ;
+    console.log(configuration);
+
+    mutate({
+      ...values,
+    });
+  };
+
+  useSetPageTitle(t(`page_header.package`));
+
+  return (
+    <div className="page">
+        <FormikForm
+        handleSubmit={handleSubmit}
+        initialValues={getInitialValues({})}
+        validationSchema={getValidationSchema}
+      > 
+
+      <header>
+        {t("header.add_new_package")}
+      </header>
+  
+        <main className="w-100 exercise_add_main">
+        <ModelForm />
+            <div className="exercise_add_buttons">
+              <button disabled={isLoading} className="relative button center" type="submit">
+                {t("practical.add")}
+
+                {isLoading && (
+                  <span className="Spinier_Div">
+                    <Spin />
+                  </span>
+                )}
+              </button>
+            </div>
+          </main>
+      </FormikForm>
+    </div>
+  );
+};
+
+export default AddModel;
--- a/src/Pages/Package/PackageItem/Model/EditModel.tsx
+++ b/src/Pages/Package/PackageItem/Model/EditModel.tsx
@ -0,0 +1,73 @@
+import React from "react";
+import { getInitialValues, getValidationSchema } from "./formUtil";
+import ModelForm from "./ModelForm";
+import FormikForm from "../../../../Layout/Dashboard/FormikForm";
+import { Spin } from "antd";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useParams } from "react-router-dom";
+import useSetPageTitle from "../../../../Hooks/useSetPageTitle";
+import { PackageInitialValues } from "../../../../types/Package";
+import { arrayToObject } from "../../../../utils/arrayToObject";
+import { useGetAllPackage, useUpdatePackage } from "../../../../api/package";
+import { ParamsEnum } from "../../../../enums/params";
+import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
+import SpinContainer from "../../../../Components/Layout/SpinContainer";
+
+const EditModel: React.FC = () => {
+  const { mutate, status ,isLoading} = useUpdatePackage();
+  const [t] = useTranslation();
+  const {package_id} = useParams<ParamsEnum>();
+  const {objectToEdit} = useObjectToEdit();
+  
+  const {data,isLoading:isLoadingData} = useGetAllPackage({show:package_id})
+  console.log(data?.data,"data");
+  
+  const handleSubmit = (values: PackageInitialValues) => {
+    const DataToSend = JSON.parse(JSON.stringify(values) ); 
+    console.log(DataToSend,"DataToSend");
+    console.log(values?.configuration);
+    
+    const  configuration = JSON.stringify(arrayToObject(values?.configuration )) ;
+    console.log(configuration);
+
+    mutate({
+      ...values,
+    });
+  };
+
+  useSetPageTitle(t(`page_header.package`));
+  if(isLoadingData){
+    return <SpinContainer/>
+  }
+  return (
+    <div className="page">
+        <FormikForm
+        handleSubmit={handleSubmit}
+        initialValues={getInitialValues(data?.data)}
+        validationSchema={getValidationSchema}
+      > 
+
+      <header>
+        {t("header.edit_package")}
+      </header>
+  
+        <main className="w-100 exercise_Edit_main">
+        <ModelForm />
+            <div className="exercise_Edit_buttons">
+              <button disabled={isLoading} className="relative button center" type="submit">
+                {t("practical.edit")}
+
+                {isLoading && (
+                  <span className="Spinier_Div">
+                    <Spin />
+                  </span>
+                )}
+              </button>
+            </div>
+          </main>
+      </FormikForm>
+    </div>
+  );
+};
+
+export default EditModel;
--- a/src/Pages/Package/PackageItem/Model/ModelForm.tsx
+++ b/src/Pages/Package/PackageItem/Model/ModelForm.tsx
@ -0,0 +1,238 @@
+import { Col, Row } from "reactstrap";
+import ValidationField from "../../../../Components/ValidationField/ValidationField";
+import { useGetAllGrade } from "../../../../api/grade";
+import { useGetAllSubject } from "../../../../api/subject";
+import { useGetAllUnit } from "../../../../api/unit";
+import { useGetAllCurriculum } from "../../../../api/curriculum";
+import { useGetAllLesson } from "../../../../api/lesson";
+import { useFormikContext } from "formik";
+import { PackageInitialValues } from "../../../../types/Package";
+import { useValidationValidationParamState } from "../../../../Components/ValidationField/state/ValidationValidationParamState";
+import { useEffect } from "react";
+import ConfigurationField from "../../Field/ConfigurationField";
+import FieldGroup from "../../Field/FieldGroup";
+
+const Form = () => {
+  const { values, setFieldValue } = useFormikContext<PackageInitialValues>();
+
+  const { ValidationParamState } = useValidationValidationParamState();
+  const {
+    GradeName, GradeCurrentPage,
+    SubjectName, SubjectCurrentPage,
+    UnitName, UnitCurrentPage,
+    CurriculumName, CurriculumCurrentPage,
+    LessonName, LessonCurrentPage
+
+
+  } = ValidationParamState;
+
+  const { curriculums_ids, grade_id, subjects_ids, units_ids, lessons_ids } = values;
+
+
+
+
+  /// grade_id 
+  const GradeDisabled = !!grade_id;
+  const { data: Grade, isLoading: isLoadingGrade } = useGetAllGrade({
+    name: GradeName,
+    page: GradeCurrentPage
+  });
+  const GradeOption = Grade?.data ?? []
+  const canChangeGradePage = !!Grade?.links?.next;
+  const GradePage = Grade?.meta?.currentPage;
+
+
+  /// subjects_ids 
+  const SubjectDisabled = !!subjects_ids && subjects_ids?.length > 0;
+  const { data: Subject, isLoading: isLoadingSubject } = useGetAllSubject({
+    grade_id: grade_id,
+    name: SubjectName,
+    page: SubjectCurrentPage
+  }, { enabled: GradeDisabled });
+  const SubjectOption = Subject?.data ?? []
+  const canChangeSubjectPage = !!Subject?.links?.next;
+  const SubjectPage = Subject?.meta?.currentPage;
+
+  /// units_ids 
+  const UnitDisabled = !!units_ids && units_ids?.length > 0;
+  const { data: Unit, isLoading: isLoadingUnit } = useGetAllUnit({
+    subjects_ids: subjects_ids,
+    name: UnitName,
+    page: UnitCurrentPage
+  }, { enabled: SubjectDisabled });
+  const UnitOption = Unit?.data ?? []
+  const canChangeUnitPage = !!Unit?.links?.next;
+  const UnitPage = Unit?.meta?.currentPage;
+
+  /// curriculums_ids 
+  const CurriculumDisabled = !!curriculums_ids && curriculums_ids?.length > 0;
+  const { data: Curriculum, isLoading: isLoadingCurriculum } = useGetAllCurriculum({
+    units_ids: units_ids,
+    name: CurriculumName,
+    page: CurriculumCurrentPage
+  }, { enabled: UnitDisabled });
+  const CurriculumOption = Curriculum?.data ?? []
+  const canChangeCurriculumPage = !!Curriculum?.links?.next;
+  const CurriculumPage = Curriculum?.meta?.currentPage;
+
+  /// lessons_ids 
+  const { data: Lesson, isLoading: isLoadingLesson } = useGetAllLesson({
+    curriculums_ids: curriculums_ids,
+    name: LessonName,
+    page: LessonCurrentPage
+  }, { enabled: CurriculumDisabled });
+  const LessonOption = Lesson?.data ?? []
+  const canChangeLessonPage = !!Lesson?.links?.next;
+  const LessonPage = Lesson?.meta?.currentPage;
+
+
+
+  useEffect(() => {
+    const GradeChildren = (subjects_ids && subjects_ids?.length > 0 || units_ids && units_ids?.length > 0 || curriculums_ids && curriculums_ids?.length > 0 || lessons_ids && lessons_ids?.length > 0);
+
+    if (!grade_id && GradeChildren) {
+      setFieldValue("subjects_ids", []);
+      setFieldValue("units_ids", []);
+      setFieldValue("curriculums_ids", []);
+      setFieldValue("lessons_ids", []);
+      return;
+    }
+    console.log(1);
+    
+    const SubjectChildren = (units_ids && units_ids?.length > 0 || curriculums_ids && curriculums_ids?.length > 0 || lessons_ids && lessons_ids?.length > 0)
+    console.log( subjects_ids && subjects_ids?.length < 1 && SubjectChildren);
+    
+    if (subjects_ids && subjects_ids?.length < 1 && SubjectChildren) {
+      console.log(1);
+      
+      setFieldValue("units_ids", []);
+      setFieldValue("curriculums_ids", []);
+      setFieldValue("lessons_ids", []);
+      return;
+    }
+    const UnitChildren = (curriculums_ids && curriculums_ids?.length > 0 || lessons_ids && lessons_ids?.length > 0)
+    if (units_ids && units_ids?.length < 1 && UnitChildren) {
+      setFieldValue("curriculums_ids", []);
+      setFieldValue("lessons_ids", []);
+      return;
+    }
+    const CurriculumChildren = (lessons_ids && lessons_ids?.length > 0)
+    if (curriculums_ids && curriculums_ids?.length < 1 && CurriculumChildren) {
+      setFieldValue("lessons_ids", []);
+      return;
+    }
+  }, [grade_id, subjects_ids, units_ids, curriculums_ids])
+
+
+  return (
+    <Row className="w-100">
+      <Col>
+        <ValidationField placeholder="name" label="name" name="name" />
+        <ValidationField placeholder="price" label="price" name="price" type="number" />
+        <FieldGroup array_name='configuration' title='configuration' />
+      </Col>
+      <Col>
+
+        {/* 
+              grade_id
+        */}
+        <ValidationField
+          searchBy="GradeName"
+          name="grade_id"
+          label="grade"
+          type="Search"
+          option={GradeOption}
+          isLoading={isLoadingGrade}
+          canChangePage={canChangeGradePage}
+          PageName={"GradeCurrentPage"}
+          page={GradePage}
+
+        />
+
+        {/* 
+              subjects_ids
+        */}
+
+        <ValidationField
+          searchBy="SubjectName"
+          name="subjects_ids"
+          label="subject"
+          type="Search"
+          option={SubjectOption}
+          isMulti
+          isLoading={isLoadingSubject}
+          canChangePage={canChangeSubjectPage}
+          PageName={"SubjectCurrentPage"}
+          page={SubjectPage}
+          disabled={!GradeDisabled}
+
+        />
+
+
+        {/* 
+              units_ids
+        */}
+
+        <ValidationField
+          searchBy="UnitName"
+          name="units_ids"
+          label="unit"
+          type="Search"
+          option={UnitOption}
+          isMulti
+          isLoading={isLoadingUnit}
+          canChangePage={canChangeUnitPage}
+          PageName={"UnitCurrentPage"}
+          page={UnitPage}
+          disabled={!SubjectDisabled}
+
+        />
+
+
+        {/* 
+              curriculums_ids
+        */}
+
+        <ValidationField
+          searchBy="CurriculumName"
+          name="curriculums_ids"
+          label="curriculum"
+          type="Search"
+          option={CurriculumOption}
+          isMulti
+          isLoading={isLoadingCurriculum}
+          canChangePage={canChangeCurriculumPage}
+          PageName={"CurriculumCurrentPage"}
+          page={CurriculumPage}
+          disabled={!UnitDisabled}
+
+        />
+
+
+
+        {/* 
+              lessons_ids
+        */}
+
+        <ValidationField
+          searchBy="LessonName"
+          name="lessons_ids"
+          label="lesson"
+          type="Search"
+          option={LessonOption}
+          isMulti
+          isLoading={isLoadingLesson}
+          canChangePage={canChangeLessonPage}
+          PageName={"LessonCurrentPage"}
+          page={LessonPage}
+          disabled={!CurriculumDisabled}
+
+        />
+
+      </Col>
+
+    </Row>
+  );
+};
+
+export default Form;
--- a/src/Pages/Package/PackageItem/Model/formUtil.ts
+++ b/src/Pages/Package/PackageItem/Model/formUtil.ts
@ -0,0 +1,32 @@
+import * as Yup from "yup";
+import { Package, PackageInitialValues } from "../../../../types/Package";
+import { arrayToObject } from "../../../../utils/arrayToObject";
+import { objectToArray } from "../../../../utils/objectToArray";
+export const getInitialValues = (objectToEdit: Partial<Package>): PackageInitialValues => {
+  console.log(objectToEdit,"objectToEdit");
+  
+  const configuration = Array.isArray(objectToEdit?.configuration) ? objectToEdit?.configuration : objectToArray(objectToEdit?.configuration)
+  return {
+    id: objectToEdit?.id ?? null,
+    name: objectToEdit?.name ?? null,
+    price: objectToEdit?.price ?? null,
+    grade_id: objectToEdit?.grade_id ?? null,
+    curriculums_ids: objectToEdit?.curriculums_ids ?? [],
+    lessons_ids: objectToEdit?.lessons_ids ?? [],
+    subjects_ids: objectToEdit?.subjects_ids ?? [],
+    units_ids: objectToEdit?.units_ids ?? [],
+    configuration: configuration ?? [{key:"",value:""}],
+  };
+};
+
+export const getValidationSchema = () => {
+  return Yup.object().shape({
+    name: Yup.string().required("validation.required"),
+    price: Yup.number().required("validation.required").typeError("validation.Must_be_a_number"),
+    grade_id: Yup.string().required("validation.required"),
+    curriculums_ids: Yup.array().of(Yup.number().required()).min(1,"validation.must_have_on_item").required("validation.required"),
+    lessons_ids: Yup.array().of(Yup.number().required()).min(1,"validation.must_have_on_item").required("validation.required"),
+    subjects_ids: Yup.array().of(Yup.number().required()).min(1,"validation.must_have_on_item").required("validation.required"),
+    units_ids: Yup.array().of(Yup.number().required()).min(1,"validation.must_have_on_item").required("validation.required"),
+  });
+};
--- a/src/Pages/Package/PackageItem/Page.tsx
+++ b/src/Pages/Package/PackageItem/Page.tsx
@ -0,0 +1,59 @@
+import { FaPlus } from "react-icons/fa";
+import useModalHandler from "../../../utils/useModalHandler";
+import { ModalEnum } from "../../../enums/Model";
+import { useTranslation } from "react-i18next";
+import { lazy, Suspense } from "react";
+import { Spin } from "antd";
+import { canAddPackage } from "../../../utils/hasAbilityFn";
+import useSetPageTitle from "../../../Hooks/useSetPageTitle";
+import { useDeletePackage } from "../../../api/package";
+import { useNavigate } from "react-router-dom";
+import { ABILITIES_ENUM } from "../../../enums/abilities";
+const Table = lazy(() => import("./Table"));
+
+const DeleteModalForm = lazy(
+  () => import("../../../Layout/Dashboard/DeleteModels"),
+);
+const SearchField = lazy(
+  () => import("../../../Components/DataTable/SearchField"),
+);
+
+const TableHeader = () => {
+  const { handel_open_model } = useModalHandler();
+  const [t] = useTranslation();
+  const navigate = useNavigate();
+  useSetPageTitle(t(`page_header.package`));
+  const deleteMutation = useDeletePackage();
+
+  return (
+    <div className="TableWithHeader">
+      <Suspense fallback={<Spin />}>
+        <header className="d-flex justify-content-between">
+          <SearchField
+            searchBy="name"
+            placeholder={t("practical.search_here")}
+          />
+
+          {canAddPackage && (
+            <div className="Selects">
+              <button
+                onClick={() => navigate(`/${ABILITIES_ENUM?.Package}/add`)}
+                className="add_button"
+              >
+                {t("models.add_package")} <FaPlus />
+              </button>
+            </div>
+          )}
+        </header>
+
+        <Table />
+        <DeleteModalForm
+          deleteMutation={deleteMutation}
+          ModelEnum={ModalEnum?.PACKAGE_DELETE}
+        />
+      </Suspense>
+    </div>
+  );
+};
+
+export default TableHeader;
--- a/src/Pages/Package/PackageItem/Table.tsx
+++ b/src/Pages/Package/PackageItem/Table.tsx
@ -0,0 +1,21 @@
+import React from "react";
+import DataTable from "../../../Layout/Dashboard/Table/DataTable";
+import { useColumns } from "./useTableColumns";
+import useSearchQuery from "../../../api/utils/useSearchQuery";
+import { useGetAllPackage } from "../../../api/package";
+import { useGetAllPackageItem } from "../../../api/packageItem";
+import { useParams } from "react-router-dom";
+import { ParamsEnum } from "../../../enums/params";
+const App: React.FC = () => {
+  const [searchQuery] = useSearchQuery("name");
+  const {package_id} = useParams<ParamsEnum>()
+  const response = useGetAllPackageItem({
+    name: searchQuery,
+    package_id:package_id,
+    pagination: true,
+  });
+
+  return <DataTable response={response} useColumns={useColumns} />;
+};
+
+export default App;
--- a/src/Pages/Package/PackageItem/index.tsx
+++ b/src/Pages/Package/PackageItem/index.tsx
@ -0,0 +1,15 @@
+import { useColumns } from "./useTableColumns";
+import Table from "./Table";
+
+import { FaPlus } from "react-icons/fa";
+
+import AddModalForm from "./Model/AddModel";
+import EditModalForm from "./Model/EditModel";
+
+export {
+  Table,
+  useColumns,
+  AddModalForm,
+  EditModalForm,
+  FaPlus,
+};
--- a/src/Pages/Package/PackageItem/useTableColumns.tsx
+++ b/src/Pages/Package/PackageItem/useTableColumns.tsx
@ -0,0 +1,66 @@
+import { TableColumnsType } from "antd";
+import { ModalEnum } from "../../../enums/Model";
+import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
+import { useModalState } from "../../../zustand/Modal";
+import { useTranslation } from "react-i18next";
+import { canDeletePackage,canEditPackage } from "../../../utils/hasAbilityFn";
+import ActionButtons from "../../../Components/Table/ActionButtons";
+import { useNavigate } from "react-router-dom";
+
+export const useColumns = () => {
+  const [t] = useTranslation();
+
+  const { setIsOpen } = useModalState((state) => state);
+  const navigate = useNavigate()
+  const { setObjectToEdit } = useObjectToEdit((state) => state);
+  const handelDelete = (record: any) => {
+    setObjectToEdit(record);
+    setIsOpen(ModalEnum?.PACKAGE_DELETE);
+  };
+  const handleEdit = (record: any) => {
+    setObjectToEdit(record);
+    setIsOpen(ModalEnum?.PACKAGE_EDIT);
+    navigate(`${record?.id}`)
+
+  };
+
+  const columns: TableColumnsType<any> = [
+    {
+      title: t("columns.id"),
+      dataIndex: "id",
+      key: "id",
+      align: "center",
+    },
+    {
+      title: t("columns.name"),
+      dataIndex: "name",
+      key: "name",
+      align: "center",
+    },
+    {
+      title: t("columns.price"),
+      dataIndex: "price",
+      key: "price",
+      align: "center",
+    },
+    {
+      title: "",
+      key: "actions",
+      align: "end",
+      width: "25vw",
+      render: (_text, record, index) => {
+        return (
+          <ActionButtons
+            canDelete={canEditPackage}
+            canEdit={canDeletePackage}
+            index={index}
+            onDelete={() => handelDelete(record)}
+            onEdit={() => handleEdit(record)}
+          />
+        );
+      },
+    },
+  ];
+
+  return columns;
+};
--- a/src/Pages/Package/Page.tsx
+++ b/src/Pages/Package/Page.tsx
@ -50,10 +50,8 @@ const TableHeader = () => {
        <Table />
        <DeleteModalForm
          deleteMutation={deleteMutation}
-          ModelEnum={ModalEnum?.Package_DELETE}
+          ModelEnum={ModalEnum?.PACKAGE_DELETE}
        />
-        {/* <AddModalForm /> */}
-        <EditModalForm />
      </Suspense>
    </div>
  );
--- a/src/Pages/Package/useTableColumns.tsx
+++ b/src/Pages/Package/useTableColumns.tsx
@ -1,25 +1,33 @@
 import { TableColumnsType } from "antd";
 import { ModalEnum } from "../../enums/Model";
-import { useObjectToEdit } from "../../zustand/ObjectToEditState";
+import { useObjectToEdit } from "../../zustand/ObjectToEditState";``
 import { useModalState } from "../../zustand/Modal";
 import { useTranslation } from "react-i18next";
-import { canDeletePackage,canEditPackage } from "../../utils/hasAbilityFn";
+import { canDeletePackage,canEditPackage, canShowPackage } from "../../utils/hasAbilityFn";
 import ActionButtons from "../../Components/Table/ActionButtons";
+import { useNavigate } from "react-router-dom";
+import { ABILITIES_ENUM } from "../../enums/abilities";

 export const useColumns = () => {
  const [t] = useTranslation();

  const { setIsOpen } = useModalState((state) => state);
-
+  const navigate = useNavigate()
  const { setObjectToEdit } = useObjectToEdit((state) => state);
  const handelDelete = (record: any) => {
    setObjectToEdit(record);
-    setIsOpen(ModalEnum?.Package_DELETE);
+    setIsOpen(ModalEnum?.PACKAGE_DELETE);
  };
  const handleEdit = (record: any) => {
    setObjectToEdit(record);
-    setIsOpen(ModalEnum?.Package_EDIT);
+    navigate(`${record?.id}`)
+
  };
+  // const handleShow = (record: any) => {
+  //   setObjectToEdit(record);
+  //   navigate(`${record?.id}/${ABILITIES_ENUM?.PACKAGE_ITEM}`)
+
+  // };

  const columns: TableColumnsType<any> = [
    {
@ -50,9 +58,11 @@ export const useColumns = () => {
          <ActionButtons
            canDelete={canEditPackage}
            canEdit={canDeletePackage}
+            // canShow={canShowPackage}
            index={index}
            onDelete={() => handelDelete(record)}
            onEdit={() => handleEdit(record)}
+            // onShow={() => handleShow(record)}
          />
        );
      },
--- a/src/Pages/ReSeller/Model/AddModel.tsx
+++ b/src/Pages/ReSeller/Model/AddModel.tsx
@ -0,0 +1,36 @@
+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 { useAddReSeller } from "../../../api/ReSeller";
+
+const AddModel: React.FC = () => {
+  const { mutate, status } = useAddReSeller();
+
+  const handleSubmit = (values: any) => {
+    const newValue = JSON.parse(JSON.stringify({...values}))
+    const location = {lat:newValue?.lat,lng:newValue?.lng}
+    mutate({
+      ...newValue,
+      location
+    });
+  };
+  return (
+    <>
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.RE_SELLER_ADD}
+        modelTitle="ReSeller"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues({})}
+        getValidationSchema={getValidationSchema}
+      >
+        <ModelForm />
+      </LayoutModel>
+    </>
+  );
+};
+
+export default AddModel;
--- a/src/Pages/ReSeller/Model/EditModel.tsx
+++ b/src/Pages/ReSeller/Model/EditModel.tsx
@ -0,0 +1,40 @@
+import React from "react";
+import { getInitialValues, getValidationSchema, getValidationSchemaEdit } from "./formUtil";
+import { ModalEnum } from "../../../enums/Model";
+import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
+import ModelForm from "./ModelForm";
+import { QueryStatusEnum } from "../../../enums/QueryStatus";
+import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
+import { useUpdateReSeller } from "../../../api/ReSeller";
+import { handelImageState } from "../../../utils/DataToSendImageState";
+
+const EditModel: React.FC = () => {
+  const { mutate, status } = useUpdateReSeller();
+  const { objectToEdit } = useObjectToEdit((state) => state);
+
+  const handleSubmit = (values: any) => {
+    const newValue = JSON.parse(JSON.stringify({...values}))
+    const location = {lat:newValue?.lat,lng:newValue?.lng}
+    mutate({
+      ...newValue,
+      location
+    });
+  };
+  return (
+    <>
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.RE_SELLER_EDIT}
+        modelTitle="ReSeller"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues(objectToEdit)}
+        getValidationSchema={getValidationSchemaEdit}
+        isAddModal={false}
+      >
+        <ModelForm isEdit={true} />
+      </LayoutModel>
+    </>
+  );
+};
+
+export default EditModel;
--- a/src/Pages/ReSeller/Model/ModelForm.tsx
+++ b/src/Pages/ReSeller/Model/ModelForm.tsx
@ -0,0 +1,30 @@
+import { Col, Row } from "reactstrap";
+import ValidationField from "../../../Components/ValidationField/ValidationField";
+import MyMap from "./field/MyMap";
+
+const Form = ({isEdit = false}:{isEdit?:boolean}) => {
+  return (
+    <Row className="w-100">
+      <Col>
+        <ValidationField name="first_name" placeholder="first_name" label="first_name" />
+        <ValidationField name="last_name" placeholder="last_name" label="last_name" />
+        <ValidationField name="username" placeholder="username" label="username" />
+      {!isEdit &&
+      <ValidationField name="password" placeholder="password" label="password"  />
+      }
+        
+       
+      </Col>
+<Col>
+<ValidationField name="contact_number1" placeholder="contact_number1" label="contact_number1" />
+        <ValidationField name="contact_number2" placeholder="contact_number2" label="contact_number2" />
+    
+<ValidationField name="lat" placeholder="lat" label="lat" />
+        <ValidationField name="lng" placeholder="lng" label="lng" />        
+<MyMap/>
+</Col>
+    </Row>
+  );
+};
+
+export default Form;
--- a/src/Pages/ReSeller/Model/field/MyMap.tsx
+++ b/src/Pages/ReSeller/Model/field/MyMap.tsx
@ -0,0 +1,81 @@
+import React, { useState, useEffect } from 'react';
+import { MapContainer, TileLayer, Marker, Popup, useMapEvents, useMap } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import L from 'leaflet';
+import { Input, Button } from 'antd';
+import { useFormikContext } from 'formik';
+import { ReSellerInitialValues } from '../../../../types/ReSeller';
+import { useTranslation } from 'react-i18next';
+
+// Fix for marker icon issue
+//@ts-ignore
+delete L.Icon.Default.prototype._getIconUrl;
+L.Icon.Default.mergeOptions({
+    iconRetinaUrl: 'https://unpkg.com/leaflet/dist/images/marker-icon-2x.png',
+    iconUrl: 'https://unpkg.com/leaflet/dist/images/marker-icon.png',
+    shadowUrl: 'https://unpkg.com/leaflet/dist/images/marker-shadow.png',
+});
+
+const LocationMarker: React.FC = () => {
+    const { setFieldValue } = useFormikContext<ReSellerInitialValues>();
+
+    useMapEvents({
+        click(e) {
+            const { lat, lng } = e.latlng;
+            setFieldValue('lat', lat); // Update latitude in Formik
+            setFieldValue('lng', lng); // Update longitude in Formik
+        },
+    });
+
+    return null;
+};
+
+const CenterMapOnPosition: React.FC<{ position: [number, number] }> = ({ position }) => {
+    const map = useMap();
+    
+    useEffect(() => {
+        map.setView(position, map.getZoom());
+    }, [position, map]);
+
+    return null;
+};
+
+const MyMap: React.FC = () => {
+    const [showMap, setShowMap] = useState(false);  // State to control map visibility
+    const [currentPosition] = useState<[number, number] | null>(null); // State to hold current position
+    const { values } = useFormikContext<ReSellerInitialValues>();
+    const { lat, lng } = values as any;
+    const position: [number, number] = [lat, lng];
+
+    const [t] = useTranslation()
+    return (
+        <div className='mb-4'>
+            <div className='MapInputs '>
+                <Button onClick={() => setShowMap(!showMap)} type="primary">
+                    {showMap ? `${t("practical.Hide")} ${t("practical.Map")}` : `${t("practical.Show")} ${t("practical.Map")}`}
+                </Button>
+            </div>
+                
+            {showMap && (
+                <MapContainer
+                    center={currentPosition || position} // Use currentPosition if available, otherwise fallback to form values
+                    zoom={13}
+                    style={{ height: "200px", width: "100%" }}
+                >
+                    <TileLayer
+                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                        
+
+                    />
+                    <Marker position={currentPosition || position}>
+                 
+                    </Marker>
+                    <LocationMarker />
+                    <CenterMapOnPosition position={currentPosition || position} />
+                </MapContainer>
+            )}
+        </div>
+    );
+};
+
+export default MyMap;
--- a/src/Pages/ReSeller/Model/formUtil.ts
+++ b/src/Pages/ReSeller/Model/formUtil.ts
@ -0,0 +1,67 @@
+import * as Yup from "yup";
+import { ReSeller, ReSellerInitialValues } from "../../../types/ReSeller";
+
+export const getInitialValues = (
+  objectToEdit: Partial<ReSeller>,
+): ReSellerInitialValues => {
+  console.log(objectToEdit,"objectToEdit");
+  
+  return {
+ 
+    id: objectToEdit?.id,
+    first_name: objectToEdit?.first_name ?? "",
+    last_name: objectToEdit?.last_name ?? "",
+    lat: objectToEdit?.location?.lat ?? 33.5138,
+    lng: objectToEdit?.location?.lng ?? 36.2765,
+    contact_number1:objectToEdit?.contact_number1  ?? null,
+    contact_number2:objectToEdit?.contact_number2  ?? null ,
+    username: objectToEdit?.user?.username  ?? null ,
+  };
+};
+
+export const getValidationSchema = () => {
+  // validate input
+  return Yup.object().shape({
+    first_name: Yup.string().required("validation.required"),
+    last_name: Yup.string().required("validation.required"),
+    contact_number1: Yup.string()
+    .matches(/^([0-9\s\-\+\(\)]*)$/, 'validation.Please enter a valid phone number (e.g., +1 123-456-7890)') // Regex for phone number
+    .min(10, "validation.must_be_at_least_10_characters_long") // Minimum length
+    .max(15, "validation.must_not_exceed_15_characters_long") // Maximum length
+    .required("validation.required"), // Required field
+
+contact_number2: Yup.string()
+    .matches(/^([0-9\s\-\+\(\)]*)$/, 'validation.Please enter a valid phone number (e.g., +1 123-456-7890)') // Regex for phone number
+    .min(10, "validation.must_be_at_least_10_characters_long") // Minimum length
+    .max(15, "validation.must_not_exceed_15_characters_long") // Maximum length
+    .required("validation.required"), // Required field
+    
+    password: Yup.string().min(8,"validation.Password_must_be_at_least_8_characters_long").required("validation.required"),
+    username: Yup.string().required("validation.required"),
+    lat: Yup.string().required("validation.required"),
+    lng: Yup.string().required("validation.required"),
+  });
+};
+
+export const getValidationSchemaEdit = () => {
+  // validate input
+  return Yup.object().shape({
+    first_name: Yup.string().required("validation.required"),
+    last_name: Yup.string().required("validation.required"),
+    contact_number1: Yup.string()
+    .matches(/^([0-9\s\-\+\(\)]*)$/, 'validation.Please enter a valid phone number (e.g., +1 123-456-7890)') // Regex for phone number
+    .min(10, "validation.must_be_at_least_10_characters_long") // Minimum length
+    .max(15, "validation.must_not_exceed_15_characters_long") // Maximum length
+    .required("validation.required"), // Required field
+
+contact_number2: Yup.string()
+    .matches(/^([0-9\s\-\+\(\)]*)$/, 'validation.Please enter a valid phone number (e.g., +1 123-456-7890)') // Regex for phone number
+    .min(10, "validation.must_be_at_least_10_characters_long") // Minimum length
+    .max(15, "validation.must_not_exceed_15_characters_long") // Maximum length
+    .required("validation.required"), // Required field
+    username: Yup.string().required("validation.required"),
+    lat: Yup.string().required("validation.required"),
+    lng: Yup.string().required("validation.required"),
+  });
+};
+
--- a/src/Pages/ReSeller/Page.tsx
+++ b/src/Pages/ReSeller/Page.tsx
@ -0,0 +1,44 @@
+import { useTranslation } from "react-i18next";
+import { lazy, Suspense } from "react";
+import { Spin } from "antd";
+import useSetPageTitle from "../../Hooks/useSetPageTitle";
+import { ModalEnum } from "../../enums/Model";
+import { useDeleteReSeller } from "../../api/ReSeller";
+import MyMap from "./Model/field/MyMap";
+
+const Table = lazy(() => import("./Table"));
+const AddModalForm = lazy(() => import("./Model/AddModel"));
+const EditModalForm = lazy(() => import("./Model/EditModel"));
+const DeleteModalForm = lazy(
+  () => import("../../Layout/Dashboard/DeleteModels"),
+);
+
+const TableHeader = () => {
+  const [t] = useTranslation();
+  const deleteMutation = useDeleteReSeller();
+
+  useSetPageTitle(t(`page_header.ReSeller`));
+
+  return (
+    <div className="TableWithHeader">
+      <Suspense fallback={<Spin />}>
+        <header>
+          <h6>{t("models.ReSeller")}</h6>
+        </header>
+        <Table />
+        <AddModalForm />
+        <EditModalForm />
+
+
+        <DeleteModalForm
+          deleteMutation={deleteMutation}
+          ModelEnum={ModalEnum?.RE_SELLER_DELETE}
+        />
+      </Suspense>
+
+
+    </div>
+  );
+};
+
+export default TableHeader;
--- a/src/Pages/ReSeller/Table.tsx
+++ b/src/Pages/ReSeller/Table.tsx
@ -0,0 +1,12 @@
+import { useColumns } from "./useTableColumns";
+import React from "react";
+import DataTable from "../../Layout/Dashboard/Table/DataTable";
+import { useGetAllReSeller } from "../../api/ReSeller";
+
+const App: React.FC = () => {
+  const response = useGetAllReSeller({ pagination: true });
+
+  return <DataTable response={response} useColumns={useColumns} />;
+};
+
+export default App;
--- a/src/Pages/ReSeller/useTableColumns.tsx
+++ b/src/Pages/ReSeller/useTableColumns.tsx
@ -0,0 +1,98 @@
+import { TableColumnsType } from "antd";
+import { ReSeller } from "../../types/ReSeller";
+import { FaPlus } from "react-icons/fa";
+import useModalHandler from "../../utils/useModalHandler";
+import { ModalEnum } from "../../enums/Model";
+import { useObjectToEdit } from "../../zustand/ObjectToEditState";
+import { useTranslation } from "react-i18next";
+import { ABILITIES_ENUM } from "../../enums/abilities";
+import { useNavigate } from "react-router-dom";
+import {
+  canAddReSeller,
+  canDeleteReSeller,
+  canEditReSeller,
+  canShowReSeller,
+} from "../../utils/hasAbilityFn";
+import ActionButtons from "../../Components/Table/ActionButtons";
+import ColumnsImage from "../../Components/Columns/ColumnsImage";
+
+export const useColumns = () => {
+  const { handel_open_model } = useModalHandler();
+
+  const { setObjectToEdit } = useObjectToEdit((state) => state);
+  const navigate = useNavigate();
+
+
+  const handelDelete = (data: ReSeller) => {
+    setObjectToEdit(data);
+    handel_open_model(ModalEnum?.RE_SELLER_DELETE);
+  };
+
+  const handleEdit = (record: ReSeller) => {
+    setObjectToEdit(record);
+    handel_open_model(ModalEnum?.RE_SELLER_EDIT);
+  };
+  const [t] = useTranslation();
+
+  const columns: TableColumnsType<ReSeller> = [
+    {
+      title: t("columns.id"),
+      dataIndex: "id",
+      key: "id",
+      align: "center",
+      render: (_text, record) => record?.id,
+    },
+    {
+      title: `${t("columns.first_name")}`,
+      dataIndex: "first_name",
+      key: "first_name",
+      align: "center",
+      render: (_text, record) => record?.first_name,
+    },
+    {
+      title: `${t("columns.last_name")}`,
+      dataIndex: "last_name",
+      key: "last_name",
+      align: "center",
+      render: (_text, record) => record?.last_name,
+    },
+    {
+      title: `${t("columns.username")}`,
+      dataIndex: "username",
+      key: "username",
+      align: "center",
+      render: (_text, record) => record?.user?.username,
+    },
+    {
+      title: canAddReSeller ? (
+        <button
+          onClick={() => handel_open_model(ModalEnum?.RE_SELLER_ADD)}
+          className="add_button"
+        >
+          {t("practical.add")} {t("models.ReSeller")} <FaPlus />
+        </button>
+      ) : (
+        ""
+      ),
+
+      key: "actions",
+      align: "end",
+      width: "25vw",
+      render: (_text, record, index) => {
+        return (
+          <ActionButtons
+            canDelete={canDeleteReSeller}
+            canEdit={canEditReSeller}
+          
+            index={index}
+            onDelete={() => handelDelete(record)}
+            onEdit={() => handleEdit(record)}
+          
+          />
+        );
+      },
+    },
+  ];
+
+  return columns;
+};
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@ -1,5 +1,5 @@
 import { TCrudRoute, TMenuItem } from "./types/App";
-import { FaHome, FaMoneyBill } from "react-icons/fa";
+import { FaHome, FaKey, FaMoneyBill, FaSellcast, FaUserGraduate } from "react-icons/fa";
 import { LuPackage } from "react-icons/lu";
 import React from "react";
 const Dummy = React.lazy(() => import("./Pages/Home/Dummy"));
@ -10,6 +10,8 @@ const Tags = React.lazy(() => import("./Pages/Tags/Page"));
 const Grade = React.lazy(() => import("./Pages/Grade/Page"));
 const Package = React.lazy(() => import("./Pages/Package/Page"));
 const Curriculum = React.lazy(() => import("./Pages/Curriculum/Page"));
+const PackageItemPage = React.lazy(() => import("./Pages/Package/PackageItem/Page"));
+const ReSeller = React.lazy(() => import("./Pages/ReSeller/Page"));

 const Unit = React.lazy(() => import("./Pages/Unit/Page"));
 const Lesson = React.lazy(() => import("./Pages/lesson/Page"));
@ -19,6 +21,10 @@ const EditQuestionPage = React.lazy(() => import("./Pages/question/EditPage"));
 const AddPackagePage = React.lazy(() => import("./Pages/Package/Model/AddModel"));
 const EditPackagePage = React.lazy(() => import("./Pages/Package/Model/EditModel"));

+
+const AddPackageItemPage = React.lazy(() => import("./Pages/Package/PackageItem/Model/AddModel"));
+const EditPackageItemPage = React.lazy(() => import("./Pages/Package/PackageItem/Model/EditModel"));
+
 import { hasAbility } from "./utils/hasAbility";
 import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "./enums/abilities";
 import { ParamsEnum } from "./enums/params";
@ -38,7 +44,7 @@ export const menuItems: TMenuItem[] = [
  {
    header: "page_header.grade",
    element: <Grade />,
-    icon: <FaMoneyBill />,
+    icon: <FaUserGraduate />,
    text: "sidebar.grade",
    path: `/${ABILITIES_ENUM?.GRADE}`,
    abilities: ABILITIES_ENUM?.GRADE,
@ -68,13 +74,23 @@ export const menuItems: TMenuItem[] = [
  {
    header: "page_header.tags",
    element: <Tags />,
-    icon: <FaMoneyBill />,
+    icon: <FaKey />,
    text: "sidebar.tags",
    path: `/${ABILITIES_ENUM?.TAG}`,
    abilities: ABILITIES_ENUM?.TAG,
    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
    prevPath: 0,
  },
+  {
+    header: "page_header.reSeller",
+    element: <ReSeller />,
+    icon: <FaSellcast />,
+    text: "sidebar.reSeller",
+    path: `/${ABILITIES_ENUM?.RE_SELLER}`,
+    abilities: ABILITIES_ENUM?.RE_SELLER,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 0,
+  },
 ];

 export const CrudRoute: TCrudRoute[] = [
@ -143,16 +159,44 @@ export const CrudRoute: TCrudRoute[] = [
    path: `/${ABILITIES_ENUM?.Package}/add`,
    abilities: ABILITIES_ENUM?.Package,
    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
-    prevPath: 0,
+    prevPath: 1,
  },
  {
    header: "page_header.edit_package",
    element: <EditPackagePage />,
-    path: `/${ABILITIES_ENUM?.Package}/add`,
+    path: `/${ABILITIES_ENUM?.Package}/:${ParamsEnum?.PACKAGE_ID}`,
    abilities: ABILITIES_ENUM?.Package,
    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
-    prevPath: 0,
+    prevPath: 1,
  },
+
+
+  {
+    header: "page_header.package_item",
+    element: <PackageItemPage />,
+    path: `/${ABILITIES_ENUM?.Package}/:${ParamsEnum?.PACKAGE_ID}/${ABILITIES_ENUM?.PACKAGE_ITEM}`,
+    abilities: ABILITIES_ENUM?.PACKAGE_ITEM,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 1,
+  },
+ 
+  {
+    header: "page_header.add_package_item",
+    element: <AddPackageItemPage />,
+    path: `/${ABILITIES_ENUM?.Package}/:${ParamsEnum?.PACKAGE_ID}/${ABILITIES_ENUM?.PACKAGE_ITEM}/add`,
+    abilities: ABILITIES_ENUM?.PACKAGE_ITEM,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 1,
+  },
+  {
+    header: "page_header.edit_package_item",
+    element: <EditPackageItemPage />,
+    path: `/${ABILITIES_ENUM?.Package}/:${ParamsEnum?.PACKAGE_ID}/${ABILITIES_ENUM?.PACKAGE_ITEM}/:${ParamsEnum?.PACKAGE_ITEM_ID}`,
+    abilities: ABILITIES_ENUM?.PACKAGE_ITEM,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 1,
+  },
+
 ];

 export const AppRoutes: Record<string, string> = Object.fromEntries(
--- a/src/Styles/Pages/Map.scss
+++ b/src/Styles/Pages/Map.scss
@ -0,0 +1,9 @@
+.MapInputs{
+    display: flex;
+    gap: 20px;
+    margin-bottom: 20px;
+}
+ .leaflet-right{
+    display: none;
+
+}
--- a/src/Styles/Pages/index.scss
+++ b/src/Styles/Pages/index.scss
@ -10,3 +10,4 @@
@import "./subject.scss";
@import "./Marks.scss";
@import "./exercise.scss";
+@import './Map.scss';
--- a/src/api/ReSeller.ts
+++ b/src/api/ReSeller.ts
@ -0,0 +1,21 @@
+import useAddMutation from "./helper/useAddMutation";
+import useDeleteMutation from "./helper/useDeleteMutation";
+import useGetQuery from "./helper/useGetQuery";
+import useUpdateMutation from "./helper/useUpdateMutation";
+
+const API = {
+  GET: "/reseller",
+  ADD: "/reseller",
+  DELETE: "/reseller",
+  UPDATE: "/reseller",
+};
+
+const KEY = "ReSeller";
+
+export const useGetAllReSeller = (params?: any, options?: any) =>
+  useGetQuery(KEY, API.GET, params, options);
+export const useAddReSeller = () => useAddMutation(KEY, API.ADD);
+export const useUpdateReSeller = (params?: any) =>
+  useUpdateMutation(KEY, API.GET);
+export const useDeleteReSeller = (params?: any) =>
+  useDeleteMutation(KEY, API.DELETE);
--- a/src/api/config.ts
+++ b/src/api/config.ts
@ -1,4 +1,4 @@
-export const BaseURL = "http://127.0.0.1:8000/api/";
+export const BaseURL = "https://nerd-back.point-dev.net/api/";
 // export const BaseURL = "http://127.0.0.1:8000/api/";

 // export const BaseURL = "http://192.168.1.120:8000/api/";
--- a/src/api/packageItem.ts
+++ b/src/api/packageItem.ts
@ -0,0 +1,20 @@
+import useAddMutation from "./helper/useAddMutation";
+import useDeleteMutation from "./helper/useDeleteMutation";
+import useGetQuery from "./helper/useGetQuery";
+import useUpdateMutation from "./helper/useUpdateMutation";
+
+const API = {
+  GET: "/packageItem",
+  ADD: "/packageItem",
+  DELETE: "/packageItem",
+  UPDATE: "/packageItem",
+};
+
+const KEY = "PackageItem";
+
+export const useGetAllPackageItem = (params?: any, options?: any) =>
+  useGetQuery(KEY, API.GET, params, options);
+export const useAddPackageItem = () => useAddMutation(KEY, API.ADD);
+export const useUpdatePackageItem = (params?: any) => useUpdateMutation(KEY, API.GET);
+export const useDeletePackageItem = (params?: any) =>
+  useDeleteMutation(KEY, API.DELETE);
--- a/src/enums/Model.ts
+++ b/src/enums/Model.ts
@ -155,8 +155,12 @@ export enum ModalEnum {

   ///package

-   Package_EDIT = "Package.edit",
-   Package_ADD = "Package.add",
-   Package_DELETE = "Package.delete",
+   PACKAGE_EDIT = "Package.edit",
+   PACKAGE_ADD = "Package.add",
+   PACKAGE_DELETE = "Package.delete",

+   /// ReSeller
+   RE_SELLER_EDIT = "ReSeller.edit",
+   RE_SELLER_ADD = "ReSeller.add",
+   RE_SELLER_DELETE = "ReSeller.delete",
 }
--- a/src/enums/abilities.ts
+++ b/src/enums/abilities.ts
@ -43,6 +43,8 @@ export enum ABILITIES_ENUM {
  QUESTION = "Question",
  ADMIN = "admin",
  CURRICULUM = "curriculum",
+  PACKAGE_ITEM = "package_item",
+  RE_SELLER = "ReSeller"
  ////
 }

--- a/src/enums/params.ts
+++ b/src/enums/params.ts
@ -10,5 +10,7 @@ export enum ParamsEnum {
  UNIT_ID = "unit_id",
  LESSON_ID = "lesson_id",
  QUESTION_ID = "question_id",
+  PACKAGE_ID = "package_id",
  CHILDREN_QUESTION_ID = "children_question_id",
+  PACKAGE_ITEM_ID= "package_item_id"
 }
--- a/src/translate/ar.json
+++ b/src/translate/ar.json
@ -13,6 +13,7 @@
    "Email_is_required": "البريد الإلكتروني مطلوب",
    "Password_is_required": "كلمة المرور مطلوبة",
    "Password_must_be_at_least_8_characters_long": "يجب أن تكون كلمة المرور مكونة من 8 أحرف على الأقل",
+    "must_be_at_least_10_characters_long":"يجب أن تكون مكونة من  10 أحرف على الأقل",
    "Nationality_is_required": "الجنسية مطلوبة",
    "Address_is_required": "العنوان مطلوب",
    "Place_of_birth_is_required": "مكان الميلاد مطلوب",
@ -46,7 +47,9 @@
    "Due_date_must_be_before_assigning_date": "يجب أن يكون تاريخ الاستحقاق بعد تاريخ التعيين",
    "grade_to_pass_must_be_less_than_max_grade": "يجب أن تكون درجة النجاح أقل من الحد الأقصى للدرجة",
    "max_mark_must_be_greater_than_min_mark_to_pass": "يجب ان تكون اكبر من علامة النجاح",
-    "Sorry, the question must have at least one option": "عذرًا، يجب أن يحتوي السؤال على خيار واحد على الأقل"
+    "Sorry, the question must have at least one option": "عذرًا، يجب أن يحتوي السؤال على خيار واحد على الأقل",
+    "must_have_on_item":"يجب ان يحتوي على عنصر واحد على الاقل",
+    "Please enter a valid phone number (e.g., +1 123-456-7890)":"يرجى إدخال رقم هاتف صالح (مثل: +1 123-456-7890)"
  },
  "header": {
    "register_students": "تسجيل الطلاب",
@ -107,7 +110,9 @@
    "malty_exercise": "تمرين متعدد",
    "add_new_question": "اضافة سؤال جديد",
    "exercise": "تمارين",
-    "icon": "الايقونة"
+    "icon": "الايقونة",
+    "add_new_package":"اضافة حزمة جديدة",
+    "configuration":"إعدادات"
  },
  "columns": {
    "id": "الرقم التعريفي",
@ -157,7 +162,8 @@
    "question_options_count": "عدد الخيارات",
    "canAnswersBeShuffled":"يمكن خلط الإجابات",
    "price":"السعر",
-    "grade_id":"رقم تعريف الدرجة"
+    "grade_id":"رقم تعريف الدرجة",
+    "first_name":"الاسم الأول"
  },
  "practical": {
    "to_confirm_deletion_please_re_enter": "لتأكيد الحذف، يرجى إعادة الإدخال",
@ -199,7 +205,15 @@
    "Are you sure you want to go back and not save any changes?": "هل أنت متأكد أنك تريد العودة وعدم حفظ أي تغييرات؟",
    "accept_back": "قبول العودة ",
    "accept": "قبول ",
-    "to_confirm_deletion_please_re_enter_id": "يرجى اعادة ادخال رقم التعريف"
+    "to_confirm_deletion_please_re_enter_id": "يرجى اعادة ادخال رقم التعريف",
+    "add_new":"اضافة عنصر",
+    "delete_last":"حذف عنصر",
+    "key":"الاسم",
+    "value":"القيمة",
+    "delete_this_item":"حذف هذا العنصر",
+    "Hide":"اخفاء",
+    "Show":"عرض",
+    "Map":"خريطة"
  },
  "Table": {
    "header": "",
@ -264,7 +278,8 @@
    "curriculum": "مقرر",
    "package":"حزمة",
    "package_details":"تفاصيل الحزمة",
-    "add_package":"اضافة حزمة"
+    "add_package":"اضافة حزمة",
+    "ReSeller":"بائع"
  },
  "education_class_actions": {
    "Student_Records": "سجلات الطلاب",
@ -365,7 +380,17 @@
    "question": "السؤال",
    "id": "الرقم التعريفي",
    "canAnswersBeShuffled": "يمكن خلط الإجابات",
-    "hint": "تَلمِيح"
+    "hint": "تَلمِيح",
+    "grade":"الدرجات",
+    "subject":"المادة",
+    "curriculum":"مقرر",
+    "lesson":"الدرس",
+    "unit":"الوحدة",
+    "contact_number1":"رقم التواصل 1",
+    "contact_number2":"رقم التواصل 2",
+    "lat":"خط العرض",
+    "lng":" خط الطول "
+
  },

  "select": {
@ -668,7 +693,8 @@
    "tags": "كلمات مفتاحية",
    "grade": "الدرجات",
    "curriculum": "مقرر",
-    "package":"حزمة"
+    "package":"حزمة",
+     "reSeller":"البائع"
  },
  "message": {
    "some_thing_went_wrong": "حدث خطأ ما",
@ -725,6 +751,7 @@
    "edit_Question": "لوحة القيادة /تعديل اسئلة ",
    "grade": "لوحة القيادة /الدرجات  ",
    "curriculum": "لوحة القيادة / تعديل مقرر   ",
-    "package":"حزمة"
+    "package":"لوحة القيادة / الحزم   ",
+    "ReSeller":"لوحة القيادة / البائع   "
  }
 }
--- a/src/types/Package.ts
+++ b/src/types/Package.ts
@ -0,0 +1,30 @@
+import { Nullable } from "./App";
+
+// Define the Teacher interface
+
+export interface Package {
+  id: number;
+  name: string; 
+  price: string;
+  grade_id: number;
+  subjects_ids: any[];
+  units_ids: any[];
+  curriculums_ids: any[];
+  lessons_ids: any[];
+  configuration:{}
+ 
+}
+
+export interface InitialValues {
+    id: number;
+    name: string; 
+    price: string;
+    grade_id: number;
+    subjects_ids: any[];
+    units_ids: any[];
+    curriculums_ids: any[];
+    lessons_ids: any[];
+    configuration:{key:string,value:string}[]
+}
+
+export type PackageInitialValues = Partial<Nullable<InitialValues>>;
--- a/src/types/ReSeller.ts
+++ b/src/types/ReSeller.ts
@ -0,0 +1,50 @@
+import { Nullable } from "./App";
+
+// Define the Teacher interface
+
+
+interface ReSellerUser {
+  id: number;
+  username: string;
+  phone_number: string | null;
+  type: 'reseller' | 'other'; // Specify other types if needed
+}
+
+interface ReSellerLocation {
+  lat: string;
+  lng: string;
+}
+
+interface ContactInfo {
+  contact_number1: string;
+  contact_number2: string;
+  card_number: string | null;
+}
+
+
+export interface ReSeller {
+  id: number;
+  user: ReSellerUser;
+  first_name: string;
+  last_name: string;
+  location: ReSellerLocation;
+  contact_info: ContactInfo;
+  contact_number1 : string |  number 
+  contact_number2 : string |  number 
+}
+
+export interface InitialValues {
+  id: number;
+  user: ReSellerUser;
+  first_name: string;
+  last_name: string;
+  location: ReSellerLocation;
+  lat: string | Number;
+  lng: string | Number;
+  contact_info: ContactInfo;
+  contact_number1 : string |  number 
+contact_number2 : string |  number 
+username : string
+}
+
+export type ReSellerInitialValues = Partial<Nullable<InitialValues>>;
--- a/src/utils/arrayToObject.ts
+++ b/src/utils/arrayToObject.ts
@ -0,0 +1,15 @@
+ interface KeyValue {
+    key: string;
+    value: string;
+}
+
+// Function to convert an array of key-value objects to an object
+export function arrayToObject(arr: KeyValue[] | null | undefined ): Record<string, string> {
+    if(!arr){
+        return {}
+    }
+    return arr.reduce((obj, item) => {
+        obj[item.key] = item.value;
+        return obj;
+    }, {} as Record<string, string>);
+}
--- a/src/utils/hasAbilityFn.ts
+++ b/src/utils/hasAbilityFn.ts
@ -583,3 +583,24 @@ export const canShowPackage = hasAbility(
  ABILITIES_ENUM.Package,
  ABILITIES_VALUES_ENUM.SHOW,
 );
+
+
+/// ReSeller
+
+export const canAddReSeller = hasAbility(
+  ABILITIES_ENUM.RE_SELLER,
+  ABILITIES_VALUES_ENUM.STORE,
+);
+
+export const canEditReSeller = hasAbility(
+  ABILITIES_ENUM.RE_SELLER,
+  ABILITIES_VALUES_ENUM.UPDATE,
+);
+export const canDeleteReSeller = hasAbility(
+  ABILITIES_ENUM.RE_SELLER,
+  ABILITIES_VALUES_ENUM.DELETE,
+);
+export const canShowReSeller = hasAbility(
+  ABILITIES_ENUM.RE_SELLER,
+  ABILITIES_VALUES_ENUM.SHOW,
+);
--- a/src/utils/objectToArray.ts
+++ b/src/utils/objectToArray.ts
@ -0,0 +1,14 @@
+
+interface KeyValue {
+    key: string;
+    value: string;
+}
+export function objectToArray(obj: Record<string, string> | null | undefined): KeyValue[] {
+    if(!obj){
+        return [{key:"",value:""}]
+    }
+    return Object.entries(obj).map(([key, value]) => ({
+        key,
+        value
+    }));
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -14,7 +14,10 @@
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["node"]
+    
  },
-  "include": ["src"]
+  "include": ["src"],
+
 }
Author	SHA1	Message	Date
karimaldeen	8f993912fc	end seller page	2024-08-19 15:13:54 +03:00
karimaldeen	7e8fa6431c	add package item	2024-08-18 16:07:34 +03:00
karimaldeen	5e0e0afd01	end package	2024-08-18 15:25:56 +03:00