add package item

src/Components/ValidationField/View/SelectField.tsx

@@ -53,6 +53,7 @@ const SelectField = ({
           onChange={onChange || SelectableChange}
           showSearch={false}
           id={name}
+          fieldNames={{label:"name",value:"id"}}
           {...props}
         />
       </ValidationFieldContainer>

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

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

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

@@ -0,0 +1,96 @@
+import React from "react";
+import { Input, Button } from "antd";
+import { useFormikContext } from "formik";
+import { useTranslation } from "react-i18next";
+
+interface FieldGroupProps {
+  array_name: string;
+  title:string;
+  static?: boolean;
+  only_value?: boolean;
+}
+
+const FieldGroup: React.FC<FieldGroupProps> = ({ array_name ,title,static:isStatic,only_value}) => {
+  const { values, setFieldValue } = useFormikContext<any>();
+  const addFieldGroup = () => {
+    setFieldValue(array_name, [
+      ...(values?.[array_name] || []),
+      { key: null, value: null },
+    ]);
+  };
+  const deleteFieldGroup = () => {
+    const updatedArray = values?.[array_name]?.slice(0, -1) || [];
+    setFieldValue(array_name, updatedArray);
+  };
+
+
+  const handleChangeKey = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    const Selects = values?.[array_name] ?? [];
+    Selects[index].key = e.target.value;
+    setFieldValue(array_name, Selects);
+  };
+
+  const handleChangeValue = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    const Selects = values?.[array_name] ?? [];
+    Selects[index].value = e.target.value;
+    setFieldValue(array_name, Selects);
+  };
+
+  const selectsArray = values?.[array_name] ?? [];
+  const { t } = useTranslation();
+
+  return (
+    <>
+    <label htmlFor={array_name} className="text">
+    <h5 className="mb-2">{t(`header.${title}`)}</h5>
+        </label>
+      {selectsArray.map((group: { key: string; value: string }, index: number) => (
+        <div key={index} className="d-flex gap-2 mb-3">
+          <Input
+            placeholder={t("practical.key")}
+            onChange={(e) => handleChangeKey(e, index)}
+            value={group.key}
+            size="large"
+            style={{ width: "100%" }}
+            allowClear
+            disabled={only_value}
+          />
+          <Input
+            placeholder={t("practical.value")}
+            onChange={(e) => handleChangeValue(e, index)}
+            value={group.value}
+            size="large"
+            style={{ width: "100%" }}
+            allowClear
+            
+          />
+        </div>
+      ))}
+      {!isStatic &&
+  <div className="d-flex gap-2 mb-4">
+  <Button
+    type="dashed"
+    onClick={addFieldGroup}
+  >
+    {t("practical.add_new")}
+  </Button>
+  <Button
+    type="dashed"
+    onClick={deleteFieldGroup}
+  >
+    {t("practical.delete_last")}
+  </Button>
+  </div>
+      }
+    
+    </>
+  );
+};
+
+export default FieldGroup;

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

