formate

package.json

@@ -1,66 +1,29 @@
 {
   "name": "my-app",
   "version": "0.1.0",
-  "type": "module",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^5.3.7",
-    "@types/draft-js": "^0.11.18",
-    "@types/katex": "^0.16.7",
-    "@types/mathjax": "^0.0.40",
-    "@types/node": "^20.14.0",
-    "@types/react-draft-wysiwyg": "^1.13.8",
-    "@types/react-helmet": "^6.1.11",
-    "algebra.js": "^0.2.6",
     "antd": "^5.17.4",
-    "apexcharts": "^3.49.1",
     "axios": "^1.7.2",
-    "better-react-mathjax": "^2.0.3",
     "bootstrap": "^5.3.3",
     "dayjs": "^1.11.11",
-    "draft-js": "^0.11.7",
-    "draft-js-latex-plugin": "^0.1.2",
-    "equation-resolver": "^1.0.0",
     "formik": "^2.4.6",
-    "html2canvas": "^1.4.1",
+    "html-to-image": "^1.11.11",
     "i18next": "^23.11.5",
-    "jspdf": "^2.5.1",
-    "katex": "^0.16.11",
-    "lodash.debounce": "^4.0.8",
-    "mammoth": "^1.8.0",
-    "mathjax": "^3.2.2",
-    "mathjax-react": "^2.0.1",
-    "mathjax3-react": "^1.2.0",
-    "mathquill": "0.10.1-a",
-    "nmath": "^1.0.0",
     "path-to-regexp": "^6.2.2",
-    "quill-image-resize-module": "^3.0.0",
+    "pdf-lib": "^1.17.1",
     "react": "^18.3.1",
-    "react-apexcharts": "^1.4.1",
-    "react-contenteditable": "^3.3.7",
     "react-dom": "^18.3.1",
-    "react-draft-wysiwyg": "^1.15.0",
-    "react-equation": "^1.0.0",
-    "react-google-docs-viewer": "^1.0.1",
-    "react-helmet": "^6.1.0",
     "react-i18next": "^13.5.0",
     "react-icons": "^4.12.0",
-    "react-katex": "^3.0.1",
-    "react-latex-next": "^3.0.0",
-    "react-math": "^0.0.1",
-    "react-math-keyboard": "^1.5.17",
-    "react-mathjax": "^1.0.1",
-    "react-mathjax2": "^0.0.2",
-    "react-mathquill": "^1.0.3",
     "react-query": "^3.39.3",
-    "react-quill": "^2.0.0",
     "react-router-dom": "^6.23.1",
-    "react-textarea-autosize": "^8.5.3",
     "react-toastify": "^9.1.3",
     "reactstrap": "^9.2.2",
     "sass": "^1.77.4",
-    "source-map-explorer": "^2.5.3",
+    "ts-node": "^10.9.2",
-    "typescript": "^4.9.5",
+    "vite-plugin-env-compatible": "^2.0.1",
     "yup": "^1.4.0",
     "zustand": "^4.5.2"
   },
@@ -91,16 +54,25 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/node": "^20.14.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/react-helmet": "^6.1.11",
+    "@vitejs/plugin-legacy": "^5.4.1",
     "@vitejs/plugin-react": "^4.3.0",
     "jest": "^29.7.0",
     "jsdom": "^24.1.0",
     "prettier": "^3.3.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "ts-jest": "^29.1.4",
-    "vite": "^5.2.12"
+    "ts-loader": "^9.5.1",
+    "typescript": "^4.9.5",
+    "vite": "^5.2.12",
+    "vite-plugin-compression": "^0.5.1",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4"
   }
 }

src/Components/Layout/Navbar/MenuItem.tsx

