fix scss and remove un nesasery code

package.json

@@ -9,11 +9,8 @@
     "bootstrap": "^5.3.3",
     "dayjs": "^1.11.11",
     "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",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.3.1",
@@ -24,8 +21,6 @@
     "react-toastify": "^9.1.3",
     "reactstrap": "^9.2.2",
     "sass": "^1.77.4",
-    "ts-node": "^10.9.2",
-    "vite-plugin-env-compatible": "^2.0.1",
     "yup": "^1.4.0",
     "zustand": "^4.5.2"
   },

pnpm-lock.yaml

@@ -26,21 +26,12 @@ importers:
       formik:
         specifier: ^2.4.6
         version: 2.4.6(react@18.3.1)
-      html-to-image:
-        specifier: ^1.11.11
-        version: 1.11.11
       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
-      pdf-lib:
-        specifier: ^1.17.1
-        version: 1.17.1
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -71,12 +62,6 @@ importers:
       sass:
         specifier: ^1.77.4
         version: 1.77.4
-      ts-node:
-        specifier: ^10.9.2
-        version: 10.9.2(@types/node@20.14.0)(typescript@4.9.5)
-      vite-plugin-env-compatible:
-        specifier: ^2.0.1
-        version: 2.0.1
       yup:
         specifier: ^1.4.0
         version: 1.4.0
@@ -1122,12 +1107,6 @@ packages:
   '@jridgewell/trace-mapping@0.3.9':
     resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
 
-  '@pdf-lib/standard-fonts@1.0.0':
-    resolution: {integrity: sha512-hU30BK9IUN/su0Mn9VdlVKsWBS6GyhVfqjwl1FjZN4TxP6cCw0jP2w7V3Hf5uX7M0AZJ16vey9yE0ny7Sa59ZA==}
-
-  '@pdf-lib/upng@1.0.1':
-    resolution: {integrity: sha512-dQK2FUMQtowVP00mtIksrlZhdFXQZPC+taih1q4CvPZ5vqdxR/LKBaFg0oAfzd1GlHZXXSPdQfzQnt+ViGvEIQ==}
-
   '@popperjs/core@2.11.8':
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
 
@@ -1883,13 +1862,6 @@ packages:
   dom-helpers@5.2.1:
     resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
 
-  dotenv-expand@5.1.0:
-    resolution: {integrity: sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==}
-
-  dotenv@8.2.0:
-    resolution: {integrity: sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==}
-    engines: {node: '>=8'}
-
   electron-to-chromium@1.4.788:
     resolution: {integrity: sha512-ubp5+Ev/VV8KuRoWnfP2QF2Bg+O2ZFdb49DiiNbz2VmgkIqrnyYaqIOqj8A6K/3p1xV0QcU5hBQ1+BmB6ot1OA==}
 
@@ -2139,9 +2111,6 @@ packages:
   html-parse-stringify@3.0.1:
     resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
 
-  html-to-image@1.11.11:
-    resolution: {integrity: sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==}
-
   http-proxy-agent@7.0.2:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
@@ -2720,9 +2689,6 @@ packages:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
 
-  pako@1.0.11:
-    resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
-
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -2749,16 +2715,10 @@ packages:
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
-  path-to-regexp@6.2.2:
-    resolution: {integrity: sha512-GQX3SSMokngb36+whdpRXE+3f9V8UzyAorlYvOGx87ufGHehNTn5lCxrKtLyZ4Yl/wEKnNnr98ZzOwwDZV5ogw==}
-
   path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
-  pdf-lib@1.17.1:
-    resolution: {integrity: sha512-V/mpyJAoTsN4cnP31vc0wfNA1+p20evqqnap0KLoRUN0Yk/p3wN52DOEsL4oBFcLdb76hlpKPtzJIgo67j/XLw==}
-
   picocolors@1.0.1:
     resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
 
@@ -3541,9 +3501,6 @@ packages:
       '@swc/wasm':
         optional: true
 
-  tslib@1.14.1:
-    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
-
   tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
 
@@ -3634,9 +3591,6 @@ packages:
     peerDependencies:
       vite: '>=2.0.0'
 