@@ -0,0 +1,66 @@
+import React from "react";
+import { getInitialValues, getValidationSchema } from "./formUtil";
+import { ModalEnum } from "../../../../enums/Model";
+import LayoutModel from "../../../../Layout/Dashboard/LayoutModel";
+import { QueryStatusEnum } from "../../../../enums/QueryStatus";
+import ModelForm from "./ModelForm";
+import { useAddPackage } from "../../../../api/package";
+import FormikForm from "../../../../Layout/Dashboard/FormikForm";
+import { Spin } from "antd";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import useSetPageTitle from "../../../../Hooks/useSetPageTitle";
+import { PackageInitialValues } from "../../../../types/Package";
+import { arrayToObject } from "../../../../utils/arrayToObject";
+
+const AddModel: React.FC = () => {
+  const { mutate, status ,isLoading} = useAddPackage();
+  const [t] = useTranslation();
+  const navigate = useNavigate()
+  const handleSubmit = (values: PackageInitialValues) => {
+    const DataToSend = JSON.parse(JSON.stringify(values) ); 
+    console.log(DataToSend,"DataToSend");
+    console.log(values?.configuration);
+    
+    const  configuration = JSON.stringify(arrayToObject(values?.configuration )) ;
+    console.log(configuration);
+
+    mutate({
+      ...values,
+    });
+  };
+
+  useSetPageTitle(t(`page_header.package`));
+
+  return (
+    <div className="page">
+        <FormikForm
+        handleSubmit={handleSubmit}
+        initialValues={getInitialValues({})}
+        validationSchema={getValidationSchema}
+      > 
+
+      <header>
+        {t("header.add_new_package")}
+      </header>
+  
+        <main className="w-100 exercise_add_main">
+        <ModelForm />
+            <div className="exercise_add_buttons">
+              <button disabled={isLoading} className="relative button center" type="submit">
+                {t("practical.add")}
+
+                {isLoading && (
+                  <span className="Spinier_Div">
+                    <Spin />
+                  </span>
+                )}
+              </button>
+            </div>
+          </main>
+      </FormikForm>
+    </div>
+  );
+};
+
+export default AddModel;

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

@@ -0,0 +1,73 @@
+import React from "react";
+import { getInitialValues, getValidationSchema } from "./formUtil";
+import ModelForm from "./ModelForm";
+import FormikForm from "../../../../Layout/Dashboard/FormikForm";
+import { Spin } from "antd";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useParams } from "react-router-dom";
+import useSetPageTitle from "../../../../Hooks/useSetPageTitle";
+import { PackageInitialValues } from "../../../../types/Package";
+import { arrayToObject } from "../../../../utils/arrayToObject";
+import { useGetAllPackage, useUpdatePackage } from "../../../../api/package";
+import { ParamsEnum } from "../../../../enums/params";
+import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
+import SpinContainer from "../../../../Components/Layout/SpinContainer";
+
+const EditModel: React.FC = () => {
+  const { mutate, status ,isLoading} = useUpdatePackage();
+  const [t] = useTranslation();
+  const {package_id} = useParams<ParamsEnum>();
+  const {objectToEdit} = useObjectToEdit();
+  
+  const {data,isLoading:isLoadingData} = useGetAllPackage({show:package_id})
+  console.log(data?.data,"data");
+  
+  const handleSubmit = (values: PackageInitialValues) => {
+    const DataToSend = JSON.parse(JSON.stringify(values) ); 
+    console.log(DataToSend,"DataToSend");
+    console.log(values?.configuration);
+    
+    const  configuration = JSON.stringify(arrayToObject(values?.configuration )) ;
+    console.log(configuration);
+
+    mutate({
+      ...values,
+    });
+  };
+
+  useSetPageTitle(t(`page_header.package`));
+  if(isLoadingData){
+    return <SpinContainer/>
+  }
+  return (
+    <div className="page">
+        <FormikForm
+        handleSubmit={handleSubmit}
+        initialValues={getInitialValues(data?.data)}
+        validationSchema={getValidationSchema}
+      > 
+
+      <header>
+        {t("header.edit_package")}
+      </header>
+  
+        <main className="w-100 exercise_Edit_main">
+        <ModelForm />
+            <div className="exercise_Edit_buttons">
+              <button disabled={isLoading} className="relative button center" type="submit">
+                {t("practical.edit")}
+
+                {isLoading && (
+                  <span className="Spinier_Div">
+                    <Spin />
+                  </span>
+                )}
+              </button>
+            </div>
+          </main>
+      </FormikForm>
+    </div>
+  );
+};
+
+export default EditModel;

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

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

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

