fixes

src/Components/Table/ActionAddButton.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { FaPlus } from "react-icons/fa";
+import { useTranslation } from "react-i18next";
+
+interface ActionAddButtonProps {
+  canAdd: boolean;
+  onClick: () => void;
+  buttonText?: string;
+  modelName: string;
+}
+
+const ActionAddButton: React.FC<ActionAddButtonProps> = ({
+  canAdd,
+  onClick,
+  buttonText = "practical.add",
+  modelName,
+}) => {
+  const { t } = useTranslation();
+
+  if (!canAdd) {
+    return null; // Render nothing if canAdd is false
+  }
+
+  return (
+    <button onClick={onClick} className="add_button">
+      {t(buttonText)} {t(`models.${modelName}`)} <FaPlus />
+    </button>
+  );
+};
+
+export default ActionAddButton;

src/Components/Table/ActionButtons.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { Tooltip, Space } from "antd";
+import { MdOutlineEdit } from "react-icons/md";
+import { RiDeleteBin6Fill } from "react-icons/ri";
+import { useTranslation } from "react-i18next";
+import { BsEyeFill } from "react-icons/bs";
+
+interface ActionButtonsProps {
+  canEdit: boolean;
+  canDelete: boolean;
+  canShow?: boolean;
+  editTooltipTitle?: string;
+  deleteTooltipTitle?: string;
+  onEdit?: () => void;
+  onDelete?: () => void;
+  onShow?: () => void;
+  index?: number;
+  className?: string;
+}
+
+const ActionButtons: React.FC<ActionButtonsProps> = ({
+  canEdit,
+  canDelete,
+  editTooltipTitle = "practical.edit",
+  className = "",
+  onEdit = () => {},
+  onDelete = () => {},
+  index,
+  canShow = false,
+  onShow = () => {},
+}) => {
+  const [t] = useTranslation();
+  const CustomClassName = index
+    ? index % 2 === 0
+      ? "even-row buttonAction"
+      : "odd-row buttonAction"
+    : "buttonAction";
+  return (
+    <Space size="middle" className={`${CustomClassName} ${className} `}>
+      {canEdit && (
+        <Tooltip placement="top" title={t(editTooltipTitle)} color="#E0E0E0">
+          <span onClick={onEdit}>
+            <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
+          </span>
+        </Tooltip>
+      )}
+
+      {canDelete && (
+        // <Tooltip placement="top" title={t(deleteTooltipTitle)} color="#E0E0E0">
+        <RiDeleteBin6Fill
+          onClick={onDelete}
+          size={22}
+          style={{ color: "#C11313" }}
+        />
+        //  </Tooltip>
+      )}
+      {canShow && (
+        <BsEyeFill onClick={onShow} size={22} style={{ color: "green" }} />
+      )}
+    </Space>
+  );
+};
+
+export default ActionButtons;

src/Components/Table/ActionColumn.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { ColumnType } from "antd/lib/table";
+import ActionAddButton from "./ActionAddButton";
+import ActionButtons from "./ActionButtons";
+import { ModalEnum } from "../../enums/Model";
+
+interface ActionColumnProps {
+  canAddPayment: boolean;
+  canDeletePayment: boolean;
+  canEditPayment: boolean;
+  handelAdd: () => void;
+  handelDelete: (record: any) => void;
+  handleEdit: (record: any) => void;
+  ModalEnum: ModalEnum; // Adjust this type based on your ModalEnum definition
+}
+
+const createActionColumn = ({
+  canAddPayment,
+  canDeletePayment,
+  canEditPayment,
+  handelDelete,
+  handleEdit,
+  handelAdd,
+}: ActionColumnProps): ColumnType<any> => {
+  return {
+    title: (
+      <ActionAddButton
+        canAdd={canAddPayment}
+        modelName="payment"
+        onClick={() => handelAdd()}
+      />
+    ),
+    key: "actions",
+    align: "end",
+    className: "custom_add_button_column",
+    render: (_text, record, index) => (
+      <ActionButtons
+        canDelete={canDeletePayment}
+        canEdit={canEditPayment}
+        index={index}
+        onDelete={() => handelDelete(record)}
+        onEdit={() => handleEdit(record)}
+      />
+    ),
+  };
+};
+
+export default createActionColumn;

src/Components/Table/TableAddButton.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { FaPlus } from "react-icons/fa";
+import { useTranslation } from "react-i18next";
+import { ModalEnum } from "../../enums/Model";
+import { useModalState } from "../../zustand/Modal";
+
+interface TableAddButtonProps {
+  canAdd: boolean;
+  ModalEnumValue: ModalEnum;
+  buttonText?: string;
+  modelName: string;
+}
+
+const TableAddButton: React.FC<TableAddButtonProps> = ({
+  canAdd,
+  ModalEnumValue,
+  buttonText = "practical.add",
+  modelName,
+}) => {
+  const { t } = useTranslation();
+  const { setIsOpen } = useModalState((state) => state);
+
+  if (!canAdd) {
+    return null; // Render nothing if canAdd is false
+  }
+
+  return (
+    <button
+      // onClick={() => setIsOpen(ModalEnum?.[ModalEnumValue])}
+      className="add_button"
+    >
+      {t(buttonText)} {t(`models.${modelName}`)} <FaPlus />
+    </button>
+  );
+};
+
+export default TableAddButton;

src/Layout/Dashboard/DeleteModels.tsx

@@ -1,22 +1,20 @@
 import React, { useEffect, useState } from "react";
 import { Input, Modal, Spin } from "antd";
 import { useModalState } from "../../zustand/Modal";
