From 36f518afca3a1714406cb4d41b01f5a6cd133593 Mon Sep 17 00:00:00 2001
From: mzerone <mohammedzeglam@gmail.com>
Date: Thu, 1 Aug 2024 00:41:35 +0200
Subject: [PATCH 01/14] add create user in settings.

---
 src/pages/(admin)/BatchCreateUser.tsx | 236 ++++++++++++++++++++++++++
 src/pages/api/make_user.ts            | 110 ++++++++++++
 src/pages/settings.tsx                |   6 +-
 src/utils/permissions.ts              |   2 +-
 4 files changed, 351 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/(admin)/BatchCreateUser.tsx
 create mode 100644 src/pages/api/make_user.ts

diff --git a/src/pages/(admin)/BatchCreateUser.tsx b/src/pages/(admin)/BatchCreateUser.tsx
new file mode 100644
index 00000000..d470c2e8
--- /dev/null
+++ b/src/pages/(admin)/BatchCreateUser.tsx
@@ -0,0 +1,236 @@
+import Button from "@/components/Low/Button";
+import useUsers from "@/hooks/useUsers";
+import { Type as UserType, User } from "@/interfaces/user";
+import axios from "axios";
+import { uniqBy } from "lodash";
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import { useFilePicker } from "use-file-picker";
+import readXlsxFile from "read-excel-file";
+import Modal from "@/components/Modal";
+import { BsQuestionCircleFill } from "react-icons/bs";
+import { PermissionType } from "@/interfaces/permissions";
+const EMAIL_REGEX = new RegExp(
+  /^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/
+);
+
+type Type = Exclude<UserType, "admin" | "developer" | "agent" | "mastercorporate">
+
+const USER_TYPE_LABELS: {[key in Type]: string} = {
+  student: "Student",
+  teacher: "Teacher",
+  corporate: "Corporate",
+};
+
+const USER_TYPE_PERMISSIONS: {
+  [key in Type]: { perm: PermissionType | undefined; list: Type[] };
+} = {
+  student: {
+    perm: "createCodeStudent",
+    list: [],
+  },
+  teacher: {
+    perm: "createCodeTeacher",
+    list: [],
+  },
+  corporate: {
+    perm: "createCodeCorporate",
+    list: ["student", "teacher"],
+  },
+};
+
+export default function BatchCreateUser({ user }: { user: User }) {
+  const [infos, setInfos] = useState<
+    { email: string; name: string; passport_id:string, type: Type, demographicInformation: {
+      country: string,
+      passport_id:string,
+      phone: string
+    }  }[]
+  >([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [type, setType] = useState<Type>("student");
+  const [showHelp, setShowHelp] = useState(false);
+
+  const { users } = useUsers();
+
+  const { openFilePicker, filesContent, clear } = useFilePicker({
+    accept: ".xlsx",
+    multiple: false,
+    readAs: "ArrayBuffer",
+  });
+
+
+  useEffect(() => {
+    if (filesContent.length > 0) {
+      const file = filesContent[0];
+      readXlsxFile(file.content).then((rows) => {
+        try {
+          const information = uniqBy(
+            rows
+              .map((row) => {
+                const [
+                  firstName,
+                  lastName,
+                  country,
+                  passport_id,
+                  email,
+                  phone
+                ] = row as string[];
+                return EMAIL_REGEX.test(email.toString().trim())
+                  ? {
+                    email: email.toString().trim().toLowerCase(),
+                    name: `${firstName ?? ""} ${lastName ?? ""}`.trim().toLowerCase(),
+                    type: type,
+                    passport_id: passport_id?.toString().trim() || undefined,
+                    demographicInformation: {
+                      country: country,
+                      passport_id: passport_id?.toString().trim() || undefined,  
+                      phone,
+                    }
+                    }
+                  : undefined;
+              })
+              .filter((x) => !!x) as typeof infos,
+            (x) => x.email
+          );
+
+          if (information.length === 0) {
+            toast.error(
+              "Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!"
+            );
+            return clear();
+          }
+
+          setInfos(information);
+        } catch {
+          toast.error(
+            "Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!"
+          );
+          return clear();
+        }
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filesContent]);
+
+  const makeUsers = async () => {
+    const newUsers = infos.filter(
+      (x) => !users.map((u) => u.email).includes(x.email)
+    );
+    const confirmed = confirm(
+        `You are about to add ${newUsers.length}, are you sure you want to continue?`
+    )
+    if (!confirmed)
+      return;
+
+    if (newUsers.length > 0)
+      {
+        setIsLoading(true);
+        Promise.all(newUsers.map((user) => {
+          return axios.post("/api/make_user", user)
+        })).finally(() => {
+          return clear();
+        })
+      }
+    setIsLoading(false);
+    setInfos([]);
+  };
+
+
+  return (
+    <>
+      <Modal
+        isOpen={showHelp}
+        onClose={() => setShowHelp(false)}
+        title="Excel File Format"
+      >
+        <div className="mt-4 flex flex-col gap-2">
+          <span>Please upload an Excel file with the following format:</span>
+          <table className="w-full">
+            <thead>
+              <tr>
+                <th className="border border-neutral-200 px-2 py-1">
+                  First Name
+                </th>
+                <th className="border border-neutral-200 px-2 py-1">
+                  Last Name
+                </th>
+                <th className="border border-neutral-200 px-2 py-1">Country</th>
+                <th className="border border-neutral-200 px-2 py-1">
+                  Passport/National ID
+                </th>
+                <th className="border border-neutral-200 px-2 py-1">E-mail</th>
+                <th className="border border-neutral-200 px-2 py-1">
+                  Phone Number
+                </th>
+              </tr>
+            </thead>
+          </table>
+          <span className="mt-4">
+            <b>Notes:</b>
+            <ul>
+              <li>- All incorrect e-mails will be ignored;</li>
+              <li>- All already registered e-mails will be ignored;</li>
+              <li>
+                - You may have a header row with the format above, however, it
+                is not necessary;
+              </li>
+              <li>
+                - All of the e-mails in the file will receive an e-mail to join
+                EnCoach with the role selected below.
+              </li>
+            </ul>
+          </span>
+        </div>
+      </Modal>
+      <div className="border-mti-gray-platinum flex flex-col gap-4 rounded-xl border p-4">
+        <div className="flex items-end justify-between">
+          <label className="text-mti-gray-dim text-base font-normal">
+            Choose an Excel file
+          </label>
+          <div
+            className="tooltip cursor-pointer"
+            data-tip="Excel File Format"
+            onClick={() => setShowHelp(true)}
+          >
+            <BsQuestionCircleFill />
+          </div>
+        </div>
+        <Button
+          onClick={openFilePicker}
+          isLoading={isLoading}
+          disabled={isLoading}
+        >
+          {filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
+        </Button>
+        <label className="text-mti-gray-dim text-base font-normal">
+          Select the type of user they should be
+        </label>
+        {user && (
+          <select
+            defaultValue="student"
+            onChange={(e) => setType(e.target.value as Type)}
+            className="flex min-h-[70px] w-full min-w-[350px] cursor-pointer justify-center rounded-full border bg-white p-6 text-sm font-normal focus:outline-none"
+          >
+            
+            {Object.keys(USER_TYPE_LABELS)
+              .map((type) => (
+                <option key={type} value={type}>
+                  {USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
+                </option>
+              ))}
+          </select>
+        )}
+        <Button
+          className="my-auto"
+          onClick={makeUsers}
+          disabled={
+            infos.length === 0
+          }
+        >
+          Create
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/src/pages/api/make_user.ts b/src/pages/api/make_user.ts
new file mode 100644
index 00000000..2abd5c90
--- /dev/null
+++ b/src/pages/api/make_user.ts
@@ -0,0 +1,110 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { app } from "@/firebase";
+import {
+  getFirestore,
+  setDoc,
+  doc,
+  query,
+  collection,
+  where,
+  getDocs,
+  getDoc,
+  deleteDoc,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import {v4} from "uuid";
+import {Group} from "@/interfaces/user";
+import {createUserWithEmailAndPassword, getAuth} from "firebase/auth";
+
+const DEFAULT_DESIRED_LEVELS = {
+	reading: 9,
+	listening: 9,
+	writing: 9,
+	speaking: 9,
+};
+
+const DEFAULT_LEVELS = {
+	reading: 0,
+	listening: 0,
+	writing: 0,
+	speaking: 0,
+};
+
+const auth = getAuth(app);
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  
+  if (req.method === "POST") return post(req, res);
+
+  return res.status(404).json({ ok: false });
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    return res
+      .status(401)
+      .json({ ok: false, reason: "You must be logged in to make user!" });
+  }
+
+  const { email, passport_id, type } = req.body as {
+    email: string;
+    passport_id: string;
+    type: string
+  };
+  createUserWithEmailAndPassword(auth, email.toLowerCase(), passport_id)
+    .then(async (userCredentials) => {
+      const userId = userCredentials.user.uid;
+
+      const user = {
+        ...req.body,
+        bio: "",
+        type: type,
+        focus: "academic",
+        status: "paymentDue",
+        
+        desiredLevels: DEFAULT_DESIRED_LEVELS,
+        levels: DEFAULT_LEVELS,
+        isFirstLogin: false,
+      };
+      await setDoc(doc(db, "users", userId), user);
+      if (type === "corporate") {
+        const defaultTeachersGroup: Group = {
+          admin: userId,
+          id: v4(),
+          name: "Teachers",
+          participants: [],
+          disableEditing: true,
+        };
+
+        const defaultStudentsGroup: Group = {
+          admin: userId,
+          id: v4(),
+          name: "Students",
+          participants: [],
+          disableEditing: true,
+        };
+
+        const defaultCorporateGroup: Group = {
+          admin: userId,
+          id: v4(),
+          name: "Corporate",
+          participants: [],
+          disableEditing: true,
+        };
+
+
+        await setDoc(doc(db, "groups", defaultTeachersGroup.id), defaultTeachersGroup);
+        await setDoc(doc(db, "groups", defaultStudentsGroup.id), defaultStudentsGroup);
+        await setDoc(doc(db, "groups", defaultCorporateGroup.id), defaultCorporateGroup);
+      }
+      res.status(200).json({ ok: true });
+    })
+    .catch((error) => {
+      console.log(error);
+      res.status(401).json({error});
+    });
+}
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index 3886d13e..e3488cd9 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -13,6 +13,7 @@ import Lists from "./(admin)/Lists";
 import BatchCodeGenerator from "./(admin)/BatchCodeGenerator";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import ExamGenerator from "./(admin)/ExamGenerator";
+import BatchCreateUser from "./(admin)/BatchCreateUser";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -59,10 +60,11 @@ export default function Admin() {
 				<Layout user={user} className="gap-6">
 					<section className="w-full flex -md:flex-col -xl:gap-2 gap-8 justify-between">
 						<ExamLoader />
+					  <BatchCreateUser user={user} />
 						{user.type !== "teacher" && (
 							<>
-								<CodeGenerator user={user} />
-								<BatchCodeGenerator user={user} />
+							  <CodeGenerator user={user} />
+							  <BatchCodeGenerator user={user} />
 							</>
 						)}
 					</section>
diff --git a/src/utils/permissions.ts b/src/utils/permissions.ts
index daa309a3..65d7d17c 100644
--- a/src/utils/permissions.ts
+++ b/src/utils/permissions.ts
@@ -42,4 +42,4 @@ export function getTypesOfUser(types: Type[]) {
     return userTypes.filter((userType) => {
         return !types.includes(userType);
     })
-}
\ No newline at end of file
+}

From 4e30eda06f1a8a3bf16bf075c881919ddc49725c Mon Sep 17 00:00:00 2001
From: mzerone <mohammedzeglam@gmail.com>
Date: Sat, 3 Aug 2024 01:37:41 +0200
Subject: [PATCH 02/14] make user verified by default.

---
 src/pages/api/make_user.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/api/make_user.ts b/src/pages/api/make_user.ts
index 2abd5c90..5a30cf55 100644
--- a/src/pages/api/make_user.ts
+++ b/src/pages/api/make_user.ts
@@ -65,10 +65,10 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
         type: type,
         focus: "academic",
         status: "paymentDue",
-        
         desiredLevels: DEFAULT_DESIRED_LEVELS,
         levels: DEFAULT_LEVELS,
         isFirstLogin: false,
+        isVerified: true
       };
       await setDoc(doc(db, "users", userId), user);
       if (type === "corporate") {

From 309dfba583e59f810e3fb05b6739d15f80251f0c Mon Sep 17 00:00:00 2001
From: Carlos Mesquita <carlos.mesquita@ecrop.dev>
Date: Mon, 5 Aug 2024 10:41:11 +0100
Subject: [PATCH 03/14] Fixed the training content view

---
 package-lock.json                             | 643 ++++++++++++++----
 package.json                                  |   4 +-
 src/components/Dropdown.tsx                   |   4 +-
 src/components/InfiniteCarousel.tsx           | 168 +++++
 src/components/Sidebar.tsx                    |   3 +
 src/components/StatGridItem.tsx               |  45 +-
 .../TrainingContent/TrainingScore.tsx         |   2 +-
 src/pages/training/[id]/index.tsx             | 209 +++---
 src/pages/training/index.tsx                  |   2 +-
 src/styles/globals.css                        |  29 +-
 yarn.lock                                     |  81 +--
 11 files changed, 906 insertions(+), 284 deletions(-)
 create mode 100644 src/components/InfiniteCarousel.tsx

diff --git a/package-lock.json b/package-lock.json
index 8bbc1cb6..b7c22f81 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@beam-australia/react-env": "^3.1.1",
         "@dnd-kit/core": "^6.1.0",
+        "@firebase/util": "^1.9.7",
         "@headlessui/react": "^1.7.13",
         "@mdi/js": "^7.1.96",
         "@mdi/react": "^1.6.1",
@@ -22,6 +23,7 @@
         "@types/node": "18.13.0",
         "@types/react": "18.0.27",
         "@types/react-dom": "18.0.10",
+        "@use-gesture/react": "^10.3.1",
         "axios": "^1.3.5",
         "bcrypt": "^5.1.1",
         "chart.js": "^4.2.1",
@@ -64,14 +66,12 @@
         "react-phone-number-input": "^3.3.6",
         "react-player": "^2.12.0",
         "react-select": "^5.7.5",
-        "react-slick": "^0.30.2",
         "react-string-replace": "^1.1.0",
         "react-toastify": "^9.1.2",
         "react-tooltip": "^5.27.1",
         "react-xarrows": "^2.0.2",
         "read-excel-file": "^5.7.1",
         "short-unique-id": "5.0.2",
-        "slick-carousel": "^1.8.1",
         "stripe": "^13.10.0",
         "swr": "^2.1.3",
         "tailwind-scrollbar-hide": "^1.1.7",
@@ -91,7 +91,6 @@
         "@types/qrcode": "^1.5.5",
         "@types/react-csv": "^1.1.10",
         "@types/react-datepicker": "^4.15.1",
-        "@types/react-slick": "^0.23.13",
         "@types/uuid": "^9.0.1",
         "@types/wavesurfer.js": "^6.0.6",
         "@wixc3/react-board": "^2.2.0",
@@ -772,11 +771,27 @@
         "@firebase/app-compat": "0.x"
       }
     },
+    "node_modules/@firebase/analytics-compat/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/analytics-types": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@firebase/analytics-types/-/analytics-types-0.8.0.tgz",
       "integrity": "sha512-iRP+QKI2+oz3UAh4nPEq14CsEjrjD6a5+fuypjScisAh9kXKFvdJOZJDwk7kikLvWVLGEs9+kIUS4LPQV7VZVw=="
     },
+    "node_modules/@firebase/analytics/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/app": {
       "version": "0.9.7",
       "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.9.7.tgz",
@@ -819,6 +834,14 @@
         "@firebase/app-compat": "0.x"
       }
     },
+    "node_modules/@firebase/app-check-compat/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/app-check-interop-types": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@firebase/app-check-interop-types/-/app-check-interop-types-0.2.0.tgz",
@@ -829,6 +852,14 @@
       "resolved": "https://registry.npmjs.org/@firebase/app-check-types/-/app-check-types-0.5.0.tgz",
       "integrity": "sha512-uwSUj32Mlubybw7tedRzR24RP8M8JUVR3NPiMk3/Z4bCmgEKTlQBwMXrehDAZ2wF+TsBq0SN1c6ema71U/JPyQ=="
     },
+    "node_modules/@firebase/app-check/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/app-compat": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.7.tgz",
@@ -841,11 +872,27 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@firebase/app-compat/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/app-types": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.0.tgz",
       "integrity": "sha512-AeweANOIo0Mb8GiYm3xhTEBVCmPwTYAu9Hcd2qSkLuga/6+j9b1Jskl5bpiSQWy9eJ/j5pavxj6eYogmnuzm+Q=="
     },
+    "node_modules/@firebase/app/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/auth": {
       "version": "0.22.0",
       "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-0.22.0.tgz",
@@ -877,6 +924,14 @@
         "@firebase/app-compat": "0.x"
       }
     },
+    "node_modules/@firebase/auth-compat/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/auth-interop-types": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.2.1.tgz",
@@ -891,6 +946,14 @@
         "@firebase/util": "1.x"
       }
     },
+    "node_modules/@firebase/auth/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/component": {
       "version": "0.6.4",
       "resolved": "https://registry.npmjs.org/@firebase/component/-/component-0.6.4.tgz",
@@ -900,6 +963,14 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@firebase/component/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/database": {
       "version": "0.14.4",
       "resolved": "https://registry.npmjs.org/@firebase/database/-/database-0.14.4.tgz",
@@ -926,6 +997,14 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@firebase/database-compat/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/database-types": {
       "version": "0.10.4",
       "resolved": "https://registry.npmjs.org/@firebase/database-types/-/database-types-0.10.4.tgz",
@@ -935,6 +1014,22 @@
         "@firebase/util": "1.9.3"
       }
     },
+    "node_modules/@firebase/database-types/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/database/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/firestore": {
       "version": "3.10.0",
       "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-3.10.0.tgz",
@@ -971,6 +1066,14 @@
         "@firebase/app-compat": "0.x"
       }
     },
+    "node_modules/@firebase/firestore-compat/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/firestore-types": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-2.5.1.tgz",
@@ -980,6 +1083,14 @@
         "@firebase/util": "1.x"
       }
     },
+    "node_modules/@firebase/firestore/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/functions": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.9.4.tgz",
@@ -1012,11 +1123,27 @@
         "@firebase/app-compat": "0.x"
       }
     },
+    "node_modules/@firebase/functions-compat/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/functions-types": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/@firebase/functions-types/-/functions-types-0.6.0.tgz",
       "integrity": "sha512-hfEw5VJtgWXIRf92ImLkgENqpL6IWpYaXVYiRkFY1jJ9+6tIhWM7IzzwbevwIIud/jaxKVdRzD7QBWfPmkwCYw=="
     },
+    "node_modules/@firebase/functions/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/installations": {
       "version": "0.6.4",
       "resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.6.4.tgz",
@@ -1046,6 +1173,14 @@
         "@firebase/app-compat": "0.x"
       }
     },
+    "node_modules/@firebase/installations-compat/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/installations-types": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@firebase/installations-types/-/installations-types-0.5.0.tgz",
@@ -1054,6 +1189,14 @@
         "@firebase/app-types": "0.x"
       }
     },
+    "node_modules/@firebase/installations/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/logger": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.4.0.tgz",
@@ -1092,11 +1235,27 @@
         "@firebase/app-compat": "0.x"
       }
     },
+    "node_modules/@firebase/messaging-compat/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/messaging-interop-types": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@firebase/messaging-interop-types/-/messaging-interop-types-0.2.0.tgz",
       "integrity": "sha512-ujA8dcRuVeBixGR9CtegfpU4YmZf3Lt7QYkcj693FFannwNuZgfAYaTmbJ40dtjB81SAu6tbFPL9YLNT15KmOQ=="
     },
+    "node_modules/@firebase/messaging/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/performance": {
       "version": "0.6.4",
       "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.6.4.tgz",
@@ -1128,11 +1287,27 @@
         "@firebase/app-compat": "0.x"
       }
     },
+    "node_modules/@firebase/performance-compat/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/performance-types": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@firebase/performance-types/-/performance-types-0.2.0.tgz",
       "integrity": "sha512-kYrbr8e/CYr1KLrLYZZt2noNnf+pRwDq2KK9Au9jHrBMnb0/C9X9yWSXmZkFt4UIdsQknBq8uBB7fsybZdOBTA=="
     },
+    "node_modules/@firebase/performance/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/remote-config": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/@firebase/remote-config/-/remote-config-0.4.4.tgz",
@@ -1164,11 +1339,27 @@
         "@firebase/app-compat": "0.x"
       }
     },
+    "node_modules/@firebase/remote-config-compat/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/remote-config-types": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@firebase/remote-config-types/-/remote-config-types-0.3.0.tgz",
       "integrity": "sha512-RtEH4vdcbXZuZWRZbIRmQVBNsE7VDQpet2qFvq6vwKLBIQRQR5Kh58M4ok3A3US8Sr3rubYnaGqZSurCwI8uMA=="
     },
+    "node_modules/@firebase/remote-config/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/storage": {
       "version": "0.11.2",
       "resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.11.2.tgz",
@@ -1198,6 +1389,14 @@
         "@firebase/app-compat": "0.x"
       }
     },
+    "node_modules/@firebase/storage-compat/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/storage-types": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.8.0.tgz",
@@ -1207,7 +1406,7 @@
         "@firebase/util": "1.x"
       }
     },
-    "node_modules/@firebase/util": {
+    "node_modules/@firebase/storage/node_modules/@firebase/util": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
       "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
@@ -1215,6 +1414,14 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@firebase/util": {
+      "version": "1.9.7",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.7.tgz",
+      "integrity": "sha512-fBVNH/8bRbYjqlbIhZ+lBtdAAS4WqZumx03K06/u7fJSpz1TGjEMm1ImvKD47w+xaFKIP2ori6z8BrbakRfjJA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@firebase/webchannel-wrapper": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.9.0.tgz",
@@ -2642,15 +2849,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/react-slick": {
-      "version": "0.23.13",
-      "resolved": "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.13.tgz",
-      "integrity": "sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -2794,6 +2992,22 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@use-gesture/core": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
+      "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw=="
+    },
+    "node_modules/@use-gesture/react": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
+      "integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
+      "dependencies": {
+        "@use-gesture/core": "10.3.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/@wixc3/board-core": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@wixc3/board-core/-/board-core-2.2.0.tgz",
@@ -4106,11 +4320,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/enquire.js": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
-      "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw=="
-    },
     "node_modules/ent": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/ent/-/ent-2.2.1.tgz",
@@ -5115,6 +5324,14 @@
         "@google-cloud/storage": "^6.9.5"
       }
     },
+    "node_modules/firebase/node_modules/@firebase/util": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/flat-cache": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@@ -6629,14 +6846,6 @@
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
     },
-    "node_modules/json2mq": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
-      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
-      "dependencies": {
-        "string-convert": "^0.2.0"
-      }
-    },
     "node_modules/json5": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
@@ -6859,11 +7068,6 @@
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
       "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ=="
     },
-    "node_modules/lodash.debounce": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
-    },
     "node_modules/lodash.includes": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@@ -8492,22 +8696,6 @@
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
       "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
     },
-    "node_modules/react-slick": {
-      "version": "0.30.2",
-      "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz",
-      "integrity": "sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==",
-      "dependencies": {
-        "classnames": "^2.2.5",
-        "enquire.js": "^2.1.6",
-        "json2mq": "^0.2.0",
-        "lodash.debounce": "^4.0.8",
-        "resize-observer-polyfill": "^1.5.0"
-      },
-      "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/react-string-replace": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/react-string-replace/-/react-string-replace-1.1.0.tgz",
@@ -8677,11 +8865,6 @@
         "lodash": "^4.17.21"
       }
     },
-    "node_modules/resize-observer-polyfill": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
-    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -8929,14 +9112,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/slick-carousel": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
-      "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
-      "peerDependencies": {
-        "jquery": ">=1.8.0"
-      }
-    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -8987,11 +9162,6 @@
         "safe-buffer": "~5.2.0"
       }
     },
-    "node_modules/string-convert": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
-      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
-    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -10531,6 +10701,16 @@
         "@firebase/logger": "0.4.0",
         "@firebase/util": "1.9.3",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/analytics-compat": {
@@ -10543,6 +10723,16 @@
         "@firebase/component": "0.6.4",
         "@firebase/util": "1.9.3",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/analytics-types": {
@@ -10560,6 +10750,16 @@
         "@firebase/util": "1.9.3",
         "idb": "7.0.1",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/app-check": {
@@ -10571,6 +10771,16 @@
         "@firebase/logger": "0.4.0",
         "@firebase/util": "1.9.3",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/app-check-compat": {
@@ -10584,6 +10794,16 @@
         "@firebase/logger": "0.4.0",
         "@firebase/util": "1.9.3",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/app-check-interop-types": {
@@ -10606,6 +10826,16 @@
         "@firebase/logger": "0.4.0",
         "@firebase/util": "1.9.3",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/app-types": {
@@ -10623,6 +10853,16 @@
         "@firebase/util": "1.9.3",
         "node-fetch": "2.6.7",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/auth-compat": {
@@ -10636,6 +10876,16 @@
         "@firebase/util": "1.9.3",
         "node-fetch": "2.6.7",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/auth-interop-types": {
@@ -10655,6 +10905,16 @@
       "requires": {
         "@firebase/util": "1.9.3",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/database": {
@@ -10668,6 +10928,16 @@
         "@firebase/util": "1.9.3",
         "faye-websocket": "0.11.4",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/database-compat": {
@@ -10681,6 +10951,16 @@
         "@firebase/logger": "0.4.0",
         "@firebase/util": "1.9.3",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/database-types": {
@@ -10690,6 +10970,16 @@
       "requires": {
         "@firebase/app-types": "0.9.0",
         "@firebase/util": "1.9.3"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/firestore": {
@@ -10705,6 +10995,16 @@
         "@grpc/proto-loader": "^0.6.13",
         "node-fetch": "2.6.7",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/firestore-compat": {
@@ -10717,6 +11017,16 @@
         "@firebase/firestore-types": "2.5.1",
         "@firebase/util": "1.9.3",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/firestore-types": {
@@ -10736,6 +11046,16 @@
         "@firebase/util": "1.9.3",
         "node-fetch": "2.6.7",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/functions-compat": {
@@ -10748,6 +11068,16 @@
         "@firebase/functions-types": "0.6.0",
         "@firebase/util": "1.9.3",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/functions-types": {
@@ -10764,6 +11094,16 @@
         "@firebase/util": "1.9.3",
         "idb": "7.0.1",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/installations-compat": {
@@ -10776,6 +11116,16 @@
         "@firebase/installations-types": "0.5.0",
         "@firebase/util": "1.9.3",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/installations-types": {
@@ -10802,6 +11152,16 @@
         "@firebase/util": "1.9.3",
         "idb": "7.0.1",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/messaging-compat": {
@@ -10813,6 +11173,16 @@
         "@firebase/messaging": "0.12.4",
         "@firebase/util": "1.9.3",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/messaging-interop-types": {
@@ -10830,6 +11200,16 @@
         "@firebase/logger": "0.4.0",
         "@firebase/util": "1.9.3",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/performance-compat": {
@@ -10843,6 +11223,16 @@
         "@firebase/performance-types": "0.2.0",
         "@firebase/util": "1.9.3",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/performance-types": {
@@ -10860,6 +11250,16 @@
         "@firebase/logger": "0.4.0",
         "@firebase/util": "1.9.3",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/remote-config-compat": {
@@ -10873,6 +11273,16 @@
         "@firebase/remote-config-types": "0.3.0",
         "@firebase/util": "1.9.3",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/remote-config-types": {
@@ -10889,6 +11299,16 @@
         "@firebase/util": "1.9.3",
         "node-fetch": "2.6.7",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/storage-compat": {
@@ -10901,6 +11321,16 @@
         "@firebase/storage-types": "0.8.0",
         "@firebase/util": "1.9.3",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@firebase/storage-types": {
@@ -10909,9 +11339,9 @@
       "integrity": "sha512-isRHcGrTs9kITJC0AVehHfpraWFui39MPaU7Eo8QfWlqW7YPymBmRgjDrlOgFdURh6Cdeg07zmkLP5tzTKRSpg=="
     },
     "@firebase/util": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
-      "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+      "version": "1.9.7",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.7.tgz",
+      "integrity": "sha512-fBVNH/8bRbYjqlbIhZ+lBtdAAS4WqZumx03K06/u7fJSpz1TGjEMm1ImvKD47w+xaFKIP2ori6z8BrbakRfjJA==",
       "requires": {
         "tslib": "^2.1.0"
       }
@@ -12063,15 +12493,6 @@
         "@types/react": "*"
       }
     },
-    "@types/react-slick": {
-      "version": "0.23.13",
-      "resolved": "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.13.tgz",
-      "integrity": "sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
-    },
     "@types/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -12167,6 +12588,19 @@
         "eslint-visitor-keys": "^3.3.0"
       }
     },
+    "@use-gesture/core": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
+      "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw=="
+    },
+    "@use-gesture/react": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
+      "integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
+      "requires": {
+        "@use-gesture/core": "10.3.1"
+      }
+    },
     "@wixc3/board-core": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@wixc3/board-core/-/board-core-2.2.0.tgz",
@@ -13155,11 +13589,6 @@
         "tapable": "^2.2.0"
       }
     },
-    "enquire.js": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
-      "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw=="
-    },
     "ent": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/ent/-/ent-2.2.1.tgz",
@@ -13899,6 +14328,16 @@
         "@firebase/storage": "0.11.2",
         "@firebase/storage-compat": "0.3.2",
         "@firebase/util": "1.9.3"
+      },
+      "dependencies": {
+        "@firebase/util": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
+          "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "firebase-admin": {
@@ -14988,14 +15427,6 @@
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
     },
-    "json2mq": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
-      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
-      "requires": {
-        "string-convert": "^0.2.0"
-      }
-    },
     "json5": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
@@ -15187,11 +15618,6 @@
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
       "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ=="
     },
-    "lodash.debounce": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
-    },
     "lodash.includes": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@@ -16351,18 +16777,6 @@
         }
       }
     },
-    "react-slick": {
-      "version": "0.30.2",
-      "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz",
-      "integrity": "sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==",
-      "requires": {
-        "classnames": "^2.2.5",
-        "enquire.js": "^2.1.6",
-        "json2mq": "^0.2.0",
-        "lodash.debounce": "^4.0.8",
-        "resize-observer-polyfill": "^1.5.0"
-      }
-    },
     "react-string-replace": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/react-string-replace/-/react-string-replace-1.1.0.tgz",
@@ -16486,11 +16900,6 @@
         "lodash": "^4.17.21"
       }
     },
-    "resize-observer-polyfill": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
-    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -16656,11 +17065,6 @@
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
       "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="
     },
-    "slick-carousel": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
-      "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA=="
-    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -16702,11 +17106,6 @@
         "safe-buffer": "~5.2.0"
       }
     },
-    "string-convert": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
-      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
-    },
     "string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
diff --git a/package.json b/package.json
index e47b874a..edebc0e7 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@types/node": "18.13.0",
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
+    "@use-gesture/react": "^10.3.1",
     "axios": "^1.3.5",
     "bcrypt": "^5.1.1",
     "chart.js": "^4.2.1",
@@ -67,14 +68,12 @@
     "react-phone-number-input": "^3.3.6",
     "react-player": "^2.12.0",
     "react-select": "^5.7.5",
-    "react-slick": "^0.30.2",
     "react-string-replace": "^1.1.0",
     "react-toastify": "^9.1.2",
     "react-tooltip": "^5.27.1",
     "react-xarrows": "^2.0.2",
     "read-excel-file": "^5.7.1",
     "short-unique-id": "5.0.2",
-    "slick-carousel": "^1.8.1",
     "stripe": "^13.10.0",
     "swr": "^2.1.3",
     "tailwind-scrollbar-hide": "^1.1.7",
@@ -94,7 +93,6 @@
     "@types/qrcode": "^1.5.5",
     "@types/react-csv": "^1.1.10",
     "@types/react-datepicker": "^4.15.1",
-    "@types/react-slick": "^0.23.13",
     "@types/uuid": "^9.0.1",
     "@types/wavesurfer.js": "^6.0.6",
     "@wixc3/react-board": "^2.2.0",
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index 596706ce..61054e6b 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -2,7 +2,7 @@ import React, { useState, ReactNode, useRef, useEffect } from 'react';
 import { animated, useSpring } from '@react-spring/web';
 
 interface DropdownProps {
-    title: string;
+    title: ReactNode;
     open?: boolean;
     className?: string;
     contentWrapperClassName?: string;
@@ -81,4 +81,4 @@ const Dropdown: React.FC<DropdownProps> = ({
     );
 };
 
-export default Dropdown;
\ No newline at end of file
+export default Dropdown;
diff --git a/src/components/InfiniteCarousel.tsx b/src/components/InfiniteCarousel.tsx
new file mode 100644
index 00000000..bdc4657f
--- /dev/null
+++ b/src/components/InfiniteCarousel.tsx
@@ -0,0 +1,168 @@
+import React, { useRef, useEffect, useState, useCallback, ReactNode } from 'react';
+import { useSpring, animated } from '@react-spring/web';
+import { useDrag } from '@use-gesture/react';
+import clsx from 'clsx';
+
+interface InfiniteCarouselProps {
+  children: React.ReactNode;
+  height: string;
+  speed?: number;
+  gap?: number;
+  overlay?: ReactNode;
+  overlayFunc?: (index: number) => void;
+  overlayClassName?: string;
+}
+
+const InfiniteCarousel: React.FC<InfiniteCarouselProps> = ({
+  children,
+  height,
+  speed = 20000,
+  gap = 16,
+  overlay = undefined,
+  overlayFunc = undefined,
+  overlayClassName = ""
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState<number>(0);
+  const itemCount = React.Children.count(children);
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+  const [itemWidth, setItemWidth] = useState<number>(0);
+  const [isInfinite, setIsInfinite] = useState<boolean>(true);
+  const dragStartX = useRef<number>(0);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (containerRef.current) {
+        const containerWidth = containerRef.current.clientWidth;
+        setContainerWidth(containerWidth);
+
+        const firstChild = containerRef.current.firstElementChild?.firstElementChild as HTMLElement;
+        if (firstChild) {
+          const childWidth = firstChild.offsetWidth;
+          setItemWidth(childWidth);
+
+          const totalContentWidth = (childWidth + gap) * itemCount - gap;
+          setIsInfinite(totalContentWidth > containerWidth);
+        }
+      }
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [gap, itemCount]);
+
+  const totalWidth = (itemWidth + gap) * itemCount;
+
+  const [{ x }, api] = useSpring(() => ({
+    from: { x: 0 },
+    to: { x: -totalWidth },
+    config: { duration: speed },
+    loop: true,
+  }));
+
+  const startAnimation = useCallback(() => {
+    if (isInfinite) {
+      api.start({
+        from: { x: x.get() },
+        to: { x: x.get() - totalWidth },
+        config: { duration: speed },
+        loop: true,
+      });
+    } else {
+      api.stop();
+      api.start({ x: 0, immediate: true });
+    }
+  }, [api, x, totalWidth, speed, isInfinite]);
+
+  useEffect(() => {
+    if (containerWidth > 0 && !isDragging) {
+      startAnimation();
+    }
+  }, [containerWidth, isDragging, startAnimation]);
+
+  const bind = useDrag(({ down, movement: [mx], first }) => {
+    if (!isInfinite) return;
+    if (first) {
+      setIsDragging(true);
+      api.stop();
+      dragStartX.current = x.get();
+    }
+    if (down) {
+      let newX = dragStartX.current + mx;
+      newX = ((newX % totalWidth) + totalWidth) % totalWidth;
+      if (newX > 0) newX -= totalWidth;
+      api.start({ x: newX, immediate: true });
+    } else {
+      setIsDragging(false);
+      startAnimation();
+    }
+  }, {
+    filterTaps: true,
+    from: () => [x.get(), 0],
+  });
+
+  return (
+    <div
+      className="overflow-hidden relative select-none"
+      style={{ height, touchAction: 'pan-y' }}
+      ref={containerRef}
+      {...(isInfinite ? bind() : {})}
+    >
+      <animated.div
+        className="flex"
+        style={{
+          display: 'flex',
+          willChange: 'transform',
+          transform: isInfinite
+            ? x.to((x) => `translate3d(${x}px, 0, 0)`)
+            : 'none',
+          gap: `${gap}px`,
+          width: 'fit-content',
+        }}
+      >
+        {React.Children.map(children, (child, i) => (
+          <div
+            key={i}
+            className="flex-shrink-0 relative"
+          >
+            {overlay !== undefined && overlayFunc !== undefined && (
+              <div className={clsx('absolute', overlayClassName)} onClick={() => overlayFunc(i)}>
+                {overlay}
+              </div>
+            )}
+            <div
+              className="select-none"
+              style={{ pointerEvents: 'none' }}
+            >
+              {child}
+            </div>
+          </div>
+        ))}
+        {isInfinite && React.Children.map(children, (child, i) => (
+          <div
+            key={`clone-${i}`}
+            className="flex-shrink-0 relative"
+          >
+            {overlay !== undefined && overlayFunc !== undefined && (
+              <div className={clsx('absolute', overlayClassName)} onClick={() => overlayFunc(i)}>
+                {overlay}
+              </div>
+            )}
+            <div
+              className="select-none"
+              style={{ pointerEvents: 'none' }}
+            >
+              {child}
+            </div>
+          </div>
+        ))}
+      </animated.div>
+    </div>
+  );
+};
+
+export default InfiniteCarousel;
\ No newline at end of file
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 15852575..47eded75 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -175,6 +175,9 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 				{checkAccess(user, getTypesOfUser(["agent"]), "viewRecords") && (
 					<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={true} />
 				)}
+				{checkAccess(user, getTypesOfUser(["agent"]), "viewRecords") && (
+					<Nav disabled={disableNavigation} Icon={CiDumbbell} label="Training" path={path} keyPath="/training" isMinimized={true} />
+				)}
 				{checkAccess(user, getTypesOfUser(["student"])) && (
 					<Nav disabled={disableNavigation} Icon={BsShieldFill} label="Settings" path={path} keyPath="/settings" isMinimized={true} />
 				)}
diff --git a/src/components/StatGridItem.tsx b/src/components/StatGridItem.tsx
index 839c8400..70c51eec 100644
--- a/src/components/StatGridItem.tsx
+++ b/src/components/StatGridItem.tsx
@@ -17,7 +17,7 @@ import { Exam, UserSolution } from '@/interfaces/exam';
 import ModuleBadge from './ModuleBadge';
 
 const formatTimestamp = (timestamp: string | number) => {
-    const time = typeof timestamp === "string" ? parseInt(timestamp) : timestamp; 
+    const time = typeof timestamp === "string" ? parseInt(timestamp) : timestamp;
     const date = moment(time);
     const formatter = "YYYY/MM/DD - HH:mm";
     return date.format(formatter);
@@ -68,6 +68,9 @@ const aggregateScoresByModule = (stats: Stat[]): { module: Module; total: number
 };
 
 interface StatsGridItemProps {
+    width?: string | undefined;
+    height?: string | undefined;
+    examNumber?: number | undefined;
     stats: Stat[];
     timestamp: string | number;
     user: User,
@@ -100,7 +103,10 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
     setSelectedModules,
     setInactivity,
     setTimeSpent,
-    renderPdfIcon
+    renderPdfIcon,
+    width = undefined,
+    height = undefined,
+    examNumber = undefined
 }) => {
     const router = useRouter();
     const correct = stats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
@@ -190,15 +196,23 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
                         </span>
                         {renderPdfIcon(session, textColor, textColor)}
                     </div>
-                    {aiUsage >= 50 && user.type !== "student" && (
-                        <div className={clsx(
-                            "ml-auto border px-1 rounded w-fit mr-1",
-                            {
-                                'bg-orange-100 border-orange-400 text-orange-700': aiUsage < 80,
-                                'bg-red-100 border-red-400 text-red-700': aiUsage >= 80,
-                            }
-                        )}>
-                            <span className="text-xs">AI Usage</span>
+                    {examNumber === undefined ? (
+                        <>
+                            {aiUsage >= 50 && user.type !== "student" && (
+                                <div className={clsx(
+                                    "ml-auto border px-1 rounded w-fit mr-1",
+                                    {
+                                        'bg-orange-100 border-orange-400 text-orange-700': aiUsage < 80,
+                                        'bg-red-100 border-red-400 text-red-700': aiUsage >= 80,
+                                    }
+                                )}>
+                                    <span className="text-xs">AI Usage</span>
+                                </div>
+                            )}
+                        </>
+                    ) : (
+                        <div className='flex justify-end'>
+                            <span className="font-semibold bg-gray-200 text-gray-800 px-2.5 py-0.5 rounded-full mt-0.5">{examNumber}</span>
                         </div>
                     )}
                 </div>
@@ -232,7 +246,10 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
                     correct / total < 0.3 && "hover:border-mti-rose",
                     typeof selectedTrainingExams !== "undefined" && typeof timestamp === "string" && selectedTrainingExams.includes(timestamp) && "border-2 border-slate-600",
                 )}
-                onClick={selectExam}
+                style={{
+                    ...(width !== undefined && { width }),
+                    ...(height !== undefined && { height }),
+                }}
                 data-tip="This exam is still being evaluated..."
                 role="button">
                 {content}
@@ -246,6 +263,10 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
                     correct / total < 0.3 && "hover:border-mti-rose",
                 )}
                 data-tip="Your screen size is too small to view previous exams."
+                style={{
+                    ...(width !== undefined && { width }),
+                    ...(height !== undefined && { height }),
+                }}
                 role="button">
                 {content}
             </div>
diff --git a/src/components/TrainingContent/TrainingScore.tsx b/src/components/TrainingContent/TrainingScore.tsx
index 08699013..d7183412 100644
--- a/src/components/TrainingContent/TrainingScore.tsx
+++ b/src/components/TrainingContent/TrainingScore.tsx
@@ -76,7 +76,7 @@ const TrainingScore: React.FC<TrainingScoreProps> = ({
                 </div>
             </div>
             {gridView && (
-                <div className="flex flex-col items-center justify-center gap-2">
+                <div className="flex flex-col items-center justify-center gap-2 -lg:hidden">
                     <div className="flex w-14 h-14 bg-[#F5F5F5] items-center justify-center rounded-xl border border-[#DBDBDB]">
                         <GiLightBulb color={"#FFCC00"} size={28} />
                     </div>
diff --git a/src/pages/training/[id]/index.tsx b/src/pages/training/[id]/index.tsx
index 6ebb69f6..b38121ca 100644
--- a/src/pages/training/[id]/index.tsx
+++ b/src/pages/training/[id]/index.tsx
@@ -24,6 +24,12 @@ import { usePDFDownload } from "@/hooks/usePDFDownload";
 import useAssignments from '@/hooks/useAssignments';
 import useUsers from '@/hooks/useUsers';
 import Dropdown from "@/components/Dropdown";
+import InfiniteCarousel from '@/components/InfiniteCarousel';
+import { LuExternalLink } from "react-icons/lu";
+import { uniqBy } from 'lodash';
+import { getExamById } from '@/utils/exams';
+import { convertToUserSolutions } from '@/utils/stats';
+import { sortByModule } from '@/utils/moduleUtils';
 
 export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
     const user = req.session.user;
@@ -68,12 +74,9 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
     const { assignments } = useAssignments({});
     const { users } = useUsers();
 
-
-
     const router = useRouter();
     const { id } = router.query;
 
-
     useEffect(() => {
         const fetchTrainingContent = async () => {
             if (!id || typeof id !== 'string') return;
@@ -118,6 +121,32 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
         setCurrentTipIndex((prevIndex) => (prevIndex - 1));
     };
 
+    const goToExam = (examNumber: number) => {
+        const stats = trainingContent?.exams[examNumber].stats!;
+        const examPromises = uniqBy(stats, "exam").map((stat) => {
+            return getExamById(stat.module, stat.exam);
+        });
+
+        const { timeSpent, inactivity } = stats[0];
+
+        Promise.all(examPromises).then((exams) => {
+            if (exams.every((x) => !!x)) {
+                if (!!timeSpent) setTimeSpent(timeSpent);
+                if (!!inactivity) setInactivity(inactivity);
+                setUserSolutions(convertToUserSolutions(stats));
+                setShowSolutions(true);
+                setExams(exams.map((x) => x!).sort(sortByModule));
+                setSelectedModules(
+                    exams
+                        .map((x) => x!)
+                        .sort(sortByModule)
+                        .map((x) => x!.module),
+                );
+                router.push("/exercises");
+            }
+        });
+    }
+
     return (
         <>
             <Head>
@@ -137,13 +166,25 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
                         <span className="loading loading-infinity w-32 bg-mti-green-light" />
                     </div>
                 ) : (trainingContent && (
-                    <div className="flex flex-col gap-10">
-                        <div className="flex h-screen flex-col gap-4">
-                            <div className='flex flex-row h-[15%] gap-4'>
-                                {/*<Carousel itemsPerFrame={4} itemsPerScroll={4}>*/}
+                    <div className="flex flex-col gap-8">
+                        <div className="flex flex-row items-center">
+                            <span className="bg-gray-200 text-gray-800 px-3 py-0.5 rounded-full font-semibold text-lg mr-2">{trainingContent.exams.length}</span>
+                            <span>Exams Selected</span>
+                        </div>
+                        <div className='h-[15vh] mb-4'>
+                            <InfiniteCarousel height="150px"
+                                overlay={
+                                    <LuExternalLink size={20} />
+                                }
+                                overlayFunc={goToExam}
+                                overlayClassName='bottom-6 right-5 cursor-pointer'
+                            >
                                 {trainingContent.exams.map((exam, examIndex) => (
                                     <StatsGridItem
                                         key={`exam-${examIndex}`}
+                                        width='350px'
+                                        height='150px'
+                                        examNumber={examIndex + 1}
                                         stats={exam.stats || []}
                                         timestamp={exam.date}
                                         user={user}
@@ -158,79 +199,51 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
                                         renderPdfIcon={renderPdfIcon}
                                     />
                                 ))}
-                                {/* </Carousel> */}
-                            </div>
-                            <div className='flex flex-col h-[75%]' style={{ maxHeight: '85%' }}>
-                                <div className='flex flex-row gap-10 -md:flex-col'>
-                                    <div className="rounded-3xl p-6 w-1/2 shadow-training-inset -md:w-full max-h-full">
-                                        <div className="flex flex-row items-center mb-6 gap-1">
-                                            <MdOutlinePlaylistAddCheckCircle color={"#40A1EA"} size={26} />
-                                            <h2 className={`text-xl font-semibold text-[#40A1EA]`}>General Evaluation</h2>
-                                        </div>
-                                        <TrainingScore
-                                            trainingContent={trainingContent}
-                                            gridView={false}
-                                        />
-                                        <div className="w-full h-px bg-[#D9D9D929] my-6"></div>
-                                        <div className="flex flex-row gap-2 items-center mb-6">
-                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                                <mask id="mask0_112_168" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
-                                                    <rect width="24" height="24" fill="#D9D9D9" />
-                                                </mask>
-                                                <g mask="url(#mask0_112_168)">
-                                                    <path d="M4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V7H4V19H19V21H4ZM8 17C7.45 17 6.97917 16.8042 6.5875 16.4125C6.19583 16.0208 6 15.55 6 15V3H23V15C23 15.55 22.8042 16.0208 22.4125 16.4125C22.0208 16.8042 21.55 17 21 17H8ZM8 15H21V5H8V15ZM10 12H14V7H10V12ZM15 12H19V10H15V12ZM15 9H19V7H15V9Z" fill="#53B2F9" />
-                                                </g>
-                                            </svg>
-                                            <h3 className="text-xl font-semibold text-[#40A1EA]">Performance Breakdown by Exam:</h3>
-                                        </div>
-                                        <ul>
-                                            {trainingContent.exams.flatMap((exam, index) => (
-                                                <li key={index} className="flex flex-col mb-2 bg-[#22E1B30F] p-4 rounded-xl border">
-                                                    <div className="flex flex-row font-semibold border-b-2 border-[#D9D9D929] text-[#22E1B3] mb-2">
-                                                        <span className="border-r-2 border-[#D9D9D929] pr-2">Exam {index + 1}</span>
-                                                        <span className="pl-2">{exam.score}%</span>
-                                                    </div>
-                                                    <div className="flex flex-row items-center gap-2">
-                                                        <BsChatLeftDots size={16} />
-                                                        <p className="text-sm">{exam.performance_comment}</p>
-                                                    </div>
-                                                </li>
-                                            ))}
-                                        </ul>
+                            </InfiniteCarousel>
+                        </div>
+                        <div className='flex flex-col'>
+                            <div className='flex flex-row gap-10 -md:flex-col h-full'>
+                                <div className="flex flex-col rounded-3xl p-6 w-1/2 shadow-training-inset -md:w-full max-h-full">
+                                    <div className="flex flex-row items-center mb-6 gap-1">
+                                        <MdOutlinePlaylistAddCheckCircle color={"#40A1EA"} size={26} />
+                                        <h2 className={`text-xl font-semibold text-[#40A1EA]`}>General Evaluation</h2>
                                     </div>
-                                    <div className="rounded-3xl p-6 w-1/2 shadow-training-inset -md:w-full">
-                                        <div className="flex flex-row items-center mb-4 gap-1">
-                                            <MdOutlineSelfImprovement color={"#40A1EA"} size={24} />
-                                            <h2 className={`text-xl font-semibold text-[#40A1EA]`}>Subjects that Need Improvement</h2>
-                                        </div>
-
-                                        <div className="bg-[#FBFBFB] border rounded-xl p-4 max-h-[500px] overflow-y-auto scrollbar-hide">
-                                            <div className='flex flex-col'>
-                                                <div className="flex flex-row items-center gap-1 mb-4">
-                                                    <div className="flex items-center justify-center w-[48px] h-[48px]">
-                                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                                            <mask id="mask0_112_445" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
-                                                                <rect width="24" height="24" fill="#D9D9D9" />
-                                                            </mask>
-                                                            <g mask="url(#mask0_112_445)">
-                                                                <path d="M6 17H11V15H6V17ZM16 17H18V15H16V17ZM6 13H11V11H6V13ZM16 13H18V7H16V13ZM6 9H11V7H6V9ZM4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V5C2 4.45 2.19583 3.97917 2.5875 3.5875C2.97917 3.19583 3.45 3 4 3H20C20.55 3 21.0208 3.19583 21.4125 3.5875C21.8042 3.97917 22 4.45 22 5V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H4ZM4 19H20V5H4V19Z" fill="#1C1B1F" />
-                                                            </g>
-                                                        </svg>
+                                    <TrainingScore
+                                        trainingContent={trainingContent}
+                                        gridView={false}
+                                    />
+                                    <div className="w-full h-px bg-[#D9D9D929] my-6"></div>
+                                    <div className="flex flex-row gap-2 items-center mb-6">
+                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <mask id="mask0_112_168" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+                                                <rect width="24" height="24" fill="#D9D9D9" />
+                                            </mask>
+                                            <g mask="url(#mask0_112_168)">
+                                                <path d="M4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V7H4V19H19V21H4ZM8 17C7.45 17 6.97917 16.8042 6.5875 16.4125C6.19583 16.0208 6 15.55 6 15V3H23V15C23 15.55 22.8042 16.0208 22.4125 16.4125C22.0208 16.8042 21.55 17 21 17H8ZM8 15H21V5H8V15ZM10 12H14V7H10V12ZM15 12H19V10H15V12ZM15 9H19V7H15V9Z" fill="#53B2F9" />
+                                            </g>
+                                        </svg>
+                                        <h3 className="text-xl font-semibold text-[#40A1EA]">Performance Breakdown by Exam:</h3>
+                                    </div>
+                                    <ul className='overflow-auto scrollbar-hide flex-grow'>
+                                        {trainingContent.exams.flatMap((exam, index) => (
+                                            <li key={index} className="flex flex-col mb-2 bg-[#22E1B30F] p-4 rounded-xl border">
+                                                <div className="flex flex-row font-semibold border-b-2 border-[#D9D9D929] text-[#22E1B3] mb-2">
+                                                    <div className='flex items-center border-r-2 border-[#D9D9D929] pr-2'>
+                                                        <span className='mr-1'>Exam</span>
+                                                        <span className="font-semibold bg-gray-200 text-gray-800 px-2 rounded-full text-sm">{index + 1}</span>
                                                     </div>
-                                                    <h3 className="text-lg font-semibold">Detailed Breakdown</h3>
+                                                    <span className="pl-2">{exam.score}%</span>
                                                 </div>
-                                                <ul className="space-y-4 pb-2">
-                                                    {trainingContent.exams.map((exam, index) => (
-                                                        <li key={index} className="border rounded-lg bg-white">
-                                                            <Dropdown title={`Exam ${index + 1}`}>
-                                                                <span>{exam.detailed_summary}</span>
-                                                            </Dropdown>
-                                                        </li>
-                                                    ))}
-                                                </ul>
-                                            </div>
-                                        </div>
-                                        <div className="w-full h-px bg-[#D9D9D929] my-6"></div>
+                                                <div className="flex flex-row items-center gap-2">
+                                                    <BsChatLeftDots size={16} />
+                                                    <p className="text-sm">{exam.performance_comment}</p>
+                                                </div>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                </div>
+                                <div className="flex flex-col rounded-3xl p-6 w-1/2 shadow-training-inset -md:w-full">
+                                    <div className='flex flex-col'>
                                         <div className="flex flex-row items-center mb-4 gap-1">
                                             <AiOutlineFileSearch color="#40A1EA" size={24} />
                                             <h3 className="text-xl font-semibold text-[#40A1EA]">Identified Weak Areas</h3>
@@ -238,7 +251,7 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
                                         <Tab.Group>
                                             <div className="flex flex-col gap-4">
                                                 <Tab.List>
-                                                    <div className="flex flex-row gap-6">
+                                                    <div className="flex flex-row gap-6 overflow-x-auto pb-1 training-scrollbar">
                                                         {trainingContent.weak_areas.map((x, index) => (
                                                             <Tab
                                                                 key={index}
@@ -268,10 +281,47 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
                                             </div>
                                         </Tab.Group>
                                     </div>
+                                    <div className="w-full h-px bg-[#D9D9D929] my-6"></div>
+                                    <div className="flex flex-row items-center mb-4 gap-1">
+                                        <MdOutlineSelfImprovement color={"#40A1EA"} size={24} />
+                                        <h2 className={`text-xl font-semibold text-[#40A1EA]`}>Subjects that Need Improvement</h2>
+                                    </div>
+
+                                    <div className="flex flex-grow bg-[#FBFBFB] border rounded-xl p-4">
+                                        <div className='flex flex-col'>
+                                            <div className="flex flex-row items-center gap-1 mb-4">
+                                                <div className="flex items-center justify-center w-[48px] h-[48px]">
+                                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                        <mask id="mask0_112_445" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+                                                            <rect width="24" height="24" fill="#D9D9D9" />
+                                                        </mask>
+                                                        <g mask="url(#mask0_112_445)">
+                                                            <path d="M6 17H11V15H6V17ZM16 17H18V15H16V17ZM6 13H11V11H6V13ZM16 13H18V7H16V13ZM6 9H11V7H6V9ZM4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V5C2 4.45 2.19583 3.97917 2.5875 3.5875C2.97917 3.19583 3.45 3 4 3H20C20.55 3 21.0208 3.19583 21.4125 3.5875C21.8042 3.97917 22 4.45 22 5V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H4ZM4 19H20V5H4V19Z" fill="#1C1B1F" />
+                                                        </g>
+                                                    </svg>
+                                                </div>
+                                                <h3 className="text-lg font-semibold">Detailed Breakdown</h3>
+                                            </div>
+                                            <ul className="flex flex-col flex-grow space-y-4 pb-2 max-h-[350px] overflow-y-auto scrollbar-hide">
+                                                {trainingContent.exams.map((exam, index) => (
+                                                    <li key={index} className="border rounded-lg bg-white">
+                                                        <Dropdown title={
+                                                            <div className='flex flex-row items-center'>
+                                                                <span className="mr-1">Exam</span>
+                                                                <span className="font-semibold bg-gray-200 text-gray-800 px-2 rounded-full text-sm mt-0.5">{index + 1}</span>
+                                                            </div>
+                                                        } open={index == 0}>
+                                                            <span>{exam.detailed_summary}</span>
+                                                        </Dropdown>
+                                                    </li>
+                                                ))}
+                                            </ul>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                        <div className="flex">
+                        <div className="flex -md:hidden">
                             <div className="rounded-3xl p-6 shadow-training-inset w-full">
                                 <div className="flex flex-col p-10">
                                     <Exercise key={currentTipIndex} {...trainingTips[currentTipIndex]} />
@@ -294,6 +344,7 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
                                     </Button>
                                 </div>
                             </div>
+
                         </div>
                     </div>
                 ))}
diff --git a/src/pages/training/index.tsx b/src/pages/training/index.tsx
index 5f75a0a5..7b8084dd 100644
--- a/src/pages/training/index.tsx
+++ b/src/pages/training/index.tsx
@@ -389,7 +389,7 @@ const Training: React.FC<{ user: User }> = ({ user }) => {
                             </div>
                         )}
                         {groupedByTrainingContent && Object.keys(groupedByTrainingContent).length > 0 && (
-                            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 w-full gap-4 xl:gap-6">
+                            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-3 w-full gap-4 xl:gap-6">
                                 {Object.keys(filterTrainingContentByDate(groupedByTrainingContent))
                                     .sort((a, b) => parseInt(b) - parseInt(a))
                                     .map(trainingContentContainer)}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 6dd36769..b20aaee2 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -4,14 +4,35 @@
 
 @layer utilities {
 	.scrollbar-hide {
-	  -ms-overflow-style: none;  /* IE and Edge */
-	  scrollbar-width: none;  /* Firefox */
+		-ms-overflow-style: none;
+		/* IE and Edge */
+		scrollbar-width: none;
+		/* Firefox */
 	}
+
 	.scrollbar-hide::-webkit-scrollbar {
-	  display: none;  /* Chrome, Safari and Opera */
+		display: none;
+		/* Chrome, Safari and Opera */
 	}
 }
 
+.training-scrollbar::-webkit-scrollbar {
+	@apply w-1.5;
+}
+
+.training-scrollbar::-webkit-scrollbar-track {
+	@apply bg-transparent;
+}
+
+.training-scrollbar::-webkit-scrollbar-thumb {
+	@apply bg-gray-400 hover:bg-gray-500 rounded-full transition-colors opacity-50 hover:opacity-75;
+}
+
+.training-scrollbar {
+	scrollbar-width: thin;
+	scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
+}
+
 :root {
 	--max-width: 1100px;
 	--border-radius: 12px;
@@ -66,4 +87,4 @@ body {
 a {
 	color: inherit;
 	text-decoration: none;
-}
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 56702db4..b8b27fd7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -711,6 +711,13 @@
     node-fetch "2.6.7"
     tslib "^2.1.0"
 
+"@firebase/util@^1.9.7":
+  version "1.9.7"
+  resolved "https://registry.npmjs.org/@firebase/util/-/util-1.9.7.tgz"
+  integrity sha512-fBVNH/8bRbYjqlbIhZ+lBtdAAS4WqZumx03K06/u7fJSpz1TGjEMm1ImvKD47w+xaFKIP2ori6z8BrbakRfjJA==
+  dependencies:
+    tslib "^2.1.0"
+
 "@firebase/util@1.9.3":
   version "1.9.3"
   resolved "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz"
@@ -718,13 +725,6 @@
   dependencies:
     tslib "^2.1.0"
 
-"@firebase/util@^1.9.7":
-  version "1.9.7"
-  resolved "https://registry.yarnpkg.com/@firebase/util/-/util-1.9.7.tgz#c03b0ae065b3bba22800da0bd5314ef030848038"
-  integrity sha512-fBVNH/8bRbYjqlbIhZ+lBtdAAS4WqZumx03K06/u7fJSpz1TGjEMm1ImvKD47w+xaFKIP2ori6z8BrbakRfjJA==
-  dependencies:
-    tslib "^2.1.0"
-
 "@firebase/webchannel-wrapper@0.9.0":
   version "0.9.0"
   resolved "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.9.0.tgz"
@@ -1591,13 +1591,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-slick@^0.23.13":
-  version "0.23.13"
-  resolved "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.13.tgz"
-  integrity sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-transition-group@^4.4.0", "@types/react-transition-group@^4.4.1":
   version "4.4.5"
   resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz"
@@ -1691,6 +1684,18 @@
     "@typescript-eslint/types" "5.51.0"
     eslint-visitor-keys "^3.3.0"
 
+"@use-gesture/core@10.3.1":
+  version "10.3.1"
+  resolved "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz"
+  integrity sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==
+
+"@use-gesture/react@^10.3.1":
+  version "10.3.1"
+  resolved "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz"
+  integrity sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==
+  dependencies:
+    "@use-gesture/core" "10.3.1"
+
 "@wixc3/board-core@^2.2.0":
   version "2.2.0"
   resolved "https://registry.npmjs.org/@wixc3/board-core/-/board-core-2.2.0.tgz"
@@ -2165,7 +2170,7 @@ chownr@^2.0.0:
   resolved "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
-classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.0, classnames@^2.5.1:
+classnames@^2.2.6, classnames@^2.3.0, classnames@^2.5.1:
   version "2.5.1"
   resolved "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
@@ -2666,11 +2671,6 @@ enhanced-resolve@^5.10.0:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
-enquire.js@^2.1.6:
-  version "2.1.6"
-  resolved "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz"
-  integrity sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==
-
 ent@^2.2.0:
   version "2.2.1"
   resolved "https://registry.npmjs.org/ent/-/ent-2.2.1.tgz"
@@ -4135,13 +4135,6 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
-json2mq@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz"
-  integrity sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==
-  dependencies:
-    string-convert "^0.2.0"
-
 json5@^1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz"
@@ -4319,11 +4312,6 @@ lodash.clonedeep@^4.5.0:
   resolved "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz"
   integrity sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==
 
-lodash.debounce@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
-  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
-
 lodash.includes@^4.3.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz"
@@ -5355,17 +5343,6 @@ react-select@^5.7.5:
     react-transition-group "^4.3.0"
     use-isomorphic-layout-effect "^1.1.2"
 
-react-slick@^0.30.2:
-  version "0.30.2"
-  resolved "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz"
-  integrity sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==
-  dependencies:
-    classnames "^2.2.5"
-    enquire.js "^2.1.6"
-    json2mq "^0.2.0"
-    lodash.debounce "^4.0.8"
-    resize-observer-polyfill "^1.5.0"
-
 react-string-replace@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/react-string-replace/-/react-string-replace-1.1.0.tgz"
@@ -5506,11 +5483,6 @@ requizzle@^0.2.3:
   dependencies:
     lodash "^4.17.21"
 
-resize-observer-polyfill@^1.5.0:
-  version "1.5.1"
-  resolved "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz"
-  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
-
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
@@ -5720,11 +5692,6 @@ slash@^4.0.0:
   resolved "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz"
   integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
 
-slick-carousel@^1.8.1:
-  version "1.8.1"
-  resolved "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz"
-  integrity sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==
-
 source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
@@ -5773,11 +5740,6 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-string-convert@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz"
-  integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==
-
 "string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
@@ -6369,8 +6331,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
-  name wrap-ansi-cjs
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==

From a4a40b91456c00cfd7dbc44a3dca6081a3778d86 Mon Sep 17 00:00:00 2001
From: Carlos Mesquita <carlos.mesquita@ecrop.dev>
Date: Mon, 5 Aug 2024 21:44:14 +0100
Subject: [PATCH 04/14] Bug fixes to training, added a spinner to record while
 it loads, made changes to speaking as requested

---
 src/components/Exercises/Speaking.tsx         | 70 ++++++++++++++-----
 src/components/StatGridItem.tsx               | 30 +++++---
 .../TrainingContent/TrainingScore.tsx         |  3 +-
 src/pages/record.tsx                          | 20 ++++--
 src/pages/training/[id]/index.tsx             |  4 +-
 5 files changed, 92 insertions(+), 35 deletions(-)

diff --git a/src/components/Exercises/Speaking.tsx b/src/components/Exercises/Speaking.tsx
index 4a35458a..106b76d4 100644
--- a/src/components/Exercises/Speaking.tsx
+++ b/src/components/Exercises/Speaking.tsx
@@ -1,33 +1,34 @@
-import {SpeakingExercise} from "@/interfaces/exam";
-import {CommonProps} from ".";
-import {Fragment, useEffect, useState} from "react";
-import {BsCheckCircleFill, BsMicFill, BsPauseCircle, BsPlayCircle, BsTrashFill} from "react-icons/bs";
+import { SpeakingExercise } from "@/interfaces/exam";
+import { CommonProps } from ".";
+import { Fragment, useEffect, useState } from "react";
+import { BsCheckCircleFill, BsMicFill, BsPauseCircle, BsPlayCircle, BsTrashFill } from "react-icons/bs";
 import dynamic from "next/dynamic";
 import Button from "../Low/Button";
 import useExamStore from "@/stores/examStore";
-import {downloadBlob} from "@/utils/evaluation";
+import { downloadBlob } from "@/utils/evaluation";
 import axios from "axios";
 import Modal from "../Modal";
 
-const Waveform = dynamic(() => import("../Waveform"), {ssr: false});
+const Waveform = dynamic(() => import("../Waveform"), { ssr: false });
 const ReactMediaRecorder = dynamic(() => import("react-media-recorder").then((mod) => mod.ReactMediaRecorder), {
 	ssr: false,
 });
 
-export default function Speaking({id, title, text, video_url, type, prompts, suffix, userSolutions, onNext, onBack}: SpeakingExercise & CommonProps) {
+export default function Speaking({ id, title, text, video_url, type, prompts, suffix, userSolutions, onNext, onBack }: SpeakingExercise & CommonProps) {
 	const [recordingDuration, setRecordingDuration] = useState(0);
 	const [isRecording, setIsRecording] = useState(false);
 	const [mediaBlob, setMediaBlob] = useState<string>();
 	const [audioURL, setAudioURL] = useState<string>();
 	const [isLoading, setIsLoading] = useState(false);
 	const [isPromptsModalOpen, setIsPromptsModalOpen] = useState(false);
+	const [inputText, setInputText] = useState("");
 
 	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
 
 	const saveToStorage = async () => {
 		if (mediaBlob && mediaBlob.startsWith("blob")) {
 			const blobBuffer = await downloadBlob(mediaBlob);
-			const audioFile = new File([blobBuffer], "audio.wav", {type: "audio/wav"});
+			const audioFile = new File([blobBuffer], "audio.wav", { type: "audio/wav" });
 
 			const seed = Math.random().toString().replace("0.", "");
 
@@ -41,8 +42,8 @@ export default function Speaking({id, title, text, video_url, type, prompts, suf
 				},
 			};
 
-			const response = await axios.post<{path: string}>("/api/storage/insert", formData, config);
-			if (audioURL) await axios.post("/api/storage/delete", {path: audioURL});
+			const response = await axios.post<{ path: string }>("/api/storage/insert", formData, config);
+			if (audioURL) await axios.post("/api/storage/delete", { path: audioURL });
 			return response.data.path;
 		}
 
@@ -51,7 +52,7 @@ export default function Speaking({id, title, text, video_url, type, prompts, suf
 
 	useEffect(() => {
 		if (userSolutions.length > 0) {
-			const {solution} = userSolutions[0] as {solution?: string};
+			const { solution } = userSolutions[0] as { solution?: string };
 			if (solution && !mediaBlob) setMediaBlob(solution);
 			if (solution && !solution.startsWith("blob")) setAudioURL(solution);
 		}
@@ -78,8 +79,8 @@ export default function Speaking({id, title, text, video_url, type, prompts, suf
 	const next = async () => {
 		onNext({
 			exercise: id,
-			solutions: mediaBlob ? [{id, solution: mediaBlob}] : [],
-			score: {correct: 0, total: 100, missing: 0},
+			solutions: mediaBlob ? [{ id, solution: mediaBlob }] : [],
+			score: { correct: 0, total: 100, missing: 0 },
 			type,
 		});
 	};
@@ -87,12 +88,33 @@ export default function Speaking({id, title, text, video_url, type, prompts, suf
 	const back = async () => {
 		onBack({
 			exercise: id,
-			solutions: mediaBlob ? [{id, solution: mediaBlob}] : [],
-			score: {correct: 0, total: 100, missing: 0},
+			solutions: mediaBlob ? [{ id, solution: mediaBlob }] : [],
+			score: { correct: 0, total: 100, missing: 0 },
 			type,
 		});
 	};
 
+	const handleNoteWriting = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+		const newText = e.target.value;
+		const words = newText.match(/\S+/g);
+		const wordCount = words ? words.length : 0;
+		
+		if (wordCount <= 100) {
+			setInputText(newText);
+		} else {
+			let count = 0;
+			let lastIndex = 0;
+			const matches = newText.matchAll(/\S+/g);
+			for (const match of matches) {
+				count++;
+				if (count > 100) break;
+				lastIndex = match.index! + match[0].length;
+			}
+			
+			setInputText(newText.slice(0, lastIndex));
+		}
+	};
+
 	return (
 		<div className="flex flex-col h-full w-full gap-9">
 			<Modal title="Prompts" className="!w-96 aspect-square" isOpen={isPromptsModalOpen} onClose={() => setIsPromptsModalOpen(false)}>
@@ -112,7 +134,7 @@ export default function Speaking({id, title, text, video_url, type, prompts, suf
 					<div className="flex flex-col gap-0">
 						<span className="font-semibold">{title}</span>
 						{prompts.length > 0 && (
-							<span className="font-semibold">You should talk for at least 30 seconds for your answer to be valid.</span>
+							<span className="font-semibold">You should talk for at least 1 minute and 30 seconds for your answer to be valid.</span>
 						)}
 					</div>
 					{!video_url && (
@@ -138,10 +160,24 @@ export default function Speaking({id, title, text, video_url, type, prompts, suf
 				</div>
 			</div>
 
+			{prompts && prompts.length > 0 && (
+				<div className="w-full h-full flex flex-col gap-4">
+					<textarea
+						onContextMenu={(e) => e.preventDefault()}
+						className="w-full h-full min-h-[200px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl"
+						onChange={handleNoteWriting}
+						value={inputText}
+						placeholder="Write your notes here..."
+						spellCheck={false}
+					/>
+					<span className="text-base self-end text-mti-gray-cool">Word Count: {(inputText.match(/\S+/g) || []).length}/100</span>
+				</div>
+			)}
+
 			<ReactMediaRecorder
 				audio
 				onStop={(blob) => setMediaBlob(blob)}
-				render={({status, startRecording, stopRecording, pauseRecording, resumeRecording, clearBlobUrl, mediaBlobUrl}) => (
+				render={({ status, startRecording, stopRecording, pauseRecording, resumeRecording, clearBlobUrl, mediaBlobUrl }) => (
 					<div className="w-full p-4 px-8 bg-transparent border-2 border-mti-gray-platinum rounded-2xl flex-col gap-8 items-center">
 						<p className="text-base font-normal">Record your answer:</p>
 						<div className="flex gap-8 items-center justify-center py-8">
diff --git a/src/components/StatGridItem.tsx b/src/components/StatGridItem.tsx
index 70c51eec..10c93fe6 100644
--- a/src/components/StatGridItem.tsx
+++ b/src/components/StatGridItem.tsx
@@ -78,6 +78,7 @@ interface StatsGridItemProps {
     users: User[];
     training?: boolean,
     selectedTrainingExams?: string[];
+    maxTrainingExams?: number;
     setSelectedTrainingExams?: React.Dispatch<React.SetStateAction<string[]>>;
     setExams: (exams: Exam[]) => void;
     setShowSolutions: (show: boolean) => void;
@@ -106,7 +107,8 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
     renderPdfIcon,
     width = undefined,
     height = undefined,
-    examNumber = undefined
+    examNumber = undefined,
+    maxTrainingExams = undefined
 }) => {
     const router = useRouter();
     const correct = stats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
@@ -132,16 +134,22 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
     const { timeSpent, inactivity, session } = stats[0];
 
     const selectExam = () => {
-        if (training && !isDisabled && typeof setSelectedTrainingExams !== "undefined" && typeof timestamp == "string") {
+        if (training && !isDisabled && typeof maxTrainingExams !== "undefined" && typeof setSelectedTrainingExams !== "undefined" && typeof timestamp == "string") {
             setSelectedTrainingExams(prevExams => {
-                const index = prevExams.indexOf(timestamp);
-
-                if (index !== -1) {
+                const uniqueExams = [...new Set(stats.map(stat => `${stat.module}-${stat.date}`))];
+                const indexes = uniqueExams.map(exam => prevExams.indexOf(exam)).filter(index => index !== -1);
+                if (indexes.length > 0) {
                     const newExams = [...prevExams];
-                    newExams.splice(index, 1);
+                    indexes.sort((a, b) => b - a).forEach(index => {
+                        newExams.splice(index, 1);
+                    });
                     return newExams;
                 } else {
-                    return [...prevExams, timestamp];
+                    if (prevExams.length + uniqueExams.length <= maxTrainingExams) {
+                        return [...prevExams, ...uniqueExams];
+                    } else {
+                        return prevExams;
+                    }
                 }
             });
         } else {
@@ -219,7 +227,10 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
             </div>
 
             <div className="w-full flex flex-col gap-1">
-                <div className="grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2">
+                <div className={clsx(
+                    "grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2",
+                    examNumber !== undefined && "pr-10" 
+                )}>
                     {aggregatedLevels.map(({ module, level }) => (
                         <ModuleBadge key={module} module={module} level={level} />
                     ))}
@@ -244,8 +255,9 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
                     correct / total >= 0.7 && "hover:border-mti-purple",
                     correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
                     correct / total < 0.3 && "hover:border-mti-rose",
-                    typeof selectedTrainingExams !== "undefined" && typeof timestamp === "string" && selectedTrainingExams.includes(timestamp) && "border-2 border-slate-600",
+                    typeof selectedTrainingExams !== "undefined" && typeof timestamp === "string" && selectedTrainingExams.some(exam => exam.includes(timestamp)) && "border-2 border-slate-600",
                 )}
+                onClick={examNumber === undefined ? selectExam : undefined}
                 style={{
                     ...(width !== undefined && { width }),
                     ...(height !== undefined && { height }),
diff --git a/src/components/TrainingContent/TrainingScore.tsx b/src/components/TrainingContent/TrainingScore.tsx
index d7183412..3f066dfd 100644
--- a/src/components/TrainingContent/TrainingScore.tsx
+++ b/src/components/TrainingContent/TrainingScore.tsx
@@ -17,9 +17,10 @@ const TrainingScore: React.FC<TrainingScoreProps> = ({
     const scores = trainingContent.exams.map(exam => exam.score);
     const highestScore = Math.max(...scores);
     const lowestScore = Math.min(...scores);
-    const averageScore = scores.length > 0
+    let averageScore = scores.length > 0
         ? scores.reduce((sum, score) => sum + score, 0) / scores.length
         : 0;
+    averageScore = Math.round(averageScore);
 
     const containerClasses = clsx(
         "flex flex-row mb-4",
diff --git a/src/pages/record.tsx b/src/pages/record.tsx
index bbff6d78..e6239244 100644
--- a/src/pages/record.tsx
+++ b/src/pages/record.tsx
@@ -21,7 +21,6 @@ import { uuidv4 } from "@firebase/util";
 import { usePDFDownload } from "@/hooks/usePDFDownload";
 import useRecordStore from "@/stores/recordStore";
 import useTrainingContentStore from "@/stores/trainingContentStore";
-import Button from "@/components/Low/Button";
 import StatsGridItem from "@/components/StatGridItem";
 
 
@@ -148,10 +147,12 @@ export default function History({ user }: { user: User }) {
 
 	const handleTrainingContentSubmission = () => {
 		if (groupedStats) {
-			const allStats = Object.keys(filterStatsByDate(groupedStats));
-			const selectedStats = selectedTrainingExams.reduce<Record<string, Stat[]>>((accumulator, timestamp) => {
-				if (allStats.includes(timestamp)) {
-					accumulator[timestamp] = filterStatsByDate(groupedStats)[timestamp];
+			const groupedStatsByDate = filterStatsByDate(groupedStats);
+			const allStats = Object.keys(groupedStatsByDate);
+			const selectedStats = selectedTrainingExams.reduce<Record<string, Stat[]>>((accumulator, moduleAndTimestamp) => {
+				const timestamp = moduleAndTimestamp.split("-")[1];
+				if (allStats.includes(timestamp) && !accumulator.hasOwnProperty(timestamp)) {
+					accumulator[timestamp] = groupedStatsByDate[timestamp];
 				}
 				return accumulator;
 			}, {});
@@ -177,6 +178,7 @@ export default function History({ user }: { user: User }) {
 				training={training}
 				selectedTrainingExams={selectedTrainingExams}
 				setSelectedTrainingExams={setSelectedTrainingExams}
+				maxTrainingExams={MAX_TRAINING_EXAMS}
 				setExams={setExams}
 				setShowSolutions={setShowSolutions}
 				setUserSolutions={setUserSolutions}
@@ -323,7 +325,8 @@ export default function History({ user }: { user: User }) {
 							)}
 							{(training && (
 								<div className="flex flex-row">
-									<div className="font-semibold text-2xl mr-4">Select up to 10 exams {`(${selectedTrainingExams.length}/${MAX_TRAINING_EXAMS})`}</div>
+									<div className="font-semibold text-2xl mr-4">Select up to 10 exercises
+										{`(${selectedTrainingExams.length}/${MAX_TRAINING_EXAMS})`}</div>
 									<button
 										className={clsx(
 											"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light ml-4 disabled:cursor-not-allowed",
@@ -385,6 +388,11 @@ export default function History({ user }: { user: User }) {
 					{groupedStats && Object.keys(groupedStats).length === 0 && !isStatsLoading && (
 						<span className="font-semibold ml-1">No record to display...</span>
 					)}
+					{isStatsLoading && (
+						<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
+							<span className="loading loading-infinity w-32 bg-mti-green-light" />
+						</div>
+					)}
 				</Layout>
 			)}
 		</>
diff --git a/src/pages/training/[id]/index.tsx b/src/pages/training/[id]/index.tsx
index b38121ca..94226995 100644
--- a/src/pages/training/[id]/index.tsx
+++ b/src/pages/training/[id]/index.tsx
@@ -182,7 +182,7 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
                                 {trainingContent.exams.map((exam, examIndex) => (
                                     <StatsGridItem
                                         key={`exam-${examIndex}`}
-                                        width='350px'
+                                        width='380px'
                                         height='150px'
                                         examNumber={examIndex + 1}
                                         stats={exam.stats || []}
@@ -302,7 +302,7 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
                                                 </div>
                                                 <h3 className="text-lg font-semibold">Detailed Breakdown</h3>
                                             </div>
-                                            <ul className="flex flex-col flex-grow space-y-4 pb-2 max-h-[350px] overflow-y-auto scrollbar-hide">
+                                            <ul className="flex flex-col flex-grow space-y-4 pb-2 overflow-y-auto scrollbar-hide">
                                                 {trainingContent.exams.map((exam, index) => (
                                                     <li key={index} className="border rounded-lg bg-white">
                                                         <Dropdown title={

From 7fd56357e0cdba4092214261e9002ee88b85865e Mon Sep 17 00:00:00 2001
From: Carlos Mesquita <carlos.mesquita@ecrop.dev>
Date: Tue, 6 Aug 2024 17:02:17 +0100
Subject: [PATCH 05/14] UI changes to Solutions (Writing, Speaking and
 Interactive Speaking) as requested

---
 .../Solutions/InteractiveSpeaking.tsx         | 113 +++++++-----------
 src/components/Solutions/Speaking.tsx         |  59 ++++-----
 src/components/Solutions/Writing.tsx          |  47 ++++----
 src/interfaces/exam.ts                        |  28 +++--
 4 files changed, 115 insertions(+), 132 deletions(-)

diff --git a/src/components/Solutions/InteractiveSpeaking.tsx b/src/components/Solutions/InteractiveSpeaking.tsx
index f5c657d4..6038e1a9 100644
--- a/src/components/Solutions/InteractiveSpeaking.tsx
+++ b/src/components/Solutions/InteractiveSpeaking.tsx
@@ -24,7 +24,7 @@ export default function InteractiveSpeaking({
 	onBack,
 }: InteractiveSpeakingExercise & CommonProps) {
 	const [solutionsURL, setSolutionsURL] = useState<string[]>([]);
-	const [diffNumber, setDiffNumber] = useState<0 | 1 | 2 | 3>(0);
+	const [diffNumber, setDiffNumber] = useState(0);
 
 	useEffect(() => {
 		if (userSolutions && userSolutions.length > 0 && userSolutions[0].solution) {
@@ -115,13 +115,13 @@ export default function InteractiveSpeaking({
 								{userSolutions &&
 									userSolutions.length > 0 &&
 									userSolutions[0].evaluation &&
-									userSolutions[0].evaluation[`transcript_${(index + 1) as 1 | 2 | 3}`] &&
-									userSolutions[0].evaluation[`fixed_text_${(index + 1) as 1 | 2 | 3}`] && (
+									userSolutions[0].evaluation[`transcript_${(index + 1)}`] &&
+									userSolutions[0].evaluation[`fixed_text_${(index + 1)}`] && (
 										<Button
 											className="w-full max-w-[180px] !py-2 self-center"
 											color="pink"
 											variant="outline"
-											onClick={() => setDiffNumber((index + 1) as 1 | 2 | 3)}>
+											onClick={() => setDiffNumber((index + 1))}>
 											View Correction
 										</Button>
 									)}
@@ -144,9 +144,20 @@ export default function InteractiveSpeaking({
 								})}
 							</div>
 							{userSolutions[0].evaluation &&
-							Object.keys(userSolutions[0].evaluation).filter((x) => x.startsWith("perfect_answer")).length === 3 ? (
+								Object.keys(userSolutions[0].evaluation).filter((x) => x.startsWith("perfect_answer")).length > 0 ? (
 								<Tab.Group>
 									<Tab.List className="flex space-x-1 rounded-xl bg-ielts-speaking/20 p-1">
+										<Tab
+											className={({selected}) =>
+												clsx(
+													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
+													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
+													"transition duration-300 ease-in-out",
+													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
+												)
+											}>
+											General Feedback
+										</Tab>
 										<Tab
 											className={({selected}) =>
 												clsx(
@@ -158,70 +169,22 @@ export default function InteractiveSpeaking({
 											}>
 											Evaluation
 										</Tab>
-										<Tab
-											className={({selected}) =>
-												clsx(
-													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
-													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
-													"transition duration-300 ease-in-out",
-													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
-												)
-											}>
-											Recommended Answer (Prompt 1)
-										</Tab>
-										<Tab
-											className={({selected}) =>
-												clsx(
-													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
-													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
-													"transition duration-300 ease-in-out",
-													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
-												)
-											}>
-											Recommended Answer (Prompt 2)
-										</Tab>
-										<Tab
-											className={({selected}) =>
-												clsx(
-													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
-													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
-													"transition duration-300 ease-in-out",
-													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
-												)
-											}>
-											Recommended Answer (Prompt 3)
-										</Tab>
-										<Tab
-											className={({selected}) =>
-												clsx(
-													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
-													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
-													"transition duration-300 ease-in-out",
-													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
-												)
-											}>
-											Global Overview
-										</Tab>
+										{Object.keys(userSolutions[0].evaluation).filter((x) => x.startsWith("perfect_answer")).map((key, index) => (
+											<Tab
+												key={key}
+												className={({ selected }) =>
+													clsx(
+														"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
+														"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
+														"transition duration-300 ease-in-out",
+														selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
+													)
+												}>
+												Recommended Answer<br />(Prompt {index + 1})
+											</Tab>
+										))}
 									</Tab.List>
 									<Tab.Panels>
-										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
-											<span className="w-full h-full min-h-fit cursor-text">{userSolutions[0].evaluation!.comment}</span>
-										</Tab.Panel>
-										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
-											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
-												{userSolutions[0].evaluation!.perfect_answer_1!.answer.replaceAll(/\s{2,}/g, "\n\n")}
-											</span>
-										</Tab.Panel>
-										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
-											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
-												{userSolutions[0].evaluation!.perfect_answer_2!.answer.replaceAll(/\s{2,}/g, "\n\n")}
-											</span>
-										</Tab.Panel>
-										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
-											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
-												{userSolutions[0].evaluation!.perfect_answer_3!.answer.replaceAll(/\s{2,}/g, "\n\n")}
-											</span>
-										</Tab.Panel>
 										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
 											<div className="flex flex-col gap-4">
 												{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => {
@@ -230,15 +193,25 @@ export default function InteractiveSpeaking({
 
 													return (
 														<div key={key} className="flex flex-col gap-2">
-															<span className={"font-semibold"}>
+															<div className={clsx("bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2 w-fit")} key={key}>
 																{key}: Level {grade}
-															</span>
-															{typeof taskResponse !== "number" && <span>{taskResponse.comment}</span>}
+															</div>
+															{typeof taskResponse !== "number" && <span className="px-2 py-2">{taskResponse.comment}</span>}
 														</div>
 													);
 												})}
 											</div>
 										</Tab.Panel>
+										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<span className="w-full h-full min-h-fit cursor-text">{userSolutions[0].evaluation!.comment}</span>
+										</Tab.Panel>
+										{Object.keys(userSolutions[0].evaluation).filter((x) => x.startsWith("perfect_answer")).map((key, index) => (
+											<Tab.Panel key={key} className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+												<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
+													{userSolutions[0].evaluation![`perfect_answer_${(index + 1)}`].answer.replaceAll(/\s{2,}/g, "\n\n")}
+												</span>
+											</Tab.Panel>
+										))}
 									</Tab.Panels>
 								</Tab.Group>
 							) : (
diff --git a/src/components/Solutions/Speaking.tsx b/src/components/Solutions/Speaking.tsx
index 6b1fef98..90501894 100644
--- a/src/components/Solutions/Speaking.tsx
+++ b/src/components/Solutions/Speaking.tsx
@@ -138,7 +138,7 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
 								})}
 							</div>
 							{userSolutions[0].evaluation &&
-							(userSolutions[0].evaluation.perfect_answer || userSolutions[0].evaluation.perfect_answer_1) ? (
+								(userSolutions[0].evaluation.perfect_answer || userSolutions[0].evaluation.perfect_answer_1) ? (
 								<Tab.Group>
 									<Tab.List className="flex space-x-1 rounded-xl bg-ielts-speaking/20 p-1">
 										<Tab
@@ -150,10 +150,21 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
 													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
 												)
 											}>
+											General Feedback
+										</Tab>
+										<Tab
+											className={({ selected }) =>
+												clsx(
+													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
+													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
+													"transition duration-300 ease-in-out",
+													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
+												)
+											}>
 											Evaluation
 										</Tab>
 										<Tab
-											className={({selected}) =>
+											className={({ selected }) =>
 												clsx(
 													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
 													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
@@ -163,30 +174,9 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
 											}>
 											Recommended Answer
 										</Tab>
-										<Tab
-											className={({selected}) =>
-												clsx(
-													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
-													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
-													"transition duration-300 ease-in-out",
-													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
-												)
-											}>
-											Global Overview
-										</Tab>
 									</Tab.List>
 									<Tab.Panels>
-										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
-											<span className="w-full h-full min-h-fit cursor-text">{userSolutions[0].evaluation!.comment}</span>
-										</Tab.Panel>
-										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
-											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
-												{userSolutions[0].evaluation!.perfect_answer &&
-													userSolutions[0].evaluation!.perfect_answer.replaceAll(/\s{2,}/g, "\n\n")}
-												{userSolutions[0].evaluation!.perfect_answer_1 &&
-													userSolutions[0].evaluation!.perfect_answer_1.replaceAll(/\s{2,}/g, "\n\n")}
-											</span>
-										</Tab.Panel>
+										{/* General Feedback */}
 										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
 											<div className="flex flex-col gap-4">
 												{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => {
@@ -195,15 +185,28 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
 
 													return (
 														<div key={key} className="flex flex-col gap-2">
-															<span className={"font-semibold"}>
+															<div className={clsx("bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2 w-fit")} key={key}>
 																{key}: Level {grade}
-															</span>
-															{typeof taskResponse !== "number" && <span>{taskResponse.comment}</span>}
+															</div>
+															{typeof taskResponse !== "number" && <span className="px-2 py-2">{taskResponse.comment}</span>}
 														</div>
 													);
 												})}
 											</div>
 										</Tab.Panel>
+										{/* Evaluation */}
+										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<span className="w-full h-full min-h-fit cursor-text">{userSolutions[0].evaluation!.comment}</span>
+										</Tab.Panel>
+										{/* Recommended Answer */}
+										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
+												{userSolutions[0].evaluation!.perfect_answer &&
+													userSolutions[0].evaluation!.perfect_answer.replaceAll(/\s{2,}/g, "\n\n")}
+												{userSolutions[0].evaluation!.perfect_answer_1 &&
+													userSolutions[0].evaluation!.perfect_answer_1.replaceAll(/\s{2,}/g, "\n\n")}
+											</span>
+										</Tab.Panel>
 									</Tab.Panels>
 								</Tab.Group>
 							) : (
@@ -224,7 +227,7 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
 						onBack({
 							exercise: id,
 							solutions: userSolutions,
-							score: {total: 100, missing: 0, correct: speakingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0},
+							score: { total: 100, missing: 0, correct: speakingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0 },
 							type,
 						})
 					}
diff --git a/src/components/Solutions/Writing.tsx b/src/components/Solutions/Writing.tsx
index e24aab44..37eea2cf 100644
--- a/src/components/Solutions/Writing.tsx
+++ b/src/components/Solutions/Writing.tsx
@@ -137,6 +137,17 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 							{userSolutions[0].evaluation && userSolutions[0].evaluation.perfect_answer ? (
 								<Tab.Group>
 									<Tab.List className="flex space-x-1 rounded-xl bg-ielts-writing/20 p-1">
+										<Tab
+											className={({selected}) =>
+												clsx(
+													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/80",
+													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing focus:outline-none focus:ring-2",
+													"transition duration-300 ease-in-out",
+													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-writing",
+												)
+											}>
+											General Feedback
+										</Tab>
 										<Tab
 											className={({selected}) =>
 												clsx(
@@ -159,17 +170,6 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 											}>
 											Recommended Answer
 										</Tab>
-										<Tab
-											className={({selected}) =>
-												clsx(
-													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/80",
-													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing focus:outline-none focus:ring-2",
-													"transition duration-300 ease-in-out",
-													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-writing",
-												)
-											}>
-											Global Overview
-										</Tab>
 										{aiEval && user?.type !== "student" && (
 											<Tab
 												className={({selected}) =>
@@ -185,14 +185,7 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 										)}
 									</Tab.List>
 									<Tab.Panels>
-										<Tab.Panel className="w-full bg-ielts-writing/10 h-fit rounded-xl p-6 flex flex-col gap-4">
-											<span className="w-full h-full min-h-fit cursor-text">{userSolutions[0].evaluation!.comment}</span>
-										</Tab.Panel>
-										<Tab.Panel className="w-full bg-ielts-writing/10 h-fit rounded-xl p-6 flex flex-col gap-4">
-											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
-												{userSolutions[0].evaluation!.perfect_answer.replaceAll(/\s{2,}/g, "\n\n").replaceAll("\\n", "\n")}
-											</span>
-										</Tab.Panel>
+										{/* Global */}
 										<Tab.Panel className="w-full bg-ielts-writing/10 h-fit rounded-xl p-6 flex flex-col gap-4">
 											<div className="flex flex-col gap-4">
 												{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => {
@@ -201,15 +194,25 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 
 													return (
 														<div key={key} className="flex flex-col gap-2">
-															<span className={"font-semibold"}>
+															<div className={clsx("bg-ielts-writing text-ielts-writing-light rounded-xl px-4 py-2 w-fit")} key={key}>
 																{key}: Level {grade}
-															</span>
-															{typeof taskResponse !== "number" && <span>{taskResponse.comment}</span>}
+															</div>
+															{typeof taskResponse !== "number" && <span className="px-2 py-2">{taskResponse.comment}</span>}
 														</div>
 													);
 												})}
 											</div>
 										</Tab.Panel>
+										{/* Evaluation */}
+										<Tab.Panel className="w-full bg-ielts-writing/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<span className="w-full h-full min-h-fit cursor-text">{userSolutions[0].evaluation!.comment}</span>
+										</Tab.Panel>
+										{/* Recommended Answer */}
+										<Tab.Panel className="w-full bg-ielts-writing/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
+												{userSolutions[0].evaluation!.perfect_answer.replaceAll(/\s{2,}/g, "\n\n").replaceAll("\\n", "\n")}
+											</span>
+										</Tab.Panel>
 										{aiEval && user?.type !== "student" && (
 											<Tab.Panel className="w-full bg-ielts-writing/10 h-fit rounded-xl p-6 flex flex-col gap-4">
 												<AIDetection {...aiEval} />
diff --git a/src/interfaces/exam.ts b/src/interfaces/exam.ts
index a7756dc5..1918882d 100644
--- a/src/interfaces/exam.ts
+++ b/src/interfaces/exam.ts
@@ -1,4 +1,4 @@
-import {Module} from ".";
+import { Module } from ".";
 
 export type Exam = ReadingExam | ListeningExam | WritingExam | SpeakingExam | LevelExam;
 export type Variant = "full" | "partial";
@@ -115,17 +115,21 @@ export interface Evaluation {
 	misspelled_pairs?: {correction: string | null; misspelled: string}[];
 }
 
-interface InteractiveSpeakingEvaluation extends Evaluation {
-	perfect_answer_1?: {answer: string};
-	transcript_1?: string;
-	fixed_text_1?: string;
-	perfect_answer_2?: {answer: string};
-	transcript_2?: string;
-	fixed_text_2?: string;
-	perfect_answer_3?: {answer: string};
-	transcript_3?: string;
-	fixed_text_3?: string;
-}
+
+type InteractivePerfectAnswerKey = `perfect_answer_${number}`;
+type InteractiveTranscriptKey = `transcript_${number}`;
+type InteractiveFixedTextKey = `fixed_text_${number}`;
+
+type InteractivePerfectAnswerType = { [key in InteractivePerfectAnswerKey]: { answer: string } };
+type InteractiveTranscriptType = { [key in InteractiveTranscriptKey]?: string };
+type InteractiveFixedTextType = { [key in InteractiveFixedTextKey]?: string };
+
+interface InteractiveSpeakingEvaluation extends Evaluation,
+InteractivePerfectAnswerType, 
+InteractiveTranscriptType, 
+InteractiveFixedTextType 
+{}
+
 
 interface SpeakingEvaluation extends CommonEvaluation {
 	perfect_answer_1?: string;

From afe59f5a3ad3023eb1353751c8a0117b6886f7a7 Mon Sep 17 00:00:00 2001
From: mohammedzeglam-pg <mohammedzeglam@gmail.com>
Date: Tue, 6 Aug 2024 18:03:00 +0200
Subject: [PATCH 06/14] add group creation.

---
 src/pages/(admin)/BatchCreateUser.tsx | 17 +++++---
 src/pages/api/make_user.ts            | 56 +++++++++++++++++++++++----
 src/pages/settings.tsx                |  1 -
 3 files changed, 61 insertions(+), 13 deletions(-)

diff --git a/src/pages/(admin)/BatchCreateUser.tsx b/src/pages/(admin)/BatchCreateUser.tsx
index d470c2e8..b484fd12 100644
--- a/src/pages/(admin)/BatchCreateUser.tsx
+++ b/src/pages/(admin)/BatchCreateUser.tsx
@@ -74,7 +74,8 @@ export default function BatchCreateUser({ user }: { user: User }) {
                   country,
                   passport_id,
                   email,
-                  phone
+                  phone,
+                  group
                 ] = row as string[];
                 return EMAIL_REGEX.test(email.toString().trim())
                   ? {
@@ -82,6 +83,7 @@ export default function BatchCreateUser({ user }: { user: User }) {
                     name: `${firstName ?? ""} ${lastName ?? ""}`.trim().toLowerCase(),
                     type: type,
                     passport_id: passport_id?.toString().trim() || undefined,
+                    groupName: group,
                     demographicInformation: {
                       country: country,
                       passport_id: passport_id?.toString().trim() || undefined,  
@@ -122,13 +124,15 @@ export default function BatchCreateUser({ user }: { user: User }) {
     )
     if (!confirmed)
       return;
-
     if (newUsers.length > 0)
       {
         setIsLoading(true);
-        Promise.all(newUsers.map((user) => {
-          return axios.post("/api/make_user", user)
-        })).finally(() => {
+        Promise.all(newUsers.map(async (user) => {
+          await axios.post("/api/make_user", user)
+        })).then((res) =>{
+        toast.success(
+          `Successfully added ${newUsers.length} user(s)!`
+        )}).finally(() => {
           return clear();
         })
       }
@@ -163,6 +167,9 @@ export default function BatchCreateUser({ user }: { user: User }) {
                 <th className="border border-neutral-200 px-2 py-1">
                   Phone Number
                 </th>
+                <th className="border border-neutral-200 px-2 py-1">
+                  Group Name
+                </th>
               </tr>
             </thead>
           </table>
diff --git a/src/pages/api/make_user.ts b/src/pages/api/make_user.ts
index 5a30cf55..1629e184 100644
--- a/src/pages/api/make_user.ts
+++ b/src/pages/api/make_user.ts
@@ -10,6 +10,8 @@ import {
   getDocs,
   getDoc,
   deleteDoc,
+  limit,
+  updateDoc,
 } from "firebase/firestore";
 import { withIronSessionApiRoute } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
@@ -44,18 +46,23 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 }
 
 async function post(req: NextApiRequest, res: NextApiResponse) {
-  if (!req.session.user) {
+  const maker = req.session.user;
+  if (!maker) {
     return res
       .status(401)
       .json({ ok: false, reason: "You must be logged in to make user!" });
   }
-
-  const { email, passport_id, type } = req.body as {
+  const { email, passport_id, type, groupName } = req.body as {
     email: string;
     passport_id: string;
-    type: string
+    type: string,
+    groupName: string
   };
-  createUserWithEmailAndPassword(auth, email.toLowerCase(), passport_id)
+  // cleaning data
+  delete req.body.passport_id;
+  delete req.body.groupName;
+
+  await createUserWithEmailAndPassword(auth, email.toLowerCase(), passport_id)
     .then(async (userCredentials) => {
       const userId = userCredentials.user.uid;
 
@@ -101,10 +108,45 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
         await setDoc(doc(db, "groups", defaultStudentsGroup.id), defaultStudentsGroup);
         await setDoc(doc(db, "groups", defaultCorporateGroup.id), defaultCorporateGroup);
       }
-      res.status(200).json({ ok: true });
+      
+      if(typeof groupName === 'string' && groupName.trim().length > 0){
+        
+        const q = query(collection(db, "groups"), where("admin", "==", maker.id),  where("name", "==", groupName.trim()), limit(1))
+        const snapshot = await getDocs(q)
+        
+        if(snapshot.empty){
+          const values = {
+            id: v4(),
+            admin: maker.id,
+            name: groupName.trim(),
+            participants: [userId],
+            disableEditing: false,
+          }
+          
+          await setDoc(doc(db, "groups", values.id) , values)
+          
+
+        }else{
+          
+
+          const doc = snapshot.docs[0]
+          const participants : string[] = doc.get('participants');
+          
+
+          if(!participants.includes(userId)){
+            
+
+            updateDoc(doc.ref, {
+              participants: [...participants, userId]
+            })
+          }
+        }
+      }
     })
     .catch((error) => {
       console.log(error);
-      res.status(401).json({error});
+      return res.status(401).json({error});
     });
+  return res.status(200).json({ ok: true });
+
 }
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index e3488cd9..51bc0ea9 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -17,7 +17,6 @@ import BatchCreateUser from "./(admin)/BatchCreateUser";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
-
 	if (!user || !user.isVerified) {
 		return {
 			redirect: {

From 2a58e0d33f9a284ae237d46989f9c962ee5e471c Mon Sep 17 00:00:00 2001
From: Joao Ramos <joaomframos.1@gmail.com>
Date: Tue, 6 Aug 2024 18:40:49 +0100
Subject: [PATCH 07/14] Added more columns to exam list

---
 src/interfaces/exam.ts               |  41 ++--
 src/pages/(admin)/Lists/ExamList.tsx | 325 ++++++++++++++++-----------
 src/pages/api/exam/[module]/index.ts |   2 +-
 3 files changed, 211 insertions(+), 157 deletions(-)

diff --git a/src/interfaces/exam.ts b/src/interfaces/exam.ts
index a7756dc5..58631a50 100644
--- a/src/interfaces/exam.ts
+++ b/src/interfaces/exam.ts
@@ -5,15 +5,20 @@ export type Variant = "full" | "partial";
 export type InstructorGender = "male" | "female" | "varied";
 export type Difficulty = "easy" | "medium" | "hard";
 
-export interface ReadingExam {
-	parts: ReadingPart[];
+interface ExamBase {
 	id: string;
-	module: "reading";
+	module: Module;
 	minTimer: number;
-	type: "academic" | "general";
 	isDiagnostic: boolean;
 	variant?: Variant;
 	difficulty?: Difficulty;
+	createdBy?: string; // option as it has been added later
+	createdAt?: string; // option as it has been added later
+}
+export interface ReadingExam extends ExamBase {
+	module: "reading";
+	parts: ReadingPart[];
+	type: "academic" | "general";
 }
 
 export interface ReadingPart {
@@ -24,14 +29,9 @@ export interface ReadingPart {
 	exercises: Exercise[];
 }
 
-export interface LevelExam {
+export interface LevelExam extends ExamBase {
 	module: "level";
-	id: string;
 	parts: LevelPart[];
-	minTimer: number;
-	isDiagnostic: boolean;
-	variant?: Variant;
-	difficulty?: Difficulty;
 }
 
 export interface LevelPart {
@@ -39,14 +39,9 @@ export interface LevelPart {
 	exercises: Exercise[];
 }
 
-export interface ListeningExam {
+export interface ListeningExam extends ExamBase {
 	parts: ListeningPart[];
-	id: string;
 	module: "listening";
-	minTimer: number;
-	isDiagnostic: boolean;
-	variant?: Variant;
-	difficulty?: Difficulty;
 }
 
 export interface ListeningPart {
@@ -72,14 +67,9 @@ export interface UserSolution {
 	isDisabled?: boolean;
 }
 
-export interface WritingExam {
+export interface WritingExam extends ExamBase {
 	module: "writing";
-	id: string;
 	exercises: WritingExercise[];
-	minTimer: number;
-	isDiagnostic: boolean;
-	variant?: Variant;
-	difficulty?: Difficulty;
 }
 
 interface WordCounter {
@@ -87,15 +77,10 @@ interface WordCounter {
 	limit: number;
 }
 
-export interface SpeakingExam {
-	id: string;
+export interface SpeakingExam  extends ExamBase {
 	module: "speaking";
 	exercises: (SpeakingExercise | InteractiveSpeakingExercise)[];
-	minTimer: number;
-	isDiagnostic: boolean;
-	variant?: Variant;
 	instructorGender: InstructorGender;
-	difficulty?: Difficulty;
 }
 
 export type Exercise =
diff --git a/src/pages/(admin)/Lists/ExamList.tsx b/src/pages/(admin)/Lists/ExamList.tsx
index efd212ca..71f685c1 100644
--- a/src/pages/(admin)/Lists/ExamList.tsx
+++ b/src/pages/(admin)/Lists/ExamList.tsx
@@ -1,154 +1,223 @@
-import {PERMISSIONS} from "@/constants/userPermissions";
+import { useMemo } from "react";
+import { PERMISSIONS } from "@/constants/userPermissions";
 import useExams from "@/hooks/useExams";
 import useUsers from "@/hooks/useUsers";
-import {Module} from "@/interfaces";
-import {Exam} from "@/interfaces/exam";
-import {Type, User} from "@/interfaces/user";
+import { Module } from "@/interfaces";
+import { Exam } from "@/interfaces/exam";
+import { Type, User } from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
-import {getExamById} from "@/utils/exams";
-import {countExercises} from "@/utils/moduleUtils";
-import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import { getExamById } from "@/utils/exams";
+import { countExercises } from "@/utils/moduleUtils";
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
 import axios from "axios";
 import clsx from "clsx";
-import {capitalize} from "lodash";
-import {useRouter} from "next/router";
-import {BsCheck, BsTrash, BsUpload} from "react-icons/bs";
-import {toast} from "react-toastify";
+import { capitalize } from "lodash";
+import { useRouter } from "next/router";
+import { BsCheck, BsTrash, BsUpload } from "react-icons/bs";
+import { toast } from "react-toastify";
 
-const CLASSES: {[key in Module]: string} = {
-	reading: "text-ielts-reading",
-	listening: "text-ielts-listening",
-	speaking: "text-ielts-speaking",
-	writing: "text-ielts-writing",
-	level: "text-ielts-level",
+const CLASSES: { [key in Module]: string } = {
+  reading: "text-ielts-reading",
+  listening: "text-ielts-listening",
+  speaking: "text-ielts-speaking",
+  writing: "text-ielts-writing",
+  level: "text-ielts-level",
 };
 
 const columnHelper = createColumnHelper<Exam>();
 
-export default function ExamList({user}: {user: User}) {
-	const {exams, reload} = useExams();
+export default function ExamList({ user }: { user: User }) {
+  const { exams, reload } = useExams();
+  const { users } = useUsers();
 
-	const setExams = useExamStore((state) => state.setExams);
-	const setSelectedModules = useExamStore((state) => state.setSelectedModules);
+  const parsedExams = useMemo(() => {
+    return exams.map((exam) => {
+      if (exam.createdBy) {
+        const user = users.find((u) => u.id === exam.createdBy);
+        if (!user) return exam;
 
-	const router = useRouter();
+        return {
+          ...exam,
+          createdBy: user.type === "developer" ? "system" : user.name,
+        };
+      }
 
-	const loadExam = async (module: Module, examId: string) => {
-		const exam = await getExamById(module, examId.trim());
-		if (!exam) {
-			toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
-				toastId: "invalid-exam-id",
-			});
+      return exam;
+    });
+  }, [exams, users]);
 
-			return;
-		}
+  const setExams = useExamStore((state) => state.setExams);
+  const setSelectedModules = useExamStore((state) => state.setSelectedModules);
 
-		setExams([exam]);
-		setSelectedModules([module]);
+  const router = useRouter();
 
-		router.push("/exercises");
-	};
+  const loadExam = async (module: Module, examId: string) => {
+    const exam = await getExamById(module, examId.trim());
+    if (!exam) {
+      toast.error(
+        "Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID",
+        {
+          toastId: "invalid-exam-id",
+        }
+      );
 
-	const deleteExam = async (exam: Exam) => {
-		if (!confirm(`Are you sure you want to delete this ${capitalize(exam.module)} exam?`)) return;
+      return;
+    }
 
-		axios
-			.delete(`/api/exam/${exam.module}/${exam.id}`)
-			.then(() => toast.success(`Deleted the "${exam.id}" exam`))
-			.catch((reason) => {
-				if (reason.response.status === 404) {
-					toast.error("Exam not found!");
-					return;
-				}
+    setExams([exam]);
+    setSelectedModules([module]);
 
-				if (reason.response.status === 403) {
-					toast.error("You do not have permission to delete this exam!");
-					return;
-				}
+    router.push("/exercises");
+  };
 
-				toast.error("Something went wrong, please try again later.");
-			})
-			.finally(reload);
-	};
+  const deleteExam = async (exam: Exam) => {
+    if (
+      !confirm(
+        `Are you sure you want to delete this ${capitalize(exam.module)} exam?`
+      )
+    )
+      return;
 
-	const getTotalExercises = (exam: Exam) => {
-		if (exam.module === "reading" || exam.module === "listening" || exam.module === "level") {
-			return countExercises(exam.parts.flatMap((x) => x.exercises));
-		}
+    axios
+      .delete(`/api/exam/${exam.module}/${exam.id}`)
+      .then(() => toast.success(`Deleted the "${exam.id}" exam`))
+      .catch((reason) => {
+        if (reason.response.status === 404) {
+          toast.error("Exam not found!");
+          return;
+        }
 
-		return countExercises(exam.exercises);
-	};
+        if (reason.response.status === 403) {
+          toast.error("You do not have permission to delete this exam!");
+          return;
+        }
 
-	const defaultColumns = [
-		columnHelper.accessor("id", {
-			header: "ID",
-			cell: (info) => info.getValue(),
-		}),
-		columnHelper.accessor("module", {
-			header: "Module",
-			cell: (info) => <span className={CLASSES[info.getValue()]}>{capitalize(info.getValue())}</span>,
-		}),
-		columnHelper.accessor((x) => getTotalExercises(x), {
-			header: "Exercises",
-			cell: (info) => info.getValue(),
-		}),
-		columnHelper.accessor("minTimer", {
-			header: "Timer",
-			cell: (info) => <>{info.getValue()} minute(s)</>,
-		}),
-		{
-			header: "",
-			id: "actions",
-			cell: ({row}: {row: {original: Exam}}) => {
-				return (
-					<div className="flex gap-4">
-						<div
-							data-tip="Load exam"
-							className="cursor-pointer tooltip"
-							onClick={async () => await loadExam(row.original.module, row.original.id)}>
-							<BsUpload className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-						</div>
-						{PERMISSIONS.examManagement.delete.includes(user.type) && (
-							<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteExam(row.original)}>
-								<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-							</div>
-						)}
-					</div>
-				);
-			},
-		},
-	];
+        toast.error("Something went wrong, please try again later.");
+      })
+      .finally(reload);
+  };
 
-	const table = useReactTable({
-		data: exams,
-		columns: defaultColumns,
-		getCoreRowModel: getCoreRowModel(),
-	});
+  const getTotalExercises = (exam: Exam) => {
+    if (
+      exam.module === "reading" ||
+      exam.module === "listening" ||
+      exam.module === "level"
+    ) {
+      return countExercises(exam.parts.flatMap((x) => x.exercises));
+    }
 
-	return (
-		<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
-			<thead>
-				{table.getHeaderGroups().map((headerGroup) => (
-					<tr key={headerGroup.id}>
-						{headerGroup.headers.map((header) => (
-							<th className="p-4 text-left" key={header.id}>
-								{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-							</th>
-						))}
-					</tr>
-				))}
-			</thead>
-			<tbody className="px-2">
-				{table.getRowModel().rows.map((row) => (
-					<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
-						{row.getVisibleCells().map((cell) => (
-							<td className="px-4 py-2" key={cell.id}>
-								{flexRender(cell.column.columnDef.cell, cell.getContext())}
-							</td>
-						))}
-					</tr>
-				))}
-			</tbody>
-		</table>
-	);
+    return countExercises(exam.exercises);
+  };
+
+  const defaultColumns = [
+    columnHelper.accessor("id", {
+      header: "ID",
+      cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor("module", {
+      header: "Module",
+      cell: (info) => (
+        <span className={CLASSES[info.getValue()]}>
+          {capitalize(info.getValue())}
+        </span>
+      ),
+    }),
+    columnHelper.accessor((x) => getTotalExercises(x), {
+      header: "Exercises",
+      cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor("minTimer", {
+      header: "Timer",
+      cell: (info) => <>{info.getValue()} minute(s)</>,
+    }),
+    columnHelper.accessor("createdAt", {
+      header: "Created At",
+      cell: (info) => {
+        const value = info.getValue();
+        if (value) {
+          return new Date(value).toLocaleDateString();
+        }
+
+        return null;
+      },
+    }),
+    columnHelper.accessor("createdBy", {
+      header: "Created By",
+      cell: (info) => info.getValue(),
+    }),
+    {
+      header: "",
+      id: "actions",
+      cell: ({ row }: { row: { original: Exam } }) => {
+        return (
+          <div className="flex gap-4">
+            <div
+              data-tip="Load exam"
+              className="cursor-pointer tooltip"
+              onClick={async () =>
+                await loadExam(row.original.module, row.original.id)
+              }
+            >
+              <BsUpload className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+            </div>
+            {PERMISSIONS.examManagement.delete.includes(user.type) && (
+              <div
+                data-tip="Delete"
+                className="cursor-pointer tooltip"
+                onClick={() => deleteExam(row.original)}
+              >
+                <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+              </div>
+            )}
+          </div>
+        );
+      },
+    },
+  ];
+
+  const table = useReactTable({
+    data: parsedExams,
+    columns: defaultColumns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+      <thead>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <tr key={headerGroup.id}>
+            {headerGroup.headers.map((header) => (
+              <th className="p-4 text-left" key={header.id}>
+                {header.isPlaceholder
+                  ? null
+                  : flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+              </th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+      <tbody className="px-2">
+        {table.getRowModel().rows.map((row) => (
+          <tr
+            className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
+            key={row.id}
+          >
+            {row.getVisibleCells().map((cell) => (
+              <td className="px-4 py-2" key={cell.id}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
 }
diff --git a/src/pages/api/exam/[module]/index.ts b/src/pages/api/exam/[module]/index.ts
index e7ff0699..1c845cc7 100644
--- a/src/pages/api/exam/[module]/index.ts
+++ b/src/pages/api/exam/[module]/index.ts
@@ -47,7 +47,7 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
 	}
 	const {module} = req.query as {module: string};
 
-	const exam = {...req.body, module: module};
+	const exam = {...req.body, module: module, createdBy: req.session.user.id, createdAt: new Date().toISOString()};
 	await setDoc(doc(db, module, req.body.id), exam);
 
 	res.status(200).json(exam);

From cf91f1812d2176eb96d2f0ebbcc3ad70127255c5 Mon Sep 17 00:00:00 2001
From: Joao Ramos <joaomframos.1@gmail.com>
Date: Wed, 7 Aug 2024 09:36:08 +0100
Subject: [PATCH 08/14] Added group permissions

---
 src/dashboards/Teacher.tsx            |  17 +-
 src/interfaces/permissions.ts         |   5 +
 src/pages/(admin)/Lists/GroupList.tsx | 727 +++++++++++++++-----------
 yarn.lock                             | 441 ++++++++--------
 4 files changed, 657 insertions(+), 533 deletions(-)

diff --git a/src/dashboards/Teacher.tsx b/src/dashboards/Teacher.tsx
index 855dfc69..41548af7 100644
--- a/src/dashboards/Teacher.tsx
+++ b/src/dashboards/Teacher.tsx
@@ -46,6 +46,7 @@ import ProgressBar from "@/components/Low/ProgressBar";
 import AssignmentCreator from "./AssignmentCreator";
 import AssignmentView from "./AssignmentView";
 import { getUserCorporate } from "@/utils/groups";
+import { checkAccess } from "@/utils/permissions";
 
 interface Props {
   user: User;
@@ -373,13 +374,15 @@ export default function TeacherDashboard({ user }: Props) {
           ).toFixed(1)}
           color="purple"
         />
-        <IconCard
-          Icon={BsPeople}
-          label="Groups"
-          value={groups.length}
-          color="purple"
-          onClick={() => setPage("groups")}
-        />
+        {checkAccess(user, ["teacher", "developer"], "viewGroup") && (
+          <IconCard
+            Icon={BsPeople}
+            label="Groups"
+            value={groups.length}
+            color="purple"
+            onClick={() => setPage("groups")}
+          />
+        )}
         <div
           onClick={() => setPage("assignments")}
           className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-96 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300"
diff --git a/src/interfaces/permissions.ts b/src/interfaces/permissions.ts
index 2e448af5..29efc1b7 100644
--- a/src/interfaces/permissions.ts
+++ b/src/interfaces/permissions.ts
@@ -26,18 +26,23 @@ export const permissions = [
   "viewCorporate",
   "viewCountryManager",
   "viewAdmin",
+  "viewGroup",
   // edit data
   "editStudent",
   "editTeacher",
   "editCorporate",
   "editCountryManager",
   "editAdmin",
+  "editGroup",
   // delete data
   "deleteStudent",
   "deleteTeacher",
   "deleteCorporate",
   "deleteCountryManager",
   "deleteAdmin",
+  "deleteGroup",
+  // create pages
+  "createGroup",
 ] as const;
 
 export type PermissionType = (typeof permissions)[keyof typeof permissions];
diff --git a/src/pages/(admin)/Lists/GroupList.tsx b/src/pages/(admin)/Lists/GroupList.tsx
index ae36a5cd..2d65ed8a 100644
--- a/src/pages/(admin)/Lists/GroupList.tsx
+++ b/src/pages/(admin)/Lists/GroupList.tsx
@@ -3,335 +3,474 @@ import Input from "@/components/Low/Input";
 import Modal from "@/components/Modal";
 import useGroups from "@/hooks/useGroups";
 import useUsers from "@/hooks/useUsers";
-import {CorporateUser, Group, User} from "@/interfaces/user";
-import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import { CorporateUser, Group, User } from "@/interfaces/user";
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
 import axios from "axios";
-import {capitalize, uniq} from "lodash";
-import {useEffect, useState} from "react";
-import {BsPencil, BsQuestionCircleFill, BsTrash} from "react-icons/bs";
+import { capitalize, uniq } from "lodash";
+import { useEffect, useState } from "react";
+import { BsPencil, BsQuestionCircleFill, BsTrash } from "react-icons/bs";
 import Select from "react-select";
-import {toast} from "react-toastify";
+import { toast } from "react-toastify";
 import readXlsxFile from "read-excel-file";
-import {useFilePicker} from "use-file-picker";
-import {getUserCorporate} from "@/utils/groups";
+import { useFilePicker } from "use-file-picker";
+import { getUserCorporate } from "@/utils/groups";
 import { isAgentUser, isCorporateUser } from "@/resources/user";
+import { checkAccess } from "@/utils/permissions";
 
 const columnHelper = createColumnHelper<Group>();
-const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
+const EMAIL_REGEX = new RegExp(
+  /^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/
+);
 
-const LinkedCorporate = ({userId, users, groups}: {userId: string, users: User[], groups: Group[]}) => {
-	const [companyName, setCompanyName] = useState("");
-	const [isLoading, setIsLoading] = useState(false);
+const LinkedCorporate = ({
+  userId,
+  users,
+  groups,
+}: {
+  userId: string;
+  users: User[];
+  groups: Group[];
+}) => {
+  const [companyName, setCompanyName] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
 
-	useEffect(() => {		
-		const user = users.find((u) => u.id === userId)
-		if (!user) return setCompanyName("")
-		
-		if (isCorporateUser(user)) return setCompanyName(user.corporateInformation?.companyInformation?.name || user.name)
-		if (isAgentUser(user)) return setCompanyName(user.agentInformation?.companyName || user.name)
-		
-		const belongingGroups = groups.filter((x) => x.participants.includes(userId))
-		const belongingGroupsAdmins = belongingGroups.map((x) => users.find((u) => u.id === x.admin)).filter((x) => !!x && isCorporateUser(x))
-		
-		if (belongingGroupsAdmins.length === 0) return setCompanyName("")
-		
-		const admin = (belongingGroupsAdmins[0] as CorporateUser)
-		setCompanyName(admin.corporateInformation?.companyInformation.name || admin.name)
-	}, [userId, users, groups]);
+  useEffect(() => {
+    const user = users.find((u) => u.id === userId);
+    if (!user) return setCompanyName("");
 
-	return isLoading ? <span className="animate-pulse">Loading...</span> : <>{companyName}</>;
+    if (isCorporateUser(user))
+      return setCompanyName(
+        user.corporateInformation?.companyInformation?.name || user.name
+      );
+    if (isAgentUser(user))
+      return setCompanyName(user.agentInformation?.companyName || user.name);
+
+    const belongingGroups = groups.filter((x) =>
+      x.participants.includes(userId)
+    );
+    const belongingGroupsAdmins = belongingGroups
+      .map((x) => users.find((u) => u.id === x.admin))
+      .filter((x) => !!x && isCorporateUser(x));
+
+    if (belongingGroupsAdmins.length === 0) return setCompanyName("");
+
+    const admin = belongingGroupsAdmins[0] as CorporateUser;
+    setCompanyName(
+      admin.corporateInformation?.companyInformation.name || admin.name
+    );
+  }, [userId, users, groups]);
+
+  return isLoading ? (
+    <span className="animate-pulse">Loading...</span>
+  ) : (
+    <>{companyName}</>
+  );
 };
 
 interface CreateDialogProps {
-	user: User;
-	users: User[];
-	group?: Group;
-	onClose: () => void;
+  user: User;
+  users: User[];
+  group?: Group;
+  onClose: () => void;
 }
 
-const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
-	const [name, setName] = useState<string | undefined>(group?.name || undefined);
-	const [admin, setAdmin] = useState<string>(group?.admin || user.id);
-	const [participants, setParticipants] = useState<string[]>(group?.participants || []);
-	const [isLoading, setIsLoading] = useState(false);
+const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
+  const [name, setName] = useState<string | undefined>(
+    group?.name || undefined
+  );
+  const [admin, setAdmin] = useState<string>(group?.admin || user.id);
+  const [participants, setParticipants] = useState<string[]>(
+    group?.participants || []
+  );
+  const [isLoading, setIsLoading] = useState(false);
 
-	const {openFilePicker, filesContent, clear} = useFilePicker({
-		accept: ".xlsx",
-		multiple: false,
-		readAs: "ArrayBuffer",
-	});
+  const { openFilePicker, filesContent, clear } = useFilePicker({
+    accept: ".xlsx",
+    multiple: false,
+    readAs: "ArrayBuffer",
+  });
 
-	useEffect(() => {
-		if (filesContent.length > 0) {
-			setIsLoading(true);
+  useEffect(() => {
+    if (filesContent.length > 0) {
+      setIsLoading(true);
 
-			const file = filesContent[0];
-			readXlsxFile(file.content).then((rows) => {
-				const emails = uniq(
-					rows
-						.map((row) => {
-							const [email] = row as string[];
-							return EMAIL_REGEX.test(email) && !users.map((u) => u.email).includes(email) ? email.toString().trim() : undefined;
-						})
-						.filter((x) => !!x),
-				);
+      const file = filesContent[0];
+      readXlsxFile(file.content).then((rows) => {
+        const emails = uniq(
+          rows
+            .map((row) => {
+              const [email] = row as string[];
+              return EMAIL_REGEX.test(email) &&
+                !users.map((u) => u.email).includes(email)
+                ? email.toString().trim()
+                : undefined;
+            })
+            .filter((x) => !!x)
+        );
 
-				if (emails.length === 0) {
-					toast.error("Please upload an Excel file containing e-mails!");
-					clear();
-					setIsLoading(false);
-					return;
-				}
+        if (emails.length === 0) {
+          toast.error("Please upload an Excel file containing e-mails!");
+          clear();
+          setIsLoading(false);
+          return;
+        }
 
-				const emailUsers = [...new Set(emails)].map((x) => users.find((y) => y.email.toLowerCase() === x)).filter((x) => x !== undefined);
-				const filteredUsers = emailUsers.filter(
-					(x) =>
-						((user.type === "developer" || user.type === "admin" || user.type === "corporate" || user.type === "mastercorporate") &&
-							(x?.type === "student" || x?.type === "teacher")) ||
-						(user.type === "teacher" && x?.type === "student"),
-				);
+        const emailUsers = [...new Set(emails)]
+          .map((x) => users.find((y) => y.email.toLowerCase() === x))
+          .filter((x) => x !== undefined);
+        const filteredUsers = emailUsers.filter(
+          (x) =>
+            ((user.type === "developer" ||
+              user.type === "admin" ||
+              user.type === "corporate" ||
+              user.type === "mastercorporate") &&
+              (x?.type === "student" || x?.type === "teacher")) ||
+            (user.type === "teacher" && x?.type === "student")
+        );
 
-				setParticipants(filteredUsers.filter((x) => !!x).map((x) => x!.id));
-				toast.success(
-					user.type !== "teacher"
-						? "Added all teachers and students found in the file you've provided!"
-						: "Added all students found in the file you've provided!",
-					{toastId: "upload-success"},
-				);
-				setIsLoading(false);
-			});
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [filesContent, user.type, users]);
+        setParticipants(filteredUsers.filter((x) => !!x).map((x) => x!.id));
+        toast.success(
+          user.type !== "teacher"
+            ? "Added all teachers and students found in the file you've provided!"
+            : "Added all students found in the file you've provided!",
+          { toastId: "upload-success" }
+        );
+        setIsLoading(false);
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filesContent, user.type, users]);
 
-	const submit = () => {
-		setIsLoading(true);
+  const submit = () => {
+    setIsLoading(true);
 
-		if (name !== group?.name && (name === "Students" || name === "Teachers")) {
-			toast.error("That group name is reserved and cannot be used, please enter another one.");
-			setIsLoading(false);
-			return;
-		}
+    if (name !== group?.name && (name === "Students" || name === "Teachers")) {
+      toast.error(
+        "That group name is reserved and cannot be used, please enter another one."
+      );
+      setIsLoading(false);
+      return;
+    }
 
-		(group ? axios.patch : axios.post)(group ? `/api/groups/${group.id}` : "/api/groups", {name, admin, participants})
-			.then(() => {
-				toast.success(`Group "${name}" ${group ? "edited" : "created"} successfully`);
-				return true;
-			})
-			.catch(() => {
-				toast.error("Something went wrong, please try again later!");
-				return false;
-			})
-			.finally(() => {
-				setIsLoading(false);
-				onClose();
-			});
-	};
+    (group ? axios.patch : axios.post)(
+      group ? `/api/groups/${group.id}` : "/api/groups",
+      { name, admin, participants }
+    )
+      .then(() => {
+        toast.success(
+          `Group "${name}" ${group ? "edited" : "created"} successfully`
+        );
+        return true;
+      })
+      .catch(() => {
+        toast.error("Something went wrong, please try again later!");
+        return false;
+      })
+      .finally(() => {
+        setIsLoading(false);
+        onClose();
+      });
+  };
 
-	return (
-		<div className="mt-4 flex w-full flex-col gap-12 px-4 py-2">
-			<div className="flex flex-col gap-8">
-				<Input name="name" type="text" label="Name" defaultValue={name} onChange={setName} required disabled={group?.disableEditing} />
-				<div className="flex w-full flex-col gap-3">
-					<div className="flex items-center gap-2">
-						<label className="text-mti-gray-dim text-base font-normal">Participants</label>
-						<div className="tooltip" data-tip="The Excel file should only include a column with the desired e-mails.">
-							<BsQuestionCircleFill />
-						</div>
-					</div>
-					<div className="flex w-full gap-8">
-						<Select
-							className="w-full"
-							value={participants.map((x) => ({
-								value: x,
-								label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
-							}))}
-							placeholder="Participants..."
-							defaultValue={participants.map((x) => ({
-								value: x,
-								label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
-							}))}
-							options={users
-								.filter((x) => (user.type === "teacher" ? x.type === "student" : x.type === "student" || x.type === "teacher"))
-								.map((x) => ({value: x.id, label: `${x.email} - ${x.name}`}))}
-							onChange={(value) => setParticipants(value.map((x) => x.value))}
-							isMulti
-							isSearchable
-							menuPortalTarget={document?.body}
-							styles={{
-								menuPortal: (base) => ({...base, zIndex: 9999}),
-								control: (styles) => ({
-									...styles,
-									backgroundColor: "white",
-									borderRadius: "999px",
-									padding: "1rem 1.5rem",
-									zIndex: "40",
-								}),
-							}}
-						/>
-						{user.type !== "teacher" && (
-							<Button className="w-full max-w-[300px]" onClick={openFilePicker} isLoading={isLoading} variant="outline">
-								{filesContent.length === 0 ? "Upload participants Excel file" : filesContent[0].name}
-							</Button>
-						)}
-					</div>
-				</div>
-			</div>
-			<div className="mt-8 flex w-full items-center justify-end gap-8">
-				<Button variant="outline" color="red" className="w-full max-w-[200px]" isLoading={isLoading} onClick={onClose}>
-					Cancel
-				</Button>
-				<Button className="w-full max-w-[200px]" onClick={submit} isLoading={isLoading} disabled={!name}>
-					Submit
-				</Button>
-			</div>
-		</div>
-	);
+  return (
+    <div className="mt-4 flex w-full flex-col gap-12 px-4 py-2">
+      <div className="flex flex-col gap-8">
+        <Input
+          name="name"
+          type="text"
+          label="Name"
+          defaultValue={name}
+          onChange={setName}
+          required
+          disabled={group?.disableEditing}
+        />
+        <div className="flex w-full flex-col gap-3">
+          <div className="flex items-center gap-2">
+            <label className="text-mti-gray-dim text-base font-normal">
+              Participants
+            </label>
+            <div
+              className="tooltip"
+              data-tip="The Excel file should only include a column with the desired e-mails."
+            >
+              <BsQuestionCircleFill />
+            </div>
+          </div>
+          <div className="flex w-full gap-8">
+            <Select
+              className="w-full"
+              value={participants.map((x) => ({
+                value: x,
+                label: `${users.find((y) => y.id === x)?.email} - ${
+                  users.find((y) => y.id === x)?.name
+                }`,
+              }))}
+              placeholder="Participants..."
+              defaultValue={participants.map((x) => ({
+                value: x,
+                label: `${users.find((y) => y.id === x)?.email} - ${
+                  users.find((y) => y.id === x)?.name
+                }`,
+              }))}
+              options={users
+                .filter((x) =>
+                  user.type === "teacher"
+                    ? x.type === "student"
+                    : x.type === "student" || x.type === "teacher"
+                )
+                .map((x) => ({ value: x.id, label: `${x.email} - ${x.name}` }))}
+              onChange={(value) => setParticipants(value.map((x) => x.value))}
+              isMulti
+              isSearchable
+              menuPortalTarget={document?.body}
+              styles={{
+                menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                control: (styles) => ({
+                  ...styles,
+                  backgroundColor: "white",
+                  borderRadius: "999px",
+                  padding: "1rem 1.5rem",
+                  zIndex: "40",
+                }),
+              }}
+            />
+            {user.type !== "teacher" && (
+              <Button
+                className="w-full max-w-[300px]"
+                onClick={openFilePicker}
+                isLoading={isLoading}
+                variant="outline"
+              >
+                {filesContent.length === 0
+                  ? "Upload participants Excel file"
+                  : filesContent[0].name}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="mt-8 flex w-full items-center justify-end gap-8">
+        <Button
+          variant="outline"
+          color="red"
+          className="w-full max-w-[200px]"
+          isLoading={isLoading}
+          onClick={onClose}
+        >
+          Cancel
+        </Button>
+        <Button
+          className="w-full max-w-[200px]"
+          onClick={submit}
+          isLoading={isLoading}
+          disabled={!name}
+        >
+          Submit
+        </Button>
+      </div>
+    </div>
+  );
 };
 
 const filterTypes = ["corporate", "teacher", "mastercorporate"];
 
-export default function GroupList({user}: {user: User}) {
-	const [isCreating, setIsCreating] = useState(false);
-	const [editingGroup, setEditingGroup] = useState<Group>();
-	const [filterByUser, setFilterByUser] = useState(false);
+export default function GroupList({ user }: { user: User }) {
+  const [isCreating, setIsCreating] = useState(false);
+  const [editingGroup, setEditingGroup] = useState<Group>();
+  const [filterByUser, setFilterByUser] = useState(false);
 
-	const {users} = useUsers();
-	const {groups, reload} = useGroups(user && filterTypes.includes(user?.type) ? user.id : undefined, user?.type);
+  const { users } = useUsers();
+  const { groups, reload } = useGroups(
+    user && filterTypes.includes(user?.type) ? user.id : undefined,
+    user?.type
+  );
 
-	useEffect(() => {
-		if (user && (['corporate', 'teacher', 'mastercorporate'].includes(user.type))) {
-			setFilterByUser(true);
-		}
-	}, [user]);
+  useEffect(() => {
+    if (
+      user &&
+      ["corporate", "teacher", "mastercorporate"].includes(user.type)
+    ) {
+      setFilterByUser(true);
+    }
+  }, [user]);
 
-	const deleteGroup = (group: Group) => {
-		if (!confirm(`Are you sure you want to delete "${group.name}"?`)) return;
+  const deleteGroup = (group: Group) => {
+    if (!confirm(`Are you sure you want to delete "${group.name}"?`)) return;
 
-		axios
-			.delete<{ok: boolean}>(`/api/groups/${group.id}`)
-			.then(() => toast.success(`Group "${group.name}" deleted successfully`))
-			.catch(() => toast.error("Something went wrong, please try again later!"))
-			.finally(reload);
-	};
+    axios
+      .delete<{ ok: boolean }>(`/api/groups/${group.id}`)
+      .then(() => toast.success(`Group "${group.name}" deleted successfully`))
+      .catch(() => toast.error("Something went wrong, please try again later!"))
+      .finally(reload);
+  };
 
-	const defaultColumns = [
-		columnHelper.accessor("id", {
-			header: "ID",
-			cell: (info) => info.getValue(),
-		}),
-		columnHelper.accessor("name", {
-			header: "Name",
-			cell: (info) => info.getValue(),
-		}),
-		columnHelper.accessor("admin", {
-			header: "Admin",
-			cell: (info) => (
-				<div className="tooltip" data-tip={capitalize(users.find((x) => x.id === info.getValue())?.type)}>
-					{users.find((x) => x.id === info.getValue())?.name}
-				</div>
-			),
-		}),
-		columnHelper.accessor("admin", {
-			header: "Linked Corporate",
-			cell: (info) => <LinkedCorporate userId={info.getValue()} users={users} groups={groups} />,
-		}),
-		columnHelper.accessor("participants", {
-			header: "Participants",
-			cell: (info) =>
-				info
-					.getValue()
-					.map((x) => users.find((y) => y.id === x)?.name)
-					.join(", "),
-		}),
-		{
-			header: "",
-			id: "actions",
-			cell: ({row}: {row: {original: Group}}) => {
-				return (
-					<>
-						{user && (user.type === "developer" || user.type === "admin" || user.id === row.original.admin) && (
-							<div className="flex gap-2">
-								{(!row.original.disableEditing || ["developer", "admin"].includes(user.type)) && (
-									<div data-tip="Edit" className="tooltip cursor-pointer" onClick={() => setEditingGroup(row.original)}>
-										<BsPencil className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
-									</div>
-								)}
-								{(!row.original.disableEditing || ["developer", "admin"].includes(user.type)) && (
-									<div data-tip="Delete" className="tooltip cursor-pointer" onClick={() => deleteGroup(row.original)}>
-										<BsTrash className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
-									</div>
-								)}
-							</div>
-						)}
-					</>
-				);
-			},
-		},
-	];
+  const defaultColumns = [
+    columnHelper.accessor("id", {
+      header: "ID",
+      cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor("name", {
+      header: "Name",
+      cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor("admin", {
+      header: "Admin",
+      cell: (info) => (
+        <div
+          className="tooltip"
+          data-tip={capitalize(
+            users.find((x) => x.id === info.getValue())?.type
+          )}
+        >
+          {users.find((x) => x.id === info.getValue())?.name}
+        </div>
+      ),
+    }),
+    columnHelper.accessor("admin", {
+      header: "Linked Corporate",
+      cell: (info) => (
+        <LinkedCorporate
+          userId={info.getValue()}
+          users={users}
+          groups={groups}
+        />
+      ),
+    }),
+    columnHelper.accessor("participants", {
+      header: "Participants",
+      cell: (info) =>
+        info
+          .getValue()
+          .map((x) => users.find((y) => y.id === x)?.name)
+          .join(", "),
+    }),
+    {
+      header: "",
+      id: "actions",
+      cell: ({ row }: { row: { original: Group } }) => {
+        return (
+          <>
+            {user &&
+              (checkAccess(user, ["developer", "admin"]) ||
+                user.id === row.original.admin) && (
+                <div className="flex gap-2">
+                  {(!row.original.disableEditing ||
+                    checkAccess(user, ["developer", "admin"]),
+                  "editGroup") && (
+                    <div
+                      data-tip="Edit"
+                      className="tooltip cursor-pointer"
+                      onClick={() => setEditingGroup(row.original)}
+                    >
+                      <BsPencil className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
+                    </div>
+                  )}
+                  {(!row.original.disableEditing ||
+                    checkAccess(user, ["developer", "admin"]),
+                  "deleteGroup") && (
+                    <div
+                      data-tip="Delete"
+                      className="tooltip cursor-pointer"
+                      onClick={() => deleteGroup(row.original)}
+                    >
+                      <BsTrash className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
+                    </div>
+                  )}
+                </div>
+              )}
+          </>
+        );
+      },
+    },
+  ];
 
-	const table = useReactTable({
-		data: groups,
-		columns: defaultColumns,
-		getCoreRowModel: getCoreRowModel(),
-	});
+  const table = useReactTable({
+    data: groups,
+    columns: defaultColumns,
+    getCoreRowModel: getCoreRowModel(),
+  });
 
-	const closeModal = () => {
-		setIsCreating(false);
-		setEditingGroup(undefined);
-		reload();
-	};
+  const closeModal = () => {
+    setIsCreating(false);
+    setEditingGroup(undefined);
+    reload();
+  };
 
-	return (
-		<div className="h-full w-full rounded-xl">
-			<Modal isOpen={isCreating || !!editingGroup} onClose={closeModal} title={editingGroup ? `Editing ${editingGroup.name}` : "New Group"}>
-				<CreatePanel
-					group={editingGroup}
-					user={user}
-					onClose={closeModal}
-					users={
-						user?.type === "corporate" || user?.type === "teacher"
-							? users.filter(
-									(u) =>
-										groups
-											.filter((g) => g.admin === user.id)
-											.flatMap((g) => g.participants)
-											.includes(u.id) || groups.flatMap((g) => g.participants).includes(u.id),
-							  )
-							: users
-					}
-				/>
-			</Modal>
-			<table className="bg-mti-purple-ultralight/40 w-full rounded-xl">
-				<thead>
-					{table.getHeaderGroups().map((headerGroup) => (
-						<tr key={headerGroup.id}>
-							{headerGroup.headers.map((header) => (
-								<th className="py-4" key={header.id}>
-									{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-								</th>
-							))}
-						</tr>
-					))}
-				</thead>
-				<tbody className="px-2">
-					{table.getRowModel().rows.map((row) => (
-						<tr className="even:bg-mti-purple-ultralight/40 rounded-lg py-2 odd:bg-white" key={row.id}>
-							{row.getVisibleCells().map((cell) => (
-								<td className="px-4 py-2" key={cell.id}>
-									{flexRender(cell.column.columnDef.cell, cell.getContext())}
-								</td>
-							))}
-						</tr>
-					))}
-				</tbody>
-			</table>
+  return (
+    <div className="h-full w-full rounded-xl">
+      <Modal
+        isOpen={isCreating || !!editingGroup}
+        onClose={closeModal}
+        title={editingGroup ? `Editing ${editingGroup.name}` : "New Group"}
+      >
+        <CreatePanel
+          group={editingGroup}
+          user={user}
+          onClose={closeModal}
+          users={
+            user?.type === "corporate" || user?.type === "teacher"
+              ? users.filter(
+                  (u) =>
+                    groups
+                      .filter((g) => g.admin === user.id)
+                      .flatMap((g) => g.participants)
+                      .includes(u.id) ||
+                    groups.flatMap((g) => g.participants).includes(u.id)
+                )
+              : users
+          }
+        />
+      </Modal>
+      <table className="bg-mti-purple-ultralight/40 w-full rounded-xl">
+        <thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <th className="py-4" key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody className="px-2">
+          {table.getRowModel().rows.map((row) => (
+            <tr
+              className="even:bg-mti-purple-ultralight/40 rounded-lg py-2 odd:bg-white"
+              key={row.id}
+            >
+              {row.getVisibleCells().map((cell) => (
+                <td className="px-4 py-2" key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
 
-			<button
-				onClick={() => setIsCreating(true)}
-				className="bg-mti-purple-light hover:bg-mti-purple w-full py-2 text-white transition duration-300 ease-in-out">
-				New Group
-			</button>
-		</div>
-	);
+      {checkAccess(
+        user,
+        ["teacher", "corporate", "mastercorporate", "admin", "developer"],
+        "createGroup"
+      ) && (
+        <button
+          onClick={() => setIsCreating(true)}
+          className="bg-mti-purple-light hover:bg-mti-purple w-full py-2 text-white transition duration-300 ease-in-out"
+        >
+          New Group
+        </button>
+      )}
+    </div>
+  );
 }
diff --git a/yarn.lock b/yarn.lock
index b8b27fd7..98c50bc2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -183,7 +183,7 @@
     "@emotion/utils" "0.11.3"
     "@emotion/weak-memoize" "0.2.5"
 
-"@emotion/cache@^11.13.0":
+"@emotion/cache@^11.13.0", "@emotion/cache@^11.4.0":
   version "11.13.1"
   resolved "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz"
   integrity sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==
@@ -194,27 +194,16 @@
     "@emotion/weak-memoize" "^0.4.0"
     stylis "4.2.0"
 
-"@emotion/cache@^11.4.0":
-  version "11.13.1"
-  resolved "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz"
-  integrity sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==
-  dependencies:
-    "@emotion/memoize" "^0.9.0"
-    "@emotion/sheet" "^1.4.0"
-    "@emotion/utils" "^1.4.0"
-    "@emotion/weak-memoize" "^0.4.0"
-    stylis "4.2.0"
-
-"@emotion/hash@^0.9.2":
-  version "0.9.2"
-  resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz"
-  integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
-
 "@emotion/hash@0.8.0":
   version "0.8.0"
   resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
+"@emotion/hash@^0.9.2":
+  version "0.9.2"
+  resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz"
+  integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
+
 "@emotion/is-prop-valid@^0.8.2":
   version "0.8.8"
   resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz"
@@ -222,16 +211,16 @@
   dependencies:
     "@emotion/memoize" "0.7.4"
 
-"@emotion/memoize@^0.9.0":
-  version "0.9.0"
-  resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz"
-  integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
-
 "@emotion/memoize@0.7.4":
   version "0.7.4"
   resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz"
   integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
 
+"@emotion/memoize@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz"
+  integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
+
 "@emotion/react@^11.8.1":
   version "11.13.0"
   resolved "https://registry.npmjs.org/@emotion/react/-/react-11.13.0.tgz"
@@ -257,7 +246,7 @@
     "@emotion/utils" "0.11.3"
     csstype "^2.5.7"
 
-"@emotion/serialize@^1.2.0":
+"@emotion/serialize@^1.2.0", "@emotion/serialize@^1.3.0":
   version "1.3.0"
   resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.0.tgz"
   integrity sha512-jACuBa9SlYajnpIVXB+XOXnfJHyckDfe6fOpORIM6yhBDlqGuExvDdZYHDQGoDf3bZXGv7tNr+LpLjJqiEQ6EA==
@@ -268,67 +257,56 @@
     "@emotion/utils" "^1.4.0"
     csstype "^3.0.2"
 
-"@emotion/serialize@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.0.tgz"
-  integrity sha512-jACuBa9SlYajnpIVXB+XOXnfJHyckDfe6fOpORIM6yhBDlqGuExvDdZYHDQGoDf3bZXGv7tNr+LpLjJqiEQ6EA==
-  dependencies:
-    "@emotion/hash" "^0.9.2"
-    "@emotion/memoize" "^0.9.0"
-    "@emotion/unitless" "^0.9.0"
-    "@emotion/utils" "^1.4.0"
-    csstype "^3.0.2"
-
-"@emotion/sheet@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz"
-  integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
-
 "@emotion/sheet@0.9.4":
   version "0.9.4"
   resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz"
   integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
 
+"@emotion/sheet@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz"
+  integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
+
 "@emotion/stylis@0.8.5":
   version "0.8.5"
   resolved "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz"
   integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
 
-"@emotion/unitless@^0.9.0":
-  version "0.9.0"
-  resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.9.0.tgz"
-  integrity sha512-TP6GgNZtmtFaFcsOgExdnfxLLpRDla4Q66tnenA9CktvVSdNKDvMVuUah4QvWPIpNjrWsGg3qeGo9a43QooGZQ==
-
 "@emotion/unitless@0.7.5":
   version "0.7.5"
   resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
+"@emotion/unitless@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.9.0.tgz"
+  integrity sha512-TP6GgNZtmtFaFcsOgExdnfxLLpRDla4Q66tnenA9CktvVSdNKDvMVuUah4QvWPIpNjrWsGg3qeGo9a43QooGZQ==
+
 "@emotion/use-insertion-effect-with-fallbacks@^1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz"
   integrity sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==
 
-"@emotion/utils@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.0.tgz"
-  integrity sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ==
-
 "@emotion/utils@0.11.3":
   version "0.11.3"
   resolved "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz"
   integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
 
-"@emotion/weak-memoize@^0.4.0":
-  version "0.4.0"
-  resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz"
-  integrity sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==
+"@emotion/utils@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.0.tgz"
+  integrity sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ==
 
 "@emotion/weak-memoize@0.2.5":
   version "0.2.5"
   resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
+"@emotion/weak-memoize@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz"
+  integrity sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==
+
 "@eslint/eslintrc@^1.4.1":
   version "1.4.1"
   resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz"
@@ -478,7 +456,7 @@
     "@firebase/util" "1.9.3"
     tslib "^2.1.0"
 
-"@firebase/database-compat@^0.3.4", "@firebase/database-compat@0.3.4":
+"@firebase/database-compat@0.3.4", "@firebase/database-compat@^0.3.4":
   version "0.3.4"
   resolved "https://registry.npmjs.org/@firebase/database-compat/-/database-compat-0.3.4.tgz"
   integrity sha512-kuAW+l+sLMUKBThnvxvUZ+Q1ZrF/vFJ58iUY9kAcbX48U03nVzIF6Tmkf0p3WVQwMqiXguSgtOPIB6ZCeF+5Gg==
@@ -490,7 +468,7 @@
     "@firebase/util" "1.9.3"
     tslib "^2.1.0"
 
-"@firebase/database-types@^0.10.4", "@firebase/database-types@0.10.4":
+"@firebase/database-types@0.10.4", "@firebase/database-types@^0.10.4":
   version "0.10.4"
   resolved "https://registry.npmjs.org/@firebase/database-types/-/database-types-0.10.4.tgz"
   integrity sha512-dPySn0vJ/89ZeBac70T+2tWWPiJXWbmRygYv0smT5TfE3hDrQ09eKMF3Y+vMlTdrMWq7mUdYW5REWPSGH4kAZQ==
@@ -711,13 +689,6 @@
     node-fetch "2.6.7"
     tslib "^2.1.0"
 
-"@firebase/util@^1.9.7":
-  version "1.9.7"
-  resolved "https://registry.npmjs.org/@firebase/util/-/util-1.9.7.tgz"
-  integrity sha512-fBVNH/8bRbYjqlbIhZ+lBtdAAS4WqZumx03K06/u7fJSpz1TGjEMm1ImvKD47w+xaFKIP2ori6z8BrbakRfjJA==
-  dependencies:
-    tslib "^2.1.0"
-
 "@firebase/util@1.9.3":
   version "1.9.3"
   resolved "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz"
@@ -725,6 +696,13 @@
   dependencies:
     tslib "^2.1.0"
 
+"@firebase/util@^1.9.7":
+  version "1.9.7"
+  resolved "https://registry.npmjs.org/@firebase/util/-/util-1.9.7.tgz"
+  integrity sha512-fBVNH/8bRbYjqlbIhZ+lBtdAAS4WqZumx03K06/u7fJSpz1TGjEMm1ImvKD47w+xaFKIP2ori6z8BrbakRfjJA==
+  dependencies:
+    tslib "^2.1.0"
+
 "@firebase/webchannel-wrapper@0.9.0":
   version "0.9.0"
   resolved "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.9.0.tgz"
@@ -966,6 +944,66 @@
   resolved "https://registry.npmjs.org/@next/font/-/font-13.1.6.tgz"
   integrity sha512-AITjmeb1RgX1HKMCiA39ztx2mxeAyxl4ljv2UoSBUGAbFFMg8MO7YAvjHCgFhD39hL7YTbFjol04e/BPBH5RzQ==
 
+"@next/swc-android-arm-eabi@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.1.6.tgz#d766dfc10e27814d947b20f052067c239913dbcc"
+  integrity sha512-F3/6Z8LH/pGlPzR1AcjPFxx35mPqjE5xZcf+IL+KgbW9tMkp7CYi1y7qKrEWU7W4AumxX/8OINnDQWLiwLasLQ==
+
+"@next/swc-android-arm64@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-13.1.6.tgz#f37a98d5f18927d8c9970d750d516ac779465176"
+  integrity sha512-cMwQjnB8vrYkWyK/H0Rf2c2pKIH4RGjpKUDvbjVAit6SbwPDpmaijLio0LWFV3/tOnY6kvzbL62lndVA0mkYpw==
+
+"@next/swc-darwin-arm64@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.1.6.tgz#ec1b90fd9bf809d8b81004c5182e254dced4ad96"
+  integrity sha512-KKRQH4DDE4kONXCvFMNBZGDb499Hs+xcFAwvj+rfSUssIDrZOlyfJNy55rH5t2Qxed1e4K80KEJgsxKQN1/fyw==
+
+"@next/swc-darwin-x64@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.1.6.tgz#e869ac75d16995eee733a7d1550322d9051c1eb4"
+  integrity sha512-/uOky5PaZDoaU99ohjtNcDTJ6ks/gZ5ykTQDvNZDjIoCxFe3+t06bxsTPY6tAO6uEAw5f6vVFX5H5KLwhrkZCA==
+
+"@next/swc-freebsd-x64@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.1.6.tgz#84a7b2e423a2904afc2edca21c2f1ba6b53fa4c1"
+  integrity sha512-qaEALZeV7to6weSXk3Br80wtFQ7cFTpos/q+m9XVRFggu+8Ib895XhMWdJBzew6aaOcMvYR6KQ6JmHA2/eMzWw==
+
+"@next/swc-linux-arm-gnueabihf@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.1.6.tgz#980eed1f655ff8a72187d8a6ef9e73ac39d20d23"
+  integrity sha512-OybkbC58A1wJ+JrJSOjGDvZzrVEQA4sprJejGqMwiZyLqhr9Eo8FXF0y6HL+m1CPCpPhXEHz/2xKoYsl16kNqw==
+
+"@next/swc-linux-arm64-gnu@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.1.6.tgz#87a71db21cded3f7c63d1d19079845c59813c53d"
+  integrity sha512-yCH+yDr7/4FDuWv6+GiYrPI9kcTAO3y48UmaIbrKy8ZJpi7RehJe3vIBRUmLrLaNDH3rY1rwoHi471NvR5J5NQ==
+
+"@next/swc-linux-arm64-musl@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.1.6.tgz#c5aac8619331b9fd030603bbe2b36052011e11de"
+  integrity sha512-ECagB8LGX25P9Mrmlc7Q/TQBb9rGScxHbv/kLqqIWs2fIXy6Y/EiBBiM72NTwuXUFCNrWR4sjUPSooVBJJ3ESQ==
+
+"@next/swc-linux-x64-gnu@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.1.6.tgz#9513d36d540bbfea575576746736054c31aacdea"
+  integrity sha512-GT5w2mruk90V/I5g6ScuueE7fqj/d8Bui2qxdw6lFxmuTgMeol5rnzAv4uAoVQgClOUO/MULilzlODg9Ib3Y4Q==
+
+"@next/swc-linux-x64-musl@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.1.6.tgz#d61fc6884899f5957251f4ce3f522e34a2c479b7"
+  integrity sha512-keFD6KvwOPzmat4TCnlnuxJCQepPN+8j3Nw876FtULxo8005Y9Ghcl7ACcR8GoiKoddAq8gxNBrpjoxjQRHeAQ==
+
+"@next/swc-win32-arm64-msvc@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.1.6.tgz#fac2077a8ae9768e31444c9ae90807e64117cda7"
+  integrity sha512-OwertslIiGQluFvHyRDzBCIB07qJjqabAmINlXUYt7/sY7Q7QPE8xVi5beBxX/rxTGPIbtyIe3faBE6Z2KywhQ==
+
+"@next/swc-win32-ia32-msvc@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.1.6.tgz#498bc11c91b4c482a625bf4b978f98ae91111e46"
+  integrity sha512-g8zowiuP8FxUR9zslPmlju7qYbs2XBtTLVSxVikPtUDQedhcls39uKYLvOOd1JZg0ehyhopobRoH1q+MHlIN/w==
+
 "@next/swc-win32-x64-msvc@13.1.6":
   version "13.1.6"
   resolved "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.1.6.tgz"
@@ -979,7 +1017,7 @@
     "@nodelib/fs.stat" "2.0.5"
     run-parallel "^1.1.9"
 
-"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5":
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
   version "2.0.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
@@ -1307,7 +1345,7 @@
   resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz"
   integrity sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==
 
-"@swc/helpers@^0.4.2", "@swc/helpers@0.4.14":
+"@swc/helpers@0.4.14", "@swc/helpers@^0.4.2":
   version "0.4.14"
   resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz"
   integrity sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==
@@ -1515,7 +1553,7 @@
   resolved "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz"
   integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==
 
-"@types/node@*", "@types/node@>=12.12.47", "@types/node@>=13.7.0", "@types/node@>=8.1.0", "@types/node@18.13.0":
+"@types/node@*", "@types/node@18.13.0", "@types/node@>=12.12.47", "@types/node@>=13.7.0", "@types/node@>=8.1.0":
   version "18.13.0"
   resolved "https://registry.npmjs.org/@types/node/-/node-18.13.0.tgz"
   integrity sha512-gC3TazRzGoOnoKAhUx+Q0t8S9Tzs74z7m0ipwGpSqQrleP14hKxP4/JUeEQcD3W1/aIpnWl8pHowI7WokuZpXg==
@@ -2175,7 +2213,7 @@ classnames@^2.2.6, classnames@^2.3.0, classnames@^2.5.1:
   resolved "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
 
-client-only@^0.0.1, client-only@0.0.1:
+client-only@0.0.1, client-only@^0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
@@ -2198,15 +2236,6 @@ cliui@^7.0.2:
     strip-ansi "^6.0.0"
     wrap-ansi "^7.0.0"
 
-cliui@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz"
-  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
-  dependencies:
-    string-width "^4.2.0"
-    strip-ansi "^6.0.1"
-    wrap-ansi "^7.0.0"
-
 clone@^2.1.2:
   version "2.1.2"
   resolved "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz"
@@ -2231,16 +2260,16 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
-color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4:
-  version "1.1.4"
-  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
-  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-
 color-name@1.1.3:
   version "1.1.3"
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
+color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
 color-string@^1.9.1:
   version "1.9.1"
   resolved "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz"
@@ -2433,6 +2462,13 @@ date-fns@^2.0.1, date-fns@^2.30.0:
   dependencies:
     "@babel/runtime" "^7.21.0"
 
+debug@4, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
 debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz"
@@ -2440,13 +2476,6 @@ debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@4:
-  version "4.3.4"
-  resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
-  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
-  dependencies:
-    ms "2.1.2"
-
 decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz"
@@ -2616,7 +2645,7 @@ eastasianwidth@^0.2.0:
   resolved "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz"
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
-ecdsa-sig-formatter@^1.0.11, ecdsa-sig-formatter@1.0.11:
+ecdsa-sig-formatter@1.0.11, ecdsa-sig-formatter@^1.0.11:
   version "1.0.11"
   resolved "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz"
   integrity sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==
@@ -3329,6 +3358,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
 function-bind@^1.1.1, function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
@@ -3416,7 +3450,7 @@ get-tsconfig@^4.2.0:
   resolved "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.4.0.tgz"
   integrity sha512-0Gdjo/9+FzsYhXCEFueo2aY1z1tpXrxWZzP7k8ul9qt1U5o8rYJwTJYmaeHdrVosYIVYkOy2iwCJ9FdpocJhPQ==
 
-glob-parent@^5.1.2:
+glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -3430,12 +3464,29 @@ glob-parent@^6.0.2:
   dependencies:
     is-glob "^4.0.3"
 
-glob-parent@~5.1.2:
-  version "5.1.2"
-  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
-  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+glob@7.1.6:
+  version "7.1.6"
+  resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
   dependencies:
-    is-glob "^4.0.1"
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@7.1.7, glob@^7.1.3:
+  version "7.1.7"
+  resolved "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz"
+  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
 
 glob@^10.4.2:
   version "10.4.5"
@@ -3449,18 +3500,6 @@ glob@^10.4.2:
     package-json-from-dist "^1.0.0"
     path-scurry "^1.11.1"
 
-glob@^7.1.3, glob@7.1.7:
-  version "7.1.7"
-  resolved "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz"
-  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
 glob@^8.0.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz"
@@ -3472,18 +3511,6 @@ glob@^8.0.0:
     minimatch "^5.0.1"
     once "^1.3.0"
 
-glob@7.1.6:
-  version "7.1.6"
-  resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz"
-  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
 globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz"
@@ -3777,7 +3804,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@^2.0.3, inherits@~2.0.3, inherits@2:
+inherits@2, inherits@^2.0.3, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -4374,18 +4401,18 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
-lru-cache@^10.2.0:
-  version "10.4.3"
-  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz"
-  integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
-
-lru-cache@^6.0.0, lru-cache@6.0.0:
+lru-cache@6.0.0, lru-cache@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz"
   integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
   dependencies:
     yallist "^4.0.0"
 
+lru-cache@^10.2.0:
+  version "10.4.3"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz"
+  integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
+
 lru-memoizer@^2.2.0:
   version "2.3.0"
   resolved "https://registry.npmjs.org/lru-memoizer/-/lru-memoizer-2.3.0.tgz"
@@ -4456,7 +4483,7 @@ micromatch@^4.0.4, micromatch@^4.0.5:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
-"mime-db@>= 1.43.0 < 2", mime-db@1.52.0:
+mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
   version "1.52.0"
   resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
@@ -4541,7 +4568,7 @@ moment@^2.29.4:
   resolved "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz"
   integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
 
-ms@^2.1.1, ms@2.1.2:
+ms@2.1.2, ms@^2.1.1:
   version "2.1.2"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
@@ -4605,21 +4632,14 @@ node-addon-api@^5.0.0:
   resolved "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.1.0.tgz"
   integrity sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA==
 
-node-fetch@^2.6.1, node-fetch@^2.6.7, node-fetch@2.6.7:
+node-fetch@2.6.7, node-fetch@^2.6.1, node-fetch@^2.6.7:
   version "2.6.7"
   resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz"
   integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
   dependencies:
     whatwg-url "^5.0.0"
 
-node-fetch@^2.6.12:
-  version "2.7.0"
-  resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz"
-  integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
-  dependencies:
-    whatwg-url "^5.0.0"
-
-node-fetch@^2.6.9:
+node-fetch@^2.6.12, node-fetch@^2.6.9:
   version "2.7.0"
   resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz"
   integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
@@ -4975,15 +4995,6 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8, postcss@^8.0.9, postcss@^8.4.21:
-  version "8.4.22"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.22.tgz"
-  integrity sha512-XseknLAfRHzVWjCEtdviapiBtfLdgyzExD50Rg2ePaucEesyh8Wv4VPdW0nbyDa1ydbrAxV19jvMT4+LFmcNUA==
-  dependencies:
-    nanoid "^3.3.6"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
 postcss@8.4.14:
   version "8.4.14"
   resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz"
@@ -4993,6 +5004,15 @@ postcss@8.4.14:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8, postcss@^8.0.9, postcss@^8.4.21:
+  version "8.4.22"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.22.tgz"
+  integrity sha512-XseknLAfRHzVWjCEtdviapiBtfLdgyzExD50Rg2ePaucEesyh8Wv4VPdW0nbyDa1ydbrAxV19jvMT4+LFmcNUA==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
@@ -5026,15 +5046,6 @@ promise-polyfill@^8.3.0:
   resolved "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.3.0.tgz"
   integrity sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg==
 
-prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
-  version "15.8.1"
-  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
-  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
-  dependencies:
-    loose-envify "^1.4.0"
-    object-assign "^4.1.1"
-    react-is "^16.13.1"
-
 prop-types@15.7.2:
   version "15.7.2"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz"
@@ -5044,6 +5055,15 @@ prop-types@15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 proto3-json-serializer@^1.0.0:
   version "1.1.1"
   resolved "https://registry.npmjs.org/proto3-json-serializer/-/proto3-json-serializer-1.1.1.tgz"
@@ -5067,6 +5087,24 @@ protobufjs-cli@1.1.1:
     tmp "^0.2.1"
     uglify-js "^3.7.7"
 
+protobufjs@7.2.4:
+  version "7.2.4"
+  resolved "https://registry.npmjs.org/protobufjs/-/protobufjs-7.2.4.tgz"
+  integrity sha512-AT+RJgD2sH8phPmCf7OUZR8xGdcJRga4+1cOaXJ64hvcSkVhNcRHOwIxUatPH15+nj59WAGTDv3LSGZPEQbJaQ==
+  dependencies:
+    "@protobufjs/aspromise" "^1.1.2"
+    "@protobufjs/base64" "^1.1.2"
+    "@protobufjs/codegen" "^2.0.4"
+    "@protobufjs/eventemitter" "^1.1.0"
+    "@protobufjs/fetch" "^1.1.0"
+    "@protobufjs/float" "^1.0.2"
+    "@protobufjs/inquire" "^1.1.0"
+    "@protobufjs/path" "^1.1.2"
+    "@protobufjs/pool" "^1.1.0"
+    "@protobufjs/utf8" "^1.1.0"
+    "@types/node" ">=13.7.0"
+    long "^5.0.0"
+
 protobufjs@^6.11.3:
   version "6.11.3"
   resolved "https://registry.npmjs.org/protobufjs/-/protobufjs-6.11.3.tgz"
@@ -5122,24 +5160,6 @@ protobufjs@^7.2.5:
     "@types/node" ">=13.7.0"
     long "^5.0.0"
 
-protobufjs@7.2.4:
-  version "7.2.4"
-  resolved "https://registry.npmjs.org/protobufjs/-/protobufjs-7.2.4.tgz"
-  integrity sha512-AT+RJgD2sH8phPmCf7OUZR8xGdcJRga4+1cOaXJ64hvcSkVhNcRHOwIxUatPH15+nj59WAGTDv3LSGZPEQbJaQ==
-  dependencies:
-    "@protobufjs/aspromise" "^1.1.2"
-    "@protobufjs/base64" "^1.1.2"
-    "@protobufjs/codegen" "^2.0.4"
-    "@protobufjs/eventemitter" "^1.1.0"
-    "@protobufjs/fetch" "^1.1.0"
-    "@protobufjs/float" "^1.0.2"
-    "@protobufjs/inquire" "^1.1.0"
-    "@protobufjs/path" "^1.1.2"
-    "@protobufjs/pool" "^1.1.0"
-    "@protobufjs/utf8" "^1.1.0"
-    "@types/node" ">=13.7.0"
-    long "^5.0.0"
-
 proxy-from-env@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz"
@@ -5543,7 +5563,7 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
-safe-buffer@^5.0.1, safe-buffer@>=5.1.0, safe-buffer@~5.2.0:
+safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -5726,30 +5746,7 @@ stream-shift@^1.0.2:
   resolved "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.3.tgz"
   integrity sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==
 
-string_decoder@^1.1.1:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz"
-  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
-  dependencies:
-    safe-buffer "~5.2.0"
-
-string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
-  dependencies:
-    safe-buffer "~5.1.0"
-
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -5799,14 +5796,21 @@ string.prototype.trimstart@^1.0.6:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+string_decoder@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
   dependencies:
-    ansi-regex "^5.0.1"
+    safe-buffer "~5.2.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+  dependencies:
+    safe-buffer "~5.1.0"
+
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -6183,7 +6187,7 @@ use-isomorphic-layout-effect@^1.1.2:
   resolved "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz"
   integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
 
-use-sync-external-store@^1.2.0, use-sync-external-store@1.2.0:
+use-sync-external-store@1.2.0, use-sync-external-store@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
@@ -6331,7 +6335,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -6349,15 +6353,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz"
@@ -6410,11 +6405,6 @@ yargs-parser@^20.2.2:
   resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz"
   integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
 
-yargs-parser@^21.1.1:
-  version "21.1.1"
-  resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz"
-  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
-
 yargs@^15.3.1:
   version "15.4.1"
   resolved "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz"
@@ -6445,19 +6435,6 @@ yargs@^16.2.0:
     y18n "^5.0.5"
     yargs-parser "^20.2.2"
 
-yargs@^17.7.2:
-  version "17.7.2"
-  resolved "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz"
-  integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
-  dependencies:
-    cliui "^8.0.1"
-    escalade "^3.1.1"
-    get-caller-file "^2.0.5"
-    require-directory "^2.1.1"
-    string-width "^4.2.3"
-    y18n "^5.0.5"
-    yargs-parser "^21.1.1"
-
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"

From 0fc2df1070be13d801b6687530f46816050d5d2b Mon Sep 17 00:00:00 2001
From: Joao Ramos <joaomframos.1@gmail.com>
Date: Wed, 7 Aug 2024 10:03:17 +0100
Subject: [PATCH 09/14] Added permission to codes

---
 src/interfaces/permissions.ts            |  5 +-
 src/pages/(admin)/BatchCodeGenerator.tsx | 29 ++++++---
 src/pages/(admin)/CodeGenerator.tsx      | 83 ++++++++++++------------
 src/pages/(admin)/Lists/CodeList.tsx     | 11 +++-
 src/pages/(admin)/Lists/index.tsx        | 33 ++++++----
 src/pages/settings.tsx                   |  3 +-
 6 files changed, 97 insertions(+), 67 deletions(-)

diff --git a/src/interfaces/permissions.ts b/src/interfaces/permissions.ts
index 29efc1b7..808564b6 100644
--- a/src/interfaces/permissions.ts
+++ b/src/interfaces/permissions.ts
@@ -27,6 +27,7 @@ export const permissions = [
   "viewCountryManager",
   "viewAdmin",
   "viewGroup",
+  "viewCodes",
   // edit data
   "editStudent",
   "editTeacher",
@@ -41,8 +42,10 @@ export const permissions = [
   "deleteCountryManager",
   "deleteAdmin",
   "deleteGroup",
-  // create pages
+  "deleteCodes",
+  // create options
   "createGroup",
+  "createCodes"
 ] as const;
 
 export type PermissionType = (typeof permissions)[keyof typeof permissions];
diff --git a/src/pages/(admin)/BatchCodeGenerator.tsx b/src/pages/(admin)/BatchCodeGenerator.tsx
index 7a0d5f52..2ff2369a 100644
--- a/src/pages/(admin)/BatchCodeGenerator.tsx
+++ b/src/pages/(admin)/BatchCodeGenerator.tsx
@@ -297,7 +297,12 @@ export default function BatchCodeGenerator({ user }: { user: User }) {
           {filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
         </Button>
         {user &&
-          checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
+          checkAccess(user, [
+            "developer",
+            "admin",
+            "corporate",
+            "mastercorporate",
+          ]) && (
             <>
               <div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
                 <label className="text-mti-gray-dim text-base font-normal">
@@ -352,14 +357,20 @@ export default function BatchCodeGenerator({ user }: { user: User }) {
               ))}
           </select>
         )}
-        <Button
-          onClick={generateAndInvite}
-          disabled={
-            infos.length === 0 || (isExpiryDateEnabled ? !expiryDate : false)
-          }
-        >
-          Generate & Send
-        </Button>
+        {checkAccess(
+          user,
+          ["developer", "admin", "corporate", "mastercorporate"],
+          "createCodes"
+        ) && (
+          <Button
+            onClick={generateAndInvite}
+            disabled={
+              infos.length === 0 || (isExpiryDateEnabled ? !expiryDate : false)
+            }
+          >
+            Generate & Send
+          </Button>
+        )}
       </div>
     </>
   );
diff --git a/src/pages/(admin)/CodeGenerator.tsx b/src/pages/(admin)/CodeGenerator.tsx
index 30c5007a..c34c78fa 100644
--- a/src/pages/(admin)/CodeGenerator.tsx
+++ b/src/pages/(admin)/CodeGenerator.tsx
@@ -130,47 +130,48 @@ export default function CodeGenerator({ user }: { user: User }) {
             ))}
         </select>
       )}
-      {user &&
-        checkAccess(user, ["developer", "admin", "corporate"]) && (
-          <>
-            <div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
-              <label className="text-mti-gray-dim text-base font-normal">
-                Expiry Date
-              </label>
-              <Checkbox
-                isChecked={isExpiryDateEnabled}
-                onChange={setIsExpiryDateEnabled}
-                disabled={!!user.subscriptionExpirationDate}
-              >
-                Enabled
-              </Checkbox>
-            </div>
-            {isExpiryDateEnabled && (
-              <ReactDatePicker
-                className={clsx(
-                  "flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
-                  "hover:border-mti-purple tooltip",
-                  "transition duration-300 ease-in-out"
-                )}
-                filterDate={(date) =>
-                  moment(date).isAfter(new Date()) &&
-                  (user.subscriptionExpirationDate
-                    ? moment(date).isBefore(user.subscriptionExpirationDate)
-                    : true)
-                }
-                dateFormat="dd/MM/yyyy"
-                selected={expiryDate}
-                onChange={(date) => setExpiryDate(date)}
-              />
-            )}
-          </>
-        )}
-      <Button
-        onClick={() => generateCode(type)}
-        disabled={isExpiryDateEnabled ? !expiryDate : false}
-      >
-        Generate
-      </Button>
+      {user && checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
+        <>
+          <div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
+            <label className="text-mti-gray-dim text-base font-normal">
+              Expiry Date
+            </label>
+            <Checkbox
+              isChecked={isExpiryDateEnabled}
+              onChange={setIsExpiryDateEnabled}
+              disabled={!!user.subscriptionExpirationDate}
+            >
+              Enabled
+            </Checkbox>
+          </div>
+          {isExpiryDateEnabled && (
+            <ReactDatePicker
+              className={clsx(
+                "flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
+                "hover:border-mti-purple tooltip",
+                "transition duration-300 ease-in-out"
+              )}
+              filterDate={(date) =>
+                moment(date).isAfter(new Date()) &&
+                (user.subscriptionExpirationDate
+                  ? moment(date).isBefore(user.subscriptionExpirationDate)
+                  : true)
+              }
+              dateFormat="dd/MM/yyyy"
+              selected={expiryDate}
+              onChange={(date) => setExpiryDate(date)}
+            />
+          )}
+        </>
+      )}
+      {checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"], 'createCodes') && (
+        <Button
+          onClick={() => generateCode(type)}
+          disabled={isExpiryDateEnabled ? !expiryDate : false}
+        >
+          Generate
+        </Button>
+      )}
       <label className="font-normal text-base text-mti-gray-dim">
         Generated Code:
       </label>
diff --git a/src/pages/(admin)/Lists/CodeList.tsx b/src/pages/(admin)/Lists/CodeList.tsx
index 7ac20b3a..cc8d0f79 100644
--- a/src/pages/(admin)/Lists/CodeList.tsx
+++ b/src/pages/(admin)/Lists/CodeList.tsx
@@ -19,6 +19,7 @@ import { BsTrash } from "react-icons/bs";
 import { toast } from "react-toastify";
 import ReactDatePicker from "react-datepicker";
 import clsx from "clsx";
+import { checkAccess } from "@/utils/permissions";
 
 const columnHelper = createColumnHelper<Code>();
 
@@ -147,6 +148,12 @@ export default function CodeList({ user }: { user: User }) {
       .finally(reload);
   };
 
+  const allowedToDelete = checkAccess(
+    user,
+    ["developer", "admin", "corporate", "mastercorporate"],
+    "deleteCodes"
+  );
+
   const defaultColumns = [
     columnHelper.accessor("code", {
       id: "codeCheckbox",
@@ -209,7 +216,7 @@ export default function CodeList({ user }: { user: User }) {
       cell: ({ row }: { row: { original: Code } }) => {
         return (
           <div className="flex gap-4">
-            {!row.original.userId && (
+            {allowedToDelete && !row.original.userId && (
               <div
                 data-tip="Delete"
                 className="cursor-pointer tooltip"
@@ -308,6 +315,7 @@ export default function CodeList({ user }: { user: User }) {
             }}
           />
         </div>
+        {allowedToDelete && (
         <div className="flex gap-4 items-center">
           <span>{selectedCodes.length} code(s) selected</span>
           <Button
@@ -320,6 +328,7 @@ export default function CodeList({ user }: { user: User }) {
             Delete
           </Button>
         </div>
+        )}
       </div>
       <table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
         <thead>
diff --git a/src/pages/(admin)/Lists/index.tsx b/src/pages/(admin)/Lists/index.tsx
index 0f8568eb..ddbad194 100644
--- a/src/pages/(admin)/Lists/index.tsx
+++ b/src/pages/(admin)/Lists/index.tsx
@@ -7,6 +7,7 @@ import ExamList from "./ExamList";
 import GroupList from "./GroupList";
 import PackageList from "./PackageList";
 import UserList from "./UserList";
+import { checkAccess } from "@/utils/permissions";
 
 export default function Lists({ user }: { user: User }) {
   return (
@@ -20,13 +21,13 @@ export default function Lists({ user }: { user: User }) {
               "transition duration-300 ease-in-out",
               selected
                 ? "bg-white shadow"
-                : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+                : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
             )
           }
         >
           User List
         </Tab>
-        {user?.type === "developer" && (
+        {checkAccess(user, ["developer"]) && (
           <Tab
             className={({ selected }) =>
               clsx(
@@ -35,7 +36,7 @@ export default function Lists({ user }: { user: User }) {
                 "transition duration-300 ease-in-out",
                 selected
                   ? "bg-white shadow"
-                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
               )
             }
           >
@@ -50,13 +51,13 @@ export default function Lists({ user }: { user: User }) {
               "transition duration-300 ease-in-out",
               selected
                 ? "bg-white shadow"
-                : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+                : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
             )
           }
         >
           Group List
         </Tab>
-        {user && ["developer", "admin", "corporate"].includes(user.type) && (
+        {checkAccess(user, ["developer", "admin", "corporate"]) && (
           <Tab
             className={({ selected }) =>
               clsx(
@@ -65,14 +66,14 @@ export default function Lists({ user }: { user: User }) {
                 "transition duration-300 ease-in-out",
                 selected
                   ? "bg-white shadow"
-                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
               )
             }
           >
             Code List
           </Tab>
         )}
-        {user && ["developer", "admin"].includes(user.type) && (
+        {checkAccess(user, ["developer", "admin"]) && (
           <Tab
             className={({ selected }) =>
               clsx(
@@ -81,14 +82,14 @@ export default function Lists({ user }: { user: User }) {
                 "transition duration-300 ease-in-out",
                 selected
                   ? "bg-white shadow"
-                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
               )
             }
           >
             Package List
           </Tab>
         )}
-        {user && ["developer", "admin"].includes(user.type) && (
+        {checkAccess(user, ["developer", "admin"]) && (
           <Tab
             className={({ selected }) =>
               clsx(
@@ -97,7 +98,7 @@ export default function Lists({ user }: { user: User }) {
                 "transition duration-300 ease-in-out",
                 selected
                   ? "bg-white shadow"
-                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
               )
             }
           >
@@ -109,7 +110,7 @@ export default function Lists({ user }: { user: User }) {
         <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
           <UserList user={user} />
         </Tab.Panel>
-        {user?.type === "developer" && (
+        {checkAccess(user, ["developer"]) && (
           <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
             <ExamList user={user} />
           </Tab.Panel>
@@ -117,17 +118,21 @@ export default function Lists({ user }: { user: User }) {
         <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
           <GroupList user={user} />
         </Tab.Panel>
-        {user && ["developer", "admin", "corporate"].includes(user.type) && (
+        {checkAccess(
+          user,
+          ["developer", "admin", "corporate", "mastercorporate"],
+          "viewCodes"
+        ) && (
           <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
             <CodeList user={user} />
           </Tab.Panel>
         )}
-        {user && ["developer", "admin"].includes(user.type) && (
+        {checkAccess(user, ["developer", "admin"]) && (
           <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
             <PackageList user={user} />
           </Tab.Panel>
         )}
-        {user && ["developer", "admin"].includes(user.type) && (
+        {checkAccess(user, ["developer", "admin"]) && (
           <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
             <DiscountList user={user} />
           </Tab.Panel>
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index 51bc0ea9..17e673a9 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -14,6 +14,7 @@ import BatchCodeGenerator from "./(admin)/BatchCodeGenerator";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import ExamGenerator from "./(admin)/ExamGenerator";
 import BatchCreateUser from "./(admin)/BatchCreateUser";
+import { checkAccess, getTypesOfUser } from "@/utils/permissions";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -60,7 +61,7 @@ export default function Admin() {
 					<section className="w-full flex -md:flex-col -xl:gap-2 gap-8 justify-between">
 						<ExamLoader />
 					  <BatchCreateUser user={user} />
-						{user.type !== "teacher" && (
+						{checkAccess(user, getTypesOfUser(["teacher"]), 'viewCodes') && (
 							<>
 							  <CodeGenerator user={user} />
 							  <BatchCodeGenerator user={user} />

From 21e58e3b9c4642e535949d42568f95aab226d4a9 Mon Sep 17 00:00:00 2001
From: Carlos Mesquita <carlos.mesquita@ecrop.dev>
Date: Wed, 7 Aug 2024 13:04:42 +0100
Subject: [PATCH 10/14] Tooltips for assessment criteria on Writing and
 Speaking

---
 .../Solutions/InteractiveSpeaking.tsx         | 51 ++++++++++--------
 src/components/Solutions/Speaking.tsx         | 49 ++++++++++-------
 src/components/Solutions/Writing.tsx          | 52 +++++++++++--------
 3 files changed, 90 insertions(+), 62 deletions(-)

diff --git a/src/components/Solutions/InteractiveSpeaking.tsx b/src/components/Solutions/InteractiveSpeaking.tsx
index 6038e1a9..ad906c0f 100644
--- a/src/components/Solutions/InteractiveSpeaking.tsx
+++ b/src/components/Solutions/InteractiveSpeaking.tsx
@@ -1,17 +1,17 @@
 /* eslint-disable @next/next/no-img-element */
-import {InteractiveSpeakingExercise} from "@/interfaces/exam";
-import {CommonProps} from ".";
-import {useEffect, useState} from "react";
+import { InteractiveSpeakingExercise } from "@/interfaces/exam";
+import { CommonProps } from ".";
+import { useEffect, useState } from "react";
 import Button from "../Low/Button";
 import dynamic from "next/dynamic";
 import axios from "axios";
-import {speakingReverseMarking} from "@/utils/score";
-import {Tab} from "@headlessui/react";
+import { speakingReverseMarking } from "@/utils/score";
+import { Tab } from "@headlessui/react";
 import clsx from "clsx";
 import Modal from "../Modal";
-import ReactDiffViewer, {DiffMethod} from "react-diff-viewer";
+import ReactDiffViewer, { DiffMethod } from "react-diff-viewer";
 
-const Waveform = dynamic(() => import("../Waveform"), {ssr: false});
+const Waveform = dynamic(() => import("../Waveform"), { ssr: false });
 
 export default function InteractiveSpeaking({
 	id,
@@ -26,13 +26,20 @@ export default function InteractiveSpeaking({
 	const [solutionsURL, setSolutionsURL] = useState<string[]>([]);
 	const [diffNumber, setDiffNumber] = useState(0);
 
+	const tooltips: { [key: string]: string } = {
+		"Grammatical Range and Accuracy": "Assesses the variety and correctness of grammatical structures used. A higher score indicates a wide range of complex and accurate grammar; a lower score suggests the need for more basic grammar practice.",
+		"Fluency and Coherence": "Evaluates smoothness and logical flow of speech. A higher score means natural, effortless speech and clear idea progression; a lower score indicates frequent pauses and difficulty in maintaining coherence.",
+		"Pronunciation": "Measures clarity and accuracy of spoken words. A higher score reflects clear, well-articulated speech with correct intonation; a lower score shows challenges in being understood.",
+		"Lexical Resource": "Looks at the range and appropriateness of vocabulary. A higher score demonstrates a rich and precise vocabulary; a lower score suggests limited vocabulary usage and appropriateness.",
+	};
+
 	useEffect(() => {
 		if (userSolutions && userSolutions.length > 0 && userSolutions[0].solution) {
-			Promise.all(userSolutions[0].solution.map((x) => axios.post(`/api/speaking`, {path: x.answer}, {responseType: "arraybuffer"}))).then(
+			Promise.all(userSolutions[0].solution.map((x) => axios.post(`/api/speaking`, { path: x.answer }, { responseType: "arraybuffer" }))).then(
 				(values) => {
 					setSolutionsURL(
-						values.map(({data}) => {
-							const blob = new Blob([data], {type: "audio/wav"});
+						values.map(({ data }) => {
+							const blob = new Blob([data], { type: "audio/wav" });
 							const url = URL.createObjectURL(blob);
 
 							return url;
@@ -64,13 +71,13 @@ export default function InteractiveSpeaking({
 											fontFamily: '"Open Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif',
 											padding: "32px 28px",
 										},
-										marker: {display: "none"},
-										diffRemoved: {padding: "32px 28px"},
-										diffAdded: {padding: "32px 28px"},
+										marker: { display: "none" },
+										diffRemoved: { padding: "32px 28px" },
+										diffAdded: { padding: "32px 28px" },
 
-										wordRemoved: {padding: "0px", display: "initial"},
-										wordAdded: {padding: "0px", display: "initial"},
-										wordDiff: {padding: "0px", display: "initial"},
+										wordRemoved: { padding: "0px", display: "initial" },
+										wordAdded: { padding: "0px", display: "initial" },
+										wordDiff: { padding: "0px", display: "initial" },
 									}}
 									oldValue={userSolutions[0].evaluation[`transcript_${diffNumber}`]?.replaceAll("\\n", "\n")}
 									newValue={userSolutions[0].evaluation[`fixed_text_${diffNumber}`]?.replaceAll("\\n", "\n")}
@@ -132,12 +139,14 @@ export default function InteractiveSpeaking({
 					{userSolutions && userSolutions.length > 0 && userSolutions[0].evaluation && typeof userSolutions[0].evaluation !== "string" && (
 						<div className="flex flex-col gap-4 w-full">
 							<div className="flex gap-4 px-1">
-								{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => {
+								{Object.keys(userSolutions[0].evaluation!.task_response).map((key, index) => {
 									const taskResponse = userSolutions[0].evaluation!.task_response[key];
 									const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
 
 									return (
-										<div className={clsx("bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2")} key={key}>
+										<div className={clsx("bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2 tooltip tooltip-bottom",
+											index === 0 && "tooltip-right"
+										)} key={key} data-tip={tooltips[key] || "No additional information available"}>
 											{key}: Level {grade}
 										</div>
 									);
@@ -148,7 +157,7 @@ export default function InteractiveSpeaking({
 								<Tab.Group>
 									<Tab.List className="flex space-x-1 rounded-xl bg-ielts-speaking/20 p-1">
 										<Tab
-											className={({selected}) =>
+											className={({ selected }) =>
 												clsx(
 													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
 													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
@@ -159,7 +168,7 @@ export default function InteractiveSpeaking({
 											General Feedback
 										</Tab>
 										<Tab
-											className={({selected}) =>
+											className={({ selected }) =>
 												clsx(
 													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
 													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
@@ -232,7 +241,7 @@ export default function InteractiveSpeaking({
 						onBack({
 							exercise: id,
 							solutions: userSolutions,
-							score: {total: 100, missing: 0, correct: speakingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0},
+							score: { total: 100, missing: 0, correct: speakingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0 },
 							type,
 						})
 					}
diff --git a/src/components/Solutions/Speaking.tsx b/src/components/Solutions/Speaking.tsx
index 90501894..82c76f46 100644
--- a/src/components/Solutions/Speaking.tsx
+++ b/src/components/Solutions/Speaking.tsx
@@ -1,20 +1,20 @@
 /* eslint-disable @next/next/no-img-element */
-import {SpeakingExercise} from "@/interfaces/exam";
-import {CommonProps} from ".";
-import {Fragment, useEffect, useState} from "react";
+import { SpeakingExercise } from "@/interfaces/exam";
+import { CommonProps } from ".";
+import { Fragment, useEffect, useState } from "react";
 import Button from "../Low/Button";
 import dynamic from "next/dynamic";
 import axios from "axios";
-import {speakingReverseMarking} from "@/utils/score";
-import {Tab} from "@headlessui/react";
+import { speakingReverseMarking } from "@/utils/score";
+import { Tab } from "@headlessui/react";
 import clsx from "clsx";
 import Modal from "../Modal";
-import {BsQuestionCircleFill} from "react-icons/bs";
-import ReactDiffViewer, {DiffMethod} from "react-diff-viewer";
+import { BsQuestionCircleFill } from "react-icons/bs";
+import ReactDiffViewer, { DiffMethod } from "react-diff-viewer";
 
-const Waveform = dynamic(() => import("../Waveform"), {ssr: false});
+const Waveform = dynamic(() => import("../Waveform"), { ssr: false });
 
-export default function Speaking({id, type, title, video_url, text, prompts, userSolutions, onNext, onBack}: SpeakingExercise & CommonProps) {
+export default function Speaking({ id, type, title, video_url, text, prompts, userSolutions, onNext, onBack }: SpeakingExercise & CommonProps) {
 	const [solutionURL, setSolutionURL] = useState<string>();
 	const [showDiff, setShowDiff] = useState(false);
 
@@ -23,8 +23,8 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
 			const solution = userSolutions[0].solution;
 
 			if (solution.startsWith("https://")) return setSolutionURL(solution);
-			axios.post(`/api/speaking`, {path: userSolutions[0].solution}, {responseType: "arraybuffer"}).then(({data}) => {
-				const blob = new Blob([data], {type: "audio/wav"});
+			axios.post(`/api/speaking`, { path: userSolutions[0].solution }, { responseType: "arraybuffer" }).then(({ data }) => {
+				const blob = new Blob([data], { type: "audio/wav" });
 				const url = URL.createObjectURL(blob);
 
 				setSolutionURL(url);
@@ -32,6 +32,13 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
 		}
 	}, [userSolutions]);
 
+	const tooltips: { [key: string]: string } = {
+		"Grammatical Range and Accuracy": "Assesses the variety and correctness of grammatical structures used. A higher score indicates a wide range of complex and accurate grammar; a lower score suggests the need for more basic grammar practice.",
+		"Fluency and Coherence": "Evaluates smoothness and logical flow of speech. A higher score means natural, effortless speech and clear idea progression; a lower score indicates frequent pauses and difficulty in maintaining coherence.",
+		"Pronunciation": "Measures clarity and accuracy of spoken words. A higher score reflects clear, well-articulated speech with correct intonation; a lower score shows challenges in being understood.",
+		"Lexical Resource": "Looks at the range and appropriateness of vocabulary. A higher score demonstrates a rich and precise vocabulary; a lower score suggests limited vocabulary usage and appropriateness.",
+	};
+
 	return (
 		<>
 			<Modal title="Correction" isOpen={showDiff} onClose={() => setShowDiff(false)}>
@@ -51,13 +58,13 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
 											fontFamily: '"Open Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif',
 											padding: "32px 28px",
 										},
-										marker: {display: "none"},
-										diffRemoved: {padding: "32px 28px"},
-										diffAdded: {padding: "32px 28px"},
+										marker: { display: "none" },
+										diffRemoved: { padding: "32px 28px" },
+										diffAdded: { padding: "32px 28px" },
 
-										wordRemoved: {padding: "0px", display: "initial"},
-										wordAdded: {padding: "0px", display: "initial"},
-										wordDiff: {padding: "0px", display: "initial"},
+										wordRemoved: { padding: "0px", display: "initial" },
+										wordAdded: { padding: "0px", display: "initial" },
+										wordDiff: { padding: "0px", display: "initial" },
 									}}
 									oldValue={userSolutions[0].evaluation.transcript_1.replaceAll("\\n", "\n")}
 									newValue={userSolutions[0].evaluation.fixed_text_1.replaceAll("\\n", "\n")}
@@ -126,12 +133,14 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
 					{userSolutions && userSolutions.length > 0 && userSolutions[0].evaluation && typeof userSolutions[0].evaluation !== "string" && (
 						<div className="flex flex-col gap-4 w-full">
 							<div className="flex gap-4 px-1">
-								{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => {
+								{Object.keys(userSolutions[0].evaluation!.task_response).map((key, index) => {
 									const taskResponse = userSolutions[0].evaluation!.task_response[key];
 									const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
 
 									return (
-										<div className={clsx("bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2")} key={key}>
+										<div className={clsx("bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2 tooltip tooltip-bottom",
+											index === 0 && "tooltip-right"
+										)} key={key} data-tip={tooltips[key] || "No additional information available"}>
 											{key}: Level {grade}
 										</div>
 									);
@@ -142,7 +151,7 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
 								<Tab.Group>
 									<Tab.List className="flex space-x-1 rounded-xl bg-ielts-speaking/20 p-1">
 										<Tab
-											className={({selected}) =>
+											className={({ selected }) =>
 												clsx(
 													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
 													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
diff --git a/src/components/Solutions/Writing.tsx b/src/components/Solutions/Writing.tsx
index 37eea2cf..6f853da1 100644
--- a/src/components/Solutions/Writing.tsx
+++ b/src/components/Solutions/Writing.tsx
@@ -1,23 +1,30 @@
 /* eslint-disable @next/next/no-img-element */
-import {WritingExercise} from "@/interfaces/exam";
-import {CommonProps} from ".";
-import {Fragment, useEffect, useState} from "react";
+import { WritingExercise } from "@/interfaces/exam";
+import { CommonProps } from ".";
+import { Fragment, useEffect, useState } from "react";
 import Button from "../Low/Button";
-import {Dialog, Tab, Transition} from "@headlessui/react";
-import {writingReverseMarking} from "@/utils/score";
+import { Dialog, Tab, Transition } from "@headlessui/react";
+import { writingReverseMarking } from "@/utils/score";
 import clsx from "clsx";
-import ReactDiffViewer, {DiffMethod} from "react-diff-viewer";
+import ReactDiffViewer, { DiffMethod } from "react-diff-viewer";
 import useUser from "@/hooks/useUser";
 import AIDetection from "../AIDetection";
 
-export default function Writing({id, type, prompt, attachment, userSolutions, onNext, onBack}: WritingExercise & CommonProps) {
+export default function Writing({ id, type, prompt, attachment, userSolutions, onNext, onBack }: WritingExercise & CommonProps) {
 	const [isModalOpen, setIsModalOpen] = useState(false);
 	const [showDiff, setShowDiff] = useState(false);
 
-	const {user} = useUser();
+	const { user } = useUser();
 
 	const aiEval = userSolutions && userSolutions.length > 0 ? userSolutions[0].evaluation?.ai_detection : undefined;
 
+	const tooltips: { [key: string]: string } = {
+		"Lexical Resource": "Assesses the diversity and accuracy of vocabulary used. A higher score indicates varied and precise word choice; a lower score points to limited vocabulary and inaccuracies.",
+		"Task Achievement": "Evaluates how well the task requirements are fulfilled. A higher score means all parts of the task are addressed thoroughly; a lower score shows incomplete or inadequate task response.",
+		"Coherence and Cohesion": "Measures logical organization and flow of writing. A higher score reflects well-structured and connected ideas; a lower score indicates disorganized writing and poor linkage between ideas.",
+		"Grammatical Range and Accuracy": "Looks at the range and precision of grammatical structures. A higher score shows varied and accurate grammar use; a lower score suggests frequent errors and limited range.",
+	};
+
 	return (
 		<>
 			{attachment && (
@@ -92,13 +99,13 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 													fontFamily: '"Open Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif',
 													padding: "32px 28px",
 												},
-												marker: {display: "none"},
-												diffRemoved: {padding: "32px 28px"},
-												diffAdded: {padding: "32px 28px"},
+												marker: { display: "none" },
+												diffRemoved: { padding: "32px 28px" },
+												diffAdded: { padding: "32px 28px" },
 
-												wordRemoved: {padding: "0px", display: "initial"},
-												wordAdded: {padding: "0px", display: "initial"},
-												wordDiff: {padding: "0px", display: "initial"},
+												wordRemoved: { padding: "0px", display: "initial" },
+												wordAdded: { padding: "0px", display: "initial" },
+												wordDiff: { padding: "0px", display: "initial" },
 											}}
 											oldValue={userSolutions[0].solution.replaceAll("\\n", "\n")}
 											newValue={userSolutions[0].evaluation!.fixed_text!.replaceAll("\\n", "\n")}
@@ -123,12 +130,15 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 					{userSolutions && userSolutions.length > 0 && userSolutions[0].evaluation && typeof userSolutions[0].evaluation !== "string" && (
 						<div className="flex flex-col gap-4 w-full">
 							<div className="flex gap-4 px-1">
-								{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => {
+								{Object.keys(userSolutions[0].evaluation!.task_response).map((key, index) => {
 									const taskResponse = userSolutions[0].evaluation!.task_response[key];
 									const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
 
 									return (
-										<div className={clsx("bg-ielts-writing text-ielts-writing-light rounded-xl px-4 py-2")} key={key}>
+										<div className={clsx(
+											"bg-ielts-writing text-ielts-writing-light rounded-xl px-4 py-2 tooltip tooltip-bottom",
+											index === 0 && "tooltip-right"
+										)} key={key} data-tip={tooltips[key] || "No additional information available"}>
 											{key}: Level {grade}
 										</div>
 									);
@@ -138,7 +148,7 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 								<Tab.Group>
 									<Tab.List className="flex space-x-1 rounded-xl bg-ielts-writing/20 p-1">
 										<Tab
-											className={({selected}) =>
+											className={({ selected }) =>
 												clsx(
 													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/80",
 													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing focus:outline-none focus:ring-2",
@@ -149,7 +159,7 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 											General Feedback
 										</Tab>
 										<Tab
-											className={({selected}) =>
+											className={({ selected }) =>
 												clsx(
 													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/80",
 													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing focus:outline-none focus:ring-2",
@@ -160,7 +170,7 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 											Evaluation
 										</Tab>
 										<Tab
-											className={({selected}) =>
+											className={({ selected }) =>
 												clsx(
 													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/80",
 													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing focus:outline-none focus:ring-2",
@@ -172,7 +182,7 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 										</Tab>
 										{aiEval && user?.type !== "student" && (
 											<Tab
-												className={({selected}) =>
+												className={({ selected }) =>
 													clsx(
 														"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/80",
 														"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing focus:outline-none focus:ring-2",
@@ -238,7 +248,7 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 						onBack({
 							exercise: id,
 							solutions: userSolutions,
-							score: {total: 100, missing: 0, correct: writingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0},
+							score: { total: 100, missing: 0, correct: writingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0 },
 							type,
 						})
 					}

From 6e71ee7cb012b7438e172cd8d47778ea21e688e2 Mon Sep 17 00:00:00 2001
From: Joao Ramos <joaomframos.1@gmail.com>
Date: Thu, 8 Aug 2024 09:17:33 +0100
Subject: [PATCH 11/14] ENCOA-81: Fixed issue with the users that each role
 could create

---
 src/pages/(admin)/BatchCodeGenerator.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/(admin)/BatchCodeGenerator.tsx b/src/pages/(admin)/BatchCodeGenerator.tsx
index 2ff2369a..3e55e6da 100644
--- a/src/pages/(admin)/BatchCodeGenerator.tsx
+++ b/src/pages/(admin)/BatchCodeGenerator.tsx
@@ -16,7 +16,7 @@ import { useFilePicker } from "use-file-picker";
 import readXlsxFile from "read-excel-file";
 import Modal from "@/components/Modal";
 import { BsFileEarmarkEaselFill, BsQuestionCircleFill } from "react-icons/bs";
-import { checkAccess } from "@/utils/permissions";
+import { checkAccess, getTypesOfUser } from "@/utils/permissions";
 import { PermissionType } from "@/interfaces/permissions";
 const EMAIL_REGEX = new RegExp(
   /^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/
@@ -348,7 +348,7 @@ export default function BatchCodeGenerator({ user }: { user: User }) {
             {Object.keys(USER_TYPE_LABELS)
               .filter((x) => {
                 const { list, perm } = USER_TYPE_PERMISSIONS[x as Type];
-                return checkAccess(user, list, perm);
+                return checkAccess(user, getTypesOfUser(list), perm);
               })
               .map((type) => (
                 <option key={type} value={type}>

From 58300e32ffeb4fac117afe79fc4284ac72c5ef92 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Mon, 12 Aug 2024 19:35:11 +0100
Subject: [PATCH 12/14] Solved an issue where, for developers, because of the
 amount of permissions, the cookie was too big, so I separated the permissions
 logic into a hook

---
 src/components/High/TicketDisplay.tsx    |  384 +++---
 src/components/Sidebar.tsx               |   24 +-
 src/components/UserCard.tsx              | 1422 +++++++++------------
 src/dashboards/Teacher.tsx               |  793 +++++-------
 src/hooks/usePermissions.tsx             |   29 +
 src/interfaces/permissions.ts            |   97 +-
 src/pages/(admin)/BatchCodeGenerator.tsx |  595 ++++-----
 src/pages/(admin)/CodeGenerator.tsx      |  322 +++--
 src/pages/(admin)/Lists/CodeList.tsx     |  596 ++++-----
 src/pages/(admin)/Lists/GroupList.tsx    |  727 +++++------
 src/pages/(admin)/Lists/UserList.tsx     | 1493 +++++++++-------------
 src/pages/(admin)/Lists/index.tsx        |  249 ++--
 src/pages/api/permissions/[id].ts        |   54 +-
 src/pages/api/tickets/index.ts           |    5 +-
 src/pages/api/user.ts                    |  216 ++--
 src/pages/settings.tsx                   |   12 +-
 src/utils/permissions.ts                 |   67 +-
 17 files changed, 3060 insertions(+), 4025 deletions(-)
 create mode 100644 src/hooks/usePermissions.tsx

diff --git a/src/components/High/TicketDisplay.tsx b/src/components/High/TicketDisplay.tsx
index 582cae5d..4c5bccb7 100644
--- a/src/components/High/TicketDisplay.tsx
+++ b/src/components/High/TicketDisplay.tsx
@@ -1,255 +1,179 @@
 import useUsers from "@/hooks/useUsers";
-import {
-  Ticket,
-  TicketStatus,
-  TicketStatusLabel,
-  TicketType,
-  TicketTypeLabel,
-} from "@/interfaces/ticket";
-import { User } from "@/interfaces/user";
-import { USER_TYPE_LABELS } from "@/resources/user";
+import {Ticket, TicketStatus, TicketStatusLabel, TicketType, TicketTypeLabel} from "@/interfaces/ticket";
+import {User} from "@/interfaces/user";
+import {USER_TYPE_LABELS} from "@/resources/user";
 import axios from "axios";
 import moment from "moment";
-import { useState } from "react";
-import { toast } from "react-toastify";
+import {useState} from "react";
+import {toast} from "react-toastify";
 import ShortUniqueId from "short-unique-id";
 import Button from "../Low/Button";
 import Input from "../Low/Input";
 import Select from "../Low/Select";
-import { checkAccess } from "@/utils/permissions";
+import {checkAccess} from "@/utils/permissions";
 
 interface Props {
-  user: User;
-  ticket: Ticket;
-  onClose: () => void;
+	user: User;
+	ticket: Ticket;
+	onClose: () => void;
 }
 
-export default function TicketDisplay({ user, ticket, onClose }: Props) {
-  const [subject] = useState(ticket.subject);
-  const [type, setType] = useState<TicketType>(ticket.type);
-  const [description] = useState(ticket.description);
-  const [reporter] = useState(ticket.reporter);
-  const [reportedFrom] = useState(ticket.reportedFrom);
-  const [status, setStatus] = useState(ticket.status);
-  const [assignedTo, setAssignedTo] = useState<string | null>(
-    ticket.assignedTo || null,
-  );
-  const [isLoading, setIsLoading] = useState(false);
+export default function TicketDisplay({user, ticket, onClose}: Props) {
+	const [subject] = useState(ticket.subject);
+	const [type, setType] = useState<TicketType>(ticket.type);
+	const [description] = useState(ticket.description);
+	const [reporter] = useState(ticket.reporter);
+	const [reportedFrom] = useState(ticket.reportedFrom);
+	const [status, setStatus] = useState(ticket.status);
+	const [assignedTo, setAssignedTo] = useState<string | null>(ticket.assignedTo || null);
+	const [isLoading, setIsLoading] = useState(false);
 
-  const { users } = useUsers();
+	const {users} = useUsers();
 
-  const submit = () => {
-    if (!type)
-      return toast.error("Please choose a type!", { toastId: "missing-type" });
+	const submit = () => {
+		if (!type) return toast.error("Please choose a type!", {toastId: "missing-type"});
 
-    setIsLoading(true);
-    axios
-      .patch(`/api/tickets/${ticket.id}`, {
-        subject,
-        type,
-        description,
-        reporter,
-        reportedFrom,
-        status,
-        assignedTo,
-      })
-      .then(() => {
-        toast.success(`The ticket has been updated!`, { toastId: "submitted" });
-        onClose();
-      })
-      .catch((e) => {
-        console.error(e);
-        toast.error("Something went wrong, please try again later!", {
-          toastId: "error",
-        });
-      })
-      .finally(() => setIsLoading(false));
-  };
+		setIsLoading(true);
+		axios
+			.patch(`/api/tickets/${ticket.id}`, {
+				subject,
+				type,
+				description,
+				reporter,
+				reportedFrom,
+				status,
+				assignedTo,
+			})
+			.then(() => {
+				toast.success(`The ticket has been updated!`, {toastId: "submitted"});
+				onClose();
+			})
+			.catch((e) => {
+				console.error(e);
+				toast.error("Something went wrong, please try again later!", {
+					toastId: "error",
+				});
+			})
+			.finally(() => setIsLoading(false));
+	};
 
-  const del = () => {
-    if (!confirm("Are you sure you want to delete this ticket?")) return;
+	const del = () => {
+		if (!confirm("Are you sure you want to delete this ticket?")) return;
 
-    setIsLoading(true);
-    axios
-      .delete(`/api/tickets/${ticket.id}`)
-      .then(() => {
-        toast.success(`The ticket has been deleted!`, { toastId: "submitted" });
-        onClose();
-      })
-      .catch((e) => {
-        console.error(e);
-        toast.error("Something went wrong, please try again later!", {
-          toastId: "error",
-        });
-      })
-      .finally(() => setIsLoading(false));
-  };
+		setIsLoading(true);
+		axios
+			.delete(`/api/tickets/${ticket.id}`)
+			.then(() => {
+				toast.success(`The ticket has been deleted!`, {toastId: "submitted"});
+				onClose();
+			})
+			.catch((e) => {
+				console.error(e);
+				toast.error("Something went wrong, please try again later!", {
+					toastId: "error",
+				});
+			})
+			.finally(() => setIsLoading(false));
+	};
 
-  return (
-    <form className="flex flex-col gap-4 pt-8">
-      <Input
-        label="Subject"
-        type="text"
-        name="subject"
-        placeholder="Subject..."
-        value={subject}
-        onChange={(e) => null}
-        disabled
-      />
+	return (
+		<form className="flex flex-col gap-4 pt-8">
+			<Input label="Subject" type="text" name="subject" placeholder="Subject..." value={subject} onChange={(e) => null} disabled />
 
-      <div className="-md:flex-col flex w-full items-center gap-4">
-        <div className="flex w-full flex-col gap-3">
-          <label className="text-mti-gray-dim text-base font-normal">
-            Status
-          </label>
-          <Select
-            options={Object.keys(TicketStatusLabel).map((x) => ({
-              value: x,
-              label: TicketStatusLabel[x as keyof typeof TicketStatusLabel],
-            }))}
-            value={{ value: status, label: TicketStatusLabel[status] }}
-            onChange={(value) =>
-              setStatus((value?.value as TicketStatus) ?? undefined)
-            }
-            placeholder="Status..."
-          />
-        </div>
-        <div className="flex w-full flex-col gap-3">
-          <label className="text-mti-gray-dim text-base font-normal">
-            Type
-          </label>
-          <Select
-            options={Object.keys(TicketTypeLabel).map((x) => ({
-              value: x,
-              label: TicketTypeLabel[x as keyof typeof TicketTypeLabel],
-            }))}
-            value={{ value: type, label: TicketTypeLabel[type] }}
-            onChange={(value) => setType(value!.value as TicketType)}
-            placeholder="Type..."
-          />
-        </div>
-      </div>
+			<div className="-md:flex-col flex w-full items-center gap-4">
+				<div className="flex w-full flex-col gap-3">
+					<label className="text-mti-gray-dim text-base font-normal">Status</label>
+					<Select
+						options={Object.keys(TicketStatusLabel).map((x) => ({
+							value: x,
+							label: TicketStatusLabel[x as keyof typeof TicketStatusLabel],
+						}))}
+						value={{value: status, label: TicketStatusLabel[status]}}
+						onChange={(value) => setStatus((value?.value as TicketStatus) ?? undefined)}
+						placeholder="Status..."
+					/>
+				</div>
+				<div className="flex w-full flex-col gap-3">
+					<label className="text-mti-gray-dim text-base font-normal">Type</label>
+					<Select
+						options={Object.keys(TicketTypeLabel).map((x) => ({
+							value: x,
+							label: TicketTypeLabel[x as keyof typeof TicketTypeLabel],
+						}))}
+						value={{value: type, label: TicketTypeLabel[type]}}
+						onChange={(value) => setType(value!.value as TicketType)}
+						placeholder="Type..."
+					/>
+				</div>
+			</div>
 
-      <div className="flex w-full flex-col gap-3">
-        <label className="text-mti-gray-dim text-base font-normal">
-          Assignee
-        </label>
-        <Select
-          options={[
-            { value: "me", label: "Assign to me" },
-            ...users
-              .filter((x) => checkAccess(x, ["admin", "developer", "agent"]))
-              .map((u) => ({
-                value: u.id,
-                label: `${u.name} - ${u.email}`,
-              })),
-          ]}
-          disabled={checkAccess(user, ["agent"])}
-          value={
-            assignedTo
-              ? {
-                  value: assignedTo,
-                  label: `${users.find((u) => u.id === assignedTo)?.name} - ${users.find((u) => u.id === assignedTo)?.email}`,
-                }
-              : null
-          }
-          onChange={(value) =>
-            value
-              ? setAssignedTo(value.value === "me" ? user.id : value.value)
-              : setAssignedTo(null)
-          }
-          placeholder="Assignee..."
-          isClearable
-        />
-      </div>
+			<div className="flex w-full flex-col gap-3">
+				<label className="text-mti-gray-dim text-base font-normal">Assignee</label>
+				<Select
+					options={[
+						{value: "me", label: "Assign to me"},
+						...users
+							.filter((x) => checkAccess(x, ["admin", "developer", "agent"]))
+							.map((u) => ({
+								value: u.id,
+								label: `${u.name} - ${u.email}`,
+							})),
+					]}
+					disabled={checkAccess(user, ["agent"])}
+					value={
+						assignedTo
+							? {
+									value: assignedTo,
+									label: `${users.find((u) => u.id === assignedTo)?.name} - ${users.find((u) => u.id === assignedTo)?.email}`,
+							  }
+							: null
+					}
+					onChange={(value) => (value ? setAssignedTo(value.value === "me" ? user.id : value.value) : setAssignedTo(null))}
+					placeholder="Assignee..."
+					isClearable
+				/>
+			</div>
 
-      <div className="-md:flex-col flex w-full items-center gap-4">
-        <Input
-          label="Reported From"
-          type="text"
-          name="reportedFrom"
-          onChange={() => null}
-          value={reportedFrom}
-          disabled
-        />
-        <Input
-          label="Date"
-          type="text"
-          name="date"
-          onChange={() => null}
-          value={moment(ticket.date).format("DD/MM/YYYY - HH:mm")}
-          disabled
-        />
-      </div>
+			<div className="-md:flex-col flex w-full items-center gap-4">
+				<Input label="Reported From" type="text" name="reportedFrom" onChange={() => null} value={reportedFrom} disabled />
+				<Input label="Date" type="text" name="date" onChange={() => null} value={moment(ticket.date).format("DD/MM/YYYY - HH:mm")} disabled />
+			</div>
 
-      <div className="-md:flex-col flex w-full items-center gap-4">
-        <Input
-          label="Reporter's Name"
-          type="text"
-          name="reporter"
-          onChange={() => null}
-          value={reporter.name}
-          disabled
-        />
-        <Input
-          label="Reporter's E-mail"
-          type="text"
-          name="reporter"
-          onChange={() => null}
-          value={reporter.email}
-          disabled
-        />
-        <Input
-          label="Reporter's Type"
-          type="text"
-          name="reporterType"
-          onChange={() => null}
-          value={USER_TYPE_LABELS[reporter.type]}
-          disabled
-        />
-      </div>
+			<div className="-md:flex-col flex w-full items-center gap-4">
+				<Input label="Reporter's Name" type="text" name="reporter" onChange={() => null} value={reporter.name} disabled />
+				<Input label="Reporter's E-mail" type="text" name="reporter" onChange={() => null} value={reporter.email} disabled />
+				<Input
+					label="Reporter's Type"
+					type="text"
+					name="reporterType"
+					onChange={() => null}
+					value={USER_TYPE_LABELS[reporter.type]}
+					disabled
+				/>
+			</div>
 
-      <textarea
-        className="input border-mti-gray-platinum h-full min-h-[300px] w-full cursor-text rounded-3xl border bg-white px-7 py-8"
-        placeholder="Write your ticket's description here..."
-        contentEditable={false}
-        value={description}
-        spellCheck
-      />
+			<textarea
+				className="input border-mti-gray-platinum h-full min-h-[300px] w-full cursor-text rounded-3xl border bg-white px-7 py-8"
+				placeholder="Write your ticket's description here..."
+				contentEditable={false}
+				value={description}
+				spellCheck
+			/>
 
-      <div className="-md:flex-col-reverse mt-2 flex w-full items-center justify-between gap-4">
-        <Button
-          type="button"
-          color="red"
-          className="w-full md:max-w-[200px]"
-          variant="outline"
-          onClick={del}
-          isLoading={isLoading}
-        >
-          Delete
-        </Button>
+			<div className="-md:flex-col-reverse mt-2 flex w-full items-center justify-between gap-4">
+				<Button type="button" color="red" className="w-full md:max-w-[200px]" variant="outline" onClick={del} isLoading={isLoading}>
+					Delete
+				</Button>
 
-        <div className="-md:flex-col-reverse flex w-full items-center justify-end gap-4">
-          <Button
-            type="button"
-            color="red"
-            className="w-full md:max-w-[200px]"
-            variant="outline"
-            onClick={onClose}
-            isLoading={isLoading}
-          >
-            Cancel
-          </Button>
-          <Button
-            type="button"
-            className="w-full md:max-w-[200px]"
-            isLoading={isLoading}
-            onClick={submit}
-          >
-            Update
-          </Button>
-        </div>
-      </div>
-    </form>
-  );
+				<div className="-md:flex-col-reverse flex w-full items-center justify-end gap-4">
+					<Button type="button" color="red" className="w-full md:max-w-[200px]" variant="outline" onClick={onClose} isLoading={isLoading}>
+						Cancel
+					</Button>
+					<Button type="button" className="w-full md:max-w-[200px]" isLoading={isLoading} onClick={submit}>
+						Update
+					</Button>
+				</div>
+			</div>
+		</form>
+	);
 }
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 47eded75..d69feebf 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -14,7 +14,7 @@ import {
 	BsClipboardData,
 	BsFileLock,
 } from "react-icons/bs";
-import { CiDumbbell } from "react-icons/ci";
+import {CiDumbbell} from "react-icons/ci";
 import {RiLogoutBoxFill} from "react-icons/ri";
 import {SlPencil} from "react-icons/sl";
 import {FaAward} from "react-icons/fa";
@@ -28,6 +28,7 @@ import usePreferencesStore from "@/stores/preferencesStore";
 import {User} from "@/interfaces/user";
 import useTicketsListener from "@/hooks/useTicketsListener";
 import {checkAccess, getTypesOfUser} from "@/utils/permissions";
+import usePermissions from "@/hooks/usePermissions";
 interface Props {
 	path: string;
 	navDisabled?: boolean;
@@ -80,6 +81,7 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 	const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [state.isSidebarMinimized, state.toggleSidebarMinimized]);
 
 	const {totalAssignedTickets} = useTicketsListener(user.id);
+	const {permissions} = usePermissions(user.id);
 
 	const logout = async () => {
 		axios.post("/api/logout").finally(() => {
@@ -98,22 +100,22 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 			)}>
 			<div className="-xl:hidden flex-col gap-3 xl:flex">
 				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={isMinimized} />
-				{checkAccess(user, ["student", "teacher", "developer"], "viewExams") && (
+				{checkAccess(user, ["student", "teacher", "developer"], permissions, "viewExams") && (
 					<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized={isMinimized} />
 				)}
-				{checkAccess(user, ["student", "teacher", "developer"], "viewExercises") && (
+				{checkAccess(user, ["student", "teacher", "developer"], permissions, "viewExercises") && (
 					<Nav disabled={disableNavigation} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" isMinimized={isMinimized} />
 				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), "viewStats") && (
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewStats") && (
 					<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
 				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), "viewRecords") && (
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
 					<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />
 				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), "viewRecords") && (
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
 					<Nav disabled={disableNavigation} Icon={CiDumbbell} label="Training" path={path} keyPath="/training" isMinimized={isMinimized} />
 				)}
-				{checkAccess(user, ["admin", "developer", "agent", "corporate", "mastercorporate"], "viewPaymentRecords") && (
+				{checkAccess(user, ["admin", "developer", "agent", "corporate", "mastercorporate"], permissions, "viewPaymentRecords") && (
 					<Nav
 						disabled={disableNavigation}
 						Icon={BsCurrencyDollar}
@@ -133,7 +135,7 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 						isMinimized={isMinimized}
 					/>
 				)}
-				{checkAccess(user, ["admin", "developer", "agent"], "viewTickets") && (
+				{checkAccess(user, ["admin", "developer", "agent"], permissions, "viewTickets") && (
 					<Nav
 						disabled={disableNavigation}
 						Icon={BsClipboardData}
@@ -169,13 +171,13 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={true} />
 				<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized={true} />
 				<Nav disabled={disableNavigation} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" isMinimized={true} />
-				{checkAccess(user, getTypesOfUser(["agent"]), "viewStats") && (
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewStats") && (
 					<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={true} />
 				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), "viewRecords") && (
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
 					<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={true} />
 				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), "viewRecords") && (
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
 					<Nav disabled={disableNavigation} Icon={CiDumbbell} label="Training" path={path} keyPath="/training" isMinimized={true} />
 				)}
 				{checkAccess(user, getTypesOfUser(["student"])) && (
diff --git a/src/components/UserCard.tsx b/src/components/UserCard.tsx
index 49dad039..23a79fea 100644
--- a/src/components/UserCard.tsx
+++ b/src/components/UserCard.tsx
@@ -1,27 +1,15 @@
 import useStats from "@/hooks/useStats";
-import {
-  CorporateInformation,
-  CorporateUser,
-  EMPLOYMENT_STATUS,
-  User,
-  Type,
-} from "@/interfaces/user";
-import { groupBySession, averageScore } from "@/utils/stats";
-import { RadioGroup } from "@headlessui/react";
+import {CorporateInformation, CorporateUser, EMPLOYMENT_STATUS, User, Type} from "@/interfaces/user";
+import {groupBySession, averageScore} from "@/utils/stats";
+import {RadioGroup} from "@headlessui/react";
 import axios from "axios";
 import clsx from "clsx";
 import moment from "moment";
-import { Divider } from "primereact/divider";
-import { useEffect, useState } from "react";
+import {Divider} from "primereact/divider";
+import {useEffect, useState} from "react";
 import ReactDatePicker from "react-datepicker";
-import {
-  BsFileEarmarkText,
-  BsPencil,
-  BsPerson,
-  BsPersonAdd,
-  BsStar,
-} from "react-icons/bs";
-import { toast } from "react-toastify";
+import {BsFileEarmarkText, BsPencil, BsPerson, BsPersonAdd, BsStar} from "react-icons/bs";
+import {toast} from "react-toastify";
 import Button from "./Low/Button";
 import Checkbox from "./Low/Checkbox";
 import CountrySelect from "./Low/CountrySelect";
@@ -29,818 +17,650 @@ import Input from "./Low/Input";
 import ProfileSummary from "./ProfileSummary";
 import Select from "react-select";
 import useUsers from "@/hooks/useUsers";
-import { USER_TYPE_LABELS } from "@/resources/user";
-import { CURRENCIES } from "@/resources/paypal";
+import {USER_TYPE_LABELS} from "@/resources/user";
+import {CURRENCIES} from "@/resources/paypal";
 import useCodes from "@/hooks/useCodes";
-import { checkAccess, getTypesOfUser } from "@/utils/permissions";
-import { PERMISSIONS } from "@/constants/userPermissions";
-import { PermissionType } from "@/interfaces/permissions";
+import {checkAccess, getTypesOfUser} from "@/utils/permissions";
+import {PERMISSIONS} from "@/constants/userPermissions";
+import {PermissionType} from "@/interfaces/permissions";
+import usePermissions from "@/hooks/usePermissions";
 
 const expirationDateColor = (date: Date) => {
-  const momentDate = moment(date);
-  const today = moment(new Date());
+	const momentDate = moment(date);
+	const today = moment(new Date());
 
-  if (today.add(1, "days").isAfter(momentDate))
-    return "!bg-mti-red-ultralight border-mti-red-light";
-  if (today.add(3, "days").isAfter(momentDate))
-    return "!bg-mti-rose-ultralight border-mti-rose-light";
-  if (today.add(7, "days").isAfter(momentDate))
-    return "!bg-mti-orange-ultralight border-mti-orange-light";
+	if (today.add(1, "days").isAfter(momentDate)) return "!bg-mti-red-ultralight border-mti-red-light";
+	if (today.add(3, "days").isAfter(momentDate)) return "!bg-mti-rose-ultralight border-mti-rose-light";
+	if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
 };
 
 interface Props {
-  user: User;
-  loggedInUser: User;
-  onClose: (reload?: boolean) => void;
-  onViewStudents?: () => void;
-  onViewTeachers?: () => void;
-  onViewCorporate?: () => void;
-  disabled?: boolean;
-  disabledFields?: {
-    countryManager?: boolean;
-  };
+	user: User;
+	loggedInUser: User;
+	onClose: (reload?: boolean) => void;
+	onViewStudents?: () => void;
+	onViewTeachers?: () => void;
+	onViewCorporate?: () => void;
+	disabled?: boolean;
+	disabledFields?: {
+		countryManager?: boolean;
+	};
 }
 
 const USER_STATUS_OPTIONS = [
-  {
-    value: "active",
-    label: "Active",
-  },
-  {
-    value: "disabled",
-    label: "Disabled",
-  },
-  {
-    value: "paymentDue",
-    label: "Payment Due",
-  },
+	{
+		value: "active",
+		label: "Active",
+	},
+	{
+		value: "disabled",
+		label: "Disabled",
+	},
+	{
+		value: "paymentDue",
+		label: "Payment Due",
+	},
 ];
 
 const USER_TYPE_OPTIONS = Object.keys(USER_TYPE_LABELS).map((type) => ({
-  value: type,
-  label: USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS],
+	value: type,
+	label: USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS],
 }));
 
-const CURRENCIES_OPTIONS = CURRENCIES.map(({ label, currency }) => ({
-  value: currency,
-  label,
+const CURRENCIES_OPTIONS = CURRENCIES.map(({label, currency}) => ({
+	value: currency,
+	label,
 }));
 
-const UserCard = ({
-  user,
-  loggedInUser,
-  onClose,
-  onViewStudents,
-  onViewTeachers,
-  onViewCorporate,
-  disabled = false,
-  disabledFields = {},
-}: Props) => {
-  const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(
-    user.subscriptionExpirationDate
-  );
-  const [type, setType] = useState(user.type);
-  const [status, setStatus] = useState(user.status);
-  const [referralAgentLabel, setReferralAgentLabel] = useState<string>();
-  const [position, setPosition] = useState<string | undefined>(
-    user.type === "corporate"
-      ? user.demographicInformation?.position
-      : undefined
-  );
-  const [passport_id, setPassportID] = useState<string | undefined>(
-    user.type === "student"
-      ? user.demographicInformation?.passport_id
-      : undefined
-  );
+const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers, onViewCorporate, disabled = false, disabledFields = {}}: Props) => {
+	const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
+	const [type, setType] = useState(user.type);
+	const [status, setStatus] = useState(user.status);
+	const [referralAgentLabel, setReferralAgentLabel] = useState<string>();
+	const [position, setPosition] = useState<string | undefined>(user.type === "corporate" ? user.demographicInformation?.position : undefined);
+	const [passport_id, setPassportID] = useState<string | undefined>(user.type === "student" ? user.demographicInformation?.passport_id : undefined);
 
-  const [referralAgent, setReferralAgent] = useState(
-    user.type === "corporate"
-      ? user.corporateInformation?.referralAgent
-      : undefined
-  );
-  const [companyName, setCompanyName] = useState(
-    user.type === "corporate"
-      ? user.corporateInformation?.companyInformation.name
-      : user.type === "agent"
-      ? user.agentInformation?.companyName
-      : undefined
-  );
-  const [arabName, setArabName] = useState(
-    user.type === "agent" ? user.agentInformation?.companyArabName : undefined
-  );
-  const [commercialRegistration, setCommercialRegistration] = useState(
-    user.type === "agent"
-      ? user.agentInformation?.commercialRegistration
-      : undefined
-  );
-  const [userAmount, setUserAmount] = useState(
-    user.type === "corporate"
-      ? user.corporateInformation?.companyInformation.userAmount
-      : undefined
-  );
-  const [paymentValue, setPaymentValue] = useState(
-    user.type === "corporate"
-      ? user.corporateInformation?.payment?.value
-      : undefined
-  );
-  const [paymentCurrency, setPaymentCurrency] = useState(
-    user.type === "corporate"
-      ? user.corporateInformation?.payment?.currency
-      : "EUR"
-  );
-  const [monthlyDuration, setMonthlyDuration] = useState(
-    user.type === "corporate"
-      ? user.corporateInformation?.monthlyDuration
-      : undefined
-  );
-  const [commissionValue, setCommission] = useState(
-    user.type === "corporate"
-      ? user.corporateInformation?.payment?.commission
-      : undefined
-  );
-  const { stats } = useStats(user.id);
-  const { users } = useUsers();
-  const { codes } = useCodes(user.id);
+	const [referralAgent, setReferralAgent] = useState(user.type === "corporate" ? user.corporateInformation?.referralAgent : undefined);
+	const [companyName, setCompanyName] = useState(
+		user.type === "corporate"
+			? user.corporateInformation?.companyInformation.name
+			: user.type === "agent"
+			? user.agentInformation?.companyName
+			: undefined,
+	);
+	const [arabName, setArabName] = useState(user.type === "agent" ? user.agentInformation?.companyArabName : undefined);
+	const [commercialRegistration, setCommercialRegistration] = useState(
+		user.type === "agent" ? user.agentInformation?.commercialRegistration : undefined,
+	);
+	const [userAmount, setUserAmount] = useState(user.type === "corporate" ? user.corporateInformation?.companyInformation.userAmount : undefined);
+	const [paymentValue, setPaymentValue] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.value : undefined);
+	const [paymentCurrency, setPaymentCurrency] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.currency : "EUR");
+	const [monthlyDuration, setMonthlyDuration] = useState(user.type === "corporate" ? user.corporateInformation?.monthlyDuration : undefined);
+	const [commissionValue, setCommission] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.commission : undefined);
+	const {stats} = useStats(user.id);
+	const {users} = useUsers();
+	const {codes} = useCodes(user.id);
+	const {permissions} = usePermissions(loggedInUser.id);
 
-  useEffect(() => {
-    if (users && users.length > 0) {
-      if (!referralAgent) {
-        setReferralAgentLabel("No manager");
-        return;
-      }
+	useEffect(() => {
+		if (users && users.length > 0) {
+			if (!referralAgent) {
+				setReferralAgentLabel("No manager");
+				return;
+			}
 
-      const agent = users.find((x) => x.id === referralAgent);
-      setReferralAgentLabel(`${agent?.name} - ${agent?.email}`);
-    }
-  }, [users, referralAgent]);
+			const agent = users.find((x) => x.id === referralAgent);
+			setReferralAgentLabel(`${agent?.name} - ${agent?.email}`);
+		}
+	}, [users, referralAgent]);
 
-  const updateUser = () => {
-    if (user.type === "corporate" && (!paymentValue || paymentValue < 0))
-      return toast.error(
-        "Please set a price for the user's package before updating!"
-      );
-    if (!confirm(`Are you sure you want to update ${user.name}'s account?`))
-      return;
+	const updateUser = () => {
+		if (user.type === "corporate" && (!paymentValue || paymentValue < 0))
+			return toast.error("Please set a price for the user's package before updating!");
+		if (!confirm(`Are you sure you want to update ${user.name}'s account?`)) return;
 
-    axios
-      .post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
-        ...user,
-        subscriptionExpirationDate: expiryDate,
-        type,
-        status,
-        agentInformation:
-          type === "agent"
-            ? {
-                companyName,
-                commercialRegistration,
-                arabName,
-              }
-            : undefined,
-        corporateInformation:
-          type === "corporate"
-            ? {
-                referralAgent,
-                monthlyDuration,
-                companyInformation: {
-                  name: companyName,
-                  userAmount,
-                },
-                payment: {
-                  value: paymentValue,
-                  currency: paymentCurrency,
-                  ...(referralAgent === ""
-                    ? {}
-                    : { commission: commissionValue }),
-                },
-              }
-            : undefined,
-      })
-      .then(() => {
-        toast.success("User updated successfully!");
-        onClose(true);
-      })
-      .catch(() => {
-        toast.error("Something went wrong!", { toastId: "update-error" });
-      });
-  };
+		axios
+			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
+				...user,
+				subscriptionExpirationDate: expiryDate,
+				type,
+				status,
+				agentInformation:
+					type === "agent"
+						? {
+								companyName,
+								commercialRegistration,
+								arabName,
+						  }
+						: undefined,
+				corporateInformation:
+					type === "corporate"
+						? {
+								referralAgent,
+								monthlyDuration,
+								companyInformation: {
+									name: companyName,
+									userAmount,
+								},
+								payment: {
+									value: paymentValue,
+									currency: paymentCurrency,
+									...(referralAgent === "" ? {} : {commission: commissionValue}),
+								},
+						  }
+						: undefined,
+			})
+			.then(() => {
+				toast.success("User updated successfully!");
+				onClose(true);
+			})
+			.catch(() => {
+				toast.error("Something went wrong!", {toastId: "update-error"});
+			});
+	};
 
-  const generalProfileItems = [
-    {
-      icon: (
-        <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
-      ),
-      value: Object.keys(groupBySession(stats)).length,
-      label: "Exams",
-    },
-    {
-      icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-      value: stats.length,
-      label: "Modules",
-    },
-    {
-      icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-      value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
-      label: "Average Score",
-    },
-  ];
+	const generalProfileItems = [
+		{
+			icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+			value: Object.keys(groupBySession(stats)).length,
+			label: "Exams",
+		},
+		{
+			icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+			value: stats.length,
+			label: "Modules",
+		},
+		{
+			icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+			value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
+			label: "Average Score",
+		},
+	];
 
-  const corporateProfileItems =
-    user.type === "corporate"
-      ? [
-          {
-            icon: (
-              <BsPerson className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
-            ),
-            value: codes.length,
-            label: "Users Used",
-          },
-          {
-            icon: (
-              <BsPersonAdd className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
-            ),
-            value: user.corporateInformation.companyInformation.userAmount,
-            label: "Number of Users",
-          },
-        ]
-      : [];
+	const corporateProfileItems =
+		user.type === "corporate"
+			? [
+					{
+						icon: <BsPerson className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+						value: codes.length,
+						label: "Users Used",
+					},
+					{
+						icon: <BsPersonAdd className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+						value: user.corporateInformation.companyInformation.userAmount,
+						label: "Number of Users",
+					},
+			  ]
+			: [];
 
-  const updateUserPermission = PERMISSIONS.updateUser[user.type] as {
-    list: Type[];
-    perm: PermissionType;
-  };
-  return (
-    <>
-      <ProfileSummary
-        user={user}
-        items={
-          user.type === "corporate"
-            ? corporateProfileItems
-            : generalProfileItems
-        }
-      />
+	const updateUserPermission = PERMISSIONS.updateUser[user.type] as {
+		list: Type[];
+		perm: PermissionType;
+	};
+	return (
+		<>
+			<ProfileSummary user={user} items={user.type === "corporate" ? corporateProfileItems : generalProfileItems} />
 
-      {user.type === "agent" && (
-        <>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full">
-            <Input
-              label="Company Name (Arabic)"
-              type="text"
-              name="arabName"
-              onChange={setArabName}
-              placeholder="Enter their company's name in arabic"
-              defaultValue={arabName}
-              required
-              disabled={disabled}
-            />
-            <Input
-              label="Company Name (English)"
-              type="text"
-              name="companyName"
-              onChange={setCompanyName}
-              placeholder="Enter their company's name in english"
-              defaultValue={companyName}
-              required
-              disabled={disabled}
-            />
-            <Input
-              label="Commercial Registration"
-              type="text"
-              name="commercialRegistration"
-              onChange={setCommercialRegistration}
-              placeholder="Enter commercial registration"
-              defaultValue={commercialRegistration}
-              required
-              disabled={disabled}
-            />
-          </div>
-          <Divider className="w-full !m-0" />
-        </>
-      )}
-      {user.type === "corporate" && (
-        <>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
-            <Input
-              label="Corporate Name"
-              type="text"
-              name="companyName"
-              onChange={setCompanyName}
-              placeholder="Enter corporate name"
-              defaultValue={companyName}
-              disabled={disabled}
-            />
-            <Input
-              label="Number of Users"
-              type="number"
-              name="userAmount"
-              onChange={(e) => setUserAmount(e ? parseInt(e) : undefined)}
-              placeholder="Enter number of users"
-              defaultValue={userAmount}
-              disabled={disabled}
-            />
-            <Input
-              label="Monthly Duration"
-              type="number"
-              name="monthlyDuration"
-              onChange={(e) => setMonthlyDuration(e ? parseInt(e) : undefined)}
-              placeholder="Enter monthly duration"
-              defaultValue={monthlyDuration}
-              disabled={disabled}
-            />
-            <div className="flex flex-col gap-3 w-full lg:col-span-3">
-              <label className="font-normal text-base text-mti-gray-dim">
-                Pricing
-              </label>
-              <div className="w-full grid grid-cols-6 gap-2">
-                <Input
-                  name="paymentValue"
-                  onChange={(e) => setPaymentValue(e ? parseInt(e) : undefined)}
-                  type="number"
-                  defaultValue={paymentValue || 0}
-                  className="col-span-3"
-                  disabled={disabled}
-                />
-                <Select
-                  className={clsx(
-                    "px-4 py-4 col-span-3 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
-                    disabled &&
-                      "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed"
-                  )}
-                  options={CURRENCIES_OPTIONS}
-                  value={CURRENCIES_OPTIONS.find(
-                    (c) => c.value === paymentCurrency
-                  )}
-                  onChange={(value) => setPaymentCurrency(value?.value)}
-                  menuPortalTarget={document?.body}
-                  styles={{
-                    menuPortal: (base) => ({ ...base, zIndex: 9999 }),
-                    control: (styles) => ({
-                      ...styles,
-                      paddingLeft: "4px",
-                      border: "none",
-                      outline: "none",
-                      ":focus": {
-                        outline: "none",
-                      },
-                    }),
-                    option: (styles, state) => ({
-                      ...styles,
-                      backgroundColor: state.isFocused
-                        ? "#D5D9F0"
-                        : state.isSelected
-                        ? "#7872BF"
-                        : "white",
-                      color: state.isFocused ? "black" : styles.color,
-                    }),
-                  }}
-                  isDisabled={disabled}
-                />
-              </div>
-            </div>
-          </div>
-          <div className="flex gap-3 w-full">
-            <div className="flex flex-col gap-3 w-8/12">
-              <label className="font-normal text-base text-mti-gray-dim">
-                Country Manager
-              </label>
-              {referralAgentLabel && (
-                <Select
-                  className={clsx(
-                    "px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
-                    (checkAccess(
-                      loggedInUser,
-                      getTypesOfUser(["developer", "admin"])
-                    ) ||
-                      disabledFields.countryManager) &&
-                      "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed"
-                  )}
-                  options={[
-                    { value: "", label: "No referral" },
-                    ...users
-                      .filter((u) => u.type === "agent")
-                      .map((x) => ({
-                        value: x.id,
-                        label: `${x.name} - ${x.email}`,
-                      })),
-                  ]}
-                  defaultValue={{
-                    value: referralAgent,
-                    label: referralAgentLabel,
-                  }}
-                  menuPortalTarget={document?.body}
-                  onChange={(value) => setReferralAgent(value?.value)}
-                  styles={{
-                    menuPortal: (base) => ({ ...base, zIndex: 9999 }),
-                    control: (styles) => ({
-                      ...styles,
-                      paddingLeft: "4px",
-                      border: "none",
-                      outline: "none",
-                      ":focus": {
-                        outline: "none",
-                      },
-                    }),
-                    option: (styles, state) => ({
-                      ...styles,
-                      backgroundColor: state.isFocused
-                        ? "#D5D9F0"
-                        : state.isSelected
-                        ? "#7872BF"
-                        : "white",
-                      color: state.isFocused ? "black" : styles.color,
-                    }),
-                  }}
-                  // editing country manager should only be available for dev/admin
-                  isDisabled={
-                    checkAccess(
-                      loggedInUser,
-                      getTypesOfUser(["developer", "admin"])
-                    ) || disabledFields.countryManager
-                  }
-                />
-              )}
-            </div>
-            <div className="flex flex-col gap-3 w-4/12">
-              {referralAgent !== "" && loggedInUser.type !== "corporate" ? (
-                <>
-                  <label className="font-normal text-base text-mti-gray-dim">
-                    Commission
-                  </label>
-                  <Input
-                    name="commissionValue"
-                    onChange={(e) => setCommission(e ? parseInt(e) : undefined)}
-                    type="number"
-                    defaultValue={commissionValue || 0}
-                    className="col-span-3"
-                    disabled={disabled || loggedInUser.type === "agent"}
-                  />
-                </>
-              ) : (
-                <div />
-              )}
-            </div>
-          </div>
-          <Divider className="w-full !m-0" />
-        </>
-      )}
-      <section className="flex flex-col gap-4 justify-between">
-        <div className="flex flex-col md:flex-row gap-8 w-full">
-          <Input
-            label="Name"
-            type="text"
-            name="name"
-            onChange={() => null}
-            placeholder="Enter your name"
-            defaultValue={user.name}
-            disabled
-          />
-          <Input
-            label="E-mail Address"
-            type="email"
-            name="email"
-            onChange={() => null}
-            placeholder="Enter email address"
-            defaultValue={user.email}
-            disabled
-          />
-        </div>
+			{user.type === "agent" && (
+				<>
+					<div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full">
+						<Input
+							label="Company Name (Arabic)"
+							type="text"
+							name="arabName"
+							onChange={setArabName}
+							placeholder="Enter their company's name in arabic"
+							defaultValue={arabName}
+							required
+							disabled={disabled}
+						/>
+						<Input
+							label="Company Name (English)"
+							type="text"
+							name="companyName"
+							onChange={setCompanyName}
+							placeholder="Enter their company's name in english"
+							defaultValue={companyName}
+							required
+							disabled={disabled}
+						/>
+						<Input
+							label="Commercial Registration"
+							type="text"
+							name="commercialRegistration"
+							onChange={setCommercialRegistration}
+							placeholder="Enter commercial registration"
+							defaultValue={commercialRegistration}
+							required
+							disabled={disabled}
+						/>
+					</div>
+					<Divider className="w-full !m-0" />
+				</>
+			)}
+			{user.type === "corporate" && (
+				<>
+					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
+						<Input
+							label="Corporate Name"
+							type="text"
+							name="companyName"
+							onChange={setCompanyName}
+							placeholder="Enter corporate name"
+							defaultValue={companyName}
+							disabled={disabled}
+						/>
+						<Input
+							label="Number of Users"
+							type="number"
+							name="userAmount"
+							onChange={(e) => setUserAmount(e ? parseInt(e) : undefined)}
+							placeholder="Enter number of users"
+							defaultValue={userAmount}
+							disabled={disabled}
+						/>
+						<Input
+							label="Monthly Duration"
+							type="number"
+							name="monthlyDuration"
+							onChange={(e) => setMonthlyDuration(e ? parseInt(e) : undefined)}
+							placeholder="Enter monthly duration"
+							defaultValue={monthlyDuration}
+							disabled={disabled}
+						/>
+						<div className="flex flex-col gap-3 w-full lg:col-span-3">
+							<label className="font-normal text-base text-mti-gray-dim">Pricing</label>
+							<div className="w-full grid grid-cols-6 gap-2">
+								<Input
+									name="paymentValue"
+									onChange={(e) => setPaymentValue(e ? parseInt(e) : undefined)}
+									type="number"
+									defaultValue={paymentValue || 0}
+									className="col-span-3"
+									disabled={disabled}
+								/>
+								<Select
+									className={clsx(
+										"px-4 py-4 col-span-3 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
+										disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
+									)}
+									options={CURRENCIES_OPTIONS}
+									value={CURRENCIES_OPTIONS.find((c) => c.value === paymentCurrency)}
+									onChange={(value) => setPaymentCurrency(value?.value)}
+									menuPortalTarget={document?.body}
+									styles={{
+										menuPortal: (base) => ({...base, zIndex: 9999}),
+										control: (styles) => ({
+											...styles,
+											paddingLeft: "4px",
+											border: "none",
+											outline: "none",
+											":focus": {
+												outline: "none",
+											},
+										}),
+										option: (styles, state) => ({
+											...styles,
+											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+											color: state.isFocused ? "black" : styles.color,
+										}),
+									}}
+									isDisabled={disabled}
+								/>
+							</div>
+						</div>
+					</div>
+					<div className="flex gap-3 w-full">
+						<div className="flex flex-col gap-3 w-8/12">
+							<label className="font-normal text-base text-mti-gray-dim">Country Manager</label>
+							{referralAgentLabel && (
+								<Select
+									className={clsx(
+										"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
+										(checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"])) || disabledFields.countryManager) &&
+											"!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
+									)}
+									options={[
+										{value: "", label: "No referral"},
+										...users
+											.filter((u) => u.type === "agent")
+											.map((x) => ({
+												value: x.id,
+												label: `${x.name} - ${x.email}`,
+											})),
+									]}
+									defaultValue={{
+										value: referralAgent,
+										label: referralAgentLabel,
+									}}
+									menuPortalTarget={document?.body}
+									onChange={(value) => setReferralAgent(value?.value)}
+									styles={{
+										menuPortal: (base) => ({...base, zIndex: 9999}),
+										control: (styles) => ({
+											...styles,
+											paddingLeft: "4px",
+											border: "none",
+											outline: "none",
+											":focus": {
+												outline: "none",
+											},
+										}),
+										option: (styles, state) => ({
+											...styles,
+											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+											color: state.isFocused ? "black" : styles.color,
+										}),
+									}}
+									// editing country manager should only be available for dev/admin
+									isDisabled={checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"])) || disabledFields.countryManager}
+								/>
+							)}
+						</div>
+						<div className="flex flex-col gap-3 w-4/12">
+							{referralAgent !== "" && loggedInUser.type !== "corporate" ? (
+								<>
+									<label className="font-normal text-base text-mti-gray-dim">Commission</label>
+									<Input
+										name="commissionValue"
+										onChange={(e) => setCommission(e ? parseInt(e) : undefined)}
+										type="number"
+										defaultValue={commissionValue || 0}
+										className="col-span-3"
+										disabled={disabled || loggedInUser.type === "agent"}
+									/>
+								</>
+							) : (
+								<div />
+							)}
+						</div>
+					</div>
+					<Divider className="w-full !m-0" />
+				</>
+			)}
+			<section className="flex flex-col gap-4 justify-between">
+				<div className="flex flex-col md:flex-row gap-8 w-full">
+					<Input
+						label="Name"
+						type="text"
+						name="name"
+						onChange={() => null}
+						placeholder="Enter your name"
+						defaultValue={user.name}
+						disabled
+					/>
+					<Input
+						label="E-mail Address"
+						type="email"
+						name="email"
+						onChange={() => null}
+						placeholder="Enter email address"
+						defaultValue={user.email}
+						disabled
+					/>
+				</div>
 
-        <div className="flex flex-col md:flex-row gap-8 w-full">
-          <div className="flex flex-col gap-3 w-full">
-            <label className="font-normal text-base text-mti-gray-dim">
-              Country
-            </label>
-            <CountrySelect
-              disabled
-              value={user.demographicInformation?.country}
-            />
-          </div>
-          <Input
-            type="tel"
-            name="phone"
-            label="Phone number"
-            onChange={() => null}
-            placeholder="Enter phone number"
-            defaultValue={user.demographicInformation?.phone}
-            disabled
-          />
-        </div>
+				<div className="flex flex-col md:flex-row gap-8 w-full">
+					<div className="flex flex-col gap-3 w-full">
+						<label className="font-normal text-base text-mti-gray-dim">Country</label>
+						<CountrySelect disabled value={user.demographicInformation?.country} />
+					</div>
+					<Input
+						type="tel"
+						name="phone"
+						label="Phone number"
+						onChange={() => null}
+						placeholder="Enter phone number"
+						defaultValue={user.demographicInformation?.phone}
+						disabled
+					/>
+				</div>
 
-        {user.type === "student" && (
-          <Input
-            type="text"
-            name="passport_id"
-            label="Passport/National ID"
-            onChange={() => null}
-            placeholder="Enter National ID or Passport number"
-            value={
-              user.type === "student"
-                ? user.demographicInformation?.passport_id
-                : undefined
-            }
-            disabled
-            required
-          />
-        )}
+				{user.type === "student" && (
+					<Input
+						type="text"
+						name="passport_id"
+						label="Passport/National ID"
+						onChange={() => null}
+						placeholder="Enter National ID or Passport number"
+						value={user.type === "student" ? user.demographicInformation?.passport_id : undefined}
+						disabled
+						required
+					/>
+				)}
 
-        <div className="flex flex-col md:flex-row gap-8 w-full">
-          {user.type !== "corporate" && user.type !== "mastercorporate" && (
-            <div className="relative flex flex-col gap-3 w-full">
-              <label className="font-normal text-base text-mti-gray-dim">
-                Employment Status
-              </label>
-              <RadioGroup
-                value={user.demographicInformation?.employment}
-                className="grid grid-cols-2 items-center gap-4 place-items-center"
-                disabled={disabled}
-              >
-                {EMPLOYMENT_STATUS.map(({ status, label }) => (
-                  <RadioGroup.Option value={status} key={status}>
-                    {({ checked }) => (
-                      <span
-                        className={clsx(
-                          "px-6 py-4 w-40 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-                          "transition duration-300 ease-in-out",
-                          !checked
-                            ? "bg-white border-mti-gray-platinum"
-                            : "bg-mti-purple-light border-mti-purple-dark text-white"
-                        )}
-                      >
-                        {label}
-                      </span>
-                    )}
-                  </RadioGroup.Option>
-                ))}
-              </RadioGroup>
-            </div>
-          )}
-          {user.type === "corporate" && (
-            <Input
-              name="position"
-              onChange={setPosition}
-              type="text"
-              label="Position"
-              defaultValue={position}
-              placeholder="CEO, Head of Marketing..."
-              disabled
-              required
-            />
-          )}
-          <div className="flex flex-col gap-8 w-full">
-            <div className="relative flex flex-col gap-3 w-full">
-              <label className="font-normal text-base text-mti-gray-dim">
-                Gender
-              </label>
-              <RadioGroup
-                value={user.demographicInformation?.gender}
-                className="flex flex-row gap-4 justify-between"
-                disabled={disabled}
-              >
-                <RadioGroup.Option value="male">
-                  {({ checked }) => (
-                    <span
-                      className={clsx(
-                        "px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-                        "transition duration-300 ease-in-out",
-                        !checked
-                          ? "bg-white border-mti-gray-platinum"
-                          : "bg-mti-purple-light border-mti-purple-dark text-white"
-                      )}
-                    >
-                      Male
-                    </span>
-                  )}
-                </RadioGroup.Option>
-                <RadioGroup.Option value="female">
-                  {({ checked }) => (
-                    <span
-                      className={clsx(
-                        "px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-                        "transition duration-300 ease-in-out",
-                        !checked
-                          ? "bg-white border-mti-gray-platinum"
-                          : "bg-mti-purple-light border-mti-purple-dark text-white"
-                      )}
-                    >
-                      Female
-                    </span>
-                  )}
-                </RadioGroup.Option>
-                <RadioGroup.Option value="other">
-                  {({ checked }) => (
-                    <span
-                      className={clsx(
-                        "px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-                        "transition duration-300 ease-in-out",
-                        !checked
-                          ? "bg-white border-mti-gray-platinum"
-                          : "bg-mti-purple-light border-mti-purple-dark text-white"
-                      )}
-                    >
-                      Other
-                    </span>
-                  )}
-                </RadioGroup.Option>
-              </RadioGroup>
-            </div>
-            <div className="flex flex-col gap-3">
-              <div className="flex justify-between items-center">
-                <label className="font-normal text-base text-mti-gray-dim">
-                  Expiry Date
-                </label>
-                <Checkbox
-                  isChecked={!!expiryDate}
-                  onChange={(checked) =>
-                    setExpiryDate(
-                      checked
-                        ? user.subscriptionExpirationDate || new Date()
-                        : null
-                    )
-                  }
-                  disabled={disabled}
-                >
-                  Enabled
-                </Checkbox>
-              </div>
-              {!expiryDate && (
-                <div
-                  className={clsx(
-                    "p-6 w-full flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-                    "transition duration-300 ease-in-out",
-                    !expiryDate
-                      ? "!bg-mti-green-ultralight !border-mti-green-light"
-                      : expirationDateColor(expiryDate),
-                    "bg-white border-mti-gray-platinum"
-                  )}
-                >
-                  {!expiryDate && "Unlimited"}
-                  {expiryDate && moment(expiryDate).format("DD/MM/YYYY")}
-                </div>
-              )}
-              {expiryDate && (
-                <ReactDatePicker
-                  className={clsx(
-                    "p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-                    "hover:border-mti-purple tooltip",
-                    expirationDateColor(expiryDate),
-                    "transition duration-300 ease-in-out"
-                  )}
-                  filterDate={(date) =>
-                    moment(date).isAfter(new Date()) &&
-                    (loggedInUser.subscriptionExpirationDate
-                      ? moment(date).isBefore(
-                          moment(loggedInUser.subscriptionExpirationDate)
-                        )
-                      : true)
-                  }
-                  dateFormat="dd/MM/yyyy"
-                  selected={moment(expiryDate).toDate()}
-                  onChange={(date) => setExpiryDate(date)}
-                  disabled={disabled}
-                />
-              )}
-            </div>
-          </div>
-        </div>
-        {checkAccess(loggedInUser, ["developer", "admin"]) && (
-          <>
-            <Divider className="w-full !m-0" />
-            <div className="flex flex-col md:flex-row gap-8 w-full">
-              <div className="flex flex-col gap-3 w-full">
-                <label className="font-normal text-base text-mti-gray-dim">
-                  Status
-                </label>
-                <Select
-                  className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
-                  options={USER_STATUS_OPTIONS}
-                  menuPortalTarget={document?.body}
-                  value={USER_STATUS_OPTIONS.find((o) => o.value === status)}
-                  onChange={(value) =>
-                    setStatus(value?.value as typeof user.status)
-                  }
-                  styles={{
-                    control: (styles) => ({
-                      ...styles,
-                      paddingLeft: "4px",
-                      border: "none",
-                      outline: "none",
-                      ":focus": {
-                        outline: "none",
-                      },
-                    }),
-                    menuPortal: (base) => ({ ...base, zIndex: 9999 }),
-                    option: (styles, state) => ({
-                      ...styles,
-                      backgroundColor: state.isFocused
-                        ? "#D5D9F0"
-                        : state.isSelected
-                        ? "#7872BF"
-                        : "white",
-                      color: state.isFocused ? "black" : styles.color,
-                    }),
-                  }}
-                  isDisabled={disabled}
-                />
-              </div>
-              <div className="flex flex-col gap-3 w-full">
-                <label className="font-normal text-base text-mti-gray-dim">
-                  Type
-                </label>
-                <Select
-                  className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
-                  options={USER_TYPE_OPTIONS}
-                  menuPortalTarget={document?.body}
-                  value={USER_TYPE_OPTIONS.find((o) => o.value === type)}
-                  onChange={(value) =>
-                    setType(value?.value as typeof user.type)
-                  }
-                  styles={{
-                    control: (styles) => ({
-                      ...styles,
-                      paddingLeft: "4px",
-                      border: "none",
-                      outline: "none",
-                      ":focus": {
-                        outline: "none",
-                      },
-                    }),
-                    menuPortal: (base) => ({ ...base, zIndex: 9999 }),
-                    option: (styles, state) => ({
-                      ...styles,
-                      backgroundColor: state.isFocused
-                        ? "#D5D9F0"
-                        : state.isSelected
-                        ? "#7872BF"
-                        : "white",
-                      color: state.isFocused ? "black" : styles.color,
-                    }),
-                  }}
-                  isDisabled={disabled}
-                />
-              </div>
-            </div>
-          </>
-        )}
-      </section>
+				<div className="flex flex-col md:flex-row gap-8 w-full">
+					{user.type !== "corporate" && user.type !== "mastercorporate" && (
+						<div className="relative flex flex-col gap-3 w-full">
+							<label className="font-normal text-base text-mti-gray-dim">Employment Status</label>
+							<RadioGroup
+								value={user.demographicInformation?.employment}
+								className="grid grid-cols-2 items-center gap-4 place-items-center"
+								disabled={disabled}>
+								{EMPLOYMENT_STATUS.map(({status, label}) => (
+									<RadioGroup.Option value={status} key={status}>
+										{({checked}) => (
+											<span
+												className={clsx(
+													"px-6 py-4 w-40 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+													"transition duration-300 ease-in-out",
+													!checked
+														? "bg-white border-mti-gray-platinum"
+														: "bg-mti-purple-light border-mti-purple-dark text-white",
+												)}>
+												{label}
+											</span>
+										)}
+									</RadioGroup.Option>
+								))}
+							</RadioGroup>
+						</div>
+					)}
+					{user.type === "corporate" && (
+						<Input
+							name="position"
+							onChange={setPosition}
+							type="text"
+							label="Position"
+							defaultValue={position}
+							placeholder="CEO, Head of Marketing..."
+							disabled
+							required
+						/>
+					)}
+					<div className="flex flex-col gap-8 w-full">
+						<div className="relative flex flex-col gap-3 w-full">
+							<label className="font-normal text-base text-mti-gray-dim">Gender</label>
+							<RadioGroup
+								value={user.demographicInformation?.gender}
+								className="flex flex-row gap-4 justify-between"
+								disabled={disabled}>
+								<RadioGroup.Option value="male">
+									{({checked}) => (
+										<span
+											className={clsx(
+												"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+												"transition duration-300 ease-in-out",
+												!checked
+													? "bg-white border-mti-gray-platinum"
+													: "bg-mti-purple-light border-mti-purple-dark text-white",
+											)}>
+											Male
+										</span>
+									)}
+								</RadioGroup.Option>
+								<RadioGroup.Option value="female">
+									{({checked}) => (
+										<span
+											className={clsx(
+												"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+												"transition duration-300 ease-in-out",
+												!checked
+													? "bg-white border-mti-gray-platinum"
+													: "bg-mti-purple-light border-mti-purple-dark text-white",
+											)}>
+											Female
+										</span>
+									)}
+								</RadioGroup.Option>
+								<RadioGroup.Option value="other">
+									{({checked}) => (
+										<span
+											className={clsx(
+												"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+												"transition duration-300 ease-in-out",
+												!checked
+													? "bg-white border-mti-gray-platinum"
+													: "bg-mti-purple-light border-mti-purple-dark text-white",
+											)}>
+											Other
+										</span>
+									)}
+								</RadioGroup.Option>
+							</RadioGroup>
+						</div>
+						<div className="flex flex-col gap-3">
+							<div className="flex justify-between items-center">
+								<label className="font-normal text-base text-mti-gray-dim">Expiry Date</label>
+								<Checkbox
+									isChecked={!!expiryDate}
+									onChange={(checked) => setExpiryDate(checked ? user.subscriptionExpirationDate || new Date() : null)}
+									disabled={disabled}>
+									Enabled
+								</Checkbox>
+							</div>
+							{!expiryDate && (
+								<div
+									className={clsx(
+										"p-6 w-full flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+										"transition duration-300 ease-in-out",
+										!expiryDate ? "!bg-mti-green-ultralight !border-mti-green-light" : expirationDateColor(expiryDate),
+										"bg-white border-mti-gray-platinum",
+									)}>
+									{!expiryDate && "Unlimited"}
+									{expiryDate && moment(expiryDate).format("DD/MM/YYYY")}
+								</div>
+							)}
+							{expiryDate && (
+								<ReactDatePicker
+									className={clsx(
+										"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+										"hover:border-mti-purple tooltip",
+										expirationDateColor(expiryDate),
+										"transition duration-300 ease-in-out",
+									)}
+									filterDate={(date) =>
+										moment(date).isAfter(new Date()) &&
+										(loggedInUser.subscriptionExpirationDate
+											? moment(date).isBefore(moment(loggedInUser.subscriptionExpirationDate))
+											: true)
+									}
+									dateFormat="dd/MM/yyyy"
+									selected={moment(expiryDate).toDate()}
+									onChange={(date) => setExpiryDate(date)}
+									disabled={disabled}
+								/>
+							)}
+						</div>
+					</div>
+				</div>
+				{checkAccess(loggedInUser, ["developer", "admin"]) && (
+					<>
+						<Divider className="w-full !m-0" />
+						<div className="flex flex-col md:flex-row gap-8 w-full">
+							<div className="flex flex-col gap-3 w-full">
+								<label className="font-normal text-base text-mti-gray-dim">Status</label>
+								<Select
+									className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+									options={USER_STATUS_OPTIONS}
+									menuPortalTarget={document?.body}
+									value={USER_STATUS_OPTIONS.find((o) => o.value === status)}
+									onChange={(value) => setStatus(value?.value as typeof user.status)}
+									styles={{
+										control: (styles) => ({
+											...styles,
+											paddingLeft: "4px",
+											border: "none",
+											outline: "none",
+											":focus": {
+												outline: "none",
+											},
+										}),
+										menuPortal: (base) => ({...base, zIndex: 9999}),
+										option: (styles, state) => ({
+											...styles,
+											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+											color: state.isFocused ? "black" : styles.color,
+										}),
+									}}
+									isDisabled={disabled}
+								/>
+							</div>
+							<div className="flex flex-col gap-3 w-full">
+								<label className="font-normal text-base text-mti-gray-dim">Type</label>
+								<Select
+									className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+									options={USER_TYPE_OPTIONS}
+									menuPortalTarget={document?.body}
+									value={USER_TYPE_OPTIONS.find((o) => o.value === type)}
+									onChange={(value) => setType(value?.value as typeof user.type)}
+									styles={{
+										control: (styles) => ({
+											...styles,
+											paddingLeft: "4px",
+											border: "none",
+											outline: "none",
+											":focus": {
+												outline: "none",
+											},
+										}),
+										menuPortal: (base) => ({...base, zIndex: 9999}),
+										option: (styles, state) => ({
+											...styles,
+											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+											color: state.isFocused ? "black" : styles.color,
+										}),
+									}}
+									isDisabled={disabled}
+								/>
+							</div>
+						</div>
+					</>
+				)}
+			</section>
 
-      <div className="flex gap-4 justify-between mt-4 w-full">
-        <div className="self-start flex gap-4 justify-start items-center w-full">
-          {onViewCorporate && ["student", "teacher"].includes(user.type) && (
-            <Button
-              className="w-full max-w-[200px]"
-              variant="outline"
-              color="rose"
-              onClick={onViewCorporate}
-            >
-              View Corporate
-            </Button>
-          )}
-          {onViewStudents && ["corporate", "teacher"].includes(user.type) && (
-            <Button
-              className="w-full max-w-[200px]"
-              variant="outline"
-              color="rose"
-              onClick={onViewStudents}
-            >
-              View Students
-            </Button>
-          )}
-          {onViewTeachers && ["student", "corporate"].includes(user.type) && (
-            <Button
-              className="w-full max-w-[200px]"
-              variant="outline"
-              color="rose"
-              onClick={onViewTeachers}
-            >
-              View Teachers
-            </Button>
-          )}
-        </div>
-        <div className="self-end flex gap-4 w-full justify-end">
-          <Button
-            className="w-full max-w-[200px]"
-            variant="outline"
-            onClick={onClose}
-          >
-            Close
-          </Button>
-          <Button
-            disabled={
-              disabled ||
-              !checkAccess(
-                loggedInUser,
-                updateUserPermission.list,
-                updateUserPermission.perm
-              )
-            }
-            onClick={updateUser}
-            className="w-full max-w-[200px]"
-          >
-            Update
-          </Button>
-        </div>
-      </div>
-    </>
-  );
+			<div className="flex gap-4 justify-between mt-4 w-full">
+				<div className="self-start flex gap-4 justify-start items-center w-full">
+					{onViewCorporate && ["student", "teacher"].includes(user.type) && (
+						<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewCorporate}>
+							View Corporate
+						</Button>
+					)}
+					{onViewStudents && ["corporate", "teacher"].includes(user.type) && (
+						<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewStudents}>
+							View Students
+						</Button>
+					)}
+					{onViewTeachers && ["student", "corporate"].includes(user.type) && (
+						<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewTeachers}>
+							View Teachers
+						</Button>
+					)}
+				</div>
+				<div className="self-end flex gap-4 w-full justify-end">
+					<Button className="w-full max-w-[200px]" variant="outline" onClick={onClose}>
+						Close
+					</Button>
+					<Button
+						disabled={disabled || !checkAccess(loggedInUser, updateUserPermission.list, permissions, updateUserPermission.perm)}
+						onClick={updateUser}
+						className="w-full max-w-[200px]">
+						Update
+					</Button>
+				</div>
+			</div>
+		</>
+	);
 };
 
 export default UserCard;
diff --git a/src/dashboards/Teacher.tsx b/src/dashboards/Teacher.tsx
index 41548af7..d4238b67 100644
--- a/src/dashboards/Teacher.tsx
+++ b/src/dashboards/Teacher.tsx
@@ -2,480 +2,397 @@
 import Modal from "@/components/Modal";
 import useStats from "@/hooks/useStats";
 import useUsers from "@/hooks/useUsers";
-import { CorporateUser, Group, Stat, User } from "@/interfaces/user";
+import {CorporateUser, Group, Stat, User} from "@/interfaces/user";
 import UserList from "@/pages/(admin)/Lists/UserList";
-import { dateSorter } from "@/utils";
+import {dateSorter} from "@/utils";
 import moment from "moment";
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
 import {
-  BsArrowLeft,
-  BsArrowRepeat,
-  BsClipboard2Data,
-  BsClipboard2DataFill,
-  BsClipboard2Heart,
-  BsClipboard2X,
-  BsClipboardPulse,
-  BsClock,
-  BsEnvelopePaper,
-  BsGlobeCentralSouthAsia,
-  BsPaperclip,
-  BsPeople,
-  BsPerson,
-  BsPersonAdd,
-  BsPersonFill,
-  BsPersonFillGear,
-  BsPersonGear,
-  BsPlus,
-  BsRepeat,
-  BsRepeat1,
+	BsArrowLeft,
+	BsArrowRepeat,
+	BsClipboard2Data,
+	BsClipboard2DataFill,
+	BsClipboard2Heart,
+	BsClipboard2X,
+	BsClipboardPulse,
+	BsClock,
+	BsEnvelopePaper,
+	BsGlobeCentralSouthAsia,
+	BsPaperclip,
+	BsPeople,
+	BsPerson,
+	BsPersonAdd,
+	BsPersonFill,
+	BsPersonFillGear,
+	BsPersonGear,
+	BsPlus,
+	BsRepeat,
+	BsRepeat1,
 } from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
-import { calculateAverageLevel, calculateBandScore } from "@/utils/score";
-import { MODULE_ARRAY } from "@/utils/moduleUtils";
-import { Module } from "@/interfaces";
-import { groupByExam } from "@/utils/stats";
+import {calculateAverageLevel, calculateBandScore} from "@/utils/score";
+import {MODULE_ARRAY} from "@/utils/moduleUtils";
+import {Module} from "@/interfaces";
+import {groupByExam} from "@/utils/stats";
 import IconCard from "./IconCard";
 import GroupList from "@/pages/(admin)/Lists/GroupList";
 import useAssignments from "@/hooks/useAssignments";
-import { Assignment } from "@/interfaces/results";
+import {Assignment} from "@/interfaces/results";
 import AssignmentCard from "./AssignmentCard";
 import Button from "@/components/Low/Button";
 import clsx from "clsx";
 import ProgressBar from "@/components/Low/ProgressBar";
 import AssignmentCreator from "./AssignmentCreator";
 import AssignmentView from "./AssignmentView";
-import { getUserCorporate } from "@/utils/groups";
-import { checkAccess } from "@/utils/permissions";
+import {getUserCorporate} from "@/utils/groups";
+import {checkAccess} from "@/utils/permissions";
+import usePermissions from "@/hooks/usePermissions";
 
 interface Props {
-  user: User;
+	user: User;
 }
 
-export default function TeacherDashboard({ user }: Props) {
-  const [page, setPage] = useState("");
-  const [selectedUser, setSelectedUser] = useState<User>();
-  const [showModal, setShowModal] = useState(false);
-  const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
-  const [isCreatingAssignment, setIsCreatingAssignment] = useState(false);
-  const [corporateUserToShow, setCorporateUserToShow] =
-    useState<CorporateUser>();
+export default function TeacherDashboard({user}: Props) {
+	const [page, setPage] = useState("");
+	const [selectedUser, setSelectedUser] = useState<User>();
+	const [showModal, setShowModal] = useState(false);
+	const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
+	const [isCreatingAssignment, setIsCreatingAssignment] = useState(false);
+	const [corporateUserToShow, setCorporateUserToShow] = useState<CorporateUser>();
 
-  const { stats } = useStats();
-  const { users, reload } = useUsers();
-  const { groups } = useGroups(user.id);
-  const {
-    assignments,
-    isLoading: isAssignmentsLoading,
-    reload: reloadAssignments,
-  } = useAssignments({ assigner: user.id });
+	const {stats} = useStats();
+	const {users, reload} = useUsers();
+	const {groups} = useGroups(user.id);
+	const {permissions} = usePermissions(user.id);
+	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({assigner: user.id});
 
-  useEffect(() => {
-    setShowModal(!!selectedUser && page === "");
-  }, [selectedUser, page]);
+	useEffect(() => {
+		setShowModal(!!selectedUser && page === "");
+	}, [selectedUser, page]);
 
-  useEffect(() => {
-    getUserCorporate(user.id).then(setCorporateUserToShow);
-  }, [user]);
+	useEffect(() => {
+		getUserCorporate(user.id).then(setCorporateUserToShow);
+	}, [user]);
 
-  const studentFilter = (user: User) =>
-    user.type === "student" &&
-    groups.flatMap((g) => g.participants).includes(user.id);
+	const studentFilter = (user: User) => user.type === "student" && groups.flatMap((g) => g.participants).includes(user.id);
 
-  const getStatsByStudent = (user: User) =>
-    stats.filter((s) => s.user === user.id);
+	const getStatsByStudent = (user: User) => stats.filter((s) => s.user === user.id);
 
-  const UserDisplay = (displayUser: User) => (
-    <div
-      onClick={() => setSelectedUser(displayUser)}
-      className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300"
-    >
-      <img
-        src={displayUser.profilePicture}
-        alt={displayUser.name}
-        className="rounded-full w-10 h-10"
-      />
-      <div className="flex flex-col gap-1 items-start">
-        <span>{displayUser.name}</span>
-        <span className="text-sm opacity-75">{displayUser.email}</span>
-      </div>
-    </div>
-  );
+	const UserDisplay = (displayUser: User) => (
+		<div
+			onClick={() => setSelectedUser(displayUser)}
+			className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300">
+			<img src={displayUser.profilePicture} alt={displayUser.name} className="rounded-full w-10 h-10" />
+			<div className="flex flex-col gap-1 items-start">
+				<span>{displayUser.name}</span>
+				<span className="text-sm opacity-75">{displayUser.email}</span>
+			</div>
+		</div>
+	);
 
-  const StudentsList = () => {
-    const filter = (x: User) =>
-      x.type === "student" &&
-      (!!selectedUser
-        ? groups
-            .filter((g) => g.admin === selectedUser.id)
-            .flatMap((g) => g.participants)
-            .includes(x.id) || false
-        : groups.flatMap((g) => g.participants).includes(x.id));
+	const StudentsList = () => {
+		const filter = (x: User) =>
+			x.type === "student" &&
+			(!!selectedUser
+				? groups
+						.filter((g) => g.admin === selectedUser.id)
+						.flatMap((g) => g.participants)
+						.includes(x.id) || false
+				: groups.flatMap((g) => g.participants).includes(x.id));
 
-    return (
-      <UserList
-        user={user}
-        filters={[filter]}
-        renderHeader={(total) => (
-          <div className="flex flex-col gap-4">
-            <div
-              onClick={() => setPage("")}
-              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
-            >
-              <BsArrowLeft className="text-xl" />
-              <span>Back</span>
-            </div>
-            <h2 className="text-2xl font-semibold">Students ({total})</h2>
-          </div>
-        )}
-      />
-    );
-  };
+		return (
+			<UserList
+				user={user}
+				filters={[filter]}
+				renderHeader={(total) => (
+					<div className="flex flex-col gap-4">
+						<div
+							onClick={() => setPage("")}
+							className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+							<BsArrowLeft className="text-xl" />
+							<span>Back</span>
+						</div>
+						<h2 className="text-2xl font-semibold">Students ({total})</h2>
+					</div>
+				)}
+			/>
+		);
+	};
 
-  const GroupsList = () => {
-    const filter = (x: Group) =>
-      x.admin === user.id || x.participants.includes(user.id);
+	const GroupsList = () => {
+		const filter = (x: Group) => x.admin === user.id || x.participants.includes(user.id);
 
-    return (
-      <>
-        <div className="flex flex-col gap-4">
-          <div
-            onClick={() => setPage("")}
-            className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
-          >
-            <BsArrowLeft className="text-xl" />
-            <span>Back</span>
-          </div>
-          <h2 className="text-2xl font-semibold">
-            Groups ({groups.filter(filter).length})
-          </h2>
-        </div>
+		return (
+			<>
+				<div className="flex flex-col gap-4">
+					<div
+						onClick={() => setPage("")}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<h2 className="text-2xl font-semibold">Groups ({groups.filter(filter).length})</h2>
+				</div>
 
-        <GroupList user={user} />
-      </>
-    );
-  };
+				<GroupList user={user} />
+			</>
+		);
+	};
 
-  const averageLevelCalculator = (studentStats: Stat[]) => {
-    const formattedStats = studentStats
-      .map((s) => ({
-        focus: users.find((u) => u.id === s.user)?.focus,
-        score: s.score,
-        module: s.module,
-      }))
-      .filter((f) => !!f.focus);
-    const bandScores = formattedStats.map((s) => ({
-      module: s.module,
-      level: calculateBandScore(
-        s.score.correct,
-        s.score.total,
-        s.module,
-        s.focus!
-      ),
-    }));
+	const averageLevelCalculator = (studentStats: Stat[]) => {
+		const formattedStats = studentStats
+			.map((s) => ({
+				focus: users.find((u) => u.id === s.user)?.focus,
+				score: s.score,
+				module: s.module,
+			}))
+			.filter((f) => !!f.focus);
+		const bandScores = formattedStats.map((s) => ({
+			module: s.module,
+			level: calculateBandScore(s.score.correct, s.score.total, s.module, s.focus!),
+		}));
 
-    const levels: { [key in Module]: number } = {
-      reading: 0,
-      listening: 0,
-      writing: 0,
-      speaking: 0,
-      level: 0,
-    };
-    bandScores.forEach((b) => (levels[b.module] += b.level));
+		const levels: {[key in Module]: number} = {
+			reading: 0,
+			listening: 0,
+			writing: 0,
+			speaking: 0,
+			level: 0,
+		};
+		bandScores.forEach((b) => (levels[b.module] += b.level));
 
-    return calculateAverageLevel(levels);
-  };
+		return calculateAverageLevel(levels);
+	};
 
-  const AssignmentsPage = () => {
-    const activeFilter = (a: Assignment) =>
-      moment(a.endDate).isAfter(moment()) &&
-      moment(a.startDate).isBefore(moment()) &&
-      a.assignees.length > a.results.length;
-    const pastFilter = (a: Assignment) =>
-      (moment(a.endDate).isBefore(moment()) ||
-        a.assignees.length === a.results.length) &&
-      !a.archived;
-    const archivedFilter = (a: Assignment) => a.archived;
-    const futureFilter = (a: Assignment) =>
-      moment(a.startDate).isAfter(moment());
+	const AssignmentsPage = () => {
+		const activeFilter = (a: Assignment) =>
+			moment(a.endDate).isAfter(moment()) && moment(a.startDate).isBefore(moment()) && a.assignees.length > a.results.length;
+		const pastFilter = (a: Assignment) => (moment(a.endDate).isBefore(moment()) || a.assignees.length === a.results.length) && !a.archived;
+		const archivedFilter = (a: Assignment) => a.archived;
+		const futureFilter = (a: Assignment) => moment(a.startDate).isAfter(moment());
 
-    return (
-      <>
-        <AssignmentView
-          isOpen={!!selectedAssignment && !isCreatingAssignment}
-          onClose={() => {
-            setSelectedAssignment(undefined);
-            setIsCreatingAssignment(false);
-            reloadAssignments();
-          }}
-          assignment={selectedAssignment}
-        />
-        <AssignmentCreator
-          assignment={selectedAssignment}
-          groups={groups.filter(
-            (x) => x.admin === user.id || x.participants.includes(user.id)
-          )}
-          users={users.filter(
-            (x) =>
-              x.type === "student" &&
-              (!!selectedUser
-                ? groups
-                    .filter((g) => g.admin === selectedUser.id)
-                    .flatMap((g) => g.participants)
-                    .includes(x.id) || false
-                : groups.flatMap((g) => g.participants).includes(x.id))
-          )}
-          assigner={user.id}
-          isCreating={isCreatingAssignment}
-          cancelCreation={() => {
-            setIsCreatingAssignment(false);
-            setSelectedAssignment(undefined);
-            reloadAssignments();
-          }}
-        />
-        <div className="w-full flex justify-between items-center">
-          <div
-            onClick={() => setPage("")}
-            className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
-          >
-            <BsArrowLeft className="text-xl" />
-            <span>Back</span>
-          </div>
-          <div
-            onClick={reloadAssignments}
-            className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
-          >
-            <span>Reload</span>
-            <BsArrowRepeat
-              className={clsx(
-                "text-xl",
-                isAssignmentsLoading && "animate-spin"
-              )}
-            />
-          </div>
-        </div>
-        <section className="flex flex-col gap-4">
-          <h2 className="text-2xl font-semibold">
-            Active Assignments ({assignments.filter(activeFilter).length})
-          </h2>
-          <div className="flex flex-wrap gap-2">
-            {assignments.filter(activeFilter).map((a) => (
-              <AssignmentCard
-                {...a}
-                onClick={() => setSelectedAssignment(a)}
-                key={a.id}
-              />
-            ))}
-          </div>
-        </section>
-        <section className="flex flex-col gap-4">
-          <h2 className="text-2xl font-semibold">
-            Planned Assignments ({assignments.filter(futureFilter).length})
-          </h2>
-          <div className="flex flex-wrap gap-2">
-            <div
-              onClick={() => setIsCreatingAssignment(true)}
-              className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300"
-            >
-              <BsPlus className="text-6xl" />
-              <span className="text-lg">New Assignment</span>
-            </div>
-            {assignments.filter(futureFilter).map((a) => (
-              <AssignmentCard
-                {...a}
-                onClick={() => {
-                  setSelectedAssignment(a);
-                  setIsCreatingAssignment(true);
-                }}
-                key={a.id}
-              />
-            ))}
-          </div>
-        </section>
-        <section className="flex flex-col gap-4">
-          <h2 className="text-2xl font-semibold">
-            Past Assignments ({assignments.filter(pastFilter).length})
-          </h2>
-          <div className="flex flex-wrap gap-2">
-            {assignments.filter(pastFilter).map((a) => (
-              <AssignmentCard
-                {...a}
-                onClick={() => setSelectedAssignment(a)}
-                key={a.id}
-                allowDownload
-                reload={reloadAssignments}
-                allowArchive
-              />
-            ))}
-          </div>
-        </section>
-        <section className="flex flex-col gap-4">
-          <h2 className="text-2xl font-semibold">
-            Archived Assignments ({assignments.filter(archivedFilter).length})
-          </h2>
-          <div className="flex flex-wrap gap-2">
-            {assignments.filter(archivedFilter).map((a) => (
-              <AssignmentCard
-                {...a}
-                onClick={() => setSelectedAssignment(a)}
-                key={a.id}
-                allowDownload
-                reload={reloadAssignments}
-                allowUnarchive
-              />
-            ))}
-          </div>
-        </section>
-      </>
-    );
-  };
+		return (
+			<>
+				<AssignmentView
+					isOpen={!!selectedAssignment && !isCreatingAssignment}
+					onClose={() => {
+						setSelectedAssignment(undefined);
+						setIsCreatingAssignment(false);
+						reloadAssignments();
+					}}
+					assignment={selectedAssignment}
+				/>
+				<AssignmentCreator
+					assignment={selectedAssignment}
+					groups={groups.filter((x) => x.admin === user.id || x.participants.includes(user.id))}
+					users={users.filter(
+						(x) =>
+							x.type === "student" &&
+							(!!selectedUser
+								? groups
+										.filter((g) => g.admin === selectedUser.id)
+										.flatMap((g) => g.participants)
+										.includes(x.id) || false
+								: groups.flatMap((g) => g.participants).includes(x.id)),
+					)}
+					assigner={user.id}
+					isCreating={isCreatingAssignment}
+					cancelCreation={() => {
+						setIsCreatingAssignment(false);
+						setSelectedAssignment(undefined);
+						reloadAssignments();
+					}}
+				/>
+				<div className="w-full flex justify-between items-center">
+					<div
+						onClick={() => setPage("")}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<div
+						onClick={reloadAssignments}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<span>Reload</span>
+						<BsArrowRepeat className={clsx("text-xl", isAssignmentsLoading && "animate-spin")} />
+					</div>
+				</div>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Active Assignments ({assignments.filter(activeFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						{assignments.filter(activeFilter).map((a) => (
+							<AssignmentCard {...a} onClick={() => setSelectedAssignment(a)} key={a.id} />
+						))}
+					</div>
+				</section>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Planned Assignments ({assignments.filter(futureFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						<div
+							onClick={() => setIsCreatingAssignment(true)}
+							className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300">
+							<BsPlus className="text-6xl" />
+							<span className="text-lg">New Assignment</span>
+						</div>
+						{assignments.filter(futureFilter).map((a) => (
+							<AssignmentCard
+								{...a}
+								onClick={() => {
+									setSelectedAssignment(a);
+									setIsCreatingAssignment(true);
+								}}
+								key={a.id}
+							/>
+						))}
+					</div>
+				</section>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Past Assignments ({assignments.filter(pastFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						{assignments.filter(pastFilter).map((a) => (
+							<AssignmentCard
+								{...a}
+								onClick={() => setSelectedAssignment(a)}
+								key={a.id}
+								allowDownload
+								reload={reloadAssignments}
+								allowArchive
+							/>
+						))}
+					</div>
+				</section>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Archived Assignments ({assignments.filter(archivedFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						{assignments.filter(archivedFilter).map((a) => (
+							<AssignmentCard
+								{...a}
+								onClick={() => setSelectedAssignment(a)}
+								key={a.id}
+								allowDownload
+								reload={reloadAssignments}
+								allowUnarchive
+							/>
+						))}
+					</div>
+				</section>
+			</>
+		);
+	};
 
-  const DefaultDashboard = () => (
-    <>
-      {corporateUserToShow && (
-        <div className="absolute top-4 right-4 bg-neutral-200 px-2 rounded-lg py-1">
-          Linked to:{" "}
-          <b>
-            {corporateUserToShow?.corporateInformation?.companyInformation
-              .name || corporateUserToShow.name}
-          </b>
-        </div>
-      )}
-      <section
-        className={clsx(
-          "flex -lg:flex-wrap gap-4 items-center -lg:justify-center lg:justify-start text-center",
-          !!corporateUserToShow && "mt-12 xl:mt-6"
-        )}
-      >
-        <IconCard
-          onClick={() => setPage("students")}
-          Icon={BsPersonFill}
-          label="Students"
-          value={users.filter(studentFilter).length}
-          color="purple"
-        />
-        <IconCard
-          Icon={BsClipboard2Data}
-          label="Exams Performed"
-          value={
-            stats.filter((s) =>
-              groups.flatMap((g) => g.participants).includes(s.user)
-            ).length
-          }
-          color="purple"
-        />
-        <IconCard
-          Icon={BsPaperclip}
-          label="Average Level"
-          value={averageLevelCalculator(
-            stats.filter((s) =>
-              groups.flatMap((g) => g.participants).includes(s.user)
-            )
-          ).toFixed(1)}
-          color="purple"
-        />
-        {checkAccess(user, ["teacher", "developer"], "viewGroup") && (
-          <IconCard
-            Icon={BsPeople}
-            label="Groups"
-            value={groups.length}
-            color="purple"
-            onClick={() => setPage("groups")}
-          />
-        )}
-        <div
-          onClick={() => setPage("assignments")}
-          className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-96 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300"
-        >
-          <BsEnvelopePaper className="text-6xl text-mti-purple-light" />
-          <span className="flex flex-col gap-1 items-center text-xl">
-            <span className="text-lg">Assignments</span>
-            <span className="font-semibold text-mti-purple-light">
-              {assignments.filter((a) => !a.archived).length}
-            </span>
-          </span>
-        </div>
-      </section>
+	const DefaultDashboard = () => (
+		<>
+			{corporateUserToShow && (
+				<div className="absolute top-4 right-4 bg-neutral-200 px-2 rounded-lg py-1">
+					Linked to: <b>{corporateUserToShow?.corporateInformation?.companyInformation.name || corporateUserToShow.name}</b>
+				</div>
+			)}
+			<section
+				className={clsx(
+					"flex -lg:flex-wrap gap-4 items-center -lg:justify-center lg:justify-start text-center",
+					!!corporateUserToShow && "mt-12 xl:mt-6",
+				)}>
+				<IconCard
+					onClick={() => setPage("students")}
+					Icon={BsPersonFill}
+					label="Students"
+					value={users.filter(studentFilter).length}
+					color="purple"
+				/>
+				<IconCard
+					Icon={BsClipboard2Data}
+					label="Exams Performed"
+					value={stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user)).length}
+					color="purple"
+				/>
+				<IconCard
+					Icon={BsPaperclip}
+					label="Average Level"
+					value={averageLevelCalculator(stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user))).toFixed(1)}
+					color="purple"
+				/>
+				{checkAccess(user, ["teacher", "developer"], permissions, "viewGroup") && (
+					<IconCard Icon={BsPeople} label="Groups" value={groups.length} color="purple" onClick={() => setPage("groups")} />
+				)}
+				<div
+					onClick={() => setPage("assignments")}
+					className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-96 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
+					<BsEnvelopePaper className="text-6xl text-mti-purple-light" />
+					<span className="flex flex-col gap-1 items-center text-xl">
+						<span className="text-lg">Assignments</span>
+						<span className="font-semibold text-mti-purple-light">{assignments.filter((a) => !a.archived).length}</span>
+					</span>
+				</div>
+			</section>
 
-      <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full justify-between">
-        <div className="bg-white shadow flex flex-col rounded-xl w-full">
-          <span className="p-4">Latest students</span>
-          <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-            {users
-              .filter(studentFilter)
-              .sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
-              .map((x) => (
-                <UserDisplay key={x.id} {...x} />
-              ))}
-          </div>
-        </div>
-        <div className="bg-white shadow flex flex-col rounded-xl w-full">
-          <span className="p-4">Highest level students</span>
-          <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-            {users
-              .filter(studentFilter)
-              .sort(
-                (a, b) =>
-                  calculateAverageLevel(b.levels) -
-                  calculateAverageLevel(a.levels)
-              )
-              .map((x) => (
-                <UserDisplay key={x.id} {...x} />
-              ))}
-          </div>
-        </div>
-        <div className="bg-white shadow flex flex-col rounded-xl w-full">
-          <span className="p-4">Highest exam count students</span>
-          <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-            {users
-              .filter(studentFilter)
-              .sort(
-                (a, b) =>
-                  Object.keys(groupByExam(getStatsByStudent(b))).length -
-                  Object.keys(groupByExam(getStatsByStudent(a))).length
-              )
-              .map((x) => (
-                <UserDisplay key={x.id} {...x} />
-              ))}
-          </div>
-        </div>
-      </section>
-    </>
-  );
+			<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full justify-between">
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Latest students</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{users
+							.filter(studentFilter)
+							.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Highest level students</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{users
+							.filter(studentFilter)
+							.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Highest exam count students</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{users
+							.filter(studentFilter)
+							.sort(
+								(a, b) =>
+									Object.keys(groupByExam(getStatsByStudent(b))).length - Object.keys(groupByExam(getStatsByStudent(a))).length,
+							)
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
+			</section>
+		</>
+	);
 
-  return (
-    <>
-      <Modal isOpen={showModal} onClose={() => setSelectedUser(undefined)}>
-        <>
-          {selectedUser && (
-            <div className="w-full flex flex-col gap-8">
-              <UserCard
-                loggedInUser={user}
-                onClose={(shouldReload) => {
-                  setSelectedUser(undefined);
-                  if (shouldReload) reload();
-                }}
-                onViewStudents={
-                  selectedUser.type === "corporate" ||
-                  selectedUser.type === "teacher"
-                    ? () => setPage("students")
-                    : undefined
-                }
-                onViewTeachers={
-                  selectedUser.type === "corporate"
-                    ? () => setPage("teachers")
-                    : undefined
-                }
-                user={selectedUser}
-              />
-            </div>
-          )}
-        </>
-      </Modal>
-      {page === "students" && <StudentsList />}
-      {page === "groups" && <GroupsList />}
-      {page === "assignments" && <AssignmentsPage />}
-      {page === "" && <DefaultDashboard />}
-    </>
-  );
+	return (
+		<>
+			<Modal isOpen={showModal} onClose={() => setSelectedUser(undefined)}>
+				<>
+					{selectedUser && (
+						<div className="w-full flex flex-col gap-8">
+							<UserCard
+								loggedInUser={user}
+								onClose={(shouldReload) => {
+									setSelectedUser(undefined);
+									if (shouldReload) reload();
+								}}
+								onViewStudents={
+									selectedUser.type === "corporate" || selectedUser.type === "teacher" ? () => setPage("students") : undefined
+								}
+								onViewTeachers={selectedUser.type === "corporate" ? () => setPage("teachers") : undefined}
+								user={selectedUser}
+							/>
+						</div>
+					)}
+				</>
+			</Modal>
+			{page === "students" && <StudentsList />}
+			{page === "groups" && <GroupsList />}
+			{page === "assignments" && <AssignmentsPage />}
+			{page === "" && <DefaultDashboard />}
+		</>
+	);
 }
diff --git a/src/hooks/usePermissions.tsx b/src/hooks/usePermissions.tsx
new file mode 100644
index 00000000..67d49394
--- /dev/null
+++ b/src/hooks/usePermissions.tsx
@@ -0,0 +1,29 @@
+import {Exam} from "@/interfaces/exam";
+import {Permission, PermissionType} from "@/interfaces/permissions";
+import {ExamState} from "@/stores/examStore";
+import axios from "axios";
+import {useEffect, useState} from "react";
+
+export default function usePermissions(user: string) {
+	const [permissions, setPermissions] = useState<PermissionType[]>([]);
+	const [isLoading, setIsLoading] = useState(false);
+	const [isError, setIsError] = useState(false);
+
+	const getData = () => {
+		setIsLoading(true);
+		axios
+			.get<Permission[]>(`/api/permissions`)
+			.then((response) => {
+				const permissionTypes = response.data
+					.filter((x) => !x.users.includes(user))
+					.reduce((acc, curr) => [...acc, curr.type], [] as PermissionType[]);
+				console.log(response.data, permissionTypes);
+				setPermissions(permissionTypes);
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	useEffect(getData, [user]);
+
+	return {permissions, isLoading, isError, reload: getData};
+}
diff --git a/src/interfaces/permissions.ts b/src/interfaces/permissions.ts
index 808564b6..7ed7337b 100644
--- a/src/interfaces/permissions.ts
+++ b/src/interfaces/permissions.ts
@@ -1,57 +1,58 @@
 export const markets = ["au", "br", "de"] as const;
 
 export const permissions = [
-  // generate codes are basicly invites
-  "createCodeStudent",
-  "createCodeTeacher",
-  "createCodeCorporate",
-  "createCodeCountryManager",
-  "createCodeAdmin",
-  // exams
-  "createReadingExam",
-  "createListeningExam",
-  "createWritingExam",
-  "createSpeakingExam",
-  "createLevelExam",
-  // view pages
-  "viewExams",
-  "viewExercises",
-  "viewRecords",
-  "viewStats",
-  "viewTickets",
-  "viewPaymentRecords",
-  // view data
-  "viewStudent",
-  "viewTeacher",
-  "viewCorporate",
-  "viewCountryManager",
-  "viewAdmin",
-  "viewGroup",
-  "viewCodes",
-  // edit data
-  "editStudent",
-  "editTeacher",
-  "editCorporate",
-  "editCountryManager",
-  "editAdmin",
-  "editGroup",
-  // delete data
-  "deleteStudent",
-  "deleteTeacher",
-  "deleteCorporate",
-  "deleteCountryManager",
-  "deleteAdmin",
-  "deleteGroup",
-  "deleteCodes",
-  // create options
-  "createGroup",
-  "createCodes"
+	// generate codes are basicly invites
+	"createCodeStudent",
+	"createCodeTeacher",
+	"createCodeCorporate",
+	"createCodeCountryManager",
+	"createCodeAdmin",
+	// exams
+	"createReadingExam",
+	"createListeningExam",
+	"createWritingExam",
+	"createSpeakingExam",
+	"createLevelExam",
+	// view pages
+	"viewExams",
+	"viewExercises",
+	"viewRecords",
+	"viewStats",
+	"viewTickets",
+	"viewPaymentRecords",
+	// view data
+	"viewStudent",
+	"viewTeacher",
+	"viewCorporate",
+	"viewCountryManager",
+	"viewAdmin",
+	"viewGroup",
+	"viewCodes",
+	// edit data
+	"editStudent",
+	"editTeacher",
+	"editCorporate",
+	"editCountryManager",
+	"editAdmin",
+	"editGroup",
+	// delete data
+	"deleteStudent",
+	"deleteTeacher",
+	"deleteCorporate",
+	"deleteCountryManager",
+	"deleteAdmin",
+	"deleteGroup",
+	"deleteCodes",
+	// create options
+	"createGroup",
+	"createCodes",
+	"all",
 ] as const;
 
 export type PermissionType = (typeof permissions)[keyof typeof permissions];
 
 export interface Permission {
-  id: string;
-  type: PermissionType;
-  users: string[];
+	id: string;
+	type: PermissionType;
+	users: string[];
 }
diff --git a/src/pages/(admin)/BatchCodeGenerator.tsx b/src/pages/(admin)/BatchCodeGenerator.tsx
index 3e55e6da..e17f5281 100644
--- a/src/pages/(admin)/BatchCodeGenerator.tsx
+++ b/src/pages/(admin)/BatchCodeGenerator.tsx
@@ -1,377 +1,280 @@
 import Button from "@/components/Low/Button";
 import Checkbox from "@/components/Low/Checkbox";
-import { PERMISSIONS } from "@/constants/userPermissions";
+import {PERMISSIONS} from "@/constants/userPermissions";
 import useUsers from "@/hooks/useUsers";
-import { Type, User } from "@/interfaces/user";
-import { USER_TYPE_LABELS } from "@/resources/user";
+import {Type, User} from "@/interfaces/user";
+import {USER_TYPE_LABELS} from "@/resources/user";
 import axios from "axios";
 import clsx from "clsx";
-import { capitalize, uniqBy } from "lodash";
+import {capitalize, uniqBy} from "lodash";
 import moment from "moment";
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
 import ReactDatePicker from "react-datepicker";
-import { toast } from "react-toastify";
+import {toast} from "react-toastify";
 import ShortUniqueId from "short-unique-id";
-import { useFilePicker } from "use-file-picker";
+import {useFilePicker} from "use-file-picker";
 import readXlsxFile from "read-excel-file";
 import Modal from "@/components/Modal";
-import { BsFileEarmarkEaselFill, BsQuestionCircleFill } from "react-icons/bs";
-import { checkAccess, getTypesOfUser } from "@/utils/permissions";
-import { PermissionType } from "@/interfaces/permissions";
-const EMAIL_REGEX = new RegExp(
-  /^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/
-);
+import {BsFileEarmarkEaselFill, BsQuestionCircleFill} from "react-icons/bs";
+import {checkAccess, getTypesOfUser} from "@/utils/permissions";
+import {PermissionType} from "@/interfaces/permissions";
+import usePermissions from "@/hooks/usePermissions";
+const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
 
 const USER_TYPE_PERMISSIONS: {
-  [key in Type]: { perm: PermissionType | undefined; list: Type[] };
+	[key in Type]: {perm: PermissionType | undefined; list: Type[]};
 } = {
-  student: {
-    perm: "createCodeStudent",
-    list: [],
-  },
-  teacher: {
-    perm: "createCodeTeacher",
-    list: [],
-  },
-  agent: {
-    perm: "createCodeCountryManager",
-    list: [],
-  },
-  corporate: {
-    perm: "createCodeCorporate",
-    list: ["student", "teacher"],
-  },
-  mastercorporate: {
-    perm: undefined,
-    list: ["student", "teacher", "corporate"],
-  },
-  admin: {
-    perm: "createCodeAdmin",
-    list: [
-      "student",
-      "teacher",
-      "agent",
-      "corporate",
-      "admin",
-      "mastercorporate",
-    ],
-  },
-  developer: {
-    perm: undefined,
-    list: [
-      "student",
-      "teacher",
-      "agent",
-      "corporate",
-      "admin",
-      "developer",
-      "mastercorporate",
-    ],
-  },
+	student: {
+		perm: "createCodeStudent",
+		list: [],
+	},
+	teacher: {
+		perm: "createCodeTeacher",
+		list: [],
+	},
+	agent: {
+		perm: "createCodeCountryManager",
+		list: [],
+	},
+	corporate: {
+		perm: "createCodeCorporate",
+		list: ["student", "teacher"],
+	},
+	mastercorporate: {
+		perm: undefined,
+		list: ["student", "teacher", "corporate"],
+	},
+	admin: {
+		perm: "createCodeAdmin",
+		list: ["student", "teacher", "agent", "corporate", "admin", "mastercorporate"],
+	},
+	developer: {
+		perm: undefined,
+		list: ["student", "teacher", "agent", "corporate", "admin", "developer", "mastercorporate"],
+	},
 };
 
-export default function BatchCodeGenerator({ user }: { user: User }) {
-  const [infos, setInfos] = useState<
-    { email: string; name: string; passport_id: string }[]
-  >([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [expiryDate, setExpiryDate] = useState<Date | null>(
-    user?.subscriptionExpirationDate
-      ? moment(user.subscriptionExpirationDate).toDate()
-      : null
-  );
-  const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
-  const [type, setType] = useState<Type>("student");
-  const [showHelp, setShowHelp] = useState(false);
+export default function BatchCodeGenerator({user}: {user: User}) {
+	const [infos, setInfos] = useState<{email: string; name: string; passport_id: string}[]>([]);
+	const [isLoading, setIsLoading] = useState(false);
+	const [expiryDate, setExpiryDate] = useState<Date | null>(
+		user?.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).toDate() : null,
+	);
+	const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
+	const [type, setType] = useState<Type>("student");
+	const [showHelp, setShowHelp] = useState(false);
 
-  const { users } = useUsers();
+	const {users} = useUsers();
+	const {permissions} = usePermissions(user?.id || "");
 
-  const { openFilePicker, filesContent, clear } = useFilePicker({
-    accept: ".xlsx",
-    multiple: false,
-    readAs: "ArrayBuffer",
-  });
+	const {openFilePicker, filesContent, clear} = useFilePicker({
+		accept: ".xlsx",
+		multiple: false,
+		readAs: "ArrayBuffer",
+	});
 
-  useEffect(() => {
-    if (!isExpiryDateEnabled) setExpiryDate(null);
-  }, [isExpiryDateEnabled]);
+	useEffect(() => {
+		if (!isExpiryDateEnabled) setExpiryDate(null);
+	}, [isExpiryDateEnabled]);
 
-  useEffect(() => {
-    if (filesContent.length > 0) {
-      const file = filesContent[0];
-      readXlsxFile(file.content).then((rows) => {
-        try {
-          const information = uniqBy(
-            rows
-              .map((row) => {
-                const [
-                  firstName,
-                  lastName,
-                  country,
-                  passport_id,
-                  email,
-                  ...phone
-                ] = row as string[];
-                return EMAIL_REGEX.test(email.toString().trim())
-                  ? {
-                      email: email.toString().trim().toLowerCase(),
-                      name: `${firstName ?? ""} ${lastName ?? ""}`.trim(),
-                      passport_id: passport_id?.toString().trim() || undefined,
-                    }
-                  : undefined;
-              })
-              .filter((x) => !!x) as typeof infos,
-            (x) => x.email
-          );
+	useEffect(() => {
+		if (filesContent.length > 0) {
+			const file = filesContent[0];
+			readXlsxFile(file.content).then((rows) => {
+				try {
+					const information = uniqBy(
+						rows
+							.map((row) => {
+								const [firstName, lastName, country, passport_id, email, ...phone] = row as string[];
+								return EMAIL_REGEX.test(email.toString().trim())
+									? {
+											email: email.toString().trim().toLowerCase(),
+											name: `${firstName ?? ""} ${lastName ?? ""}`.trim(),
+											passport_id: passport_id?.toString().trim() || undefined,
+									  }
+									: undefined;
+							})
+							.filter((x) => !!x) as typeof infos,
+						(x) => x.email,
+					);
 
-          if (information.length === 0) {
-            toast.error(
-              "Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!"
-            );
-            return clear();
-          }
+					if (information.length === 0) {
+						toast.error(
+							"Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!",
+						);
+						return clear();
+					}
 
-          setInfos(information);
-        } catch {
-          toast.error(
-            "Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!"
-          );
-          return clear();
-        }
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filesContent]);
+					setInfos(information);
+				} catch {
+					toast.error(
+						"Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!",
+					);
+					return clear();
+				}
+			});
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [filesContent]);
 
-  const generateAndInvite = async () => {
-    const newUsers = infos.filter(
-      (x) => !users.map((u) => u.email).includes(x.email)
-    );
-    const existingUsers = infos
-      .filter((x) => users.map((u) => u.email).includes(x.email))
-      .map((i) => users.find((u) => u.email === i.email))
-      .filter((x) => !!x && x.type === "student") as User[];
+	const generateAndInvite = async () => {
+		const newUsers = infos.filter((x) => !users.map((u) => u.email).includes(x.email));
+		const existingUsers = infos
+			.filter((x) => users.map((u) => u.email).includes(x.email))
+			.map((i) => users.find((u) => u.email === i.email))
+			.filter((x) => !!x && x.type === "student") as User[];
 
-    const newUsersSentence =
-      newUsers.length > 0 ? `generate ${newUsers.length} code(s)` : undefined;
-    const existingUsersSentence =
-      existingUsers.length > 0
-        ? `invite ${existingUsers.length} registered student(s)`
-        : undefined;
-    if (
-      !confirm(
-        `You are about to ${[newUsersSentence, existingUsersSentence]
-          .filter((x) => !!x)
-          .join(" and ")}, are you sure you want to continue?`
-      )
-    )
-      return;
+		const newUsersSentence = newUsers.length > 0 ? `generate ${newUsers.length} code(s)` : undefined;
+		const existingUsersSentence = existingUsers.length > 0 ? `invite ${existingUsers.length} registered student(s)` : undefined;
+		if (
+			!confirm(
+				`You are about to ${[newUsersSentence, existingUsersSentence].filter((x) => !!x).join(" and ")}, are you sure you want to continue?`,
+			)
+		)
+			return;
 
-    setIsLoading(true);
-    Promise.all(
-      existingUsers.map(
-        async (u) =>
-          await axios.post(`/api/invites`, { to: u.id, from: user.id })
-      )
-    )
-      .then(() =>
-        toast.success(
-          `Successfully invited ${existingUsers.length} registered student(s)!`
-        )
-      )
-      .finally(() => {
-        if (newUsers.length === 0) setIsLoading(false);
-      });
+		setIsLoading(true);
+		Promise.all(existingUsers.map(async (u) => await axios.post(`/api/invites`, {to: u.id, from: user.id})))
+			.then(() => toast.success(`Successfully invited ${existingUsers.length} registered student(s)!`))
+			.finally(() => {
+				if (newUsers.length === 0) setIsLoading(false);
+			});
 
-    if (newUsers.length > 0) generateCode(type, newUsers);
-    setInfos([]);
-  };
+		if (newUsers.length > 0) generateCode(type, newUsers);
+		setInfos([]);
+	};
 
-  const generateCode = (type: Type, informations: typeof infos) => {
-    const uid = new ShortUniqueId();
-    const codes = informations.map(() => uid.randomUUID(6));
+	const generateCode = (type: Type, informations: typeof infos) => {
+		const uid = new ShortUniqueId();
+		const codes = informations.map(() => uid.randomUUID(6));
 
-    setIsLoading(true);
-    axios
-      .post<{ ok: boolean; valid?: number; reason?: string }>("/api/code", {
-        type,
-        codes,
-        infos: informations,
-        expiryDate,
-      })
-      .then(({ data, status }) => {
-        if (data.ok) {
-          toast.success(
-            `Successfully generated${
-              data.valid ? ` ${data.valid}/${informations.length}` : ""
-            } ${capitalize(type)} codes and they have been notified by e-mail!`,
-            { toastId: "success" }
-          );
-          return;
-        }
+		setIsLoading(true);
+		axios
+			.post<{ok: boolean; valid?: number; reason?: string}>("/api/code", {
+				type,
+				codes,
+				infos: informations,
+				expiryDate,
+			})
+			.then(({data, status}) => {
+				if (data.ok) {
+					toast.success(
+						`Successfully generated${data.valid ? ` ${data.valid}/${informations.length}` : ""} ${capitalize(
+							type,
+						)} codes and they have been notified by e-mail!`,
+						{toastId: "success"},
+					);
+					return;
+				}
 
-        if (status === 403) {
-          toast.error(data.reason, { toastId: "forbidden" });
-        }
-      })
-      .catch(({ response: { status, data } }) => {
-        if (status === 403) {
-          toast.error(data.reason, { toastId: "forbidden" });
-          return;
-        }
+				if (status === 403) {
+					toast.error(data.reason, {toastId: "forbidden"});
+				}
+			})
+			.catch(({response: {status, data}}) => {
+				if (status === 403) {
+					toast.error(data.reason, {toastId: "forbidden"});
+					return;
+				}
 
-        toast.error(`Something went wrong, please try again later!`, {
-          toastId: "error",
-        });
-      })
-      .finally(() => {
-        setIsLoading(false);
-        return clear();
-      });
-  };
+				toast.error(`Something went wrong, please try again later!`, {
+					toastId: "error",
+				});
+			})
+			.finally(() => {
+				setIsLoading(false);
+				return clear();
+			});
+	};
 
-  return (
-    <>
-      <Modal
-        isOpen={showHelp}
-        onClose={() => setShowHelp(false)}
-        title="Excel File Format"
-      >
-        <div className="mt-4 flex flex-col gap-2">
-          <span>Please upload an Excel file with the following format:</span>
-          <table className="w-full">
-            <thead>
-              <tr>
-                <th className="border border-neutral-200 px-2 py-1">
-                  First Name
-                </th>
-                <th className="border border-neutral-200 px-2 py-1">
-                  Last Name
-                </th>
-                <th className="border border-neutral-200 px-2 py-1">Country</th>
-                <th className="border border-neutral-200 px-2 py-1">
-                  Passport/National ID
-                </th>
-                <th className="border border-neutral-200 px-2 py-1">E-mail</th>
-                <th className="border border-neutral-200 px-2 py-1">
-                  Phone Number
-                </th>
-              </tr>
-            </thead>
-          </table>
-          <span className="mt-4">
-            <b>Notes:</b>
-            <ul>
-              <li>- All incorrect e-mails will be ignored;</li>
-              <li>- All already registered e-mails will be ignored;</li>
-              <li>
-                - You may have a header row with the format above, however, it
-                is not necessary;
-              </li>
-              <li>
-                - All of the e-mails in the file will receive an e-mail to join
-                EnCoach with the role selected below.
-              </li>
-            </ul>
-          </span>
-        </div>
-      </Modal>
-      <div className="border-mti-gray-platinum flex flex-col gap-4 rounded-xl border p-4">
-        <div className="flex items-end justify-between">
-          <label className="text-mti-gray-dim text-base font-normal">
-            Choose an Excel file
-          </label>
-          <div
-            className="tooltip cursor-pointer"
-            data-tip="Excel File Format"
-            onClick={() => setShowHelp(true)}
-          >
-            <BsQuestionCircleFill />
-          </div>
-        </div>
-        <Button
-          onClick={openFilePicker}
-          isLoading={isLoading}
-          disabled={isLoading}
-        >
-          {filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
-        </Button>
-        {user &&
-          checkAccess(user, [
-            "developer",
-            "admin",
-            "corporate",
-            "mastercorporate",
-          ]) && (
-            <>
-              <div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
-                <label className="text-mti-gray-dim text-base font-normal">
-                  Expiry Date
-                </label>
-                <Checkbox
-                  isChecked={isExpiryDateEnabled}
-                  onChange={setIsExpiryDateEnabled}
-                  disabled={!!user.subscriptionExpirationDate}
-                >
-                  Enabled
-                </Checkbox>
-              </div>
-              {isExpiryDateEnabled && (
-                <ReactDatePicker
-                  className={clsx(
-                    "flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
-                    "hover:border-mti-purple tooltip",
-                    "transition duration-300 ease-in-out"
-                  )}
-                  filterDate={(date) =>
-                    moment(date).isAfter(new Date()) &&
-                    (user.subscriptionExpirationDate
-                      ? moment(date).isBefore(user.subscriptionExpirationDate)
-                      : true)
-                  }
-                  dateFormat="dd/MM/yyyy"
-                  selected={expiryDate}
-                  onChange={(date) => setExpiryDate(date)}
-                />
-              )}
-            </>
-          )}
-        <label className="text-mti-gray-dim text-base font-normal">
-          Select the type of user they should be
-        </label>
-        {user && (
-          <select
-            defaultValue="student"
-            onChange={(e) => setType(e.target.value as typeof user.type)}
-            className="flex min-h-[70px] w-full min-w-[350px] cursor-pointer justify-center rounded-full border bg-white p-6 text-sm font-normal focus:outline-none"
-          >
-            {Object.keys(USER_TYPE_LABELS)
-              .filter((x) => {
-                const { list, perm } = USER_TYPE_PERMISSIONS[x as Type];
-                return checkAccess(user, getTypesOfUser(list), perm);
-              })
-              .map((type) => (
-                <option key={type} value={type}>
-                  {USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
-                </option>
-              ))}
-          </select>
-        )}
-        {checkAccess(
-          user,
-          ["developer", "admin", "corporate", "mastercorporate"],
-          "createCodes"
-        ) && (
-          <Button
-            onClick={generateAndInvite}
-            disabled={
-              infos.length === 0 || (isExpiryDateEnabled ? !expiryDate : false)
-            }
-          >
-            Generate & Send
-          </Button>
-        )}
-      </div>
-    </>
-  );
+	return (
+		<>
+			<Modal isOpen={showHelp} onClose={() => setShowHelp(false)} title="Excel File Format">
+				<div className="mt-4 flex flex-col gap-2">
+					<span>Please upload an Excel file with the following format:</span>
+					<table className="w-full">
+						<thead>
+							<tr>
+								<th className="border border-neutral-200 px-2 py-1">First Name</th>
+								<th className="border border-neutral-200 px-2 py-1">Last Name</th>
+								<th className="border border-neutral-200 px-2 py-1">Country</th>
+								<th className="border border-neutral-200 px-2 py-1">Passport/National ID</th>
+								<th className="border border-neutral-200 px-2 py-1">E-mail</th>
+								<th className="border border-neutral-200 px-2 py-1">Phone Number</th>
+							</tr>
+						</thead>
+					</table>
+					<span className="mt-4">
+						<b>Notes:</b>
+						<ul>
+							<li>- All incorrect e-mails will be ignored;</li>
+							<li>- All already registered e-mails will be ignored;</li>
+							<li>- You may have a header row with the format above, however, it is not necessary;</li>
+							<li>- All of the e-mails in the file will receive an e-mail to join EnCoach with the role selected below.</li>
+						</ul>
+					</span>
+				</div>
+			</Modal>
+			<div className="border-mti-gray-platinum flex flex-col gap-4 rounded-xl border p-4">
+				<div className="flex items-end justify-between">
+					<label className="text-mti-gray-dim text-base font-normal">Choose an Excel file</label>
+					<div className="tooltip cursor-pointer" data-tip="Excel File Format" onClick={() => setShowHelp(true)}>
+						<BsQuestionCircleFill />
+					</div>
+				</div>
+				<Button onClick={openFilePicker} isLoading={isLoading} disabled={isLoading}>
+					{filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
+				</Button>
+				{user && checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
+					<>
+						<div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
+							<label className="text-mti-gray-dim text-base font-normal">Expiry Date</label>
+							<Checkbox isChecked={isExpiryDateEnabled} onChange={setIsExpiryDateEnabled} disabled={!!user.subscriptionExpirationDate}>
+								Enabled
+							</Checkbox>
+						</div>
+						{isExpiryDateEnabled && (
+							<ReactDatePicker
+								className={clsx(
+									"flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
+									"hover:border-mti-purple tooltip",
+									"transition duration-300 ease-in-out",
+								)}
+								filterDate={(date) =>
+									moment(date).isAfter(new Date()) &&
+									(user.subscriptionExpirationDate ? moment(date).isBefore(user.subscriptionExpirationDate) : true)
+								}
+								dateFormat="dd/MM/yyyy"
+								selected={expiryDate}
+								onChange={(date) => setExpiryDate(date)}
+							/>
+						)}
+					</>
+				)}
+				<label className="text-mti-gray-dim text-base font-normal">Select the type of user they should be</label>
+				{user && (
+					<select
+						defaultValue="student"
+						onChange={(e) => setType(e.target.value as typeof user.type)}
+						className="flex min-h-[70px] w-full min-w-[350px] cursor-pointer justify-center rounded-full border bg-white p-6 text-sm font-normal focus:outline-none">
+						{Object.keys(USER_TYPE_LABELS)
+							.filter((x) => {
+								const {list, perm} = USER_TYPE_PERMISSIONS[x as Type];
+								return checkAccess(user, getTypesOfUser(list), permissions, perm);
+							})
+							.map((type) => (
+								<option key={type} value={type}>
+									{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
+								</option>
+							))}
+					</select>
+				)}
+				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"], permissions, "createCodes") && (
+					<Button onClick={generateAndInvite} disabled={infos.length === 0 || (isExpiryDateEnabled ? !expiryDate : false)}>
+						Generate & Send
+					</Button>
+				)}
+			</div>
+		</>
+	);
 }
diff --git a/src/pages/(admin)/CodeGenerator.tsx b/src/pages/(admin)/CodeGenerator.tsx
index c34c78fa..876d227e 100644
--- a/src/pages/(admin)/CodeGenerator.tsx
+++ b/src/pages/(admin)/CodeGenerator.tsx
@@ -1,198 +1,162 @@
 import Button from "@/components/Low/Button";
 import Checkbox from "@/components/Low/Checkbox";
-import { PERMISSIONS } from "@/constants/userPermissions";
-import { Type, User } from "@/interfaces/user";
-import { USER_TYPE_LABELS } from "@/resources/user";
+import {PERMISSIONS} from "@/constants/userPermissions";
+import {Type, User} from "@/interfaces/user";
+import {USER_TYPE_LABELS} from "@/resources/user";
 import axios from "axios";
 import clsx from "clsx";
-import { capitalize } from "lodash";
+import {capitalize} from "lodash";
 import moment from "moment";
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
 import ReactDatePicker from "react-datepicker";
-import { toast } from "react-toastify";
+import {toast} from "react-toastify";
 import ShortUniqueId from "short-unique-id";
-import { checkAccess } from "@/utils/permissions";
-import { PermissionType } from "@/interfaces/permissions";
+import {checkAccess} from "@/utils/permissions";
+import {PermissionType} from "@/interfaces/permissions";
+import usePermissions from "@/hooks/usePermissions";
 
 const USER_TYPE_PERMISSIONS: {
-  [key in Type]: { perm: PermissionType | undefined; list: Type[] };
+	[key in Type]: {perm: PermissionType | undefined; list: Type[]};
 } = {
-  student: {
-    perm: "createCodeStudent",
-    list: [],
-  },
-  teacher: {
-    perm: "createCodeTeacher",
-    list: [],
-  },
-  agent: {
-    perm: "createCodeCountryManager",
-    list: [],
-  },
-  corporate: {
-    perm: "createCodeCorporate",
-    list: ["student", "teacher"],
-  },
-  mastercorporate: {
-    perm: undefined,
-    list: ["student", "teacher", "corporate"],
-  },
-  admin: {
-    perm: "createCodeAdmin",
-    list: [
-      "student",
-      "teacher",
-      "agent",
-      "corporate",
-      "admin",
-      "mastercorporate",
-    ],
-  },
-  developer: {
-    perm: undefined,
-    list: [
-      "student",
-      "teacher",
-      "agent",
-      "corporate",
-      "admin",
-      "developer",
-      "mastercorporate",
-    ],
-  },
+	student: {
+		perm: "createCodeStudent",
+		list: [],
+	},
+	teacher: {
+		perm: "createCodeTeacher",
+		list: [],
+	},
+	agent: {
+		perm: "createCodeCountryManager",
+		list: [],
+	},
+	corporate: {
+		perm: "createCodeCorporate",
+		list: ["student", "teacher"],
+	},
+	mastercorporate: {
+		perm: undefined,
+		list: ["student", "teacher", "corporate"],
+	},
+	admin: {
+		perm: "createCodeAdmin",
+		list: ["student", "teacher", "agent", "corporate", "admin", "mastercorporate"],
+	},
+	developer: {
+		perm: undefined,
+		list: ["student", "teacher", "agent", "corporate", "admin", "developer", "mastercorporate"],
+	},
 };
 
-export default function CodeGenerator({ user }: { user: User }) {
-  const [generatedCode, setGeneratedCode] = useState<string>();
-  const [expiryDate, setExpiryDate] = useState<Date | null>(
-    user?.subscriptionExpirationDate
-      ? moment(user.subscriptionExpirationDate).toDate()
-      : null
-  );
-  const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
-  const [type, setType] = useState<Type>("student");
+export default function CodeGenerator({user}: {user: User}) {
+	const [generatedCode, setGeneratedCode] = useState<string>();
+	const [expiryDate, setExpiryDate] = useState<Date | null>(
+		user?.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).toDate() : null,
+	);
+	const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
+	const [type, setType] = useState<Type>("student");
+	const {permissions} = usePermissions(user?.id || "");
 
-  useEffect(() => {
-    if (!isExpiryDateEnabled) setExpiryDate(null);
-  }, [isExpiryDateEnabled]);
+	useEffect(() => {
+		if (!isExpiryDateEnabled) setExpiryDate(null);
+	}, [isExpiryDateEnabled]);
 
-  const generateCode = (type: Type) => {
-    const uid = new ShortUniqueId();
-    const code = uid.randomUUID(6);
+	const generateCode = (type: Type) => {
+		const uid = new ShortUniqueId();
+		const code = uid.randomUUID(6);
 
-    axios
-      .post("/api/code", { type, codes: [code], expiryDate })
-      .then(({ data, status }) => {
-        if (data.ok) {
-          toast.success(`Successfully generated a ${capitalize(type)} code!`, {
-            toastId: "success",
-          });
-          setGeneratedCode(code);
-          return;
-        }
+		axios
+			.post("/api/code", {type, codes: [code], expiryDate})
+			.then(({data, status}) => {
+				if (data.ok) {
+					toast.success(`Successfully generated a ${capitalize(type)} code!`, {
+						toastId: "success",
+					});
+					setGeneratedCode(code);
+					return;
+				}
 
-        if (status === 403) {
-          toast.error(data.reason, { toastId: "forbidden" });
-        }
-      })
-      .catch(({ response: { status, data } }) => {
-        if (status === 403) {
-          toast.error(data.reason, { toastId: "forbidden" });
-          return;
-        }
+				if (status === 403) {
+					toast.error(data.reason, {toastId: "forbidden"});
+				}
+			})
+			.catch(({response: {status, data}}) => {
+				if (status === 403) {
+					toast.error(data.reason, {toastId: "forbidden"});
+					return;
+				}
 
-        toast.error(`Something went wrong, please try again later!`, {
-          toastId: "error",
-        });
-      });
-  };
+				toast.error(`Something went wrong, please try again later!`, {
+					toastId: "error",
+				});
+			});
+	};
 
-  return (
-    <div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
-      <label className="font-normal text-base text-mti-gray-dim">
-        User Code Generator
-      </label>
-      {user && (
-        <select
-          defaultValue="student"
-          onChange={(e) => setType(e.target.value as typeof user.type)}
-          className="p-6 w-full min-w-[350px] min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white"
-        >
-          {Object.keys(USER_TYPE_LABELS)
-            .filter((x) => {
-              const { list, perm } = USER_TYPE_PERMISSIONS[x as Type];
-              return checkAccess(user, list, perm);
-            })
-            .map((type) => (
-              <option key={type} value={type}>
-                {USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
-              </option>
-            ))}
-        </select>
-      )}
-      {user && checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
-        <>
-          <div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
-            <label className="text-mti-gray-dim text-base font-normal">
-              Expiry Date
-            </label>
-            <Checkbox
-              isChecked={isExpiryDateEnabled}
-              onChange={setIsExpiryDateEnabled}
-              disabled={!!user.subscriptionExpirationDate}
-            >
-              Enabled
-            </Checkbox>
-          </div>
-          {isExpiryDateEnabled && (
-            <ReactDatePicker
-              className={clsx(
-                "flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
-                "hover:border-mti-purple tooltip",
-                "transition duration-300 ease-in-out"
-              )}
-              filterDate={(date) =>
-                moment(date).isAfter(new Date()) &&
-                (user.subscriptionExpirationDate
-                  ? moment(date).isBefore(user.subscriptionExpirationDate)
-                  : true)
-              }
-              dateFormat="dd/MM/yyyy"
-              selected={expiryDate}
-              onChange={(date) => setExpiryDate(date)}
-            />
-          )}
-        </>
-      )}
-      {checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"], 'createCodes') && (
-        <Button
-          onClick={() => generateCode(type)}
-          disabled={isExpiryDateEnabled ? !expiryDate : false}
-        >
-          Generate
-        </Button>
-      )}
-      <label className="font-normal text-base text-mti-gray-dim">
-        Generated Code:
-      </label>
-      <div
-        className={clsx(
-          "p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-          "hover:border-mti-purple tooltip",
-          "transition duration-300 ease-in-out"
-        )}
-        data-tip="Click to copy"
-        onClick={() => {
-          if (generatedCode) navigator.clipboard.writeText(generatedCode);
-        }}
-      >
-        {generatedCode}
-      </div>
-      {generatedCode && (
-        <span className="text-sm text-mti-gray-dim font-light">
-          Give this code to the user to complete their registration
-        </span>
-      )}
-    </div>
-  );
+	return (
+		<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
+			<label className="font-normal text-base text-mti-gray-dim">User Code Generator</label>
+			{user && (
+				<select
+					defaultValue="student"
+					onChange={(e) => setType(e.target.value as typeof user.type)}
+					className="p-6 w-full min-w-[350px] min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
+					{Object.keys(USER_TYPE_LABELS)
+						.filter((x) => {
+							const {list, perm} = USER_TYPE_PERMISSIONS[x as Type];
+							return checkAccess(user, list, permissions, perm);
+						})
+						.map((type) => (
+							<option key={type} value={type}>
+								{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
+							</option>
+						))}
+				</select>
+			)}
+			{user && checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
+				<>
+					<div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
+						<label className="text-mti-gray-dim text-base font-normal">Expiry Date</label>
+						<Checkbox isChecked={isExpiryDateEnabled} onChange={setIsExpiryDateEnabled} disabled={!!user.subscriptionExpirationDate}>
+							Enabled
+						</Checkbox>
+					</div>
+					{isExpiryDateEnabled && (
+						<ReactDatePicker
+							className={clsx(
+								"flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
+								"hover:border-mti-purple tooltip",
+								"transition duration-300 ease-in-out",
+							)}
+							filterDate={(date) =>
+								moment(date).isAfter(new Date()) &&
+								(user.subscriptionExpirationDate ? moment(date).isBefore(user.subscriptionExpirationDate) : true)
+							}
+							dateFormat="dd/MM/yyyy"
+							selected={expiryDate}
+							onChange={(date) => setExpiryDate(date)}
+						/>
+					)}
+				</>
+			)}
+			{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"], permissions, "createCodes") && (
+				<Button onClick={() => generateCode(type)} disabled={isExpiryDateEnabled ? !expiryDate : false}>
+					Generate
+				</Button>
+			)}
+			<label className="font-normal text-base text-mti-gray-dim">Generated Code:</label>
+			<div
+				className={clsx(
+					"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+					"hover:border-mti-purple tooltip",
+					"transition duration-300 ease-in-out",
+				)}
+				data-tip="Click to copy"
+				onClick={() => {
+					if (generatedCode) navigator.clipboard.writeText(generatedCode);
+				}}>
+				{generatedCode}
+			</div>
+			{generatedCode && <span className="text-sm text-mti-gray-dim font-light">Give this code to the user to complete their registration</span>}
+		</div>
+	);
 }
diff --git a/src/pages/(admin)/Lists/CodeList.tsx b/src/pages/(admin)/Lists/CodeList.tsx
index cc8d0f79..f95a48a9 100644
--- a/src/pages/(admin)/Lists/CodeList.tsx
+++ b/src/pages/(admin)/Lists/CodeList.tsx
@@ -4,364 +4,306 @@ import Select from "@/components/Low/Select";
 import useCodes from "@/hooks/useCodes";
 import useUser from "@/hooks/useUser";
 import useUsers from "@/hooks/useUsers";
-import { Code, User } from "@/interfaces/user";
-import { USER_TYPE_LABELS } from "@/resources/user";
-import {
-  createColumnHelper,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
+import {Code, User} from "@/interfaces/user";
+import {USER_TYPE_LABELS} from "@/resources/user";
+import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
 import axios from "axios";
 import moment from "moment";
-import { useEffect, useState, useMemo } from "react";
-import { BsTrash } from "react-icons/bs";
-import { toast } from "react-toastify";
+import {useEffect, useState, useMemo} from "react";
+import {BsTrash} from "react-icons/bs";
+import {toast} from "react-toastify";
 import ReactDatePicker from "react-datepicker";
 import clsx from "clsx";
-import { checkAccess } from "@/utils/permissions";
+import {checkAccess} from "@/utils/permissions";
+import usePermissions from "@/hooks/usePermissions";
 
 const columnHelper = createColumnHelper<Code>();
 
-const CreatorCell = ({ id, users }: { id: string; users: User[] }) => {
-  const [creatorUser, setCreatorUser] = useState<User>();
+const CreatorCell = ({id, users}: {id: string; users: User[]}) => {
+	const [creatorUser, setCreatorUser] = useState<User>();
 
-  useEffect(() => {
-    setCreatorUser(users.find((x) => x.id === id));
-  }, [id, users]);
+	useEffect(() => {
+		setCreatorUser(users.find((x) => x.id === id));
+	}, [id, users]);
 
-  return (
-    <>
-      {(creatorUser?.type === "corporate"
-        ? creatorUser?.corporateInformation?.companyInformation?.name
-        : creatorUser?.name || "N/A") || "N/A"}{" "}
-      {creatorUser && `(${USER_TYPE_LABELS[creatorUser.type]})`}
-    </>
-  );
+	return (
+		<>
+			{(creatorUser?.type === "corporate" ? creatorUser?.corporateInformation?.companyInformation?.name : creatorUser?.name || "N/A") || "N/A"}{" "}
+			{creatorUser && `(${USER_TYPE_LABELS[creatorUser.type]})`}
+		</>
+	);
 };
 
-export default function CodeList({ user }: { user: User }) {
-  const [selectedCodes, setSelectedCodes] = useState<string[]>([]);
+export default function CodeList({user}: {user: User}) {
+	const [selectedCodes, setSelectedCodes] = useState<string[]>([]);
 
-  const [filteredCorporate, setFilteredCorporate] = useState<User | undefined>(
-    user?.type === "corporate" ? user : undefined
-  );
-  const [filterAvailability, setFilterAvailability] = useState<
-    "in-use" | "unused"
-  >();
+	const [filteredCorporate, setFilteredCorporate] = useState<User | undefined>(user?.type === "corporate" ? user : undefined);
+	const [filterAvailability, setFilterAvailability] = useState<"in-use" | "unused">();
 
-  // const [filteredCodes, setFilteredCodes] = useState<Code[]>([]);
+	const {permissions} = usePermissions(user?.id || "");
 
-  const { users } = useUsers();
-  const { codes, reload } = useCodes(
-    user?.type === "corporate" ? user?.id : undefined
-  );
+	// const [filteredCodes, setFilteredCodes] = useState<Code[]>([]);
 
-  const [startDate, setStartDate] = useState<Date | null>(moment("01/01/2023").toDate());
+	const {users} = useUsers();
+	const {codes, reload} = useCodes(user?.type === "corporate" ? user?.id : undefined);
+
+	const [startDate, setStartDate] = useState<Date | null>(moment("01/01/2023").toDate());
 	const [endDate, setEndDate] = useState<Date | null>(moment().endOf("day").toDate());
-  const filteredCodes = useMemo(() => {
-    return codes.filter((x) => {
-      // TODO: if the expiry date is missing, it does not make sense to filter by date
-      // so we need to find a way to handle this edge case
-			if(startDate && endDate && x.expiryDate) {
-        const date = moment(x.expiryDate);
-        if(date.isBefore(startDate) || date.isAfter(endDate)) {
-          return false;
-        }
-      }
-      if (filteredCorporate && x.creator !== filteredCorporate.id) return false;
-      if (filterAvailability) {
-        if (filterAvailability === "in-use" && !x.userId) return false;
-        if (filterAvailability === "unused" && x.userId) return false;
-      }
+	const filteredCodes = useMemo(() => {
+		return codes.filter((x) => {
+			// TODO: if the expiry date is missing, it does not make sense to filter by date
+			// so we need to find a way to handle this edge case
+			if (startDate && endDate && x.expiryDate) {
+				const date = moment(x.expiryDate);
+				if (date.isBefore(startDate) || date.isAfter(endDate)) {
+					return false;
+				}
+			}
+			if (filteredCorporate && x.creator !== filteredCorporate.id) return false;
+			if (filterAvailability) {
+				if (filterAvailability === "in-use" && !x.userId) return false;
+				if (filterAvailability === "unused" && x.userId) return false;
+			}
 
-      return true;
-    });
-  }, [codes, startDate, endDate, filteredCorporate, filterAvailability]);
+			return true;
+		});
+	}, [codes, startDate, endDate, filteredCorporate, filterAvailability]);
 
-  const toggleCode = (id: string) => {
-    setSelectedCodes((prev) =>
-      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
-    );
-  };
+	const toggleCode = (id: string) => {
+		setSelectedCodes((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
+	};
 
-  const toggleAllCodes = (checked: boolean) => {
-    if (checked)
-      return setSelectedCodes(
-        filteredCodes.filter((x) => !x.userId).map((x) => x.code)
-      );
+	const toggleAllCodes = (checked: boolean) => {
+		if (checked) return setSelectedCodes(filteredCodes.filter((x) => !x.userId).map((x) => x.code));
 
-    return setSelectedCodes([]);
-  };
+		return setSelectedCodes([]);
+	};
 
-  const deleteCodes = async (codes: string[]) => {
-    if (
-      !confirm(`Are you sure you want to delete these ${codes.length} code(s)?`)
-    )
-      return;
+	const deleteCodes = async (codes: string[]) => {
+		if (!confirm(`Are you sure you want to delete these ${codes.length} code(s)?`)) return;
 
-    const params = new URLSearchParams();
-    codes.forEach((code) => params.append("code", code));
+		const params = new URLSearchParams();
+		codes.forEach((code) => params.append("code", code));
 
-    axios
-      .delete(`/api/code?${params.toString()}`)
-      .then(() => {
-        toast.success(`Deleted the codes!`);
-        setSelectedCodes([]);
-      })
-      .catch((reason) => {
-        if (reason.response.status === 404) {
-          toast.error("Code not found!");
-          return;
-        }
+		axios
+			.delete(`/api/code?${params.toString()}`)
+			.then(() => {
+				toast.success(`Deleted the codes!`);
+				setSelectedCodes([]);
+			})
+			.catch((reason) => {
+				if (reason.response.status === 404) {
+					toast.error("Code not found!");
+					return;
+				}
 
-        if (reason.response.status === 403) {
-          toast.error("You do not have permission to delete this code!");
-          return;
-        }
+				if (reason.response.status === 403) {
+					toast.error("You do not have permission to delete this code!");
+					return;
+				}
 
-        toast.error("Something went wrong, please try again later.");
-      })
-      .finally(reload);
-  };
+				toast.error("Something went wrong, please try again later.");
+			})
+			.finally(reload);
+	};
 
-  const deleteCode = async (code: Code) => {
-    if (!confirm(`Are you sure you want to delete this "${code.code}" code?`))
-      return;
+	const deleteCode = async (code: Code) => {
+		if (!confirm(`Are you sure you want to delete this "${code.code}" code?`)) return;
 
-    axios
-      .delete(`/api/code/${code.code}`)
-      .then(() => toast.success(`Deleted the "${code.code}" exam`))
-      .catch((reason) => {
-        if (reason.response.status === 404) {
-          toast.error("Code not found!");
-          return;
-        }
+		axios
+			.delete(`/api/code/${code.code}`)
+			.then(() => toast.success(`Deleted the "${code.code}" exam`))
+			.catch((reason) => {
+				if (reason.response.status === 404) {
+					toast.error("Code not found!");
+					return;
+				}
 
-        if (reason.response.status === 403) {
-          toast.error("You do not have permission to delete this code!");
-          return;
-        }
+				if (reason.response.status === 403) {
+					toast.error("You do not have permission to delete this code!");
+					return;
+				}
 
-        toast.error("Something went wrong, please try again later.");
-      })
-      .finally(reload);
-  };
+				toast.error("Something went wrong, please try again later.");
+			})
+			.finally(reload);
+	};
 
-  const allowedToDelete = checkAccess(
-    user,
-    ["developer", "admin", "corporate", "mastercorporate"],
-    "deleteCodes"
-  );
+	const allowedToDelete = checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"], permissions, "deleteCodes");
 
-  const defaultColumns = [
-    columnHelper.accessor("code", {
-      id: "codeCheckbox",
-      header: () => (
-        <Checkbox
-          disabled={filteredCodes.filter((x) => !x.userId).length === 0}
-          isChecked={
-            selectedCodes.length ===
-              filteredCodes.filter((x) => !x.userId).length &&
-            filteredCodes.filter((x) => !x.userId).length > 0
-          }
-          onChange={(checked) => toggleAllCodes(checked)}
-        >
-          {""}
-        </Checkbox>
-      ),
-      cell: (info) =>
-        !info.row.original.userId ? (
-          <Checkbox
-            isChecked={selectedCodes.includes(info.getValue())}
-            onChange={() => toggleCode(info.getValue())}
-          >
-            {""}
-          </Checkbox>
-        ) : null,
-    }),
-    columnHelper.accessor("code", {
-      header: "Code",
-      cell: (info) => info.getValue(),
-    }),
-    columnHelper.accessor("creationDate", {
-      header: "Creation Date",
-      cell: (info) =>
-        info.getValue() ? moment(info.getValue()).format("DD/MM/YYYY") : "N/A",
-    }),
-    columnHelper.accessor("email", {
-      header: "Invited E-mail",
-      cell: (info) => info.getValue() || "N/A",
-    }),
-    columnHelper.accessor("creator", {
-      header: "Creator",
-      cell: (info) => <CreatorCell id={info.getValue()} users={users} />,
-    }),
-    columnHelper.accessor("userId", {
-      header: "Availability",
-      cell: (info) =>
-        info.getValue() ? (
-          <span className="flex gap-1 items-center text-mti-green">
-            <div className="w-2 h-2 rounded-full bg-mti-green" /> In Use
-          </span>
-        ) : (
-          <span className="flex gap-1 items-center text-mti-red">
-            <div className="w-2 h-2 rounded-full bg-mti-red" /> Unused
-          </span>
-        ),
-    }),
-    {
-      header: "",
-      id: "actions",
-      cell: ({ row }: { row: { original: Code } }) => {
-        return (
-          <div className="flex gap-4">
-            {allowedToDelete && !row.original.userId && (
-              <div
-                data-tip="Delete"
-                className="cursor-pointer tooltip"
-                onClick={() => deleteCode(row.original)}
-              >
-                <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-              </div>
-            )}
-          </div>
-        );
-      },
-    },
-  ];
+	const defaultColumns = [
+		columnHelper.accessor("code", {
+			id: "codeCheckbox",
+			header: () => (
+				<Checkbox
+					disabled={filteredCodes.filter((x) => !x.userId).length === 0}
+					isChecked={
+						selectedCodes.length === filteredCodes.filter((x) => !x.userId).length && filteredCodes.filter((x) => !x.userId).length > 0
+					}
+					onChange={(checked) => toggleAllCodes(checked)}>
+					{""}
+				</Checkbox>
+			),
+			cell: (info) =>
+				!info.row.original.userId ? (
+					<Checkbox isChecked={selectedCodes.includes(info.getValue())} onChange={() => toggleCode(info.getValue())}>
+						{""}
+					</Checkbox>
+				) : null,
+		}),
+		columnHelper.accessor("code", {
+			header: "Code",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("creationDate", {
+			header: "Creation Date",
+			cell: (info) => (info.getValue() ? moment(info.getValue()).format("DD/MM/YYYY") : "N/A"),
+		}),
+		columnHelper.accessor("email", {
+			header: "Invited E-mail",
+			cell: (info) => info.getValue() || "N/A",
+		}),
+		columnHelper.accessor("creator", {
+			header: "Creator",
+			cell: (info) => <CreatorCell id={info.getValue()} users={users} />,
+		}),
+		columnHelper.accessor("userId", {
+			header: "Availability",
+			cell: (info) =>
+				info.getValue() ? (
+					<span className="flex gap-1 items-center text-mti-green">
+						<div className="w-2 h-2 rounded-full bg-mti-green" /> In Use
+					</span>
+				) : (
+					<span className="flex gap-1 items-center text-mti-red">
+						<div className="w-2 h-2 rounded-full bg-mti-red" /> Unused
+					</span>
+				),
+		}),
+		{
+			header: "",
+			id: "actions",
+			cell: ({row}: {row: {original: Code}}) => {
+				return (
+					<div className="flex gap-4">
+						{allowedToDelete && !row.original.userId && (
+							<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteCode(row.original)}>
+								<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+							</div>
+						)}
+					</div>
+				);
+			},
+		},
+	];
 
-  const table = useReactTable({
-    data: filteredCodes,
-    columns: defaultColumns,
-    getCoreRowModel: getCoreRowModel(),
-  });
+	const table = useReactTable({
+		data: filteredCodes,
+		columns: defaultColumns,
+		getCoreRowModel: getCoreRowModel(),
+	});
 
-  return (
-    <>
-      <div className="flex items-center justify-between pb-4 pt-1">
-        <div className="flex items-center gap-4">
-          <Select
-            className="!w-96 !py-1"
-            disabled={user?.type === "corporate"}
-            isClearable
-            placeholder="Corporate"
-            value={
-              filteredCorporate
-                ? {
-                    label: `${
-                      filteredCorporate.type === "corporate"
-                        ? filteredCorporate.corporateInformation
-                            ?.companyInformation?.name || filteredCorporate.name
-                        : filteredCorporate.name
-                    } (${USER_TYPE_LABELS[filteredCorporate.type]})`,
-                    value: filteredCorporate.id,
-                  }
-                : null
-            }
-            options={users
-              .filter((x) =>
-                ["admin", "developer", "corporate"].includes(x.type)
-              )
-              .map((x) => ({
-                label: `${
-                  x.type === "corporate"
-                    ? x.corporateInformation?.companyInformation?.name || x.name
-                    : x.name
-                } (${USER_TYPE_LABELS[x.type]})`,
-                value: x.id,
-                user: x,
-              }))}
-            onChange={(value) =>
-              setFilteredCorporate(
-                value ? users.find((x) => x.id === value?.value) : undefined
-              )
-            }
-          />
-          <Select
-            className="!w-96 !py-1"
-            placeholder="Availability"
-            isClearable
-            options={[
-              { label: "In Use", value: "in-use" },
-              { label: "Unused", value: "unused" },
-            ]}
-            onChange={(value) =>
-              setFilterAvailability(
-                value ? (value.value as typeof filterAvailability) : undefined
-              )
-            }
-          />
-          <ReactDatePicker
-            dateFormat="dd/MM/yyyy"
-            className="px-4 py-6 w-full text-sm text-center font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
-            selected={startDate}
-            startDate={startDate}
-            endDate={endDate}
-            selectsRange
-            showMonthDropdown
-            filterDate={(date: Date) =>
-              moment(date).isSameOrBefore(moment(new Date()))
-            }
-            onChange={([initialDate, finalDate]: [Date, Date]) => {
-              setStartDate(initialDate ?? moment("01/01/2023").toDate());
-              if (finalDate) {
-                // basicly selecting a final day works as if I'm selecting the first
-                // minute of that day. this way it covers the whole day
-                setEndDate(moment(finalDate).endOf("day").toDate());
-                return;
-              }
-              setEndDate(null);
-            }}
-          />
-        </div>
-        {allowedToDelete && (
-        <div className="flex gap-4 items-center">
-          <span>{selectedCodes.length} code(s) selected</span>
-          <Button
-            disabled={selectedCodes.length === 0}
-            variant="outline"
-            color="red"
-            className="!py-1 px-10"
-            onClick={() => deleteCodes(selectedCodes)}
-          >
-            Delete
-          </Button>
-        </div>
-        )}
-      </div>
-      <table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
-        <thead>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <tr key={headerGroup.id}>
-              {headerGroup.headers.map((header) => (
-                <th className="p-4 text-left" key={header.id}>
-                  {header.isPlaceholder
-                    ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                </th>
-              ))}
-            </tr>
-          ))}
-        </thead>
-        <tbody className="px-2">
-          {table.getRowModel().rows.map((row) => (
-            <tr
-              className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
-              key={row.id}
-            >
-              {row.getVisibleCells().map((cell) => (
-                <td className="px-4 py-2" key={cell.id}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </>
-  );
+	return (
+		<>
+			<div className="flex items-center justify-between pb-4 pt-1">
+				<div className="flex items-center gap-4">
+					<Select
+						className="!w-96 !py-1"
+						disabled={user?.type === "corporate"}
+						isClearable
+						placeholder="Corporate"
+						value={
+							filteredCorporate
+								? {
+										label: `${
+											filteredCorporate.type === "corporate"
+												? filteredCorporate.corporateInformation?.companyInformation?.name || filteredCorporate.name
+												: filteredCorporate.name
+										} (${USER_TYPE_LABELS[filteredCorporate.type]})`,
+										value: filteredCorporate.id,
+								  }
+								: null
+						}
+						options={users
+							.filter((x) => ["admin", "developer", "corporate"].includes(x.type))
+							.map((x) => ({
+								label: `${x.type === "corporate" ? x.corporateInformation?.companyInformation?.name || x.name : x.name} (${
+									USER_TYPE_LABELS[x.type]
+								})`,
+								value: x.id,
+								user: x,
+							}))}
+						onChange={(value) => setFilteredCorporate(value ? users.find((x) => x.id === value?.value) : undefined)}
+					/>
+					<Select
+						className="!w-96 !py-1"
+						placeholder="Availability"
+						isClearable
+						options={[
+							{label: "In Use", value: "in-use"},
+							{label: "Unused", value: "unused"},
+						]}
+						onChange={(value) => setFilterAvailability(value ? (value.value as typeof filterAvailability) : undefined)}
+					/>
+					<ReactDatePicker
+						dateFormat="dd/MM/yyyy"
+						className="px-4 py-6 w-full text-sm text-center font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
+						selected={startDate}
+						startDate={startDate}
+						endDate={endDate}
+						selectsRange
+						showMonthDropdown
+						filterDate={(date: Date) => moment(date).isSameOrBefore(moment(new Date()))}
+						onChange={([initialDate, finalDate]: [Date, Date]) => {
+							setStartDate(initialDate ?? moment("01/01/2023").toDate());
+							if (finalDate) {
+								// basicly selecting a final day works as if I'm selecting the first
+								// minute of that day. this way it covers the whole day
+								setEndDate(moment(finalDate).endOf("day").toDate());
+								return;
+							}
+							setEndDate(null);
+						}}
+					/>
+				</div>
+				{allowedToDelete && (
+					<div className="flex gap-4 items-center">
+						<span>{selectedCodes.length} code(s) selected</span>
+						<Button
+							disabled={selectedCodes.length === 0}
+							variant="outline"
+							color="red"
+							className="!py-1 px-10"
+							onClick={() => deleteCodes(selectedCodes)}>
+							Delete
+						</Button>
+					</div>
+				)}
+			</div>
+			<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+				<thead>
+					{table.getHeaderGroups().map((headerGroup) => (
+						<tr key={headerGroup.id}>
+							{headerGroup.headers.map((header) => (
+								<th className="p-4 text-left" key={header.id}>
+									{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+								</th>
+							))}
+						</tr>
+					))}
+				</thead>
+				<tbody className="px-2">
+					{table.getRowModel().rows.map((row) => (
+						<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
+							{row.getVisibleCells().map((cell) => (
+								<td className="px-4 py-2" key={cell.id}>
+									{flexRender(cell.column.columnDef.cell, cell.getContext())}
+								</td>
+							))}
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</>
+	);
 }
diff --git a/src/pages/(admin)/Lists/GroupList.tsx b/src/pages/(admin)/Lists/GroupList.tsx
index 2d65ed8a..4db19d47 100644
--- a/src/pages/(admin)/Lists/GroupList.tsx
+++ b/src/pages/(admin)/Lists/GroupList.tsx
@@ -3,474 +3,341 @@ import Input from "@/components/Low/Input";
 import Modal from "@/components/Modal";
 import useGroups from "@/hooks/useGroups";
 import useUsers from "@/hooks/useUsers";
-import { CorporateUser, Group, User } from "@/interfaces/user";
-import {
-  createColumnHelper,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
+import {CorporateUser, Group, User} from "@/interfaces/user";
+import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
 import axios from "axios";
-import { capitalize, uniq } from "lodash";
-import { useEffect, useState } from "react";
-import { BsPencil, BsQuestionCircleFill, BsTrash } from "react-icons/bs";
+import {capitalize, uniq} from "lodash";
+import {useEffect, useState} from "react";
+import {BsPencil, BsQuestionCircleFill, BsTrash} from "react-icons/bs";
 import Select from "react-select";
-import { toast } from "react-toastify";
+import {toast} from "react-toastify";
 import readXlsxFile from "read-excel-file";
-import { useFilePicker } from "use-file-picker";
-import { getUserCorporate } from "@/utils/groups";
-import { isAgentUser, isCorporateUser } from "@/resources/user";
-import { checkAccess } from "@/utils/permissions";
+import {useFilePicker} from "use-file-picker";
+import {getUserCorporate} from "@/utils/groups";
+import {isAgentUser, isCorporateUser} from "@/resources/user";
+import {checkAccess} from "@/utils/permissions";
+import usePermissions from "@/hooks/usePermissions";
 
 const columnHelper = createColumnHelper<Group>();
-const EMAIL_REGEX = new RegExp(
-  /^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/
-);
+const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
 
-const LinkedCorporate = ({
-  userId,
-  users,
-  groups,
-}: {
-  userId: string;
-  users: User[];
-  groups: Group[];
-}) => {
-  const [companyName, setCompanyName] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
+const LinkedCorporate = ({userId, users, groups}: {userId: string; users: User[]; groups: Group[]}) => {
+	const [companyName, setCompanyName] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
 
-  useEffect(() => {
-    const user = users.find((u) => u.id === userId);
-    if (!user) return setCompanyName("");
+	useEffect(() => {
+		const user = users.find((u) => u.id === userId);
+		if (!user) return setCompanyName("");
 
-    if (isCorporateUser(user))
-      return setCompanyName(
-        user.corporateInformation?.companyInformation?.name || user.name
-      );
-    if (isAgentUser(user))
-      return setCompanyName(user.agentInformation?.companyName || user.name);
+		if (isCorporateUser(user)) return setCompanyName(user.corporateInformation?.companyInformation?.name || user.name);
+		if (isAgentUser(user)) return setCompanyName(user.agentInformation?.companyName || user.name);
 
-    const belongingGroups = groups.filter((x) =>
-      x.participants.includes(userId)
-    );
-    const belongingGroupsAdmins = belongingGroups
-      .map((x) => users.find((u) => u.id === x.admin))
-      .filter((x) => !!x && isCorporateUser(x));
+		const belongingGroups = groups.filter((x) => x.participants.includes(userId));
+		const belongingGroupsAdmins = belongingGroups.map((x) => users.find((u) => u.id === x.admin)).filter((x) => !!x && isCorporateUser(x));
 
-    if (belongingGroupsAdmins.length === 0) return setCompanyName("");
+		if (belongingGroupsAdmins.length === 0) return setCompanyName("");
 
-    const admin = belongingGroupsAdmins[0] as CorporateUser;
-    setCompanyName(
-      admin.corporateInformation?.companyInformation.name || admin.name
-    );
-  }, [userId, users, groups]);
+		const admin = belongingGroupsAdmins[0] as CorporateUser;
+		setCompanyName(admin.corporateInformation?.companyInformation.name || admin.name);
+	}, [userId, users, groups]);
 
-  return isLoading ? (
-    <span className="animate-pulse">Loading...</span>
-  ) : (
-    <>{companyName}</>
-  );
+	return isLoading ? <span className="animate-pulse">Loading...</span> : <>{companyName}</>;
 };
 
 interface CreateDialogProps {
-  user: User;
-  users: User[];
-  group?: Group;
-  onClose: () => void;
+	user: User;
+	users: User[];
+	group?: Group;
+	onClose: () => void;
 }
 
-const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
-  const [name, setName] = useState<string | undefined>(
-    group?.name || undefined
-  );
-  const [admin, setAdmin] = useState<string>(group?.admin || user.id);
-  const [participants, setParticipants] = useState<string[]>(
-    group?.participants || []
-  );
-  const [isLoading, setIsLoading] = useState(false);
+const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
+	const [name, setName] = useState<string | undefined>(group?.name || undefined);
+	const [admin, setAdmin] = useState<string>(group?.admin || user.id);
+	const [participants, setParticipants] = useState<string[]>(group?.participants || []);
+	const [isLoading, setIsLoading] = useState(false);
 
-  const { openFilePicker, filesContent, clear } = useFilePicker({
-    accept: ".xlsx",
-    multiple: false,
-    readAs: "ArrayBuffer",
-  });
+	const {openFilePicker, filesContent, clear} = useFilePicker({
+		accept: ".xlsx",
+		multiple: false,
+		readAs: "ArrayBuffer",
+	});
 
-  useEffect(() => {
-    if (filesContent.length > 0) {
-      setIsLoading(true);
+	useEffect(() => {
+		if (filesContent.length > 0) {
+			setIsLoading(true);
 
-      const file = filesContent[0];
-      readXlsxFile(file.content).then((rows) => {
-        const emails = uniq(
-          rows
-            .map((row) => {
-              const [email] = row as string[];
-              return EMAIL_REGEX.test(email) &&
-                !users.map((u) => u.email).includes(email)
-                ? email.toString().trim()
-                : undefined;
-            })
-            .filter((x) => !!x)
-        );
+			const file = filesContent[0];
+			readXlsxFile(file.content).then((rows) => {
+				const emails = uniq(
+					rows
+						.map((row) => {
+							const [email] = row as string[];
+							return EMAIL_REGEX.test(email) && !users.map((u) => u.email).includes(email) ? email.toString().trim() : undefined;
+						})
+						.filter((x) => !!x),
+				);
 
-        if (emails.length === 0) {
-          toast.error("Please upload an Excel file containing e-mails!");
-          clear();
-          setIsLoading(false);
-          return;
-        }
+				if (emails.length === 0) {
+					toast.error("Please upload an Excel file containing e-mails!");
+					clear();
+					setIsLoading(false);
+					return;
+				}
 
-        const emailUsers = [...new Set(emails)]
-          .map((x) => users.find((y) => y.email.toLowerCase() === x))
-          .filter((x) => x !== undefined);
-        const filteredUsers = emailUsers.filter(
-          (x) =>
-            ((user.type === "developer" ||
-              user.type === "admin" ||
-              user.type === "corporate" ||
-              user.type === "mastercorporate") &&
-              (x?.type === "student" || x?.type === "teacher")) ||
-            (user.type === "teacher" && x?.type === "student")
-        );
+				const emailUsers = [...new Set(emails)].map((x) => users.find((y) => y.email.toLowerCase() === x)).filter((x) => x !== undefined);
+				const filteredUsers = emailUsers.filter(
+					(x) =>
+						((user.type === "developer" || user.type === "admin" || user.type === "corporate" || user.type === "mastercorporate") &&
+							(x?.type === "student" || x?.type === "teacher")) ||
+						(user.type === "teacher" && x?.type === "student"),
+				);
 
-        setParticipants(filteredUsers.filter((x) => !!x).map((x) => x!.id));
-        toast.success(
-          user.type !== "teacher"
-            ? "Added all teachers and students found in the file you've provided!"
-            : "Added all students found in the file you've provided!",
-          { toastId: "upload-success" }
-        );
-        setIsLoading(false);
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filesContent, user.type, users]);
+				setParticipants(filteredUsers.filter((x) => !!x).map((x) => x!.id));
+				toast.success(
+					user.type !== "teacher"
+						? "Added all teachers and students found in the file you've provided!"
+						: "Added all students found in the file you've provided!",
+					{toastId: "upload-success"},
+				);
+				setIsLoading(false);
+			});
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [filesContent, user.type, users]);
 
-  const submit = () => {
-    setIsLoading(true);
+	const submit = () => {
+		setIsLoading(true);
 
-    if (name !== group?.name && (name === "Students" || name === "Teachers")) {
-      toast.error(
-        "That group name is reserved and cannot be used, please enter another one."
-      );
-      setIsLoading(false);
-      return;
-    }
+		if (name !== group?.name && (name === "Students" || name === "Teachers")) {
+			toast.error("That group name is reserved and cannot be used, please enter another one.");
+			setIsLoading(false);
+			return;
+		}
 
-    (group ? axios.patch : axios.post)(
-      group ? `/api/groups/${group.id}` : "/api/groups",
-      { name, admin, participants }
-    )
-      .then(() => {
-        toast.success(
-          `Group "${name}" ${group ? "edited" : "created"} successfully`
-        );
-        return true;
-      })
-      .catch(() => {
-        toast.error("Something went wrong, please try again later!");
-        return false;
-      })
-      .finally(() => {
-        setIsLoading(false);
-        onClose();
-      });
-  };
+		(group ? axios.patch : axios.post)(group ? `/api/groups/${group.id}` : "/api/groups", {name, admin, participants})
+			.then(() => {
+				toast.success(`Group "${name}" ${group ? "edited" : "created"} successfully`);
+				return true;
+			})
+			.catch(() => {
+				toast.error("Something went wrong, please try again later!");
+				return false;
+			})
+			.finally(() => {
+				setIsLoading(false);
+				onClose();
+			});
+	};
 
-  return (
-    <div className="mt-4 flex w-full flex-col gap-12 px-4 py-2">
-      <div className="flex flex-col gap-8">
-        <Input
-          name="name"
-          type="text"
-          label="Name"
-          defaultValue={name}
-          onChange={setName}
-          required
-          disabled={group?.disableEditing}
-        />
-        <div className="flex w-full flex-col gap-3">
-          <div className="flex items-center gap-2">
-            <label className="text-mti-gray-dim text-base font-normal">
-              Participants
-            </label>
-            <div
-              className="tooltip"
-              data-tip="The Excel file should only include a column with the desired e-mails."
-            >
-              <BsQuestionCircleFill />
-            </div>
-          </div>
-          <div className="flex w-full gap-8">
-            <Select
-              className="w-full"
-              value={participants.map((x) => ({
-                value: x,
-                label: `${users.find((y) => y.id === x)?.email} - ${
-                  users.find((y) => y.id === x)?.name
-                }`,
-              }))}
-              placeholder="Participants..."
-              defaultValue={participants.map((x) => ({
-                value: x,
-                label: `${users.find((y) => y.id === x)?.email} - ${
-                  users.find((y) => y.id === x)?.name
-                }`,
-              }))}
-              options={users
-                .filter((x) =>
-                  user.type === "teacher"
-                    ? x.type === "student"
-                    : x.type === "student" || x.type === "teacher"
-                )
-                .map((x) => ({ value: x.id, label: `${x.email} - ${x.name}` }))}
-              onChange={(value) => setParticipants(value.map((x) => x.value))}
-              isMulti
-              isSearchable
-              menuPortalTarget={document?.body}
-              styles={{
-                menuPortal: (base) => ({ ...base, zIndex: 9999 }),
-                control: (styles) => ({
-                  ...styles,
-                  backgroundColor: "white",
-                  borderRadius: "999px",
-                  padding: "1rem 1.5rem",
-                  zIndex: "40",
-                }),
-              }}
-            />
-            {user.type !== "teacher" && (
-              <Button
-                className="w-full max-w-[300px]"
-                onClick={openFilePicker}
-                isLoading={isLoading}
-                variant="outline"
-              >
-                {filesContent.length === 0
-                  ? "Upload participants Excel file"
-                  : filesContent[0].name}
-              </Button>
-            )}
-          </div>
-        </div>
-      </div>
-      <div className="mt-8 flex w-full items-center justify-end gap-8">
-        <Button
-          variant="outline"
-          color="red"
-          className="w-full max-w-[200px]"
-          isLoading={isLoading}
-          onClick={onClose}
-        >
-          Cancel
-        </Button>
-        <Button
-          className="w-full max-w-[200px]"
-          onClick={submit}
-          isLoading={isLoading}
-          disabled={!name}
-        >
-          Submit
-        </Button>
-      </div>
-    </div>
-  );
+	return (
+		<div className="mt-4 flex w-full flex-col gap-12 px-4 py-2">
+			<div className="flex flex-col gap-8">
+				<Input name="name" type="text" label="Name" defaultValue={name} onChange={setName} required disabled={group?.disableEditing} />
+				<div className="flex w-full flex-col gap-3">
+					<div className="flex items-center gap-2">
+						<label className="text-mti-gray-dim text-base font-normal">Participants</label>
+						<div className="tooltip" data-tip="The Excel file should only include a column with the desired e-mails.">
+							<BsQuestionCircleFill />
+						</div>
+					</div>
+					<div className="flex w-full gap-8">
+						<Select
+							className="w-full"
+							value={participants.map((x) => ({
+								value: x,
+								label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
+							}))}
+							placeholder="Participants..."
+							defaultValue={participants.map((x) => ({
+								value: x,
+								label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
+							}))}
+							options={users
+								.filter((x) => (user.type === "teacher" ? x.type === "student" : x.type === "student" || x.type === "teacher"))
+								.map((x) => ({value: x.id, label: `${x.email} - ${x.name}`}))}
+							onChange={(value) => setParticipants(value.map((x) => x.value))}
+							isMulti
+							isSearchable
+							menuPortalTarget={document?.body}
+							styles={{
+								menuPortal: (base) => ({...base, zIndex: 9999}),
+								control: (styles) => ({
+									...styles,
+									backgroundColor: "white",
+									borderRadius: "999px",
+									padding: "1rem 1.5rem",
+									zIndex: "40",
+								}),
+							}}
+						/>
+						{user.type !== "teacher" && (
+							<Button className="w-full max-w-[300px]" onClick={openFilePicker} isLoading={isLoading} variant="outline">
+								{filesContent.length === 0 ? "Upload participants Excel file" : filesContent[0].name}
+							</Button>
+						)}
+					</div>
+				</div>
+			</div>
+			<div className="mt-8 flex w-full items-center justify-end gap-8">
+				<Button variant="outline" color="red" className="w-full max-w-[200px]" isLoading={isLoading} onClick={onClose}>
+					Cancel
+				</Button>
+				<Button className="w-full max-w-[200px]" onClick={submit} isLoading={isLoading} disabled={!name}>
+					Submit
+				</Button>
+			</div>
+		</div>
+	);
 };
 
 const filterTypes = ["corporate", "teacher", "mastercorporate"];
 
-export default function GroupList({ user }: { user: User }) {
-  const [isCreating, setIsCreating] = useState(false);
-  const [editingGroup, setEditingGroup] = useState<Group>();
-  const [filterByUser, setFilterByUser] = useState(false);
+export default function GroupList({user}: {user: User}) {
+	const [isCreating, setIsCreating] = useState(false);
+	const [editingGroup, setEditingGroup] = useState<Group>();
+	const [filterByUser, setFilterByUser] = useState(false);
 
-  const { users } = useUsers();
-  const { groups, reload } = useGroups(
-    user && filterTypes.includes(user?.type) ? user.id : undefined,
-    user?.type
-  );
+	const {permissions} = usePermissions(user?.id || "");
 
-  useEffect(() => {
-    if (
-      user &&
-      ["corporate", "teacher", "mastercorporate"].includes(user.type)
-    ) {
-      setFilterByUser(true);
-    }
-  }, [user]);
+	const {users} = useUsers();
+	const {groups, reload} = useGroups(user && filterTypes.includes(user?.type) ? user.id : undefined, user?.type);
 
-  const deleteGroup = (group: Group) => {
-    if (!confirm(`Are you sure you want to delete "${group.name}"?`)) return;
+	useEffect(() => {
+		if (user && ["corporate", "teacher", "mastercorporate"].includes(user.type)) {
+			setFilterByUser(true);
+		}
+	}, [user]);
 
-    axios
-      .delete<{ ok: boolean }>(`/api/groups/${group.id}`)
-      .then(() => toast.success(`Group "${group.name}" deleted successfully`))
-      .catch(() => toast.error("Something went wrong, please try again later!"))
-      .finally(reload);
-  };
+	const deleteGroup = (group: Group) => {
+		if (!confirm(`Are you sure you want to delete "${group.name}"?`)) return;
 
-  const defaultColumns = [
-    columnHelper.accessor("id", {
-      header: "ID",
-      cell: (info) => info.getValue(),
-    }),
-    columnHelper.accessor("name", {
-      header: "Name",
-      cell: (info) => info.getValue(),
-    }),
-    columnHelper.accessor("admin", {
-      header: "Admin",
-      cell: (info) => (
-        <div
-          className="tooltip"
-          data-tip={capitalize(
-            users.find((x) => x.id === info.getValue())?.type
-          )}
-        >
-          {users.find((x) => x.id === info.getValue())?.name}
-        </div>
-      ),
-    }),
-    columnHelper.accessor("admin", {
-      header: "Linked Corporate",
-      cell: (info) => (
-        <LinkedCorporate
-          userId={info.getValue()}
-          users={users}
-          groups={groups}
-        />
-      ),
-    }),
-    columnHelper.accessor("participants", {
-      header: "Participants",
-      cell: (info) =>
-        info
-          .getValue()
-          .map((x) => users.find((y) => y.id === x)?.name)
-          .join(", "),
-    }),
-    {
-      header: "",
-      id: "actions",
-      cell: ({ row }: { row: { original: Group } }) => {
-        return (
-          <>
-            {user &&
-              (checkAccess(user, ["developer", "admin"]) ||
-                user.id === row.original.admin) && (
-                <div className="flex gap-2">
-                  {(!row.original.disableEditing ||
-                    checkAccess(user, ["developer", "admin"]),
-                  "editGroup") && (
-                    <div
-                      data-tip="Edit"
-                      className="tooltip cursor-pointer"
-                      onClick={() => setEditingGroup(row.original)}
-                    >
-                      <BsPencil className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
-                    </div>
-                  )}
-                  {(!row.original.disableEditing ||
-                    checkAccess(user, ["developer", "admin"]),
-                  "deleteGroup") && (
-                    <div
-                      data-tip="Delete"
-                      className="tooltip cursor-pointer"
-                      onClick={() => deleteGroup(row.original)}
-                    >
-                      <BsTrash className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
-                    </div>
-                  )}
-                </div>
-              )}
-          </>
-        );
-      },
-    },
-  ];
+		axios
+			.delete<{ok: boolean}>(`/api/groups/${group.id}`)
+			.then(() => toast.success(`Group "${group.name}" deleted successfully`))
+			.catch(() => toast.error("Something went wrong, please try again later!"))
+			.finally(reload);
+	};
 
-  const table = useReactTable({
-    data: groups,
-    columns: defaultColumns,
-    getCoreRowModel: getCoreRowModel(),
-  });
+	const defaultColumns = [
+		columnHelper.accessor("id", {
+			header: "ID",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("name", {
+			header: "Name",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("admin", {
+			header: "Admin",
+			cell: (info) => (
+				<div className="tooltip" data-tip={capitalize(users.find((x) => x.id === info.getValue())?.type)}>
+					{users.find((x) => x.id === info.getValue())?.name}
+				</div>
+			),
+		}),
+		columnHelper.accessor("admin", {
+			header: "Linked Corporate",
+			cell: (info) => <LinkedCorporate userId={info.getValue()} users={users} groups={groups} />,
+		}),
+		columnHelper.accessor("participants", {
+			header: "Participants",
+			cell: (info) =>
+				info
+					.getValue()
+					.map((x) => users.find((y) => y.id === x)?.name)
+					.join(", "),
+		}),
+		{
+			header: "",
+			id: "actions",
+			cell: ({row}: {row: {original: Group}}) => {
+				return (
+					<>
+						{user && (checkAccess(user, ["developer", "admin"]) || user.id === row.original.admin) && (
+							<div className="flex gap-2">
+								{(!row.original.disableEditing || checkAccess(user, ["developer", "admin"]), "editGroup") && (
+									<div data-tip="Edit" className="tooltip cursor-pointer" onClick={() => setEditingGroup(row.original)}>
+										<BsPencil className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
+									</div>
+								)}
+								{(!row.original.disableEditing || checkAccess(user, ["developer", "admin"]), "deleteGroup") && (
+									<div data-tip="Delete" className="tooltip cursor-pointer" onClick={() => deleteGroup(row.original)}>
+										<BsTrash className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
+									</div>
+								)}
+							</div>
+						)}
+					</>
+				);
+			},
+		},
+	];
 
-  const closeModal = () => {
-    setIsCreating(false);
-    setEditingGroup(undefined);
-    reload();
-  };
+	const table = useReactTable({
+		data: groups,
+		columns: defaultColumns,
+		getCoreRowModel: getCoreRowModel(),
+	});
 
-  return (
-    <div className="h-full w-full rounded-xl">
-      <Modal
-        isOpen={isCreating || !!editingGroup}
-        onClose={closeModal}
-        title={editingGroup ? `Editing ${editingGroup.name}` : "New Group"}
-      >
-        <CreatePanel
-          group={editingGroup}
-          user={user}
-          onClose={closeModal}
-          users={
-            user?.type === "corporate" || user?.type === "teacher"
-              ? users.filter(
-                  (u) =>
-                    groups
-                      .filter((g) => g.admin === user.id)
-                      .flatMap((g) => g.participants)
-                      .includes(u.id) ||
-                    groups.flatMap((g) => g.participants).includes(u.id)
-                )
-              : users
-          }
-        />
-      </Modal>
-      <table className="bg-mti-purple-ultralight/40 w-full rounded-xl">
-        <thead>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <tr key={headerGroup.id}>
-              {headerGroup.headers.map((header) => (
-                <th className="py-4" key={header.id}>
-                  {header.isPlaceholder
-                    ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                </th>
-              ))}
-            </tr>
-          ))}
-        </thead>
-        <tbody className="px-2">
-          {table.getRowModel().rows.map((row) => (
-            <tr
-              className="even:bg-mti-purple-ultralight/40 rounded-lg py-2 odd:bg-white"
-              key={row.id}
-            >
-              {row.getVisibleCells().map((cell) => (
-                <td className="px-4 py-2" key={cell.id}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
+	const closeModal = () => {
+		setIsCreating(false);
+		setEditingGroup(undefined);
+		reload();
+	};
 
-      {checkAccess(
-        user,
-        ["teacher", "corporate", "mastercorporate", "admin", "developer"],
-        "createGroup"
-      ) && (
-        <button
-          onClick={() => setIsCreating(true)}
-          className="bg-mti-purple-light hover:bg-mti-purple w-full py-2 text-white transition duration-300 ease-in-out"
-        >
-          New Group
-        </button>
-      )}
-    </div>
-  );
+	return (
+		<div className="h-full w-full rounded-xl">
+			<Modal isOpen={isCreating || !!editingGroup} onClose={closeModal} title={editingGroup ? `Editing ${editingGroup.name}` : "New Group"}>
+				<CreatePanel
+					group={editingGroup}
+					user={user}
+					onClose={closeModal}
+					users={
+						user?.type === "corporate" || user?.type === "teacher"
+							? users.filter(
+									(u) =>
+										groups
+											.filter((g) => g.admin === user.id)
+											.flatMap((g) => g.participants)
+											.includes(u.id) || groups.flatMap((g) => g.participants).includes(u.id),
+							  )
+							: users
+					}
+				/>
+			</Modal>
+			<table className="bg-mti-purple-ultralight/40 w-full rounded-xl">
+				<thead>
+					{table.getHeaderGroups().map((headerGroup) => (
+						<tr key={headerGroup.id}>
+							{headerGroup.headers.map((header) => (
+								<th className="py-4" key={header.id}>
+									{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+								</th>
+							))}
+						</tr>
+					))}
+				</thead>
+				<tbody className="px-2">
+					{table.getRowModel().rows.map((row) => (
+						<tr className="even:bg-mti-purple-ultralight/40 rounded-lg py-2 odd:bg-white" key={row.id}>
+							{row.getVisibleCells().map((cell) => (
+								<td className="px-4 py-2" key={cell.id}>
+									{flexRender(cell.column.columnDef.cell, cell.getContext())}
+								</td>
+							))}
+						</tr>
+					))}
+				</tbody>
+			</table>
+
+			{checkAccess(user, ["teacher", "corporate", "mastercorporate", "admin", "developer"], permissions, "createGroup") && (
+				<button
+					onClick={() => setIsCreating(true)}
+					className="bg-mti-purple-light hover:bg-mti-purple w-full py-2 text-white transition duration-300 ease-in-out">
+					New Group
+				</button>
+			)}
+		</div>
+	);
 }
diff --git a/src/pages/(admin)/Lists/UserList.tsx b/src/pages/(admin)/Lists/UserList.tsx
index 430bd542..cd939522 100644
--- a/src/pages/(admin)/Lists/UserList.tsx
+++ b/src/pages/(admin)/Lists/UserList.tsx
@@ -1,966 +1,667 @@
 import Button from "@/components/Low/Button";
-import { PERMISSIONS } from "@/constants/userPermissions";
+import {PERMISSIONS} from "@/constants/userPermissions";
 import useGroups from "@/hooks/useGroups";
 import useUsers from "@/hooks/useUsers";
-import { Type, User, userTypes, CorporateUser, Group } from "@/interfaces/user";
-import { Popover, Transition } from "@headlessui/react";
-import {
-  createColumnHelper,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
+import {Type, User, userTypes, CorporateUser, Group} from "@/interfaces/user";
+import {Popover, Transition} from "@headlessui/react";
+import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
 import axios from "axios";
 import clsx from "clsx";
-import { capitalize, reverse } from "lodash";
+import {capitalize, reverse} from "lodash";
 import moment from "moment";
-import { Fragment, useEffect, useState } from "react";
-import {
-  BsArrowDown,
-  BsArrowDownUp,
-  BsArrowUp,
-  BsCheck,
-  BsCheckCircle,
-  BsEye,
-  BsFillExclamationOctagonFill,
-  BsPerson,
-  BsTrash,
-} from "react-icons/bs";
-import { toast } from "react-toastify";
-import { countries, TCountries } from "countries-list";
+import {Fragment, useEffect, useState} from "react";
+import {BsArrowDown, BsArrowDownUp, BsArrowUp, BsCheck, BsCheckCircle, BsEye, BsFillExclamationOctagonFill, BsPerson, BsTrash} from "react-icons/bs";
+import {toast} from "react-toastify";
+import {countries, TCountries} from "countries-list";
 import countryCodes from "country-codes-list";
 import Modal from "@/components/Modal";
 import UserCard from "@/components/UserCard";
-import {
-  getUserCompanyName,
-  isAgentUser,
-  USER_TYPE_LABELS,
-} from "@/resources/user";
+import {getUserCompanyName, isAgentUser, USER_TYPE_LABELS} from "@/resources/user";
 import useFilterStore from "@/stores/listFilterStore";
-import { useRouter } from "next/router";
-import { isCorporateUser } from "@/resources/user";
-import { useListSearch } from "@/hooks/useListSearch";
-import { getUserCorporate } from "@/utils/groups";
-import { asyncSorter } from "@/utils";
-import { exportListToExcel, UserListRow } from "@/utils/users";
-import { checkAccess } from "@/utils/permissions";
-import { PermissionType } from "@/interfaces/permissions";
+import {useRouter} from "next/router";
+import {isCorporateUser} from "@/resources/user";
+import {useListSearch} from "@/hooks/useListSearch";
+import {getUserCorporate} from "@/utils/groups";
+import {asyncSorter} from "@/utils";
+import {exportListToExcel, UserListRow} from "@/utils/users";
+import {checkAccess} from "@/utils/permissions";
+import {PermissionType} from "@/interfaces/permissions";
+import usePermissions from "@/hooks/usePermissions";
 const columnHelper = createColumnHelper<User>();
-const searchFields = [
-  ["name"],
-  ["email"],
-  ["corporateInformation", "companyInformation", "name"],
-];
+const searchFields = [["name"], ["email"], ["corporateInformation", "companyInformation", "name"]];
 
-const CompanyNameCell = ({
-  users,
-  user,
-  groups,
-}: {
-  user: User;
-  users: User[];
-  groups: Group[];
-}) => {
-  const [companyName, setCompanyName] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
+const CompanyNameCell = ({users, user, groups}: {user: User; users: User[]; groups: Group[]}) => {
+	const [companyName, setCompanyName] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
 
-  useEffect(() => {
-    const name = getUserCompanyName(user, users, groups);
-    setCompanyName(name);
-  }, [user, users, groups]);
+	useEffect(() => {
+		const name = getUserCompanyName(user, users, groups);
+		setCompanyName(name);
+	}, [user, users, groups]);
 
-  return isLoading ? (
-    <span className="animate-pulse">Loading...</span>
-  ) : (
-    <>{companyName}</>
-  );
+	return isLoading ? <span className="animate-pulse">Loading...</span> : <>{companyName}</>;
 };
 
 export default function UserList({
-  user,
-  filters = [],
-  renderHeader,
+	user,
+	filters = [],
+	renderHeader,
 }: {
-  user: User;
-  filters?: ((user: User) => boolean)[];
-  renderHeader?: (total: number) => JSX.Element;
+	user: User;
+	filters?: ((user: User) => boolean)[];
+	renderHeader?: (total: number) => JSX.Element;
 }) {
-  const [showDemographicInformation, setShowDemographicInformation] =
-    useState(false);
-  const [sorter, setSorter] = useState<string>();
-  const [displayUsers, setDisplayUsers] = useState<User[]>([]);
-  const [selectedUser, setSelectedUser] = useState<User>();
+	const [showDemographicInformation, setShowDemographicInformation] = useState(false);
+	const [sorter, setSorter] = useState<string>();
+	const [displayUsers, setDisplayUsers] = useState<User[]>([]);
+	const [selectedUser, setSelectedUser] = useState<User>();
 
-  const { users, reload } = useUsers();
-  const { groups } = useGroups(
-    user && ["corporate", "teacher", "mastercorporate"].includes(user?.type)
-      ? user.id
-      : undefined
-  );
+	const {users, reload} = useUsers();
+	const {permissions} = usePermissions(user?.id || "");
+	const {groups} = useGroups(user && ["corporate", "teacher", "mastercorporate"].includes(user?.type) ? user.id : undefined);
 
-  const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
-  const router = useRouter();
+	const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
+	const router = useRouter();
 
-  const expirationDateColor = (date: Date) => {
-    const momentDate = moment(date);
-    const today = moment(new Date());
+	const expirationDateColor = (date: Date) => {
+		const momentDate = moment(date);
+		const today = moment(new Date());
 
-    if (today.isAfter(momentDate))
-      return "!text-mti-red-light  font-bold line-through";
-    if (today.add(1, "weeks").isAfter(momentDate)) return "!text-mti-red-light";
-    if (today.add(2, "weeks").isAfter(momentDate))
-      return "!text-mti-rose-light";
-    if (today.add(1, "months").isAfter(momentDate))
-      return "!text-mti-orange-light";
-  };
+		if (today.isAfter(momentDate)) return "!text-mti-red-light  font-bold line-through";
+		if (today.add(1, "weeks").isAfter(momentDate)) return "!text-mti-red-light";
+		if (today.add(2, "weeks").isAfter(momentDate)) return "!text-mti-rose-light";
+		if (today.add(1, "months").isAfter(momentDate)) return "!text-mti-orange-light";
+	};
 
-  useEffect(() => {
-    (async () => {
-      if (user && users) {
-        const filterUsers =
-          user.type === "corporate" || user.type === "teacher"
-            ? users.filter((u) =>
-                groups.flatMap((g) => g.participants).includes(u.id)
-              )
-            : users;
+	useEffect(() => {
+		(async () => {
+			if (user && users) {
+				const filterUsers =
+					user.type === "corporate" || user.type === "teacher"
+						? users.filter((u) => groups.flatMap((g) => g.participants).includes(u.id))
+						: users;
 
-        const filteredUsers = filters.reduce(
-          (d, f) => d.filter(f),
-          filterUsers
-        );
-        const sortedUsers = await asyncSorter<User>(
-          filteredUsers,
-          sortFunction
-        );
+				const filteredUsers = filters.reduce((d, f) => d.filter(f), filterUsers);
+				const sortedUsers = await asyncSorter<User>(filteredUsers, sortFunction);
 
-        setDisplayUsers([...sortedUsers]);
-      }
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [user, users, sorter, groups]);
+				setDisplayUsers([...sortedUsers]);
+			}
+		})();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [user, users, sorter, groups]);
 
-  const deleteAccount = (user: User) => {
-    if (!confirm(`Are you sure you want to delete ${user.name}'s account?`))
-      return;
+	const deleteAccount = (user: User) => {
+		if (!confirm(`Are you sure you want to delete ${user.name}'s account?`)) return;
 
-    axios
-      .delete<{ ok: boolean }>(`/api/user?id=${user.id}`)
-      .then(() => {
-        toast.success("User deleted successfully!");
-        reload();
-      })
-      .catch(() => {
-        toast.error("Something went wrong!", { toastId: "delete-error" });
-      })
-      .finally(reload);
-  };
+		axios
+			.delete<{ok: boolean}>(`/api/user?id=${user.id}`)
+			.then(() => {
+				toast.success("User deleted successfully!");
+				reload();
+			})
+			.catch(() => {
+				toast.error("Something went wrong!", {toastId: "delete-error"});
+			})
+			.finally(reload);
+	};
 
-  const updateAccountType = (user: User, type: Type) => {
-    if (
-      !confirm(
-        `Are you sure you want to update ${
-          user.name
-        }'s account from ${capitalize(user.type)} to ${capitalize(type)}?`
-      )
-    )
-      return;
+	const updateAccountType = (user: User, type: Type) => {
+		if (!confirm(`Are you sure you want to update ${user.name}'s account from ${capitalize(user.type)} to ${capitalize(type)}?`)) return;
 
-    axios
-      .post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
-        ...user,
-        type,
-      })
-      .then(() => {
-        toast.success("User type updated successfully!");
-        reload();
-      })
-      .catch(() => {
-        toast.error("Something went wrong!", { toastId: "update-error" });
-      });
-  };
+		axios
+			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
+				...user,
+				type,
+			})
+			.then(() => {
+				toast.success("User type updated successfully!");
+				reload();
+			})
+			.catch(() => {
+				toast.error("Something went wrong!", {toastId: "update-error"});
+			});
+	};
 
-  const verifyAccount = (user: User) => {
-    axios
-      .post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
-        ...user,
-        isVerified: true,
-      })
-      .then(() => {
-        toast.success("User verified successfully!");
-        reload();
-      })
-      .catch(() => {
-        toast.error("Something went wrong!", { toastId: "update-error" });
-      });
-  };
+	const verifyAccount = (user: User) => {
+		axios
+			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
+				...user,
+				isVerified: true,
+			})
+			.then(() => {
+				toast.success("User verified successfully!");
+				reload();
+			})
+			.catch(() => {
+				toast.error("Something went wrong!", {toastId: "update-error"});
+			});
+	};
 
-  const toggleDisableAccount = (user: User) => {
-    if (
-      !confirm(
-        `Are you sure you want to ${
-          user.status === "disabled" ? "enable" : "disable"
-        } ${
-          user.name
-        }'s account? This change is usually related to their payment state.`
-      )
-    )
-      return;
+	const toggleDisableAccount = (user: User) => {
+		if (
+			!confirm(
+				`Are you sure you want to ${user.status === "disabled" ? "enable" : "disable"} ${
+					user.name
+				}'s account? This change is usually related to their payment state.`,
+			)
+		)
+			return;
 
-    axios
-      .post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
-        ...user,
-        status: user.status === "disabled" ? "active" : "disabled",
-      })
-      .then(() => {
-        toast.success(
-          `User ${
-            user.status === "disabled" ? "enabled" : "disabled"
-          } successfully!`
-        );
-        reload();
-      })
-      .catch(() => {
-        toast.error("Something went wrong!", { toastId: "update-error" });
-      });
-  };
+		axios
+			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
+				...user,
+				status: user.status === "disabled" ? "active" : "disabled",
+			})
+			.then(() => {
+				toast.success(`User ${user.status === "disabled" ? "enabled" : "disabled"} successfully!`);
+				reload();
+			})
+			.catch(() => {
+				toast.error("Something went wrong!", {toastId: "update-error"});
+			});
+	};
 
-  const SorterArrow = ({ name }: { name: string }) => {
-    if (sorter === name) return <BsArrowUp />;
-    if (sorter === reverseString(name)) return <BsArrowDown />;
+	const SorterArrow = ({name}: {name: string}) => {
+		if (sorter === name) return <BsArrowUp />;
+		if (sorter === reverseString(name)) return <BsArrowDown />;
 
-    return <BsArrowDownUp />;
-  };
+		return <BsArrowDownUp />;
+	};
 
-  const actionColumn = ({ row }: { row: { original: User } }) => {
-    const updateUserPermission = PERMISSIONS.updateUser[row.original.type] as {
-      list: Type[];
-      perm: PermissionType;
-    };
-    const deleteUserPermission = PERMISSIONS.deleteUser[row.original.type] as {
-      list: Type[];
-      perm: PermissionType;
-    };
-    return (
-      <div className="flex gap-4">
-        {checkAccess(
-          user,
-          updateUserPermission.list,
-          updateUserPermission.perm
-        ) && (
-          <Popover className="relative">
-            <Popover.Button>
-              <div data-tip="Change Type" className="cursor-pointer tooltip">
-                <BsPerson className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-              </div>
-            </Popover.Button>
-            <Transition
-              as={Fragment}
-              enter="transition ease-out duration-200"
-              enterFrom="opacity-0 translate-y-1"
-              enterTo="opacity-100 translate-y-0"
-              leave="transition ease-in duration-150"
-              leaveFrom="opacity-100 translate-y-0"
-              leaveTo="opacity-0 translate-y-1"
-            >
-              <Popover.Panel className="absolute z-10 w-screen right-1/2 translate-x-1/3 max-w-sm">
-                <div className="bg-white p-4 rounded-lg grid grid-cols-2 gap-2 w-full drop-shadow-xl">
-                  <Button
-                    onClick={() => updateAccountType(row.original, "student")}
-                    className="text-sm !py-2 !px-4"
-                    disabled={
-                      row.original.type === "student" ||
-                      !PERMISSIONS.generateCode["student"].includes(user.type)
-                    }
-                  >
-                    Student
-                  </Button>
-                  <Button
-                    onClick={() => updateAccountType(row.original, "teacher")}
-                    className="text-sm !py-2 !px-4"
-                    disabled={
-                      row.original.type === "teacher" ||
-                      !PERMISSIONS.generateCode["teacher"].includes(user.type)
-                    }
-                  >
-                    Teacher
-                  </Button>
-                  <Button
-                    onClick={() => updateAccountType(row.original, "corporate")}
-                    className="text-sm !py-2 !px-4"
-                    disabled={
-                      row.original.type === "corporate" ||
-                      !PERMISSIONS.generateCode["corporate"].includes(user.type)
-                    }
-                  >
-                    Corporate
-                  </Button>
-                  <Button
-                    onClick={() => updateAccountType(row.original, "admin")}
-                    className="text-sm !py-2 !px-4"
-                    disabled={
-                      row.original.type === "admin" ||
-                      !PERMISSIONS.generateCode["admin"].includes(user.type)
-                    }
-                  >
-                    Admin
-                  </Button>
-                </div>
-              </Popover.Panel>
-            </Transition>
-          </Popover>
-        )}
-        {!row.original.isVerified &&
-          checkAccess(
-            user,
-            updateUserPermission.list,
-            updateUserPermission.perm
-          ) && (
-            <div
-              data-tip="Verify User"
-              className="cursor-pointer tooltip"
-              onClick={() => verifyAccount(row.original)}
-            >
-              <BsCheck className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-            </div>
-          )}
-        {checkAccess(
-          user,
-          updateUserPermission.list,
-          updateUserPermission.perm
-        ) && (
-          <div
-            data-tip={
-              row.original.status === "disabled"
-                ? "Enable User"
-                : "Disable User"
-            }
-            className="cursor-pointer tooltip"
-            onClick={() => toggleDisableAccount(row.original)}
-          >
-            {row.original.status === "disabled" ? (
-              <BsCheckCircle className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-            ) : (
-              <BsFillExclamationOctagonFill className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-            )}
-          </div>
-        )}
-        {checkAccess(
-          user,
-          deleteUserPermission.list,
-          deleteUserPermission.perm
-        ) && (
-          <div
-            data-tip="Delete"
-            className="cursor-pointer tooltip"
-            onClick={() => deleteAccount(row.original)}
-          >
-            <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-          </div>
-        )}
-      </div>
-    );
-  };
+	const actionColumn = ({row}: {row: {original: User}}) => {
+		const updateUserPermission = PERMISSIONS.updateUser[row.original.type] as {
+			list: Type[];
+			perm: PermissionType;
+		};
+		const deleteUserPermission = PERMISSIONS.deleteUser[row.original.type] as {
+			list: Type[];
+			perm: PermissionType;
+		};
+		return (
+			<div className="flex gap-4">
+				{checkAccess(user, updateUserPermission.list, permissions, updateUserPermission.perm) && (
+					<Popover className="relative">
+						<Popover.Button>
+							<div data-tip="Change Type" className="cursor-pointer tooltip">
+								<BsPerson className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+							</div>
+						</Popover.Button>
+						<Transition
+							as={Fragment}
+							enter="transition ease-out duration-200"
+							enterFrom="opacity-0 translate-y-1"
+							enterTo="opacity-100 translate-y-0"
+							leave="transition ease-in duration-150"
+							leaveFrom="opacity-100 translate-y-0"
+							leaveTo="opacity-0 translate-y-1">
+							<Popover.Panel className="absolute z-10 w-screen right-1/2 translate-x-1/3 max-w-sm">
+								<div className="bg-white p-4 rounded-lg grid grid-cols-2 gap-2 w-full drop-shadow-xl">
+									<Button
+										onClick={() => updateAccountType(row.original, "student")}
+										className="text-sm !py-2 !px-4"
+										disabled={row.original.type === "student" || !PERMISSIONS.generateCode["student"].includes(user.type)}>
+										Student
+									</Button>
+									<Button
+										onClick={() => updateAccountType(row.original, "teacher")}
+										className="text-sm !py-2 !px-4"
+										disabled={row.original.type === "teacher" || !PERMISSIONS.generateCode["teacher"].includes(user.type)}>
+										Teacher
+									</Button>
+									<Button
+										onClick={() => updateAccountType(row.original, "corporate")}
+										className="text-sm !py-2 !px-4"
+										disabled={row.original.type === "corporate" || !PERMISSIONS.generateCode["corporate"].includes(user.type)}>
+										Corporate
+									</Button>
+									<Button
+										onClick={() => updateAccountType(row.original, "admin")}
+										className="text-sm !py-2 !px-4"
+										disabled={row.original.type === "admin" || !PERMISSIONS.generateCode["admin"].includes(user.type)}>
+										Admin
+									</Button>
+								</div>
+							</Popover.Panel>
+						</Transition>
+					</Popover>
+				)}
+				{!row.original.isVerified && checkAccess(user, updateUserPermission.list, permissions, updateUserPermission.perm) && (
+					<div data-tip="Verify User" className="cursor-pointer tooltip" onClick={() => verifyAccount(row.original)}>
+						<BsCheck className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+					</div>
+				)}
+				{checkAccess(user, updateUserPermission.list, permissions, updateUserPermission.perm) && (
+					<div
+						data-tip={row.original.status === "disabled" ? "Enable User" : "Disable User"}
+						className="cursor-pointer tooltip"
+						onClick={() => toggleDisableAccount(row.original)}>
+						{row.original.status === "disabled" ? (
+							<BsCheckCircle className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+						) : (
+							<BsFillExclamationOctagonFill className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+						)}
+					</div>
+				)}
+				{checkAccess(user, deleteUserPermission.list, permissions, deleteUserPermission.perm) && (
+					<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteAccount(row.original)}>
+						<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+					</div>
+				)}
+			</div>
+		);
+	};
 
-  const demographicColumns = [
-    columnHelper.accessor("name", {
-      header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "name"))}
-        >
-          <span>Name</span>
-          <SorterArrow name="name" />
-        </button>
-      ) as any,
-      cell: ({ row, getValue }) => (
-        <div
-          className={clsx(
-            PERMISSIONS.updateExpiryDate[row.original.type]?.includes(
-              user.type
-            ) &&
-              "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
-          )}
-          onClick={() =>
-            PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type)
-              ? setSelectedUser(row.original)
-              : null
-          }
-        >
-          {getValue()}
-        </div>
-      ),
-    }),
-    columnHelper.accessor("demographicInformation.country", {
-      header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "country"))}
-        >
-          <span>Country</span>
-          <SorterArrow name="country" />
-        </button>
-      ) as any,
-      cell: (info) =>
-        info.getValue()
-          ? `${
-              countryCodes.findOne("countryCode" as any, info.getValue()).flag
-            } ${
-              countries[info.getValue() as unknown as keyof TCountries].name
-            } (+${
-              countryCodes.findOne("countryCode" as any, info.getValue())
-                .countryCallingCode
-            })`
-          : "Not available",
-    }),
-    columnHelper.accessor("demographicInformation.phone", {
-      header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "phone"))}
-        >
-          <span>Phone</span>
-          <SorterArrow name="phone" />
-        </button>
-      ) as any,
-      cell: (info) => info.getValue() || "Not available",
-      enableSorting: true,
-    }),
-    columnHelper.accessor(
-      (x) =>
-        x.type === "corporate" || x.type === "mastercorporate"
-          ? x.demographicInformation?.position
-          : x.demographicInformation?.employment,
-      {
-        id: "employment",
-        header: (
-          <button
-            className="flex gap-2 items-center"
-            onClick={() =>
-              setSorter((prev) => selectSorter(prev, "employment"))
-            }
-          >
-            <span>Employment/Position</span>
-            <SorterArrow name="employment" />
-          </button>
-        ) as any,
-        cell: (info) =>
-          (info.row.original.type === "corporate"
-            ? info.getValue()
-            : capitalize(info.getValue())) || "Not available",
-        enableSorting: true,
-      }
-    ),
-    columnHelper.accessor("demographicInformation.gender", {
-      header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "gender"))}
-        >
-          <span>Gender</span>
-          <SorterArrow name="gender" />
-        </button>
-      ) as any,
-      cell: (info) => capitalize(info.getValue()) || "Not available",
-      enableSorting: true,
-    }),
-    {
-      header: (
-        <span
-          className="cursor-pointer"
-          onClick={() => setShowDemographicInformation((prev) => !prev)}
-        >
-          Switch
-        </span>
-      ),
-      id: "actions",
-      cell: actionColumn,
-    },
-  ];
+	const demographicColumns = [
+		columnHelper.accessor("name", {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "name"))}>
+					<span>Name</span>
+					<SorterArrow name="name" />
+				</button>
+			) as any,
+			cell: ({row, getValue}) => (
+				<div
+					className={clsx(
+						PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) &&
+							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
+					)}
+					onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}>
+					{getValue()}
+				</div>
+			),
+		}),
+		columnHelper.accessor("demographicInformation.country", {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "country"))}>
+					<span>Country</span>
+					<SorterArrow name="country" />
+				</button>
+			) as any,
+			cell: (info) =>
+				info.getValue()
+					? `${countryCodes.findOne("countryCode" as any, info.getValue()).flag} ${
+							countries[info.getValue() as unknown as keyof TCountries].name
+					  } (+${countryCodes.findOne("countryCode" as any, info.getValue()).countryCallingCode})`
+					: "Not available",
+		}),
+		columnHelper.accessor("demographicInformation.phone", {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "phone"))}>
+					<span>Phone</span>
+					<SorterArrow name="phone" />
+				</button>
+			) as any,
+			cell: (info) => info.getValue() || "Not available",
+			enableSorting: true,
+		}),
+		columnHelper.accessor(
+			(x) =>
+				x.type === "corporate" || x.type === "mastercorporate" ? x.demographicInformation?.position : x.demographicInformation?.employment,
+			{
+				id: "employment",
+				header: (
+					<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "employment"))}>
+						<span>Employment/Position</span>
+						<SorterArrow name="employment" />
+					</button>
+				) as any,
+				cell: (info) => (info.row.original.type === "corporate" ? info.getValue() : capitalize(info.getValue())) || "Not available",
+				enableSorting: true,
+			},
+		),
+		columnHelper.accessor("demographicInformation.gender", {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "gender"))}>
+					<span>Gender</span>
+					<SorterArrow name="gender" />
+				</button>
+			) as any,
+			cell: (info) => capitalize(info.getValue()) || "Not available",
+			enableSorting: true,
+		}),
+		{
+			header: (
+				<span className="cursor-pointer" onClick={() => setShowDemographicInformation((prev) => !prev)}>
+					Switch
+				</span>
+			),
+			id: "actions",
+			cell: actionColumn,
+		},
+	];
 
-  const defaultColumns = [
-    columnHelper.accessor("name", {
-      header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "name"))}
-        >
-          <span>Name</span>
-          <SorterArrow name="name" />
-        </button>
-      ) as any,
-      cell: ({ row, getValue }) => (
-        <div
-          className={clsx(
-            PERMISSIONS.updateExpiryDate[row.original.type]?.includes(
-              user.type
-            ) &&
-              "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
-          )}
-          onClick={() =>
-            PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type)
-              ? setSelectedUser(row.original)
-              : null
-          }
-        >
-          {row.original.type === "corporate"
-            ? row.original.corporateInformation?.companyInformation?.name ||
-              getValue()
-            : getValue()}
-        </div>
-      ),
-    }),
-    columnHelper.accessor("email", {
-      header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "email"))}
-        >
-          <span>E-mail</span>
-          <SorterArrow name="email" />
-        </button>
-      ) as any,
-      cell: ({ row, getValue }) => (
-        <div
-          className={clsx(
-            PERMISSIONS.updateExpiryDate[row.original.type]?.includes(
-              user.type
-            ) &&
-              "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
-          )}
-          onClick={() =>
-            PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type)
-              ? setSelectedUser(row.original)
-              : null
-          }
-        >
-          {getValue()}
-        </div>
-      ),
-    }),
-    columnHelper.accessor("type", {
-      header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "type"))}
-        >
-          <span>Type</span>
-          <SorterArrow name="type" />
-        </button>
-      ) as any,
-      cell: (info) => USER_TYPE_LABELS[info.getValue()],
-    }),
-    columnHelper.accessor("corporateInformation.companyInformation.name", {
-      header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "companyName"))}
-        >
-          <span>Company Name</span>
-          <SorterArrow name="companyName" />
-        </button>
-      ) as any,
-      cell: (info) => (
-        <CompanyNameCell
-          user={info.row.original}
-          users={users}
-          groups={groups}
-        />
-      ),
-    }),
-    columnHelper.accessor("subscriptionExpirationDate", {
-      header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "expiryDate"))}
-        >
-          <span>Expiry Date</span>
-          <SorterArrow name="expiryDate" />
-        </button>
-      ) as any,
-      cell: (info) => (
-        <span
-          className={clsx(
-            info.getValue()
-              ? expirationDateColor(moment(info.getValue()).toDate())
-              : ""
-          )}
-        >
-          {!info.getValue()
-            ? "No expiry date"
-            : moment(info.getValue()).format("DD/MM/YYYY")}
-        </span>
-      ),
-    }),
-    columnHelper.accessor("isVerified", {
-      header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() =>
-            setSorter((prev) => selectSorter(prev, "verification"))
-          }
-        >
-          <span>Verification</span>
-          <SorterArrow name="verification" />
-        </button>
-      ) as any,
-      cell: (info) => (
-        <div className="flex gap-3 items-center text-mti-gray-dim text-sm self-center">
-          <div
-            className={clsx(
-              "w-6 h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white",
-              "transition duration-300 ease-in-out",
-              info.getValue() && "!bg-mti-purple-light "
-            )}
-          >
-            <BsCheck color="white" className="w-full h-full" />
-          </div>
-        </div>
-      ),
-    }),
-    {
-      header: (
-        <span
-          className="cursor-pointer"
-          onClick={() => setShowDemographicInformation((prev) => !prev)}
-        >
-          Switch
-        </span>
-      ),
-      id: "actions",
-      cell: actionColumn,
-    },
-  ];
+	const defaultColumns = [
+		columnHelper.accessor("name", {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "name"))}>
+					<span>Name</span>
+					<SorterArrow name="name" />
+				</button>
+			) as any,
+			cell: ({row, getValue}) => (
+				<div
+					className={clsx(
+						PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) &&
+							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
+					)}
+					onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}>
+					{row.original.type === "corporate" ? row.original.corporateInformation?.companyInformation?.name || getValue() : getValue()}
+				</div>
+			),
+		}),
+		columnHelper.accessor("email", {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "email"))}>
+					<span>E-mail</span>
+					<SorterArrow name="email" />
+				</button>
+			) as any,
+			cell: ({row, getValue}) => (
+				<div
+					className={clsx(
+						PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) &&
+							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
+					)}
+					onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}>
+					{getValue()}
+				</div>
+			),
+		}),
+		columnHelper.accessor("type", {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "type"))}>
+					<span>Type</span>
+					<SorterArrow name="type" />
+				</button>
+			) as any,
+			cell: (info) => USER_TYPE_LABELS[info.getValue()],
+		}),
+		columnHelper.accessor("corporateInformation.companyInformation.name", {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "companyName"))}>
+					<span>Company Name</span>
+					<SorterArrow name="companyName" />
+				</button>
+			) as any,
+			cell: (info) => <CompanyNameCell user={info.row.original} users={users} groups={groups} />,
+		}),
+		columnHelper.accessor("subscriptionExpirationDate", {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "expiryDate"))}>
+					<span>Expiry Date</span>
+					<SorterArrow name="expiryDate" />
+				</button>
+			) as any,
+			cell: (info) => (
+				<span className={clsx(info.getValue() ? expirationDateColor(moment(info.getValue()).toDate()) : "")}>
+					{!info.getValue() ? "No expiry date" : moment(info.getValue()).format("DD/MM/YYYY")}
+				</span>
+			),
+		}),
+		columnHelper.accessor("isVerified", {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "verification"))}>
+					<span>Verification</span>
+					<SorterArrow name="verification" />
+				</button>
+			) as any,
+			cell: (info) => (
+				<div className="flex gap-3 items-center text-mti-gray-dim text-sm self-center">
+					<div
+						className={clsx(
+							"w-6 h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white",
+							"transition duration-300 ease-in-out",
+							info.getValue() && "!bg-mti-purple-light ",
+						)}>
+						<BsCheck color="white" className="w-full h-full" />
+					</div>
+				</div>
+			),
+		}),
+		{
+			header: (
+				<span className="cursor-pointer" onClick={() => setShowDemographicInformation((prev) => !prev)}>
+					Switch
+				</span>
+			),
+			id: "actions",
+			cell: actionColumn,
+		},
+	];
 
-  const reverseString = (str: string) => reverse(str.split("")).join("");
+	const reverseString = (str: string) => reverse(str.split("")).join("");
 
-  const selectSorter = (previous: string | undefined, name: string) => {
-    if (!previous) return name;
-    if (previous === name) return reverseString(name);
+	const selectSorter = (previous: string | undefined, name: string) => {
+		if (!previous) return name;
+		if (previous === name) return reverseString(name);
 
-    return undefined;
-  };
+		return undefined;
+	};
 
-  const sortFunction = async (a: User, b: User) => {
-    if (sorter === "name" || sorter === reverseString("name"))
-      return sorter === "name"
-        ? a.name.localeCompare(b.name)
-        : b.name.localeCompare(a.name);
+	const sortFunction = async (a: User, b: User) => {
+		if (sorter === "name" || sorter === reverseString("name"))
+			return sorter === "name" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
 
-    if (sorter === "email" || sorter === reverseString("email"))
-      return sorter === "email"
-        ? a.email.localeCompare(b.email)
-        : b.email.localeCompare(a.email);
+		if (sorter === "email" || sorter === reverseString("email"))
+			return sorter === "email" ? a.email.localeCompare(b.email) : b.email.localeCompare(a.email);
 
-    if (sorter === "type" || sorter === reverseString("type"))
-      return sorter === "type"
-        ? userTypes.findIndex((t) => a.type === t) -
-            userTypes.findIndex((t) => b.type === t)
-        : userTypes.findIndex((t) => b.type === t) -
-            userTypes.findIndex((t) => a.type === t);
+		if (sorter === "type" || sorter === reverseString("type"))
+			return sorter === "type"
+				? userTypes.findIndex((t) => a.type === t) - userTypes.findIndex((t) => b.type === t)
+				: userTypes.findIndex((t) => b.type === t) - userTypes.findIndex((t) => a.type === t);
 
-    if (sorter === "verification" || sorter === reverseString("verification"))
-      return sorter === "verification"
-        ? a.isVerified.toString().localeCompare(b.isVerified.toString())
-        : b.isVerified.toString().localeCompare(a.isVerified.toString());
+		if (sorter === "verification" || sorter === reverseString("verification"))
+			return sorter === "verification"
+				? a.isVerified.toString().localeCompare(b.isVerified.toString())
+				: b.isVerified.toString().localeCompare(a.isVerified.toString());
 
-    if (sorter === "expiryDate" || sorter === reverseString("expiryDate")) {
-      if (!a.subscriptionExpirationDate && b.subscriptionExpirationDate)
-        return sorter === "expiryDate" ? -1 : 1;
-      if (a.subscriptionExpirationDate && !b.subscriptionExpirationDate)
-        return sorter === "expiryDate" ? 1 : -1;
-      if (!a.subscriptionExpirationDate && !b.subscriptionExpirationDate)
-        return 0;
-      if (
-        moment(a.subscriptionExpirationDate).isAfter(
-          b.subscriptionExpirationDate
-        )
-      )
-        return sorter === "expiryDate" ? -1 : 1;
-      if (
-        moment(b.subscriptionExpirationDate).isAfter(
-          a.subscriptionExpirationDate
-        )
-      )
-        return sorter === "expiryDate" ? 1 : -1;
-      return 0;
-    }
+		if (sorter === "expiryDate" || sorter === reverseString("expiryDate")) {
+			if (!a.subscriptionExpirationDate && b.subscriptionExpirationDate) return sorter === "expiryDate" ? -1 : 1;
+			if (a.subscriptionExpirationDate && !b.subscriptionExpirationDate) return sorter === "expiryDate" ? 1 : -1;
+			if (!a.subscriptionExpirationDate && !b.subscriptionExpirationDate) return 0;
+			if (moment(a.subscriptionExpirationDate).isAfter(b.subscriptionExpirationDate)) return sorter === "expiryDate" ? -1 : 1;
+			if (moment(b.subscriptionExpirationDate).isAfter(a.subscriptionExpirationDate)) return sorter === "expiryDate" ? 1 : -1;
+			return 0;
+		}
 
-    if (sorter === "country" || sorter === reverseString("country")) {
-      if (
-        !a.demographicInformation?.country &&
-        b.demographicInformation?.country
-      )
-        return sorter === "country" ? -1 : 1;
-      if (
-        a.demographicInformation?.country &&
-        !b.demographicInformation?.country
-      )
-        return sorter === "country" ? 1 : -1;
-      if (
-        !a.demographicInformation?.country &&
-        !b.demographicInformation?.country
-      )
-        return 0;
+		if (sorter === "country" || sorter === reverseString("country")) {
+			if (!a.demographicInformation?.country && b.demographicInformation?.country) return sorter === "country" ? -1 : 1;
+			if (a.demographicInformation?.country && !b.demographicInformation?.country) return sorter === "country" ? 1 : -1;
+			if (!a.demographicInformation?.country && !b.demographicInformation?.country) return 0;
 
-      return sorter === "country"
-        ? a.demographicInformation!.country.localeCompare(
-            b.demographicInformation!.country
-          )
-        : b.demographicInformation!.country.localeCompare(
-            a.demographicInformation!.country
-          );
-    }
+			return sorter === "country"
+				? a.demographicInformation!.country.localeCompare(b.demographicInformation!.country)
+				: b.demographicInformation!.country.localeCompare(a.demographicInformation!.country);
+		}
 
-    if (sorter === "phone" || sorter === reverseString("phone")) {
-      if (!a.demographicInformation?.phone && b.demographicInformation?.phone)
-        return sorter === "phone" ? -1 : 1;
-      if (a.demographicInformation?.phone && !b.demographicInformation?.phone)
-        return sorter === "phone" ? 1 : -1;
-      if (!a.demographicInformation?.phone && !b.demographicInformation?.phone)
-        return 0;
+		if (sorter === "phone" || sorter === reverseString("phone")) {
+			if (!a.demographicInformation?.phone && b.demographicInformation?.phone) return sorter === "phone" ? -1 : 1;
+			if (a.demographicInformation?.phone && !b.demographicInformation?.phone) return sorter === "phone" ? 1 : -1;
+			if (!a.demographicInformation?.phone && !b.demographicInformation?.phone) return 0;
 
-      return sorter === "phone"
-        ? a.demographicInformation!.phone.localeCompare(
-            b.demographicInformation!.phone
-          )
-        : b.demographicInformation!.phone.localeCompare(
-            a.demographicInformation!.phone
-          );
-    }
+			return sorter === "phone"
+				? a.demographicInformation!.phone.localeCompare(b.demographicInformation!.phone)
+				: b.demographicInformation!.phone.localeCompare(a.demographicInformation!.phone);
+		}
 
-    if (sorter === "employment" || sorter === reverseString("employment")) {
-      const aSortingItem =
-        a.type === "corporate" || a.type === "mastercorporate"
-          ? a.demographicInformation?.position
-          : a.demographicInformation?.employment;
-      const bSortingItem =
-        b.type === "corporate" || b.type === "mastercorporate"
-          ? b.demographicInformation?.position
-          : b.demographicInformation?.employment;
+		if (sorter === "employment" || sorter === reverseString("employment")) {
+			const aSortingItem =
+				a.type === "corporate" || a.type === "mastercorporate" ? a.demographicInformation?.position : a.demographicInformation?.employment;
+			const bSortingItem =
+				b.type === "corporate" || b.type === "mastercorporate" ? b.demographicInformation?.position : b.demographicInformation?.employment;
 
-      if (!aSortingItem && bSortingItem)
-        return sorter === "employment" ? -1 : 1;
-      if (aSortingItem && !bSortingItem)
-        return sorter === "employment" ? 1 : -1;
-      if (!aSortingItem && !bSortingItem) return 0;
+			if (!aSortingItem && bSortingItem) return sorter === "employment" ? -1 : 1;
+			if (aSortingItem && !bSortingItem) return sorter === "employment" ? 1 : -1;
+			if (!aSortingItem && !bSortingItem) return 0;
 
-      return sorter === "employment"
-        ? aSortingItem!.localeCompare(bSortingItem!)
-        : bSortingItem!.localeCompare(aSortingItem!);
-    }
+			return sorter === "employment" ? aSortingItem!.localeCompare(bSortingItem!) : bSortingItem!.localeCompare(aSortingItem!);
+		}
 
-    if (sorter === "gender" || sorter === reverseString("gender")) {
-      if (!a.demographicInformation?.gender && b.demographicInformation?.gender)
-        return sorter === "employment" ? -1 : 1;
-      if (a.demographicInformation?.gender && !b.demographicInformation?.gender)
-        return sorter === "employment" ? 1 : -1;
-      if (
-        !a.demographicInformation?.gender &&
-        !b.demographicInformation?.gender
-      )
-        return 0;
+		if (sorter === "gender" || sorter === reverseString("gender")) {
+			if (!a.demographicInformation?.gender && b.demographicInformation?.gender) return sorter === "employment" ? -1 : 1;
+			if (a.demographicInformation?.gender && !b.demographicInformation?.gender) return sorter === "employment" ? 1 : -1;
+			if (!a.demographicInformation?.gender && !b.demographicInformation?.gender) return 0;
 
-      return sorter === "gender"
-        ? a.demographicInformation!.gender.localeCompare(
-            b.demographicInformation!.gender
-          )
-        : b.demographicInformation!.gender.localeCompare(
-            a.demographicInformation!.gender
-          );
-    }
+			return sorter === "gender"
+				? a.demographicInformation!.gender.localeCompare(b.demographicInformation!.gender)
+				: b.demographicInformation!.gender.localeCompare(a.demographicInformation!.gender);
+		}
 
-    if (sorter === "companyName" || sorter === reverseString("companyName")) {
-      const aCorporateName = getUserCompanyName(a, users, groups);
-      const bCorporateName = getUserCompanyName(b, users, groups);
-      if (!aCorporateName && bCorporateName)
-        return sorter === "companyName" ? -1 : 1;
-      if (aCorporateName && !bCorporateName)
-        return sorter === "companyName" ? 1 : -1;
-      if (!aCorporateName && !bCorporateName) return 0;
+		if (sorter === "companyName" || sorter === reverseString("companyName")) {
+			const aCorporateName = getUserCompanyName(a, users, groups);
+			const bCorporateName = getUserCompanyName(b, users, groups);
+			if (!aCorporateName && bCorporateName) return sorter === "companyName" ? -1 : 1;
+			if (aCorporateName && !bCorporateName) return sorter === "companyName" ? 1 : -1;
+			if (!aCorporateName && !bCorporateName) return 0;
 
-      return sorter === "companyName"
-        ? aCorporateName.localeCompare(bCorporateName)
-        : bCorporateName.localeCompare(aCorporateName);
-    }
+			return sorter === "companyName" ? aCorporateName.localeCompare(bCorporateName) : bCorporateName.localeCompare(aCorporateName);
+		}
 
-    return a.id.localeCompare(b.id);
-  };
+		return a.id.localeCompare(b.id);
+	};
 
-  const { rows: filteredRows, renderSearch } = useListSearch<User>(
-    searchFields,
-    displayUsers
-  );
+	const {rows: filteredRows, renderSearch} = useListSearch<User>(searchFields, displayUsers);
 
-  const table = useReactTable({
-    data: filteredRows,
-    columns: (!showDemographicInformation
-      ? defaultColumns
-      : demographicColumns) as any,
-    getCoreRowModel: getCoreRowModel(),
-  });
+	const table = useReactTable({
+		data: filteredRows,
+		columns: (!showDemographicInformation ? defaultColumns : demographicColumns) as any,
+		getCoreRowModel: getCoreRowModel(),
+	});
 
-  const downloadExcel = () => {
-    const csv = exportListToExcel(filteredRows, users, groups);
+	const downloadExcel = () => {
+		const csv = exportListToExcel(filteredRows, users, groups);
 
-    const element = document.createElement("a");
-    const file = new Blob([csv], { type: "text/csv" });
-    element.href = URL.createObjectURL(file);
-    element.download = "users.csv";
-    document.body.appendChild(element);
-    element.click();
-    document.body.removeChild(element);
-  };
+		const element = document.createElement("a");
+		const file = new Blob([csv], {type: "text/csv"});
+		element.href = URL.createObjectURL(file);
+		element.download = "users.csv";
+		document.body.appendChild(element);
+		element.click();
+		document.body.removeChild(element);
+	};
 
-  const viewStudentFilter = (x: User) => x.type === "student";
-  const viewTeacherFilter = (x: User) => x.type === "teacher";
-  const belongsToAdminFilter = (x: User) => {
-    if (!selectedUser) return false;
-    return groups
-      .filter(
-        (g) =>
-          g.admin === selectedUser.id ||
-          g.participants.includes(selectedUser.id)
-      )
-      .flatMap((g) => g.participants)
-      .includes(x.id);
-  };
+	const viewStudentFilter = (x: User) => x.type === "student";
+	const viewTeacherFilter = (x: User) => x.type === "teacher";
+	const belongsToAdminFilter = (x: User) => {
+		if (!selectedUser) return false;
+		return groups
+			.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+			.flatMap((g) => g.participants)
+			.includes(x.id);
+	};
 
-  const viewStudentFilterBelongsToAdmin = (x: User) =>
-    x.type === "student" && belongsToAdminFilter(x);
-  const viewTeacherFilterBelongsToAdmin = (x: User) =>
-    x.type === "teacher" && belongsToAdminFilter(x);
+	const viewStudentFilterBelongsToAdmin = (x: User) => x.type === "student" && belongsToAdminFilter(x);
+	const viewTeacherFilterBelongsToAdmin = (x: User) => x.type === "teacher" && belongsToAdminFilter(x);
 
-  const renderUserCard = (selectedUser: User) => {
-    const studentsFromAdmin = users.filter(viewStudentFilterBelongsToAdmin);
-    const teachersFromAdmin = users.filter(viewTeacherFilterBelongsToAdmin);
-    return (
-      <div className="w-full flex flex-col gap-8">
-        <UserCard
-          loggedInUser={user}
-          onViewStudents={
-            (selectedUser.type === "corporate" ||
-              selectedUser.type === "teacher") &&
-            studentsFromAdmin.length > 0
-              ? () => {
-                  appendUserFilters({
-                    id: "view-students",
-                    filter: viewStudentFilter,
-                  });
-                  appendUserFilters({
-                    id: "belongs-to-admin",
-                    filter: belongsToAdminFilter,
-                  });
+	const renderUserCard = (selectedUser: User) => {
+		const studentsFromAdmin = users.filter(viewStudentFilterBelongsToAdmin);
+		const teachersFromAdmin = users.filter(viewTeacherFilterBelongsToAdmin);
+		return (
+			<div className="w-full flex flex-col gap-8">
+				<UserCard
+					loggedInUser={user}
+					onViewStudents={
+						(selectedUser.type === "corporate" || selectedUser.type === "teacher") && studentsFromAdmin.length > 0
+							? () => {
+									appendUserFilters({
+										id: "view-students",
+										filter: viewStudentFilter,
+									});
+									appendUserFilters({
+										id: "belongs-to-admin",
+										filter: belongsToAdminFilter,
+									});
 
-                  router.push("/list/users");
-                }
-              : undefined
-          }
-          onViewTeachers={
-            (selectedUser.type === "corporate" ||
-              selectedUser.type === "student") &&
-            teachersFromAdmin.length > 0
-              ? () => {
-                  appendUserFilters({
-                    id: "view-teachers",
-                    filter: viewTeacherFilter,
-                  });
-                  appendUserFilters({
-                    id: "belongs-to-admin",
-                    filter: belongsToAdminFilter,
-                  });
+									router.push("/list/users");
+							  }
+							: undefined
+					}
+					onViewTeachers={
+						(selectedUser.type === "corporate" || selectedUser.type === "student") && teachersFromAdmin.length > 0
+							? () => {
+									appendUserFilters({
+										id: "view-teachers",
+										filter: viewTeacherFilter,
+									});
+									appendUserFilters({
+										id: "belongs-to-admin",
+										filter: belongsToAdminFilter,
+									});
 
-                  router.push("/list/users");
-                }
-              : undefined
-          }
-          onViewCorporate={
-            selectedUser.type === "teacher" || selectedUser.type === "student"
-              ? () => {
-                  appendUserFilters({
-                    id: "view-corporate",
-                    filter: (x: User) => x.type === "corporate",
-                  });
-                  appendUserFilters({
-                    id: "belongs-to-admin",
-                    filter: (x: User) =>
-                      groups
-                        .filter((g) => g.participants.includes(selectedUser.id))
-                        .flatMap((g) => [g.admin, ...g.participants])
-                        .includes(x.id),
-                  });
+									router.push("/list/users");
+							  }
+							: undefined
+					}
+					onViewCorporate={
+						selectedUser.type === "teacher" || selectedUser.type === "student"
+							? () => {
+									appendUserFilters({
+										id: "view-corporate",
+										filter: (x: User) => x.type === "corporate",
+									});
+									appendUserFilters({
+										id: "belongs-to-admin",
+										filter: (x: User) =>
+											groups
+												.filter((g) => g.participants.includes(selectedUser.id))
+												.flatMap((g) => [g.admin, ...g.participants])
+												.includes(x.id),
+									});
 
-                  router.push("/list/users");
-                }
-              : undefined
-          }
-          onClose={(shouldReload) => {
-            setSelectedUser(undefined);
-            if (shouldReload) reload();
-          }}
-          user={selectedUser}
-        />
-      </div>
-    );
-  };
+									router.push("/list/users");
+							  }
+							: undefined
+					}
+					onClose={(shouldReload) => {
+						setSelectedUser(undefined);
+						if (shouldReload) reload();
+					}}
+					user={selectedUser}
+				/>
+			</div>
+		);
+	};
 
-  return (
-    <>
-      {renderHeader && renderHeader(displayUsers.length)}
-      <div className="w-full">
-        <Modal
-          isOpen={!!selectedUser}
-          onClose={() => setSelectedUser(undefined)}
-        >
-          {selectedUser && renderUserCard(selectedUser)}
-        </Modal>
-        <div className="w-full flex flex-col gap-2">
-          <div className="w-full flex gap-2 items-end">
-            {renderSearch()}
-            <Button
-              className="w-full max-w-[200px] mb-1"
-              variant="outline"
-              onClick={downloadExcel}
-            >
-              Download List
-            </Button>
-          </div>
-          <table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
-            <thead>
-              {table.getHeaderGroups().map((headerGroup) => (
-                <tr key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => (
-                    <th className="py-4 px-4 text-left" key={header.id}>
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
-                    </th>
-                  ))}
-                </tr>
-              ))}
-            </thead>
-            <tbody className="px-2">
-              {table.getRowModel().rows.map((row) => (
-                <tr
-                  className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
-                  key={row.id}
-                >
-                  {row.getVisibleCells().map((cell) => (
-                    <td className="px-4 py-2 items-center w-fit" key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
-                    </td>
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </>
-  );
+	return (
+		<>
+			{renderHeader && renderHeader(displayUsers.length)}
+			<div className="w-full">
+				<Modal isOpen={!!selectedUser} onClose={() => setSelectedUser(undefined)}>
+					{selectedUser && renderUserCard(selectedUser)}
+				</Modal>
+				<div className="w-full flex flex-col gap-2">
+					<div className="w-full flex gap-2 items-end">
+						{renderSearch()}
+						<Button className="w-full max-w-[200px] mb-1" variant="outline" onClick={downloadExcel}>
+							Download List
+						</Button>
+					</div>
+					<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+						<thead>
+							{table.getHeaderGroups().map((headerGroup) => (
+								<tr key={headerGroup.id}>
+									{headerGroup.headers.map((header) => (
+										<th className="py-4 px-4 text-left" key={header.id}>
+											{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+										</th>
+									))}
+								</tr>
+							))}
+						</thead>
+						<tbody className="px-2">
+							{table.getRowModel().rows.map((row) => (
+								<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
+									{row.getVisibleCells().map((cell) => (
+										<td className="px-4 py-2 items-center w-fit" key={cell.id}>
+											{flexRender(cell.column.columnDef.cell, cell.getContext())}
+										</td>
+									))}
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			</div>
+		</>
+	);
 }
diff --git a/src/pages/(admin)/Lists/index.tsx b/src/pages/(admin)/Lists/index.tsx
index ddbad194..b69d3892 100644
--- a/src/pages/(admin)/Lists/index.tsx
+++ b/src/pages/(admin)/Lists/index.tsx
@@ -1,5 +1,5 @@
-import { User } from "@/interfaces/user";
-import { Tab } from "@headlessui/react";
+import {User} from "@/interfaces/user";
+import {Tab} from "@headlessui/react";
 import clsx from "clsx";
 import CodeList from "./CodeList";
 import DiscountList from "./DiscountList";
@@ -7,137 +7,118 @@ import ExamList from "./ExamList";
 import GroupList from "./GroupList";
 import PackageList from "./PackageList";
 import UserList from "./UserList";
-import { checkAccess } from "@/utils/permissions";
+import {checkAccess} from "@/utils/permissions";
+import usePermissions from "@/hooks/usePermissions";
 
-export default function Lists({ user }: { user: User }) {
-  return (
-    <Tab.Group>
-      <Tab.List className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
-        <Tab
-          className={({ selected }) =>
-            clsx(
-              "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
-              "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
-              "transition duration-300 ease-in-out",
-              selected
-                ? "bg-white shadow"
-                : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
-            )
-          }
-        >
-          User List
-        </Tab>
-        {checkAccess(user, ["developer"]) && (
-          <Tab
-            className={({ selected }) =>
-              clsx(
-                "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
-                "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
-                "transition duration-300 ease-in-out",
-                selected
-                  ? "bg-white shadow"
-                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
-              )
-            }
-          >
-            Exam List
-          </Tab>
-        )}
-        <Tab
-          className={({ selected }) =>
-            clsx(
-              "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
-              "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
-              "transition duration-300 ease-in-out",
-              selected
-                ? "bg-white shadow"
-                : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
-            )
-          }
-        >
-          Group List
-        </Tab>
-        {checkAccess(user, ["developer", "admin", "corporate"]) && (
-          <Tab
-            className={({ selected }) =>
-              clsx(
-                "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
-                "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
-                "transition duration-300 ease-in-out",
-                selected
-                  ? "bg-white shadow"
-                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
-              )
-            }
-          >
-            Code List
-          </Tab>
-        )}
-        {checkAccess(user, ["developer", "admin"]) && (
-          <Tab
-            className={({ selected }) =>
-              clsx(
-                "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
-                "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
-                "transition duration-300 ease-in-out",
-                selected
-                  ? "bg-white shadow"
-                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
-              )
-            }
-          >
-            Package List
-          </Tab>
-        )}
-        {checkAccess(user, ["developer", "admin"]) && (
-          <Tab
-            className={({ selected }) =>
-              clsx(
-                "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
-                "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
-                "transition duration-300 ease-in-out",
-                selected
-                  ? "bg-white shadow"
-                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
-              )
-            }
-          >
-            Discount List
-          </Tab>
-        )}
-      </Tab.List>
-      <Tab.Panels className="mt-2">
-        <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
-          <UserList user={user} />
-        </Tab.Panel>
-        {checkAccess(user, ["developer"]) && (
-          <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
-            <ExamList user={user} />
-          </Tab.Panel>
-        )}
-        <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
-          <GroupList user={user} />
-        </Tab.Panel>
-        {checkAccess(
-          user,
-          ["developer", "admin", "corporate", "mastercorporate"],
-          "viewCodes"
-        ) && (
-          <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
-            <CodeList user={user} />
-          </Tab.Panel>
-        )}
-        {checkAccess(user, ["developer", "admin"]) && (
-          <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
-            <PackageList user={user} />
-          </Tab.Panel>
-        )}
-        {checkAccess(user, ["developer", "admin"]) && (
-          <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
-            <DiscountList user={user} />
-          </Tab.Panel>
-        )}
-      </Tab.Panels>
-    </Tab.Group>
-  );
+export default function Lists({user}: {user: User}) {
+	const {permissions} = usePermissions(user?.id || "");
+
+	return (
+		<Tab.Group>
+			<Tab.List className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
+				<Tab
+					className={({selected}) =>
+						clsx(
+							"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
+							"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
+							"transition duration-300 ease-in-out",
+							selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+						)
+					}>
+					User List
+				</Tab>
+				{checkAccess(user, ["developer"]) && (
+					<Tab
+						className={({selected}) =>
+							clsx(
+								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
+								"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
+								"transition duration-300 ease-in-out",
+								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+							)
+						}>
+						Exam List
+					</Tab>
+				)}
+				<Tab
+					className={({selected}) =>
+						clsx(
+							"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
+							"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
+							"transition duration-300 ease-in-out",
+							selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+						)
+					}>
+					Group List
+				</Tab>
+				{checkAccess(user, ["developer", "admin", "corporate"]) && (
+					<Tab
+						className={({selected}) =>
+							clsx(
+								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
+								"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
+								"transition duration-300 ease-in-out",
+								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+							)
+						}>
+						Code List
+					</Tab>
+				)}
+				{checkAccess(user, ["developer", "admin"]) && (
+					<Tab
+						className={({selected}) =>
+							clsx(
+								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
+								"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
+								"transition duration-300 ease-in-out",
+								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+							)
+						}>
+						Package List
+					</Tab>
+				)}
+				{checkAccess(user, ["developer", "admin"]) && (
+					<Tab
+						className={({selected}) =>
+							clsx(
+								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
+								"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
+								"transition duration-300 ease-in-out",
+								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+							)
+						}>
+						Discount List
+					</Tab>
+				)}
+			</Tab.List>
+			<Tab.Panels className="mt-2">
+				<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
+					<UserList user={user} />
+				</Tab.Panel>
+				{checkAccess(user, ["developer"]) && (
+					<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
+						<ExamList user={user} />
+					</Tab.Panel>
+				)}
+				<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
+					<GroupList user={user} />
+				</Tab.Panel>
+				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"], permissions, "viewCodes") && (
+					<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
+						<CodeList user={user} />
+					</Tab.Panel>
+				)}
+				{checkAccess(user, ["developer", "admin"]) && (
+					<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
+						<PackageList user={user} />
+					</Tab.Panel>
+				)}
+				{checkAccess(user, ["developer", "admin"]) && (
+					<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
+						<DiscountList user={user} />
+					</Tab.Panel>
+				)}
+			</Tab.Panels>
+		</Tab.Group>
+	);
 }
diff --git a/src/pages/api/permissions/[id].ts b/src/pages/api/permissions/[id].ts
index 7c379719..4fe24fd4 100644
--- a/src/pages/api/permissions/[id].ts
+++ b/src/pages/api/permissions/[id].ts
@@ -1,30 +1,46 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from "next";
-import { app } from "@/firebase";
-import { getFirestore, doc, setDoc } from "firebase/firestore";
-import { withIronSessionApiRoute } from "iron-session/next";
-import { sessionOptions } from "@/lib/session";
+import type {NextApiRequest, NextApiResponse} from "next";
+import {app} from "@/firebase";
+import {getFirestore, doc, setDoc, getDoc} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {getPermissionDoc} from "@/utils/permissions.be";
 
 const db = getFirestore(app);
 
 export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
-  if (req.method === "PATCH") return patch(req, res);
+	if (req.method === "PATCH") return patch(req, res);
+	if (req.method === "GET") return get(req, res);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	const {id} = req.query as {id: string};
+
+	const permissionDoc = await getPermissionDoc(id);
+	return res.status(200).json({allowed: permissionDoc.users.includes(req.session.user.id)});
 }
 
 async function patch(req: NextApiRequest, res: NextApiResponse) {
-  if (!req.session.user) {
-    res.status(401).json({ ok: false });
-    return;
-  }
-  const { id } = req.query as { id: string };
-  const { users } = req.body;
-  try {
-    await setDoc(doc(db, "permissions", id), { users }, { merge: true });
-    return res.status(200).json({ ok: true });
-  } catch (err) {
-    console.error(err);
-    return res.status(500).json({ ok: false });
-  }
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	const {id} = req.query as {id: string};
+	const {users} = req.body;
+
+	try {
+		await setDoc(doc(db, "permissions", id), {users}, {merge: true});
+		return res.status(200).json({ok: true});
+	} catch (err) {
+		console.error(err);
+		return res.status(500).json({ok: false});
+	}
 }
diff --git a/src/pages/api/tickets/index.ts b/src/pages/api/tickets/index.ts
index d99b9fee..dd6db2bc 100644
--- a/src/pages/api/tickets/index.ts
+++ b/src/pages/api/tickets/index.ts
@@ -53,7 +53,10 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 
 	// based on the admin of each group, verify if it exists and it's of type corporate
 	const groupsAdmins = [...new Set(groups.map((g) => g.admin).filter((id) => id))];
-	const adminsSnapshot = await getDocs(query(collection(db, "users"), where("id", "in", groupsAdmins), where("type", "==", "corporate")));
+	const adminsSnapshot =
+		groupsAdmins.length > 0
+			? await getDocs(query(collection(db, "users"), where("id", "in", groupsAdmins), where("type", "==", "corporate")))
+			: {docs: []};
 	const admins = adminsSnapshot.docs.map((doc) => doc.data());
 
 	const docsWithAdmins = docs.map((d) => {
diff --git a/src/pages/api/user.ts b/src/pages/api/user.ts
index dcb2bf0d..6d9c176b 100644
--- a/src/pages/api/user.ts
+++ b/src/pages/api/user.ts
@@ -1,22 +1,12 @@
-import { PERMISSIONS } from "@/constants/userPermissions";
-import { app, adminApp } from "@/firebase";
-import { Group, User } from "@/interfaces/user";
-import { sessionOptions } from "@/lib/session";
-import {
-  collection,
-  deleteDoc,
-  doc,
-  getDoc,
-  getDocs,
-  getFirestore,
-  query,
-  setDoc,
-  where,
-} from "firebase/firestore";
-import { getAuth } from "firebase-admin/auth";
-import { withIronSessionApiRoute } from "iron-session/next";
-import { NextApiRequest, NextApiResponse } from "next";
-import { getPermissions, getPermissionDocs } from "@/utils/permissions.be";
+import {PERMISSIONS} from "@/constants/userPermissions";
+import {app, adminApp} from "@/firebase";
+import {Group, User} from "@/interfaces/user";
+import {sessionOptions} from "@/lib/session";
+import {collection, deleteDoc, doc, getDoc, getDocs, getFirestore, query, setDoc, where} from "firebase/firestore";
+import {getAuth} from "firebase-admin/auth";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {NextApiRequest, NextApiResponse} from "next";
+import {getPermissions, getPermissionDocs} from "@/utils/permissions.be";
 
 const db = getFirestore(app);
 const auth = getAuth(adminApp);
@@ -24,132 +14,108 @@ const auth = getAuth(adminApp);
 export default withIronSessionApiRoute(user, sessionOptions);
 
 async function user(req: NextApiRequest, res: NextApiResponse) {
-  if (req.method === "GET") return get(req, res);
-  if (req.method === "DELETE") return del(req, res);
+	if (req.method === "GET") return get(req, res);
+	if (req.method === "DELETE") return del(req, res);
 
-  res.status(404).json(undefined);
+	res.status(404).json(undefined);
 }
 
 async function del(req: NextApiRequest, res: NextApiResponse) {
-  if (!req.session.user) {
-    res.status(401).json({ ok: false });
-    return;
-  }
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
 
-  const { id } = req.query as { id: string };
+	const {id} = req.query as {id: string};
 
-  const docUser = await getDoc(doc(db, "users", req.session.user.id));
-  if (!docUser.exists()) {
-    res.status(401).json({ ok: false });
-    return;
-  }
+	const docUser = await getDoc(doc(db, "users", req.session.user.id));
+	if (!docUser.exists()) {
+		res.status(401).json({ok: false});
+		return;
+	}
 
-  const user = docUser.data() as User;
+	const user = docUser.data() as User;
 
-  const docTargetUser = await getDoc(doc(db, "users", id));
-  if (!docTargetUser.exists()) {
-    res.status(404).json({ ok: false });
-    return;
-  }
+	const docTargetUser = await getDoc(doc(db, "users", id));
+	if (!docTargetUser.exists()) {
+		res.status(404).json({ok: false});
+		return;
+	}
 
-  const targetUser = { ...docTargetUser.data(), id: docTargetUser.id } as User;
+	const targetUser = {...docTargetUser.data(), id: docTargetUser.id} as User;
 
-  if (
-    user.type === "corporate" &&
-    (targetUser.type === "student" || targetUser.type === "teacher")
-  ) {
-    res.json({ ok: true });
+	if (user.type === "corporate" && (targetUser.type === "student" || targetUser.type === "teacher")) {
+		res.json({ok: true});
 
-    const userParticipantGroup = await getDocs(
-      query(
-        collection(db, "groups"),
-        where("participants", "array-contains", id)
-      )
-    );
-    await Promise.all([
-      ...userParticipantGroup.docs
-        .filter((x) => (x.data() as Group).admin === user.id)
-        .map(
-          async (x) =>
-            await setDoc(
-              x.ref,
-              {
-                participants: x
-                  .data()
-                  .participants.filter((y: string) => y !== id),
-              },
-              { merge: true }
-            )
-        ),
-    ]);
+		const userParticipantGroup = await getDocs(query(collection(db, "groups"), where("participants", "array-contains", id)));
+		await Promise.all([
+			...userParticipantGroup.docs
+				.filter((x) => (x.data() as Group).admin === user.id)
+				.map(
+					async (x) =>
+						await setDoc(
+							x.ref,
+							{
+								participants: x.data().participants.filter((y: string) => y !== id),
+							},
+							{merge: true},
+						),
+				),
+		]);
 
-    return;
-  }
+		return;
+	}
 
-  const permission = PERMISSIONS.deleteUser[targetUser.type];
-  if (!permission.list.includes(user.type)) {
-    res.status(403).json({ ok: false });
-    return;
-  }
+	const permission = PERMISSIONS.deleteUser[targetUser.type];
+	if (!permission.list.includes(user.type)) {
+		res.status(403).json({ok: false});
+		return;
+	}
 
-  res.json({ ok: true });
+	res.json({ok: true});
 
-  await auth.deleteUser(id);
-  await deleteDoc(doc(db, "users", id));
-  const userCodeDocs = await getDocs(
-    query(collection(db, "codes"), where("userId", "==", id))
-  );
-  const userParticipantGroup = await getDocs(
-    query(collection(db, "groups"), where("participants", "array-contains", id))
-  );
-  const userGroupAdminDocs = await getDocs(
-    query(collection(db, "groups"), where("admin", "==", id))
-  );
-  const userStatsDocs = await getDocs(
-    query(collection(db, "stats"), where("user", "==", id))
-  );
+	await auth.deleteUser(id);
+	await deleteDoc(doc(db, "users", id));
+	const userCodeDocs = await getDocs(query(collection(db, "codes"), where("userId", "==", id)));
+	const userParticipantGroup = await getDocs(query(collection(db, "groups"), where("participants", "array-contains", id)));
+	const userGroupAdminDocs = await getDocs(query(collection(db, "groups"), where("admin", "==", id)));
+	const userStatsDocs = await getDocs(query(collection(db, "stats"), where("user", "==", id)));
 
-  await Promise.all([
-    ...userCodeDocs.docs.map(async (x) => await deleteDoc(x.ref)),
-    ...userGroupAdminDocs.docs.map(async (x) => await deleteDoc(x.ref)),
-    ...userStatsDocs.docs.map(async (x) => await deleteDoc(x.ref)),
-    ...userParticipantGroup.docs.map(
-      async (x) =>
-        await setDoc(
-          x.ref,
-          {
-            participants: x.data().participants.filter((y: string) => y !== id),
-          },
-          { merge: true }
-        )
-    ),
-  ]);
+	await Promise.all([
+		...userCodeDocs.docs.map(async (x) => await deleteDoc(x.ref)),
+		...userGroupAdminDocs.docs.map(async (x) => await deleteDoc(x.ref)),
+		...userStatsDocs.docs.map(async (x) => await deleteDoc(x.ref)),
+		...userParticipantGroup.docs.map(
+			async (x) =>
+				await setDoc(
+					x.ref,
+					{
+						participants: x.data().participants.filter((y: string) => y !== id),
+					},
+					{merge: true},
+				),
+		),
+	]);
 }
 
 async function get(req: NextApiRequest, res: NextApiResponse) {
-  if (req.session.user) {
-    const docUser = await getDoc(doc(db, "users", req.session.user.id));
-    if (!docUser.exists()) {
-      res.status(401).json(undefined);
-      return;
-    }
+	if (req.session.user) {
+		const docUser = await getDoc(doc(db, "users", req.session.user.id));
+		if (!docUser.exists()) {
+			res.status(401).json(undefined);
+			return;
+		}
 
-    const user = docUser.data() as User;
-	
-    const permissionDocs = await getPermissionDocs();
+		const user = docUser.data() as User;
 
-	const userWithPermissions = {
-		...user,
-		permissions: getPermissions(req.session.user.id, permissionDocs),
-	};
-    req.session.user = {
-      ...userWithPermissions,
-      id: req.session.user.id,
-    };
-    await req.session.save();
+		req.session.user = {
+			...user,
+			id: req.session.user.id,
+		};
+		await req.session.save();
 
-    res.json({ ...userWithPermissions, id: req.session.user.id });
-  } else {
-    res.status(401).json(undefined);
-  }
+		res.json({...user, id: req.session.user.id});
+	} else {
+		res.status(401).json(undefined);
+	}
 }
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index 17e673a9..3016f105 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -14,7 +14,8 @@ import BatchCodeGenerator from "./(admin)/BatchCodeGenerator";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import ExamGenerator from "./(admin)/ExamGenerator";
 import BatchCreateUser from "./(admin)/BatchCreateUser";
-import { checkAccess, getTypesOfUser } from "@/utils/permissions";
+import {checkAccess, getTypesOfUser} from "@/utils/permissions";
+import usePermissions from "@/hooks/usePermissions";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -43,6 +44,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 
 export default function Admin() {
 	const {user} = useUser({redirectTo: "/login"});
+	const {permissions} = usePermissions(user?.id || "");
 
 	return (
 		<>
@@ -60,11 +62,11 @@ export default function Admin() {
 				<Layout user={user} className="gap-6">
 					<section className="w-full flex -md:flex-col -xl:gap-2 gap-8 justify-between">
 						<ExamLoader />
-					  <BatchCreateUser user={user} />
-						{checkAccess(user, getTypesOfUser(["teacher"]), 'viewCodes') && (
+						<BatchCreateUser user={user} />
+						{checkAccess(user, getTypesOfUser(["teacher"]), permissions, "viewCodes") && (
 							<>
-							  <CodeGenerator user={user} />
-							  <BatchCodeGenerator user={user} />
+								<CodeGenerator user={user} />
+								<BatchCodeGenerator user={user} />
 							</>
 						)}
 					</section>
diff --git a/src/utils/permissions.ts b/src/utils/permissions.ts
index 65d7d17c..0831393d 100644
--- a/src/utils/permissions.ts
+++ b/src/utils/permissions.ts
@@ -1,45 +1,42 @@
-import { PermissionType } from "@/interfaces/permissions";
-import { User, Type, userTypes } from "@/interfaces/user";
+import {PermissionType} from "@/interfaces/permissions";
+import {User, Type, userTypes} from "@/interfaces/user";
+import axios from "axios";
 
-export function checkAccess(
-  user: User,
-  types: Type[],
-  permission?: PermissionType
-) {
-  if (!user) {
-    return false;
-  }
+export function checkAccess(user: User, types: Type[], permissions?: PermissionType[], permission?: PermissionType) {
+	if (!user) {
+		return false;
+	}
 
-  // if(user.type === '') {
-  if (!user.type) {
-    console.warn("User type is empty");
-    return false;
-  }
+	// if(user.type === '') {
+	if (!user.type) {
+		console.warn("User type is empty");
+		return false;
+	}
 
-  if (types.length === 0) {
-    console.warn("No types provided");
-    return false;
-  }
+	if (types.length === 0) {
+		console.warn("No types provided");
+		return false;
+	}
 
-  if (!types.includes(user.type)) {
-    return false;
-  }
+	if (!types.includes(user.type)) {
+		return false;
+	}
 
-  // we may not want a permission check as most screens dont even havr a specific permission
-  if (permission) {
-    // this works more like a blacklist
-    // therefore if we don't find the permission here, he can't do it
-    if (!(user.permissions || []).includes(permission)) {
-      return false;
-    }
-  }
+	// we may not want a permission check as most screens dont even havr a specific permission
+	if (permission) {
+		// this works more like a blacklist
+		// therefore if we don't find the permission here, he can't do it
+		if (!(permissions || []).includes(permission)) {
+			return false;
+		}
+	}
 
-  return true;
+	return true;
 }
 
 export function getTypesOfUser(types: Type[]) {
-    // basicly generate a list of all types except the excluded ones
-    return userTypes.filter((userType) => {
-        return !types.includes(userType);
-    })
+	// basicly generate a list of all types except the excluded ones
+	return userTypes.filter((userType) => {
+		return !types.includes(userType);
+	});
 }

From 8162567e12fd508af046badc3bd8c0a1874d8f19 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Mon, 12 Aug 2024 19:49:18 +0100
Subject: [PATCH 13/14] Updated the Batch Create User to also have an expiry
 date

---
 src/pages/(admin)/BatchCreateUser.tsx | 429 +++++++++++++-------------
 src/pages/api/make_user.ts            | 205 ++++++------
 src/pages/settings.tsx                |   2 +-
 3 files changed, 301 insertions(+), 335 deletions(-)

diff --git a/src/pages/(admin)/BatchCreateUser.tsx b/src/pages/(admin)/BatchCreateUser.tsx
index b484fd12..c942a31d 100644
--- a/src/pages/(admin)/BatchCreateUser.tsx
+++ b/src/pages/(admin)/BatchCreateUser.tsx
@@ -1,243 +1,232 @@
 import Button from "@/components/Low/Button";
 import useUsers from "@/hooks/useUsers";
-import { Type as UserType, User } from "@/interfaces/user";
+import {Type as UserType, User} from "@/interfaces/user";
 import axios from "axios";
-import { uniqBy } from "lodash";
-import { useEffect, useState } from "react";
-import { toast } from "react-toastify";
-import { useFilePicker } from "use-file-picker";
+import {uniqBy} from "lodash";
+import {useEffect, useState} from "react";
+import {toast} from "react-toastify";
+import {useFilePicker} from "use-file-picker";
 import readXlsxFile from "read-excel-file";
 import Modal from "@/components/Modal";
-import { BsQuestionCircleFill } from "react-icons/bs";
-import { PermissionType } from "@/interfaces/permissions";
-const EMAIL_REGEX = new RegExp(
-  /^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/
-);
+import {BsQuestionCircleFill} from "react-icons/bs";
+import {PermissionType} from "@/interfaces/permissions";
+import moment from "moment";
+import {checkAccess} from "@/utils/permissions";
+import Checkbox from "@/components/Low/Checkbox";
+import ReactDatePicker from "react-datepicker";
+import clsx from "clsx";
+const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
 
-type Type = Exclude<UserType, "admin" | "developer" | "agent" | "mastercorporate">
+type Type = Exclude<UserType, "admin" | "developer" | "agent" | "mastercorporate">;
 
 const USER_TYPE_LABELS: {[key in Type]: string} = {
-  student: "Student",
-  teacher: "Teacher",
-  corporate: "Corporate",
+	student: "Student",
+	teacher: "Teacher",
+	corporate: "Corporate",
 };
 
 const USER_TYPE_PERMISSIONS: {
-  [key in Type]: { perm: PermissionType | undefined; list: Type[] };
+	[key in Type]: {perm: PermissionType | undefined; list: Type[]};
 } = {
-  student: {
-    perm: "createCodeStudent",
-    list: [],
-  },
-  teacher: {
-    perm: "createCodeTeacher",
-    list: [],
-  },
-  corporate: {
-    perm: "createCodeCorporate",
-    list: ["student", "teacher"],
-  },
+	student: {
+		perm: "createCodeStudent",
+		list: [],
+	},
+	teacher: {
+		perm: "createCodeTeacher",
+		list: [],
+	},
+	corporate: {
+		perm: "createCodeCorporate",
+		list: ["student", "teacher"],
+	},
 };
 
-export default function BatchCreateUser({ user }: { user: User }) {
-  const [infos, setInfos] = useState<
-    { email: string; name: string; passport_id:string, type: Type, demographicInformation: {
-      country: string,
-      passport_id:string,
-      phone: string
-    }  }[]
-  >([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [type, setType] = useState<Type>("student");
-  const [showHelp, setShowHelp] = useState(false);
+export default function BatchCreateUser({user}: {user: User}) {
+	const [infos, setInfos] = useState<
+		{
+			email: string;
+			name: string;
+			passport_id: string;
+			type: Type;
+			demographicInformation: {
+				country: string;
+				passport_id: string;
+				phone: string;
+			};
+		}[]
+	>([]);
+	const [isLoading, setIsLoading] = useState(false);
+	const [expiryDate, setExpiryDate] = useState<Date | null>(
+		user?.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).toDate() : null,
+	);
+	const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
+	const [type, setType] = useState<Type>("student");
+	const [showHelp, setShowHelp] = useState(false);
 
-  const { users } = useUsers();
+	const {users} = useUsers();
 
-  const { openFilePicker, filesContent, clear } = useFilePicker({
-    accept: ".xlsx",
-    multiple: false,
-    readAs: "ArrayBuffer",
-  });
+	const {openFilePicker, filesContent, clear} = useFilePicker({
+		accept: ".xlsx",
+		multiple: false,
+		readAs: "ArrayBuffer",
+	});
 
+	useEffect(() => {
+		if (!isExpiryDateEnabled) setExpiryDate(null);
+	}, [isExpiryDateEnabled]);
 
-  useEffect(() => {
-    if (filesContent.length > 0) {
-      const file = filesContent[0];
-      readXlsxFile(file.content).then((rows) => {
-        try {
-          const information = uniqBy(
-            rows
-              .map((row) => {
-                const [
-                  firstName,
-                  lastName,
-                  country,
-                  passport_id,
-                  email,
-                  phone,
-                  group
-                ] = row as string[];
-                return EMAIL_REGEX.test(email.toString().trim())
-                  ? {
-                    email: email.toString().trim().toLowerCase(),
-                    name: `${firstName ?? ""} ${lastName ?? ""}`.trim().toLowerCase(),
-                    type: type,
-                    passport_id: passport_id?.toString().trim() || undefined,
-                    groupName: group,
-                    demographicInformation: {
-                      country: country,
-                      passport_id: passport_id?.toString().trim() || undefined,  
-                      phone,
-                    }
-                    }
-                  : undefined;
-              })
-              .filter((x) => !!x) as typeof infos,
-            (x) => x.email
-          );
+	useEffect(() => {
+		if (filesContent.length > 0) {
+			const file = filesContent[0];
+			readXlsxFile(file.content).then((rows) => {
+				try {
+					const information = uniqBy(
+						rows
+							.map((row) => {
+								const [firstName, lastName, country, passport_id, email, phone, group] = row as string[];
+								return EMAIL_REGEX.test(email.toString().trim())
+									? {
+											email: email.toString().trim().toLowerCase(),
+											name: `${firstName ?? ""} ${lastName ?? ""}`.trim().toLowerCase(),
+											type: type,
+											passport_id: passport_id?.toString().trim() || undefined,
+											groupName: group,
+											demographicInformation: {
+												country: country,
+												passport_id: passport_id?.toString().trim() || undefined,
+												phone,
+											},
+									  }
+									: undefined;
+							})
+							.filter((x) => !!x) as typeof infos,
+						(x) => x.email,
+					);
 
-          if (information.length === 0) {
-            toast.error(
-              "Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!"
-            );
-            return clear();
-          }
+					if (information.length === 0) {
+						toast.error(
+							"Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!",
+						);
+						return clear();
+					}
 
-          setInfos(information);
-        } catch {
-          toast.error(
-            "Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!"
-          );
-          return clear();
-        }
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filesContent]);
+					setInfos(information);
+				} catch {
+					toast.error(
+						"Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!",
+					);
+					return clear();
+				}
+			});
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [filesContent]);
 
-  const makeUsers = async () => {
-    const newUsers = infos.filter(
-      (x) => !users.map((u) => u.email).includes(x.email)
-    );
-    const confirmed = confirm(
-        `You are about to add ${newUsers.length}, are you sure you want to continue?`
-    )
-    if (!confirmed)
-      return;
-    if (newUsers.length > 0)
-      {
-        setIsLoading(true);
-        Promise.all(newUsers.map(async (user) => {
-          await axios.post("/api/make_user", user)
-        })).then((res) =>{
-        toast.success(
-          `Successfully added ${newUsers.length} user(s)!`
-        )}).finally(() => {
-          return clear();
-        })
-      }
-    setIsLoading(false);
-    setInfos([]);
-  };
+	const makeUsers = async () => {
+		const newUsers = infos.filter((x) => !users.map((u) => u.email).includes(x.email));
+		const confirmed = confirm(`You are about to add ${newUsers.length}, are you sure you want to continue?`);
+		if (!confirmed) return;
+		if (newUsers.length > 0) {
+			setIsLoading(true);
+			Promise.all(
+				newUsers.map(async (user) => {
+					await axios.post("/api/make_user", user);
+				}),
+			)
+				.then((res) => {
+					toast.success(`Successfully added ${newUsers.length} user(s)!`);
+				})
+				.finally(() => {
+					return clear();
+				});
+		}
+		setIsLoading(false);
+		setInfos([]);
+	};
 
-
-  return (
-    <>
-      <Modal
-        isOpen={showHelp}
-        onClose={() => setShowHelp(false)}
-        title="Excel File Format"
-      >
-        <div className="mt-4 flex flex-col gap-2">
-          <span>Please upload an Excel file with the following format:</span>
-          <table className="w-full">
-            <thead>
-              <tr>
-                <th className="border border-neutral-200 px-2 py-1">
-                  First Name
-                </th>
-                <th className="border border-neutral-200 px-2 py-1">
-                  Last Name
-                </th>
-                <th className="border border-neutral-200 px-2 py-1">Country</th>
-                <th className="border border-neutral-200 px-2 py-1">
-                  Passport/National ID
-                </th>
-                <th className="border border-neutral-200 px-2 py-1">E-mail</th>
-                <th className="border border-neutral-200 px-2 py-1">
-                  Phone Number
-                </th>
-                <th className="border border-neutral-200 px-2 py-1">
-                  Group Name
-                </th>
-              </tr>
-            </thead>
-          </table>
-          <span className="mt-4">
-            <b>Notes:</b>
-            <ul>
-              <li>- All incorrect e-mails will be ignored;</li>
-              <li>- All already registered e-mails will be ignored;</li>
-              <li>
-                - You may have a header row with the format above, however, it
-                is not necessary;
-              </li>
-              <li>
-                - All of the e-mails in the file will receive an e-mail to join
-                EnCoach with the role selected below.
-              </li>
-            </ul>
-          </span>
-        </div>
-      </Modal>
-      <div className="border-mti-gray-platinum flex flex-col gap-4 rounded-xl border p-4">
-        <div className="flex items-end justify-between">
-          <label className="text-mti-gray-dim text-base font-normal">
-            Choose an Excel file
-          </label>
-          <div
-            className="tooltip cursor-pointer"
-            data-tip="Excel File Format"
-            onClick={() => setShowHelp(true)}
-          >
-            <BsQuestionCircleFill />
-          </div>
-        </div>
-        <Button
-          onClick={openFilePicker}
-          isLoading={isLoading}
-          disabled={isLoading}
-        >
-          {filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
-        </Button>
-        <label className="text-mti-gray-dim text-base font-normal">
-          Select the type of user they should be
-        </label>
-        {user && (
-          <select
-            defaultValue="student"
-            onChange={(e) => setType(e.target.value as Type)}
-            className="flex min-h-[70px] w-full min-w-[350px] cursor-pointer justify-center rounded-full border bg-white p-6 text-sm font-normal focus:outline-none"
-          >
-            
-            {Object.keys(USER_TYPE_LABELS)
-              .map((type) => (
-                <option key={type} value={type}>
-                  {USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
-                </option>
-              ))}
-          </select>
-        )}
-        <Button
-          className="my-auto"
-          onClick={makeUsers}
-          disabled={
-            infos.length === 0
-          }
-        >
-          Create
-        </Button>
-      </div>
-    </>
-  );
+	return (
+		<>
+			<Modal isOpen={showHelp} onClose={() => setShowHelp(false)} title="Excel File Format">
+				<div className="mt-4 flex flex-col gap-2">
+					<span>Please upload an Excel file with the following format:</span>
+					<table className="w-full">
+						<thead>
+							<tr>
+								<th className="border border-neutral-200 px-2 py-1">First Name</th>
+								<th className="border border-neutral-200 px-2 py-1">Last Name</th>
+								<th className="border border-neutral-200 px-2 py-1">Country</th>
+								<th className="border border-neutral-200 px-2 py-1">Passport/National ID</th>
+								<th className="border border-neutral-200 px-2 py-1">E-mail</th>
+								<th className="border border-neutral-200 px-2 py-1">Phone Number</th>
+								<th className="border border-neutral-200 px-2 py-1">Group Name</th>
+							</tr>
+						</thead>
+					</table>
+					<span className="mt-4">
+						<b>Notes:</b>
+						<ul>
+							<li>- All incorrect e-mails will be ignored;</li>
+							<li>- All already registered e-mails will be ignored;</li>
+							<li>- You may have a header row with the format above, however, it is not necessary;</li>
+							<li>- All of the e-mails in the file will receive an e-mail to join EnCoach with the role selected below.</li>
+						</ul>
+					</span>
+				</div>
+			</Modal>
+			<div className="border-mti-gray-platinum flex flex-col gap-4 rounded-xl border p-4">
+				<div className="flex items-end justify-between">
+					<label className="text-mti-gray-dim text-base font-normal">Choose an Excel file</label>
+					<div className="tooltip cursor-pointer" data-tip="Excel File Format" onClick={() => setShowHelp(true)}>
+						<BsQuestionCircleFill />
+					</div>
+				</div>
+				<Button onClick={openFilePicker} isLoading={isLoading} disabled={isLoading}>
+					{filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
+				</Button>
+				{user && checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
+					<>
+						<div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
+							<label className="text-mti-gray-dim text-base font-normal">Expiry Date</label>
+							<Checkbox isChecked={isExpiryDateEnabled} onChange={setIsExpiryDateEnabled} disabled={!!user.subscriptionExpirationDate}>
+								Enabled
+							</Checkbox>
+						</div>
+						{isExpiryDateEnabled && (
+							<ReactDatePicker
+								className={clsx(
+									"flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
+									"hover:border-mti-purple tooltip",
+									"transition duration-300 ease-in-out",
+								)}
+								filterDate={(date) =>
+									moment(date).isAfter(new Date()) &&
+									(user.subscriptionExpirationDate ? moment(date).isBefore(user.subscriptionExpirationDate) : true)
+								}
+								dateFormat="dd/MM/yyyy"
+								selected={expiryDate}
+								onChange={(date) => setExpiryDate(date)}
+							/>
+						)}
+					</>
+				)}
+				<label className="text-mti-gray-dim text-base font-normal">Select the type of user they should be</label>
+				{user && (
+					<select
+						defaultValue="student"
+						onChange={(e) => setType(e.target.value as Type)}
+						className="flex min-h-[70px] w-full min-w-[350px] cursor-pointer justify-center rounded-full border bg-white p-6 text-sm font-normal focus:outline-none">
+						{Object.keys(USER_TYPE_LABELS).map((type) => (
+							<option key={type} value={type}>
+								{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
+							</option>
+						))}
+					</select>
+				)}
+				<Button className="my-auto" onClick={makeUsers} disabled={infos.length === 0}>
+					Create
+				</Button>
+			</div>
+		</>
+	);
 }
diff --git a/src/pages/api/make_user.ts b/src/pages/api/make_user.ts
index 1629e184..a3446390 100644
--- a/src/pages/api/make_user.ts
+++ b/src/pages/api/make_user.ts
@@ -1,20 +1,8 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-import { app } from "@/firebase";
-import {
-  getFirestore,
-  setDoc,
-  doc,
-  query,
-  collection,
-  where,
-  getDocs,
-  getDoc,
-  deleteDoc,
-  limit,
-  updateDoc,
-} from "firebase/firestore";
-import { withIronSessionApiRoute } from "iron-session/next";
-import { sessionOptions } from "@/lib/session";
+import type {NextApiRequest, NextApiResponse} from "next";
+import {app} from "@/firebase";
+import {getFirestore, setDoc, doc, query, collection, where, getDocs, getDoc, deleteDoc, limit, updateDoc} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
 import {v4} from "uuid";
 import {Group} from "@/interfaces/user";
 import {createUserWithEmailAndPassword, getAuth} from "firebase/auth";
@@ -39,114 +27,103 @@ const db = getFirestore(app);
 export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
-  
-  if (req.method === "POST") return post(req, res);
+	if (req.method === "POST") return post(req, res);
 
-  return res.status(404).json({ ok: false });
+	return res.status(404).json({ok: false});
 }
 
 async function post(req: NextApiRequest, res: NextApiResponse) {
-  const maker = req.session.user;
-  if (!maker) {
-    return res
-      .status(401)
-      .json({ ok: false, reason: "You must be logged in to make user!" });
-  }
-  const { email, passport_id, type, groupName } = req.body as {
-    email: string;
-    passport_id: string;
-    type: string,
-    groupName: string
-  };
-  // cleaning data
-  delete req.body.passport_id;
-  delete req.body.groupName;
+	const maker = req.session.user;
+	if (!maker) {
+		return res.status(401).json({ok: false, reason: "You must be logged in to make user!"});
+	}
+	const {email, passport_id, type, groupName, expiryDate} = req.body as {
+		email: string;
+		passport_id: string;
+		type: string;
+		groupName: string;
+		expiryDate: null | Date;
+	};
+	// cleaning data
+	delete req.body.passport_id;
+	delete req.body.groupName;
 
-  await createUserWithEmailAndPassword(auth, email.toLowerCase(), passport_id)
-    .then(async (userCredentials) => {
-      const userId = userCredentials.user.uid;
+	await createUserWithEmailAndPassword(auth, email.toLowerCase(), passport_id)
+		.then(async (userCredentials) => {
+			const userId = userCredentials.user.uid;
 
-      const user = {
-        ...req.body,
-        bio: "",
-        type: type,
-        focus: "academic",
-        status: "paymentDue",
-        desiredLevels: DEFAULT_DESIRED_LEVELS,
-        levels: DEFAULT_LEVELS,
-        isFirstLogin: false,
-        isVerified: true
-      };
-      await setDoc(doc(db, "users", userId), user);
-      if (type === "corporate") {
-        const defaultTeachersGroup: Group = {
-          admin: userId,
-          id: v4(),
-          name: "Teachers",
-          participants: [],
-          disableEditing: true,
-        };
+			const user = {
+				...req.body,
+				bio: "",
+				type: type,
+				focus: "academic",
+				status: "paymentDue",
+				desiredLevels: DEFAULT_DESIRED_LEVELS,
+				levels: DEFAULT_LEVELS,
+				isFirstLogin: false,
+				isVerified: true,
+				subscriptionExpirationDate: expiryDate || null,
+			};
+			await setDoc(doc(db, "users", userId), user);
+			if (type === "corporate") {
+				const defaultTeachersGroup: Group = {
+					admin: userId,
+					id: v4(),
+					name: "Teachers",
+					participants: [],
+					disableEditing: true,
+				};
 
-        const defaultStudentsGroup: Group = {
-          admin: userId,
-          id: v4(),
-          name: "Students",
-          participants: [],
-          disableEditing: true,
-        };
+				const defaultStudentsGroup: Group = {
+					admin: userId,
+					id: v4(),
+					name: "Students",
+					participants: [],
+					disableEditing: true,
+				};
 
-        const defaultCorporateGroup: Group = {
-          admin: userId,
-          id: v4(),
-          name: "Corporate",
-          participants: [],
-          disableEditing: true,
-        };
+				const defaultCorporateGroup: Group = {
+					admin: userId,
+					id: v4(),
+					name: "Corporate",
+					participants: [],
+					disableEditing: true,
+				};
 
+				await setDoc(doc(db, "groups", defaultTeachersGroup.id), defaultTeachersGroup);
+				await setDoc(doc(db, "groups", defaultStudentsGroup.id), defaultStudentsGroup);
+				await setDoc(doc(db, "groups", defaultCorporateGroup.id), defaultCorporateGroup);
+			}
 
-        await setDoc(doc(db, "groups", defaultTeachersGroup.id), defaultTeachersGroup);
-        await setDoc(doc(db, "groups", defaultStudentsGroup.id), defaultStudentsGroup);
-        await setDoc(doc(db, "groups", defaultCorporateGroup.id), defaultCorporateGroup);
-      }
-      
-      if(typeof groupName === 'string' && groupName.trim().length > 0){
-        
-        const q = query(collection(db, "groups"), where("admin", "==", maker.id),  where("name", "==", groupName.trim()), limit(1))
-        const snapshot = await getDocs(q)
-        
-        if(snapshot.empty){
-          const values = {
-            id: v4(),
-            admin: maker.id,
-            name: groupName.trim(),
-            participants: [userId],
-            disableEditing: false,
-          }
-          
-          await setDoc(doc(db, "groups", values.id) , values)
-          
+			if (typeof groupName === "string" && groupName.trim().length > 0) {
+				const q = query(collection(db, "groups"), where("admin", "==", maker.id), where("name", "==", groupName.trim()), limit(1));
+				const snapshot = await getDocs(q);
 
-        }else{
-          
+				if (snapshot.empty) {
+					const values = {
+						id: v4(),
+						admin: maker.id,
+						name: groupName.trim(),
+						participants: [userId],
+						disableEditing: false,
+					};
 
-          const doc = snapshot.docs[0]
-          const participants : string[] = doc.get('participants');
-          
-
-          if(!participants.includes(userId)){
-            
-
-            updateDoc(doc.ref, {
-              participants: [...participants, userId]
-            })
-          }
-        }
-      }
-    })
-    .catch((error) => {
-      console.log(error);
-      return res.status(401).json({error});
-    });
-  return res.status(200).json({ ok: true });
+					await setDoc(doc(db, "groups", values.id), values);
+				} else {
+					const doc = snapshot.docs[0];
+					const participants: string[] = doc.get("participants");
 
+					if (!participants.includes(userId)) {
+						updateDoc(doc.ref, {
+							participants: [...participants, userId],
+						});
+					}
+				}
+			}
+		})
+		.catch((error) => {
+			console.log(error);
+			return res.status(401).json({error});
+		});
+	return res.status(200).json({ok: true});
 }
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index 3016f105..a744b2a0 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -60,7 +60,7 @@ export default function Admin() {
 			<ToastContainer />
 			{user && (
 				<Layout user={user} className="gap-6">
-					<section className="w-full flex -md:flex-col -xl:gap-2 gap-8 justify-between">
+					<section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
 						<ExamLoader />
 						<BatchCreateUser user={user} />
 						{checkAccess(user, getTypesOfUser(["teacher"]), permissions, "viewCodes") && (

From 27841178622f6022ca41d3c33b5ca670c09905f1 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Tue, 13 Aug 2024 10:02:40 +0100
Subject: [PATCH 14/14] Updated the MasterCorporate and Corporate pages to
 allow to have Assignments

---
 src/dashboards/AssignmentCard.tsx      |  16 +-
 src/dashboards/AssignmentView.tsx      |  18 +-
 src/dashboards/Corporate.tsx           | 824 +++++++++++++-----------
 src/dashboards/MasterCorporate.tsx     | 835 ++++++++++++++-----------
 src/hooks/useAssignments.tsx           |   9 +-
 src/pages/api/assignments/corporate.ts |  40 ++
 src/utils/assignments.be.ts            |  14 +
 src/utils/groups.be.ts                 |  80 ++-
 src/utils/users.be.ts                  |  22 +-
 src/utils/users.ts                     |  11 +-
 10 files changed, 1050 insertions(+), 819 deletions(-)
 create mode 100644 src/pages/api/assignments/corporate.ts
 create mode 100644 src/utils/assignments.be.ts

diff --git a/src/dashboards/AssignmentCard.tsx b/src/dashboards/AssignmentCard.tsx
index 7316c379..1886cedd 100644
--- a/src/dashboards/AssignmentCard.tsx
+++ b/src/dashboards/AssignmentCard.tsx
@@ -10,6 +10,7 @@ import {usePDFDownload} from "@/hooks/usePDFDownload";
 import {useAssignmentArchive} from "@/hooks/useAssignmentArchive";
 import {uniqBy} from "lodash";
 import {useAssignmentUnarchive} from "@/hooks/useAssignmentUnarchive";
+import {getUserName} from "@/utils/users";
 
 interface Props {
 	onClick?: () => void;
@@ -35,6 +36,8 @@ export default function AssignmentCard({
 	allowArchive,
 	allowUnarchive,
 }: Assignment & Props) {
+	const {users} = useUsers();
+
 	const renderPdfIcon = usePDFDownload("assignments");
 	const renderArchiveIcon = useAssignmentArchive(id, reload);
 	const renderUnarchiveIcon = useAssignmentUnarchive(id, reload);
@@ -72,11 +75,14 @@ export default function AssignmentCard({
 					textClassName={results.length / assignees.length < 0.5 ? "!text-mti-gray-dim font-light" : "text-white"}
 				/>
 			</div>
-			<span className="flex justify-between gap-1">
-				<span>{moment(startDate).format("DD/MM/YY, HH:mm")}</span>
-				<span>-</span>
-				<span>{moment(endDate).format("DD/MM/YY, HH:mm")}</span>
-			</span>
+			<div className="flex flex-col gap-1">
+				<span className="flex justify-between gap-1">
+					<span>{moment(startDate).format("DD/MM/YY, HH:mm")}</span>
+					<span>-</span>
+					<span>{moment(endDate).format("DD/MM/YY, HH:mm")}</span>
+				</span>
+				<span>Assigner: {getUserName(users.find((x) => x.id === assigner))}</span>
+			</div>
 			<div className="-md:mt-2 grid w-full grid-cols-4 place-items-start gap-2">
 				{uniqBy(exams, (x) => x.module).map(({module}) => (
 					<div
diff --git a/src/dashboards/AssignmentView.tsx b/src/dashboards/AssignmentView.tsx
index daa330de..722daf6a 100644
--- a/src/dashboards/AssignmentView.tsx
+++ b/src/dashboards/AssignmentView.tsx
@@ -10,6 +10,7 @@ import {getExamById} from "@/utils/exams";
 import {sortByModule} from "@/utils/moduleUtils";
 import {calculateBandScore} from "@/utils/score";
 import {convertToUserSolutions} from "@/utils/stats";
+import {getUserName} from "@/utils/users";
 import axios from "axios";
 import clsx from "clsx";
 import {capitalize, uniqBy} from "lodash";
@@ -241,13 +242,16 @@ export default function AssignmentView({isOpen, assignment, onClose}: Props) {
 						<span>Start Date: {moment(assignment?.startDate).format("DD/MM/YY, HH:mm")}</span>
 						<span>End Date: {moment(assignment?.endDate).format("DD/MM/YY, HH:mm")}</span>
 					</div>
-					<span>
-						Assignees:{" "}
-						{users
-							.filter((u) => assignment?.assignees.includes(u.id))
-							.map((u) => `${u.name} (${u.email})`)
-							.join(", ")}
-					</span>
+					<div className="flex flex-col gap-2">
+						<span>
+							Assignees:{" "}
+							{users
+								.filter((u) => assignment?.assignees.includes(u.id))
+								.map((u) => `${u.name} (${u.email})`)
+								.join(", ")}
+						</span>
+						<span>Assigner: {getUserName(users.find((x) => x.id === assignment?.assigner))}</span>
+					</div>
 				</div>
 				<div className="flex flex-col gap-2">
 					<span className="text-xl font-bold">Average Scores</span>
diff --git a/src/dashboards/Corporate.tsx b/src/dashboards/Corporate.tsx
index 06feae46..be87e851 100644
--- a/src/dashboards/Corporate.tsx
+++ b/src/dashboards/Corporate.tsx
@@ -2,412 +2,492 @@
 import Modal from "@/components/Modal";
 import useStats from "@/hooks/useStats";
 import useUsers from "@/hooks/useUsers";
-import { CorporateUser, Group, Stat, User } from "@/interfaces/user";
+import {CorporateUser, Group, Stat, User} from "@/interfaces/user";
 import UserList from "@/pages/(admin)/Lists/UserList";
-import { dateSorter } from "@/utils";
+import {dateSorter} from "@/utils";
 import moment from "moment";
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
 import {
-  BsArrowLeft,
-  BsClipboard2Data,
-  BsClipboard2DataFill,
-  BsClock,
-  BsGlobeCentralSouthAsia,
-  BsPaperclip,
-  BsPerson,
-  BsPersonAdd,
-  BsPersonFill,
-  BsPersonFillGear,
-  BsPersonGear,
-  BsPencilSquare,
-  BsPersonBadge,
-  BsPersonCheck,
-  BsPeople,
+	BsArrowLeft,
+	BsClipboard2Data,
+	BsClipboard2DataFill,
+	BsClock,
+	BsGlobeCentralSouthAsia,
+	BsPaperclip,
+	BsPerson,
+	BsPersonAdd,
+	BsPersonFill,
+	BsPersonFillGear,
+	BsPersonGear,
+	BsPencilSquare,
+	BsPersonBadge,
+	BsPersonCheck,
+	BsPeople,
+	BsArrowRepeat,
+	BsPlus,
+	BsEnvelopePaper,
 } from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
-import { calculateAverageLevel, calculateBandScore } from "@/utils/score";
-import { MODULE_ARRAY } from "@/utils/moduleUtils";
-import { Module } from "@/interfaces";
-import { groupByExam } from "@/utils/stats";
+import {calculateAverageLevel, calculateBandScore} from "@/utils/score";
+import {MODULE_ARRAY} from "@/utils/moduleUtils";
+import {Module} from "@/interfaces";
+import {groupByExam} from "@/utils/stats";
 import IconCard from "./IconCard";
 import GroupList from "@/pages/(admin)/Lists/GroupList";
 import useFilterStore from "@/stores/listFilterStore";
-import { useRouter } from "next/router";
+import {useRouter} from "next/router";
 import useCodes from "@/hooks/useCodes";
-import { getUserCorporate } from "@/utils/groups";
+import {getUserCorporate} from "@/utils/groups";
+import useAssignments from "@/hooks/useAssignments";
+import {Assignment} from "@/interfaces/results";
+import AssignmentView from "./AssignmentView";
+import AssignmentCreator from "./AssignmentCreator";
+import clsx from "clsx";
+import AssignmentCard from "./AssignmentCard";
 
 interface Props {
-  user: CorporateUser;
+	user: CorporateUser;
 }
 
-export default function CorporateDashboard({ user }: Props) {
-  const [page, setPage] = useState("");
-  const [selectedUser, setSelectedUser] = useState<User>();
-  const [showModal, setShowModal] = useState(false);
-  const [corporateUserToShow, setCorporateUserToShow] =
-    useState<CorporateUser>();
+export default function CorporateDashboard({user}: Props) {
+	const [page, setPage] = useState("");
+	const [selectedUser, setSelectedUser] = useState<User>();
+	const [showModal, setShowModal] = useState(false);
+	const [corporateUserToShow, setCorporateUserToShow] = useState<CorporateUser>();
+	const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
+	const [isCreatingAssignment, setIsCreatingAssignment] = useState(false);
 
-  const { stats } = useStats();
-  const { users, reload } = useUsers();
-  const { codes } = useCodes(user.id);
-  const { groups } = useGroups(user.id);
+	const {stats} = useStats();
+	const {users, reload} = useUsers();
+	const {codes} = useCodes(user.id);
+	const {groups} = useGroups(user.id);
+	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({corporate: user.id});
 
-  const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
-  const router = useRouter();
+	const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
+	const router = useRouter();
 
-  useEffect(() => {
-    setShowModal(!!selectedUser && page === "");
-  }, [selectedUser, page]);
+	useEffect(() => {
+		setShowModal(!!selectedUser && page === "");
+	}, [selectedUser, page]);
 
-  useEffect(() => {
-    // in this case it fetches the master corporate account
-    getUserCorporate(user.id).then(setCorporateUserToShow);
-  }, [user]);
+	useEffect(() => {
+		// in this case it fetches the master corporate account
+		getUserCorporate(user.id).then(setCorporateUserToShow);
+	}, [user]);
 
-  const studentFilter = (user: User) =>
-    user.type === "student" &&
-    groups.flatMap((g) => g.participants).includes(user.id);
-  const teacherFilter = (user: User) =>
-    user.type === "teacher" &&
-    groups.flatMap((g) => g.participants).includes(user.id);
+	const studentFilter = (user: User) => user.type === "student" && groups.flatMap((g) => g.participants).includes(user.id);
+	const teacherFilter = (user: User) => user.type === "teacher" && groups.flatMap((g) => g.participants).includes(user.id);
 
-  const getStatsByStudent = (user: User) =>
-    stats.filter((s) => s.user === user.id);
+	const getStatsByStudent = (user: User) => stats.filter((s) => s.user === user.id);
 
-  const UserDisplay = (displayUser: User) => (
-    <div
-      onClick={() => setSelectedUser(displayUser)}
-      className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300"
-    >
-      <img
-        src={displayUser.profilePicture}
-        alt={displayUser.name}
-        className="rounded-full w-10 h-10"
-      />
-      <div className="flex flex-col gap-1 items-start">
-        <span>{displayUser.name}</span>
-        <span className="text-sm opacity-75">{displayUser.email}</span>
-      </div>
-    </div>
-  );
+	const UserDisplay = (displayUser: User) => (
+		<div
+			onClick={() => setSelectedUser(displayUser)}
+			className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300">
+			<img src={displayUser.profilePicture} alt={displayUser.name} className="rounded-full w-10 h-10" />
+			<div className="flex flex-col gap-1 items-start">
+				<span>{displayUser.name}</span>
+				<span className="text-sm opacity-75">{displayUser.email}</span>
+			</div>
+		</div>
+	);
 
-  const StudentsList = () => {
-    const filter = (x: User) =>
-      x.type === "student" &&
-      (!!selectedUser
-        ? groups
-            .filter((g) => g.admin === selectedUser.id)
-            .flatMap((g) => g.participants)
-            .includes(x.id) || false
-        : groups.flatMap((g) => g.participants).includes(x.id));
+	const StudentsList = () => {
+		const filter = (x: User) =>
+			x.type === "student" &&
+			(!!selectedUser
+				? groups
+						.filter((g) => g.admin === selectedUser.id)
+						.flatMap((g) => g.participants)
+						.includes(x.id) || false
+				: groups.flatMap((g) => g.participants).includes(x.id));
 
-    return (
-      <UserList
-        user={user}
-        filters={[filter]}
-        renderHeader={(total) => (
-          <div className="flex flex-col gap-4">
-            <div
-              onClick={() => setPage("")}
-              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
-            >
-              <BsArrowLeft className="text-xl" />
-              <span>Back</span>
-            </div>
-            <h2 className="text-2xl font-semibold">Students ({total})</h2>
-          </div>
-        )}
-      />
-    );
-  };
+		return (
+			<UserList
+				user={user}
+				filters={[filter]}
+				renderHeader={(total) => (
+					<div className="flex flex-col gap-4">
+						<div
+							onClick={() => setPage("")}
+							className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+							<BsArrowLeft className="text-xl" />
+							<span>Back</span>
+						</div>
+						<h2 className="text-2xl font-semibold">Students ({total})</h2>
+					</div>
+				)}
+			/>
+		);
+	};
 
-  const TeachersList = () => {
-    const filter = (x: User) =>
-      x.type === "teacher" &&
-      (!!selectedUser
-        ? groups
-            .filter((g) => g.admin === selectedUser.id)
-            .flatMap((g) => g.participants)
-            .includes(x.id) || false
-        : groups.flatMap((g) => g.participants).includes(x.id));
+	const TeachersList = () => {
+		const filter = (x: User) =>
+			x.type === "teacher" &&
+			(!!selectedUser
+				? groups
+						.filter((g) => g.admin === selectedUser.id)
+						.flatMap((g) => g.participants)
+						.includes(x.id) || false
+				: groups.flatMap((g) => g.participants).includes(x.id));
 
-    return (
-        <UserList
-          user={user}
-          filters={[filter]}
-          renderHeader={(total) => (
-            <div className="flex flex-col gap-4">
-              <div
-                onClick={() => setPage("")}
-                className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
-              >
-                <BsArrowLeft className="text-xl" />
-                <span>Back</span>
-              </div>
-              <h2 className="text-2xl font-semibold">Teachers ({total})</h2>
-            </div>
-          )}
-        />
-    );
-  };
+		return (
+			<UserList
+				user={user}
+				filters={[filter]}
+				renderHeader={(total) => (
+					<div className="flex flex-col gap-4">
+						<div
+							onClick={() => setPage("")}
+							className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+							<BsArrowLeft className="text-xl" />
+							<span>Back</span>
+						</div>
+						<h2 className="text-2xl font-semibold">Teachers ({total})</h2>
+					</div>
+				)}
+			/>
+		);
+	};
 
-  const GroupsList = () => {
-    const filter = (x: Group) =>
-      x.admin === user.id || x.participants.includes(user.id);
+	const GroupsList = () => {
+		const filter = (x: Group) => x.admin === user.id || x.participants.includes(user.id);
 
-    return (
-      <>
-        <div className="flex flex-col gap-4">
-          <div
-            onClick={() => setPage("")}
-            className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
-          >
-            <BsArrowLeft className="text-xl" />
-            <span>Back</span>
-          </div>
-          <h2 className="text-2xl font-semibold">
-            Groups ({groups.filter(filter).length})
-          </h2>
-        </div>
+		return (
+			<>
+				<div className="flex flex-col gap-4">
+					<div
+						onClick={() => setPage("")}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<h2 className="text-2xl font-semibold">Groups ({groups.filter(filter).length})</h2>
+				</div>
 
-        <GroupList user={user} />
-      </>
-    );
-  };
+				<GroupList user={user} />
+			</>
+		);
+	};
 
-  const averageLevelCalculator = (studentStats: Stat[]) => {
-    const formattedStats = studentStats
-      .map((s) => ({
-        focus: users.find((u) => u.id === s.user)?.focus,
-        score: s.score,
-        module: s.module,
-      }))
-      .filter((f) => !!f.focus);
-    const bandScores = formattedStats.map((s) => ({
-      module: s.module,
-      level: calculateBandScore(
-        s.score.correct,
-        s.score.total,
-        s.module,
-        s.focus!
-      ),
-    }));
+	const AssignmentsPage = () => {
+		const activeFilter = (a: Assignment) =>
+			moment(a.endDate).isAfter(moment()) && moment(a.startDate).isBefore(moment()) && a.assignees.length > a.results.length;
+		const pastFilter = (a: Assignment) => (moment(a.endDate).isBefore(moment()) || a.assignees.length === a.results.length) && !a.archived;
+		const archivedFilter = (a: Assignment) => a.archived;
+		const futureFilter = (a: Assignment) => moment(a.startDate).isAfter(moment());
 
-    const levels: { [key in Module]: number } = {
-      reading: 0,
-      listening: 0,
-      writing: 0,
-      speaking: 0,
-      level: 0,
-    };
-    bandScores.forEach((b) => (levels[b.module] += b.level));
+		return (
+			<>
+				<AssignmentView
+					isOpen={!!selectedAssignment && !isCreatingAssignment}
+					onClose={() => {
+						setSelectedAssignment(undefined);
+						setIsCreatingAssignment(false);
+						reloadAssignments();
+					}}
+					assignment={selectedAssignment}
+				/>
+				<AssignmentCreator
+					assignment={selectedAssignment}
+					groups={groups.filter((x) => x.admin === user.id || x.participants.includes(user.id))}
+					users={users.filter(
+						(x) =>
+							x.type === "student" &&
+							(!!selectedUser
+								? groups
+										.filter((g) => g.admin === selectedUser.id)
+										.flatMap((g) => g.participants)
+										.includes(x.id) || false
+								: groups.flatMap((g) => g.participants).includes(x.id)),
+					)}
+					assigner={user.id}
+					isCreating={isCreatingAssignment}
+					cancelCreation={() => {
+						setIsCreatingAssignment(false);
+						setSelectedAssignment(undefined);
+						reloadAssignments();
+					}}
+				/>
+				<div className="w-full flex justify-between items-center">
+					<div
+						onClick={() => setPage("")}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<div
+						onClick={reloadAssignments}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<span>Reload</span>
+						<BsArrowRepeat className={clsx("text-xl", isAssignmentsLoading && "animate-spin")} />
+					</div>
+				</div>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Active Assignments ({assignments.filter(activeFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						{assignments.filter(activeFilter).map((a) => (
+							<AssignmentCard {...a} onClick={() => setSelectedAssignment(a)} key={a.id} />
+						))}
+					</div>
+				</section>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Planned Assignments ({assignments.filter(futureFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						<div
+							onClick={() => setIsCreatingAssignment(true)}
+							className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300">
+							<BsPlus className="text-6xl" />
+							<span className="text-lg">New Assignment</span>
+						</div>
+						{assignments.filter(futureFilter).map((a) => (
+							<AssignmentCard
+								{...a}
+								onClick={() => {
+									setSelectedAssignment(a);
+									setIsCreatingAssignment(true);
+								}}
+								key={a.id}
+							/>
+						))}
+					</div>
+				</section>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Past Assignments ({assignments.filter(pastFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						{assignments.filter(pastFilter).map((a) => (
+							<AssignmentCard
+								{...a}
+								onClick={() => setSelectedAssignment(a)}
+								key={a.id}
+								allowDownload
+								reload={reloadAssignments}
+								allowArchive
+							/>
+						))}
+					</div>
+				</section>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Archived Assignments ({assignments.filter(archivedFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						{assignments.filter(archivedFilter).map((a) => (
+							<AssignmentCard
+								{...a}
+								onClick={() => setSelectedAssignment(a)}
+								key={a.id}
+								allowDownload
+								reload={reloadAssignments}
+								allowUnarchive
+							/>
+						))}
+					</div>
+				</section>
+			</>
+		);
+	};
 
-    return calculateAverageLevel(levels);
-  };
+	const averageLevelCalculator = (studentStats: Stat[]) => {
+		const formattedStats = studentStats
+			.map((s) => ({
+				focus: users.find((u) => u.id === s.user)?.focus,
+				score: s.score,
+				module: s.module,
+			}))
+			.filter((f) => !!f.focus);
+		const bandScores = formattedStats.map((s) => ({
+			module: s.module,
+			level: calculateBandScore(s.score.correct, s.score.total, s.module, s.focus!),
+		}));
 
-  const DefaultDashboard = () => (
-    <>
-              {corporateUserToShow && (
-        <div className="absolute top-4 right-4 bg-neutral-200 px-2 rounded-lg py-1">
-          Linked to:{" "}
-          <b>
-            {corporateUserToShow?.corporateInformation?.companyInformation
-              .name || corporateUserToShow.name}
-          </b>
-        </div>
-      )}
-      <section className="flex flex-wrap gap-2 items-center -lg:justify-center lg:justify-between text-center">
-        <IconCard
-          onClick={() => setPage("students")}
-          Icon={BsPersonFill}
-          label="Students"
-          value={users.filter(studentFilter).length}
-          color="purple"
-        />
-        <IconCard
-          onClick={() => setPage("teachers")}
-          Icon={BsPencilSquare}
-          label="Teachers"
-          value={users.filter(teacherFilter).length}
-          color="purple"
-        />
-        <IconCard
-          Icon={BsClipboard2Data}
-          label="Exams Performed"
-          value={
-            stats.filter((s) =>
-              groups.flatMap((g) => g.participants).includes(s.user)
-            ).length
-          }
-          color="purple"
-        />
-        <IconCard
-          Icon={BsPaperclip}
-          label="Average Level"
-          value={averageLevelCalculator(
-            stats.filter((s) =>
-              groups.flatMap((g) => g.participants).includes(s.user)
-            )
-          ).toFixed(1)}
-          color="purple"
-        />
-        <IconCard
-          onClick={() => setPage("groups")}
-          Icon={BsPeople}
-          label="Groups"
-          value={groups.length}
-          color="purple"
-        />
-        <IconCard
-          Icon={BsPersonCheck}
-          label="User Balance"
-          value={`${codes.length}/${
-            user.corporateInformation?.companyInformation?.userAmount || 0
-          }`}
-          color="purple"
-        />
-        <IconCard
-          Icon={BsClock}
-          label="Expiration Date"
-          value={
-            user.subscriptionExpirationDate
-              ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy")
-              : "Unlimited"
-          }
-          color="rose"
-        />
-      </section>
+		const levels: {[key in Module]: number} = {
+			reading: 0,
+			listening: 0,
+			writing: 0,
+			speaking: 0,
+			level: 0,
+		};
+		bandScores.forEach((b) => (levels[b.module] += b.level));
 
-      <section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
-        <div className="bg-white shadow flex flex-col rounded-xl w-full">
-          <span className="p-4">Latest students</span>
-          <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-            {users
-              .filter(studentFilter)
-              .sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
-              .map((x) => (
-                <UserDisplay key={x.id} {...x} />
-              ))}
-          </div>
-        </div>
-        <div className="bg-white shadow flex flex-col rounded-xl w-full">
-          <span className="p-4">Latest teachers</span>
-          <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-            {users
-              .filter(teacherFilter)
-              .sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
-              .map((x) => (
-                <UserDisplay key={x.id} {...x} />
-              ))}
-          </div>
-        </div>
-        <div className="bg-white shadow flex flex-col rounded-xl w-full">
-          <span className="p-4">Highest level students</span>
-          <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-            {users
-              .filter(studentFilter)
-              .sort(
-                (a, b) =>
-                  calculateAverageLevel(b.levels) -
-                  calculateAverageLevel(a.levels)
-              )
-              .map((x) => (
-                <UserDisplay key={x.id} {...x} />
-              ))}
-          </div>
-        </div>
-        <div className="bg-white shadow flex flex-col rounded-xl w-full">
-          <span className="p-4">Highest exam count students</span>
-          <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-            {users
-              .filter(studentFilter)
-              .sort(
-                (a, b) =>
-                  Object.keys(groupByExam(getStatsByStudent(b))).length -
-                  Object.keys(groupByExam(getStatsByStudent(a))).length
-              )
-              .map((x) => (
-                <UserDisplay key={x.id} {...x} />
-              ))}
-          </div>
-        </div>
-      </section>
-    </>
-  );
+		return calculateAverageLevel(levels);
+	};
 
-  return (
-    <>
-      <Modal isOpen={showModal} onClose={() => setSelectedUser(undefined)}>
-        <>
-          {selectedUser && (
-            <div className="w-full flex flex-col gap-8">
-              <UserCard
-                loggedInUser={user}
-                onClose={(shouldReload) => {
-                  setSelectedUser(undefined);
-                  if (shouldReload) reload();
-                }}
-                onViewStudents={
-                  selectedUser.type === "corporate" ||
-                  selectedUser.type === "teacher"
-                    ? () => {
-                        appendUserFilters({
-                          id: "view-students",
-                          filter: (x: User) => x.type === "student",
-                        });
-                        appendUserFilters({
-                          id: "belongs-to-admin",
-                          filter: (x: User) =>
-                            groups
-                              .filter(
-                                (g) =>
-                                  g.admin === selectedUser.id ||
-                                  g.participants.includes(selectedUser.id)
-                              )
-                              .flatMap((g) => g.participants)
-                              .includes(x.id),
-                        });
+	const DefaultDashboard = () => (
+		<>
+			{corporateUserToShow && (
+				<div className="absolute top-4 right-4 bg-neutral-200 px-2 rounded-lg py-1">
+					Linked to: <b>{corporateUserToShow?.corporateInformation?.companyInformation.name || corporateUserToShow.name}</b>
+				</div>
+			)}
+			<section className="grid grid-cols-5 -md:grid-cols-2 gap-4 text-center">
+				<IconCard
+					onClick={() => setPage("students")}
+					Icon={BsPersonFill}
+					label="Students"
+					value={users.filter(studentFilter).length}
+					color="purple"
+				/>
+				<IconCard
+					onClick={() => setPage("teachers")}
+					Icon={BsPencilSquare}
+					label="Teachers"
+					value={users.filter(teacherFilter).length}
+					color="purple"
+				/>
+				<IconCard
+					Icon={BsClipboard2Data}
+					label="Exams Performed"
+					value={stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user)).length}
+					color="purple"
+				/>
+				<IconCard
+					Icon={BsPaperclip}
+					label="Average Level"
+					value={averageLevelCalculator(stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user))).toFixed(1)}
+					color="purple"
+				/>
+				<IconCard onClick={() => setPage("groups")} Icon={BsPeople} label="Groups" value={groups.length} color="purple" />
+				<IconCard
+					Icon={BsPersonCheck}
+					label="User Balance"
+					value={`${codes.length}/${user.corporateInformation?.companyInformation?.userAmount || 0}`}
+					color="purple"
+				/>
+				<IconCard
+					Icon={BsClock}
+					label="Expiration Date"
+					value={user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy") : "Unlimited"}
+					color="rose"
+				/>
+				<button
+					disabled={isAssignmentsLoading}
+					onClick={() => setPage("assignments")}
+					className="bg-white col-span-2 rounded-xl shadow p-4 flex flex-col gap-4 items-center w-96 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
+					<BsEnvelopePaper className="text-6xl text-mti-purple-light" />
+					<span className="flex flex-col gap-1 items-center text-xl">
+						<span className="text-lg">Assignments</span>
+						<span className="font-semibold text-mti-purple-light">
+							{isAssignmentsLoading ? "Loading..." : assignments.filter((a) => !a.archived).length}
+						</span>
+					</span>
+				</button>
+			</section>
 
-                        router.push("/list/users");
-                      }
-                    : undefined
-                }
-                onViewTeachers={
-                  selectedUser.type === "corporate" ||
-                  selectedUser.type === "student"
-                    ? () => {
-                        appendUserFilters({
-                          id: "view-teachers",
-                          filter: (x: User) => x.type === "teacher",
-                        });
-                        appendUserFilters({
-                          id: "belongs-to-admin",
-                          filter: (x: User) =>
-                            groups
-                              .filter(
-                                (g) =>
-                                  g.admin === selectedUser.id ||
-                                  g.participants.includes(selectedUser.id)
-                              )
-                              .flatMap((g) => g.participants)
-                              .includes(x.id),
-                        });
+			<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Latest students</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{users
+							.filter(studentFilter)
+							.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Latest teachers</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{users
+							.filter(teacherFilter)
+							.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Highest level students</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{users
+							.filter(studentFilter)
+							.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Highest exam count students</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{users
+							.filter(studentFilter)
+							.sort(
+								(a, b) =>
+									Object.keys(groupByExam(getStatsByStudent(b))).length - Object.keys(groupByExam(getStatsByStudent(a))).length,
+							)
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
+			</section>
+		</>
+	);
 
-                        router.push("/list/users");
-                      }
-                    : undefined
-                }
-                user={selectedUser}
-              />
-            </div>
-          )}
-        </>
-      </Modal>
-      {page === "students" && <StudentsList />}
-      {page === "teachers" && <TeachersList />}
-      {page === "groups" && <GroupsList />}
-      {page === "" && <DefaultDashboard />}
-    </>
-  );
+	return (
+		<>
+			<Modal isOpen={showModal} onClose={() => setSelectedUser(undefined)}>
+				<>
+					{selectedUser && (
+						<div className="w-full flex flex-col gap-8">
+							<UserCard
+								loggedInUser={user}
+								onClose={(shouldReload) => {
+									setSelectedUser(undefined);
+									if (shouldReload) reload();
+								}}
+								onViewStudents={
+									selectedUser.type === "corporate" || selectedUser.type === "teacher"
+										? () => {
+												appendUserFilters({
+													id: "view-students",
+													filter: (x: User) => x.type === "student",
+												});
+												appendUserFilters({
+													id: "belongs-to-admin",
+													filter: (x: User) =>
+														groups
+															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+															.flatMap((g) => g.participants)
+															.includes(x.id),
+												});
+
+												router.push("/list/users");
+										  }
+										: undefined
+								}
+								onViewTeachers={
+									selectedUser.type === "corporate" || selectedUser.type === "student"
+										? () => {
+												appendUserFilters({
+													id: "view-teachers",
+													filter: (x: User) => x.type === "teacher",
+												});
+												appendUserFilters({
+													id: "belongs-to-admin",
+													filter: (x: User) =>
+														groups
+															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+															.flatMap((g) => g.participants)
+															.includes(x.id),
+												});
+
+												router.push("/list/users");
+										  }
+										: undefined
+								}
+								user={selectedUser}
+							/>
+						</div>
+					)}
+				</>
+			</Modal>
+			{page === "students" && <StudentsList />}
+			{page === "teachers" && <TeachersList />}
+			{page === "groups" && <GroupsList />}
+			{page === "assignments" && <AssignmentsPage />}
+			{page === "" && <DefaultDashboard />}
+		</>
+	);
 }
diff --git a/src/dashboards/MasterCorporate.tsx b/src/dashboards/MasterCorporate.tsx
index 95736597..e5eb1b96 100644
--- a/src/dashboards/MasterCorporate.tsx
+++ b/src/dashboards/MasterCorporate.tsx
@@ -2,423 +2,496 @@
 import Modal from "@/components/Modal";
 import useStats from "@/hooks/useStats";
 import useUsers from "@/hooks/useUsers";
-import { Group, MasterCorporateUser, Stat, User } from "@/interfaces/user";
+import {Group, MasterCorporateUser, Stat, User} from "@/interfaces/user";
 import UserList from "@/pages/(admin)/Lists/UserList";
-import { dateSorter } from "@/utils";
+import {dateSorter} from "@/utils";
 import moment from "moment";
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
 import {
-  BsArrowLeft,
-  BsClipboard2Data,
-  BsClock,
-  BsPaperclip,
-  BsPersonFill,
-  BsPencilSquare,
-  BsPersonCheck,
-  BsPeople,
-  BsBank,
+	BsArrowLeft,
+	BsClipboard2Data,
+	BsClock,
+	BsPaperclip,
+	BsPersonFill,
+	BsPencilSquare,
+	BsPersonCheck,
+	BsPeople,
+	BsBank,
+	BsEnvelopePaper,
+	BsArrowRepeat,
+	BsPlus,
 } from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
 
-import { calculateAverageLevel, calculateBandScore } from "@/utils/score";
-import { MODULE_ARRAY } from "@/utils/moduleUtils";
-import { Module } from "@/interfaces";
-import { groupByExam } from "@/utils/stats";
+import {calculateAverageLevel, calculateBandScore} from "@/utils/score";
+import {MODULE_ARRAY} from "@/utils/moduleUtils";
+import {Module} from "@/interfaces";
+import {groupByExam} from "@/utils/stats";
 import IconCard from "./IconCard";
 import GroupList from "@/pages/(admin)/Lists/GroupList";
 import useFilterStore from "@/stores/listFilterStore";
-import { useRouter } from "next/router";
+import {useRouter} from "next/router";
 import useCodes from "@/hooks/useCodes";
+import useAssignments from "@/hooks/useAssignments";
+import {Assignment} from "@/interfaces/results";
+import AssignmentView from "./AssignmentView";
+import AssignmentCreator from "./AssignmentCreator";
+import clsx from "clsx";
+import AssignmentCard from "./AssignmentCard";
 
 interface Props {
-  user: MasterCorporateUser;
+	user: MasterCorporateUser;
 }
 
-export default function MasterCorporateDashboard({ user }: Props) {
-  const [page, setPage] = useState("");
-  const [selectedUser, setSelectedUser] = useState<User>();
-  const [showModal, setShowModal] = useState(false);
+export default function MasterCorporateDashboard({user}: Props) {
+	const [page, setPage] = useState("");
+	const [selectedUser, setSelectedUser] = useState<User>();
+	const [showModal, setShowModal] = useState(false);
+	const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
+	const [isCreatingAssignment, setIsCreatingAssignment] = useState(false);
 
-  const { stats } = useStats();
-  const { users, reload } = useUsers();
-  const { codes } = useCodes(user.id);
-  const { groups } = useGroups(user.id, user.type);
+	const {stats} = useStats();
+	const {users, reload} = useUsers();
+	const {codes} = useCodes(user.id);
+	const {groups} = useGroups(user.id, user.type);
 
-  const masterCorporateUserGroups = [
-    ...new Set(
-      groups.filter((u) => u.admin === user.id).flatMap((g) => g.participants)
-    ),
-  ];
-  const corporateUserGroups = [
-    ...new Set(groups.flatMap((g) => g.participants)),
-  ];
+	const masterCorporateUserGroups = [...new Set(groups.filter((u) => u.admin === user.id).flatMap((g) => g.participants))];
+	const corporateUserGroups = [...new Set(groups.flatMap((g) => g.participants))];
 
-  const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
-  const router = useRouter();
+	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({corporate: user.id});
 
-  useEffect(() => {
-    setShowModal(!!selectedUser && page === "");
-  }, [selectedUser, page]);
+	const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
+	const router = useRouter();
 
-  const studentFilter = (user: User) =>
-    user.type === "student" && corporateUserGroups.includes(user.id);
-  const teacherFilter = (user: User) =>
-    user.type === "teacher" && corporateUserGroups.includes(user.id);
+	useEffect(() => {
+		setShowModal(!!selectedUser && page === "");
+	}, [selectedUser, page]);
 
-  const getStatsByStudent = (user: User) =>
-    stats.filter((s) => s.user === user.id);
+	const studentFilter = (user: User) => user.type === "student" && corporateUserGroups.includes(user.id);
+	const teacherFilter = (user: User) => user.type === "teacher" && corporateUserGroups.includes(user.id);
 
-  const UserDisplay = (displayUser: User) => (
-    <div
-      onClick={() => setSelectedUser(displayUser)}
-      className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300"
-    >
-      <img
-        src={displayUser.profilePicture}
-        alt={displayUser.name}
-        className="rounded-full w-10 h-10"
-      />
-      <div className="flex flex-col gap-1 items-start">
-        <span>{displayUser.name}</span>
-        <span className="text-sm opacity-75">{displayUser.email}</span>
-      </div>
-    </div>
-  );
+	const getStatsByStudent = (user: User) => stats.filter((s) => s.user === user.id);
 
-  const StudentsList = () => {
-    const filter = (x: User) =>
-      x.type === "student" &&
-      (!!selectedUser
-        ? corporateUserGroups.includes(x.id) || false
-        : corporateUserGroups.includes(x.id));
+	const UserDisplay = (displayUser: User) => (
+		<div
+			onClick={() => setSelectedUser(displayUser)}
+			className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300">
+			<img src={displayUser.profilePicture} alt={displayUser.name} className="rounded-full w-10 h-10" />
+			<div className="flex flex-col gap-1 items-start">
+				<span>{displayUser.name}</span>
+				<span className="text-sm opacity-75">{displayUser.email}</span>
+			</div>
+		</div>
+	);
 
-    return (
-      <UserList
-        user={user}
-        filters={[filter]}
-        renderHeader={(total) => (
-          <div className="flex flex-col gap-4">
-            <div
-              onClick={() => setPage("")}
-              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
-            >
-              <BsArrowLeft className="text-xl" />
-              <span>Back</span>
-            </div>
-            <h2 className="text-2xl font-semibold">Students ({total})</h2>
-          </div>
-        )}
-      />
-    );
-  };
+	const StudentsList = () => {
+		const filter = (x: User) =>
+			x.type === "student" && (!!selectedUser ? corporateUserGroups.includes(x.id) || false : corporateUserGroups.includes(x.id));
 
-  const TeachersList = () => {
-    const filter = (x: User) =>
-      x.type === "teacher" &&
-      (!!selectedUser
-        ? corporateUserGroups.includes(x.id) || false
-        : corporateUserGroups.includes(x.id));
+		return (
+			<UserList
+				user={user}
+				filters={[filter]}
+				renderHeader={(total) => (
+					<div className="flex flex-col gap-4">
+						<div
+							onClick={() => setPage("")}
+							className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+							<BsArrowLeft className="text-xl" />
+							<span>Back</span>
+						</div>
+						<h2 className="text-2xl font-semibold">Students ({total})</h2>
+					</div>
+				)}
+			/>
+		);
+	};
 
-    return (
-      <UserList
-        user={user}
-        filters={[filter]}
-        renderHeader={(total) => (
-          <div className="flex flex-col gap-4">
-            <div
-              onClick={() => setPage("")}
-              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
-            >
-              <BsArrowLeft className="text-xl" />
-              <span>Back</span>
-            </div>
-            <h2 className="text-2xl font-semibold">Teachers ({total})</h2>
-          </div>
-        )}
-      />
-    );
-  };
+	const TeachersList = () => {
+		const filter = (x: User) =>
+			x.type === "teacher" && (!!selectedUser ? corporateUserGroups.includes(x.id) || false : corporateUserGroups.includes(x.id));
 
-  const corporateUserFilter = (x: User) =>
-    x.type === "corporate" &&
-    (!!selectedUser
-      ? masterCorporateUserGroups.includes(x.id) || false
-      : masterCorporateUserGroups.includes(x.id));
+		return (
+			<UserList
+				user={user}
+				filters={[filter]}
+				renderHeader={(total) => (
+					<div className="flex flex-col gap-4">
+						<div
+							onClick={() => setPage("")}
+							className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+							<BsArrowLeft className="text-xl" />
+							<span>Back</span>
+						</div>
+						<h2 className="text-2xl font-semibold">Teachers ({total})</h2>
+					</div>
+				)}
+			/>
+		);
+	};
 
-  const CorporateList = () => {
-    return (
-      <UserList
-        user={user}
-        filters={[corporateUserFilter]}
-        renderHeader={(total) => (
-          <div className="flex flex-col gap-4">
-            <div
-              onClick={() => setPage("")}
-              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
-            >
-              <BsArrowLeft className="text-xl" />
-              <span>Back</span>
-            </div>
-            <h2 className="text-2xl font-semibold">Corporates ({total})</h2>
-          </div>
-        )}
-      />
-    );
-  };
+	const corporateUserFilter = (x: User) =>
+		x.type === "corporate" && (!!selectedUser ? masterCorporateUserGroups.includes(x.id) || false : masterCorporateUserGroups.includes(x.id));
 
-  const GroupsList = () => {
-    return (
-      <>
-        <div className="flex flex-col gap-4">
-          <div
-            onClick={() => setPage("")}
-            className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
-          >
-            <BsArrowLeft className="text-xl" />
-            <span>Back</span>
-          </div>
-          <h2 className="text-2xl font-semibold">
-            Groups ({groups.length})
-          </h2>
-        </div>
+	const CorporateList = () => {
+		return (
+			<UserList
+				user={user}
+				filters={[corporateUserFilter]}
+				renderHeader={(total) => (
+					<div className="flex flex-col gap-4">
+						<div
+							onClick={() => setPage("")}
+							className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+							<BsArrowLeft className="text-xl" />
+							<span>Back</span>
+						</div>
+						<h2 className="text-2xl font-semibold">Corporates ({total})</h2>
+					</div>
+				)}
+			/>
+		);
+	};
 
-        <GroupList user={user} />
-      </>
-    );
-  };
+	const GroupsList = () => {
+		return (
+			<>
+				<div className="flex flex-col gap-4">
+					<div
+						onClick={() => setPage("")}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<h2 className="text-2xl font-semibold">Groups ({groups.length})</h2>
+				</div>
 
-  const averageLevelCalculator = (studentStats: Stat[]) => {
-    const formattedStats = studentStats
-      .map((s) => ({
-        focus: users.find((u) => u.id === s.user)?.focus,
-        score: s.score,
-        module: s.module,
-      }))
-      .filter((f) => !!f.focus);
-    const bandScores = formattedStats.map((s) => ({
-      module: s.module,
-      level: calculateBandScore(
-        s.score.correct,
-        s.score.total,
-        s.module,
-        s.focus!
-      ),
-    }));
+				<GroupList user={user} />
+			</>
+		);
+	};
 
-    const levels: { [key in Module]: number } = {
-      reading: 0,
-      listening: 0,
-      writing: 0,
-      speaking: 0,
-      level: 0,
-    };
-    bandScores.forEach((b) => (levels[b.module] += b.level));
+	const AssignmentsPage = () => {
+		const activeFilter = (a: Assignment) =>
+			moment(a.endDate).isAfter(moment()) && moment(a.startDate).isBefore(moment()) && a.assignees.length > a.results.length;
+		const pastFilter = (a: Assignment) => (moment(a.endDate).isBefore(moment()) || a.assignees.length === a.results.length) && !a.archived;
+		const archivedFilter = (a: Assignment) => a.archived;
+		const futureFilter = (a: Assignment) => moment(a.startDate).isAfter(moment());
 
-    return calculateAverageLevel(levels);
-  };
+		return (
+			<>
+				<AssignmentView
+					isOpen={!!selectedAssignment && !isCreatingAssignment}
+					onClose={() => {
+						setSelectedAssignment(undefined);
+						setIsCreatingAssignment(false);
+						reloadAssignments();
+					}}
+					assignment={selectedAssignment}
+				/>
+				<AssignmentCreator
+					assignment={selectedAssignment}
+					groups={groups.filter((x) => x.admin === user.id || x.participants.includes(user.id))}
+					users={users.filter(
+						(x) =>
+							x.type === "student" &&
+							(!!selectedUser
+								? groups
+										.filter((g) => g.admin === selectedUser.id)
+										.flatMap((g) => g.participants)
+										.includes(x.id) || false
+								: groups.flatMap((g) => g.participants).includes(x.id)),
+					)}
+					assigner={user.id}
+					isCreating={isCreatingAssignment}
+					cancelCreation={() => {
+						setIsCreatingAssignment(false);
+						setSelectedAssignment(undefined);
+						reloadAssignments();
+					}}
+				/>
+				<div className="w-full flex justify-between items-center">
+					<div
+						onClick={() => setPage("")}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<div
+						onClick={reloadAssignments}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<span>Reload</span>
+						<BsArrowRepeat className={clsx("text-xl", isAssignmentsLoading && "animate-spin")} />
+					</div>
+				</div>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Active Assignments ({assignments.filter(activeFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						{assignments.filter(activeFilter).map((a) => (
+							<AssignmentCard {...a} onClick={() => setSelectedAssignment(a)} key={a.id} />
+						))}
+					</div>
+				</section>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Planned Assignments ({assignments.filter(futureFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						<div
+							onClick={() => setIsCreatingAssignment(true)}
+							className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300">
+							<BsPlus className="text-6xl" />
+							<span className="text-lg">New Assignment</span>
+						</div>
+						{assignments.filter(futureFilter).map((a) => (
+							<AssignmentCard
+								{...a}
+								onClick={() => {
+									setSelectedAssignment(a);
+									setIsCreatingAssignment(true);
+								}}
+								key={a.id}
+							/>
+						))}
+					</div>
+				</section>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Past Assignments ({assignments.filter(pastFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						{assignments.filter(pastFilter).map((a) => (
+							<AssignmentCard
+								{...a}
+								onClick={() => setSelectedAssignment(a)}
+								key={a.id}
+								allowDownload
+								reload={reloadAssignments}
+								allowArchive
+							/>
+						))}
+					</div>
+				</section>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Archived Assignments ({assignments.filter(archivedFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						{assignments.filter(archivedFilter).map((a) => (
+							<AssignmentCard
+								{...a}
+								onClick={() => setSelectedAssignment(a)}
+								key={a.id}
+								allowDownload
+								reload={reloadAssignments}
+								allowUnarchive
+							/>
+						))}
+					</div>
+				</section>
+			</>
+		);
+	};
 
-  const DefaultDashboard = () => (
-    <>
-      <section className="flex flex-wrap gap-2 items-center -lg:justify-center lg:justify-between text-center">
-        <IconCard
-          onClick={() => setPage("students")}
-          Icon={BsPersonFill}
-          label="Students"
-          value={users.filter(studentFilter).length}
-          color="purple"
-        />
-        <IconCard
-          onClick={() => setPage("teachers")}
-          Icon={BsPencilSquare}
-          label="Teachers"
-          value={users.filter(teacherFilter).length}
-          color="purple"
-        />
-        <IconCard
-          Icon={BsClipboard2Data}
-          label="Exams Performed"
-          value={
-            stats.filter((s) =>
-              groups.flatMap((g) => g.participants).includes(s.user)
-            ).length
-          }
-          color="purple"
-        />
-        <IconCard
-          Icon={BsPaperclip}
-          label="Average Level"
-          value={averageLevelCalculator(
-            stats.filter((s) =>
-              groups.flatMap((g) => g.participants).includes(s.user)
-            )
-          ).toFixed(1)}
-          color="purple"
-        />
-        <IconCard
-          onClick={() => setPage("groups")}
-          Icon={BsPeople}
-          label="Groups"
-          value={groups.length}
-          color="purple"
-        />
-        <IconCard
-          Icon={BsPersonCheck}
-          label="User Balance"
-          value={`${codes.length}/${
-            user.corporateInformation?.companyInformation?.userAmount || 0
-          }`}
-          color="purple"
-        />
-        <IconCard
-          Icon={BsClock}
-          label="Expiration Date"
-          value={
-            user.subscriptionExpirationDate
-              ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy")
-              : "Unlimited"
-          }
-          color="rose"
-        />
-        <IconCard
-          Icon={BsBank}
-          label="Corporate"
-          value={masterCorporateUserGroups.length}
-          color="purple"
-          onClick={() => setPage("corporate")}
-        />
-      </section>
+	const averageLevelCalculator = (studentStats: Stat[]) => {
+		const formattedStats = studentStats
+			.map((s) => ({
+				focus: users.find((u) => u.id === s.user)?.focus,
+				score: s.score,
+				module: s.module,
+			}))
+			.filter((f) => !!f.focus);
+		const bandScores = formattedStats.map((s) => ({
+			module: s.module,
+			level: calculateBandScore(s.score.correct, s.score.total, s.module, s.focus!),
+		}));
 
-      <section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
-        <div className="bg-white shadow flex flex-col rounded-xl w-full">
-          <span className="p-4">Latest students</span>
-          <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-            {users
-              .filter(studentFilter)
-              .sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
-              .map((x) => (
-                <UserDisplay key={x.id} {...x} />
-              ))}
-          </div>
-        </div>
-        <div className="bg-white shadow flex flex-col rounded-xl w-full">
-          <span className="p-4">Latest teachers</span>
-          <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-            {users
-              .filter(teacherFilter)
-              .sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
-              .map((x) => (
-                <UserDisplay key={x.id} {...x} />
-              ))}
-          </div>
-        </div>
-        <div className="bg-white shadow flex flex-col rounded-xl w-full">
-          <span className="p-4">Highest level students</span>
-          <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-            {users
-              .filter(studentFilter)
-              .sort(
-                (a, b) =>
-                  calculateAverageLevel(b.levels) -
-                  calculateAverageLevel(a.levels)
-              )
-              .map((x) => (
-                <UserDisplay key={x.id} {...x} />
-              ))}
-          </div>
-        </div>
-        <div className="bg-white shadow flex flex-col rounded-xl w-full">
-          <span className="p-4">Highest exam count students</span>
-          <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-            {users
-              .filter(studentFilter)
-              .sort(
-                (a, b) =>
-                  Object.keys(groupByExam(getStatsByStudent(b))).length -
-                  Object.keys(groupByExam(getStatsByStudent(a))).length
-              )
-              .map((x) => (
-                <UserDisplay key={x.id} {...x} />
-              ))}
-          </div>
-        </div>
-      </section>
-    </>
-  );
+		const levels: {[key in Module]: number} = {
+			reading: 0,
+			listening: 0,
+			writing: 0,
+			speaking: 0,
+			level: 0,
+		};
+		bandScores.forEach((b) => (levels[b.module] += b.level));
 
-  return (
-    <>
-      <Modal isOpen={showModal} onClose={() => setSelectedUser(undefined)}>
-        <>
-          {selectedUser && (
-            <div className="w-full flex flex-col gap-8">
-              <UserCard
-                loggedInUser={user}
-                onClose={(shouldReload) => {
-                  setSelectedUser(undefined);
-                  if (shouldReload) reload();
-                }}
-                onViewStudents={
-                  selectedUser.type === "corporate" ||
-                  selectedUser.type === "teacher"
-                    ? () => {
-                        appendUserFilters({
-                          id: "view-students",
-                          filter: (x: User) => x.type === "student",
-                        });
-                        appendUserFilters({
-                          id: "belongs-to-admin",
-                          filter: (x: User) =>
-                            groups
-                              .filter(
-                                (g) =>
-                                  g.admin === selectedUser.id ||
-                                  g.participants.includes(selectedUser.id)
-                              )
-                              .flatMap((g) => g.participants)
-                              .includes(x.id),
-                        });
+		return calculateAverageLevel(levels);
+	};
 
-                        router.push("/list/users");
-                      }
-                    : undefined
-                }
-                onViewTeachers={
-                  selectedUser.type === "corporate" ||
-                  selectedUser.type === "student"
-                    ? () => {
-                        appendUserFilters({
-                          id: "view-teachers",
-                          filter: (x: User) => x.type === "teacher",
-                        });
-                        appendUserFilters({
-                          id: "belongs-to-admin",
-                          filter: (x: User) =>
-                            groups
-                              .filter(
-                                (g) =>
-                                  g.admin === selectedUser.id ||
-                                  g.participants.includes(selectedUser.id)
-                              )
-                              .flatMap((g) => g.participants)
-                              .includes(x.id),
-                        });
+	const DefaultDashboard = () => (
+		<>
+			<section className="flex flex-wrap gap-2 items-center -lg:justify-center lg:justify-between text-center">
+				<IconCard
+					onClick={() => setPage("students")}
+					Icon={BsPersonFill}
+					label="Students"
+					value={users.filter(studentFilter).length}
+					color="purple"
+				/>
+				<IconCard
+					onClick={() => setPage("teachers")}
+					Icon={BsPencilSquare}
+					label="Teachers"
+					value={users.filter(teacherFilter).length}
+					color="purple"
+				/>
+				<IconCard
+					Icon={BsClipboard2Data}
+					label="Exams Performed"
+					value={stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user)).length}
+					color="purple"
+				/>
+				<IconCard
+					Icon={BsPaperclip}
+					label="Average Level"
+					value={averageLevelCalculator(stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user))).toFixed(1)}
+					color="purple"
+				/>
+				<IconCard onClick={() => setPage("groups")} Icon={BsPeople} label="Groups" value={groups.length} color="purple" />
+				<IconCard
+					Icon={BsPersonCheck}
+					label="User Balance"
+					value={`${codes.length}/${user.corporateInformation?.companyInformation?.userAmount || 0}`}
+					color="purple"
+				/>
+				<IconCard
+					Icon={BsClock}
+					label="Expiration Date"
+					value={user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy") : "Unlimited"}
+					color="rose"
+				/>
+				<IconCard
+					Icon={BsBank}
+					label="Corporate"
+					value={masterCorporateUserGroups.length}
+					color="purple"
+					onClick={() => setPage("corporate")}
+				/>
+				<button
+					disabled={isAssignmentsLoading}
+					onClick={() => setPage("assignments")}
+					className="bg-white col-span-2 rounded-xl shadow p-4 flex flex-col gap-4 items-center w-96 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
+					<BsEnvelopePaper className="text-6xl text-mti-purple-light" />
+					<span className="flex flex-col gap-1 items-center text-xl">
+						<span className="text-lg">Assignments</span>
+						<span className="font-semibold text-mti-purple-light">
+							{isAssignmentsLoading ? "Loading..." : assignments.filter((a) => !a.archived).length}
+						</span>
+					</span>
+				</button>
+			</section>
 
-                        router.push("/list/users");
-                      }
-                    : undefined
-                }
-                user={selectedUser}
-              />
-            </div>
-          )}
-        </>
-      </Modal>
-      {page === "students" && <StudentsList />}
-      {page === "teachers" && <TeachersList />}
-      {page === "groups" && <GroupsList />}
-      {page === "corporate" && <CorporateList />}
-      {page === "" && <DefaultDashboard />}
-    </>
-  );
+			<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Latest students</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{users
+							.filter(studentFilter)
+							.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Latest teachers</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{users
+							.filter(teacherFilter)
+							.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Highest level students</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{users
+							.filter(studentFilter)
+							.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Highest exam count students</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{users
+							.filter(studentFilter)
+							.sort(
+								(a, b) =>
+									Object.keys(groupByExam(getStatsByStudent(b))).length - Object.keys(groupByExam(getStatsByStudent(a))).length,
+							)
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
+			</section>
+		</>
+	);
+
+	return (
+		<>
+			<Modal isOpen={showModal} onClose={() => setSelectedUser(undefined)}>
+				<>
+					{selectedUser && (
+						<div className="w-full flex flex-col gap-8">
+							<UserCard
+								loggedInUser={user}
+								onClose={(shouldReload) => {
+									setSelectedUser(undefined);
+									if (shouldReload) reload();
+								}}
+								onViewStudents={
+									selectedUser.type === "corporate" || selectedUser.type === "teacher"
+										? () => {
+												appendUserFilters({
+													id: "view-students",
+													filter: (x: User) => x.type === "student",
+												});
+												appendUserFilters({
+													id: "belongs-to-admin",
+													filter: (x: User) =>
+														groups
+															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+															.flatMap((g) => g.participants)
+															.includes(x.id),
+												});
+
+												router.push("/list/users");
+										  }
+										: undefined
+								}
+								onViewTeachers={
+									selectedUser.type === "corporate" || selectedUser.type === "student"
+										? () => {
+												appendUserFilters({
+													id: "view-teachers",
+													filter: (x: User) => x.type === "teacher",
+												});
+												appendUserFilters({
+													id: "belongs-to-admin",
+													filter: (x: User) =>
+														groups
+															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+															.flatMap((g) => g.participants)
+															.includes(x.id),
+												});
+
+												router.push("/list/users");
+										  }
+										: undefined
+								}
+								user={selectedUser}
+							/>
+						</div>
+					)}
+				</>
+			</Modal>
+			{page === "students" && <StudentsList />}
+			{page === "teachers" && <TeachersList />}
+			{page === "groups" && <GroupsList />}
+			{page === "corporate" && <CorporateList />}
+			{page === "assignments" && <AssignmentsPage />}
+			{page === "" && <DefaultDashboard />}
+		</>
+	);
 }
diff --git a/src/hooks/useAssignments.tsx b/src/hooks/useAssignments.tsx
index 8e694904..2d2f58ef 100644
--- a/src/hooks/useAssignments.tsx
+++ b/src/hooks/useAssignments.tsx
@@ -2,7 +2,7 @@ import {Assignment} from "@/interfaces/results";
 import axios from "axios";
 import {useEffect, useState} from "react";
 
-export default function useAssignments({assigner, assignees}: {assigner?: string; assignees?: string}) {
+export default function useAssignments({assigner, assignees, corporate}: {assigner?: string; assignees?: string; corporate?: string}) {
 	const [assignments, setAssignments] = useState<Assignment[]>([]);
 	const [isLoading, setIsLoading] = useState(false);
 	const [isError, setIsError] = useState(false);
@@ -10,12 +10,13 @@ export default function useAssignments({assigner, assignees}: {assigner?: string
 	const getData = () => {
 		setIsLoading(true);
 		axios
-			.get<Assignment[]>("/api/assignments")
-			.then((response) => {
+			.get<Assignment[]>(!corporate ? "/api/assignments" : `/api/assignments/corporate?id=${corporate}`)
+			.then(async (response) => {
 				if (assigner) {
 					setAssignments(response.data.filter((a) => a.assigner === assigner));
 					return;
 				}
+
 				if (assignees) {
 					setAssignments(response.data.filter((a) => a.assignees.filter((x) => assignees.includes(x)).length > 0));
 					return;
@@ -26,7 +27,7 @@ export default function useAssignments({assigner, assignees}: {assigner?: string
 			.finally(() => setIsLoading(false));
 	};
 
-	useEffect(getData, [assignees, assigner]);
+	useEffect(getData, [assignees, assigner, corporate]);
 
 	return {assignments, isLoading, isError, reload: getData};
 }
diff --git a/src/pages/api/assignments/corporate.ts b/src/pages/api/assignments/corporate.ts
new file mode 100644
index 00000000..21d1767f
--- /dev/null
+++ b/src/pages/api/assignments/corporate.ts
@@ -0,0 +1,40 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type {NextApiRequest, NextApiResponse} from "next";
+import {app} from "@/firebase";
+import {getFirestore, collection, getDocs, query, where, setDoc, doc, getDoc} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {uuidv4} from "@firebase/util";
+import {Module} from "@/interfaces";
+import {getExams} from "@/utils/exams.be";
+import {Exam, InstructorGender, Variant} from "@/interfaces/exam";
+import {capitalize, flatten, uniqBy} from "lodash";
+import {User} from "@/interfaces/user";
+import moment from "moment";
+import {sendEmail} from "@/email";
+import {getAllAssignersByCorporate} from "@/utils/groups.be";
+import {getAssignmentsByAssigners} from "@/utils/assignments.be";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	if (req.method === "GET") return GET(req, res);
+
+	res.status(404).json({ok: false});
+}
+
+async function GET(req: NextApiRequest, res: NextApiResponse) {
+	const {id} = req.query as {id: string};
+
+	const assigners = await getAllAssignersByCorporate(id);
+	const assignments = await getAssignmentsByAssigners([...assigners, id]);
+
+	res.status(200).json(assignments);
+}
diff --git a/src/utils/assignments.be.ts b/src/utils/assignments.be.ts
new file mode 100644
index 00000000..96725e67
--- /dev/null
+++ b/src/utils/assignments.be.ts
@@ -0,0 +1,14 @@
+import {app} from "@/firebase";
+import {Assignment} from "@/interfaces/results";
+import {collection, getDocs, getFirestore, query, where} from "firebase/firestore";
+
+const db = getFirestore(app);
+
+export const getAssignmentsByAssigner = async (id: string) => {
+	const {docs} = await getDocs(query(collection(db, "assignments"), where("assigner", "==", id)));
+	return docs.map((x) => ({...x.data(), id: x.id})) as Assignment[];
+};
+
+export const getAssignmentsByAssigners = async (ids: string[]) => {
+	return (await Promise.all(ids.map(getAssignmentsByAssigner))).flat();
+};
diff --git a/src/utils/groups.be.ts b/src/utils/groups.be.ts
index 8dae61c8..77fc5d23 100644
--- a/src/utils/groups.be.ts
+++ b/src/utils/groups.be.ts
@@ -1,53 +1,51 @@
-import { app } from "@/firebase";
-import { CorporateUser, StudentUser, TeacherUser } from "@/interfaces/user";
-import { doc, getDoc, getFirestore, setDoc } from "firebase/firestore";
+import {app} from "@/firebase";
+import {CorporateUser, Group, StudentUser, TeacherUser} from "@/interfaces/user";
+import {collection, doc, getDoc, getDocs, getFirestore, query, setDoc, where} from "firebase/firestore";
 import moment from "moment";
+import {getUser} from "./users.be";
 
 const db = getFirestore(app);
 
-export const updateExpiryDateOnGroup = async (
-  participantID: string,
-  corporateID: string,
-) => {
-  const corporateRef = await getDoc(doc(db, "users", corporateID));
-  const participantRef = await getDoc(doc(db, "users", participantID));
+export const updateExpiryDateOnGroup = async (participantID: string, corporateID: string) => {
+	const corporateRef = await getDoc(doc(db, "users", corporateID));
+	const participantRef = await getDoc(doc(db, "users", participantID));
 
-  if (!corporateRef.exists() || !participantRef.exists()) return;
+	if (!corporateRef.exists() || !participantRef.exists()) return;
 
-  const corporate = {
-    ...corporateRef.data(),
-    id: corporateRef.id,
-  } as CorporateUser;
-  const participant = { ...participantRef.data(), id: participantRef.id } as
-    | StudentUser
-    | TeacherUser;
+	const corporate = {
+		...corporateRef.data(),
+		id: corporateRef.id,
+	} as CorporateUser;
+	const participant = {...participantRef.data(), id: participantRef.id} as StudentUser | TeacherUser;
 
-  if (
-    corporate.type !== "corporate" ||
-    (participant.type !== "student" && participant.type !== "teacher")
-  )
-    return;
+	if (corporate.type !== "corporate" || (participant.type !== "student" && participant.type !== "teacher")) return;
 
-  if (
-    !corporate.subscriptionExpirationDate ||
-    !participant.subscriptionExpirationDate
-  ) {
-    return await setDoc(
-      doc(db, "users", participant.id),
-      { subscriptionExpirationDate: null },
-      { merge: true },
-    );
-  }
+	if (!corporate.subscriptionExpirationDate || !participant.subscriptionExpirationDate) {
+		return await setDoc(doc(db, "users", participant.id), {subscriptionExpirationDate: null}, {merge: true});
+	}
 
-  const corporateDate = moment(corporate.subscriptionExpirationDate);
-  const participantDate = moment(participant.subscriptionExpirationDate);
+	const corporateDate = moment(corporate.subscriptionExpirationDate);
+	const participantDate = moment(participant.subscriptionExpirationDate);
 
-  if (corporateDate.isAfter(participantDate))
-    return await setDoc(
-      doc(db, "users", participant.id),
-      { subscriptionExpirationDate: corporateDate.toISOString() },
-      { merge: true },
-    );
+	if (corporateDate.isAfter(participantDate))
+		return await setDoc(doc(db, "users", participant.id), {subscriptionExpirationDate: corporateDate.toISOString()}, {merge: true});
 
-  return;
+	return;
+};
+
+export const getUserGroups = async (id: string): Promise<Group[]> => {
+	const groupDocs = await getDocs(query(collection(db, "groups"), where("admin", "==", id)));
+	return groupDocs.docs.map((x) => ({...x.data(), id})) as Group[];
+};
+
+export const getAllAssignersByCorporate = async (corporateID: string): Promise<string[]> => {
+	const groups = await getUserGroups(corporateID);
+	const groupUsers = (await Promise.all(groups.map(async (g) => await Promise.all(g.participants.map(getUser))))).flat();
+	const teacherPromises = await Promise.all(
+		groupUsers.map(async (u) =>
+			u.type === "teacher" ? u.id : u.type === "corporate" ? [...(await getAllAssignersByCorporate(u.id)), u.id] : undefined,
+		),
+	);
+
+	return teacherPromises.filter((x) => !!x).flat() as string[];
 };
diff --git a/src/utils/users.be.ts b/src/utils/users.be.ts
index 7650f73c..aef0634e 100644
--- a/src/utils/users.be.ts
+++ b/src/utils/users.be.ts
@@ -1,14 +1,20 @@
-import { app } from "@/firebase";
+import {app} from "@/firebase";
 
-import { collection, getDocs, getFirestore } from "firebase/firestore";
-import { User } from "@/interfaces/user";
+import {collection, doc, getDoc, getDocs, getFirestore} from "firebase/firestore";
+import {User} from "@/interfaces/user";
 const db = getFirestore(app);
 
 export async function getUsers() {
-  const snapshot = await getDocs(collection(db, "users"));
+	const snapshot = await getDocs(collection(db, "users"));
 
-  return snapshot.docs.map((doc) => ({
-    id: doc.id,
-    ...doc.data(),
-  })) as User[];
+	return snapshot.docs.map((doc) => ({
+		id: doc.id,
+		...doc.data(),
+	})) as User[];
+}
+
+export async function getUser(id: string) {
+	const userDoc = await getDoc(doc(db, "users", id));
+
+	return {...userDoc.data(), id} as User;
 }
diff --git a/src/utils/users.ts b/src/utils/users.ts
index a3a500fd..619d9ea9 100644
--- a/src/utils/users.ts
+++ b/src/utils/users.ts
@@ -25,7 +25,10 @@ export const exportListToExcel = (rowUsers: User[], users: User[], groups: Group
 		expiryDate: user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/YYYY") : "Unlimited",
 		country: user.demographicInformation?.country || "N/A",
 		phone: user.demographicInformation?.phone || "N/A",
-		employmentPosition: (user.type === "corporate" || user.type === "mastercorporate" ? user.demographicInformation?.position : user.demographicInformation?.employment) || "N/A",
+		employmentPosition:
+			(user.type === "corporate" || user.type === "mastercorporate"
+				? user.demographicInformation?.position
+				: user.demographicInformation?.employment) || "N/A",
 		gender: user.demographicInformation?.gender ? capitalize(user.demographicInformation.gender) : "N/A",
 		verified: user.isVerified?.toString() || "FALSE",
 	}));
@@ -34,3 +37,9 @@ export const exportListToExcel = (rowUsers: User[], users: User[], groups: Group
 
 	return `${header}\n${rowsString}`;
 };
+
+export const getUserName = (user?: User) => {
+	if (!user) return "N/A";
+	if (user.type === "corporate" || user.type === "mastercorporate") return user.corporateInformation?.companyInformation?.name || user.name;
+	return user.name;
+};