@@ -0,0 +1,32 @@
+import * as Yup from "yup";
+import { Package, PackageInitialValues } from "../../../../types/Package";
+import { arrayToObject } from "../../../../utils/arrayToObject";
+import { objectToArray } from "../../../../utils/objectToArray";
+export const getInitialValues = (objectToEdit: Partial<Package>): PackageInitialValues => {
+  console.log(objectToEdit,"objectToEdit");
+  
+  const configuration = Array.isArray(objectToEdit?.configuration) ? objectToEdit?.configuration : objectToArray(objectToEdit?.configuration)
+  return {
+    id: objectToEdit?.id ?? null,
+    name: objectToEdit?.name ?? null,
+    price: objectToEdit?.price ?? null,
+    grade_id: objectToEdit?.grade_id ?? null,
+    curriculums_ids: objectToEdit?.curriculums_ids ?? [],
+    lessons_ids: objectToEdit?.lessons_ids ?? [],
+    subjects_ids: objectToEdit?.subjects_ids ?? [],
+    units_ids: objectToEdit?.units_ids ?? [],
+    configuration: configuration ?? [{key:"",value:""}],
+  };
+};
+
+export const getValidationSchema = () => {
+  return Yup.object().shape({
+    name: Yup.string().required("validation.required"),
+    price: Yup.number().required("validation.required").typeError("validation.Must_be_a_number"),
+    grade_id: Yup.string().required("validation.required"),
+    curriculums_ids: Yup.array().of(Yup.number().required()).min(1,"validation.must_have_on_item").required("validation.required"),
+    lessons_ids: Yup.array().of(Yup.number().required()).min(1,"validation.must_have_on_item").required("validation.required"),
+    subjects_ids: Yup.array().of(Yup.number().required()).min(1,"validation.must_have_on_item").required("validation.required"),
+    units_ids: Yup.array().of(Yup.number().required()).min(1,"validation.must_have_on_item").required("validation.required"),
+  });
+};

src/Pages/Package/PackageItem/Page.tsx

@@ -0,0 +1,59 @@
+import { FaPlus } from "react-icons/fa";
+import useModalHandler from "../../../utils/useModalHandler";
+import { ModalEnum } from "../../../enums/Model";
+import { useTranslation } from "react-i18next";
+import { lazy, Suspense } from "react";
+import { Spin } from "antd";
+import { canAddPackage } from "../../../utils/hasAbilityFn";
+import useSetPageTitle from "../../../Hooks/useSetPageTitle";
+import { useDeletePackage } from "../../../api/package";
+import { useNavigate } from "react-router-dom";
+import { ABILITIES_ENUM } from "../../../enums/abilities";
+const Table = lazy(() => import("./Table"));
+
+const DeleteModalForm = lazy(
+  () => import("../../../Layout/Dashboard/DeleteModels"),
+);
+const SearchField = lazy(
+  () => import("../../../Components/DataTable/SearchField"),
+);
+
+const TableHeader = () => {
+  const { handel_open_model } = useModalHandler();
+  const [t] = useTranslation();
+  const navigate = useNavigate();
+  useSetPageTitle(t(`page_header.package`));
+  const deleteMutation = useDeletePackage();
+
+  return (
+    <div className="TableWithHeader">
+      <Suspense fallback={<Spin />}>
+        <header className="d-flex justify-content-between">
+          <SearchField
+            searchBy="name"
+            placeholder={t("practical.search_here")}
+          />
+
+          {canAddPackage && (
+            <div className="Selects">
+              <button
+                onClick={() => navigate(`/${ABILITIES_ENUM?.Package}/add`)}
+                className="add_button"
+              >
+                {t("models.add_package")} <FaPlus />
+              </button>
+            </div>
+          )}
+        </header>
+
+        <Table />
+        <DeleteModalForm
+          deleteMutation={deleteMutation}
+          ModelEnum={ModalEnum?.Package_DELETE}
+        />
+      </Suspense>
+    </div>
+  );
+};
+
+export default TableHeader;

