fixx

package.json

@@ -11,6 +11,7 @@
     "formik": "^2.4.6",
     "html-to-image": "^1.11.11",
     "i18next": "^23.11.5",
+    "lottie-react": "^2.4.0",
     "path-to-regexp": "^6.2.2",
     "pdf-lib": "^1.17.1",
     "react": "^18.3.1",
@@ -18,7 +19,6 @@
     "react-dom": "^18.3.1",
     "react-i18next": "^13.5.0",
     "react-icons": "^4.12.0",
-    "react-mathjax": "^1.0.1",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.23.1",
     "react-toastify": "^9.1.3",

pnpm-lock.yaml

@@ -32,6 +32,9 @@ importers:
       i18next:
         specifier: ^23.11.5
         version: 23.11.5
+      lottie-react:
+        specifier: ^2.4.0
+        version: 2.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       path-to-regexp:
         specifier: ^6.2.2
         version: 6.2.2
@@ -53,9 +56,6 @@ importers:
       react-icons:
         specifier: ^4.12.0
         version: 4.12.0(react@18.3.1)
-      react-mathjax:
-        specifier: ^1.0.1
-        version: 1.0.1(react@18.3.1)
       react-query:
         specifier: ^3.39.3
         version: 3.39.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -2535,9 +2535,6 @@ packages:
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
-  load-script@1.0.0:
-    resolution: {integrity: sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==}
-
   loader-runner@4.3.0:
     resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
     engines: {node: '>=6.11.5'}
