format

.vscode/settings.json

@@ -30,4 +30,4 @@
     "مطلوب"
   ],
   "vite.https": true
-}
+}

src/App.tsx

@@ -33,7 +33,7 @@ const App = () => {
       />
 
       {renderRoutesRecursively(menuItems)}
-      
+
       {CrudRoute.map((route) => {
         const useAbility = hasAbility(route.abilities, route.abilities_value);
         if (!RoleByType(route)) {

src/Components/Cards/AddressCard.tsx

@@ -1,15 +1,15 @@
-import { Divider } from 'antd'
+import { Divider } from "antd";
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from "react-i18next";
 import { RxHome } from "react-icons/rx";
 
 const AddressCard = ({ data }: { data: any }) => {
   const { t } = useTranslation();
   return (
-    <div className='address_card'>
+    <div className="address_card">
       <h5>{t("practical.address")}</h5>
       <Divider />
       <div className="address_card_body">
-        {data?.map((address:any)=>(
+        {data?.map((address: any) => (
           <div>
             <RxHome />
             <span>
@@ -20,9 +20,7 @@ const AddressCard = ({ data }: { data: any }) => {
         ))}
       </div>
     </div>
-  )
+  );
-}
+};
-
-export default AddressCard
-
 
+export default AddressCard;

src/Components/Cards/AttachmentsCard.tsx

@@ -1,24 +1,24 @@
-import { Divider } from 'antd';
+import { Divider } from "antd";
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from "react-i18next";
-import ImageBoxField from '../CustomFields/ImageBoxField/ImageBoxField';
+import ImageBoxField from "../CustomFields/ImageBoxField/ImageBoxField";
 
-const AttachmentsCard = ({data}:{data?:any}) => {
+const AttachmentsCard = ({ data }: { data?: any }) => {
-    const {t} = useTranslation();
+  const { t } = useTranslation();
 
   return (
-    <div className='attachments_card'>
+    <div className="attachments_card">
-        <h5>{t("practical.address")}</h5>
+      <h5>{t("practical.address")}</h5>
-        <Divider />
+      <Divider />
-        <div className='attachments_body'>
+      <div className="attachments_body">
-            <h5>{t("practical.id_photo")}</h5>
+        <h5>{t("practical.id_photo")}</h5>
-            {/* {data?.map((address:any)=>( */}
+        {/* {data?.map((address:any)=>( */}
-            <span>
+        <span>
-                <ImageBoxField name="image"  />
+          <ImageBoxField name="image" />
-            </span>
+        </span>
-            {/* ))} */}
+        {/* ))} */}
-        </div>
+      </div>
     </div>
-  )
+  );
-}
+};
 
-export default AttachmentsCard
+export default AttachmentsCard;

src/Components/Cards/InfoCard.tsx

@@ -1,39 +1,49 @@
-import { Button, Divider } from 'antd'
+import { Button, Divider } from "antd";
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from "react-i18next";
-import { canAddReSeller } from '../../utils/hasAbilityFn';
+import { canAddReSeller } from "../../utils/hasAbilityFn";
 
-const InfoCard = ({ data, name, status,withButton = false,handleClick}:{ data:any, name:any, status:any,withButton?:boolean,handleClick?:() => void}) => {
+const InfoCard = ({
-    const {t} = useTranslation();
+  data,
+  name,
+  status,
+  withButton = false,
+  handleClick,
+}: {
+  data: any;
+  name: any;
+  status: any;
+  withButton?: boolean;
+  handleClick?: () => void;
+}) => {
+  const { t } = useTranslation();
 
-    return (
+  return (
-        <div className='info_card'>
+    <div className="info_card">
-            <div className="info_card_header">
+      <div className="info_card_header">
-                <img src="/Image/faker_user.png " alt="" />
+        <img src="/Image/faker_user.png " alt="" />
-                <div className="student_name_and_sub">
+        <div className="student_name_and_sub">
-                    <span>{status}</span>
+          <span>{status}</span>
-                    <h2>{name}</h2>
+          <h2>{name}</h2>
-                </div>
-            </div>
-            <Divider />
-            <div className="info_card_body">
-                {data?.map((student: any) => (
-                    <span>
-                        <h4>{student?.key}</h4>
-                        <p>{student?.value}</p>
-                    </span>
-                ))}
-                {withButton ? 
-                canAddReSeller &&
-                <Button onClick={handleClick} className='info_card_button'>
-                    {t("practical.collecting_an_amount")}
-                </Button>
-                : ""}
-            </div>
-            
         </div>
-    )
+      </div>
-}
+      <Divider />
-
+      <div className="info_card_body">
-export default InfoCard
+        {data?.map((student: any) => (
-
+          <span>
+            <h4>{student?.key}</h4>
+            <p>{student?.value}</p>
+          </span>
+        ))}
+        {withButton
+          ? canAddReSeller && (
+              <Button onClick={handleClick} className="info_card_button">
+                {t("practical.collecting_an_amount")}
+              </Button>
+            )
+          : ""}
+      </div>
+    </div>
+  );
+};
 
+export default InfoCard;

src/Components/Cards/ParamInfo.ts

@@ -1,27 +1,30 @@
 export const StudentParamInfo = [
-    {key:"الحنس" , value:"male"},
+  { key: "الحنس", value: "male" },
-    {key:"sex" , value:"male"},
+  { key: "sex", value: "male" },
-    {key:"sex" , value:"male"},
+  { key: "sex", value: "male" },
-    {key:"sex" , value:"male"},
+  { key: "sex", value: "male" },
-    {key:"sex" , value:"male"},
+  { key: "sex", value: "male" },
-    {key:"sex" , value:"male"}
+  { key: "sex", value: "male" },
-]
+];
 
 export const ReSellerParamInfo = [
-    {key:"رقم الهوية" , value:"12i9128921019"},
+  { key: "رقم الهوية", value: "12i9128921019" },
-    {key:"تاريخ الإضافة", value:"1/10/2010"},
+  { key: "تاريخ الإضافة", value: "1/10/2010" },
-    {key:"تاريخ الإضافة", value:"1/10/2010"},
+  { key: "تاريخ الإضافة", value: "1/10/2010" },
-    {key:"تاريخ الإضافة", value:"1/10/2010"},
+  { key: "تاريخ الإضافة", value: "1/10/2010" },
-    {key:"تاريخ الإضافة", value:"1/10/2010"},
+  { key: "تاريخ الإضافة", value: "1/10/2010" },
-    {key:"تاريخ الإضافة", value:"1/10/2010"},
+  { key: "تاريخ الإضافة", value: "1/10/2010" },
-    {key:"تاريخ الإضافة", value:"1/10/2010"},
+  { key: "تاريخ الإضافة", value: "1/10/2010" },
-]
+];
 
 export const StudentAddressInfo = [
-    {key:"address" , value:"moa moamasom aoms omaosm oasm oasm oasm asm aom"},
+  { key: "address", value: "moa moamasom aoms omaosm oasm oasm oasm asm aom" },
-]
+];
 
 export const ReSellerAddressInfo = [
-    {key:"governorate" , value:"moa moamasom aoms omaosm oasm oasm oasm asm aom"},
+  {
-    {key:"address" , value:"moa moamasom aoms omaosm oasm oasm oasm asm aom"},
+    key: "governorate",
-]
+    value: "moa moamasom aoms omaosm oasm oasm oasm asm aom",
+  },
+  { key: "address", value: "moa moamasom aoms omaosm oasm oasm oasm asm aom" },
+];

src/Components/Columns/ColumnsImage.tsx

@@ -16,10 +16,10 @@ const ColumnsImage = ({ src }: any) => {
 
   if (hasError) {
     // If there is an error, display the fallback icon
-    return <CiImageOff  />;
+    return <CiImageOff />;
   }
-  if(!imageUrl){
+  if (!imageUrl) {
-    return <CiImageOff  />;
+    return <CiImageOff />;
   }
   return (
     <Image

src/Components/CustomFields/ImageBoxField/ImageBoxField.tsx

@@ -14,7 +14,7 @@ const ImageBoxField = ({ name }: any) => {
   const value = getNestedValue(formik?.values, name);
   const [imagePreview, setImagePreview] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
-  const [t] = useTranslation()
+  const [t] = useTranslation();
   useEffect(() => {
     if (value instanceof File) {
       generateImagePreview(value, setImagePreview);
@@ -27,14 +27,14 @@ const ImageBoxField = ({ name }: any) => {
 
   const handleFileChange = (event: any) => {
     const file = event.target.files[0];
-      
+
     if (file) {
-      const maxSize = 2 * 1024 * 1024; 
+      const maxSize = 2 * 1024 * 1024;
 
       if (file.size > maxSize) {
-        alert(t('validation.File_size_exceeds_2_MB_limit.'));
+        alert(t("validation.File_size_exceeds_2_MB_limit."));
-        event.target.value = ''; 
+        event.target.value = "";
-        return; 
+        return;
       }
 
       // Process the file
@@ -42,7 +42,7 @@ const ImageBoxField = ({ name }: any) => {
 
     if (file) {
       generateImagePreview(file, setImagePreview);
-      
+
       formik.setFieldValue(name, file);
     }
   };
@@ -63,7 +63,7 @@ const ImageBoxField = ({ name }: any) => {
     }
   };
   console.log(name);
-  
+
   return (
     <div className="ImageBoxField">
       <div className="ImageHeader">
@@ -81,9 +81,9 @@ const ImageBoxField = ({ name }: any) => {
       </div>
       <div className="ImageBox" onClick={handleButtonClick}>
         {imagePreview ? (
-          <img src={imagePreview}  alt="Preview" className="imagePreview" />
+          <img src={imagePreview} alt="Preview" className="imagePreview" />
         ) : (
-          <ImageIcon  className="ImageBoxIcon" />
+          <ImageIcon className="ImageBoxIcon" />
         )}
       </div>
       <input

src/Components/CustomFields/ImageBoxField/ImageBoxFieldMemo.tsx

@@ -1,17 +1,18 @@
 import "./ImageBoxField.scss";
-  import { useState, useRef, useEffect,memo } from "react";
+import { useState, useRef, useEffect, memo } from "react";
-  import ImageIcon from "./ImageIcon";
+import ImageIcon from "./ImageIcon";
-  import ImageCancelIcon from "./ImageCancelIcon";
+import ImageCancelIcon from "./ImageCancelIcon";
-  import { getNestedValue } from "../../../utils/getNestedValue";
+import { getNestedValue } from "../../../utils/getNestedValue";
-  import { generateImagePreview } from "./generateImagePreview";
+import { generateImagePreview } from "./generateImagePreview";
-  import { useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import { areFieldPropsEqual } from "../../../utils/areFieldPropsEqual";
 
-  // Helper function to generate image preview from a File
+// Helper function to generate image preview from a File
 
-  const ImageBoxFieldMemo = memo(({ form,field }: any) => {
+const ImageBoxFieldMemo = memo(
-    const {values,setFieldValue} = form
+  ({ form, field }: any) => {
-    const {name} = field;
+    const { values, setFieldValue } = form;
+    const { name } = field;
     const value = getNestedValue(values, name);
     const [imagePreview, setImagePreview] = useState<string | null>(null);
     const fileInputRef = useRef<HTMLInputElement | null>(null);
@@ -28,14 +29,14 @@ import { areFieldPropsEqual } from "../../../utils/areFieldPropsEqual";
 
     const handleFileChange = (event: any) => {
       const file = event.target.files[0];
-        
+
       if (file) {
-        const maxSize = 2 * 1024 * 1024; 
+        const maxSize = 2 * 1024 * 1024;
 
         if (file.size > maxSize) {
-          alert(t('validation.File_size_exceeds_2_MB_limit.'));
+          alert(t("validation.File_size_exceeds_2_MB_limit."));
-          event.target.value = ''; 
+          event.target.value = "";
-          return; 
+          return;
         }
 
         // Process the file
@@ -43,7 +44,7 @@ import { areFieldPropsEqual } from "../../../utils/areFieldPropsEqual";
 
       if (file) {
         generateImagePreview(file, setImagePreview);
-        
+
         setFieldValue(name, file);
       }
     };
@@ -64,8 +65,8 @@ import { areFieldPropsEqual } from "../../../utils/areFieldPropsEqual";
       }
     };
 
-      console.log(name);
+    console.log(name);
-      
+
     return (
       <div className="ImageBoxField">
         <div className="ImageHeader">
@@ -83,9 +84,9 @@ import { areFieldPropsEqual } from "../../../utils/areFieldPropsEqual";
         </div>
         <div className="ImageBox" onClick={handleButtonClick}>
           {imagePreview ? (
-            <img src={imagePreview}  alt="Preview" className="imagePreview" />
+            <img src={imagePreview} alt="Preview" className="imagePreview" />
           ) : (
-            <ImageIcon  className="ImageBoxIcon" />
+            <ImageIcon className="ImageBoxIcon" />
           )}
         </div>
         <input
@@ -98,8 +99,10 @@ import { areFieldPropsEqual } from "../../../utils/areFieldPropsEqual";
         />
       </div>
     );
-  }, (prevProps, nextProps) => {
+  },
-    return areFieldPropsEqual(prevProps, nextProps)
+  (prevProps, nextProps) => {
-    });
+    return areFieldPropsEqual(prevProps, nextProps);
+  },
+);
 
-  export default ImageBoxFieldMemo;
+export default ImageBoxFieldMemo;

src/Components/CustomFields/MathComponent.tsx

@@ -1,22 +1,15 @@
-import React from 'react';
+import React from "react";
-import { BlockMath } from 'react-katex';
+import { BlockMath } from "react-katex";
-import 'katex/dist/katex.min.css';
+import "katex/dist/katex.min.css";
-
 
 const LatexPreview = ({ latex }: { latex: string }) => {
   // console.log(latex);
-  
+
-    // const sanitizedLatex = latex.replace(/\\_/g, '_');
+  // const sanitizedLatex = latex.replace(/\\_/g, '_');
-    
+
   return (
-    <div >
+    <div>
-
+      <BlockMath>{latex}</BlockMath>
-
-        <BlockMath>
-      {latex} 
-        </BlockMath>  
-     
-      
     </div>
   );
 };

src/Components/CustomFields/SelectTag.tsx

@@ -9,32 +9,31 @@ const SelectTag: React.FC = () => {
   const [searchValue, setSearchValue] = useState<string>("");
 
   const [fieldValue, setFieldValue] = useState<string>("");
-  const [NewAdditionalData, setNewAdditionalData] = useState({})
+  const [NewAdditionalData, setNewAdditionalData] = useState({});
   const formik = useFormikContext<any>();
-  const handleChange = (value: any,option:any) => {
+  const handleChange = (value: any, option: any) => {
     console.log(option);
     console.log(value);
-    const newSelectedOption = option?.pop()
+    const newSelectedOption = option?.pop();
     console.log(newSelectedOption);
 
     const newObject = {
-      id:newSelectedOption?.id,
+      id: newSelectedOption?.id,
-      name:newSelectedOption?.name
+      name: newSelectedOption?.name,
-    }
+    };
-    setNewAdditionalData(newObject)
+    setNewAdditionalData(newObject);
     formik.setFieldValue("tags", value);
     setSearchValue("");
     setFieldValue("");
   };
 
   const handleSearch = useDebounce((value: string) => {
-      console.log(value,"value");
+    console.log(value, "value");
-      
+
     setSearchValue(value);
   });
 
   const handleFieldChange = (value: string) => {
-
     setFieldValue(value);
   };
 
@@ -48,33 +47,34 @@ const SelectTag: React.FC = () => {
   });
 
   const [t] = useTranslation();
-  const initialData = formik?.values?.tags?.filter((item:any)=>{
+  const initialData =
-   return  item?.id
+    formik?.values?.tags?.filter((item: any) => {
- 
+      return item?.id;
-  }) ?? []
+    }) ?? [];
-
-  
 
   const options = data?.data ?? [];
   const additionalData =
     options.length < 1 && searchValue.length > 1 && !isLoading
       ? [{ id: searchValue, name: searchValue }]
       : [];
-  
+
   const value =
     formik?.values?.tags?.map((item: any) => item?.id ?? item) ?? [];
 
-  const AllOptions = [...options, ...additionalData,NewAdditionalData, ...(initialData)];
+  const AllOptions = [
-  
+    ...options,
+    ...additionalData,
+    NewAdditionalData,
+    ...initialData,
+  ];
+
   const uniqueOptions = Array.from(
     new Map(
-      AllOptions
+      AllOptions.filter((item) => Object.keys(item).length > 0) // Filter out empty objects
-        .filter(item => Object.keys(item).length > 0)  // Filter out empty objects
+        .map((item) => [item.id, item]), // Create [id, item] pairs to ensure uniqueness
-        .map(item => [item.id, item])  // Create [id, item] pairs to ensure uniqueness
+    ).values(),
-    ).values()
   );
 
-    
   return (
     <div className="SelectTag">
       <label htmlFor="">{t("models.tag")}</label>

src/Components/CustomFields/SelectTagV2.tsx

@@ -13,21 +13,22 @@ const SelectTagV2: React.FC = () => {
   // Fetch tags based on search value
   const { data, isLoading } = useGetAllTag({ name: searchValue });
   const { t } = useTranslation();
-  
+
-  
   // Get selected tags from Formik
   const CurrentTags = formik.values.tags ?? []; // Assuming tags are stored as array of objects
-  console.log(CurrentTags,"CurrentTags");
+  console.log(CurrentTags, "CurrentTags");
-  
+
-  const NewShapeTags = CurrentTags?.map((item:any)=> {return item?.name ?? item })
+  const NewShapeTags = CurrentTags?.map((item: any) => {
-  
+    return item?.name ?? item;
-  const handleChange = (_value: any[],option:any) => {
+  });
+
+  const handleChange = (_value: any[], option: any) => {
     // console.log(option,"option");
     console.log(_value);
-    
+
-    // const NewShapeOption = option?.map((item:any)=> {return ({name:item?.name,id:item?.id})})    
+    // const NewShapeOption = option?.map((item:any)=> {return ({name:item?.name,id:item?.id})})
     // console.log(NewShapeOption);
-    
+
     // formik.setFieldValue("tags", NewShapeOption);
     // setSearchValue("");
     // setFieldValue("");
@@ -43,14 +44,13 @@ const SelectTagV2: React.FC = () => {
   };
 
   const options = data?.data ?? [];
-  
-  const additionalData =
-  options.length < 1 && searchValue.length >= 1 && !isLoading
-    ? [{ id: searchValue, name: searchValue }]
-    : options;
 
-    console.log(additionalData);
+  const additionalData =
-    
+    options.length < 1 && searchValue.length >= 1 && !isLoading
+      ? [{ id: searchValue, name: searchValue }]
+      : options;
+
+  console.log(additionalData);
 
   return (
     <div className="SelectTag">
@@ -76,11 +76,10 @@ const SelectTagV2: React.FC = () => {
             handleBlur();
           }
         }}
-        value={NewShapeTags} 
+        value={NewShapeTags}
-        
       />
     </div>
   );
 };
 
-export default SelectTagV2;
+export default SelectTagV2;

src/Components/DataTable/SearchField.tsx

@@ -14,16 +14,15 @@ const SearchField: React.FC<Props> = ({ placeholder, searchBy }) => {
   const [searchQuery, setSearchQuery] = useState<string>("");
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const { setFilter,Filter } = useFilterStateState();
+  const { setFilter, Filter } = useFilterStateState();
   const { page } = PaginationParams(location);
 
   const handleInputChange = (value: string) => {
     setSearchQuery(value);
   };
-  
+
   const handleInputChangeWithDebounce = useDebounce((value: string) => {
-    if(Number(page) > 1){
+    if (Number(page) > 1) {
-        
     }
     setFilter({
       [searchBy]: value,

src/Components/DataTable/SearchFieldWithSelect.tsx

@@ -58,7 +58,7 @@ const SearchFieldWithSelect: React.FC<Props> = ({
   const filteredOptions = options.filter((option) =>
     option.label.toLowerCase().includes(searchTerm.toLowerCase()),
   );
-  const Type = localStorage.getItem('type');
+  const Type = localStorage.getItem("type");
   return (
     <div ref={node} className={`search-field ${isOpen ? "open" : ""}`}>
       <div className="search-header" onClick={toggleDropdown}>
@@ -78,7 +78,7 @@ const SearchFieldWithSelect: React.FC<Props> = ({
           <div className="search-options-list">
             {filteredOptions.map((option) => {
               console.log(option);
-              return(
+              return (
                 <div
                   key={option.value}
                   className="search-option"
@@ -87,7 +87,7 @@ const SearchFieldWithSelect: React.FC<Props> = ({
                   <div>{option.label}</div>
                   {/* {withIcon &&  <IoSearch className="search__icon" />} */}
                 </div>
-              )
+              );
             })}
           </div>
         </div>

src/Components/Filter/PaginationColumn.tsx

@@ -8,15 +8,14 @@ import { useFilterStateState } from "../../zustand/Filter";
 const PaginationColumn = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const { Filter ,setFilter } = useFilterStateState();
+  const { Filter, setFilter } = useFilterStateState();
-
 
   const handleChange = (value: string) => {
     navigate(`?per_page=${value}`);
 
     setFilter({
-      per_page:value
+      per_page: value,
-    })
+    });
   };
 
   return (

src/Components/FilterField/components/useFilter.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from "react";
-import '../styles/index.scss';
+import "../styles/index.scss";
 import CustomInput from "../design-system/CustomInput";
 import { Button } from "antd";
 import { useTranslation } from "react-i18next";
@@ -24,37 +24,40 @@ const useFilter = () => {
   };
 
   const FilterBody = ({ children }: IFilterBody) => {
-    const [values, setValues] = useState({ name1: '', name2: '' });
+    const [values, setValues] = useState({ name1: "", name2: "" });
-    const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleChange = useCallback(
-      const { name, value } = e.target;
+      (e: React.ChangeEvent<HTMLInputElement>) => {
-      setValues((prev) => ({ ...prev, [name]: value }));
+        const { name, value } = e.target;
-    }, []); 
+        setValues((prev) => ({ ...prev, [name]: value }));
+      },
+      [],
+    );
 
-    const handleSubmit = (event:React.FormEvent<HTMLFormElement>) => {
+    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-      event.preventDefault(); 
+      event.preventDefault();
-      console.log(values,"values");
+      console.log(values, "values");
-      
     };
 
-
+    const [t] = useTranslation();
-    const [t] = useTranslation()
     return (
-      <div className={`filter_body ${isBodyVisible ? 'visible' : 'hidden'}`}>
+      <div className={`filter_body ${isBodyVisible ? "visible" : "hidden"}`}>
-       <form onSubmit={handleSubmit} >
+        <form onSubmit={handleSubmit}>
-       {children}
+          {children}
-        <CustomInput
+          <CustomInput
-        name="name1"
+            name="name1"
-        value={values.name1}
+            value={values.name1}
-        onChange={handleChange}
+            onChange={handleChange}
-      />
+          />
-      <CustomInput
+          <CustomInput
-        name="name2"
+            name="name2"
-        value={values.name2}
+            value={values.name2}
-        onChange={handleChange}
+            onChange={handleChange}
-      />
+          />
-      <Button block htmlType="submit" type="primary" > {t("practical.submit")} </Button>
+          <Button block htmlType="submit" type="primary">
-
+            {" "}
-       </form>
+            {t("practical.submit")}{" "}
+          </Button>
+        </form>
       </div>
     );
   };

src/Components/FilterField/design-system/CustomInput.tsx

@@ -1,5 +1,5 @@
-import { Input } from 'antd';
+import { Input } from "antd";
-import React from 'react';
+import React from "react";
 
 interface CustomInputProps {
   name: string;
@@ -7,16 +7,11 @@ interface CustomInputProps {
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const CustomInput: React.FC<CustomInputProps> = React.memo(({ name, value, onChange }) => {
+const CustomInput: React.FC<CustomInputProps> = React.memo(
-  console.log(`Rendering ${name}`); // For debugging purposes
+  ({ name, value, onChange }) => {
-  return (
+    console.log(`Rendering ${name}`); // For debugging purposes
-    <Input
+    return <Input type="text" name={name} value={value} onChange={onChange} />;
-      type="text"
+  },
-      name={name}
+);
-      value={value}
-      onChange={onChange}
-    />
-  );
-});
 
 export default CustomInput;

src/Components/FilterField/styles/index.scss

@@ -1,33 +1,34 @@
 .filter_body {
-    max-height: 0;
+  max-height: 0;
-    overflow: hidden;
+  overflow: hidden;
-    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, transform 0.3s ease-out;
+  transition:
-    opacity: 0;
+    max-height 0.3s ease-out,
-    transform: translateY(-20px);
+    opacity 0.3s ease-out,
-    display: flex;
+    transform 0.3s ease-out;
-    flex-wrap: wrap;
+  opacity: 0;
-    gap: 20px;
+  transform: translateY(-20px);
-    
+  display: flex;
-  }
+  flex-wrap: wrap;
-  
+  gap: 20px;
-  .filter_body.visible {
+}
-    max-height: 200px;
+
-    opacity: 1;
+.filter_body.visible {
-    transform: translateY(0); 
+  max-height: 200px;
-  }
+  opacity: 1;
-  
+  transform: translateY(0);
-  .filter_body.hidden {
+}
-    max-height: 0;
+
-    opacity: 0;
+.filter_body.hidden {
-    transform: translateY(-20px); 
+  max-height: 0;
-  }
+  opacity: 0;
-  
+  transform: translateY(-20px);
-  .DummyHomePage {
+}
-    display: flex;
+
-    flex-direction: column;
+.DummyHomePage {
-    align-items: center;
+  display: flex;
-    gap: 40px;
+  flex-direction: column;
-    width: 70%;
+  align-items: center;
-    padding: 50px;
+  gap: 40px;
-  }
+  width: 70%;
-  
+  padding: 50px;
+}

src/Components/LatextInput/AddLaTexModal.tsx

@@ -1,83 +1,89 @@
-import { Modal } from 'antd'
+import { Modal } from "antd";
-import TextArea from 'antd/es/input/TextArea'
+import TextArea from "antd/es/input/TextArea";
-import { useFormikContext } from 'formik';
+import { useFormikContext } from "formik";
-import React, { useState } from 'react'
+import React, { useState } from "react";
-import { convertMathMLToLaTeX } from '../../utils/convertMathMLToLaTeX';
+import { convertMathMLToLaTeX } from "../../utils/convertMathMLToLaTeX";
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
-import { toast } from 'react-toastify';
+import { toast } from "react-toastify";
-
-const AddLaTexModal = ({name,setLatex,Latex,setIsModalOpen,isModalOpen,setCurrentValue}:{
-    name:string,
-    setLatex: (value:string)=> void,
-    Latex:string,
-    setIsModalOpen: (value:boolean)=> void ,
-    isModalOpen:boolean,
-    setCurrentValue:(value:string)=> void
 
+const AddLaTexModal = ({
+  name,
+  setLatex,
+  Latex,
+  setIsModalOpen,
+  isModalOpen,
+  setCurrentValue,
+}: {
+  name: string;
+  setLatex: (value: string) => void;
+  Latex: string;
+  setIsModalOpen: (value: boolean) => void;
+  isModalOpen: boolean;
+  setCurrentValue: (value: string) => void;
 }) => {
-    const {values,setFieldValue,getFieldProps} = useFormikContext<any>()
+  const { values, setFieldValue, getFieldProps } = useFormikContext<any>();
 
-  const currentValue = getFieldProps(name).value
+  const currentValue = getFieldProps(name).value;
-    const handleOk = () => {        
+  const handleOk = () => {
-      const oldValue = currentValue ?? ""; 
+    const oldValue = currentValue ?? "";
-      const newLatex = convertMathMLToLaTeX(Latex);
+    const newLatex = convertMathMLToLaTeX(Latex);
-      console.log(oldValue);
+    console.log(oldValue);
-      
+
-    if(newLatex){
+    if (newLatex) {
-      setFieldValue(name, oldValue + " $$ " +newLatex +" $$ ");
+      setFieldValue(name, oldValue + " $$ " + newLatex + " $$ ");
-      setCurrentValue(oldValue + " $$ " +newLatex +" $$ ")
+      setCurrentValue(oldValue + " $$ " + newLatex + " $$ ");
-      setLatex("")
+      setLatex("");
       setIsModalOpen(false);
-    }else{
+    } else {
-      setFieldValue(name, oldValue + " $$ " +Latex +" $$ ");
+      setFieldValue(name, oldValue + " $$ " + Latex + " $$ ");
-      setCurrentValue(oldValue + " $$ " +Latex +" $$ ")
+      setCurrentValue(oldValue + " $$ " + Latex + " $$ ");
-      setLatex("")
+      setLatex("");
       setIsModalOpen(false);
     }
-    };
+  };
-  
-    const handleCancel = () => {
-      setIsModalOpen(false);
-      setLatex("")
-    };
 
-    const handleChangeInputLatex = (
+  const handleCancel = () => {
-        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    setIsModalOpen(false);
-      ) => {
+    setLatex("");
-        const newValue = e.target.value;
+  };
-        setLatex(newValue)
-      };
 
-      const [t] = useTranslation()
+  const handleChangeInputLatex = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const newValue = e.target.value;
+    setLatex(newValue);
+  };
+
+  const [t] = useTranslation();
   return (
-   
+    <Modal
-<Modal  footer={false} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
+      footer={false}
-    <div className='latexModal'>
+      open={isModalOpen}
-        <label className='mb-3'>  {t("header.past_your_MMl_text")} </label>
+      onOk={handleOk}
-    <TextArea
+      onCancel={handleCancel}
-    size="large"
+    >
-    showCount
+      <div className="latexModal">
-    maxLength={5000}
+        <label className="mb-3"> {t("header.past_your_MMl_text")} </label>
-    autoSize={{ minRows: 4, maxRows: 10 }} 
+        <TextArea
-    style={{height:"400px"}}
+          size="large"
-    onChange={handleChangeInputLatex}
+          showCount
-    value={Latex}
+          maxLength={5000}
-  />
+          autoSize={{ minRows: 4, maxRows: 10 }}
-    <div className="buttons">
+          style={{ height: "400px" }}
-              <div className="back_button pointer" onClick={handleCancel}>
+          onChange={handleChangeInputLatex}
-                {t("practical.cancel")}
+          value={Latex}
-              </div>
+        />
-              <div
+        <div className="buttons">
-                className="add_button"
+          <div className="back_button pointer" onClick={handleCancel}>
-                onClick={handleOk}
+            {t("practical.cancel")}
-              >
+          </div>
-                {t(`practical.${ "add"}`)}
+          <div className="add_button" onClick={handleOk}>
-              </div>
+            {t(`practical.${"add"}`)}
-            </div>
+          </div>
-    </div>
+        </div>
-      </Modal>
+      </div>
+    </Modal>
+  );
+};
 
-  )
+export default AddLaTexModal;
-}
-
-export default AddLaTexModal

src/Components/LatextInput/EditLaTexModal.tsx

@@ -1,89 +1,91 @@
-import { Modal } from 'antd'
+import { Modal } from "antd";
-import TextArea from 'antd/es/input/TextArea'
+import TextArea from "antd/es/input/TextArea";
-import { useFormikContext } from 'formik';
+import { useFormikContext } from "formik";
-import React, { useState } from 'react'
+import React, { useState } from "react";
-import { convertMathMLToLaTeX } from '../../utils/convertMathMLToLaTeX';
+import { convertMathMLToLaTeX } from "../../utils/convertMathMLToLaTeX";
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
-import { toast } from 'react-toastify';
+import { toast } from "react-toastify";
-import { parseTextAndLatex } from '../../utils/parseTextAndLatex';
+import { parseTextAndLatex } from "../../utils/parseTextAndLatex";
-
-const EditLaTexModal = ({name,setLatex,Latex,setIsModalOpen,isModalOpen}:{
-    name:string,
-    setLatex: (value:string)=> void,
-    Latex:any,
-    setIsModalOpen: (value:boolean)=> void ,
-    isModalOpen:boolean,
 
+const EditLaTexModal = ({
+  name,
+  setLatex,
+  Latex,
+  setIsModalOpen,
+  isModalOpen,
+}: {
+  name: string;
+  setLatex: (value: string) => void;
+  Latex: any;
+  setIsModalOpen: (value: boolean) => void;
+  isModalOpen: boolean;
 }) => {
-    const {values} = useFormikContext<any>()
+  const { values } = useFormikContext<any>();
-  const [Value, setValue] = useState(Latex?.text ?? Latex)
+  const [Value, setValue] = useState(Latex?.text ?? Latex);
 
-    const handleOk = () => {
+  const handleOk = () => {
-        console.log(1);
+    console.log(1);
-        
+
-      const oldValue = values?.[name]; 
+    const oldValue = values?.[name];
-      const currentKey = Latex?.key ;
+    const currentKey = Latex?.key;
-      const Preview =  parseTextAndLatex(oldValue ?? "") ; 
+    const Preview = parseTextAndLatex(oldValue ?? "");
-      console.log(Latex);
+    console.log(Latex);
-      
+
-      const newLatex = convertMathMLToLaTeX(Latex);
+    const newLatex = convertMathMLToLaTeX(Latex);
-      console.log(newLatex);
+    console.log(newLatex);
-      
+
-    if(newLatex){
+    if (newLatex) {
-      const newArray = Preview?.map((item:any,index:number)=>{
+      const newArray = Preview?.map((item: any, index: number) => {
-        if(item?.key)
+        if (item?.key) return item;
-        return item
+      });
-      })
+    } else {
-      
+      toast.error(t("validation.that_is_not_a_valid_mml"));
-    }else{
-        toast.error(t("validation.that_is_not_a_valid_mml"))
     }
-    };
+  };
-  
-    const handleCancel = () => {
-      setIsModalOpen(false);
-      setLatex("")
-    };
 
-    const handleChangeInputLatex = (
+  const handleCancel = () => {
-        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    setIsModalOpen(false);
-      ) => {
+    setLatex("");
-        const newValue = e.target.value;
+  };
-        console.log(newValue,"newValue");
-        setValue(newValue)
-      };
 
-      const [t] = useTranslation()
+  const handleChangeInputLatex = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const newValue = e.target.value;
+    console.log(newValue, "newValue");
+    setValue(newValue);
+  };
+
+  const [t] = useTranslation();
   return (
-   
+    <Modal
-<Modal  footer={false} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
+      footer={false}
-    <div className='latexModal'>
+      open={isModalOpen}
-        <label className='mb-3'>  {t("header.past_your_MMl_text")} </label>
+      onOk={handleOk}
-    <TextArea
+      onCancel={handleCancel}
-    size="large"
+    >
-    showCount
+      <div className="latexModal">
-    maxLength={1000}
+        <label className="mb-3"> {t("header.past_your_MMl_text")} </label>
-    autoSize={{ minRows: 4, maxRows: 10 }} 
+        <TextArea
-    style={{height:"400px"}}
+          size="large"
-    onChange={handleChangeInputLatex}
+          showCount
-    value={Value
+          maxLength={1000}
-    }
+          autoSize={{ minRows: 4, maxRows: 10 }}
-  />
+          style={{ height: "400px" }}
-    <div className="buttons">
+          onChange={handleChangeInputLatex}
-              <div className="back_button pointer" onClick={handleCancel}>
+          value={Value}
-                {t("practical.cancel")}
+        />
-              </div>
+        <div className="buttons">
-              <div
+          <div className="back_button pointer" onClick={handleCancel}>
-                className="add_button"
+            {t("practical.cancel")}
-                onClick={handleOk}
+          </div>
-              >
+          <div className="add_button" onClick={handleOk}>
-                {t(`practical.${ "edit"}`)}
+            {t(`practical.${"edit"}`)}
-              </div>
+          </div>
-            </div>
+        </div>
-    </div>
+      </div>
-      </Modal>
+    </Modal>
+  );
+};
 
-  )
+export default EditLaTexModal;
-}
-
-export default EditLaTexModal

src/Components/LatextInput/LaTeXInputMemo.tsx

@@ -1,160 +1,185 @@
-import TextArea from 'antd/es/input/TextArea';
+import TextArea from "antd/es/input/TextArea";
-import React, { Suspense, useEffect, useState } from 'react';
+import React, { Suspense, useEffect, useState } from "react";
-import { parseTextAndLatex } from '../../utils/parseTextAndLatex';
+import { parseTextAndLatex } from "../../utils/parseTextAndLatex";
-import LatexPreview from '../CustomFields/MathComponent';
+import LatexPreview from "../CustomFields/MathComponent";
-import { Checkbox } from 'antd';
+import { Checkbox } from "antd";
-import { CheckboxProps } from 'antd/lib';
+import { CheckboxProps } from "antd/lib";
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
-import { FaPlus } from 'react-icons/fa';
+import { FaPlus } from "react-icons/fa";
-import { useObjectToEdit } from '../../zustand/ObjectToEditState';
+import { useObjectToEdit } from "../../zustand/ObjectToEditState";
-import SpinContainer from '../Layout/SpinContainer';
+import SpinContainer from "../Layout/SpinContainer";
-import { areFieldPropsEqual } from './areFieldPropsEqual';
+import { areFieldPropsEqual } from "./areFieldPropsEqual";
 
 const AddLazyModal = React.lazy(() => import("./AddLaTexModal"));
 const EditLazyModal = React.lazy(() => import("./EditLaTexModal"));
 
+const LaTeXInputMemo: React.FC<any> = React.memo(
+  ({ field, form, label, ...props }) => {
+    const { name, value } = field;
 
-const LaTeXInputMemo: React.FC<any> =  React.memo(({ field ,form, label, ...props }) => {
+    const { setFieldValue, touched, errors, getFieldProps, values } = form;
-  const { name  ,value} = field;
-  
-  const { setFieldValue ,touched ,errors ,getFieldProps,values} = form;
 
-  const { ShowLatexOption, Success } = useObjectToEdit();
+    const { ShowLatexOption, Success } = useObjectToEdit();
-  const [showPreview, setShowPreview] = useState(false);      
+    const [showPreview, setShowPreview] = useState(false);
-  const Preview = parseTextAndLatex(value ?? "");
+    const Preview = parseTextAndLatex(value ?? "");
 
+    const onPreviewChange: CheckboxProps["onChange"] = (e) => {
+      setShowPreview(e.target.checked);
+    };
 
-  const onPreviewChange: CheckboxProps['onChange'] = (e) => {
+    const [t] = useTranslation();
-    setShowPreview(e.target.checked);
-  };
 
-  const [t] = useTranslation();
+    const [isModalOpen, setIsModalOpen] = useState(false);
-  
+    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-  const [isModalOpen, setIsModalOpen] = useState(false);
+    const [Latex, setLatex] = useState<string>("");
-  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-  const [Latex, setLatex] = useState<string>("");
 
-  const showModal = () => {
+    const showModal = () => {
-    setIsModalOpen(true);
+      setIsModalOpen(true);
-  };
+    };
 
-  const handleEditModal = (item: any) => {
+    const handleEditModal = (item: any) => {
-    // console.log(item);
+      // console.log(item);
-    // setLatex(item);
+      // setLatex(item);
-    // setIsEditModalOpen(true);
+      // setIsEditModalOpen(true);
-  };
+    };
 
-  const [curCentValue, setCurrentValue] = useState(value)
+    const [curCentValue, setCurrentValue] = useState(value);
-  const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const handleChangeInput = (
-    setCurrentValue(e.target.value)
+      e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  };
+    ) => {
-  const onBlur = ()=>{
+      setCurrentValue(e.target.value);
-    if (curCentValue !== value) {
+    };
-      setFieldValue(name, curCentValue);
+    const onBlur = () => {
+      if (curCentValue !== value) {
+        setFieldValue(name, curCentValue);
+      }
+    };
+
+    useEffect(() => {
+      if (Success) {
+        setCurrentValue(null);
+      }
+    }, [Success]);
+
+    useEffect(() => {
+      if (value) {
+        setCurrentValue(value);
+      }
+    }, [value]);
+
+    const isError = !!touched?.[name] && !!errors?.[name];
+    const errorMessage = isError ? ((errors?.[name] as string) ?? "") : "";
+
+    console.log(values);
+
+    let metaName = name.substring(0, name.lastIndexOf("."));
+    if (metaName.includes(".") || metaName.includes("[")) {
+      metaName += ".meta";
+    } else {
+      metaName += "meta";
     }
-  }
+    const meta = getFieldProps(metaName).value;
-  
+    console.log(metaName, meta);
-  useEffect(() => {
+    const direction = meta?.direction === "ltr" ? "ltr" : "rtl";
-    if(Success){
-      setCurrentValue(null)
-    }
-  }, [Success])
-  
-  useEffect(() => {
-    if(value){
-      setCurrentValue(value)
-    }
-  }, [value])
 
-  
+    const [Dir, setDir] = useState<"ltr" | "rtl">(direction);
-  const isError = !!touched?.[name] && !!errors?.[name];
-  const errorMessage = isError ? errors?.[name] as string ?? "" : "" ;
 
-  
+    const handleChangeDirection = () => {
+      if (Dir === "ltr") {
+        setDir("rtl");
+        setFieldValue(metaName, { ...(meta ?? {}), direction: "rtl" });
+      } else {
+        setDir("ltr");
+        setFieldValue(metaName, { ...(meta ?? {}), direction: "ltr" });
+      }
+    };
 
-  console.log(values);
+    return (
-  
+      <div className="LaTeXInput">
-  let metaName = name.substring(0, name.lastIndexOf('.'));
+        <label htmlFor={name} className="text">
-  if (metaName.includes('.') || metaName.includes('[')) {  metaName += ".meta";} else {metaName += "meta"}
+          <div>{t(label || name)}</div>{" "}
-  const meta = getFieldProps(metaName).value ; 
+          <div className="error_message">{t(errorMessage)}</div>
-  console.log(metaName,meta);
+        </label>
-  const direction = meta?.direction === "ltr" ? "ltr" : "rtl" 
-    
-  const [Dir, setDir] = useState<"ltr" | "rtl">(direction)
-  
-  const handleChangeDirection = ()=>{
-    if(Dir === "ltr"){
-      setDir("rtl")
-      setFieldValue(metaName,{...(meta ?? {}), direction:"rtl"})
-    }else{
-      setDir("ltr")
-      setFieldValue(metaName,{...(meta ?? {}), direction:"ltr"})
 
-    }
+        <div className="LaTeXInputArea">
-  }
+          <TextArea
+            size="large"
+            showCount
+            maxLength={5000}
+            autoSize={{ minRows: 6, maxRows: 10 }}
+            style={{ height: "400px" }}
+            onChange={handleChangeInput}
+            value={curCentValue}
+            onBlur={onBlur}
+            dir={Dir}
+            {...props}
+          />
+          <div className="LaTeXInputOptions">
+            <Checkbox
+              onChange={handleChangeDirection}
+              checked={direction === "ltr"}
+            >
+              {t("header.change_direction")}
+            </Checkbox>
 
-  return (
+            {ShowLatexOption && (
-    <div className='LaTeXInput'>
+              <>
-      <label htmlFor={name} className="text">
+                <Checkbox onChange={onPreviewChange}>
-        <div>{t(label || name)}</div> <div className='error_message'>{t(errorMessage)}</div>
+                  {t("header.show_preview")}
-      </label>
+                </Checkbox>
-
+                <button type="button" className="addMML" onClick={showModal}>
-      <div className='LaTeXInputArea'>
+                  <FaPlus /> {t("MML")}
-        <TextArea
+                </button>
-          size="large"
+              </>
-          showCount
+            )}
-          maxLength={5000}
-          autoSize={{ minRows: 6, maxRows: 10 }} 
-          style={{ height: "400px" }}
-          onChange={handleChangeInput}
-          value={curCentValue}
-          onBlur={onBlur}
-          dir={Dir}
-          {...props}
-        />
-                    <div className='LaTeXInputOptions'>
-                    <Checkbox onChange={handleChangeDirection} checked={direction === "ltr"} >{t("header.change_direction")}</Checkbox>
-          
-    
-        {ShowLatexOption && (
-          <>
-                      <Checkbox onChange={onPreviewChange}>{t("header.show_preview")}</Checkbox>
-            <button type='button' className='addMML' onClick={showModal}> 
-              <FaPlus/> {t("MML")} 
-            </button>
-
-          </>
-          )}
-        
-        </div>
-        
-        {showPreview && (
-          <div className='showPreviewInput'>
-            {Preview?.map((item: any, index: number) => {
-              if (item?.isLatex) {
-                console.log(item?.text);
-                
-                return (
-                  <span dir='ltr' key={index} onClick={() => handleEditModal(item)} className='LatexPreview'> 
-                    <LatexPreview latex={item?.text} /> 
-                  </span> 
-                );
-              }
-              return <div key={index}>{item?.text}</div>;
-            })} 
           </div>
-        )}
+
+          {showPreview && (
+            <div className="showPreviewInput">
+              {Preview?.map((item: any, index: number) => {
+                if (item?.isLatex) {
+                  console.log(item?.text);
+
+                  return (
+                    <span
+                      dir="ltr"
+                      key={index}
+                      onClick={() => handleEditModal(item)}
+                      className="LatexPreview"
+                    >
+                      <LatexPreview latex={item?.text} />
+                    </span>
+                  );
+                }
+                return <div key={index}>{item?.text}</div>;
+              })}
+            </div>
+          )}
+        </div>
+
+        <Suspense fallback={<SpinContainer />}>
+          <AddLazyModal
+            name={name}
+            Latex={Latex}
+            isModalOpen={isModalOpen}
+            setIsModalOpen={setIsModalOpen}
+            setLatex={setLatex}
+            setCurrentValue={setCurrentValue}
+          />
+          <EditLazyModal
+            name={name}
+            Latex={Latex}
+            isModalOpen={isEditModalOpen}
+            setIsModalOpen={setIsEditModalOpen}
+            setLatex={setLatex}
+          />
+        </Suspense>
       </div>
+    );
+  },
+  (prevProps, nextProps) => {
+    return areFieldPropsEqual(prevProps, nextProps);
+  },
+);
 
-     <Suspense fallback={<SpinContainer />}>
+export default LaTeXInputMemo;
-     <AddLazyModal name={name} Latex={Latex} isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} setLatex={setLatex} setCurrentValue={setCurrentValue} />
-      <EditLazyModal name={name} Latex={Latex} isModalOpen={isEditModalOpen} setIsModalOpen={setIsEditModalOpen} setLatex={setLatex} />
-    
-      </Suspense>
-    </div>
-  );
-}, (prevProps, nextProps) => {
-  return areFieldPropsEqual(prevProps, nextProps)
-  });
-
-export default LaTeXInputMemo;

src/Components/LatextInput/areFieldPropsEqual.ts

@@ -1,10 +1,7 @@
 // utilityFunctions.ts
-import { FieldProps } from 'formik';
+import { FieldProps } from "formik";
 
-export const areFieldPropsEqual = (
+export const areFieldPropsEqual = (prevProps: any, nextProps: any): boolean => {
-  prevProps: any,
-  nextProps: any
-): boolean => {
   const prevError = prevProps.form.errors[prevProps.field.name];
   const nextError = nextProps.form.errors[nextProps.field.name];
 
@@ -14,7 +11,5 @@ export const areFieldPropsEqual = (
   const prevValue = prevProps.field.value;
   const nextValue = nextProps.field.value;
 
-  return (
+  return false;
-   false
-  );
 };

src/Components/Layout/Navbar/NavBarRightSide.tsx

@@ -38,7 +38,7 @@ const NavBarRightSide = () => {
           icon={<CiCirclePlus size={25} />}
         />
         <TooltipComp
-          onClick={()=>(Navigate('/notifications'))}
+          onClick={() => Navigate("/notifications")}
           className="NotificationsIcon"
           note="notification"
           color="#E0E0E0"
@@ -55,9 +55,11 @@ const NavBarRightSide = () => {
           <h6>{userData?.username}</h6>
           <p>{userData?.type}</p>
         </span> */}
-        <Image 
+        <Image
-        // onClick={()=>(Navigate('/profile'))}
+          // onClick={()=>(Navigate('/profile'))}
-        src="/Image/faker_user.png" alt="Profile" />
+          src="/Image/faker_user.png"
+          alt="Profile"
+        />
       </div>
     </article>
   );

src/Components/Layout/Navbar/Tooltip.tsx

@@ -16,7 +16,7 @@ const TooltipComp = ({
   color: string;
   icon: any;
   className?: string;
-  onClick?:() => void
+  onClick?: () => void;
 }) => {
   const [t] = useTranslation();
   const { handel_open_model } = useModalHandler();

src/Components/Layout/SideBar/MenuItem.tsx

@@ -14,11 +14,11 @@ export const MenuItem = ({ item, location, index, isOpen }: any) => {
   const isDropdownOpen = openDropdown === index;
   const [t] = useTranslation();
   const navigate = useNavigate();
-  const { setFilter} = useFilterStateState();
+  const { setFilter } = useFilterStateState();
-  const handleNavigate = ()=>{
+  const handleNavigate = () => {
-    setFilter({})
+    setFilter({});
-    navigate(item.path || "/")
+    navigate(item.path || "/");
-  }
+  };
 
   return (
     <>
@@ -26,13 +26,9 @@ export const MenuItem = ({ item, location, index, isOpen }: any) => {
         className={`link ${isActive ? "active" : ""} ${item?.children && "DropDownLink"}`}
         onClick={() => handleNavigate()}
       >
-          <Tooltip
+        <Tooltip placement="topLeft" title={t(item?.text)} color={"#E0E0E0"}>
-            placement="topLeft"
+          <i>{item.icon}</i>
-            title={t(item?.text)}
+        </Tooltip>
-            color={'#E0E0E0'}
-          >
-            <i>{item.icon}</i>
-          </Tooltip>
         {/* Conditionally render the text based on sidebar width */}
         <span style={{ display: isOpen === false ? "none" : "inline" }}>
           {t(item.text)}
@@ -51,7 +47,7 @@ export const MenuItem = ({ item, location, index, isOpen }: any) => {
                 className="DropDownIcon"
                 onClick={() => handleDropdown(index)}
               >
-                <MdExpandMore className="sidebar_menu_icon"/>
+                <MdExpandMore className="sidebar_menu_icon" />
               </div>
             )}
           </>

src/Components/Routes/RenderRoutesRecursively.tsx

@@ -10,7 +10,7 @@ export const renderRoutesRecursively = (routes: TMenuItem[]) =>
     if (!useAbility) {
       return false;
     }
-    
+
     return (
       <React.Fragment key={route.path}>
         <Route path={route.path} element={RenderRouteElement(route)} />

src/Components/Switch/Switch.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
+import React from "react";
-import { Switch } from 'antd';
+import { Switch } from "antd";
 export interface SwitchProps {
-    onChange?: (checked: any, event: any) => any;
+  onChange?: (checked: any, event: any) => any;
-    checked?: boolean;
+  checked?: boolean;
-  }
+}
 const onSwitchChange = (checked: boolean) => {
   console.log(`switch to ${checked}`);
 };
 
-const SwitchButton = ({onChange,checked}:SwitchProps) => {
+const SwitchButton = ({ onChange, checked }: SwitchProps) => {
-    return(
+  return (
-        <Switch 
+    <Switch
-          className='switch_button'
+      className="switch_button"
-          defaultChecked   
+      defaultChecked
-          onChange={(checked: any, event: any) =>
+      onChange={(checked: any, event: any) =>
-            onChange ? onChange(checked, event) : onSwitchChange(checked)
+        onChange ? onChange(checked, event) : onSwitchChange(checked)
-          }
+      }
-          // checked={checked}
+      // checked={checked}
-           />
+    />
-    )
+  );
-}
+};
 
-export default SwitchButton;
+export default SwitchButton;

src/Components/Table/ActionButtons.tsx

@@ -7,7 +7,6 @@ import { BsEyeFill } from "react-icons/bs";
 import { GoTrash } from "react-icons/go";
 import { BsQrCode } from "react-icons/bs";
 
-
 interface ActionButtonsProps {
   canEdit?: boolean;
   canDelete?: boolean;
@@ -19,7 +18,7 @@ interface ActionButtonsProps {
   onShow?: () => void;
   index?: number;
   className?: string;
-  canShowQr?:boolean
+  canShowQr?: boolean;
   onShoqQr?: () => void;
 }
 
@@ -44,10 +43,10 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
     : "buttonAction";
   return (
     <Space size="middle" className={`${CustomClassName} ${className} `}>
-            {canShowQr && (
+      {canShowQr && (
         <BsQrCode onClick={onShoqQr} size={22} style={{ color: "#A098AE" }} />
-      )} 
+      )}
-      
+
       {canEdit && (
         <Tooltip placement="top" title={t(editTooltipTitle)} color="#E0E0E0">
           <span onClick={onEdit}>
@@ -64,7 +63,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
       {canShow && (
         <BsEyeFill onClick={onShow} size={22} style={{ color: "green" }} />
       )}
-   </Space>
+    </Space>
   );
 };
 

src/Components/Table/QRCodeGenerator.tsx

@@ -1,13 +1,12 @@
-import React from 'react';
+import React from "react";
-import QRCode from 'react-qr-code';
+import QRCode from "react-qr-code";
 
-
+const QRCodeGenerator = ({ url, serial }: any) => {
-const QRCodeGenerator = ({url,serial}:any) => {
+  const qrValue = `${url}/${serial}`;
-const qrValue = `${url}/${serial}`
+  console.log(qrValue);
-console.log(qrValue)
   return (
-    <div style={{display:'flex',justifyContent:'center'}} >
+    <div style={{ display: "flex", justifyContent: "center" }}>
-      <QRCode value={qrValue} size={230} type='link' />
+      <QRCode value={qrValue} size={230} type="link" />
     </div>
   );
 };

src/Components/Ui/Buttons/EditSettingButton.tsx

@@ -1,18 +1,24 @@
-import { Button } from 'antd'
+import { Button } from "antd";
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from "react-i18next";
 import { CiEdit } from "react-icons/ci";
 
-const EditSettingButton = ({buttonName,onClick}:{buttonName?:string,onClick?:() => void}) => {
+const EditSettingButton = ({
-    const {t} = useTranslation();
+  buttonName,
+  onClick,
+}: {
+  buttonName?: string;
+  onClick?: () => void;
+}) => {
+  const { t } = useTranslation();
 
   return (
     <div>
-        <Button className=' setting_edit_button' onClick={onClick}>
+      <Button className=" setting_edit_button" onClick={onClick}>
-          <CiEdit/>
+        <CiEdit />
-          {t(`header.edit`) ?? (`header.${buttonName}`)}
+        {t(`header.edit`) ?? `header.${buttonName}`}
-        </Button>
+      </Button>
     </div>
-  )
+  );
-}
+};
 
-export default EditSettingButton
+export default EditSettingButton;

src/Components/Ui/Buttons/SecuritySettingButton.tsx

@@ -1,13 +1,23 @@
-import { Button } from 'antd'
+import { Button } from "antd";
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from "react-i18next";
 
-const SecuritySettingButton = ({name,danger = false}:{name:string,danger?:boolean}) => {
+const SecuritySettingButton = ({
-    const {t} = useTranslation();
+  name,
+  danger = false,
+}: {
+  name: string;
+  danger?: boolean;
+}) => {
+  const { t } = useTranslation();
   return (
     <div>
-        <Button className={`security_setting_button ${danger ? "security_setting_button_danger" :""}`}>{t(name)}</Button>
+      <Button
+        className={`security_setting_button ${danger ? "security_setting_button_danger" : ""}`}
+      >
+        {t(name)}
+      </Button>
     </div>
-  )
+  );
-}
+};
 
-export default SecuritySettingButton
+export default SecuritySettingButton;

src/Components/Ui/ReportTableIcon.tsx

@@ -1,22 +1,22 @@
-import { Tooltip } from 'antd'
+import { Tooltip } from "antd";
-import React from 'react'
+import React from "react";
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
-import { FaPaperclip } from 'react-icons/fa'
+import { FaPaperclip } from "react-icons/fa";
 
 interface ReportButtonsProps {
-    editTooltipTitle?: any;
+  editTooltipTitle?: any;
-    onClick?: () => void;
+  onClick?: () => void;
-  }
-
-const ReportTableIcon = ({editTooltipTitle,onClick}:ReportButtonsProps) => {
-    const {t} = useTranslation();
-  return (
-    <Tooltip placement="top" title={t(editTooltipTitle)} color="#E0E0E0">
-        <span onClick={onClick}>
-        <FaPaperclip size={22} style={{ color: "#A098AE" }} />
-        </span>
-    </Tooltip>
-  )
 }
 
-export default ReportTableIcon
+const ReportTableIcon = ({ editTooltipTitle, onClick }: ReportButtonsProps) => {
+  const { t } = useTranslation();
+  return (
+    <Tooltip placement="top" title={t(editTooltipTitle)} color="#E0E0E0">
+      <span onClick={onClick}>
+        <FaPaperclip size={22} style={{ color: "#A098AE" }} />
+      </span>
+    </Tooltip>
+  );
+};
+
+export default ReportTableIcon;

src/Components/Ui/TrashButton.tsx

@@ -1,15 +1,23 @@
-import { Button } from 'antd';
+import { Button } from "antd";
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 import { HiOutlineTrash } from "react-icons/hi2";
 
-const TrashButton = ({name,onClick,icon = true}:{name:string,onClick?:() =>void,icon?:boolean}) => {
+const TrashButton = ({
-    const {t} = useTranslation();
+  name,
+  onClick,
+  icon = true,
+}: {
+  name: string;
+  onClick?: () => void;
+  icon?: boolean;
+}) => {
+  const { t } = useTranslation();
   return (
-    <Button className='trash_button' onClick={onClick}>
+    <Button className="trash_button" onClick={onClick}>
-        { icon ? <HiOutlineTrash/> : "" }
+      {icon ? <HiOutlineTrash /> : ""}
-        {t(`header.${name}`)}
+      {t(`header.${name}`)}
     </Button>
-  )
+  );
-}
+};
 
-export default TrashButton
+export default TrashButton;

src/Components/Utils/Filter/useFilter.tsx

@@ -34,7 +34,6 @@ interface FormikFormProps extends Omit<FormikConfig<any>, OmitFormikProps> {
   setIsOpen: any;
 }
 
-
 const useFilter = () => {
   const { setIsOpen, isOpen } = useModalState((state) => state);
   const { filterState, setFilterState, clearFilterState } = useFilterState();

src/Components/ValidationField/View/Date.tsx

@@ -27,7 +27,7 @@ const Date = ({
   };
   console.log(props);
   console.log(FormikValue);
-  
+
   const Formatter = [DateEnum?.FORMATE];
   return (
     <div className="ValidationField w-100 ">

src/Components/ValidationField/View/File.tsx

@@ -53,13 +53,12 @@ const File = ({
     const maxSize = 2 * 1024 * 1024; // 2 MB in bytes
 
     if (file.size > maxSize) {
-      alert(t('validation.File_size_exceeds_2_MB_limit.'));
+      alert(t("validation.File_size_exceeds_2_MB_limit."));
       return Upload.LIST_IGNORE; // Prevent the file from being uploaded
     }
     return true; // Allow the file to be uploaded
   };
 
-
   return (
     <div className={`ValidationField upload_image_button ${className ?? ""} `}>
       <label htmlFor={name} className="text">
@@ -67,7 +66,7 @@ const File = ({
       </label>
 
       <Upload
-            beforeUpload={beforeUpload} // Set the beforeUpload function
+        beforeUpload={beforeUpload} // Set the beforeUpload function
         disabled={isDisabled}
         listType="picture"
         maxCount={1}
@@ -76,7 +75,6 @@ const File = ({
         customRequest={customRequest}
         className={` w-100`}
         id={name}
-        
       >
         <Button
           className={isError ? "isError w-100 " : " w-100"}

src/Components/ValidationField/View/SearchField.tsx

@@ -48,14 +48,13 @@ const SearchField = ({
     }
   }, [page]);
 
-  const SelectableChange = (value: any,option:any) => {
+  const SelectableChange = (value: any, option: any) => {
-    if(isMulti){
+    if (isMulti) {
       formik?.setFieldValue(name, option ?? []);
-    }else{
+    } else {
-      
       formik?.setFieldValue(name, option ?? {});
     }
-   
+
     const isCleared = value?.length === 0 || !value;
 
     if (isCleared) {
@@ -96,8 +95,9 @@ const SearchField = ({
   const handleScroll = (event: any) => {
     const target = event.target;
     const isAtBottom =
-      target.scrollHeight - 10 <= Math.floor(target.scrollTop + target.clientHeight);
+      target.scrollHeight - 10 <=
-      
+      Math.floor(target.scrollTop + target.clientHeight);
+
     if (isAtBottom && canChangePage && PageName && page) {
       console.log("Scrolled to the last option!");
       let newPage = page + 1;
@@ -109,11 +109,13 @@ const SearchField = ({
 
   console.log(AllPagesOption);
   console.log(option, "option");
-  const value = isMulti ? formik.values[name]?.map((item:any)=>{
+  const value = isMulti
-    return item?.name ?? item
+    ? formik.values[name]?.map((item: any) => {
-  }) :  formik.values[name]?.["name"] ?? ""
+        return item?.name ?? item;
+      })
+    : (formik.values[name]?.["name"] ?? "");
   console.log(value);
-  
+
   return (
     <div className="ValidationField w-100">
       <ValidationFieldLabel

src/Components/ValidationField/View/TextField.tsx

@@ -39,15 +39,14 @@ const TextField = ({
 
       <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
         <Field
-        as={TextArea}
+          as={TextArea}
           placeholder={t(`input.${placeholder ? placeholder : name}`)}
           name={name}
           disabled={isDisabled}
           size="large"
           showCount
           maxLength={1000}
-          autoSize={{ minRows: 4, maxRows: 10 }} 
+          autoSize={{ minRows: 4, maxRows: 10 }}
-          
           onChange={onChange || TextFilehandleChange}
           id={name}
           {...props}

src/Components/ValidationField/View/TextFieldMML.tsx

@@ -1,4 +1,4 @@
-import {  Input } from "antd";
+import { Input } from "antd";
 import React from "react";
 import useFormField from "../../../Hooks/useFormField";
 import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
@@ -15,7 +15,7 @@ const TextFieldMML = ({
   no_label,
   label_icon,
   className,
-  mathContent,  // Add mathContent prop
+  mathContent, // Add mathContent prop
   ...props
 }: any) => {
   const { formik, isError, errorMsg, t } = useFormField(name, props);
@@ -27,34 +27,31 @@ const TextFieldMML = ({
   };
 
   return (
-      <div className={`ValidationField w-100 ${className ?? ""} `}>
+    <div className={`ValidationField w-100 ${className ?? ""} `}>
-        <ValidationFieldLabel
+      <ValidationFieldLabel
+        name={name}
+        label={label}
+        label_icon={label_icon}
+        no_label={no_label}
+        placeholder={placeholder}
+        t={t}
+      />
+
+      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
+        <TextArea
+          placeholder={t(`input.${placeholder ? placeholder : name}`)}
           name={name}
-          label={label}
+          disabled={isDisabled}
-          label_icon={label_icon}
+          size="large"
-          no_label={no_label}
+          showCount
-          placeholder={placeholder}
+          maxLength={1000}
-          t={t}
+          autoSize={{ minRows: 4, maxRows: 10 }}
+          onChange={onChange || TextFilehandleChange}
+          id={name}
+          {...props}
         />
-
+      </ValidationFieldContainer>
-        <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
+    </div>
-          <TextArea
-            placeholder={t(`input.${placeholder ? placeholder : name}`)}
-            name={name}
-            disabled={isDisabled}
-            size="large"
-            showCount
-            maxLength={1000}
-            autoSize={{ minRows: 4, maxRows: 10 }}
-            onChange={onChange || TextFilehandleChange}
-            id={name}
-            {...props}
-            
-          />
-          
-
-        </ValidationFieldContainer>
-      </div>
   );
 };
 

src/Components/ValidationField/View/index.tsx

@@ -23,5 +23,5 @@ export {
   SearchField,
   TextField,
   DropFile,
-  TextAreaMML
+  TextAreaMML,
 };

src/Components/ValidationField/utils/ValidationField.scss

@@ -68,14 +68,12 @@
   height: 120px;
 }
 
-
-
 //// malty select
-/// 
+///
- .ant-select-multiple{
+.ant-select-multiple {
-   height: auto !important;
+  height: auto !important;
-   min-height: 40px;
+  min-height: 40px;
-   .ant-select-selector{
+  .ant-select-selector {
     min-height: 40px;
-   }
+  }
- }
+}

src/Components/ValidationField/utils/translatedOptions.ts

@@ -1,5 +1,4 @@
 export const translateOptions = (options: any, t: any) => {
-
   return options?.map((opt: any) => ({
     ...opt,
     label: t(`${opt?.label}`),

src/Components/ValidationField/utils/types.ts

@@ -40,9 +40,14 @@ export type SearchFieldProps = BaseFieldProps &
 
 type DateFieldProps = BaseFieldProps & {
   type: "DataRange" | "Date" | "Time";
-  Format?: "YYYY/MM/DD" | "MM/DD" | "YYYY/MM" | "YYYY-MM-DD HH:mm:ss.SSS" | "YYYY-MM-DD HH:mm:ss";
+  Format?:
+    | "YYYY/MM/DD"
+    | "MM/DD"
+    | "YYYY/MM"
+    | "YYYY-MM-DD HH:mm:ss.SSS"
+    | "YYYY-MM-DD HH:mm:ss";
   picker?: "data" | "week" | "month" | "quarter" | "year";
-  showTime?:boolean
+  showTime?: boolean;
 };
 
 type FileFieldProps = BaseFieldProps & {

src/Components/exercise/Header.tsx

@@ -12,36 +12,42 @@ import { LocalStorageEnum } from "../../enums/LocalStorageEnum";
 const Header = () => {
   const [t] = useTranslation();
   const { values, setValues } = useFormikContext<any>();
-  const { isBseQuestion, setIsBseQuestion,ShowHint,setShowHint,ShowLatexOption,setShowLatexOption } = useObjectToEdit();
+  const {
-    // const [Setting, setSetting] = useState(false)
+    isBseQuestion,
-  const isEdited = ()=>{
+    setIsBseQuestion,
+    ShowHint,
+    setShowHint,
+    ShowLatexOption,
+    setShowLatexOption,
+  } = useObjectToEdit();
+  // const [Setting, setSetting] = useState(false)
+  const isEdited = () => {
+    if (isBseQuestion || values?.isBase === 1) {
+      const content = !values?.content;
+      const content_image = !values?.content_image;
 
-    if(isBseQuestion || values?.isBase === 1){
+      const Questions =
+        values?.Questions?.length <= 1 &&
+        values?.Questions?.[0]?.answers?.length === 0;
+      const defaultQuestionHint =
+        Object.keys(values?.Questions?.[0] ?? {})?.length <= 1;
 
-      const content = !values?.content ;
+      if (content && content_image && Questions && defaultQuestionHint) {
-      const content_image = !values?.content_image ;
+        return false;
-
-      const Questions = values?.Questions?.length <= 1 && values?.Questions?.[0]?.answers?.length === 0 ;
-      const defaultQuestionHint = Object.keys(values?.Questions?.[0] ?? {})?.length <= 1
-      
-      
-
-      if(content && content_image && Questions && defaultQuestionHint) {
-        return false
       }
-    }else{      
+    } else {
-      const content = !values?.content ;
+      const content = !values?.content;
-      const content_image = !values?.content_image ;
+      const content_image = !values?.content_image;
-      const hint = !values?.hint ;
+      const hint = !values?.hint;
-      const answers = !(values?.answers?.length > 0)  ;
+      const answers = !(values?.answers?.length > 0);
-      const tags = !(values?.tags?.length > 0)  ;
+      const tags = !(values?.tags?.length > 0);
-      if(content && content_image && hint && answers && tags) {
+      if (content && content_image && hint && answers && tags) {
-        return false
+        return false;
       }
     }
-    return true
+    return true;
-  }
+  };
-    
+
   const handleChange = () => {
     if (isBseQuestion) {
       setIsBseQuestion(false);
@@ -52,11 +58,10 @@ const Header = () => {
     }
   };
 
-  const confirm: PopconfirmProps['onConfirm'] = (e) => {
+  const confirm: PopconfirmProps["onConfirm"] = (e) => {
     setTimeout(() => {
-      handleChange() ;
+      handleChange();
     }, 500);
-    
   };
 
   const content = (
@@ -73,33 +78,34 @@ const Header = () => {
     </div>
   );
 
-
+  const onChangeHint: CheckboxProps["onChange"] = (e) => {
-  const onChangeHint: CheckboxProps['onChange'] = (e) => {
     setShowHint(e.target.checked);
-    localStorage?.setItem(LocalStorageEnum.HINT_INPUT,e.target.checked ? "true" : "false" )
+    localStorage?.setItem(
+      LocalStorageEnum.HINT_INPUT,
+      e.target.checked ? "true" : "false",
+    );
   };
 
-  const onChangeLatexOption: CheckboxProps['onChange'] = (e) => {
+  const onChangeLatexOption: CheckboxProps["onChange"] = (e) => {
     setShowLatexOption(e.target.checked);
-    localStorage?.setItem(LocalStorageEnum.LATEX_OPTION_INPUT,e.target.checked ? "true" : "false" )
+    localStorage?.setItem(
+      LocalStorageEnum.LATEX_OPTION_INPUT,
+      e.target.checked ? "true" : "false",
+    );
   };
 
-  
   const contentSetting = (
     <div>
-    
       <Checkbox checked={ShowHint} onChange={onChangeHint}>
-      { t("header.show_hint")}
+        {t("header.show_hint")}
       </Checkbox>
 
       <Checkbox checked={ShowLatexOption} onChange={onChangeLatexOption}>
-      { t("header.show_MMl")}
+        {t("header.show_MMl")}
       </Checkbox>
-
     </div>
   );
 
-  
   return (
     <header className="exercise_add_header mb-4">
       <article>
@@ -112,48 +118,35 @@ const Header = () => {
         </div>
       </article>
       <div>
+        <div className="question_header_setting">
+          <Popover trigger="click" content={contentSetting}>
+            <SettingFilled />
+          </Popover>
+        </div>
 
-      <div className="question_header_setting">
+        {isEdited() ? (
-      <Popover  trigger="click" content={contentSetting}>
+          <Popconfirm
-          <SettingFilled/>
+            title={t("header.this_will_un_do_all_your_changes")}
-          
+            okText={t("practical.yes")}
-  </Popover>
+            cancelText={t("practical.no")}
-      </div>
+            onConfirm={() => {
-
+              confirm();
-        {
+            }}
-          isEdited() ? 
+            defaultOpen={false}
-          <Popconfirm 
+          >
-    title={t("header.this_will_un_do_all_your_changes")}
+            <GoArrowSwitch className="m-2" />
-    okText={t("practical.yes")}
+            {isBseQuestion || values?.isBase === 1
-    cancelText={t("practical.no")}
+              ? t("header.malty_exercise")
-    onConfirm={()=>{confirm()}}
+              : t("header.exercise")}
-    defaultOpen={false}
+          </Popconfirm>
-
+        ) : (
-  >
-  
-        <GoArrowSwitch className="m-2" />
-        {isBseQuestion || values?.isBase === 1
-          ? t("header.malty_exercise")
-          : t("header.exercise")}
-
-  </Popconfirm>
-        
-
-          : 
-
           <>
-          
+            <GoArrowSwitch onClick={() => confirm()} className="m-2" />
-          
+            {isBseQuestion || values?.isBase === 1
-          <GoArrowSwitch onClick={()=>confirm()} className="m-2" />
+              ? t("header.malty_exercise")
-          {isBseQuestion || values?.isBase === 1
+              : t("header.exercise")}
-            ? t("header.malty_exercise")
-            : t("header.exercise")}
           </>
-
+        )}
-  
-
-        }
-      
       </div>
     </header>
   );

src/Hooks/useFormField.tsx

@@ -7,7 +7,7 @@ import { useEffect } from "react";
 
 const useFormField = (name: string, props?: any) => {
   const [field, meta] = useField({ name, ...props });
-  
+
   const { t } = useTranslation();
   const formik = useFormikContext<any>();
 
@@ -28,7 +28,7 @@ const useFormField = (name: string, props?: any) => {
   const errorMsg =
     !!isError && meta.error
       ? t(meta.error.toString())
-      : Validation[name as any] ?? "";
+      : (Validation[name as any] ?? "");
 
   return { Field, field, meta, formik, isError, errorMsg, t };
 };

src/Hooks/useUnsavedChangesWarning.tsx

@@ -1,16 +1,16 @@
-import { useEffect } from 'react';
+import { useEffect } from "react";
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
 const useUnsavedChangesWarning = (unsavedChanges: boolean) => {
   const [t] = useTranslation();
-  
+
   useEffect(() => {
     const handleBeforeUnload = (event: BeforeUnloadEvent) => {
       if (unsavedChanges) {
         // Prevent default action and stop the event
         event.preventDefault();
         // Optionally set returnValue to an empty string
-        event.returnValue = '';
+        event.returnValue = "";
       }
     };
 
@@ -21,22 +21,22 @@ const useUnsavedChangesWarning = (unsavedChanges: boolean) => {
       }
     };
 
-    window.addEventListener('beforeunload', handleBeforeUnload);
+    window.addEventListener("beforeunload", handleBeforeUnload);
-    
+
     // Intercept link clicks (example for <a> elements)
-    document.querySelectorAll('a').forEach(link => {
+    document.querySelectorAll("a").forEach((link) => {
-      link.addEventListener('click', handleNavigation);
+      link.addEventListener("click", handleNavigation);
     });
 
     return () => {
-      window.removeEventListener('beforeunload', handleBeforeUnload);
+      window.removeEventListener("beforeunload", handleBeforeUnload);
-      
+
       // Clean up event listeners
-      document.querySelectorAll('a').forEach(link => {
+      document.querySelectorAll("a").forEach((link) => {
-        link.removeEventListener('click', handleNavigation);
+        link.removeEventListener("click", handleNavigation);
       });
     };
   }, [unsavedChanges, t]);
 };
 
-export default useUnsavedChangesWarning;
+export default useUnsavedChangesWarning;

src/Hooks/useWindowResize.tsx

@@ -1,20 +1,19 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from "react";
 
 export const useWindowResize = () => {
-    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 
-    useEffect(() => {
+  useEffect(() => {
-        window.addEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize);
-        // Cleanup function to remove the event listener
+    // Cleanup function to remove the event listener
-        return () => {
+    return () => {
-          window.removeEventListener('resize', handleResize);
+      window.removeEventListener("resize", handleResize);
-        };
+    };
-     }, [windowWidth]);
+  }, [windowWidth]);
 
-     const handleResize = () => {
+  const handleResize = () => {
-        setWindowWidth(window.innerWidth);
+    setWindowWidth(window.innerWidth);
-      };
+  };
-
-  return {windowWidth , handleResize};  
-}
 
+  return { windowWidth, handleResize };
+};

src/Layout/Dashboard/FilterLayout.tsx

@@ -18,15 +18,15 @@ const FilterLayout = ({
   width = "500px",
   haveFilter = true,
   haveOrder = true,
-  haveSearch = true
+  haveSearch = true,
 }: {
   filterTitle: string;
   sub_children?: any;
-  search_by?:string;
+  search_by?: string;
-  width?:string;
+  width?: string;
-  haveFilter?:boolean;
+  haveFilter?: boolean;
-  haveOrder?:boolean;
+  haveOrder?: boolean;
-  haveSearch?:boolean
+  haveSearch?: boolean;
 }) => {
   const { t } = useTranslation();
   const translateArray = translateOptions(search_array, t);
@@ -49,21 +49,18 @@ const FilterLayout = ({
               <div className="model_sub_children">{sub_children}</div>
               <FilterSubmit />
             </FilterBody>
-            {haveFilter && 
+            {haveFilter && (
-            
               <div className="filter_button" onClick={() => setIsOpen(true)}>
-              <span>
+                <span>
-                <BiFilterAlt className="addition_select_icon" />
+                  <BiFilterAlt className="addition_select_icon" />
-                {t("header.filter")}
+                  {t("header.filter")}
-              </span>
+                </span>
-              <MdKeyboardArrowDown />
+                <MdKeyboardArrowDown />
-            </div> 
+              </div>
-            }
+            )}
           </span>
 
-          <span>
+          <span>{haveOrder && <OrderBySelect />}</span>
-            {haveOrder && <OrderBySelect />}
-          </span>
         </div>
       </div>
 
@@ -77,7 +74,12 @@ const FilterLayout = ({
         </span>
 
         <div className="header_search">
-          {haveSearch && <SearchField searchBy={search_by} placeholder={t("practical.search_here")} />}
+          {haveSearch && (
+            <SearchField
+              searchBy={search_by}
+              placeholder={t("practical.search_here")}
+            />
+          )}
         </div>
       </div>
     </div>

src/Layout/Dashboard/FormikFormModel.tsx

@@ -29,7 +29,6 @@ const FormikFormModel: React.FC<FormikFormProps> = ({
       initialValues={initialValues}
       validationSchema={validationSchema}
       onSubmit={handleSubmit}
-      
     >
       {(formik) => {
         useEffect(() => {

src/Layout/Dashboard/LayoutModel.tsx

@@ -21,8 +21,8 @@ interface LayoutModalProps {
   ModelClassName?: string;
   width?: string;
   isLoading?: boolean;
-  buttonTitle?:string;
+  buttonTitle?: string;
-  initialButtonName?:boolean
+  initialButtonName?: boolean;
 }
 
 const LayoutModel = ({
@@ -70,60 +70,63 @@ const LayoutModel = ({
         open={isOpen === ModelEnum}
         onCancel={handleCancel}
       >
+        <Formik
+          enableReinitialize={true}
+          initialValues={getInitialValues}
+          validationSchema={getValidationSchema}
+          onSubmit={handleSubmit}
+        >
+          {(formik) => {
+            useEffect(() => {
+              if (isOpen === "" || isOpen === "isSuccess") {
+                formik.setErrors({});
+                formik.resetForm();
+              }
+            }, [isOpen]);
 
-    <Formik
+            return (
-      enableReinitialize={true}
+              <Form className="w-100">
-      initialValues={getInitialValues}
+                <header>
-      validationSchema={getValidationSchema}
+                  <span>
-      onSubmit={handleSubmit} 
+                    {t(`practical.${isAddModal ? "add" : "edit"}`)}{" "}
-    >
+                    {t(`models.${modelTitle}`)}{" "}
-      {(formik) => {
-        useEffect(() => {
-          if (isOpen === "" || isOpen === "isSuccess") {
-            formik.setErrors({});
-            formik.resetForm();
-          }
-        }, [isOpen]);
-        
-        return <Form className="w-100">
-
-      <header>
-            <span>
-              {t(`practical.${isAddModal ? "add" : "edit"}`)}{" "} 
-              {t(`models.${modelTitle}`)}{" "}
-            </span>
-            <MdCancel onClick={handleCancel} />
-          </header>
-          <Divider />
-          <main className="main_modal">
-            {isLoading ? <SpinContainer /> : children}
-            <Divider />
-
-            <div className="buttons">
-              <Button className="back_button pointer" onClick={handleCancel}>
-                {t("practical.cancel")}
-              </Button>
-              <Button
-                className="add_button"
-                disabled={status === QueryStatusEnum.LOADING || !formik.dirty}
-                htmlType="submit"
-              >
-                {
-                  initialButtonName ?  t(`practical.${isAddModal ? "add" : "edit"}`)
-                                    :  t(`practical.${buttonTitle}`)
-                }
-                {status === QueryStatusEnum.LOADING && (
-                  <span className="Spinier_Div">
-                    <Spin />
                   </span>
-                )}
+                  <MdCancel onClick={handleCancel} />
-              </Button>
+                </header>
-            </div>
+                <Divider />
-          </main>
+                <main className="main_modal">
+                  {isLoading ? <SpinContainer /> : children}
+                  <Divider />
 
-        </Form>;
+                  <div className="buttons">
-      }}
+                    <Button
-    </Formik>
+                      className="back_button pointer"
+                      onClick={handleCancel}
+                    >
+                      {t("practical.cancel")}
+                    </Button>
+                    <Button
+                      className="add_button"
+                      disabled={
+                        status === QueryStatusEnum.LOADING || !formik.dirty
+                      }
+                      htmlType="submit"
+                    >
+                      {initialButtonName
+                        ? t(`practical.${isAddModal ? "add" : "edit"}`)
+                        : t(`practical.${buttonTitle}`)}
+                      {status === QueryStatusEnum.LOADING && (
+                        <span className="Spinier_Div">
+                          <Spin />
+                        </span>
+                      )}
+                    </Button>
+                  </div>
+                </main>
+              </Form>
+            );
+          }}
+        </Formik>
       </Modal>
     </>
   );

src/Layout/Dashboard/PageHeader.tsx

@@ -1,4 +1,3 @@
-
 import { BsPlusCircleFill } from "react-icons/bs";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
@@ -22,8 +21,8 @@ const PageHeader = ({
   pageTitle: string;
   openModel?: boolean;
   locationToNavigate?: string | any;
-  addModal?:boolean;
+  addModal?: boolean;
-  modelButtonTitle?:string
+  modelButtonTitle?: string;
 }) => {
   const navigate = useNavigate();
   const { handel_open_model } = useModalHandler();
@@ -33,36 +32,37 @@ const PageHeader = ({
   const { setFilter } = useFilterStateState();
 
   const handleNavigateToPage = (location: string) => {
-    setFilter({})
+    setFilter({});
     navigate(location);
-
   };
 
   console.log();
   return (
     <div className="page_header">
       <header className="d-flex justify-content-between">
-        <span className="page_header_links" >
+        <span className="page_header_links">
           <h1 className="page_title">{t(`PageTitle.${pageTitle}`)}</h1>
           <span className="page_links">
-            <PageTitleComponent/>
+            <PageTitleComponent />
           </span>
         </span>
-        { addModal ? canAdd && (
+        {addModal
-          <div className="Selects">
+          ? canAdd && (
-            <button
+              <div className="Selects">
-              onClick={() =>
+                <button
-                openModel
+                  onClick={() =>
-                  ? handel_open_model(ModelAbility)
+                    openModel
-                  : handleNavigateToPage(locationToNavigate)
+                      ? handel_open_model(ModelAbility)
-              }
+                      : handleNavigateToPage(locationToNavigate)
-              className="add_button"
+                  }
-            >
+                  className="add_button"
-              <BsPlusCircleFill />
+                >
-              {t(`practical.${modelButtonTitle}`)}
+                  <BsPlusCircleFill />
-            </button>
+                  {t(`practical.${modelButtonTitle}`)}
-          </div>
+                </button>
-        ) :""}
+              </div>
+            )
+          : ""}
       </header>
     </div>
   );

src/Layout/Dashboard/PageTitle.tsx

@@ -1,36 +1,38 @@
-import React from 'react'
+import React from "react";
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from "react-router-dom";
-import { usePageTitleState } from '../../zustand/PageTitleState'
+import { usePageTitleState } from "../../zustand/PageTitleState";
-import { useFilterStateState } from '../../zustand/Filter'
+import { useFilterStateState } from "../../zustand/Filter";
 
 const PageTitleComponent = () => {
+  const { PageTitle } = usePageTitleState();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { setFilter } = useFilterStateState();
 
-    const {PageTitle} = usePageTitleState()
+  const handleNavigate = (path: string) => {
-    const navigate = useNavigate()
+    const currentPath = location.pathname;
-    const location = useLocation()
+    const newPath = currentPath?.split(path)?.[0] + path;
-    const { setFilter } = useFilterStateState();
+    if (newPath !== currentPath) {
-
+      setFilter({});
-
+      navigate(newPath);
-    const handleNavigate = (path:string)=>{
+    }
-        const currentPath = location.pathname ; 
+  };
-        const newPath = currentPath?.split(path)?.[0] + path ;
-            if(newPath !== currentPath){
-                setFilter({})
-                navigate(newPath)
-            }
-    } 
   return (
-    <div className='PageTitle'>
+    <div className="PageTitle">
-        {(Array.isArray(PageTitle) ? PageTitle : [])?.map((item,index)=>{
+      {(Array.isArray(PageTitle) ? PageTitle : [])?.map((item, index) => {
-            const lastItem = PageTitle?.length - 1 === index
+        const lastItem = PageTitle?.length - 1 === index;
-            return (
+        return (
-                <div key={index} className={`PageTitleItems ${lastItem ? "PageTitleLastItem" : ""} `} onClick={()=>handleNavigate(item?.path)}>
+          <div
-                        {item?.name}  {lastItem ? "" : "/"}
+            key={index}
-                </div>
+            className={`PageTitleItems ${lastItem ? "PageTitleLastItem" : ""} `}
-            )
+            onClick={() => handleNavigate(item?.path)}
-        })}
+          >
+            {item?.name} {lastItem ? "" : "/"}
+          </div>
+        );
+      })}
     </div>
-  )
+  );
-}
+};
 
-export default PageTitleComponent
+export default PageTitleComponent;

src/Layout/Dashboard/QrCodeModels.tsx

@@ -21,7 +21,6 @@ const QrCodeModels: React.FC<ModalFormProps> = ({
 
   const { objectToEdit, setObjectToEdit } = useObjectToEdit();
 
-
   const handleCancel = () => {
     setIsOpen("");
     setObjectToEdit({});
@@ -42,7 +41,10 @@ const QrCodeModels: React.FC<ModalFormProps> = ({
 
       <main className="main_modal">
         <div className="ValidationField w-100 mb-5 ">
-          <QRCodeGenerator url = {`https://nerd-back.point-dev.net/api/students/question`} serial={objectToEdit?.serial}/>
+          <QRCodeGenerator
+            url={`https://nerd-back.point-dev.net/api/students/question`}
+            serial={objectToEdit?.serial}
+          />
         </div>
       </main>
     </Modal>

src/Layout/Dashboard/Table/DataTable.tsx

@@ -15,7 +15,7 @@ const DataTable: React.FC<DataTableProps> = ({
   ...props
 }) => {
   const data: any[] = response?.data?.data || [];
-  
+
   const columns = useColumns();
   const { pagination, handlePageChange } = usePagination(response?.data);
   const [t] = useTranslation();
@@ -24,12 +24,12 @@ const DataTable: React.FC<DataTableProps> = ({
   };
   const isRefetching = response?.isRefetching;
   const isLoading = response?.isLoading;
-  const dataLength  = data?.length  ;
+  const dataLength = data?.length;
-  const {setDataTableLength} = useDataTableState()
+  const { setDataTableLength } = useDataTableState();
   useEffect(() => {
-    setDataTableLength(dataLength)
+    setDataTableLength(dataLength);
-  }, [dataLength])
+  }, [dataLength]);
-  
+
   return (
     <Table
       style={{ minHeight: "300px" }}
@@ -63,10 +63,8 @@ const DataTable: React.FC<DataTableProps> = ({
         nextIcon: <>{t("practical.next")}</>,
         prevIcon: <> {t("practical.prev")} </>,
         className: "pagination_antd",
-        showSizeChanger:false
+        showSizeChanger: false,
-        
       }}
-      
       {...props}
     />
   );

src/Layout/Dashboard/usePagination.ts

@@ -7,13 +7,12 @@ interface Data {
 }
 
 const usePagination = (data: Data) => {
-  const { Filter ,setFilter } = useFilterStateState();
+  const { Filter, setFilter } = useFilterStateState();
 
   const [pagination, setPagination] = useState<PaginationAntd>({
     current: data?.meta?.current_page || 1,
     pageSize: data?.meta?.per_page || 2,
     total: data?.meta?.total || 0,
-    
   });
 
   useEffect(() => {
@@ -21,15 +20,14 @@ const usePagination = (data: Data) => {
       current: data?.meta?.current_page || 1,
       pageSize: data?.meta?.per_page || 2,
       total: data?.meta?.total || 0,
-      
     });
   }, [data]);
 
   const handlePageChange = (page: number) => {
     setFilter({
       ...Filter,
-      page:page
+      page: page,
-    })
+    });
   };
 
   return { pagination, handlePageChange };

src/Layout/Ui/Layout.tsx

@@ -11,9 +11,8 @@ const Layout = ({
   children: React.ReactNode;
   className?: string;
 }) => {
+  const { openSideBar, setOpenSideBar } = useSideBarState();
 
-  const {openSideBar, setOpenSideBar} = useSideBarState();
-  
   return (
     <ProtectedRouteProvider className="Layout">
       <main

src/Layout/Ui/NotFoundPage.tsx

@@ -6,21 +6,26 @@ import { FaArrowRight } from "react-icons/fa6";
 
 function NotFoundPage() {
   const navigate = useNavigate();
-  const {t} = useTranslation();
+  const { t } = useTranslation();
 
   return (
     <ProtectedRouteProvider className="not_found_page">
-
       <div className="not_found_container">
-        <img src="/App/Error.png" alt="Error 404" width={500}/>
+        <img src="/App/Error.png" alt="Error 404" width={500} />
         <h3>{t("practical.sorry_something_went_wrong")}</h3>
-        <p>{t("practical.error_404_Page_not_found._Sorry,_the_page_you_are_looking_for_does_not_exist")}</p>
+        <p>
-        <Button className="not_found_button" onClick={() => navigate("/", { replace: true })}>
+          {t(
-          <FaArrowRight/>
+            "practical.error_404_Page_not_found._Sorry,_the_page_you_are_looking_for_does_not_exist",
+          )}
+        </p>
+        <Button
+          className="not_found_button"
+          onClick={() => navigate("/", { replace: true })}
+        >
+          <FaArrowRight />
           {t("practical.return_to_the_dashboard")}
         </Button>
       </div>
-
     </ProtectedRouteProvider>
   );
 }

src/Layout/Ui/SideBar.tsx

@@ -28,7 +28,7 @@ const SideBar = ({
   const [t] = useTranslation();
 
   const toggleSidebar = () => {
-    setIsOpen((prev: boolean) => !prev); 
+    setIsOpen((prev: boolean) => !prev);
   };
 
   return (
@@ -65,7 +65,7 @@ const SideBar = ({
       </div>
       <div className="side_bar_setting">
         <p>{t("sidebar.setting")}</p>
-        <div 
+        <div
         // onClick={() => {navigate("/setting")}}
         >
           <CiSettings />

src/Pages/Admin/Area/Model/AddModel.tsx

@@ -10,11 +10,11 @@ import { ParamsEnum } from "../../../../enums/params";
 
 const AddModel: React.FC = () => {
   const { mutate, status } = useAddArea();
-  const {city_id} = useParams<ParamsEnum>()
+  const { city_id } = useParams<ParamsEnum>();
   const handleSubmit = (values: any) => {
     mutate({
       ...values,
-      city_id
+      city_id,
     });
   };
   return (

src/Pages/Admin/Area/Model/EditModel.tsx

@@ -12,9 +12,9 @@ import { ParamsEnum } from "../../../../enums/params";
 const EditModel: React.FC = () => {
   const { mutate, status } = useUpdateArea();
   const { objectToEdit } = useObjectToEdit((state) => state);
-  const {city_id} = useParams<ParamsEnum>()
+  const { city_id } = useParams<ParamsEnum>();
   const handleSubmit = (values: any) => {
-    const Data_to_send = { ...values,city_id };
+    const Data_to_send = { ...values, city_id };
     mutate(Data_to_send);
   };
 

src/Pages/Admin/Area/Model/ModelForm.tsx

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

src/Pages/Admin/Area/Page.tsx

@@ -21,10 +21,10 @@ const DeleteModalForm = lazy(
 const TableHeader = () => {
   const [t] = useTranslation();
   const deleteMutation = useDeleteArea();
-  const {city_id} = useParams<ParamsEnum>()
+  const { city_id } = useParams<ParamsEnum>();
   useSetPageTitle([
-    {name:`${t(`page_header.home`)}`, path:"/"},
+    { name: `${t(`page_header.home`)}`, path: "/" },
-    {name:`${t(`page_header.Area`)}`, path:`city/${city_id}`},
+    { name: `${t(`page_header.Area`)}`, path: `city/${city_id}` },
   ]);
 
   return (
@@ -35,7 +35,11 @@ const TableHeader = () => {
           ModelAbility={ModalEnum?.AREA_ADD}
           canAdd={canAddArea}
         />
-        <FilterLayout sub_children={<FilterForm />} filterTitle="table.Area" haveFilter={false} />
+        <FilterLayout
+          sub_children={<FilterForm />}
+          filterTitle="table.Area"
+          haveFilter={false}
+        />
         <Table />
         <AddModalForm />
         <EditModalForm />

src/Pages/Admin/Area/Table.tsx

@@ -10,18 +10,18 @@ import { ParamsEnum } from "../../../enums/params";
 const App: React.FC = () => {
   const { filterState } = useFilterState();
   const { Filter } = useFilterStateState();
-  const {city_id} = useParams<ParamsEnum>()
+  const { city_id } = useParams<ParamsEnum>();
-  const name = Filter?.name ; 
+  const name = Filter?.name;
-  const sort_by = Filter?.sort_by ; 
+  const sort_by = Filter?.sort_by;
   const response = useGetAllArea({
     pagination: true,
     ...filterState,
     city_id,
     name,
-    sort_by
+    sort_by,
   });
 
-  return <DataTable response={response} useColumns={useColumns}  />;
+  return <DataTable response={response} useColumns={useColumns} />;
 };
 
 export default App;

src/Pages/Admin/Area/useTableColumns.tsx

@@ -21,10 +21,8 @@ export const useColumns = () => {
   const navigate = useNavigate();
   const { setFilter } = useFilterStateState();
 
-
-  
   const handelShow = (record: Area) => {
-    setFilter({})
+    setFilter({});
     navigate(`${record?.id}`);
   };
 
@@ -39,7 +37,7 @@ export const useColumns = () => {
   };
   const [t] = useTranslation();
 
-  const columns: TableColumnsType<Area> = [ 
+  const columns: TableColumnsType<Area> = [
     {
       title: t("columns.id"),
       dataIndex: "id",
@@ -53,7 +51,7 @@ export const useColumns = () => {
       key: "name",
       align: "center",
       render: (_text, record) => record?.name,
-      ellipsis:true
+      ellipsis: true,
     },
     {
       title: t("columns.procedure"),

src/Pages/Admin/City/Model/ModelForm.tsx

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

src/Pages/Admin/City/Page.tsx

@@ -21,8 +21,8 @@ const TableHeader = () => {
   const deleteMutation = useDeleteCity();
 
   useSetPageTitle([
-    {name:`${t(`page_header.home`)}`, path:"/"},
+    { name: `${t(`page_header.home`)}`, path: "/" },
-    {name:`${t(`page_header.City`)}`, path:"City"}
+    { name: `${t(`page_header.City`)}`, path: "City" },
   ]);
 
   return (
@@ -33,7 +33,11 @@ const TableHeader = () => {
           ModelAbility={ModalEnum?.CITY_ADD}
           canAdd={canAddCity}
         />
-        <FilterLayout sub_children={<FilterForm />} haveFilter={false} filterTitle="table.City" />
+        <FilterLayout
+          sub_children={<FilterForm />}
+          haveFilter={false}
+          filterTitle="table.City"
+        />
         <Table />
         <AddModalForm />
         <EditModalForm />

src/Pages/Admin/City/Table.tsx

@@ -8,16 +8,16 @@ import { useFilterStateState } from "../../../zustand/Filter";
 const App: React.FC = () => {
   const { filterState } = useFilterState();
   const { Filter } = useFilterStateState();
-  const name = Filter?.name ; 
+  const name = Filter?.name;
-  const sort_by = Filter?.sort_by ; 
+  const sort_by = Filter?.sort_by;
   const response = useGetAllCity({
     pagination: true,
     ...filterState,
     name,
-    sort_by
+    sort_by,
   });
 
-  return <DataTable response={response} useColumns={useColumns}  />;
+  return <DataTable response={response} useColumns={useColumns} />;
 };
 
 export default App;

src/Pages/Admin/City/useTableColumns.tsx

@@ -21,10 +21,8 @@ export const useColumns = () => {
   const navigate = useNavigate();
   const { setFilter } = useFilterStateState();
 
-
-  
   const handelShow = (record: City) => {
-    setFilter({})
+    setFilter({});
     navigate(`${record?.id}`);
   };
 
@@ -53,10 +51,9 @@ export const useColumns = () => {
       key: "name",
       align: "center",
       render: (_text, record) => record?.name,
-      ellipsis:true
+      ellipsis: true,
     },
     {
-
       title: t("columns.procedure"),
       key: "actions",
       align: "center",

src/Pages/Admin/Coupon/Model/AddModel.tsx

@@ -12,15 +12,13 @@ const AddModel: React.FC = () => {
   const { mutate, status } = useAddCoupon();
 
   const handleSubmit = (values: any) => {
-    console.log(values?.due_to,"values?.due_to");
+    console.log(values?.due_to, "values?.due_to");
-    const due_to = values?.due_to.format("YYYY-MM-DD HH:mm:ss")
+    const due_to = values?.due_to.format("YYYY-MM-DD HH:mm:ss");
-      console.log(due_to);
+    console.log(due_to);
     mutate({
       ...values,
       due_to,
-      grade_id:values?.grade_id?.id
+      grade_id: values?.grade_id?.id,
-
-
     });
   };
   return (

src/Pages/Admin/Coupon/Model/EditModel.tsx

@@ -12,8 +12,15 @@ const EditModel: React.FC = () => {
   const { objectToEdit } = useObjectToEdit((state) => state);
 
   const handleSubmit = (values: any) => {
-    const due_to = typeof values?.due_to === "string" ? values?.due_to : values?.due_to.format("YYYY-MM-DD HH:mm:ss")
+    const due_to =
-    const Data_to_send = { ...values , due_to,  grade_id:values?.grade_id?.id ?? "" };
+      typeof values?.due_to === "string"
+        ? values?.due_to
+        : values?.due_to.format("YYYY-MM-DD HH:mm:ss");
+    const Data_to_send = {
+      ...values,
+      due_to,
+      grade_id: values?.grade_id?.id ?? "",
+    };
     mutate(Data_to_send);
   };
 

src/Pages/Admin/Coupon/Model/ModelForm.tsx

@@ -3,57 +3,56 @@ import ValidationField from "../../../../Components/ValidationField/ValidationFi
 import { useValidationValidationParamState } from "../../../../Components/ValidationField/state/ValidationValidationParamState";
 import { useGetAllGrade } from "../../../../api/grade";
 
-const Form = ({Hide = false}:{Hide?:boolean }) => {
+const Form = ({ Hide = false }: { Hide?: boolean }) => {
   const { ValidationParamState } = useValidationValidationParamState();
 
-  const {
+  const { GradeName, GradeCurrentPage } = ValidationParamState;
-    GradeName, GradeCurrentPage,
-  } = ValidationParamState;
-
-
 
   const { data: Grade, isLoading: isLoadingGrade } = useGetAllGrade({
     name: GradeName,
-    page: GradeCurrentPage
+    page: GradeCurrentPage,
   });
-  const GradeOption = Grade?.data ?? []
+  const GradeOption = Grade?.data ?? [];
   const canChangeGradePage = !!Grade?.links?.next;
   const GradePage = Grade?.meta?.current_page;
   return (
     <Row className="w-100">
       <Col>
         <ValidationField name="name" placeholder="name" label="name" />
-        <ValidationField name="amount" type="number" placeholder="amount" label="amount" />
+        <ValidationField
-      
+          name="amount"
+          type="number"
+          placeholder="amount"
+          label="amount"
+        />
       </Col>
       <Col>
-      <ValidationField
+        <ValidationField
-         name="due_to" type="Date" 
+          name="due_to"
-         Format="YYYY-MM-DD HH:mm:ss" 
+          type="Date"
-         placeholder="due_to" label="due_to" 
+          Format="YYYY-MM-DD HH:mm:ss"
-         showTime
+          placeholder="due_to"
-      
+          label="due_to"
-         />
+          showTime
-      <ValidationField name="code" placeholder="code" label="code" />
+        />
-      {/* 
+        <ValidationField name="code" placeholder="code" label="code" />
+        {/* 
               grade_id
         */}
-        {!Hide && 
+        {!Hide && (
-        
+          <ValidationField
-        <ValidationField
+            searchBy="GradeName"
-          searchBy="GradeName"
+            name="grade_id"
-          name="grade_id"
+            label="grade"
-          label="grade"
+            placeholder="grade"
-           placeholder="grade"
+            type="Search"
-          type="Search"
+            option={GradeOption}
-          option={GradeOption}
+            isLoading={isLoadingGrade}
-          isLoading={isLoadingGrade}
+            canChangePage={canChangeGradePage}
-          canChangePage={canChangeGradePage}
+            PageName={"GradeCurrentPage"}
-          PageName={"GradeCurrentPage"}
+            page={GradePage}
-          page={GradePage}
+          />
-
+        )}
-        />
-        }
       </Col>
     </Row>
   );

src/Pages/Admin/Coupon/Model/formUtil.ts

@@ -10,7 +10,9 @@ export const getInitialValues = (
     name: objectToEdit?.name ?? "",
     amount: objectToEdit?.amount ?? "",
     code: objectToEdit?.code ?? "",
-    due_to: objectToEdit?.due_to ? dayjs(objectToEdit?.due_to,"YYYY-MM-DD HH:mm:ss") :  "",
+    due_to: objectToEdit?.due_to
+      ? dayjs(objectToEdit?.due_to, "YYYY-MM-DD HH:mm:ss")
+      : "",
     grade_id: objectToEdit?.grade ?? "",
   };
 };
@@ -20,8 +22,12 @@ export const getValidationSchema = () => {
   return Yup.object().shape({
     name: Yup.string().required("validation.required"),
     due_to: Yup.string().required("validation.required"),
-    code: Yup.string().required("validation.required").min(6,"validation.must_be_at_least_6_characters_long").max(6,"validation.must_be_at_least_6_characters_long"),
+    code: Yup.string()
-    amount: Yup.number().required("validation.required").typeError("validation.Must_be_a_number"),
+      .required("validation.required")
-
+      .min(6, "validation.must_be_at_least_6_characters_long")
+      .max(6, "validation.must_be_at_least_6_characters_long"),
+    amount: Yup.number()
+      .required("validation.required")
+      .typeError("validation.Must_be_a_number"),
   });
 };

src/Pages/Admin/Coupon/Page.tsx

@@ -21,8 +21,8 @@ const TableHeader = () => {
   const deleteMutation = useDeleteCoupon();
 
   useSetPageTitle([
-    {name:`${t(`page_header.home`)}`, path:"/"},
+    { name: `${t(`page_header.home`)}`, path: "/" },
-    {name:`${t(`page_header.Coupon`)}`, path:"Coupon"}
+    { name: `${t(`page_header.Coupon`)}`, path: "Coupon" },
   ]);
 
   return (
@@ -33,7 +33,11 @@ const TableHeader = () => {
           ModelAbility={ModalEnum?.COUPON_ADD}
           canAdd={canAddCoupon}
         />
-        <FilterLayout sub_children={<FilterForm />} haveFilter={false} filterTitle="table.Coupon" />
+        <FilterLayout
+          sub_children={<FilterForm />}
+          haveFilter={false}
+          filterTitle="table.Coupon"
+        />
         <Table />
         <AddModalForm />
         <EditModalForm />

src/Pages/Admin/Coupon/Table.tsx

@@ -8,16 +8,16 @@ import { useFilterStateState } from "../../../zustand/Filter";
 const App: React.FC = () => {
   const { filterState } = useFilterState();
   const { Filter } = useFilterStateState();
-  const name = Filter?.name ; 
+  const name = Filter?.name;
-  const sort_by = Filter?.sort_by ; 
+  const sort_by = Filter?.sort_by;
   const response = useGetAllCoupon({
     pagination: true,
     ...filterState,
     name,
-    sort_by
+    sort_by,
   });
 
-  return <DataTable response={response} useColumns={useColumns}  />;
+  return <DataTable response={response} useColumns={useColumns} />;
 };
 
 export default App;

src/Pages/Admin/Coupon/useTableColumns.tsx

@@ -21,10 +21,8 @@ export const useColumns = () => {
   const navigate = useNavigate();
   const { setFilter } = useFilterStateState();
 
-
-  
   const handelShow = (record: Coupon) => {
-    setFilter({})
+    setFilter({});
     navigate(`${record?.id}`);
   };
 
@@ -53,7 +51,7 @@ export const useColumns = () => {
       key: "name",
       align: "center",
       render: (_text, record) => record?.name,
-      ellipsis:true
+      ellipsis: true,
     },
     {
       title: `${t("columns.amount")}`,
@@ -61,7 +59,7 @@ export const useColumns = () => {
       key: "amount",
       align: "center",
       render: (_text, record) => record?.amount,
-      ellipsis:true
+      ellipsis: true,
     },
     {
       title: `${t("columns.code")}`,
@@ -69,7 +67,7 @@ export const useColumns = () => {
       key: "code",
       align: "center",
       render: (_text, record) => record?.code,
-      ellipsis:true
+      ellipsis: true,
     },
     {
       title: `${t("columns.due_to")}`,
@@ -85,10 +83,9 @@ export const useColumns = () => {
       key: "status",
       align: "center",
       render: (_text, record) => record?.status,
-      ellipsis:true
+      ellipsis: true,
     },
     {
-
       title: t("columns.procedure"),
       key: "actions",
       align: "center",

src/Pages/Admin/FinancialCollection/Model/AddModel.tsx

@@ -14,10 +14,10 @@ const AddModel: React.FC = () => {
 
   const handleSubmit = (values: any) => {
     console.log(values);
-    
+
     mutate({
       ...values,
-      date: dayjs(values?.date).format('YYYY-MM-DD'),
+      date: dayjs(values?.date).format("YYYY-MM-DD"),
     });
   };
   return (

src/Pages/Admin/FinancialCollection/Model/EditModel.tsx

@@ -1,5 +1,9 @@
 import React from "react";
-import { getInitialValues, getValidationSchema, getValidationSchemaEdit } from "./formUtil";
+import {
+  getInitialValues,
+  getValidationSchema,
+  getValidationSchemaEdit,
+} from "./formUtil";
 import { ModalEnum } from "../../../../enums/Model";
 import LayoutModel from "../../../../Layout/Dashboard/LayoutModel";
 import ModelForm from "./ModelForm";
@@ -13,11 +17,11 @@ const EditModel: React.FC = () => {
   const { mutate, status } = useUpdateFinancialCollection();
   const { objectToEdit } = useObjectToEdit((state) => state);
   console.log(objectToEdit);
-  
+
   const handleSubmit = (values: any) => {
     mutate({
       ...values,
-      date: dayjs(values?.date).format('YYYY-MM-DD'),
+      date: dayjs(values?.date).format("YYYY-MM-DD"),
     });
   };
   return (
@@ -31,7 +35,7 @@ const EditModel: React.FC = () => {
         getValidationSchema={getValidationSchemaEdit}
         isAddModal={false}
       >
-        <ModelForm isEdit={true}/>
+        <ModelForm isEdit={true} />
       </LayoutModel>
     </>
   );

src/Pages/Admin/FinancialCollection/Model/FilterForm.tsx

@@ -4,26 +4,30 @@ import { Col, Row } from "reactstrap";
 import { useGetAllReseller } from "../../../../api/reseller";
 
 const FilterForm = () => {
-  const {data} = useGetAllReseller()
+  const { data } = useGetAllReseller();
 
   return (
     <div>
       <Row>
         <Col>
-          <ValidationField placeholder="description" label="description" name="description" />
+          <ValidationField
+            placeholder="description"
+            label="description"
+            name="description"
+          />
           <ValidationField placeholder="amount" label="amount" name="amount" />
-          <ValidationField 
+          <ValidationField
-            placeholder="reseller" 
+            placeholder="reseller"
-            label="reseller" 
+            label="reseller"
-            name="reseller_id" 
+            name="reseller_id"
-            type="Select" 
+            type="Select"
             option={data?.data?.map((e: any) => ({
               ...e,
-              fullName: `${e.first_name} ${e.last_name}`
+              fullName: `${e.first_name} ${e.last_name}`,
-            }))} 
+            }))}
-            fieldNames={{ 
+            fieldNames={{
               label: "fullName",
-              value: "id"
+              value: "id",
             }}
           />
         </Col>

src/Pages/Admin/FinancialCollection/Model/ModelForm.tsx

@@ -2,34 +2,44 @@ import { Col, Row } from "reactstrap";
 import ValidationField from "../../../../Components/ValidationField/ValidationField";
 import { useGetAllReseller } from "../../../../api/reseller";
 
-const Form = ({isEdit= false}:{isEdit?:boolean}) => {
+const Form = ({ isEdit = false }: { isEdit?: boolean }) => {
-  const {data} = useGetAllReseller()
+  const { data } = useGetAllReseller();
-  
+
   return (
     <Row className="w-100">
       <Col>
-        <ValidationField placeholder="description" label="description" name="description" />
+        <ValidationField
+          placeholder="description"
+          label="description"
+          name="description"
+        />
         <ValidationField placeholder="amount" label="amount" name="amount" />
       </Col>
       <Col>
-      <ValidationField placeholder="date" label="date" name="date" type="Date"/>
+        <ValidationField
-      {isEdit ? " " :
+          placeholder="date"
-      <ValidationField 
+          label="date"
-        placeholder="reseller" 
+          name="date"
-        label="reseller" 
+          type="Date"
-        name="reseller_id" 
+        />
-        type="Select" 
+        {isEdit ? (
-        option={data?.data?.map((e: any) => ({
+          " "
-          ...e,
+        ) : (
-          fullName: `${e.first_name} ${e.last_name}`
+          <ValidationField
-        }))} 
+            placeholder="reseller"
-        fieldNames={{ 
+            label="reseller"
-          label: "fullName",
+            name="reseller_id"
-          value: "id"
+            type="Select"
-        }}
+            option={data?.data?.map((e: any) => ({
-      />
+              ...e,
-      }
+              fullName: `${e.first_name} ${e.last_name}`,
-
+            }))}
+            fieldNames={{
+              label: "fullName",
+              value: "id",
+            }}
+          />
+        )}
       </Col>
     </Row>
   );

src/Pages/Admin/FinancialCollection/Model/formUtil.ts

@@ -2,7 +2,7 @@ import * as Yup from "yup";
 import dayjs from "dayjs";
 export const getInitialValues = (objectToEdit: any): any => {
   console.log(objectToEdit);
-  
+
   return {
     id: objectToEdit?.id ?? null,
     description: objectToEdit?.description ?? null,

src/Pages/Admin/FinancialCollection/Page.tsx

@@ -4,7 +4,10 @@ import { ModalEnum } from "../../../enums/Model";
 import { useTranslation } from "react-i18next";
 import { lazy, Suspense } from "react";
 import { Spin } from "antd";
-import { canAddFinancial_Collection, canAddTags } from "../../../utils/hasAbilityFn";
+import {
+  canAddFinancial_Collection,
+  canAddTags,
+} from "../../../utils/hasAbilityFn";
 import useSetPageTitle from "../../../Hooks/useSetPageTitle";
 import { useDeleteTag } from "../../../api/tags";
 import PageHeader from "../../../Layout/Dashboard/PageHeader";
@@ -22,8 +25,11 @@ const TableHeader = () => {
   const [t] = useTranslation();
 
   useSetPageTitle([
-    {name:`${t(`page_header.home`)}`, path:"/"},
+    { name: `${t(`page_header.home`)}`, path: "/" },
-    {name:`${t(`page_header.financial_collection`)}`, path:"financial_collection"}
+    {
+      name: `${t(`page_header.financial_collection`)}`,
+      path: "financial_collection",
+    },
   ]);
 
   const deleteMutation = useDeleteFinancialCollection();

src/Pages/Admin/FinancialCollection/Table.tsx

@@ -5,11 +5,10 @@ import { useFilterState } from "../../../Components/Utils/Filter/FilterState";
 import { useFilterStateState } from "../../../zustand/Filter";
 import { useGetAllFinancialCollection } from "../../../api/financial_collection";
 const App: React.FC = () => {
-
   const { filterState } = useFilterState();
   const { Filter } = useFilterStateState();
-  const name = Filter?.name ; 
+  const name = Filter?.name;
-  const sort_by = Filter?.sort_by ; 
+  const sort_by = Filter?.sort_by;
 
   const response = useGetAllFinancialCollection({
     pagination: true,

src/Pages/Admin/FinancialCollection/useTableColumns.tsx

@@ -4,7 +4,12 @@ import { ModalEnum } from "../../../enums/Model";
 import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
 import { useModalState } from "../../../zustand/Modal";
 import { useTranslation } from "react-i18next";
-import { canDeleteFinancial_Collection, canDeleteTags, canEditFinancial_Collection, canEditTags } from "../../../utils/hasAbilityFn";
+import {
+  canDeleteFinancial_Collection,
+  canDeleteTags,
+  canEditFinancial_Collection,
+  canEditTags,
+} from "../../../utils/hasAbilityFn";
 import ActionButtons from "../../../Components/Table/ActionButtons";
 
 export const useColumns = () => {
@@ -34,21 +39,21 @@ export const useColumns = () => {
       dataIndex: "amount",
       key: "amount",
       align: "center",
-      ellipsis:true
+      ellipsis: true,
     },
     {
       title: t("columns.date"),
       dataIndex: "date",
       key: "date",
       align: "center",
-      ellipsis:true
+      ellipsis: true,
     },
     {
       title: t("columns.description"),
       dataIndex: "description",
       key: "description",
       align: "center",
-      ellipsis:true
+      ellipsis: true,
     },
     {
       title: t("columns.procedure"),

src/Pages/Admin/Grade/Page.tsx

@@ -21,8 +21,8 @@ const TableHeader = () => {
   const deleteMutation = useDeleteGrade();
 
   useSetPageTitle([
-    {name:`${t(`page_header.home`)}`, path:"/"},
+    { name: `${t(`page_header.home`)}`, path: "/" },
-    {name:`${t(`page_header.grade`)}`, path:"grade"}
+    { name: `${t(`page_header.grade`)}`, path: "grade" },
   ]);
 
   return (

src/Pages/Admin/Grade/Table.tsx

@@ -8,17 +8,17 @@ import { useFilterStateState } from "../../../zustand/Filter";
 const App: React.FC = () => {
   const { filterState } = useFilterState();
   const { Filter } = useFilterStateState();
-  const name = Filter?.name ; 
+  const name = Filter?.name;
-  const sort_by = Filter?.sort_by ; 
+  const sort_by = Filter?.sort_by;
-  
+
   const response = useGetAllGrade({
     pagination: true,
     ...filterState,
-    name:filterState.name ||  name,
+    name: filterState.name || name,
-    sort_by
+    sort_by,
   });
 
-  return <DataTable response={response} useColumns={useColumns}  />;
+  return <DataTable response={response} useColumns={useColumns} />;
 };
 
 export default App;

src/Pages/Admin/Grade/useTableColumns.tsx

@@ -21,10 +21,8 @@ export const useColumns = () => {
   const navigate = useNavigate();
   const { setFilter } = useFilterStateState();
 
-
-  
   const handelShow = (record: Grade) => {
-    setFilter({})
+    setFilter({});
     navigate(`${record?.id}`);
   };
 
@@ -53,7 +51,7 @@ export const useColumns = () => {
       key: "name",
       align: "center",
       render: (_text, record) => record?.name,
-      ellipsis:true
+      ellipsis: true,
     },
     {
       title: t("columns.image"),
@@ -63,11 +61,10 @@ export const useColumns = () => {
       render: (_text: any, record: Grade) => {
         let str = record?.icon;
 
-        return  <ColumnsImage src={str}/>  ;
+        return <ColumnsImage src={str} />;
       },
     },
     {
-
       title: t("columns.procedure"),
       key: "actions",
       align: "center",

src/Pages/Admin/Manager/Add/Page.tsx

@@ -15,22 +15,22 @@ import { useNavigate } from "react-router-dom";
 const TableHeader = () => {
   const [t] = useTranslation();
   const Navigate = useNavigate();
-  const {mutate,status } = useAddManager();
+  const { mutate, status } = useAddManager();
   const handelSubmit = (values: any) => {
     console.log(values, "values");
-    mutate({...values});
+    mutate({ ...values });
   };
   const handleCancel = () => {
     Navigate(-1);
   };
   console.log(status);
-  
+
   useEffect(() => {
-    if(status === QueryStatusEnum.SUCCESS){
+    if (status === QueryStatusEnum.SUCCESS) {
       handleCancel();
     }
-  }, [status])
+  }, [status]);
-  
+
   return (
     <div className="TableWithHeader">
       <Suspense fallback={<Spin />}>
@@ -50,14 +50,16 @@ const TableHeader = () => {
               <TitleDetailsForm />
               <AttachmentForm />
               <div className="resellerButton">
-                <button type="button" onClick={handleCancel}>{t("practical.cancel")}</button>
+                <button type="button" onClick={handleCancel}>
+                  {t("practical.cancel")}
+                </button>
                 <button type="submit">
-                    {t("practical.add")} {t("models.reseller")}
+                  {t("practical.add")} {t("models.reseller")}
-                    {status === QueryStatusEnum.LOADING && (
+                  {status === QueryStatusEnum.LOADING && (
-                      <span className="Spinier_Div">
+                    <span className="Spinier_Div">
-                        <Spin />
+                      <Spin />
-                      </span>
+                    </span>
-                    )}
+                  )}
                 </button>
               </div>
             </Form>

src/Pages/Admin/Manager/Edit/Page.tsx

@@ -16,21 +16,21 @@ import { QueryStatusEnum } from "../../../../enums/QueryStatus";
 
 const TableHeader = () => {
   const [t] = useTranslation();
-  const {objectToEdit} = useObjectToEdit();
+  const { objectToEdit } = useObjectToEdit();
   const Navigate = useNavigate();
-  const {mutate,status } = useUpdateManager();
+  const { mutate, status } = useUpdateManager();
   const handelSubmit = (values: any) => {
-    mutate({...values});
+    mutate({ ...values });
   };
   const handleCancel = () => {
     Navigate(-1);
   };
-  
+
   useEffect(() => {
-    if(status === QueryStatusEnum.SUCCESS){
+    if (status === QueryStatusEnum.SUCCESS) {
       handleCancel();
     }
-  }, [status])
+  }, [status]);
   return (
     <div className="TableWithHeader">
       <Suspense fallback={<Spin />}>
@@ -46,19 +46,21 @@ const TableHeader = () => {
             onSubmit={handelSubmit}
           >
             <Form className="Form_details_container">
-              <PersonalDetailsForm isEdit={true}/>
+              <PersonalDetailsForm isEdit={true} />
               <TitleDetailsForm />
-              <PasswordDetailsForm/>
+              <PasswordDetailsForm />
               <AttachmentForm />
               <div className="resellerButton">
-                <button type="button" onClick={handleCancel}>{t("practical.cancel")}</button>
+                <button type="button" onClick={handleCancel}>
+                  {t("practical.cancel")}
+                </button>
                 <button type="submit">
-                    {t("practical.add")} {t("models.reseller")}
+                  {t("practical.add")} {t("models.reseller")}
-                    {status === QueryStatusEnum.LOADING && (
+                  {status === QueryStatusEnum.LOADING && (
-                      <span className="Spinier_Div">
+                    <span className="Spinier_Div">
-                        <Spin />
+                      <Spin />
-                      </span>
+                    </span>
-                    )}
+                  )}
                 </button>
               </div>
             </Form>

src/Pages/Admin/Manager/Form/PasswordDetailsForm.tsx

@@ -12,9 +12,16 @@ const PasswordDetailsForm = () => {
         <h4>{t("header.password")}</h4>
       </header>
       <main className="main_form_body">
-        <ValidationField name={"password"} placeholder={"_"} label={"new_password"} />
+        <ValidationField
-        <ValidationField name={"password"} placeholder={"_"} label={"submit_password"} />
+          name={"password"}
-
+          placeholder={"_"}
+          label={"new_password"}
+        />
+        <ValidationField
+          name={"password"}
+          placeholder={"_"}
+          label={"submit_password"}
+        />
       </main>
     </div>
   );

src/Pages/Admin/Manager/Form/PersonalDetailsForm.tsx

@@ -7,11 +7,11 @@ import { userTypeOptions } from "../../../../config/userTypeOptions";
 import { statusType } from "../../../../config/statusType";
 import { useGetRole } from "../../../../api/role";
 
-const PersonalDetailsForm = ({isEdit= false}:{isEdit?:boolean}) => {
+const PersonalDetailsForm = ({ isEdit = false }: { isEdit?: boolean }) => {
   const [t] = useTranslation();
-  const {data} = useGetRole(); 
+  const { data } = useGetRole();
-  const RoleData = data?.data
+  const RoleData = data?.data;
-  
+
   const sex = [
     { name: "male", id: "male" },
     { name: "female", id: "female" },
@@ -28,24 +28,20 @@ const PersonalDetailsForm = ({isEdit= false}:{isEdit?:boolean}) => {
           placeholder={"_"}
           label={"username"}
         />
-        <ValidationField
+        <ValidationField name={"name"} placeholder={"_"} label={"name"} />
-          name={"name"}
-          placeholder={"_"}
-          label={"name"}
-          />
         <ValidationField
           name={"contact_number"}
           placeholder={"_"}
           label={"contact_number"}
           type="number"
         />
-      {!isEdit && (
+        {!isEdit && (
-        <ValidationField
+          <ValidationField
-          name={"password"}
+            name={"password"}
-          placeholder={"_"}
+            placeholder={"_"}
-          label={"password"}
+            label={"password"}
-        />
+          />
-      )}
+        )}
         <ValidationField
           name={"role"}
           placeholder={"_"}

src/Pages/Admin/Manager/Form/TitleDetailsForm.tsx

@@ -8,14 +8,14 @@ import { useGetAllCity } from "../../../../api/City";
 
 const TitleDetailsForm = () => {
   const [t] = useTranslation();
-  const {data:city} = useGetAllCity();
+  const { data: city } = useGetAllCity();
-  const [CityId, setCityId] = useState()
+  const [CityId, setCityId] = useState();
   console.log(city);
-  
+
-  const {data} = useGetAllArea({
+  const { data } = useGetAllArea({
-    city_id:CityId
+    city_id: CityId,
   });
-  
+
   return (
     <div className="TitleDetailsForm">
       <header className="header_form">
@@ -29,7 +29,7 @@ const TitleDetailsForm = () => {
           label={"city"}
           type="Select"
           option={city?.data}
-          onChange={(e)=>setCityId(e)}
+          onChange={(e) => setCityId(e)}
         />
         <ValidationField
           name={"area_id"}
@@ -38,7 +38,6 @@ const TitleDetailsForm = () => {
           type="Select"
           disabled={!CityId}
           option={data?.data}
-          
         />
         {/* <ValidationField name={"address"} placeholder={"_"} label={"address"} /> */}
       </main>

src/Pages/Admin/Manager/Form/formUtils.ts

@@ -2,7 +2,7 @@ import * as Yup from "yup";
 
 export const getInitialValues = (objectToEdit: Partial<any>) => {
   console.log(objectToEdit);
-  
+
   return {
     id: objectToEdit?.id ?? null,
     name: objectToEdit?.name ?? null,
@@ -10,7 +10,6 @@ export const getInitialValues = (objectToEdit: Partial<any>) => {
     contact_number: objectToEdit?.contact_number ?? null,
     role_id: objectToEdit?.role_id ?? null,
     password: objectToEdit?.password ?? null,
-
   };
 };
 

src/Pages/Admin/Manager/Model/AddModel.tsx

@@ -12,7 +12,7 @@ const AddModel: React.FC = () => {
   const handleSubmit = (values: any) => {
     mutate({
       ...values,
-      grade_id:values?.grade_id?.id
+      grade_id: values?.grade_id?.id,
     });
   };
   return (

src/Pages/Admin/Manager/Model/EditModel.tsx

@@ -12,7 +12,7 @@ const EditModel: React.FC = () => {
   const { objectToEdit } = useObjectToEdit((state) => state);
 
   const handleSubmit = (values: any) => {
-    const Data_to_send = { ...values,    grade_id:values?.grade_id?.id };
+    const Data_to_send = { ...values, grade_id: values?.grade_id?.id };
     mutate(Data_to_send);
   };
 

src/Pages/Admin/Manager/Page.tsx

@@ -19,9 +19,9 @@ const TableHeader = () => {
   const deleteMutation = useDeleteManager();
 
   useSetPageTitle([
-    {name:`${t(`page_header.home`)}`, path:"/"},
+    { name: `${t(`page_header.home`)}`, path: "/" },
-    {name:`${t(`page_header.users`)}`, path:"user"},
+    { name: `${t(`page_header.users`)}`, path: "user" },
-    {name:`${t(`page_header.managers`)}`, path:"managers"},
+    { name: `${t(`page_header.managers`)}`, path: "managers" },
   ]);
   return (
     <div className="TableWithHeader">

src/Pages/Admin/Manager/Table.tsx

@@ -10,9 +10,8 @@ const App: React.FC = () => {
 
   const { Filter } = useFilterStateState();
 
-  const name = Filter?.name ; 
+  const name = Filter?.name;
-  const sort_by = Filter?.sort_by ; 
+  const sort_by = Filter?.sort_by;
-
 
   const response = useGetAllManager({
     name,
@@ -20,7 +19,6 @@ const App: React.FC = () => {
     pagination: true,
     ...filterState,
   });
-  
 
   return <DataTable response={response} useColumns={useColumns} />;
 };

src/Pages/Admin/Manager/useTableColumns.tsx

@@ -32,10 +32,9 @@ export const useColumns = () => {
     handel_open_model(ModalEnum?.MANAGER_DELETE);
   };
 
-  const handleEdit = (record: Manager) => {    
+  const handleEdit = (record: Manager) => {
     setObjectToEdit(record);
-    navigate(`/${ABILITIES_ENUM?.MANAGERS}/${record?.id}/edit`)
+    navigate(`/${ABILITIES_ENUM?.MANAGERS}/${record?.id}/edit`);
-
   };
   const [t] = useTranslation();
 
@@ -59,7 +58,7 @@ export const useColumns = () => {
       dataIndex: "username",
       key: "username",
       align: "center",
-      render: (_text, record) => record?.user.username ,
+      render: (_text, record) => record?.user.username,
     },
     {
       title: `${t("columns.phone_number")}`,

src/Pages/Admin/Notifications/AddNotification/Add/Page.tsx

@@ -31,9 +31,9 @@ const TableHeader = () => {
   useEffect(() => {
     if (isSuccess === true) {
       console.log(1);
-      Navigate('/add_Notifications')
+      Navigate("/add_Notifications");
     }
-  }, [isSuccess])
+  }, [isSuccess]);
 
   return (
     <div className="TableWithHeader">
@@ -54,7 +54,12 @@ const TableHeader = () => {
                 <TitleDetailsForm />
                 <PersonalDetailsForm />
                 <div className="resellerButton">
-                  <button type="button" onClick={() => Navigate('/add_Notifications')}>{t("practical.cancel")}</button>
+                  <button
+                    type="button"
+                    onClick={() => Navigate("/add_Notifications")}
+                  >
+                    {t("practical.cancel")}
+                  </button>
                   <button type="submit" disabled={!dirty}>
                     {t("practical.send")} {t("models.notifications")}
                     {status === QueryStatusEnum.LOADING && (

src/Pages/Admin/Notifications/AddNotification/Form/AttachmentForm.tsx

@@ -13,16 +13,16 @@ const AttachmentForm = () => {
         <FaImage />
         <h4>{t("header.attachment")}</h4>
       </header>
-     <div className="AttachmentFormBody ">
+      <div className="AttachmentFormBody ">
-     <main className="main_form_body">
+        <main className="main_form_body">
-        <ImageBoxField name="personal_image" />
+          <ImageBoxField name="personal_image" />
-        <ImageBoxField name="id_image" />
+          <ImageBoxField name="id_image" />
-      </main>
+        </main>
-      <div className="MapField">
+        <div className="MapField">
-      <ValidationField name="lat" placeholder="lat" label="lat" />
+          <ValidationField name="lat" placeholder="lat" label="lat" />
-        <ValidationField name="lng" placeholder="lng" label="lng" />        
+          <ValidationField name="lng" placeholder="lng" label="lng" />
+        </div>
       </div>
-     </div>
     </div>
   );
 };