src/Pages/Package/PackageItem/Table.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import DataTable from "../../../Layout/Dashboard/Table/DataTable";
+import { useColumns } from "./useTableColumns";
+import useSearchQuery from "../../../api/utils/useSearchQuery";
+import { useGetAllPackage } from "../../../api/package";
+import { useGetAllPackageItem } from "../../../api/packageItem";
+import { useParams } from "react-router-dom";
+import { ParamsEnum } from "../../../enums/params";
+const App: React.FC = () => {
+  const [searchQuery] = useSearchQuery("name");
+  const {package_id} = useParams<ParamsEnum>()
+  const response = useGetAllPackageItem({
+    name: searchQuery,
+    package_id:package_id,
+    pagination: true,
+  });
+
+  return <DataTable response={response} useColumns={useColumns} />;
+};
+
+export default App;

src/Pages/Package/PackageItem/index.tsx

@@ -0,0 +1,15 @@
+import { useColumns } from "./useTableColumns";
+import Table from "./Table";
+
+import { FaPlus } from "react-icons/fa";
+
+import AddModalForm from "./Model/AddModel";
+import EditModalForm from "./Model/EditModel";
+
+export {
+  Table,
+  useColumns,
+  AddModalForm,
+  EditModalForm,
+  FaPlus,
+};

src/Pages/Package/PackageItem/useTableColumns.tsx

@@ -0,0 +1,66 @@
+import { TableColumnsType } from "antd";
+import { ModalEnum } from "../../../enums/Model";
+import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
+import { useModalState } from "../../../zustand/Modal";
+import { useTranslation } from "react-i18next";
+import { canDeletePackage,canEditPackage } from "../../../utils/hasAbilityFn";
+import ActionButtons from "../../../Components/Table/ActionButtons";
+import { useNavigate } from "react-router-dom";
+
+export const useColumns = () => {
+  const [t] = useTranslation();
+
+  const { setIsOpen } = useModalState((state) => state);
+  const navigate = useNavigate()
+  const { setObjectToEdit } = useObjectToEdit((state) => state);
+  const handelDelete = (record: any) => {
+    setObjectToEdit(record);
+    setIsOpen(ModalEnum?.Package_DELETE);
+  };
+  const handleEdit = (record: any) => {
+    setObjectToEdit(record);
+    setIsOpen(ModalEnum?.Package_EDIT);
+    navigate(`${record?.id}`)
+
+  };
+
+  const columns: TableColumnsType<any> = [
+    {
+      title: t("columns.id"),
+      dataIndex: "id",
+      key: "id",
+      align: "center",
+    },
+    {
+      title: t("columns.name"),
+      dataIndex: "name",
+      key: "name",
+      align: "center",
+    },
+    {
+      title: t("columns.price"),
+      dataIndex: "price",
+      key: "price",
+      align: "center",
+    },
+    {
+      title: "",
+      key: "actions",
+      align: "end",
+      width: "25vw",
+      render: (_text, record, index) => {
+        return (
+          <ActionButtons
+            canDelete={canEditPackage}
+            canEdit={canDeletePackage}
+            index={index}
+            onDelete={() => handelDelete(record)}
+            onEdit={() => handleEdit(record)}
+          />
+        );
+      },
+    },
+  ];
+
+  return columns;
+};

src/Pages/Package/useTableColumns.tsx

@@ -3,9 +3,10 @@ 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 { canDeletePackage,canEditPackage, canShowPackage } from "../../utils/hasAbilityFn";
 import ActionButtons from "../../Components/Table/ActionButtons";
 import { useNavigate } from "react-router-dom";
