format

index.html

@@ -5,18 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <link rel="apple-touch-icon" sizes="180x180" href="/App/Logo.png" />
-    <link
+    <link rel="icon" type="image/png" sizes="32x32" href="/App/Logo.png" />
-      rel="icon"
+    <link rel="icon" type="image/png" sizes="16x16" href="/App/Logo.png" />
-      type="image/png"
-      sizes="32x32"
-      href="/App/Logo.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="16x16"
-      href="/App/Logo.png"
-    />
     <link rel="manifest" href="/site.webmanifest" />
     <meta
       name="description"

src/App.tsx

@@ -17,7 +17,7 @@ const App = () => {
   const { changeLanguage } = useChangeLanguage();
   const navigate = useNavigate();
   const { isAuthenticated } = useAuthState();
-  const [t] = useTranslation()
+  const [t] = useTranslation();
 
   useEffect(() => {
     if (!isAuthenticated) {
@@ -26,7 +26,14 @@ const App = () => {
   }, [isAuthenticated, navigate]);
 
   const renderRouteElement = (route: any) => (
-    <Suspense fallback={<Layout> <SpinContainer/> </Layout>}>
+    <Suspense
+      fallback={
+        <Layout>
+          {" "}
+          <SpinContainer />{" "}
+        </Layout>
+      }
+    >
       {route.header ? (
         <Layout>{route.element}</Layout>
       ) : (
@@ -35,7 +42,7 @@ const App = () => {
     </Suspense>
   );
 
-  const renderRoutesRecursively = (routes:TMenuItem[]) =>
+  const renderRoutesRecursively = (routes: TMenuItem[]) =>
     routes.map((route: TMenuItem) => {
       const useAbility = hasAbility(route.abilities, route.abilities_value);
       const tableHeader = t(`${route?.header}`);

src/Components/Layout/SpinContainer.tsx

@@ -1,11 +1,11 @@
-import { Spin } from 'antd'
+import { Spin } from "antd";
 
 const SpinContainer = () => {
   return (
-    <div className='SpinContainer'>
+    <div className="SpinContainer">
-        <Spin/>
+      <Spin />
     </div>
-  )
+  );
-}
+};
 
-export default SpinContainer
+export default SpinContainer;

src/Components/Ui/Custom/CustomDatePicker.tsx

@@ -1,40 +1,39 @@
-import { DatePicker } from 'antd'
+import { DatePicker } from "antd";
-import React from 'react'
+import React from "react";
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
-import { useObjectToEdit } from '../../../zustand/ObjectToEditState';
+import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from "react-router-dom";
 import type { DatePickerProps } from "antd";
 import dayjs from "dayjs";
-import { DateEnum } from '../../../enums/Date';
+import { DateEnum } from "../../../enums/Date";
 
 const CustomDatePicker = () => {
-    const [t] = useTranslation();
+  const [t] = useTranslation();
-    const { setParamToSend, paramToSend } = useObjectToEdit();
+  const { setParamToSend, paramToSend } = useObjectToEdit();
-    const navigate = useNavigate();
+  const navigate = useNavigate();
-    const location = useLocation();
+  const location = useLocation();
-  
-    const onChange: DatePickerProps["onChange"] = (date, dateString) => {
-      // console.log(date, dateString);
-      const newObj = { ...paramToSend };
-      newObj.date = dateString;
-      setParamToSend(newObj);
-      navigate(
-        `${location.pathname}?${paramToSend?.state ?? "all"}=${dateString}`,
-      );
-    };
-    const Today = new Date() as any;
 
+  const onChange: DatePickerProps["onChange"] = (date, dateString) => {
+    // console.log(date, dateString);
+    const newObj = { ...paramToSend };
+    newObj.date = dateString;
+    setParamToSend(newObj);
+    navigate(
+      `${location.pathname}?${paramToSend?.state ?? "all"}=${dateString}`,
+    );
+  };
+  const Today = new Date() as any;
 
   return (
     <div className="CustomDatePicker">
-    <DatePicker
+      <DatePicker
-      defaultValue={dayjs(Today)}
+        defaultValue={dayjs(Today)}
-      placeholder={t(`input.select_date`)}
+        placeholder={t(`input.select_date`)}
-      onChange={onChange}
+        onChange={onChange}
-      format={DateEnum?.FORMATE}
+        format={DateEnum?.FORMATE}
-    />
+      />
-  </div>
+    </div>
-  )
+  );
-}
+};
 
-export default CustomDatePicker
+export default CustomDatePicker;

src/Components/ValidationField/ValidationField.tsx

@@ -31,11 +31,11 @@ const components: { [key: string]: React.FC<any> } = {
   MaltyFile: MaltyFile,
   Checkbox: CheckboxField,
   NumberFormate: NumberFormate,
-  Number:NumberField
+  Number: NumberField,
 };
 
 const ValidationField: React.FC<ValidationFieldProps> = React.memo(
-  ({ type, ...otherProps }:any) => {
+  ({ type, ...otherProps }: any) => {
     const Component = components[type as ValidationFieldType];
 
     if (!Component) {

src/Components/ValidationField/View/CheckboxField.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import useFormField from "../../../Hooks/useFormField";
 import { Checkbox, Form } from "antd";
-import {getNestedValue} from '../utils/getNestedValue' 
+import { getNestedValue } from "../utils/getNestedValue";
 const CheckboxField = ({
   name,
   label,

src/Components/ValidationField/View/Default.tsx

@@ -25,9 +25,7 @@ const Default = ({
         <label htmlFor={name} className="text">
           {label2}
         </label>
-      ) 
+      ) : no_label ? (
-      
-      :no_label ? (
         <label htmlFor={name} className="text">
           <span>empty</span>
         </label>
@@ -58,7 +56,6 @@ const Default = ({
           name={name}
           disabled={isDisabled}
           size="large"
-          
           {...(type === "number" && { min: 0 })}
           {...props}
         />

src/Components/ValidationField/View/File.tsx

@@ -12,27 +12,27 @@ const File = ({
   className,
   props,
 }: any) => {
-  const { formik, t, isError,errorMsg } = useFormField(name, props);
+  const { formik, t, isError, errorMsg } = useFormField(name, props);
   let imageUrl = formik?.values?.[name] ?? null;
   console.log(imageUrl);
-  console.log(typeof imageUrl === 'string');
+  console.log(typeof imageUrl === "string");
 
   const fileList: UploadFile[] = useMemo(() => {
     if (!imageUrl) return [];
 
     return [
-      typeof imageUrl === 'string'
+      typeof imageUrl === "string"
         ? {
-            uid: '-1',
+            uid: "-1",
-            name: 'uploaded-image',
+            name: "uploaded-image",
-            status: 'done',
+            status: "done",
             url: imageUrl,
             thumbUrl: imageUrl,
           }
         : {
-            uid: imageUrl.uid || '-1',
+            uid: imageUrl.uid || "-1",
-            name: imageUrl.name || 'uploaded-image',
+            name: imageUrl.name || "uploaded-image",
-            status: 'done',
+            status: "done",
             originFileObj: imageUrl,
           },
     ];
@@ -70,7 +70,6 @@ const File = ({
           icon={<UploadOutlined />}
         >
           {placholder ?? t("input.Click_to_upload_the_image")}
-         
         </Button>
         <div className="Error_color"> {isError ? "required" : ""}</div>
         {errorMsg}

src/Components/ValidationField/View/NumberField.tsx

@@ -16,12 +16,12 @@ const NumberField = ({
   label_icon,
   ...props
 }: ValidationFieldPropsInput) => {
-  const { errorMsg, isError, t ,formik} = useFormField(name, props);
+  const { errorMsg, isError, t, formik } = useFormField(name, props);
 
   const handleChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
-    console.log('Change:', e);
+    console.log("Change:", e);
     formik.setFieldValue(name, e);
   };
 

src/Components/ValidationField/View/NumberFormate.tsx

@@ -64,7 +64,6 @@ const NumberFormate = ({
           disabled={isDisabled}
           size="large"
 
-
           //  onChange={onChange ? onChange : handleChange}
         />
       </Form.Item>

src/Components/ValidationField/View/SearchField.tsx

@@ -17,7 +17,7 @@ const SearchField = ({
   props,
   no_label,
   label_icon,
-  isLoading
+  isLoading,
 }: any) => {
   const { errorMsg, isError, t, formik } = useFormField(name, props);
   const [searchQuery, setSearchQuery] = useState<string>("");
@@ -78,8 +78,7 @@ const SearchField = ({
           onChange={onChange || SelectableChange}
           showSearch
           optionFilterProp="label"
-          notFoundContent={isLoading ? <Spin/> : "لا يوجد" }
+          notFoundContent={isLoading ? <Spin /> : "لا يوجد"}
-
           onSearch={SearchHandleChange}
         />
       </Form.Item>

src/Components/ValidationField/View/TextField.tsx

@@ -15,7 +15,7 @@ const TextField = ({
   props,
   no_label,
   label_icon,
-  className
+  className,
 }: any) => {
   const { formik, isError, errorMsg, t } = useFormField(name, props);
   const TextFilehandleChange = (
@@ -33,14 +33,14 @@ const TextField = ({
       ) : label_icon ? (
         <div className="LabelWithIcon">
           <label htmlFor={name} className="text">
-          {label2 ? label2 :  t(`input.${label ? label : name}`) }  
+            {label2 ? label2 : t(`input.${label ? label : name}`)}
           </label>
           <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
         </div>
       ) : (
         <label htmlFor={name} className="text">
-          {label2 ? label2 :  t(`input.${label ? label : name}`) }  
+          {label2 ? label2 : t(`input.${label ? label : name}`)}
-          </label>
+        </label>
       )}
 
       <Form.Item
@@ -57,9 +57,7 @@ const TextField = ({
           showCount
           maxLength={1000}
           onChange={onChange || TextFilehandleChange}
-          style={{height:120}}
+          style={{ height: 120 }}
-
-        
         />
       </Form.Item>
     </div>

src/Components/ValidationField/utils/ValidationField.scss

@@ -62,9 +62,8 @@
 }
 .Checkboxs {
   padding: 4%;
-  
 }
-.ant-checkbox-wrapper{
+.ant-checkbox-wrapper {
   min-width: 100px;
 }
 .SearchField {
@@ -203,27 +202,26 @@ input:-webkit-autofill:hover {
   margin-bottom: 20px;
 }
 
-
+.ant-checkbox-wrapper {
-.ant-checkbox-wrapper{
   margin-top: 25px !important;
 }
 
-.add_new_button{
+.add_new_button {
   margin-bottom: 20px;
-  svg{
+  svg {
     color: var(--primary);
   }
 }
-.ValidationField:has(.input_number){
+.ValidationField:has(.input_number) {
   max-width: 100px;
 
-  .input_number{
+  .input_number {
     max-width: 100px;
   }
 }
 
-.flex{
+.flex {
   display: flex;
-  gap: 30px ;
+  gap: 30px;
   max-width: 80% !important;
 }

src/Components/ValidationField/utils/getNestedValue.ts

@@ -1,9 +1,7 @@
-
+export function getNestedValue(obj: any, path: any) {
-
-export function getNestedValue(obj:any, path:any) {
   return path
-    .replace(/\?.\[|\]\[|\]\.?/g, '.')  // Replace question mark and square brackets
+    .replace(/\?.\[|\]\[|\]\.?/g, ".") // Replace question mark and square brackets
-    .split('.')                         // Split by dots
+    .split(".") // Split by dots
-    .filter(Boolean)                    // Remove empty strings
+    .filter(Boolean) // Remove empty strings
-    .reduce((acc:any, key:any) => acc && acc[key], obj);  // Access nested properties
+    .reduce((acc: any, key: any) => acc && acc[key], obj); // Access nested properties
 }

src/Components/ValidationField/utils/types.ts

@@ -73,7 +73,7 @@ export interface ValidationFieldPropsSearch {
   option: any[];
   isMulti?: boolean;
   searchBy: string;
-  isLoading?:any
+  isLoading?: any;
 }
 export interface ValidationFieldPropsDataRange {
   name: string;
@@ -151,7 +151,7 @@ export interface ValidationFieldPropstext {
     | "TextArea"
     | "NumberFormate";
   label?: string;
-  label2?:string;
+  label2?: string;
   className?: string;
   placeholder?: string;
   isDisabled?: boolean;
@@ -161,31 +161,26 @@ export interface ValidationFieldPropstext {
   [key: string]: any; // Index signature to allow any additional props
 }
 
-
-
-
-
 ///// new
 export interface BaseField {
   name: string;
   label?: string;
   placeholder?: string;
 }
-export type OmitBaseType = 'placeholder' | 'name' | 'label' | 'type';
+export type OmitBaseType = "placeholder" | "name" | "label" | "type";
 
-export type OmitPicker = OmitBaseType | 'format';
+export type OmitPicker = OmitBaseType | "format";
 
 export interface ValidationFieldPropsInput
   extends Omit<InputProps, OmitBaseType>,
     BaseField {
-  type: 'text' | 'number' | 'password' | 'email'  | "Number";
+  type: "text" | "number" | "password" | "email" | "Number";
-  isDisabled?:boolean
+  isDisabled?: boolean;
-no_label?:string
+  no_label?: string;
-label_icon?:string
+  label_icon?: string;
-label2?:string
+  label2?: string;
 }
 
-
 export type ValidationFieldProps =
   | ValidationFieldPropsInput
   | ValidationFieldPropsSelect

src/Components/exercise/Header.tsx

@@ -1,28 +1,26 @@
-import { useFormikContext } from 'formik';
+import { useFormikContext } from "formik";
-import React from 'react';
+import React from "react";
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
-import { GoArrowSwitch } from 'react-icons/go';
+import { GoArrowSwitch } from "react-icons/go";
-import { useObjectToEdit } from '../../zustand/ObjectToEditState';
+import { useObjectToEdit } from "../../zustand/ObjectToEditState";
-import { QUESTION_OBJECT_KEY } from '../../config/AppKey';
+import { QUESTION_OBJECT_KEY } from "../../config/AppKey";
 
 const Header = () => {
   const [t] = useTranslation();
-  const { values, setFieldValue,setValues } = useFormikContext<any>();
+  const { values, setFieldValue, setValues } = useFormikContext<any>();
-  const {isBseQuestion,setIsBseQuestion} = useObjectToEdit()
+  const { isBseQuestion, setIsBseQuestion } = useObjectToEdit();
-  const {setSavedQuestionData} = useObjectToEdit()
+  const { setSavedQuestionData } = useObjectToEdit();
   const handleChange = () => {
-    setSavedQuestionData(null)
+    setSavedQuestionData(null);
-    localStorage.removeItem(QUESTION_OBJECT_KEY)
+    localStorage.removeItem(QUESTION_OBJECT_KEY);
     if (isBseQuestion) {
-      setIsBseQuestion(false)
+      setIsBseQuestion(false);
-      setValues(null)
+      setValues(null);
-      setFieldValue("isBase",0)
+      setFieldValue("isBase", 0);
-      
     } else {
-
+      setIsBseQuestion(true);
-      setIsBseQuestion(true)
+      setValues(null);
-      setValues(null)
+      setFieldValue("isBase", 1);
-      setFieldValue("isBase",1)
     }
   };
 
@@ -33,7 +31,9 @@ const Header = () => {
       </div>
       <div>
         <GoArrowSwitch onClick={handleChange} className="m-2" />
-       {isBseQuestion || values?.isBase === 1 ? t("header.malty_exercise") :t("header.exercise") }
+        {isBseQuestion || values?.isBase === 1
+          ? t("header.malty_exercise")
+          : t("header.exercise")}
       </div>
     </header>
   );

src/Hooks/useAddKeyToData.tsx

@@ -1,4 +1,3 @@
-
 export const useAddKeyToData = (dataSource: any, identifier = "id") => {
   if (!dataSource || !Array.isArray(dataSource)) {
     return [];

src/Hooks/useKeyPress.tsx

@@ -1,8 +1,12 @@
-import { useEffect } from 'react';
+import { useEffect } from "react";
 
-type ModifierKey = 'ctrlKey' | 'shiftKey' | 'altKey' | 'metaKey';
+type ModifierKey = "ctrlKey" | "shiftKey" | "altKey" | "metaKey";
 
-const useKeyPress = (targetKey: string, modifierKey: ModifierKey, callback:any) => {
+const useKeyPress = (
+  targetKey: string,
+  modifierKey: ModifierKey,
+  callback: any,
+) => {
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event[modifierKey] && event.key === targetKey) {
@@ -11,10 +15,10 @@ const useKeyPress = (targetKey: string, modifierKey: ModifierKey, callback:any)
       }
     };
 
-    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown);
 
     return () => {
-      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener("keydown", handleKeyDown);
     };
   }, [targetKey, modifierKey, callback]);
 };

src/Hooks/useSaveOnDisconnect.tsx

@@ -1,16 +1,18 @@
-import { useEffect } from 'react';
+import { useEffect } from "react";
-import { setLocalStorageQuestions } from '../utils/setLocalStorageQuestions';
+import { setLocalStorageQuestions } from "../utils/setLocalStorageQuestions";
 
-const useSaveOnDisconnect = (noChange: boolean, QUESTION_OBJECT_KEY: string, SavedQuestionData: any) => {
+const useSaveOnDisconnect = (
+  noChange: boolean,
+  QUESTION_OBJECT_KEY: string,
+  SavedQuestionData: any,
+) => {
   useEffect(() => {
     const handleBeforeUnload = (event: BeforeUnloadEvent) => {
       console.log("disconnect");
       if (noChange) {
-        if(SavedQuestionData?.isBase ===1){
+        if (SavedQuestionData?.isBase === 1) {
           setLocalStorageQuestions(QUESTION_OBJECT_KEY, SavedQuestionData);
-
+        } else {
-        }else{
-          
           setLocalStorageQuestions(QUESTION_OBJECT_KEY, SavedQuestionData);
         }
       }
@@ -19,24 +21,22 @@ const useSaveOnDisconnect = (noChange: boolean, QUESTION_OBJECT_KEY: string, Sav
     const handleOffline = () => {
       console.log("disconnect");
       if (noChange) {
-        if(SavedQuestionData?.isBase ===1){
+        if (SavedQuestionData?.isBase === 1) {
           setLocalStorageQuestions(QUESTION_OBJECT_KEY, SavedQuestionData);
-
+        } else {
-        }else{
-          
           setLocalStorageQuestions(QUESTION_OBJECT_KEY, SavedQuestionData);
         }
       }
     };
 
     // Add event listeners
-    window.addEventListener('beforeunload', handleBeforeUnload);
+    window.addEventListener("beforeunload", handleBeforeUnload);
-    window.addEventListener('offline', handleOffline);
+    window.addEventListener("offline", handleOffline);
 
     // Cleanup function
     return () => {
-      window.removeEventListener('beforeunload', handleBeforeUnload);
+      window.removeEventListener("beforeunload", handleBeforeUnload);
-      window.removeEventListener('offline', handleOffline);
+      window.removeEventListener("offline", handleOffline);
     };
   }, [noChange, QUESTION_OBJECT_KEY, SavedQuestionData]); // Add dependencies to the hook
 };

src/Layout/Dashboard/FormikFormModel.tsx

@@ -30,7 +30,6 @@ const FormikFormModel: React.FC<FormikFormProps> = ({
       initialValues={initialValues}
       validationSchema={validationSchema}
       onSubmit={handleSubmit}
-      
     >
       {(formik) => {
         useEffect(() => {
@@ -43,7 +42,6 @@ const FormikFormModel: React.FC<FormikFormProps> = ({
           }
         }, [isOpen]);
 
-
         return <Form className="w-100">{children}</Form>;
       }}
     </Formik>

src/Layout/Dashboard/index.ts

@@ -6,13 +6,12 @@ import { useTranslation } from "react-i18next";
 import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "../../enums/abilities";
 import { hasAbility } from "../../utils/hasAbility";
 
-
 export {
   SearchField,
   useModalHandler,
-ModalEnum,
+  ModalEnum,
-useTranslation,
+  useTranslation,
-ABILITIES_ENUM,
+  ABILITIES_ENUM,
- ABILITIES_VALUES_ENUM,
+  ABILITIES_VALUES_ENUM,
- hasAbility
+  hasAbility,
 };

src/Layout/Ui/SideBar.tsx

@@ -79,8 +79,9 @@ const SideBar = () => {
   return (
     <div className="side_bar">
       <h1>
-      {/* {t("sidebar.dashboard")}  */}
+        {/* {t("sidebar.dashboard")}  */}
-         {branch_name} </h1>
+        {branch_name}{" "}
+      </h1>
       <Divider />
       <div className="side_bar_links">
         {menuItems.map((item, index) => {

src/Pages/Auth/FormField.tsx

@@ -20,13 +20,11 @@ type FormFieldType = {
 };
 
 const FormField = ({ isLoading }: FormFieldType) => {
-
   const [t] = useTranslation();
   return (
     <Form className="AuthForm">
       <Image src="../App/Logo.png" />
 
-
       <div className="AuthInput">
         <label className="form-label" htmlFor="username">
           {t("input.Username")}

src/Pages/Auth/LoginForm.tsx

@@ -13,7 +13,6 @@ const LoginForm = () => {
   const { mutate, isLoading, isSuccess, data } = useLoginAdmin();
   const [t] = useTranslation();
   const handelSubmit = (values: FormValues) => {
-
     mutate(values);
   };
 

src/Pages/Tags/Model/Add.tsx

@@ -24,9 +24,7 @@ const Form = () => {
         <ValidationField placeholder="name" label="name" name="name" />
       </Col>
       <div>
-      <DynamicTags/>
+        <DynamicTags />
-
-        
       </div>
     </Row>
   );

src/Pages/Tags/Model/AddModel.tsx

@@ -23,9 +23,8 @@ const ModalForm: React.FC = () => {
   }, [setIsOpen, isSuccess]);
 
   const handleSubmit = (values: any) => {
-    
     mutate({
-      ...values
+      ...values,
     });
   };
 

src/Pages/Tags/Model/Edit.tsx

@@ -6,16 +6,13 @@ 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/>
+        <DynamicTags />
-
-        
       </div>
     </Row>
   );

src/Pages/Tags/Model/EditModel.tsx

@@ -12,9 +12,7 @@ import ModelButtons from "../../../Components/models/ModelButtons";
 
 const ModalForm: React.FC = () => {
   const { isOpen, setIsOpen } = useModalState((state) => state);
-  const { objectToEdit, setObjectToEdit } = useObjectToEdit(
+  const { objectToEdit, setObjectToEdit } = useObjectToEdit((state) => state);
-    (state) => state,
-  );
   const { mutate, isSuccess, isLoading } = useUpdateTag();
   // console.log(objectToEdit,"objectToEdit");
   const handleSubmit = (values: any) => {
@@ -22,7 +20,7 @@ const ModalForm: React.FC = () => {
     //     phone_number: values?.number
     // });
     mutate({
-...values
+      ...values,
     });
   };
   const handleCancel = () => {
@@ -58,7 +56,6 @@ const ModalForm: React.FC = () => {
           <main className="main_modal w-100">
             <ModelBody />
             <ModelButtons isLoading={isLoading} />
-
           </main>
         </FormikForm>
       )}

src/Pages/Tags/Page.tsx

@@ -1,47 +1,47 @@
-  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 { lazy, Suspense } from "react";
 import { Spin } from "antd";
 import { canAddTags } from "../../utils/hasAbilityFn";
 import useSetPageTitle from "../../Hooks/useSetPageTitle";
-const Table = lazy(() => import('./Table'));
+const Table = lazy(() => import("./Table"));
-const AddModalForm = lazy(() => import('./Model/AddModel'));
+const AddModalForm = lazy(() => import("./Model/AddModel"));
-const EditModalForm = lazy(() => import('./Model/EditModel'));
+const EditModalForm = lazy(() => import("./Model/EditModel"));
-const DeleteModalForm = lazy(() => import('./Model/Delete'));
+const DeleteModalForm = lazy(() => import("./Model/Delete"));
-const SearchField = lazy(() => import('../../Components/DataTable/SearchField'));
+const SearchField = lazy(
-
+  () => import("../../Components/DataTable/SearchField"),
+);
 
 const TableHeader = () => {
   const { handel_open_model } = useModalHandler();
   const [t] = useTranslation();
-  useSetPageTitle(
+  useSetPageTitle(t(`page_header.tags`));
-    t(`page_header.tags`),
-  );
 
   return (
     <div className="TableWithHeader">
+      <Suspense fallback={<Spin />}>
+        <header className="d-flex justify-content-between">
+          <SearchField
+            searchBy="name"
+            placeholder={t("practical.search_here")}
+          />
 
-            <Suspense fallback={<Spin/>}>
+          {canAddTags && (
-      <header className="d-flex justify-content-between">
+            <div className="Selects">
-        <SearchField searchBy="name" placeholder={t("practical.search_here")} />
+              <button
-
+                onClick={() => handel_open_model(ModalEnum?.TAGS_ADD)}
-        {canAddTags && (
+                className="add_button"
-          <div className="Selects">
+              >
-            <button
+                {t("models.tags")} <FaPlus />
-              onClick={() => handel_open_model(ModalEnum?.TAGS_ADD)}
+              </button>
-              className="add_button"
+            </div>
-            >
+          )}
-             {t("models.tags")} <FaPlus />
+        </header>
-            </button>
-          </div>
-        )}
-      </header>
-
 
         <Table />
         <DeleteModalForm />

src/Pages/Tags/Table.tsx

@@ -11,7 +11,7 @@ const App: React.FC = () => {
     pagination: true,
   });
 
-  return <DataTable response={response} useColumns={useColumns}  />;
+  return <DataTable response={response} useColumns={useColumns} />;
 };
 
 export default App;

src/Pages/Tags/index.tsx

@@ -13,5 +13,5 @@ export {
   AddModalForm,
   EditModalForm,
   DeleteModalForm,
-  FaPlus
+  FaPlus,
 };

src/Pages/Tags/synonyms/DynamicTags.tsx

@@ -1,70 +1,56 @@
-import { useFormikContext } from 'formik'
+import { useFormikContext } from "formik";
-import React from 'react'
+import React from "react";
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from "react-i18next";
-import { FaCirclePlus } from 'react-icons/fa6'
+import { FaCirclePlus } from "react-icons/fa6";
-import Tag from './Tag'
+import Tag from "./Tag";
 
 const DynamicTags = () => {
+  const formik = useFormikContext<any>();
+  const [t] = useTranslation();
 
-  const formik = useFormikContext<any>()
+  console.log(formik?.values?.synonyms);
-  const [t] = useTranslation()
- 
-
-      console.log(formik?.values?.synonyms);
 
   const handleAddChoice = () => {
     const length = formik?.values?.synonyms.length;
     const lastElement = formik?.values?.synonyms[length - 1];
 
-    if(lastElement !== ""){
+    if (lastElement !== "") {
-      formik.setFieldValue('synonyms', [...(formik?.values  as any)?.synonyms as any[],""])
+      formik.setFieldValue("synonyms", [
-    }else{
+        ...((formik?.values as any)?.synonyms as any[]),
-
+        "",
+      ]);
+    } else {
     }
-    
+  };
-  
+  // console.log(formik?.values);
-}
+  // console.log(currentTag);
-// console.log(formik?.values);
-// console.log(currentTag);
-
-
 
   return (
-    <div className='DynamicTags'>
+    <div className="DynamicTags">
-      {formik?.values?.synonyms?.length < 1 &&   
+      {formik?.values?.synonyms?.length < 1 && (
+        <p className="add_new_button">
+          <FaCirclePlus size={23} onClick={handleAddChoice} />{" "}
+          {t("header.add_synonyms")}
+        </p>
+      )}
 
-      <p className="add_new_button"  >
+      <div className="tag_container">
-      <FaCirclePlus size={23} onClick={handleAddChoice} />  {t("header.add_synonyms")}
+        <div className="tags">
-    </p> 
+          {(((formik?.values as any)?.synonyms as any[]) || []).map(
-      }
+            (item: any, index: number) => {
+              return <Tag key={index} index={index} data={item} />;
+            },
+          )}
+        </div>
 
-     <div className="tag_container">
+        {formik?.values?.synonyms?.length > 0 && (
-     <div className="tags">
+          <p className="add_new_button">
-
+            <FaCirclePlus onClick={handleAddChoice} size={20} />
-{
+          </p>
-(((formik?.values  as any)?.synonyms as any[])||[]) .map((item:any,index:number)=>{
+        )}
-
+      </div>
-return (
-<Tag  key={index}   index={index} data={item}/>
-
-
-)
-}
-)
-}
-   </div>
-
-   {formik?.values?.synonyms?.length > 0 &&   
-
-<p className="add_new_button" >
-  <FaCirclePlus onClick={handleAddChoice} size={20} /> 
-</p> 
-
-   }
-
-     </div>
     </div>
-  )
+  );
-}
+};
 
-export default DynamicTags
+export default DynamicTags;

src/Pages/Tags/synonyms/Tag.tsx

@@ -1,66 +1,60 @@
-import { useFormikContext } from 'formik';
+import { useFormikContext } from "formik";
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect } from "react";
-import { useObjectToEdit } from '../../../zustand/ObjectToEditState';
+import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
-import { FaTrash } from 'react-icons/fa';
+import { FaTrash } from "react-icons/fa";
 
-const Tag = ({ data, index }: { data: any, index: number }) => {
+const Tag = ({ data, index }: { data: any; index: number }) => {
-    const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
-    const formik = useFormikContext<any>();
+  const formik = useFormikContext<any>();
-    const { setTagsSearch ,setCurrentTag} = useObjectToEdit();
+  const { setTagsSearch, setCurrentTag } = useObjectToEdit();
 
-    useEffect(() => {
+  useEffect(() => {
-        if (inputRef.current) {
+    if (inputRef.current) {
-            inputRef.current.style.width = `${(formik?.values?.synonyms[index]?.length + 1) * 8}px`;
+      inputRef.current.style.width = `${(formik?.values?.synonyms[index]?.length + 1) * 8}px`;
-        }
+    }
-    }, [formik?.values?.synonyms[index]]);
+  }, [formik?.values?.synonyms[index]]);
-    console.log(formik?.values?.synonyms);
+  console.log(formik?.values?.synonyms);
-    console.log(index);
+  console.log(index);
 
+  const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // console.log(e.target.value);
+    formik.setFieldValue(`synonyms[${index}]`, e.target.value);
+    setTagsSearch(e.target.value);
+    setCurrentTag(index);
+  };
 
-    const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleInputBlur = () => {
-        // console.log(e.target.value);
+    // setTagsSearch(null)
-        formik.setFieldValue(`synonyms[${index}]`, e.target.value);
+  };
-        setTagsSearch(e.target.value)
-        setCurrentTag(index)
 
-    };
+  const handleDeleteChoice = () => {
+    console.log(data);
+    // Create a copy of current tags array
+    const currentTags = [...formik.values.synonyms];
+    // Remove the item at the specified index from the array
+    currentTags.splice(index, 1);
+    console.log(currentTags); // Log the updated tags array
 
-    const handleInputBlur = () => {
+    // Update formik field value with the updated tags array
-        // setTagsSearch(null)
+    formik.setFieldValue("synonyms", currentTags);
-    };
 
-    const handleDeleteChoice = () => {
+    // Reset search state if needed
-        console.log(data);
+    setTagsSearch(null);
-        // Create a copy of current tags array
+  };
-        const currentTags = [...formik.values.synonyms];
-        // Remove the item at the specified index from the array
-        currentTags.splice(index, 1);
-        console.log(currentTags); // Log the updated tags array
 
-        // Update formik field value with the updated tags array
+  return (
-        formik.setFieldValue('synonyms', currentTags);
+    <div className="tag">
-    
+      <input
-        // Reset search state if needed
+        ref={inputRef}
-        setTagsSearch(null);
+        className="tagInput"
-    };
+        type="text"
-    
+        value={formik?.values?.synonyms[index]}
-    return (
+        onChange={handleEditInputChange}
-       <div className='tag'>
+        onBlur={handleInputBlur}
-        <input
+      />
-            ref={inputRef}
+      <FaTrash onClick={handleDeleteChoice} />
-            className="tagInput"
+    </div>
-            type="text"
+  );
-            value={formik?.values?.synonyms[index]}
-            onChange={handleEditInputChange}
-            onBlur={handleInputBlur}
-         
-        />
-        <FaTrash onClick={handleDeleteChoice}/>
-       </div>
-    );
 };
 
 export default Tag;
-
-
-

src/Pages/Tags/useTableColumns.tsx

@@ -19,8 +19,6 @@ export const useColumns = () => {
   };
   const [t] = useTranslation();
 
-
-
   const columns: TableColumnsType<tags> = [
     {
       title: t("columns.id"),
@@ -57,16 +55,10 @@ export const useColumns = () => {
                 placement="top"
                 title={t("practical.edit")}
                 color="#E0E0E0"
-                
               >
                 <span onClick={() => handleEdit(record)}>
-                <MdOutlineEdit
+                  <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
-                  size={22}
-                  style={{ color: "#A098AE" }}
-                  
-                />
                 </span>
-             
               </Tooltip>
             )}
 

src/Pages/Unit/Page.tsx

@@ -1,49 +1,42 @@
 import { useTranslation } from "react-i18next";
-import { lazy, Suspense } from 'react';
+import { lazy, Suspense } from "react";
 import { Spin } from "antd";
 import { useParams } from "react-router-dom";
 import { ParamsEnum } from "../../enums/params";
 import { useGetAllSubject } from "../../api/subject";
 import useSetPageTitle from "../../Hooks/useSetPageTitle";
 
-const Table = lazy(() => import('./Table'));
+const Table = lazy(() => import("./Table"));
-const AddModalForm = lazy(() => import('./Model/AddModel'));
+const AddModalForm = lazy(() => import("./Model/AddModel"));
-const EditModalForm = lazy(() => import('./Model/EditModel'));
+const EditModalForm = lazy(() => import("./Model/EditModel"));
-const DeleteModels = lazy(() => import('./Model/Delete'));
+const DeleteModels = lazy(() => import("./Model/Delete"));
 
 const TableHeader = () => {
   const [t] = useTranslation();
 
-  const { subject_id} = useParams<ParamsEnum>();
+  const { subject_id } = useParams<ParamsEnum>();
 
   const { data: Subject } = useGetAllSubject({
-    show:subject_id
+    show: subject_id,
   });
 
-
   const SubjectName = Subject?.data?.name ?? "";
 
-  useSetPageTitle(
+  useSetPageTitle(t(`page_header.subject`) + "/" + t(`${SubjectName}`));
-    t(`page_header.subject`) +
-      "/" +
-      t(`${SubjectName}`),
-  );
 
   return (
     <div className="TableWithHeader">
-      <Suspense fallback={<Spin/>}>
+      <Suspense fallback={<Spin />}>
-      <header>
+        <header>
-        <h6>
+          <h6>
-          {t("models.units")} {SubjectName}
+            {t("models.units")} {SubjectName}
-        </h6>
+          </h6>
-
+        </header>
-      </header>
         <Table />
         <AddModalForm />
-      <EditModalForm />
+        <EditModalForm />
-      <DeleteModels />
+        <DeleteModels />
       </Suspense>
-
     </div>
   );
 };

src/Pages/Unit/Table.tsx

@@ -7,9 +7,9 @@ import { useParams } from "react-router-dom";
 import { ParamsEnum } from "../../enums/params";
 
 const App: React.FC = () => {
-  const {subject_id} = useParams<ParamsEnum>()
+  const { subject_id } = useParams<ParamsEnum>();
-  const response = useGetAllUnit({subject_id:subject_id, pagination: true});
+  const response = useGetAllUnit({ subject_id: subject_id, pagination: true });
-  console.log(response?.data?.data,"response?.data");
+  console.log(response?.data?.data, "response?.data");
 
   return <DataTable response={response} useColumns={useColumns} />;
 };

src/Pages/Unit/useTableColumns.tsx

@@ -10,20 +10,23 @@ import { useTranslation } from "react-i18next";
 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 {
+  canAddUnit,
+  canDeleteUnit,
+  canEditUnit,
+  canShowUnit,
+} from "../../utils/hasAbilityFn";
 
 export const useColumns = () => {
   const { handel_open_model } = useModalHandler();
 
   const { setObjectToEdit } = useObjectToEdit((state) => state);
-  const navigate = useNavigate()
+  const navigate = useNavigate();
 
   const handelShow = (record: any) => {
     navigate(`${ABILITIES_ENUM?.UNIT}/${record?.id}`);
   };
 
-
-
   const handelDelete = (data: any) => {
     setObjectToEdit(data);
     handel_open_model(ModalEnum?.UNIT_DELETE);
@@ -86,11 +89,7 @@ export const useColumns = () => {
                 color="#E0E0E0"
               >
                 <span onClick={() => handleEdit(record)}>
-                <MdOutlineEdit
+                  <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
-                  size={22}
-                  style={{ color: "#A098AE" }}
-                  
-                />
                 </span>
               </Tooltip>
             )}
@@ -101,16 +100,13 @@ export const useColumns = () => {
                 style={{ color: "#C11313" }}
               />
             )}
- {canShowUnit && (
+            {canShowUnit && (
-        
               <BsEyeFill
                 onClick={() => handelShow(record)}
                 size={22}
                 style={{ color: "green" }}
               />
-           
+            )}
-                )}
-                
           </Space>
         );
       },

src/Pages/lesson/Model/Add.tsx

@@ -20,7 +20,6 @@ const Form = () => {
       <Col>
         <ValidationField name="name" label="name" />
       </Col>
-
     </Row>
   );
 };

src/Pages/lesson/Model/AddModel.tsx

@@ -20,7 +20,7 @@ const ModalForm: React.FC = () => {
 
   const { mutate, isSuccess, isLoading } = useAddLesson();
 
-  const {unit_id} = useParams<ParamsEnum>()
+  const { unit_id } = useParams<ParamsEnum>();
   useEffect(() => {
     if (isSuccess) {
       setIsOpen("");

src/Pages/lesson/Model/Delete.tsx

@@ -12,7 +12,7 @@ const ModalForm: React.FC = () => {
   const [inputValue, setInputValue] = useState("");
 
   const { mutate, isSuccess, isLoading } = useDeleteLesson();
-  const { objectToEdit,setObjectToEdit } = useObjectToEdit((state) => state);
+  const { objectToEdit, setObjectToEdit } = useObjectToEdit((state) => state);
   const queryClient = useQueryClient();
   const [t] = useTranslation();
   const handleSubmit = () => {

src/Pages/lesson/Model/Edit.tsx

@@ -8,7 +8,6 @@ const Form = () => {
       <Col>
         <ValidationField name="name" label="name" />
       </Col>
-  
     </Row>
   );
 };

src/Pages/lesson/Page.tsx

@@ -1,20 +1,20 @@
 import { useTranslation } from "react-i18next";
-import { lazy, Suspense } from 'react';
+import { lazy, Suspense } from "react";
 import { Spin } from "antd";
 import useSetPageTitle from "../../Hooks/useSetPageTitle";
 import { useParams } from "react-router-dom";
 import { ParamsEnum } from "../../enums/params";
 import { useGetAllUnit } from "../../api/unit";
 
-const Table = lazy(() => import('./Table'));
+const Table = lazy(() => import("./Table"));
-const AddModalForm = lazy(() => import('./Model/AddModel'));
+const AddModalForm = lazy(() => import("./Model/AddModel"));
-const EditModalForm = lazy(() => import('./Model/EditModel'));
+const EditModalForm = lazy(() => import("./Model/EditModel"));
-const DeleteModels = lazy(() => import('./Model/Delete'));
+const DeleteModels = lazy(() => import("./Model/Delete"));
 
 const TableHeader = () => {
   const [t] = useTranslation();
 
-  const {  unit_id } = useParams<ParamsEnum>();
+  const { unit_id } = useParams<ParamsEnum>();
   const { data: unit } = useGetAllUnit({ show: unit_id });
   const unitName = unit?.data?.name ?? "";
   const SubjectName = unit?.data?.subject?.name ?? "";
@@ -23,31 +23,27 @@ const TableHeader = () => {
 
   useSetPageTitle(
     t(`page_header.subject`) +
-    "/" +
+      "/" +
-    `${SubjectName}` +
+      `${SubjectName}` +
       "/" +
       t(`page_title.unit`) +
       "/" +
-      `${unitName}`
+      `${unitName}`,
   );
 
-
-
   return (
     <div className="TableWithHeader">
-      <Suspense fallback={<Spin/>}>
+      <Suspense fallback={<Spin />}>
-      <header>
+        <header>
-        <h6>
+          <h6>
-          {t("models.lessons")} {SubjectName} {unitName}
+            {t("models.lessons")} {SubjectName} {unitName}
-        </h6>
+          </h6>
-
+        </header>
-      </header>
         <Table />
         <AddModalForm />
-      <EditModalForm />
+        <EditModalForm />
-      <DeleteModels />
+        <DeleteModels />
       </Suspense>
-
     </div>
   );
 };

src/Pages/lesson/Table.tsx

@@ -6,8 +6,8 @@ import { useParams } from "react-router-dom";
 import { ParamsEnum } from "../../enums/params";
 
 const App: React.FC = () => {
-  const {unit_id} = useParams<ParamsEnum>()
+  const { unit_id } = useParams<ParamsEnum>();
-  const response = useGetAllLesson({ unit_id:unit_id,  pagination: true});
+  const response = useGetAllLesson({ unit_id: unit_id, pagination: true });
 
   return <DataTable response={response} useColumns={useColumns} />;
 };

src/Pages/lesson/useTableColumns.tsx

@@ -14,20 +14,23 @@ 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 {
+  canAddLesson,
+  canDeleteLesson,
+  canEditLesson,
+  canShowLesson,
+} from "../../utils/hasAbilityFn";
 
 export const useColumns = () => {
   const { handel_open_model } = useModalHandler();
 
   const { setObjectToEdit } = useObjectToEdit((state) => state);
-  const navigate = useNavigate()
+  const navigate = useNavigate();
 
   const handelShow = (record: any) => {
     navigate(`${ABILITIES_ENUM.LESSON}/${record?.id}`);
   };
 
-
-
   const handelDelete = (data: any) => {
     setObjectToEdit(data);
     handel_open_model(ModalEnum?.LESSON_DELETE);
@@ -81,11 +84,7 @@ export const useColumns = () => {
                 color="#E0E0E0"
               >
                 <span onClick={() => handleEdit(record)}>
-                <MdOutlineEdit
+                  <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
-                  size={22}
-                  style={{ color: "#A098AE" }}
-                  
-                />
                 </span>
               </Tooltip>
             )}
@@ -96,16 +95,13 @@ export const useColumns = () => {
                 style={{ color: "#C11313" }}
               />
             )}
-             {canShowLesson && (
+            {canShowLesson && (
-        
+              <BsEyeFill
-        <BsEyeFill
+                onClick={() => handelShow(record)}
-          onClick={() => handelShow(record)}
+                size={22}
-          size={22}
+                style={{ color: "green" }}
-          style={{ color: "green" }}
+              />
-        />
+            )}
-     
-          )}
-
           </Space>
         );
       },

src/Pages/question/AddPage.tsx

@@ -1,7 +1,13 @@
-import React, { Suspense, lazy, useEffect }  from "react";
+import React, { Suspense, lazy, useEffect } from "react";
 import { Modal, Spin } from "antd";
 import FormikForm from "../../Layout/Dashboard/FormikFormModel";
-import { getInitialValues, getValidationSchema ,getInitialValuesBase, getValidationSchemaBase, processTags} from "./Model/formUtil";
+import {
+  getInitialValues,
+  getValidationSchema,
+  getInitialValuesBase,
+  getValidationSchemaBase,
+  processTags,
+} from "./Model/formUtil";
 import { useAddQuestion, useAddQuestionAsync } from "../../api/Question";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
@@ -10,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 BaseForm from "./Model/Malty/Add";
-import Form from './Model/Add'
+import Form from "./Model/Add";
-const AcceptModal = lazy(() => import('./Model/AcceptModal'));
+const AcceptModal = lazy(() => import("./Model/AcceptModal"));
 
 import { useModalState } from "../../zustand/Modal";
 import { ModalEnum } from "../../enums/Model";
@@ -27,56 +33,61 @@ import { useGetAllUnit } from "../../api/unit";
 import { useGetAllLesson } from "../../api/lesson";
 
 const AddPage: React.FC = () => {
+  const { isSuccess: isSuccessAsync, mutateAsync } = useAddQuestionAsync();
+  const { mutate, isSuccess, isLoading } = useAddQuestion();
+  const {
+    isBseQuestion,
+    setTagsSearch,
+    setObjectToEdit,
+    setSuccess,
+    SavedQuestionData,
+  } = useObjectToEdit();
 
-  const {isSuccess:isSuccessAsync,mutateAsync} = useAddQuestionAsync()
+  const { subject_id, lesson_id, unit_id } = useParams<ParamsEnum>();
-  const { mutate,isSuccess,  isLoading} = useAddQuestion();
-  const {isBseQuestion,setTagsSearch,setObjectToEdit,setSuccess,SavedQuestionData} = useObjectToEdit()
-  
-  const {subject_id,lesson_id,unit_id} = useParams<ParamsEnum>()
   const { setIsOpen } = useModalState((state) => state);
 
-
   const { data: unit } = useGetAllUnit({ show: unit_id });
   const { data: lesson } = useGetAllLesson({ show: lesson_id });
 
-  const [t] = useTranslation()
+  const [t] = useTranslation();
   const unitName = unit?.data?.name ?? "";
   const SubjectName = unit?.data?.subject?.name ?? "";
   const lessonName = lesson?.data?.name ?? "";
 
   useSetPageTitle(
     t(`page_header.subject`) +
-    "/" +
+      "/" +
-    `${SubjectName}` +
+      `${SubjectName}` +
       "/" +
       t(`page_title.unit`) +
       "/" +
-      `${unitName}`+"/"
+      `${unitName}` +
-      +
+      "/" +
       t(`page_title.lesson`) +
       "/" +
-      `${lessonName}`+   "/" +
+      `${lessonName}` +
-      t(`page_title.questions`) 
+      "/" +
+      t(`page_title.questions`),
   );
 
-
+  const handleSubmit = (
-  const handleSubmit =  (values: any, { resetForm }: { resetForm: () => void }) => {
+    values: any,
+    { resetForm }: { resetForm: () => void },
+  ) => {
     const DataToSend = structuredClone(values);
     setTagsSearch(null);
     console.log(isBseQuestion);
 
     if (isBseQuestion || DataToSend?.isBase === 1) {
       const newBseQuestion = {
-        "subject_id": subject_id,
+        subject_id: subject_id,
-        "content": DataToSend?.content,
+        content: DataToSend?.content,
-        "image": DataToSend?.image ?? "",
+        image: DataToSend?.image ?? "",
-        "isBase": 1,
+        isBase: 1,
-        "lessons_ids":[lesson_id]
+        lessons_ids: [lesson_id],
       };
 
-
+      mutateAsync(newBseQuestion).then((data: any) => {
-
-      mutateAsync(newBseQuestion).then((data:any) => {
         const newBseQuestionId = (data as any)?.data?.id;
         const Questions = DataToSend?.Questions;
         console.log(1);
@@ -88,113 +99,70 @@ const AddPage: React.FC = () => {
           mutate({
             ...item,
             parent_id: newBseQuestionId,
-            "subject_id": subject_id,
+            subject_id: subject_id,
             tags,
-            "lessons_ids":[lesson_id]
+            lessons_ids: [lesson_id],
           });
         });
         console.log(newBseQuestionId, "newBseQuestionId");
-  
-
       });
     } else {
       const tags = processTags(DataToSend);
-      mutate({ ...values, subject_id: subject_id, tags , "lessons_ids":[lesson_id] })
+      mutate({
-
+        ...values,
+        subject_id: subject_id,
+        tags,
+        lessons_ids: [lesson_id],
+      });
     }
   };
 
-  const navigate = useNavigate()
+  const navigate = useNavigate();
-    
 
   useEffect(() => {
-    
+    if (
-    if (isSuccessAsync && ( SavedQuestionData?.Questions?.length > 0 ? isSuccess:  true )) {
+      isSuccessAsync &&
-        setObjectToEdit(null)
+      (SavedQuestionData?.Questions?.length > 0 ? isSuccess : true)
-        setSuccess(true) 
+    ) {
-        localStorage.removeItem(QUESTION_OBJECT_KEY)
+      setObjectToEdit(null);
-      
+      setSuccess(true);
-      }
+      localStorage.removeItem(QUESTION_OBJECT_KEY);
-      if(isSuccess && !(SavedQuestionData?.Questions?.length)){
+    }
-        toast.success(t("validation.the_possess_done_successful"))
+    if (isSuccess && !SavedQuestionData?.Questions?.length) {
-        setObjectToEdit(null)
+      toast.success(t("validation.the_possess_done_successful"));
-        setSuccess(true) 
+      setObjectToEdit(null);
-        localStorage.removeItem(QUESTION_OBJECT_KEY)
+      setSuccess(true);
-      }
+      localStorage.removeItem(QUESTION_OBJECT_KEY);
-  }, [isSuccess,isSuccessAsync])
+    }
+  }, [isSuccess, isSuccessAsync]);
 
   let cleanedQuestionOptions = cleanObject(SavedQuestionData);
-  let noChange =hasItems(cleanedQuestionOptions)
+  let noChange = hasItems(cleanedQuestionOptions);
-
 
   useSaveOnDisconnect(noChange, QUESTION_OBJECT_KEY, SavedQuestionData);
 
-
+  const SavedData = getLocalStorageQuestions(QUESTION_OBJECT_KEY);
-  const SavedData =  getLocalStorageQuestions(QUESTION_OBJECT_KEY)
 
   const handleCancel = () => {
-        if(!noChange){
+    if (!noChange) {
-          navigate(-1)
+      navigate(-1);
-                  localStorage.removeItem(QUESTION_OBJECT_KEY)
+      localStorage.removeItem(QUESTION_OBJECT_KEY);
-
+    } else {
-        }else{
+      setIsOpen(ModalEnum?.QUESTION_ACCEPT);
-
+    }
-          setIsOpen(ModalEnum?.QUESTION_ACCEPT);
-        }
   };
 
-
+  if (isBseQuestion || SavedData?.isBase === 1) {
-    
-  if(isBseQuestion || SavedData?.isBase === 1){
-
-
     return (
       <div className="exercise_add">
-
-          <FormikForm
-            handleSubmit={handleSubmit}
-            initialValues={getInitialValuesBase(SavedData)}
-            validationSchema={getValidationSchemaBase}
-          >
-          
-            <main className="w-100 exercise_add_main">
-            <Header/> 
-            <BaseForm/>
-              <div className="exercise_add_buttons">
-                <div onClick={handleCancel}>{t("practical.back")}</div>
-                <button disabled={isLoading} className="relative" type="submit">
-                  {t("practical.add")}
-  
-                  {isLoading && (
-                    <span className="Spinier_Div">
-                      <Spin />
-                    </span>
-                  )}
-                </button>
-              </div>
-            </main>
-          </FormikForm>
-          <Suspense fallback={<Spin/>}>
-          <AcceptModal/>
-          </Suspense>
-                 
-      </div>
-    );
-  }
-  return (
-    <div className="exercise_add">
-
         <FormikForm
           handleSubmit={handleSubmit}
-          initialValues={getInitialValues(SavedData)}
+          initialValues={getInitialValuesBase(SavedData)}
-          validationSchema={getValidationSchema}
+          validationSchema={getValidationSchemaBase}
-          
         >
-        
           <main className="w-100 exercise_add_main">
-          <Header/>
+            <Header />
-            <Form/>
+            <BaseForm />
-           
             <div className="exercise_add_buttons">
               <div onClick={handleCancel}>{t("practical.back")}</div>
               <button disabled={isLoading} className="relative" type="submit">
@@ -209,13 +177,42 @@ const AddPage: React.FC = () => {
             </div>
           </main>
         </FormikForm>
-        <Suspense fallback={<Spin/>}>
+        <Suspense fallback={<Spin />}>
-          <AcceptModal/>
+          <AcceptModal />
-          </Suspense>
+        </Suspense>
+      </div>
+    );
+  }
+  return (
+    <div className="exercise_add">
+      <FormikForm
+        handleSubmit={handleSubmit}
+        initialValues={getInitialValues(SavedData)}
+        validationSchema={getValidationSchema}
+      >
+        <main className="w-100 exercise_add_main">
+          <Header />
+          <Form />
+
+          <div className="exercise_add_buttons">
+            <div onClick={handleCancel}>{t("practical.back")}</div>
+            <button disabled={isLoading} className="relative" type="submit">
+              {t("practical.add")}
+
+              {isLoading && (
+                <span className="Spinier_Div">
+                  <Spin />
+                </span>
+              )}
+            </button>
+          </div>
+        </main>
+      </FormikForm>
+      <Suspense fallback={<Spin />}>
+        <AcceptModal />
+      </Suspense>
     </div>
   );
 };
 
 export default AddPage;
-
-

src/Pages/question/EditPage.tsx

@@ -1,8 +1,19 @@
-import React, { useEffect }  from "react";
+import React, { useEffect } from "react";
 import { Modal, Spin } from "antd";
 import FormikForm from "../../Layout/Dashboard/FormikFormModel";
-import { getInitialValues, getValidationSchema ,getInitialValuesBase, getValidationSchemaBase, processTags} from "./Model/formUtil";
+import {
-import {  useAddQuestion, useDeleteQuestion, useGetAllQuestion, useUpdateQuestion } from "../../api/Question";
+  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";
@@ -10,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 Form from "./Model/Edit";
-import BaseForm from './Model/Malty/Edit'
+import BaseForm from "./Model/Malty/Edit";
 import { Question } from "../../types/Item";
 import { toast } from "react-toastify";
 import useSetPageTitle from "../../Hooks/useSetPageTitle";
@@ -19,247 +30,198 @@ import { useGetAllUnit } from "../../api/unit";
 import { useGetAllLesson } from "../../api/lesson";
 
 const EditPage: React.FC = () => {
-
+  const { question_id, subject_id, unit_id } = useParams<ParamsEnum>();
-  const {question_id,subject_id,unit_id} = useParams<ParamsEnum>()
+  const { isBseQuestion, setIsBseQuestion, setTagsSearch, DeletedQuestions } =
-  const {isBseQuestion,setIsBseQuestion,setTagsSearch,DeletedQuestions} = useObjectToEdit()
+    useObjectToEdit();
 
   const { mutate, isSuccess, isLoading } = useUpdateQuestion();
-  const { mutate:DeleteQuestion} = useDeleteQuestion();
+  const { mutate: DeleteQuestion } = useDeleteQuestion();
-  const { mutate:mutateAdd } = useAddQuestion();
+  const { mutate: mutateAdd } = useAddQuestion();
 
-  const {data,isLoading:dataLoading}= useGetAllQuestion({show:question_id})
+  const { data, isLoading: dataLoading } = useGetAllQuestion({
+    show: question_id,
+  });
 
-  const {data:Questions,isLoading:QuestionsDataLoading}= useGetAllQuestion({questionParentId:question_id  ,onlyWithNoParents:false})
+  const { data: Questions, isLoading: QuestionsDataLoading } =
+    useGetAllQuestion({
+      questionParentId: question_id,
+      onlyWithNoParents: false,
+    });
 
-  const objectToEdit = {...data?.data,Questions:Questions?.data } ;
+  const objectToEdit = { ...data?.data, Questions: Questions?.data };
 
-  const {lesson_id} = useParams()
+  const { lesson_id } = useParams();
   useEffect(() => {
-    if(objectToEdit?.isBase && isBseQuestion !== true){
+    if (objectToEdit?.isBase && isBseQuestion !== true) {
-     setIsBseQuestion(true)
+      setIsBseQuestion(true);
-
     }
-  }, [objectToEdit?.isBase])
+  }, [objectToEdit?.isBase]);
-
-
 
   const { data: unit } = useGetAllUnit({ show: unit_id });
   const { data: lesson } = useGetAllLesson({ show: lesson_id });
 
-  const [t] = useTranslation()
+  const [t] = useTranslation();
   const unitName = unit?.data?.name ?? "";
   const SubjectName = unit?.data?.subject?.name ?? "";
   const lessonName = lesson?.data?.name ?? "";
 
   useSetPageTitle(
     t(`page_header.subject`) +
-    "/" +
+      "/" +
-    `${SubjectName}` +
+      `${SubjectName}` +
       "/" +
       t(`page_title.unit`) +
       "/" +
-      `${unitName}`+"/"
+      `${unitName}` +
-      +
+      "/" +
       t(`page_title.lesson`) +
       "/" +
-      `${lessonName}`+   "/" +
+      `${lessonName}` +
-      t(`page_title.questions`) 
+      "/" +
+      t(`page_title.questions`),
   );
 
-
   const handleSubmit = (values: any) => {
-      const DataToSend = structuredClone(values);
+    const DataToSend = structuredClone(values);
-      setTagsSearch(null)
+    setTagsSearch(null);
     console.log(DataToSend);
 
-          if(isBseQuestion){
+    if (isBseQuestion) {
+      const UpdateBseQuestion = {
+        id: DataToSend?.id,
+        content: DataToSend?.content,
+        image: DataToSend?.image ?? "",
+      };
+      if (
+        typeof UpdateBseQuestion?.image === "string" &&
+        UpdateBseQuestion?.image !== ""
+      ) {
+        delete UpdateBseQuestion["image"];
+      }
+      console.log(DeletedQuestions, "DeletedQuestions");
+      console.log(UpdateBseQuestion);
 
-        const UpdateBseQuestion = {
+      mutate(UpdateBseQuestion);
-          "id":DataToSend?.id,
-          "content" : DataToSend?.content,
-          "image": DataToSend?.image ?? "",
-        }
-        if( typeof UpdateBseQuestion?.image === "string" && UpdateBseQuestion?.image !== ""){
-          delete UpdateBseQuestion["image"]
-        }
-          console.log(DeletedQuestions,"DeletedQuestions");
-            console.log(UpdateBseQuestion);
 
-          mutate(UpdateBseQuestion)
+      DeletedQuestions?.map((item: any) => {
+        DeleteQuestion({ id: item?.id });
+      });
 
+      const Questions = DataToSend?.Questions;
+      console.log(Questions, "Questions");
 
-          DeletedQuestions?.map((item:any)=>{
+      Questions?.map((item: Question) => {
-            DeleteQuestion({id:item?.id})
+        console.log(item);
-            
+        if (item?.id) {
-          })
+          const itemToSend = structuredClone(item);
-
+          const keysToRemove = ["image", "answer_image"];
-
+          const updatedObject = removeStringKeys(itemToSend, keysToRemove);
-          const Questions = DataToSend?.Questions;
+          console.log(updatedObject, "updatedObject");
-        console.log(Questions,"Questions");
-        
-        Questions?.map((item:Question)=>{
-            console.log(item);
-            if(item?.id){
-
-              const itemToSend = structuredClone(item);
-              const keysToRemove = ['image', 'answer_image'];
-              const updatedObject = removeStringKeys(itemToSend, keysToRemove);
-              console.log(updatedObject,"updatedObject"); 
-    
-                const tags = processTags(updatedObject)
-                const oldQuestionOptions = [] as any;
-                const newQuestionOptions = [] as any;
-                
-                updatedObject?.QuestionOptions?.forEach((item:any) => {
-                  if (item?.id) {
-                    oldQuestionOptions.push(item);
-                  } else {
-                    newQuestionOptions.push(item);
-                  }
-                });
-                const QuestionOptions = {
-                  old: oldQuestionOptions,
-                  new: newQuestionOptions
-                } ;
-                console.log(QuestionOptions);
-                
-                mutate({
-                  ...updatedObject,
-                  QuestionOptions,
-                  tags
-                 
-                })
-           
-            }else{
-              console.log(values?.id);
-              
-              const tags = processTags(DataToSend);  
-              mutateAdd({ ...item, subject_id: subject_id, tags , "lessons_ids":[lesson_id], parent_id:values?.id })
-            }
-         
-          
-      })
-      }else{
-        
-        const keysToRemove = ['image', 'answer_image'];
-        const updatedObject = removeStringKeys(DataToSend, keysToRemove);
-          delete updatedObject["parent_id"];  
-          const tags = processTags(updatedObject)
-          console.log(updatedObject,"updatedObject");
-          if(!(updatedObject?.image)){
-            updatedObject["image"] = "" ;
-          }
-          console.log(updatedObject);
 
+          const tags = processTags(updatedObject);
           const oldQuestionOptions = [] as any;
           const newQuestionOptions = [] as any;
 
-          updatedObject?.QuestionOptions?.forEach((item:any) => {
+          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);
             }
           });
-          
           const QuestionOptions = {
             old: oldQuestionOptions,
-            new: newQuestionOptions
+            new: newQuestionOptions,
           };
-          console.log(QuestionOptions,"QuestionOptions");
+          console.log(QuestionOptions);
 
+          mutate({
+            ...updatedObject,
+            QuestionOptions,
+            tags,
+          });
+        } else {
+          console.log(values?.id);
 
-        mutate({ ...updatedObject,QuestionOptions,tags });
+          const tags = processTags(DataToSend);
+          mutateAdd({
+            ...item,
+            subject_id: subject_id,
+            tags,
+            lessons_ids: [lesson_id],
+            parent_id: values?.id,
+          });
+        }
+      });
+    } else {
+      const keysToRemove = ["image", "answer_image"];
+      const updatedObject = removeStringKeys(DataToSend, keysToRemove);
+      delete updatedObject["parent_id"];
+      const tags = processTags(updatedObject);
+      console.log(updatedObject, "updatedObject");
+      if (!updatedObject?.image) {
+        updatedObject["image"] = "";
       }
+      console.log(updatedObject);
+
+      const oldQuestionOptions = [] as any;
+      const newQuestionOptions = [] as any;
+
+      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);
+        }
+      });
+
+      const QuestionOptions = {
+        old: oldQuestionOptions,
+        new: newQuestionOptions,
+      };
+      console.log(QuestionOptions, "QuestionOptions");
+
+      mutate({ ...updatedObject, QuestionOptions, tags });
+    }
   };
 
-  const navigate = useNavigate()
+  const navigate = useNavigate();
   const handleCancel = () => {
-    navigate(-1)
+    navigate(-1);
   };
 
-
   useEffect(() => {
-   if(isSuccess){
+    if (isSuccess) {
-    toast.success(t("validation.the_possess_done_successful"))
+      toast.success(t("validation.the_possess_done_successful"));
-    navigate(-1)  
+      navigate(-1);
-   }
+    }
-  }, [isSuccess])
+  }, [isSuccess]);
 
-
+  if (dataLoading || QuestionsDataLoading) {
-  
+    return <SpinContainer />;
-  if(dataLoading ||  QuestionsDataLoading){
-    return <SpinContainer/>
   }
-  if(objectToEdit?.isBase){
+  if (objectToEdit?.isBase) {
-
-  
     return (
       <div className="exercise_add">
-  
-          <FormikForm
-            handleSubmit={handleSubmit}
-            initialValues={getInitialValuesBase(objectToEdit)}
-            validationSchema={getValidationSchemaBase}
-          >
-          
-            <main className="w-100 exercise_add_main">
-            {/* <Header/> */}
-            <header className="exercise_add_header mb-4">
-        <div>
-          {t("practical.edit")} {t("models.exercise")}{" "}
-        </div>
-        <div>
-       
-     {t("header.exercise") }
-        </div>
-             </header>
-              <BaseForm />
-              <div className="exercise_add_buttons">
-                <div onClick={handleCancel}>{t("practical.back")}</div>
-                <button disabled={isLoading} className="relative" type="submit">
-                  {t("practical.edit")}
-  
-                  {isLoading && (
-                    <span className="Spinier_Div">
-                      <Spin />
-                    </span>
-                  )}
-                </button>
-              </div>
-            </main>
-          </FormikForm>
-  
-      </div>
-    );
-  }
-
-  return (
-    <div className="exercise_add">
-
         <FormikForm
           handleSubmit={handleSubmit}
-          initialValues={getInitialValues(objectToEdit)}
+          initialValues={getInitialValuesBase(objectToEdit)}
-          validationSchema={getValidationSchema}
+          validationSchema={getValidationSchemaBase}
         >
-        
           <main className="w-100 exercise_add_main">
-          {/* <Header/> */}
+            {/* <Header/> */}
-          <header className="exercise_add_header mb-4">
+            <header className="exercise_add_header mb-4">
-      <div>
+              <div>
-        {t("practical.edit")} {t("models.exercise")}{" "}
+                {t("practical.edit")} {t("models.exercise")}{" "}
-      </div>
+              </div>
-      <div>
+              <div>{t("header.exercise")}</div>
-     
+            </header>
-   {t("header.exercise") }
+            <BaseForm />
-      </div>
-    </header>
-            <Form />
             <div className="exercise_add_buttons">
               <div onClick={handleCancel}>{t("practical.back")}</div>
               <button disabled={isLoading} className="relative" type="submit">
@@ -274,7 +236,40 @@ const EditPage: React.FC = () => {
             </div>
           </main>
         </FormikForm>
+      </div>
+    );
+  }
 
+  return (
+    <div className="exercise_add">
+      <FormikForm
+        handleSubmit={handleSubmit}
+        initialValues={getInitialValues(objectToEdit)}
+        validationSchema={getValidationSchema}
+      >
+        <main className="w-100 exercise_add_main">
+          {/* <Header/> */}
+          <header className="exercise_add_header mb-4">
+            <div>
+              {t("practical.edit")} {t("models.exercise")}{" "}
+            </div>
+            <div>{t("header.exercise")}</div>
+          </header>
+          <Form />
+          <div className="exercise_add_buttons">
+            <div onClick={handleCancel}>{t("practical.back")}</div>
+            <button disabled={isLoading} className="relative" type="submit">
+              {t("practical.edit")}
+
+              {isLoading && (
+                <span className="Spinier_Div">
+                  <Spin />
+                </span>
+              )}
+            </button>
+          </div>
+        </main>
+      </FormikForm>
     </div>
   );
 };

src/Pages/question/Model/AcceptModal.tsx

@@ -9,24 +9,20 @@ import { QUESTION_OBJECT_KEY } from "../../../config/AppKey";
 
 const AcceptModal: React.FC = () => {
   const { isOpen, setIsOpen } = useModalState((state) => state);
-  const navigate = useNavigate()
+  const navigate = useNavigate();
-
 
   const handleSubmit = () => {
-    localStorage.removeItem(QUESTION_OBJECT_KEY)
+    localStorage.removeItem(QUESTION_OBJECT_KEY);
     console.log("Handle submit clicked");
     setIsOpen("");
 
-    navigate(-1)
+    navigate(-1);
-
   };
 
   const handleCancel = () => {
     setIsOpen("");
-
   };
 
-
   const [t] = useTranslation();
   return (
     <>
@@ -38,29 +34,20 @@ const AcceptModal: React.FC = () => {
         open={isOpen === ModalEnum?.QUESTION_ACCEPT}
         onCancel={handleCancel}
       >
-        <header>
+        <header> {t("practical.accept_back")}</header>
-          {" "}
-          {t("practical.accept_back")}
-        </header>
 
         <main className="main_modal">
           <div className="ValidationField w-100 mb-5">
             <label className="text h1 ">
-              {t("practical.Are you sure you want to go back and not save any changes?")}{" "}
+              {t(
-           
+                "practical.Are you sure you want to go back and not save any changes?",
+              )}{" "}
             </label>
-
           </div>
 
           <div className="buttons">
             <div onClick={handleCancel}>{t("practical.cancel")}</div>
-            <div
+            <div onClick={handleSubmit}>{t("practical.accept")}</div>
-              onClick={handleSubmit}
-             
-            >
-              {t("practical.accept")}
-
-            </div>
           </div>
         </main>
       </Modal>

src/Pages/question/Model/Add.tsx

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

src/Pages/question/Model/Delete.tsx

@@ -50,7 +50,7 @@ const ModalForm: React.FC = () => {
         onCancel={handleCancel}
       >
         <header>
-          {t("practical.delete")}  {t("input.id")} ({objectToEdit?.id}){" "}
+          {t("practical.delete")} {t("input.id")} ({objectToEdit?.id}){" "}
         </header>
         <main className="main_modal">
           <div className="ValidationField w-100 mb-5">
@@ -74,7 +74,9 @@ const ModalForm: React.FC = () => {
               className={
                 objectToEdit?.id !== inputValue ? "disabled_button" : ""
               }
-              disabled={Number(objectToEdit?.id) !== Number(inputValue) || isLoading}
+              disabled={
+                Number(objectToEdit?.id) !== Number(inputValue) || isLoading
+              }
               onClick={handleSubmit}
             >
               {t("practical.delete")}

src/Pages/question/Model/Edit.tsx

@@ -23,57 +23,58 @@ const Form = () => {
     }
   }, [isOpen]);
 
-    // console.log(formik?.errors);
+  // console.log(formik?.errors);
-    
 
   const handleAddChoice = () => {
-    
+    formik.setFieldValue("QuestionOptions", [
-    
+      ...((formik?.values as any)?.QuestionOptions as Choice[]),
-      formik.setFieldValue('QuestionOptions', [...(formik?.values  as any)?.QuestionOptions as Choice[],
 
       {
-        answer:null,
+        answer: null,
-        answer_image:null,
+        answer_image: null,
-        isCorrect:0
+        isCorrect: 0,
-      }])
+      },
-  }
+    ]);
-  const [t] = useTranslation()
+  };
+  const [t] = useTranslation();
 
   return (
     <Row className="w-100">
       <div className="exercise_form">
-
+        <ValidationField
-        <ValidationField className="textarea_exercise" name="content" label="details" type="TextArea" />
+          className="textarea_exercise"
-        <ValidationField className="file_exercise" name="image" label="attachment" type="File" />
+          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>
-        
       </div>
       <div className=" flex ">
-      {/* <ValidationField  name="min_mark_to_pass" label="min_mark_to_pass" type="Number" /> */}
+        {/* <ValidationField  name="min_mark_to_pass" label="min_mark_to_pass" type="Number" /> */}
-
-      {/* <ValidationField  name="parent_id" label="parent_id" type="Select" option={[]} /> */}
 
+        {/* <ValidationField  name="parent_id" label="parent_id" type="Select" option={[]} /> */}
       </div>
-      {
+      {(((formik?.values as any)?.QuestionOptions as Choice[]) || []).map(
-        (((formik?.values  as any)?.QuestionOptions as Choice[])||[]) .map((item:Choice,index:number)=>{
+        (item: Choice, index: number) => {
-
+          return <ChoiceFields key={index} index={index} data={item} />;
-        return <ChoiceFields  key={index}  index={index}  data={item}/>
+        },
-       }
+      )}
-      )
+      {formik?.values?.QuestionOptions?.length < 5 && (
-      }
+        <p className="add_new_button">
-              {formik?.values?.QuestionOptions?.length < 5 && (
+          <FaCirclePlus onClick={handleAddChoice} size={23} />{" "}
-        <p className="add_new_button" >
+          {t("header.add_new_choice")}
-                      <FaCirclePlus  onClick={handleAddChoice} size={23} />  {t("header.add_new_choice")}
+        </p>
-                    </p> 
-
       )}
 
-             <DynamicTags/>
+      <DynamicTags />
-             
     </Row>
   );
 };

src/Pages/question/Model/Field/CheckboxField.tsx

@@ -12,33 +12,34 @@ const CheckboxField = ({
   className,
   props,
 }: any) => {
-  const formik = useFormikContext<any>()
+  const formik = useFormikContext<any>();
-  const [t] = useTranslation()
+  const [t] = useTranslation();
   const CheckboxhandleChange = (value: any, index: number) => {
-  
+    const allAreZero = formik?.values?.QuestionOptions?.some(
-    const allAreZero = formik?.values?.QuestionOptions?.some((item: any) => item.isCorrect === 1);
+      (item: any) => item.isCorrect === 1,
+    );
 
     if (allAreZero) {
-      
+      formik?.values.QuestionOptions.forEach((item: any, index: number) => {
-      formik?.values.QuestionOptions.forEach((item: any,index:number) => {
-        
         formik.setFieldValue(`QuestionOptions[${index}].isCorrect`, 0);
       });
     }
 
-    formik.setFieldValue(`QuestionOptions[${name}].isCorrect`, value?.target?.checked ? 1 : 0);
+    formik.setFieldValue(
-
+      `QuestionOptions[${name}].isCorrect`,
+      value?.target?.checked ? 1 : 0,
+    );
   };
   return (
     <div className={Group ? "d-inline mt-5 Checkbox" : ``}>
-    <Checkbox
+      <Checkbox
-          onChange={onChange || CheckboxhandleChange}
+        onChange={onChange || CheckboxhandleChange}
-          disabled={isDisabled}
+        disabled={isDisabled}
-          checked={formik.values?.QuestionOptions?.[name]?.isCorrect === 1}
+        checked={formik.values?.QuestionOptions?.[name]?.isCorrect === 1}
-          className={className}
+        className={className}
-        >
+      >
-          {t(`input.${label ? label : name}`)}
+        {t(`input.${label ? label : name}`)}
-        </Checkbox>
+      </Checkbox>
     </div>
   );
 };

src/Pages/question/Model/Field/ChoiceFields.tsx

@@ -1,43 +1,60 @@
-import React from 'react'
+import React from "react";
-import { Choice } from '../../../../types/Item'
+import { Choice } from "../../../../types/Item";
-import ValidationField from '../../../../Components/ValidationField/ValidationField'
+import ValidationField from "../../../../Components/ValidationField/ValidationField";
-import { useFormikContext } from 'formik';
+import { useFormikContext } from "formik";
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
-import { getCharFromNumber } from '../../../../utils/getCharFromNumber';
+import { getCharFromNumber } from "../../../../utils/getCharFromNumber";
-import CheckboxField from './CheckboxField';
+import CheckboxField from "./CheckboxField";
-import TextField from './TextField';
+import TextField from "./TextField";
-import File from './File';
+import File from "./File";
-import { FaCirclePlus, FaDeleteLeft } from 'react-icons/fa6';
+import { FaCirclePlus, FaDeleteLeft } from "react-icons/fa6";
-import { FaTrash } from 'react-icons/fa';
+import { FaTrash } from "react-icons/fa";
 
-const ChoiceFields = ({index,data}:{index:number , data :Choice }) => {
+const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
   const formik = useFormikContext<any>();
 
-    const [t] = useTranslation()
+  const [t] = useTranslation();
 
-    const handleDeleteChoice = () => {
+  const handleDeleteChoice = () => {
-      console.log(index);
+    console.log(index);
-      console.log(formik.values.QuestionOptions[index]);
+    console.log(formik.values.QuestionOptions[index]);
 
-      const updatedQuestionOptions = formik.values.QuestionOptions.filter((_:any, i:any) => i !== index);
+    const updatedQuestionOptions = formik.values.QuestionOptions.filter(
+      (_: any, i: any) => i !== index,
+    );
 
-      formik.setFieldValue('QuestionOptions', updatedQuestionOptions);
+    formik.setFieldValue("QuestionOptions", updatedQuestionOptions);
-    };
+  };
-console.log(formik.values);
+  console.log(formik.values);
 
   return (
-    <div className='ChoiceFields'>
+    <div className="ChoiceFields">
+      <TextField
+        className="textarea_exercise"
+        placeholder={"choice"}
+        label2={t(`input.choice`) + ` ` + `(${getCharFromNumber(index)})`}
+        name={index}
+        id={`choice_${index + 1}`}
+        type="TextArea"
+      />
+      <File
+        className="file_exercise"
+        label={"attachment"}
+        name={index}
+        type="File"
+      />
 
+      <CheckboxField
+        className=""
+        label="The_correct_answer"
+        name={index}
+        type="Checkbox"
+      />
+      <p className="delete_question_options">
+        <FaTrash onClick={handleDeleteChoice} size={17} />
+      </p>
+    </div>
+  );
+};
 
-      <TextField className="textarea_exercise" placeholder={"choice"} label2={t(`input.choice`)  + ` ` + `(${(getCharFromNumber(index))})` } name={index} id={`choice_${index + 1}`} type="TextArea" />
+export default ChoiceFields;
-        <File className="file_exercise" label={"attachment"}  name={index} type="File" />
-    
-        <CheckboxField className="" label="The_correct_answer"  name={index} type="Checkbox" />
-        <p className="delete_question_options" >
-                      <FaTrash  onClick={handleDeleteChoice} size={17} /> 
-        </p> 
-      </div>
-  )
-}
-
-export default ChoiceFields

src/Pages/question/Model/Field/File.tsx

@@ -12,30 +12,29 @@ const File = ({
   className,
   props,
 }: any) => {
+  const newName = `QuestionOptions[${name}].answer_image`;
 
-  const newName = `QuestionOptions[${name}].answer_image`
+  const { formik, t, isError, errorMsg } = useFormField(newName, props);
-
-  const { formik, t, isError,errorMsg } = useFormField(newName, props);
   let imageUrl = formik?.values?.QuestionOptions[name]?.answer_image ?? null;
   // console.log(imageUrl);
-      console.log(imageUrl);
+  console.log(imageUrl);
 
   const fileList: UploadFile[] = useMemo(() => {
     if (!imageUrl) return [];
 
     return [
-      typeof imageUrl === 'string'
+      typeof imageUrl === "string"
         ? {
-            uid: '-1',
+            uid: "-1",
-            name: 'uploaded-image',
+            name: "uploaded-image",
-            status: 'done',
+            status: "done",
             url: imageUrl,
             thumbUrl: imageUrl,
           }
         : {
-            uid: imageUrl.uid || '-1',
+            uid: imageUrl.uid || "-1",
-            name: imageUrl.name || 'uploaded-image',
+            name: imageUrl.name || "uploaded-image",
-            status: 'done',
+            status: "done",
             originFileObj: imageUrl,
           },
     ];
@@ -47,8 +46,10 @@ const File = ({
     if (value.fileList.length === 0) {
       formik.setFieldValue(newName, null);
     } else {
-      formik.setFieldValue(`QuestionOptions[${name}].answer_image`, value?.file?.originFileObj);
+      formik.setFieldValue(
-
+        `QuestionOptions[${name}].answer_image`,
+        value?.file?.originFileObj,
+      );
     }
   };
   const customRequest = async ({ onSuccess, no_label, label_icon }: any) => {
@@ -74,7 +75,6 @@ const File = ({
           icon={<UploadOutlined />}
         >
           {placholder ?? t("input.Click_to_upload_the_image")}
-         
         </Button>
         <div className="Error_color"> {isError ? "required" : ""}</div>
         {errorMsg}

src/Pages/question/Model/Field/TextField.tsx

@@ -16,9 +16,9 @@ const TextField = ({
   no_label,
   label_icon,
   id,
-  className
+  className,
 }: any) => {
-  const newName = `QuestionOptions[${name}].answer`
+  const newName = `QuestionOptions[${name}].answer`;
   const { formik, isError, errorMsg, t } = useFormField(newName, props);
   const TextFilehandleChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
@@ -36,14 +36,14 @@ const TextField = ({
       ) : label_icon ? (
         <div className="LabelWithIcon">
           <label htmlFor={name} className="text">
-          {label2 ? label2 :  t(`input.${label ? label : name}`) }  
+            {label2 ? label2 : t(`input.${label ? label : name}`)}
           </label>
           <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
         </div>
       ) : (
         <label htmlFor={name} className="text">
-          {label2 ? label2 :  t(`input.${label ? label : name}`) }  
+          {label2 ? label2 : t(`input.${label ? label : name}`)}
-          </label>
+        </label>
       )}
 
       <Form.Item
@@ -60,9 +60,8 @@ const TextField = ({
           showCount
           maxLength={1000}
           onChange={onChange || TextFilehandleChange}
-          style={{height:120}}
+          style={{ height: 120 }}
           id={id}
-        
         />
       </Form.Item>
     </div>

src/Pages/question/Model/Malty/Add.tsx

@@ -1,4 +1,4 @@
-  import { Col, Row } from "reactstrap";
+import { Col, Row } from "reactstrap";
 import React, { useEffect } from "react";
 import ValidationField from "../../../../Components/ValidationField/ValidationField";
 import { useFormikContext } from "formik";
@@ -15,7 +15,7 @@ const Form = () => {
   const formik = useFormikContext<any>();
   const { isOpen } = useModalState((state) => state);
   // const {data} = useGetAllQuestion();
-  const{setSuccess,Success,setSavedQuestionData} = useObjectToEdit()
+  const { setSuccess, Success, setSavedQuestionData } = useObjectToEdit();
 
   useEffect(() => {
     if (Success) {
@@ -23,113 +23,128 @@ const Form = () => {
 
       formik.setErrors({});
       formik.resetForm({ values: {} });
-      setSuccess(false)
+      setSuccess(false);
     }
   }, [Success]);
 
   useEffect(() => {
-    setSavedQuestionData(formik.values)
+    setSavedQuestionData(formik.values);
-  }, [formik?.values])
+  }, [formik?.values]);
 
-    // console.log(formik?.errors);
+  // console.log(formik?.errors);
-  console.log(formik?.values?.Questions,"formik?.values?.Questions");
+  console.log(formik?.values?.Questions, "formik?.values?.Questions");
 
-    
+  const handleAddChoice = (parent_index: number) => {
-  const handleAddChoice = (parent_index:number) => {
     console.log(parent_index);
 
-      formik.setFieldValue(`Questions.[${parent_index}].QuestionOptions`, [...(formik?.values  as any)?.Questions?.[parent_index].QuestionOptions as Choice[],
+    formik.setFieldValue(`Questions.[${parent_index}].QuestionOptions`, [
+      ...((formik?.values as any)?.Questions?.[parent_index]
+        .QuestionOptions as Choice[]),
 
       {
-        answer:null,
+        answer: null,
-        answer_image:null,
+        answer_image: null,
-        isCorrect:0
+        isCorrect: 0,
-      }])
+      },
-  }
+    ]);
-
+  };
 
   const handleAddQuestion = () => {
-    formik.setFieldValue('Questions', [...(formik?.values  as any)?.Questions as Choice[],
+    formik.setFieldValue("Questions", [
+      ...((formik?.values as any)?.Questions as Choice[]),
 
-    {
+      {
-      content: "",
+        content: "",
-      image: "",
+        image: "",
-      parent: '',
+        parent: "",
-      isBase: 0,
+        isBase: 0,
-      max_mark: 1,
+        max_mark: 1,
-      min_mark_to_pass: 1,
+        min_mark_to_pass: 1,
-      QuestionOptions: [{ answer: null, answer_image: null, isCorrect: 0 }],
+        QuestionOptions: [{ answer: null, answer_image: null, isCorrect: 0 }],
-      tags: []
+        tags: [],
-    }])
+      },
+    ]);
 
-    const max_mark = formik?.values?.max_mark + 1
+    const max_mark = formik?.values?.max_mark + 1;
 
-    formik.setFieldValue('max_mark', max_mark)
+    formik.setFieldValue("max_mark", max_mark);
-}
+  };
-  const [t] = useTranslation()
+  const [t] = useTranslation();
   console.log(formik.errors);
 
-
   return (
     <Row className="w-100">
-    <div className="exercise_form">
+      <div className="exercise_form">
+        <ValidationField
+          className="textarea_exercise"
+          name="content"
+          label="main_question"
+          type="TextArea"
+        />
+        <ValidationField
+          className="file_exercise"
+          name="image"
+          label="attachment"
+          type="File"
+        />
 
-      <ValidationField className="textarea_exercise" name="content" label="main_question" type="TextArea" />
+        {/* <div className="">
-      <ValidationField className="file_exercise" name="image" label="attachment" type="File" />
- 
-      {/* <div className="">
       <ValidationField  name="max_mark" label="max_mark" type="Number" className="inputSmall" disabled /> 
         <ValidationField  name="min_mark_to_pass" label="min_mark_to_pass" className="inputSmall" type="Number"  />
 
       </div> */}
-  <div>
+        <div></div>
+      </div>
+      <div className=" flex "></div>
 
-  </div>
+      {((formik?.values as any)?.Questions || [])?.map(
+        (item: Choice, parent_index: number) => {
+          return (
+            <div key={parent_index}>
+              <div className="exercise_form">
+                <QuestionFIeld
+                  key={parent_index}
+                  index={parent_index}
+                  data={item}
+                />
+              </div>
 
-    </div>
+              {(
-    <div className=" flex ">
+                (formik?.values as any)?.Questions?.[parent_index]
+                  ?.QuestionOptions || []
+              ).map((item: Choice, index: number) => {
+                return (
+                  <ChoiceFields
+                    key={index}
+                    parent_index={parent_index}
+                    index={index}
+                    data={item}
+                  />
+                );
+              })}
 
-    </div>
+              {formik?.values?.Questions?.[parent_index]?.QuestionOptions
-
+                ?.length < 5 && (
-    {
+                <p className="add_new_button">
-      (((formik?.values  as any)?.Questions)||[])?.map((item:Choice,parent_index:number)=>{
+                  <FaCirclePlus
-
+                    onClick={() => handleAddChoice(parent_index)}
-      return (
+                    size={23}
-        <div key={parent_index}>
+                  />{" "}
-    
+                  {t("header.add_new_choice")}
-        <div className="exercise_form">
+                </p>
-        
+              )}
-        <QuestionFIeld  key={parent_index}  index={parent_index}  data={item}/>
-        </div>
-        
-        {
-                (((formik?.values  as any)?.Questions?.[parent_index]?.QuestionOptions)||[]) .map((item:Choice,index:number)=>{
-        
-                return <ChoiceFields  key={index} parent_index={parent_index} index={index}  data={item}/>
-               }
-              )
-              }
-                    
-                     {formik?.values?.Questions?.[parent_index]?.QuestionOptions?.length < 5  && (
-        <p className="add_new_button" >
-                       <FaCirclePlus onClick={()=> handleAddChoice(parent_index)} size={23} />  {t("header.add_new_choice")}
-                       </p> 
 
+              <DynamicTags parent_index={parent_index} />
+            </div>
+          );
+        },
       )}
 
-
+      <p className="add_new_button">
-        
+        <FaCirclePlus onClick={handleAddQuestion} size={23} />{" "}
-                     <DynamicTags parent_index={parent_index}   />
+        {t("header.add_new_question")}
-        </div>
+      </p>
-      )
+    </Row>
-     }
-    )
-    }
-
-<p className="add_new_button" >
-                       <FaCirclePlus onClick={handleAddQuestion} size={23} />  {t("header.add_new_question")}
-  </p>     
-  </Row>
   );
 };
 

src/Pages/question/Model/Malty/ChoiceField/CheckboxField.tsx

@@ -13,36 +13,43 @@ const CheckboxField = ({
   parent_index,
   props,
 }: any) => {
-  const formik = useFormikContext<any>()
+  const formik = useFormikContext<any>();
-  const [t] = useTranslation()
+  const [t] = useTranslation();
   const CheckboxhandleChange = (value: any) => {
     console.log(value?.target?.checked);
 
-
+    const allAreZero = formik?.values?.Questions?.[
-
+      parent_index
-    const allAreZero = formik?.values?.Questions?.[parent_index]?.QuestionOptions?.some((item: any) => item.isCorrect === 1);      
+    ]?.QuestionOptions?.some((item: any) => item.isCorrect === 1);
     if (allAreZero) {
-      
+      formik?.values?.Questions?.[parent_index]?.QuestionOptions.forEach(
-      formik?.values?.Questions?.[parent_index]?.QuestionOptions.forEach((item: any,index:number) => {
+        (item: any, index: number) => {
-          
+          formik.setFieldValue(
-        formik.setFieldValue(`Questions[${parent_index}].QuestionOptions[${index}].isCorrect`, 0);
+            `Questions[${parent_index}].QuestionOptions[${index}].isCorrect`,
-      }); 
+            0,
+          );
+        },
+      );
     }
 
-    formik.setFieldValue(`Questions[${parent_index}].QuestionOptions[${name}].isCorrect`, value?.target?.checked ? 1 : 0);
+    formik.setFieldValue(
-
+      `Questions[${parent_index}].QuestionOptions[${name}].isCorrect`,
-
+      value?.target?.checked ? 1 : 0,
+    );
   };
   return (
     <div className={Group ? "d-inline mt-5 Checkbox" : ``}>
-    <Checkbox
+      <Checkbox
-          onChange={onChange || CheckboxhandleChange}
+        onChange={onChange || CheckboxhandleChange}
-          disabled={isDisabled}
+        disabled={isDisabled}
-          checked={formik.values?.Questions?.[parent_index]?.QuestionOptions?.[name]?.isCorrect === 1}
+        checked={
-          className={className}
+          formik.values?.Questions?.[parent_index]?.QuestionOptions?.[name]
-        >
+            ?.isCorrect === 1
-          {t(`input.${label ? label : name}`)}
+        }
-        </Checkbox>
+        className={className}
+      >
+        {t(`input.${label ? label : name}`)}
+      </Checkbox>
     </div>
   );
 };

src/Pages/question/Model/Malty/ChoiceField/ChoiceFields.tsx

@@ -1,50 +1,79 @@
-import React from 'react'
+import React from "react";
-import { Choice } from '../../../../../types/Item'
+import { Choice } from "../../../../../types/Item";
-import ValidationField from '../../../../../Components/ValidationField/ValidationField'
+import ValidationField from "../../../../../Components/ValidationField/ValidationField";
-import { useFormikContext } from 'formik';
+import { useFormikContext } from "formik";
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
-import { getCharFromNumber } from '../../../../../utils/getCharFromNumber';
+import { getCharFromNumber } from "../../../../../utils/getCharFromNumber";
-import CheckboxField from './CheckboxField';
+import CheckboxField from "./CheckboxField";
-import TextField from './TextField';
+import TextField from "./TextField";
-import File from './File';
+import File from "./File";
-import { FaTrash } from 'react-icons/fa';
+import { FaTrash } from "react-icons/fa";
-import { toast } from 'react-toastify';
+import { toast } from "react-toastify";
 
-const ChoiceFields = ({index,parent_index,data}:{index:number ,parent_index:number, data :Choice }) => {
+const ChoiceFields = ({
+  index,
+  parent_index,
+  data,
+}: {
+  index: number;
+  parent_index: number;
+  data: Choice;
+}) => {
   const formik = useFormikContext<any>();
 
-    const [t] = useTranslation()
+  const [t] = useTranslation();
 
-    const handleDeleteChoice = () => {
+  const handleDeleteChoice = () => {
-        const arrayLength = formik.values.Questions?.[parent_index].QuestionOptions?.length
+    const arrayLength =
+      formik.values.Questions?.[parent_index].QuestionOptions?.length;
 
-      console.log(arrayLength);
+    console.log(arrayLength);
 
-      if(arrayLength === 1)
+    if (arrayLength === 1) {
-        {
+      toast.error(
-          toast.error(t("validation.Sorry, the question must have at least one option"))
+        t("validation.Sorry, the question must have at least one option"),
-        return ;
+      );
-      }
+      return;
-
-
-      const updatedQuestionOptions = formik.values.Questions?.[parent_index].QuestionOptions.filter((_:any, i:any) => i !== index);
-      formik.setFieldValue(`Questions[${parent_index}].QuestionOptions`, updatedQuestionOptions);
     }
-    ;
 
+    const updatedQuestionOptions = formik.values.Questions?.[
+      parent_index
+    ].QuestionOptions.filter((_: any, i: any) => i !== index);
+    formik.setFieldValue(
+      `Questions[${parent_index}].QuestionOptions`,
+      updatedQuestionOptions,
+    );
+  };
   return (
-    <div className='ChoiceFields'>
+    <div className="ChoiceFields">
+      <TextField
+        className="textarea_exercise"
+        placeholder={"choice"}
+        label2={t(`input.choice`) + ` ` + `(${getCharFromNumber(index)})`}
+        name={index}
+        parent_index={parent_index}
+        type="TextArea"
+      />
+      <File
+        className="file_exercise"
+        label={"attachment"}
+        name={index}
+        type="File"
+        parent_index={parent_index}
+      />
 
+      <CheckboxField
+        className=""
+        label="The_correct_answer"
+        name={index}
+        type="Checkbox"
+        parent_index={parent_index}
+      />
+      <p className="delete_question_options">
+        <FaTrash onClick={handleDeleteChoice} size={17} />
+      </p>
+    </div>
+  );
+};
 
-      <TextField className="textarea_exercise" placeholder={"choice"} label2={t(`input.choice`)  + ` ` + `(${(getCharFromNumber(index))})` } name={index} parent_index={parent_index} type="TextArea" />
+export default ChoiceFields;
-        <File className="file_exercise" label={"attachment"}  name={index} type="File" parent_index={parent_index} />
-    
-        <CheckboxField className="" label="The_correct_answer"  name={index} type="Checkbox" parent_index={parent_index} />
-        <p className="delete_question_options" >
-                      <FaTrash  onClick={handleDeleteChoice} size={17} /> 
-        </p> 
-      </div>
-  )
-}
-
-export default ChoiceFields

src/Pages/question/Model/Malty/ChoiceField/File.tsx

@@ -13,29 +13,30 @@ const File = ({
   parent_index,
   props,
 }: any) => {
+  const newName = `Questions[${parent_index}].QuestionOptions[${name}].answer_image`;
 
-  const newName = `Questions[${parent_index}].QuestionOptions[${name}].answer_image`
+  const { formik, t, isError, errorMsg } = useFormField(newName, props);
-
+  let imageUrl =
-  const { formik, t, isError,errorMsg } = useFormField(newName, props);
+    formik?.values?.Questions?.[parent_index]?.QuestionOptions[name]
-  let imageUrl = formik?.values?.Questions?.[parent_index]?.QuestionOptions[name]?.answer_image ?? null;
+      ?.answer_image ?? null;
   // console.log(imageUrl);
 
   const fileList: UploadFile[] = useMemo(() => {
     if (!imageUrl) return [];
 
     return [
-      typeof imageUrl === 'string'
+      typeof imageUrl === "string"
         ? {
-            uid: '-1',
+            uid: "-1",
-            name: 'uploaded-image',
+            name: "uploaded-image",
-            status: 'done',
+            status: "done",
             url: imageUrl,
             thumbUrl: imageUrl,
           }
         : {
-            uid: imageUrl.uid || '-1',
+            uid: imageUrl.uid || "-1",
-            name: imageUrl.name || 'uploaded-image',
+            name: imageUrl.name || "uploaded-image",
-            status: 'done',
+            status: "done",
             originFileObj: imageUrl,
           },
     ];
@@ -47,8 +48,10 @@ const File = ({
     if (value.fileList.length === 0) {
       formik.setFieldValue(newName, null);
     } else {
-      formik.setFieldValue(`Questions[${parent_index}].QuestionOptions[${name}].answer_image`, value?.file?.originFileObj);
+      formik.setFieldValue(
-
+        `Questions[${parent_index}].QuestionOptions[${name}].answer_image`,
+        value?.file?.originFileObj,
+      );
     }
   };
   const customRequest = async ({ onSuccess, no_label, label_icon }: any) => {
@@ -74,7 +77,6 @@ const File = ({
           icon={<UploadOutlined />}
         >
           {placholder ?? t("input.Click_to_upload_the_image")}
-         
         </Button>
         <div className="Error_color"> {isError ? "required" : ""}</div>
         {errorMsg}

src/Pages/question/Model/Malty/ChoiceField/TextField.tsx

@@ -16,9 +16,9 @@ const TextField = ({
   no_label,
   label_icon,
   parent_index,
-  className
+  className,
 }: any) => {
-  const newName = `Questions[${parent_index}].QuestionOptions[${name}].answer`
+  const newName = `Questions[${parent_index}].QuestionOptions[${name}].answer`;
   const { formik, isError, errorMsg, t } = useFormField(newName, props);
   const TextFilehandleChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
@@ -36,14 +36,14 @@ const TextField = ({
       ) : label_icon ? (
         <div className="LabelWithIcon">
           <label htmlFor={name} className="text">
-          {label2 ? label2 :  t(`input.${label ? label : name}`) }  
+            {label2 ? label2 : t(`input.${label ? label : name}`)}
           </label>
           <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
         </div>
       ) : (
         <label htmlFor={name} className="text">
-          {label2 ? label2 :  t(`input.${label ? label : name}`) }  
+          {label2 ? label2 : t(`input.${label ? label : name}`)}
-          </label>
+        </label>
       )}
 
       <Form.Item
@@ -60,9 +60,7 @@ const TextField = ({
           showCount
           maxLength={1000}
           onChange={onChange || TextFilehandleChange}
-          style={{height:120}}
+          style={{ height: 120 }}
-
-        
         />
       </Form.Item>
     </div>

src/Pages/question/Model/Malty/Edit.tsx

@@ -24,101 +24,118 @@ const Form = () => {
     }
   }, [isOpen]);
 
-    // console.log(formik?.errors);
+  // console.log(formik?.errors);
-    const [t] = useTranslation()
+  const [t] = useTranslation();
 
-    
+  const handleAddChoice = (parent_index: number) => {
-       
-  const handleAddChoice = (parent_index:number) => {
     console.log(parent_index);
     console.log(formik?.values?.Questions);
-      formik.setFieldValue(`Questions.[${parent_index}].QuestionOptions`, [...(formik?.values  as any)?.Questions?.[parent_index].QuestionOptions as Choice[],
+    formik.setFieldValue(`Questions.[${parent_index}].QuestionOptions`, [
+      ...((formik?.values as any)?.Questions?.[parent_index]
+        .QuestionOptions as Choice[]),
 
       {
-        answer:null,
+        answer: null,
-        answer_image:null,
+        answer_image: null,
-        isCorrect:0
+        isCorrect: 0,
-      }])
+      },
-  }
+    ]);
-
+  };
 
   const handleAddQuestion = () => {
-    formik.setFieldValue('Questions', [...(formik?.values  as any)?.Questions as Choice[],
+    formik.setFieldValue("Questions", [
+      ...((formik?.values as any)?.Questions as Choice[]),
 
-    {
+      {
-      content: "",
+        content: "",
-      image: "",
+        image: "",
-      parent: '',
+        parent: "",
-      isBase: 0,
+        isBase: 0,
-      max_mark: 1,
+        max_mark: 1,
-      min_mark_to_pass: 1,
+        min_mark_to_pass: 1,
-      QuestionOptions: [{ answer: null, answer_image: null, isCorrect: 0 }],
+        QuestionOptions: [{ answer: null, answer_image: null, isCorrect: 0 }],
-      tags: []
+        tags: [],
-    }])
+      },
+    ]);
 
-    const max_mark = formik?.values?.max_mark + 1
+    const max_mark = formik?.values?.max_mark + 1;
 
-    formik.setFieldValue('max_mark', max_mark)
+    formik.setFieldValue("max_mark", max_mark);
-}
+  };
   console.log(formik?.values);
 
   return (
     <Row className="w-100">
-    <div className="exercise_form">
+      <div className="exercise_form">
+        <ValidationField
+          className="textarea_exercise"
+          name="content"
+          label="main_question"
+          type="TextArea"
+        />
+        <ValidationField
+          className="file_exercise"
+          name="image"
+          label="attachment"
+          type="File"
+        />
 
-      <ValidationField className="textarea_exercise" name="content" label="main_question" type="TextArea" />
+        {/* <div className="">
-      <ValidationField className="file_exercise" name="image" label="attachment" type="File" />
- 
-      {/* <div className="">
       <ValidationField  name="max_mark" label="max_mark" type="Number" className="inputSmall" disabled /> 
         <ValidationField  name="min_mark_to_pass" label="min_mark_to_pass" className="inputSmall" type="Number"  />
 
       </div> */}
-  <div>
+        <div></div>
+      </div>
+      <div className=" flex "></div>
 
-  </div>
+      {((formik?.values as any)?.Questions || [])?.map(
+        (item: Choice, parent_index: number) => {
+          return (
+            <div key={parent_index}>
+              <div className="exercise_form">
+                <QuestionFIeld
+                  key={parent_index}
+                  index={parent_index}
+                  data={item}
+                />
+              </div>
 
-    </div>
+              {(
-    <div className=" flex ">
+                (formik?.values as any)?.Questions?.[parent_index]
-
+                  ?.QuestionOptions || []
-    </div>
+              ).map((item: Choice, index: number) => {
-
+                return (
-    {
+                  <ChoiceFields
-      (((formik?.values  as any)?.Questions)||[])?.map((item:Choice,parent_index:number)=>{
+                    key={index}
-
+                    parent_index={parent_index}
-      return (
+                    index={index}
-        <div key={parent_index}>
+                    data={item}
-    
+                  />
-        <div className="exercise_form">
+                );
-        
+              })}
-        <QuestionFIeld  key={parent_index}  index={parent_index}  data={item}/>
+              {formik?.values?.Questions?.[parent_index]?.QuestionOptions
-        </div>
+                ?.length < 5 && (
-        
+                <p className="add_new_button">
-        {
+                  <FaCirclePlus
-                (((formik?.values  as any)?.Questions?.[parent_index]?.QuestionOptions)||[]) .map((item:Choice,index:number)=>{
+                    onClick={() => handleAddChoice(parent_index)}
-        
+                    size={23}
-                return <ChoiceFields  key={index} parent_index={parent_index} index={index}  data={item}/>
+                  />{" "}
-               }
+                  {t("header.add_new_choice")}
-              )
+                </p>
-              }
+              )}
-                    {formik?.values?.Questions?.[parent_index]?.QuestionOptions?.length < 5  && (
-        <p className="add_new_button" >
-                       <FaCirclePlus onClick={()=> handleAddChoice(parent_index)} size={23} />  {t("header.add_new_choice")}
-                       </p> 
 
+              <DynamicTags parent_index={parent_index} />
+            </div>
+          );
+        },
       )}
 
-                     <DynamicTags parent_index={parent_index}   />
+      <p className="add_new_button">
-        </div>
+        <FaCirclePlus onClick={handleAddQuestion} size={23} />{" "}
-      )
+        {t("header.add_new_question")}
-     }
+      </p>
-    )
+    </Row>
-    }
-
-<p className="add_new_button" >
-                       <FaCirclePlus onClick={handleAddQuestion} size={23} />  {t("header.add_new_question")}
-  </p>     
-  </Row>
   );
 };
 

src/Pages/question/Model/Malty/QuestionFIeld/File.tsx

@@ -12,10 +12,9 @@ const File = ({
   className,
   props,
 }: any) => {
+  const newName = `Questions[${name}].image`;
 
-  const newName = `Questions[${name}].image`
+  const { formik, t, isError, errorMsg } = useFormField(newName, props);
-
-  const { formik, t, isError,errorMsg } = useFormField(newName, props);
   let imageUrl = formik?.values?.Questions?.[name]?.image ?? null;
   // console.log(imageUrl);
 
@@ -23,18 +22,18 @@ const File = ({
     if (!imageUrl) return [];
 
     return [
-      typeof imageUrl === 'string'
+      typeof imageUrl === "string"
         ? {
-            uid: '-1',
+            uid: "-1",
-            name: 'uploaded-image',
+            name: "uploaded-image",
-            status: 'done',
+            status: "done",
             url: imageUrl,
             thumbUrl: imageUrl,
           }
         : {
-            uid: imageUrl.uid || '-1',
+            uid: imageUrl.uid || "-1",
-            name: imageUrl.name || 'uploaded-image',
+            name: imageUrl.name || "uploaded-image",
-            status: 'done',
+            status: "done",
             originFileObj: imageUrl,
           },
     ];
@@ -46,8 +45,10 @@ const File = ({
     if (value.fileList.length === 0) {
       formik.setFieldValue(newName, null);
     } else {
-      formik.setFieldValue(`Questions[${name}].image`, value?.file?.originFileObj);
+      formik.setFieldValue(
-
+        `Questions[${name}].image`,
+        value?.file?.originFileObj,
+      );
     }
   };
   const customRequest = async ({ onSuccess, no_label, label_icon }: any) => {
@@ -73,7 +74,6 @@ const File = ({
           icon={<UploadOutlined />}
         >
           {placholder ?? t("input.Click_to_upload_the_image")}
-         
         </Button>
         <div className="Error_color"> {isError ? "required" : ""}</div>
         {errorMsg}

src/Pages/question/Model/Malty/QuestionFIeld/QuestionFIeld.tsx

@@ -1,47 +1,56 @@
-import React, { useEffect } from 'react'
+import React, { useEffect } from "react";
-import { Choice } from '../../../../../types/Item'
+import { Choice } from "../../../../../types/Item";
-import ValidationField from '../../../../../Components/ValidationField/ValidationField'
+import ValidationField from "../../../../../Components/ValidationField/ValidationField";
-import { useFormikContext } from 'formik';
+import { useFormikContext } from "formik";
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
-import { getCharFromNumber } from '../../../../../utils/getCharFromNumber';
+import { getCharFromNumber } from "../../../../../utils/getCharFromNumber";
-import TextField from './TextField';
+import TextField from "./TextField";
-import File from './File';
+import File from "./File";
-import { FaTrash } from 'react-icons/fa';
+import { FaTrash } from "react-icons/fa";
-import { useObjectToEdit } from '../../../../../zustand/ObjectToEditState';
+import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
-import { toast } from 'react-toastify';
+import { toast } from "react-toastify";
 
-const QuestionFIeld = ({index,data}:{index:number , data :Choice }) => {
+const QuestionFIeld = ({ index, data }: { index: number; data: Choice }) => {
   const formik = useFormikContext<any>();
   console.log(index);
-  const {setDeletedQuestions,DeletedQuestions} = useObjectToEdit()
+  const { setDeletedQuestions, DeletedQuestions } = useObjectToEdit();
 
-    const [t] = useTranslation()
+  const [t] = useTranslation();
   useEffect(() => {
-    setDeletedQuestions([])
+    setDeletedQuestions([]);
-  }, [window?.location.pathname])
+  }, [window?.location.pathname]);
-  
-    const handleDeleteQuestion = () => {
- 
-      const DeleteQuestionId = formik.values.Questions?.[index];
-      if(DeleteQuestionId?.id){
-        setDeletedQuestions([...DeletedQuestions,DeleteQuestionId])
-
-      }
-      const updatedQuestionOptions = formik.values.Questions.filter((_:any, i:any) => i !== index);
-      formik.setFieldValue(`Questions`, updatedQuestionOptions);
-    };
 
+  const handleDeleteQuestion = () => {
+    const DeleteQuestionId = formik.values.Questions?.[index];
+    if (DeleteQuestionId?.id) {
+      setDeletedQuestions([...DeletedQuestions, DeleteQuestionId]);
+    }
+    const updatedQuestionOptions = formik.values.Questions.filter(
+      (_: any, i: any) => i !== index,
+    );
+    formik.setFieldValue(`Questions`, updatedQuestionOptions);
+  };
 
   return (
-    <div className='ChoiceFields'>
+    <div className="ChoiceFields">
+      <TextField
+        className="textarea_exercise"
+        placeholder={"choice"}
+        label2={t(`input.question`) + ` ` + `${index + 1}`}
+        name={index}
+        type="TextArea"
+      />
+      <File
+        className="file_exercise"
+        label={"attachment"}
+        name={index}
+        type="File"
+      />
+      <p className="delete_question_options">
+        <FaTrash onClick={handleDeleteQuestion} size={17} />
+      </p>
+    </div>
+  );
+};
 
-      <TextField className="textarea_exercise" placeholder={"choice"}  label2={t(`input.question`)+ ` ` +`${index + 1}`}  name={index}  type="TextArea" />
+export default QuestionFIeld;
-        <File className="file_exercise" label={"attachment"}  name={index} type="File" />
-        <p className="delete_question_options" >
-        <FaTrash  onClick={handleDeleteQuestion} size={17} /> 
-        </p> 
-      </div>
-  )
-}
-
-export default QuestionFIeld

src/Pages/question/Model/Malty/QuestionFIeld/TextField.tsx

@@ -15,9 +15,9 @@ const TextField = ({
   props,
   no_label,
   label_icon,
-  className
+  className,
 }: any) => {
-  const newName = `Questions[${name}].content`
+  const newName = `Questions[${name}].content`;
   const { formik, isError, errorMsg, t } = useFormField(newName, props);
   const TextFilehandleChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
@@ -35,14 +35,14 @@ const TextField = ({
       ) : label_icon ? (
         <div className="LabelWithIcon">
           <label htmlFor={name} className="text">
-          {label2 ? label2 :  t(`input.${label ? label : name}`) }  
+            {label2 ? label2 : t(`input.${label ? label : name}`)}
           </label>
           <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
         </div>
       ) : (
         <label htmlFor={name} className="text">
-          {label2 ? label2 :  t(`input.${label ? label : name}`) }  
+          {label2 ? label2 : t(`input.${label ? label : name}`)}
-          </label>
+        </label>
       )}
 
       <Form.Item
@@ -59,9 +59,7 @@ const TextField = ({
           showCount
           maxLength={1000}
           onChange={onChange || TextFilehandleChange}
-          style={{height:120}}
+          style={{ height: 120 }}
-
-        
         />
       </Form.Item>
     </div>

src/Pages/question/Model/Malty/Tags/DynamicTags.tsx

@@ -1,109 +1,107 @@
-import { useFormikContext } from 'formik'
+import { useFormikContext } from "formik";
-import React from 'react'
+import React from "react";
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from "react-i18next";
-import { FaCirclePlus } from 'react-icons/fa6'
+import { FaCirclePlus } from "react-icons/fa6";
-import Tag from './Tag'
+import Tag from "./Tag";
-import { useObjectToEdit } from '../../../../../zustand/ObjectToEditState'
+import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
-import { useGetAllTag } from '../../../../../api/tags'
+import { useGetAllTag } from "../../../../../api/tags";
-
-const DynamicTags = ({parent_index}:{parent_index:number}) => {
-
-  const formik = useFormikContext<any>()
-  const [t] = useTranslation()
-  const { TagsSearch ,setTagsSearch,currentTag,currentParentIndex} = useObjectToEdit();
-  const {data} = useGetAllTag({
-    name : TagsSearch
-  })
-    const suggests = data?.data  
 
+const DynamicTags = ({ parent_index }: { parent_index: number }) => {
+  const formik = useFormikContext<any>();
+  const [t] = useTranslation();
+  const { TagsSearch, setTagsSearch, currentTag, currentParentIndex } =
+    useObjectToEdit();
+  const { data } = useGetAllTag({
+    name: TagsSearch,
+  });
+  const suggests = data?.data;
 
   const handleAddChoice = () => {
     const length = formik?.values?.Questions?.[parent_index]?.tags.length;
-    const lastElement = formik?.values?.Questions?.[parent_index]?.tags[length - 1]?.name;
+    const lastElement =
-    setTagsSearch(null)
+      formik?.values?.Questions?.[parent_index]?.tags[length - 1]?.name;
+    setTagsSearch(null);
 
-    if(lastElement !== ""){
+    if (lastElement !== "") {
-      formik.setFieldValue(`Questions.[${parent_index}].tags`, [...(formik?.values  as any)?.Questions?.[parent_index]?.tags as any[],
+      formik.setFieldValue(`Questions.[${parent_index}].tags`, [
-    
+        ...((formik?.values as any)?.Questions?.[parent_index]?.tags as any[]),
-      {
-        id:length +"_new",
-        name:"",
-        key:length
-      }])
-    }else{
 
+        {
+          id: length + "_new",
+          name: "",
+          key: length,
+        },
+      ]);
+    } else {
     }
+  };
+  // console.log(formik?.values);
+  // console.log(currentTag);
 
+  const handleChoice = (item: any) => {
+    const length = formik?.values?.Questions?.[parent_index]?.tags?.length;
+    console.log(currentTag);
 
-}
+    formik.setFieldValue(`Questions.[${parent_index}].tags[${currentTag}]`, {
-// console.log(formik?.values);
+      ...item,
-// console.log(currentTag);
+      key: length,
+    });
+    setTagsSearch(null);
+  };
 
-const handleChoice = (item: any) => {
+  // console.log(formik?.values?.tags?.length);
-
-  const length = formik?.values?.Questions?.[parent_index]?.tags?.length;
-  console.log(currentTag);
-  
-  formik.setFieldValue(`Questions.[${parent_index}].tags[${currentTag}]`, {...item,key:length});
-  setTagsSearch(null);
-}
-
-
-
-// console.log(formik?.values?.tags?.length);
 
   return (
-    <div className='DynamicTags'>
+    <div className="DynamicTags">
-      {formik?.values?.Questions?.[parent_index]?.tags?.length < 1 &&   
+      {formik?.values?.Questions?.[parent_index]?.tags?.length < 1 && (
+        <p className="add_new_button">
+          <FaCirclePlus size={23} onClick={handleAddChoice} />{" "}
+          {t("header.add_tag")}
+        </p>
+      )}
 
-      <p className="add_new_button"  >
+      <div className="tag_container">
-      <FaCirclePlus size={23} onClick={handleAddChoice} />  {t("header.add_tag")}
+        <div className="tags">
-    </p> 
+          {(
-      }
+            ((formik?.values as any)?.Questions?.[parent_index]
- 
+              ?.tags as any[]) || []
-     <div className="tag_container">
+          ).map((item: any, index: number) => {
-     <div className="tags">
+            return (
-
+              <Tag
-{
+                key={index}
-(((formik?.values  as any)?.Questions?.[parent_index]?.tags as any[])||[]) .map((item:any,index:number)=>{
+                parent_index={parent_index}
-
+                index={index}
-return (
+                data={item}
-<Tag  key={index} parent_index={parent_index}  index={index} data={item}/>
+              />
-
+            );
-
+          })}
-)
-}
-)
-}
-   </div>
-
-   {formik?.values?.Questions?.[parent_index]?.tags?.length > 0 && 
-
-<p className="add_new_button" >
-  
-  <FaCirclePlus onClick={handleAddChoice} size={20} /> 
-</p> 
-
-   }
-
-     </div>
-     {TagsSearch && currentParentIndex === parent_index && 
-        <div className="suggests">
-        {suggests?.map((item:any,index:number)=>{
-          console.log(currentParentIndex === parent_index);
-          
-          return (
-            <div className='suggested' key={index}  onClick={()=> handleChoice(item)}>
-            {item?.name}
-            </div>
-          )
-        })}
         </div>
-     }
 
+        {formik?.values?.Questions?.[parent_index]?.tags?.length > 0 && (
+          <p className="add_new_button">
+            <FaCirclePlus onClick={handleAddChoice} size={20} />
+          </p>
+        )}
+      </div>
+      {TagsSearch && currentParentIndex === parent_index && (
+        <div className="suggests">
+          {suggests?.map((item: any, index: number) => {
+            console.log(currentParentIndex === parent_index);
 
+            return (
+              <div
+                className="suggested"
+                key={index}
+                onClick={() => handleChoice(item)}
+              >
+                {item?.name}
+              </div>
+            );
+          })}
+        </div>
+      )}
     </div>
-  )
+  );
-}
+};
 
-export default DynamicTags
+export default DynamicTags;

src/Pages/question/Model/Malty/Tags/Tag.tsx

@@ -1,74 +1,80 @@
-import { useFormikContext } from 'formik';
+import { useFormikContext } from "formik";
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect } from "react";
-import { useObjectToEdit } from '../../../../../zustand/ObjectToEditState';
+import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
-import { FaTrash } from 'react-icons/fa';
+import { FaTrash } from "react-icons/fa";
 
-const Tag = ({ data, index,parent_index }: { data: any, index: number,parent_index:number }) => {
+const Tag = ({
-    const inputRef = useRef<HTMLInputElement>(null);
+  data,
-    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  index,
-    const DEBOUNCE_DELAY = 500; 
+  parent_index,
-    const formik = useFormikContext<any>();
+}: {
-    const { setTagsSearch ,setCurrentTag,setCurrentParentIndex} = useObjectToEdit();
+  data: any;
-        console.log(formik?.values?.Questions);
+  index: number;
+  parent_index: number;
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const DEBOUNCE_DELAY = 500;
+  const formik = useFormikContext<any>();
+  const { setTagsSearch, setCurrentTag, setCurrentParentIndex } =
+    useObjectToEdit();
+  console.log(formik?.values?.Questions);
 
-    useEffect(() => {
+  useEffect(() => {
-        if (inputRef.current) {
+    if (inputRef.current) {
-            inputRef.current.style.width = `${(formik?.values?.Questions?.[parent_index]?.tags[index]?.name?.length + 1) * 8}px`;
+      inputRef.current.style.width = `${(formik?.values?.Questions?.[parent_index]?.tags[index]?.name?.length + 1) * 8}px`;
-        }
+    }
-    }, [formik?.values?.Questions?.[parent_index]?.tags[index]?.name]);
+  }, [formik?.values?.Questions?.[parent_index]?.tags[index]?.name]);
 
-    const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        // console.log(e.target.value);
+    // console.log(e.target.value);
 
+    formik.setFieldValue(`Questions.[${parent_index}].tags[${index}]`, {
+      key: parent_index,
+      name: e.target.value,
+      id: `${parent_index}_key`,
+    });
+    setCurrentTag(index);
+    setCurrentParentIndex(parent_index);
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
 
-        formik.setFieldValue(`Questions.[${parent_index}].tags[${index}]`, {key:parent_index, name :e.target.value , id:`${parent_index}_key`});
+    timeoutRef.current = setTimeout(() => {
-        setCurrentTag(index)
+      setTagsSearch(e.target.value);
-        setCurrentParentIndex(parent_index)
+    }, DEBOUNCE_DELAY);
-        if (timeoutRef.current) {
+  };
-            clearTimeout(timeoutRef.current);
-          }
 
-          timeoutRef.current = setTimeout(() => {
+  const handleDeleteChoice = () => {
-            setTagsSearch(e.target.value)
+    console.log(data);
-          }, DEBOUNCE_DELAY);
-    };
 
-    const handleDeleteChoice = () => {
+    // Create a copy of current tags array
-        console.log(data);
+    const currentTags = [...formik.values.tags];
 
-        // Create a copy of current tags array
+    // Remove the item at the specified index from the array
-        const currentTags = [...formik.values.tags];
+    currentTags.splice(index, 1);
 
-        // Remove the item at the specified index from the array
+    console.log(currentTags); // Log the updated tags array
-        currentTags.splice(index, 1);
 
-        console.log(currentTags); // Log the updated tags array
+    // Update formik field value with the updated tags array
+    formik.setFieldValue(`Questions.[${parent_index}].tags`, currentTags);
 
-        // Update formik field value with the updated tags array
+    // Reset search state if needed
-        formik.setFieldValue(`Questions.[${parent_index}].tags`, currentTags);
+    setTagsSearch(null);
+  };
 
-        // Reset search state if needed
+  return (
-        setTagsSearch(null);
+    <div className="tag">
-    };
+      <input
-
+        ref={inputRef}
-  
+        className="tagInput"
-    
+        type="text"
-    return (
+        value={formik?.values?.Questions?.[parent_index]?.tags[index]?.name}
-       <div className='tag'>
+        onChange={handleEditInputChange}
-        <input
+      />
-            ref={inputRef}
+      <FaTrash onClick={handleDeleteChoice} />
-            className="tagInput"
+    </div>
-            type="text"
+  );
-            value={formik?.values?.Questions?.[parent_index]?.tags[index]?.name}
-            onChange={handleEditInputChange}
-         
-        />
-        <FaTrash onClick={handleDeleteChoice}/>
-       </div>
-    );
 };
 
 export default Tag;
-
-
-

src/Pages/question/Model/MathInput.tsx

@@ -1,11 +1,13 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
-import MathJax from 'react-mathjax';
+import MathJax from "react-mathjax";
 
 const MathInput: React.FC = () => {
-  const [input, setInput] = useState<string>('a^2+b^2=c^2 (x+a)^n=x=(-b±√(b^2-4ac))/2a ∑_(k=0)^n▒〖(n¦k) x^k a^(n-k) 〗');
+  const [input, setInput] = useState<string>(
+    "a^2+b^2=c^2 (x+a)^n=x=(-b±√(b^2-4ac))/2a ∑_(k=0)^n▒〖(n¦k) x^k a^(n-k) 〗",
+  );
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const formattedInput = event.target.value.replace("_", ' _  ');
+    const formattedInput = event.target.value.replace("_", " _  ");
     console.log(event.target.value);
 
     setInput(formattedInput);

src/Pages/question/Model/Tags/DynamicTags.tsx

@@ -1,106 +1,92 @@
-import { useFormikContext } from 'formik'
+import { useFormikContext } from "formik";
-import React from 'react'
+import React from "react";
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from "react-i18next";
-import { FaCirclePlus } from 'react-icons/fa6'
+import { FaCirclePlus } from "react-icons/fa6";
-import Tag from './Tag'
+import Tag from "./Tag";
-import { useObjectToEdit } from '../../../../zustand/ObjectToEditState'
+import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
-import { useGetAllTag } from '../../../../api/tags'
+import { useGetAllTag } from "../../../../api/tags";
 
 const DynamicTags = () => {
-
+  const formik = useFormikContext<any>();
-  const formik = useFormikContext<any>()
+  const [t] = useTranslation();
-  const [t] = useTranslation()
+  const { TagsSearch, setTagsSearch, currentTag } = useObjectToEdit();
-  const { TagsSearch ,setTagsSearch,currentTag} = useObjectToEdit();
+  const { data } = useGetAllTag({
-  const {data} = useGetAllTag({
+    name: TagsSearch,
-    name : TagsSearch
+  });
-  })
+  const suggests = data?.data;
-    const suggests = data?.data  
+  console.log(TagsSearch);
-    console.log(TagsSearch);
-    
 
   const handleAddChoice = () => {
     const length = formik?.values?.tags.length;
     const lastElement = formik?.values?.tags[length - 1]?.name;
-    setTagsSearch
+    setTagsSearch;
-    if(lastElement !== ""){
+    if (lastElement !== "") {
-      formik.setFieldValue('tags', [...(formik?.values  as any)?.tags as any[],
+      formik.setFieldValue("tags", [
-    
+        ...((formik?.values as any)?.tags as any[]),
-      {
-        id:length +"_new",
-        name:"",
-        key:length
-      }])
-    }else{
 
+        {
+          id: length + "_new",
+          name: "",
+          key: length,
+        },
+      ]);
+    } else {
     }
+  };
+  // console.log(formik?.values);
+  // console.log(currentTag);
 
+  const handleChoice = (item: any) => {
+    const length = formik.values.tags.length;
+    console.log(currentTag);
 
-}
+    formik.setFieldValue(`tags[${currentTag}]`, { ...item, key: length });
-// console.log(formik?.values);
+    setTagsSearch(null);
-// console.log(currentTag);
+  };
 
-const handleChoice = (item: any) => {
+  // console.log(formik?.values?.tags?.length);
-
-  const length = formik.values.tags.length;
-  console.log(currentTag);
-  
-  formik.setFieldValue(`tags[${currentTag}]`, {...item,key:length});
-  setTagsSearch(null);
-}
-
-
-
-// console.log(formik?.values?.tags?.length);
 
   return (
-    <div className='DynamicTags'>
+    <div className="DynamicTags">
-      {formik?.values?.tags?.length < 1 &&   
+      {formik?.values?.tags?.length < 1 && (
+        <p className="add_new_button">
+          <FaCirclePlus size={23} onClick={handleAddChoice} />{" "}
+          {t("header.add_tag")}
+        </p>
+      )}
 
-      <p className="add_new_button"  >
+      <div className="tag_container">
-      <FaCirclePlus size={23} onClick={handleAddChoice} />  {t("header.add_tag")}
+        <div className="tags">
-    </p> 
+          {(((formik?.values as any)?.tags as any[]) || []).map(
-      }
+            (item: any, index: number) => {
- 
+              return <Tag key={index} index={index} data={item} />;
-     <div className="tag_container">
+            },
-     <div className="tags">
+          )}
-
-{
-(((formik?.values  as any)?.tags as any[])||[]) .map((item:any,index:number)=>{
-
-return (
-<Tag  key={index}   index={index} data={item}/>
-
-
-)
-}
-)
-}
-   </div>
-
-   {formik?.values?.tags?.length > 0 &&   
-
-<p className="add_new_button" >
-  <FaCirclePlus onClick={handleAddChoice} size={20} /> 
-</p> 
-
-   }
-
-     </div>
-     {TagsSearch && 
-        <div className="suggests">
-        {suggests?.map((item:any,index:number)=>{
-          return (
-            <div className='suggested' key={index}  onClick={()=> handleChoice(item)}>
-            {item?.name}
-            </div>
-          )
-        })}
         </div>
-     }
-
 
+        {formik?.values?.tags?.length > 0 && (
+          <p className="add_new_button">
+            <FaCirclePlus onClick={handleAddChoice} size={20} />
+          </p>
+        )}
+      </div>
+      {TagsSearch && (
+        <div className="suggests">
+          {suggests?.map((item: any, index: number) => {
+            return (
+              <div
+                className="suggested"
+                key={index}
+                onClick={() => handleChoice(item)}
+              >
+                {item?.name}
+              </div>
+            );
+          })}
+        </div>
+      )}
     </div>
-  )
+  );
-}
+};
 
-export default DynamicTags
+export default DynamicTags;

src/Pages/question/Model/Tags/Tag.tsx

@@ -1,75 +1,75 @@
-import { useFormikContext } from 'formik';
+import { useFormikContext } from "formik";
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect } from "react";
-import { useObjectToEdit } from '../../../../zustand/ObjectToEditState';
+import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
-import { FaTrash } from 'react-icons/fa';
+import { FaTrash } from "react-icons/fa";
 
-const Tag = ({ data, index }: { data: any, index: number }) => {
+const Tag = ({ data, index }: { data: any; index: number }) => {
-    const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
-    const formik = useFormikContext<any>();
+  const formik = useFormikContext<any>();
-    const { setTagsSearch ,setCurrentTag} = useObjectToEdit();
+  const { setTagsSearch, setCurrentTag } = useObjectToEdit();
-    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-    const DEBOUNCE_DELAY = 500; 
+  const DEBOUNCE_DELAY = 500;
-    useEffect(() => {
+  useEffect(() => {
-        if (inputRef.current) {
+    if (inputRef.current) {
-            inputRef.current.style.width = `${(formik?.values?.tags[index]?.name?.length + 1) * 8}px`;
+      inputRef.current.style.width = `${(formik?.values?.tags[index]?.name?.length + 1) * 8}px`;
-        }
+    }
-    }, [formik?.values?.tags[index]?.name]);
+  }, [formik?.values?.tags[index]?.name]);
 
-    const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        // console.log(e.target.value);
+    // console.log(e.target.value);
-        formik.setFieldValue(`tags[${index}].name`, e.target.value);
+    formik.setFieldValue(`tags[${index}].name`, e.target.value);
-        // setTagsSearch(e.target.value)
+    // setTagsSearch(e.target.value)
-        formik.setFieldValue(`tags.[${index}]`, {key:index, name :e.target.value , id:`${index}_key`});
+    formik.setFieldValue(`tags.[${index}]`, {
+      key: index,
+      name: e.target.value,
+      id: `${index}_key`,
+    });
 
-        setCurrentTag(index)
+    setCurrentTag(index);
-        if (timeoutRef.current) {
+    if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
+      clearTimeout(timeoutRef.current);
-          }
+    }
 
-          timeoutRef.current = setTimeout(() => {
+    timeoutRef.current = setTimeout(() => {
-            setTagsSearch(e.target.value)
+      setTagsSearch(e.target.value);
-          }, DEBOUNCE_DELAY);
+    }, DEBOUNCE_DELAY);
-    };
+  };
 
-    const handleInputBlur = () => {
+  const handleInputBlur = () => {
-        // setTagsSearch(null)
+    // setTagsSearch(null)
-    };
+  };
 
-    const handleDeleteChoice = () => {
+  const handleDeleteChoice = () => {
-        console.log(data);
+    console.log(data);
 
-        // Create a copy of current tags array
+    // Create a copy of current tags array
-        const currentTags = [...formik.values.tags];
+    const currentTags = [...formik.values.tags];
 
-        // Remove the item at the specified index from the array
+    // Remove the item at the specified index from the array
-        currentTags.splice(index, 1);
+    currentTags.splice(index, 1);
 
-        console.log(currentTags); // Log the updated tags array
+    console.log(currentTags); // Log the updated tags array
 
-        // Update formik field value with the updated tags array
+    // Update formik field value with the updated tags array
-        formik.setFieldValue('tags', currentTags);
+    formik.setFieldValue("tags", currentTags);
 
-        // Reset search state if needed
+    // Reset search state if needed
-        setTagsSearch(null);
+    setTagsSearch(null);
-    };
+  };
 
-    return (
+  return (
-       <div className='tag'>
+    <div className="tag">
-        <input
+      <input
-            ref={inputRef}
+        ref={inputRef}
-            className="tagInput"
+        className="tagInput"
-            type="text"
+        type="text"
-            value={formik?.values?.tags[index]?.name}
+        value={formik?.values?.tags[index]?.name}
-            onChange={handleEditInputChange}
+        onChange={handleEditInputChange}
-            onBlur={handleInputBlur}
+        onBlur={handleInputBlur}
-         
+      />
-        />
+      <FaTrash onClick={handleDeleteChoice} />
-        <FaTrash onClick={handleDeleteChoice}/>
+    </div>
-       </div>
+  );
-    );
 };
 
 export default Tag;
-
-
-

src/Pages/question/Model/formUtil.ts

@@ -3,21 +3,18 @@ import { Question } from "../../../types/Item";
 import { getLocalStorage } from "../../../utils/LocalStorage";
 import { QUESTION_OBJECT_KEY } from "../../../config/AppKey";
 
-
 export const getInitialValues = (objectToEdit: Question): any => {
   const tags = objectToEdit?.tags?.map((item: any, index: number) => {
-    return { ...item, key: index }
+    return { ...item, key: index };
   });
 
-
-      
   return {
     id: objectToEdit?.id ?? null,
     content: objectToEdit?.content ?? "",
     image: objectToEdit?.image ?? "",
-    subject_id: objectToEdit?.subject_id ?? '',
+    subject_id: objectToEdit?.subject_id ?? "",
-    isBase:  0,
+    isBase: 0,
-    parent_id: objectToEdit?.parent_id ?? '',
+    parent_id: objectToEdit?.parent_id ?? "",
     QuestionOptions: objectToEdit?.QuestionOptions ?? [],
     tags: tags ?? [],
   };
@@ -28,21 +25,21 @@ export const getValidationSchema = () => {
   return Yup.object().shape({
     image: Yup.string().nullable(),
     content: Yup.string().required("validation.required"),
-    QuestionOptions: Yup.array().of(
+    QuestionOptions: Yup.array()
-      Yup.object().shape({
+      .of(
-        answer: Yup.string().required("validation.required"),
+        Yup.object().shape({
-        answer_image: Yup.string().nullable(),
+          answer: Yup.string().required("validation.required"),
-        isCorrect: Yup.boolean()
+          answer_image: Yup.string().nullable(),
-      })
+          isCorrect: Yup.boolean(),
-  ).nullable('Params are required')
+        }),
+      )
+      .nullable("Params are required"),
   });
 };
 
-
-
 export const getInitialValuesBase = (objectToEdit: Question): any => {
   const tags = objectToEdit?.tags?.map((item: any, index: number) => {
-    return { ...item, key: index }
+    return { ...item, key: index };
   });
   console.log(objectToEdit);
 
@@ -50,25 +47,24 @@ export const getInitialValuesBase = (objectToEdit: Question): any => {
     const tags = item?.tags?.map((tag: any) => ({
       id: tag?.id,
       name: tag?.name,
-      key: `${tag?.id}_key_${tag?.name}`
+      key: `${tag?.id}_key_${tag?.name}`,
     }));
 
     return {
       ...item,
-      tags
+      tags,
     };
   });
 
   const questions = newQuestions ?? [];
 
-    
   return {
     id: objectToEdit?.id ?? null,
     content: objectToEdit?.content ?? "",
     image: objectToEdit?.image ?? "",
-    subject_id: objectToEdit?.subject_id ?? '',
+    subject_id: objectToEdit?.subject_id ?? "",
-    isBase:  1,
+    isBase: 1,
-    parent_id: objectToEdit?.parent_id ?? '',
+    parent_id: objectToEdit?.parent_id ?? "",
     Questions: questions,
   };
 };
@@ -82,32 +78,36 @@ export const getValidationSchemaBase = () => {
       Yup.object().shape({
         image: Yup.string().nullable(),
         content: Yup.string().required("validation.required"),
-        QuestionOptions: Yup.array().of(
+        QuestionOptions: Yup.array()
-          Yup.object().shape({
+          .of(
-            answer: Yup.string().required("validation.required"),
+            Yup.object().shape({
-            answer_image: Yup.string().nullable(),
+              answer: Yup.string().required("validation.required"),
-            isCorrect: Yup.boolean()
+              answer_image: Yup.string().nullable(),
-          })
+              isCorrect: Yup.boolean(),
-      ).nullable('required')
+            }),
-      })
+          )
-  ),
+          .nullable("required"),
-  
+      }),
+    ),
   });
 };
 
-
 export function processTags(DataToSend: any) {
-  const oldTags = DataToSend?.tags?.map((item: any, index: number) => {
+  const oldTags = DataToSend?.tags
+    ?.map((item: any, index: number) => {
       if (typeof item?.id === "number") {
-          return item?.id;
+        return item?.id;
       }
-  }).filter((item:any)  => item !== undefined);
+    })
+    .filter((item: any) => item !== undefined);
 
-  const newTags = DataToSend?.tags?.map((item: any, index: number) => {
+  const newTags = DataToSend?.tags
-      if (typeof item?.id === "string" && item?.name !== "" ) {
+    ?.map((item: any, index: number) => {
-          return { name: item?.name };
+      if (typeof item?.id === "string" && item?.name !== "") {
+        return { name: item?.name };
       }
-  }).filter((item:any)  => item !== undefined);
+    })
+    .filter((item: any) => item !== undefined);
 
-  return { new:newTags, old:oldTags };
+  return { new: newTags, old: oldTags };
 }

src/Pages/question/Page.tsx

@@ -1,19 +1,18 @@
 import { useTranslation } from "react-i18next";
-import { lazy, Suspense } from 'react';
+import { lazy, Suspense } from "react";
 import { Spin } from "antd";
-import DeleteModel from './Model/Delete'
+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";
-const Table = lazy(() => import('./Table'));
+const Table = lazy(() => import("./Table"));
 
 const TableHeader = () => {
   const [t] = useTranslation();
 
-  
+  const { unit_id, lesson_id } = useParams<ParamsEnum>();
-  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 ?? "";
@@ -22,32 +21,31 @@ const TableHeader = () => {
 
   useSetPageTitle(
     t(`page_header.subject`) +
-    "/" +
+      "/" +
-    `${SubjectName}` +
+      `${SubjectName}` +
       "/" +
       t(`page_title.unit`) +
       "/" +
-      `${unitName}`+"/"
+      `${unitName}` +
-      +
+      "/" +
       t(`page_title.lesson`) +
       "/" +
-      `${lessonName}`+   "/" +
+      `${lessonName}` +
-      t(`page_title.questions`) 
+      "/" +
+      t(`page_title.questions`),
   );
 
   return (
     <div className="TableWithHeader">
-      <Suspense fallback={<Spin/>}>
+      <Suspense fallback={<Spin />}>
-      <header>
+        <header>
-        <h6>
+          <h6>
-          {t("models.Question")} {SubjectName} {unitName} {lessonName}
+            {t("models.Question")} {SubjectName} {unitName} {lessonName}
-        </h6>
+          </h6>
-
+        </header>
-      </header>
         <Table />
       </Suspense>
-      <DeleteModel/>
+      <DeleteModel />
-
     </div>
   );
 };

src/Pages/question/Table.tsx

@@ -6,9 +6,12 @@ import { useParams } from "react-router-dom";
 import { ParamsEnum } from "../../enums/params";
 
 const App: React.FC = () => {
-  const {lesson_id} = useParams<ParamsEnum>()
+  const { lesson_id } = useParams<ParamsEnum>();
-  const response = useGetAllQuestion({ lesson_id:lesson_id,  pagination: true  });
+  const response = useGetAllQuestion({
-  return <DataTable response={response} useColumns={useColumns}  />;
+    lesson_id: lesson_id,
+    pagination: true,
+  });
+  return <DataTable response={response} useColumns={useColumns} />;
 };
 
 export default App;

src/Pages/question/useTableColumns.tsx

@@ -9,29 +9,30 @@ 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 {
+  canAddQuestion,
+  canDeleteQuestion,
+  canEditQuestion,
+} from "../../utils/hasAbilityFn";
 
 export const useColumns = () => {
   const { setObjectToEdit } = useObjectToEdit((state) => state);
-  const navigate = useNavigate()
+  const navigate = useNavigate();
   const { setIsOpen } = useModalState((state) => state);
 
   const handelAdd = () => {
-    setObjectToEdit({})
+    setObjectToEdit({});
-    navigate(`${ABILITIES_ENUM?.QUESTION}/add`)
+    navigate(`${ABILITIES_ENUM?.QUESTION}/add`);
   };
 
-
   const handelDelete = (data: any) => {
     setObjectToEdit(data);
-        setIsOpen(ModalEnum?.QUESTION_DELETE);
+    setIsOpen(ModalEnum?.QUESTION_DELETE);
-
   };
 
   const handleEdit = (record: any) => {
     setObjectToEdit(record);
-    navigate(`${ABILITIES_ENUM?.QUESTION}/${record?.id}`) 
+    navigate(`${ABILITIES_ENUM?.QUESTION}/${record?.id}`);
-
   };
   const [t] = useTranslation();
 
@@ -49,14 +50,15 @@ export const useColumns = () => {
       key: "name",
       align: "center",
       render: (text, record) => record?.content,
-      ellipsis:true
+      ellipsis: true,
     },
     {
-      title:   t("columns.isBase"),
+      title: t("columns.isBase"),
       dataIndex: "isBase",
       key: "isBase",
       align: "center",
-      render: (text, record) => record?.isBase ? t("practical.yes") : t ("practical.no"),
+      render: (text, record) =>
+        record?.isBase ? t("practical.yes") : t("practical.no"),
     },
     {
       title: `${t("columns.question_options_count")}`,
@@ -67,10 +69,7 @@ export const useColumns = () => {
     },
     {
       title: canAddQuestion ? (
-        <button
+        <button onClick={() => handelAdd()} className="add_button">
-          onClick={() =>   handelAdd()   }
-          className="add_button"
-        >
           {t("practical.add")} {t("models.Question")} <FaPlus />
         </button>
       ) : (
@@ -92,11 +91,7 @@ export const useColumns = () => {
                 color="#E0E0E0"
               >
                 <span onClick={() => handleEdit(record)}>
-                <MdOutlineEdit
+                  <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
-                  size={22}
-                  style={{ color: "#A098AE" }}
-                  
-                />
                 </span>
               </Tooltip>
             )}

src/Pages/subject/Model/Add.tsx

@@ -8,7 +8,6 @@ import { useModalState } from "../../../zustand/Modal";
 import useSearchQuery from "../../../api/utils/useSearchQuery";
 
 const Form = () => {
-
   const { isOpen } = useModalState((state) => state);
   const formik = useFormikContext<any>();
   useEffect(() => {
@@ -22,7 +21,6 @@ const Form = () => {
     <Row className="w-100">
       <Col>
         <ValidationField name="name" label="name" />
-      
       </Col>
       <Col>
         <ValidationField type="File" name="image" label="image" />

src/Pages/subject/Model/AddModel.tsx

@@ -26,7 +26,6 @@ const ModalForm: React.FC = () => {
     //   console.log(values,"values");
     mutate({
       ...values,
-  
     });
   };
 

src/Pages/subject/Model/Edit.tsx

@@ -8,7 +8,6 @@ import { useFormikContext } from "formik";
 import useSearchQuery from "../../../api/utils/useSearchQuery";
 
 const Form = () => {
-
   const { isOpen } = useModalState((state) => state);
   const formik = useFormikContext();
   useEffect(() => {
@@ -21,7 +20,6 @@ const Form = () => {
     <Row className="w-100">
       <Col>
         <ValidationField name="name" label="name" />
-
       </Col>
       <Col>
         <ValidationField type="File" name="image" label="image" />

src/Pages/subject/Model/EditModel.tsx

@@ -11,9 +11,7 @@ import { handelImageState } from "../../../utils/DataToSendImageState";
 import { useTranslation } from "react-i18next";
 
 const ModalForm: React.FC = () => {
-  const { objectToEdit, setObjectToEdit } = useObjectToEdit(
+  const { objectToEdit, setObjectToEdit } = useObjectToEdit((state) => state);
-    (state) => state,
-  );
   const { isOpen, setIsOpen } = useModalState((state) => state);
 
   const { mutate, isSuccess, isLoading } = useUpdateSubject();

src/Pages/subject/Table/Page.tsx

@@ -1,47 +1,41 @@
-
+import { ModalEnum } from "../../../enums/Model";
-import { ModalEnum } from '../../../enums/Model';
+import useModalHandler from "../../../utils/useModalHandler";
-import useModalHandler from '../../../utils/useModalHandler';
+import { FaPlus } from "react-icons/fa";
-import { FaPlus } from 'react-icons/fa';
+import { useTranslation } from "react-i18next";
-import { useTranslation } from 'react-i18next';
+import TablePage from "./TablePage";
-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 useSetPageTitle from "../../../Hooks/useSetPageTitle";
-import { canAddSubject } from '../../../utils/hasAbilityFn';
+import { canAddSubject } from "../../../utils/hasAbilityFn";
-
 
 const TableWithHeader = () => {
-
   const { handel_open_model } = useModalHandler();
   const [t] = useTranslation();
 
-  useSetPageTitle(
+  useSetPageTitle(t(`page_header.subject`));
-    t(`page_header.subject`),
-  );
 
   return (
     <div className="TableWithHeader">
-    <header>
+      <header>
-      <h4 className="Bold Primary ">{t("models.subject")}</h4>
+        <h4 className="Bold Primary ">{t("models.subject")}</h4>
-      {canAddSubject && (
+        {canAddSubject && (
-        <button
+          <button
-          onClick={() => handel_open_model(ModalEnum?.SUBJECT_ADD)}
+            onClick={() => handel_open_model(ModalEnum?.SUBJECT_ADD)}
-          className="add_button"
+            className="add_button"
-        >
+          >
-          {t("practical.add")} {t("models.subject")} <FaPlus />
+            {t("practical.add")} {t("models.subject")} <FaPlus />
-        </button>
+          </button>
-      )}
+        )}
-    </header>
+      </header>
-    <TablePage />
+      <TablePage />
 
-    <AddSubjectModalForm />
+      <AddSubjectModalForm />
       <EditSubjectModalForm />
       <DeleteSubjectModalForm />
-  </div>
+    </div>
-  )
+  );
-}
+};
 
-export default TableWithHeader
+export default TableWithHeader;

src/Pages/subject/Table/TablePage.tsx

@@ -6,7 +6,7 @@ import { ParamsEnum } from "../../../enums/params";
 
 const TablePage: React.FC = () => {
   const { course_id } = useParams<ParamsEnum>();
-  const response = useGetAllSubject({ course_id: course_id,pagination:true});
+  const response = useGetAllSubject({ course_id: course_id, pagination: true });
 
   return <DataTable response={response} useColumns={useColumns} />;
 };

src/Pages/subject/Table/useTableColumns.tsx

@@ -85,7 +85,6 @@ export const useColumns = () => {
         const className =
           index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";
 
-
         return (
           <Space size="middle" className={className}>
             {canEditSubject && (
@@ -95,11 +94,7 @@ export const useColumns = () => {
                 color="#E0E0E0"
               >
                 <span onClick={() => handleEdit(record)}>
-                <MdOutlineEdit
+                  <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
-                  size={22}
-                  style={{ color: "#A098AE" }}
-                  
-                />
                 </span>
               </Tooltip>
             )}

src/Routes.tsx

@@ -6,24 +6,20 @@ import React, { lazy } from "react";
 // import Home from "./Pages/Home/Page";
 const Dummy = React.lazy(() => import("./Pages/Home/Dummy"));
 
-
 const Subject = React.lazy(() => import("./Pages/subject/Table/Page"));
 
 const Tags = React.lazy(() => import("./Pages/Tags/Page"));
 
 const Unit = React.lazy(() => import("./Pages/Unit/Page"));
 const Lesson = React.lazy(() => import("./Pages/lesson/Page"));
-const Question = React.lazy(() => import('./Pages/question/Page'))
+const Question = React.lazy(() => import("./Pages/question/Page"));
-const AddQuestionPage = React.lazy(() => import('./Pages/question/AddPage'))
+const AddQuestionPage = React.lazy(() => import("./Pages/question/AddPage"));
-const EditQuestionPage = React.lazy(() => import('./Pages/question/EditPage'))
+const EditQuestionPage = React.lazy(() => import("./Pages/question/EditPage"));
-
 
 // const QuestionChildren = React.lazy(() => import('./Pages/question/children/Page'))
 // const AddQuestionChildren = React.lazy(() => import('./Pages/question/children/Model/AddModel'))
 // const EditQuestionChildren = React.lazy(() => import('./Pages/question/children/Model/EditModel'))
 
-
-
 import { hasAbility } from "./utils/hasAbility";
 import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "./enums/abilities";
 import { ParamsEnum } from "./enums/params";
@@ -37,10 +33,9 @@ export const menuItems: TMenuItem[] = [
     path: "/",
     abilities: ABILITIES_ENUM?.PASS,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
-     prevPath: 0,
+    prevPath: 0,
   },
 
-
   {
     header: "page_header.subject",
     element: <Subject />,
@@ -49,7 +44,7 @@ export const menuItems: TMenuItem[] = [
     path: `/${ABILITIES_ENUM?.SUBJECT}`,
     abilities: ABILITIES_ENUM?.SUBJECT,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
-     prevPath: 0,
+    prevPath: 0,
   },
   {
     header: "page_header.tags",
@@ -59,23 +54,18 @@ export const menuItems: TMenuItem[] = [
     path: `/${ABILITIES_ENUM?.TAG}`,
     abilities: ABILITIES_ENUM?.TAG,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
-     prevPath: 0,
+    prevPath: 0,
   },
-
-
 ];
 
 export const CrudRoute: TCrudRoute[] = [
-
-
-
   {
     header: "page_header.subject_details",
     element: <Unit />,
     path: `/${ABILITIES_ENUM?.SUBJECT}/:${ParamsEnum?.SUBJECT_ID}`,
     abilities: ABILITIES_ENUM?.UNIT,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
-     prevPath: 1,
+    prevPath: 1,
   },
   {
     header: "page_header.unit_details",
@@ -83,7 +73,7 @@ export const CrudRoute: TCrudRoute[] = [
     path: `/${ABILITIES_ENUM?.SUBJECT}/:${ParamsEnum?.SUBJECT_ID}/${ABILITIES_ENUM?.UNIT}/:${ParamsEnum?.UNIT_ID}`,
     abilities: ABILITIES_ENUM?.LESSON,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
-     prevPath: 2,
+    prevPath: 2,
   },
 
   {
@@ -92,7 +82,7 @@ export const CrudRoute: TCrudRoute[] = [
     path: `/${ABILITIES_ENUM?.SUBJECT}/:${ParamsEnum?.SUBJECT_ID}/${ABILITIES_ENUM?.UNIT}/:${ParamsEnum?.UNIT_ID}/${ABILITIES_ENUM?.LESSON}/:${ParamsEnum?.LESSON_ID}`,
     abilities: ABILITIES_ENUM?.QUESTION,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
-     prevPath: 2,
+    prevPath: 2,
   },
   {
     header: "page_header.add_Question",
@@ -100,7 +90,7 @@ export const CrudRoute: TCrudRoute[] = [
     path: `/${ABILITIES_ENUM?.SUBJECT}/:${ParamsEnum?.SUBJECT_ID}/${ABILITIES_ENUM?.UNIT}/:${ParamsEnum?.UNIT_ID}/${ABILITIES_ENUM?.LESSON}/:${ParamsEnum?.LESSON_ID}/${ABILITIES_ENUM?.QUESTION}/add`,
     abilities: ABILITIES_ENUM?.QUESTION,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
-     prevPath: 2,
+    prevPath: 2,
   },
   {
     header: "page_header.edit_Question",
@@ -108,13 +98,10 @@ export const CrudRoute: TCrudRoute[] = [
     path: `/${ABILITIES_ENUM?.SUBJECT}/:${ParamsEnum?.SUBJECT_ID}/${ABILITIES_ENUM?.UNIT}/:${ParamsEnum?.UNIT_ID}/${ABILITIES_ENUM?.LESSON}/:${ParamsEnum?.LESSON_ID}/${ABILITIES_ENUM?.QUESTION}/:${ParamsEnum?.QUESTION_ID}`,
     abilities: ABILITIES_ENUM?.QUESTION,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
-     prevPath: 2,
+    prevPath: 2,
   },
- 
 ];
 
-
-
 export const AppRoutes: Record<string, string> = Object.fromEntries(
   menuItems.map((route) => [
     route.path,
@@ -134,9 +121,9 @@ export const search_array: { label: string; value: string }[] = menuItems
     value: item.path as string,
   }));
 
-  const AllRoute = [...menuItems, ...CrudRoute];
+const AllRoute = [...menuItems, ...CrudRoute];
 
-  export const PrevRoutes: any = AllRoute.map((route) => ({
+export const PrevRoutes: any = AllRoute.map((route) => ({
-    path: route.path,
+  path: route.path,
-    prevPath: route.prevPath,
+  prevPath: route.prevPath,
-  }));
+}));

src/Styles/App/classNames.scss

@@ -266,11 +266,10 @@ button:disabled {
   opacity: 0.5;
   cursor: not-allowed !important; /* examle: change cursor */
 }
-.relative{
+.relative {
   position: relative;
 }
-.h1{
+.h1 {
   text-align: center;
   font-weight: bold;
-  
 }

src/Styles/App/font.scss

@@ -1,4 +1,3 @@
-
 @font-face {
   font-family: "Poppins_Bold";
   src: url("../../font/Poppins-Bold.ttf") format("truetype"); /* Specify the path to the font file */

src/Styles/Layout/Layout.scss

@@ -83,8 +83,7 @@
   min-width: 120px;
 }
 
-
+.SpinContainer {
-.SpinContainer{
   @include Flex;
   height: 100%;
   min-height: 20vh;

src/Styles/Pages/Division.scss

@@ -1,5 +1,3 @@
-
-
 .hidden {
   display: none !important;
 }

src/Styles/Pages/activity.scss

@@ -405,4 +405,3 @@
     border-left: none !important;
   }
 }
-

src/Styles/Pages/exercise.scss

@@ -1,128 +1,122 @@
-.exercise_form,.ChoiceFields{
+.exercise_form,
+.ChoiceFields {
+  display: flex;
+  gap: 1vw;
+  width: 100%;
+  .textarea_exercise {
+    max-width: 40vw;
+  }
+  .file_exercise {
+    min-width: 18vw;
+    max-width: 18vw;
+    .ant-upload-wrapper
+      .ant-upload-list.ant-upload-list-picture
+      .ant-upload-list-item {
+      min-width: 18vw;
+      max-width: 18vw;
+    }
+  }
+}
+
+.exercise_add {
+  // padding: 2vw;
+  .exercise_add_main {
+    background: var(--bg);
+    padding: 2vw;
+  }
+  .exercise_add_buttons {
     display: flex;
-    gap: 1vw;
+    gap: 2%;
-    width: 100%;
+    justify-content: center;
-    .textarea_exercise{
-       max-width: 40vw;
-    }
-    .file_exercise{
-            min-width: 18vw;
-            max-width: 18vw;
-            .ant-upload-wrapper .ant-upload-list.ant-upload-list-picture .ant-upload-list-item{
-                min-width: 18vw;
-                max-width: 18vw;
-            }
-
-    }
-}
-
-.exercise_add{
-    // padding: 2vw;
-    .exercise_add_main{
-        background: var(--bg);
-        padding: 2vw;
-    }
-    .exercise_add_buttons{
-        display: flex;
-        gap: 2%;
-        justify-content: center;
-        align-items: center;
-        > button,
-        > div {
-          outline: none;
-          border: none;
-          border-radius: 10px;
-          padding: 0.4vw 0.2vw;
-          background: var(--primary);
-          color: var(--white);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          gap: 5px;
-          font-size: 1vw;
-          width: 10vw;
-        }
-    }
-}
-
-
-.tags{
-
-    gap: 10px;
-    
-}
-
-.tag_container{
-    display: flex;
-    gap: 20px;
     align-items: center;
-    margin-bottom: 29px;
+    > button,
-
+    > div {
-    .add_new_button{
+      outline: none;
-        margin-bottom: 0;
+      border: none;
+      border-radius: 10px;
+      padding: 0.4vw 0.2vw;
+      background: var(--primary);
+      color: var(--white);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 5px;
+      font-size: 1vw;
+      width: 10vw;
     }
+  }
 }
-.tags{
+
-    display: flex;
+.tags {
-    align-items: center;
+  gap: 10px;
-    flex-wrap: wrap;
-    gap: 20px;
 }
-.tag{
+
-    background: rgba(49, 130, 206, 0.15);
+.tag_container {
-    color: #3182CE;
+  display: flex;
-    min-width: 50px;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 29px;
+
+  .add_new_button {
+    margin-bottom: 0;
+  }
+}
+.tags {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+.tag {
+  background: rgba(49, 130, 206, 0.15);
+  color: #3182ce;
+  min-width: 50px;
+  padding: 3px 10px;
+  border-radius: 5px;
+  svg {
+  }
+}
+.tagInput {
+  all: unset;
+  min-width: 50px;
+  padding: 3px 10px;
+  text-align: center;
+  font-size: 13px;
+}
+
+.suggests {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 29px;
+  flex-wrap: wrap;
+
+  .suggested {
+    all: unset;
+
+    background-color: #fb7d5b;
     padding: 3px 10px;
     border-radius: 5px;
-    svg{
+    color: white;
-            
-    }
-
-}
-.tagInput{
-    all: unset;
     min-width: 50px;
-    padding: 3px 10px;
     text-align: center;
-    font-size: 13px;
+    font-size: 11px;
+    cursor: pointer;
+  }
 }
 
-
+.exercise_add_header {
-.suggests{
+  display: flex;
-    display: flex;
+  justify-content: space-between;
-    gap: 20px;
+  width: 90%;
-    margin-bottom: 29px;
-    flex-wrap: wrap;
-
-    .suggested{
-        all: unset;
-
-        background-color: #FB7D5B;
-        padding: 3px 10px;
-        border-radius: 5px;
-        color: white;
-        min-width: 50px;
-        text-align: center;
-        font-size: 11px;
-        cursor: pointer;
-
-    }
-   
 }
 
-.exercise_add_header{
+.inputSmall {
-    display: flex;
+  width: 100px;
-    justify-content: space-between;
-    width: 90%;
 }
 
-.inputSmall{
+.delete_question_options {
-            width: 100px;
+  margin-top: 25px;
-}
+  color: var(--primary);
-
+  position: absolute;
-.delete_question_options{
+  left: 100px;
-    margin-top: 25px;
-    color: var(--primary);
-    position: absolute;
-    left: 100px;
 }

src/Styles/Pages/index.scss

@@ -9,4 +9,4 @@
 @import "./Coulmns.scss";
 @import "./subject.scss";
 @import "./Marks.scss";
-@import './exercise.scss';
+@import "./exercise.scss";

src/api/Question.ts

@@ -15,10 +15,10 @@ const KEY2 = "questionBases";
 
 export const useGetAllQuestion = (params?: any) =>
   useGetQuery(KEY, API.GET, params);
-export const useAddQuestion = () => useAddMutation(KEY, API.ADD,false);
+export const useAddQuestion = () => useAddMutation(KEY, API.ADD, false);
 export const useAddQuestionAsync = () => useAddMutation(KEY2, API.ADD);
 
 export const useUpdateQuestion = (params?: any) =>
-  useUpdateMutation(KEY, API.GET,false);
+  useUpdateMutation(KEY, API.GET, false);
 export const useDeleteQuestion = (params?: any) =>
   useDeleteMutation(KEY, API.DELETE);

src/api/auth.ts

@@ -5,5 +5,4 @@ const API = {
   LOGIN: `login`,
   LOGOUT: `logout`,
 };
-export const useLoginAdmin = () =>
+export const useLoginAdmin = () => useAddMutation(KEY, API.LOGIN, false);
-  useAddMutation(KEY, API.LOGIN,false);

src/api/exam.ts

@@ -15,7 +15,6 @@ const KEY = "exam";
 export const useGetAllExam = (params?: any, options?: any) =>
   useGetQuery(KEY, API.GET, params, options);
 export const useAddExam = () => useAddMutation(KEY, API.ADD);
-export const useUpdateExam = (params?: any) =>
+export const useUpdateExam = (params?: any) => useUpdateMutation(KEY, API.GET);
-  useUpdateMutation(KEY, API.GET);
 export const useDeleteExam = (params?: any) =>
   useDeleteMutation(KEY, API.DELETE);

src/api/helper/useAddMutation.ts

@@ -7,24 +7,20 @@ import { AxiosResponse } from "../../types/Axios";
 function useAddMutation(
   key: string,
   url: string,
-  toast: boolean = true
+  toast: boolean = true,
-
 ): UseMutationResult<AxiosResponse, unknown, any, unknown> {
   const axios = useAxios();
-  console.log(toast,key);
+  console.log(toast, key);
-
 
   return useMutation<AxiosResponse, unknown, any, unknown>(
-    
     async (dataToSend) => {
       const filterDataToSend = filterData(dataToSend);
 
       const { data } = await axios.post(url, filterDataToSend, {
         headers: {
           "Content-Type": "multipart/form-data",
-          ["X-Custom-Message"] : toast ,
+          ["X-Custom-Message"]: toast,
           [HEADER_KEY]: key,
-          
         },
       });
       return data;

src/api/helper/useAxios.ts

@@ -49,16 +49,14 @@ function useAxios() {
         responseMsg || t("validation.the_possess_done_successful");
       if (method !== AxiosQueryEnum?.GET) {
         queryClient.invalidateQueries(key);
-        if(isToasted){
+        if (isToasted) {
           toast.success(ResponseMessage);
-
         }
         setValidation([{}]);
       }
       return response;
     },
     function (error) {
-    
       const status = error?.request?.status;
       const errorMsg = error?.response?.data?.message;
       const errorField = error?.response?.data;
@@ -75,7 +73,7 @@ function useAxios() {
         console.log(isString);
 
         toast.error(t(`${isString}`));
-      return ;
+        return;
       }
       if (status === AxiosStatusEnum.AUTHENTICATED) {
         logout();

src/api/helper/useDeleteMutation.ts

@@ -10,8 +10,7 @@ type DataToSend = {
 function useDeleteMutation(
   key: any,
   url: string,
-  toast:boolean = true
+  toast: boolean = true,
-
 ): UseMutationResult<AxiosResponse, unknown, DataToSend, unknown> {
   const axios = useAxios();
   return useMutation<AxiosResponse, unknown, DataToSend, unknown>(
@@ -19,7 +18,7 @@ function useDeleteMutation(
       const { data } = await axios.delete(url + `/` + dataToSend?.id, {
         headers: {
           [HEADER_KEY]: key,
-          ["X-Custom-Message"] : toast
+          ["X-Custom-Message"]: toast,
         },
       });
       return data;

src/api/helper/useGetQuery.ts

@@ -15,7 +15,6 @@ function useGetQuery(
 
   const { show, pagination, ...remainingParams } = params;
 
-
   const location = useLocation();
 
   const { page, per_page } = PaginationParams(location);

src/api/helper/useUpdateMutation.ts

@@ -6,8 +6,7 @@ import { AxiosResponse } from "../../types/Axios";
 const useUpdateMutation = (
   key: string,
   url: string,
-  toast:boolean = true
+  toast: boolean = true,
-
 ): UseMutationResult<AxiosResponse, any, any, any> => {
   const axios = useAxios();
 
@@ -28,7 +27,7 @@ const useUpdateMutation = (
       headers: {
         "Content-Type": "multipart/form-data",
         [HEADER_KEY]: key,
-        ["X-Custom-Message"] : toast
+        ["X-Custom-Message"]: toast,
       },
     });
     return data;

src/api/role.ts

@@ -21,8 +21,7 @@ export const useGetRole = (params?: any, options?: any) =>
   useGetQuery(KEY, API.GET, params, options);
 
 export const useAddRole = () => useAddMutation(KEY, API.ADD);
-export const useUpdateRole = (params?: any) =>
+export const useUpdateRole = (params?: any) => useUpdateMutation(KEY, API.GET);
-  useUpdateMutation(KEY, API.GET);
 
 export const useDeleteRole = (params?: any) =>
   useDeleteMutation(KEY, API.DELETE);

src/api/tags.ts

@@ -15,7 +15,6 @@ const KEY = "tag";
 export const useGetAllTag = (params?: any, options?: any) =>
   useGetQuery(KEY, API.GET, params, options);
 export const useAddTag = () => useAddMutation(KEY, API.ADD);
-export const useUpdateTag = (params?: any) =>
+export const useUpdateTag = (params?: any) => useUpdateMutation(KEY, API.GET);
-  useUpdateMutation(KEY, API.GET);
 export const useDeleteTag = (params?: any) =>
   useDeleteMutation(KEY, API.DELETE);

src/api/term.ts

@@ -15,7 +15,6 @@ const KEY = "term";
 export const useGetAllTerm = (params?: any, options?: any) =>
   useGetQuery(KEY, API.GET, params, options);
 export const useAddTerm = () => useAddMutation(KEY, API.ADD);
-export const useUpdateTerm = (params?: any) =>
+export const useUpdateTerm = (params?: any) => useUpdateMutation(KEY, API.GET);
-  useUpdateMutation(KEY, API.GET);
 export const useDeleteTerm = (params?: any) =>
   useDeleteMutation(KEY, API.DELETE);