package

src/Pages/Package/Model/AddModel.tsx

@@ -0,0 +1,58 @@
+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";
+
+const AddModel: React.FC = () => {
+  const { mutate, status } = useAddPackage();
+
+  const handleSubmit = (values: any) => {
+    mutate({
+      ...values,
+    });
+  };
+  return (
+    <>
+      {/* <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('')}
+        validationSchema={getValidationSchema}
+      >
+        <main className="w-100 exercise_add_main">
+          <ModelForm />
+
+          <div className="exercise_add_buttons">
+            {/* <div onClick={handleCancel}>{t("practical.back")}</div> */}
+            {/* <button disabled={isLoading} className="relative" type="submit">
+              {t("practical.add")}
+
+              {isLoading && (
+                <span className="Spinier_Div">
+                  <Spin />
+                </span>
+              )}
+            </button> */}
+          </div>
+        </main>
+      </FormikForm>
+    </>
+  );
+};
+
+export default AddModel;

src/Pages/Package/Model/EditModel.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { getInitialValues, getValidationSchema } from "./formUtil";
+import { ModalEnum } from "../../../enums/Model";
+import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
+import ModelForm from "./ModelForm";
+import { QueryStatusEnum } from "../../../enums/QueryStatus";
+import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
+import { useUpdatePackage } from "../../../api/package";
+
+const EditModel: React.FC = () => {
+  const { mutate, status } = useUpdatePackage();
+  const { objectToEdit } = useObjectToEdit((state) => state);
+
+  const handleSubmit = (values: any) => {
+    mutate({
+      ...values,
+    });
+  };
+  return (
+    <>
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.Package_EDIT}
+        modelTitle="package_details"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues(objectToEdit)}
+        getValidationSchema={getValidationSchema}
+        isAddModal={false}
+      >
+        <ModelForm />
+      </LayoutModel>
+    </>
+  );
+};
+
+export default EditModel;

src/Pages/Package/Model/ModelForm.tsx

@@ -0,0 +1,17 @@
+import { Col, Row } from "reactstrap";
+import ValidationField from "../../../Components/ValidationField/ValidationField";
+
+const Form = () => {
+  return (
+    <Row className="w-100">
+      <Col>
+        <ValidationField placeholder="name" label="name" name="name" />
+        <ValidationField placeholder="price" label="price" name="price" />
+        <ValidationField placeholder="name" label="name" name="name" />
+
+      </Col>
+    </Row>
+  );
+};
+
+export default Form;

src/Pages/Package/Model/formUtil.ts

@@ -0,0 +1,16 @@
+import * as Yup from "yup";
+export const getInitialValues = (objectToEdit: any): any => {
+  return {
+    id: objectToEdit?.id ?? null,
+    name: objectToEdit?.name ?? null,
+    price: objectToEdit?.price ?? null,
+    grade_id: objectToEdit?.grade_id ?? null,
+
+  };
+};
+
+export const getValidationSchema = () => {
+  return Yup.object().shape({
+    name: Yup.string().required("validation.required"),
+  });
+};

src/Pages/Package/Page.tsx

@@ -0,0 +1,62 @@
+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 AddModalForm = lazy(() => import("./Model/AddModel"));
+const EditModalForm = lazy(() => import("./Model/EditModel"));
+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}
+        />
+        {/* <AddModalForm /> */}
+        <EditModalForm />
+      </Suspense>
+    </div>
+  );
+};
+
+export default TableHeader;

src/Pages/Package/Table.tsx

@@ -0,0 +1,17 @@
+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";
+const App: React.FC = () => {
+  const [searchQuery] = useSearchQuery("name");
+
+  const response = useGetAllPackage({
+    name: searchQuery,
+    pagination: true,
+  });
+
+  return <DataTable response={response} useColumns={useColumns} />;
+};
+
+export default App;

src/Pages/Package/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/useTableColumns.tsx

@@ -0,0 +1,63 @@
+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";
+
+export const useColumns = () => {
+  const [t] = useTranslation();
+
+  const { setIsOpen } = useModalState((state) => state);
+
+  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);
+  };
+
+  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/question/Model/Tags/DynamicTags.tsx

@@ -14,7 +14,7 @@ const DynamicTags = () => {
     name: TagsSearch,
   });
   const suggests = data?.data;