+import { ABILITIES_ENUM } from "../../enums/abilities";
 
 export const useColumns = () => {
   const [t] = useTranslation();
@@ -19,9 +20,13 @@ export const useColumns = () => {
   };
   const handleEdit = (record: any) => {
     setObjectToEdit(record);
-    setIsOpen(ModalEnum?.Package_EDIT);
     navigate(`${record?.id}`)
 
+  };
+  const handleShow = (record: any) => {
+    setObjectToEdit(record);
+    navigate(`${record?.id}/${ABILITIES_ENUM?.PACKAGE_ITEM}`)
+
   };
 
   const columns: TableColumnsType<any> = [
@@ -53,9 +58,11 @@ export const useColumns = () => {
           <ActionButtons
             canDelete={canEditPackage}
             canEdit={canDeletePackage}
+            canShow={canShowPackage}
             index={index}
             onDelete={() => handelDelete(record)}
             onEdit={() => handleEdit(record)}
+            onShow={() => handleShow(record)}
           />
         );
       },

src/Routes.tsx

@@ -10,6 +10,7 @@ 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 Unit = React.lazy(() => import("./Pages/Unit/Page"));
 const Lesson = React.lazy(() => import("./Pages/lesson/Page"));
@@ -19,6 +20,10 @@ const EditQuestionPage = React.lazy(() => import("./Pages/question/EditPage"));
 const AddPackagePage = React.lazy(() => import("./Pages/Package/Model/AddModel"));
 const EditPackagePage = React.lazy(() => import("./Pages/Package/Model/EditModel"));
 
+
+const AddPackageItemPage = React.lazy(() => import("./Pages/Package/PackageItem/Model/AddModel"));
+const EditPackageItemPage = React.lazy(() => import("./Pages/Package/PackageItem/Model/EditModel"));
+
 import { hasAbility } from "./utils/hasAbility";
 import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "./enums/abilities";
 import { ParamsEnum } from "./enums/params";
@@ -153,6 +158,34 @@ export const CrudRoute: TCrudRoute[] = [
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 1,
   },
+
+
+  {
+    header: "page_header.package_item",
+    element: <PackageItemPage />,
+    path: `/${ABILITIES_ENUM?.Package}/:${ParamsEnum?.PACKAGE_ID}/${ABILITIES_ENUM?.PACKAGE_ITEM}`,
+    abilities: ABILITIES_ENUM?.PACKAGE_ITEM,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 1,
+  },
+
+  {
+    header: "page_header.add_package_item",
+    element: <AddPackageItemPage />,
+    path: `/${ABILITIES_ENUM?.Package}/:${ParamsEnum?.PACKAGE_ID}/${ABILITIES_ENUM?.PACKAGE_ITEM}/add`,
+    abilities: ABILITIES_ENUM?.PACKAGE_ITEM,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 1,
+  },
+  {
+    header: "page_header.edit_package_item",
+    element: <EditPackageItemPage />,
+    path: `/${ABILITIES_ENUM?.Package}/:${ParamsEnum?.PACKAGE_ID}/${ABILITIES_ENUM?.PACKAGE_ITEM}/:${ParamsEnum?.PACKAGE_ITEM_ID}`,
+    abilities: ABILITIES_ENUM?.PACKAGE_ITEM,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 1,
+  },
+
 ];
 
 export const AppRoutes: Record<string, string> = Object.fromEntries(

src/api/config.ts

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

src/api/packageItem.ts

@@ -0,0 +1,20 @@
+import useAddMutation from "./helper/useAddMutation";
+import useDeleteMutation from "./helper/useDeleteMutation";
+import useGetQuery from "./helper/useGetQuery";
+import useUpdateMutation from "./helper/useUpdateMutation";
+
+const API = {
+  GET: "/packageItem",
+  ADD: "/packageItem",
+  DELETE: "/packageItem",
+  UPDATE: "/packageItem",
+};
+
+const KEY = "PackageItem";
+
+export const useGetAllPackageItem = (params?: any, options?: any) =>
+  useGetQuery(KEY, API.GET, params, options);
+export const useAddPackageItem = () => useAddMutation(KEY, API.ADD);
+export const useUpdatePackageItem = (params?: any) => useUpdateMutation(KEY, API.GET);
+export const useDeletePackageItem = (params?: any) =>
+  useDeleteMutation(KEY, API.DELETE);

src/enums/abilities.ts

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

src/enums/params.ts

@@ -12,4 +12,5 @@ export enum ParamsEnum {
   QUESTION_ID = "question_id",
   PACKAGE_ID = "package_id",
   CHILDREN_QUESTION_ID = "children_question_id",
+  PACKAGE_ITEM_ID= "package_item_id"
 }