@@ -25,7 +25,10 @@ export const MenuItem = ({ item, location, index }: any) => {
         <i>{item.icon}</i>
         <Link to={item.path || "/"}>{t(item.text)}</Link>
         {item?.children && (
-          <DropdownToggle isOpen={isDropdownOpen} onClick={() => handleDropdown(index)} />
+          <DropdownToggle
+            isOpen={isDropdownOpen}
+            onClick={() => handleDropdown(index)}
+          />
         )}
       </div>
 

src/Components/Layout/Navbar/NavBarRightSide.tsx

@@ -1,54 +1,58 @@
-import React from 'react'
+import React from "react";
-import { getLocalStorage } from '../../../utils/LocalStorage';
+import { getLocalStorage } from "../../../utils/LocalStorage";
-import { USER_KEY } from '../../../config/AppKey';
+import { USER_KEY } from "../../../config/AppKey";
-import { translateOptions } from '../../../utils/translatedOptions';
+import { translateOptions } from "../../../utils/translatedOptions";
-import { search_array } from '../../../Routes';
+import { search_array } from "../../../Routes";
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
-import SearchFieldWithSelect from '../../DataTable/SearchFieldWithSelect';
+import SearchFieldWithSelect from "../../DataTable/SearchFieldWithSelect";
-import { Tooltip } from 'antd';
+import { Tooltip } from "antd";
-import useModalHandler from '../../../utils/useModalHandler';
+import useModalHandler from "../../../utils/useModalHandler";
-import { ModalEnum } from '../../../enums/Model';
+import { ModalEnum } from "../../../enums/Model";
-import Image from '../../Ui/Image';
+import Image from "../../Ui/Image";
 const NavBarRightSide = () => {
-    const userData = getLocalStorage(USER_KEY);
+  const userData = getLocalStorage(USER_KEY);
-    const [t] = useTranslation()
+  const [t] = useTranslation();
-    const translateArray = translateOptions(search_array, t);
+  const translateArray = translateOptions(search_array, t);
 
-    const { handel_open_model } = useModalHandler();
+  const { handel_open_model } = useModalHandler();
-    const handleEdit = () => {
+  const handleEdit = () => {
-        handel_open_model(ModalEnum.CHANGE_PASSWORD);
+    handel_open_model(ModalEnum.CHANGE_PASSWORD);
-      };
+  };
   return (
     <article>
-    <div className="header_search">
+      <div className="header_search">
-      <SearchFieldWithSelect
+        <SearchFieldWithSelect
-        options={translateArray}
+          options={translateArray}
-        placeholder={t("practical.search_here")}
+          placeholder={t("practical.search_here")}
-      />
+        />
-    </div>
-    <span className="header_icons">
-      <div>
-        <Image src="/Icon/bell.png" alt="Notifications" />
       </div>
-      <Tooltip
+      <span className="header_icons">
-        placement="top"
+        <div>
-        title={<div onClick={handleEdit}>{t("header.change_your_current_password")}</div>}
+          <Image src="/Icon/bell.png" alt="Notifications" />
-        color="#E0E0E0"
-      >
-        <div className="gear">
-          <Image src="/Icon/gear.png" alt="Settings" />
         </div>
-      </Tooltip>
+        <Tooltip
-    </span>
+          placement="top"
-    <div className="header_profile">
+          title={
-      <span>
+            <div onClick={handleEdit}>
-        <h6>{userData?.username}</h6>
+              {t("header.change_your_current_password")}
-        <p>{userData?.type}</p>
+            </div>
+          }
+          color="#E0E0E0"
+        >
+          <div className="gear">
+            <Image src="/Icon/gear.png" alt="Settings" />
+          </div>
+        </Tooltip>
       </span>
-      <Image src="/Layout/DefaultStudentImage.png" alt="Profile" />
+      <div className="header_profile">
-    </div>
+        <span>
-  </article>
+          <h6>{userData?.username}</h6>
-  )
+          <p>{userData?.type}</p>
-}
+        </span>
+        <Image src="/Layout/DefaultStudentImage.png" alt="Profile" />
+      </div>
+    </article>
+  );
+};
 
-export default NavBarRightSide
+export default NavBarRightSide;

src/Components/Layout/Navbar/SubMenu.tsx