-  console.log(TagsSearch);
+  // console.log(TagsSearch);
 
   const handleAddChoice = () => {
     const length = formik?.values?.tags.length;

src/Routes.tsx

@@ -1,5 +1,6 @@
 import { TCrudRoute, TMenuItem } from "./types/App";
 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"));
 
@@ -7,6 +8,7 @@ const Subject = React.lazy(() => import("./Pages/subject/Table/Page"));
 
 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 Unit = React.lazy(() => import("./Pages/Unit/Page"));
@@ -14,6 +16,8 @@ const Lesson = React.lazy(() => import("./Pages/lesson/Page"));
 const Question = React.lazy(() => import("./Pages/question/Page"));
 const AddQuestionPage = React.lazy(() => import("./Pages/question/AddPage"));
 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"));
 
 import { hasAbility } from "./utils/hasAbility";
 import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "./enums/abilities";
@@ -40,6 +44,16 @@ export const menuItems: TMenuItem[] = [
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 0,
   },
+  {
+    header: "page_header.package",
+    element: <Package />,
+    icon: <LuPackage />,
+    text: "sidebar.package",
+    path: `/${ABILITIES_ENUM?.Package}`,
+    abilities: ABILITIES_ENUM?.Package,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 0,
+  },
   // {
   //   header: "page_header.subject",
   //   element: <Subject />,
@@ -121,6 +135,23 @@ export const CrudRoute: TCrudRoute[] = [
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 2,
   },
+
+  {
+    header: "page_header.add_package",
+    element: <AddPackagePage />,
+    path: `/${ABILITIES_ENUM?.Package}/add`,
+    abilities: ABILITIES_ENUM?.Package,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 0,
+  },
+  {
+    header: "page_header.edit_package",
+    element: <EditPackagePage />,
+    path: `/${ABILITIES_ENUM?.Package}/add`,
+    abilities: ABILITIES_ENUM?.Package,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 0,
+  },
 ];
 
 export const AppRoutes: Record<string, string> = Object.fromEntries(

src/api/package.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: "/package",
+  ADD: "/package",
+  DELETE: "/package",
+  UPDATE: "/package",
+};
+
+const KEY = "package";
+
+export const useGetAllPackage = (params?: any, options?: any) =>
+  useGetQuery(KEY, API.GET, params, options);
+export const useAddPackage = () => useAddMutation(KEY, API.ADD);
+export const useUpdatePackage = (params?: any) => useUpdateMutation(KEY, API.GET);
+export const useDeletePackage = (params?: any) =>
+  useDeleteMutation(KEY, API.DELETE);

src/enums/Model.ts

@@ -152,4 +152,11 @@ export enum ModalEnum {
   CURRICULUM_EDIT = "CURRICULUM.edit",
   CURRICULUM_ADD = "CURRICULUM.add",
   CURRICULUM_DELETE = "CURRICULUM.delete",
+
+   ///package
+
+   Package_EDIT = "Package.edit",
+   Package_ADD = "Package.add",
+   Package_DELETE = "Package.delete",
+ 
 }

src/enums/abilities.ts

@@ -7,6 +7,7 @@ export enum ABILITIES_ENUM {
   EARLY_DEPARTURE = "earlyDeparture",
   EDUCATION_CLASS = "eduClass",
   GRADE = "grade",
+  Package = "package",
   HOMEWORK_ATTACHMENT = "homeworkAttachment",
   HOMEWORK = "homework",
   LATE_ARRIVAL = "lateArrival",

src/translate/ar.json

@@ -154,7 +154,9 @@
     "max_mark": "العلامة الكاملة",
     "min_mark_to_pass": "علامة النجاح",
     "isBase": "سؤال رئيسي",
-    "question_options_count": "عدد الخيارات"
+    "question_options_count": "عدد الخيارات",
+    "price":"السعر",
+    "grade_id":"رقم تعريف الدرجة"
   },
   "practical": {
     "to_confirm_deletion_please_re_enter": "لتأكيد الحذف، يرجى إعادة الإدخال",
@@ -258,7 +260,10 @@
     "tags": "كلمات مفتاحية",
 
     "tags_details": "تفاصيل الكلمة المفتاحية",
-    "curriculum": "مقرر"
+    "curriculum": "مقرر",
+    "package":"حزمة",
+    "package_details":"تفاصيل الحزمة",
+    "add_package":"اضافة حزمة"
   },
   "education_class_actions": {
     "Student_Records": "سجلات الطلاب",
@@ -661,7 +666,8 @@
     "subject": "المواد",
     "tags": "كلمات مفتاحية",
     "grade": "الدرجات",
-    "curriculum": "مقرر"
+    "curriculum": "مقرر",
+    "package":"حزمة"
   },
   "message": {
     "some_thing_went_wrong": "حدث خطأ ما",
@@ -717,6 +723,7 @@
     "add_Question": "لوحة القيادة /إضافة اسئلة ",
     "edit_Question": "لوحة القيادة /تعديل اسئلة ",
     "grade": "لوحة القيادة /الدرجات  ",
-    "curriculum": "لوحة القيادة / تعديل مقرر   "
+    "curriculum": "لوحة القيادة / تعديل مقرر   ",
+    "package":"حزمة"
   }
 }

src/types/Item.ts

@@ -315,3 +315,8 @@ export interface Question {
   QuestionOptions: QuestionOption[];
   tags: tags[]; // Assuming tags are strings, adjust as per actual data type
 }
+
+
+export type Package = {
+  
+};

src/utils/hasAbilityFn.ts

@@ -563,3 +563,23 @@ export const canIndexCurriculum = hasAbility(
   ABILITIES_ENUM.EDUCATION_CLASS,
   ABILITIES_VALUES_ENUM.INDEX,
 );
+
+/// Package
+
+export const canAddPackage = hasAbility(
+  ABILITIES_ENUM.Package,
+  ABILITIES_VALUES_ENUM.STORE,
+);
+
+export const canEditPackage = hasAbility(
+  ABILITIES_ENUM.Package,
+  ABILITIES_VALUES_ENUM.UPDATE,
+);
+export const canDeletePackage = hasAbility(
+  ABILITIES_ENUM.Package,
+  ABILITIES_VALUES_ENUM.DELETE,
+);
+export const canShowPackage = hasAbility(
+  ABILITIES_ENUM.Package,
+  ABILITIES_VALUES_ENUM.SHOW,
+);