.vscode/settings.json

@@ -10,7 +10,6 @@
     "Groupbutton",
     "handelnavigate",
     "Karim",
-    "latlng",
     "queryqlent",
     "registraion",
     "SENDNOTIFICATION",

package.json

@@ -18,7 +18,6 @@
     "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",
@@ -27,7 +26,6 @@
     "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",
@@ -68,7 +66,6 @@
     "@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",

src/Components/ValidationField/Ui/KarimSpinner.tsx

@@ -0,0 +1,24 @@
+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;

src/Components/ValidationField/Ui/SearchBar.scss

@@ -0,0 +1,37 @@
+.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;
+  }
+}

src/Components/ValidationField/Ui/SearchBar.tsx

@@ -0,0 +1,45 @@
+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;

src/Components/ValidationField/ValidationField.tsx

@@ -6,16 +6,17 @@ 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,
@@ -30,11 +31,12 @@ const components: { [key: string]: React.FC<any> } = {
   MaltyFile: MaltyFile,
   Checkbox: CheckboxField,
   NumberFormate: NumberFormate,
+  Number: NumberField,
 };
 
 const ValidationField: React.FC<ValidationFieldProps> = React.memo(
-  ({ type = "text", ...otherProps }) => {
+  ({ type, ...otherProps }: any) => {
-    const Component = components[type ?? ("text" as ValidationFieldType)];
+    const Component = components[type as ValidationFieldType];
 
     if (!Component) {
       return <Default {...otherProps} />;

src/Components/ValidationField/View/CheckboxField.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import useFormField from "../../../Hooks/useFormField";
-import { Checkbox } from "antd";
+import { Checkbox, Form } from "antd";
-import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
+import { getNestedValue } from "../utils/getNestedValue";
 const CheckboxField = ({
   name,
   label,
@@ -13,21 +13,25 @@ const CheckboxField = ({
 }: any) => {
   const { t, formik, isError, errorMsg } = useFormField(name, props);
   const CheckboxhandleChange = (value: any) => {
-    formik.setFieldValue(name, value?.target?.checked);
+    formik.setFieldValue(name, value?.target?.checked ? 1 : 0);
   };
 
   return (
-    <div className={Group ? "d-inline mt-3 Checkbox" : ``}>
+    <div className={Group ? "d-inline mt-3 Checkboxs" : ``}>
-      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
         <Checkbox
           onChange={onChange || CheckboxhandleChange}
           disabled={isDisabled}
-          checked={formik.values?.[name] ?? false}
+          checked={formik.values?.[name] === 1}
           className={className}
         >
           {t(`input.${label ? label : name}`)}
         </Checkbox>
-      </ValidationFieldContainer>
+      </Form.Item>
     </div>
   );
 };

src/Components/ValidationField/View/DataRange.tsx

@@ -3,8 +3,6 @@ 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;
 
@@ -26,16 +24,28 @@ const DataRange = ({
   };
   return (
     <div className="ValidationField w-100 ">
-      <ValidationFieldLabel
+      {no_label ? (
-        name={name}
+        <label htmlFor={name} className="text">
-        label={label}
+          <span>empty</span>
-        label_icon={label_icon}
+        </label>
-        no_label={no_label}
+      ) : label_icon ? (
-        placeholder={placeholder}
+        <div className="LabelWithIcon">
-        t={t}
+          <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>
+      )}
 
-      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
         <RangePicker
           placeholder={placeholder}
           size="large"
@@ -45,9 +55,8 @@ const DataRange = ({
           onChange={onChange || onCalendarChange}
           disabled={isDisabled}
           defaultValue={formik.values[name]}
-          id={name}
         />
-      </ValidationFieldContainer>
+      </Form.Item>
     </div>
   );
 };

src/Components/ValidationField/View/Date.tsx

@@ -3,9 +3,6 @@ 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,
@@ -24,21 +21,34 @@ const Date = ({
   const FormikValue = formik.values[name];
   const onCalendarChange = (value: any) => {
     formik.setFieldValue(name, value);
+    // console.log(value,"value ");
   };
 
-  const Formatter = [DateEnum?.FORMATE, DateEnum?.FORMATE2];
+  const Formater = "YYYY/MM/DD";
   return (
     <div className="ValidationField w-100 ">
-      <ValidationFieldLabel
+      {no_label ? (
-        name={name}
+        <label htmlFor={name} className="text">
-        label={label}
+          <span>empty</span>
-        label_icon={label_icon}
+        </label>
-        no_label={no_label}
+      ) : label_icon ? (
-        placeholder={placeholder}
+        <div className="LabelWithIcon">
-        t={t}
+          <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>
+      )}
 
-      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
         <DatePicker
           picker={picker}
           placeholder={t(`input.${placeholder}`)}
@@ -48,11 +58,10 @@ const Date = ({
           size="large"
           onChange={onChange || onCalendarChange}
           disabled={isDisabled}
-          format={Formatter}
+          format={Formater}
-          id={name}
         />
         {/* <DatePicker onChange={onChange} /> */}
-      </ValidationFieldContainer>
+      </Form.Item>
     </div>
   );
 };

src/Components/ValidationField/View/Default.tsx

@@ -1,10 +1,9 @@
-import { Input } from "antd";
+import { Form, Input } 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 { ValidationFieldPropsInput } from "../utils/types";
-import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
-import { FieldProps } from "../utils/types";
 
 const Default = ({
   name,
@@ -15,34 +14,52 @@ const Default = ({
   type,
   no_label,
   label_icon,
+  label2,
   ...props
-}: any) => {
+}: ValidationFieldPropsInput) => {
   const { errorMsg, isError, t } = useFormField(name, props);
 
   return (
     <div className="ValidationField w-100">
-      <ValidationFieldLabel
+      {label2 ? (
-        name={name}
+        <label htmlFor={name} className="text">
-        label={label}
+          {label2}
-        label_icon={label_icon}
+        </label>
-        no_label={no_label}
+      ) : no_label ? (
-        placeholder={placeholder}
+        <label htmlFor={name} className="text">
-        t={t}
+          <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>
+      )}
 
-      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
         <Field
           as={Input}
           type={type ?? "text"}
-          placeholder={t(`input.${placeholder || label || name}`)}
+          placeholder={t(
+            `input.${placeholder ? placeholder : label ? label : name}`,
+          )}
           name={name}
-          id={name}
           disabled={isDisabled}
           size="large"
           {...(type === "number" && { min: 0 })}
           {...props}
         />
-      </ValidationFieldContainer>
+      </Form.Item>
     </div>
   );
 };

src/Components/ValidationField/View/DropFile.tsx.tsx

@@ -3,6 +3,7 @@ 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];
 
@@ -11,7 +12,7 @@ const DropFile = ({
   label,
   onChange,
   isDisabled,
-  placeholder,
+  placholder,
   className,
   props,
   no_label,
@@ -22,7 +23,7 @@ const DropFile = ({
 
   const FormikValue =
     typeof FormikName === "string"
-      ? FormikName
+      ? ImageBaseURL + FormikName
       : FormikName instanceof File
         ? URL.createObjectURL(FormikName)
         : "";
@@ -70,7 +71,6 @@ const DropFile = ({
         showUploadList={false}
         customRequest={customRequest}
         onChange={onChange || handleChange}
-        id={name}
       >
         {imageUrl ? (
           <img

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 React, { useMemo } from "react";
+import { useMemo } from "react";
 
 const File = ({
   name,
   label,
   onChange,
   isDisabled,
-  placeholder,
+  placholder,
   className,
   props,
 }: any) => {
@@ -16,29 +16,29 @@ const File = ({
   let imageUrl = formik?.values?.[name] ?? null;
 
   const fileList: UploadFile[] = useMemo(() => {
-    if (!imageUrl) {
+    if (!imageUrl) return [];
-      return [];
-    }
 
     return [
       typeof imageUrl === "string"
         ? {
             uid: "-1",
-            name: "",
+            name: "uploaded-image",
             status: "done",
             url: imageUrl,
             thumbUrl: imageUrl,
           }
         : {
             uid: imageUrl.uid || "-1",
-            name: imageUrl.name || "",
+            name: imageUrl.name || "uploaded-image",
             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,15 +62,12 @@ const File = ({
         onChange={onChange || FilehandleChange}
         customRequest={customRequest}
         className={` w-100`}
-        id={name}
       >
         <Button
           className={isError ? "isError w-100 " : " w-100"}
           icon={<UploadOutlined />}
         >
-          {placeholder
+          {placholder ?? t("input.Click_to_upload_the_image")}
-            ? t(`input.${placeholder}`)
-            : t("input.Click_to_upload_the_image")}
         </Button>
         <div className="Error_color"> {isError ? "required" : ""}</div>
         {errorMsg}
@@ -79,4 +76,4 @@ const File = ({
   );
 };
 
-export default React.memo(File);
+export default File;

src/Components/ValidationField/View/LocalSearch.tsx

@@ -1,9 +1,8 @@
-import { Select } from "antd";
+import { Form, 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,
@@ -14,9 +13,9 @@ const LocalSelectField = ({
   isMulti,
   onChange,
   className,
+  props,
   no_label,
   label_icon,
-  ...props
 }: any) => {
   const { errorMsg, isError, t, formik } = useFormField(name, props);
 
@@ -30,6 +29,13 @@ 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);
@@ -41,21 +47,35 @@ const LocalSelectField = ({
 
   return (
     <div className="ValidationField w-100">
-      <ValidationFieldLabel
+      {no_label ? (
-        name={name}
+        <label htmlFor={name} className="text">
-        label={label}
+          <span>empty</span>
-        label_icon={label_icon}
+        </label>
-        no_label={no_label}
+      ) : label_icon ? (
-        placeholder={placeholder}
+        <div className="LabelWithIcon">
-        t={t}
+          <label htmlFor={name} className="text">
-      />
+            {t(`input.${label ? label : name}`)}
-      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
+          </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 : ""}
+      >
         <Select
-          placeholder={t(`input.${placeholder || label || name}`)}
+          placeholder={t(
+            `input.${placeholder ? placeholder : label ? label : name}`,
+          )}
           disabled={isDisabled}
           options={translateOptions(option, t)}
           size="large"
-          className={`${className} ${isError ? "SelectError" : ""} w-100`}
+          className={`${className} ${isError ? "Select_error" : ""} w-100`}
           value={formik.values[name]}
           allowClear
           {...(isMulti && { mode: "multiple" })}
@@ -64,11 +84,8 @@ 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}
         />
-      </ValidationFieldContainer>
+      </Form.Item>
     </div>
   );
 };

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;
 
-  // Memoizing the fileList to prevent unnecessary recalculations
+  // Mapping formik values to fileList format
-  const fileList = useMemo(() => {
+  const fileList = imageUrl
-    return imageUrl
+    ? imageUrl.map((file: any, index: number) => {
-      ? imageUrl.map((file: any, index: number) => {
+        // console.log(file,"file");
-          return file instanceof File
+
-            ? {
+        return file instanceof File
-                uid: index,
+          ? {
-                name: file?.name,
+              uid: index,
-                status: "done",
+              name: file?.name,
-                originFileObj: file,
+              status: "done",
-              }
+              originFileObj: file,
-            : {
+            }
-                uid: index,
+          : {
-                id: file?.id,
+              uid: index,
-                name: file?.name,
+              id: file?.id,
-                status: "done",
+              name: file?.name,
-                url: file?.url || "",
+              status: "done",
-                thumbUrl: file?.url || "",
+              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,7 +48,6 @@ const MaltyFile = ({
       );
     }
   };
-
   // Custom request function
   const customRequest = async ({ onSuccess }: any) => {
     // Perform any necessary actions before onSuccess is called
@@ -64,20 +63,19 @@ const MaltyFile = ({
       <Upload
         disabled={isDisabled}
         listType="picture"
-        fileList={fileList} // Using memoized fileList
+        fileList={fileList} // Using fileList instead of defaultFileList
         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>
   );

src/Components/ValidationField/View/NumberField.tsx

@@ -0,0 +1,70 @@
+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);

src/Components/ValidationField/View/NumberFormate.tsx

@@ -1,19 +1,18 @@
-import { InputNumber } from "antd";
+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 { 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: {
@@ -24,15 +23,28 @@ const NumberFormate = ({
   };
   return (
     <div className="ValidationField w-100">
-      <ValidationFieldLabel
+      {no_label ? (
-        name={name}
+        <label htmlFor={name} className="text">
-        label={label}
+          <span>empty</span>
-        label_icon={label_icon}
+        </label>
-        no_label={no_label}
+      ) : label_icon ? (
-        placeholder={placeholder}
+        <div className="LabelWithIcon">
-        t={t}
+          <label htmlFor={name} className="text">
-      />
+            {t(`input.${label ? label : name}`)}
-      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
+          </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}
           formatter={(value: any) =>
@@ -45,16 +57,16 @@ const NumberFormate = ({
           type={type ?? "text"}
           value={formik.values[name]}
           onChange={SelectableChange}
-          placeholder={t(`input.${placeholder || label || name}`)}
+          placeholder={t(
+            `input.${placeholder ? placeholder : label ? label : name}`,
+          )}
           name={name}
           disabled={isDisabled}
           size="large"
-          id={name}
-          {...props}
 
           //  onChange={onChange ? onChange : handleChange}
         />
-      </ValidationFieldContainer>
+      </Form.Item>
     </div>
   );
 };

src/Components/ValidationField/View/SearchField.tsx

@@ -1,143 +1,87 @@
-import { Select, Spin } from "antd";
+import { Form, Select, Spin } from "antd";
 import React, { useEffect, useState } from "react";
 import useFormField from "../../../Hooks/useFormField";
-import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
+import { useNavigate } from "react-router-dom";
-import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
+import { MdOutlineEdit } from "react-icons/md";
-import { SearchFieldProps } from "../utils/types";
-import { useValidationValidationParamState } from "../state/ValidationValidationParamState";
-import { useDebounce } from "../../../Hooks/useDebounce";
 
 const SearchField = ({
   name,
   label,
   placeholder,
   isDisabled,
-  searchBy = "search",
+  searchBy,
-  option = [],
+  option,
   isMulti,
   onChange,
   className,
+  props,
   no_label,
   label_icon,
   isLoading,
-  canChangePage,
+}: any) => {
-  PageName,
-  page,
-  ...props
-}: SearchFieldProps) => {
   const { errorMsg, isError, t, formik } = useFormField(name, props);
-  const { pushValidationParamState, setValidationParamState } =
+  const [searchQuery, setSearchQuery] = useState<string>("");
-    useValidationValidationParamState();
+  const navigate = useNavigate();
-
-  const [AllPagesOption, setAllPagesOption] = useState<any>([]);
-
   useEffect(() => {
-    if (option?.length > 0) {
+    const searchParams = new URLSearchParams(window?.location?.search);
-      const NewOption = [...option, ...AllPagesOption];
+    setSearchQuery(searchParams?.get("search") || "");
-      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) => {
+  const SelectableChange = (value: {
+    value: string;
+    label: React.ReactNode;
+  }) => {
     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) => {
-  const handleChange = useDebounce((value: string) => {
+    navigate(`${window?.location?.pathname}?${searchBy}=${value}`, {
-    if (PageName) {
+      replace: true,
-      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">
+    <div className="ValidationField w-100 ">
-      <ValidationFieldLabel
+      {no_label ? (
-        name={name}
+        <label htmlFor={name} className="text">
-        label={label}
+          <span>empty</span>
-        label_icon={label_icon}
+        </label>
-        no_label={no_label}
+      ) : label_icon ? (
-        placeholder={placeholder}
+        <div className="LabelWithIcon">
-        t={t}
+          <label htmlFor={name} className="text">
-      />
+            {t(`input.${label ? label : name}`)}
-      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
+          </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 : ""}
+      >
         <Select
-          placeholder={t(`input.${placeholder || label || name}`)}
+          placeholder={t(
+            `input.${placeholder ? placeholder : label ? label : name}`,
+          )}
           disabled={isDisabled}
-          options={AllPagesOption}
+          options={option}
           size="large"
           className={`${className} w-100`}
           value={formik.values[name]}
-          // loading={isLoading}
+          loading={isLoading}
           allowClear
           {...(isMulti && { mode: "multiple" })}
           onChange={onChange || SelectableChange}
           showSearch
-          optionFilterProp="name"
+          optionFilterProp="label"
-          notFoundContent={isLoading ? <Spin /> : t("validation.undefined")}
+          notFoundContent={isLoading ? <Spin /> : "لا يوجد"}
-          onSearch={handleChange}
+          onSearch={SearchHandleChange}
-          onBlur={handleBlur}
-          id={name}
-          onPopupScroll={handleScroll}
-          fieldNames={{ label: "name", value: "id" }}
-          {...props}
         />
-      </ValidationFieldContainer>
+      </Form.Item>
     </div>
   );
 };

src/Components/ValidationField/View/SelectField.tsx

@@ -1,10 +1,8 @@
-import { Select } from "antd";
+import { Form, Select, Spin } 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,
@@ -15,11 +13,10 @@ const SelectField = ({
   isMulti,
   onChange,
   className,
+  props,
   no_label,
   label_icon,
-  isLoading,
+}: any) => {
-  ...props
-}: SelectFieldProps) => {
   const { errorMsg, isError, t, formik } = useFormField(name, props);
   const SelectableChange = (value: {
     value: string;
@@ -27,36 +24,47 @@ const SelectField = ({
   }) => {
     formik.setFieldValue(name, value);
   };
-  const options = translateOptions(option, t);
+  // console.log(name,"Select");
+
   return (
     <div className="ValidationField w-100">
-      <ValidationFieldLabel
+      {no_label ? (
-        name={name}
+        <label htmlFor={name} className="text">
-        label={label}
+          <span>empty</span>
-        label_icon={label_icon}
+        </label>
-        no_label={no_label}
+      ) : label_icon ? (
-        placeholder={placeholder}
+        <div className="LabelWithIcon">
-        t={t}
+          <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>
+      )}
 
-      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
         <Select
-          placeholder={t(`input.${placeholder || label || name}`)}
+          placeholder={t(
+            `input.${placeholder ? placeholder : label ? label : name}`,
+          )}
           disabled={isDisabled}
-          options={options}
+          options={translateOptions(option, t)}
-          {...(isLoading && { loading: isLoading })}
+          loading={option?.length < 1}
           size="large"
-          className={`${className} ${isError ? "SelectError" : ""} w-100`}
+          className={`${className} ${isError ? "Select_error" : ""} w-100`}
           value={formik.values[name]}
           allowClear
           {...(isMulti && { mode: "multiple" })}
           onChange={onChange || SelectableChange}
-          showSearch={false}
-          id={name}
-          fieldNames={{label:"name",value:"id"}}
-          {...props}
         />
-      </ValidationFieldContainer>
+      </Form.Item>
     </div>
   );
 };

src/Components/ValidationField/View/TextAreaField.tsx

@@ -1,8 +1,7 @@
-import { Input } from "antd";
+import { Form, 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 = ({
@@ -12,12 +11,14 @@ 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);
   };
 
@@ -26,7 +27,11 @@ const TextAreaField = ({
       <label htmlFor={name} className="text">
         {t(`input.${label ? label : name}`)}
       </label>
-      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
         <Field
           as={TextArea}
           placeholder={t(`input.${placeholder ? placeholder : name}`)}
@@ -34,10 +39,10 @@ const TextAreaField = ({
           disabled={isDisabled}
           size="large"
           onChange={onChange || handleChange}
-          id={name}
+
           //  onChange={onChange ? onChange : handleChange}
         />
-      </ValidationFieldContainer>
+      </Form.Item>
     </div>
   );
 };

src/Components/ValidationField/View/TextField.tsx

@@ -3,8 +3,6 @@ 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 = ({
@@ -23,20 +21,33 @@ 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 ?? ""} `}>
-      <ValidationFieldLabel
+      {no_label ? (
-        name={name}
+        <label htmlFor={name} className="text">
-        label={label}
+          <span>empty</span>
-        label_icon={label_icon}
+        </label>
-        no_label={no_label}
+      ) : label_icon ? (
-        placeholder={placeholder}
+        <div className="LabelWithIcon">
-        t={t}
+          <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>
+      )}
 
-      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
         <Field
           as={TextArea}
           placeholder={t(`input.${placeholder ? placeholder : name}`)}
@@ -47,9 +58,8 @@ const TextField = ({
           maxLength={1000}
           onChange={onChange || TextFilehandleChange}
           style={{ height: 120 }}
-          id={name}
         />
-      </ValidationFieldContainer>
+      </Form.Item>
     </div>
   );
 };

src/Components/ValidationField/View/Time.tsx

@@ -3,7 +3,6 @@ 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,
@@ -21,19 +20,27 @@ const Time = ({
     formik.setFieldValue(name, value);
   };
 
-  const Formatter = "H:mm";
+  const Formater = "H:mm";
   const FormikValue = formik.values[name];
 
   return (
     <div className="ValidationField w-100 ">
-      <ValidationFieldLabel
+      {no_label ? (
-        name={name}
+        <label htmlFor={name} className="text">
-        label={label}
+          <span>empty</span>
-        label_icon={label_icon}
+        </label>
-        no_label={no_label}
+      ) : label_icon ? (
-        placeholder={placeholder}
+        <div className="LabelWithIcon">
-        t={t}
+          <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
@@ -44,13 +51,14 @@ const Time = ({
           allowClear
           className={`${className} w-100`}
           size="large"
-          value={FormikValue ? dayjs(FormikValue, Formatter) : null}
+          value={FormikValue ? dayjs(FormikValue, Formater) : null}
           onChange={onChange || onCalendarChange}
           disabled={isDisabled}
-          placeholder={t(`input.${placeholder || label || name}`)}
+          placeholder={t(
-          format={Formatter}
+            `input.${placeholder ? placeholder : label ? label : name}`,
+          )}
+          format={Formater}
           needConfirm={false}
-          id={name}
         />
       </Form.Item>
     </div>

src/Components/ValidationField/components/ValidationFieldContainer.tsx

@@ -1,24 +0,0 @@
-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>
-);

src/Components/ValidationField/components/ValidationFieldLabel.tsx

@@ -1,39 +0,0 @@
-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>
-    )}
-  </>
-);

src/Components/ValidationField/index.tsx

@@ -2,6 +2,7 @@ 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,
@@ -11,4 +12,5 @@ export {
   useFormikContext,
   useTranslation,
   FaExclamationCircle,
+  convert_data_to_select,
 };

src/Components/ValidationField/state/ValidationValidationParamState.ts

@@ -1,36 +0,0 @@
-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: {},
-    }),
-}));

src/Components/ValidationField/utils/ValidationField.scss

@@ -21,7 +21,7 @@
     border: 1px solid var(--border-color);
   }
 
-  .SelectError {
+  .Select_error {
     .ant-select-selector {
       border: 1px solid red !important;
     }
@@ -60,9 +60,12 @@
 .ant-upload-select {
   width: 100%;
 }
-.Checkbox {
+.Checkboxs {
   padding: 4%;
 }
+.ant-checkbox-wrapper {
+  min-width: 100px;
+}
 .SearchField {
   button {
     background: var(--primary);
@@ -198,3 +201,27 @@ 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;
+}

src/Components/ValidationField/utils/getNestedValue.ts

@@ -0,0 +1,7 @@
+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
+}

src/Components/ValidationField/utils/translatedOptions.ts

@@ -1,7 +1,6 @@
 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}`),
   }));
 };

src/Components/ValidationField/utils/types.ts

@@ -1,80 +1,194 @@
-import { InputProps, SelectProps } from "antd";
+import { InputProps } from "antd";
 
-// Common properties for all field types
+export type ValidationFieldType =
-interface BaseFieldProps {
+  | "text"
+  | "Select"
+  | "LocalSearch"
+  | "Search"
+  | "DataRange"
+  | "Date"
+  | "Time"
+  | "File"
+  | "MaltyFile"
+  | "DropFile"
+  | "Checkbox"
+  | "number"
+  | "password"
+  | "email"
+  | "TextArea";
+
+export interface ValidationFieldPropsText {
   name: string;
+  no_label?: boolean;
+  label_icon?: boolean;
+  type: "text";
+  placeholder?: string;
+  label?: string;
+  className?: string;
+  isDisabled?: boolean;
+  onChange?: (value: any) => void;
+  dir?: "ltr" | "rtl";
+}
+
+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;
+}
+
+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";
+  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";
-  no_label?: boolean;
-  label_icon?: boolean;
 }
 
-// Specific field type properties
+export interface ValidationFieldPropsFile {
-export type SelectFieldProps = BaseFieldProps &
+  name: string;
-  SelectProps & {
+  no_label?: boolean;
-    type: "Select" | "LocalSearch";
+  label_icon?: boolean;
-    option: any[];
-    isMulti?: boolean;
-    isLoading?: boolean;
-    searchBy?: string;
-    canChangePage?: boolean;
-    PageName?: string;
-    page?: number;
-  };
-
-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";
-  picker?: "data" | "week" | "month" | "quarter" | "year";
-};
-
-type FileFieldProps = BaseFieldProps & {
   type: "File" | "MaltyFile" | "DropFile";
-};
+  placeholder?: string;
-
+  label?: string;
-type CheckboxFieldProps = BaseFieldProps & {
+  className?: string;
+  isDisabled?: boolean;
+  onChange?: (value: any) => void;
+  dir?: "ltr" | "rtl";
+}
+export interface ValidationFieldPropsCheckbox {
+  name: string;
+  no_label?: boolean;
+  label_icon?: boolean;
   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
+}
 
-export type FieldProps = BaseFieldProps &
+///// new
-  InputProps & {
+export interface BaseField {
-    type?:
+  name: string;
-      | "text"
+  label?: string;
-      | "number"
+  placeholder?: string;
-      | "password"
+}
-      | "email"
+export type OmitBaseType = "placeholder" | "name" | "label" | "type";
-      | "TextArea"
+
-      | "NumberFormate";
+export type OmitPicker = OmitBaseType | "format";
-    label2?: string;
+
-    Group?: boolean;
+export interface ValidationFieldPropsInput
-    [key: string]: any;
+  extends Omit<InputProps, OmitBaseType>,
-  };
+    BaseField {
+  type: "text" | "number" | "password" | "email" | "Number";
+  isDisabled?: boolean;
+  no_label?: string;
+  label_icon?: string;
+  label2?: string;
+}
 
-// Union type for all field types
 export type ValidationFieldProps =
-  | SelectFieldProps
+  | ValidationFieldPropsInput
-  | DateFieldProps
+  | ValidationFieldPropsSelect
-  | FileFieldProps
+  | ValidationFieldPropsLocalSearch
-  | CheckboxFieldProps
+  | ValidationFieldPropsDataRange
-  | SearchFieldProps
+  | ValidationFieldPropsDate
-  | FieldProps;
+  | ValidationFieldPropsTime
-
+  | ValidationFieldPropsFile
-// Validation field type
+  | ValidationFieldPropsCheckbox
-export type ValidationFieldType = ValidationFieldProps["type"];
+  | ValidationFieldPropstext
+  | ValidationFieldPropsSearch;

src/Hooks/useDebounce.ts

@@ -1,25 +0,0 @@
-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;
-};

src/Pages/Package/Field/ConfigurationField.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-const ConfigurationField = () => {
-  return (
-    <div>ConfigurationField</div>
-  )
-}
-
-export default ConfigurationField

src/Pages/Package/Field/FieldGroup.tsx

@@ -1,96 +0,0 @@
-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;

src/Pages/Package/Model/AddModel.tsx

@@ -6,60 +6,52 @@ 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 { mutate, status } = 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 (
-    <div className="page">
+    <>
+      {/* <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.Package_ADD}
+        modelTitle="package"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues({})}
+        getValidationSchema={getValidationSchema}
+      >
+        <ModelForm />
+        moaz
+      </LayoutModel> */}
+        casascaas
         <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")}
 
-                {isLoading && (
+          <div className="exercise_add_buttons">
-                  <span className="Spinier_Div">
+            {/* <div onClick={handleCancel}>{t("practical.back")}</div> */}
-                    <Spin />
+            {/* <button disabled={isLoading} className="relative" type="submit">
-                  </span>
+              {t("practical.add")}
-                )}
+
-              </button>
+              {isLoading && (
-            </div>
+                <span className="Spinier_Div">
-          </main>
+                  <Spin />
+                </span>
+              )}
+            </button> */}
+          </div>
+        </main>
       </FormikForm>
-    </div>
+    </>
   );
 };
 

src/Pages/Package/Model/EditModel.tsx

@@ -1,72 +1,35 @@
 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 FormikForm from "../../../Layout/Dashboard/FormikForm";
+import { QueryStatusEnum } from "../../../enums/QueryStatus";
-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";
+import { useUpdatePackage } from "../../../api/package";
 
 const EditModel: React.FC = () => {
-  const { mutate, status ,isLoading} = useUpdatePackage();
+  const { mutate, status } = useUpdatePackage();
-  const [t] = useTranslation();
+  const { objectToEdit } = useObjectToEdit((state) => state);
-  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 (
-    <div className="page">
+    <>
-        <FormikForm
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.Package_EDIT}
+        modelTitle="package_details"
         handleSubmit={handleSubmit}
-        initialValues={getInitialValues(data?.data)}
+        getInitialValues={getInitialValues(objectToEdit)}
-        validationSchema={getValidationSchema}
+        getValidationSchema={getValidationSchema}
+        isAddModal={false}
       >
-
-      <header>
-        {t("header.edit_package")}
-      </header>
-  
-        <main className="w-100 exercise_Edit_main">
         <ModelForm />
-            <div className="exercise_Edit_buttons">
+      </LayoutModel>
-              <button disabled={isLoading} className="relative button center" type="submit">
+    </>
-                {t("practical.edit")}
-
-                {isLoading && (
-                  <span className="Spinier_Div">
-                    <Spin />
-                  </span>
-                )}
-              </button>
-            </div>
-          </main>
-      </FormikForm>
-    </div>
   );
 };
 

src/Pages/Package/Model/ModelForm.tsx

@@ -1,236 +1,15 @@
 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" />
+        <ValidationField placeholder="price" label="price" name="price" />
-        <FieldGroup array_name='configuration' title='configuration' />
+        <ValidationField placeholder="name" label="name" name="name" />
-      </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>
   );
 };

src/Pages/Package/Model/formUtil.ts

@@ -1,32 +1,16 @@
 import * as Yup from "yup";
-import { Package, PackageInitialValues } from "../../../types/Package";
+export const getInitialValues = (objectToEdit: any): any => {
-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"),
   });
 };

src/Pages/Package/PackageItem/Field/ConfigurationField.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-const ConfigurationField = () => {
-  return (
-    <div>ConfigurationField</div>
-  )
-}
-
-export default ConfigurationField

src/Pages/Package/PackageItem/Field/FieldGroup.tsx

@@ -1,96 +0,0 @@
-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;

src/Pages/Package/PackageItem/Model/AddModel.tsx

@@ -1,66 +0,0 @@
-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;

src/Pages/Package/PackageItem/Model/EditModel.tsx

@@ -1,73 +0,0 @@
-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;

src/Pages/Package/PackageItem/Model/ModelForm.tsx

@@ -1,238 +0,0 @@
-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;

src/Pages/Package/PackageItem/Model/formUtil.ts

@@ -1,32 +0,0 @@
-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"),
-  });
-};

src/Pages/Package/PackageItem/Page.tsx

@@ -1,59 +0,0 @@
-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;

src/Pages/Package/PackageItem/Table.tsx

@@ -1,21 +0,0 @@
-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;

src/Pages/Package/PackageItem/index.tsx

@@ -1,15 +0,0 @@
-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,
-};

src/Pages/Package/PackageItem/useTableColumns.tsx

@@ -1,66 +0,0 @@
-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;
-};

src/Pages/Package/Page.tsx

@@ -50,8 +50,10 @@ const TableHeader = () => {
         <Table />
         <DeleteModalForm
           deleteMutation={deleteMutation}
-          ModelEnum={ModalEnum?.PACKAGE_DELETE}
+          ModelEnum={ModalEnum?.Package_DELETE}
         />
+        {/* <AddModalForm /> */}
+        <EditModalForm />
       </Suspense>
     </div>
   );

src/Pages/Package/useTableColumns.tsx

@@ -1,33 +1,25 @@
 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, canShowPackage } from "../../utils/hasAbilityFn";
+import { canDeletePackage,canEditPackage } 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);
-    navigate(`${record?.id}`)
+    setIsOpen(ModalEnum?.Package_EDIT);
-
   };
-  // const handleShow = (record: any) => {
-  //   setObjectToEdit(record);
-  //   navigate(`${record?.id}/${ABILITIES_ENUM?.PACKAGE_ITEM}`)
-
-  // };
 
   const columns: TableColumnsType<any> = [
     {
@@ -58,11 +50,9 @@ export const useColumns = () => {
           <ActionButtons
             canDelete={canEditPackage}
             canEdit={canDeletePackage}
-            // canShow={canShowPackage}
             index={index}
             onDelete={() => handelDelete(record)}
             onEdit={() => handleEdit(record)}
-            // onShow={() => handleShow(record)}
           />
         );
       },

src/Pages/ReSeller/Model/AddModel.tsx

@@ -1,36 +0,0 @@
-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;

src/Pages/ReSeller/Model/EditModel.tsx

@@ -1,40 +0,0 @@
-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;

src/Pages/ReSeller/Model/ModelForm.tsx

@@ -1,30 +0,0 @@
-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;

src/Pages/ReSeller/Model/field/MyMap.tsx

@@ -1,81 +0,0 @@
-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;

src/Pages/ReSeller/Model/formUtil.ts

@@ -1,67 +0,0 @@
-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"),
-  });
-};
-

src/Pages/ReSeller/Page.tsx

@@ -1,44 +0,0 @@
-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;

src/Pages/ReSeller/Table.tsx

@@ -1,12 +0,0 @@
-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;

src/Pages/ReSeller/useTableColumns.tsx

@@ -1,98 +0,0 @@
-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;
-};

src/Routes.tsx

@@ -1,5 +1,5 @@
 import { TCrudRoute, TMenuItem } from "./types/App";
-import { FaHome, FaKey, FaMoneyBill, FaSellcast, FaUserGraduate } from "react-icons/fa";
+import { FaHome, FaMoneyBill } from "react-icons/fa";
 import { LuPackage } from "react-icons/lu";
 import React from "react";
 const Dummy = React.lazy(() => import("./Pages/Home/Dummy"));
@@ -10,8 +10,6 @@ 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"));
@@ -21,10 +19,6 @@ 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";
@@ -44,7 +38,7 @@ export const menuItems: TMenuItem[] = [
   {
     header: "page_header.grade",
     element: <Grade />,
-    icon: <FaUserGraduate />,
+    icon: <FaMoneyBill />,
     text: "sidebar.grade",
     path: `/${ABILITIES_ENUM?.GRADE}`,
     abilities: ABILITIES_ENUM?.GRADE,
@@ -74,23 +68,13 @@ export const menuItems: TMenuItem[] = [
   {
     header: "page_header.tags",
     element: <Tags />,
-    icon: <FaKey />,
+    icon: <FaMoneyBill />,
     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[] = [
@@ -159,44 +143,16 @@ export const CrudRoute: TCrudRoute[] = [
     path: `/${ABILITIES_ENUM?.Package}/add`,
     abilities: ABILITIES_ENUM?.Package,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
-    prevPath: 1,
+    prevPath: 0,
   },
   {
     header: "page_header.edit_package",
     element: <EditPackagePage />,
-    path: `/${ABILITIES_ENUM?.Package}/:${ParamsEnum?.PACKAGE_ID}`,
+    path: `/${ABILITIES_ENUM?.Package}/add`,
     abilities: ABILITIES_ENUM?.Package,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
-    prevPath: 1,
+    prevPath: 0,
   },
-
-
-  {
-    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(

src/Styles/Pages/Map.scss

@@ -1,9 +0,0 @@
-.MapInputs{
-    display: flex;
-    gap: 20px;
-    margin-bottom: 20px;
-}
- .leaflet-right{
-    display: none;
-
-}

src/Styles/Pages/index.scss

@@ -10,4 +10,3 @@
 @import "./subject.scss";
 @import "./Marks.scss";
 @import "./exercise.scss";
-@import './Map.scss';

src/api/ReSeller.ts

@@ -1,21 +0,0 @@
-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);

src/api/config.ts

@@ -1,4 +1,4 @@
-export const BaseURL = "https://nerd-back.point-dev.net/api/";
+export const BaseURL = "http://127.0.0.1:8000/api/";
 // export const BaseURL = "http://127.0.0.1:8000/api/";
 
 // export const BaseURL = "http://192.168.1.120:8000/api/";

src/api/packageItem.ts

@@ -1,20 +0,0 @@
-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);

src/enums/Model.ts

@@ -155,12 +155,8 @@ export enum ModalEnum {
 
    ///package
 
-   PACKAGE_EDIT = "Package.edit",
+   Package_EDIT = "Package.edit",
-   PACKAGE_ADD = "Package.add",
+   Package_ADD = "Package.add",
-   PACKAGE_DELETE = "Package.delete",
+   Package_DELETE = "Package.delete",
  
-   /// ReSeller
-   RE_SELLER_EDIT = "ReSeller.edit",
-   RE_SELLER_ADD = "ReSeller.add",
-   RE_SELLER_DELETE = "ReSeller.delete",
 }

src/enums/abilities.ts

@@ -43,8 +43,6 @@ export enum ABILITIES_ENUM {
   QUESTION = "Question",
   ADMIN = "admin",
   CURRICULUM = "curriculum",
-  PACKAGE_ITEM = "package_item",
-  RE_SELLER = "ReSeller"
   ////
 }
 

src/enums/params.ts

@@ -10,7 +10,5 @@ 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"
 }

src/translate/ar.json

@@ -13,7 +13,6 @@
     "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": "مكان الميلاد مطلوب",
@@ -47,9 +46,7 @@
     "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": "تسجيل الطلاب",
@@ -110,9 +107,7 @@
     "malty_exercise": "تمرين متعدد",
     "add_new_question": "اضافة سؤال جديد",
     "exercise": "تمارين",
-    "icon": "الايقونة",
+    "icon": "الايقونة"
-    "add_new_package":"اضافة حزمة جديدة",
-    "configuration":"إعدادات"
   },
   "columns": {
     "id": "الرقم التعريفي",
@@ -162,8 +157,7 @@
     "question_options_count": "عدد الخيارات",
     "canAnswersBeShuffled":"يمكن خلط الإجابات",
     "price":"السعر",
-    "grade_id":"رقم تعريف الدرجة",
+    "grade_id":"رقم تعريف الدرجة"
-    "first_name":"الاسم الأول"
   },
   "practical": {
     "to_confirm_deletion_please_re_enter": "لتأكيد الحذف، يرجى إعادة الإدخال",
@@ -205,15 +199,7 @@
     "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": "",
@@ -278,8 +264,7 @@
     "curriculum": "مقرر",
     "package":"حزمة",
     "package_details":"تفاصيل الحزمة",
-    "add_package":"اضافة حزمة",
+    "add_package":"اضافة حزمة"
-    "ReSeller":"بائع"
   },
   "education_class_actions": {
     "Student_Records": "سجلات الطلاب",
@@ -380,17 +365,7 @@
     "question": "السؤال",
     "id": "الرقم التعريفي",
     "canAnswersBeShuffled": "يمكن خلط الإجابات",
-    "hint": "تَلمِيح",
+    "hint": "تَلمِيح"
-    "grade":"الدرجات",
-    "subject":"المادة",
-    "curriculum":"مقرر",
-    "lesson":"الدرس",
-    "unit":"الوحدة",
-    "contact_number1":"رقم التواصل 1",
-    "contact_number2":"رقم التواصل 2",
-    "lat":"خط العرض",
-    "lng":" خط الطول "
-
   },
 
   "select": {
@@ -693,8 +668,7 @@
     "tags": "كلمات مفتاحية",
     "grade": "الدرجات",
     "curriculum": "مقرر",
-    "package":"حزمة",
+    "package":"حزمة"
-     "reSeller":"البائع"
   },
   "message": {
     "some_thing_went_wrong": "حدث خطأ ما",
@@ -751,7 +725,6 @@
     "edit_Question": "لوحة القيادة /تعديل اسئلة ",
     "grade": "لوحة القيادة /الدرجات  ",
     "curriculum": "لوحة القيادة / تعديل مقرر   ",
-    "package":"لوحة القيادة / الحزم   ",
+    "package":"حزمة"
-    "ReSeller":"لوحة القيادة / البائع   "
   }
 }

src/types/Package.ts

@@ -1,30 +0,0 @@
-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>>;

src/types/ReSeller.ts

@@ -1,50 +0,0 @@
-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>>;

src/utils/arrayToObject.ts

@@ -1,15 +0,0 @@
- 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>);
-}

src/utils/hasAbilityFn.ts

@@ -583,24 +583,3 @@ 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,
-);

src/utils/objectToArray.ts

@@ -1,14 +0,0 @@
-
-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
-    }));
-}

tsconfig.json

@@ -14,10 +14,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx",
+    "jsx": "react-jsx"
-    "types": ["node"]
-    
   },
-  "include": ["src"],
+  "include": ["src"]
-
 }