-import { ModalEnum } from "../../enums/Model";
 import { useObjectToEdit } from "../../zustand/ObjectToEditState";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
 
 interface ModalFormProps {
-  modalType: ModalEnum;
-  objectType: string;
   deleteMutation: any;
-  objectValue: string;
+  ModelEnum: any;
+  isNavigate?: boolean;
 }
 
 const DeleteModels: React.FC<ModalFormProps> = ({
-  modalType,
-  objectType,
   deleteMutation,
-  objectValue,
+  ModelEnum,
+  isNavigate = false,
 }) => {
   const { isOpen, setIsOpen } = useModalState((state) => state);
   const [inputValue, setInputValue] = useState("");
@@ -24,10 +22,16 @@ const DeleteModels: React.FC<ModalFormProps> = ({
   const { mutate, isLoading, isSuccess } = deleteMutation;
   const { objectToEdit, setObjectToEdit } = useObjectToEdit();
 
+  const iaDisabled =
+    Number(objectToEdit?.id) !== Number(inputValue) || isLoading;
+  const navigate = useNavigate();
   useEffect(() => {
     if (isSuccess) {
       setIsOpen("");
       setInputValue("");
+      if (isNavigate) {
+        navigate(-1);
+      }
     }
   }, [isSuccess, setIsOpen]);
 
@@ -48,7 +52,7 @@ const DeleteModels: React.FC<ModalFormProps> = ({
   };
 
   const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter" && objectToEdit?.[objectValue] === inputValue) {
+    if (e.key === "Enter" && !iaDisabled) {
       handleSubmit();
     }
   };
@@ -60,24 +64,22 @@ const DeleteModels: React.FC<ModalFormProps> = ({
       centered
       width={"40vw"}
       footer={null}
-      open={isOpen === modalType}
+      open={isOpen === ModelEnum}
       onCancel={handleCancel}
     >
-      <header>
-        {t("practical.delete")} {t(`models.${objectType}`)}
-      </header>
+      <header>{t("practical.delete_this_item")}</header>
 
       <main className="main_modal">
         <div className="ValidationField w-100 mb-5">
           <label className="text ">
-            {t("practical.to_confirm_deletion_please_re_enter")}{" "}
-            {t(`input.${objectValue}`)} ({objectToEdit?.[objectValue]})
+            {t("practical.to_confirm_deletion_please_re_enter_id")} ({" "}
+            {objectToEdit?.id} )
           </label>
 
           <Input
             size="large"
             type="text"
-            placeholder={`${t("practical.enter")} ${t(`input.${objectValue}`)}  `}
+            placeholder={`${t("practical.enter")} ${t(`input.id`)}  `}
             value={inputValue}
             onChange={handleChange}
             onKeyDown={handleKeyPress}
@@ -87,12 +89,8 @@ const DeleteModels: React.FC<ModalFormProps> = ({
         <div className="buttons">
           <div onClick={handleCancel}>{t("practical.cancel")}</div>
           <button
-            className={
-              objectToEdit?.[objectValue] !== inputValue
-                ? "disabled_button"
-                : ""
-            }
-            disabled={objectToEdit?.[objectValue] !== inputValue || isLoading}
+            className={iaDisabled ? "disabled_button" : ""}
+            disabled={iaDisabled}
             onClick={handleSubmit}
             type="button"
           >

src/Layout/Dashboard/LayoutModel.tsx

@@ -0,0 +1,102 @@
+import React, { useEffect } from "react";
+import { Modal, Spin } from "antd";
+import { useModalState } from "../../zustand/Modal";
+import FormikForm from "./FormikFormModel";
+import { useObjectToEdit } from "../../zustand/ObjectToEditState";
+import { useTranslation } from "react-i18next";
+import { QueryStatusEnum } from "../../enums/QueryStatus";
+import SpinContainer from "../../Components/Layout/SpinContainer";
+
+interface LayoutModalProps {
+  isAddModal?: boolean;
+  modelTitle: string;
+  handleSubmit: (values: any) => void;
+  getInitialValues: any;
+  getValidationSchema: any;
+  children: React.ReactNode;
+  status: QueryStatusEnum;
+  ModelEnum: any;
+  ModelClassName?: string;
+  width?: string;
+  isLoading?: boolean;
+}
+
+const LayoutModel = ({
+  isAddModal = true,
+  children,
+  handleSubmit = () => {},
+  getInitialValues,
+  getValidationSchema,
+  status,
+  modelTitle,
+  ModelEnum,
+  ModelClassName,
+  width = "60vw",
+  isLoading = false,
+}: LayoutModalProps) => {
+  const { isOpen, setIsOpen } = useModalState((state) => state);
+  const { setObjectToEdit } = useObjectToEdit();
+  useEffect(() => {
+    if (isAddModal && status === QueryStatusEnum.SUCCESS) {
+      setIsOpen("isSuccess");
+      setObjectToEdit({});
+      return;
+    }
+    if (status === QueryStatusEnum.SUCCESS) {
+      setIsOpen("");
+      setObjectToEdit({});
+    }
+  }, [setIsOpen, status]);
+
+  const handleCancel = () => {
+    setIsOpen("");
+    setObjectToEdit({});
+  };
+
+  const [t] = useTranslation();
+  return (
+    <>
+      <Modal
+        className={"ModalForm " + ModelClassName}
+        centered
+        width={width}
+        footer={null}
+        open={isOpen === ModelEnum}
+        onCancel={handleCancel}
+      >
+        <FormikForm
+          handleSubmit={handleSubmit}
+          initialValues={getInitialValues}
+          validationSchema={getValidationSchema}
+        >
+          <header>
+            {t(`practical.${isAddModal ? "add" : "edit"}`)}{" "}
+            {t(`models.${modelTitle}`)}{" "}
+          </header>
+          <main className="main_modal w-100">
+            {isLoading ? <SpinContainer /> : children}
+            <div className="buttons">
+              <div className="back_button" onClick={handleCancel}>
+                {t("practical.back")}
+              </div>
+              <button
+                className="add_button"
+                disabled={status === QueryStatusEnum.LOADING}
+                type="submit"
+              >
+                {t(`practical.${isAddModal ? "add" : "edit"}`)}
+                {status === QueryStatusEnum.LOADING && (
+                  <span className="Spinier_Div">
+                    <Spin />
+                  </span>
+                )}
+              </button>
+            </div>
+          </main>
+        </FormikForm>
+      </Modal>
+    </>
+  );
+};
+
+export default LayoutModel;

src/Pages/Tags/Model/Add.tsx

@@ -1,33 +0,0 @@
-import { Col, Row } from "reactstrap";
-import ValidationField from "../../../Components/ValidationField/ValidationField";
-import { useFormikContext } from "formik";
-import { useModalState } from "../../../zustand/Modal";
-import { useEffect } from "react";
-import DynamicTags from "../synonyms/DynamicTags";
-
-const Form = () => {
-  const formik = useFormikContext();
-  const { isOpen } = useModalState((state) => state);
-
-  useEffect(() => {
-    if (isOpen === "") {
-      formik.setErrors({});
-    }
-    if (isOpen === "isSuccess") {
-      formik.setErrors({});
-      formik.resetForm();
-    }
-  }, [isOpen]);
-  return (
-    <Row className="w-100">
-      <Col>
-        <ValidationField placeholder="name" label="name" name="name" />
-      </Col>
-      <div>
-        <DynamicTags />
-      </div>
-    </Row>
-  );
-};
-
-export default Form;

src/Pages/Tags/Model/AddModel.tsx

@@ -1,65 +1,33 @@
-import React, { useEffect } from "react";
-import { Modal, Spin } from "antd";
-import { useModalState } from "../../../zustand/Modal";
-import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
-import ModelBody from "./Add";
+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 { useAddTag } from "../../../api/tags";
-import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
-import { useTranslation } from "react-i18next";
-import ModelButtons from "../../../Components/models/ModelButtons";
+import ModelForm from "./ModelForm";
 
-const ModalForm: React.FC = () => {
-  const { isOpen, setIsOpen } = useModalState((state) => state);
-  const { mutate, isSuccess, isLoading } = useAddTag();
-  const { setObjectToEdit } = useObjectToEdit();
-  useEffect(() => {
-    if (isSuccess) {
-      setIsOpen("isSuccess");
-      setObjectToEdit({});
-    }
-  }, [setIsOpen, isSuccess]);
+const AddModel: React.FC = () => {
+  const { mutate, status } = useAddTag();
 
   const handleSubmit = (values: any) => {
     mutate({
       ...values,
     });
   };
-
-  const handleCancel = () => {
-    setIsOpen("");
-    setObjectToEdit({});
-  };
-
-  const [t] = useTranslation();
   return (
     <>
-      <Modal
-        className="ModalForm"
-        centered
-        width={"60vw"}
-        footer={null}
-        open={isOpen === ModalEnum?.TAGS_ADD}
-        onCancel={handleCancel}
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.TAGS_ADD}
+        modelTitle="tags"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues({})}
+        getValidationSchema={getValidationSchema}
       >
-        <FormikForm
-          handleSubmit={handleSubmit}
-          initialValues={getInitialValues([])}
-          validationSchema={getValidationSchema}
-        >
-          <header>
-            {t("practical.add")} {t("models.tags")}{" "}
-          </header>
-          <main className="main_modal w-100">
-            <ModelBody />
-            <ModelButtons isLoading={isLoading} />
-          </main>
-        </FormikForm>
-      </Modal>
+        <ModelForm />
+      </LayoutModel>
     </>
   );
 };
 
-export default ModalForm;
+export default AddModel;

src/Pages/Tags/Model/Delete.tsx

@@ -1,94 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Input, Modal, Spin } from "antd";
-import { useModalState } from "../../../zustand/Modal";
-import { ModalEnum } from "../../../enums/Model";
-import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
-import { useDeleteTag } from "../../../api/tags";
-import { useTranslation } from "react-i18next";
-
-const ModalForm: React.FC = () => {
-  const { isOpen, setIsOpen } = useModalState((state) => state);
-  const [inputValue, setInputValue] = useState("");
-
-  const { mutate, isLoading, isSuccess } = useDeleteTag();
-  const { objectToEdit, setObjectToEdit } = useObjectToEdit();
-
-  useEffect(() => {
-    if (isSuccess) {
-      setIsOpen("");
-      setInputValue("");
-    }
-  }, [isSuccess, setIsOpen]);
-
-  const handleSubmit = () => {
-    mutate({
-      id: Number(objectToEdit?.id),
-    });
-  };
-
-  const handleCancel = () => {
-    setInputValue("");
-    setIsOpen("");
-    setObjectToEdit({});
-  };
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    // Step 2: Handle changes to the input field
-    setInputValue(e.target.value);
-  };
-  const [t] = useTranslation();
-
-  return (
-    <>
-      <Modal
-        className="ModalForm"
-        centered
-        width={"40vw"}
-        footer={null}
-        open={isOpen === ModalEnum?.TAGS_DELETE}
-        onCancel={handleCancel}
-      >
-        <header>
-          {t("practical.delete")} ({objectToEdit?.name}){" "}
-        </header>
-        <main className="main_modal">
-          <div className="ValidationField w-100 mb-5">
-            <label className="text ">
-              {t("practical.to_confirm_deletion_please_re_enter")}{" "}
-              {t("input.name")} {t("models.tags")}
-            </label>
-
-            <Input
-              size="large"
-              type="text"
-              placeholder={`${t("practical.enter")} ${t("input.name")} ${t("models.tags")} `}
-              value={inputValue}
-              onChange={handleChange}
-            />
-          </div>
-
-          <div className="buttons">
-            <div onClick={handleCancel}>{t("practical.cancel")}</div>
-            <button
-              className={
-                objectToEdit?.name !== inputValue ? "disabled_button" : ""
-              }
-              disabled={objectToEdit?.name !== inputValue || isLoading}
-              onClick={handleSubmit}
-            >
-              {t("practical.delete")}
-
-              {isLoading && (
-                <span className="Spinier_Div">
-                  <Spin />
-                </span>
-              )}
-            </button>
-          </div>
-        </main>
-      </Modal>
-    </>
-  );
-};
-
-export default ModalForm;

src/Pages/Tags/Model/EditModel.tsx

@@ -1,66 +1,36 @@
-import React, { useEffect } from "react";
-import { Modal, Spin } from "antd";
-import { useModalState } from "../../../zustand/Modal";
-import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
-import ModelBody from "./Edit";
+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 { useUpdateTag } from "../../../api/tags";
-import { useTranslation } from "react-i18next";
-import ModelButtons from "../../../Components/models/ModelButtons";
 
-const ModalForm: React.FC = () => {
-  const { isOpen, setIsOpen } = useModalState((state) => state);
-  const { objectToEdit, setObjectToEdit } = useObjectToEdit((state) => state);
-  const { mutate, isSuccess, isLoading } = useUpdateTag();
-  // console.log(objectToEdit,"objectToEdit");
+const EditModel: React.FC = () => {
+  const { mutate, status } = useUpdateTag();
+  const { objectToEdit } = useObjectToEdit((state) => state);
+
   const handleSubmit = (values: any) => {
-    // const contactInformationJson = JSON.stringify({
-    //     phone_number: values?.number
-    // });
     mutate({
       ...values,
     });
   };
-  const handleCancel = () => {
-    setIsOpen("");
-    setObjectToEdit({});
-  };
-
-  useEffect(() => {
-    if (isSuccess) {
-      setIsOpen("");
-    }
-  }, [setIsOpen, isSuccess]);
-  const [t] = useTranslation();
   return (
-    <Modal
-      className="ModalForm"
-      centered
-      width={"60vw"}
-      footer={null}
-      open={isOpen === ModalEnum?.TAGS_EDIT}
-      onCancel={handleCancel}
-    >
-      {objectToEdit && (
-        <FormikForm
-          handleSubmit={handleSubmit}
-          initialValues={getInitialValues(objectToEdit)}
-          validationSchema={getValidationSchema}
-        >
-          <header>
-            {" "}
-            {t("practical.edit")} {t("practical.details")} {t("models.tags")}{" "}
-          </header>
-          <main className="main_modal w-100">
-            <ModelBody />
-            <ModelButtons isLoading={isLoading} />
-          </main>
-        </FormikForm>
-      )}
-    </Modal>
+    <>
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.TAGS_EDIT}
+        modelTitle="tags_details"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues(objectToEdit)}
+        getValidationSchema={getValidationSchema}
+        isAddModal={false}
+      >
+        <ModelForm />
+      </LayoutModel>
+    </>
   );
 };
 
-export default ModalForm;
+export default EditModel;

src/Pages/Tags/Model/ModelForm.tsx

@@ -1,8 +1,5 @@
 import { Col, Row } from "reactstrap";
 import ValidationField from "../../../Components/ValidationField/ValidationField";
-import { useFormikContext } from "formik";
-import { useModalState } from "../../../zustand/Modal";
-import { useEffect } from "react";
 import DynamicTags from "../synonyms/DynamicTags";
 
 const Form = () => {

src/Pages/Tags/Page.tsx

@@ -1,18 +1,16 @@
 import { FaPlus } from "react-icons/fa";
-
 import useModalHandler from "../../utils/useModalHandler";
 import { ModalEnum } from "../../enums/Model";
-
-// import useSetPageTitle from "../../Hooks/useSetPageTitle";
 import { useTranslation } from "react-i18next";
 import { lazy, Suspense } from "react";
 import { Spin } from "antd";
 import { canAddTags } from "../../utils/hasAbilityFn";
 import useSetPageTitle from "../../Hooks/useSetPageTitle";
+import { useDeleteTag } from "../../api/tags";
 const Table = lazy(() => import("./Table"));
 const AddModalForm = lazy(() => import("./Model/AddModel"));
 const EditModalForm = lazy(() => import("./Model/EditModel"));
-const DeleteModalForm = lazy(() => import("./Model/Delete"));
+const DeleteModalForm = lazy(() => import("../../Layout/Dashboard/DeleteModels"));
 const SearchField = lazy(
   () => import("../../Components/DataTable/SearchField"),
 );
@@ -20,7 +18,10 @@ const SearchField = lazy(
 const TableHeader = () => {
   const { handel_open_model } = useModalHandler();
   const [t] = useTranslation();
-  useSetPageTitle(t(`page_header.tags`));
+  useSetPageTitle(
+    t(`page_header.tags`),
+  );
+  const deleteMutation = useDeleteTag();
 
   return (
     <div className="TableWithHeader">
@@ -44,7 +45,10 @@ const TableHeader = () => {
         </header>
 
         <Table />
-        <DeleteModalForm />
+        <DeleteModalForm
+          deleteMutation={deleteMutation}
+          ModelEnum={ModalEnum?.TAGS_DELETE}
+          />
         <AddModalForm />
         <EditModalForm />
       </Suspense>

src/Pages/Tags/useTableColumns.tsx

@@ -1,23 +1,26 @@
-import { Space, TableColumnsType, Tooltip } from "antd";
+import { TableColumnsType } from "antd";
 import { tags } from "../../types/Item";
-
 import { ModalEnum } from "../../enums/Model";
-import { MdOutlineEdit } from "react-icons/md";
-import { RiDeleteBin6Fill } from "react-icons/ri";
 import { useObjectToEdit } from "../../zustand/ObjectToEditState";
 import { useModalState } from "../../zustand/Modal";
 import { useTranslation } from "react-i18next";
 import { canDeleteTags, canEditTags } 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) => {
+  const handelDelete = (record:any) => {
     setObjectToEdit(record);
     setIsOpen(ModalEnum?.TAGS_DELETE);
   };
-  const [t] = useTranslation();
+  const handleEdit = (record:any) => {
+    setObjectToEdit(record);
+    setIsOpen(ModalEnum?.TAGS_EDIT);
+  };
 
   const columns: TableColumnsType<tags> = [
     {
@@ -38,38 +41,15 @@ export const useColumns = () => {
       key: "actions",
       align: "end",
       width: "25vw",
-      render: (text, record, index) => {
-        const handleEdit = (record: any) => {
-          // console.log(record,"record");
-          setObjectToEdit(record);
-          setIsOpen(ModalEnum?.TAGS_EDIT);
-        };
-
-        const className =
-          index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";
-
+      render: (_text, record, index) => {
         return (
-          <Space size="middle" className={className}>
-            {canEditTags && (
-              <Tooltip
-                placement="top"
-                title={t("practical.edit")}
-                color="#E0E0E0"
-              >
-                <span onClick={() => handleEdit(record)}>
-                  <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
-                </span>
-              </Tooltip>
-            )}
-
-            {canDeleteTags && (
-              <RiDeleteBin6Fill
-                onClick={() => handelDelete(record)}
-                size={22}
-                style={{ color: "#C11313" }}
-              />
-            )}
-          </Space>
+          <ActionButtons
+            canDelete={canEditTags}
+            canEdit={canDeleteTags}
+            index={index}
+            onDelete={() => handelDelete(record)}
+            onEdit={() => handleEdit(record)}
+          />
         );
       },
     },

src/Pages/Unit/Model/AddModel.tsx

@@ -1,76 +1,36 @@
-import React, { useEffect } from "react";
-import { Modal, Spin } from "antd";
-import { useModalState } from "../../../zustand/Modal";
-import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
-import ModelBody from "./AddUnit";
+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 { useAddUnit } from "../../../api/unit";
 import { useParams } from "react-router-dom";
-import { useTranslation } from "react-i18next";
 
-const ModalForm: React.FC = () => {
-  const { isOpen, setIsOpen } = useModalState((state) => state);
-
-  const { mutate, isSuccess, isLoading } = useAddUnit();
+const AddModel: React.FC = () => {
+  const { mutate, status } = useAddUnit();
   const { subject_id } = useParams();
 
-  useEffect(() => {
-    if (isSuccess) {
-      setIsOpen("");
-    }
-  }, [setIsOpen, isSuccess]);
-
   const handleSubmit = (values: any) => {
-    //   console.log(values,"values");
     mutate({
       ...values,
       subject_id: subject_id,
     });
   };
-
-  const handleCancel = () => {
-    setIsOpen("");
-  };
-  const [t] = useTranslation();
   return (
     <>
-      <Modal
-        className="ModalForm"
-        centered
-        width={"40vw"}
-        footer={null}
-        open={isOpen === ModalEnum?.UNIT_ADD}
-        onCancel={handleCancel}
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.UNIT_ADD}
+        modelTitle="unit"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues({})}
+        getValidationSchema={getValidationSchema}
       >
-        <FormikForm
-          handleSubmit={handleSubmit}
-          initialValues={getInitialValues([])}
-          validationSchema={getValidationSchema}
-        >
-          <header>
-            {" "}
-            {t("practical.add")} {t("models.unit")}{" "}
-          </header>
-          <main className="main_modal w-100">
-            <ModelBody />
-            <div className="buttons">
-              <div onClick={handleCancel}>{t("practical.back")}</div>
-              <button disabled={isLoading} type="submit">
-                {t("practical.add")}
-
-                {isLoading && (
-                  <span className="Spinier_Div">
-                    <Spin />
-                  </span>
-                )}
-              </button>
-            </div>
-          </main>
-        </FormikForm>
-      </Modal>
+        <ModelForm />
+      </LayoutModel>
     </>
   );
 };
 
-export default ModalForm;
+export default AddModel;

src/Pages/Unit/Model/AddUnit.tsx

@@ -1,27 +0,0 @@
-import { Col, Row } from "reactstrap";
-import React, { useEffect } from "react";
-import ValidationField from "../../../Components/ValidationField/ValidationField";
-import { Term_Select } from "../../../types/App";
-import { useFormikContext } from "formik";
-import { useModalState } from "../../../zustand/Modal";
-
-const Form = () => {
-  const formik = useFormikContext();
-  const { isOpen } = useModalState((state) => state);
-
-  useEffect(() => {
-    if (isOpen === "") {
-      formik.setErrors({});
-      formik.resetForm();
-    }
-  }, [isOpen]);
-  return (
-    <Row className="w-100">
-      <Col>
-        <ValidationField name="name" placeholder="name" label="name" />
-      </Col>
-    </Row>
-  );
-};
-
-export default Form;

src/Pages/Unit/Model/Delete.tsx

@@ -1,98 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Input, Modal, Spin } from "antd";
-import { useModalState } from "../../../zustand/Modal";
-import { ModalEnum } from "../../../enums/Model";
-import { useDeleteUnit } from "../../../api/unit";
-import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
-import { useQueryClient } from "react-query";
-import { useTranslation } from "react-i18next";
-
-const ModalForm: React.FC = () => {
-  const { isOpen, setIsOpen } = useModalState((state) => state);
-  const [inputValue, setInputValue] = useState("");
-
-  const { mutate, isSuccess, isLoading } = useDeleteUnit();
-  const { objectToEdit } = useObjectToEdit((state) => state);
-  const [t] = useTranslation();
-  const handleSubmit = () => {
-    mutate({
-      id: Number(objectToEdit?.id),
-    });
-  };
-
-  const handleCancel = () => {
-    setInputValue("");
-    setIsOpen("");
-  };
-  const queryClient = useQueryClient();
-
-  useEffect(() => {
-    if (isSuccess) {
-      setIsOpen("");
-      setInputValue("");
-      queryClient.invalidateQueries(["unit"]);
-    }
-  }, [setIsOpen, isSuccess, queryClient]);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    // Step 2: Handle changes to the input field
-    setInputValue(e.target.value);
-  };
-
-  return (
-    <>
-      <Modal
-        className="ModalForm"
-        centered
-        width={"40vw"}
-        footer={null}
-        open={isOpen === ModalEnum?.UNIT_DELETE}
-        onCancel={handleCancel}
-      >
-        <header>
-          {" "}
-          {t("practical.delete")} {objectToEdit?.name}{" "}
-        </header>
-
-        <main className="main_modal">
-          <div className="ValidationField w-100 mb-5">
-            <label className="text ">
-              {t("practical.to_confirm_deletion_please_re_enter")}{" "}
-              {t("models.unit")} {t("input.name")}
-            </label>
-
-            <Input
-              size="large"
-              type="text"
-              placeholder={`${t("practical.enter")}  ${t("models.unit")} ${t("input.name")} `}
-              value={inputValue}
-              onChange={handleChange}
-            />
-          </div>
-
-          <div className="buttons">
-            <div onClick={handleCancel}>{t("practical.cancel")}</div>
-            <button
-              className={
-                objectToEdit?.name !== inputValue ? "disabled_button" : ""
-              }
-              disabled={objectToEdit?.name !== inputValue || isLoading}
-              onClick={handleSubmit}
-              type="button"
-            >
-              {t("practical.delete")}
-
-              {isLoading && (
-                <span className="Spinier_Div">
-                  <Spin />
-                </span>
-              )}
-            </button>
-          </div>
-        </main>
-      </Modal>
-    </>
-  );
-};
-
-export default ModalForm;

src/Pages/Unit/Model/EditModel.tsx

@@ -1,82 +1,42 @@
-import React, { useEffect } from "react";
-import { Modal, Spin } from "antd";
-import { useModalState } from "../../../zustand/Modal";
-import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
-import ModelBody from "./AddUnit";
+import React from "react";
 import { getInitialValues, getValidationSchema } from "./formUtil";
 import { ModalEnum } from "../../../enums/Model";
-import { useUpdateUnit } from "../../../api/unit";
+import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
+import ModelForm from "./ModelForm";
+import { QueryStatusEnum } from "../../../enums/QueryStatus";
 import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
+import { useUpdateTag } from "../../../api/tags";
+import { useUpdateUnit } from "../../../api/unit";
 import { useParams } from "react-router-dom";
-import { useTranslation } from "react-i18next";
 
-const ModalForm: React.FC = () => {
-  const { isOpen, setIsOpen } = useModalState((state) => state);
+const EditModel: React.FC = () => {
+  const { mutate, status } = useUpdateUnit();
+  const { objectToEdit } = useObjectToEdit((state) => state);
 
-  const { mutate, isSuccess, isLoading } = useUpdateUnit();
-  const { objectToEdit, setObjectToEdit } = useObjectToEdit();
-
-  // console.log(objectToEdit,"objectToEdit");
   const { subject_id } = useParams();
 
-  useEffect(() => {
-    if (isSuccess) {
-      setIsOpen("");
-    }
-  }, [setIsOpen, isSuccess]);
-
   const handleSubmit = (values: any) => {
-    //   console.log(values,"values");
     mutate({
       ...values,
       subject_id: subject_id,
     });
   };
 
-  const handleCancel = () => {
-    setIsOpen("");
-  };
-
-  const [t] = useTranslation();
   return (
     <>
-      <Modal
-        className="ModalForm"
-        centered
-        width={"40vw"}
-        footer={null}
-        open={isOpen === ModalEnum?.UNIT_EDIT}
-        onCancel={handleCancel}
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.UNIT_EDIT}
+        modelTitle="unit"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues(objectToEdit)}
+        getValidationSchema={getValidationSchema}
+        isAddModal={false}
       >
-        <FormikForm
-          handleSubmit={handleSubmit}
-          initialValues={getInitialValues(objectToEdit)}
-          validationSchema={getValidationSchema}
-        >
-          <header>
-            {" "}
-            {t("practical.edit")}
-            {t("models.unit")}{" "}
-          </header>
-          <main className="main_modal w-100">
-            <ModelBody />
-            <div className="buttons">
-              <div onClick={handleCancel}>{t("practical.cancel")}</div>
-              <button disabled={isLoading} type="submit">
-                {t("practical.edit")}
-
-                {isLoading && (
-                  <span className="Spinier_Div">
-                    <Spin />
-                  </span>
-                )}
-              </button>
-            </div>
-          </main>
-        </FormikForm>
-      </Modal>
+        <ModelForm />
+      </LayoutModel>
     </>
   );
 };
 
-export default ModalForm;
+export default EditModel;

src/Pages/Unit/Model/EditUnit.tsx

@@ -1,27 +0,0 @@
-import { Col, Row } from "reactstrap";
-import React, { useEffect } from "react";
-import ValidationField from "../../../Components/ValidationField/ValidationField";
-import { Term_Select } from "../../../types/App";
-import { useFormikContext } from "formik";
-import { useModalState } from "../../../zustand/Modal";
-
-const Form = () => {
-  const formik = useFormikContext();
-  const { isOpen } = useModalState((state) => state);
-
-  useEffect(() => {
-    if (isOpen === "") {
-      formik.setErrors({});
-      formik.resetForm();
-    }
-  }, [isOpen]);
-  return (
-    <Row className="w-100">
-      <Col>
-        <ValidationField name="name" placeholder="name" label="name" />
-      </Col>
-    </Row>
-  );
-};
-
-export default Form;

src/Pages/Unit/Model/ModelForm.tsx

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

src/Pages/Unit/Page.tsx

@@ -5,16 +5,19 @@ import { useParams } from "react-router-dom";
 import { ParamsEnum } from "../../enums/params";
 import { useGetAllSubject } from "../../api/subject";
 import useSetPageTitle from "../../Hooks/useSetPageTitle";
+import { ModalEnum } from "../../enums/Model";
+import { useDeleteUnit } from "../../api/unit";
 
-const Table = lazy(() => import("./Table"));
-const AddModalForm = lazy(() => import("./Model/AddModel"));
-const EditModalForm = lazy(() => import("./Model/EditModel"));
-const DeleteModels = lazy(() => import("./Model/Delete"));
+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 = useDeleteUnit();
 
-  const { subject_id } = useParams<ParamsEnum>();
+  const { subject_id} = useParams<ParamsEnum>();
 
   const { data: Subject } = useGetAllSubject({
     show: subject_id,
@@ -34,8 +37,11 @@ const TableHeader = () => {
         </header>
         <Table />
         <AddModalForm />
-        <EditModalForm />
-        <DeleteModels />
+      <EditModalForm />
+      <DeleteModalForm
+          deleteMutation={deleteMutation}
+          ModelEnum={ModalEnum?.UNIT_DELETE}
+          />
       </Suspense>
     </div>
   );

src/Pages/Unit/useTableColumns.tsx

@@ -16,6 +16,7 @@ import {
   canEditUnit,
   canShowUnit,
 } from "../../utils/hasAbilityFn";
+import ActionButtons from "../../Components/Table/ActionButtons";
 
 export const useColumns = () => {
   const { handel_open_model } = useModalHandler();
@@ -73,41 +74,21 @@ export const useColumns = () => {
       ) : (
         ""
       ),
+      
       key: "actions",
       align: "end",
-      className: "custom_add_button_column",
-      render: (text, record, index) => {
-        const className =
-          index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";
-
+      width: "25vw",
+      render: (_text, record, index) => {
         return (
-          <Space size="middle" className={className}>
-            {canEditUnit && (
-              <Tooltip
-                placement="top"
-                title={t("practical.edit")}
-                color="#E0E0E0"
-              >
-                <span onClick={() => handleEdit(record)}>
-                  <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
-                </span>
-              </Tooltip>
-            )}
-            {canDeleteUnit && (
-              <RiDeleteBin6Fill
-                onClick={() => handelDelete(record)}
-                size={22}
-                style={{ color: "#C11313" }}
-              />
-            )}
-            {canShowUnit && (
-              <BsEyeFill
-                onClick={() => handelShow(record)}
-                size={22}
-                style={{ color: "green" }}
-              />
-            )}
-          </Space>
+          <ActionButtons
+            canDelete={canDeleteUnit}
+            canEdit={canEditUnit}
+            canShow={canShowUnit}
+            index={index}
+            onDelete={() => handelDelete(record)}
+            onEdit={() => handleEdit(record)}
+            onShow={() => handelShow(record)}
+          />
         );
       },
     },

src/Pages/lesson/Model/Add.tsx

@@ -1,27 +0,0 @@
-import { Col, Row } from "reactstrap";
-import React, { useEffect } from "react";
-import ValidationField from "../../../Components/ValidationField/ValidationField";
-import { useFormikContext } from "formik";
-import { useModalState } from "../../../zustand/Modal";
-
-const Form = () => {
-  const formik = useFormikContext();
-  const { isOpen } = useModalState((state) => state);
-
-  useEffect(() => {
-    if (isOpen === "") {
-      formik.setErrors({});
-      formik.resetForm();
-    }
-  }, [isOpen]);
-
-  return (
-    <Row className="w-100">
-      <Col>
-        <ValidationField name="name" label="name" />
-      </Col>
-    </Row>
-  );
-};
-
-export default Form;

src/Pages/lesson/Model/AddModel.tsx

@@ -1,24 +1,20 @@
 import React, { useEffect } from "react";
-import { Modal, Spin } from "antd";
-import { useModalState } from "../../../zustand/Modal";
-import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
-import ModelBody from "./Add";
 import { getInitialValues, getValidationSchema } from "./formUtil";
 import { ModalEnum } from "../../../enums/Model";
-import { useAddLesson } from "../../../api/lesson";
-import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
+import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
+import { QueryStatusEnum } from "../../../enums/QueryStatus";
+import ModelForm from "./ModelForm";
 import { useQueryClient } from "react-query";
-import { useTranslation } from "react-i18next";
+import { useAddLesson } from "../../../api/lesson";
 import { useParams } from "react-router-dom";
 import { ParamsEnum } from "../../../enums/params";
+import { useModalState } from "../../../zustand/Modal";
+
+const AddModel: React.FC = () => {
 
-const ModalForm: React.FC = () => {
   const { isOpen, setIsOpen } = useModalState((state) => state);
-  const { objectToEdit, setObjectToEdit } = useObjectToEdit();
-
   const queryClient = useQueryClient();
-
-  const { mutate, isSuccess, isLoading } = useAddLesson();
+  const { mutate, isSuccess, status } = useAddLesson();
 
   const { unit_id } = useParams<ParamsEnum>();
   useEffect(() => {
@@ -32,49 +28,20 @@ const ModalForm: React.FC = () => {
     mutate({ ...values, unit_id: unit_id });
   };
 
-  const handleCancel = () => {
-    setIsOpen("");
-  };
-
-  const [t] = useTranslation();
   return (
     <>
-      <Modal
-        className="ModalForm"
-        centered
-        width={"40vw"}
-        footer={null}
-        open={isOpen === ModalEnum?.LESSON_ADD}
-        onCancel={handleCancel}
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.LESSON_ADD}
+        modelTitle="lesson"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues({})}
+        getValidationSchema={getValidationSchema}
       >
-        <FormikForm
-          handleSubmit={handleSubmit}
-          initialValues={getInitialValues([])}
-          validationSchema={getValidationSchema}
-        >
-          <header>
-            {" "}
-            {t("practical.add")} {t("models.lesson")}{" "}
-          </header>
-          <main className="main_modal w-100">
-            <ModelBody />
-            <div className="buttons">
-              <div onClick={handleCancel}>{t("practical.back")}</div>
-              <button disabled={isLoading} type="submit">
-                {t("practical.add")}
-
-                {isLoading && (
-                  <span className="Spinier_Div">
-                    <Spin />
-                  </span>
-                )}
-              </button>
-            </div>
-          </main>
-        </FormikForm>
-      </Modal>
+        <ModelForm />
+      </LayoutModel>
     </>
   );
 };
 
-export default ModalForm;
+export default AddModel;

src/Pages/lesson/Model/Delete.tsx

@@ -1,97 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Input, Modal, Spin } from "antd";
-import { useModalState } from "../../../zustand/Modal";
-import { ModalEnum } from "../../../enums/Model";
-import { useDeleteLesson } from "../../../api/lesson";
-import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
-import { useQueryClient } from "react-query";
-import { useTranslation } from "react-i18next";
-
-const ModalForm: React.FC = () => {
-  const { isOpen, setIsOpen } = useModalState((state) => state);
-  const [inputValue, setInputValue] = useState("");
-
-  const { mutate, isSuccess, isLoading } = useDeleteLesson();
-  const { objectToEdit, setObjectToEdit } = useObjectToEdit((state) => state);
-  const queryClient = useQueryClient();
-  const [t] = useTranslation();
-  const handleSubmit = () => {
-    mutate({
-      id: Number(objectToEdit?.id),
-    });
-  };
-  useEffect(() => {
-    if (isSuccess) {
-      setIsOpen("");
-      setInputValue("");
-
-      queryClient.invalidateQueries(["unit"]);
-    }
-  }, [setIsOpen, isSuccess, queryClient]);
-
-  const handleCancel = () => {
-    setInputValue("");
-    setIsOpen("");
-    setObjectToEdit({});
-  };
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value);
-  };
-
-  return (
-    <>
-      <Modal
-        className="ModalForm"
-        centered
-        width={"40vw"}
-        footer={null}
-        open={isOpen === ModalEnum?.LESSON_DELETE}
-        onCancel={handleCancel}
-      >
-        <header>
-          {" "}
-          {t("practical.delete")} {objectToEdit?.name}{" "}
-        </header>
-
-        <main className="main_modal">
-          <div className="ValidationField w-100 mb-5">
-            <label className="text ">
-              {t("practical.to_confirm_deletion_please_re_enter")}{" "}
-              {t("models.lesson")} {t("input.name")}
-            </label>
-
-            <Input
-              size="large"
-              type="text"
-              placeholder={`${t("practical.enter")} ${t("input.name")} ${t("models.lesson")} `}
-              value={inputValue}
-              onChange={handleChange}
-            />
-          </div>
-
-          <div className="buttons">
-            <div onClick={handleCancel}>{t("practical.cancel")}</div>
-            <button
-              className={
-                objectToEdit?.name !== inputValue ? "disabled_button" : ""
-              }
-              disabled={objectToEdit?.name !== inputValue || isLoading}
-              onClick={handleSubmit}
-            >
-              {t("practical.delete")}
-
-              {isLoading && (
-                <span className="Spinier_Div">
-                  <Spin />
-                </span>
-              )}
-            </button>
-          </div>
-        </main>
-      </Modal>
-    </>
-  );
-};
-
-export default ModalForm;

src/Pages/lesson/Model/EditModel.tsx

@@ -1,25 +1,23 @@
 import React, { useEffect } from "react";
-import { Modal, Spin } from "antd";
 import { useModalState } from "../../../zustand/Modal";
-import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
-import ModelBody from "./Edit";
 import { getInitialValues, getValidationSchema } from "./formUtil";
 import { ModalEnum } from "../../../enums/Model";
 import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
 import { useUpdateLesson } from "../../../api/lesson";
 import { useQueryClient } from "react-query";
 import { useTranslation } from "react-i18next";
+import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
+import { QueryStatusEnum } from "../../../enums/QueryStatus";
+import ModelForm from "./ModelForm";
 
 const ModalForm: React.FC = () => {
   const { isOpen, setIsOpen } = useModalState((state) => state);
 
-  const { mutate, isSuccess, isLoading } = useUpdateLesson();
+  const { mutate, isSuccess, status } = useUpdateLesson();
   const { objectToEdit, setObjectToEdit } = useObjectToEdit();
 
   const queryClient = useQueryClient();
 
-  // console.log(objectToEdit,"objectToEdit");
-
   useEffect(() => {
     if (isSuccess) {
       queryClient.invalidateQueries(["unit"]);
@@ -29,54 +27,25 @@ const ModalForm: React.FC = () => {
   }, [setIsOpen, isSuccess, queryClient]);
 
   const handleSubmit = (values: any) => {
-    //   console.log(values,"values");
     mutate({
       id: values?.id,
       name: values?.name,
     });
   };
 
-  const handleCancel = () => {
-    setIsOpen("");
-  };
-
-  const [t] = useTranslation();
   return (
     <>
-      <Modal
-        className="ModalForm"
-        centered
-        width={"40vw"}
-        footer={null}
-        open={isOpen === ModalEnum?.LESSON_EDIT}
-        onCancel={handleCancel}
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.LESSON_EDIT}
+        modelTitle="lesson"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues(objectToEdit)}
+        getValidationSchema={getValidationSchema}
+        isAddModal={false}
       >
-        <FormikForm
-          handleSubmit={handleSubmit}
-          initialValues={getInitialValues(objectToEdit)}
-          validationSchema={getValidationSchema}
-        >
-          <header>
-            {" "}
-            {t("practical.edit")} {t("practical.details")} {t("models.lesson")}{" "}
-          </header>
-          <main className="main_modal w-100">
-            <ModelBody />
-            <div className="buttons">
-              <div onClick={handleCancel}>{t("practical.back")}</div>
-              <button disabled={isLoading} type="submit">
-                {t("practical.edit")}
-
-                {isLoading && (
-                  <span className="Spinier_Div">
-                    <Spin />
-                  </span>
-                )}
-              </button>
-            </div>
-          </main>
-        </FormikForm>
-      </Modal>
+        <ModelForm />
+      </LayoutModel>
     </>
   );
 };

src/Pages/lesson/Model/ModelForm.tsx

@@ -1,13 +1,9 @@
 import { Col, Row } from "reactstrap";
-import React from "react";
 import ValidationField from "../../../Components/ValidationField/ValidationField";
-
 const Form = () => {
   return (
     <Row className="w-100">
-      <Col>
         <ValidationField name="name" label="name" />
-      </Col>
     </Row>
   );
 };

src/Pages/lesson/Page.tsx

@@ -5,14 +5,17 @@ import useSetPageTitle from "../../Hooks/useSetPageTitle";
 import { useParams } from "react-router-dom";
 import { ParamsEnum } from "../../enums/params";
 import { useGetAllUnit } from "../../api/unit";
+import { ModalEnum } from "../../enums/Model";
+import { useDeleteLesson } from "../../api/lesson";
 
-const Table = lazy(() => import("./Table"));
-const AddModalForm = lazy(() => import("./Model/AddModel"));
-const EditModalForm = lazy(() => import("./Model/EditModel"));
-const DeleteModels = lazy(() => import("./Model/Delete"));
+const Table = lazy(() => import('./Table'));
+const AddModalForm = lazy(() => import('./Model/AddModel'));
+const EditModalForm = lazy(() => import('./Model/EditModel'));
+const DeleteModelsForm = lazy(() => import('../../Layout/Dashboard/DeleteModels'));
 
 const TableHeader = () => {
   const [t] = useTranslation();
+  const deleteMutation = useDeleteLesson();
 
   const { unit_id } = useParams<ParamsEnum>();
   const { data: unit } = useGetAllUnit({ show: unit_id });
@@ -41,8 +44,11 @@ const TableHeader = () => {
         </header>
         <Table />
         <AddModalForm />
-        <EditModalForm />
-        <DeleteModels />
+      <EditModalForm />
+      <DeleteModelsForm
+          deleteMutation={deleteMutation}
+          ModelEnum={ModalEnum?.LESSON_DELETE}
+          />
       </Suspense>
     </div>
   );

src/Pages/lesson/useTableColumns.tsx

@@ -1,18 +1,11 @@
-import { Space, TableColumnsType, Tooltip } from "antd";
+import { TableColumnsType } from "antd";
 import { Lesson } from "../../types/Item";
 import { FaPlus } from "react-icons/fa";
-
 import useModalHandler from "../../utils/useModalHandler";
 import { ModalEnum } from "../../enums/Model";
 import { useObjectToEdit } from "../../zustand/ObjectToEditState";
-import { RiDeleteBin6Fill } from "react-icons/ri";
-import { MdOutlineEdit } from "react-icons/md";
-import { findLabelByValue } from "../../utils/findLabelByValue";
 import { useTranslation } from "react-i18next";
-import { hasAbility } from "../../utils/hasAbility";
-import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "../../enums/abilities";
-import { formatNumber } from "../../utils/formatNumber";
-import { BsEyeFill } from "react-icons/bs";
+import { ABILITIES_ENUM } from "../../enums/abilities";
 import { useNavigate } from "react-router-dom";
 import {
   canAddLesson,
@@ -20,6 +13,7 @@ import {
   canEditLesson,
   canShowLesson,
 } from "../../utils/hasAbilityFn";
+import ActionButtons from "../../Components/Table/ActionButtons";
 
 export const useColumns = () => {
   const { handel_open_model } = useModalHandler();
@@ -70,39 +64,18 @@ export const useColumns = () => {
       ),
       key: "actions",
       align: "end",
-      className: "custom_add_button_column",
-      render: (text, record, index) => {
-        const className =
-          index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";
-
+      width: "25vw",
+      render: (_text, record, index) => {
         return (
-          <Space size="middle" className={className}>
-            {canEditLesson && (
-              <Tooltip
-                placement="top"
-                title={t("practical.edit")}
-                color="#E0E0E0"
-              >
-                <span onClick={() => handleEdit(record)}>
-                  <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
-                </span>
-              </Tooltip>
-            )}
-            {canDeleteLesson && (
-              <RiDeleteBin6Fill
-                onClick={() => handelDelete(record)}
-                size={22}
-                style={{ color: "#C11313" }}
-              />
-            )}
-            {canShowLesson && (
-              <BsEyeFill
-                onClick={() => handelShow(record)}
-                size={22}
-                style={{ color: "green" }}
-              />
-            )}
-          </Space>
+          <ActionButtons
+            canDelete={canDeleteLesson}
+            canEdit={canEditLesson}
+            canShow={canShowLesson}
+            index={index}
+            onDelete={() => handelDelete(record)}
+            onEdit={() => handleEdit(record)}
+            onShow={() => handelShow(record)}
+          />
         );
       },
     },

src/Pages/question/AddPage.tsx

@@ -16,9 +16,9 @@ import { useObjectToEdit } from "../../zustand/ObjectToEditState";
 
 import Header from "../../Components/exercise/Header";
 import { Question } from "../../types/Item";
-import BaseForm from "./Model/Malty/Add";
-import Form from "./Model/Add";
-const AcceptModal = lazy(() => import("./Model/AcceptModal"));
+import BaseForm from './Model/Malty/Add'
+import ModelForm from './Model/ModelForm'
+const AcceptModal = lazy(() => import('./Model/AcceptModal'));
 
 import { useModalState } from "../../zustand/Modal";
 import { ModalEnum } from "../../enums/Model";
@@ -161,8 +161,9 @@ const AddPage: React.FC = () => {
           validationSchema={getValidationSchemaBase}
         >
           <main className="w-100 exercise_add_main">
-            <Header />
-            <BaseForm />
+          <Header/>
+            <ModelForm/>
+           
             <div className="exercise_add_buttons">
               <div onClick={handleCancel}>{t("practical.back")}</div>
               <button disabled={isLoading} className="relative" type="submit">
@@ -192,7 +193,7 @@ const AddPage: React.FC = () => {
       >
         <main className="w-100 exercise_add_main">
           <Header />
-          <Form />
+          <ModelForm />
 
           <div className="exercise_add_buttons">
             <div onClick={handleCancel}>{t("practical.back")}</div>

src/Pages/question/EditPage.tsx

@@ -21,8 +21,8 @@ import { ParamsEnum } from "../../enums/params";
 import { useObjectToEdit } from "../../zustand/ObjectToEditState";
 import { removeStringKeys } from "../../utils/removeStringKeys";
 import SpinContainer from "../../Components/Layout/SpinContainer";
-import Form from "./Model/Edit";
-import BaseForm from "./Model/Malty/Edit";
+import ModelForm from './Model/ModelForm'
+import BaseForm from './Model/Malty/Edit'
 import { Question } from "../../types/Item";
 import { toast } from "react-toastify";
 import useSetPageTitle from "../../Hooks/useSetPageTitle";
@@ -255,7 +255,7 @@ const EditPage: React.FC = () => {
             </div>
             <div>{t("header.exercise")}</div>
           </header>
-          <Form />
+          <ModelForm />
           <div className="exercise_add_buttons">
             <div onClick={handleCancel}>{t("practical.back")}</div>
             <button disabled={isLoading} className="relative" type="submit">

src/Pages/question/Model/Add.tsx

@@ -1,80 +0,0 @@
-import { Col, Row } from "reactstrap";
-import React, { useEffect } from "react";
-import ValidationField from "../../../Components/ValidationField/ValidationField";
-import { useFormikContext } from "formik";
-import ChoiceFields from "./Field/ChoiceFields";
-import { FaCirclePlus } from "react-icons/fa6";
-import { Choice } from "../../../types/Item";
-import { useTranslation } from "react-i18next";
-import DynamicTags from "./Tags/DynamicTags";
-import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
-import MathInput from "./MathInput";
-const Form = () => {
-  const formik = useFormikContext<any>();
-  const { setSuccess, Success, setSavedQuestionData } = useObjectToEdit();
-
-  useEffect(() => {
-    if (Success) {
-      formik.setErrors({});
-      formik.resetForm({ values: {} });
-      setSuccess(false);
-    }
-  }, [Success]);
-
-  useEffect(() => {
-    setSavedQuestionData(formik.values);
-  }, [formik?.values]);
-
-  const handleAddChoice = () => {
-    console.log(formik?.values?.QuestionOptions?.length);
-
-    formik.setFieldValue("QuestionOptions", [
-      ...((formik?.values as any)?.QuestionOptions as Choice[]),
-
-      {
-        answer: null,
-        answer_image: null,
-        isCorrect: 0,
-      },
-    ]);
-  };
-  const [t] = useTranslation();
-
-  return (
-    <Row className="w-100">
-      <div className="exercise_form">
-        {/* <MathInput/> */}
-        <ValidationField
-          className="textarea_exercise"
-          name="content"
-          label="details"
-          type="TextArea"
-        />
-        <ValidationField
-          className="file_exercise"
-          name="image"
-          label="attachment"
-          type="File"
-        />
-
-        <div></div>
-      </div>
-      <div className=" flex "></div>
-      {(((formik?.values as any)?.QuestionOptions as Choice[]) || []).map(
-        (item: Choice, index: number) => {
-          return <ChoiceFields key={index} index={index} data={item} />;
-        },
-      )}
-      {formik?.values?.QuestionOptions?.length < 5 && (
-        <p className="add_new_button">
-          <FaCirclePlus onClick={handleAddChoice} size={23} />{" "}
-          {t("header.add_new_choice")}
-        </p>
-      )}
-
-      <DynamicTags />
-    </Row>
-  );
-};
-
-export default Form;

src/Pages/question/Model/Delete.tsx

@@ -1,97 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Input, Modal, Spin } from "antd";
-import { useModalState } from "../../../zustand/Modal";
-import { ModalEnum } from "../../../enums/Model";
-import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
-import { useDeleteQuestion } from "../../../api/Question";
-import { useTranslation } from "react-i18next";
-
-const ModalForm: React.FC = () => {
-  const { isOpen, setIsOpen } = useModalState((state) => state);
-  const [inputValue, setInputValue] = useState("");
-
-  const { mutate, isLoading, isSuccess } = useDeleteQuestion();
-  const { objectToEdit, setObjectToEdit } = useObjectToEdit();
-
-  useEffect(() => {
-    if (isSuccess) {
-      setIsOpen("");
-      setInputValue("");
-    }
-  }, [isSuccess, setIsOpen]);
-
-  const handleSubmit = () => {
-    mutate({
-      id: Number(objectToEdit?.id),
-    });
-  };
-
-  const handleCancel = () => {
-    setInputValue("");
-    setIsOpen("");
-    setObjectToEdit({});
-  };
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    // Step 2: Handle changes to the input field
-    setInputValue(e.target.value);
-  };
-  const [t] = useTranslation();
-  console.log(objectToEdit?.id);
-
-  return (
-    <>
-      <Modal
-        className="ModalForm"
-        centered
-        width={"40vw"}
-        footer={null}
-        open={isOpen === ModalEnum?.QUESTION_DELETE}
-        onCancel={handleCancel}
-      >
-        <header>
-          {t("practical.delete")} {t("input.id")} ({objectToEdit?.id}){" "}
-        </header>
-        <main className="main_modal">
-          <div className="ValidationField w-100 mb-5">
-            <label className="text ">
-              {t("practical.to_confirm_deletion_please_re_enter")}{" "}
-              {t("input.id")} {t("models.Question")}
-            </label>
-
-            <Input
-              size="large"
-              type="text"
-              placeholder={`${t("practical.enter")} ${t("input.id")} ${t("models.Question")} `}
-              value={inputValue}
-              onChange={handleChange}
-            />
-          </div>
-
-          <div className="buttons">
-            <div onClick={handleCancel}>{t("practical.cancel")}</div>
-            <button
-              className={
-                objectToEdit?.id !== inputValue ? "disabled_button" : ""
-              }
-              disabled={
-                Number(objectToEdit?.id) !== Number(inputValue) || isLoading
-              }
-              onClick={handleSubmit}
-            >
-              {t("practical.delete")}
-
-              {isLoading && (
-                <span className="Spinier_Div">
-                  <Spin />
-                </span>
-              )}
-            </button>
-          </div>
-        </main>
-      </Modal>
-    </>
-  );
-};
-
-export default ModalForm;

src/Pages/question/Model/Edit.tsx

@@ -1,82 +0,0 @@
-import { Col, Row } from "reactstrap";
-import React, { useEffect } from "react";
-import ValidationField from "../../../Components/ValidationField/ValidationField";
-import { useFormikContext } from "formik";
-import { useModalState } from "../../../zustand/Modal";
-import PdfUploader from "../../../Components/CustomFields/PdfUploader";
-import ChoiceFields from "./Field/ChoiceFields";
-import { FaCirclePlus } from "react-icons/fa6";
-import { Choice } from "../../../types/Item";
-import { useTranslation } from "react-i18next";
-import DynamicTags from "./Tags/DynamicTags";
-import { useGetAllQuestion } from "../../../api/Question";
-
-const Form = () => {
-  const formik = useFormikContext<any>();
-  const { isOpen } = useModalState((state) => state);
-  // const {data} = useGetAllQuestion();
-
-  useEffect(() => {
-    if (isOpen === "") {
-      formik.setErrors({});
-      formik.resetForm();
-    }
-  }, [isOpen]);
-
-  // console.log(formik?.errors);
-
-  const handleAddChoice = () => {
-    formik.setFieldValue("QuestionOptions", [
-      ...((formik?.values as any)?.QuestionOptions as Choice[]),
-
-      {
-        answer: null,
-        answer_image: null,
-        isCorrect: 0,
-      },
-    ]);
-  };
-  const [t] = useTranslation();
-
-  return (
-    <Row className="w-100">
-      <div className="exercise_form">
-        <ValidationField
-          className="textarea_exercise"
-          name="content"
-          label="details"
-          type="TextArea"
-        />
-        <ValidationField
-          className="file_exercise"
-          name="image"
-          label="attachment"
-          type="File"
-        />
-
-        {/* <ValidationField  name="isBase" label="isBase" type="Checkbox" /> */}
-        <div></div>
-      </div>
-      <div className=" flex ">
-        {/* <ValidationField  name="min_mark_to_pass" label="min_mark_to_pass" type="Number" /> */}
-
-        {/* <ValidationField  name="parent_id" label="parent_id" type="Select" option={[]} /> */}
-      </div>
-      {(((formik?.values as any)?.QuestionOptions as Choice[]) || []).map(
-        (item: Choice, index: number) => {
-          return <ChoiceFields key={index} index={index} data={item} />;
-        },
-      )}
-      {formik?.values?.QuestionOptions?.length < 5 && (
-        <p className="add_new_button">
-          <FaCirclePlus onClick={handleAddChoice} size={23} />{" "}
-          {t("header.add_new_choice")}
-        </p>
-      )}
-
-      <DynamicTags />
-    </Row>
-  );
-};
-
-export default Form;

src/Pages/question/Model/ModelForm.tsx

@@ -0,0 +1,60 @@
+import { Row } from "reactstrap";
+import ValidationField from "../../../Components/ValidationField/ValidationField";
+import { useFormikContext } from "formik";
+import ChoiceFields from "./Field/ChoiceFields";
+import { FaCirclePlus } from "react-icons/fa6";
+import { Choice } from "../../../types/Item";
+import { useTranslation } from "react-i18next";
+import DynamicTags from "./Tags/DynamicTags";
+import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
+import { useEffect } from "react";
+
+const Form = () => {
+  const [t] = useTranslation()
+  const formik = useFormikContext<any>();
+  const { setSuccess, Success, setSavedQuestionData } = useObjectToEdit();
+
+  useEffect(() => {
+    if (Success) {
+      formik.setErrors({});
+      formik.resetForm({ values: {} });
+      setSuccess(false);
+    }
+  }, [Success]);
+
+  useEffect(() => {
+    setSavedQuestionData(formik.values)
+  }, [formik?.values])
+
+
+
+  const handleAddChoice = () => {          
+    formik.setFieldValue('QuestionOptions', [...(formik?.values  as any)?.QuestionOptions as Choice[],
+    {
+      answer:null,
+      answer_image:null,
+      isCorrect:0,
+    }])
+  }
+
+  return (
+    <Row className="w-100">
+      <div className="exercise_form">
+        <ValidationField className="textarea_exercise" name="content" label="details" type="TextArea" />
+        <ValidationField className="file_exercise" name="image" label="attachment" type="File" />
+      </div>
+      {
+        (((formik?.values  as any)?.QuestionOptions as Choice[])||[]) .map((item:Choice,index:number)=>{
+          return <ChoiceFields   key={index}  index={index}  data={item}/>
+       })}
+      {formik?.values?.QuestionOptions?.length < 5  && (
+        <p className="add_new_button" >
+          <FaCirclePlus  onClick={handleAddChoice} size={23} />  {t("header.add_new_choice")}
+        </p> 
+      )}
+      <DynamicTags/>       
+    </Row>
+  );
+};
+
+export default Form;

src/Pages/question/Page.tsx

@@ -1,18 +1,22 @@
 import { useTranslation } from "react-i18next";
 import { lazy, Suspense } from "react";
 import { Spin } from "antd";
-import DeleteModel from "./Model/Delete";
 import { useParams } from "react-router-dom";
 import { ParamsEnum } from "../../enums/params";
 import { useGetAllUnit } from "../../api/unit";
 import useSetPageTitle from "../../Hooks/useSetPageTitle";
 import { useGetAllLesson } from "../../api/lesson";
+import { useDeleteQuestion } from "../../api/Question";
+import DeleteModels from "../../Layout/Dashboard/DeleteModels";
+import { ModalEnum } from "../../enums/Model";
 const Table = lazy(() => import("./Table"));
 
 const TableHeader = () => {
   const [t] = useTranslation();
 
-  const { unit_id, lesson_id } = useParams<ParamsEnum>();
+  const deleteMutation = useDeleteQuestion();
+
+  const {  unit_id,lesson_id } = useParams<ParamsEnum>();
   const { data: unit } = useGetAllUnit({ show: unit_id });
   const { data: lesson } = useGetAllLesson({ show: lesson_id });
   const unitName = unit?.data?.name ?? "";
@@ -45,7 +49,10 @@ const TableHeader = () => {
         </header>
         <Table />
       </Suspense>
-      <DeleteModel />
+      <DeleteModels
+          deleteMutation={deleteMutation}
+          ModelEnum={ModalEnum?.QUESTION_DELETE}
+          />
     </div>
   );
 };

src/Pages/question/useTableColumns.tsx

@@ -1,10 +1,8 @@
-import { Space, TableColumnsType, Tooltip } from "antd";
+import { TableColumnsType } from "antd";
 import { Question } from "../../types/Item";
 import { FaPlus } from "react-icons/fa";
 import { ModalEnum } from "../../enums/Model";
 import { useObjectToEdit } from "../../zustand/ObjectToEditState";
-import { RiDeleteBin6Fill } from "react-icons/ri";
-import { MdOutlineEdit } from "react-icons/md";
 import { useTranslation } from "react-i18next";
 import { ABILITIES_ENUM } from "../../enums/abilities";
 import { useNavigate } from "react-router-dom";
@@ -14,6 +12,7 @@ import {
   canDeleteQuestion,
   canEditQuestion,
 } from "../../utils/hasAbilityFn";
+import ActionButtons from "../../Components/Table/ActionButtons";
 
 export const useColumns = () => {
   const { setObjectToEdit } = useObjectToEdit((state) => state);
@@ -77,41 +76,16 @@ export const useColumns = () => {
       ),
       key: "actions",
       align: "end",
-      className: "custom_add_button_column",
-      render: (text, record, index) => {
-        const className =
-          index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";
-
+      width: "25vw",
+      render: (_text, record, index) => {
         return (
-          <Space size="middle" className={className}>
-            {canEditQuestion && (
-              <Tooltip
-                placement="top"
-                title={t("practical.edit")}
-                color="#E0E0E0"
-              >
-                <span onClick={() => handleEdit(record)}>
-                  <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
-                </span>
-              </Tooltip>
-            )}
-            {canDeleteQuestion && (
-              <RiDeleteBin6Fill
-                onClick={() => handelDelete(record)}
-                size={22}
-                style={{ color: "#C11313" }}
-              />
-            )}
-            {/* {can_show_Question && (
-        
-              <BsEyeFill
-                onClick={() => handelShow(record)}
-                size={22}
-                style={{ color: "green" }}
-              />
-           
-                )} */}
-          </Space>
+          <ActionButtons
+            canDelete={canDeleteQuestion}
+            canEdit={canEditQuestion}
+            index={index}
+            onDelete={() => handelDelete(record)}
+            onEdit={() => handleEdit(record)}
+          />
         );
       },
     },

src/Pages/subject/Model/Add.tsx

@@ -1,32 +0,0 @@
-import { Col, Row } from "reactstrap";
-import React, { useEffect } from "react";
-import ValidationField from "../../../Components/ValidationField/ValidationField";
-import { useGetAllTeacher } from "../../../api/teacher";
-import useFormatDataToSelect from "../../../utils/useFormatDataToSelect";
-import { useFormikContext } from "formik";
-import { useModalState } from "../../../zustand/Modal";
-import useSearchQuery from "../../../api/utils/useSearchQuery";
-
-const Form = () => {
-  const { isOpen } = useModalState((state) => state);
-  const formik = useFormikContext<any>();
-  useEffect(() => {
-    if (isOpen === "") {
-      formik.setErrors({});
-      formik.resetForm();
-    }
-  }, [isOpen]);
-
-  return (
-    <Row className="w-100">
-      <Col>
-        <ValidationField name="name" label="name" />
-      </Col>
-      <Col>
-        <ValidationField type="File" name="image" label="image" />
-      </Col>
-    </Row>
-  );
-};
-
-export default Form;

src/Pages/subject/Model/AddModel.tsx

@@ -1,75 +1,31 @@
-import React, { useEffect } from "react";
-import { Modal, Spin } from "antd";
-import { useModalState } from "../../../zustand/Modal";
-import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
-import ModelBody from "./Add";
+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 { useAddSubject } from "../../../api/subject";
-import { useParams } from "react-router-dom";
-import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
-import { useTranslation } from "react-i18next";
 
-const ModalForm: React.FC = () => {
-  const { isOpen, setIsOpen } = useModalState((state) => state);
-  const { mutate, isSuccess, isLoading } = useAddSubject();
-  const { setObjectToEdit } = useObjectToEdit();
-
-  useEffect(() => {
-    if (isSuccess) {
-      setIsOpen("");
-      setObjectToEdit({});
-    }
-  }, [setIsOpen, isSuccess]);
+const AddModel: React.FC = () => {
+  const { mutate, status } = useAddSubject();
 
   const handleSubmit = (values: any) => {
-    //   console.log(values,"values");
-    mutate({
-      ...values,
-    });
+    mutate({ ...values });
   };
-
-  const handleCancel = () => {
-    setIsOpen("");
-    setObjectToEdit({});
-  };
-  const [t] = useTranslation();
   return (
     <>
-      <Modal
-        className="ModalForm"
-        centered
-        width={"60vw"}
-        footer={null}
-        open={isOpen === ModalEnum?.SUBJECT_ADD}
-        onCancel={handleCancel}
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.SUBJECT_ADD}
+        modelTitle="subject"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues({})}
+        getValidationSchema={getValidationSchema}
       >
-        <FormikForm
-          handleSubmit={handleSubmit}
-          initialValues={getInitialValues(null)}
-          validationSchema={getValidationSchema}
-        >
-          <header>
-            {t("practical.add")} {t("models.subject")}{" "}
-          </header>
-          <main className="main_modal w-100">
-            <ModelBody />
-            <div className="buttons">
-              <div onClick={handleCancel}>{t("practical.back")}</div>
-              <button disabled={isLoading} type="submit">
-                {t("practical.add")}
-                {isLoading && (
-                  <span className="Spinier_Div">
-                    <Spin />
-                  </span>
-                )}
-              </button>
-            </div>
-          </main>
-        </FormikForm>
-      </Modal>
+        <ModelForm />
+      </LayoutModel>
     </>
   );
 };
 
-export default ModalForm;
+export default AddModel;

src/Pages/subject/Model/Delete.tsx

@@ -1,93 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Input, Modal, Spin } from "antd";
-import { useModalState } from "../../../zustand/Modal";
-import { ModalEnum } from "../../../enums/Model";
-import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
-import { useDeleteSubject } from "../../../api/subject";
-import { useTranslation } from "react-i18next";
-
-const ModalForm: React.FC = () => {
-  const { isOpen, setIsOpen } = useModalState((state) => state);
-  const [inputValue, setInputValue] = useState("");
-
-  const { mutate, isSuccess, isLoading } = useDeleteSubject();
-  const { objectToEdit, setObjectToEdit } = useObjectToEdit();
-
-  const full_name = objectToEdit?.name;
-
-  useEffect(() => {
-    if (isSuccess) {
-      setIsOpen("");
-      setInputValue("");
-    }
-  }, [isSuccess, setIsOpen]);
-
-  const handleSubmit = () => {
-    mutate({
-      id: Number(objectToEdit?.id),
-    });
-  };
-
-  const handleCancel = () => {
-    setInputValue("");
-    setIsOpen("");
-    setObjectToEdit({});
-  };
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value);
-  };
-
-  const [t] = useTranslation();
-  return (
-    <>
-      <Modal
-        className="ModalForm"
-        centered
-        width={"40vw"}
-        footer={null}
-        open={isOpen === ModalEnum?.SUBJECT_DELETE}
-        onCancel={handleCancel}
-      >
-        <header>
-          {" "}
-          {t("practical.delete")} {full_name}{" "}
-        </header>
-        <main className="main_modal">
-          <div className="ValidationField w-100 mb-5">
-            <label className="text ">
-              {t("practical.to_confirm_deletion_please_re_enter")}{" "}
-              {t("input.name")} {t("models.subject")}
-            </label>
-
-            <Input
-              size="large"
-              type="text"
-              placeholder={`${t("practical.enter")} ${t("input.name")} ${t("models.subject")} `}
-              value={inputValue}
-              onChange={handleChange}
-            />
-          </div>
-
-          <div className="buttons">
-            <div onClick={handleCancel}>{t("practical.cancel")}</div>
-            <button
-              className={full_name !== inputValue ? "disabled_button" : ""}
-              disabled={full_name !== inputValue || isLoading}
-              onClick={handleSubmit}
-            >
-              {t("practical.delete")}
-              {isLoading && (
-                <span className="Spinier_Div">
-                  <Spin />
-                </span>
-              )}
-            </button>
-          </div>
-        </main>
-      </Modal>
-    </>
-  );
-};
-
-export default ModalForm;

src/Pages/subject/Model/Edit.tsx

@@ -1,31 +0,0 @@
-import { Col, Row } from "reactstrap";
-import React, { useEffect } from "react";
-import ValidationField from "../../../Components/ValidationField/ValidationField";
-import { useGetAllTeacher } from "../../../api/teacher";
-import useFormatDataToSelect from "../../../utils/useFormatDataToSelect";
-import { useModalState } from "../../../zustand/Modal";
-import { useFormikContext } from "formik";
-import useSearchQuery from "../../../api/utils/useSearchQuery";
-
-const Form = () => {
-  const { isOpen } = useModalState((state) => state);
-  const formik = useFormikContext();
-  useEffect(() => {
-    if (isOpen === "") {
-      formik.setErrors({});
-    }
-  }, [isOpen]);
-
-  return (
-    <Row className="w-100">
-      <Col>
-        <ValidationField name="name" label="name" />
-      </Col>
-      <Col>
-        <ValidationField type="File" name="image" label="image" />
-      </Col>
-    </Row>
-  );
-};
-
-export default Form;

src/Pages/subject/Model/EditModel.tsx

@@ -1,81 +1,36 @@
-import React, { useEffect } from "react";
-import { Modal, Spin } from "antd";
-import { useModalState } from "../../../zustand/Modal";
-import ModelBody from "./Edit";
+import React from "react";
 import { getInitialValues, getValidationSchema } from "./formUtil";
 import { ModalEnum } from "../../../enums/Model";
 import { useUpdateSubject } from "../../../api/subject";
 import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
-import { Form, Formik } from "formik";
 import { handelImageState } from "../../../utils/DataToSendImageState";
-import { useTranslation } from "react-i18next";
+import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
+import { QueryStatusEnum } from "../../../enums/QueryStatus";
+import ModelForm from "./ModelForm";
 
 const ModalForm: React.FC = () => {
-  const { objectToEdit, setObjectToEdit } = useObjectToEdit((state) => state);
-  const { isOpen, setIsOpen } = useModalState((state) => state);
+  const { objectToEdit } = useObjectToEdit((state) => state);
 
-  const { mutate, isSuccess, isLoading } = useUpdateSubject();
-
-  useEffect(() => {
-    if (isSuccess) {
-      setIsOpen("");
-      setObjectToEdit({});
-    }
-  }, [isSuccess]);
+  const { mutate ,status} = useUpdateSubject();
 
   const handleSubmit = (values: any) => {
     const Data_to_send = { ...values };
     const handelImage = handelImageState(Data_to_send, "image");
     mutate(handelImage);
   };
-
-  const handleCancel = () => {
-    setIsOpen("");
-    setObjectToEdit(null);
-  };
-  const [t] = useTranslation();
-
   return (
     <>
-      <Modal
-        className="ModalForm"
-        centered
-        width={"60vw"}
-        footer={null}
-        open={isOpen === ModalEnum?.SUBJECT_EDIT}
-        onCancel={handleCancel}
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.SUBJECT_EDIT}
+        modelTitle="subject"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues(objectToEdit)}
+        getValidationSchema={getValidationSchema}
+        isAddModal={false}
       >
-        <Formik
-          enableReinitialize
-          initialValues={getInitialValues(objectToEdit)}
-          validationSchema={getValidationSchema}
-          onSubmit={handleSubmit}
-        >
-          {({ values }) => (
-            <Form className="w-100">
-              <header>
-                {t("practical.edit")} {t("models.subject")}{" "}
-              </header>
-              <main className="main_modal w-100">
-                <ModelBody />
-
-                <div className="buttons">
-                  <div onClick={handleCancel}>{t("practical.cancel")}</div>
-                  <button disabled={isLoading} type="submit">
-                    {t("practical.edit")}
-
-                    {isLoading && (
-                      <span className="Spinier_Div">
-                        <Spin />
-                      </span>
-                    )}
-                  </button>
-                </div>
-              </main>
-            </Form>
-          )}
-        </Formik>
-      </Modal>
+        <ModelForm />
+      </LayoutModel>
     </>
   );
 };

src/Pages/subject/Model/ModelForm.tsx

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

src/Pages/subject/Table/Page.tsx

@@ -2,17 +2,19 @@ import { ModalEnum } from "../../../enums/Model";
 import useModalHandler from "../../../utils/useModalHandler";
 import { FaPlus } from "react-icons/fa";
 import { useTranslation } from "react-i18next";
-import TablePage from "./TablePage";
-
-import AddSubjectModalForm from "../Model/AddModel";
-import EditSubjectModalForm from "../Model/EditModel";
-import DeleteSubjectModalForm from "../Model/Delete";
 import useSetPageTitle from "../../../Hooks/useSetPageTitle";
 import { canAddSubject } from "../../../utils/hasAbilityFn";
+import { useDeleteSubject } from "../../../api/subject";
+import { lazy } from "react";
+const Table = lazy(() => import("./TablePage"));
+const AddModalForm = lazy(() => import("../Model/AddModel"));
+const EditModalForm = lazy(() => import("../Model/EditModel"));
+const DeleteModalForm = lazy(() => import("../../../Layout/Dashboard/DeleteModels"));
 
 const TableWithHeader = () => {
   const { handel_open_model } = useModalHandler();
   const [t] = useTranslation();
+  const deleteMutation = useDeleteSubject();
 
   useSetPageTitle(t(`page_header.subject`));
 
@@ -29,13 +31,16 @@ const TableWithHeader = () => {
           </button>
         )}
       </header>
-      <TablePage />
+      <Table />
 
-      <AddSubjectModalForm />
-      <EditSubjectModalForm />
-      <DeleteSubjectModalForm />
-    </div>
-  );
-};
+      <AddModalForm />
+      <EditModalForm />
+      <DeleteModalForm
+        deleteMutation={deleteMutation}
+        ModelEnum={ModalEnum?.SUBJECT_DELETE}
+        />
+  </div>
+  )
+}
 
 export default TableWithHeader;

src/Pages/subject/Table/useTableColumns.tsx

@@ -1,35 +1,26 @@
-import { Space, TableColumnsType, Tooltip } from "antd";
+import { TableColumnsType } from "antd";
 import { useModalState } from "../../../zustand/Modal";
 import { ModalEnum } from "../../../enums/Model";
-import { MdOutlineEdit } from "react-icons/md";
-import { RiDeleteBin6Fill } from "react-icons/ri";
 import { FaEye } from "react-icons/fa";
 import ColumnsImage from "../../../Components/Columns/ColumnsImage";
-import { ImageBaseURL } from "../../../api/config";
 import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
 import { useNavigate } from "react-router-dom";
-import useModalHandler from "../../../utils/useModalHandler";
 import { useTranslation } from "react-i18next";
-import {
-  ABILITIES_ENUM,
-  ABILITIES_VALUES_ENUM,
-} from "../../../enums/abilities";
-import { hasAbility } from "../../../utils/hasAbility";
+import ActionButtons from "../../../Components/Table/ActionButtons";
 import { canDeleteSubject, canEditSubject } from "../../../utils/hasAbilityFn";
 
 export const useColumns = () => {
   const navigate = useNavigate();
   const { setObjectToEdit } = useObjectToEdit((state) => state);
-  const { handel_open_model } = useModalHandler();
+  const { setIsOpen } = useModalState((state) => state);
 
-  const handelDeleteSubject = (data: any) => {
-    setObjectToEdit(data);
-    handel_open_model(ModalEnum?.SUBJECT_DELETE);
-  };
-
-  const handleEdit = (record: any) => {
+  const handelDelete = (record:any) => {
     setObjectToEdit(record);
-    handel_open_model(ModalEnum?.SUBJECT_EDIT);
+    setIsOpen(ModalEnum?.SUBJECT_DELETE);
+  };
+  const handleEdit = (record:any) => {
+    setObjectToEdit(record);
+    setIsOpen(ModalEnum?.SUBJECT_EDIT);
   };
 
   const [t] = useTranslation();
@@ -53,8 +44,6 @@ export const useColumns = () => {
       align: "center",
       render: (row: any) => {
         let str = row;
-        // console.log(row);
-
         return <ColumnsImage src={str} />;
       },
     },
@@ -81,31 +70,15 @@ export const useColumns = () => {
       key: "actions",
       align: "end",
       width: "25vw",
-      render: (text, record, index) => {
-        const className =
-          index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";
-
+      render: (_text, record, index) => {
         return (
-          <Space size="middle" className={className}>
-            {canEditSubject && (
-              <Tooltip
-                placement="top"
-                title={t("practical.edit")}
-                color="#E0E0E0"
-              >
-                <span onClick={() => handleEdit(record)}>
-                  <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
-                </span>
-              </Tooltip>
-            )}
-            {canDeleteSubject && (
-              <RiDeleteBin6Fill
-                onClick={() => handelDeleteSubject(record)}
-                size={22}
-                style={{ color: "#C11313" }}
-              />
-            )}
-          </Space>
+          <ActionButtons
+            canDelete={canEditSubject}
+            canEdit={canDeleteSubject}
+            index={index}
+            onDelete={() => handelDelete(record)}
+            onEdit={() => handleEdit(record)}
+          />
         );
       },
     },

src/Styles/App/classNames.scss

@@ -272,4 +272,36 @@ button:disabled {
 .h1 {
   text-align: center;
   font-weight: bold;
+  
+}
+
+.buttonAction {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2vw;
+
+  > button {
+    outline: none;
+    border: none;
+    border-radius: 20px;
+    padding: 0.3vw 1.5vw;
+    width: 8vw;
+    height: 2vw;
+    // background: var(--primary);
+    color: var(--white);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    font-size: 0.8vw;
+  }
+  .EditButton {
+    background: var(--bg);
+    border: 1px solid #d4d4d8;
+    color: var(--text);
+  }
+  .DeleteButton {
+    background: #dc2626;
+  }
 }

src/api/config.ts

@@ -1,4 +1,4 @@
-// export const BaseURL = "http://192.168.1.107:8000/api/";
+// export const BaseURL = "http://192.168.1.6:8000/api/";
 // export const BaseURL = "http://127.0.0.1:8000/api/";
 
 export const BaseURL = "https://exercise-automation.point-dev.net/api/";

src/translate/ar.json

@@ -193,7 +193,8 @@
     "no": "لا",
     "Are you sure you want to go back and not save any changes?": "هل أنت متأكد أنك تريد العودة وعدم حفظ أي تغييرات؟",
     "accept_back": "قبول العودة ",
-    "accept": "قبول "
+    "accept": "قبول ",
+    "to_confirm_deletion_please_re_enter_id":"يرجى اعادة ادخال رقم التعريف"
   },
   "Table": {
     "header": "",
@@ -251,8 +252,9 @@
     "exams": "اختبارات",
     "lessons": "دروس",
     "sex": "الجنس",
-    "Question": "اسئلة",
-    "tags": "كلمات مفتاحية"
+    "Question":"اسئلة",
+    "tags":"كلمات مفتاحية",
+    "tags_details":"تفاصيل الكلمة المفتاحية"
   },
   "education_class_actions": {
     "Student_Records": "سجلات الطلاب",

src/translate/en.json

@@ -0,0 +1,613 @@
+{
+  "main_page": "Main Page",
+  "dashboard": "dashboard",
+
+  "validation": {
+    "required": "required",
+    "value_must_be_less_than_900000": "value_must_be_less_than_900000",
+    "type_required": "type_required",
+    "pleas_fill_all_label": "pleas Fill All Label",
+    "please_select_students": "please_select_students",
+    "please_fill_in_all_the_fields": "please_fill_in_all_the_fields",
+    "Invalid_email": "Invalid_email",
+    "Email_is_required": "Email_is_required",
+    "Password_is_required": "Password_is_required",
+    "Password_must_be_at_least_8_characters_long": "Password_must_be_at_least_8_characters_long",
+    "Nationality_is_required": "Nationality_is_required",
+    "Address_is_required": "Address_is_required",
+    "Place_of_birth_is_required": "Place_of_birth_is_required",
+    "Date_of_birth_is_required": "Date_of_birth_is_required",
+    "Mother's_name_is_required": "Mother's_name_is_required",
+    "Father's_name_is_required": "Father's_name_is_required",
+    "Last_name_is_required": "Last_name_is_required",
+    "First_name_is_required": "First_name_is_required",
+    "Religion_is_required": "Religion_is_required",
+    "Gender_is_required": "Gender_is_required",
+    "Attachment1_is_required": "Attachment1_is_required",
+    "Father's_job_is_required": "Father's_job_is_required",
+    "Mother's_phone_number_is_required": "Mother's_phone_number_is_required",
+    "Father's_phone_number_is_required": "Father's_phone_number_is_required",
+    "Mother's_job_is_required": "Mother's_job_is_required",
+    "justification_is_required": "justification_is_required",
+    "duration_is_required": "duration_is_required",
+    "pleas_do_any_changes": "pleas_do_any_changes",
+    "edit_session_content": "edit_session_content",
+    "Title_is_required": "Title_is_required",
+    "Exam_type_is_required": "Exam_type_is_required",
+    "Subject_is_required": "Subject_is_required",
+    "Maximum_grade_is_required": "Maximum_grade_is_required",
+    "Must_be_a_number": "Must_be_a_number",
+    "Value_must_not_exceed_10000": "Value_must_not_exceed_10000",
+    "Passing_grade_is_required": "Passing_grade_is_required",
+    "Date_is_required": "Date_is_required",
+    "Duration_is_required": "Duration_is_required",
+    "the_possess_done_successful": "the_possess_done_successful",
+    "some_thing_went_wrong": "some_thing_went_wrong",
+    "Due_date_must_be_before_assigning_date": "Due date must be before assigning date"
+  },
+  "header": {
+    "register_students": "register_students",
+    "import_students": "import_students",
+    "move_student": "move_student",
+    "Student_added_successfully": "Student_added_successfully",
+    "the_student_has_been_added_Do_you_want_to_add_another_student": "the_student_has_been_added_Do_you_want_to_add_another_student",
+    "Add_a_new_student": "Add_a_new_student",
+    "Please enter all required data": "Please enter all required data",
+    "Back to Previous Step": "Back to Previous Step",
+    "Adding...": "Adding...",
+    "Next Step": "Next Step",
+    "Add Student": "Add Student",
+    "Attendance and absence of students": "Attendance and absence of students",
+    "see_more_details": "see_more_details",
+    "earlyDepartures": "earlyDepartures",
+    "Follow_the_curriculum": "Follow_the_curriculum",
+    "add_session_content": "add_session_content",
+    "add_session": "add_session",
+    "edit_session": "edit_session",
+    "classroom_behavior_of_students": "classroom_behavior_of_students",
+    "note_details": "note_details",
+    "student_homework": "student_homework",
+    "home_work_title": "home_work_title",
+    "subject": "subject",
+    "max_grade": "max_grade",
+    "student_count": "student_count",
+    "student_exam": "student_exam",
+    "student_name": "student_name",
+    "student_card": "student_card",
+    "Student_classroom_behavior": "Student_classroom_behavior",
+    "The_student_financial_situation": "The_student_financial_situation",
+    "Modify_student_information": "Modify_student_information",
+    "student_details": "student_details",
+    "student_status": "student_status",
+
+    "parent_details": "parent_details",
+    "contact_details": "contact_details",
+    "additional_details": "additional_details",
+    "note_type": "note_type",
+    "student_payment": "student_payment",
+    "add_new_unit": "add_new_unit",
+    "add_new_lessons": "add_new_lessons",
+    "Student_Information": "Student_Information",
+    "Parent_Information": "Parent_Information",
+    "Contact_Information": "Contact_Information",
+    "Attachment_Images": "Attachment_Images",
+    "Weekly_Class_Schedule": "Weekly_Class_Schedule",
+    "Print_Schedule": "Print_Schedule",
+    "Welcome": "Welcome",
+    "Enter your email and password to log in": "Enter your email and password to log in",
+    "change_your_current_password": "change your current password",
+    "view_cycle_for_this_branch": "view cycle for this branch",
+    "view_term_for_this_cycle": "view term for this branch"
+  },
+  "columns": {
+    "id": "id",
+    "name": "name",
+    "address": "address",
+    "contact_information": "contact_information",
+    "data": "data",
+    "details": "details",
+    "receipt_number": "receipt_number",
+    "payment_type": "payment_type",
+    "value": "value",
+    "subject_name": "subject_name",
+    "image": "image",
+    "card": "card",
+    "birthday": "birthday",
+    "last_name": "last_name",
+    "father_name": "father_name",
+    "sex": "sex",
+    "presence": "presence",
+    "teacher_name": "teacher_name",
+    "lesson_name": "lesson_name",
+    "session_start": "session_start",
+    "type": "type",
+    "title": "title",
+    "content": "content",
+    "assigning_date": "assigning_date",
+    "due_date": "due_date",
+    "mark": "mark",
+    "student_name": "student_name",
+    "absence": "absence",
+    "earlyDeparture": "earlyDeparture",
+    "lateArrival": "lateArrival",
+    "date": "date",
+    "starting_date": "starting_date",
+    "ending_date": "ending_date",
+    "term_type": "term_type",
+    "status": "status"
+  },
+  "practical": {
+    "to_confirm_deletion_please_re_enter": "To confirm deletion, please re-enter",
+
+    "back": "back",
+    "add": "add",
+    "edit": "edit",
+    "move": "move",
+    "skip": "skip",
+    "show": "show",
+    "save": "save",
+    "enter": "enter",
+    "delete": "delete",
+    "cancel": "cancel",
+    "search_here": "search_here",
+    "details": "details",
+    "export_students": "export_students",
+    "send_notification_to_course": "send_notification_to_course",
+    "Send_Direct_Notification": "Send_Direct_Notification",
+    "cancel_registration": "cancel_registration",
+    "send_notification_to_education_class": "send_notification_to_education_class",
+    "send_notification_to_student": "send_notification_to_student",
+    "status": "status",
+    "Step": "Step",
+    "login": "login",
+    "submite": "submite",
+    "index": "index",
+    "store": "store",
+    "update": "update",
+    "me": "me",
+    "importStudentData": "importStudentData",
+    "moveStudents": "moveStudents",
+    "importStudents": "importStudents",
+    "overview": "overview",
+    "presence": "presence"
+  },
+  "Table": {
+    "header": "",
+    "info": ""
+  },
+  "models": {
+    "teacher": "teacher",
+    "student": "student",
+    "students": "students",
+    "subject": "subject",
+    "education_class": "education_class",
+    "eduClass": "education_class",
+
+    "session_content": "session_content",
+    "course": "course",
+    "payment": "payment",
+    "note": "note",
+    "homework": "homework",
+    "mark": "mark",
+    "exam": "exam",
+    "absence": "absence",
+    "late_arrival": "late_arrival",
+    "presence": "presence",
+    "earlyDeparture": "earlyDeparture",
+    "branch": "branch",
+    "cycle": "cycle",
+    "term": "term",
+    "role": "role",
+
+    "Pass": "Pass",
+    "user": "User",
+    "branchAdmin": "Branch Admin",
+    "grade": "Grade",
+    "homeworkAttachment": "Homework Attachment",
+    "lateArrival": "Late Arrival",
+    "noteAttachment": "Note Attachment",
+    "session": "Session",
+    "sessionContent": "Session Content",
+
+    "subjectAttachment": "Subject Attachment",
+    "unit": "Unit",
+    "lesson": "Lesson",
+    "exercise": "Exercise",
+    "exerciseAnswer": "Exercise Answer",
+    "tag": "Tag",
+
+    "Exam": "Exam",
+    "ExamType": "Exam Type",
+
+    "studentParent": "Student Parent",
+    "registrationRecord": "Registration Record",
+    "paymentOverview": "Payment Overview",
+    "subjectAttachmentType": "Subject Attachment Type",
+    "param": "Param",
+    "subjectProgress": "Subject Progress",
+    "main_page": "Main Page",
+    "tags_details":"tags details"
+  },
+  "education_class_actions": {
+    "Student_Records": "Student_Records",
+    "Attendance": "Attendance",
+    "Permissions": "Permissions",
+    "Grades": "Grades",
+    "Notes": "Notes",
+    "Financial_Status": "Financial_Status",
+    "Assignments": "Assignments",
+    "Class_Schedule": "Class_Schedule",
+    "Curriculum_Follow_up": "Curriculum_Follow_up"
+  },
+
+  "input": {
+    "name": "name",
+    "address": "address",
+    "number": "number",
+    "price": "price",
+    "drag_and_drop_or_click_here_to_select_the_file": "Drag and drop or click here to select the file",
+    "Click_to_upload_the_image": "Click to upload the image",
+    "payment_type": "payment_type",
+    "details": "details",
+    "student_name": "student_name",
+    "receipt_number": "receipt_number",
+    "date": "date",
+    "value": "value",
+    "teacher_name": "teacher_name",
+    "sex": "sex",
+    "content": "content",
+    "type": "type",
+    "attachments": "attachments",
+    "send_notification_to_course": "send_notification_to_course",
+    "export_students": "export_students",
+    "password": "password",
+    "nationality": "nationality",
+    "religion": "religion",
+    "birthday": "birthday",
+    "birth_place": "birth_place",
+    "father_name": "father_name",
+    "father_job": "father_job",
+    "mother_name": "mother_name",
+    "mother_phone_number": "mother_phone_number",
+    "father_phone_number": "father_phone_number",
+    "mother_job": "mother_job",
+    "phone_number": "phone_number",
+    "additional_phone_number": "additional_phone_number",
+    "note": "note",
+    "school_document": "school_document",
+    "first_name": "first_name",
+    "last_name": "last_name",
+    "email": "email",
+    "student_status": "student_status",
+    "duration": "duration",
+    "justification": "justification",
+    "attachment": "attachment",
+    "session_name": "session_name",
+    "lesson_name": "lesson_name",
+    "title": "title",
+    "due_date": "due_date",
+    "assigning_date": "assigning_date",
+    "subject_name": "subject_name",
+    "exam_type": "exam_type",
+    "grade_to_pass": "grade_to_pass",
+    "max_grade": "max_grade",
+    "status": "status",
+    "departure_time": "departure_time",
+    "mark": "mark",
+    "image": "image",
+    "term": "term",
+    "session_start": "session_start",
+    "session_end": "session_end",
+    "academic_year": "academic_year",
+    "select_date": "select_date",
+    "School_Year": "School Year",
+    "Enter_branch_first": "Enter branch first",
+    "School_Term": "School Term",
+    "Enter_school_year_first": "Enter school year first",
+    "Username": "Username",
+    "Password": "Password",
+    "new_password": "new_password",
+    "old_password": "old_password",
+    "username": "username",
+    "starting_date": "starting_date",
+    "ending_date": "ending_date",
+    "term_type": "term_type",
+    "description": "description",
+    "abilities": "abilities"
+  },
+
+  "select": {
+    "Payments": {
+      "paid": "paid",
+      "to_be_paid": "to_be_paid",
+      "all_payment": "all_payment",
+      "dues": "dues"
+    },
+    "Marks": {
+      "Not_Taken": "Not_Taken",
+      "Taken": "Taken"
+    },
+    "Sex": {
+      "male": "male",
+      "female": "female",
+      "bi": "mix"
+    },
+    "Religion": {
+      "muslim": "muslim",
+      "christianity": "christianity",
+      "other": "other"
+    },
+    "nationalities": {
+      "Afghan": "Afghan",
+      "Albanian": "Albanian",
+      "Algerian": "Algerian",
+      "American": "American",
+      "Andorran": "Andorran",
+      "Angolan": "Angolan",
+      "Antiguans": "Antiguans",
+      "Argentinean": "Argentinean",
+      "Armenian": "Armenian",
+      "Australian": "Australian",
+      "Austrian": "Austrian",
+      "Azerbaijani": "Azerbaijani",
+      "Bahamian": "Bahamian",
+      "Bahraini": "Bahraini",
+      "Bangladeshi": "Bangladeshi",
+      "Barbadian": "Barbadian",
+      "Barbudans": "Barbudans",
+      "Batswana": "Batswana",
+      "Belarusian": "Belarusian",
+      "Belgian": "Belgian",
+      "Belizean": "Belizean",
+      "Beninese": "Beninese",
+      "Bhutanese": "Bhutanese",
+      "Bolivian": "Bolivian",
+      "Bosnian": "Bosnian",
+      "Brazilian": "Brazilian",
+      "British": "British",
+      "Bruneian": "Bruneian",
+      "Bulgarian": "Bulgarian",
+      "Burkinabe": "Burkinabe",
+      "Burmese": "Burmese",
+      "Burundian": "Burundian",
+      "Cambodian": "Cambodian",
+      "Cameroonian": "Cameroonian",
+      "Canadian": "Canadian",
+      "Cape Verdean": "Cape Verdean",
+      "Central African": "Central African",
+      "Chadian": "Chadian",
+      "Chilean": "Chilean",
+      "Chinese": "Chinese",
+      "Colombian": "Colombian",
+      "Comoran": "Comoran",
+      "Congolese": "Congolese",
+      "Costa Rican": "Costa Rican",
+      "Croatian": "Croatian",
+      "Cuban": "Cuban",
+      "Cypriot": "Cypriot",
+      "Czech": "Czech",
+      "Danish": "Danish",
+      "Djibouti": "Djibouti",
+      "Dominican": "Dominican",
+      "Dutch": "Dutch",
+      "East Timorese": "East Timorese",
+      "Ecuadorean": "Ecuadorean",
+      "Egyptian": "Egyptian",
+      "Emirian": "Emirian",
+      "Equatorial Guinean": "Equatorial Guinean",
+      "Eritrean": "Eritrean",
+      "Estonian": "Estonian",
+      "Ethiopian": "Ethiopian",
+      "Fijian": "Fijian",
+      "Filipino": "Filipino",
+      "Finnish": "Finnish",
+      "French": "French",
+      "Gabonese": "Gabonese",
+      "Gambian": "Gambian",
+      "Georgian": "Georgian",
+      "German": "German",
+      "Ghanaian": "Ghanaian",
+      "Greek": "Greek",
+      "Grenadian": "Grenadian",
+      "Guatemalan": "Guatemalan",
+      "Guinea-Bissauan": "Guinea-Bissauan",
+      "Guinean": "Guinean",
+      "Guyanese": "Guyanese",
+      "Haitian": "Haitian",
+      "Herzegovinian": "Herzegovinian",
+      "Honduran": "Honduran",
+      "Hungarian": "Hungarian",
+      "I-Kiribati": "I-Kiribati",
+      "Icelander": "Icelander",
+      "Indian": "Indian",
+      "Indonesian": "Indonesian",
+      "Iranian": "Iranian",
+      "Iraqi": "Iraqi",
+      "Irish": "Irish",
+      "palestine": "palestine",
+      "Italian": "Italian",
+      "Ivorian": "Ivorian",
+      "Jamaican": "Jamaican",
+      "Japanese": "Japanese",
+      "Jordanian": "Jordanian",
+      "Kazakhstani": "Kazakhstani",
+      "Kenyan": "Kenyan",
+      "Kittian and Nevisian": "Kittian and Nevisian",
+      "Kuwaiti": "Kuwaiti",
+      "Kyrgyz": "Kyrgyz",
+      "Laotian": "Laotian",
+      "Latvian": "Latvian",
+      "Lebanese": "Lebanese",
+      "Liberian": "Liberian",
+      "Libyan": "Libyan",
+      "Liechtensteiner": "Liechtensteiner",
+      "Lithuanian": "Lithuanian",
+      "Luxembourger": "Luxembourger",
+      "Macedonian": "Macedonian",
+      "Malagasy": "Malagasy",
+      "Malawian": "Malawian",
+      "Malaysian": "Malaysian",
+      "Maldivan": "Maldivan",
+      "Malian": "Malian",
+      "Maltese": "Maltese",
+      "Marshallese": "Marshallese",
+      "Mauritanian": "Mauritanian",
+      "Mauritian": "Mauritian",
+      "Mexican": "Mexican",
+      "Micronesian": "Micronesian",
+      "Moldovan": "Moldovan",
+      "Monacan": "Monacan",
+      "Mongolian": "Mongolian",
+      "Moroccan": "Moroccan",
+      "Mosotho": "Mosotho",
+      "Motswana": "Motswana",
+      "Mozambican": "Mozambican",
+      "Namibian": "Namibian",
+      "Nauruan": "Nauruan",
+      "Nepali": "Nepali",
+      "New Zealander": "New Zealander",
+      "Nicaraguan": "Nicaraguan",
+      "Nigerian": "Nigerian",
+      "Nigerien": "Nigerien",
+      "North Korean": "North Korean",
+      "Northern Irish": "Northern Irish",
+      "Norwegian": "Norwegian",
+      "Omani": "Omani",
+      "Pakistani": "Pakistani",
+      "Palauan": "Palauan",
+      "Panamanian": "Panamanian",
+      "Papua New Guinean": "Papua New Guinean",
+      "Paraguayan": "Paraguayan",
+      "Peruvian": "Peruvian",
+      "Polish": "Polish",
+      "Portuguese": "Portuguese",
+      "Qatari": "Qatari",
+      "Romanian": "Romanian",
+      "Russian": "Russian",
+      "Rwandan": "Rwandan",
+      "Saint Lucian": "Saint Lucian",
+      "Salvadoran": "Salvadoran",
+      "Samoan": "Samoan",
+      "San Marinese": "San Marinese",
+      "Sao Tomean": "Sao Tomean",
+      "Saudi": "Saudi",
+      "Scottish": "Scottish",
+      "Senegalese": "Senegalese",
+      "Serbian": "Serbian",
+      "Seychellois": "Seychellois",
+      "Sierra Leonean": "Sierra Leonean",
+      "Singaporean": "Singaporean",
+      "Slovakian": "Slovakian",
+      "Slovenian": "Slovenian",
+      "Solomon Islander": "Solomon Islander",
+      "Somali": "Somali",
+      "South African": "South African",
+      "South Korean": "South Korean",
+      "Spanish": "Spanish",
+      "Sri Lankan": "Sri Lankan",
+      "Sudanese": "Sudanese",
+      "Surinamer": "Surinamer",
+      "Swazi": "Swazi",
+      "Swedish": "Swedish",
+      "Swiss": "Swiss",
+      "Syrian": "Syrian",
+      "Taiwanese": "Taiwanese",
+      "Tajik": "Tajik",
+      "Tanzanian": "Tanzanian",
+      "Thai": "Thai",
+      "Togolese": "Togolese",
+      "Tongan": "Tongan",
+      "Trinidadian/Tobagonian": "Trinidadian/Tobagonian",
+      "Tunisian": "Tunisian",
+      "Turkish": "Turkish",
+      "Tuvaluan": "Tuvaluan",
+      "Ugandan": "Ugandan",
+      "Ukrainian": "Ukrainian",
+      "Uruguayan": "Uruguayan",
+      "Uzbekistani": "Uzbekistani",
+      "Venezuelan": "Venezuelan",
+      "Vietnamese": "Vietnamese",
+      "Welsh": "Welsh",
+      "Yemenite": "Yemenite",
+      "Zambian": "Zambian",
+      "Zimbabwean": "Zimbabwean"
+    },
+    "Student_Type": {
+      "all_students": "all_students",
+      "absence": "absence",
+      "late_arrival": "late_arrival",
+      "presence": "presence",
+      "justified": "justified",
+      "not_justified": "not_justified",
+      "earlyDeparture": "earlyDeparture"
+    },
+    "Note": {
+      "normal_note": "normal_note",
+      "alert_note": "alert_note",
+      "financial_note": "financial_note",
+      "positive_note": "positive_note",
+      "warning_note": "warning_note",
+      "academic_note": "academic_note",
+      "studying_note": "studying_note",
+      "organization_note": "organization_note",
+      "all_note": "all_note"
+    },
+    "Exam": {
+      "Taken": "Taken",
+      "Not_Taken": "Not_Taken",
+      "all_student": "all_student"
+    },
+    "Term_type": {
+      "first": "first",
+      "second": "second"
+    }
+  },
+  "array": {
+    "Period": {
+      "Today": "Today",
+      "First": "First",
+      "Second": "Second",
+      "Third": "Third",
+      "Fourth": "Fourth",
+      "Fifth": "Fifth",
+      "Sixth": "Sixth",
+      "Seventh": "Seventh"
+    },
+    "Days": {
+      "Sunday": "Sunday",
+      "Monday": "Monday",
+      "Tuesday": "Tuesday",
+      "Wednesday": "Wednesday",
+      "Thursday": "Thursday",
+      "Friday": "Friday",
+      "Saturday": "Saturday"
+    },
+    "UserInfo": {
+      "course": "course",
+      "education_class": "education_class",
+      "nationality": "nationality",
+      "birthday": "birthday",
+      "warning": "warning",
+      "appreciation": "appreciation",
+      "alert": "alert"
+    }
+  },
+  "sidebar": {
+    "dashboard": "dashboard",
+    "course": "course",
+    "teacher": "teacher",
+    "payment": "payment",
+    "student_details": "student_details",
+    "create_student": "create_student",
+    "course_details": "course_details",
+    "education_class_details": "education_class_details",
+    "subject_details": "subject_details",
+    "logout": "logout",
+    "branch": "branch",
+    "role": "role"
+  },
+  "message": {
+    "some_thing_went_wrong": "some_thing_went_wrong",
+    "the_possess_done_successful": "the_possess_done_successful"
+  }
+}