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/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/ModelForm.tsx

@@ -0,0 +1,21 @@
+import { Col, Row } from "reactstrap";
+import ValidationField from "../../../Components/ValidationField/ValidationField";
+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/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/lesson/Model/ModelForm.tsx

@@ -0,0 +1,11 @@
+import { Col, Row } from "reactstrap";
+import ValidationField from "../../../Components/ValidationField/ValidationField";
+const Form = () => {
+  return (
+    <Row className="w-100">
+        <ValidationField name="name" label="name" />
+    </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/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;