-  vite-plugin-env-compatible@2.0.1:
-    resolution: {integrity: sha512-DRrOZTg/W44ojVQQfGSMPEgYQGzp5TeIpt9cpaK35hTOC/b2D7Ffl8/RIgK8vQ0mlnDIUgETcA173bnMEkyzdw==}
-
   vite@5.2.12:
     resolution: {integrity: sha512-/gC8GxzxMK5ntBwb48pR32GGhENnjtY30G4A0jemunsBkiEZFw60s8InGpN8gkhHEkjnRK1aSAxeQgwvFhUHAA==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -4765,6 +4719,7 @@ snapshots:
   '@cspotcode/source-map-support@0.8.1':
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
+    optional: true
 
   '@ctrl/tinycolor@3.6.1': {}
 
@@ -5043,14 +4998,7 @@ snapshots:
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
-
+    optional: true
-  '@pdf-lib/standard-fonts@1.0.0':
-    dependencies:
-      pako: 1.0.11
-
-  '@pdf-lib/upng@1.0.1':
-    dependencies:
-      pako: 1.0.11
 
   '@popperjs/core@2.11.8': {}
 
@@ -5222,13 +5170,17 @@ snapshots:
       '@babel/runtime': 7.24.6
       '@testing-library/dom': 9.3.3
 
-  '@tsconfig/node10@1.0.11': {}
+  '@tsconfig/node10@1.0.11':
+    optional: true
 
-  '@tsconfig/node12@1.0.11': {}
+  '@tsconfig/node12@1.0.11':
+    optional: true
 
-  '@tsconfig/node14@1.0.3': {}
+  '@tsconfig/node14@1.0.3':
+    optional: true
 
-  '@tsconfig/node16@1.0.4': {}
+  '@tsconfig/node16@1.0.4':
+    optional: true
 
   '@types/aria-query@5.0.4': {}
 
@@ -5460,6 +5412,7 @@ snapshots:
   acorn-walk@8.3.3:
     dependencies:
       acorn: 8.12.1
+    optional: true
 
   acorn@8.12.1: {}
 
@@ -5558,7 +5511,8 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
-  arg@4.1.3: {}
+  arg@4.1.3:
+    optional: true
 
   argparse@1.0.10:
     dependencies:
@@ -5867,7 +5821,8 @@ snapshots:
       - supports-color
       - ts-node
 
-  create-require@1.1.1: {}
+  create-require@1.1.1:
+    optional: true
 
   cross-spawn@7.0.3:
     dependencies:
@@ -5954,7 +5909,8 @@ snapshots:
 
   diff-sequences@29.6.3: {}
 
-  diff@4.0.2: {}
+  diff@4.0.2:
+    optional: true
 
   dom-accessibility-api@0.5.16: {}
 
@@ -5963,10 +5919,6 @@ snapshots:
       '@babel/runtime': 7.24.6
       csstype: 3.1.3
 
-  dotenv-expand@5.1.0: {}
-
-  dotenv@8.2.0: {}
-
   electron-to-chromium@1.4.788: {}
 
   electron-to-chromium@1.5.5: {}
@@ -6216,8 +6168,6 @@ snapshots:
     dependencies:
       void-elements: 3.1.0
 
-  html-to-image@1.11.11: {}
-
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.1
@@ -6955,8 +6905,6 @@ snapshots:
 
   p-try@2.2.0: {}
 
-  pako@1.0.11: {}
-
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -6981,18 +6929,9 @@ snapshots:
 
   path-parse@1.0.7: {}
 
-  path-to-regexp@6.2.2: {}
-
   path-type@4.0.0:
     optional: true
 
-  pdf-lib@1.17.1:
-    dependencies:
-      '@pdf-lib/standard-fonts': 1.0.0
-      '@pdf-lib/upng': 1.0.1
-      pako: 1.0.11
-      tslib: 1.14.1
-
   picocolors@1.0.1: {}
 
   picomatch@2.3.1: {}
@@ -7857,8 +7796,7 @@ snapshots:
       typescript: 4.9.5
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
-
+    optional: true
-  tslib@1.14.1: {}
 
   tslib@2.6.2: {}
 
@@ -7921,7 +7859,8 @@ snapshots:
     dependencies:
       react: 18.3.1
 
-  v8-compile-cache-lib@3.0.1: {}
+  v8-compile-cache-lib@3.0.1:
+    optional: true
 
   v8-to-istanbul@9.2.0:
     dependencies:
@@ -7938,11 +7877,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-env-compatible@2.0.1:
-    dependencies:
-      dotenv: 8.2.0
-      dotenv-expand: 5.1.0
-
   vite@5.2.12(@types/node@20.14.0)(sass@1.77.4)(terser@5.31.4):
     dependencies:
       esbuild: 0.20.2
@@ -8111,7 +8045,8 @@ snapshots:
       y18n: 5.0.8
       yargs-parser: 21.1.1
 
-  yn@3.1.1: {}
+  yn@3.1.1:
+    optional: true
 
   yocto-queue@0.1.0: {}
 

src/Components/DataState/AddedSuccessfully.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import Image from "../Ui/Image";
-
-const AddedSuccessfully = () => {
-  return (
-    <div className="AddedSuccessfully">
-      <Image src="/DataState/successfully.png" />
-      <h1>تمّت إضافة الطالب بنجاح!</h1>
-      <p>تمّت إضافة الطالب،هل تريد إضافة طالب آخر ؟</p>
-
-      <div className="TowButton">
-        <button>إضافة طالب جديد</button>
-        <button>تخطّي</button>
-      </div>
-    </div>
-  );
-};
-
-export default AddedSuccessfully;

src/Components/DataState/EmptyData.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import Image from "../Ui/Image";
-
-const EmptyData = ({
-  header,
-  info,
-  loading,
-}: {
-  info: string;
-  header: string;
-  loading: boolean;
-}) => {
-  if (loading) {
-    return <></>;
-  }
-  return (
-    <div className="EmptyData">
-      <Image src="/DataState/EmptyData.gif" />
-      <h1>{header}</h1>
-      <p>{info}</p>
-    </div>
-  );
-};
-
-export default EmptyData;

src/Components/DataState/Loading.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import Image from "../Ui/Image";
-
-const Loading = () => {
-  return (
-    <div className="Loading">
-      <Image src="/DataState/loading.gif" />
-    </div>
-  );
-};
-
-export default Loading;

src/Components/ValidationField/View/CheckboxField.tsx

@@ -17,20 +17,24 @@ const CheckboxField = ({
   };
 
   return (
-    <div className={Group ? "d-inline mt-3 Checkboxs" : ``}>
+    <div className={ `ValidationField  ValidationFieldCheckbox`}>
       <Form.Item
         hasFeedback
         validateStatus={isError ? "error" : ""}
         help={isError ? errorMsg : ""}
       >
+          <div>
+         {t(`input.${label ? label : name}`)}
+         </div>
         <Checkbox
           onChange={onChange || CheckboxhandleChange}
           disabled={isDisabled}
           checked={formik.values?.[name] ?? false}
           className={className}
         >
-          {t(`input.${label ? label : name}`)}
+       
         </Checkbox>
+        
       </Form.Item>
     </div>
   );

src/Components/ValidationField/View/TextAreaField.tsx

@@ -23,7 +23,7 @@ const TextAreaField = ({
   };
 
   return (
-    <div className="ValidationField w-100">
+    <div className="ValidationField w-100 ValidationFieldTextArea">
       <label htmlFor={name} className="text">
         {t(`input.${label ? label : name}`)}
       </label>

src/Components/ValidationField/View/TextField.tsx

@@ -25,7 +25,7 @@ const TextField = ({
     formik.setFieldValue(name, e.target.value);
   };
   return (
-    <div className={`ValidationField w-100 ${className ?? ""} `}>
+    <div className={`ValidationField w-100 ${className ?? ""} ValidationFieldTextArea`}>
       {no_label ? (
         <label htmlFor={name} className="text">
           <span>empty</span>
@@ -57,7 +57,7 @@ const TextField = ({
           showCount
           maxLength={1000}
           onChange={onChange || TextFilehandleChange}
-          style={{ height: 120 }}
+          
         />
       </Form.Item>
     </div>

src/Components/ValidationField/utils/ValidationField.scss

@@ -4,10 +4,12 @@
   justify-content: space-between;
 }
 .ValidationField {
-  margin-bottom: 1.3vw;
+  margin-bottom: 10px;
   position: relative;
+  min-height: 80px;
   > * {
-    width: 100%;
+    width: 100% !important;
+    min-width: 200px;
   }
   .text,
   .ant-form-item {
@@ -16,213 +18,55 @@
       color: transparent;
     }
   }
-
-  .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
-    border: 1px solid var(--border-color);
 }
 
-  .Select_error {
-    .ant-select-selector {
-      border: 1px solid red !important;
-    }
-  }
-
-  // .ValidationField{
-  //   .ant-select-selector{
-  //     border: 1px solid var(--border-color) ;
-
-  //     }
-  // }
-  > span {
-    margin-bottom: 0px !important;
-    &:focus-within {
-      border-color: var(--primary);
-      box-shadow: 0 0 0 1px var(--primary);
-      cursor: pointer;
-    }
-    &:has(.is-invalid) {
-      border-color: red !important ;
-    }
-    input {
-      color: var(--text);
-      background: var(--bg);
-    }
-
-    input:-webkit-autofill,
-    input:-webkit-autofill:hover,
-    input:-webkit-autofill:focus,
-    input:-webkit-autofill:active {
-      -webkit-box-shadow: 0 0 0 30px white inset !important;
-    }
-  }
-}
 
+//// upload
 .ant-upload-select {
   width: 100%;
 }
-.Checkboxs {
-  padding: 4%;
-}
-.ant-checkbox-wrapper {
-  min-width: 100px;
-}
-.SearchField {
-  button {
-    background: var(--primary);
-  }
-}
-.text {
-  color: var(--text);
-  margin-bottom: 15px;
-  font-weight: bold;
-}
-
-input:disabled {
-  color: var(--text) !important;
-}
-
-.isError {
-  outline: red 1px solid;
-  color: red;
-}
-.Error_color {
-  color: red;
-}
-input:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Change the color to your desired background color */
-}
-input:-webkit-autofill:focus {
-  -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Change the color to your desired background color */
-}
-
-/* Remove autofill background color on hover */
-input:-webkit-autofill:hover {
-  -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Change the color to your desired background color */
-}
-.upload_image_button {
-  .ant-btn {
-    min-height: 3vw !important;
-    border: 0.1vw solid var(--border-color);
 
+.ant-btn-default{
+  padding: 7px 11px;
+  height: var(--fieldHeight);
   display: flex;
-    align-items: center;
   justify-content: center;
-  }
+  align-items: center;
-}
-.ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
-  min-height: 3vw !important;
-}
-.ant-select-multiple.ant-select-lg .ant-select-selection-overflow {
-  min-height: 3vw !important;
 }
 
-.ant-upload-list .ant-upload-list-item {
-  // height:3vw !important;
-  border: 1px solid var(--border-color) !important;
-}
-
-.TowValidationItems {
-  display: flex;
-  gap: 3%;
-  > label {
-    display: none;
-  }
-}
-
-.ant-select .ant-select-arrow {
-  inset-inline-end: 1vw;
-}
-.ant-input-affix-wrapper-lg {
-  padding: 0.5vw 1vw;
-  font-size: 1vw;
-  min-height: 3vw;
-  border-radius: 0.6vw;
-  border: 1.5px solid var(--opacity);
-}
-
-.ant-picker-outlined {
-  padding: 0.5vw 1vw;
-  font-size: 1vw;
-  min-height: 3vw;
-  border-radius: 0.6vw;
-  border: 1px solid var(--border-color);
-}
-
-.ant-select-single.ant-select-lg .ant-select-selector {
-  min-height: 3vw;
-  border-radius: 0.6vw;
-}
-.ant-select-single .ant-select-selector .ant-select-selection-search-input {
-  min-height: 3vw;
-}
-
-.ant-select-outlined .ant-select-selector {
-  min-height: 3vw !important;
-  border-radius: 0.6vw !important;
-}
-.ant-select-single.ant-select-lg {
-  min-height: 3vw;
-}
-
-.ant-upload-wrapper .ant-upload-list .ant-upload-list-item {
-  width: 21.5vw;
-}
-
-.ant-input-number-outlined {
-  width: 100%;
-  height: 3vw;
-}
-.ant-input-number-lg input.ant-input-number-input {
-  width: 100%;
-  height: 3vw;
-}
-
-.bigRow {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  > *.w-100 {
-    width: 48% !important;
-  }
-}
 
+//// number input
+/// 
 .ant-input-number-affix-wrapper-lg{
   width: 100%;
-  height: 3vw;
+}
-  border-radius: 0.6vw;
+.ValidationFieldCheckbox{
-  border: 1px solid var(--border-color);
+  // background-color: red;
 }
 
-.TwoSelectGroup {
+/// input hight 
-  display: flex;
+.ant-form-item-control-input-content{
-  gap: 10px;
+  height: var(--fieldHeight);
-  margin-bottom: 20px;
-}
-.TwoSelectGroupbutton {
-  margin-bottom: 20px;
 }
 
-.ant-checkbox-wrapper {
+
-  margin-top: 25px !important;
+//// date picker
+.ant-picker-large{
+  height: var(--fieldHeight);
 }
 
-.add_new_button {
-  margin-bottom: 20px;
-  svg {
-    color: var(--primary);
-  }
-}
-.ValidationField:has(.input_number) {
-  max-width: 100px;
 
-  .input_number {
+/// text area 
-    max-width: 100px;
+/// 
-  }
+
+.ValidationFieldTextArea{
+  .ant-form-item-control-input-content{
+    min-height: 120px;
   }
   
-.flex {
+}
-  display: flex;
+
-  gap: 30px;
+  .ant-input-textarea-affix-wrapper.ant-input-affix-wrapper {
-  max-width: 80% !important;
+
+      height: 120px;
 }

src/Layout/Dashboard/FormikFormModel.tsx

@@ -1,6 +1,5 @@
 import { Formik, Form, useFormikContext } from "formik";
 import React, { ReactNode, useEffect } from "react";
-import { useValidationState } from "../../Components/ValidationField/utils/ValidationState";
 import { useModalState } from "../../zustand/Modal";
 
 interface FormValues {

src/Layout/Dashboard/LayoutModel.tsx

@@ -32,7 +32,7 @@ const LayoutModel = ({
   modelTitle,
   ModelEnum,
   ModelClassName,
-  width = "45vw",
+  width = "800px",
   isLoading = false,
 }: LayoutModalProps) => {
   const { isOpen, setIsOpen } = useModalState((state) => state);

src/Layout/Dashboard/Table/DataTable.tsx

@@ -1,15 +1,13 @@
-import React from "react";
+import React, { lazy, Suspense } from "react";
 import {
   useAddKeyToData,
   Table,
   useTranslation,
   usePagination,
-  Loading,
-  EmptyData,
 } from ".";
 import { DataTableProps } from "../../../types/Table";
-import NotFoundLottie from "../../../Components/Lottie/NotFound/NotFoundLottie";
+const NotFoundLottie = React.lazy(() => import("../../../Components/Lottie/NotFound/NotFoundLottie"));
-import LoadingLottie from "../../../Components/Lottie/Loading/LoadingLottie";
+const LoadingLottie = React.lazy(() => import("../../../Components/Lottie/Loading/LoadingLottie"));
 
 const DataTable: React.FC<DataTableProps> = ({
   response,
@@ -36,7 +34,9 @@ const DataTable: React.FC<DataTableProps> = ({
       className="DataTable"
       loading={{
         spinning: isLoading || isRefetching,
-        indicator: <LoadingLottie />,
+        indicator:<Suspense fallback={<></>}>
+          <LoadingLottie />
+        </Suspense> ,
         size: "large",
       }}
       locale={{
@@ -44,9 +44,12 @@ const DataTable: React.FC<DataTableProps> = ({
           isLoading || isRefetching  ? 
           <></>
           :
+         
+          <Suspense fallback={<></>}>
           <NotFoundLottie
           
           />
+        </Suspense> 
         ),
       }}
       pagination={{

src/Layout/Dashboard/Table/index.tsx

@@ -1,15 +1,11 @@
 import { Table } from "antd";
 import { useAddKeyToData } from "../../../Hooks/useAddKeyToData";
-import Loading from "../../../Components/DataState/Loading";
-import EmptyData from "../../../Components/DataState/EmptyData";
 import usePagination from "../usePagination";
 import { useTranslation } from "react-i18next";
 
 export {
   Table,
   useAddKeyToData,
-  Loading,
-  EmptyData,
   usePagination,
   useTranslation,
 };

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

@@ -5,8 +5,10 @@ const Form = () => {
   return (
     <Row className="w-100">
       <Col>
-        <ValidationField placeholder="name" label="name" name="name" />
+        <ValidationField placeholder="name" label="name" name="name" type="Number" />
+   
       </Col>
+  
     </Row>
   );
 };

src/Pages/Home/Dummy.tsx

@@ -1,9 +1,7 @@
 import React from "react";
-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();
@@ -11,7 +9,7 @@ const Dummy = () => {
 
   return (
     <div className="DummyHomePage">
-        <NotFoundLottie/>
+       
     </div>
   );
 };

src/Styles/Antd/Filed.scss

@@ -1,133 +1,133 @@
-/* Ant picker outlined */
+// /* Ant picker outlined */
-.AuthForm .AuthSelect .ant-picker-outlined {
+// .AuthForm .AuthSelect .ant-picker-outlined {
-  border-radius: 1vw;
+//   border-radius: 1vw;
-}
-
-/* Username */
-#username {
-  border-radius: 1vw;
-}
-
-/* Ant input affix wrapper */
-.AuthForm .AuthInput .ant-input-affix-wrapper {
-  border-radius: 1vw;
-}
-
-.remamberMe {
-  display: flex;
-  gap: 1vw;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  h6 {
-    margin-bottom: 0;
-  }
-  .SwitchRemamberMe {
-    color: var(--white);
-    background: #3182ce;
-  }
-}
-
-///// select
-.ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
-  border: none;
-}
-.ant-select-single.ant-select-show-arrow .ant-select-selection-item,
-.ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
-  padding-inline-end: 4vw;
-}
-.ant-select-single.ant-select-lg:not(.ant-select-customize-input)
-  .ant-select-selector {
-  // height: 3vw;
-}
-
-////////////// file
-
-.ValidationField
-  .ant-upload-wrapper.ant-upload-picture-card-wrapper
-  .ant-upload.ant-upload-select,
-.ant-upload-wrapper.ant-upload-picture-circle-wrapper
-  .ant-upload.ant-upload-select {
-  background: transparent;
-  border: 0.3vw dashed var(--field);
-}
-
-.uploader_error {
-  .ant-upload.ant-upload-select {
-    border: 0.3vw dashed red !important;
-  }
-}
-.ValidationField.have_value
-  .ant-upload-wrapper.ant-upload-picture-card-wrapper
-  .ant-upload.ant-upload-select,
-.ant-upload-wrapper.ant-upload-picture-circle-wrapper
-  .ant-upload.ant-upload-select {
-  background: transparent;
-  border: 0.3vw dashed transparent;
-}
-
-.CustomFile {
-  color: var(--subtext);
-  font-size: 0.7vw !important;
-  width: 80%;
-  margin-inline: auto;
-}
-
-.ImageCol {
-  max-width: 50%;
-  flex: 0;
-}
-.ant-upload-wrapper.ant-upload-picture-card-wrapper
-  .ant-upload.ant-upload-select,
-.ant-upload-wrapper.ant-upload-picture-circle-wrapper
-  .ant-upload.ant-upload-select {
-  width: 11vw;
-  height: 11vw;
-  padding: 10px;
-}
-
-.uploadIcon {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 3vw;
-  height: 3vw;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: #f4f4f4;
-  border: 1px solid black;
-  svg {
-    color: black;
-    font-size: 1.5vw;
-  }
-}
-
-////////// INput
-
-label {
-  color: var(--label);
-}
-
-// .ant-select-dropdown{
-//     border: 1px solid var(--primary);
-//     border-top: none;
-//     z-index: 2;
-//     transform: translateY(-10px);
-//     background: var(--bg2);
 // }
 
-.Auth_Select {
+// /* Username */
-  height: 3vw !important;
+// #username {
+//   border-radius: 1vw;
+// }
 
-  .ant-select-selector {
+// /* Ant input affix wrapper */
-    border: 1px solid #d9d9d9 !important;
+// .AuthForm .AuthInput .ant-input-affix-wrapper {
-    height: 3vw !important;
+//   border-radius: 1vw;
-    font-size: 1vw;
+// }
-    border-radius: 1vw;
+
-  }
+// .remamberMe {
-  .ant-select-selection-item {
+//   display: flex;
-    height: 28px;
+//   gap: 1vw;
-  }
+//   align-items: center;
-}
+//   justify-content: flex-start;
+//   width: 100%;
+//   h6 {
+//     margin-bottom: 0;
+//   }
+//   .SwitchRemamberMe {
+//     color: var(--white);
+//     background: #3182ce;
+//   }
+// }
+
+// ///// select
+// .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
+//   border: none;
+// }
+// .ant-select-single.ant-select-show-arrow .ant-select-selection-item,
+// .ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
+//   padding-inline-end: 4vw;
+// }
+// .ant-select-single.ant-select-lg:not(.ant-select-customize-input)
+//   .ant-select-selector {
+//   // height: 3vw;
+// }
+
+// ////////////// file
+
+// .ValidationField
+//   .ant-upload-wrapper.ant-upload-picture-card-wrapper
+//   .ant-upload.ant-upload-select,
+// .ant-upload-wrapper.ant-upload-picture-circle-wrapper
+//   .ant-upload.ant-upload-select {
+//   background: transparent;
+//   border: 0.3vw dashed var(--field);
+// }
+
+// .uploader_error {
+//   .ant-upload.ant-upload-select {
+//     border: 0.3vw dashed red !important;
+//   }
+// }
+// .ValidationField.have_value
+//   .ant-upload-wrapper.ant-upload-picture-card-wrapper
+//   .ant-upload.ant-upload-select,
+// .ant-upload-wrapper.ant-upload-picture-circle-wrapper
+//   .ant-upload.ant-upload-select {
+//   background: transparent;
+//   border: 0.3vw dashed transparent;
+// }
+
+// .CustomFile {
+//   color: var(--subtext);
+//   font-size: 0.7vw !important;
+//   width: 80%;
+//   margin-inline: auto;
+// }
+
+// .ImageCol {
+//   max-width: 50%;
+//   flex: 0;
+// }
+// .ant-upload-wrapper.ant-upload-picture-card-wrapper
+//   .ant-upload.ant-upload-select,
+// .ant-upload-wrapper.ant-upload-picture-circle-wrapper
+//   .ant-upload.ant-upload-select {
+//   width: 11vw;
+//   height: 11vw;
+//   padding: 10px;
+// }
+
+// .uploadIcon {
+//   position: absolute;
+//   bottom: 0;
+//   left: 0;
+//   width: 3vw;
+//   height: 3vw;
+//   border-radius: 50%;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   background: #f4f4f4;
+//   border: 1px solid black;
+//   svg {
+//     color: black;
+//     font-size: 1.5vw;
+//   }
+// }
+
+// ////////// INput
+
+// label {
+//   color: var(--label);
+// }
+
+// // .ant-select-dropdown{
+// //     border: 1px solid var(--primary);
+// //     border-top: none;
+// //     z-index: 2;
+// //     transform: translateY(-10px);
+// //     background: var(--bg2);
+// // }
+
+// .Auth_Select {
+//   height: 3vw !important;
+
+//   .ant-select-selector {
+//     border: 1px solid #d9d9d9 !important;
+//     height: 3vw !important;
+//     font-size: 1vw;
+//     border-radius: 1vw;
+//   }
+//   .ant-select-selection-item {
+//     height: 28px;
+//   }
+// }

src/Styles/Antd/Model.scss

@@ -18,37 +18,30 @@
   }
   header {
     display: flex; justify-content: space-between;align-items: center;
-    height: 4vw;
+    height: 60px;
-    padding: 1vw 1vw;
+    padding: 16px ;
     z-index: 10;
     color: var(--black);
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     span{
-      font-size: 1.4vw;
+      font-size: 25px;
     }
     svg{
       font-size: 30px;
       color: #6A7287;
     }
   }
-  .time_main_modal {
+
-    padding: 0vw 7vw;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-  }
   .main_modal {
-    padding: .7vw 0vw !important;
+    padding: 15px 0vw !important;
     display: flex;
     flex-direction: column;
     width: 100%;
   }
   main {
     .buttons {
-      padding-inline: 0 1vw;
+      padding-inline: 0 10px;
       display: flex;
       gap: 10px;
       align-items: end;
@@ -58,9 +51,9 @@
         position: relative;
         outline: none;
         border: none;
-        width: 10vw;
+        width: 120px;
         border-radius: 10px;
-        padding: 0.7vw;
+        padding: 10px;
         font-weight: bold;
         background: var(--primary);
         color: var(--white);
@@ -79,9 +72,7 @@
   label {
     color: var(--secondary) !important;
   }
-  .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
+ 
-    border: 1px solid var(--border-color);
-  }
 }
 .ant-modal-root .ant-modal-centered .ant-modal{
   width: 45vw ;

src/Styles/App/App.scss

@@ -11,7 +11,7 @@ body {
   padding: 0;
   margin: 0;
   font-weight: 600;
-  font-size: 0.9vw;
+  font-size: 16px;
 }
 h1,
 h2,
@@ -73,10 +73,7 @@ svg {
     }
   }
 }
-/* Input */
+
-.ant-picker-outlined .ant-picker-input input {
-  font-size: 1vw;
-}
 
 /* Username */
 #username {

src/Styles/App/Varibils.scss

@@ -35,6 +35,7 @@
   --bg4: #e6e5e5;
   --borderColor: #ffffff91;
   --opacity: #bcbcbc;
+  --fieldHeight:40px;
 }
 
 :root:has(.dark) {

src/Styles/App/classNames.scss

@@ -48,24 +48,10 @@
     display: flex;
     justify-content: flex-end;
   }
-  .ant-picker-outlined {
+
-    border-color: var(--border-color) !important;
-  }
-  .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
-    border: 1px solid var(--border-color) !important;
-  }
-  .ant-input-outlined {
-    border-color: var(--border-color);
-  }
 }
 
-.ant-input-outlined {
+
-  border-color: var(--border-color);
-  padding: 0.5vw 1vw;
-  font-size: 0.8vw;
-  height: 3vw;
-  border-radius: 0.6vw;
-}
 
 .FormCard {
   // background: var(--bg);
@@ -115,45 +101,45 @@
     width: 12vw;
   }
 }
-.Buttons_over_width {
+// .Buttons_over_width {
-  display: flex;
+//   display: flex;
-  gap: 4%;
+//   gap: 4%;
-  align-items: center;
+//   align-items: center;
-  > button,
+//   > button,
-  > div {
+//   > div {
-    outline: none;
+//     outline: none;
-    border: none;
+//     border: none;
-    border-radius: 50px;
+//     border-radius: 50px;
-    padding: 0.8vw 2vw;
+//     padding: 0.8vw 2vw;
-    background: var(--primary);
+//     background: var(--primary);
-    color: var(--white);
+//     color: var(--white);
-    display: flex;
+//     display: flex;
-    align-items: center;
+//     align-items: center;
-    justify-content: center;
+//     justify-content: center;
-    gap: 5px;
+//     gap: 5px;
-    font-size: 1vw;
+//     font-size: 1vw;
-  }
+//   }
-}
+// }
-.Buttons {
+// .Buttons {
-  display: flex;
+//   display: flex;
-  gap: 4%;
+//   gap: 4%;
-  align-items: center;
+//   align-items: center;
-  > button,
+//   > button,
-  > div {
+//   > div {
-    outline: none;
+//     outline: none;
-    border: none;
+//     border: none;
-    border-radius: 50px;
+//     border-radius: 50px;
-    padding: 0.8vw 0.4vw;
+//     padding: 0.8vw 0.4vw;
-    background: var(--primary);
+//     background: var(--primary);
-    color: var(--white);
+//     color: var(--white);
-    display: flex;
+//     display: flex;
-    align-items: center;
+//     align-items: center;
-    justify-content: center;
+//     justify-content: center;
-    gap: 5px;
+//     gap: 5px;
-    font-size: 1vw;
+//     font-size: 1vw;
-    width: 12vw;
+//     width: 12vw;
-  }
+//   }
-}
+// }
 
 .TowButton {
   display: flex;

src/Styles/App/index.scss

@@ -14,7 +14,6 @@
 
 @import "../Antd/index.scss";
 
-@import "../Home/index.scss";
 
 @import "../DataTable/index.scss";
 

src/Styles/Home/Activity.scss

@@ -1,58 +0,0 @@
-.ActivitySection {
-  background: var(--bg);
-  padding: 30px;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  header {
-    margin-bottom: 10px;
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    h4 {
-      color: var(--secondary);
-      font-weight: bold;
-    }
-  }
-  .ActivityScrollerChanger {
-    background: #f4f7fe;
-    padding: 20px 10px;
-    border-radius: var(--border-radius);
-  }
-  .Activitys {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    padding: 0px 20px;
-    max-height: 200px;
-    overflow-y: scroll;
-    @include Scrollbar;
-    direction: ltr; /* Right-to-left direction */
-    gap: 1vw;
-
-    article {
-      direction: rtl; /* Right-to-left direction */
-      display: flex;
-      justify-content: space-between;
-      gap: 1vw;
-      width: 100%;
-      img {
-        width: 3vw;
-        height: 3vw;
-      }
-      h5 {
-        margin-bottom: 0;
-        font-size: 0.8vw;
-        color: #505050;
-        @include Font_Poppins_Bold;
-        font-weight: 600;
-      }
-    }
-    p {
-      font-size: 0.6vw;
-      text-wrap: nowrap;
-      color: #d16e57;
-    }
-  }
-}

src/Styles/Home/CountSection.scss

@@ -1,50 +0,0 @@
-.CountSection {
-  width: 100%;
-  display: flex;
-  background: var(--bg);
-  border-radius: var(--border-radius);
-  padding: 10px;
-  .CountCards {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    padding: 20px;
-
-    .CountCard {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      text-align: center;
-      justify-content: center;
-      width: 16%;
-
-      h6 {
-        color: var(--secondary);
-        font-size: 1vw;
-        font-weight: bold;
-      }
-      h4 {
-        font-size: 1vw;
-        font-weight: 400;
-        margin-bottom: 0;
-      }
-      i {
-        width: 3.6vw;
-        height: 3.6vw;
-        border-radius: 50%;
-        background: var(--primary);
-        @include Flex;
-        margin-bottom: 4px;
-        svg {
-          color: var(--white);
-          font-size: 2vw;
-        }
-      }
-    }
-  }
-  img {
-    width: 14%;
-    mix-blend-mode: multiply;
-    margin-inline: 2vw;
-  }
-}

src/Styles/Home/Home.scss

@@ -1,224 +0,0 @@
-.HomePage {
-  height: 100%;
-}
-.ChartSection {
-  width: 70%;
-  padding: 30px 40px 30px 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-.TowItem {
-  display: flex;
-  gap: 4%;
-
-  > * {
-    width: 48%;
-    height: 30vw;
-  }
-}
-.ant-picker-calendar-mini .ant-picker-content {
-  height: 21vw;
-}
-
-.ColumnChart {
-  background: var(--bg);
-  @include Shadow;
-  border-radius: var(--border-radius);
-
-  .ColumnChart_header {
-    padding: 20px;
-
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    // flex-wrap: wrap;
-
-    .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
-      border: none;
-    }
-
-    > span {
-      align-self: center;
-    }
-  }
-
-  .Legend {
-    display: flex;
-    gap: 25px;
-    align-items: center;
-    color: var(--subtext);
-    padding-inline: 20px;
-
-    div {
-      position: relative;
-      font-weight: 400;
-
-      &::after {
-        content: "";
-        position: absolute;
-        top: 50%;
-        right: -25px;
-        transform: translate(-50%, -50%);
-        width: 14px;
-        /* Adjust size as needed */
-        height: 14px;
-        /* Adjust size as needed */
-        border: 4px solid var(--utils_color_one);
-        /* Set border properties */
-        border-radius: 50%;
-        z-index: 2;
-      }
-
-      &:nth-child(2) {
-        &::after {
-          border: 4px solid var(--utils_color_tow);
-          /* Set border properties */
-        }
-      }
-    }
-  }
-}
-
-.ColumnChartWrapper {
-  height: 23vw;
-}
-
-.CalendarSection {
-  .Calendar {
-    padding: 0 10px;
-  }
-
-  background: var(--bg);
-  @include Shadow;
-  border-radius: var(--border-radius);
-
-  .ant-picker-outlined {
-    border-color: var(--bg);
-    direction: ltr;
-    // width: 140px;
-  }
-
-  .CalendarHeader {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1vw 1.5vw;
-    width: 100%;
-
-    h4 {
-      color: var(--secondary);
-      font-weight: bold;
-      font-size: 1.4vw;
-    }
-  }
-
-  .Calendar_Div {
-    // border: 1px solid red;
-    // aspect-ratio: 1 / 1;
-  }
-
-  .Calendar_ActiveDiv:nth-child(odd) {
-    background-color: var(--utils_color_one);
-
-    color: var(--white);
-    height: 90%;
-    // aspect-ratio: 1 / 1;
-    width: 70%;
-    margin-inline: auto;
-    border-radius: 50%;
-    @include Flex;
-    /* Include your Flex mixin here */
-  }
-
-  .Calendar_ActiveDiv:nth-child(even) {
-    background-color: var(--utils_color_tow);
-    color: var(--white);
-    height: 90%;
-    width: 70%;
-    margin-inline: auto;
-    border-radius: 50%;
-    // aspect-ratio: 1 / 1;
-
-    @include Flex;
-    /* Include your Flex mixin here */
-  }
-}
-
-.AreaChart {
-  background: var(--bg);
-  @include Shadow;
-  border-radius: var(--border-radius);
-}
-
-// <DatePicker
-// suffixIcon={<IoMdArrowDropdown size={30} />}
-// onChange={onChangeDatePicker}
-// picker="month"
-// />
-
-.CalenderPop {
-}
-.Calendar_Popover {
-  background: var(--primary);
-  color: var(--white);
-  display: flex;
-  gap: 10px;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  h5 {
-    font-size: 0.9vw;
-    font-weight: normal;
-  }
-
-  h6 {
-    font-size: 0.5vw;
-    font-weight: normal;
-  }
-  .Actions {
-    position: absolute;
-    right: -30px;
-    top: 0;
-    width: 35px;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--border-radius);
-    border: 1px solid var(--primary);
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    background: var(--bg);
-  }
-}
-.ant-popover .ant-popover-inner:has(.Actions) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.CalenderPop .ant-popover-inner {
-  background: var(--primary) !important;
-  color: var(--white);
-}
-
-.ant-popover .ant-popover-arrow::after {
-  background: var(--primary) !important;
-}
-
-.NoteSections {
-  width: 30%;
-  background: var(--bg);
-}
-
-.DummyHomePage {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 70vh;
-  img {
-    width: 20vw;
-  }
-}

src/Styles/Home/Note.scss

@@ -1,78 +0,0 @@
-.NoteSection {
-  background: var(--bg);
-  padding: 30px;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  header {
-    margin-bottom: 10px;
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    h4 {
-      color: var(--secondary);
-      font-weight: bold;
-    }
-  }
-  .NoteScrollerChanger {
-    background: #f4f7fe;
-    padding: 20px 10px;
-    border-radius: var(--border-radius);
-  }
-  .Notes {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    padding: 0px 20px;
-    max-height: 500px;
-    overflow-y: scroll;
-    @include Scrollbar;
-    direction: ltr; /* Right-to-left direction */
-
-    article {
-      direction: rtl; /* Right-to-left direction */
-
-      display: flex;
-      flex-direction: column;
-      > div {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        margin-bottom: 10px;
-        i {
-          width: 1.7vw;
-          height: 1.7vw;
-          background: var(--primary);
-          color: var(--white);
-          border-radius: 50%;
-          @include Flex;
-        }
-        h5 {
-          margin-bottom: 0;
-          font-size: 1.2vw;
-          color: #606165;
-          font-family: "Jost-SemiBold", sans-serif; /* Use ABeeZee font for body text */
-        }
-      }
-      span {
-        margin-right: 50px;
-        font-size: 0.8vw;
-        width: 90%;
-        position: relative;
-        font-weight: 400;
-        margin-bottom: 10px;
-        &::before {
-          content: ""; /* Required for ::before pseudo-element */
-          position: absolute;
-          top: 5px;
-          right: -20px;
-          width: 8px; /* Set width and height to cover the entire parent */
-          height: 8px;
-          border-radius: 50%;
-          background: #606060;
-        }
-      }
-    }
-  }
-}

src/Styles/Home/StudentSubjects.scss

@@ -1,47 +0,0 @@
-.StudentSubjects {
-  padding: 20px;
-  @include Shadow;
-  background: var(--bg);
-  border-radius: var(--border-radius);
-
-  header {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    padding: 5px;
-    h6 {
-      color: var(--secondary);
-    }
-  }
-  main {
-    width: 100%;
-    overflow-y: scroll;
-    max-height: 20vw;
-    @include Scrollbar;
-    display: flex;
-    flex-direction: column;
-    direction: ltr;
-    gap: 20px;
-    padding: 20px;
-
-    > div {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      border-radius: var(--border-radius);
-      background: #f0f7ff;
-      padding: 1vw 2vw;
-      width: 100%;
-    }
-
-    img {
-      width: 3vw;
-      height: 3vw;
-    }
-    h6 {
-      color: var(--text);
-      font-weight: bold;
-      font-size: 1.2vw;
-    }
-  }
-}

src/Styles/Home/index.scss

@@ -1,5 +0,0 @@
-@import "./Home.scss";
-@import "./Activity.scss";
-@import "./CountSection.scss";
-@import "./Note.scss";
-@import "./StudentSubjects.scss";

src/Styles/Layout/DataTable.scss

@@ -42,3 +42,26 @@
 .ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:first-child{
   border-radius: 0 !important;
 }
+
+
+.TableWithHeader {
+  display: flex;
+  flex-direction: column;
+  padding: 2vw;
+  background: var(--bg);
+  // gap: 1vw;
+  border-radius: var(--border-radius);
+  transition: 1s ease-in-out;
+  animation: fadeInRight 1s ease-in-out;
+
+  > header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 95%;
+    h6 {
+      color: var(--primary);
+      font-weight: bold;
+    }
+  }
+}

src/Styles/Layout/FilterLayout.scss

@@ -10,7 +10,8 @@
             .filter_button{
                 display: flex;justify-content: space-between;align-items: center;
                 width: 190px;
-                padding: 11px 20px 11px 20px;
+                padding-inline: 20px;
+                height: 40px;
                 border-radius: 10px; 
                 border: 1px solid var(--opacity) !important;
                 transition: ease-in-out .4s;
@@ -31,7 +32,7 @@
             .filter_modal_select{
                 border: 1px solid var(--opacity);
                 border-radius: 10px;
-                padding-bottom: 46.5px;
+                // padding-bottom: 46.5px;
                 .addition_select_icon{
                     font-size: 25px;
                 }

src/Styles/Pages/Division.scss

@@ -1,150 +0,0 @@
-.hidden {
-  display: none !important;
-}
-
-.ShowMoreButton {
-  position: absolute;
-  bottom: 1vw;
-  right: 0.5vw;
-  background-color: var(--primary);
-  color: var(--white);
-  border-radius: 50%;
-  height: 1.7vw;
-  width: 1.7vw;
-  @include Flex;
-
-  svg {
-    font-size: 1.5vw;
-  }
-}
-
-.ModelBody {
-  display: flex;
-  width: 100%;
-}
-
-.ModelBodyTabs {
-  width: 27%;
-  display: flex;
-  flex-direction: column;
-  gap: 2vw;
-  background: var(--primary);
-  border-radius: var(--border-radius);
-  padding: 2vw;
-  min-height: 85vh;
-  position: relative;
-
-  .ModelBodyTab {
-    display: flex;
-    align-items: center;
-    gap: 2vw;
-    z-index: 4;
-
-    > div {
-      width: 3vw;
-      height: 3vw;
-      // background: var(--primary);
-      color: var(--white);
-      border: 1px solid var(--white);
-      border-radius: 50%;
-      @include Flex;
-      font-size: 1vw;
-      cursor: pointer;
-    }
-
-    h6 {
-      color: #d4d4d4;
-      margin-bottom: 0.4vw;
-      font-size: 0.7vw;
-    }
-
-    h4 {
-      color: var(--white);
-      font-size: 1vw;
-    }
-  }
-
-  .activeModelTab {
-    > div {
-      background: #bfe2fd;
-      color: black;
-    }
-  }
-}
-.ModelBodyForm {
-  padding: 2vw;
-  width: 73%;
-  > header {
-    font-size: 2vw;
-    color: var(--secondary);
-    margin-bottom: 1vw;
-  }
-  .ant-picker-outlined {
-    border-color: var(--border-color);
-  }
-
-  .ant-input-outlined {
-    border-color: var(--border-color);
-  }
-  label {
-    color: var(--secondary);
-  }
-}
-.ant-input-outlined {
-  border-color: var(--border-color);
-}
-
-.SubmitButton {
-  width: 100%;
-  padding-right: 30%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  > button,
-  > span {
-    outline: none;
-    border: none;
-    border-radius: var(--border-radius);
-    padding: 0.7vw 1vw;
-    background: var(--primary);
-    color: var(--white);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 5px;
-    font-size: 1.2vw;
-    width: 11vw;
-  }
-  > div {
-    color: var(--secondary);
-    cursor: pointer;
-  }
-}
-.TableWithHeader {
-  display: flex;
-  flex-direction: column;
-  padding: 2vw;
-  background: var(--bg);
-  // gap: 1vw;
-  border-radius: var(--border-radius);
-  transition: 1s ease-in-out;
-  animation: fadeInRight 1s ease-in-out;
-
-  > header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 95%;
-    h6 {
-      color: var(--primary);
-      font-weight: bold;
-    }
-  }
-}
-
-.Selects {
-  display: flex;
-  align-items: center;
-  gap: 8%;
-}

src/Styles/Pages/index.scss

@@ -2,7 +2,6 @@
 @import "./activity.scss";
 @import "./Student.scss";
 @import "./Classes.scss";
-@import "./Division.scss";
 @import "./Course.scss";
 @import "./EduClass.scss";
 @import "./programme.scss";

src/lib/AntdProvider.tsx

@@ -15,6 +15,7 @@ function AntdProvider({ children }: { children: React.ReactNode }) {
             headerBg: bgColor,
             headerColor: primaryColor,
           },
+
         },
       }}
     >