@@ -2562,6 +2559,15 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
+  lottie-react@2.4.0:
+    resolution: {integrity: sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+
+  lottie-web@5.12.2:
+    resolution: {integrity: sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==}
+
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
@@ -3098,11 +3104,6 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
-  react-mathjax@1.0.1:
-    resolution: {integrity: sha512-+mjFcciZY3GQoqiQm3aRTyDjgBKuoaXpY+SCONX00jScuPpTKwnASeFMS5+pbTIzDf5zPT2Y9ZZfQ9U/d4CKtQ==}
-    peerDependencies:
-      react: ^16.3.0
-
   react-popper@2.3.0:
     resolution: {integrity: sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==}
     peerDependencies:
@@ -6796,8 +6797,6 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
-  load-script@1.0.0: {}
-
   loader-runner@4.3.0: {}
 
   locate-path@5.0.0:
@@ -6816,6 +6815,14 @@ snapshots:
     dependencies:
       js-tokens: 4.0.0
 
+  lottie-react@2.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      lottie-web: 5.12.2
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  lottie-web@5.12.2: {}
+
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
@@ -7416,11 +7423,6 @@ snapshots:
 
   react-is@18.3.1: {}
 
-  react-mathjax@1.0.1(react@18.3.1):
-    dependencies:
-      load-script: 1.0.0
-      react: 18.3.1
-
   react-popper@2.3.0(@popperjs/core@2.11.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@popperjs/core': 2.11.8

src/Components/CustomFields/ImageBoxField/ImageBoxField.scss

@@ -0,0 +1,42 @@
+.ImageBoxField{
+    
+    .ImageBox{
+        width: 120px;
+        height: 120px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: max(1.5px,.1vw) dashed #a9c3f1;
+        margin-block: 10px;
+        border-radius: 5px;
+        .ImageBoxIcon{
+            cursor: pointer;
+        }
+        .imagePreview{
+            max-width: 99%;
+            height: auto;
+            max-height: 99%;
+            object-fit: contain;
+            border-radius: 5px;
+        }
+      
+    
+    }
+    .ImageHeader{
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 10px;
+        
+    }
+
+    .ImageCancelIcon{
+        width: 16px !important;
+        height: 16px !important;
+    }
+    .ImageBoxIcon{
+        width: 20px !important;
+        height: 20px !important;
+    }
+
+}

src/Components/CustomFields/ImageBoxField/ImageBoxField.tsx

@@ -0,0 +1,74 @@
+import { useFormikContext } from "formik";
+import { useTranslation } from "react-i18next";
+import { useState, useRef } from "react";
+import './ImageBoxField.scss';
+import ImageIcon from "./ImageIcon";
+import ImageCancelIcon from "./ImageCancelIcon";
+
+const ImageBoxField = ({ name }: any) => {
+  const formik = useFormikContext<any>();
+  const [imagePreview, setImagePreview] = useState<string | null>("");
+  const [t] = useTranslation();
+  
+  const fileInputRef = useRef<HTMLInputElement | null>(null); 
+
+  const handleFileChange = (event: any) => {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setImagePreview(reader.result as string);
+      };
+      reader.readAsDataURL(file);
+      formik.setFieldValue(name, file);
+    }
+  };
+
+  const handleButtonClick = () => {
+    const fileInput = fileInputRef.current;
+    if (fileInput) {
+      fileInput.click(); 
+    }
+  };
+
+  const handleCancel = () => {
+    setImagePreview("");
+    formik.setFieldValue(name, "");
+    
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  return (
+    <div className="ImageBoxField">
+      <div className="ImageHeader">
+        {imagePreview ? (
+          <>
+            <ImageCancelIcon onClick={handleCancel} className="ImageCancelIcon" />
+            <ImageIcon onClick={handleButtonClick} className="ImageBoxIcon" />
+          </>
+        ) : (
+          <></>
+        )}
+      </div>
+      <div className="ImageBox">
+        {imagePreview ? (
+          <img src={imagePreview} alt="Preview" className="imagePreview" />
+        ) : (
+          <ImageIcon onClick={handleButtonClick} className="ImageBoxIcon" />
+        )}
+      </div>
+      <input
+        id={`file-input-${name}`}
+        type="file"
+        accept="image/*"
+        style={{ display: "none" }}
+        onChange={handleFileChange}
+        ref={fileInputRef}
+      />
+    </div>
+  );
+};
+
+export default ImageBoxField;

src/Components/CustomFields/ImageBoxField/ImageCancelIcon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface ImageCancelIconProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+
+const ImageCancelIcon: React.FC<ImageCancelIconProps> = (props) => {
+    return (
+        <div {...props}>
+    <svg
+  viewBox="0 0 14 14"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M7 5.44469L12.4447 0L14 1.55531L8.55531 7L14 12.4447L12.4436 14L6.9989 8.55531L1.55531 14L0 12.4436L5.44469 6.9989L0 1.55421L1.55531 0.00109986L7 5.44469Z"
+    fill="#515B73"
+  />
+</svg>
+
+        </div>
+    );
+}
+
+export default ImageCancelIcon;
+
+
+

src/Components/CustomFields/ImageBoxField/ImageIcon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface ImageIconProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+
+const ImageIcon: React.FC<ImageIconProps> = (props) => {
+    return (
+        <div {...props}>
+            <svg
+           
+                viewBox="0 0 20 20"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M11.25 5.625C11.25 7.11684 10.6574 8.54758 9.60248 9.60248C8.54758 10.6574 7.11684 11.25 5.625 11.25C4.13316 11.25 2.70242 10.6574 1.64752 9.60248C0.592632 8.54758 0 7.11684 0 5.625C0 4.13316 0.592632 2.70242 1.64752 1.64752C2.70242 0.592632 4.13316 0 5.625 0C7.11684 0 8.54758 0.592632 9.60248 1.64752C10.6574 2.70242 11.25 4.13316 11.25 5.625ZM6.25 3.125C6.25 2.95924 6.18415 2.80027 6.06694 2.68306C5.94973 2.56585 5.79076 2.5 5.625 2.5C5.45924 2.5 5.30027 2.56585 5.18306 2.68306C5.06585 2.80027 5 2.95924 5 3.125V5H3.125C2.95924 5 2.80027 5.06585 2.68306 5.18306C2.56585 5.30027 2.5 5.45924 2.5 5.625C2.5 5.79076 2.56585 5.94973 2.68306 6.06694C2.80027 6.18415 2.95924 6.25 3.125 6.25H5V8.125C5 8.29076 5.06585 8.44973 5.18306 8.56694C5.30027 8.68415 5.45924 8.75 5.625 8.75C5.79076 8.75 5.94973 8.68415 6.06694 8.56694C6.18415 8.44973 6.25 8.29076 6.25 8.125V6.25H8.125C8.29076 6.25 8.44973 6.18415 8.56694 6.06694C8.68415 5.94973 8.75 5.79076 8.75 5.625C8.75 5.45924 8.68415 5.30027 8.56694 5.18306C8.44973 5.06585 8.29076 5 8.125 5H6.25V3.125ZM16.25 3.75H12.2413C12.1187 3.3183 11.9542 2.89964 11.75 2.5H16.25C17.2446 2.5 18.1984 2.89509 18.9017 3.59835C19.6049 4.30161 20 5.25544 20 6.25V16.25C20 17.2446 19.6049 18.1984 18.9017 18.9017C18.1984 19.6049 17.2446 20 16.25 20H6.25C5.25544 20 4.30161 19.6049 3.59835 18.9017C2.89509 18.1984 2.5 17.2446 2.5 16.25V11.75C2.89667 11.9533 3.31333 12.1171 3.75 12.2413V16.25C3.75 16.7162 3.8775 17.1525 4.1 17.525L9.93625 11.79C10.2869 11.4457 10.7586 11.2528 11.25 11.2528C11.7414 11.2528 12.2131 11.4457 12.5637 11.79L18.4012 17.525C18.6298 17.139 18.7502 16.6986 18.75 16.25V6.25C18.75 5.58696 18.4866 4.95107 18.0178 4.48223C17.5489 4.01339 16.913 3.75 16.25 3.75ZM16.25 8.125C16.25 8.37123 16.2015 8.61505 16.1073 8.84253C16.013 9.07002 15.8749 9.27672 15.7008 9.45083C15.5267 9.62494 15.32 9.76305 15.0925 9.85727C14.865 9.9515 14.6212 10 14.375 10C14.1288 10 13.885 9.9515 13.6575 9.85727C13.43 9.76305 13.2233 9.62494 13.0492 9.45083C12.8751 9.27672 12.737 9.07002 12.6427 8.84253C12.5485 8.61505 12.5 8.37123 12.5 8.125C12.5 7.62772 12.6975 7.15081 13.0492 6.79917C13.4008 6.44754 13.8777 6.25 14.375 6.25C14.8723 6.25 15.3492 6.44754 15.7008 6.79917C16.0525 7.15081 16.25 7.62772 16.25 8.125ZM15 8.125C15 7.95924 14.9342 7.80027 14.8169 7.68306C14.6997 7.56585 14.5408 7.5 14.375 7.5C14.2092 7.5 14.0503 7.56585 13.9331 7.68306C13.8158 7.80027 13.75 7.95924 13.75 8.125C13.75 8.29076 13.8158 8.44973 13.9331 8.56694C14.0503 8.68415 14.2092 8.75 14.375 8.75C14.5408 8.75 14.6997 8.68415 14.8169 8.56694C14.9342 8.44973 15 8.29076 15 8.125ZM4.985 18.4075C5.36871 18.6321 5.80538 18.7504 6.25 18.75H16.25C16.7125 18.75 17.1437 18.625 17.515 18.4075L11.6875 12.6825C11.5707 12.568 11.4136 12.5038 11.25 12.5038C11.0864 12.5038 10.9293 12.568 10.8125 12.6825L4.985 18.4075Z"
+                    fill="#515B73"
+                />
+            </svg>
+        </div>
+    );
+}
+
+export default ImageIcon;
+
+
+

src/Components/Lottie/Loading/LoadingLottie.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Lottie from 'lottie-react'; // Default import
+import animationData from './Loading.json'; // Import your Lottie JSON animation
+
+const LoadingLottie = () => {
+  return (
+    <div className="cc">
+      <Lottie animationData={animationData} loop={true} style={{ width: 300, height: 300 }} />
+    </div>
+  );
+};
+
+export default LoadingLottie;

src/Components/Lottie/NotFound/NotFoundLottie.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Lottie from 'lottie-react'; // Default import
+import animationData from './NotFound.json'; // Import your Lottie JSON animation
+
+const NotFoundLottie = () => {
+  return (
+    <div className="cc">
+      <Lottie animationData={animationData} loop={true} style={{ width: 300, height: 300 }} />
+    </div>
+  );
+};
+
+export default NotFoundLottie;

src/Components/ValidationField/View/File.tsx

@@ -15,8 +15,7 @@ const File = ({
 }: any) => {
   const { formik, t, isError, errorMsg } = useFormField(name, props);
   let imageUrl = formik?.values?.[name] ?? null;
-  console.log(imageUrl);
+
-  console.log(typeof imageUrl === "string");
 
   const fileList: UploadFile[] = useMemo(() => {
     if (!imageUrl) return [];

src/Layout/Dashboard/Table/DataTable.tsx

@@ -8,6 +8,8 @@ import {
   EmptyData,
 } from ".";
 import { DataTableProps } from "../../../types/Table";
+import NotFoundLottie from "../../../Components/Lottie/NotFound/NotFoundLottie";
+import LoadingLottie from "../../../Components/Lottie/Loading/LoadingLottie";
 
 const DataTable: React.FC<DataTableProps> = ({
   response,
@@ -22,29 +24,38 @@ const DataTable: React.FC<DataTableProps> = ({
   const getRowClassName = (record: any, index: number): string => {
     return index % 2 === 0 ? "even-row" : "odd-row";
   };
+  const isRefetching = response?.isRefetching;
+  const isLoading = response?.isLoading;
+
   return (
     <Table
+    style={{minHeight:"300px"}} 
       columns={columns}
       dataSource={dataSource}
       rowClassName={(record, index) => getRowClassName(record, index)}
       className="DataTable"
       loading={{
-        spinning: response?.isLoading,
+        spinning: isLoading || isRefetching,
-        indicator: <Loading />,
+        indicator: <LoadingLottie />,
         size: "large",
       }}
       locale={{
         emptyText: (
-          <EmptyData
+          isLoading || isRefetching  ? 
-            loading={response?.isLoading}
+          <></>
-            header={t("Table.header")}
+          :
-            info={t("Table.info")}
+          <NotFoundLottie
+          
           />
         ),
       }}
       pagination={{
         ...pagination,
         onChange: handlePageChange,
+        nextIcon:<>{t("practical.next")}</>,
+        prevIcon:<> {t("practical.prev")} </>,
+        className:"pagination_antd"
+      
       }}
       {...props}
     />

src/Layout/Dashboard/usePagination.ts

@@ -12,14 +12,14 @@ const usePagination = (data: Data) => {
 
   const [pagination, setPagination] = useState<PaginationAntd>({
     current: data?.meta?.current_page || 1,
-    pageSize: data?.meta?.per_page || 10,
+    pageSize: data?.meta?.per_page || 2,
     total: data?.meta?.total || 0,
   });
 
   useEffect(() => {
     setPagination({
       current: data?.meta?.current_page || 1,
-      pageSize: data?.meta?.per_page || 10,
+      pageSize: data?.meta?.per_page || 2,
       total: data?.meta?.total || 0,
     });
   }, [data]);

src/Layout/Ui/NavBar.tsx

@@ -32,7 +32,7 @@ const NavBar = ({isOpen}:{isOpen:boolean}) => {
 
   return (
     <div className="NavBar">
-      <Suspense fallback={<SpinContainer />}>
+      <Suspense fallback={<></>}>
       {/* <span className="navbar_link" onClick={handelNavigate}>
         <MdOutlineArrowForwardIos /> {PageTitle}
       </span> */}

src/Pages/Admin/User/Page.tsx

@@ -1,10 +1,8 @@
-import { FaPlus } from "react-icons/fa";
-import useModalHandler from "../../../utils/useModalHandler";
 import { ModalEnum } from "../../../enums/Model";
 import { useTranslation } from "react-i18next";
 import { lazy, Suspense } from "react";
 import { Spin } from "antd";
-import { canAddReport, canAddTags, canAddUser } from "../../../utils/hasAbilityFn";
+import {  canAddUser } from "../../../utils/hasAbilityFn";
 import useSetPageTitle from "../../../Hooks/useSetPageTitle";
 import { useDeleteTag } from "../../../api/tags";
 import PageHeader from "../../../Layout/Dashboard/PageHeader";
@@ -14,12 +12,8 @@ const Table = lazy(() => import("./Table"));
 const AddModalForm = lazy(() => import("./Model/AddModel"));
 const EditModalForm = lazy(() => import("./Model/EditModel"));
 const DeleteModalForm = lazy(() => import("../../../Layout/Dashboard/DeleteModels"));
-const SearchField = lazy(
-  () => import("../../../Components/DataTable/SearchField"),
-);
 
 const TableHeader = () => {
-  const { handel_open_model } = useModalHandler();
   const [t] = useTranslation();
   useSetPageTitle(
     t(`page_header.user`),

src/Pages/Admin/User/Table.tsx

@@ -10,6 +10,7 @@ const App: React.FC = () => {
   const response = useGetAllUser({
     name: searchQuery,
     pagination: true,
+    
   });
 
   return <DataTable response={response} useColumns={useColumns} />;

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

@@ -3,7 +3,6 @@ import React, { useEffect } from "react";
 import ValidationField from "../../../../../Components/ValidationField/ValidationField";
 import { useFormikContext } from "formik";
 import { useModalState } from "../../../../../zustand/Modal";
-import PdfUploader from "../../../../../Components/CustomFields/PdfUploader";
 import ChoiceFields from "./ChoiceField/ChoiceFields";
 import { FaCirclePlus } from "react-icons/fa6";
 import { Choice } from "../../../../../types/Item";

src/Pages/Home/Dummy.tsx

@@ -3,6 +3,7 @@ import Image from "../../Components/Ui/Image";
 import { useTranslation } from "react-i18next";
 import { ABILITIES_ENUM } from "../../enums/abilities";
 import useSetPageTitle from "../../Hooks/useSetPageTitle";
+import NotFoundLottie from "../../Components/Lottie/NotFound/NotFoundLottie";
 
 const Dummy = () => {
   const [t] = useTranslation();
@@ -10,7 +11,7 @@ const Dummy = () => {
 
   return (
     <div className="DummyHomePage">
-      <Image src="/App/SyriaLogo.webp" />
+        <NotFoundLottie/>
     </div>
   );
 };

src/Routes.tsx

@@ -21,12 +21,13 @@ const User = React.lazy(() => import("./Pages/Admin/User/Page"));
 import { hasAbility } from "./utils/hasAbility";
 import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "./enums/abilities";
 import { ParamsEnum } from "./enums/params";
+import { TbCategory } from "react-icons/tb";
 
 export const menuItems: TMenuItem[] = [
   {
     header: "page_header.dashboard",
     element: <Dummy />,
-    icon: <FaHome />,
+    icon: <TbCategory  />,
     text: "sidebar.dashboard",
     path: "/",
     abilities: ABILITIES_ENUM?.PASS,

src/Styles/Antd/Mix.scss

@@ -47,3 +47,8 @@
     }
   }
 }
+
+
+.pagination_antd{
+  margin-inline: 16px !important;
+}

src/Styles/App/Varibils.scss

@@ -11,16 +11,16 @@
   --border-color: #b0d9ff;
   --shadow: rgba(0, 0, 0, 0.15);
   --white: white;
-  --bgsidebar: #0F0C1C;
+  --bgSideBar: #0F0C1C;
-  --textsidebar: #FFFFFF;
+  --textSideBar: #FFFFFF;
-  --sidebarwidth: 17.5vw;
+  --sideBarWidth: 17.5vw;
-  --sidebarwidthClosed: 5vw;
+  --sideBarWidthClosed: 80px;
-  --sidebarminwidth: 17.5vw;
+  --sideBarMinWidth: 250px;
-  --sidebarspace: 1%;
+  --sideBarSpace: 1%;
+  --navBarHeight:70px;
   --links: #25638f;
-
   --button: #2d3748;
-  --layoutpadding: 3%;
+  --layoutPadding: 3%;
   --border-radius: 10px;
 
   --utils_color_one: #fb7d5b;
@@ -50,15 +50,15 @@
   --border-color: #b0d9ff;
   --shadow: rgba(0, 0, 0, 0.15);
   --white: white;
-  --bgsidebar: #0F0C1C;
+  --bgSideBar: #0F0C1C;
-  --textsidebar: #FFFFFF;
+  --textSideBar: #FFFFFF;
-  --sidebarwidth: 14vw;
+  --sideBarWidth: 14vw;
-  --sidebarminwidth: 14vw;
+  --sideBarMinWidth: 14vw;
-  --sidebarspace: 1%;
+  --sideBarSpace: 1%;
   --links: #25638f;
 
   --button: #2d3748;
-  --layoutpadding: 3%;
+  --layoutPadding: 3%;
   --border-radius: 10px;
 
   --utils_color_one: #fb7d5b;

src/Styles/App/classNames.scss

@@ -305,3 +305,11 @@ button:disabled {
     background: #dc2626;
   }
 }
+
+
+
+.cc{
+   display: flex;
+   justify-content: center;
+   align-items: center;
+}

src/Styles/Layout/Layout.scss

@@ -10,20 +10,6 @@
   overflow-x: hidden;
   overflow-y: hidden;
 
-  &::after {
-    // z-index: 1;
-    // content: "";
-    // position: absolute;
-    // top: 0;
-    // width: 100%;
-    // height: 100px;
-    // // max-height: 130px;
-    // height: 14vh;
-    // background-repeat: no-repeat;
-    // background-size: cover;
-
-    // background-image: url("/Layout/BackgroundHeader.webp");
-  }
 }
 
 .Layout_Body {
@@ -33,12 +19,12 @@
   transition: all 0.6s ease;
   // min-height: 100vh;
   position: relative;
-  padding-right: calc(250px + var(--sidebarspace));
+  padding-right: calc(max(var(--sideBarWidth),var(--sideBarMinWidth)));
-  // padding-top: var(--sidebarspace);
+  // padding-top: var(--sideBarSpace);
   z-index: 2;
 }
 .side_bar_close{
-  padding-right: 70px;
+  padding-right: var(--sideBarWidthClosed);
 }
 .Layout_Children {
   background-color: red;
@@ -51,7 +37,7 @@
 .en {
   .Layout_Body {
     padding-right: 0 !important;
-    padding-left: calc(var(--sidebarwidth) + var(--sidebarspace));
+    padding-left: calc(var(--sideBarWidth) + var(--sideBarSpace));
   }
 }
 .Layout_Children {

src/Styles/Layout/NavBar.scss

@@ -2,12 +2,12 @@
   display: flex;
   justify-content: space-between;align-items: center;
   width: 100%;
-  height: 70px;
+  height: var(--navBarHeight);
   // gap: 30px;
   z-index: 4;
   // margin-top: 3vh;
   // margin-bottom: 3vh;
-  padding-inline: var(--layoutpadding);
+  padding-inline: var(--layoutPadding);
   background: var(--primary);
   .navbar_link {
     display: flex;

src/Styles/Layout/SideBar.scss

@@ -1,17 +1,17 @@
 .en {
   .side_bar {
-    left: var(--sidebarspace);
+    left: var(--sideBarSpace);
   }
 }
 .side_bar {
   position: fixed !important;
-  width: var(--sidebarwidth);
+  width: var(--sideBarWidth);
-  min-width: var(--sidebarminwidth);
+  min-width: var(--sideBarMinWidth);
   height: 100vh;
   overflow-y: auto;
   overflow-x: hidden;
-  background: var(--bgsidebar);
+  background: var(--bgSideBar);
-  color: var(--textsidebar);
+  color: var(--textSideBar);
   position: absolute;
   transition: all 0.6s ease;
   padding: 0% 0% 2% 0%;
@@ -21,7 +21,7 @@
 
 
   .side_bar_header{
-    height: 86.87px;
+    height: var(--navBarHeight);
     display: flex;align-items: center;justify-content: space-between;
     background: var(--primary);
     padding-inline: 15px;
@@ -59,9 +59,9 @@
   .side_bar_links {
     display: flex;
     flex-direction: column;
+    flex: 1;
     gap: 0.5vw;
     padding-inline: 7%;
-    height: 90vh;
     // overflow-y: auto;
     scroll-behavior: smooth;
     scroll-padding: 10rem;
@@ -99,6 +99,7 @@
   .side_bar_setting{
     gap: 0.5vw;
     padding-inline: 7%;
+    
     p{
       font-size: 18px;
       margin-bottom: 5px;
@@ -180,13 +181,14 @@
 }
 
 .side_bar_closed{
-  width: var(--sidebarwidthClosed)  !important;
+  width: var(--sideBarWidthClosed)  !important;
-  min-width: var(--sidebarwidthClosed);
+  min-width: var(--sideBarWidthClosed);
+  
   .side_bar_header{
     @include Flex;
-    height: 95px;
+    height: var(--navBarHeight);
     img{
-      width: 50%;
+      width: 70%;
     }
     svg{
       display: none;

src/api/helper/useGetQuery.ts

@@ -20,7 +20,7 @@ function useGetQuery(
   const { page, per_page } = PaginationParams(location);
 
   const paramToSend = pagination
-    ? { ...remainingParams, page: page, per_page: per_page }
+    ? { page: page, per_page: per_page , ...remainingParams}
     : { ...remainingParams };
 
   const filteredParams = filterParams(paramToSend);

src/translate/ar.json

@@ -202,7 +202,9 @@
     "accept": "قبول ",
     "to_confirm_deletion_please_re_enter_id": "يرجى اعادة ادخال رقم التعريف",
     "delete_this_item": "احذف العنصر",
-    "reset": "اعادة تعيين"
+    "reset": "اعادة تعيين",
+    "next":"التالي",
+    "prev":"السابق"
   },
   "Table": {
     "header": "",