fixess

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>
+      <header>{t("practical.delete_this_item")}</header>
-        {t("practical.delete")} {t(`models.${objectType}`)}
-      </header>
 
       <main className="main_modal">
         <div className="ValidationField w-100 mb-5">
           <label className="text ">
-            {t("practical.to_confirm_deletion_please_re_enter")}{" "}
+            {t("practical.to_confirm_deletion_please_re_enter_id")} ({" "}
-            {t(`input.${objectValue}`)} ({objectToEdit?.[objectValue]})
+            {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={
+            className={iaDisabled ? "disabled_button" : ""}
-              objectToEdit?.[objectValue] !== inputValue
+            disabled={iaDisabled}
-                ? "disabled_button"
-                : ""
-            }
-            disabled={objectToEdit?.[objectValue] !== inputValue || isLoading}
             onClick={handleSubmit}
             type="button"
           >

src/Pages/Tags/Model/Add.tsx

@@ -1,35 +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,66 +1,31 @@
-import React, { useEffect } from "react";
+import React 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 LayoutModel from "../../../Layout/Dashboard/LayoutModel";
+import { QueryStatusEnum } from "../../../enums/QueryStatus";
 import { useAddTag } from "../../../api/tags";
-import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
+import ModelForm from "./ModelForm";
-import { useTranslation } from "react-i18next";
-import ModelButtons from "../../../Components/models/ModelButtons";
 
-const ModalForm: React.FC = () => {
+const AddModel: React.FC = () => {
-  const { isOpen, setIsOpen } = useModalState((state) => state);
+  const { mutate, status } = useAddTag();
-  const { mutate, isSuccess, isLoading } = useAddTag();
-  const { setObjectToEdit } = useObjectToEdit();
-  useEffect(() => {
-    if (isSuccess) {
-      setIsOpen("isSuccess");
-      setObjectToEdit({});
-    }
-  }, [setIsOpen, isSuccess]);
 
   const handleSubmit = (values: any) => {
-    
+    mutate({ ...values });
-    mutate({
-      ...values
-    });
   };
-
-  const handleCancel = () => {
-    setIsOpen("");
-    setObjectToEdit({});
-  };
-
-  const [t] = useTranslation();
   return (
     <>
-      <Modal
+      <LayoutModel
-        className="ModalForm"
+        status={status as QueryStatusEnum}
-        centered
+        ModelEnum={ModalEnum.TAGS_ADD}
-        width={"60vw"}
+        modelTitle="tags"
-        footer={null}
+        handleSubmit={handleSubmit}
-        open={isOpen === ModalEnum?.TAGS_ADD}
+        getInitialValues={getInitialValues({})}
-        onCancel={handleCancel}
+        getValidationSchema={getValidationSchema}
       >
-        <FormikForm
+        <ModelForm />
-          handleSubmit={handleSubmit}
+      </LayoutModel>
-          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>
     </>
   );
 };
 
-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/Edit.tsx

@@ -1,24 +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 = () => {
-
-  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/EditModel.tsx

@@ -1,69 +1,36 @@
-import React, { useEffect } from "react";
+import React 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 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 EditModel: React.FC = () => {
-  const { isOpen, setIsOpen } = useModalState((state) => state);
+  const { mutate, status } = useUpdateTag();
-  const { objectToEdit, setObjectToEdit } = useObjectToEdit(
+  const { objectToEdit } = useObjectToEdit((state) => state);
-    (state) => state,
+
-  );
-  const { mutate, isSuccess, isLoading } = useUpdateTag();
-  // console.log(objectToEdit,"objectToEdit");
   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"
+      <LayoutModel
-      centered
+        status={status as QueryStatusEnum}
-      width={"60vw"}
+        ModelEnum={ModalEnum.TAGS_EDIT}
-      footer={null}
+        modelTitle="tags_details"
-      open={isOpen === ModalEnum?.TAGS_EDIT}
+        handleSubmit={handleSubmit}
-      onCancel={handleCancel}
+        getInitialValues={getInitialValues(objectToEdit)}
-    >
+        getValidationSchema={getValidationSchema}
-      {objectToEdit && (
+        isAddModal={false}
-        <FormikForm
+      >
-          handleSubmit={handleSubmit}
+        <ModelForm />
-          initialValues={getInitialValues(objectToEdit)}
+      </LayoutModel>
-          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>
   );
 };
 
-export default ModalForm;
+export default EditModel;

src/Pages/Tags/Page.tsx

@@ -1,18 +1,16 @@
-  import { FaPlus } from "react-icons/fa";
+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 DeleteModels = lazy(() => import('../../Layout/Dashboard/DeleteModels'));
 const SearchField = lazy(() => import('../../Components/DataTable/SearchField'));
 
 
@@ -22,6 +20,7 @@ const TableHeader = () => {
   useSetPageTitle(
     t(`page_header.tags`),
   );
+  const deleteMutation = useDeleteTag();
 
   return (
     <div className="TableWithHeader">
@@ -44,7 +43,10 @@ const TableHeader = () => {
 
       
         <Table />
-        <DeleteModalForm />
+        <DeleteModels
+          deleteMutation={deleteMutation}
+          ModelEnum={ModalEnum?.TAGS_DELETE}
+          />
         <AddModalForm />
         <EditModalForm />
       </Suspense>

src/Pages/Tags/useTableColumns.tsx

@@ -1,25 +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> = [
     {
@@ -40,44 +41,15 @@ export const useColumns = () => {
       key: "actions",
       align: "end",
       width: "25vw",
-      render: (text, record, index) => {
+      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";
-
         return (
-          <Space size="middle" className={className}>
+          <ActionButtons
-            {canEditTags && (
+            canDelete={canEditTags}
-              <Tooltip
+            canEdit={canDeleteTags}
-                placement="top"
+            index={index}
-                title={t("practical.edit")}
+            onDelete={() => handelDelete(record)}
-                color="#E0E0E0"
+            onEdit={() => handleEdit(record)}
-                
+          />
-              >
-                <span onClick={() => handleEdit(record)}>
-                <MdOutlineEdit
-                  size={22}
-                  style={{ color: "#A098AE" }}
-                  
-                />
-                </span>
-             
-              </Tooltip>
-            )}
-
-            {canDeleteTags && (
-              <RiDeleteBin6Fill
-                onClick={() => handelDelete(record)}
-                size={22}
-                style={{ color: "#C11313" }}
-              />
-            )}
-          </Space>
         );
       },
     },

src/Pages/Unit/Model/AddModel.tsx

@@ -1,76 +1,36 @@
-import React, { useEffect } from "react";
+import React from "react";
-import { Modal, Spin } from "antd";
-import { useModalState } from "../../../zustand/Modal";
-import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
-import ModelBody from "./AddUnit";
 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 AddModel: React.FC = () => {
-  const { isOpen, setIsOpen } = useModalState((state) => state);
+  const { mutate, status } = useAddUnit();
-
-  const { mutate, isSuccess, isLoading } = 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
+      <LayoutModel
-        className="ModalForm"
+        status={status as QueryStatusEnum}
-        centered
+        ModelEnum={ModalEnum.UNIT_ADD}
-        width={"40vw"}
+        modelTitle="unit"
-        footer={null}
+        handleSubmit={handleSubmit}
-        open={isOpen === ModalEnum?.UNIT_ADD}
+        getInitialValues={getInitialValues({})}
-        onCancel={handleCancel}
+        getValidationSchema={getValidationSchema}
       >
-        <FormikForm
+        <ModelForm />
-          handleSubmit={handleSubmit}
+      </LayoutModel>
-          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>
     </>
   );
 };
 
-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 React from "react";
-import { Modal, Spin } from "antd";
-import { useModalState } from "../../../zustand/Modal";
-import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
-import ModelBody from "./AddUnit";
 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 EditModel: React.FC = () => {
-  const { isOpen, setIsOpen } = useModalState((state) => state);
+  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
+      <LayoutModel
-        className="ModalForm"
+        status={status as QueryStatusEnum}
-        centered
+        ModelEnum={ModalEnum.UNIT_EDIT}
-        width={"40vw"}
+        modelTitle="unit"
-        footer={null}
+        handleSubmit={handleSubmit}
-        open={isOpen === ModalEnum?.UNIT_EDIT}
+        getInitialValues={getInitialValues(objectToEdit)}
-        onCancel={handleCancel}
+        getValidationSchema={getValidationSchema}
+        isAddModal={false}
       >
-        <FormikForm
+        <ModelForm />
-          handleSubmit={handleSubmit}
+      </LayoutModel>
-          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>
     </>
   );
 };
 
-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/Page.tsx

@@ -5,14 +5,17 @@ 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 DeleteModels = lazy(() => import('../../Layout/Dashboard/DeleteModels'));
 
 const TableHeader = () => {
   const [t] = useTranslation();
+  const deleteMutation = useDeleteUnit();
 
   const { subject_id} = useParams<ParamsEnum>();
 
@@ -41,7 +44,10 @@ const TableHeader = () => {
         <Table />
         <AddModalForm />
       <EditModalForm />
-      <DeleteModels />
+      <DeleteModels
+          deleteMutation={deleteMutation}
+          ModelEnum={ModalEnum?.UNIT_DELETE}
+          />
       </Suspense>
 
     </div>

src/Pages/Unit/useTableColumns.tsx

@@ -11,6 +11,7 @@ import { ABILITIES_ENUM } from "../../enums/abilities";
 import { BsEyeFill } from "react-icons/bs";
 import { useNavigate } from "react-router-dom";
 import { canAddUnit, canDeleteUnit, canEditUnit, canShowUnit } from "../../utils/hasAbilityFn";
+import ActionButtons from "../../Components/Table/ActionButtons";
 
 export const useColumns = () => {
   const { handel_open_model } = useModalHandler();
@@ -22,8 +23,6 @@ export const useColumns = () => {
     navigate(`${ABILITIES_ENUM?.UNIT}/${record?.id}`);
   };
 
-
-
   const handelDelete = (data: any) => {
     setObjectToEdit(data);
     handel_open_model(ModalEnum?.UNIT_DELETE);
@@ -70,48 +69,21 @@ export const useColumns = () => {
       ) : (
         ""
       ),
+      
       key: "actions",
       align: "end",
-      className: "custom_add_button_column",
+      width: "25vw",
-      render: (text, record, index) => {
+      render: (_text, record, index) => {
-        const className =
-          index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";
-
         return (
-          <Space size="middle" className={className}>
+          <ActionButtons
-            {canEditUnit && (
+            canDelete={canDeleteUnit}
-              <Tooltip
+            canEdit={canEditUnit}
-                placement="top"
+            canShow={canShowUnit}
-                title={t("practical.edit")}
+            index={index}
-                color="#E0E0E0"
+            onDelete={() => handelDelete(record)}
-              >
+            onEdit={() => handleEdit(record)}
-                <span onClick={() => handleEdit(record)}>
+            onShow={() => handelShow(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>
         );
       },
     },

src/Pages/lesson/Model/Add.tsx

@@ -1,28 +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 LayoutModel from "../../../Layout/Dashboard/LayoutModel";
-import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
+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, status } = useAddLesson();
-  const { mutate, isSuccess, isLoading } = 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
+      <LayoutModel
-        className="ModalForm"
+        status={status as QueryStatusEnum}
-        centered
+        ModelEnum={ModalEnum.LESSON_ADD}
-        width={"40vw"}
+        modelTitle="lesson"
-        footer={null}
+        handleSubmit={handleSubmit}
-        open={isOpen === ModalEnum?.LESSON_ADD}
+        getInitialValues={getInitialValues({})}
-        onCancel={handleCancel}
+        getValidationSchema={getValidationSchema}
       >
-        <FormikForm
+        <ModelForm />
-          handleSubmit={handleSubmit}
+      </LayoutModel>
-          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>
     </>
   );
 };
 
-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/Edit.tsx

@@ -1,16 +0,0 @@
-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>
-  );
-};
-
-export default Form;

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
+      <LayoutModel
-        className="ModalForm"
+        status={status as QueryStatusEnum}
-        centered
+        ModelEnum={ModalEnum.LESSON_EDIT}
-        width={"40vw"}
+        modelTitle="lesson"
-        footer={null}
+        handleSubmit={handleSubmit}
-        open={isOpen === ModalEnum?.LESSON_EDIT}
+        getInitialValues={getInitialValues(objectToEdit)}
-        onCancel={handleCancel}
+        getValidationSchema={getValidationSchema}
+        isAddModal={false}
       >
-        <FormikForm
+        <ModelForm />
-          handleSubmit={handleSubmit}
+      </LayoutModel>
-          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>
     </>
   );
 };

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 DeleteModels = 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 });
@@ -45,7 +48,10 @@ const TableHeader = () => {
         <Table />
         <AddModalForm />
       <EditModalForm />
-      <DeleteModels />
+      <DeleteModels
+          deleteMutation={deleteMutation}
+          ModelEnum={ModalEnum?.LESSON_DELETE}
+          />
       </Suspense>
 
     </div>

src/Pages/lesson/useTableColumns.tsx

@@ -1,20 +1,14 @@
-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 { useNavigate } from "react-router-dom";
 import { canAddLesson, canDeleteLesson, canEditLesson, canShowLesson } from "../../utils/hasAbilityFn";
+import ActionButtons from "../../Components/Table/ActionButtons";
 
 export const useColumns = () => {
   const { handel_open_model } = useModalHandler();
@@ -26,8 +20,6 @@ export const useColumns = () => {
     navigate(`${ABILITIES_ENUM.LESSON}/${record?.id}`);
   };
 
-
-
   const handelDelete = (data: any) => {
     setObjectToEdit(data);
     handel_open_model(ModalEnum?.LESSON_DELETE);
@@ -67,46 +59,18 @@ export const useColumns = () => {
       ),
       key: "actions",
       align: "end",
-      className: "custom_add_button_column",
+      width: "25vw",
-      render: (text, record, index) => {
+      render: (_text, record, index) => {
-        const className =
-          index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";
-
         return (
-          <Space size="middle" className={className}>
+          <ActionButtons
-            {canEditLesson && (
+            canDelete={canDeleteLesson}
-              <Tooltip
+            canEdit={canEditLesson}
-                placement="top"
+            canShow={canShowLesson}
-                title={t("practical.edit")}
+            index={index}
-                color="#E0E0E0"
+            onDelete={() => handelDelete(record)}
-              >
+            onEdit={() => handleEdit(record)}
-                <span onClick={() => handleEdit(record)}>
+            onShow={() => handelShow(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>
         );
       },
     },

src/Pages/question/AddPage.tsx

@@ -11,7 +11,7 @@ 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'
+import ModelForm from './Model/ModelForm'
 const AcceptModal = lazy(() => import('./Model/AcceptModal'));
 
 import { useModalState } from "../../zustand/Modal";
@@ -193,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

@@ -1,16 +1,15 @@
 import React, { useEffect }  from "react";
-import { Modal, Spin } from "antd";
+import { Spin } from "antd";
 import FormikForm from "../../Layout/Dashboard/FormikFormModel";
 import { getInitialValues, getValidationSchema ,getInitialValuesBase, getValidationSchemaBase, processTags} from "./Model/formUtil";
 import {  useAddQuestion, useDeleteQuestion, useGetAllQuestion, useUpdateQuestion } from "../../api/Question";
-import { useQueryClient } from "react-query";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 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 ModelForm from './Model/ModelForm'
 import BaseForm from './Model/Malty/Edit'
 import { Question } from "../../types/Item";
 import { toast } from "react-toastify";
@@ -156,11 +155,6 @@ const EditPage: React.FC = () => {
 
           updatedObject?.QuestionOptions?.forEach((item:any) => {
             if (item?.id) {              
-              // if(!item?.answer_image){
-              //   item["answer_image"] = ""
-              // }
-              console.log(item);
-              
               oldQuestionOptions.push(item);
             } else {
               newQuestionOptions.push(item);
@@ -171,9 +165,6 @@ const EditPage: React.FC = () => {
             old: oldQuestionOptions,
             new: newQuestionOptions
           };
-          console.log(QuestionOptions,"QuestionOptions");
-          
-          
         mutate({ ...updatedObject,QuestionOptions,tags });
       }
   };
@@ -259,7 +250,7 @@ const EditPage: React.FC = () => {
    {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,81 +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,95 +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,81 +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/Page.tsx

@@ -7,11 +7,15 @@ import { ParamsEnum } from "../../enums/params";
 import { useGetAllUnit } from "../../api/unit";
 import useSetPageTitle from "../../Hooks/useSetPageTitle";
 import { useGetAllLesson } from "../../api/lesson";
+import DeleteModels from "../../Layout/Dashboard/DeleteModels";
+import { ModalEnum } from "../../enums/Model";
+import { useDeleteQuestion } from "../../api/Question";
 const Table = lazy(() => import('./Table'));
 
 const TableHeader = () => {
   const [t] = useTranslation();
 
+  const deleteMutation = useDeleteQuestion();
 
   const {  unit_id,lesson_id } = useParams<ParamsEnum>();
   const { data: unit } = useGetAllUnit({ show: unit_id });
@@ -46,8 +50,10 @@ const TableHeader = () => {
       </header>
         <Table />
       </Suspense>
-      <DeleteModel/>
+      <DeleteModels
-
+          deleteMutation={deleteMutation}
+          ModelEnum={ModalEnum?.QUESTION_DELETE}
+          />
     </div>
   );
 };

src/Pages/question/useTableColumns.tsx

@@ -1,15 +1,14 @@
-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";
 import { useModalState } from "../../zustand/Modal";
 import { canAddQuestion, canDeleteQuestion, canEditQuestion } from "../../utils/hasAbilityFn";
+import ActionButtons from "../../Components/Table/ActionButtons";
 
 export const useColumns = () => {
   const { setObjectToEdit } = useObjectToEdit((state) => state);
@@ -78,45 +77,16 @@ export const useColumns = () => {
       ),
       key: "actions",
       align: "end",
-      className: "custom_add_button_column",
+      width: "25vw",
-      render: (text, record, index) => {
+      render: (_text, record, index) => {
-        const className =
-          index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";
-
         return (
-          <Space size="middle" className={className}>
+          <ActionButtons
-            {canEditQuestion && (
+            canDelete={canDeleteQuestion}
-              <Tooltip
+            canEdit={canEditQuestion}
-                placement="top"
+            index={index}
-                title={t("practical.edit")}
+            onDelete={() => handelDelete(record)}
-                color="#E0E0E0"
+            onEdit={() => handleEdit(record)}
-              >
+          />
-                <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>
         );
       },
     },

src/Pages/subject/Model/Add.tsx

@@ -1,34 +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,76 +1,31 @@
-import React, { useEffect } from "react";
+import React 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 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 AddModel: React.FC = () => {
-  const { isOpen, setIsOpen } = useModalState((state) => state);
+  const { mutate, status } = useAddSubject();
-  const { mutate, isSuccess, isLoading } = useAddSubject();
-  const { setObjectToEdit } = useObjectToEdit();
-
-  useEffect(() => {
-    if (isSuccess) {
-      setIsOpen("");
-      setObjectToEdit({});
-    }
-  }, [setIsOpen, isSuccess]);
 
   const handleSubmit = (values: any) => {
-    //   console.log(values,"values");
+    mutate({ ...values });
-    mutate({
-      ...values,
-  
-    });
   };
-
-  const handleCancel = () => {
-    setIsOpen("");
-    setObjectToEdit({});
-  };
-  const [t] = useTranslation();
   return (
     <>
-      <Modal
+      <LayoutModel
-        className="ModalForm"
+        status={status as QueryStatusEnum}
-        centered
+        ModelEnum={ModalEnum.SUBJECT_ADD}
-        width={"60vw"}
+        modelTitle="subject"
-        footer={null}
+        handleSubmit={handleSubmit}
-        open={isOpen === ModalEnum?.SUBJECT_ADD}
+        getInitialValues={getInitialValues({})}
-        onCancel={handleCancel}
+        getValidationSchema={getValidationSchema}
       >
-        <FormikForm
+        <ModelForm />
-          handleSubmit={handleSubmit}
+      </LayoutModel>
-          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>
     </>
   );
 };
 
-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,33 +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,83 +1,36 @@
-import React, { useEffect } from "react";
+import React from "react";
-import { Modal, Spin } from "antd";
-import { useModalState } from "../../../zustand/Modal";
-import ModelBody from "./Edit";
 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(
+  const { objectToEdit } = useObjectToEdit((state) => state);
-    (state) => state,
-  );
-  const { isOpen, setIsOpen } = useModalState((state) => state);
 
-  const { mutate, isSuccess, isLoading } = useUpdateSubject();
+  const { mutate ,status} = useUpdateSubject();
-
-  useEffect(() => {
-    if (isSuccess) {
-      setIsOpen("");
-      setObjectToEdit({});
-    }
-  }, [isSuccess]);
 
   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
+      <LayoutModel
-        className="ModalForm"
+        status={status as QueryStatusEnum}
-        centered
+        ModelEnum={ModalEnum.SUBJECT_EDIT}
-        width={"60vw"}
+        modelTitle="subject"
-        footer={null}
+        handleSubmit={handleSubmit}
-        open={isOpen === ModalEnum?.SUBJECT_EDIT}
+        getInitialValues={getInitialValues(objectToEdit)}
-        onCancel={handleCancel}
+        getValidationSchema={getValidationSchema}
+        isAddModal={false}
       >
-        <Formik
+        <ModelForm />
-          enableReinitialize
+      </LayoutModel>
-          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>
     </>
   );
 };

src/Pages/subject/Table/Page.tsx

@@ -4,19 +4,19 @@ 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 DeleteModels from '../../../Layout/Dashboard/DeleteModels';
+import { useDeleteSubject } from '../../../api/subject';
 
 
 const TableWithHeader = () => {
 
   const { handel_open_model } = useModalHandler();
   const [t] = useTranslation();
+  const deleteMutation = useDeleteSubject();
 
   useSetPageTitle(
     t(`page_header.subject`),
@@ -39,7 +39,10 @@ const TableWithHeader = () => {
 
     <AddSubjectModalForm />
       <EditSubjectModalForm />
-      <DeleteSubjectModalForm />
+      <DeleteModels
+        deleteMutation={deleteMutation}
+        ModelEnum={ModalEnum?.SUBJECT_DELETE}
+        />
   </div>
   )
 }

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 {
+import ActionButtons from "../../../Components/Table/ActionButtons";
-  ABILITIES_ENUM,
-  ABILITIES_VALUES_ENUM,
-} from "../../../enums/abilities";
-import { hasAbility } from "../../../utils/hasAbility";
 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) => {
+  const handelDelete = (record:any) => {
-    setObjectToEdit(data);
-    handel_open_model(ModalEnum?.SUBJECT_DELETE);
-  };
-
-  const handleEdit = (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,36 +70,15 @@ export const useColumns = () => {
       key: "actions",
       align: "end",
       width: "25vw",
-      render: (text, record, index) => {
+      render: (_text, record, index) => {
-        const className =
-          index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";
-
-
         return (
-          <Space size="middle" className={className}>
+          <ActionButtons
-            {canEditSubject && (
+            canDelete={canEditSubject}
-              <Tooltip
+            canEdit={canDeleteSubject}
-                placement="top"
+            index={index}
-                title={t("practical.edit")}
+            onDelete={() => handelDelete(record)}
-                color="#E0E0E0"
+            onEdit={() => handleEdit(record)}
-              >
+          />
-                <span onClick={() => handleEdit(record)}>
-                <MdOutlineEdit
-                  size={22}
-                  style={{ color: "#A098AE" }}
-                  
-                />
-                </span>
-              </Tooltip>
-            )}
-            {canDeleteSubject && (
-              <RiDeleteBin6Fill
-                onClick={() => handelDeleteSubject(record)}
-                size={22}
-                style={{ color: "#C11313" }}
-              />
-            )}
-          </Space>
         );
       },
     },

src/Styles/App/classNames.scss

@@ -274,3 +274,34 @@ button:disabled {
   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,7 +1,7 @@
-// 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/";
+// export const BaseURL = "https://exercise-automation.point-dev.net/api/";
 
 // export const ImageBaseURL = "http://192.168.1.9:8000/";
 

src/api/helper/useAddMutation.ts

@@ -11,7 +11,6 @@ function useAddMutation(
 
 ): UseMutationResult<AxiosResponse, unknown, any, unknown> {
   const axios = useAxios();  
-  console.log(toast,key);
 
 
   return useMutation<AxiosResponse, unknown, any, unknown>(

src/translate/ar.json

@@ -194,7 +194,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": "",
@@ -253,7 +254,8 @@
     "lessons": "دروس",
     "sex": "الجنس",
     "Question":"اسئلة",
-    "tags":"كلمات مفتاحية"
+    "tags":"كلمات مفتاحية",
+    "tags_details":"تفاصيل الكلمة المفتاحية"
   },
   "education_class_actions": {
     "Student_Records": "سجلات الطلاب",

src/translate/en.json

@@ -225,7 +225,8 @@
     "subjectAttachmentType": "Subject Attachment Type",
     "param": "Param",
     "subjectProgress": "Subject Progress",
-    "main_page": "Main Page"
+    "main_page": "Main Page",
+    "tags_details":"tags details"
   },
   "education_class_actions": {
     "Student_Records": "Student_Records",