@@ -10,7 +10,12 @@ const SubMenu: React.FC<SubMenuProps> = ({ items, location }) => {
   return (
     <div className="sub-menu">
       {items.map((childItem, index) => (
-        <MenuItem key={index} item={childItem} location={location} index={index} />
+        <MenuItem
+          key={index}
+          item={childItem}
+          location={location}
+          index={index}
+        />
       ))}
     </div>
   );

src/Components/Layout/SideBar/MenuItem.tsx

@@ -4,60 +4,60 @@ import { MdExpandLess, MdExpandMore } from "react-icons/md";
 import { Link, useNavigate } from "react-router-dom";
 
 export const MenuItem = ({ item, location, index }: any) => {
-    const isActive = location.pathname.split("/")[1] === item.path?.slice(1);
+  const isActive = location.pathname.split("/")[1] === item.path?.slice(1);
-    // console.log(location.pathname.split("/")[1]);
+  // console.log(location.pathname.split("/")[1]);
 
-    const [openDropdown, setOpenDropdown] = useState<number | null>(null);
+  const [openDropdown, setOpenDropdown] = useState<number | null>(null);
 
-    const handleDropdown = (index: number) => {
+  const handleDropdown = (index: number) => {
-      setOpenDropdown((prev) => (prev === index ? null : index));
+    setOpenDropdown((prev) => (prev === index ? null : index));
-    };
-  
-    const isDropdownOpen = openDropdown === index;
-    const [t] = useTranslation();
-    const navigate = useNavigate();
-  
-    return (
-      <>
-        <div
-          className={`link ${isActive ? "active" : ""} ${item?.children && "DropDownLink"} `}
-          onClick={() => navigate(item.path || "/")}
-        >
-          <i>{item.icon}</i>
-          <Link to={item.path || "/"}>{t(item.text)}</Link>
-          {item?.children && (
-            <>
-              {isDropdownOpen ? (
-                <div
-                  className="DropDownIcon"
-                  onClick={() => handleDropdown(index)}
-                >
-                  <MdExpandLess />
-                </div>
-              ) : (
-                <div
-                  className="DropDownIcon"
-                  onClick={() => handleDropdown(index)}
-                >
-                  <MdExpandMore />
-                </div>
-              )}
-            </>
-          )}
-        </div>
-  
-        {item?.children && isDropdownOpen && (
-          <div className="sub-menu">
-            {item.children.map((childItem: any, index: any) => (
-              <MenuItem
-                key={index}
-                item={childItem}
-                location={location}
-                index={index}
-              />
-            ))}
-          </div>
-        )}
-      </>
-    );
   };
+
+  const isDropdownOpen = openDropdown === index;
+  const [t] = useTranslation();
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <div
+        className={`link ${isActive ? "active" : ""} ${item?.children && "DropDownLink"} `}
+        onClick={() => navigate(item.path || "/")}
+      >
+        <i>{item.icon}</i>
+        <Link to={item.path || "/"}>{t(item.text)}</Link>
+        {item?.children && (
+          <>
+            {isDropdownOpen ? (
+              <div
+                className="DropDownIcon"
+                onClick={() => handleDropdown(index)}
+              >
+                <MdExpandLess />
+              </div>
+            ) : (
+              <div
+                className="DropDownIcon"
+                onClick={() => handleDropdown(index)}
+              >
+                <MdExpandMore />
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {item?.children && isDropdownOpen && (
+        <div className="sub-menu">
+          {item.children.map((childItem: any, index: any) => (
+            <MenuItem
+              key={index}
+              item={childItem}
+              location={location}
+              index={index}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
+};

src/Components/Routes/RenderRouteElement.tsx

@@ -3,17 +3,13 @@ import SpinContainer from "../Layout/SpinContainer";
 import Layout from "../../Layout/Ui/Layout";
 
 export const RenderRouteElement = (route: any) => (
-    <Suspense
+  <Suspense
-      fallback={
+    fallback={
-        <Layout>
+      <Layout>
-          <SpinContainer />
+        <SpinContainer />
-        </Layout>
+      </Layout>
-      }
+    }
-    >
+  >
-      {route.header ? (
+    {route.header ? <Layout>{route.element}</Layout> : route.element || <></>}
-        <Layout>{route.element}</Layout>
+  </Suspense>
-      ) : (
+);
-        route.element || <></>
-      )}
-    </Suspense>
-  );

src/Components/Routes/RenderRoutesRecursively.tsx

@@ -5,16 +5,15 @@ import { Route } from "react-router-dom";
 import { RenderRouteElement } from "./RenderRouteElement";
 
 export const renderRoutesRecursively = (routes: TMenuItem[]) =>
-    routes.map((route: TMenuItem) => {
+  routes.map((route: TMenuItem) => {
-      const useAbility = hasAbility(route.abilities, route.abilities_value);
+    const useAbility = hasAbility(route.abilities, route.abilities_value);
-      if (!useAbility) {
+    if (!useAbility) {
-        return false;
+      return false;
-      }
+    }
-        return (
+    return (
-          <React.Fragment key={route.path}>
+      <React.Fragment key={route.path}>
-            <Route path={route.path} element={RenderRouteElement(route)} />
+        <Route path={route.path} element={RenderRouteElement(route)} />
-            {route.children && renderRoutesRecursively(route.children)}
+        {route.children && renderRoutesRecursively(route.children)}
-          </React.Fragment>
+      </React.Fragment>
-        );
+    );
-
+  });
-    });

src/Layout/Ui/Layout.tsx

@@ -10,17 +10,14 @@ const Layout = ({
   children: React.ReactNode;
   className?: string;
 }) => {
-
   return (
-
+    <ProtectedRouteProvider className="Layout">
-      <ProtectedRouteProvider className="Layout">
+      <main className={`${className} Layout_Body`}>
-        <main className={`${className} Layout_Body`}>
+        <NavBar />
-          <NavBar />
+        <div className="Layout_Children">{children}</div>
-          <div className="Layout_Children">{children}</div>
+      </main>
-        </main>
+      <SideBar />
-        <SideBar />
+    </ProtectedRouteProvider>
-      </ProtectedRouteProvider>
-   
   );
 };
 

src/Layout/Ui/NavBar.tsx

@@ -17,7 +17,6 @@ const NavBar = () => {
   const navigate = useNavigate();
   const PrevPath = getPrevPathRoute(location.pathname);
 
-
   const handelNavigate = () => {
     if (PrevPath === 0) {
       return;
@@ -25,14 +24,13 @@ const NavBar = () => {
     navigate(deletePathSegments(location.pathname, PrevPath));
   };
 
-
   return (
     <div className="NavBar">
       <span className="navbar_link" onClick={handelNavigate}>
         <MdOutlineArrowForwardIos /> {PageTitle}
       </span>
-      <NavBarRightSide/>
+      <NavBarRightSide />
-      <Suspense fallback={<SpinContainer/>}>
+      <Suspense fallback={<SpinContainer />}>
         <ChangePasswordModel />
       </Suspense>
     </div>

src/Layout/Ui/SideBar.tsx

@@ -10,8 +10,6 @@ import { getLocalStorage } from "../../utils/LocalStorage";
 import { BRANCH_OBJECT_KEY } from "../../config/AppKey";
 import { MenuItem } from "../../Components/Layout/SideBar/MenuItem";
 
-
-
 const SideBar = () => {
   const location = useLocation();
 

src/ProviderContainer.tsx

@@ -9,17 +9,12 @@ function ProviderContainer({ children }: ChildrenType) {
   return (
     <BrowserRouter basename="/">
       <I18nProvider>
-          <QueryProvider>
+        <QueryProvider>
-        <ToastProvider>
+          <ToastProvider>
-          <AntdProvider>
+            <AntdProvider>{children}</AntdProvider>
-
+          </ToastProvider>
-            {children}
+        </QueryProvider>
-          </AntdProvider>
+      </I18nProvider>
-  
-        </ToastProvider>
-      </QueryProvider>
- 
-        </I18nProvider>
     </BrowserRouter>
   );
 }

src/Styles/Pages/Division.scss

@@ -70,7 +70,6 @@
       color: black;
     }
   }
-
 }
 .ModelBodyForm {
   padding: 2vw;

src/api/helper/useAxios.ts

@@ -1,4 +1,3 @@
-
 import useAuthState from "../../zustand/AuthState";
 import { BaseURL, HEADER_KEY } from "../config";
 import AxiosBuilder from "./AxiosBuilder";

src/enums/LocalStorageEnum.ts

@@ -1,7 +1,6 @@
 export enum LocalStorageEnum {
-    PROJECT_NAME = 'SCHOOL_DASHBOARD_EXERCISE',
+  PROJECT_NAME = "SCHOOL_DASHBOARD_EXERCISE",
-    LANGUAGE_KEY = LocalStorageEnum.PROJECT_NAME + '_LANGUAGE',
+  LANGUAGE_KEY = LocalStorageEnum.PROJECT_NAME + "_LANGUAGE",
-    TOKEN_KEY = LocalStorageEnum.PROJECT_NAME + '_TOKEN_KEY',
+  TOKEN_KEY = LocalStorageEnum.PROJECT_NAME + "_TOKEN_KEY",
-    USER_KEY = LocalStorageEnum.PROJECT_NAME + '_USER_KEY',
+  USER_KEY = LocalStorageEnum.PROJECT_NAME + "_USER_KEY",
-  }
+}
-  

src/lib/AntdProvider.tsx

@@ -1,4 +1,4 @@
-import { ConfigProvider } from 'antd';
+import { ConfigProvider } from "antd";
 
 function AntdProvider({ children }: { children: React.ReactNode }) {
   const primaryColor = "#3182ce";
@@ -6,18 +6,18 @@ function AntdProvider({ children }: { children: React.ReactNode }) {
 
   return (
     <ConfigProvider
-    theme={{
+      theme={{
-      token: {
+        token: {
-        colorPrimary: primaryColor,
+          colorPrimary: primaryColor,
-      },
-      components: {
-        Table: {
-          headerBg: bgColor,
-          headerColor: primaryColor,
         },
-      },
+        components: {
-    }}
+          Table: {
-  >
+            headerBg: bgColor,
+            headerColor: primaryColor,
+          },
+        },
+      }}
+    >
       {children}
     </ConfigProvider>
   );

src/lib/I18nProvider.tsx

@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode } from "react";
-import { I18nextProvider } from 'react-i18next';
+import { I18nextProvider } from "react-i18next";
-import i18n from './i18nConfig'; // Import the configured i18n instance
+import i18n from "./i18nConfig"; // Import the configured i18n instance
 
 interface I18nProviderProps {
   children: ReactNode;

src/lib/ProtectedRouteProvider.tsx

@@ -6,7 +6,10 @@ interface ProtectedRouteProviderProps extends React.HTMLProps<HTMLDivElement> {
   children: React.ReactNode;
 }
 
-function ProtectedRouteProvider({ children, ...props }: ProtectedRouteProviderProps) {
+function ProtectedRouteProvider({
+  children,
+  ...props
+}: ProtectedRouteProviderProps) {
   const navigate = useNavigate();
   const { isAuthenticated } = useAuthState();
 
@@ -16,11 +19,7 @@ function ProtectedRouteProvider({ children, ...props }: ProtectedRouteProviderPr
     }
   }, [isAuthenticated, navigate]);
 
-  return (
+  return <div {...props}>{children}</div>;
-    <div {...props}>
-      {children}
-    </div>
-  );
 }
 
 export default ProtectedRouteProvider;

src/lib/i18nConfig.tsx

@@ -1,6 +1,6 @@
-import i18n from 'i18next';
+import i18n from "i18next";
-import { initReactI18next } from 'react-i18next';
+import { initReactI18next } from "react-i18next";
-import translationAR from '../translate/ar.json';
+import translationAR from "../translate/ar.json";
 
 const resources = {
   ar: {
@@ -10,7 +10,7 @@ const resources = {
 
 i18n.use(initReactI18next).init({
   resources,
-  lng: 'ar', // Set the default language
+  lng: "ar", // Set the default language
   interpolation: {
     escapeValue: false,
   },