Merge branch 'develop'

2024-01-17 14:29:33 +00:00
parent 9baf3109c9 63d2baf35f
commit b7ae9fb837
43 changed files with 1426 additions and 998 deletions
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
    "iron-session": "^6.3.1",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
+    "moment-timezone": "^0.5.44",
    "next": "13.1.6",
    "nodemailer": "^6.9.5",
    "nodemailer-express-handlebars": "^6.1.0",
@@ -54,6 +55,7 @@
    "react-csv": "^2.2.2",
    "react-currency-input-field": "^3.6.12",
    "react-datepicker": "^4.18.0",
+    "react-diff-viewer": "^3.1.1",
    "react-dom": "18.2.0",
    "react-firebase-hooks": "^5.1.1",
    "react-icons": "^4.8.0",
--- a/src/components/DemographicInformationInput.tsx
+++ b/src/components/DemographicInformationInput.tsx
@@ -10,6 +10,8 @@ import axios from "axios";
 import {toast} from "react-toastify";
 import {KeyedMutator} from "swr";
 import CountrySelect from "./Low/CountrySelect";
+import GenderInput from "@/components/High/GenderInput";
+import EmploymentStatusInput from "@/components/High/EmploymentStatusInput";

 interface Props {
 	user: User;
@@ -92,73 +94,11 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
 						required
 					/>
 				)}
-				<div className="relative flex flex-col gap-3 w-full">
-					<label className="font-normal text-base text-mti-gray-dim">Gender *</label>
-					<RadioGroup value={gender} onChange={setGender} className="flex flex-row justify-between">
-						<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>
+				<GenderInput value={gender} onChange={setGender} />
 				{user.type === "corporate" && (
 					<Input name="position" onChange={setPosition} type="text" label="Position" placeholder="CEO, Head of Marketing..." required />
 				)}
-				{user.type !== "corporate" && (
-					<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={employment} onChange={setEmployment} className="grid grid-cols-2 items-center gap-4 place-items-center">
-							{EMPLOYMENT_STATUS.map(({status, label}) => (
-								<RadioGroup.Option value={status} key={status}>
-									{({checked}) => (
-										<span
-											className={clsx(
-												"px-6 py-4 w-44 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" && <EmploymentStatusInput value={employment} onChange={setEmployment} />}
 			</form>

 			<div className="self-end flex justify-end w-full gap-8 absolute bottom-8 left-0 px-8">
--- a/src/components/Exercises/FillBlanks.tsx
+++ b/src/components/Exercises/FillBlanks.tsx
@@ -53,7 +53,7 @@ function WordsDrawer({words, isOpen, blankId, previouslySelectedWord, onCancel,
 				</div>
 				<div className="flex justify-between w-full">
 					<Button color="purple" variant="outline" className="max-w-[200px] w-full" onClick={onCancel}>
-						Back
+						Cancel
 					</Button>
 					<Button color="purple" className="max-w-[200px] w-full" onClick={() => onAnswer(selectedWord!)} disabled={!selectedWord}>
 						Confirm
--- a/src/components/Exercises/TrueFalse.tsx
+++ b/src/components/Exercises/TrueFalse.tsx
@@ -17,7 +17,11 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
 	const calculateScore = () => {
 		const total = questions.length || 0;
 		const correct = answers.filter(
-			(x) => questions.find((y) => x.id.toString() === y.id.toString())?.solution?.toLowerCase() === x.solution.toLowerCase() || false,
+			(x) =>
+				questions
+					.find((y) => x.id.toString() === y.id.toString())
+					?.solution?.toString()
+					.toLowerCase() === x.solution.toLowerCase() || false,
 		).length;
 		const missing = total - answers.filter((x) => questions.find((y) => x.id.toString() === y.id.toString())).length;

--- a/src/components/Exercises/WriteBlanks.tsx
+++ b/src/components/Exercises/WriteBlanks.tsx
@@ -27,8 +27,8 @@ function Blank({
 	const [userInput, setUserInput] = useState(userSolution || "");

 	useEffect(() => {
-		const words = userInput.split(" ").filter((x) => x !== "");
-		if (words.length >= maxWords) {
+		const words = userInput.split(" ");
+		if (words.length > maxWords) {
 			toast.warning(`You have reached your word limit of ${maxWords} words!`, {toastId: "word-limit"});
 			setUserInput(words.join(" ").trim());
 		}
--- a/src/components/High/EmploymentStatusInput.tsx
+++ b/src/components/High/EmploymentStatusInput.tsx
@@ -0,0 +1,32 @@
+import {EmploymentStatus, EMPLOYMENT_STATUS} from "@/interfaces/user";
+import {RadioGroup} from "@headlessui/react";
+import clsx from "clsx";
+
+interface Props {
+	value?: EmploymentStatus;
+	onChange: (value?: EmploymentStatus) => void;
+}
+
+export default function EmploymentStatusInput({value, onChange}: Props) {
+	return (
+		<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={value} onChange={onChange} className="grid grid-cols-2 items-center gap-4 place-items-center">
+				{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>
+	);
+}
--- a/src/components/High/GenderInput.tsx
+++ b/src/components/High/GenderInput.tsx
@@ -0,0 +1,54 @@
+import {Gender} from "@/interfaces/user";
+import {RadioGroup} from "@headlessui/react";
+import clsx from "clsx";
+
+interface Props {
+	value?: Gender;
+	onChange: (value?: Gender) => void;
+}
+
+export default function GenderInput({value, onChange}: Props) {
+	return (
+		<div className="relative flex flex-col gap-3 w-full">
+			<label className="font-normal text-base text-mti-gray-dim">Gender *</label>
+			<RadioGroup value={value} onChange={onChange} className="flex flex-row gap-4 justify-between">
+				<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>
+	);
+}
--- a/src/components/Low/TImezoneSelect.tsx
+++ b/src/components/Low/TImezoneSelect.tsx
@@ -0,0 +1,64 @@
+import { Fragment, useState } from "react";
+import { Combobox, Transition } from "@headlessui/react";
+import { BsChevronExpand } from "react-icons/bs";
+import moment from "moment-timezone";
+
+interface Props {
+  value?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+}
+
+export default function TimezoneSelect({
+  value,
+  disabled = false,
+  onChange,
+}: Props) {
+  const [query, setQuery] = useState("");
+  
+  const timezones = moment.tz.names();
+
+  const filteredTimezones = query === "" ? timezones : timezones.filter((x) => x.toLowerCase().includes(query.toLowerCase()));
+  return (
+    <>
+      <Combobox value={value} onChange={onChange} disabled={disabled}>
+        <div className="relative mt-1">
+          <div className="relative w-full cursor-default overflow-hidden ">
+            <Combobox.Input
+              className="py-6 w-full px-8 text-sm font-normal placeholder:text-mti-gray-cool bg-white disabled:bg-mti-gray-platinum/40 rounded-full border border-mti-gray-platinum focus:outline-none"
+              onChange={(e) => setQuery(e.target.value)}
+            />
+            <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-8">
+              <BsChevronExpand />
+            </Combobox.Button>
+          </div>
+          <Transition
+            as={Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+            afterLeave={() => setQuery("")}
+          >
+            <Combobox.Options className="absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-xl bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+              {filteredTimezones.map((timezone: string) => (
+                <Combobox.Option
+                  key={timezone}
+                  value={timezone}
+                  className={({ active }) =>
+                    `relative cursor-default select-none py-2 pl-10 pr-4 ${
+                      active
+                        ? "bg-mti-purple-light text-white"
+                        : "text-gray-900"
+                    }`
+                  }
+                >
+                  {timezone}
+                </Combobox.Option>
+              ))}
+            </Combobox.Options>
+          </Transition>
+        </div>
+      </Combobox>
+    </>
+  );
+}
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -7,9 +7,11 @@ import {BsList} from "react-icons/bs";
 import clsx from "clsx";
 import moment from "moment";
 import MobileMenu from "./MobileMenu";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import {Type} from "@/interfaces/user";
 import {USER_TYPE_LABELS} from "@/resources/user";
+import useGroups from "@/hooks/useGroups";
+import {isUserFromCorporate} from "@/utils/groups";

 interface Props {
 	user: User;
@@ -22,6 +24,7 @@ interface Props {
 /* eslint-disable @next/next/no-img-element */
 export default function Navbar({user, path, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
 	const [isMenuOpen, setIsMenuOpen] = useState(false);
+	const [disablePaymentPage, setDisablePaymentPage] = useState(true);

 	const disableNavigation = preventNavigation(navDisabled, focusMode);
 	const router = useRouter();
@@ -44,6 +47,11 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
 		return today.add(7, "days").isAfter(momentDate);
 	};

+	useEffect(() => {
+		if (user.type !== "student" && user.type !== "teacher") setDisablePaymentPage(false);
+		isUserFromCorporate(user.id).then((result) => setDisablePaymentPage(result));
+	}, [user]);
+
 	return (
 		<>
 			{user && <MobileMenu path={path} isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} user={user} />}
@@ -55,7 +63,7 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
 				<div className="flex justify-end -md:items-center gap-4 md:w-5/6 md:mr-8">
 					{showExpirationDate() && (
 						<Link
-							href="/payment"
+							href={disablePaymentPage ? "/payment" : ""}
 							data-tip="Expiry date"
 							className={clsx(
 								"py-2 px-6 w-fit flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
@@ -72,7 +80,8 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
 					<Link href={disableNavigation ? "" : "/profile"} className="flex gap-6 items-center justify-end -md:hidden">
 						<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full object-cover" />
 						<span className="text-right -md:hidden">
-							{user.name} | {USER_TYPE_LABELS[user.type]}
+							{user.type === "corporate" ? `${user.corporateInformation?.companyInformation.name} |` : ""} {user.name} |{" "}
+							{USER_TYPE_LABELS[user.type]}
 						</span>
 					</Link>
 					<div className="cursor-pointer md:hidden" onClick={() => setIsMenuOpen(true)}>
--- a/src/components/Solutions/Writing.tsx
+++ b/src/components/Solutions/Writing.tsx
@@ -1,35 +1,16 @@
 /* eslint-disable @next/next/no-img-element */
 import {WritingExercise} from "@/interfaces/exam";
 import {CommonProps} from ".";
-import {Fragment, useState} from "react";
+import {Fragment, useEffect, useState} from "react";
 import Button from "../Low/Button";
 import {Dialog, Tab, Transition} from "@headlessui/react";
 import {writingReverseMarking} from "@/utils/score";
 import clsx from "clsx";
-import reactStringReplace from "react-string-replace";
+import ReactDiffViewer, {DiffMethod} from "react-diff-viewer";

 export default function Writing({id, type, prompt, attachment, userSolutions, onNext, onBack}: WritingExercise & CommonProps) {
 	const [isModalOpen, setIsModalOpen] = useState(false);
-
-	const formatSolution = (solution: string, errors: {correction: string | null; misspelled: string}[]) => {
-		const errorRegex = new RegExp(errors.map((x) => `(${x.misspelled})`).join("|"));
-
-		return (
-			<>
-				{reactStringReplace(solution, errorRegex, (match) => {
-					const correction = errors.find((x) => x.misspelled === match)?.correction;
-
-					return (
-						<span
-							data-tip={correction ? correction : undefined}
-							className={clsx("text-mti-red-light font-medium underline underline-offset-2", correction && "tooltip")}>
-							{match}
-						</span>
-					);
-				})}
-			</>
-		);
-	};
+	const [showDiff, setShowDiff] = useState(false);

 	return (
 		<>
@@ -85,17 +66,52 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 				</div>

 				<div className="w-full h-full flex flex-col gap-8">
-					{userSolutions && (
-						<div className="flex flex-col gap-4 w-full">
+					{userSolutions && userSolutions.length > 0 && (
+						<div className="flex flex-col gap-4 w-full relative">
+							{!showDiff && (
+								<>
 									<span>Your answer:</span>
 									<div className="w-full h-full min-h-[320px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl whitespace-pre-wrap">
-								{userSolutions[0]!.evaluation && userSolutions[0]!.evaluation.misspelled_pairs
-									? formatSolution(
-											userSolutions[0]!.solution.replaceAll("\\n", "\n"),
-											userSolutions[0]!.evaluation.misspelled_pairs,
-									  )
-									: userSolutions[0]!.solution.replaceAll("\\n", "\n")}
+										{userSolutions[0]!.solution.replaceAll("\\n", "\n")}
 									</div>
+								</>
+							)}
+							{showDiff && (
+								<>
+									<span>Correction:</span>
+									<div className="w-full h-full max-h-[320px] overflow-y-scroll scrollbar-hide cursor-text border-2 overflow-x-hidden border-mti-gray-platinum bg-white rounded-3xl">
+										<ReactDiffViewer
+											styles={{
+												contentText: {
+													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"},
+
+												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")}
+											splitView
+											hideLineNumbers
+											showDiffOnly={false}
+										/>
+									</div>
+								</>
+							)}
+							{userSolutions[0].solution && userSolutions[0].evaluation?.fixed_text && (
+								<Button
+									color="green"
+									variant="outline"
+									className="w-full max-w-[200px] self-end absolute -top-4 right-0 !py-2"
+									onClick={() => setShowDiff((prev) => !prev)}>
+									{showDiff ? "View answer" : "View correction"}
+								</Button>
+							)}
 						</div>
 					)}
 					{userSolutions && userSolutions.length > 0 && userSolutions[0].evaluation && typeof userSolutions[0].evaluation !== "string" && (
--- a/src/components/Solutions/index.tsx
+++ b/src/components/Solutions/index.tsx
@@ -30,20 +30,28 @@ export interface CommonProps {
 export const renderSolution = (exercise: Exercise, onNext: () => void, onBack: () => void, updateIndex?: (internalIndex: number) => void) => {
 	switch (exercise.type) {
 		case "fillBlanks":
-			return <FillBlanks {...(exercise as FillBlanksExercise)} onNext={onNext} onBack={onBack} />;
+			return <FillBlanks key={exercise.id} {...(exercise as FillBlanksExercise)} onNext={onNext} onBack={onBack} />;
 		case "trueFalse":
-			return <TrueFalseSolution {...(exercise as TrueFalseExercise)} onNext={onNext} onBack={onBack} />;
+			return <TrueFalseSolution key={exercise.id} {...(exercise as TrueFalseExercise)} onNext={onNext} onBack={onBack} />;
 		case "matchSentences":
-			return <MatchSentences {...(exercise as MatchSentencesExercise)} onNext={onNext} onBack={onBack} />;
+			return <MatchSentences key={exercise.id} {...(exercise as MatchSentencesExercise)} onNext={onNext} onBack={onBack} />;
 		case "multipleChoice":
-			return <MultipleChoice {...(exercise as MultipleChoiceExercise)} updateIndex={updateIndex} onNext={onNext} onBack={onBack} />;
+			return (
+				<MultipleChoice
+					key={exercise.id}
+					{...(exercise as MultipleChoiceExercise)}
+					updateIndex={updateIndex}
+					onNext={onNext}
+					onBack={onBack}
+				/>
+			);
 		case "writeBlanks":
-			return <WriteBlanks {...(exercise as WriteBlanksExercise)} onNext={onNext} onBack={onBack} />;
+			return <WriteBlanks key={exercise.id} {...(exercise as WriteBlanksExercise)} onNext={onNext} onBack={onBack} />;
 		case "writing":
-			return <Writing {...(exercise as WritingExercise)} onNext={onNext} onBack={onBack} />;
+			return <Writing key={exercise.id} {...(exercise as WritingExercise)} onNext={onNext} onBack={onBack} />;
 		case "speaking":
-			return <Speaking {...(exercise as SpeakingExercise)} onNext={onNext} onBack={onBack} />;
+			return <Speaking key={exercise.id} {...(exercise as SpeakingExercise)} onNext={onNext} onBack={onBack} />;
 		case "interactiveSpeaking":
-			return <InteractiveSpeaking {...(exercise as InteractiveSpeakingExercise)} onNext={onNext} onBack={onBack} />;
+			return <InteractiveSpeaking key={exercise.id} {...(exercise as InteractiveSpeakingExercise)} onNext={onNext} onBack={onBack} />;
 	}
 };
--- a/src/components/UserCard.tsx
+++ b/src/components/UserCard.tsx
@@ -74,11 +74,11 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 		user.type === "corporate"
 			? user.corporateInformation?.companyInformation.name
 			: user.type === "agent"
-			? user.agentInformation.companyName
+			? user.agentInformation?.companyName
 			: undefined,
 	);
 	const [commercialRegistration, setCommercialRegistration] = useState(
-		user.type === "agent" ? user.agentInformation.commercialRegistration : undefined,
+		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);
@@ -236,7 +236,10 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 									disabled={disabled}
 								/>
 								<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"
+									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",
+										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)}
@@ -266,7 +269,11 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 							<label className="font-normal text-base text-mti-gray-dim">Country Manager</label>
 							{referralAgentLabel && (
 								<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"
+									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",
+										!["developer", "admin"].includes(loggedInUser.type) &&
+											"!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}`})),
@@ -293,12 +300,12 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 										}),
 									}}
 									// editing country manager should only be available for dev/admin
-									isDisabled={!['developer', 'admin'].includes(loggedInUser.type)}
+									isDisabled={!["developer", "admin"].includes(loggedInUser.type)}
 								/>
 							)}
 						</div>
 						<div className="flex flex-col gap-3 w-4/12">
-							{referralAgent !== "" ? (
+							{referralAgent !== "" && loggedInUser.type !== "corporate" ? (
 								<>
 									<label className="font-normal text-base text-mti-gray-dim">Commission</label>
 									<Input
--- a/src/dashboards/Student.tsx
+++ b/src/dashboards/Student.tsx
@@ -5,9 +5,10 @@ import ProfileSummary from "@/components/ProfileSummary";
 import useAssignments from "@/hooks/useAssignments";
 import useStats from "@/hooks/useStats";
 import {Assignment} from "@/interfaces/results";
-import {User} from "@/interfaces/user";
+import {CorporateUser, User} from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
 import {getExamById} from "@/utils/exams";
+import {getUserCorporate} from "@/utils/groups";
 import {MODULE_ARRAY, sortByModule, sortByModuleName} from "@/utils/moduleUtils";
 import {averageScore, groupBySession} from "@/utils/stats";
 import {CreateOrderActions, CreateOrderData, OnApproveActions, OnApproveData, OrderResponseBody} from "@paypal/paypal-js";
@@ -18,6 +19,7 @@ import {capitalize} from "lodash";
 import moment from "moment";
 import Link from "next/link";
 import {useRouter} from "next/router";
+import {useEffect, useState} from "react";
 import {BsArrowRepeat, BsBook, BsClipboard, BsFileEarmarkText, BsHeadphones, BsMegaphone, BsPen, BsPencil, BsStar} from "react-icons/bs";
 import {toast} from "react-toastify";

@@ -26,6 +28,8 @@ interface Props {
 }

 export default function StudentDashboard({user}: Props) {
+	const [corporateUserToShow, setCorporateUserToShow] = useState<CorporateUser>();
+
 	const {stats} = useStats(user.id);
 	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({assignees: user?.id});

@@ -37,6 +41,10 @@ export default function StudentDashboard({user}: Props) {
 	const setSelectedModules = useExamStore((state) => state.setSelectedModules);
 	const setAssignment = useExamStore((state) => state.setAssignment);

+	useEffect(() => {
+		getUserCorporate("IXdh9EQziAVXXh0jOiC5cPVlgS82").then(setCorporateUserToShow);
+	}, [user]);
+
 	const startAssignment = (assignment: Assignment) => {
 		const examPromises = assignment.exams.filter((e) => e.assignee === user.id).map((e) => getExamById(e.module, e.id));

@@ -60,6 +68,11 @@ export default function StudentDashboard({user}: Props) {

 	return (
 		<>
+			{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>
+			)}
 			<ProfileSummary
 				user={user}
 				items={[
--- a/src/dashboards/Teacher.tsx
+++ b/src/dashboards/Teacher.tsx
@@ -2,7 +2,7 @@
 import Modal from "@/components/Modal";
 import useStats from "@/hooks/useStats";
 import useUsers from "@/hooks/useUsers";
-import {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 moment from "moment";
@@ -44,6 +44,7 @@ import clsx from "clsx";
 import ProgressBar from "@/components/Low/ProgressBar";
 import AssignmentCreator from "./AssignmentCreator";
 import AssignmentView from "./AssignmentView";
+import {getUserCorporate} from "@/utils/groups";

 interface Props {
 	user: User;
@@ -55,6 +56,7 @@ export default function TeacherDashboard({user}: Props) {
 	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();
@@ -65,6 +67,10 @@ export default function TeacherDashboard({user}: Props) {
 		setShowModal(!!selectedUser && page === "");
 	}, [selectedUser, page]);

+	useEffect(() => {
+		getUserCorporate(user.id).then(setCorporateUserToShow);
+	}, [user]);
+
 	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);
@@ -226,7 +232,7 @@ export default function TeacherDashboard({user}: Props) {
 					<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/>
+							<AssignmentCard {...a} onClick={() => setSelectedAssignment(a)} key={a.id} allowDownload />
 						))}
 					</div>
 				</section>
@@ -236,7 +242,16 @@ export default function TeacherDashboard({user}: Props) {

 	const DefaultDashboard = () => (
 		<>
-			<section className="flex -lg:flex-wrap gap-4 items-center -lg:justify-center lg:justify-start text-center">
+			{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}
--- a/src/exams/Listening.tsx
+++ b/src/exams/Listening.tsx
@@ -175,7 +175,7 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 					</Button>
 				</div>
 			)}
-			{exerciseIndex === -1 && (
+			{exerciseIndex === -1 && partIndex === 0 && (
 				<Button color="purple" onClick={() => nextExercise()} className="max-w-[200px] self-end w-full justify-self-end">
 					Start now
 				</Button>
--- a/src/exams/pdf/group.test.report.tsx
+++ b/src/exams/pdf/group.test.report.tsx
@@ -33,6 +33,7 @@ interface Props {
  summaryPNG: string;
  summaryScore: string;
  groupScoreSummary: any[];
+  passportId: string;
 }

 const customStyles = StyleSheet.create({
@@ -81,6 +82,7 @@ const GroupTestReport = ({
  summaryPNG,
  summaryScore,
  groupScoreSummary,
+  passportId,
 }: Props) => {
  const defaultTextStyle = [styles.textFont, { fontSize: 8 }];
  return (
@@ -114,6 +116,7 @@ const GroupTestReport = ({
          <Text style={defaultTextStyle}>ID: {id}</Text>
          <Text style={defaultTextStyle}>Email: {email}</Text>
          <Text style={defaultTextStyle}>Gender: {gender}</Text>
+          <Text style={defaultTextStyle}>Passport ID: {passportId}</Text>
          <Text style={defaultTextStyle}>
            Total Number of Students: {numberOfStudents}
          </Text>
@@ -203,7 +206,7 @@ const GroupTestReport = ({
                      percentage={percent}
                    />
                  </View>
-                  <Text style={[customStyles.tableCell, { maxWidth: "24px" }]}>
+                  <Text style={[customStyles.tableCell, { maxWidth: "48px" }]}>
                    {percent}%
                  </Text>
                  <Text style={customStyles.tableCell}>{description}</Text>
--- a/src/exams/pdf/styles.ts
+++ b/src/exams/pdf/styles.ts
@@ -28,6 +28,9 @@ export const styles = StyleSheet.create({
    fontFamily: "Helvetica-Bold",
    fontWeight: "bold",
  },
+  textNormal: {
+    fontWeight: "normal",
+  },
  textColor: {
    color: "#4e4969",
  },
@@ -55,7 +58,6 @@ export const styles = StyleSheet.create({
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
-    gap: 4,
    position: "relative",
  },
  radialResultContainer: {
--- a/src/exams/pdf/test.report.footer.tsx
+++ b/src/exams/pdf/test.report.footer.tsx
@@ -18,18 +18,18 @@ const TestReportFooter = () => (
  >
    <View style={[styles.spacedRow, styles.textMargin]}>
      <View>
-        <Text>Validity</Text>
+        <Text style={styles.textBold}>Validity</Text>
        <Text>
          This report remains valid for a duration of three months from the test
          date.
        </Text>
      </View>
      <View>
-        <Text>Confidential – circulated for concern people</Text>
+        <Text style={styles.textBold}>Confidential – <Text style={[styles.textFont, styles.textNormal]}>circulated for concern people</Text></Text>
      </View>
    </View>
    <View style={{ paddingTop: 10 }}>
-      <Text>Declaration</Text>
+      <Text style={styles.textBold}>Declaration</Text>
      <Text style={{ paddingTop: 5 }}>
        We hereby declare that exam results on our platform, assessed by AI, are
        not the sole determinants of candidates&apos; English proficiency
--- a/src/exams/pdf/test.report.tsx
+++ b/src/exams/pdf/test.report.tsx
@@ -25,6 +25,9 @@ interface Props {
  qrcode: string;
  renderDetails: React.ReactNode;
  title: string;
+  summaryPNG: string;
+  summaryScore: string;
+  passportId: string;
 }

 const TestReport = ({
@@ -39,6 +42,9 @@ const TestReport = ({
  logo,
  qrcode,
  renderDetails,
+  summaryPNG,
+  summaryScore,
+  passportId,
 }: Props) => {
  const defaultTextStyle = [styles.textFont, { fontSize: 8 }];
  const defaultSkillsTextStyle = [styles.textFont, { fontSize: 8 }];
@@ -79,6 +85,7 @@ const TestReport = ({
          <Text style={defaultTextStyle}>ID: {id}</Text>
          <Text style={defaultTextStyle}>Email: {email}</Text>
          <Text style={defaultTextStyle}>Gender: {gender}</Text>
+          <Text style={defaultTextStyle}>Passport ID: {passportId}</Text>
        </View>
        <View style={{ height: "120px" }}>
          <Text
@@ -104,9 +111,17 @@ const TestReport = ({
          >
            Performance Summary
          </Text>
-          <View>
+          <View style={{ display: "flex", flexDirection: "row", gap: 16 }}>
+            <View style={{ flex: 1 }}>
              <Text style={[styles.textFont, { fontSize: 8 }]}>{summary}</Text>
            </View>
+            <View style={[styles.textFont, styles.radialContainer]}>
+              <Image src={summaryPNG} style={styles.image64}></Image>
+              <View style={[styles.textColor, styles.radialResultContainer]}>
+                <Text style={styles.textBold}>{summaryScore}</Text>
+              </View>
+            </View>
+          </View>
        </View>
        <View style={[{ paddingTop: 30 }, styles.separator]}></View>
        <TestReportFooter />
--- a/src/hooks/useUser.tsx
+++ b/src/hooks/useUser.tsx
@@ -15,10 +15,10 @@ export default function useUser({redirectTo = "", redirectIfFound = false} = {})
 		if (!redirectTo || !user) return;

 		if (
-			// If redirectTo is set, redirect if the user was not found.
-			(redirectTo && !redirectIfFound && (!user || (user && !user.isVerified))) ||
 			// If redirectIfFound is also set, redirect if the user was found
-			(redirectIfFound && user && user.isVerified)
+			(redirectIfFound && user && user.isVerified) ||
+			// If redirectTo is set, redirect if the user was not found.
+			(redirectTo && !redirectIfFound && (!user || (user && !user.isVerified)))
 		) {
 			Router.push(redirectTo);
 		}
--- a/src/interfaces/exam.ts
+++ b/src/interfaces/exam.ts
@@ -1,6 +1,7 @@
 import {Module} from ".";

 export type Exam = ReadingExam | ListeningExam | WritingExam | SpeakingExam | LevelExam;
+export type Variant = "diagnostic" | "partial";

 export interface ReadingExam {
 	parts: ReadingPart[];
@@ -9,6 +10,7 @@ export interface ReadingExam {
 	minTimer: number;
 	type: "academic" | "general";
 	isDiagnostic: boolean;
+	variant?: Variant;
 }

 export interface ReadingPart {
@@ -25,6 +27,7 @@ export interface LevelExam {
 	exercises: Exercise[];
 	minTimer: number;
 	isDiagnostic: boolean;
+	variant?: Variant;
 }

 export interface ListeningExam {
@@ -33,6 +36,7 @@ export interface ListeningExam {
 	module: "listening";
 	minTimer: number;
 	isDiagnostic: boolean;
+	variant?: Variant;
 }

 export interface ListeningPart {
@@ -63,6 +67,7 @@ export interface WritingExam {
 	exercises: Exercise[];
 	minTimer: number;
 	isDiagnostic: boolean;
+	variant?: Variant;
 }

 interface WordCounter {
@@ -76,6 +81,7 @@ export interface SpeakingExam {
 	exercises: Exercise[];
 	minTimer: number;
 	isDiagnostic: boolean;
+	variant?: Variant;
 }

 export type Exercise =
@@ -104,6 +110,7 @@ interface InteractiveSpeakingEvaluation extends Evaluation {
 interface CommonEvaluation extends Evaluation {
 	perfect_answer?: string;
 	perfect_answer_1?: string;
+	fixed_text?: string;
 }

 export interface WritingExercise {
--- a/src/interfaces/user.ts
+++ b/src/interfaces/user.ts
@@ -78,6 +78,7 @@ export interface DemographicInformation {
 	gender: Gender;
 	employment: EmploymentStatus;
 	passport_id?: string;
+	timezone?: string;
 }

 export interface DemographicCorporateInformation {
@@ -85,6 +86,7 @@ export interface DemographicCorporateInformation {
 	phone: string;
 	gender: Gender;
 	position: string;
+	timezone?: string;
 }

 export type Gender = "male" | "female" | "other";
--- a/src/pages/(admin)/BatchCodeGenerator.tsx
+++ b/src/pages/(admin)/BatchCodeGenerator.tsx
@@ -14,19 +14,31 @@ import {toast} from "react-toastify";
 import ShortUniqueId from "short-unique-id";
 import {useFilePicker} from "use-file-picker";
 import readXlsxFile from "read-excel-file";
+import Modal from "@/components/Modal";
+import {BsQuestionCircleFill} from "react-icons/bs";

 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]: Type[]} = {
+	student: [],
+	teacher: [],
+	agent: [],
+	corporate: ["student", "teacher"],
+	admin: ["student", "teacher", "agent", "corporate", "admin"],
+	developer: ["student", "teacher", "agent", "corporate", "admin", "developer"],
+};
+
 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>(null);
 	const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
 	const [type, setType] = useState<Type>("student");
+	const [showHelp, setShowHelp] = useState(false);

 	const {users} = useUsers();

-	const {openFilePicker, filesContent} = useFilePicker({
+	const {openFilePicker, filesContent, clear} = useFilePicker({
 		accept: ".xlsx",
 		multiple: false,
 		readAs: "ArrayBuffer",
@@ -52,9 +64,9 @@ export default function BatchCodeGenerator({user}: {user: User}) {
 							const [firstName, lastName, country, passport_id, email, phone] = row as string[];
 							return EMAIL_REGEX.test(email) && !users.map((u) => u.email).includes(email)
 								? {
-										email,
-										name: `${firstName} ${lastName}`,
-										passport_id,
+										email: email.toString(),
+										name: `${firstName ?? ""} ${lastName ?? ""}`.trim(),
+										passport_id: passport_id.toString(),
 								  }
 								: undefined;
 						})
@@ -62,10 +74,12 @@ export default function BatchCodeGenerator({user}: {user: User}) {
 					(x) => x.email,
 				);

-				if (information.length === 0)
-					return toast.error(
+				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);
 			});
@@ -102,8 +116,40 @@ export default function BatchCodeGenerator({user}: {user: User}) {
 	};

 	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="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
-			<label className="font-normal text-base text-mti-gray-dim">Choose an Excel file containing e-mails</label>
+				<div className="flex justify-between items-end">
+					<label className="font-normal text-base text-mti-gray-dim">Choose an Excel file</label>
+					<div className="cursor-pointer tooltip" 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>
@@ -136,7 +182,9 @@ export default function BatchCodeGenerator({user}: {user: User}) {
 						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).map((type) => (
+						{Object.keys(USER_TYPE_LABELS)
+							.filter((x) => USER_TYPE_PERMISSIONS[user.type].includes(x as Type))
+							.map((type) => (
 								<option key={type} value={type}>
 									{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
 								</option>
@@ -147,5 +195,6 @@ export default function BatchCodeGenerator({user}: {user: User}) {
 					Generate & Send
 				</Button>
 			</div>
+		</>
 	);
 }
--- a/src/pages/(admin)/CodeGenerator.tsx
+++ b/src/pages/(admin)/CodeGenerator.tsx
@@ -12,6 +12,15 @@ import ReactDatePicker from "react-datepicker";
 import {toast} from "react-toastify";
 import ShortUniqueId from "short-unique-id";

+const USER_TYPE_PERMISSIONS: {[key in Type]: Type[]} = {
+	student: [],
+	teacher: [],
+	agent: [],
+	corporate: ["student", "teacher"],
+	admin: ["student", "teacher", "agent", "corporate", "admin"],
+	developer: ["student", "teacher", "agent", "corporate", "admin", "developer"],
+};
+
 export default function CodeGenerator({user}: {user: User}) {
 	const [generatedCode, setGeneratedCode] = useState<string>();
 	const [expiryDate, setExpiryDate] = useState<Date | null>(null);
@@ -63,7 +72,9 @@ export default function CodeGenerator({user}: {user: User}) {
 					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).map((type) => (
+					{Object.keys(USER_TYPE_LABELS)
+						.filter((x) => USER_TYPE_PERMISSIONS[user.type].includes(x as Type))
+						.map((type) => (
 							<option key={type} value={type}>
 								{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
 							</option>
--- a/src/pages/(admin)/Lists/GroupList.tsx
+++ b/src/pages/(admin)/Lists/GroupList.tsx
@@ -9,16 +9,18 @@ import {Disclosure, Transition} from "@headlessui/react";
 import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
 import axios from "axios";
 import clsx from "clsx";
-import {capitalize} from "lodash";
+import {capitalize, uniq, uniqBy} from "lodash";
 import {useEffect, useRef, useState} from "react";
-import {BsCheck, BsDash, BsPencil, BsPlus, BsTrash} from "react-icons/bs";
+import {BsCheck, BsDash, BsPencil, BsPlus, BsQuestionCircleFill, BsTrash} from "react-icons/bs";
 import {toast} from "react-toastify";
 import Select from "react-select";
 import {uuidv4} from "@firebase/util";
 import {useFilePicker} from "use-file-picker";
 import Modal from "@/components/Modal";
+import readXlsxFile from "read-excel-file";

 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]+)*$/);

 interface CreateDialogProps {
 	user: User;
@@ -31,21 +33,28 @@ 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 {openFilePicker, filesContent} = useFilePicker({
-		accept: ".txt",
+	const {openFilePicker, filesContent, clear} = useFilePicker({
+		accept: ".xlsx",
 		multiple: false,
+		readAs: "ArrayBuffer",
 	});

 	useEffect(() => {
 		if (filesContent.length > 0) {
 			const file = filesContent[0];
-			const emails = file.content
-				.toLowerCase()
-				.split("\n")
-				.filter((x) => new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/).test(x));
+			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 a .txt file containing e-mails, one per line!");
+					toast.error("Please upload an Excel file containing e-mails!");
+					clear();
 					return;
 				}

@@ -64,7 +73,9 @@ const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
 						: "Added all students found in the file you've provided!",
 					{toastId: "upload-success"},
 				);
+			});
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [filesContent, user.type, users]);

 	const submit = () => {
@@ -90,7 +101,12 @@ const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
 			<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 flex-col gap-3 w-full">
+					<div className="flex gap-2 items-center">
 						<label className="font-normal text-base text-mti-gray-dim">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 gap-8 w-full">
 						<Select
 							className="w-full"
@@ -119,9 +135,11 @@ const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
 								}),
 							}}
 						/>
+						{user.type !== "teacher" && (
 							<Button className="w-full max-w-[300px]" onClick={openFilePicker} variant="outline">
-							{filesContent.length === 0 ? "Upload participants .txt file" : filesContent[0].name}
+								{filesContent.length === 0 ? "Upload participants Excel file" : filesContent[0].name}
 							</Button>
+						)}
 					</div>
 				</div>
 			</div>
--- a/src/pages/(exam)/ExamPage.tsx
+++ b/src/pages/(exam)/ExamPage.tsx
@@ -49,6 +49,9 @@ export default function ExamPage({page}: Props) {
 	const router = useRouter();

 	useEffect(() => setSessionId(uuidv4()), []);
+	useEffect(() => {
+		if (user?.type === "developer") console.log(exam);
+	}, [exam, user]);

 	useEffect(() => {
 		selectedModules.length > 0 && timeSpent === 0 && !showSolutions;
@@ -64,6 +67,10 @@ export default function ExamPage({page}: Props) {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [selectedModules.length]);

+	useEffect(() => {
+		if (showSolutions) setModuleIndex(-1);
+	}, [showSolutions]);
+
 	useEffect(() => {
 		(async () => {
 			if (selectedModules.length > 0 && exams.length > 0 && moduleIndex < selectedModules.length) {
@@ -247,14 +254,15 @@ export default function ExamPage({page}: Props) {
 					user={user!}
 					disableSelection={page === "exams"}
 					onStart={(modules, avoid) => {
-						setSelectedModules(modules);
+						setModuleIndex(0);
 						setAvoidRepeated(avoid);
+						setSelectedModules(modules);
 					}}
 				/>
 			);
 		}

-		if (moduleIndex >= selectedModules.length) {
+		if (moduleIndex >= selectedModules.length || moduleIndex === -1) {
 			return (
 				<Finish
 					isLoading={isEvaluationLoading}
--- a/src/pages/(register)/RegisterCorporate.tsx
+++ b/src/pages/(register)/RegisterCorporate.tsx
@@ -142,7 +142,7 @@ export default function RegisterCorporate({isLoading, setIsLoading, mutateUser,

 			<div className="w-full flex gap-4">
 				<div className="flex flex-col gap-3 w-full">
-					<label className="font-normal text-base text-mti-gray-dim">Referral</label>
+					<label className="font-normal text-base text-mti-gray-dim">Referral *</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={[
@@ -171,7 +171,7 @@ export default function RegisterCorporate({isLoading, setIsLoading, mutateUser,
 				</div>

 				<div className="flex flex-col gap-3 w-full">
-					<label className="font-normal text-base text-mti-gray-dim">Subscription Duration</label>
+					<label className="font-normal text-base text-mti-gray-dim">Subscription Duration *</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={Object.keys(availableDurations).map((value) => ({
--- a/src/pages/(register)/RegisterIndividual.tsx
+++ b/src/pages/(register)/RegisterIndividual.tsx
@@ -105,7 +105,6 @@ export default function RegisterIndividual({queryCode, defaultInformation, isLoa
 				required
 			/>

-			{/** TODO: Add a checkbox to disable code */}
 			<div className="flex flex-col gap-4 w-full items-start">
 				<Checkbox isChecked={hasCode} onChange={setHasCode}>
 					I have a code
@@ -117,6 +116,7 @@ export default function RegisterIndividual({queryCode, defaultInformation, isLoa
 						onChange={(e) => setCode(e)}
 						placeholder="Enter your registration code (optional)"
 						defaultValue={code}
+						required
 					/>
 				)}
 			</div>
--- a/src/pages/(status)/PaymentDue.tsx
+++ b/src/pages/(status)/PaymentDue.tsx
@@ -32,7 +32,7 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
 		if (userGroups.length === 0) return true;

 		const userGroupsAdminTypes = userGroups.map((g) => users?.find((u) => u.id === g.admin)?.type).filter((t) => !!t);
-		return userGroupsAdminTypes.every((t) => t !== "admin");
+		return userGroupsAdminTypes.every((t) => t !== "corporate");
 	};

 	return (
--- a/src/pages/api/assignments/[id]/export.tsx
+++ b/src/pages/api/assignments/[id]/export.tsx
@@ -1,33 +1,21 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-import { app, storage } from "@/firebase";
-import {
-  getFirestore,
-  doc,
-  getDoc,
-  updateDoc,
-  getDocs,
-  query,
-  collection,
-  where,
-  documentId,
-} from "firebase/firestore";
-import { withIronSessionApiRoute } from "iron-session/next";
-import { sessionOptions } from "@/lib/session";
+import type {NextApiRequest, NextApiResponse} from "next";
+import {app, storage} from "@/firebase";
+import {getFirestore, doc, getDoc, updateDoc, getDocs, query, collection, where, documentId} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
 import ReactPDF from "@react-pdf/renderer";
 import GroupTestReport from "@/exams/pdf/group.test.report";
-import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
-import { Stat } from "@/interfaces/user";
-import { User } from "@/interfaces/user";
-import { Module } from "@/interfaces";
-import { ModuleScore, StudentData } from "@/interfaces/module.scores";
-import { SkillExamDetails } from "@/exams/pdf/details/skill.exam";
-import { LevelExamDetails } from "@/exams/pdf/details/level.exam";
-import { calculateBandScore, getLevelScore } from "@/utils/score";
-import {
-  generateQRCode,
-  getRadialProgressPNG,
-  streamToBuffer,
-} from "@/utils/pdf";
+import {ref, uploadBytes, getDownloadURL} from "firebase/storage";
+import {Stat, CorporateUser} from "@/interfaces/user";
+import {User, DemographicInformation} from "@/interfaces/user";
+import {Module} from "@/interfaces";
+import {ModuleScore, StudentData} from "@/interfaces/module.scores";
+import {SkillExamDetails} from "@/exams/pdf/details/skill.exam";
+import {LevelExamDetails} from "@/exams/pdf/details/level.exam";
+import {calculateBandScore, getLevelScore} from "@/utils/score";
+import {generateQRCode, getRadialProgressPNG, streamToBuffer} from "@/utils/pdf";
+import {Group} from "@/interfaces/user";
+import moment from "moment-timezone";

 interface GroupScoreSummaryHelper {
 	score: [number, number];
@@ -90,14 +78,14 @@ const getPerformanceSummary = (module: Module, score: number) => {

 const getScoreAndTotal = (stats: Stat[]) => {
 	return stats.reduce(
-    (acc, { score }) => {
+		(acc, {score}) => {
 			return {
 				...acc,
 				correct: acc.correct + score.correct,
 				total: acc.total + score.total,
 			};
 		},
-    { correct: 0, total: 0 }
+		{correct: 0, total: 0},
 	);
 };

@@ -109,14 +97,14 @@ const getLevelScoreForUserExams = (bandScore: number) => {
 async function post(req: NextApiRequest, res: NextApiResponse) {
 	// verify if it's a logged user that is trying to export
 	if (req.session.user) {
-    const { id } = req.query as { id: string };
+		const {id} = req.query as {id: string};

 		const docSnap = await getDoc(doc(db, "assignments", id));
 		const data = docSnap.data() as {
 			assigner: string;
 			assignees: string[];
 			results: any;
-      exams: { module: Module }[];
+			exams: {module: Module}[];
 			startDate: string;
 			pdf?: string;
 		};
@@ -126,7 +114,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 		}

 		if (data.assigner !== req.session.user.id) {
-      res.status(401).json({ ok: false });
+			res.status(401).json({ok: false});
 			return;
 		}
 		if (data.pdf) {
@@ -145,29 +133,19 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 				const user = docUser.data() as User;

 				// generate the QR code for the report
-        const qrcode = await generateQRCode(
-          (req.headers.origin || "") + req.url
-        );
+				const qrcode = await generateQRCode((req.headers.origin || "") + req.url);

 				if (!qrcode) {
-          res.status(500).json({ ok: false });
+					res.status(500).json({ok: false});
 					return;
 				}

-        const flattenResults = data.results.reduce(
-          (accm: Stat[], entry: any) => {
+				const flattenResults = data.results.reduce((accm: Stat[], entry: any) => {
 					const stats = entry.stats as Stat[];
 					return [...accm, ...stats];
-          },
-          []
-        ) as Stat[];
+				}, []) as Stat[];

-        const docsSnap = await getDocs(
-          query(
-            collection(db, "users"),
-            where(documentId(), "in", data.assignees)
-          )
-        );
+				const docsSnap = await getDocs(query(collection(db, "users"), where(documentId(), "in", data.assignees)));
 				const users = docsSnap.docs.map((d) => ({
 					...d.data(),
 					id: d.id,
@@ -175,26 +153,17 @@ async function post(req: NextApiRequest, res: NextApiResponse) {

 				const flattenResultsWithGrade = flattenResults.map((e) => {
 					const focus = users.find((u) => u.id === e.user)?.focus || "academic";
-          const bandScore = calculateBandScore(
-            e.score.correct,
-            e.score.total,
-            e.module,
-            focus
-          );
+					const bandScore = calculateBandScore(e.score.correct, e.score.total, e.module, focus);

-          return { ...e, bandScore };
+					return {...e, bandScore};
 				});

-        const moduleResults = data.exams.map(({ module }) => {
-          const moduleResults = flattenResultsWithGrade.filter(
-            (e) => e.module === module
-          );
+				const moduleResults = data.exams.map(({module}) => {
+					const moduleResults = flattenResultsWithGrade.filter((e) => e.module === module);

-          const baseBandScore =
-            moduleResults.reduce((accm, curr) => accm + curr.bandScore, 0) /
-            moduleResults.length;
+					const baseBandScore = moduleResults.reduce((accm, curr) => accm + curr.bandScore, 0) / moduleResults.length;
 					const bandScore = isNaN(baseBandScore) ? 0 : baseBandScore;
-          const { correct, total } = getScoreAndTotal(moduleResults);
+					const {correct, total} = getScoreAndTotal(moduleResults);
 					const png = getRadialProgressPNG("azul", correct, total);

 					return {
@@ -207,16 +176,11 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 					};
 				}) as ModuleScore[];

-        const { correct: overallCorrect, total: overallTotal } =
-          getScoreAndTotal(flattenResults);
+				const {correct: overallCorrect, total: overallTotal} = getScoreAndTotal(flattenResults);
 				const baseOverallResult = overallCorrect / overallTotal;
 				const overallResult = isNaN(baseOverallResult) ? 0 : baseOverallResult;

-        const overallPNG = getRadialProgressPNG(
-          "laranja",
-          overallCorrect,
-          overallTotal
-        );
+				const overallPNG = getRadialProgressPNG("laranja", overallCorrect, overallTotal);
 				// generate the overall detail report
 				const overallDetail = {
 					module: "Overall",
@@ -233,7 +197,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 					// or X modules, either way
 					// as long as I verify the first entry I should be fine
 					baseStat.module,
-          overallResult
+					overallResult,
 				);

 				const showLevel = baseStat.module === "level";
@@ -243,12 +207,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 					if (showLevel) {
 						return {
 							title: "GROUP ENGLISH LEVEL TEST RESULT REPORT ",
-              details: (
-                <LevelExamDetails
-                  detail={overallDetail}
-                  title="Group Average CEFR"
-                />
-              ),
+							details: <LevelExamDetails detail={overallDetail} title="Group Average CEFR" />,
 						};
 					}

@@ -258,7 +217,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 					};
 				};

-        const { title, details } = getCustomData();
+				const {title, details} = getCustomData();

 				const numberOfStudents = data.assignees.length;

@@ -275,12 +234,8 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 										day: "numeric",
 								  });

-            const bandScore =
-              exams.length === 0
-                ? 0
-                : exams.reduce((accm, curr) => accm + curr.bandScore, 0) /
-                  exams.length;
-            const { correct, total } = getScoreAndTotal(exams);
+						const bandScore = exams.length === 0 ? 0 : exams.reduce((accm, curr) => accm + curr.bandScore, 0) / exams.length;
+						const {correct, total} = getScoreAndTotal(exams);

 						const result = exams.length === 0 ? "N/A" : `${correct}/${total}`;

@@ -291,9 +246,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 							gender: user?.demographicInformation?.gender || "N/A",
 							date,
 							result,
-              level: showLevel
-                ? getLevelScoreForUserExams(bandScore)
-                : undefined,
+							level: showLevel ? getLevelScoreForUserExams(bandScore) : undefined,
 							bandScore,
 						};
 					});
@@ -302,9 +255,8 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 				const studentsData = await getStudentsData();

 				const getGroupScoreSummary = () => {
-          const resultHelper = studentsData.reduce(
-            (accm: GroupScoreSummaryHelper[], curr) => {
-              const { bandScore, id } = curr;
+					const resultHelper = studentsData.reduce((accm: GroupScoreSummaryHelper[], curr) => {
+						const {bandScore, id} = curr;

 						const flooredScore = Math.floor(bandScore);

@@ -330,11 +282,9 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 								sessions: [id],
 							},
 						];
-            },
-            []
-          ) as GroupScoreSummaryHelper[];
+					}, []) as GroupScoreSummaryHelper[];

-          const result = resultHelper.map(({ score, label, sessions }) => {
+					const result = resultHelper.map(({score, label, sessions}) => {
 						const finalLabel = showLevel ? getLevelScore(score[0])[1] : label;
 						return {
 							label: finalLabel,
@@ -345,28 +295,83 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 					return result;
 				};

-        const groupScoreSummary = getGroupScoreSummary();
+				const getInstitution = async () => {
+					try {
+						// due to database inconsistencies, I'll be overprotective here
+						const assignerUserSnap = await getDoc(doc(db, "users", data.assigner));
+						if (assignerUserSnap.exists()) {
+							// we'll need the user in order to get the user data (name, email, focus, etc);
+							const assignerUser = assignerUserSnap.data() as User;

+							if (assignerUser.type === "teacher") {
+								// also search for groups where this user belongs
+								const queryGroups = query(collection(db, "groups"), where("participants", "array-contains", assignerUser.id));
+								const groupSnapshot = await getDocs(queryGroups);
+
+								const groups = groupSnapshot.docs.map((doc) => ({
+									id: doc.id,
+									...doc.data(),
+								})) as Group[];
+
+								if (groups.length > 0) {
+									const adminQuery = query(
+										collection(db, "users"),
+										where(
+											documentId(),
+											"in",
+											groups.map((g) => g.admin),
+										),
+									);
+									const adminUsersSnap = await getDocs(adminQuery);
+
+									const admins = adminUsersSnap.docs.map((doc) => ({
+										id: doc.id,
+										...doc.data(),
+									})) as CorporateUser[];
+
+									const adminData = admins.find((a) => a.corporateInformation?.companyInformation?.name);
+									if (adminData) {
+										return adminData.corporateInformation.companyInformation.name;
+									}
+								}
+							}
+
+							if (assignerUser.type === "corporate" && assignerUser.corporateInformation?.companyInformation?.name) {
+								return assignerUser.corporateInformation.companyInformation.name;
+							}
+						}
+					} catch (err) {
+						console.error(err);
+					}
+					return "";
+				};
+
+				const institution = await getInstitution();
+				const groupScoreSummary = getGroupScoreSummary();
+				const demographicInformation = user.demographicInformation as DemographicInformation;
 				const pdfStream = await ReactPDF.renderToStream(
 					<GroupTestReport
 						title={title}
-            date={new Date(data.startDate).toLocaleString()}
+						date={moment(data.startDate)
+							.tz(user.demographicInformation?.timezone || "UTC")
+							.format("ll HH:mm:ss")}
 						name={user.name}
 						email={user.email}
 						id={user.id}
-            gender={user.demographicInformation?.gender}
+						gender={demographicInformation?.gender}
 						summary={performanceSummary}
 						renderDetails={details}
 						logo={"public/logo_title.png"}
 						qrcode={qrcode}
 						numberOfStudents={numberOfStudents}
-            institution="TODO: PLACEHOLDER"
+						institution={institution}
 						studentsData={studentsData}
 						showLevel={showLevel}
 						summaryPNG={overallPNG}
 						summaryScore={`${(overallResult * 100).toFixed(0)}%`}
 						groupScoreSummary={groupScoreSummary}
-          />
+						passportId={demographicInformation?.passport_id || ""}
+					/>,
 				);

 				// generate the file ref for storage
@@ -389,18 +394,18 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 				return;
 			}

-      res.status(401).json({ ok: false });
+			res.status(401).json({ok: false});
 			return;
 		} catch (err) {
 			console.error(err);
-      res.status(500).json({ ok: false });
+			res.status(500).json({ok: false});
 			return;
 		}
 	}
 }
 async function get(req: NextApiRequest, res: NextApiResponse) {
 	if (req.session.user) {
-    const { id } = req.query as { id: string };
+		const {id} = req.query as {id: string};

 		const docSnap = await getDoc(doc(db, "assignments", id));
 		const data = docSnap.data();
@@ -410,7 +415,7 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 		}

 		if (data.assigner !== req.session.user.id) {
-      res.status(401).json({ ok: false });
+			res.status(401).json({ok: false});
 			return;
 		}

@@ -424,6 +429,6 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 		return;
 	}

-  res.status(401).json({ ok: false });
+	res.status(401).json({ok: false});
 	return;
 }
--- a/src/pages/api/groups/index.ts
+++ b/src/pages/api/groups/index.ts
@@ -1,7 +1,7 @@
 // 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, setDoc, doc} from "firebase/firestore";
+import {getFirestore, collection, getDocs, setDoc, doc, query, where} from "firebase/firestore";
 import {withIronSessionApiRoute} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
 import {Group} from "@/interfaces/user";
@@ -22,25 +22,19 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 }

 async function get(req: NextApiRequest, res: NextApiResponse) {
-	const {admin} = req.query as {admin: string};
-	const snapshot = await getDocs(collection(db, "groups"));
+	const {admin, participant} = req.query as {admin: string; participant: string};

-	const groups: Group[] = snapshot.docs.map((doc) => ({
+	const queryConstraints = [
+		...(admin ? [where("admin", "==", admin)] : []),
+		...(participant ? [where("participants", "array-contains", participant)] : []),
+	];
+	const snapshot = await getDocs(queryConstraints.length > 0 ? query(collection(db, "groups"), ...queryConstraints) : collection(db, "groups"));
+	const groups = snapshot.docs.map((doc) => ({
 		id: doc.id,
 		...doc.data(),
 	})) as Group[];

-	if (admin) {
-		res.status(200).json(groups.filter((x) => x.admin === admin));
-		return;
-	}
-
-	res.status(200).json(
-		snapshot.docs.map((doc) => ({
-			id: doc.id,
-			...doc.data(),
-		})),
-	);
+	res.status(200).json(groups);
 }

 async function post(req: NextApiRequest, res: NextApiResponse) {
--- a/src/pages/api/stats/[id]/export.tsx
+++ b/src/pages/api/stats/[id]/export.tsx
@@ -15,7 +15,7 @@ import { sessionOptions } from "@/lib/session";
 import ReactPDF from "@react-pdf/renderer";
 import TestReport from "@/exams/pdf/test.report";
 import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
-import { User } from "@/interfaces/user";
+import { DemographicInformation, User } from "@/interfaces/user";
 import { Module } from "@/interfaces";
 import { ModuleScore } from "@/interfaces/module.scores";
 import { SkillExamDetails } from "@/exams/pdf/details/skill.exam";
@@ -28,6 +28,7 @@ import {
  getRadialProgressPNG,
  streamToBuffer,
 } from "@/utils/pdf";
+import moment from "moment-timezone";

 const db = getFirestore(app);

@@ -263,12 +264,14 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
        );
        const overallResult = overallScore / overallTotal;

+        const overallPNG = getRadialProgressPNG("laranja", overallScore, overallTotal);
+
        // generate the overall detail report
        const overallDetail = {
          module: "Overall",
          score: overallScore,
          total: overallTotal,
-          png: getRadialProgressPNG("laranja", overallScore, overallTotal),
+          png: overallPNG,
        } as ModuleScore;
        const testDetails = [overallDetail, ...finalResults];

@@ -301,19 +304,24 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
        };

        const { title, details } = getCustomData();
+        
+        const demographicInformation = user.demographicInformation as DemographicInformation;
        const pdfStream = await ReactPDF.renderToStream(
          <TestReport
            title={title}
-            date={new Date(stat.date).toLocaleString()}
+            date={moment(stat.date).tz(user.demographicInformation?.timezone || 'UTC').format('ll HH:mm:ss')}
            name={user.name}
            email={user.email}
            id={user.id}
-            gender={user.demographicInformation?.gender}
+            gender={demographicInformation?.gender}
            summary={performanceSummary}
            testDetails={testDetails}
            renderDetails={details}
            logo={"public/logo_title.png"}
            qrcode={qrcode}
+            summaryPNG={overallPNG}
+            summaryScore={`${(overallResult * 100).toFixed(0)}%`}
+            passportId={demographicInformation?.passport_id || ""}
          />
        );

--- a/src/pages/api/user.ts
+++ b/src/pages/api/user.ts
@@ -49,6 +49,10 @@ async function del(req: NextApiRequest, res: NextApiResponse) {
 		return;
 	}

+	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)));
@@ -62,11 +66,6 @@ async function del(req: NextApiRequest, res: NextApiResponse) {
 			async (x) => await setDoc(x.ref, {participants: x.data().participants.filter((y: string) => y !== id)}, {merge: true}),
 		),
 	]);
-
-	await auth.deleteUser(id);
-	await deleteDoc(doc(db, "users", id));
-
-	res.json({ok: true});
 }

 async function get(req: NextApiRequest, res: NextApiResponse) {
--- a/src/pages/generation.tsx
+++ b/src/pages/generation.tsx
@@ -78,7 +78,7 @@ export default function Generation() {
 							value={module}
 							onChange={setModule}
 							className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
-							{[...MODULE_ARRAY, "level"].map((x) => (
+							{[...MODULE_ARRAY].map((x) => (
 								<RadioGroup.Option value={x} key={x}>
 									{({checked}) => (
 										<span
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -2,7 +2,7 @@
 import {User} from "@/interfaces/user";
 import {toast, ToastContainer} from "react-toastify";
 import axios from "axios";
-import {FormEvent, useState} from "react";
+import {FormEvent, useEffect, useState} from "react";
 import Head from "next/head";
 import useUser from "@/hooks/useUser";
 import {Divider} from "primereact/divider";
@@ -13,9 +13,38 @@ import Input from "@/components/Low/Input";
 import clsx from "clsx";
 import {useRouter} from "next/router";
 import EmailVerification from "./(auth)/EmailVerification";
+import {withIronSessionSsr} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";

 const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/g);

+export const getServerSideProps = withIronSessionSsr(({req, res}) => {
+	const user = req.session.user;
+
+	const envVariables: {[key: string]: string} = {};
+	Object.keys(process.env)
+		.filter((x) => x.startsWith("NEXT_PUBLIC"))
+		.forEach((x: string) => {
+			envVariables[x] = process.env[x]!;
+		});
+
+	if (user && user.isVerified) {
+		res.setHeader("location", "/");
+		res.statusCode = 302;
+		res.end();
+		return {
+			props: {
+				user: null,
+				envVariables,
+			},
+		};
+	}
+
+	return {
+		props: {user: null, envVariables},
+	};
+}, sessionOptions);
+
 export default function Login() {
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
@@ -29,6 +58,10 @@ export default function Login() {
 		redirectIfFound: true,
 	});

+	useEffect(() => {
+		if (user && user.isVerified) router.push("/");
+	}, [router, user]);
+
 	const forgotPassword = () => {
 		if (!email || email.length < 0 || !EMAIL_REGEX.test(email)) {
 			toast.error("Please enter your e-mail to reset your password!", {toastId: "forgot-invalid-email"});
--- a/src/pages/payment-record.tsx
+++ b/src/pages/payment-record.tsx
@@ -371,7 +371,7 @@ export default function PaymentRecord() {
 				}

 				if (reason.response.status === 403) {
-					toast.error("You do not have permission to delete this exam!");
+					toast.error("You do not have permission to delete an approved payment record!");
 					return;
 				}

@@ -785,7 +785,7 @@ export default function PaymentRecord() {
 					<div className="w-full flex flex-end justify-between p-2">
 						<h1 className="text-2xl font-semibold">Payment Record</h1>
 						<div className="flex justify-end gap-2">
-							{(user.type === "developer" || user.type === "admin" || user.type === 'agent' || user.type === 'corporate') && (
+							{(user.type === "developer" || user.type === "admin" || user.type === "agent" || user.type === "corporate") && (
 								<Button className="max-w-[200px]" variant="outline">
 									<CSVLink data={csvRows} headers={csvColumns} filename="payment-records.csv">
 										Download CSV
--- a/src/pages/profile.tsx
+++ b/src/pages/profile.tsx
@@ -2,7 +2,7 @@
 import Head from "next/head";
 import {withIronSessionSsr} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
-import {ChangeEvent, useEffect, useRef, useState} from "react";
+import {ChangeEvent, ReactNode, useEffect, useRef, useState} from "react";
 import useUser from "@/hooks/useUser";
 import {toast, ToastContainer} from "react-toastify";
 import Layout from "@/components/High/Layout";
@@ -11,17 +11,20 @@ import Button from "@/components/Low/Button";
 import Link from "next/link";
 import axios from "axios";
 import {ErrorMessage} from "@/constants/errors";
-import {RadioGroup} from "@headlessui/react";
 import clsx from "clsx";
-import {EmploymentStatus, EMPLOYMENT_STATUS, Gender, User} from "@/interfaces/user";
+import {CorporateUser, EmploymentStatus, EMPLOYMENT_STATUS, Gender, User} from "@/interfaces/user";
 import CountrySelect from "@/components/Low/CountrySelect";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import moment from "moment";
-import {BsCamera, BsCameraFill} from "react-icons/bs";
+import {BsCamera} from "react-icons/bs";
 import {USER_TYPE_LABELS} from "@/resources/user";
 import useGroups from "@/hooks/useGroups";
 import useUsers from "@/hooks/useUsers";
-
+import {convertBase64} from "@/utils";
+import {Divider} from "primereact/divider";
+import GenderInput from "@/components/High/GenderInput";
+import EmploymentStatusInput from "@/components/High/EmploymentStatusInput";
+import TimezoneSelect from "@/components/Low/TImezoneSelect";
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;

@@ -74,11 +77,12 @@ function UserProfile({user, mutateUser}: Props) {
 	);
 	const [passport_id, setPassportID] = useState<string | undefined>(user.type === "student" ? user.demographicInformation?.passport_id : undefined);
 	const [position, setPosition] = useState<string | undefined>(user.type === "corporate" ? user.demographicInformation?.position : undefined);
+	const [corporateInformation, setCorporateInformation] = useState(user.type === "corporate" ? user.corporateInformation : undefined);
 	const [companyName, setCompanyName] = useState<string | undefined>(user.type === "agent" ? user.agentInformation?.companyName : undefined);
 	const [commercialRegistration, setCommercialRegistration] = useState<string | undefined>(
 		user.type === "agent" ? user.agentInformation?.commercialRegistration : undefined,
 	);
-
+	const [timezone, setTimezone] = useState<string>(user.demographicInformation?.timezone || "UTC");
 	const {groups} = useGroups();
 	const {users} = useUsers();

@@ -92,19 +96,6 @@ function UserProfile({user, mutateUser}: Props) {
 		if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
 	};

-	const convertBase64 = (file: File) => {
-		return new Promise((resolve, reject) => {
-			const fileReader = new FileReader();
-			fileReader.readAsDataURL(file);
-			fileReader.onload = () => {
-				resolve(fileReader.result);
-			};
-			fileReader.onerror = (error) => {
-				reject(error);
-			};
-		});
-	};
-
 	const uploadProfilePicture = async (event: ChangeEvent<HTMLInputElement>) => {
 		if (event.target.files && event.target.files[0]) {
 			const picture = event.target.files[0];
@@ -154,7 +145,9 @@ function UserProfile({user, mutateUser}: Props) {
 				position: user?.type === "corporate" ? position : undefined,
 				gender,
 				passport_id,
+				timezone,
 			},
+			...(user.type === "corporate" ? {corporateInformation} : {}),
 		});
 		if (request.status === 200) {
 			toast.success("Your profile has been updated!");
@@ -167,46 +160,10 @@ function UserProfile({user, mutateUser}: Props) {
 		setIsLoading(false);
 	};

-	return (
-		<Layout user={user}>
-			<section className="w-full flex flex-col gap-4 md:gap-8 px-4 py-8">
-				<h1 className="text-4xl font-bold mb-6 md:hidden">Edit Profile</h1>
-				<div className="flex -md:flex-col-reverse -md:items-center w-full justify-between">
-					<div className="flex flex-col gap-8 w-full md:w-2/3">
-						<h1 className="text-4xl font-bold mb-6 -md:hidden">Edit Profile</h1>
-						<form className="flex flex-col items-center gap-6 w-full">
-							<div className="flex flex-col md:flex-row gap-8 w-full">
-								<Input
-									label="Name"
-									type="text"
-									name="name"
-									onChange={(e) => setName(e)}
-									placeholder="Enter your name"
-									defaultValue={name}
-									required
-								/>
-								<Input
-									label="E-mail Address"
-									type="email"
-									name="email"
-									onChange={(e) => setEmail(e)}
-									placeholder="Enter email address"
-									defaultValue={email}
-									required
-								/>
-							</div>
-							{user.type === "student" && (
-								<Input
-									type="text"
-									name="passport_id"
-									label="Passport/National ID"
-									onChange={(e) => setPassportID(e)}
-									placeholder="Enter National ID or Passport number"
-									value={passport_id}
-									required
-								/>
-							)}
-							<div className="flex flex-col md:flex-row gap-8 w-full">
+	const DoubleColumnRow = ({children}: {children: ReactNode}) => <div className="flex flex-col md:flex-row gap-8 w-full">{children}</div>;
+
+	const PasswordInput = () => (
+		<DoubleColumnRow>
 			<Input
 				label="Current Password"
 				type="password"
@@ -222,9 +179,14 @@ function UserProfile({user, mutateUser}: Props) {
 				onChange={(e) => setNewPassword(e)}
 				placeholder="Enter your new password (optional)"
 			/>
-							</div>
+		</DoubleColumnRow>
+	);

-							{user.type === "agent" && (
+	const NameInput = () => (
+		<Input label="Name" type="text" name="name" onChange={(e) => setName(e)} placeholder="Enter your name" defaultValue={name} required />
+	);
+
+	const AgentInformationInput = () => (
 		<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
 			<Input
 				label="Corporate Name"
@@ -245,13 +207,16 @@ function UserProfile({user, mutateUser}: Props) {
 				disabled
 			/>
 		</div>
-							)}
+	);

-							<div className="flex flex-col md:flex-row gap-8 w-full">
+	const CountryInput = () => (
 		<div className="flex flex-col gap-3 w-full">
 			<label className="font-normal text-base text-mti-gray-dim">Country *</label>
 			<CountrySelect value={country} onChange={setCountry} />
 		</div>
+	);
+
+	const PhoneInput = () => (
 		<Input
 			type="tel"
 			name="phone"
@@ -261,94 +226,10 @@ function UserProfile({user, mutateUser}: Props) {
 			defaultValue={phone}
 			required
 		/>
-							</div>
-							<div className="flex flex-col md:flex-row gap-8 w-full">
-								{user.type === "corporate" && (
-									<Input
-										name="position"
-										onChange={setPosition}
-										defaultValue={position}
-										type="text"
-										label="Position"
-										placeholder="CEO, Head of Marketing..."
-										required
-									/>
-								)}
-								{user.type !== "corporate" && (
-									<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={employment}
-											onChange={setEmployment}
-											className="grid grid-cols-2 items-center gap-4 place-items-center">
-											{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>
-								)}
-								<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={gender} onChange={setGender} className="flex flex-row gap-4 justify-between">
-											<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">
+	);
+
+	const ExpirationDate = () => (
+		<div className="flex flex-col gap-3 w-full">
 			<label className="font-normal text-base text-mti-gray-dim">Expiry Date (click to purchase)</label>
 			<Link
 				href="/payment"
@@ -364,8 +245,188 @@ function UserProfile({user, mutateUser}: Props) {
 				{user.subscriptionExpirationDate && moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
 			</Link>
 		</div>
+	);
+
+	const TimezoneInput = () => (
+		<div className="flex flex-col gap-3 w-full">
+			<label className="font-normal text-base text-mti-gray-dim">Timezone</label>
+			<TimezoneSelect value={timezone} onChange={setTimezone} />
 		</div>
+	);
+
+	return (
+		<Layout user={user}>
+			<section className="w-full flex flex-col gap-4 md:gap-8 px-4 py-8">
+				<h1 className="text-4xl font-bold mb-6 md:hidden">Edit Profile</h1>
+				<div className="flex -md:flex-col-reverse -md:items-center w-full justify-between">
+					<div className="flex flex-col gap-8 w-full md:w-2/3">
+						<h1 className="text-4xl font-bold mb-6 -md:hidden">Edit Profile</h1>
+						<form className="flex flex-col items-center gap-6 w-full">
+							<DoubleColumnRow>
+								{user.type !== "corporate" ? (
+									<NameInput />
+								) : (
+									<Input
+										label="Company name"
+										type="text"
+										name="name"
+										onChange={(e) =>
+											setCorporateInformation((prev) => ({
+												...prev!,
+												companyInformation: {...prev!.companyInformation, name: e},
+											}))
+										}
+										placeholder="Enter your company's name"
+										defaultValue={corporateInformation?.companyInformation.name}
+										required
+									/>
+								)}
+
+								<Input
+									label="E-mail Address"
+									type="email"
+									name="email"
+									onChange={(e) => setEmail(e)}
+									placeholder="Enter email address"
+									defaultValue={email}
+									required
+								/>
+							</DoubleColumnRow>
+							<PasswordInput />
+							{user.type === "agent" && <AgentInformationInput />}
+
+							<DoubleColumnRow>
+								<CountryInput />
+								<PhoneInput />
+							</DoubleColumnRow>
+
+							{user.type === "student" ? (
+								<DoubleColumnRow>
+									<Input
+										type="text"
+										name="passport_id"
+										label="Passport/National ID"
+										onChange={(e) => setPassportID(e)}
+										placeholder="Enter National ID or Passport number"
+										value={passport_id}
+										required
+									/>
+									<TimezoneInput />
+								</DoubleColumnRow>
+							) : (
+								<TimezoneInput />
+							)}
+
+							<Divider />
+
+							{user.type === "corporate" && (
+								<>
+									<DoubleColumnRow>
+										<Input
+											type="number"
+											name="companyUsers"
+											onChange={() => null}
+											label="Number of users"
+											defaultValue={user.corporateInformation.companyInformation.userAmount}
+											disabled
+											required
+										/>
+										<Input
+											type="text"
+											name="pricing"
+											onChange={() => null}
+											label="Pricing"
+											defaultValue={`${user.corporateInformation.payment?.value} ${user.corporateInformation.payment?.currency}`}
+											disabled
+											required
+										/>
+									</DoubleColumnRow>
+									<ExpirationDate />
+								</>
+							)}
+
+							{user.type === "corporate" && (
+								<>
+									<Divider />
+									<DoubleColumnRow>
+										<NameInput />
+										<Input
+											name="position"
+											onChange={setPosition}
+											defaultValue={position}
+											type="text"
+											label="Position"
+											placeholder="CEO, Head of Marketing..."
+											required
+										/>
+									</DoubleColumnRow>
+								</>
+							)}
+
+							{user.type === "corporate" && user.corporateInformation.referralAgent && (
+								<>
+									<Divider />
+									<DoubleColumnRow>
+										<Input
+											name="agentName"
+											onChange={() => null}
+											defaultValue={users.find((x) => x.id === user.corporateInformation.referralAgent)?.name}
+											type="text"
+											label="Country Manager's Name"
+											placeholder="Not available"
+											required
+											disabled
+										/>
+										<Input
+											name="agentEmail"
+											onChange={() => null}
+											defaultValue={users.find((x) => x.id === user.corporateInformation.referralAgent)?.email}
+											type="text"
+											label="Country Manager's E-mail"
+											placeholder="Not available"
+											required
+											disabled
+										/>
+									</DoubleColumnRow>
+									<DoubleColumnRow>
+										<div className="flex flex-col gap-2 w-full">
+											<label className="font-normal text-base text-mti-gray-dim">Country Manager&apos;s Country *</label>
+											<CountrySelect
+												value={
+													users.find((x) => x.id === user.corporateInformation.referralAgent)?.demographicInformation
+														?.country
+												}
+												onChange={() => null}
+												disabled
+											/>
 										</div>
+
+										<Input
+											type="tel"
+											name="agentPhone"
+											label="Country Manager's Phone"
+											onChange={() => null}
+											placeholder="Not available"
+											defaultValue={
+												users.find((x) => x.id === user.corporateInformation.referralAgent)?.demographicInformation?.phone
+											}
+											disabled
+											required
+										/>
+									</DoubleColumnRow>
+								</>
+							)}
+
+							{user.type !== "corporate" && (
+								<DoubleColumnRow>
+									<EmploymentStatusInput value={employment} onChange={setEmployment} />
+
+									<div className="flex flex-col gap-8 w-full">
+										<GenderInput value={gender} onChange={setGender} />
+										<ExpirationDate />
+									</div>
+								</DoubleColumnRow>
+							)}
 						</form>
 					</div>
 					<div className="flex flex-col gap-6 w-48">
--- a/src/pages/record.tsx
+++ b/src/pages/record.tsx
@@ -24,7 +24,7 @@ import useGroups from "@/hooks/useGroups";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import useAssignments from "@/hooks/useAssignments";
 import {uuidv4} from "@firebase/util";
-import { usePDFDownload } from "@/hooks/usePDFDownload";
+import {usePDFDownload} from "@/hooks/usePDFDownload";

 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -175,7 +175,7 @@ export default function History({user}: {user: User}) {
 			level: calculateBandScore(x.correct, x.total, x.module, user.focus),
 		}));

-		const { timeSpent, session } = dateStats[0];
+		const {timeSpent, session} = dateStats[0];

 		const selectExam = () => {
 			const examPromises = uniqBy(dateStats, "exam").map((stat) => getExamById(stat.module, stat.exam));
@@ -215,8 +215,7 @@ export default function History({user}: {user: User}) {
 						)}
 					</div>
 					<div className="flex flex-row gap-2">
-						<span
-							className={textColor}>
+						<span className={textColor}>
 							Level{" "}
 							{(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)}
 						</span>
--- a/src/pages/stats.tsx
+++ b/src/pages/stats.tsx
@@ -139,9 +139,9 @@ export default function Stats() {
 		}
 	}, [startDate, endDate]);

-	const calculateTotalScore = (stats: Stat[]) => {
+	const calculateTotalScore = (stats: Stat[], divisionFactor: number) => {
 		const moduleScores = calculateModuleScore(stats);
-		return moduleScores.reduce((acc, curr) => acc + curr.score, 0) / 4;
+		return moduleScores.reduce((acc, curr) => acc + curr.score, 0) / divisionFactor;
 	};

 	const calculateScorePerModule = (stats: Stat[], module: Module) => {
@@ -278,7 +278,10 @@ export default function Stats() {
 														</span>
 														<span className="px-2">
 															Level{" "}
-															{calculateTotalScore(stats.filter((s) => timestampToMoment(s).isBefore(date))).toFixed(1)}
+															{calculateTotalScore(
+																stats.filter((s) => timestampToMoment(s).isBefore(date)),
+																5,
+															).toFixed(1)}
 														</span>
 													</div>
 												) : null;
@@ -364,6 +367,7 @@ export default function Stats() {
 																return date.isValid()
 																	? calculateTotalScore(
 																			stats.filter((s) => timestampToMoment(s).isBefore(date)),
+																			5,
 																	  ).toFixed(1)
 																	: undefined;
 															})
@@ -599,9 +603,12 @@ export default function Stats() {
 										}}
 									/>
 									<div className="flex -md:flex-col -md:items-center gap-4 flex-wrap">
-										{/* Reading Score Band in Interval */}
-										<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96">
-											<span className="text-sm font-bold">Reading Score Band in Interval</span>
+										{/* Module Score Band in Interval */}
+										{MODULE_ARRAY.map((module, index) => (
+											<div
+												className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96"
+												key={module}>
+												<span className="text-sm font-bold">{capitalize(module)} Score Band in Interval</span>
 												<Chart
 													options={{
 														scales: {
@@ -617,17 +624,18 @@ export default function Stats() {
 														datasets: [
 															{
 																type: "line",
-															label: "Reading",
+																label: capitalize(module),
 																fill: false,
-															borderColor: COLORS[0],
-															backgroundColor: COLORS[0],
+																borderColor: COLORS[index],
+																backgroundColor: COLORS[index],
 																borderWidth: 2,
 																spanGaps: true,
 																data: intervalDates.map((date) => {
 																	return calculateTotalScore(
 																		stats.filter(
-																		(s) => timestampToMoment(s).isBefore(date) && s.module === "reading",
+																			(s) => timestampToMoment(s).isBefore(date) && s.module === module,
 																		),
+																		1,
 																	).toFixed(1);
 																}),
 															},
@@ -635,152 +643,7 @@ export default function Stats() {
 													}}
 												/>
 											</div>
-
-										{/* Listening Score Band in Interval */}
-										<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96">
-											<span className="text-sm font-bold">Listening Score Band in Interval</span>
-											<Chart
-												options={{
-													scales: {
-														y: {
-															min: 0,
-															max: 9,
-														},
-													},
-												}}
-												type="line"
-												data={{
-													labels: intervalDates.map((date) => moment(date).format("DD/MM/YYYY")),
-													datasets: [
-														{
-															type: "line",
-															label: "Listening",
-															fill: false,
-															borderColor: COLORS[1],
-															backgroundColor: COLORS[1],
-															borderWidth: 2,
-															spanGaps: true,
-															data: intervalDates.map((date) => {
-																return calculateTotalScore(
-																	stats.filter(
-																		(s) => timestampToMoment(s).isBefore(date) && s.module === "listening",
-																	),
-																).toFixed(1);
-															}),
-														},
-													],
-												}}
-											/>
-										</div>
-
-										{/* Writing Score Band in Interval */}
-										<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96">
-											<span className="text-sm font-bold">Writing Score Band in Interval</span>
-											<Chart
-												options={{
-													scales: {
-														y: {
-															min: 0,
-															max: 9,
-														},
-													},
-												}}
-												type="line"
-												data={{
-													labels: intervalDates.map((date) => moment(date).format("DD/MM/YYYY")),
-													datasets: [
-														{
-															type: "line",
-															label: "Writing",
-															fill: false,
-															borderColor: COLORS[2],
-															backgroundColor: COLORS[2],
-															borderWidth: 2,
-															spanGaps: true,
-															data: intervalDates.map((date) => {
-																return calculateTotalScore(
-																	stats.filter(
-																		(s) => timestampToMoment(s).isBefore(date) && s.module === "writing",
-																	),
-																).toFixed(1);
-															}),
-														},
-													],
-												}}
-											/>
-										</div>
-
-										{/* Speaking Score Band in Interval */}
-										<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96">
-											<span className="text-sm font-bold">Speaking Score Band in Interval</span>
-											<Chart
-												options={{
-													scales: {
-														y: {
-															min: 0,
-															max: 9,
-														},
-													},
-												}}
-												type="line"
-												data={{
-													labels: intervalDates.map((date) => moment(date).format("DD/MM/YYYY")),
-													datasets: [
-														{
-															type: "line",
-															label: "Speaking",
-															fill: false,
-															borderColor: COLORS[3],
-															backgroundColor: COLORS[3],
-															borderWidth: 2,
-															spanGaps: true,
-															data: intervalDates.map((date) => {
-																return calculateTotalScore(
-																	stats.filter(
-																		(s) => timestampToMoment(s).isBefore(date) && s.module === "speaking",
-																	),
-																).toFixed(1);
-															}),
-														},
-													],
-												}}
-											/>
-										</div>
-
-										{/* Level Score Band in Interval */}
-										<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96">
-											<span className="text-sm font-bold">Level Score Band in Interval</span>
-											<Chart
-												options={{
-													scales: {
-														y: {
-															min: 0,
-															max: 9,
-														},
-													},
-												}}
-												type="line"
-												data={{
-													labels: intervalDates.map((date) => moment(date).format("DD/MM/YYYY")),
-													datasets: [
-														{
-															type: "line",
-															label: "Level",
-															fill: false,
-															borderColor: COLORS[4],
-															backgroundColor: COLORS[4],
-															borderWidth: 2,
-															spanGaps: true,
-															data: intervalDates.map((date) => {
-																return calculateTotalScore(
-																	stats.filter((s) => timestampToMoment(s).isBefore(date) && s.module === "level"),
-																).toFixed(1);
-															}),
-														},
-													],
-												}}
-											/>
-										</div>
+										))}
 									</div>
 								</div>
 							</>
--- a/src/utils/groups.ts
+++ b/src/utils/groups.ts
@@ -0,0 +1,18 @@
+import {CorporateUser, Group, User} from "@/interfaces/user";
+import axios from "axios";
+
+export const isUserFromCorporate = async (userID: string) => {
+	const groups = (await axios.get<Group[]>(`/api/groups?participant=${userID}`)).data;
+	const users = (await axios.get<User[]>("/api/users/list")).data;
+
+	const adminTypes = groups.map((g) => users.find((u) => u.id === g.admin)?.type);
+	return adminTypes.includes("corporate");
+};
+
+export const getUserCorporate = async (userID: string) => {
+	const groups = (await axios.get<Group[]>(`/api/groups?participant=${userID}`)).data;
+	const users = (await axios.get<User[]>("/api/users/list")).data;
+
+	const admins = groups.map((g) => users.find((u) => u.id === g.admin)).filter((x) => x?.type === "corporate");
+	return admins.length > 0 ? (admins[0] as CorporateUser) : undefined;
+};
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -12,3 +12,16 @@ export function dateSorter(a: any, b: any, direction: "asc" | "desc", key: strin
 export function env(key: string) {
 	return (window as any).__ENV[key];
 }
+
+export const convertBase64 = (file: File) => {
+	return new Promise((resolve, reject) => {
+		const fileReader = new FileReader();
+		fileReader.readAsDataURL(file);
+		fileReader.onload = () => {
+			resolve(fileReader.result);
+		};
+		fileReader.onerror = (error) => {
+			reject(error);
+		};
+	});
+};
--- a/src/utils/score.ts
+++ b/src/utils/score.ts
@@ -1,5 +1,5 @@
 import {Module} from "@/interfaces";
-import { LevelScore } from "@/constants/ielts";
+import {LevelScore} from "@/constants/ielts";

 type Type = "academic" | "general";

@@ -96,7 +96,7 @@ const academicMarking: {[key: number]: number} = {

 const levelMarking: {[key: number]: number} = {
 	88: 9, // Advanced
-	64: 8 , // Upper-Intermediate
+	64: 8, // Upper-Intermediate
 	52: 6, // Intermediate
 	32: 4, // Pre-Intermediate
 	16: 2, // Elementary
@@ -142,23 +142,24 @@ export const calculateBandScore = (correct: number, total: number, module: Modul
 };

 export const calculateAverageLevel = (levels: {[key in Module]: number}) => {
-	return Object.keys(levels).reduce((accumulator, current) => levels[current as Module] + accumulator, 0) / 4;
+	return Object.keys(levels).reduce((accumulator, current) => levels[current as Module] + accumulator, 0) / 5;
 };

 export const getLevelScore = (level: number) => {
-	switch(level) {
+	switch (level) {
 		case 0:
-			return ['Beginner', 'Low A1'];
+			return ["Beginner", "Low A1"];
 		case 2:
-			return ['Elementary', 'High A1/Low A2'];
+			return ["Elementary", "High A1/Low A2"];
 		case 4:
-			return ['Pre-Intermediate', 'High A2/Low B1'];
+			return ["Pre-Intermediate", "High A2/Low B1"];
 		case 6:
-			return ['Intermediate', 'High B1/Low B2'];
+			return ["Intermediate", "High B1/Low B2"];
 		case 8:
-			return ['Upper-Intermediate', 'High B2/Low C1'];
+			return ["Upper-Intermediate", "High B2/Low C1"];
 		case 9:
-			return ['Advanced', 'C1'];
-		default: return [];
+			return ["Advanced", "C1"];
+		default:
+			return [];
 	}
-}
+};
--- a/yarn.lock
+++ b/yarn.lock
@@ -10,7 +10,7 @@
    "@babel/highlight" "^7.22.13"
    chalk "^2.4.2"

-"@babel/helper-module-imports@^7.16.7":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.7":
  version "7.22.15"
  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0"
  integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
@@ -62,6 +62,13 @@
  dependencies:
    regenerator-runtime "^0.13.11"

+"@babel/runtime@^7.7.2":
+  version "7.23.8"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.8.tgz#8ee6fe1ac47add7122902f257b8ddf55c898f650"
+  integrity sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/types@^7.22.15":
  version "7.23.0"
  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.0.tgz#8c1f020c9df0e737e4e247c0619f58c68458aaeb"
@@ -98,6 +105,16 @@
    source-map "^0.5.7"
    stylis "4.2.0"

+"@emotion/cache@^10.0.27":
+  version "10.0.29"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
+  integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==
+  dependencies:
+    "@emotion/sheet" "0.9.4"
+    "@emotion/stylis" "0.8.5"
+    "@emotion/utils" "0.11.3"
+    "@emotion/weak-memoize" "0.2.5"
+
 "@emotion/cache@^11.11.0", "@emotion/cache@^11.4.0":
  version "11.11.0"
  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff"
@@ -109,6 +126,11 @@
    "@emotion/weak-memoize" "^0.3.1"
    stylis "4.2.0"

+"@emotion/hash@0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
 "@emotion/hash@^0.9.1":
  version "0.9.1"
  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
@@ -145,6 +167,17 @@
    "@emotion/weak-memoize" "^0.3.1"
    hoist-non-react-statics "^3.3.1"

+"@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
+  version "0.11.16"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
+  integrity sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==
+  dependencies:
+    "@emotion/hash" "0.8.0"
+    "@emotion/memoize" "0.7.4"
+    "@emotion/unitless" "0.7.5"
+    "@emotion/utils" "0.11.3"
+    csstype "^2.5.7"
+
 "@emotion/serialize@^1.1.2":
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.2.tgz#017a6e4c9b8a803bd576ff3d52a0ea6fa5a62b51"
@@ -156,11 +189,26 @@
    "@emotion/utils" "^1.2.1"
    csstype "^3.0.2"

+"@emotion/sheet@0.9.4":
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
+  integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
+
 "@emotion/sheet@^1.2.2":
  version "1.2.2"
  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec"
  integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==

+"@emotion/stylis@0.8.5":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
 "@emotion/unitless@^0.8.1":
  version "0.8.1"
  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
@@ -171,11 +219,21 @@
  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963"
  integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==

+"@emotion/utils@0.11.3":
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
+  integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
+
 "@emotion/utils@^1.2.1":
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4"
  integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==

+"@emotion/weak-memoize@0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
+
 "@emotion/weak-memoize@^0.3.1":
  version "0.3.1"
  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
@@ -1837,6 +1895,31 @@ axobject-query@^3.1.1:
  dependencies:
    deep-equal "^2.0.5"

+babel-plugin-emotion@^10.0.27:
+  version "10.2.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz#a1fe3503cff80abfd0bdda14abd2e8e57a79d17d"
+  integrity sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@emotion/hash" "0.8.0"
+    "@emotion/memoize" "0.7.4"
+    "@emotion/serialize" "^0.11.16"
+    babel-plugin-macros "^2.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^1.0.5"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+
+babel-plugin-macros@^2.0.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
+  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    cosmiconfig "^6.0.0"
+    resolve "^1.12.0"
+
 babel-plugin-macros@^3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
@@ -1846,6 +1929,11 @@ babel-plugin-macros@^3.1.0:
    cosmiconfig "^7.0.0"
    resolve "^1.19.0"

+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==
+
 balanced-match@^1.0.0:
  version "1.0.2"
  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
@@ -2176,6 +2264,17 @@ core-util-is@~1.0.0:
  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
  integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==

+cosmiconfig@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
+  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.1.0"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.7.2"
+
 cosmiconfig@^7.0.0:
  version "7.1.0"
  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
@@ -2202,6 +2301,16 @@ country-flag-icons@^1.5.4:
  resolved "https://registry.yarnpkg.com/country-flag-icons/-/country-flag-icons-1.5.7.tgz#f1f2ddf14f3cbf01cba6746374aeba94db35d4b4"
  integrity sha512-AdvXhMcmSp7nBSkpGfW4qR/luAdRUutJqya9PuwRbsBzuoknThfultbv7Ib6fWsHXC43Es/4QJ8gzQQdBNm75A==

+create-emotion@^10.0.14, create-emotion@^10.0.27:
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-10.0.27.tgz#cb4fa2db750f6ca6f9a001a33fbf1f6c46789503"
+  integrity sha512-fIK73w82HPPn/RsAij7+Zt8eCE8SptcJ3WoRMfxMtjteYxud8GDTKKld7MYwAX2TVhrw29uR1N/bVGxeStHILg==
+  dependencies:
+    "@emotion/cache" "^10.0.27"
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/sheet" "0.9.4"
+    "@emotion/utils" "0.11.3"
+
 cross-fetch@^3.1.5:
  version "3.1.8"
  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.8.tgz#0327eba65fd68a7d119f8fb2bf9334a1a7956f82"
@@ -2247,6 +2356,11 @@ cssesc@^3.0.0:
  resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==

+csstype@^2.5.7:
+  version "2.6.21"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
+  integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
+
 csstype@^3.0.2:
  version "3.1.1"
  resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz"
@@ -2378,6 +2492,11 @@ didyoumean@^1.2.2:
  resolved "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz"
  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==

+diff@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
+  integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
+
 dijkstrajs@^1.0.1:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.3.tgz#4c8dbdea1f0f6478bff94d9c49c784d623e4fc23"
@@ -2476,6 +2595,14 @@ emoji-regex@^9.2.2:
  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz"
  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==

+emotion@^10.0.14:
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.27.tgz#f9ca5df98630980a23c819a56262560562e5d75e"
+  integrity sha512-2xdDzdWWzue8R8lu4G76uWX5WhyQuzATon9LmNeCy/2BHVC6dsEpfhN1a0qhELgtDVdjyEA6J8Y/VlI5ZnaH0g==
+  dependencies:
+    babel-plugin-emotion "^10.0.27"
+    create-emotion "^10.0.27"
+
 encode-utf8@^1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/encode-utf8/-/encode-utf8-1.0.3.tgz#f30fdd31da07fb596f281beb2f6b027851994cda"
@@ -3570,7 +3697,7 @@ ignore@^5.2.0:
  resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz"
  integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==

-import-fresh@^3.0.0, import-fresh@^3.2.1:
+import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
  version "3.3.0"
  resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
@@ -4252,7 +4379,7 @@ media-engine@^1.0.3:
  resolved "https://registry.yarnpkg.com/media-engine/-/media-engine-1.0.3.tgz#be3188f6cd243ea2a40804a35de5a5b032f58dad"
  integrity sha512-aa5tG6sDoK+k70B9iEX1NeyfT8ObCKhNDs6lJVpwF6r8vhUfuKMslIcirq6HIUYuuUYLefcEQOn9bSBOvawtwg==

-memoize-one@^5.1.1:
+memoize-one@^5.0.4, memoize-one@^5.1.1:
  version "5.2.1"
  resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz"
  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
@@ -4360,6 +4487,13 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==

+moment-timezone@^0.5.44:
+  version "0.5.44"
+  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.44.tgz#a64a4e47b68a43deeab5ae4eb4f82da77cdf595f"
+  integrity sha512-nv3YpzI/8lkQn0U6RkLd+f0W/zy/JnoR5/EyPz/dNkPTBjA2jNLCVxaiQ8QpeLymhSZvX0wCL5s27NQWdOPwAw==
+  dependencies:
+    moment "^2.29.4"
+
 moment@^2.29.4:
  version "2.29.4"
  resolved "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz"
@@ -5024,6 +5158,18 @@ react-datepicker@^4.18.0:
    react-onclickoutside "^6.13.0"
    react-popper "^2.3.0"

+react-diff-viewer@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/react-diff-viewer/-/react-diff-viewer-3.1.1.tgz#21ac9c891193d05a3734bfd6bd54b107ee6d46cc"
+  integrity sha512-rmvwNdcClp6ZWdS11m1m01UnBA4OwYaLG/li0dB781e/bQEzsGyj+qewVd6W5ztBwseQ72pO7nwaCcq5jnlzcw==
+  dependencies:
+    classnames "^2.2.6"
+    create-emotion "^10.0.14"
+    diff "^4.0.1"
+    emotion "^10.0.14"
+    memoize-one "^5.0.4"
+    prop-types "^15.6.2"
+
 react-dom@18.2.0:
  version "18.2.0"
  resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
@@ -5261,6 +5407,15 @@ resolve@^1.1.7, resolve@^1.22.1:
    path-parse "^1.0.7"
    supports-preserve-symlinks-flag "^1.0.0"

+resolve@^1.12.0:
+  version "1.22.8"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
+  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^1.19.0:
  version "1.22.6"
  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.6.tgz#dd209739eca3aef739c626fea1b4f3c506195362"
@@ -6200,7 +6355,7 @@ yallist@^4.0.0:
  resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==

-yaml@^1.10.0, yaml@^1.10.2:
+yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2:
  version "1.10.2"
  resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==