Merge branch 'develop' into ENCOA-38/add-validity-date-for-discounts

ENCOA-15: Checkbox to select/unselect all for the Code List

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@beam-australia/react-env": "^3.1.1",
+    "@dnd-kit/core": "^6.1.0",
     "@headlessui/react": "^1.7.13",
     "@mdi/js": "^7.1.96",
     "@mdi/react": "^1.6.1",
@@ -97,4 +98,4 @@
     "tailwindcss": "^3.2.4",
     "types/": "paypal/react-paypal-js"
   }
-}
+}

src/components/Exercises/FillBlanks.tsx

@@ -128,7 +128,7 @@ export default function FillBlanks({
 
 	return (
 		<>
-			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
+			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				{(!!currentBlankId || isDrawerShowing) && (
 					<WordsDrawer
 						key={currentBlankId}

src/components/Exercises/InteractiveSpeaking.tsx

@@ -103,7 +103,6 @@ export default function InteractiveSpeaking({
 
 	useEffect(() => {
 		if (userSolutions.length > 0 && answers.length === 0) {
-			console.log(userSolutions);
 			const solutions = userSolutions as unknown as typeof answers;
 			setAnswers(solutions);
 
@@ -112,10 +111,6 @@ export default function InteractiveSpeaking({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [userSolutions, mediaBlob, answers]);
 
-	useEffect(() => {
-		console.log({answers});
-	}, [answers]);
-
 	useEffect(() => {
 		if (updateIndex) updateIndex(questionIndex);
 	}, [questionIndex, updateIndex]);

src/components/Exercises/MatchSentences.tsx

@@ -1,5 +1,5 @@
 import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
-import {MatchSentencesExercise} from "@/interfaces/exam";
+import {MatchSentenceExerciseOption, MatchSentenceExerciseSentence, MatchSentencesExercise} from "@/interfaces/exam";
 import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
 import Icon from "@mdi/react";
 import clsx from "clsx";
@@ -9,13 +9,74 @@ import {CommonProps} from ".";
 import Button from "../Low/Button";
 import Xarrow from "react-xarrows";
 import useExamStore from "@/stores/examStore";
+import {DndContext, DragEndEvent, useDraggable, useDroppable} from "@dnd-kit/core";
+
+function DroppableQuestionArea({question, answer}: {question: MatchSentenceExerciseSentence; answer?: string}) {
+	const {isOver, setNodeRef} = useDroppable({id: `droppable_sentence_${question.id}`});
+
+	return (
+		<div className="grid grid-cols-3 gap-4" ref={setNodeRef}>
+			<div className="flex items-center gap-3 cursor-pointer col-span-2">
+				<button
+					className={clsx(
+						"bg-mti-purple-ultralight text-mti-purple hover:text-white hover:bg-mti-purple w-8 h-8 rounded-full z-10",
+						"transition duration-300 ease-in-out",
+					)}>
+					{question.id}
+				</button>
+				<span>{question.sentence}</span>
+			</div>
+			<div
+				key={`answer_${question.id}_${answer}`}
+				className={clsx("w-48 h-10 border rounded-xl flex items-center justify-center", isOver && "border-mti-purple-light")}>
+				{answer && `Paragraph ${answer}`}
+			</div>
+		</div>
+	);
+}
+
+function DraggableOptionArea({option}: {option: MatchSentenceExerciseOption}) {
+	const {attributes, listeners, setNodeRef, transform} = useDraggable({
+		id: `draggable_option_${option.id}`,
+	});
+
+	const style = transform
+		? {
+				transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+				zIndex: 99,
+		  }
+		: undefined;
+
+	return (
+		<div className={clsx("flex items-center justify-start gap-6 cursor-pointer")} ref={setNodeRef} style={style} {...listeners} {...attributes}>
+			<button
+				id={`option_${option.id}`}
+				// onClick={() => selectOption(id)}
+				className={clsx(
+					"bg-mti-purple-ultralight text-mti-purple hover:text-white hover:bg-mti-purple px-3 py-2 rounded-full z-10",
+					"transition duration-300 ease-in-out",
+					option.id,
+				)}>
+				Paragraph {option.id}
+			</button>
+		</div>
+	);
+}
 
 export default function MatchSentences({id, options, type, prompt, sentences, userSolutions, onNext, onBack}: MatchSentencesExercise & CommonProps) {
-	const [selectedQuestion, setSelectedQuestion] = useState<string>();
 	const [answers, setAnswers] = useState<{question: string; option: string}[]>(userSolutions);
 
 	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
 
+	const handleDragEnd = (event: DragEndEvent) => {
+		if (event.over && event.over.id.toString().startsWith("droppable")) {
+			const optionID = event.active.id.toString().replace("draggable_option_", "");
+			const sentenceID = event.over.id.toString().replace("droppable_sentence_", "");
+
+			setAnswers((prev) => [...prev.filter((x) => x.question.toString() !== sentenceID), {question: sentenceID, option: optionID}]);
+		}
+	};
+
 	const calculateScore = () => {
 		const total = sentences.length;
 		const correct = answers.filter(
@@ -26,11 +87,9 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 		return {total, correct, missing};
 	};
 
-	const selectOption = (option: string) => {
-		if (!selectedQuestion) return;
-		setAnswers((prev) => [...prev.filter((x) => x.question !== selectedQuestion), {question: selectedQuestion, option}]);
-		setSelectedQuestion(undefined);
-	};
+	useEffect(() => {
+		console.log(answers);
+	}, [answers]);
 
 	useEffect(() => {
 		if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
@@ -39,7 +98,7 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 
 	return (
 		<>
-			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
+			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>
@@ -48,46 +107,28 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 						</Fragment>
 					))}
 				</span>
-				<div className="flex gap-8 w-full items-center justify-between bg-mti-gray-smoke rounded-xl px-24 py-6">
-					<div className="flex flex-col gap-4">
-						{sentences.map(({sentence, id}) => (
-							<div key={`question_${id}`} className="flex items-center justify-end gap-2 cursor-pointer">
-								<span>{sentence} </span>
-								<button
-									id={id}
-									onClick={() => setSelectedQuestion((prev) => (prev === id ? undefined : id))}
-									className={clsx(
-										"bg-mti-purple-ultralight text-mti-purple hover:text-white hover:bg-mti-purple w-8 h-8 rounded-full z-10",
-										"transition duration-300 ease-in-out",
-										selectedQuestion === id && "!text-white !bg-mti-purple",
-										id,
-									)}>
-									{id}
-								</button>
+
+				<DndContext onDragEnd={handleDragEnd}>
+					<div className="flex flex-col gap-8 w-full items-center justify-between bg-mti-gray-smoke rounded-xl px-24 py-6">
+						<div className="flex flex-col gap-4">
+							{sentences.map((question) => (
+								<DroppableQuestionArea
+									key={`question_${question.id}`}
+									question={question}
+									answer={answers.find((x) => x.question.toString() === question.id.toString())?.option}
+								/>
+							))}
+						</div>
+						<div className="flex flex-col gap-4">
+							<span>Drag one of these paragraphs into the slots above:</span>
+							<div className="flex gap-4 flex-wrap justify-center items-center max-w-lg">
+								{options.map((option) => (
+									<DraggableOptionArea key={`answer_${option.id}`} option={option} />
+								))}
 							</div>
-						))}
+						</div>
 					</div>
-					<div className="flex flex-col gap-4">
-						{options.map(({sentence, id}) => (
-							<div key={`answer_${id}`} className={clsx("flex items-center justify-start gap-2 cursor-pointer")}>
-								<button
-									id={id}
-									onClick={() => selectOption(id)}
-									className={clsx(
-										"bg-mti-purple-ultralight text-mti-purple hover:text-white hover:bg-mti-purple w-8 h-8 rounded-full z-10",
-										"transition duration-300 ease-in-out",
-										id,
-									)}>
-									{id}
-								</button>
-								<span>{sentence}</span>
-							</div>
-						))}
-					</div>
-					{answers.map((solution, index) => (
-						<Xarrow key={index} start={solution.question} end={solution.option} lineColor="#7872BF" showHead={false} />
-					))}
-				</div>
+				</DndContext>
 			</div>
 
 			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">

src/components/Exercises/MultipleChoice.tsx

@@ -7,6 +7,7 @@ import {CommonProps} from ".";
 import Button from "../Low/Button";
 
 function Question({
+	id,
 	variant,
 	prompt,
 	options,
@@ -15,7 +16,13 @@ function Question({
 }: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) {
 	return (
 		<div className="flex flex-col gap-10">
-			<span className="">{prompt}</span>
+			{isNaN(Number(id)) ? (
+				<span className="">{prompt}</span>
+			) : (
+				<span className="">
+					{id} - {prompt}
+				</span>
+			)}
 			<div className="flex flex-wrap gap-4 justify-between">
 				{variant === "image" &&
 					options.map((option) => (
@@ -117,7 +124,7 @@ export default function MultipleChoice({
 
 	return (
 		<>
-			<div className="flex flex-col gap-2 mt-4 h-fit mb-20 bg-mti-gray-smoke rounded-xl px-16 py-8">
+			<div className="flex flex-col gap-2 mt-4 h-fit w-full mb-20 bg-mti-gray-smoke rounded-xl px-16 py-8">
 				<span className="text-xl font-semibold">{prompt}</span>
 				{questionIndex < questions.length && (
 					<Question

src/components/Exercises/Speaking.tsx

@@ -81,7 +81,7 @@ export default function Speaking({id, title, text, video_url, type, prompts, use
 		onNext({
 			exercise: id,
 			solutions: storagePath ? [{id, solution: storagePath}] : [],
-			score: {correct: 100, total: 100, missing: 0},
+			score: {correct: 0, total: 100, missing: 0},
 			type,
 		});
 	};
@@ -94,7 +94,7 @@ export default function Speaking({id, title, text, video_url, type, prompts, use
 		onBack({
 			exercise: id,
 			solutions: storagePath ? [{id, solution: storagePath}] : [],
-			score: {correct: 100, total: 100, missing: 0},
+			score: {correct: 0, total: 100, missing: 0},
 			type,
 		});
 	};

src/components/Exercises/TrueFalse.tsx

@@ -40,7 +40,7 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
 
 	return (
 		<>
-			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
+			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>

src/components/Exercises/WriteBlanks.tsx

@@ -88,7 +88,7 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
 
 	return (
 		<>
-			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
+			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<span key={index}>

src/components/High/TicketSubmission.tsx

@@ -1,5 +1,6 @@
 import {Ticket, TicketType, TicketTypeLabel} from "@/interfaces/ticket";
 import {User} from "@/interfaces/user";
+import useExamStore from "@/stores/examStore";
 import axios from "axios";
 import {useState} from "react";
 import {toast} from "react-toastify";
@@ -20,6 +21,8 @@ export default function TicketSubmission({user, page, onClose}: Props) {
 	const [description, setDescription] = useState("");
 	const [isLoading, setIsLoading] = useState(false);
 
+	const examState = useExamStore((state) => state);
+
 	const submit = () => {
 		if (!type) return toast.error("Please choose a type!", {toastId: "missing-type"});
 		if (subject.trim() === "")
@@ -48,6 +51,18 @@ export default function TicketSubmission({user, page, onClose}: Props) {
 			type,
 			reportedFrom: page,
 			description,
+			examInformation:
+				page.includes("exam") || page.includes("exercises")
+					? {
+							exam: examState.exam?.id || "",
+							exams: examState.exams.map((x) => x.id),
+							exerciseIndex: examState.exerciseIndex,
+							moduleIndex: examState.moduleIndex,
+							partIndex: examState.partIndex,
+							questionIndex: examState.questionIndex,
+							selectedModules: examState.selectedModules,
+					  }
+					: undefined,
 		};
 
 		axios

src/components/Low/Button.tsx

@@ -62,8 +62,8 @@ export default function Button({
 			onClick={onClick}
 			className={clsx(
 				"py-4 px-6 rounded-full transition ease-in-out duration-300 disabled:cursor-not-allowed cursor-pointer",
-				className,
 				colorClassNames[color][variant],
+				className,
 			)}
 			disabled={disabled || isLoading}>
 			{!isLoading && children}

src/components/Low/Select.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import {ComponentProps, useEffect, useState} from "react";
-import ReactSelect from "react-select";
+import ReactSelect, {GroupBase, StylesConfig} from "react-select";
 
 interface Option {
 	[key: string]: any;
@@ -16,9 +16,11 @@ interface Props {
 	placeholder?: string;
 	onChange: (value: Option | null) => void;
 	isClearable?: boolean;
+	styles?: StylesConfig<Option, boolean, GroupBase<Option>>;
+	className?: string;
 }
 
-export default function Select({value, defaultValue, options, placeholder, disabled, onChange, isClearable}: Props) {
+export default function Select({value, defaultValue, options, placeholder, disabled, onChange, styles, isClearable, className}: Props) {
 	const [target, setTarget] = useState<HTMLElement>();
 
 	useEffect(() => {
@@ -27,33 +29,40 @@ export default function Select({value, defaultValue, options, placeholder, disab
 
 	return (
 		<ReactSelect
-			className={clsx(
-				"placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
-				disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
-			)}
+			className={
+				styles
+					? undefined
+					: clsx(
+							"placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
+							disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
+							className,
+					  )
+			}
 			options={options}
 			value={value}
-			onChange={onChange}
+			onChange={onChange as any}
 			placeholder={placeholder}
 			menuPortalTarget={target}
 			defaultValue={defaultValue}
-			styles={{
-				menuPortal: (base) => ({...base, zIndex: 9999}),
-				control: (styles) => ({
-					...styles,
-					paddingLeft: "4px",
-					border: "none",
-					outline: "none",
-					":focus": {
+			styles={
+				styles || {
+					menuPortal: (base) => ({...base, zIndex: 9999}),
+					control: (styles) => ({
+						...styles,
+						paddingLeft: "4px",
+						border: "none",
 						outline: "none",
-					},
-				}),
-				option: (styles, state) => ({
-					...styles,
-					backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
-					color: state.isFocused ? "black" : styles.color,
-				}),
-			}}
+						":focus": {
+							outline: "none",
+						},
+					}),
+					option: (styles, state) => ({
+						...styles,
+						backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+						color: state.isFocused ? "black" : styles.color,
+					}),
+				}
+			}
 			isDisabled={disabled}
 			isClearable={isClearable}
 		/>

src/components/Navbar.tsx

@@ -31,6 +31,8 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
 	const [disablePaymentPage, setDisablePaymentPage] = useState(true);
 	const [isTicketOpen, setIsTicketOpen] = useState(false);
 
+	const router = useRouter();
+
 	const disableNavigation = preventNavigation(navDisabled, focusMode);
 
 	const expirationDateColor = (date: Date) => {
@@ -59,7 +61,7 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
 	return (
 		<>
 			<Modal isOpen={isTicketOpen} onClose={() => setIsTicketOpen(false)} title="Submit a ticket">
-				<TicketSubmission user={user} page={window.location.href} onClose={() => setIsTicketOpen(false)} />
+				<TicketSubmission user={user} page={router.asPath} onClose={() => setIsTicketOpen(false)} />
 			</Modal>
 
 			{user && (
@@ -75,7 +77,7 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
 					<button
 						className={clsx(
 							"border-mti-purple-light tooltip tooltip-bottom flex h-8 w-8 flex-col items-center justify-center rounded-full border p-1",
-							"hover:bg-mti-purple-light transition duration-300 ease-in-out hover:text-white",
+							"hover:bg-mti-purple-light transition duration-300 ease-in-out hover:text-white z-20",
 						)}
 						data-tip="Submit a help/feedback ticket"
 						onClick={() => setIsTicketOpen(true)}>
@@ -84,7 +86,7 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
 
 					{showExpirationDate() && (
 						<Link
-							href={disablePaymentPage ? "/payment" : ""}
+							href={!!user.subscriptionExpirationDate && !disablePaymentPage ? "/payment" : ""}
 							data-tip="Expiry date"
 							className={clsx(
 								"flex w-fit cursor-pointer justify-center rounded-full border px-6 py-2 text-sm font-normal focus:outline-none",

src/components/PayPalPayment.tsx

@@ -55,7 +55,14 @@ export default function PayPalPayment({
         trackingId,
       })
       .then((response) => response.data)
-      .then((data) => data.id);
+      .then((data) => {
+        setIsLoading(false);
+        return data.id;
+      })
+      .catch((err) => {
+        setIsLoading(false);
+        return err;
+      });
   };
 
   const onApprove = async (data: OnApproveData, actions: OnApproveActions) => {
@@ -63,18 +70,26 @@ export default function PayPalPayment({
       throw new Error("trackingId is not set");
     }
 
-    const request = await axios.post<{ ok: boolean; reason?: string }>(
-      "/api/paypal/approve",
-      { id: data.orderID, duration, duration_unit, trackingId }
-    );
+    axios
+      .post<{ ok: boolean; reason?: string }>("/api/paypal/approve", {
+        id: data.orderID,
+        duration,
+        duration_unit,
+        trackingId,
+      })
+      .then((request) => {
+        if (request.status !== 200) {
+          toast.error("Something went wrong, please try again later");
+          return;
+        }
 
-    if (request.status !== 200) {
-      toast.error("Something went wrong, please try again later");
-      return;
-    }
-
-    toast.success("Your account has been credited more time!");
-    return onSuccess(duration, duration_unit);
+        toast.success("Your account has been credited more time!");
+        return onSuccess(duration, duration_unit);
+      })
+      .catch((err) => {
+        console.error(err);
+        toast.error("Something went wrong, please try again later");
+      });
   };
 
   const onError = async (data: Record<string, unknown>) => {
@@ -96,7 +111,6 @@ export default function PayPalPayment({
           currency,
           intent: "capture",
           commit: true,
-          vault: true,
         }}
       >
         <PayPalButtons

src/components/PaymobPayment.tsx

@@ -0,0 +1,77 @@
+import {PaymentIntention} from "@/interfaces/paymob";
+import {DurationUnit} from "@/interfaces/paypal";
+import {User} from "@/interfaces/user";
+import axios from "axios";
+import {useRouter} from "next/router";
+import {useState} from "react";
+import Button from "./Low/Button";
+import Input from "./Low/Input";
+import Modal from "./Modal";
+
+interface Props {
+	user: User;
+	currency: string;
+	price: number;
+	setIsPaymentLoading: (v: boolean) => void;
+	duration: number;
+	duration_unit: DurationUnit;
+	onSuccess: (duration: number, duration_unit: DurationUnit) => void;
+}
+
+export default function PaymobPayment({user, price, setIsPaymentLoading, currency, duration, duration_unit, onSuccess}: Props) {
+	const [isLoading, setIsLoading] = useState(false);
+
+	const router = useRouter();
+
+	const handleCardPayment = async () => {
+		try {
+			setIsPaymentLoading(true);
+
+			const paymentIntention: PaymentIntention = {
+				amount: price * 1000,
+				currency: "OMR",
+				items: [],
+				payment_methods: [],
+				customer: {
+					email: user.email,
+					first_name: user.name.split(" ")[0],
+					last_name: [...user.name.split(" ")].pop() || "N/A",
+					extras: {
+						re: user.id,
+					},
+				},
+				billing_data: {
+					apartment: "N/A",
+					building: "N/A",
+					country: user.demographicInformation?.country || "N/A",
+					email: user.email,
+					first_name: user.name.split(" ")[0],
+					last_name: [...user.name.split(" ")].pop() || "N/A",
+					floor: "N/A",
+					phone_number: user.demographicInformation?.phone || "N/A",
+					state: "N/A",
+					street: "N/A",
+				},
+				extras: {
+					userID: user.id,
+					duration,
+					duration_unit,
+				},
+			};
+
+			const response = await axios.post<{iframeURL: string}>(`/api/paymob`, paymentIntention);
+
+			router.push(response.data.iframeURL);
+		} catch (error) {
+			console.error("Error starting card payment process:", error);
+		}
+	};
+
+	return (
+		<>
+			<Button isLoading={isLoading} onClick={handleCardPayment}>
+				Select
+			</Button>
+		</>
+	);
+}

src/components/Sidebar.tsx

@@ -79,8 +79,6 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 
 	const {totalAssignedTickets} = useTicketsListener(userId);
 
-	useEffect(() => console.log(totalAssignedTickets), [totalAssignedTickets]);
-
 	const logout = async () => {
 		axios.post("/api/logout").finally(() => {
 			setTimeout(() => router.reload(), 500);
@@ -118,8 +116,12 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 						/>
 					</>
 				)}
-				<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
-				<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />
+				{(userType || "") !== 'agent' && (
+					<>
+						<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
+						<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />
+					</>
+				)}
 				{["admin", "developer", "agent", "corporate"].includes(userType || "") && (
 					<Nav
 						disabled={disableNavigation}
@@ -166,8 +168,12 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={true} />
 				<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized={true} />
 				<Nav disabled={disableNavigation} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" isMinimized={true} />
-				<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={true} />
-				<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={true} />
+				{(userType || "") !== 'agent' && (
+					<>
+						<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={true} />
+						<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={true} />
+					</>
+				)}
 				{userType !== "student" && (
 					<Nav disabled={disableNavigation} Icon={BsShieldFill} label="Settings" path={path} keyPath="/settings" isMinimized={true} />
 				)}

src/components/Solutions/FillBlanks.tsx

@@ -75,7 +75,7 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, text,
 
 	return (
 		<>
-			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
+			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>

src/components/Solutions/MatchSentences.tsx

@@ -1,4 +1,4 @@
-import {MatchSentencesExercise} from "@/interfaces/exam";
+import {MatchSentenceExerciseSentence, MatchSentencesExercise} from "@/interfaces/exam";
 import clsx from "clsx";
 import LineTo from "react-lineto";
 import {CommonProps} from ".";
@@ -9,6 +9,48 @@ import {Fragment} from "react";
 import Button from "../Low/Button";
 import Xarrow from "react-xarrows";
 
+function QuestionSolutionArea({
+	question,
+	userSolution,
+}: {
+	question: MatchSentenceExerciseSentence;
+	userSolution?: {question: string; option: string};
+}) {
+	return (
+		<div className="grid grid-cols-3 gap-4">
+			<div className="flex items-center gap-3 cursor-pointer col-span-2">
+				<button
+					className={clsx(
+						"text-white w-8 h-8 rounded-full z-10",
+						!userSolution
+							? "bg-mti-gray-davy"
+							: userSolution.option.toString() === question.solution.toString()
+							? "bg-mti-purple"
+							: "bg-mti-rose",
+						"transition duration-300 ease-in-out",
+					)}>
+					{question.id}
+				</button>
+				<span>{question.sentence}</span>
+			</div>
+			<div
+				className={clsx(
+					"w-56 h-10 border rounded-xl items-center justify-center flex gap-3 px-2",
+					!userSolution
+						? "border-mti-gray-davy"
+						: userSolution.option.toString() === question.solution.toString()
+						? "border-mti-purple"
+						: "border-mti-rose",
+				)}>
+				<span className="line-through">
+					{userSolution && userSolution?.option.toString() !== question.solution.toString() && `Paragraph ${userSolution.option}`}
+				</span>
+				<span className="font-semibold">Paragraph {question.solution}</span>
+			</div>
+		</div>
+	);
+}
+
 export default function MatchSentencesSolutions({
 	id,
 	type,
@@ -31,7 +73,7 @@ export default function MatchSentencesSolutions({
 
 	return (
 		<>
-			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
+			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>
@@ -40,57 +82,18 @@ export default function MatchSentencesSolutions({
 						</Fragment>
 					))}
 				</span>
-				<div className="flex gap-8 w-full items-center justify-between bg-mti-gray-smoke rounded-xl px-24 py-6">
+				<div className="flex flex-col gap-8 w-full items-center justify-between bg-mti-gray-smoke rounded-xl px-24 py-6">
 					<div className="flex flex-col gap-4">
-						{sentences.map(({sentence, id, solution}) => (
-							<div key={`question_${id}`} className="flex items-center justify-end gap-2 cursor-pointer">
-								<span>{sentence} </span>
-								<button
-									id={id}
-									className={clsx(
-										"w-8 h-8 rounded-full z-10 text-white",
-										"transition duration-300 ease-in-out",
-										!userSolutions.find((x) => x.question.toString() === id.toString()) && "!bg-mti-gray-davy",
-										userSolutions.find((x) => x.question.toString() === id.toString())?.option === solution && "bg-mti-purple",
-										userSolutions.find((x) => x.question.toString() === id.toString())?.option !== solution && "bg-mti-rose",
-									)}>
-									{id}
-								</button>
-							</div>
-						))}
-					</div>
-					<div className="flex flex-col gap-4">
-						{options.map(({sentence, id}) => (
-							<div key={`answer_${id}`} className={clsx("flex items-center justify-start gap-2 cursor-pointer")}>
-								<button
-									id={id}
-									className={clsx(
-										"bg-mti-purple-ultralight text-mti-purple hover:text-white hover:bg-mti-purple w-8 h-8 rounded-full z-10",
-										"transition duration-300 ease-in-out",
-									)}>
-									{id}
-								</button>
-								<span>{sentence}</span>
-							</div>
-						))}
-					</div>
-					{userSolutions &&
-						sentences.map((sentence, index) => (
-							<Xarrow
-								key={index}
-								start={sentence.id}
-								end={sentence.solution}
-								lineColor={
-									!userSolutions.find((x) => x.question === sentence.id)
-										? "#CC5454"
-										: userSolutions.find((x) => x.question === sentence.id)?.option === sentence.solution
-										? "#7872BF"
-										: "#CC5454"
-								}
-								showHead={false}
+						{sentences.map((question) => (
+							<QuestionSolutionArea
+								question={question}
+								userSolution={userSolutions.find((x) => x.question.toString() === question.id.toString())}
+								key={`question_${question.id}`}
 							/>
 						))}
+					</div>
 				</div>
+
 				<div className="flex gap-4 items-center">
 					<div className="flex gap-2 items-center">
 						<div className="w-4 h-4 rounded-full bg-mti-purple" /> Correct

src/components/Solutions/MultipleChoice.tsx

@@ -6,6 +6,7 @@ import {CommonProps} from ".";
 import Button from "../Low/Button";
 
 function Question({
+	id,
 	variant,
 	prompt,
 	solution,
@@ -26,7 +27,13 @@ function Question({
 
 	return (
 		<div className="flex flex-col items-center gap-4">
-			<span>{prompt}</span>
+			{isNaN(Number(id)) ? (
+				<span className="">{prompt}</span>
+			) : (
+				<span className="">
+					{id} - {prompt}
+				</span>
+			)}
 			<div className="grid grid-cols-4 gap-4 place-items-center">
 				{variant === "image" &&
 					options.map((option) => (

src/components/Solutions/Speaking.tsx

@@ -20,6 +20,9 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
 
 	useEffect(() => {
 		if (userSolutions && userSolutions.length > 0 && userSolutions[0].solution) {
+			const solution = userSolutions[0].solution;
+
+			if (solution.startsWith("https://")) return setSolutionURL(solution);
 			axios.post(`/api/speaking`, {path: userSolutions[0].solution}, {responseType: "arraybuffer"}).then(({data}) => {
 				const blob = new Blob([data], {type: "audio/wav"});
 				const url = URL.createObjectURL(blob);

src/components/Solutions/TrueFalse.tsx

@@ -38,7 +38,7 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
 
 	return (
 		<>
-			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
+			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>

src/components/Solutions/WriteBlanks.tsx

@@ -107,7 +107,7 @@ export default function WriteBlanksSolutions({
 
 	return (
 		<>
-			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
+			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>

src/components/UserCard.tsx

@@ -1,5 +1,5 @@
 import useStats from "@/hooks/useStats";
-import {EMPLOYMENT_STATUS, User} from "@/interfaces/user";
+import {CorporateInformation, CorporateUser, EMPLOYMENT_STATUS, User} from "@/interfaces/user";
 import {groupBySession, averageScore} from "@/utils/stats";
 import {RadioGroup} from "@headlessui/react";
 import axios from "axios";
@@ -8,7 +8,7 @@ import moment from "moment";
 import {Divider} from "primereact/divider";
 import {useEffect, useState} from "react";
 import ReactDatePicker from "react-datepicker";
-import {BsFileEarmarkText, BsPencil, BsStar} from "react-icons/bs";
+import {BsFileEarmarkText, BsPencil, BsPerson, BsPersonAdd, BsStar} from "react-icons/bs";
 import {toast} from "react-toastify";
 import Button from "./Low/Button";
 import Checkbox from "./Low/Checkbox";
@@ -19,6 +19,7 @@ import Select from "react-select";
 import useUsers from "@/hooks/useUsers";
 import {USER_TYPE_LABELS} from "@/resources/user";
 import {CURRENCIES} from "@/resources/paypal";
+import useCodes from "@/hooks/useCodes";
 
 const expirationDateColor = (date: Date) => {
 	const momentDate = moment(date);
@@ -37,6 +38,9 @@ interface Props {
 	onViewTeachers?: () => void;
 	onViewCorporate?: () => void;
 	disabled?: boolean;
+	disabledFields?: {
+		countryManager?: boolean;
+	};
 }
 
 const USER_STATUS_OPTIONS = [
@@ -59,9 +63,12 @@ const USER_TYPE_OPTIONS = Object.keys(USER_TYPE_LABELS).map((type) => ({
 	label: USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS],
 }));
 
-const CURRENCIES_OPTIONS = CURRENCIES.map(({label, currency}) => ({value: currency, label}));
+const CURRENCIES_OPTIONS = CURRENCIES.map(({label, currency}) => ({
+	value: currency,
+	label,
+}));
 
-const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers, onViewCorporate, disabled = false}: Props) => {
+const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers, onViewCorporate, disabled = false, disabledFields = {}}: Props) => {
 	const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
 	const [type, setType] = useState(user.type);
 	const [status, setStatus] = useState(user.status);
@@ -77,6 +84,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 			? user.agentInformation?.companyName
 			: undefined,
 	);
+	const [arabName, setArabName] = useState(user.type === "agent" ? user.agentInformation?.companyArabName : undefined);
 	const [commercialRegistration, setCommercialRegistration] = useState(
 		user.type === "agent" ? user.agentInformation?.commercialRegistration : undefined,
 	);
@@ -87,6 +95,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 	const [commissionValue, setCommission] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.commission : undefined);
 	const {stats} = useStats(user.id);
 	const {users} = useUsers();
+	const {codes} = useCodes(user.id);
 
 	useEffect(() => {
 		if (users && users.length > 0) {
@@ -114,8 +123,9 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 				agentInformation:
 					type === "agent"
 						? {
-								name: companyName,
+								companyName,
 								commercialRegistration,
+								arabName,
 						  }
 						: undefined,
 				corporateInformation:
@@ -144,38 +154,63 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 			});
 	};
 
+	const generalProfileItems = [
+		{
+			icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+			value: Object.keys(groupBySession(stats)).length,
+			label: "Exams",
+		},
+		{
+			icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+			value: stats.length,
+			label: "Modules",
+		},
+		{
+			icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+			value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
+			label: "Average Score",
+		},
+	];
+
+	const corporateProfileItems =
+		user.type === "corporate"
+			? [
+					{
+						icon: <BsPerson className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+						value: codes.length,
+						label: "Users Used",
+					},
+					{
+						icon: <BsPersonAdd className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+						value: user.corporateInformation.companyInformation.userAmount,
+						label: "Number of Users",
+					},
+			  ]
+			: [];
+
 	return (
 		<>
-			<ProfileSummary
-				user={user}
-				items={[
-					{
-						icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-						value: Object.keys(groupBySession(stats)).length,
-						label: "Exams",
-					},
-					{
-						icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-						value: stats.length,
-						label: "Exercises",
-					},
-					{
-						icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-						value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
-						label: "Average Score",
-					},
-				]}
-			/>
+			<ProfileSummary user={user} items={user.type === "corporate" ? corporateProfileItems : generalProfileItems} />
 
 			{user.type === "agent" && (
 				<>
-					<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
+					<div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full">
 						<Input
-							label="Corporate Name"
+							label="Company Name (Arabic)"
+							type="text"
+							name="arabName"
+							onChange={setArabName}
+							placeholder="Enter their company's name in arabic"
+							defaultValue={arabName}
+							required
+							disabled={disabled}
+						/>
+						<Input
+							label="Company Name (English)"
 							type="text"
 							name="companyName"
 							onChange={setCompanyName}
-							placeholder="Enter corporate name"
+							placeholder="Enter their company's name in english"
 							defaultValue={companyName}
 							required
 							disabled={disabled}
@@ -273,12 +308,17 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 								<Select
 									className={clsx(
 										"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
-										!["developer", "admin"].includes(loggedInUser.type) &&
+										(!["developer", "admin"].includes(loggedInUser.type) || disabledFields.countryManager) &&
 											"!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
 									)}
 									options={[
 										{value: "", label: "No referral"},
-										...users.filter((u) => u.type === "agent").map((x) => ({value: x.id, label: `${x.name} - ${x.email}`})),
+										...users
+											.filter((u) => u.type === "agent")
+											.map((x) => ({
+												value: x.id,
+												label: `${x.name} - ${x.email}`,
+											})),
 									]}
 									defaultValue={{
 										value: referralAgent,
@@ -304,7 +344,7 @@ 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) || disabledFields.countryManager}
 								/>
 							)}
 						</div>

src/constants/errors.ts

@@ -1,4 +1,4 @@
-export type Error = "E001" | "E002";
+export type Error = "E001" | "E002" | "E003";
 export interface ErrorMessage {
 	error: Error;
 	message: string;
@@ -7,4 +7,5 @@ export interface ErrorMessage {
 export const errorMessages: {[key in Error]: string} = {
 	E001: "Wrong password!",
 	E002: "Invalid e-mail",
+	E003: "E-mail already in use!",
 };

src/dashboards/Admin.tsx

@@ -16,6 +16,8 @@ import {
 	BsPencilSquare,
 	BsBank,
 	BsCurrencyDollar,
+	BsLayoutWtf,
+	BsLayoutSidebar,
 } from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
@@ -309,6 +311,12 @@ export default function AdminDashboard({user}: Props) {
 					value={pending.length}
 					color="rose"
 				/>
+				<IconCard
+					onClick={() => router.push("https://cms.encoach.com/admin")}
+					Icon={BsLayoutSidebar}
+					label="Content Management System (CMS)"
+					color="green"
+				/>
 			</section>
 
 			<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full justify-between">
@@ -323,6 +331,19 @@ export default function AdminDashboard({user}: Props) {
 							))}
 					</div>
 				</div>
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Latest teachers</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{users
+							.filter((x) => x.type === "teacher")
+							.sort((a, b) => {
+								return dateSorter(a, b, "desc", "registrationDate");
+							})
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Latest corporate</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
@@ -363,7 +384,7 @@ export default function AdminDashboard({user}: Props) {
 					</div>
 				</div>
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
-					<span className="p-4">Country Manager expiring in 1 month</span>
+					<span className="p-4">Teachers expiring in 1 month</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
 						{users
 							.filter(
@@ -378,6 +399,22 @@ export default function AdminDashboard({user}: Props) {
 							))}
 					</div>
 				</div>
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Country Manager expiring in 1 month</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{users
+							.filter(
+								(x) =>
+									x.type === "agent" &&
+									x.subscriptionExpirationDate &&
+									moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
+									moment().isBefore(moment(x.subscriptionExpirationDate)),
+							)
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Corporate expiring in 1 month</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
@@ -407,7 +444,7 @@ export default function AdminDashboard({user}: Props) {
 					</div>
 				</div>
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
-					<span className="p-4">Expired Country Manager</span>
+					<span className="p-4">Expired Teachers</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
 						{users
 							.filter(
@@ -418,6 +455,18 @@ export default function AdminDashboard({user}: Props) {
 							))}
 					</div>
 				</div>
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Expired Country Manager</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{users
+							.filter(
+								(x) => x.type === "agent" && x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)),
+							)
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Expired Corporate</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">

src/dashboards/AssignmentCard.tsx

@@ -1,126 +1,105 @@
 import ProgressBar from "@/components/Low/ProgressBar";
 import useUsers from "@/hooks/useUsers";
-import { Module } from "@/interfaces";
-import { Assignment } from "@/interfaces/results";
-import { calculateBandScore } from "@/utils/score";
+import {Module} from "@/interfaces";
+import {Assignment} from "@/interfaces/results";
+import {calculateBandScore} from "@/utils/score";
 import clsx from "clsx";
 import moment from "moment";
-import {
-  BsBook,
-  BsClipboard,
-  BsHeadphones,
-  BsMegaphone,
-  BsPen,
-} from "react-icons/bs";
-import { usePDFDownload } from "@/hooks/usePDFDownload";
-import { useAssignmentArchive } from "@/hooks/useAssignmentArchive";
-import { uniqBy } from "lodash";
+import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
+import {usePDFDownload} from "@/hooks/usePDFDownload";
+import {useAssignmentArchive} from "@/hooks/useAssignmentArchive";
+import {uniqBy} from "lodash";
+import {useAssignmentUnarchive} from "@/hooks/useAssignmentUnarchive";
 
 interface Props {
-  onClick?: () => void;
-  allowDownload?: boolean;
-  reload?: Function;
-  allowArchive?: boolean;
+	onClick?: () => void;
+	allowDownload?: boolean;
+	reload?: Function;
+	allowArchive?: boolean;
+	allowUnarchive?: boolean;
 }
 
 export default function AssignmentCard({
-  id,
-  name,
-  assigner,
-  startDate,
-  endDate,
-  assignees,
-  results,
-  exams,
-  archived,
-  onClick,
-  allowDownload,
-  reload,
-  allowArchive,
+	id,
+	name,
+	assigner,
+	startDate,
+	endDate,
+	assignees,
+	results,
+	exams,
+	archived,
+	onClick,
+	allowDownload,
+	reload,
+	allowArchive,
+	allowUnarchive,
 }: Assignment & Props) {
-  const renderPdfIcon = usePDFDownload("assignments");
-  const renderArchiveIcon = useAssignmentArchive(id, reload);
+	const renderPdfIcon = usePDFDownload("assignments");
+	const renderArchiveIcon = useAssignmentArchive(id, reload);
+	const renderUnarchiveIcon = useAssignmentUnarchive(id, reload);
 
-  const calculateAverageModuleScore = (module: Module) => {
-    const resultModuleBandScores = results.map((r) => {
-      const moduleStats = r.stats.filter((s) => s.module === module);
+	const calculateAverageModuleScore = (module: Module) => {
+		const resultModuleBandScores = results.map((r) => {
+			const moduleStats = r.stats.filter((s) => s.module === module);
 
-      const correct = moduleStats.reduce(
-        (acc, curr) => acc + curr.score.correct,
-        0
-      );
-      const total = moduleStats.reduce(
-        (acc, curr) => acc + curr.score.total,
-        0
-      );
-      return calculateBandScore(correct, total, module, r.type);
-    });
+			const correct = moduleStats.reduce((acc, curr) => acc + curr.score.correct, 0);
+			const total = moduleStats.reduce((acc, curr) => acc + curr.score.total, 0);
+			return calculateBandScore(correct, total, module, r.type);
+		});
 
-    return resultModuleBandScores.length === 0
-      ? -1
-      : resultModuleBandScores.reduce((acc, curr) => acc + curr, 0) /
-          results.length;
-  };
+		return resultModuleBandScores.length === 0 ? -1 : resultModuleBandScores.reduce((acc, curr) => acc + curr, 0) / results.length;
+	};
 
-  return (
-    <div
-      onClick={onClick}
-      className="border-mti-gray-platinum flex h-fit w-[350px] cursor-pointer flex-col gap-6 rounded-xl border bg-white p-4 transition duration-300 ease-in-out hover:drop-shadow"
-    >
-      <div className="flex flex-col gap-3">
-        <div className="flex flex-row justify-between">
-          <h3 className="text-xl font-semibold">{name}</h3>
-          <div className="flex gap-2">
-            {allowDownload &&
-              renderPdfIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")}
-            {allowArchive &&
-              !archived &&
-              renderArchiveIcon("text-mti-gray-dim", "text-mti-gray-dim")}
-          </div>
-        </div>
-        <ProgressBar
-          color={results.length / assignees.length < 0.5 ? "red" : "purple"}
-          percentage={(results.length / assignees.length) * 100}
-          label={`${results.length}/${assignees.length}`}
-          className="h-5"
-          textClassName={
-            results.length / assignees.length < 0.5
-              ? "!text-mti-gray-dim font-light"
-              : "text-white"
-          }
-        />
-      </div>
-      <span className="flex justify-between gap-1">
-        <span>{moment(startDate).format("DD/MM/YY, HH:mm")}</span>
-        <span>-</span>
-        <span>{moment(endDate).format("DD/MM/YY, HH:mm")}</span>
-      </span>
-      <div className="-md:mt-2 grid w-full grid-cols-4 place-items-start gap-2">
-        {uniqBy(exams, (x) => x.module).map(({ module }) => (
-          <div
-            key={module}
-            className={clsx(
-              "-md:px-4 flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
-              module === "reading" && "bg-ielts-reading",
-              module === "listening" && "bg-ielts-listening",
-              module === "writing" && "bg-ielts-writing",
-              module === "speaking" && "bg-ielts-speaking",
-              module === "level" && "bg-ielts-level"
-            )}
-          >
-            {module === "reading" && <BsBook className="h-4 w-4" />}
-            {module === "listening" && <BsHeadphones className="h-4 w-4" />}
-            {module === "writing" && <BsPen className="h-4 w-4" />}
-            {module === "speaking" && <BsMegaphone className="h-4 w-4" />}
-            {module === "level" && <BsClipboard className="h-4 w-4" />}
-            {calculateAverageModuleScore(module) > -1 && (
-              <span className="text-sm">
-                {calculateAverageModuleScore(module).toFixed(1)}
-              </span>
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
+	return (
+		<div
+			onClick={onClick}
+			className="border-mti-gray-platinum flex h-fit w-[350px] cursor-pointer flex-col gap-6 rounded-xl border bg-white p-4 transition duration-300 ease-in-out hover:drop-shadow">
+			<div className="flex flex-col gap-3">
+				<div className="flex flex-row justify-between">
+					<h3 className="text-xl font-semibold">{name}</h3>
+					<div className="flex gap-2">
+						{allowDownload && renderPdfIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")}
+						{allowArchive && !archived && renderArchiveIcon("text-mti-gray-dim", "text-mti-gray-dim")}
+						{allowUnarchive && archived && renderUnarchiveIcon("text-mti-gray-dim", "text-mti-gray-dim")}
+					</div>
+				</div>
+				<ProgressBar
+					color={results.length / assignees.length < 0.5 ? "red" : "purple"}
+					percentage={(results.length / assignees.length) * 100}
+					label={`${results.length}/${assignees.length}`}
+					className="h-5"
+					textClassName={results.length / assignees.length < 0.5 ? "!text-mti-gray-dim font-light" : "text-white"}
+				/>
+			</div>
+			<span className="flex justify-between gap-1">
+				<span>{moment(startDate).format("DD/MM/YY, HH:mm")}</span>
+				<span>-</span>
+				<span>{moment(endDate).format("DD/MM/YY, HH:mm")}</span>
+			</span>
+			<div className="-md:mt-2 grid w-full grid-cols-4 place-items-start gap-2">
+				{uniqBy(exams, (x) => x.module).map(({module}) => (
+					<div
+						key={module}
+						className={clsx(
+							"-md:px-4 flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
+							module === "reading" && "bg-ielts-reading",
+							module === "listening" && "bg-ielts-listening",
+							module === "writing" && "bg-ielts-writing",
+							module === "speaking" && "bg-ielts-speaking",
+							module === "level" && "bg-ielts-level",
+						)}>
+						{module === "reading" && <BsBook className="h-4 w-4" />}
+						{module === "listening" && <BsHeadphones className="h-4 w-4" />}
+						{module === "writing" && <BsPen className="h-4 w-4" />}
+						{module === "speaking" && <BsMegaphone className="h-4 w-4" />}
+						{module === "level" && <BsClipboard className="h-4 w-4" />}
+						{calculateAverageModuleScore(module) > -1 && (
+							<span className="text-sm">{calculateAverageModuleScore(module).toFixed(1)}</span>
+						)}
+					</div>
+				))}
+			</div>
+		</div>
+	);
 }

src/dashboards/IconCard.tsx

@@ -4,8 +4,8 @@ import {IconType} from "react-icons";
 interface Props {
 	Icon: IconType;
 	label: string;
-	value: string | number;
-	color: "purple" | "rose" | "red";
+	value?: string | number;
+	color: "purple" | "rose" | "red" | "green";
 	tooltip?: string;
 	onClick?: () => void;
 }
@@ -15,6 +15,7 @@ export default function IconCard({Icon, label, value, color, tooltip, onClick}:
 		purple: "text-mti-purple-light",
 		red: "text-mti-red-light",
 		rose: "text-mti-rose-light",
+		green: "text-mti-green-light",
 	};
 
 	return (

src/dashboards/Student.tsx

@@ -13,7 +13,7 @@ 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 {countExamModules, countFullExams, MODULE_ARRAY, sortByModule, sortByModuleName} from "@/utils/moduleUtils";
 import {getLevelLabel, getLevelScore} from "@/utils/score";
 import {averageScore, groupBySession} from "@/utils/stats";
 import {CreateOrderActions, CreateOrderData, OnApproveActions, OnApproveData, OrderResponseBody} from "@paypal/paypal-js";
@@ -35,7 +35,7 @@ interface Props {
 export default function StudentDashboard({user}: Props) {
 	const [corporateUserToShow, setCorporateUserToShow] = useState<CorporateUser>();
 
-	const {stats} = useStats(user.id);
+	const {stats} = useStats(user.id, !user?.id);
 	const {users} = useUsers();
 	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({assignees: user?.id});
 	const {invites, isLoading: isInvitesLoading, reload: reloadInvites} = useInvites({to: user.id});
@@ -84,16 +84,16 @@ export default function StudentDashboard({user}: Props) {
 				user={user}
 				items={[
 					{
-						icon: <BsFileEarmarkText className="text-mti-red-light h-6 w-6 md:h-8 md:w-8" />,
-						value: Object.keys(groupBySession(stats)).length,
+						icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+						value: countFullExams(stats),
 						label: "Exams",
 						tooltip: "Number of all conducted completed exams",
 					},
 					{
-						icon: <BsPencil className="text-mti-red-light h-6 w-6 md:h-8 md:w-8" />,
-						value: stats.length,
-						label: "Exercises",
-						tooltip: "Number of all conducted exercises including Level Test",
+						icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+						value: countExamModules(stats),
+						label: "Modules",
+						tooltip: "Number of all exam modules performed including Level Test",
 					},
 					{
 						icon: <BsStar className="text-mti-red-light h-6 w-6 md:h-8 md:w-8" />,

src/dashboards/Teacher.tsx

@@ -151,8 +151,10 @@ export default function TeacherDashboard({user}: Props) {
 	};
 
 	const AssignmentsPage = () => {
-		const activeFilter = (a: Assignment) => moment(a.endDate).isAfter(moment()) && moment(a.startDate).isBefore(moment()) && a.assignees.length > a.results.length;
+		const activeFilter = (a: Assignment) =>
+			moment(a.endDate).isAfter(moment()) && moment(a.startDate).isBefore(moment()) && a.assignees.length > a.results.length;
 		const pastFilter = (a: Assignment) => (moment(a.endDate).isBefore(moment()) || a.assignees.length === a.results.length) && !a.archived;
+		const archivedFilter = (a: Assignment) => a.archived;
 		const futureFilter = (a: Assignment) => moment(a.startDate).isAfter(moment());
 
 		return (
@@ -234,7 +236,29 @@ 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 reload={reloadAssignments} allowArchive/>
+							<AssignmentCard
+								{...a}
+								onClick={() => setSelectedAssignment(a)}
+								key={a.id}
+								allowDownload
+								reload={reloadAssignments}
+								allowArchive
+							/>
+						))}
+					</div>
+				</section>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Archived Assignments ({assignments.filter(archivedFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						{assignments.filter(archivedFilter).map((a) => (
+							<AssignmentCard
+								{...a}
+								onClick={() => setSelectedAssignment(a)}
+								key={a.id}
+								allowDownload
+								reload={reloadAssignments}
+								allowUnarchive
+							/>
 						))}
 					</div>
 				</section>

src/email/templates/assignment.handlebars

@@ -19,7 +19,7 @@
   </p>
   <br />
   <p>Don't forget to do it before its end date!</p>
-  <p>Click <b><a href="https://platform.encoach.com">here</a></b> to open the EnCoach Platform!</p>
+  <p>Click <b><a href="https://{{environment}}.encoach.com">here</a></b> to open the EnCoach Platform!</p>
   <br />
   <p>Thanks,</p>
   <p>Your EnCoach team</p>

src/email/templates/main.handlebars

@@ -11,7 +11,8 @@
   <img src="/logo_title.png" class="w-48 h-48 self-center" />
   <div>
     <span>Hello future {{type}} of <b>EnCoach</b>,</span><br />
-    <span>You have been invited to register at <a href="https://platform.encoach.com/register?code={{code}}">EnCoach</a>
+    <span>You have been invited to register at <a
+        href="https://{{environment}}.encoach.com/register?code={{code}}">EnCoach</a>
       to
       become a
       {{type}}!</span><br />
@@ -19,7 +20,7 @@
   </div>
   <br />
   <br />
-  <a href="https://platform.encoach.com/register?code={{code}}"></a>
+  <a href="https://{{environment}}.encoach.com/register?code={{code}}"></a>
   <span class="self-center p-4 px-12 text-lg text-[#]" style="background-color: #D5D9F0; color: #353338">
     <b>{{code}}</b>
   </span>

src/email/templates/verification.handlebars

@@ -10,7 +10,8 @@
   <p>Hello {{name}},</p>
   <br />
   <p>Follow this link to verify your email address.</p>
-  <a href="https://platform.encoach.com/action?mode=signIn&continueUrl={{email}}&oobCode={{code}}">Verify account</a>
+  <a href="https://{{environment}}.encoach.com/action?mode=signIn&continueUrl={{email}}&oobCode={{code}}">Verify
+    account</a>
   <br />
   <br />
   <p>If you didn’t ask to verify this address, you can ignore this email.</p>

src/email/templates/verification.handlebars.json

@@ -1,5 +1,6 @@
 {
   "name": "Tiago Ribeiro",
   "email": "tiago.ribeiro@ecrop.dev",
-  "code": "123"
+  "code": "123",
+  "environment": "platform"
 }

src/exams/Finish.tsx

@@ -12,6 +12,7 @@ import {Fragment, useEffect, useState} from "react";
 import {BsArrowCounterclockwise, BsBook, BsClipboard, BsEyeFill, BsHeadphones, BsMegaphone, BsPen, BsShareFill} from "react-icons/bs";
 import {LevelScore} from "@/constants/ielts";
 import {getLevelScore} from "@/utils/score";
+import {capitalize} from "lodash";
 
 interface Score {
 	module: Module;
@@ -25,7 +26,7 @@ interface Props {
 	modules: Module[];
 	scores: Score[];
 	isLoading: boolean;
-	onViewResults: () => void;
+	onViewResults: (moduleIndex?: number) => void;
 }
 
 export default function Finish({user, scores, modules, isLoading, onViewResults}: Props) {
@@ -182,33 +183,37 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
 									{showLevel(bandScore)}
 								</div>
 							</div>
-							<div className="flex flex-col gap-5">
-								<div className="flex gap-2">
-									<div className="bg-mti-red-light mt-1 h-3 w-3 rounded-full" />
-									<div className="flex flex-col">
-										<span className="text-mti-red-light">
-											{(((selectedScore.total - selectedScore.missing) / selectedScore.total) * 100).toFixed(0)}%
-										</span>
-										<span className="text-lg">Completion</span>
+							{!["writing", "speaking"].includes(selectedModule) ? (
+								<div className="flex flex-col gap-5 w-28">
+									<div className="flex gap-2">
+										<div className="bg-mti-red-light mt-1 h-3 w-3 rounded-full" />
+										<div className="flex flex-col">
+											<span className="text-mti-red-light">
+												{(((selectedScore.total - selectedScore.missing) / selectedScore.total) * 100).toFixed(0)}%
+											</span>
+											<span className="text-lg">Completion</span>
+										</div>
+									</div>
+									<div className="flex gap-2">
+										<div className="bg-mti-purple-light mt-1 h-3 w-3 rounded-full" />
+										<div className="flex flex-col">
+											<span className="text-mti-purple-light">{selectedScore.correct.toString().padStart(2, "0")}</span>
+											<span className="text-lg">Correct</span>
+										</div>
+									</div>
+									<div className="flex gap-2">
+										<div className="bg-mti-rose-light mt-1 h-3 w-3 rounded-full" />
+										<div className="flex flex-col">
+											<span className="text-mti-rose-light">
+												{(selectedScore.total - selectedScore.correct).toString().padStart(2, "0")}
+											</span>
+											<span className="text-lg">Wrong</span>
+										</div>
 									</div>
 								</div>
-								<div className="flex gap-2">
-									<div className="bg-mti-purple-light mt-1 h-3 w-3 rounded-full" />
-									<div className="flex flex-col">
-										<span className="text-mti-purple-light">{selectedScore.correct.toString().padStart(2, "0")}</span>
-										<span className="text-lg">Correct</span>
-									</div>
-								</div>
-								<div className="flex gap-2">
-									<div className="bg-mti-rose-light mt-1 h-3 w-3 rounded-full" />
-									<div className="flex flex-col">
-										<span className="text-mti-rose-light">
-											{(selectedScore.total - selectedScore.correct).toString().padStart(2, "0")}
-										</span>
-										<span className="text-lg">Wrong</span>
-									</div>
-								</div>
-							</div>
+							) : (
+								<div className="w-28 h-full" />
+							)}
 						</div>
 					</div>
 				)}
@@ -220,6 +225,7 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
 						<div className="flex w-fit cursor-pointer flex-col items-center gap-1">
 							<button
 								onClick={() => window.location.reload()}
+								disabled={user.type === "admin"}
 								className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out">
 								<BsArrowCounterclockwise className="h-7 w-7 text-white" />
 							</button>
@@ -227,11 +233,19 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
 						</div>
 						<div className="flex w-fit cursor-pointer flex-col items-center gap-1">
 							<button
-								onClick={onViewResults}
+								onClick={() => onViewResults()}
 								className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out">
 								<BsEyeFill className="h-7 w-7 text-white" />
 							</button>
-							<span>Review Answers</span>
+							<span>Review All</span>
+						</div>
+						<div className="flex w-fit cursor-pointer flex-col items-center gap-1">
+							<button
+								onClick={() => onViewResults(modules.findIndex((x) => x === selectedModule))}
+								className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out">
+								<BsEyeFill className="h-7 w-7 text-white" />
+							</button>
+							<span>Review {capitalize(selectedModule)}</span>
 						</div>
 					</div>
 

src/exams/Level.tsx

@@ -38,7 +38,7 @@ export default function Level({exam, showSolutions = false, onFinish}: Props) {
 
 	const nextExercise = (solution?: UserSolution) => {
 		if (solution) {
-			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), solution]);
+			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "level", exam: exam.id}]);
 		}
 		setQuestionIndex((prev) => prev + currentQuestionIndex);
 
@@ -52,17 +52,15 @@ export default function Level({exam, showSolutions = false, onFinish}: Props) {
 		setHasExamEnded(false);
 
 		if (solution) {
-			onFinish(
-				[...userSolutions.filter((x) => x.exercise !== solution.exercise), solution].map((x) => ({...x, module: "level", exam: exam.id})),
-			);
+			onFinish([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "level", exam: exam.id}]);
 		} else {
-			onFinish(userSolutions.map((x) => ({...x, module: "level", exam: exam.id})));
+			onFinish(userSolutions);
 		}
 	};
 
 	const previousExercise = (solution?: UserSolution) => {
 		if (solution) {
-			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), solution]);
+			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "level", exam: exam.id}]);
 		}
 
 		if (exerciseIndex > 0) {

src/exams/Listening.tsx

@@ -1,4 +1,4 @@
-import {ListeningExam, UserSolution} from "@/interfaces/exam";
+import {ListeningExam, MultipleChoiceExercise, UserSolution} from "@/interfaces/exam";
 import {useEffect, useState} from "react";
 import {renderExercise} from "@/components/Exercises";
 import {renderSolution} from "@/components/Solutions";
@@ -23,11 +23,13 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 	const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
 	const [timesListened, setTimesListened] = useState(0);
 	const [showBlankModal, setShowBlankModal] = useState(false);
+	const [multipleChoicesDone, setMultipleChoicesDone] = useState<{id: string; amount: number}[]>([]);
 
 	const {userSolutions, setUserSolutions} = useExamStore((state) => state);
 	const {hasExamEnded, setHasExamEnded} = useExamStore((state) => state);
 	const {partIndex, setPartIndex} = useExamStore((state) => state);
 	const {exerciseIndex, setExerciseIndex} = useExamStore((state) => state);
+	const [storeQuestionIndex, setStoreQuestionIndex] = useExamStore((state) => [state.questionIndex, state.setQuestionIndex]);
 
 	const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));
 
@@ -35,9 +37,26 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 		if (showSolutions) return setExerciseIndex(-1);
 	}, [setExerciseIndex, showSolutions]);
 
-	// useEffect(() => {
-	// 	if (exam.variant !== "partial") setPartIndex(-1);
-	// }, [exam.variant, setPartIndex]);
+	useEffect(() => {
+		if (partIndex === -1 && exam.variant === "partial") {
+			setPartIndex(0);
+		}
+	}, [partIndex, exam, setPartIndex]);
+
+	useEffect(() => {
+		const previousParts = exam.parts.filter((_, index) => index < partIndex);
+		let previousMultipleChoice = previousParts.flatMap((x) => x.exercises).filter((x) => x.type === "multipleChoice") as MultipleChoiceExercise[];
+
+		if (partIndex > -1 && exerciseIndex > -1) {
+			const previousPartExercises = exam.parts[partIndex].exercises.filter((_, index) => index < exerciseIndex);
+			const partMultipleChoice = previousPartExercises.filter((x) => x.type === "multipleChoice") as MultipleChoiceExercise[];
+
+			previousMultipleChoice = [...previousMultipleChoice, ...partMultipleChoice];
+		}
+
+		setMultipleChoicesDone(previousMultipleChoice.map((x) => ({id: x.id, amount: x.questions.length - 1})));
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
 
 	useEffect(() => {
 		if (hasExamEnded && exerciseIndex === -1) {
@@ -55,15 +74,19 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 			return;
 		}
 
-		onFinish(userSolutions.map((x) => ({...x, module: "listening", exam: exam.id})));
+		onFinish(userSolutions);
 	};
 
 	const nextExercise = (solution?: UserSolution) => {
 		scrollToTop();
 		if (solution) {
-			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), solution]);
+			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "listening", exam: exam.id}]);
 		}
-		setQuestionIndex((prev) => prev + currentQuestionIndex);
+		if (storeQuestionIndex > 0) {
+			const exercise = getExercise();
+			setMultipleChoicesDone((prev) => [...prev.filter((x) => x.id !== exercise.id), {id: exercise.id, amount: storeQuestionIndex}]);
+		}
+		setStoreQuestionIndex(0);
 
 		if (exerciseIndex + 1 < exam.parts[partIndex].exercises.length && !hasExamEnded) {
 			setExerciseIndex(exerciseIndex + 1);
@@ -72,6 +95,7 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 
 		if (partIndex + 1 < exam.parts.length && !hasExamEnded) {
 			setPartIndex(partIndex + 1);
+			setTimesListened(0);
 			setExerciseIndex(showSolutions ? 0 : -1);
 			return;
 		}
@@ -91,19 +115,18 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 		setHasExamEnded(false);
 
 		if (solution) {
-			onFinish(
-				[...userSolutions.filter((x) => x.exercise !== solution.exercise), solution].map((x) => ({...x, module: "listening", exam: exam.id})),
-			);
+			onFinish([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "listening", exam: exam.id}]);
 		} else {
-			onFinish(userSolutions.map((x) => ({...x, module: "listening", exam: exam.id})));
+			onFinish(userSolutions);
 		}
 	};
 
 	const previousExercise = (solution?: UserSolution) => {
 		scrollToTop();
 		if (solution) {
-			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), solution]);
+			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "listening", exam: exam.id}]);
 		}
+		setStoreQuestionIndex(0);
 
 		setExerciseIndex(exerciseIndex - 1);
 	};
@@ -116,6 +139,31 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 		};
 	};
 
+	useEffect(() => {
+		if (partIndex > -1 && exerciseIndex > -1) {
+			const exercise = getExercise();
+			setMultipleChoicesDone((prev) => prev.filter((x) => x.id !== exercise.id));
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [exerciseIndex, partIndex]);
+
+	const calculateExerciseIndex = () => {
+		if (partIndex === -1) return 0;
+		if (partIndex === 0)
+			return (
+				(exerciseIndex === -1 ? 0 : exerciseIndex + 1) + storeQuestionIndex + multipleChoicesDone.reduce((acc, curr) => acc + curr.amount, 0)
+			);
+
+		const exercisesPerPart = exam.parts.map((x) => x.exercises.length);
+		const exercisesDone = exercisesPerPart.filter((_, index) => index < partIndex).reduce((acc, curr) => curr + acc, 0);
+		return (
+			exercisesDone +
+			(exerciseIndex === -1 ? 0 : exerciseIndex + 1) +
+			storeQuestionIndex +
+			multipleChoicesDone.reduce((acc, curr) => acc + curr.amount, 0)
+		);
+	};
+
 	const renderAudioInstructionsPlayer = () => (
 		<div className="flex flex-col gap-8 w-full bg-mti-gray-seasalt rounded-xl py-8 px-16">
 			<div className="flex flex-col w-full gap-2">
@@ -155,18 +203,7 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 			<BlankQuestionsModal isOpen={showBlankModal} onClose={confirmFinishModule} />
 			<div className="flex flex-col h-full w-full gap-8 justify-between">
 				<ModuleTitle
-					exerciseIndex={
-						partIndex === -1
-							? 0
-							: (exam.parts
-									.flatMap((x) => x.exercises)
-									.findIndex(
-										(x) => x.id === exam.parts[partIndex].exercises[exerciseIndex === -1 ? exerciseIndex + 1 : exerciseIndex]?.id,
-									) || 0) +
-							  (exerciseIndex === -1 ? 0 : 1) +
-							  questionIndex +
-							  currentQuestionIndex
-					}
+					exerciseIndex={calculateExerciseIndex()}
 					minTimer={exam.minTimer}
 					module="listening"
 					totalExercises={countExercises(exam.parts.flatMap((x) => x.exercises))}

src/exams/Reading.tsx

@@ -1,4 +1,4 @@
-import {ReadingExam, UserSolution} from "@/interfaces/exam";
+import {MultipleChoiceExercise, ReadingExam, ReadingPart, UserSolution} from "@/interfaces/exam";
 import {Fragment, useEffect, useState} from "react";
 import Icon from "@mdi/react";
 import {mdiArrowRight, mdiNotebook} from "@mdi/js";
@@ -10,7 +10,7 @@ import {renderExercise} from "@/components/Exercises";
 import {renderSolution} from "@/components/Solutions";
 import {Panel} from "primereact/panel";
 import {Steps} from "primereact/steps";
-import {BsAlarm, BsBook, BsClock, BsStopwatch} from "react-icons/bs";
+import {BsAlarm, BsBook, BsChevronDown, BsChevronUp, BsClock, BsStopwatch} from "react-icons/bs";
 import ProgressBar from "@/components/Low/ProgressBar";
 import ModuleTitle from "@/components/Medium/ModuleTitle";
 import {Divider} from "primereact/divider";
@@ -26,6 +26,8 @@ interface Props {
 	onFinish: (userSolutions: UserSolution[]) => void;
 }
 
+const numberToLetter = (number: number) => (number + 9).toString(36).toUpperCase();
+
 function TextModal({isOpen, title, content, onClose}: {isOpen: boolean; title: string; content: string; onClose: () => void}) {
 	return (
 		<Transition appear show={isOpen} as={Fragment}>
@@ -80,17 +82,43 @@ function TextModal({isOpen, title, content, onClose}: {isOpen: boolean; title: s
 	);
 }
 
+function TextComponent({part, exerciseType}: {part: ReadingPart; exerciseType: string}) {
+	return (
+		<div className="flex flex-col gap-2 w-full">
+			<h3 className="text-xl font-semibold">{part.text.title}</h3>
+			<div className="border border-mti-gray-dim w-full rounded-full opacity-10" />
+			{part.text.content
+				.split(/\n|(\\n)/g)
+				.filter((x) => x && x.length > 0)
+				.map((line, index) => (
+					<Fragment key={index}>
+						{exerciseType === "matchSentences" && (
+							<div className="flex gap-3 border border-transparent hover:border-mti-purple-light rounded-lg transition ease-in-out duration-300 p-2 px-3 cursor-pointer">
+								<span className="font-bold text-mti-purple-dark">{numberToLetter(index + 1)}</span>
+								<p>{line}</p>
+							</div>
+						)}
+						{exerciseType !== "matchSentences" && <p key={index}>{line}</p>}
+					</Fragment>
+				))}
+		</div>
+	);
+}
+
 export default function Reading({exam, showSolutions = false, onFinish}: Props) {
 	const [questionIndex, setQuestionIndex] = useState(0);
 	const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
 	const [showTextModal, setShowTextModal] = useState(false);
 	const [showBlankModal, setShowBlankModal] = useState(false);
+	const [multipleChoicesDone, setMultipleChoicesDone] = useState<{id: string; amount: number}[]>([]);
+	const [isTextMinimized, setIsTextMinimzed] = useState(false);
+	const [exerciseType, setExerciseType] = useState("");
 
 	const {userSolutions, setUserSolutions} = useExamStore((state) => state);
 	const {hasExamEnded, setHasExamEnded} = useExamStore((state) => state);
 	const {partIndex, setPartIndex} = useExamStore((state) => state);
 	const {exerciseIndex, setExerciseIndex} = useExamStore((state) => state);
-	const setStoreQuestionIndex = useExamStore((state) => state.setQuestionIndex);
+	const [storeQuestionIndex, setStoreQuestionIndex] = useExamStore((state) => [state.questionIndex, state.setQuestionIndex]);
 
 	const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));
 
@@ -98,6 +126,21 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 		if (showSolutions) setExerciseIndex(-1);
 	}, [setExerciseIndex, showSolutions]);
 
+	useEffect(() => {
+		const previousParts = exam.parts.filter((_, index) => index < partIndex);
+		let previousMultipleChoice = previousParts.flatMap((x) => x.exercises).filter((x) => x.type === "multipleChoice") as MultipleChoiceExercise[];
+
+		if (partIndex > -1 && exerciseIndex > -1) {
+			const previousPartExercises = exam.parts[partIndex].exercises.filter((_, index) => index < exerciseIndex);
+			const partMultipleChoice = previousPartExercises.filter((x) => x.type === "multipleChoice") as MultipleChoiceExercise[];
+
+			previousMultipleChoice = [...previousMultipleChoice, ...partMultipleChoice];
+		}
+
+		setMultipleChoicesDone(previousMultipleChoice.map((x) => ({id: x.id, amount: x.questions.length - 1})));
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	useEffect(() => {
 		const listener = (e: KeyboardEvent) => {
 			if (e.key === "F3" || ((e.ctrlKey || e.metaKey) && e.key === "f")) {
@@ -128,15 +171,19 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 			return;
 		}
 
-		onFinish(userSolutions.map((x) => ({...x, module: "reading", exam: exam.id})));
+		onFinish(userSolutions);
 	};
 
 	const nextExercise = (solution?: UserSolution) => {
 		scrollToTop();
 		if (solution) {
-			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), solution]);
+			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "reading", exam: exam.id}]);
+		}
+		if (storeQuestionIndex > 0) {
+			const exercise = getExercise();
+			setExerciseType(exercise.type);
+			setMultipleChoicesDone((prev) => [...prev.filter((x) => x.id !== exercise.id), {id: exercise.id, amount: storeQuestionIndex}]);
 		}
-		setQuestionIndex((prev) => prev + currentQuestionIndex);
 		setStoreQuestionIndex(0);
 
 		if (exerciseIndex + 1 < exam.parts[partIndex].exercises.length && !hasExamEnded) {
@@ -165,18 +212,16 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 		setHasExamEnded(false);
 
 		if (solution) {
-			onFinish(
-				[...userSolutions.filter((x) => x.exercise !== solution.exercise), solution].map((x) => ({...x, module: "reading", exam: exam.id})),
-			);
+			onFinish([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "reading", exam: exam.id}]);
 		} else {
-			onFinish(userSolutions.map((x) => ({...x, module: "reading", exam: exam.id})));
+			onFinish(userSolutions);
 		}
 	};
 
 	const previousExercise = (solution?: UserSolution) => {
 		scrollToTop();
 		if (solution) {
-			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), solution]);
+			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "reading", exam: exam.id}]);
 		}
 		setStoreQuestionIndex(0);
 
@@ -191,23 +236,56 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 		};
 	};
 
+	useEffect(() => {
+		if (partIndex > -1 && exerciseIndex > -1) {
+			const exercise = getExercise();
+			setExerciseType(exercise.type);
+			setMultipleChoicesDone((prev) => prev.filter((x) => x.id !== exercise.id));
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [exerciseIndex, partIndex]);
+
+	const calculateExerciseIndex = () => {
+		if (partIndex === -1) return 0;
+		if (partIndex === 0)
+			return (
+				(exerciseIndex === -1 ? 0 : exerciseIndex + 1) + storeQuestionIndex + multipleChoicesDone.reduce((acc, curr) => acc + curr.amount, 0)
+			);
+
+		const exercisesPerPart = exam.parts.map((x) => x.exercises.length);
+		const exercisesDone = exercisesPerPart.filter((_, index) => index < partIndex).reduce((acc, curr) => curr + acc, 0);
+		return (
+			exercisesDone +
+			(exerciseIndex === -1 ? 0 : exerciseIndex + 1) +
+			storeQuestionIndex +
+			multipleChoicesDone.reduce((acc, curr) => acc + curr.amount, 0)
+		);
+	};
+
 	const renderText = () => (
-		<div className="flex flex-col gap-6 w-full bg-mti-gray-seasalt rounded-xl py-8 px-16 mt-4">
-			<div className="flex flex-col w-full gap-2">
-				<h4 className="text-xl font-semibold">
-					Please read the following excerpt attentively, you will then be asked questions about the text you&apos;ve read.
-				</h4>
-				<span className="text-base">You will be allowed to read the text while doing the exercises</span>
-			</div>
-			<div className="flex flex-col gap-2 w-full">
-				<h3 className="text-xl font-semibold">{exam.parts[partIndex].text.title}</h3>
-				<div className="border border-mti-gray-dim w-full rounded-full opacity-10" />
-				<span className="overflow-auto">
-					{exam.parts[partIndex].text.content.split("\\n").map((line, index) => (
-						<p key={index}>{line}</p>
-					))}
-				</span>
-			</div>
+		<div className={clsx("flex flex-col gap-6 w-full bg-mti-gray-seasalt rounded-xl mt-4 relative", isTextMinimized ? "p-2 px-8" : "py-8 px-16")}>
+			<button
+				data-tip={isTextMinimized ? "Maximise" : "Minimize"}
+				className={clsx("absolute right-8 tooltip", isTextMinimized ? "top-1/2 -translate-y-1/2" : "top-8")}
+				onClick={() => setIsTextMinimzed((prev) => !prev)}>
+				{isTextMinimized ? (
+					<BsChevronDown className="text-mti-purple-dark text-lg" />
+				) : (
+					<BsChevronUp className="text-mti-purple-dark text-lg" />
+				)}
+			</button>
+			{!isTextMinimized && (
+				<>
+					<div className="flex flex-col w-full gap-2">
+						<h4 className="text-xl font-semibold">
+							Please read the following excerpt attentively, you will then be asked questions about the text you&apos;ve read.
+						</h4>
+						<span className="text-base">You will be allowed to read the text while doing the exercises</span>
+					</div>
+					<TextComponent part={exam.parts[partIndex]} exerciseType={exerciseType} />
+				</>
+			)}
+			{isTextMinimized && <span className="font-semibold">Reading Passage</span>}
 		</div>
 	);
 
@@ -218,25 +296,18 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 				{partIndex > -1 && <TextModal {...exam.parts[partIndex].text} isOpen={showTextModal} onClose={() => setShowTextModal(false)} />}
 				<ModuleTitle
 					minTimer={exam.minTimer}
-					exerciseIndex={
-						(exam.parts
-							.flatMap((x) => x.exercises)
-							.findIndex(
-								(x) =>
-									x.id ===
-									exam.parts[partIndex > -1 ? partIndex : 0].exercises[exerciseIndex === -1 ? exerciseIndex + 1 : exerciseIndex]
-										?.id,
-							) || 0) +
-						(exerciseIndex === -1 ? 0 : 1) +
-						questionIndex +
-						currentQuestionIndex
-					}
+					exerciseIndex={calculateExerciseIndex()}
 					module="reading"
 					totalExercises={countExercises(exam.parts.flatMap((x) => x.exercises))}
 					disableTimer={showSolutions}
 					label={exerciseIndex === -1 ? undefined : convertCamelCaseToReadable(exam.parts[partIndex].exercises[exerciseIndex].type)}
 				/>
-				<div className={clsx("mb-20 w-full", exerciseIndex > -1 && "grid grid-cols-2 gap-4")}>
+				<div
+					className={clsx(
+						"mb-20 w-full",
+						exerciseIndex > -1 && !isTextMinimized && "grid grid-cols-2 gap-4",
+						exerciseIndex > -1 && isTextMinimized && "flex flex-col gap-2",
+					)}>
 					{partIndex > -1 && renderText()}
 
 					{exerciseIndex > -1 &&

src/exams/Selection.tsx

@@ -1,310 +1,442 @@
 /* eslint-disable @next/next/no-img-element */
-import {useState} from "react";
-import {Module} from "@/interfaces";
+import { useState } from "react";
+import { Module } from "@/interfaces";
 import clsx from "clsx";
-import {User} from "@/interfaces/user";
+import { User } from "@/interfaces/user";
 import ProgressBar from "@/components/Low/ProgressBar";
-import {BsArrowRepeat, BsBook, BsCheck, BsCheckCircle, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsXCircle} from "react-icons/bs";
-import {totalExamsByModule} from "@/utils/stats";
+import {
+  BsArrowRepeat,
+  BsBook,
+  BsCheck,
+  BsCheckCircle,
+  BsClipboard,
+  BsHeadphones,
+  BsMegaphone,
+  BsPen,
+  BsXCircle,
+} from "react-icons/bs";
+import { totalExamsByModule } from "@/utils/stats";
 import useStats from "@/hooks/useStats";
 import Button from "@/components/Low/Button";
-import {calculateAverageLevel} from "@/utils/score";
-import {sortByModuleName} from "@/utils/moduleUtils";
-import {capitalize} from "lodash";
+import { calculateAverageLevel } from "@/utils/score";
+import { sortByModuleName } from "@/utils/moduleUtils";
+import { capitalize } from "lodash";
 import ProfileSummary from "@/components/ProfileSummary";
-import {Variant} from "@/interfaces/exam";
-import useSessions, {Session} from "@/hooks/useSessions";
+import { Variant } from "@/interfaces/exam";
+import useSessions, { Session } from "@/hooks/useSessions";
 import SessionCard from "@/components/Medium/SessionCard";
 import useExamStore from "@/stores/examStore";
 import moment from "moment";
 
 interface Props {
-	user: User;
-	page: "exercises" | "exams";
-	onStart: (modules: Module[], avoidRepeated: boolean, variant: Variant) => void;
-	disableSelection?: boolean;
+  user: User;
+  page: "exercises" | "exams";
+  onStart: (
+    modules: Module[],
+    avoidRepeated: boolean,
+    variant: Variant,
+  ) => void;
+  disableSelection?: boolean;
 }
 
-export default function Selection({user, page, onStart, disableSelection = false}: Props) {
-	const [selectedModules, setSelectedModules] = useState<Module[]>([]);
-	const [avoidRepeatedExams, setAvoidRepeatedExams] = useState(true);
-	const [variant, setVariant] = useState<Variant>("full");
+export default function Selection({
+  user,
+  page,
+  onStart,
+  disableSelection = false,
+}: Props) {
+  const [selectedModules, setSelectedModules] = useState<Module[]>([]);
+  const [avoidRepeatedExams, setAvoidRepeatedExams] = useState(true);
+  const [variant, setVariant] = useState<Variant>("full");
 
-	const {stats} = useStats(user?.id);
-	const {sessions, isLoading, reload} = useSessions(user.id);
+  const { stats } = useStats(user?.id);
+  const { sessions, isLoading, reload } = useSessions(user.id);
 
-	const state = useExamStore((state) => state);
+  const state = useExamStore((state) => state);
 
-	const toggleModule = (module: Module) => {
-		const modules = selectedModules.filter((x) => x !== module);
-		setSelectedModules((prev) => (prev.includes(module) ? modules : [...modules, module]));
-	};
+  const toggleModule = (module: Module) => {
+    const modules = selectedModules.filter((x) => x !== module);
+    setSelectedModules((prev) =>
+      prev.includes(module) ? modules : [...modules, module],
+    );
+  };
 
-	const loadSession = async (session: Session) => {
-		state.setSelectedModules(session.selectedModules);
-		state.setExam(session.exam);
-		state.setExams(session.exams);
-		state.setSessionId(session.sessionId);
-		state.setAssignment(session.assignment);
-		state.setExerciseIndex(session.exerciseIndex);
-		state.setPartIndex(session.partIndex);
-		state.setModuleIndex(session.moduleIndex);
-		state.setTimeSpent(session.timeSpent);
-		state.setUserSolutions(session.userSolutions);
-		state.setShowSolutions(false);
-		state.setQuestionIndex(session.questionIndex);
-	};
+  const loadSession = async (session: Session) => {
+    state.setSelectedModules(session.selectedModules);
+    state.setExam(session.exam);
+    state.setExams(session.exams);
+    state.setSessionId(session.sessionId);
+    state.setAssignment(session.assignment);
+    state.setExerciseIndex(session.exerciseIndex);
+    state.setPartIndex(session.partIndex);
+    state.setModuleIndex(session.moduleIndex);
+    state.setTimeSpent(session.timeSpent);
+    state.setUserSolutions(session.userSolutions);
+    state.setShowSolutions(false);
+    state.setQuestionIndex(session.questionIndex);
+  };
 
-	return (
-		<>
-			<div className="relative flex h-full w-full flex-col gap-8 md:gap-16">
-				{user && (
-					<ProfileSummary
-						user={user}
-						items={[
-							{
-								icon: <BsBook className="text-ielts-reading h-6 w-6 md:h-8 md:w-8" />,
-								label: "Reading",
-								value: totalExamsByModule(stats, "reading"),
-								tooltip: "The amount of reading exams performed.",
-							},
-							{
-								icon: <BsHeadphones className="text-ielts-listening h-6 w-6 md:h-8 md:w-8" />,
-								label: "Listening",
-								value: totalExamsByModule(stats, "listening"),
-								tooltip: "The amount of listening exams performed.",
-							},
-							{
-								icon: <BsPen className="text-ielts-writing h-6 w-6 md:h-8 md:w-8" />,
-								label: "Writing",
-								value: totalExamsByModule(stats, "writing"),
-								tooltip: "The amount of writing exams performed.",
-							},
-							{
-								icon: <BsMegaphone className="text-ielts-speaking h-6 w-6 md:h-8 md:w-8" />,
-								label: "Speaking",
-								value: totalExamsByModule(stats, "speaking"),
-								tooltip: "The amount of speaking exams performed.",
-							},
-							{
-								icon: <BsClipboard className="text-ielts-level h-6 w-6 md:h-8 md:w-8" />,
-								label: "Level",
-								value: totalExamsByModule(stats, "level"),
-								tooltip: "The amount of level exams performed.",
-							},
-						]}
-					/>
-				)}
+  return (
+    <>
+      <div className="relative flex h-full w-full flex-col gap-8 md:gap-16">
+        {user && (
+          <ProfileSummary
+            user={user}
+            items={[
+              {
+                icon: (
+                  <BsBook className="text-ielts-reading h-6 w-6 md:h-8 md:w-8" />
+                ),
+                label: "Reading",
+                value: totalExamsByModule(stats, "reading"),
+                tooltip: "The amount of reading exams performed.",
+              },
+              {
+                icon: (
+                  <BsHeadphones className="text-ielts-listening h-6 w-6 md:h-8 md:w-8" />
+                ),
+                label: "Listening",
+                value: totalExamsByModule(stats, "listening"),
+                tooltip: "The amount of listening exams performed.",
+              },
+              {
+                icon: (
+                  <BsPen className="text-ielts-writing h-6 w-6 md:h-8 md:w-8" />
+                ),
+                label: "Writing",
+                value: totalExamsByModule(stats, "writing"),
+                tooltip: "The amount of writing exams performed.",
+              },
+              {
+                icon: (
+                  <BsMegaphone className="text-ielts-speaking h-6 w-6 md:h-8 md:w-8" />
+                ),
+                label: "Speaking",
+                value: totalExamsByModule(stats, "speaking"),
+                tooltip: "The amount of speaking exams performed.",
+              },
+              {
+                icon: (
+                  <BsClipboard className="text-ielts-level h-6 w-6 md:h-8 md:w-8" />
+                ),
+                label: "Level",
+                value: totalExamsByModule(stats, "level"),
+                tooltip: "The amount of level exams performed.",
+              },
+            ]}
+          />
+        )}
 
-				<section className="flex flex-col gap-3">
-					<span className="text-lg font-bold">About {capitalize(page)}</span>
-					<span className="text-mti-gray-taupe">
-						{page === "exercises" && (
-							<>
-								In the realm of language acquisition, practice makes perfect, and our exercises are the key to unlocking your full
-								potential. Dive into a world of interactive and engaging exercises that cater to diverse learning styles. From grammar
-								drills that build a strong foundation to vocabulary challenges that broaden your lexicon, our exercises are carefully
-								designed to make learning English both enjoyable and effective. Whether you&apos;re looking to reinforce specific
-								skills or embark on a holistic language journey, our exercises are your companions in the pursuit of excellence.
-								Embrace the joy of learning as you navigate through a variety of activities that cater to every facet of language
-								acquisition. Your linguistic adventure starts here!
-							</>
-						)}
-						{page === "exams" && (
-							<>
-								Welcome to the heart of success on your English language journey! Our exams are crafted with precision to assess and
-								enhance your language skills. Each test is a passport to your linguistic prowess, designed to challenge and elevate
-								your abilities. Whether you&apos;re a beginner or a seasoned learner, our exams cater to all levels, providing a
-								comprehensive evaluation of your reading, writing, speaking, and listening skills. Prepare to embark on a journey of
-								self-discovery and language mastery as you navigate through our thoughtfully curated exams. Your success is not just a
-								destination; it&apos;s a testament to your dedication and our commitment to empowering you with the English language.
-							</>
-						)}
-					</span>
-				</section>
+        <section className="flex flex-col gap-3">
+          <span className="text-lg font-bold">About {capitalize(page)}</span>
+          <span className="text-mti-gray-taupe">
+            {page === "exercises" && (
+              <>
+                In the realm of language acquisition, practice makes perfect,
+                and our exercises are the key to unlocking your full potential.
+                Dive into a world of interactive and engaging exercises that
+                cater to diverse learning styles. From grammar drills that build
+                a strong foundation to vocabulary challenges that broaden your
+                lexicon, our exercises are carefully designed to make learning
+                English both enjoyable and effective. Whether you&apos;re
+                looking to reinforce specific skills or embark on a holistic
+                language journey, our exercises are your companions in the
+                pursuit of excellence. Embrace the joy of learning as you
+                navigate through a variety of activities that cater to every
+                facet of language acquisition. Your linguistic adventure starts
+                here!
+              </>
+            )}
+            {page === "exams" && (
+              <>
+                Welcome to the heart of success on your English language
+                journey! Our exams are crafted with precision to assess and
+                enhance your language skills. Each test is a passport to your
+                linguistic prowess, designed to challenge and elevate your
+                abilities. Whether you&apos;re a beginner or a seasoned learner,
+                our exams cater to all levels, providing a comprehensive
+                evaluation of your reading, writing, speaking, and listening
+                skills. Prepare to embark on a journey of self-discovery and
+                language mastery as you navigate through our thoughtfully
+                curated exams. Your success is not just a destination; it&apos;s
+                a testament to your dedication and our commitment to empowering
+                you with the English language.
+              </>
+            )}
+          </span>
+        </section>
 
-				{sessions.length > 0 && (
-					<section className="flex flex-col gap-3 md:gap-3">
-						<div className="flex items-center gap-4">
-							<div
-								onClick={reload}
-								className="text-mti-purple-light hover:text-mti-purple-dark flex cursor-pointer items-center gap-2 transition duration-300 ease-in-out">
-								<span className="text-mti-black text-lg font-bold">Unfinished Sessions</span>
-								<BsArrowRepeat className={clsx("text-xl", isLoading && "animate-spin")} />
-							</div>
-						</div>
-						<span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
-							{sessions
-								.sort((a, b) => moment(b.date).diff(moment(a.date)))
-								.map((session) => (
-									<SessionCard session={session} key={session.sessionId} reload={reload} loadSession={loadSession} />
-								))}
-						</span>
-					</section>
-				)}
+        {sessions.length > 0 && (
+          <section className="flex flex-col gap-3 md:gap-3">
+            <div className="flex items-center gap-4">
+              <div
+                onClick={reload}
+                className="text-mti-purple-light hover:text-mti-purple-dark flex cursor-pointer items-center gap-2 transition duration-300 ease-in-out"
+              >
+                <span className="text-mti-black text-lg font-bold">
+                  Unfinished Sessions
+                </span>
+                <BsArrowRepeat
+                  className={clsx("text-xl", isLoading && "animate-spin")}
+                />
+              </div>
+            </div>
+            <span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
+              {sessions
+                .sort((a, b) => moment(b.date).diff(moment(a.date)))
+                .map((session) => (
+                  <SessionCard
+                    session={session}
+                    key={session.sessionId}
+                    reload={reload}
+                    loadSession={loadSession}
+                  />
+                ))}
+            </span>
+          </section>
+        )}
 
-				<section className="-lg:flex-col -lg:items-center -lg:gap-12 mt-4 flex w-full justify-between gap-8">
-					<div
-						onClick={!disableSelection && !selectedModules.includes("level") ? () => toggleModule("reading") : undefined}
-						className={clsx(
-							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-							selectedModules.includes("reading") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
-						)}>
-						<div className="bg-ielts-reading absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
-							<BsBook className="h-7 w-7 text-white" />
-						</div>
-						<span className="font-semibold">Reading:</span>
-						<p className="text-left text-xs">
-							Expand your vocabulary, improve your reading comprehension and improve your ability to interpret texts in English.
-						</p>
-						{!selectedModules.includes("reading") && !selectedModules.includes("level") && !disableSelection && (
-							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
-						)}
-						{(selectedModules.includes("reading") || disableSelection) && (
-							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
-						)}
-						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
-					</div>
-					<div
-						onClick={!disableSelection && !selectedModules.includes("level") ? () => toggleModule("listening") : undefined}
-						className={clsx(
-							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-							selectedModules.includes("listening") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
-						)}>
-						<div className="bg-ielts-listening absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
-							<BsHeadphones className="h-7 w-7 text-white" />
-						</div>
-						<span className="font-semibold">Listening:</span>
-						<p className="text-left text-xs">
-							Improve your ability to follow conversations in English and your ability to understand different accents and intonations.
-						</p>
-						{!selectedModules.includes("listening") && !selectedModules.includes("level") && !disableSelection && (
-							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
-						)}
-						{(selectedModules.includes("listening") || disableSelection) && (
-							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
-						)}
-						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
-					</div>
-					<div
-						onClick={!disableSelection && !selectedModules.includes("level") ? () => toggleModule("writing") : undefined}
-						className={clsx(
-							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-							selectedModules.includes("writing") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
-						)}>
-						<div className="bg-ielts-writing absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
-							<BsPen className="h-7 w-7 text-white" />
-						</div>
-						<span className="font-semibold">Writing:</span>
-						<p className="text-left text-xs">
-							Allow you to practice writing in a variety of formats, from simple paragraphs to complex essays.
-						</p>
-						{!selectedModules.includes("writing") && !selectedModules.includes("level") && !disableSelection && (
-							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
-						)}
-						{(selectedModules.includes("writing") || disableSelection) && (
-							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
-						)}
-						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
-					</div>
-					<div
-						onClick={!disableSelection && !selectedModules.includes("level") ? () => toggleModule("speaking") : undefined}
-						className={clsx(
-							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-							selectedModules.includes("speaking") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
-						)}>
-						<div className="bg-ielts-speaking absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
-							<BsMegaphone className="h-7 w-7 text-white" />
-						</div>
-						<span className="font-semibold">Speaking:</span>
-						<p className="text-left text-xs">
-							You&apos;ll have access to interactive dialogs, pronunciation exercises and speech recordings.
-						</p>
-						{!selectedModules.includes("speaking") && !selectedModules.includes("level") && !disableSelection && (
-							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
-						)}
-						{(selectedModules.includes("speaking") || disableSelection) && (
-							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
-						)}
-						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
-					</div>
-					{!disableSelection && (
-						<div
-							onClick={selectedModules.length === 0 || selectedModules.includes("level") ? () => toggleModule("level") : undefined}
-							className={clsx(
-								"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-								selectedModules.includes("level") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
-							)}>
-							<div className="bg-ielts-level absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
-								<BsClipboard className="h-7 w-7 text-white" />
-							</div>
-							<span className="font-semibold">Level:</span>
-							<p className="text-left text-xs">You&apos;ll be able to test your english level with multiple choice questions.</p>
-							{!selectedModules.includes("level") && selectedModules.length === 0 && !disableSelection && (
-								<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
-							)}
-							{(selectedModules.includes("level") || disableSelection) && (
-								<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
-							)}
-							{!selectedModules.includes("level") && selectedModules.length > 0 && (
-								<BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
-							)}
-						</div>
-					)}
-				</section>
-				<div className="-md:flex-col -md:gap-4 -md:justify-center flex w-full items-center md:justify-between">
-					<div className="flex w-full flex-col items-center gap-3">
-						<div
-							className="text-mti-gray-dim -md:justify-center flex w-full cursor-pointer items-center gap-3 text-sm"
-							onClick={() => setAvoidRepeatedExams((prev) => !prev)}>
-							<input type="checkbox" className="hidden" />
-							<div
-								className={clsx(
-									"border-mti-purple-light flex h-6 w-6 items-center justify-center rounded-md border bg-white",
-									"transition duration-300 ease-in-out",
-									avoidRepeatedExams && "!bg-mti-purple-light ",
-								)}>
-								<BsCheck color="white" className="h-full w-full" />
-							</div>
-							<span className="tooltip" data-tip="If possible, the platform will choose exams not yet done.">
-								Avoid Repeated Questions
-							</span>
-						</div>
-						<div
-							className="text-mti-gray-dim -md:justify-center flex w-full cursor-pointer items-center  gap-3 text-sm"
-							onClick={() => setVariant((prev) => (prev === "full" ? "partial" : "full"))}>
-							<input type="checkbox" className="hidden" />
-							<div
-								className={clsx(
-									"border-mti-purple-light flex h-6 w-6 items-center justify-center rounded-md border bg-white",
-									"transition duration-300 ease-in-out",
-									variant === "full" && "!bg-mti-purple-light ",
-								)}>
-								<BsCheck color="white" className="h-full w-full" />
-							</div>
-							<span>Full length exams</span>
-						</div>
-					</div>
-					<div className="tooltip w-full" data-tip={`Your screen size is too small to do ${page}`}>
-						<Button color="purple" className="w-full max-w-xs px-12 md:hidden" disabled>
-							Start Exam
-						</Button>
-					</div>
-					<Button
-						onClick={() =>
-							onStart(
-								!disableSelection ? selectedModules.sort(sortByModuleName) : ["reading", "listening", "writing", "speaking"],
-								avoidRepeatedExams,
-								variant,
-							)
-						}
-						color="purple"
-						className="-md:hidden w-full max-w-xs px-12 md:self-end"
-						disabled={selectedModules.length === 0 && !disableSelection}>
-						Start Exam
-					</Button>
-				</div>
-			</div>
-		</>
-	);
+        <section className="-lg:flex-col -lg:items-center -lg:gap-12 mt-4 flex w-full justify-between gap-8">
+          <div
+            onClick={
+              !disableSelection && !selectedModules.includes("level")
+                ? () => toggleModule("reading")
+                : undefined
+            }
+            className={clsx(
+              "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
+              selectedModules.includes("reading") || disableSelection
+                ? "border-mti-purple-light"
+                : "border-mti-gray-platinum",
+            )}
+          >
+            <div className="bg-ielts-reading absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
+              <BsBook className="h-7 w-7 text-white" />
+            </div>
+            <span className="font-semibold">Reading:</span>
+            <p className="text-left text-xs">
+              Expand your vocabulary, improve your reading comprehension and
+              improve your ability to interpret texts in English.
+            </p>
+            {!selectedModules.includes("reading") &&
+              !selectedModules.includes("level") &&
+              !disableSelection && (
+                <div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
+              )}
+            {(selectedModules.includes("reading") || disableSelection) && (
+              <BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
+            )}
+            {selectedModules.includes("level") && (
+              <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
+            )}
+          </div>
+          <div
+            onClick={
+              !disableSelection && !selectedModules.includes("level")
+                ? () => toggleModule("listening")
+                : undefined
+            }
+            className={clsx(
+              "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
+              selectedModules.includes("listening") || disableSelection
+                ? "border-mti-purple-light"
+                : "border-mti-gray-platinum",
+            )}
+          >
+            <div className="bg-ielts-listening absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
+              <BsHeadphones className="h-7 w-7 text-white" />
+            </div>
+            <span className="font-semibold">Listening:</span>
+            <p className="text-left text-xs">
+              Improve your ability to follow conversations in English and your
+              ability to understand different accents and intonations.
+            </p>
+            {!selectedModules.includes("listening") &&
+              !selectedModules.includes("level") &&
+              !disableSelection && (
+                <div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
+              )}
+            {(selectedModules.includes("listening") || disableSelection) && (
+              <BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
+            )}
+            {selectedModules.includes("level") && (
+              <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
+            )}
+          </div>
+          <div
+            onClick={
+              !disableSelection && !selectedModules.includes("level")
+                ? () => toggleModule("writing")
+                : undefined
+            }
+            className={clsx(
+              "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
+              selectedModules.includes("writing") || disableSelection
+                ? "border-mti-purple-light"
+                : "border-mti-gray-platinum",
+            )}
+          >
+            <div className="bg-ielts-writing absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
+              <BsPen className="h-7 w-7 text-white" />
+            </div>
+            <span className="font-semibold">Writing:</span>
+            <p className="text-left text-xs">
+              Allow you to practice writing in a variety of formats, from simple
+              paragraphs to complex essays.
+            </p>
+            {!selectedModules.includes("writing") &&
+              !selectedModules.includes("level") &&
+              !disableSelection && (
+                <div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
+              )}
+            {(selectedModules.includes("writing") || disableSelection) && (
+              <BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
+            )}
+            {selectedModules.includes("level") && (
+              <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
+            )}
+          </div>
+          <div
+            onClick={
+              !disableSelection && !selectedModules.includes("level")
+                ? () => toggleModule("speaking")
+                : undefined
+            }
+            className={clsx(
+              "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
+              selectedModules.includes("speaking") || disableSelection
+                ? "border-mti-purple-light"
+                : "border-mti-gray-platinum",
+            )}
+          >
+            <div className="bg-ielts-speaking absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
+              <BsMegaphone className="h-7 w-7 text-white" />
+            </div>
+            <span className="font-semibold">Speaking:</span>
+            <p className="text-left text-xs">
+              You&apos;ll have access to interactive dialogs, pronunciation
+              exercises and speech recordings.
+            </p>
+            {!selectedModules.includes("speaking") &&
+              !selectedModules.includes("level") &&
+              !disableSelection && (
+                <div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
+              )}
+            {(selectedModules.includes("speaking") || disableSelection) && (
+              <BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
+            )}
+            {selectedModules.includes("level") && (
+              <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
+            )}
+          </div>
+          {!disableSelection && (
+            <div
+              onClick={
+                selectedModules.length === 0 ||
+                selectedModules.includes("level")
+                  ? () => toggleModule("level")
+                  : undefined
+              }
+              className={clsx(
+                "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
+                selectedModules.includes("level") || disableSelection
+                  ? "border-mti-purple-light"
+                  : "border-mti-gray-platinum",
+              )}
+            >
+              <div className="bg-ielts-level absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
+                <BsClipboard className="h-7 w-7 text-white" />
+              </div>
+              <span className="font-semibold">Level:</span>
+              <p className="text-left text-xs">
+                You&apos;ll be able to test your english level with multiple
+                choice questions.
+              </p>
+              {!selectedModules.includes("level") &&
+                selectedModules.length === 0 &&
+                !disableSelection && (
+                  <div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
+                )}
+              {(selectedModules.includes("level") || disableSelection) && (
+                <BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
+              )}
+              {!selectedModules.includes("level") &&
+                selectedModules.length > 0 && (
+                  <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
+                )}
+            </div>
+          )}
+        </section>
+        <div className="-md:flex-col -md:gap-4 -md:justify-center flex w-full items-center md:justify-between">
+          <div className="flex w-full flex-col items-center gap-3">
+            <div
+              className="text-mti-gray-dim -md:justify-center flex w-full cursor-pointer items-center gap-3 text-sm"
+              onClick={() => setAvoidRepeatedExams((prev) => !prev)}
+            >
+              <input type="checkbox" className="hidden" />
+              <div
+                className={clsx(
+                  "border-mti-purple-light flex h-6 w-6 items-center justify-center rounded-md border bg-white",
+                  "transition duration-300 ease-in-out",
+                  avoidRepeatedExams && "!bg-mti-purple-light ",
+                )}
+              >
+                <BsCheck color="white" className="h-full w-full" />
+              </div>
+              <span
+                className="tooltip"
+                data-tip="If possible, the platform will choose exams not yet done."
+              >
+                Avoid Repeated Questions
+              </span>
+            </div>
+            <div
+              className="text-mti-gray-dim -md:justify-center flex w-full cursor-pointer items-center  gap-3 text-sm"
+              // onClick={() => setVariant((prev) => (prev === "full" ? "partial" : "full"))}>
+            >
+              <input type="checkbox" className="hidden" disabled />
+              <div
+                className={clsx(
+                  "border-mti-purple-light flex h-6 w-6 items-center justify-center rounded-md border bg-white",
+                  "transition duration-300 ease-in-out",
+                  variant === "full" && "!bg-mti-purple-light ",
+                )}
+              >
+                <BsCheck color="white" className="h-full w-full" />
+              </div>
+              <span>Full length exams</span>
+            </div>
+          </div>
+          <div
+            className="tooltip w-full"
+            data-tip={`Your screen size is too small to do ${page}`}
+          >
+            <Button
+              color="purple"
+              className="w-full max-w-xs px-12 md:hidden"
+              disabled
+            >
+              Start Exam
+            </Button>
+          </div>
+          <Button
+            onClick={() =>
+              onStart(
+                !disableSelection
+                  ? selectedModules.sort(sortByModuleName)
+                  : ["reading", "listening", "writing", "speaking"],
+                avoidRepeatedExams,
+                variant,
+              )
+            }
+            color="purple"
+            className="-md:hidden w-full max-w-xs px-12 md:self-end"
+            disabled={selectedModules.length === 0 && !disableSelection}
+          >
+            Start Exam
+          </Button>
+        </div>
+      </div>
+    </>
+  );
 }

src/exams/Speaking.tsx

@@ -36,7 +36,7 @@ export default function Speaking({exam, showSolutions = false, onFinish}: Props)
 	const nextExercise = (solution?: UserSolution) => {
 		scrollToTop();
 		if (solution) {
-			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), solution]);
+			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "speaking", exam: exam.id}]);
 		}
 		setQuestionIndex((prev) => prev + currentQuestionIndex);
 
@@ -50,18 +50,16 @@ export default function Speaking({exam, showSolutions = false, onFinish}: Props)
 		setHasExamEnded(false);
 
 		if (solution) {
-			onFinish(
-				[...userSolutions.filter((x) => x.exercise !== solution.exercise), solution].map((x) => ({...x, module: "speaking", exam: exam.id})),
-			);
+			onFinish([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "speaking", exam: exam.id}]);
 		} else {
-			onFinish(userSolutions.map((x) => ({...x, module: "speaking", exam: exam.id})));
+			onFinish(userSolutions);
 		}
 	};
 
 	const previousExercise = (solution?: UserSolution) => {
 		scrollToTop();
 		if (solution) {
-			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), solution]);
+			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "speaking", exam: exam.id}]);
 		}
 
 		if (exerciseIndex > 0) {

src/exams/Writing.tsx

@@ -28,7 +28,7 @@ export default function Writing({exam, showSolutions = false, onFinish}: Props)
 	const nextExercise = (solution?: UserSolution) => {
 		scrollToTop();
 		if (solution) {
-			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), solution]);
+			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "writing", exam: exam.id}]);
 		}
 
 		if (exerciseIndex + 1 < exam.exercises.length) {
@@ -41,18 +41,16 @@ export default function Writing({exam, showSolutions = false, onFinish}: Props)
 		setHasExamEnded(false);
 
 		if (solution) {
-			onFinish(
-				[...userSolutions.filter((x) => x.exercise !== solution.exercise), solution].map((x) => ({...x, module: "writing", exam: exam.id})),
-			);
+			onFinish([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "writing", exam: exam.id}]);
 		} else {
-			onFinish(userSolutions.map((x) => ({...x, module: "writing", exam: exam.id})));
+			onFinish(userSolutions);
 		}
 	};
 
 	const previousExercise = (solution?: UserSolution) => {
 		scrollToTop();
 		if (solution) {
-			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), solution]);
+			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "writing", exam: exam.id}]);
 		}
 
 		if (exerciseIndex > 0) {

src/exams/pdf/details/level.exam.tsx

@@ -25,7 +25,13 @@ const thresholds = [
     level: "High A2/Low B1",
     label: "Pre-Intermediate",
     minValue: 8,
-    maxValue: 12,
+    maxValue: 11,
+  },
+  {
+    level: "High B1/Low B2",
+    label: "Intermediate",
+    minValue: 12,
+    maxValue: 15,
   },
   {
     level: "High B2/Low C1",

src/exams/pdf/details/radial.result.tsx

@@ -4,14 +4,18 @@ import React from "react";
 import {View, Text, Image} from "@react-pdf/renderer";
 import {styles} from "../styles";
 import {ModuleScore} from "@/interfaces/module.scores";
+import {calculateBandScore} from "@/utils/score";
+import {Module} from "@/interfaces";
 
 export const RadialResult = ({module, score, total, png}: ModuleScore) => (
 	<View style={[styles.textFont, styles.radialContainer]}>
 		<Text style={[styles.textColor, styles.textBold, {fontSize: 10}]}>{module}</Text>
 		<Image src={png} style={styles.image64}></Image>
 		<View style={[styles.textColor, styles.radialResultContainer]}>
-			<Text style={styles.textBold}>{score.toFixed(2)}</Text>
-			<Text style={{fontSize: 8}}>out of {total}</Text>
+			<Text style={styles.textBold}>
+				{module === "level" ? Math.floor(score) : calculateBandScore(score, total, module.toLowerCase() as Module | "overall", "general")}
+			</Text>
+			<Text style={{fontSize: 8}}>out of {module === "level" ? total : "9.0"}</Text>
 		</View>
 	</View>
 );

src/exams/pdf/group.test.report.tsx

@@ -215,7 +215,7 @@ const GroupTestReport = ({
         </View>
         <View style={[{ paddingBottom: 30 }, styles.separator]}></View>
         <View style={{ flexGrow: 1 }}></View>
-        <TestReportFooter />
+        <TestReportFooter userId={id} />
       </Page>
       <Page style={styles.body}>
         <View
@@ -297,7 +297,7 @@ const GroupTestReport = ({
         </View>
 
         <View style={{ flexGrow: 1 }}></View>
-        <TestReportFooter />
+        <TestReportFooter userId={id} />
       </Page>
     </Document>
   );

src/exams/pdf/list.item.tsx

@@ -0,0 +1,24 @@
+import { Text, View, StyleSheet } from "@react-pdf/renderer";
+
+const styles = StyleSheet.create({
+  row: {
+    display: "flex",
+    flexDirection: "row",
+  },
+  bullet: {
+    height: "100%",
+  },
+});
+
+const ListItem = ({ text, textStyle }: { text: string, textStyle: any[] }) => {
+  return (
+    <View style={styles.row}>
+      <View style={styles.bullet}>
+        <Text style={textStyle}>{"\u2022" + " "}</Text>
+      </View>
+      <Text style={textStyle}>{text}</Text>
+    </View>
+  );
+};
+
+export default ListItem;

src/exams/pdf/test.report.footer.tsx

@@ -69,7 +69,6 @@ const TestReportFooter = ({ userId }: Props) => (
       <Text style={styles.textUnderline}>info@encoach.com</Text>
       <Text>https://encoach.com</Text>
       <View style={styles.spacedRow}>
-        <Text>Group ID: TRI64BNBOIU5043</Text>
         <Text
           // style={styles.pageNumber}
           render={({ pageNumber, totalPages }) =>

src/exams/pdf/test.report.tsx

@@ -6,11 +6,17 @@ import { styles } from "./styles";
 
 import { StyleSheet } from "@react-pdf/renderer";
 import TestReportFooter from "./test.report.footer";
+import ListItem from "./list.item";
+
 const customStyles = StyleSheet.create({
   testDetails: {
     display: "flex",
     gap: 4,
   },
+  testDetailsContainer: {
+    display: "flex",
+    gap: 16,
+  },
 });
 
 interface Props {
@@ -82,7 +88,6 @@ const TestReport = ({
         </Text>
         <View style={styles.textMargin}>
           <Text style={defaultTextStyle}>Name: {name}</Text>
-          <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>
@@ -124,7 +129,7 @@ const TestReport = ({
           </View>
         </View>
         <View style={[{ paddingTop: 30 }, styles.separator]}></View>
-        <TestReportFooter userId={id}/>
+        <TestReportFooter userId={id} />
       </Page>
       <Page style={styles.body}>
         <View>
@@ -149,15 +154,46 @@ const TestReport = ({
               .filter(
                 ({ suggestions, evaluation }) => suggestions || evaluation
               )
-              .map(({ module, suggestions, evaluation }) => (
-                <View key={module} style={customStyles.testDetails}>
-                  <Text style={[...defaultSkillsTitleStyle, styles.textBold]}>
-                    {module}
-                  </Text>
-                  <Text style={defaultSkillsTextStyle}>{evaluation}</Text>
-                  <Text style={defaultSkillsTextStyle}>{suggestions}</Text>
-                </View>
-              ))}
+              .map(
+                ({
+                  module,
+                  suggestions,
+                  evaluation,
+                  bullet_points = [],
+                }) => (
+                  <View key={module} style={customStyles.testDetailsContainer}>
+                    <View style={customStyles.testDetails}>
+                      <Text
+                        style={[...defaultSkillsTitleStyle, styles.textBold]}
+                      >
+                        {module}
+                      </Text>
+                      <Text style={defaultSkillsTextStyle}>{evaluation}</Text>
+                      <Text style={defaultSkillsTextStyle}>{suggestions}</Text>
+                    </View>
+                    <View style={customStyles.testDetails}>
+                      {bullet_points.length > 0 && (
+                        <>
+                          <Text
+                            style={defaultSkillsTitleStyle}
+                          >
+                            How to Improve:
+                          </Text>
+                          <View>
+                            {bullet_points.map((text: string) => (
+                              <ListItem
+                                key={text}
+                                text={text}
+                                textStyle={defaultSkillsTextStyle}
+                              />
+                            ))}
+                          </View>
+                        </>
+                      )}
+                    </View>
+                  </View>
+                )
+              )}
           </View>
           <View style={styles.alignRightRow}>
             <Image src={qrcode} style={styles.qrcode} />
@@ -165,7 +201,7 @@ const TestReport = ({
         </View>
         <View style={[{ paddingBottom: 30 }, styles.separator]}></View>
         <View style={{ flexGrow: 1 }}></View>
-        <TestReportFooter userId={id}/>
+        <TestReportFooter userId={id} />
       </Page>
     </Document>
   );

src/hooks/useAssignmentArchive.tsx

@@ -1,45 +1,42 @@
 import React from "react";
 import axios from "axios";
-import { toast } from "react-toastify";
-import { BsArchive } from "react-icons/bs";
+import {toast} from "react-toastify";
+import {BsArchive} from "react-icons/bs";
 
-export const useAssignmentArchive = (
-  assignmentId: string,
-  reload?: Function
-) => {
-  const [loading, setLoading] = React.useState(false);
-  const archive = () => {
-    // archive assignment
-    setLoading(true);
-    axios
-      .post(`/api/assignments/${assignmentId}/archive`)
-      .then((res) => {
-        toast.success("Assignment archived!");
-        if(reload) reload();
-        setLoading(false);
-      })
-      .catch((err) => {
-        toast.error("Failed to archive the assignment!");
-        setLoading(false);
-      });
-  };
+export const useAssignmentArchive = (assignmentId: string, reload?: Function) => {
+	const [loading, setLoading] = React.useState(false);
+	const archive = () => {
+		// archive assignment
+		setLoading(true);
+		axios
+			.post(`/api/assignments/${assignmentId}/archive`)
+			.then((res) => {
+				toast.success("Assignment archived!");
+				if (reload) reload();
+				setLoading(false);
+			})
+			.catch((err) => {
+				toast.error("Failed to archive the assignment!");
+				setLoading(false);
+			});
+	};
 
-  const renderIcon = (downloadClasses: string, loadingClasses: string) => {
-    if (loading) {
-      return (
-        <span className={`${loadingClasses} loading loading-infinity w-6`} />
-      );
-    }
-    return (
-      <BsArchive
-        className={`${downloadClasses} text-2xl cursor-pointer`}
-        onClick={(e) => {
-          e.stopPropagation();
-          archive();
-        }}
-      />
-    );
-  };
+	const renderIcon = (downloadClasses: string, loadingClasses: string) => {
+		if (loading) {
+			return <span className={`${loadingClasses} loading loading-infinity w-6`} />;
+		}
+		return (
+			<div
+				className="tooltip flex items-center justify-center w-fit h-fit"
+				data-tip="Archive assignment"
+				onClick={(e) => {
+					e.stopPropagation();
+					archive();
+				}}>
+				<BsArchive className={`${downloadClasses} text-2xl cursor-pointer tooltip`} />
+			</div>
+		);
+	};
 
-  return renderIcon;
+	return renderIcon;
 };

src/hooks/useAssignmentUnarchive.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import axios from "axios";
+import {toast} from "react-toastify";
+import {BsArchive, BsFileEarmarkCheck, BsFileEarmarkCheckFill} from "react-icons/bs";
+
+export const useAssignmentUnarchive = (assignmentId: string, reload?: Function) => {
+	const [loading, setLoading] = React.useState(false);
+	const archive = () => {
+		// archive assignment
+		setLoading(true);
+		axios
+			.post(`/api/assignments/${assignmentId}/unarchive`)
+			.then((res) => {
+				toast.success("Assignment unarchived!");
+				if (reload) reload();
+				setLoading(false);
+			})
+			.catch((err) => {
+				toast.error("Failed to unarchive the assignment!");
+				setLoading(false);
+			});
+	};
+
+	const renderIcon = (downloadClasses: string, loadingClasses: string) => {
+		if (loading) {
+			return <span className={`${loadingClasses} loading loading-infinity w-6`} />;
+		}
+		return (
+			<div
+				className="tooltip flex items-center justify-center w-fit h-fit"
+				data-tip="Unarchive assignment"
+				onClick={(e) => {
+					e.stopPropagation();
+					archive();
+				}}>
+				<BsFileEarmarkCheck className={`${downloadClasses} text-2xl cursor-pointer tooltip`} />
+			</div>
+		);
+	};
+
+	return renderIcon;
+};

src/hooks/useDiscounts.tsx

@@ -0,0 +1,22 @@
+import { Discount } from "@/interfaces/paypal";
+import { Code, Group, User } from "@/interfaces/user";
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+export default function useDiscounts(creator?: string) {
+  const [discounts, setDiscounts] = useState<Discount[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const getData = () => {
+    setIsLoading(true);
+    axios
+      .get<Discount[]>("/api/discounts")
+      .then((response) => setDiscounts(response.data))
+      .finally(() => setIsLoading(false));
+  };
+
+  useEffect(getData, [creator]);
+
+  return { discounts, isLoading, isError, reload: getData };
+}

src/hooks/useListSearch.tsx

@@ -1,4 +1,4 @@
-import {useState, useMemo} from 'react';
+import {useState, useMemo} from "react";
 import Input from "@/components/Low/Input";
 
 /*fields example = [
@@ -6,43 +6,33 @@ import Input from "@/components/Low/Input";
     ['companyInformation', 'companyInformation', 'name']
 ]*/
 
-
 const getFieldValue = (fields: string[], data: any): string => {
-    if(fields.length === 0) return data;
-    const [key, ...otherFields] = fields;
+	if (fields.length === 0) return data;
+	const [key, ...otherFields] = fields;
 
-    if(data[key]) return getFieldValue(otherFields, data[key]);
-    return data;
+	if (data[key]) return getFieldValue(otherFields, data[key]);
+	return data;
+};
+
+export function useListSearch<T>(fields: string[][], rows: T[]) {
+	const [text, setText] = useState("");
+
+	const renderSearch = () => <Input label="Search" type="text" name="search" onChange={setText} placeholder="Enter search text" value={text} />;
+
+	const updatedRows = useMemo(() => {
+		const searchText = text.toLowerCase();
+		return rows.filter((row) => {
+			return fields.some((fieldsKeys) => {
+				const value = getFieldValue(fieldsKeys, row);
+				if (typeof value === "string") {
+					return value.toLowerCase().includes(searchText);
+				}
+			});
+		});
+	}, [fields, rows, text]);
+
+	return {
+		rows: updatedRows,
+		renderSearch,
+	};
 }
-
-export const useListSearch = (fields: string[][], rows: any[]) => {
-    const [text, setText] = useState('');
-
-    const renderSearch = () => (
-        <Input
-            label="Search"
-            type="text"
-            name="search"
-            onChange={setText}
-            placeholder="Enter search text"
-            value={text}
-        />
-    )
-
-    const updatedRows = useMemo(() => {
-        const searchText = text.toLowerCase();
-        return rows.filter((row) => {
-            return fields.some((fieldsKeys) => {
-                const value = getFieldValue(fieldsKeys, row);
-                if(typeof value === 'string') {
-                    return value.toLowerCase().includes(searchText);
-                }
-            })
-        })
-    }, [fields, rows, text])
-
-    return {
-        rows: updatedRows,
-        renderSearch,
-    }
-}

src/hooks/useStats.tsx

@@ -2,18 +2,22 @@ import {Stat, User} from "@/interfaces/user";
 import axios from "axios";
 import {useEffect, useState} from "react";
 
-export default function useStats(id?: string) {
+export default function useStats(id?: string, shouldNotQuery?: boolean) {
 	const [stats, setStats] = useState<Stat[]>([]);
 	const [isLoading, setIsLoading] = useState(false);
 	const [isError, setIsError] = useState(false);
 
-	useEffect(() => {
+	const getData = () => {
+		if (shouldNotQuery) return;
+
 		setIsLoading(true);
 		axios
 			.get<Stat[]>(!id ? "/api/stats" : `/api/stats/user/${id}`)
-			.then((response) => setStats(response.data))
+			.then((response) => setStats(response.data.filter((x) => (id ? x.user === id : true))))
 			.finally(() => setIsLoading(false));
-	}, [id]);
+	};
 
-	return {stats, isLoading, isError};
+	useEffect(getData, [id, shouldNotQuery]);
+
+	return {stats, reload: getData, isLoading, isError};
 }

src/interfaces/exam.ts

@@ -64,6 +64,7 @@ export interface UserSolution {
 		missing: number;
 	};
 	exercise: string;
+	isDisabled?: boolean;
 }
 
 export interface WritingExam {
@@ -232,17 +233,21 @@ export interface MatchSentencesExercise {
 	id: string;
 	prompt: string;
 	userSolutions: {question: string; option: string}[];
-	sentences: {
-		id: string;
-		sentence: string;
-		solution: string;
-		color: string;
-	}[];
+	sentences: MatchSentenceExerciseSentence[];
 	allowRepetition: boolean;
-	options: {
-		id: string;
-		sentence: string;
-	}[];
+	options: MatchSentenceExerciseOption[];
+}
+
+export interface MatchSentenceExerciseSentence {
+	id: string;
+	sentence: string;
+	solution: string;
+	color: string;
+}
+
+export interface MatchSentenceExerciseOption {
+	id: string;
+	sentence: string;
 }
 
 export interface MultipleChoiceExercise {

src/interfaces/module.scores.ts

@@ -8,6 +8,7 @@ export interface ModuleScore {
 	png?: string;
 	evaluation?: string;
 	suggestions?: string;
+	bullet_points?: string[];
 }
 
 export interface StudentData {

src/interfaces/paymob.ts

@@ -0,0 +1,118 @@
+export interface PaymentIntention {
+	amount: number;
+	currency: string;
+	payment_methods: number[];
+	items: any[];
+	billing_data: BillingData;
+	customer: Customer;
+	extras: IntentionExtras;
+}
+
+interface BillingData {
+	apartment: string;
+	first_name: string;
+	last_name: string;
+	street: string;
+	building: string;
+	phone_number: string;
+	country: string;
+	email: string;
+	floor: string;
+	state: string;
+}
+
+interface Customer {
+	first_name: string;
+	last_name: string;
+	email: string;
+	extras: IntentionExtras;
+}
+
+type IntentionExtras = {[key: string]: string | number};
+
+export interface IntentionResult {
+	payment_keys: PaymentKeysItem[];
+	id: string;
+	intention_detail: IntentionDetail;
+	client_secret: string;
+	payment_methods: PaymentMethodsItem[];
+	special_reference: null;
+	extras: Extras;
+	confirmed: boolean;
+	status: string;
+	created: string;
+	card_detail: null;
+	object: string;
+}
+
+interface PaymentKeysItem {
+	integration: number;
+	key: string;
+	gateway_type: string;
+	iframe_id: null;
+}
+
+interface IntentionDetail {
+	amount: number;
+	items: ItemsItem[];
+	currency: string;
+}
+
+interface ItemsItem {
+	name: string;
+	amount: number;
+	description: string;
+	quantity: number;
+}
+
+interface PaymentMethodsItem {
+	integration_id: number;
+	alias: null;
+	name: null;
+	method_type: string;
+	currency: string;
+	live: boolean;
+	use_cvc_with_moto: boolean;
+}
+
+interface Extras {
+	creation_extras: IntentionExtras;
+	confirmation_extras: null;
+}
+
+export interface TransactionResult {
+	paymob_request_id: null;
+	intention: IntentionResult;
+	hmac: string;
+	transaction: Transaction;
+}
+
+interface Transaction {
+	amount_cents: number;
+	created_at: string;
+	currency: string;
+	error_occured: boolean;
+	has_parent_transaction: boolean;
+	id: number;
+	integration_id: number;
+	is_3d_secure: boolean;
+	is_auth: boolean;
+	is_capture: boolean;
+	is_refunded: boolean;
+	is_standalone_payment: boolean;
+	is_voided: boolean;
+	order: Order;
+	owner: number;
+	pending: boolean;
+	source_data: Source_data;
+	success: boolean;
+	receipt: string;
+}
+interface Order {
+	id: number;
+}
+interface Source_data {
+	pan: string;
+	sub_type: string;
+	type: string;
+}

src/interfaces/paypal.ts

@@ -20,6 +20,13 @@ export interface Package {
 	price: number;
 }
 
+export interface Discount {
+	id: string;
+	percentage: number;
+	domain: string;
+	validUntil?: Date;
+}
+
 export type DurationUnit = "weeks" | "days" | "months" | "years";
 
 export interface Payment {
@@ -36,7 +43,6 @@ export interface Payment {
 	commissionTransfer?: string;
 }
 
-
 export interface PaypalPayment {
 	orderId: string;
 	userId: string;
@@ -47,4 +53,4 @@ export interface PaypalPayment {
 	subscriptionDuration: number;
 	subscriptionDurationUnit: DurationUnit;
 	subscriptionExpirationDate: Date;
-}
+}

src/interfaces/ticket.ts

@@ -1,38 +1,48 @@
-import { Type } from "./user";
+import {Module} from ".";
+import {Type} from "./user";
 
 export interface Ticket {
-  id: string;
-  date: string;
-  status: TicketStatus;
-  type: TicketType;
-  reporter: TicketReporter;
-  reportedFrom: string;
-  description: string;
-  subject: string;
-  assignedTo?: string;
+	id: string;
+	date: string;
+	status: TicketStatus;
+	type: TicketType;
+	reporter: TicketReporter;
+	reportedFrom: string;
+	description: string;
+	subject: string;
+	assignedTo?: string;
+	examInformation?: {
+		exams: string[];
+		exam: string;
+		selectedModules: Module[];
+		moduleIndex: number;
+		partIndex: number;
+		exerciseIndex: number;
+		questionIndex: number;
+	};
 }
 
 export interface TicketReporter {
-  id: string;
-  name: string;
-  email: string;
-  type: Type;
+	id: string;
+	name: string;
+	email: string;
+	type: Type;
 }
 
 export type TicketType = "feedback" | "bug" | "help";
-export const TicketTypeLabel: { [key in TicketType]: string } = {
-  feedback: "Feedback",
-  bug: "Bug",
-  help: "Help",
+export const TicketTypeLabel: {[key in TicketType]: string} = {
+	feedback: "Feedback",
+	bug: "Bug",
+	help: "Help",
 };
 
 export type TicketStatus = "submitted" | "in-progress" | "completed";
-export const TicketStatusLabel: { [key in TicketStatus]: string } = {
-  submitted: "Submitted",
-  "in-progress": "In Progress",
-  completed: "Completed",
+export const TicketStatusLabel: {[key in TicketStatus]: string} = {
+	submitted: "Submitted",
+	"in-progress": "In Progress",
+	completed: "Completed",
 };
 
 export interface TicketWithCorporate extends Ticket {
-  corporate?: string;
-}
+	corporate?: string;
+}

src/interfaces/user.ts

@@ -1,147 +1,177 @@
-import {Module} from ".";
-import {InstructorGender} from "./exam";
+import { Module } from ".";
+import { InstructorGender } from "./exam";
 
-export type User = StudentUser | TeacherUser | CorporateUser | AgentUser | AdminUser | DeveloperUser;
+export type User =
+  | StudentUser
+  | TeacherUser
+  | CorporateUser
+  | AgentUser
+  | AdminUser
+  | DeveloperUser;
+export type UserStatus = "active" | "disabled" | "paymentDue";
 
 export interface BasicUser {
-	email: string;
-	name: string;
-	profilePicture: string;
-	id: string;
-	isFirstLogin: boolean;
-	focus: "academic" | "general";
-	levels: {[key in Module]: number};
-	desiredLevels: {[key in Module]: number};
-	type: Type;
-	bio: string;
-	isVerified: boolean;
-	subscriptionExpirationDate?: null | Date;
-	registrationDate?: Date;
-	status: "active" | "disabled" | "paymentDue";
+  email: string;
+  name: string;
+  profilePicture: string;
+  id: string;
+  isFirstLogin: boolean;
+  focus: "academic" | "general";
+  levels: { [key in Module]: number };
+  desiredLevels: { [key in Module]: number };
+  type: Type;
+  bio: string;
+  isVerified: boolean;
+  subscriptionExpirationDate?: null | Date;
+  registrationDate?: Date;
+  status: UserStatus;
 }
 
 export interface StudentUser extends BasicUser {
-	type: "student";
-	preferredGender?: InstructorGender;
-	demographicInformation?: DemographicInformation;
-	preferredTopics?: string[];
+  type: "student";
+  preferredGender?: InstructorGender;
+  demographicInformation?: DemographicInformation;
+  preferredTopics?: string[];
 }
 
 export interface TeacherUser extends BasicUser {
-	type: "teacher";
-	demographicInformation?: DemographicInformation;
+  type: "teacher";
+  demographicInformation?: DemographicInformation;
 }
 
 export interface CorporateUser extends BasicUser {
-	type: "corporate";
-	corporateInformation: CorporateInformation;
-	demographicInformation?: DemographicCorporateInformation;
+  type: "corporate";
+  corporateInformation: CorporateInformation;
+  demographicInformation?: DemographicCorporateInformation;
 }
 
 export interface AgentUser extends BasicUser {
-	type: "agent";
-	agentInformation: AgentInformation;
-	demographicInformation?: DemographicInformation;
+  type: "agent";
+  agentInformation: AgentInformation;
+  demographicInformation?: DemographicInformation;
 }
 
 export interface AdminUser extends BasicUser {
-	type: "admin";
-	demographicInformation?: DemographicInformation;
+  type: "admin";
+  demographicInformation?: DemographicInformation;
 }
 
 export interface DeveloperUser extends BasicUser {
-	type: "developer";
-	preferredGender?: InstructorGender;
-	demographicInformation?: DemographicInformation;
-	preferredTopics?: string[];
+  type: "developer";
+  preferredGender?: InstructorGender;
+  demographicInformation?: DemographicInformation;
+  preferredTopics?: string[];
 }
 
 export interface CorporateInformation {
-	companyInformation: CompanyInformation;
-	monthlyDuration: number;
-	payment?: {
-		value: number;
-		currency: string;
-		commission: number;
-	};
-	referralAgent?: string;
+  companyInformation: CompanyInformation;
+  monthlyDuration: number;
+  payment?: {
+    value: number;
+    currency: string;
+    commission: number;
+  };
+  referralAgent?: string;
 }
 
 export interface AgentInformation {
-	companyName: string;
-	commercialRegistration: string;
+  companyName: string;
+  commercialRegistration: string;
+  companyArabName?: string;
 }
 
 export interface CompanyInformation {
-	name: string;
-	userAmount: number;
+  name: string;
+  userAmount: number;
 }
 
 export interface DemographicInformation {
-	country: string;
-	phone: string;
-	gender: Gender;
-	employment: EmploymentStatus;
-	passport_id?: string;
-	timezone?: string;
+  country: string;
+  phone: string;
+  gender: Gender;
+  employment: EmploymentStatus;
+  passport_id?: string;
+  timezone?: string;
 }
 
 export interface DemographicCorporateInformation {
-	country: string;
-	phone: string;
-	gender: Gender;
-	position: string;
-	timezone?: string;
+  country: string;
+  phone: string;
+  gender: Gender;
+  position: string;
+  timezone?: string;
 }
 
 export type Gender = "male" | "female" | "other";
-export type EmploymentStatus = "employed" | "student" | "self-employed" | "unemployed" | "retired" | "other";
-export const EMPLOYMENT_STATUS: {status: EmploymentStatus; label: string}[] = [
-	{status: "student", label: "Student"},
-	{status: "employed", label: "Employed"},
-	{status: "unemployed", label: "Unemployed"},
-	{status: "self-employed", label: "Self-employed"},
-	{status: "retired", label: "Retired"},
-	{status: "other", label: "Other"},
-];
+export type EmploymentStatus =
+  | "employed"
+  | "student"
+  | "self-employed"
+  | "unemployed"
+  | "retired"
+  | "other";
+export const EMPLOYMENT_STATUS: { status: EmploymentStatus; label: string }[] =
+  [
+    { status: "student", label: "Student" },
+    { status: "employed", label: "Employed" },
+    { status: "unemployed", label: "Unemployed" },
+    { status: "self-employed", label: "Self-employed" },
+    { status: "retired", label: "Retired" },
+    { status: "other", label: "Other" },
+  ];
 
 export interface Stat {
-	id: string;
-	user: string;
-	exam: string;
-	exercise: string;
-	session: string;
-	date: number;
-	module: Module;
-	solutions: any[];
-	type: string;
-	timeSpent?: number;
-	assignment?: string;
-	score: {
-		correct: number;
-		total: number;
-		missing: number;
-	};
+  id: string;
+  user: string;
+  exam: string;
+  exercise: string;
+  session: string;
+  date: number;
+  module: Module;
+  solutions: any[];
+  type: string;
+  timeSpent?: number;
+  assignment?: string;
+  score: {
+    correct: number;
+    total: number;
+    missing: number;
+  };
+  isDisabled?: boolean;
 }
 
 export interface Group {
-	admin: string;
-	name: string;
-	participants: string[];
-	id: string;
-	disableEditing?: boolean;
+  admin: string;
+  name: string;
+  participants: string[];
+  id: string;
+  disableEditing?: boolean;
 }
 
 export interface Code {
-	code: string;
-	creator: string;
-	expiryDate: Date;
-	type: Type;
-	userId?: string;
-	email?: string;
-	name?: string;
-	passport_id?: string;
+  code: string;
+  creator: string;
+  expiryDate: Date;
+  type: Type;
+  creationDate?: string;
+  userId?: string;
+  email?: string;
+  name?: string;
+  passport_id?: string;
 }
 
-export type Type = "student" | "teacher" | "corporate" | "admin" | "developer" | "agent";
-export const userTypes: Type[] = ["student", "teacher", "corporate", "admin", "developer", "agent"];
+export type Type =
+  | "student"
+  | "teacher"
+  | "corporate"
+  | "admin"
+  | "developer"
+  | "agent";
+export const userTypes: Type[] = [
+  "student",
+  "teacher",
+  "corporate",
+  "admin",
+  "developer",
+  "agent",
+];

src/pages/(admin)/BatchCodeGenerator.tsx

@@ -1,319 +1,250 @@
 import Button from "@/components/Low/Button";
 import Checkbox from "@/components/Low/Checkbox";
-import { PERMISSIONS } from "@/constants/userPermissions";
+import {PERMISSIONS} from "@/constants/userPermissions";
 import useUsers from "@/hooks/useUsers";
-import { Type, User } from "@/interfaces/user";
-import { USER_TYPE_LABELS } from "@/resources/user";
+import {Type, User} from "@/interfaces/user";
+import {USER_TYPE_LABELS} from "@/resources/user";
 import axios from "axios";
 import clsx from "clsx";
-import { capitalize, uniqBy } from "lodash";
+import {capitalize, uniqBy} from "lodash";
 import moment from "moment";
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
 import ReactDatePicker from "react-datepicker";
-import { toast } from "react-toastify";
+import {toast} from "react-toastify";
 import ShortUniqueId from "short-unique-id";
-import { useFilePicker } from "use-file-picker";
+import {useFilePicker} from "use-file-picker";
 import readXlsxFile from "read-excel-file";
 import Modal from "@/components/Modal";
-import { BsFileEarmarkEaselFill, BsQuestionCircleFill } from "react-icons/bs";
+import {BsFileEarmarkEaselFill, 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 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"],
+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);
+export default function BatchCodeGenerator({user}: {user: User}) {
+	const [infos, setInfos] = useState<{email: string; name: string; passport_id: string}[]>([]);
+	const [isLoading, setIsLoading] = useState(false);
+	const [expiryDate, setExpiryDate] = useState<Date | null>(
+		user?.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).toDate() : null,
+	);
+	const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
+	const [type, setType] = useState<Type>("student");
+	const [showHelp, setShowHelp] = useState(false);
 
-  const { users } = useUsers();
+	const {users} = useUsers();
 
-  const { openFilePicker, filesContent, clear } = useFilePicker({
-    accept: ".xlsx",
-    multiple: false,
-    readAs: "ArrayBuffer",
-  });
+	const {openFilePicker, filesContent, clear} = useFilePicker({
+		accept: ".xlsx",
+		multiple: false,
+		readAs: "ArrayBuffer",
+	});
 
-  useEffect(() => {
-    if (user && (user.type === "corporate" || user.type === "teacher")) {
-      setExpiryDate(user.subscriptionExpirationDate || null);
-      setIsExpiryDateEnabled(!!user.subscriptionExpirationDate);
-    }
-  }, [user]);
+	useEffect(() => console.log(expiryDate), [expiryDate]);
 
-  useEffect(() => {
-    if (!isExpiryDateEnabled) setExpiryDate(null);
-  }, [isExpiryDateEnabled]);
+	useEffect(() => {
+		if (!isExpiryDateEnabled) setExpiryDate(null);
+	}, [isExpiryDateEnabled]);
 
-  useEffect(() => {
-    if (filesContent.length > 0) {
-      const file = filesContent[0];
-      readXlsxFile(file.content).then((rows) => {
-        try {
-          const information = uniqBy(
-            rows
-              .map((row) => {
-                const [
-                  firstName,
-                  lastName,
-                  country,
-                  passport_id,
-                  email,
-                  ...phone
-                ] = row as string[];
-                return EMAIL_REGEX.test(email.toString().trim())
-                  ? {
-                      email: email.toString().trim().toLowerCase(),
-                      name: `${firstName ?? ""} ${lastName ?? ""}`.trim(),
-                      passport_id: passport_id?.toString().trim() || undefined,
-                    }
-                  : undefined;
-              })
-              .filter((x) => !!x) as typeof infos,
-            (x) => x.email,
-          );
+	useEffect(() => {
+		if (filesContent.length > 0) {
+			const file = filesContent[0];
+			readXlsxFile(file.content).then((rows) => {
+				try {
+					const information = uniqBy(
+						rows
+							.map((row) => {
+								const [firstName, lastName, country, passport_id, email, ...phone] = row as string[];
+								return EMAIL_REGEX.test(email.toString().trim())
+									? {
+											email: email.toString().trim().toLowerCase(),
+											name: `${firstName ?? ""} ${lastName ?? ""}`.trim(),
+											passport_id: passport_id?.toString().trim() || undefined,
+									  }
+									: undefined;
+							})
+							.filter((x) => !!x) as typeof infos,
+						(x) => x.email,
+					);
 
-          if (information.length === 0) {
-            toast.error(
-              "Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!",
-            );
-            return clear();
-          }
+					if (information.length === 0) {
+						toast.error(
+							"Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!",
+						);
+						return clear();
+					}
 
-          setInfos(information);
-        } catch {
-          toast.error(
-            "Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!",
-          );
-          return clear();
-        }
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filesContent]);
+					setInfos(information);
+				} catch {
+					toast.error(
+						"Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!",
+					);
+					return clear();
+				}
+			});
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [filesContent]);
 
-  const generateAndInvite = async () => {
-    const newUsers = infos.filter(
-      (x) => !users.map((u) => u.email).includes(x.email),
-    );
-    const existingUsers = infos
-      .filter((x) => users.map((u) => u.email).includes(x.email))
-      .map((i) => users.find((u) => u.email === i.email))
-      .filter((x) => !!x && x.type === "student") as User[];
+	const generateAndInvite = async () => {
+		const newUsers = infos.filter((x) => !users.map((u) => u.email).includes(x.email));
+		const existingUsers = infos
+			.filter((x) => users.map((u) => u.email).includes(x.email))
+			.map((i) => users.find((u) => u.email === i.email))
+			.filter((x) => !!x && x.type === "student") as User[];
 
-    const newUsersSentence =
-      newUsers.length > 0 ? `generate ${newUsers.length} code(s)` : undefined;
-    const existingUsersSentence =
-      existingUsers.length > 0
-        ? `invite ${existingUsers.length} registered student(s)`
-        : undefined;
-    if (
-      !confirm(
-        `You are about to ${[newUsersSentence, existingUsersSentence].filter((x) => !!x).join(" and ")}, are you sure you want to continue?`,
-      )
-    )
-      return;
+		const newUsersSentence = newUsers.length > 0 ? `generate ${newUsers.length} code(s)` : undefined;
+		const existingUsersSentence = existingUsers.length > 0 ? `invite ${existingUsers.length} registered student(s)` : undefined;
+		if (
+			!confirm(
+				`You are about to ${[newUsersSentence, existingUsersSentence].filter((x) => !!x).join(" and ")}, are you sure you want to continue?`,
+			)
+		)
+			return;
 
-    setIsLoading(true);
-    Promise.all(
-      existingUsers.map(
-        async (u) =>
-          await axios.post(`/api/invites`, { to: u.id, from: user.id }),
-      ),
-    )
-      .then(() =>
-        toast.success(
-          `Successfully invited ${existingUsers.length} registered student(s)!`,
-        ),
-      )
-      .finally(() => {
-        if (newUsers.length === 0) setIsLoading(false);
-      });
+		setIsLoading(true);
+		Promise.all(existingUsers.map(async (u) => await axios.post(`/api/invites`, {to: u.id, from: user.id})))
+			.then(() => toast.success(`Successfully invited ${existingUsers.length} registered student(s)!`))
+			.finally(() => {
+				if (newUsers.length === 0) setIsLoading(false);
+			});
 
-    if (newUsers.length > 0) generateCode(type, newUsers);
-    setInfos([]);
-  };
+		if (newUsers.length > 0) generateCode(type, newUsers);
+		setInfos([]);
+	};
 
-  const generateCode = (type: Type, informations: typeof infos) => {
-    const uid = new ShortUniqueId();
-    const codes = informations.map(() => uid.randomUUID(6));
+	const generateCode = (type: Type, informations: typeof infos) => {
+		const uid = new ShortUniqueId();
+		const codes = informations.map(() => uid.randomUUID(6));
 
-    setIsLoading(true);
-    axios
-      .post<{ ok: boolean; valid?: number; reason?: string }>("/api/code", {
-        type,
-        codes,
-        infos: informations,
-        expiryDate,
-      })
-      .then(({ data, status }) => {
-        if (data.ok) {
-          toast.success(
-            `Successfully generated${data.valid ? ` ${data.valid}/${informations.length}` : ""} ${capitalize(
-              type,
-            )} codes and they have been notified by e-mail!`,
-            { toastId: "success" },
-          );
-          return;
-        }
+		setIsLoading(true);
+		axios
+			.post<{ok: boolean; valid?: number; reason?: string}>("/api/code", {
+				type,
+				codes,
+				infos: informations,
+				expiryDate,
+			})
+			.then(({data, status}) => {
+				if (data.ok) {
+					toast.success(
+						`Successfully generated${data.valid ? ` ${data.valid}/${informations.length}` : ""} ${capitalize(
+							type,
+						)} codes and they have been notified by e-mail!`,
+						{toastId: "success"},
+					);
+					return;
+				}
 
-        if (status === 403) {
-          toast.error(data.reason, { toastId: "forbidden" });
-        }
-      })
-      .catch(({ response: { status, data } }) => {
-        if (status === 403) {
-          toast.error(data.reason, { toastId: "forbidden" });
-          return;
-        }
+				if (status === 403) {
+					toast.error(data.reason, {toastId: "forbidden"});
+				}
+			})
+			.catch(({response: {status, data}}) => {
+				if (status === 403) {
+					toast.error(data.reason, {toastId: "forbidden"});
+					return;
+				}
 
-        toast.error(`Something went wrong, please try again later!`, {
-          toastId: "error",
-        });
-      })
-      .finally(() => {
-        setIsLoading(false);
-        return clear();
-      });
-  };
+				toast.error(`Something went wrong, please try again later!`, {
+					toastId: "error",
+				});
+			})
+			.finally(() => {
+				setIsLoading(false);
+				return clear();
+			});
+	};
 
-  return (
-    <>
-      <Modal
-        isOpen={showHelp}
-        onClose={() => setShowHelp(false)}
-        title="Excel File Format"
-      >
-        <div className="mt-4 flex flex-col gap-2">
-          <span>Please upload an Excel file with the following format:</span>
-          <table className="w-full">
-            <thead>
-              <tr>
-                <th className="border border-neutral-200 px-2 py-1">
-                  First Name
-                </th>
-                <th className="border border-neutral-200 px-2 py-1">
-                  Last Name
-                </th>
-                <th className="border border-neutral-200 px-2 py-1">Country</th>
-                <th className="border border-neutral-200 px-2 py-1">
-                  Passport/National ID
-                </th>
-                <th className="border border-neutral-200 px-2 py-1">E-mail</th>
-                <th className="border border-neutral-200 px-2 py-1">
-                  Phone Number
-                </th>
-              </tr>
-            </thead>
-          </table>
-          <span className="mt-4">
-            <b>Notes:</b>
-            <ul>
-              <li>- All incorrect e-mails will be ignored;</li>
-              <li>- All already registered e-mails will be ignored;</li>
-              <li>
-                - You may have a header row with the format above, however, it
-                is not necessary;
-              </li>
-              <li>
-                - All of the e-mails in the file will receive an e-mail to join
-                EnCoach with the role selected below.
-              </li>
-            </ul>
-          </span>
-        </div>
-      </Modal>
-      <div className="border-mti-gray-platinum flex flex-col gap-4 rounded-xl border p-4">
-        <div className="flex items-end justify-between">
-          <label className="text-mti-gray-dim text-base font-normal">
-            Choose an Excel file
-          </label>
-          <div
-            className="tooltip cursor-pointer"
-            data-tip="Excel File Format"
-            onClick={() => setShowHelp(true)}
-          >
-            <BsQuestionCircleFill />
-          </div>
-        </div>
-        <Button
-          onClick={openFilePicker}
-          isLoading={isLoading}
-          disabled={isLoading}
-        >
-          {filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
-        </Button>
-        {user && (user.type === "developer" || user.type === "admin") && (
-          <>
-            <div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
-              <label className="text-mti-gray-dim text-base font-normal">
-                Expiry Date
-              </label>
-              <Checkbox
-                isChecked={isExpiryDateEnabled}
-                onChange={setIsExpiryDateEnabled}
-              >
-                Enabled
-              </Checkbox>
-            </div>
-            {isExpiryDateEnabled && (
-              <ReactDatePicker
-                className={clsx(
-                  "flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
-                  "hover:border-mti-purple tooltip",
-                  "transition duration-300 ease-in-out",
-                )}
-                filterDate={(date) => moment(date).isAfter(new Date())}
-                dateFormat="dd/MM/yyyy"
-                selected={expiryDate}
-                onChange={(date) => setExpiryDate(date)}
-              />
-            )}
-          </>
-        )}
-        <label className="text-mti-gray-dim text-base font-normal">
-          Select the type of user they should be
-        </label>
-        {user && (
-          <select
-            defaultValue="student"
-            onChange={(e) => setType(e.target.value as typeof user.type)}
-            className="flex min-h-[70px] w-full min-w-[350px] cursor-pointer justify-center rounded-full border bg-white p-6 text-sm font-normal focus:outline-none"
-          >
-            {Object.keys(USER_TYPE_LABELS)
-              .filter((x) =>
-                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>
-              ))}
-          </select>
-        )}
-        <Button
-          onClick={generateAndInvite}
-          disabled={
-            infos.length === 0 || (isExpiryDateEnabled ? !expiryDate : false)
-          }
-        >
-          Generate & Send
-        </Button>
-      </div>
-    </>
-  );
+	return (
+		<>
+			<Modal isOpen={showHelp} onClose={() => setShowHelp(false)} title="Excel File Format">
+				<div className="mt-4 flex flex-col gap-2">
+					<span>Please upload an Excel file with the following format:</span>
+					<table className="w-full">
+						<thead>
+							<tr>
+								<th className="border border-neutral-200 px-2 py-1">First Name</th>
+								<th className="border border-neutral-200 px-2 py-1">Last Name</th>
+								<th className="border border-neutral-200 px-2 py-1">Country</th>
+								<th className="border border-neutral-200 px-2 py-1">Passport/National ID</th>
+								<th className="border border-neutral-200 px-2 py-1">E-mail</th>
+								<th className="border border-neutral-200 px-2 py-1">Phone Number</th>
+							</tr>
+						</thead>
+					</table>
+					<span className="mt-4">
+						<b>Notes:</b>
+						<ul>
+							<li>- All incorrect e-mails will be ignored;</li>
+							<li>- All already registered e-mails will be ignored;</li>
+							<li>- You may have a header row with the format above, however, it is not necessary;</li>
+							<li>- All of the e-mails in the file will receive an e-mail to join EnCoach with the role selected below.</li>
+						</ul>
+					</span>
+				</div>
+			</Modal>
+			<div className="border-mti-gray-platinum flex flex-col gap-4 rounded-xl border p-4">
+				<div className="flex items-end justify-between">
+					<label className="text-mti-gray-dim text-base font-normal">Choose an Excel file</label>
+					<div className="tooltip cursor-pointer" data-tip="Excel File Format" onClick={() => setShowHelp(true)}>
+						<BsQuestionCircleFill />
+					</div>
+				</div>
+				<Button onClick={openFilePicker} isLoading={isLoading} disabled={isLoading}>
+					{filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
+				</Button>
+				{user && (user.type === "developer" || user.type === "admin" || user.type === "corporate") && (
+					<>
+						<div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
+							<label className="text-mti-gray-dim text-base font-normal">Expiry Date</label>
+							<Checkbox isChecked={isExpiryDateEnabled} onChange={setIsExpiryDateEnabled} disabled={!!user.subscriptionExpirationDate}>
+								Enabled
+							</Checkbox>
+						</div>
+						{isExpiryDateEnabled && (
+							<ReactDatePicker
+								className={clsx(
+									"flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
+									"hover:border-mti-purple tooltip",
+									"transition duration-300 ease-in-out",
+								)}
+								filterDate={(date) =>
+									moment(date).isAfter(new Date()) &&
+									(user.subscriptionExpirationDate ? moment(date).isBefore(user.subscriptionExpirationDate) : true)
+								}
+								dateFormat="dd/MM/yyyy"
+								selected={expiryDate}
+								onChange={(date) => setExpiryDate(date)}
+							/>
+						)}
+					</>
+				)}
+				<label className="text-mti-gray-dim text-base font-normal">Select the type of user they should be</label>
+				{user && (
+					<select
+						defaultValue="student"
+						onChange={(e) => setType(e.target.value as typeof user.type)}
+						className="flex min-h-[70px] w-full min-w-[350px] cursor-pointer justify-center rounded-full border bg-white p-6 text-sm font-normal focus:outline-none">
+						{Object.keys(USER_TYPE_LABELS)
+							.filter((x) => 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>
+							))}
+					</select>
+				)}
+				<Button onClick={generateAndInvite} disabled={infos.length === 0 || (isExpiryDateEnabled ? !expiryDate : false)}>
+					Generate & Send
+				</Button>
+			</div>
+		</>
+	);
 }

src/pages/(admin)/CodeGenerator.tsx

@@ -23,16 +23,12 @@ const USER_TYPE_PERMISSIONS: {[key in Type]: Type[]} = {
 
 export default function CodeGenerator({user}: {user: User}) {
 	const [generatedCode, setGeneratedCode] = useState<string>();
-	const [expiryDate, setExpiryDate] = useState<Date | null>(null);
+	const [expiryDate, setExpiryDate] = useState<Date | null>(
+		user?.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).toDate() : null,
+	);
 	const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
 	const [type, setType] = useState<Type>("student");
 
-	useEffect(() => {
-		if (user && (user.type === "corporate" || user.type === "teacher")) {
-			setExpiryDate(user.subscriptionExpirationDate || null);
-		}
-	}, [user]);
-
 	useEffect(() => {
 		if (!isExpiryDateEnabled) setExpiryDate(null);
 	}, [isExpiryDateEnabled]);
@@ -81,22 +77,25 @@ export default function CodeGenerator({user}: {user: User}) {
 						))}
 				</select>
 			)}
-			{user && (user.type === "developer" || user.type === "admin") && (
+			{user && (user.type === "developer" || user.type === "admin" || user.type === "corporate") && (
 				<>
-					<div className="flex -md:flex-row md:flex-col -md:items-center 2xl:flex-row 2xl:items-center justify-between gap-2">
-						<label className="font-normal text-base text-mti-gray-dim">Expiry Date</label>
-						<Checkbox isChecked={isExpiryDateEnabled} onChange={setIsExpiryDateEnabled}>
+					<div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
+						<label className="text-mti-gray-dim text-base font-normal">Expiry Date</label>
+						<Checkbox isChecked={isExpiryDateEnabled} onChange={setIsExpiryDateEnabled} disabled={!!user.subscriptionExpirationDate}>
 							Enabled
 						</Checkbox>
 					</div>
 					{isExpiryDateEnabled && (
 						<ReactDatePicker
 							className={clsx(
-								"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+								"flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
 								"hover:border-mti-purple tooltip",
 								"transition duration-300 ease-in-out",
 							)}
-							filterDate={(date) => moment(date).isAfter(new Date())}
+							filterDate={(date) =>
+								moment(date).isAfter(new Date()) &&
+								(user.subscriptionExpirationDate ? moment(date).isBefore(user.subscriptionExpirationDate) : true)
+							}
 							dateFormat="dd/MM/yyyy"
 							selected={expiryDate}
 							onChange={(date) => setExpiryDate(date)}

src/pages/(admin)/Lists/CodeList.tsx

@@ -0,0 +1,322 @@
+import Button from "@/components/Low/Button";
+import Checkbox from "@/components/Low/Checkbox";
+import Select from "@/components/Low/Select";
+import useCodes from "@/hooks/useCodes";
+import useUser from "@/hooks/useUser";
+import useUsers from "@/hooks/useUsers";
+import { Code, User } from "@/interfaces/user";
+import { USER_TYPE_LABELS } from "@/resources/user";
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import axios from "axios";
+import moment from "moment";
+import { useEffect, useState } from "react";
+import { BsTrash } from "react-icons/bs";
+import { toast } from "react-toastify";
+
+const columnHelper = createColumnHelper<Code>();
+
+const CreatorCell = ({ id, users }: { id: string; users: User[] }) => {
+  const [creatorUser, setCreatorUser] = useState<User>();
+
+  useEffect(() => {
+    setCreatorUser(users.find((x) => x.id === id));
+  }, [id, users]);
+
+  return (
+    <>
+      {(creatorUser?.type === "corporate"
+        ? creatorUser?.corporateInformation?.companyInformation?.name
+        : creatorUser?.name || "N/A") || "N/A"}{" "}
+      {creatorUser && `(${USER_TYPE_LABELS[creatorUser.type]})`}
+    </>
+  );
+};
+
+export default function CodeList({ user }: { user: User }) {
+  const [selectedCodes, setSelectedCodes] = useState<string[]>([]);
+
+  const [filteredCorporate, setFilteredCorporate] = useState<User | undefined>(
+    user?.type === "corporate" ? user : undefined,
+  );
+  const [filterAvailability, setFilterAvailability] = useState<
+    "in-use" | "unused"
+  >();
+
+  const [filteredCodes, setFilteredCodes] = useState<Code[]>([]);
+
+  const { users } = useUsers();
+  const { codes, reload } = useCodes(
+    user?.type === "corporate" ? user?.id : undefined,
+  );
+
+  useEffect(() => {
+    let result = [...codes];
+    if (filteredCorporate)
+      result = result.filter((x) => x.creator === filteredCorporate.id);
+    if (filterAvailability)
+      result = result.filter((x) =>
+        filterAvailability === "in-use" ? !!x.userId : !x.userId,
+      );
+
+    setFilteredCodes(result);
+  }, [codes, filteredCorporate, filterAvailability]);
+
+  const toggleCode = (id: string) => {
+    setSelectedCodes((prev) =>
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
+    );
+  };
+
+  const toggleAllCodes = (checked: boolean) => {
+    if (checked)
+      return setSelectedCodes(
+        filteredCodes.filter((x) => !x.userId).map((x) => x.code),
+      );
+
+    return setSelectedCodes([]);
+  };
+
+  const deleteCodes = async (codes: string[]) => {
+    if (
+      !confirm(`Are you sure you want to delete these ${codes.length} code(s)?`)
+    )
+      return;
+
+    const params = new URLSearchParams();
+    codes.forEach((code) => params.append("code", code));
+
+    axios
+      .delete(`/api/code?${params.toString()}`)
+      .then(() => {
+        toast.success(`Deleted the codes!`);
+        setSelectedCodes([]);
+      })
+      .catch((reason) => {
+        if (reason.response.status === 404) {
+          toast.error("Code not found!");
+          return;
+        }
+
+        if (reason.response.status === 403) {
+          toast.error("You do not have permission to delete this code!");
+          return;
+        }
+
+        toast.error("Something went wrong, please try again later.");
+      })
+      .finally(reload);
+  };
+
+  const deleteCode = async (code: Code) => {
+    if (!confirm(`Are you sure you want to delete this "${code.code}" code?`))
+      return;
+
+    axios
+      .delete(`/api/code/${code.code}`)
+      .then(() => toast.success(`Deleted the "${code.code}" exam`))
+      .catch((reason) => {
+        if (reason.response.status === 404) {
+          toast.error("Code not found!");
+          return;
+        }
+
+        if (reason.response.status === 403) {
+          toast.error("You do not have permission to delete this code!");
+          return;
+        }
+
+        toast.error("Something went wrong, please try again later.");
+      })
+      .finally(reload);
+  };
+
+  const defaultColumns = [
+    columnHelper.accessor("code", {
+      id: "code",
+      header: () => (
+        <Checkbox
+          disabled={filteredCodes.filter((x) => !x.userId).length === 0}
+          isChecked={
+            selectedCodes.length ===
+              filteredCodes.filter((x) => !x.userId).length &&
+            filteredCodes.filter((x) => !x.userId).length > 0
+          }
+          onChange={(checked) => toggleAllCodes(checked)}
+        >
+          {""}
+        </Checkbox>
+      ),
+      cell: (info) =>
+        !info.row.original.userId ? (
+          <Checkbox
+            isChecked={selectedCodes.includes(info.getValue())}
+            onChange={() => toggleCode(info.getValue())}
+          >
+            {""}
+          </Checkbox>
+        ) : null,
+    }),
+    columnHelper.accessor("code", {
+      header: "Code",
+      cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor("creationDate", {
+      header: "Creation Date",
+      cell: (info) =>
+        info.getValue() ? moment(info.getValue()).format("DD/MM/YYYY") : "N/A",
+    }),
+    columnHelper.accessor("email", {
+      header: "Invited E-mail",
+      cell: (info) => info.getValue() || "N/A",
+    }),
+    columnHelper.accessor("creator", {
+      header: "Creator",
+      cell: (info) => <CreatorCell id={info.getValue()} users={users} />,
+    }),
+    columnHelper.accessor("userId", {
+      header: "Availability",
+      cell: (info) =>
+        info.getValue() ? (
+          <span className="flex gap-1 items-center text-mti-green">
+            <div className="w-2 h-2 rounded-full bg-mti-green" /> In Use
+          </span>
+        ) : (
+          <span className="flex gap-1 items-center text-mti-red">
+            <div className="w-2 h-2 rounded-full bg-mti-red" /> Unused
+          </span>
+        ),
+    }),
+    {
+      header: "",
+      id: "actions",
+      cell: ({ row }: { row: { original: Code } }) => {
+        return (
+          <div className="flex gap-4">
+            {!row.original.userId && (
+              <div
+                data-tip="Delete"
+                className="cursor-pointer tooltip"
+                onClick={() => deleteCode(row.original)}
+              >
+                <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+              </div>
+            )}
+          </div>
+        );
+      },
+    },
+  ];
+
+  const table = useReactTable({
+    data: filteredCodes,
+    columns: defaultColumns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <>
+      <div className="flex items-center justify-between pb-4 pt-1">
+        <div className="flex items-center gap-4">
+          <Select
+            className="!w-96 !py-1"
+            disabled={user?.type === "corporate"}
+            isClearable
+            placeholder="Corporate"
+            value={
+              filteredCorporate
+                ? {
+                    label: `${
+                      filteredCorporate.type === "corporate"
+                        ? filteredCorporate.corporateInformation
+                            ?.companyInformation?.name || filteredCorporate.name
+                        : filteredCorporate.name
+                    } (${USER_TYPE_LABELS[filteredCorporate.type]})`,
+                    value: filteredCorporate.id,
+                  }
+                : null
+            }
+            options={users
+              .filter((x) =>
+                ["admin", "developer", "corporate"].includes(x.type),
+              )
+              .map((x) => ({
+                label: `${x.type === "corporate" ? x.corporateInformation?.companyInformation?.name || x.name : x.name} (${
+                  USER_TYPE_LABELS[x.type]
+                })`,
+                value: x.id,
+                user: x,
+              }))}
+            onChange={(value) =>
+              setFilteredCorporate(
+                value ? users.find((x) => x.id === value?.value) : undefined,
+              )
+            }
+          />
+          <Select
+            className="!w-96 !py-1"
+            placeholder="Availability"
+            isClearable
+            options={[
+              { label: "In Use", value: "in-use" },
+              { label: "Unused", value: "unused" },
+            ]}
+            onChange={(value) =>
+              setFilterAvailability(
+                value ? (value.value as typeof filterAvailability) : undefined,
+              )
+            }
+          />
+        </div>
+        <div className="flex gap-4 items-center">
+          <span>{selectedCodes.length} code(s) selected</span>
+          <Button
+            disabled={selectedCodes.length === 0}
+            variant="outline"
+            color="red"
+            className="!py-1 px-10"
+            onClick={() => deleteCodes(selectedCodes)}
+          >
+            Delete
+          </Button>
+        </div>
+      </div>
+      <table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+        <thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <th className="p-4 text-left" key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody className="px-2">
+          {table.getRowModel().rows.map((row) => (
+            <tr
+              className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
+              key={row.id}
+            >
+              {row.getVisibleCells().map((cell) => (
+                <td className="px-4 py-2" key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
+  );
+}

src/pages/(admin)/Lists/DiscountList.tsx

@@ -0,0 +1,307 @@
+import Button from "@/components/Low/Button";
+import Checkbox from "@/components/Low/Checkbox";
+import Input from "@/components/Low/Input";
+import Select from "@/components/Low/Select";
+import Modal from "@/components/Modal";
+import useCodes from "@/hooks/useCodes";
+import useDiscounts from "@/hooks/useDiscounts";
+import useUser from "@/hooks/useUser";
+import useUsers from "@/hooks/useUsers";
+import {Discount} from "@/interfaces/paypal";
+import {Code, User} from "@/interfaces/user";
+import {USER_TYPE_LABELS} from "@/resources/user";
+import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import axios from "axios";
+import clsx from "clsx";
+import moment from "moment";
+import {useEffect, useState} from "react";
+import ReactDatePicker from "react-datepicker";
+import {BsPencil, BsTrash} from "react-icons/bs";
+import {toast} from "react-toastify";
+
+const columnHelper = createColumnHelper<Discount>();
+
+const DiscountCreator = ({discount, onClose}: {discount?: Discount; onClose: () => void}) => {
+	const [percentage, setPercentage] = useState(discount?.percentage);
+	const [domain, setDomain] = useState(discount?.domain);
+	const [validUntil, setValidUntil] = useState(discount?.validUntil);
+
+	const submit = async () => {
+		const body = {percentage, domain, validUntil: validUntil?.toISOString() || undefined};
+
+		if (discount) {
+			return axios
+				.patch(`/api/discounts/${discount.id}`, body)
+				.then(() => {
+					toast.success("Discount has been edited successfully!");
+					onClose();
+				})
+				.catch(() => {
+					toast.error("Something went wrong, please try again later!");
+				});
+		}
+
+		return axios
+			.post(`/api/discounts`, body)
+			.then(() => {
+				toast.success("New discount has been created successfully!");
+				onClose();
+			})
+			.catch(() => {
+				toast.error("Something went wrong, please try again later!");
+			});
+	};
+
+	return (
+		<div className="flex flex-col gap-8 py-8">
+			<div className="w-full grid grid-cols-1 gap-8">
+				<div className="flex flex-col gap-3">
+					<label className="font-normal text-base text-mti-gray-dim">Domain *</label>
+					<div className="flex gap-4 items-center">
+						<Input
+							defaultValue={domain}
+							placeholder="encoach.com"
+							name="domain"
+							type="text"
+							onChange={(e) => setDomain(e.replaceAll("@", ""))}
+						/>
+					</div>
+				</div>
+				<div className="flex flex-col gap-3">
+					<label className="font-normal text-base text-mti-gray-dim">Percentage (in %) *</label>
+					<div className="flex gap-4 items-center">
+						<Input
+							defaultValue={percentage}
+							placeholder="20"
+							name="percentage"
+							type="number"
+							onChange={(e) => setPercentage(parseFloat(e))}
+						/>
+					</div>
+				</div>
+				<div className="flex flex-col gap-3 w-full">
+					<label className="font-normal text-base text-mti-gray-dim">Valid Until</label>
+					<div className="flex gap-4 items-center w-full">
+						<ReactDatePicker
+							wrapperClassName="w-full z-[900]"
+							calendarClassName="z-[900]"
+							popperClassName="z-[900]"
+							isClearable
+							className={clsx(
+								"flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
+								"hover:border-mti-purple tooltip",
+								"transition duration-300 ease-in-out",
+							)}
+							filterDate={(date) => moment(date).isAfter(new Date())}
+							dateFormat="dd/MM/yyyy"
+							selected={validUntil}
+							onChange={(date) => setValidUntil(date ? moment(date).endOf("day").toDate() : undefined)}
+						/>
+					</div>
+				</div>
+			</div>
+			<div className="flex w-full justify-end items-center gap-8 mt-8">
+				<Button variant="outline" color="red" className="w-full max-w-[200px]" onClick={onClose}>
+					Cancel
+				</Button>
+				<Button className="w-full max-w-[200px]" onClick={submit} disabled={!percentage || !domain}>
+					Submit
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+export default function DiscountList({user}: {user: User}) {
+	const [selectedDiscounts, setSelectedDiscounts] = useState<string[]>([]);
+
+	const [isCreating, setIsCreating] = useState(false);
+	const [editingDiscount, setEditingDiscount] = useState<Discount>();
+
+	const [filteredDiscounts, setFilteredDiscounts] = useState<Discount[]>([]);
+
+	const {users} = useUsers();
+	const {discounts, reload} = useDiscounts();
+
+	useEffect(() => {
+		setFilteredDiscounts(discounts);
+	}, [discounts]);
+
+	const toggleDiscount = (id: string) => {
+		setSelectedDiscounts((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
+	};
+
+	const toggleAllDiscounts = (checked: boolean) => {
+		if (checked) return setSelectedDiscounts(filteredDiscounts.map((x) => x.id));
+
+		return setSelectedDiscounts([]);
+	};
+
+	const deleteDiscounts = async (discounts: string[]) => {
+		if (!confirm(`Are you sure you want to delete these ${discounts.length} discount(s)?`)) return;
+
+		const params = new URLSearchParams();
+		discounts.forEach((code) => params.append("discount", code));
+
+		axios
+			.delete(`/api/discounts?${params.toString()}`)
+			.then(() => toast.success(`Deleted the discount(s)!`))
+			.catch((reason) => {
+				if (reason.response.status === 404) {
+					toast.error("Discount not found!");
+					return;
+				}
+
+				if (reason.response.status === 403) {
+					toast.error("You do not have permission to delete this discount!");
+					return;
+				}
+
+				toast.error("Something went wrong, please try again later.");
+			})
+			.finally(reload);
+	};
+
+	const deleteDiscount = async (discount: Discount) => {
+		if (!confirm(`Are you sure you want to delete this "${discount.id}" discount?`)) return;
+
+		axios
+			.delete(`/api/discounts/${discount.id}`)
+			.then(() => toast.success(`Deleted the "${discount.id}" discount`))
+			.catch((reason) => {
+				if (reason.response.status === 404) {
+					toast.error("Code not found!");
+					return;
+				}
+
+				if (reason.response.status === 403) {
+					toast.error("You do not have permission to delete this discount!");
+					return;
+				}
+
+				toast.error("Something went wrong, please try again later.");
+			})
+			.finally(reload);
+	};
+
+	const defaultColumns = [
+		columnHelper.accessor("id", {
+			id: "id",
+			header: () => (
+				<Checkbox
+					disabled={filteredDiscounts.length === 0}
+					isChecked={selectedDiscounts.length === filteredDiscounts.length && filteredDiscounts.length > 0}
+					onChange={(checked) => toggleAllDiscounts(checked)}>
+					{""}
+				</Checkbox>
+			),
+			cell: (info) => (
+				<Checkbox isChecked={selectedDiscounts.includes(info.getValue())} onChange={() => toggleDiscount(info.getValue())}>
+					{""}
+				</Checkbox>
+			),
+		}),
+		columnHelper.accessor("id", {
+			header: "ID",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("domain", {
+			header: "Domain",
+			cell: (info) => `@${info.getValue()}`,
+		}),
+		columnHelper.accessor("percentage", {
+			header: "Percentage",
+			cell: (info) => `${info.getValue()}%`,
+		}),
+		columnHelper.accessor("validUntil", {
+			header: "Valid Until",
+			cell: (info) => (info.getValue() ? moment(info.getValue()).format("DD/MM/YYYY") : ""),
+		}),
+		{
+			header: "",
+			id: "actions",
+			cell: ({row}: {row: {original: Discount}}) => {
+				return (
+					<div className="flex gap-4">
+						<div
+							data-tip="Delete"
+							className="cursor-pointer tooltip"
+							onClick={() => {
+								setEditingDiscount(row.original);
+							}}>
+							<BsPencil className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+						</div>
+						<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteDiscount(row.original)}>
+							<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+						</div>
+					</div>
+				);
+			},
+		},
+	];
+
+	const table = useReactTable({
+		data: filteredDiscounts,
+		columns: defaultColumns,
+		getCoreRowModel: getCoreRowModel(),
+	});
+
+	const closeModal = () => {
+		setIsCreating(false);
+		setEditingDiscount(undefined);
+		reload();
+	};
+
+	return (
+		<>
+			<Modal
+				isOpen={isCreating || !!editingDiscount}
+				onClose={closeModal}
+				title={editingDiscount ? `Editing ${editingDiscount.id}` : "New Discount"}>
+				<DiscountCreator onClose={closeModal} discount={editingDiscount} />
+			</Modal>
+			<div className="flex items-center justify-end pb-4 pt-1">
+				<div className="flex gap-4 items-center">
+					<span>{selectedDiscounts.length} code(s) selected</span>
+					<Button
+						disabled={selectedDiscounts.length === 0}
+						variant="outline"
+						color="red"
+						className="!py-1 px-10"
+						onClick={() => deleteDiscounts(selectedDiscounts)}>
+						Delete
+					</Button>
+				</div>
+			</div>
+			<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+				<thead>
+					{table.getHeaderGroups().map((headerGroup) => (
+						<tr key={headerGroup.id}>
+							{headerGroup.headers.map((header) => (
+								<th className="p-4 text-left" key={header.id}>
+									{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+								</th>
+							))}
+						</tr>
+					))}
+				</thead>
+				<tbody className="px-2">
+					{table.getRowModel().rows.map((row) => (
+						<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
+							{row.getVisibleCells().map((cell) => (
+								<td className="px-4 py-2" key={cell.id}>
+									{flexRender(cell.column.columnDef.cell, cell.getContext())}
+								</td>
+							))}
+						</tr>
+					))}
+				</tbody>
+			</table>
+			<button
+				onClick={() => setIsCreating(true)}
+				className="w-full py-2 bg-mti-purple-light hover:bg-mti-purple transition ease-in-out duration-300 text-white">
+				New Discount
+			</button>
+		</>
+	);
+}

src/pages/(admin)/Lists/GroupList.tsx

@@ -3,400 +3,335 @@ import Input from "@/components/Low/Input";
 import Modal from "@/components/Modal";
 import useGroups from "@/hooks/useGroups";
 import useUsers from "@/hooks/useUsers";
-import { Group, User } from "@/interfaces/user";
-import {
-  createColumnHelper,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
+import {CorporateUser, Group, User} from "@/interfaces/user";
+import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
 import axios from "axios";
-import { capitalize, uniq } from "lodash";
-import { useEffect, useState } from "react";
-import { BsPencil, BsQuestionCircleFill, BsTrash } from "react-icons/bs";
+import {capitalize, uniq} from "lodash";
+import {useEffect, useState} from "react";
+import {BsPencil, BsQuestionCircleFill, BsTrash} from "react-icons/bs";
 import Select from "react-select";
-import { toast } from "react-toastify";
+import {toast} from "react-toastify";
 import readXlsxFile from "read-excel-file";
-import { useFilePicker } from "use-file-picker";
+import {useFilePicker} from "use-file-picker";
+import {getUserCorporate} from "@/utils/groups";
+import { isAgentUser, isCorporateUser } from "@/resources/user";
 
 const columnHelper = createColumnHelper<Group>();
-const EMAIL_REGEX = new RegExp(
-  /^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/,
-);
+const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
+
+const LinkedCorporate = ({userId, users, groups}: {userId: string, users: User[], groups: Group[]}) => {
+	const [companyName, setCompanyName] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+
+	useEffect(() => {		
+		const user = users.find((u) => u.id === userId)
+		if (!user) return setCompanyName("")
+		
+		if (isCorporateUser(user)) return setCompanyName(user.corporateInformation?.companyInformation?.name || user.name)
+		if (isAgentUser(user)) return setCompanyName(user.agentInformation?.companyName || user.name)
+		
+		const belongingGroups = groups.filter((x) => x.participants.includes(userId))
+		const belongingGroupsAdmins = belongingGroups.map((x) => users.find((u) => u.id === x.admin)).filter((x) => !!x && isCorporateUser(x))
+		
+		if (belongingGroupsAdmins.length === 0) return setCompanyName("")
+		
+		const admin = (belongingGroupsAdmins[0] as CorporateUser)
+		setCompanyName(admin.corporateInformation?.companyInformation.name || admin.name)
+	}, [userId, users, groups]);
+
+	return isLoading ? <span className="animate-pulse">Loading...</span> : <>{companyName}</>;
+};
 
 interface CreateDialogProps {
-  user: User;
-  users: User[];
-  group?: Group;
-  onClose: () => void;
+	user: User;
+	users: User[];
+	group?: Group;
+	onClose: () => void;
 }
 
-const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
-  const [name, setName] = useState<string | undefined>(
-    group?.name || undefined,
-  );
-  const [admin, setAdmin] = useState<string>(group?.admin || user.id);
-  const [participants, setParticipants] = useState<string[]>(
-    group?.participants || [],
-  );
-  const [isLoading, setIsLoading] = useState(false);
+const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
+	const [name, setName] = useState<string | undefined>(group?.name || undefined);
+	const [admin, setAdmin] = useState<string>(group?.admin || user.id);
+	const [participants, setParticipants] = useState<string[]>(group?.participants || []);
+	const [isLoading, setIsLoading] = useState(false);
 
-  const { openFilePicker, filesContent, clear } = useFilePicker({
-    accept: ".xlsx",
-    multiple: false,
-    readAs: "ArrayBuffer",
-  });
+	const {openFilePicker, filesContent, clear} = useFilePicker({
+		accept: ".xlsx",
+		multiple: false,
+		readAs: "ArrayBuffer",
+	});
 
-  useEffect(() => {
-    if (filesContent.length > 0) {
-      setIsLoading(true);
+	useEffect(() => {
+		if (filesContent.length > 0) {
+			setIsLoading(true);
 
-      const file = filesContent[0];
-      readXlsxFile(file.content).then((rows) => {
-        const emails = uniq(
-          rows
-            .map((row) => {
-              const [email] = row as string[];
-              return EMAIL_REGEX.test(email) &&
-                !users.map((u) => u.email).includes(email)
-                ? email.toString().trim()
-                : undefined;
-            })
-            .filter((x) => !!x),
-        );
+			const file = filesContent[0];
+			readXlsxFile(file.content).then((rows) => {
+				const emails = uniq(
+					rows
+						.map((row) => {
+							const [email] = row as string[];
+							return EMAIL_REGEX.test(email) && !users.map((u) => u.email).includes(email) ? email.toString().trim() : undefined;
+						})
+						.filter((x) => !!x),
+				);
 
-        if (emails.length === 0) {
-          toast.error("Please upload an Excel file containing e-mails!");
-          clear();
-          setIsLoading(false);
-          return;
-        }
+				if (emails.length === 0) {
+					toast.error("Please upload an Excel file containing e-mails!");
+					clear();
+					setIsLoading(false);
+					return;
+				}
 
-        const emailUsers = [...new Set(emails)]
-          .map((x) => users.find((y) => y.email.toLowerCase() === x))
-          .filter((x) => x !== undefined);
-        const filteredUsers = emailUsers.filter(
-          (x) =>
-            ((user.type === "developer" ||
-              user.type === "admin" ||
-              user.type === "corporate") &&
-              (x?.type === "student" || x?.type === "teacher")) ||
-            (user.type === "teacher" && x?.type === "student"),
-        );
+				const emailUsers = [...new Set(emails)].map((x) => users.find((y) => y.email.toLowerCase() === x)).filter((x) => x !== undefined);
+				const filteredUsers = emailUsers.filter(
+					(x) =>
+						((user.type === "developer" || user.type === "admin" || user.type === "corporate") &&
+							(x?.type === "student" || x?.type === "teacher")) ||
+						(user.type === "teacher" && x?.type === "student"),
+				);
 
-        setParticipants(filteredUsers.filter((x) => !!x).map((x) => x!.id));
-        toast.success(
-          user.type !== "teacher"
-            ? "Added all teachers and students found in the file you've provided!"
-            : "Added all students found in the file you've provided!",
-          { toastId: "upload-success" },
-        );
-        setIsLoading(false);
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filesContent, user.type, users]);
+				setParticipants(filteredUsers.filter((x) => !!x).map((x) => x!.id));
+				toast.success(
+					user.type !== "teacher"
+						? "Added all teachers and students found in the file you've provided!"
+						: "Added all students found in the file you've provided!",
+					{toastId: "upload-success"},
+				);
+				setIsLoading(false);
+			});
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [filesContent, user.type, users]);
 
-  const submit = () => {
-    setIsLoading(true);
+	const submit = () => {
+		setIsLoading(true);
 
-    if (name !== group?.name && (name === "Students" || name === "Teachers")) {
-      toast.error(
-        "That group name is reserved and cannot be used, please enter another one.",
-      );
-      setIsLoading(false);
-      return;
-    }
+		if (name !== group?.name && (name === "Students" || name === "Teachers")) {
+			toast.error("That group name is reserved and cannot be used, please enter another one.");
+			setIsLoading(false);
+			return;
+		}
 
-    (group ? axios.patch : axios.post)(
-      group ? `/api/groups/${group.id}` : "/api/groups",
-      { name, admin, participants },
-    )
-      .then(() => {
-        toast.success(
-          `Group "${name}" ${group ? "edited" : "created"} successfully`,
-        );
-        return true;
-      })
-      .catch(() => {
-        toast.error("Something went wrong, please try again later!");
-        return false;
-      })
-      .finally(() => {
-        setIsLoading(false);
-        onClose();
-      });
-  };
+		(group ? axios.patch : axios.post)(group ? `/api/groups/${group.id}` : "/api/groups", {name, admin, participants})
+			.then(() => {
+				toast.success(`Group "${name}" ${group ? "edited" : "created"} successfully`);
+				return true;
+			})
+			.catch(() => {
+				toast.error("Something went wrong, please try again later!");
+				return false;
+			})
+			.finally(() => {
+				setIsLoading(false);
+				onClose();
+			});
+	};
 
-  return (
-    <div className="mt-4 flex w-full flex-col gap-12 px-4 py-2">
-      <div className="flex flex-col gap-8">
-        <Input
-          name="name"
-          type="text"
-          label="Name"
-          defaultValue={name}
-          onChange={setName}
-          required
-          disabled={group?.disableEditing}
-        />
-        <div className="flex w-full flex-col gap-3">
-          <div className="flex items-center gap-2">
-            <label className="text-mti-gray-dim text-base font-normal">
-              Participants
-            </label>
-            <div
-              className="tooltip"
-              data-tip="The Excel file should only include a column with the desired e-mails."
-            >
-              <BsQuestionCircleFill />
-            </div>
-          </div>
-          <div className="flex w-full gap-8">
-            <Select
-              className="w-full"
-              value={participants.map((x) => ({
-                value: x,
-                label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
-              }))}
-              placeholder="Participants..."
-              defaultValue={participants.map((x) => ({
-                value: x,
-                label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
-              }))}
-              options={users
-                .filter((x) =>
-                  user.type === "teacher"
-                    ? x.type === "student"
-                    : x.type === "student" || x.type === "teacher",
-                )
-                .map((x) => ({ value: x.id, label: `${x.email} - ${x.name}` }))}
-              onChange={(value) => setParticipants(value.map((x) => x.value))}
-              isMulti
-              isSearchable
-              menuPortalTarget={document?.body}
-              styles={{
-                menuPortal: (base) => ({ ...base, zIndex: 9999 }),
-                control: (styles) => ({
-                  ...styles,
-                  backgroundColor: "white",
-                  borderRadius: "999px",
-                  padding: "1rem 1.5rem",
-                  zIndex: "40",
-                }),
-              }}
-            />
-            {user.type !== "teacher" && (
-              <Button
-                className="w-full max-w-[300px]"
-                onClick={openFilePicker}
-                isLoading={isLoading}
-                variant="outline"
-              >
-                {filesContent.length === 0
-                  ? "Upload participants Excel file"
-                  : filesContent[0].name}
-              </Button>
-            )}
-          </div>
-        </div>
-      </div>
-      <div className="mt-8 flex w-full items-center justify-end gap-8">
-        <Button
-          variant="outline"
-          color="red"
-          className="w-full max-w-[200px]"
-          isLoading={isLoading}
-          onClick={onClose}
-        >
-          Cancel
-        </Button>
-        <Button
-          className="w-full max-w-[200px]"
-          onClick={submit}
-          isLoading={isLoading}
-          disabled={!name}
-        >
-          Submit
-        </Button>
-      </div>
-    </div>
-  );
+	return (
+		<div className="mt-4 flex w-full flex-col gap-12 px-4 py-2">
+			<div className="flex flex-col gap-8">
+				<Input name="name" type="text" label="Name" defaultValue={name} onChange={setName} required disabled={group?.disableEditing} />
+				<div className="flex w-full flex-col gap-3">
+					<div className="flex items-center gap-2">
+						<label className="text-mti-gray-dim text-base font-normal">Participants</label>
+						<div className="tooltip" data-tip="The Excel file should only include a column with the desired e-mails.">
+							<BsQuestionCircleFill />
+						</div>
+					</div>
+					<div className="flex w-full gap-8">
+						<Select
+							className="w-full"
+							value={participants.map((x) => ({
+								value: x,
+								label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
+							}))}
+							placeholder="Participants..."
+							defaultValue={participants.map((x) => ({
+								value: x,
+								label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
+							}))}
+							options={users
+								.filter((x) => (user.type === "teacher" ? x.type === "student" : x.type === "student" || x.type === "teacher"))
+								.map((x) => ({value: x.id, label: `${x.email} - ${x.name}`}))}
+							onChange={(value) => setParticipants(value.map((x) => x.value))}
+							isMulti
+							isSearchable
+							menuPortalTarget={document?.body}
+							styles={{
+								menuPortal: (base) => ({...base, zIndex: 9999}),
+								control: (styles) => ({
+									...styles,
+									backgroundColor: "white",
+									borderRadius: "999px",
+									padding: "1rem 1.5rem",
+									zIndex: "40",
+								}),
+							}}
+						/>
+						{user.type !== "teacher" && (
+							<Button className="w-full max-w-[300px]" onClick={openFilePicker} isLoading={isLoading} variant="outline">
+								{filesContent.length === 0 ? "Upload participants Excel file" : filesContent[0].name}
+							</Button>
+						)}
+					</div>
+				</div>
+			</div>
+			<div className="mt-8 flex w-full items-center justify-end gap-8">
+				<Button variant="outline" color="red" className="w-full max-w-[200px]" isLoading={isLoading} onClick={onClose}>
+					Cancel
+				</Button>
+				<Button className="w-full max-w-[200px]" onClick={submit} isLoading={isLoading} disabled={!name}>
+					Submit
+				</Button>
+			</div>
+		</div>
+	);
 };
 
 const filterTypes = ["corporate", "teacher"];
 
-export default function GroupList({ user }: { user: User }) {
-  const [isCreating, setIsCreating] = useState(false);
-  const [editingGroup, setEditingGroup] = useState<Group>();
-  const [filterByUser, setFilterByUser] = useState(false);
+export default function GroupList({user}: {user: User}) {
+	const [isCreating, setIsCreating] = useState(false);
+	const [editingGroup, setEditingGroup] = useState<Group>();
+	const [filterByUser, setFilterByUser] = useState(false);
 
-  const { users } = useUsers();
-  const { groups, reload } = useGroups(
-    user && filterTypes.includes(user?.type) ? user.id : undefined,
-  );
+	const {users} = useUsers();
+	const {groups, reload} = useGroups(user && filterTypes.includes(user?.type) ? user.id : undefined);
 
-  useEffect(() => {
-    if (user && (user.type === "corporate" || user.type === "teacher")) {
-      setFilterByUser(true);
-    }
-  }, [user]);
+	useEffect(() => {
+		if (user && (user.type === "corporate" || user.type === "teacher")) {
+			setFilterByUser(true);
+		}
+	}, [user]);
 
-  const deleteGroup = (group: Group) => {
-    if (!confirm(`Are you sure you want to delete "${group.name}"?`)) return;
+	const deleteGroup = (group: Group) => {
+		if (!confirm(`Are you sure you want to delete "${group.name}"?`)) return;
 
-    axios
-      .delete<{ ok: boolean }>(`/api/groups/${group.id}`)
-      .then(() => toast.success(`Group "${group.name}" deleted successfully`))
-      .catch(() => toast.error("Something went wrong, please try again later!"))
-      .finally(reload);
-  };
+		axios
+			.delete<{ok: boolean}>(`/api/groups/${group.id}`)
+			.then(() => toast.success(`Group "${group.name}" deleted successfully`))
+			.catch(() => toast.error("Something went wrong, please try again later!"))
+			.finally(reload);
+	};
 
-  const defaultColumns = [
-    columnHelper.accessor("id", {
-      header: "ID",
-      cell: (info) => info.getValue(),
-    }),
-    columnHelper.accessor("name", {
-      header: "Name",
-      cell: (info) => info.getValue(),
-    }),
-    columnHelper.accessor("admin", {
-      header: "Admin",
-      cell: (info) => (
-        <div
-          className="tooltip"
-          data-tip={capitalize(
-            users.find((x) => x.id === info.getValue())?.type,
-          )}
-        >
-          {users.find((x) => x.id === info.getValue())?.name}
-        </div>
-      ),
-    }),
-    columnHelper.accessor("participants", {
-      header: "Participants",
-      cell: (info) =>
-        info
-          .getValue()
-          .map((x) => users.find((y) => y.id === x)?.name)
-          .join(", "),
-    }),
-    {
-      header: "",
-      id: "actions",
-      cell: ({ row }: { row: { original: Group } }) => {
-        return (
-          <>
-            {user &&
-              (user.type === "developer" ||
-                user.type === "admin" ||
-                user.id === row.original.admin) && (
-                <div className="flex gap-2">
-                  {(!row.original.disableEditing ||
-                    ["developer", "admin"].includes(user.type)) && (
-                    <div
-                      data-tip="Edit"
-                      className="tooltip cursor-pointer"
-                      onClick={() => setEditingGroup(row.original)}
-                    >
-                      <BsPencil className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
-                    </div>
-                  )}
-                  {(!row.original.disableEditing ||
-                    ["developer", "admin"].includes(user.type)) && (
-                    <div
-                      data-tip="Delete"
-                      className="tooltip cursor-pointer"
-                      onClick={() => deleteGroup(row.original)}
-                    >
-                      <BsTrash className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
-                    </div>
-                  )}
-                </div>
-              )}
-          </>
-        );
-      },
-    },
-  ];
+	const defaultColumns = [
+		columnHelper.accessor("id", {
+			header: "ID",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("name", {
+			header: "Name",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("admin", {
+			header: "Admin",
+			cell: (info) => (
+				<div className="tooltip" data-tip={capitalize(users.find((x) => x.id === info.getValue())?.type)}>
+					{users.find((x) => x.id === info.getValue())?.name}
+				</div>
+			),
+		}),
+		columnHelper.accessor("admin", {
+			header: "Linked Corporate",
+			cell: (info) => <LinkedCorporate userId={info.getValue()} users={users} groups={groups} />,
+		}),
+		columnHelper.accessor("participants", {
+			header: "Participants",
+			cell: (info) =>
+				info
+					.getValue()
+					.map((x) => users.find((y) => y.id === x)?.name)
+					.join(", "),
+		}),
+		{
+			header: "",
+			id: "actions",
+			cell: ({row}: {row: {original: Group}}) => {
+				return (
+					<>
+						{user && (user.type === "developer" || user.type === "admin" || user.id === row.original.admin) && (
+							<div className="flex gap-2">
+								{(!row.original.disableEditing || ["developer", "admin"].includes(user.type)) && (
+									<div data-tip="Edit" className="tooltip cursor-pointer" onClick={() => setEditingGroup(row.original)}>
+										<BsPencil className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
+									</div>
+								)}
+								{(!row.original.disableEditing || ["developer", "admin"].includes(user.type)) && (
+									<div data-tip="Delete" className="tooltip cursor-pointer" onClick={() => deleteGroup(row.original)}>
+										<BsTrash className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
+									</div>
+								)}
+							</div>
+						)}
+					</>
+				);
+			},
+		},
+	];
 
-  const table = useReactTable({
-    data: groups,
-    columns: defaultColumns,
-    getCoreRowModel: getCoreRowModel(),
-  });
+	const table = useReactTable({
+		data: groups,
+		columns: defaultColumns,
+		getCoreRowModel: getCoreRowModel(),
+	});
 
-  const closeModal = () => {
-    setIsCreating(false);
-    setEditingGroup(undefined);
-    reload();
-  };
+	const closeModal = () => {
+		setIsCreating(false);
+		setEditingGroup(undefined);
+		reload();
+	};
 
-  return (
-    <div className="h-full w-full rounded-xl">
-      <Modal
-        isOpen={isCreating || !!editingGroup}
-        onClose={closeModal}
-        title={editingGroup ? `Editing ${editingGroup.name}` : "New Group"}
-      >
-        <CreatePanel
-          group={editingGroup}
-          user={user}
-          onClose={closeModal}
-          users={
-            user?.type === "corporate" || user?.type === "teacher"
-              ? users.filter(
-                  (u) =>
-                    groups
-                      .filter((g) => g.admin === user.id)
-                      .flatMap((g) => g.participants)
-                      .includes(u.id) ||
-                    groups.flatMap((g) => g.participants).includes(u.id),
-                )
-              : users
-          }
-        />
-      </Modal>
-      <table className="bg-mti-purple-ultralight/40 w-full rounded-xl">
-        <thead>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <tr key={headerGroup.id}>
-              {headerGroup.headers.map((header) => (
-                <th className="py-4" key={header.id}>
-                  {header.isPlaceholder
-                    ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext(),
-                      )}
-                </th>
-              ))}
-            </tr>
-          ))}
-        </thead>
-        <tbody className="px-2">
-          {table.getRowModel().rows.map((row) => (
-            <tr
-              className="even:bg-mti-purple-ultralight/40 rounded-lg py-2 odd:bg-white"
-              key={row.id}
-            >
-              {row.getVisibleCells().map((cell) => (
-                <td className="px-4 py-2" key={cell.id}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
+	return (
+		<div className="h-full w-full rounded-xl">
+			<Modal isOpen={isCreating || !!editingGroup} onClose={closeModal} title={editingGroup ? `Editing ${editingGroup.name}` : "New Group"}>
+				<CreatePanel
+					group={editingGroup}
+					user={user}
+					onClose={closeModal}
+					users={
+						user?.type === "corporate" || user?.type === "teacher"
+							? users.filter(
+									(u) =>
+										groups
+											.filter((g) => g.admin === user.id)
+											.flatMap((g) => g.participants)
+											.includes(u.id) || groups.flatMap((g) => g.participants).includes(u.id),
+							  )
+							: users
+					}
+				/>
+			</Modal>
+			<table className="bg-mti-purple-ultralight/40 w-full rounded-xl">
+				<thead>
+					{table.getHeaderGroups().map((headerGroup) => (
+						<tr key={headerGroup.id}>
+							{headerGroup.headers.map((header) => (
+								<th className="py-4" key={header.id}>
+									{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+								</th>
+							))}
+						</tr>
+					))}
+				</thead>
+				<tbody className="px-2">
+					{table.getRowModel().rows.map((row) => (
+						<tr className="even:bg-mti-purple-ultralight/40 rounded-lg py-2 odd:bg-white" key={row.id}>
+							{row.getVisibleCells().map((cell) => (
+								<td className="px-4 py-2" key={cell.id}>
+									{flexRender(cell.column.columnDef.cell, cell.getContext())}
+								</td>
+							))}
+						</tr>
+					))}
+				</tbody>
+			</table>
 
-      <button
-        onClick={() => setIsCreating(true)}
-        className="bg-mti-purple-light hover:bg-mti-purple w-full py-2 text-white transition duration-300 ease-in-out"
-      >
-        New Group
-      </button>
-    </div>
-  );
+			<button
+				onClick={() => setIsCreating(true)}
+				className="bg-mti-purple-light hover:bg-mti-purple w-full py-2 text-white transition duration-300 ease-in-out">
+				New Group
+			</button>
+		</div>
+	);
 }

src/pages/(admin)/Lists/PackageList.tsx

@@ -40,7 +40,7 @@ function PackageCreator({pack, onClose}: {pack?: Package; onClose: () => void})
 	const [unit, setUnit] = useState<DurationUnit>(pack?.duration_unit || "months");
 
 	const [price, setPrice] = useState(pack?.price || 0);
-	const [currency, setCurrency] = useState<string>(pack?.currency || "EUR");
+	const [currency, setCurrency] = useState<string>(pack?.currency || "OMR");
 
 	const submit = () => {
 		(pack ? axios.patch : axios.post)(pack ? `/api/packages/${pack.id}` : "/api/packages", {

src/pages/(admin)/Lists/UserList.tsx

@@ -2,7 +2,7 @@ import Button from "@/components/Low/Button";
 import {PERMISSIONS} from "@/constants/userPermissions";
 import useGroups from "@/hooks/useGroups";
 import useUsers from "@/hooks/useUsers";
-import {Type, User, userTypes, CorporateUser} from "@/interfaces/user";
+import {Type, User, userTypes, CorporateUser, Group} from "@/interfaces/user";
 import {Popover, Transition} from "@headlessui/react";
 import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
 import axios from "axios";
@@ -16,18 +16,30 @@ import {countries, TCountries} from "countries-list";
 import countryCodes from "country-codes-list";
 import Modal from "@/components/Modal";
 import UserCard from "@/components/UserCard";
-import {USER_TYPE_LABELS} from "@/resources/user";
+import {getUserCompanyName, isAgentUser, USER_TYPE_LABELS} from "@/resources/user";
 import useFilterStore from "@/stores/listFilterStore";
 import {useRouter} from "next/router";
-import {isCorporateUser} from '@/resources/user';
-import { useListSearch } from "@/hooks/useListSearch";
+import {isCorporateUser} from "@/resources/user";
+import {useListSearch} from "@/hooks/useListSearch";
+import {getUserCorporate} from "@/utils/groups";
+import {asyncSorter} from "@/utils";
+import {exportListToExcel, UserListRow} from "@/utils/users";
 
 const columnHelper = createColumnHelper<User>();
-const searchFields = [
-	['name'],
-	['email'],
-	['corporateInformation', 'companyInformation', 'name'],
-];
+const searchFields = [["name"], ["email"], ["corporateInformation", "companyInformation", "name"]];
+
+const CompanyNameCell = ({users, user, groups}: {user: User; users: User[]; groups: Group[]}) => {
+	const [companyName, setCompanyName] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+
+	useEffect(() => {
+		const name = getUserCompanyName(user, users, groups);
+		setCompanyName(name);
+	}, [user, users, groups]);
+
+	return isLoading ? <span className="animate-pulse">Loading...</span> : <>{companyName}</>;
+};
+
 export default function UserList({user, filters = []}: {user: User; filters?: ((user: User) => boolean)[]}) {
 	const [showDemographicInformation, setShowDemographicInformation] = useState(false);
 	const [sorter, setSorter] = useState<string>();
@@ -51,16 +63,20 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 	};
 
 	useEffect(() => {
-		if (user && users) {
-			const filterUsers =
-				user.type === "corporate" || user.type === "teacher"
-					? users.filter((u) => groups.flatMap((g) => g.participants).includes(u.id))
-					: users;
+		(async () => {
+			if (user && users) {
+				const filterUsers =
+					user.type === "corporate" || user.type === "teacher"
+						? users.filter((u) => groups.flatMap((g) => g.participants).includes(u.id))
+						: users;
 
-			const filteredUsers = filters.reduce((d, f) => d.filter(f), filterUsers);
+				const filteredUsers = filters.reduce((d, f) => d.filter(f), filterUsers);
+				const sortedUsers = await asyncSorter<User>(filteredUsers, sortFunction);
+				console.log(sortedUsers);
 
-			setDisplayUsers([...filteredUsers.sort(sortFunction)]);
-		}
+				setDisplayUsers([...sortedUsers]);
+			}
+		})();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [user, users, sorter, groups]);
 
@@ -331,14 +347,14 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 			) as any,
 			cell: (info) => USER_TYPE_LABELS[info.getValue()],
 		}),
-		columnHelper.accessor('corporateInformation.companyInformation.name', {
+		columnHelper.accessor("corporateInformation.companyInformation.name", {
 			header: (
 				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "companyName"))}>
 					<span>Company Name</span>
 					<SorterArrow name="companyName" />
 				</button>
 			) as any,
-			cell: (info) => getCorporateName(info.row.original),
+			cell: (info) => <CompanyNameCell user={info.row.original} users={users} groups={groups} />,
 		}),
 		columnHelper.accessor("subscriptionExpirationDate", {
 			header: (
@@ -393,15 +409,7 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 		return undefined;
 	};
 
-	const getCorporateName = (user: User) => {
-		if(isCorporateUser(user)) {
-			return user.corporateInformation?.companyInformation?.name
-		}
-
-		return '';
-	}
-
-	const sortFunction = (a: User, b: User) => {
+	const sortFunction = async (a: User, b: User) => {
 		if (sorter === "name" || sorter === reverseString("name"))
 			return sorter === "name" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
 
@@ -468,25 +476,20 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 				: b.demographicInformation!.gender.localeCompare(a.demographicInformation!.gender);
 		}
 
-		if(sorter === 'companyName' || sorter === reverseString('companyName')) {
-			const aCorporateName = getCorporateName(a);
-			const bCorporateName = getCorporateName(b);
+		if (sorter === "companyName" || sorter === reverseString("companyName")) {
+			const aCorporateName = getUserCompanyName(a, users, groups);
+			const bCorporateName = getUserCompanyName(b, users, groups);
 			if (!aCorporateName && bCorporateName) return sorter === "companyName" ? -1 : 1;
 			if (aCorporateName && !bCorporateName) return sorter === "companyName" ? 1 : -1;
 			if (!aCorporateName && !bCorporateName) return 0;
 
-			return sorter === "companyName"
-				? aCorporateName.localeCompare(bCorporateName)
-				: bCorporateName.localeCompare(aCorporateName);			
+			return sorter === "companyName" ? aCorporateName.localeCompare(bCorporateName) : bCorporateName.localeCompare(aCorporateName);
 		}
 
 		return a.id.localeCompare(b.id);
 	};
 
-	const { rows: filteredRows, renderSearch } = useListSearch(
-		searchFields,
-		displayUsers,
-	)
+	const {rows: filteredRows, renderSearch} = useListSearch<User>(searchFields, displayUsers);
 
 	const table = useReactTable({
 		data: filteredRows,
@@ -494,6 +497,18 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 		getCoreRowModel: getCoreRowModel(),
 	});
 
+	const downloadExcel = () => {
+		const csv = exportListToExcel(filteredRows, users, groups);
+
+		const element = document.createElement("a");
+		const file = new Blob([csv], {type: "text/plain"});
+		element.href = URL.createObjectURL(file);
+		element.download = "users.xlsx";
+		document.body.appendChild(element);
+		element.click();
+		document.body.removeChild(element);
+	};
+
 	return (
 		<div className="w-full">
 			<Modal isOpen={!!selectedUser} onClose={() => setSelectedUser(undefined)}>
@@ -573,7 +588,12 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 				</>
 			</Modal>
 			<div className="w-full flex flex-col gap-2">
-				{renderSearch()}
+				<div className="w-full flex gap-2 items-end">
+					{renderSearch()}
+					<Button className="w-full max-w-[200px] mb-1" variant="outline" onClick={downloadExcel}>
+						Download List
+					</Button>
+				</div>
 				<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
 					<thead>
 						{table.getHeaderGroups().map((headerGroup) => (

src/pages/(admin)/Lists/index.tsx

@@ -1,82 +1,138 @@
-import {User} from "@/interfaces/user";
-import {Tab} from "@headlessui/react";
+import { User } from "@/interfaces/user";
+import { Tab } from "@headlessui/react";
 import clsx from "clsx";
+import CodeList from "./CodeList";
+import DiscountList from "./DiscountList";
 import ExamList from "./ExamList";
 import GroupList from "./GroupList";
 import PackageList from "./PackageList";
 import UserList from "./UserList";
 
-export default function Lists({user}: {user: User}) {
-	return (
-		<Tab.Group>
-			<Tab.List className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
-				<Tab
-					className={({selected}) =>
-						clsx(
-							"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
-							"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
-							"transition duration-300 ease-in-out",
-							selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
-						)
-					}>
-					User List
-				</Tab>
-				{user?.type === "developer" && (
-					<Tab
-						className={({selected}) =>
-							clsx(
-								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
-								"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
-								"transition duration-300 ease-in-out",
-								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
-							)
-						}>
-						Exam List
-					</Tab>
-				)}
-				<Tab
-					className={({selected}) =>
-						clsx(
-							"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
-							"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
-							"transition duration-300 ease-in-out",
-							selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
-						)
-					}>
-					Group List
-				</Tab>
-				{user && ["developer", "admin"].includes(user.type) && (
-					<Tab
-						className={({selected}) =>
-							clsx(
-								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
-								"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
-								"transition duration-300 ease-in-out",
-								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
-							)
-						}>
-						Package List
-					</Tab>
-				)}
-			</Tab.List>
-			<Tab.Panels className="mt-2">
-				<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
-					<UserList user={user} />
-				</Tab.Panel>
-				{user?.type === "developer" && (
-					<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
-						<ExamList user={user} />
-					</Tab.Panel>
-				)}
-				<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
-					<GroupList user={user} />
-				</Tab.Panel>
-				{user && ["developer", "admin"].includes(user.type) && (
-					<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
-						<PackageList user={user} />
-					</Tab.Panel>
-				)}
-			</Tab.Panels>
-		</Tab.Group>
-	);
+export default function Lists({ user }: { user: User }) {
+  return (
+    <Tab.Group>
+      <Tab.List className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
+        <Tab
+          className={({ selected }) =>
+            clsx(
+              "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
+              "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
+              "transition duration-300 ease-in-out",
+              selected
+                ? "bg-white shadow"
+                : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+            )
+          }
+        >
+          User List
+        </Tab>
+        {user?.type === "developer" && (
+          <Tab
+            className={({ selected }) =>
+              clsx(
+                "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
+                "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
+                "transition duration-300 ease-in-out",
+                selected
+                  ? "bg-white shadow"
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+              )
+            }
+          >
+            Exam List
+          </Tab>
+        )}
+        <Tab
+          className={({ selected }) =>
+            clsx(
+              "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
+              "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
+              "transition duration-300 ease-in-out",
+              selected
+                ? "bg-white shadow"
+                : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+            )
+          }
+        >
+          Group List
+        </Tab>
+        {user && ["developer", "admin", "corporate"].includes(user.type) && (
+          <Tab
+            className={({ selected }) =>
+              clsx(
+                "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
+                "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
+                "transition duration-300 ease-in-out",
+                selected
+                  ? "bg-white shadow"
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+              )
+            }
+          >
+            Code List
+          </Tab>
+        )}
+        {user && ["developer", "admin"].includes(user.type) && (
+          <Tab
+            className={({ selected }) =>
+              clsx(
+                "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
+                "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
+                "transition duration-300 ease-in-out",
+                selected
+                  ? "bg-white shadow"
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+              )
+            }
+          >
+            Package List
+          </Tab>
+        )}
+        {user && ["developer", "admin"].includes(user.type) && (
+          <Tab
+            className={({ selected }) =>
+              clsx(
+                "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
+                "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
+                "transition duration-300 ease-in-out",
+                selected
+                  ? "bg-white shadow"
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+              )
+            }
+          >
+            Discount List
+          </Tab>
+        )}
+      </Tab.List>
+      <Tab.Panels className="mt-2">
+        <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
+          <UserList user={user} />
+        </Tab.Panel>
+        {user?.type === "developer" && (
+          <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
+            <ExamList user={user} />
+          </Tab.Panel>
+        )}
+        <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
+          <GroupList user={user} />
+        </Tab.Panel>
+        {user && ["developer", "admin", "corporate"].includes(user.type) && (
+          <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
+            <CodeList user={user} />
+          </Tab.Panel>
+        )}
+        {user && ["developer", "admin"].includes(user.type) && (
+          <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
+            <PackageList user={user} />
+          </Tab.Panel>
+        )}
+        {user && ["developer", "admin"].includes(user.type) && (
+          <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
+            <DiscountList user={user} />
+          </Tab.Panel>
+        )}
+      </Tab.Panels>
+    </Tab.Group>
+  );
 }

src/pages/(exam)/ExamPage.tsx

@@ -41,6 +41,8 @@ export default function ExamPage({page}: Props) {
 	const assignment = useExamStore((state) => state.assignment);
 	const initialTimeSpent = useExamStore((state) => state.timeSpent);
 
+	const examStore = useExamStore;
+
 	const {exam, setExam} = useExamStore((state) => state);
 	const {exams, setExams} = useExamStore((state) => state);
 	const {sessionId, setSessionId} = useExamStore((state) => state);
@@ -151,7 +153,7 @@ export default function ExamPage({page}: Props) {
 				const nextExam = exams[moduleIndex];
 
 				if (partIndex === -1 && nextExam.module !== "listening") setPartIndex(0);
-				if (exerciseIndex === -1 && !["reading", "listening"].includes(nextExam.module)) setExerciseIndex(0);
+				if (exerciseIndex === -1 && !["reading", "listening"].includes(nextExam?.module)) setExerciseIndex(0);
 				setExam(nextExam ? updateExamWithUserSolutions(nextExam) : undefined);
 			}
 		})();
@@ -189,10 +191,11 @@ export default function ExamPage({page}: Props) {
 				id: solution.id || uuidv4(),
 				timeSpent,
 				session: sessionId,
-				exam: exam!.id,
-				module: exam!.module,
+				exam: solution.exam!,
+				module: solution.module!,
 				user: user?.id || "",
 				date: new Date().getTime(),
+				isDisabled: solution.isDisabled,
 				...(assignment ? {assignment: assignment.id} : {}),
 			}));
 
@@ -217,29 +220,33 @@ export default function ExamPage({page}: Props) {
 
 	const checkIfStatsHaveBeenEvaluated = (ids: string[]) => {
 		setTimeout(async () => {
-			const awaitedStats = await Promise.all(ids.map(async (id) => (await axios.get<Stat>(`/api/stats/${id}`)).data));
-			const solutionsEvaluated = awaitedStats.every((stat) => stat.solutions.every((x) => x.evaluation !== null));
-			if (solutionsEvaluated) {
-				const statsUserSolutions: UserSolution[] = awaitedStats.map((stat) => ({
-					id: stat.id,
-					exercise: stat.exercise,
-					score: stat.score,
-					solutions: stat.solutions,
-					type: stat.type,
-					exam: stat.exam,
-					module: stat.module,
-				}));
+			try {
+				const awaitedStats = await Promise.all(ids.map(async (id) => (await axios.get<Stat>(`/api/stats/${id}`)).data));
+				const solutionsEvaluated = awaitedStats.every((stat) => stat.solutions.every((x) => x.evaluation !== null));
+				if (solutionsEvaluated) {
+					const statsUserSolutions: UserSolution[] = awaitedStats.map((stat) => ({
+						id: stat.id,
+						exercise: stat.exercise,
+						score: stat.score,
+						solutions: stat.solutions,
+						type: stat.type,
+						exam: stat.exam,
+						module: stat.module,
+					}));
 
-				const updatedUserSolutions = userSolutions.map((x) => {
-					const respectiveSolution = statsUserSolutions.find((y) => y.exercise === x.exercise);
-					return respectiveSolution ? respectiveSolution : x;
-				});
+					const updatedUserSolutions = userSolutions.map((x) => {
+						const respectiveSolution = statsUserSolutions.find((y) => y.exercise === x.exercise);
+						return respectiveSolution ? respectiveSolution : x;
+					});
 
-				setUserSolutions(updatedUserSolutions);
-				return setStatsAwaitingEvaluation((prev) => prev.filter((x) => !ids.includes(x)));
+					setUserSolutions(updatedUserSolutions);
+					return setStatsAwaitingEvaluation((prev) => prev.filter((x) => !ids.includes(x)));
+				}
+
+				return checkIfStatsHaveBeenEvaluated(ids);
+			} catch {
+				return checkIfStatsHaveBeenEvaluated(ids);
 			}
-
-			return checkIfStatsHaveBeenEvaluated(ids);
 		}, 5 * 1000);
 	};
 
@@ -265,38 +272,44 @@ export default function ExamPage({page}: Props) {
 		return Object.assign(exam, {exercises});
 	};
 
-	const onFinish = (solutions: UserSolution[]) => {
+	const onFinish = async (solutions: UserSolution[]) => {
 		const solutionIds = solutions.map((x) => x.exercise);
 		const solutionExams = solutions.map((x) => x.exam);
 
+		let newSolutions = [...solutions];
+
 		if (exam && !solutionExams.includes(exam.id)) return;
 
 		if (exam && (exam.module === "writing" || exam.module === "speaking") && solutions.length > 0 && !showSolutions) {
 			setHasBeenUploaded(true);
 			setIsEvaluationLoading(true);
 
-			Promise.all(
-				exam.exercises.map(async (exercise) => {
-					const evaluationID = uuidv4();
-					if (exercise.type === "writing")
-						return await evaluateWritingAnswer(exercise, solutions.find((x) => x.exercise === exercise.id)!, evaluationID);
+			const responses: UserSolution[] = (
+				await Promise.all(
+					exam.exercises.map(async (exercise, index) => {
+						const evaluationID = uuidv4();
+						if (exercise.type === "writing")
+							return await evaluateWritingAnswer(exercise, index + 1, solutions.find((x) => x.exercise === exercise.id)!, evaluationID);
 
-					if (exercise.type === "interactiveSpeaking" || exercise.type === "speaking")
-						return await evaluateSpeakingAnswer(exercise, solutions.find((x) => x.exercise === exercise.id)!, evaluationID);
-				}),
-			)
-				.then((responses) => {
-					setStatsAwaitingEvaluation((prev) => [...prev, ...responses.filter((x) => !!x).map((r) => (r as any).id)]);
-					setUserSolutions([...userSolutions, ...responses.filter((x) => !!x)] as any);
-				})
-				.finally(() => {
-					setHasBeenUploaded(false);
-				});
+						if (exercise.type === "interactiveSpeaking" || exercise.type === "speaking")
+							return await evaluateSpeakingAnswer(
+								exercise,
+								solutions.find((x) => x.exercise === exercise.id)!,
+								evaluationID,
+								index === 0 ? 1 : 2,
+							);
+					}),
+				)
+			).filter((x) => !!x) as UserSolution[];
+
+			newSolutions = [...newSolutions.filter((x) => !responses.map((y) => y.exercise).includes(x.exercise)), ...responses];
+			setStatsAwaitingEvaluation((prev) => [...prev, ...responses.filter((x) => !!x).map((r) => (r as any).id)]);
+			setHasBeenUploaded(false);
 		}
 
 		axios.get("/api/stats/update");
 
-		setUserSolutions([...userSolutions.filter((x) => !solutionIds.includes(x.exercise)), ...solutions]);
+		setUserSolutions([...userSolutions.filter((x) => !solutionIds.includes(x.exercise)), ...newSolutions]);
 		setModuleIndex(moduleIndex + 1);
 
 		setPartIndex(-1);
@@ -304,7 +317,12 @@ export default function ExamPage({page}: Props) {
 		setQuestionIndex(0);
 	};
 
-	const aggregateScoresByModule = (answers: UserSolution[]): {module: Module; total: number; missing: number; correct: number}[] => {
+	const aggregateScoresByModule = (): {
+		module: Module;
+		total: number;
+		missing: number;
+		correct: number;
+	}[] => {
 		const scores: {
 			[key in Module]: {total: number; missing: number; correct: number};
 		} = {
@@ -335,7 +353,7 @@ export default function ExamPage({page}: Props) {
 			},
 		};
 
-		answers.forEach((x) => {
+		userSolutions.forEach((x) => {
 			const examModule =
 				x.module || (x.type === "writing" ? "writing" : x.type === "speaking" || x.type === "interactiveSpeaking" ? "speaking" : undefined);
 
@@ -374,14 +392,14 @@ export default function ExamPage({page}: Props) {
 					isLoading={isEvaluationLoading}
 					user={user!}
 					modules={selectedModules}
-					onViewResults={() => {
+					onViewResults={(index?: number) => {
 						setShowSolutions(true);
-						setModuleIndex(0);
+						setModuleIndex(index || 0);
 						setExerciseIndex(["reading", "listening"].includes(exams[0].module) ? -1 : 0);
 						setPartIndex(exams[0].module === "listening" ? -1 : 0);
 						setExam(exams[0]);
 					}}
-					scores={aggregateScoresByModule(userSolutions)}
+					scores={aggregateScoresByModule()}
 				/>
 			);
 		}

src/pages/(generation)/LevelGeneration.tsx

@@ -1,5 +1,5 @@
 import Select from "@/components/Low/Select";
-import {Difficulty, LevelExam, MultipleChoiceExercise} from "@/interfaces/exam";
+import {Difficulty, LevelExam, MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
 import {getExamById} from "@/utils/exams";
 import {playSound} from "@/utils/sound";
@@ -9,12 +9,69 @@ import clsx from "clsx";
 import {capitalize, sample} from "lodash";
 import {useRouter} from "next/router";
 import {useState} from "react";
-import {BsArrowRepeat} from "react-icons/bs";
+import {BsArrowRepeat, BsCheck, BsPencilSquare, BsX} from "react-icons/bs";
 import {toast} from "react-toastify";
 import {v4} from "uuid";
 
 const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
 
+const QuestionDisplay = ({question, onUpdate}: {question: MultipleChoiceQuestion; onUpdate: (question: MultipleChoiceQuestion) => void}) => {
+	const [isEditing, setIsEditing] = useState(false);
+	const [options, setOptions] = useState(question.options);
+
+	return (
+		<div key={question.id} className="flex flex-col gap-1">
+			<span className="font-semibold">
+				{question.id}. {question.prompt}{" "}
+			</span>
+			<div className="flex flex-col gap-1">
+				{question.options.map((option, index) => (
+					<span key={option.id} className={clsx(question.solution === option.id && "font-bold")}>
+						<span className={clsx("font-semibold", question.solution === option.id ? "text-mti-green-light" : "text-ielts-level")}>
+							({option.id})
+						</span>{" "}
+						{isEditing ? (
+							<input
+								defaultValue={option.text}
+								className="w-60"
+								onChange={(e) => setOptions((prev) => prev.map((x, idx) => (idx === index ? {...x, text: e.target.value} : x)))}
+							/>
+						) : (
+							<span>{option.text}</span>
+						)}
+					</span>
+				))}
+			</div>
+			<div className="flex gap-2 mt-2 w-full">
+				{!isEditing && (
+					<button
+						onClick={() => setIsEditing(true)}
+						className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300">
+						<BsPencilSquare />
+					</button>
+				)}
+				{isEditing && (
+					<>
+						<button
+							onClick={() => {
+								onUpdate({...question, options});
+								setIsEditing(false);
+							}}
+							className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300">
+							<BsCheck />
+						</button>
+						<button
+							onClick={() => setIsEditing(false)}
+							className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300">
+							<BsX />
+						</button>
+					</>
+				)}
+			</div>
+		</div>
+	);
+};
+
 const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Difficulty; setExam: (exam: LevelExam) => void}) => {
 	const [isLoading, setIsLoading] = useState(false);
 
@@ -37,6 +94,20 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
 			.finally(() => setIsLoading(false));
 	};
 
+	const onUpdate = (question: MultipleChoiceQuestion) => {
+		if (!exam) return;
+
+		const updatedExam = {
+			...exam,
+			exercises: exam.exercises.map((x) => ({
+				...x,
+				questions: (x as MultipleChoiceExercise).questions.map((q) => (q.id === question.id ? question : q)),
+			})),
+		};
+		console.log(updatedExam);
+		setExam(updatedExam as any);
+	};
+
 	return (
 		<Tab.Panel className="w-full bg-ielts-level/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
 			<div className="flex gap-4 items-end">
@@ -80,25 +151,7 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
 									</div>
 									<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 										{exercise.questions.map((question) => (
-											<div key={question.id} className="flex flex-col gap-1">
-												<span className="font-semibold">
-													{question.id}. {question.prompt}
-												</span>
-												<div className="flex flex-col gap-1">
-													{question.options.map((option) => (
-														<span key={option.id} className={clsx(question.solution === option.id && "font-bold")}>
-															<span
-																className={clsx(
-																	"font-semibold",
-																	question.solution === option.id ? "text-mti-green-light" : "text-ielts-level",
-																)}>
-																({option.id})
-															</span>{" "}
-															{option.text}
-														</span>
-													))}
-												</div>
-											</div>
+											<QuestionDisplay question={question} onUpdate={onUpdate} key={question.id} />
 										))}
 									</div>
 								</div>

src/pages/(generation)/ReadingGeneration.tsx

@@ -124,9 +124,9 @@ const ReadingGeneration = () => {
 
 	const availableTypes = [
 		{type: "fillBlanks", label: "Fill the Blanks"},
-		{type: "multipleChoice", label: "Multiple Choice"},
 		{type: "trueFalse", label: "True or False"},
 		{type: "writeBlanks", label: "Write the Blanks"},
+		{type: "matchSentences", label: "Match Sentences"},
 	];
 
 	const toggleType = (type: string) => setTypes((prev) => (prev.includes(type) ? [...prev.filter((x) => x !== type)] : [...prev, type]));

src/pages/(generation)/SpeakingGeneration.tsx

@@ -79,8 +79,6 @@ const PartTab = ({
 			.finally(() => setIsLoading(false));
 	};
 
-	useEffect(() => console.log(part), [part]);
-
 	return (
 		<Tab.Panel className="w-full bg-ielts-speaking/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
 			<div className="flex flex-col gap-3 w-full">

src/pages/(status)/PaymentDue.tsx

@@ -1,20 +1,20 @@
 /* eslint-disable @next/next/no-img-element */
 import Layout from "@/components/High/Layout";
-import PayPalPayment from "@/components/PayPalPayment";
 import useGroups from "@/hooks/useGroups";
 import usePackages from "@/hooks/usePackages";
 import useUsers from "@/hooks/useUsers";
 import {User} from "@/interfaces/user";
 import clsx from "clsx";
 import {capitalize} from "lodash";
-import {useState} from "react";
-import getSymbolFromCurrency from "currency-symbol-map";
+import {useEffect, useState} from "react";
 import useInvites from "@/hooks/useInvites";
 import {BsArrowRepeat} from "react-icons/bs";
 import InviteCard from "@/components/Medium/InviteCard";
 import {useRouter} from "next/router";
-import {PayPalScriptProvider} from "@paypal/react-paypal-js";
-import { usePaypalTracking } from "@/hooks/usePaypalTracking";
+import {ToastContainer} from "react-toastify";
+import useDiscounts from "@/hooks/useDiscounts";
+import PaymobPayment from "@/components/PaymobPayment";
+import moment from "moment";
 
 interface Props {
 	user: User;
@@ -25,15 +25,26 @@ interface Props {
 
 export default function PaymentDue({user, hasExpired = false, clientID, reload}: Props) {
 	const [isLoading, setIsLoading] = useState(false);
+	const [appliedDiscount, setAppliedDiscount] = useState(0);
 
 	const router = useRouter();
 
 	const {packages} = usePackages();
+	const {discounts} = useDiscounts();
 	const {users} = useUsers();
 	const {groups} = useGroups();
 	const {invites, isLoading: isInvitesLoading, reload: reloadInvites} = useInvites({to: user?.id});
-	const trackingId = usePaypalTracking();
-	
+
+	useEffect(() => {
+		const userDiscounts = discounts.filter((x) => user.email.endsWith(`@${x.domain}`));
+		if (userDiscounts.length === 0) return;
+
+		const biggestDiscount = [...userDiscounts].sort((a, b) => b.percentage - a.percentage).shift();
+		if (!biggestDiscount || (biggestDiscount.validUntil && moment(biggestDiscount.validUntil).isBefore(moment()))) return;
+
+		setAppliedDiscount(biggestDiscount.percentage);
+	}, [discounts, user]);
+
 	const isIndividual = () => {
 		if (user?.type === "developer") return true;
 		if (user?.type !== "student") return false;
@@ -47,11 +58,18 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
 
 	return (
 		<>
+			<ToastContainer />
 			{isLoading && (
 				<div className="absolute left-0 top-0 z-[999] h-screen w-screen overflow-hidden bg-black/60">
-					<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-8 text-white">
-						<span className={clsx("loading loading-infinity w-48")} />
-						<span className={clsx("text-2xl font-bold")}>Completing your payment...</span>
+					<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-8 text-white">
+						<span className={clsx("loading loading-infinity w-48 animate-pulse")} />
+						<span className={clsx("text-2xl font-bold animate-pulse")}>Completing your payment...</span>
+						<span>If you canceled your payment or it failed, please click the button below to restart</span>
+						<button
+							onClick={() => setIsLoading(false)}
+							className="border border-white rounded-full px-4 py-2 hover:bg-white/80 hover:text-black cursor-pointer transition ease-in-out duration-300">
+							Cancel Payment
+						</button>
 					</div>
 				</div>
 			)}
@@ -91,52 +109,56 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
 									To add to your use of EnCoach, please purchase one of the time packages available below:
 								</span>
 								<div className="flex w-full flex-wrap justify-center gap-8">
-									<PayPalScriptProvider
-										options={{
-											clientId: clientID,
-											currency: "USD",
-											intent: "capture",
-											commit: true,
-											vault: true,
-										}}>
-										{packages.map((p) => (
-											<div key={p.id} className={clsx("flex flex-col items-start gap-6 rounded-xl bg-white p-4")}>
-												<div className="mb-2 flex flex-col items-start">
-													<img src="/logo_title.png" alt="EnCoach's Logo" className="w-32" />
-													<span className="text-xl font-semibold">
-														EnCoach - {p.duration}{" "}
-														{capitalize(
-															p.duration === 1 ? p.duration_unit.slice(0, p.duration_unit.length - 1) : p.duration_unit,
-														)}
-													</span>
-												</div>
-												<div className="flex w-full flex-col items-start gap-2">
-													<span className="text-2xl">
-														{p.price}
-														{getSymbolFromCurrency(p.currency)}
-													</span>
-													<PayPalPayment
-														key={clientID}
-														{...p}
-														clientID={clientID}
-														setIsLoading={setIsLoading}
-														onSuccess={() => {
-															setTimeout(reload, 500);
-														}}
-														trackingId={trackingId}
-													/>
-												</div>
-												<div className="flex flex-col items-start gap-1">
-													<span>This includes:</span>
-													<ul className="flex flex-col items-start text-sm">
-														<li>- Train your abilities for the IELTS exam</li>
-														<li>- Gain insights into your weaknesses and strengths</li>
-														<li>- Allow yourself to correctly prepare for the exam</li>
-													</ul>
-												</div>
+									{packages.map((p) => (
+										<div key={p.id} className={clsx("flex flex-col items-start gap-6 rounded-xl bg-white p-4")}>
+											<div className="mb-2 flex flex-col items-start">
+												<img src="/logo_title.png" alt="EnCoach's Logo" className="w-32" />
+												<span className="text-xl font-semibold">
+													EnCoach - {p.duration}{" "}
+													{capitalize(
+														p.duration === 1 ? p.duration_unit.slice(0, p.duration_unit.length - 1) : p.duration_unit,
+													)}
+												</span>
 											</div>
-										))}
-									</PayPalScriptProvider>
+											<div className="flex w-full flex-col items-start gap-2">
+												{appliedDiscount === 0 && (
+													<span className="text-2xl">
+														{p.price} {p.currency}
+													</span>
+												)}
+												{appliedDiscount > 0 && (
+													<div className="flex items-center gap-2">
+														<span className="text-2xl line-through">
+															{p.price} {p.currency}
+														</span>
+														<span className="text-2xl text-mti-red-light">
+															{(p.price - p.price * (appliedDiscount / 100)).toFixed(2)} {p.currency}
+														</span>
+													</div>
+												)}
+												<PaymobPayment
+													key={clientID}
+													user={user}
+													setIsPaymentLoading={setIsLoading}
+													onSuccess={() => {
+														setTimeout(reload, 500);
+													}}
+													currency={p.currency}
+													duration={p.duration}
+													duration_unit={p.duration_unit}
+													price={+(p.price - p.price * (appliedDiscount / 100)).toFixed(2)}
+												/>
+											</div>
+											<div className="flex flex-col items-start gap-1">
+												<span>This includes:</span>
+												<ul className="flex flex-col items-start text-sm">
+													<li>- Train your abilities for the IELTS exam</li>
+													<li>- Gain insights into your weaknesses and strengths</li>
+													<li>- Allow yourself to correctly prepare for the exam</li>
+												</ul>
+											</div>
+										</div>
+									))}
 								</div>
 							</div>
 						)}
@@ -152,13 +174,12 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
 									</div>
 									<div className="flex w-full flex-col items-start gap-2">
 										<span className="text-2xl">
-											{user.corporateInformation.payment.value}
-											{getSymbolFromCurrency(user.corporateInformation.payment.currency)}
+											{user.corporateInformation.payment.value} {user.corporateInformation.payment.currency}
 										</span>
-										<PayPalPayment
+										<PaymobPayment
 											key={clientID}
-											clientID={clientID}
-											setIsLoading={setIsLoading}
+											user={user}
+											setIsPaymentLoading={setIsLoading}
 											currency={user.corporateInformation.payment.currency}
 											price={user.corporateInformation.payment.value}
 											duration={user.corporateInformation.monthlyDuration}
@@ -167,8 +188,6 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
 												setIsLoading(false);
 												setTimeout(reload, 500);
 											}}
-											loadScript
-											trackingId={trackingId}
 										/>
 									</div>
 									<div className="flex flex-col items-start gap-1">

src/pages/action.tsx

@@ -1,227 +1,170 @@
 /* eslint-disable @next/next/no-img-element */
-import { toast, ToastContainer } from "react-toastify";
+import {toast, ToastContainer} from "react-toastify";
 import axios from "axios";
-import { FormEvent, useEffect, useState } from "react";
+import {FormEvent, useEffect, useState} from "react";
 import Head from "next/head";
 import useUser from "@/hooks/useUser";
-import { Divider } from "primereact/divider";
+import {Divider} from "primereact/divider";
 import Button from "@/components/Low/Button";
-import { BsArrowRepeat } from "react-icons/bs";
+import {BsArrowRepeat} from "react-icons/bs";
 import Link from "next/link";
 import Input from "@/components/Low/Input";
-import { useRouter } from "next/router";
+import {useRouter} from "next/router";
 
 export function getServerSideProps({
-  query,
-  res,
+	query,
+	res,
 }: {
-  query: {
-    oobCode: string;
-    mode: string;
-    continueUrl?: string;
-  };
-  res: any;
+	query: {
+		oobCode: string;
+		mode: string;
+		continueUrl?: string;
+	};
+	res: any;
 }) {
-  if (!query || !query.oobCode || !query.mode) {
-    res.setHeader("location", "/login");
-    res.statusCode = 302;
-    res.end();
-    return {
-      props: {},
-    };
-  }
+	if (!query || !query.oobCode || !query.mode) {
+		return {
+			redirect: {
+				destination: "/login",
+				permanent: false,
+			}
+		};
+	}
 
-  return {
-    props: {
-      code: query.oobCode,
-      mode: query.mode,
-      ...(query.continueUrl ? { continueUrl: query.continueUrl } : {}),
-    },
-  };
+	return {
+		props: {
+			code: query.oobCode,
+			mode: query.mode,
+			...(query.continueUrl ? {continueUrl: query.continueUrl} : {}),
+		},
+	};
 }
 
-export default function Reset({
-  code,
-  mode,
-  continueUrl,
-}: {
-  code: string;
-  mode: string;
-  continueUrl?: string;
-}) {
-  const [password, setPassword] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
+export default function Reset({code, mode, continueUrl}: {code: string; mode: string; continueUrl?: string}) {
+	const [password, setPassword] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
 
-  const router = useRouter();
+	const router = useRouter();
 
-  useUser({
-    redirectTo: "/",
-    redirectIfFound: true,
-  });
+	useUser({
+		redirectTo: "/",
+		redirectIfFound: true,
+	});
 
-  useEffect(() => {
-    if (mode === "signIn") {
-      axios
-        .post<{ ok: boolean }>("/api/reset/verify", {
-          email: continueUrl?.replace("https://platform.encoach.com/", ""),
-        })
-        .then((response) => {
-          if (response.data.ok) {
-            toast.success("Your account has been verified!", {
-              toastId: "verify-successful",
-            });
-            setTimeout(() => {
-              router.push("/");
-            }, 1000);
-            return;
-          }
+	useEffect(() => {
+		if (mode === "signIn") {
+			axios
+				.post<{ok: boolean}>("/api/reset/verify", {
+					email: continueUrl?.replace("https://platform.encoach.com/", "").replace("https://staging.encoach.com/", ""),
+				})
+				.then((response) => {
+					if (response.data.ok) {
+						toast.success("Your account has been verified!", {
+							toastId: "verify-successful",
+						});
+						setTimeout(() => {
+							router.push("/");
+						}, 1000);
+						return;
+					}
 
-          toast.error(
-            "Something went wrong! Please make sure to click the link in your e-mail again and input the correct e-mail!",
-            {
-              toastId: "verify-error",
-            },
-          );
-        })
-        .catch(() => {
-          toast.error(
-            "Something went wrong! Please make sure to click the link in your e-mail again and input the correct e-mail!",
-            {
-              toastId: "verify-error",
-            },
-          );
-          setIsLoading(false);
-        });
-    }
-  });
+					toast.error("Something went wrong! Please make sure to click the link in your e-mail again and input the correct e-mail!", {
+						toastId: "verify-error",
+					});
+				})
+				.catch(() => {
+					toast.error("Something went wrong! Please make sure to click the link in your e-mail again and input the correct e-mail!", {
+						toastId: "verify-error",
+					});
+					setIsLoading(false);
+				});
+		}
+	});
 
-  const login = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+	const login = (e: FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
 
-    setIsLoading(true);
-    axios
-      .post<{ ok: boolean }>("/api/reset/confirm", { code, password })
-      .then((response) => {
-        if (response.data.ok) {
-          toast.success("Your password has been reset!", {
-            toastId: "reset-successful",
-          });
-          setTimeout(() => {
-            router.push("/login");
-          }, 1000);
-          return;
-        }
+		setIsLoading(true);
+		axios
+			.post<{ok: boolean}>("/api/reset/confirm", {code, password})
+			.then((response) => {
+				if (response.data.ok) {
+					toast.success("Your password has been reset!", {
+						toastId: "reset-successful",
+					});
+					setTimeout(() => {
+						router.push("/login");
+					}, 1000);
+					return;
+				}
 
-        toast.error(
-          "Something went wrong! Please make sure to click the link in your e-mail again!",
-          { toastId: "reset-error" },
-        );
-      })
-      .catch(() => {
-        toast.error(
-          "Something went wrong! Please make sure to click the link in your e-mail again!",
-          { toastId: "reset-error" },
-        );
-      })
-      .finally(() => setIsLoading(false));
-  };
+				toast.error("Something went wrong! Please make sure to click the link in your e-mail again!", {toastId: "reset-error"});
+			})
+			.catch(() => {
+				toast.error("Something went wrong! Please make sure to click the link in your e-mail again!", {toastId: "reset-error"});
+			})
+			.finally(() => setIsLoading(false));
+	};
 
-  return (
-    <>
-      <Head>
-        <title>Reset | EnCoach</title>
-        <meta name="description" content="Generated by create next app" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <main className="flex h-[100vh] w-full bg-white text-black">
-        <ToastContainer />
-        <section className="relative hidden h-full w-fit min-w-fit lg:flex">
-          <div className="bg-mti-rose-light absolute z-10 h-full w-full bg-opacity-50" />
-          <img
-            src="/people-talking-tablet.png"
-            alt="People smiling looking at a tablet"
-            className="aspect-auto h-full"
-          />
-        </section>
-        {mode === "resetPassword" && (
-          <section className="flex h-full w-full flex-col items-center justify-center gap-2">
-            <div className="relative flex flex-col items-center gap-2">
-              <img
-                src="/logo_title.png"
-                alt="EnCoach's Logo"
-                className="absolute -top-36 w-36 lg:-top-64 lg:w-64"
-              />
-              <h1 className="text-2xl font-bold lg:text-4xl">
-                Reset your password
-              </h1>
-              <p className="text-mti-gray-cool self-start text-sm font-normal lg:text-base">
-                to your registered Email Address
-              </p>
-            </div>
-            <Divider className="max-w-xs lg:max-w-md" />
-            <form
-              className="-lg:px-8 flex w-full flex-col items-center gap-6 lg:w-1/2"
-              onSubmit={login}
-            >
-              <Input
-                type="password"
-                name="password"
-                onChange={(e) => setPassword(e)}
-                placeholder="Password"
-              />
+	return (
+		<>
+			<Head>
+				<title>Reset | EnCoach</title>
+				<meta name="description" content="Generated by create next app" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<main className="flex h-[100vh] w-full bg-white text-black">
+				<ToastContainer />
+				<section className="relative hidden h-full w-fit min-w-fit lg:flex">
+					<div className="bg-mti-rose-light absolute z-10 h-full w-full bg-opacity-50" />
+					<img src="/people-talking-tablet.png" alt="People smiling looking at a tablet" className="aspect-auto h-full" />
+				</section>
+				{mode === "resetPassword" && (
+					<section className="flex h-full w-full flex-col items-center justify-center gap-2">
+						<div className="relative flex flex-col items-center gap-2">
+							<img src="/logo_title.png" alt="EnCoach's Logo" className="absolute -top-36 w-36 lg:-top-64 lg:w-64" />
+							<h1 className="text-2xl font-bold lg:text-4xl">Reset your password</h1>
+							<p className="text-mti-gray-cool self-start text-sm font-normal lg:text-base">to your registered Email Address</p>
+						</div>
+						<Divider className="max-w-xs lg:max-w-md" />
+						<form className="-lg:px-8 flex w-full flex-col items-center gap-6 lg:w-1/2" onSubmit={login}>
+							<Input type="password" name="password" onChange={(e) => setPassword(e)} placeholder="Password" />
 
-              <Button
-                className="mt-8 w-full"
-                color="purple"
-                disabled={isLoading}
-              >
-                {!isLoading && "Reset"}
-                {isLoading && (
-                  <div className="flex items-center justify-center">
-                    <BsArrowRepeat
-                      className="animate-spin text-white"
-                      size={25}
-                    />
-                  </div>
-                )}
-              </Button>
-            </form>
-            <span className="text-mti-gray-cool mt-8 text-sm font-normal">
-              Don&apos;t have an account?{" "}
-              <Link className="text-mti-purple-light" href="/register">
-                Sign up
-              </Link>
-            </span>
-          </section>
-        )}
-        {mode === "signIn" && (
-          <section className="flex h-full w-full flex-col items-center justify-center gap-2">
-            <div className="relative flex flex-col items-center gap-2">
-              <img
-                src="/logo_title.png"
-                alt="EnCoach's Logo"
-                className="absolute -top-36 w-36 lg:-top-64 lg:w-64"
-              />
-              <h1 className="text-2xl font-bold lg:text-4xl">
-                Confirm your account
-              </h1>
-              <p className="text-mti-gray-cool self-start text-sm font-normal lg:text-base">
-                to your registered Email Address
-              </p>
-            </div>
-            <Divider className="max-w-xs lg:max-w-md" />
-            <div className="-lg:px-8 flex w-full flex-col items-center gap-6 lg:w-1/2">
-              <span className="text-center">
-                Your e-mail is currently being verified, please wait a second.{" "}
-                <br /> <br />
-                Once it has been verified, you will be redirected to the home
-                page.
-              </span>
-            </div>
-          </section>
-        )}
-      </main>
-    </>
-  );
+							<Button className="mt-8 w-full" color="purple" disabled={isLoading}>
+								{!isLoading && "Reset"}
+								{isLoading && (
+									<div className="flex items-center justify-center">
+										<BsArrowRepeat className="animate-spin text-white" size={25} />
+									</div>
+								)}
+							</Button>
+						</form>
+						<span className="text-mti-gray-cool mt-8 text-sm font-normal">
+							Don&apos;t have an account?{" "}
+							<Link className="text-mti-purple-light" href="/register">
+								Sign up
+							</Link>
+						</span>
+					</section>
+				)}
+				{mode === "signIn" && (
+					<section className="flex h-full w-full flex-col items-center justify-center gap-2">
+						<div className="relative flex flex-col items-center gap-2">
+							<img src="/logo_title.png" alt="EnCoach's Logo" className="absolute -top-36 w-36 lg:-top-64 lg:w-64" />
+							<h1 className="text-2xl font-bold lg:text-4xl">Confirm your account</h1>
+							<p className="text-mti-gray-cool self-start text-sm font-normal lg:text-base">to your registered Email Address</p>
+						</div>
+						<Divider className="max-w-xs lg:max-w-md" />
+						<div className="-lg:px-8 flex w-full flex-col items-center gap-6 lg:w-1/2">
+							<span className="text-center">
+								Your e-mail is currently being verified, please wait a second. <br /> <br />
+								Once it has been verified, you will be redirected to the home page.
+							</span>
+						</div>
+					</section>
+				)}
+			</main>
+		</>
+	);
 }

src/pages/api/assignments/[id]/export.tsx

@@ -370,7 +370,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 						studentsData={studentsData}
 						showLevel={showLevel}
 						summaryPNG={overallPNG}
-						summaryScore={`${(overallResult * 100).toFixed(0)}%`}
+						summaryScore={`${Math.floor(overallResult * 100)}%`}
 						groupScoreSummary={groupScoreSummary}
 						passportId={demographicInformation?.passport_id || ""}
 					/>,

src/pages/api/assignments/[id]/unarchive.tsx

@@ -0,0 +1,33 @@
+import type {NextApiRequest, NextApiResponse} from "next";
+import {app} from "@/firebase";
+import {getFirestore, doc, getDoc, setDoc} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+	// verify if it's a logged user that is trying to archive
+	if (req.session.user) {
+		const {id} = req.query as {id: string};
+		const docSnap = await getDoc(doc(db, "assignments", id));
+
+		if (!docSnap.exists()) {
+			res.status(404).json({ok: false});
+			return;
+		}
+
+		await setDoc(docSnap.ref, {archived: false}, {merge: true});
+		res.status(200).json({ok: true});
+		return;
+	}
+
+	res.status(401).json({ok: false});
+}
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (req.method === "POST") return post(req, res);
+	res.status(404).json({ok: false});
+}

src/pages/api/assignments/index.ts

@@ -163,6 +163,7 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
 					modules: examModulesLabel,
 					assigner: teacher.name,
 				},
+				environment: process.env.ENVIRONMENT,
 			},
 			[assignee.email],
 			"EnCoach - New Assignment!",

src/pages/api/code/[id].ts

@@ -10,6 +10,7 @@ const db = getFirestore(app);
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
 	if (req.method === "GET") return GET(req, res);
+	if (req.method === "DELETE") return DELETE(req, res);
 
 	res.status(404).json({ok: false});
 }
@@ -21,3 +22,13 @@ async function GET(req: NextApiRequest, res: NextApiResponse) {
 
 	res.status(200).json({...snapshot.data(), id: snapshot.id});
 }
+
+async function DELETE(req: NextApiRequest, res: NextApiResponse) {
+	const {id} = req.query;
+
+	const snapshot = await getDoc(doc(db, "codes", id as string));
+	if (!snapshot.exists()) return res.status(404).json;
+
+	await deleteDoc(snapshot.ref);
+	res.status(200).json({...snapshot.data(), id: snapshot.id});
+}

src/pages/api/code/index.ts

@@ -9,10 +9,12 @@ import {
   collection,
   where,
   getDocs,
+  getDoc,
+  deleteDoc,
 } from "firebase/firestore";
 import { withIronSessionApiRoute } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
-import { Type } from "@/interfaces/user";
+import { Code, Type } from "@/interfaces/user";
 import { PERMISSIONS } from "@/constants/userPermissions";
 import { uuidv4 } from "@firebase/util";
 import { prepareMailer, prepareMailOptions } from "@/email";
@@ -24,6 +26,7 @@ export default withIronSessionApiRoute(handler, sessionOptions);
 async function handler(req: NextApiRequest, res: NextApiResponse) {
   if (req.method === "GET") return get(req, res);
   if (req.method === "POST") return post(req, res);
+  if (req.method === "DELETE") return del(req, res);
 
   return res.status(404).json({ ok: false });
 }
@@ -37,7 +40,10 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
   }
 
   const { creator } = req.query as { creator?: string };
-  const q = query(collection(db, "codes"), where("creator", "==", creator));
+  const q = query(
+    collection(db, "codes"),
+    where("creator", "==", creator || ""),
+  );
   const snapshot = await getDocs(creator ? q : collection(db, "codes"));
 
   res.status(200).json(snapshot.docs.map((doc) => doc.data()));
@@ -60,23 +66,22 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
   const permission = PERMISSIONS.generateCode[type];
 
   if (!permission.includes(req.session.user.type)) {
-    res
-      .status(403)
-      .json({
-        ok: false,
-        reason:
-          "Your account type does not have permissions to generate a code for that type of user!",
-      });
+    res.status(403).json({
+      ok: false,
+      reason:
+        "Your account type does not have permissions to generate a code for that type of user!",
+    });
     return;
   }
 
+  const codesGeneratedByUserSnapshot = await getDocs(
+    query(collection(db, "codes"), where("creator", "==", req.session.user.id)),
+  );
+  const userCodes = codesGeneratedByUserSnapshot.docs.map((x) => ({
+    ...x.data(),
+  }));
+
   if (req.session.user.type === "corporate") {
-    const codesGeneratedByUserSnapshot = await getDocs(
-      query(
-        collection(db, "codes"),
-        where("creator", "==", req.session.user.id),
-      ),
-    );
     const totalCodes = codesGeneratedByUserSnapshot.docs.length + codes.length;
     const allowedCodes =
       req.session.user.corporateInformation?.companyInformation.userAmount || 0;
@@ -94,21 +99,24 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 
   const codePromises = codes.map(async (code, index) => {
     const codeRef = doc(db, "codes", code);
-    const codeInformation = {
+    let codeInformation = {
       type,
       code,
       creator: req.session.user!.id,
+      creationDate: new Date().toISOString(),
       expiryDate,
     };
 
     if (infos && infos.length > index) {
       const { email, name, passport_id } = infos[index];
+      const previousCode = userCodes.find((x) => x.email === email) as Code;
 
       const transport = prepareMailer();
       const mailOptions = prepareMailOptions(
         {
           type,
-          code,
+          code: previousCode ? previousCode.code : code,
+          environment: process.env.ENVIRONMENT,
         },
         [email.toLowerCase().trim()],
         "EnCoach Registration",
@@ -117,16 +125,19 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 
       try {
         await transport.sendMail(mailOptions);
-        await setDoc(
-          codeRef,
-          {
-            ...codeInformation,
-            email: email.trim().toLowerCase(),
-            name: name.trim(),
-            ...(passport_id ? { passport_id: passport_id.trim() } : {}),
-          },
-          { merge: true },
-        );
+
+        if (!previousCode) {
+          await setDoc(
+            codeRef,
+            {
+              ...codeInformation,
+              email: email.trim().toLowerCase(),
+              name: name.trim(),
+              ...(passport_id ? { passport_id: passport_id.trim() } : {}),
+            },
+            { merge: true },
+          );
+        }
 
         return true;
       } catch (e) {
@@ -141,3 +152,23 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
     res.status(200).json({ ok: true, valid: results.filter((x) => x).length });
   });
 }
+
+async function del(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res
+      .status(401)
+      .json({ ok: false, reason: "You must be logged in to generate a code!" });
+    return;
+  }
+
+  const codes = req.query.code as string[];
+
+  for (const code of codes) {
+    const snapshot = await getDoc(doc(db, "codes", code as string));
+    if (!snapshot.exists()) continue;
+
+    await deleteDoc(snapshot.ref);
+  }
+
+  res.status(200).json({ codes });
+}

src/pages/api/discounts/[id].ts

@@ -0,0 +1,94 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+import { app } from "@/firebase";
+import {
+  getFirestore,
+  doc,
+  getDoc,
+  deleteDoc,
+  setDoc,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { PERMISSIONS } from "@/constants/userPermissions";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "GET") return get(req, res);
+  if (req.method === "DELETE") return del(req, res);
+  if (req.method === "PATCH") return patch(req, res);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res.status(401).json({ ok: false });
+    return;
+  }
+
+  const { id } = req.query as { id: string };
+
+  const docRef = doc(db, "discounts", id);
+  const docSnap = await getDoc(docRef);
+
+  if (docSnap.exists()) {
+    res.status(200).json({
+      id: docSnap.id,
+      ...docSnap.data(),
+    });
+  } else {
+    res.status(404).json(undefined);
+  }
+}
+
+async function patch(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res.status(401).json({ ok: false });
+    return;
+  }
+
+  const { id } = req.query as { id: string };
+
+  const docRef = doc(db, "discounts", id);
+  const docSnap = await getDoc(docRef);
+
+  if (docSnap.exists()) {
+    if (!["developer", "admin"].includes(req.session.user.type)) {
+      res.status(403).json({ ok: false });
+      return;
+    }
+
+    await setDoc(docRef, req.body, { merge: true });
+
+    res.status(200).json({ ok: true });
+  } else {
+    res.status(404).json({ ok: false });
+  }
+}
+
+async function del(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res.status(401).json({ ok: false });
+    return;
+  }
+
+  const { id } = req.query as { id: string };
+
+  const docRef = doc(db, "discounts", id);
+  const docSnap = await getDoc(docRef);
+
+  if (docSnap.exists()) {
+    if (!["developer", "admin"].includes(req.session.user.type)) {
+      res.status(403).json({ ok: false });
+      return;
+    }
+
+    await deleteDoc(docRef);
+
+    res.status(200).json({ ok: true });
+  } else {
+    res.status(404).json({ ok: false });
+  }
+}

src/pages/api/discounts/index.ts

@@ -0,0 +1,81 @@
+// 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,
+  getDoc,
+  deleteDoc,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { Group } from "@/interfaces/user";
+import { Discount, Package } from "@/interfaces/paypal";
+import { v4 } from "uuid";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "GET") await get(req, res);
+  if (req.method === "POST") await post(req, res);
+  if (req.method === "DELETE") return del(req, res);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res.status(401).json({ ok: false });
+    return;
+  }
+
+  const snapshot = await getDocs(collection(db, "discounts"));
+
+  res.status(200).json(
+    snapshot.docs.map((doc) => ({
+      id: doc.id,
+      ...doc.data(),
+    })),
+  );
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res.status(401).json({ ok: false });
+    return;
+  }
+
+  if (!["developer", "admin"].includes(req.session.user!.type))
+    return res.status(403).json({
+      ok: false,
+      reason: "You do not have permission to create a new discount",
+    });
+
+  const body = req.body as Discount;
+
+  await setDoc(doc(db, "discounts", v4()), body);
+  res.status(200).json({ ok: true });
+}
+
+async function del(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res
+      .status(401)
+      .json({ ok: false, reason: "You must be logged in to generate a code!" });
+    return;
+  }
+
+  const discounts = req.query.discount as string[];
+
+  for (const discount of discounts) {
+    const snapshot = await getDoc(doc(db, "discounts", discount as string));
+    if (!snapshot.exists()) continue;
+
+    await deleteDoc(snapshot.ref);
+  }
+
+  res.status(200).json({ discounts });
+}

src/pages/api/evaluate/interactiveSpeaking.ts

@@ -14,6 +14,10 @@ import {speakingReverseMarking} from "@/utils/score";
 const db = getFirestore(app);
 export default withIronSessionApiRoute(handler, sessionOptions);
 
+function delay(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
 async function handler(req: NextApiRequest, res: NextApiResponse) {
 	if (!req.session.user) {
 		res.status(401).json({ok: false});
@@ -46,17 +50,19 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 		const backendRequest = await evaluate({answers: uploadingAudios});
 		console.log("🌱 - Process complete");
 
-		const correspondingStat = (await getDoc(doc(db, "stats", fields.id))).data() as Stat;
+		const correspondingStat = await getCorrespondingStat(fields.id, 1);
+
 		const solutions = correspondingStat.solutions.map((x) => ({...x, evaluation: backendRequest.data, solution: uploadingAudios}));
 		await setDoc(
 			doc(db, "stats", fields.id),
 			{
 				solutions,
 				score: {
-					correct: speakingReverseMarking[backendRequest.data.overall],
+					correct: speakingReverseMarking[backendRequest.data.overall || 0] || 0,
 					missing: 0,
 					total: 100,
 				},
+				isDisabled: false,
 			},
 			{merge: true},
 		);
@@ -64,6 +70,15 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 	});
 }
 
+async function getCorrespondingStat(id: string, index: number): Promise<Stat> {
+	console.log(`🌱 - Try number ${index} - ${id}`);
+	const correspondingStat = await getDoc(doc(db, "stats", id));
+
+	if (correspondingStat.exists()) return {...correspondingStat.data(), id} as Stat;
+	await delay(3 * 10000);
+	return getCorrespondingStat(id, index + 1);
+}
+
 async function evaluate(body: {answers: object[]}): Promise<AxiosResponse> {
 	const backendRequest = await axios.post(`${process.env.BACKEND_URL}/speaking_task_3`, body, {
 		headers: {

src/pages/api/evaluate/speaking.ts

@@ -4,7 +4,7 @@ import {withIronSessionApiRoute} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
 import axios, {AxiosResponse} from "axios";
 import formidable from "formidable-serverless";
-import {ref, uploadBytes} from "firebase/storage";
+import {getDownloadURL, ref, uploadBytes} from "firebase/storage";
 import fs from "fs";
 import {app, storage} from "@/firebase";
 import {doc, getDoc, getFirestore, setDoc} from "firebase/firestore";
@@ -14,6 +14,10 @@ import {speakingReverseMarking} from "@/utils/score";
 const db = getFirestore(app);
 export default withIronSessionApiRoute(handler, sessionOptions);
 
+function delay(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
 async function handler(req: NextApiRequest, res: NextApiResponse) {
 	if (!req.session.user) {
 		res.status(401).json({ok: false});
@@ -25,33 +29,38 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 		if (err) console.log(err);
 
 		const audioFile = files.audio;
-		const audioFileRef = ref(storage, `speaking_recordings/${(audioFile as any).path.replace("upload_", "")}`);
+		const audioFileRef = ref(storage, `speaking_recordings/${fields.id}.wav`);
+		const task = parseInt(fields.task.toString());
 
 		const binary = fs.readFileSync((audioFile as any).path).buffer;
 		const snapshot = await uploadBytes(audioFileRef, binary);
+		const url = await getDownloadURL(snapshot.ref);
+		const path = snapshot.metadata.fullPath;
 
 		res.status(200).json(null);
 
 		console.log("🌱 - Still processing");
-		const backendRequest = await evaluate({answers: [{question: fields.question, answer: snapshot.metadata.fullPath}]});
-		fs.rmSync((audioFile as any).path);
+		const backendRequest = await evaluate({answer: path, question: fields.question}, task);
 		console.log("🌱 - Process complete");
 
-		const correspondingStat = (await getDoc(doc(db, "stats", fields.id))).data() as Stat;
+		const correspondingStat = await getCorrespondingStat(fields.id, 1);
+
 		const solutions = correspondingStat.solutions.map((x) => ({
 			...x,
 			evaluation: backendRequest.data,
-			solution: snapshot.metadata.fullPath,
+			solution: url,
 		}));
+
 		await setDoc(
 			doc(db, "stats", fields.id),
 			{
 				solutions,
 				score: {
-					correct: speakingReverseMarking[backendRequest.data.overall],
+					correct: speakingReverseMarking[backendRequest.data.overall || 0] || 0,
 					total: 100,
 					missing: 0,
 				},
+				isDisabled: false,
 			},
 			{merge: true},
 		);
@@ -59,14 +68,23 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 	});
 }
 
-async function evaluate(body: {answers: object[]}): Promise<AxiosResponse> {
-	const backendRequest = await axios.post(`${process.env.BACKEND_URL}/speaking_task_3`, body, {
+async function getCorrespondingStat(id: string, index: number): Promise<Stat> {
+	console.log(`🌱 - Try number ${index} - ${id}`);
+	const correspondingStat = await getDoc(doc(db, "stats", id));
+
+	if (correspondingStat.exists()) return {...correspondingStat.data(), id} as Stat;
+	await delay(3 * 10000);
+	return getCorrespondingStat(id, index + 1);
+}
+
+async function evaluate(body: {answer: string; question: string}, task: number): Promise<AxiosResponse> {
+	const backendRequest = await axios.post(`${process.env.BACKEND_URL}/speaking_task_${task}`, body, {
 		headers: {
 			Authorization: `Bearer ${process.env.BACKEND_JWT}`,
 		},
 	});
 
-	if (typeof backendRequest.data === "string") return evaluate(body);
+	if (typeof backendRequest.data === "string") return evaluate(body, task);
 	return backendRequest;
 }
 

src/pages/api/evaluate/writing.ts

@@ -11,9 +11,14 @@ import {writingReverseMarking} from "@/utils/score";
 interface Body {
 	question: string;
 	answer: string;
+	task: 1 | 2;
 	id: string;
 }
 
+function delay(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
 const db = getFirestore(app);
 export default withIronSessionApiRoute(handler, sessionOptions);
 
@@ -29,7 +34,8 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 	const backendRequest = await evaluate(req.body as Body);
 	console.log("🌱 - Process complete");
 
-	const correspondingStat = (await getDoc(doc(db, "stats", req.body.id))).data() as Stat;
+	const correspondingStat = await getCorrespondingStat(req.body.id, 1);
+
 	const solutions = correspondingStat.solutions.map((x) => ({...x, evaluation: backendRequest.data}));
 	await setDoc(
 		doc(db, "stats", (req.body as Body).id),
@@ -40,14 +46,26 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 				total: 100,
 				missing: 0,
 			},
+			isDisabled: false,
 		},
 		{merge: true},
 	);
 	console.log("🌱 - Updated the DB");
 }
 
+async function getCorrespondingStat(id: string, index: number): Promise<Stat> {
+	console.log(`🌱 - Try number ${index} - ${id}`);
+	const correspondingStat = await getDoc(doc(db, "stats", id));
+
+	if (correspondingStat.exists()) return {...correspondingStat.data(), id} as Stat;
+	await delay(3 * 10000);
+	return getCorrespondingStat(id, index + 1);
+}
+
 async function evaluate(body: Body): Promise<AxiosResponse> {
-	const backendRequest = await axios.post(`${process.env.BACKEND_URL}/writing_task2`, body as Body, {
+	const taskNumber = body.task.toString() !== "1" && body.task.toString() !== "2" ? "1" : body.task.toString();
+
+	const backendRequest = await axios.post(`${process.env.BACKEND_URL}/writing_task${taskNumber}`, body as Body, {
 		headers: {
 			Authorization: `Bearer ${process.env.BACKEND_JWT}`,
 		},

src/pages/api/exam/[module]/generate/[...endpoint].ts

@@ -29,14 +29,14 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 		module: Module;
 		endpoint: string;
 		topic?: string;
-		exercises?: string[];
+		exercises?: string[] | string;
 		difficulty?: Difficulty;
 	};
 	const url = `${process.env.BACKEND_URL}/${endpoint}`;
 
 	const params = new URLSearchParams();
 	if (topic) params.append("topic", topic);
-	if (exercises) exercises.forEach((exercise) => params.append("exercises", exercise));
+	if (exercises) (typeof exercises === "string" ? [exercises] : exercises).forEach((exercise) => params.append("exercises", exercise));
 	if (difficulty) params.append("difficulty", difficulty);
 
 	const result = await axios.get(`${url}${params.toString().length > 0 ? `?${params.toString()}` : ""}`, {

src/pages/api/invites/accept/[id].ts

@@ -113,6 +113,7 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 					corporateName: invitedBy.name,
 					name: req.session.user.name,
 					decision: "accept",
+					environment: process.env.ENVIRONMENT,
 				},
 				[invitedBy.email],
 				`${req.session.user.name} has accepted your invite!`,

src/pages/api/invites/decline/[id].ts

@@ -1,72 +1,62 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from "next";
-import { app } from "@/firebase";
-import {
-  getFirestore,
-  getDoc,
-  doc,
-  deleteDoc,
-  setDoc,
-  getDocs,
-  collection,
-  where,
-  query,
-} from "firebase/firestore";
-import { withIronSessionApiRoute } from "iron-session/next";
-import { sessionOptions } from "@/lib/session";
-import { Ticket } from "@/interfaces/ticket";
-import { Invite } from "@/interfaces/invite";
-import { Group, User } from "@/interfaces/user";
-import { v4 } from "uuid";
-import { sendEmail } from "@/email";
+import type {NextApiRequest, NextApiResponse} from "next";
+import {app} from "@/firebase";
+import {getFirestore, getDoc, doc, deleteDoc, setDoc, getDocs, collection, where, query} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {Ticket} from "@/interfaces/ticket";
+import {Invite} from "@/interfaces/invite";
+import {Group, User} from "@/interfaces/user";
+import {v4} from "uuid";
+import {sendEmail} from "@/email";
 
 const db = getFirestore(app);
 
 export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
-  if (req.method === "GET") return await get(req, res);
+	if (req.method === "GET") return await get(req, res);
 
-  res.status(404).json(undefined);
+	res.status(404).json(undefined);
 }
 
 async function get(req: NextApiRequest, res: NextApiResponse) {
-  if (!req.session.user) {
-    res.status(401).json({ ok: false });
-    return;
-  }
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
 
-  const { id } = req.query as { id: string };
-  const snapshot = await getDoc(doc(db, "invites", id));
+	const {id} = req.query as {id: string};
+	const snapshot = await getDoc(doc(db, "invites", id));
 
-  if (snapshot.exists()) {
-    const invite = { ...snapshot.data(), id: snapshot.id } as Invite;
-    if (invite.to !== req.session.user.id)
-      return res.status(403).json({ ok: false });
+	if (snapshot.exists()) {
+		const invite = {...snapshot.data(), id: snapshot.id} as Invite;
+		if (invite.to !== req.session.user.id) return res.status(403).json({ok: false});
 
-    await deleteDoc(snapshot.ref);
-    const invitedByRef = await getDoc(doc(db, "users", invite.from));
-    if (!invitedByRef.exists()) return res.status(404).json({ ok: false });
+		await deleteDoc(snapshot.ref);
+		const invitedByRef = await getDoc(doc(db, "users", invite.from));
+		if (!invitedByRef.exists()) return res.status(404).json({ok: false});
 
-    const invitedBy = { ...invitedByRef.data(), id: invitedByRef.id } as User;
+		const invitedBy = {...invitedByRef.data(), id: invitedByRef.id} as User;
 
-    try {
-      await sendEmail(
-        "respondedInvite",
-        {
-          corporateName: invitedBy.name,
-          name: req.session.user.name,
-          decision: "decline",
-        },
-        [invitedBy.email],
-        `${req.session.user.name} has declined your invite!`,
-      );
-    } catch (e) {
-      console.log(e);
-    }
+		try {
+			await sendEmail(
+				"respondedInvite",
+				{
+					corporateName: invitedBy.name,
+					name: req.session.user.name,
+					decision: "decline",
+					environment: process.env.ENVIRONMENT,
+				},
+				[invitedBy.email],
+				`${req.session.user.name} has declined your invite!`,
+			);
+		} catch (e) {
+			console.log(e);
+		}
 
-    res.status(200).json({ ok: true });
-  } else {
-    res.status(404).json(undefined);
-  }
+		res.status(200).json({ok: true});
+	} else {
+		res.status(404).json(undefined);
+	}
 }

src/pages/api/invites/index.ts

@@ -1,20 +1,13 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import { sendEmail } from "@/email";
-import { app } from "@/firebase";
-import { Invite } from "@/interfaces/invite";
-import { Ticket } from "@/interfaces/ticket";
-import { User } from "@/interfaces/user";
-import { sessionOptions } from "@/lib/session";
-import {
-  collection,
-  doc,
-  getDoc,
-  getDocs,
-  getFirestore,
-  setDoc,
-} from "firebase/firestore";
-import { withIronSessionApiRoute } from "iron-session/next";
-import type { NextApiRequest, NextApiResponse } from "next";
+import {sendEmail} from "@/email";
+import {app} from "@/firebase";
+import {Invite} from "@/interfaces/invite";
+import {Ticket} from "@/interfaces/ticket";
+import {User} from "@/interfaces/user";
+import {sessionOptions} from "@/lib/session";
+import {collection, doc, getDoc, getDocs, getFirestore, setDoc} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
+import type {NextApiRequest, NextApiResponse} from "next";
 import ShortUniqueId from "short-unique-id";
 
 const db = getFirestore(app);
@@ -22,67 +15,60 @@ const db = getFirestore(app);
 export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
-  if (!req.session.user) {
-    res.status(401).json({ ok: false });
-    return;
-  }
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
 
-  if (req.method === "GET") await get(req, res);
-  if (req.method === "POST") await post(req, res);
+	if (req.method === "GET") await get(req, res);
+	if (req.method === "POST") await post(req, res);
 }
 
 async function get(req: NextApiRequest, res: NextApiResponse) {
-  const snapshot = await getDocs(collection(db, "invites"));
+	const snapshot = await getDocs(collection(db, "invites"));
 
-  res.status(200).json(
-    snapshot.docs.map((doc) => ({
-      id: doc.id,
-      ...doc.data(),
-    })),
-  );
+	res.status(200).json(
+		snapshot.docs.map((doc) => ({
+			id: doc.id,
+			...doc.data(),
+		})),
+	);
 }
 
 async function post(req: NextApiRequest, res: NextApiResponse) {
-  const body = req.body as Invite;
+	const body = req.body as Invite;
 
-  const existingInvites = (await getDocs(collection(db, "invites"))).docs.map(
-    (x) => ({ ...x.data(), id: x.id }),
-  ) as Invite[];
+	const existingInvites = (await getDocs(collection(db, "invites"))).docs.map((x) => ({...x.data(), id: x.id})) as Invite[];
 
-  const invitedRef = await getDoc(doc(db, "users", body.to));
-  if (!invitedRef.exists()) return res.status(404).json({ ok: false });
+	const invitedRef = await getDoc(doc(db, "users", body.to));
+	if (!invitedRef.exists()) return res.status(404).json({ok: false});
 
-  const invitedByRef = await getDoc(doc(db, "users", body.from));
-  if (!invitedByRef.exists()) return res.status(404).json({ ok: false });
+	const invitedByRef = await getDoc(doc(db, "users", body.from));
+	if (!invitedByRef.exists()) return res.status(404).json({ok: false});
 
-  const invited = { ...invitedRef.data(), id: invitedRef.id } as User;
-  const invitedBy = { ...invitedByRef.data(), id: invitedByRef.id } as User;
+	const invited = {...invitedRef.data(), id: invitedRef.id} as User;
+	const invitedBy = {...invitedByRef.data(), id: invitedByRef.id} as User;
 
-  try {
-    await sendEmail(
-      "receivedInvite",
-      {
-        name: invited.name,
-        corporateName:
-          invitedBy.type === "corporate"
-            ? invitedBy.corporateInformation?.companyInformation?.name ||
-              invitedBy.name
-            : invitedBy.name,
-      },
-      [invited.email],
-      "You have been invited to a group!",
-    );
-  } catch (e) {
-    console.log(e);
-  }
+	try {
+		await sendEmail(
+			"receivedInvite",
+			{
+				name: invited.name,
+				corporateName:
+					invitedBy.type === "corporate" ? invitedBy.corporateInformation?.companyInformation?.name || invitedBy.name : invitedBy.name,
+				environment: process.env.ENVIRONMENT,
+			},
+			[invited.email],
+			"You have been invited to a group!",
+		);
+	} catch (e) {
+		console.log(e);
+	}
 
-  if (
-    existingInvites.filter((i) => i.to === body.to && i.from === body.from)
-      .length == 0
-  ) {
-    const shortUID = new ShortUniqueId();
-    await setDoc(doc(db, "invites", body.id || shortUID.randomUUID(8)), body);
-  }
+	if (existingInvites.filter((i) => i.to === body.to && i.from === body.from).length == 0) {
+		const shortUID = new ShortUniqueId();
+		await setDoc(doc(db, "invites", body.id || shortUID.randomUUID(8)), body);
+	}
 
-  res.status(200).json({ ok: true });
+	res.status(200).json({ok: true});
 }

src/pages/api/paymob/index.ts

@@ -0,0 +1,52 @@
+// 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 {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {Group} from "@/interfaces/user";
+import {Payment} from "@/interfaces/paypal";
+import {v4} from "uuid";
+import ShortUniqueId from "short-unique-id";
+import axios from "axios";
+import {IntentionResult, PaymentIntention} from "@/interfaces/paymob";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	if (req.method === "GET") await get(req, res);
+	if (req.method === "POST") await post(req, res);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+	const snapshot = await getDocs(collection(db, "payments"));
+
+	res.status(200).json(
+		snapshot.docs.map((doc) => ({
+			id: doc.id,
+			...doc.data(),
+		})),
+	);
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+	const intention = req.body as PaymentIntention;
+
+	const response = await axios.post<IntentionResult>(
+		"https://oman.paymob.com/v1/intention/",
+		{...intention, payment_methods: [parseInt(process.env.PAYMOB_INTEGRATION_ID || "0")], items: []},
+		{headers: {Authorization: `Token ${process.env.PAYMOB_SECRET_KEY}`}},
+	);
+	const intentionResult = response.data;
+
+	res.status(200).json({
+		iframeURL: `https://oman.paymob.com/unifiedcheckout/?publicKey=${process.env.PAYMOB_PUBLIC_KEY}&clientSecret=${intentionResult.client_secret}`,
+	});
+}

src/pages/api/paymob/webhook.ts

@@ -0,0 +1,95 @@
+// 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, getDoc, query, where} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {Group, User} from "@/interfaces/user";
+import {DurationUnit, Package, Payment} from "@/interfaces/paypal";
+import {v4} from "uuid";
+import ShortUniqueId from "short-unique-id";
+import axios from "axios";
+import {IntentionResult, PaymentIntention, TransactionResult} from "@/interfaces/paymob";
+import moment from "moment";
+
+const db = getFirestore(app);
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (req.method === "POST") await post(req, res);
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+	const transactionResult = req.body as TransactionResult;
+	const authToken = await authenticatePaymob();
+
+	if (!checkTransaction(authToken, transactionResult.transaction.order.id)) return res.status(404).json({ok: false});
+	if (!transactionResult.transaction.success) return res.status(200).json({ok: false});
+
+	const {userID, duration, duration_unit} = transactionResult.intention.extras.creation_extras as {
+		userID: string;
+		duration: number;
+		duration_unit: DurationUnit;
+	};
+
+	const userSnapshot = await getDoc(doc(db, "users", userID as string));
+
+	if (!userSnapshot.exists() || !duration || !duration_unit) return res.status(404).json({ok: false});
+
+	const user = {...userSnapshot.data(), id: userSnapshot.id} as User;
+
+	const subscriptionExpirationDate = user.subscriptionExpirationDate;
+	if (!subscriptionExpirationDate) return res.status(200).json({ok: false});
+
+	const initialDate = moment(subscriptionExpirationDate).isAfter(moment()) ? moment(subscriptionExpirationDate) : moment();
+
+	const updatedSubscriptionExpirationDate = moment(initialDate).add(duration, duration_unit).toISOString();
+
+	await setDoc(userSnapshot.ref, {subscriptionExpirationDate: updatedSubscriptionExpirationDate}, {merge: true});
+	await setDoc(doc(db, "paypalpayments", v4()), {
+		createdAt: new Date().toISOString(),
+		currency: transactionResult.transaction.currency,
+		orderId: transactionResult.transaction.id,
+		status: "COMPLETED",
+		subscriptionDuration: duration,
+		subscriptionDurationUnit: duration_unit,
+		subscriptionExpirationDate: updatedSubscriptionExpirationDate,
+		userId: userID,
+		value: transactionResult.transaction.amount_cents / 1000,
+	});
+
+	if (user.type === "corporate") {
+		const groupsSnapshot = await getDocs(query(collection(db, "groups"), where("admin", "==", user.id)));
+		const groups = groupsSnapshot.docs.map((g) => ({...g.data(), id: g.id})) as Group[];
+
+		const participants = (await Promise.all(
+			groups.flatMap((x) => x.participants).map(async (x) => ({...(await getDoc(doc(db, "users", x))).data(), id: x})),
+		)) as User[];
+		const sameExpiryDateParticipants = participants.filter((x) => x.subscriptionExpirationDate === subscriptionExpirationDate);
+
+		for (const participant of sameExpiryDateParticipants) {
+			await setDoc(doc(db, "users", participant.id), {subscriptionExpirationDate: updatedSubscriptionExpirationDate}, {merge: true});
+		}
+	}
+
+	res.status(200).json({
+		ok: true,
+	});
+}
+
+const authenticatePaymob = async () => {
+	const response = await axios.post<{token: string}>(
+		"https://oman.paymob.com/api/auth/tokens",
+		{
+			api_key: process.env.PAYMOB_API_KEY,
+		},
+		{headers: {Authorization: `Bearer ${process.env.PAYMOB_SECRET_KEY}`}},
+	);
+
+	return response.data.token;
+};
+
+const checkTransaction = async (token: string, orderID: number) => {
+	const response = await axios.post("https://oman.paymob.com/api/ecommerce/orders/transaction_inquiry", {auth_token: token, order_id: orderID});
+
+	return response.status === 200;
+};

src/pages/api/paypal/approve.ts

@@ -42,91 +42,96 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
   if (!trackingId)
     return res.status(401).json({ ok: false, reason: "Missing tracking id!" });
 
-  const request = await axios.post(
-    `${process.env.PAYPAL_ACCESS_TOKEN_URL}/v2/checkout/orders/${id}/capture`,
-    {},
-    {
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-        "PayPal-Client-Metadata-Id": trackingId,
-      },
-    }
-  );
+  const url = `${process.env.PAYPAL_ACCESS_TOKEN_URL}/v2/checkout/orders/${id}/capture`;
+  const headers = {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      "PayPal-Client-Metadata-Id": trackingId,
+    },
+  };
+  axios
+    .post(url, {}, headers)
+    .then(async (request) => {
+      if (request.data.status === "COMPLETED") {
+        const user = req.session.user;
+        const subscriptionExpirationDate =
+          user!.subscriptionExpirationDate;
+        const today = moment(new Date());
+        const dateToBeAddedTo = !subscriptionExpirationDate
+          ? today
+          : moment(subscriptionExpirationDate).isAfter(today)
+          ? moment(subscriptionExpirationDate)
+          : today;
 
-  if (request.data.status === "COMPLETED") {
-    const user = req.session.user;
-    const subscriptionExpirationDate =
-      req.session.user.subscriptionExpirationDate;
-    const today = moment(new Date());
-    const dateToBeAddedTo = !subscriptionExpirationDate
-      ? today
-      : moment(subscriptionExpirationDate).isAfter(today)
-      ? moment(subscriptionExpirationDate)
-      : today;
+        const updatedExpirationDate = dateToBeAddedTo.add(
+          duration,
+          duration_unit
+        );
+        await setDoc(
+          doc(db, "users", req.session.user!.id),
+          {
+            subscriptionExpirationDate: updatedExpirationDate.toISOString(),
+            status: "active",
+          },
+          { merge: true }
+        );
 
-    const updatedExpirationDate = dateToBeAddedTo.add(duration, duration_unit);
-    await setDoc(
-      doc(db, "users", req.session.user.id),
-      {
-        subscriptionExpirationDate: updatedExpirationDate.toISOString(),
-        status: "active",
-      },
-      { merge: true }
-    );
-  
-		try {
-			await setDoc(
-				doc(db, 'paypalpayments', v4()),
-				{
-					orderId: id,
-					userId: req.session.user.id,
-					status: request.data.status,
-					createdAt: new Date().toISOString(),
-					value: request.data.purchase_units[0].payments.captures[0].amount.value,
-					currency: request.data.purchase_units[0].payments.captures[0].amount.currency_code,
-					subscriptionDuration: duration,
-					subscriptionDurationUnit: duration_unit,
-					subscriptionExpirationDate: updatedExpirationDate.toISOString(),
-				}
-			);
-		} catch(err) {
-			console.error('Failed to insert paypal payment!', err);
-		}
+        try {
+          await setDoc(doc(db, "paypalpayments", v4()), {
+            orderId: id,
+            userId: req.session.user!.id,
+            status: request.data.status,
+            createdAt: new Date().toISOString(),
+            value:
+              request.data.purchase_units[0].payments.captures[0].amount.value,
+            currency:
+              request.data.purchase_units[0].payments.captures[0].amount
+                .currency_code,
+            subscriptionDuration: duration,
+            subscriptionDurationUnit: duration_unit,
+            subscriptionExpirationDate: updatedExpirationDate.toISOString(),
+          });
+        } catch (err) {
+          console.error("Failed to insert paypal payment!", err);
+        }
 
-    if (user.type === "corporate") {
-      const snapshot = await getDocs(collection(db, "groups"));
-      const groups: Group[] = (
-        snapshot.docs.map((doc) => ({
-          id: doc.id,
-          ...doc.data(),
-        })) as Group[]
-      ).filter((x) => x.admin === user.id);
+        if (user!.type === "corporate") {
+          const snapshot = await getDocs(collection(db, "groups"));
+          const groups: Group[] = (
+            snapshot.docs.map((doc) => ({
+              id: doc.id,
+              ...doc.data(),
+            })) as Group[]
+          ).filter((x) => x.admin === user!.id);
 
-      await Promise.all(
-        groups
-          .flatMap((x) => x.participants)
-          .map(
-            async (x) =>
-              await setDoc(
-                doc(db, "users", x),
-                {
-                  subscriptionExpirationDate:
-                    updatedExpirationDate.toISOString(),
-                  status: "active",
-                },
-                { merge: true }
+          await Promise.all(
+            groups
+              .flatMap((x) => x.participants)
+              .map(
+                async (x) =>
+                  await setDoc(
+                    doc(db, "users", x),
+                    {
+                      subscriptionExpirationDate:
+                        updatedExpirationDate.toISOString(),
+                      status: "active",
+                    },
+                    { merge: true }
+                  )
               )
-          )
-      );
-    }
+          );
+        }
 
-    return res.status(200).json({ ok: true });
-  }
+        return res.status(200).json({ ok: true });
+      }
 
-  res
-    .status(404)
-    .json({
-      ok: false,
-      reason: "Order ID not found or purchase was not approved!",
+      res.status(404).json({
+        ok: false,
+        reason: "Order ID not found or purchase was not approved!",
+      });
+    })
+    .catch((err) => {
+      console.error(err.response.status, err.response.data);
+      res.status(err.response.status).json(err.response.data);
     });
 }

src/pages/api/paypal/index.ts

@@ -1,62 +1,110 @@
 // 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} from "firebase/firestore";
-import {withIronSessionApiRoute} from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { app } from "@/firebase";
+import { getFirestore, collection, getDocs } from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
 import axios from "axios";
-import {v4} from "uuid";
-import {OrderResponseBody} from "@paypal/paypal-js";
-import {getAccessToken} from "@/utils/paypal";
+import { v4 } from "uuid";
+import { OrderResponseBody } from "@paypal/paypal-js";
+import { getAccessToken } from "@/utils/paypal";
 
 const db = getFirestore(app);
 
 export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
-	if (req.method !== "POST") return res.status(404).json({ok: false, reason: "Method not supported!"});
-	if (!req.session.user) return res.status(401).json({ok: false});
+  if (req.method !== "POST")
+    return res.status(404).json({ ok: false, reason: "Method not supported!" });
+  if (!req.session.user) return res.status(401).json({ ok: false });
 
-	const accessToken = await getAccessToken();
-	if (!accessToken) return res.status(401).json({ok: false, reason: "Authorization failed!"});
+  const accessToken = await getAccessToken();
+  if (!accessToken)
+    return res.status(401).json({ ok: false, reason: "Authorization failed!" });
 
-	const {currencyCode, price, trackingId} = req.body as {currencyCode: string; price: number, trackingId: string};
+  const { currencyCode, price, trackingId } = req.body as {
+    currencyCode: string;
+    price: number;
+    trackingId: string;
+  };
 
-  if(!trackingId) return res.status(401).json({ok: false, reason: "Missing tracking id!"});
+  if (!trackingId)
+    return res.status(401).json({ ok: false, reason: "Missing tracking id!" });
 
-	const request = await axios.post<OrderResponseBody>(
-		`${process.env.PAYPAL_ACCESS_TOKEN_URL}/v2/checkout/orders`,
-		{
-			purchase_units: [
-				{
-					amount: {
-						currency_code: currencyCode,
-						value: price.toString(),
-					},
-					reference_id: v4(),
-				},
-			],
-      payment_source: {
-        paypal: {
-          email_address: req.session.user.email || "",
-          experience_context: {
-            payment_method_preference: "IMMEDIATE_PAYMENT_REQUIRED",
-            locale: "en-US",
-            landing_page: "LOGIN",
-            shipping_preference: "NO_SHIPPING",
-            user_action: "PAY_NOW",
+  const url = `${process.env.PAYPAL_ACCESS_TOKEN_URL}/v2/checkout/orders`;
+  const amount = {
+    currency_code: currencyCode,
+    value: price.toString(),
+  };
+
+  const data = {
+    purchase_units: [
+      {
+        invoice_id: `INV-${v4()}`,
+        amount: {
+          ...amount,
+          breakdown: {
+            item_total: amount,
           },
         },
+        items: [
+          {
+            name: "Encoach Subscription",
+            quantity: "1",
+            category: "DIGITAL_GOODS",
+            unit_amount: amount,
+          },
+        ],
       },
-			intent: "CAPTURE",
-		},
-		{
-			headers: {
-				Authorization: `Bearer ${accessToken}`,
-        'PayPal-Client-Metadata-Id': trackingId,
-			},
-		},
-	);
+    ],
+    payment_source: {
+      paypal: {
+        email_address: req.session.user.email || "",
+        address: {
+            address_line_1: "",
+            address_line_2: "",
+            admin_area_1: "",
+            admin_area_2: "",
+            // added default values as requsted by the client, using the default values recommended
+            // the paypal engineer, otherwise we would have to create something that would detect the location
+            // of the user and generate a valid postal code for that location...
+            country_code: "US",
+            postal_code: "94107",
+        },
+        experience_context: {
+          payment_method_preference: "IMMEDIATE_PAYMENT_REQUIRED",
+          locale: "en-US",
+          landing_page: "LOGIN",
+          shipping_preference: "NO_SHIPPING",
+          user_action: "PAY_NOW",
+          brand_name: "Encoach",
+        },
+      },
+    },
+    intent: "CAPTURE",
+  };
 
-	res.status(request.status).json(request.data);
+  const headers = {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      "PayPal-Client-Metadata-Id": trackingId,
+    },
+  };
+  console.log(
+    JSON.stringify({
+      url,
+      data,
+      headers,
+    })
+  );
+
+  axios
+    .post<OrderResponseBody>(url, data, headers)
+    .then((request) => {
+      res.status(request.status).json(request.data);
+    })
+    .catch((err) => {
+      console.error(err.response.status, err.response.data);
+      res.status(err.response.status).json(err.response.data);
+    });
 }

src/pages/api/paypal/raas.ts

@@ -25,29 +25,35 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 
   const trackingId = `${req.session.user.id}-${Date.now()}`;
 
-  try {
-    const request = await axios.put(
-      `${process.env.PAYPAL_ACCESS_TOKEN_URL}/v1/risk/transaction-contexts/${process.env.PAYPAL_MERCHANT_ID}/${trackingId}`,
+  const url = `${process.env.PAYPAL_ACCESS_TOKEN_URL}/v1/risk/transaction-contexts/${process.env.PAYPAL_MERCHANT_ID}/${trackingId}`;
+  const data = {
+    additional_data: [
       {
-        additional_data: [
-          {
-            key: "user_id",
-            value: req.session.user.id,
-          },
-        ],
+        key: "user_id",
+        value: req.session.user.id,
       },
-      {
-        headers: {
-          Authorization: `Bearer ${accessToken}`,
-        },
-      }
-    );
+    ],
+  };
+
+  const headers = {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  };
+  console.log(JSON.stringify({
+    url,
+    data,
+    headers,
+  }));
+  try {
+    const request = await axios.put(url, data, headers);
 
     return res.status(request.status).json({
       ok: true,
       trackingId,
     });
   } catch (err) {
+    console.error(url, err);
     return res
       .status(500)
       .json({ ok: false, reason: "Failed to create tracking ID" });

src/pages/api/register.ts

@@ -1,24 +1,13 @@
-import { NextApiRequest, NextApiResponse } from "next";
-import { createUserWithEmailAndPassword, getAuth } from "firebase/auth";
-import { app } from "@/firebase";
-import { sessionOptions } from "@/lib/session";
-import { withIronSessionApiRoute } from "iron-session/next";
-import {
-  getFirestore,
-  doc,
-  setDoc,
-  query,
-  collection,
-  where,
-  getDocs,
-} from "firebase/firestore";
-import {
-  CorporateInformation,
-  DemographicInformation,
-  Type,
-} from "@/interfaces/user";
-import { addUserToGroupOnCreation } from "@/utils/registration";
+import {NextApiRequest, NextApiResponse} from "next";
+import {createUserWithEmailAndPassword, getAuth} from "firebase/auth";
+import {app} from "@/firebase";
+import {sessionOptions} from "@/lib/session";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {getFirestore, doc, setDoc, query, collection, where, getDocs} from "firebase/firestore";
+import {CorporateInformation, DemographicInformation, Group, Type} from "@/interfaces/user";
+import {addUserToGroupOnCreation} from "@/utils/registration";
 import moment from "moment";
+import {v4} from "uuid";
 
 const auth = getAuth(app);
 const db = getFirestore(app);
@@ -26,140 +15,145 @@ const db = getFirestore(app);
 export default withIronSessionApiRoute(register, sessionOptions);
 
 const DEFAULT_DESIRED_LEVELS = {
-  reading: 9,
-  listening: 9,
-  writing: 9,
-  speaking: 9,
+	reading: 9,
+	listening: 9,
+	writing: 9,
+	speaking: 9,
 };
 
 const DEFAULT_LEVELS = {
-  reading: 0,
-  listening: 0,
-  writing: 0,
-  speaking: 0,
+	reading: 0,
+	listening: 0,
+	writing: 0,
+	speaking: 0,
 };
 
 async function register(req: NextApiRequest, res: NextApiResponse) {
-  const { type } = req.body as {
-    type: "individual" | "corporate";
-  };
+	const {type} = req.body as {
+		type: "individual" | "corporate";
+	};
 
-  if (type === "individual") return registerIndividual(req, res);
-  if (type === "corporate") return registerCorporate(req, res);
+	if (type === "individual") return registerIndividual(req, res);
+	if (type === "corporate") return registerCorporate(req, res);
 }
 
 async function registerIndividual(req: NextApiRequest, res: NextApiResponse) {
-  const { email, passport_id, password, code } = req.body as {
-    email: string;
-    passport_id?: string;
-    password: string;
-    code?: string;
-  };
+	const {email, passport_id, password, code} = req.body as {
+		email: string;
+		passport_id?: string;
+		password: string;
+		code?: string;
+	};
 
-  const codeQuery = query(collection(db, "codes"), where("code", "==", code));
-  const codeDocs = (await getDocs(codeQuery)).docs.filter(
-    (x) => !Object.keys(x.data()).includes("userId"),
-  );
+	const codeQuery = query(collection(db, "codes"), where("code", "==", code));
+	const codeDocs = (await getDocs(codeQuery)).docs.filter((x) => !Object.keys(x.data()).includes("userId"));
 
-  if (code && code.length > 0 && codeDocs.length === 0) {
-    res.status(400).json({ error: "Invalid Code!" });
-    return;
-  }
+	if (code && code.length > 0 && codeDocs.length === 0) {
+		res.status(400).json({error: "Invalid Code!"});
+		return;
+	}
 
-  const codeData =
-    codeDocs.length > 0
-      ? (codeDocs[0].data() as {
-          code: string;
-          type: Type;
-          creator?: string;
-          expiryDate: Date | null;
-        })
-      : undefined;
+	const codeData =
+		codeDocs.length > 0
+			? (codeDocs[0].data() as {
+					code: string;
+					type: Type;
+					creator?: string;
+					expiryDate: Date | null;
+			  })
+			: undefined;
 
-  createUserWithEmailAndPassword(auth, email.toLowerCase(), password)
-    .then(async (userCredentials) => {
-      const userId = userCredentials.user.uid;
-      delete req.body.password;
+	createUserWithEmailAndPassword(auth, email.toLowerCase(), password)
+		.then(async (userCredentials) => {
+			const userId = userCredentials.user.uid;
+			delete req.body.password;
 
-      const user = {
-        ...req.body,
-        email: email.toLowerCase(),
-        desiredLevels: DEFAULT_DESIRED_LEVELS,
-        levels: DEFAULT_LEVELS,
-        bio: "",
-        isFirstLogin: codeData ? codeData.type === "student" : true,
-        focus: "academic",
-        type: email.endsWith("@ecrop.dev")
-          ? "developer"
-          : codeData
-            ? codeData.type
-            : "student",
-        subscriptionExpirationDate: codeData
-          ? codeData.expiryDate
-          : moment().subtract(1, "days").toISOString(),
-        ...(passport_id ? { demographicInformation: { passport_id } } : {}),
-        registrationDate: new Date().toISOString(),
-        status: code ? "active" : "paymentDue",
-      };
+			const user = {
+				...req.body,
+				email: email.toLowerCase(),
+				desiredLevels: DEFAULT_DESIRED_LEVELS,
+				levels: DEFAULT_LEVELS,
+				bio: "",
+				isFirstLogin: codeData ? codeData.type === "student" : true,
+				focus: "academic",
+				type: email.endsWith("@ecrop.dev") ? "developer" : codeData ? codeData.type : "student",
+				subscriptionExpirationDate: codeData ? codeData.expiryDate : moment().subtract(1, "days").toISOString(),
+				...(passport_id ? {demographicInformation: {passport_id}} : {}),
+				registrationDate: new Date().toISOString(),
+				status: code ? "active" : "paymentDue",
+			};
 
-      await setDoc(doc(db, "users", userId), user);
+			await setDoc(doc(db, "users", userId), user);
 
-      if (codeDocs.length > 0 && codeData) {
-        await setDoc(codeDocs[0].ref, { userId: userId }, { merge: true });
-        if (codeData.creator)
-          await addUserToGroupOnCreation(
-            userId,
-            codeData.type,
-            codeData.creator,
-          );
-      }
+			if (codeDocs.length > 0 && codeData) {
+				await setDoc(codeDocs[0].ref, {userId: userId}, {merge: true});
+				if (codeData.creator) await addUserToGroupOnCreation(userId, codeData.type, codeData.creator);
+			}
 
-      req.session.user = { ...user, id: userId };
-      await req.session.save();
+			req.session.user = {...user, id: userId};
+			await req.session.save();
 
-      res.status(200).json({ user: { ...user, id: userId } });
-    })
-    .catch((error) => {
-      console.log(error);
-      res.status(401).json({ error });
-    });
+			res.status(200).json({user: {...user, id: userId}});
+		})
+		.catch((error) => {
+			console.log(error);
+			res.status(401).json({error});
+		});
 }
 
 async function registerCorporate(req: NextApiRequest, res: NextApiResponse) {
-  const { email, password } = req.body as {
-    email: string;
-    password: string;
-    corporateInformation: CorporateInformation;
-  };
+	const {email, password} = req.body as {
+		email: string;
+		password: string;
+		corporateInformation: CorporateInformation;
+	};
 
-  createUserWithEmailAndPassword(auth, email.toLowerCase(), password)
-    .then(async (userCredentials) => {
-      const userId = userCredentials.user.uid;
-      delete req.body.password;
+	createUserWithEmailAndPassword(auth, email.toLowerCase(), password)
+		.then(async (userCredentials) => {
+			const userId = userCredentials.user.uid;
+			delete req.body.password;
 
-      const user = {
-        ...req.body,
-        email: email.toLowerCase(),
-        desiredLevels: DEFAULT_DESIRED_LEVELS,
-        levels: DEFAULT_LEVELS,
-        bio: "",
-        isFirstLogin: false,
-        focus: "academic",
-        type: "corporate",
-        subscriptionExpirationDate: req.body.subscriptionExpirationDate || null,
-        status: "paymentDue",
-        registrationDate: new Date().toISOString(),
-      };
+			const user = {
+				...req.body,
+				email: email.toLowerCase(),
+				desiredLevels: DEFAULT_DESIRED_LEVELS,
+				levels: DEFAULT_LEVELS,
+				bio: "",
+				isFirstLogin: false,
+				focus: "academic",
+				type: "corporate",
+				subscriptionExpirationDate: req.body.subscriptionExpirationDate || null,
+				status: "paymentDue",
+				registrationDate: new Date().toISOString(),
+			};
 
-      await setDoc(doc(db, "users", userId), user);
+			const defaultTeachersGroup: Group = {
+				admin: userId,
+				id: v4(),
+				name: "Teachers",
+				participants: [],
+				disableEditing: true,
+			};
 
-      req.session.user = { ...user, id: userId };
-      await req.session.save();
+			const defaultStudentsGroup: Group = {
+				admin: userId,
+				id: v4(),
+				name: "Students",
+				participants: [],
+				disableEditing: true,
+			};
 
-      res.status(200).json({ user: { ...user, id: userId } });
-    })
-    .catch((error) => {
-      console.log(error);
-      res.status(401).json({ error });
-    });
+			await setDoc(doc(db, "users", userId), user);
+			await setDoc(doc(db, "groups", defaultTeachersGroup.id), defaultTeachersGroup);
+			await setDoc(doc(db, "groups", defaultStudentsGroup.id), defaultStudentsGroup);
+
+			req.session.user = {...user, id: userId};
+			await req.session.save();
+
+			res.status(200).json({user: {...user, id: userId}});
+		})
+		.catch((error) => {
+			console.log(error);
+			res.status(401).json({error});
+		});
 }

src/pages/api/reset/sendVerification.ts

@@ -19,6 +19,7 @@ async function sendVerification(req: NextApiRequest, res: NextApiResponse) {
 				name: req.session.user.name,
 				code: short.randomUUID(6),
 				email: req.session.user.email,
+				environment: process.env.ENVIRONMENT,
 			},
 			[req.session.user.email],
 			"EnCoach Verification",

src/pages/api/stats/[id]/export.tsx

@@ -79,6 +79,7 @@ interface SkillsFeedbackRequest {
 interface SkillsFeedbackResponse extends SkillsFeedbackRequest {
 	evaluation: string;
 	suggestions: string;
+	bullet_points?: string[];
 }
 
 const getSkillsFeedback = async (sections: SkillsFeedbackRequest[]) => {
@@ -225,6 +226,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 							...result,
 							evaluation: feedback?.evaluation,
 							suggestions: feedback?.suggestions,
+							bullet_points: feedback?.bullet_points,
 						};
 					}
 
@@ -286,7 +288,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 						logo={"public/logo_title.png"}
 						qrcode={qrcode}
 						summaryPNG={overallPNG}
-						summaryScore={`${(overallResult * 100).toFixed(0)}%`}
+						summaryScore={`${Math.floor(overallResult * 100)}%`}
 						passportId={demographicInformation?.passport_id || ""}
 					/>,
 				);

src/pages/api/stats/[id]/index.ts

@@ -18,6 +18,7 @@ async function GET(req: NextApiRequest, res: NextApiResponse) {
 	const {id} = req.query;
 
 	const snapshot = await getDoc(doc(db, "stats", id as string));
+	if (!snapshot.exists()) return res.status(404).json({id: snapshot.id});
 
 	res.status(200).json({...snapshot.data(), id: snapshot.id});
-}
+}

src/pages/api/stripe.ts

@@ -65,6 +65,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 		{
 			type: "student",
 			code,
+			environment: process.env.ENVIRONMENT,
 		},
 		[email],
 		"EnCoach Registration",

src/pages/api/tickets/[id].ts

@@ -1,109 +1,104 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from "next";
-import { app } from "@/firebase";
-import {
-  getFirestore,
-  getDoc,
-  doc,
-  deleteDoc,
-  setDoc,
-} from "firebase/firestore";
-import { withIronSessionApiRoute } from "iron-session/next";
-import { sessionOptions } from "@/lib/session";
-import { Ticket, TicketTypeLabel, TicketStatusLabel } from "@/interfaces/ticket";
+import type {NextApiRequest, NextApiResponse} from "next";
+import {app} from "@/firebase";
+import {getFirestore, getDoc, doc, deleteDoc, setDoc} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {Ticket, TicketTypeLabel, TicketStatusLabel} from "@/interfaces/ticket";
 import moment from "moment";
-import { sendEmail } from "@/email";
+import {sendEmail} from "@/email";
 
 const db = getFirestore(app);
 
 export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
-  if (req.method === "GET") return await get(req, res);
-  if (req.method === "DELETE") return await del(req, res);
-  if (req.method === "PATCH") return await patch(req, res);
+	if (req.method === "GET") return await get(req, res);
+	if (req.method === "DELETE") return await del(req, res);
+	if (req.method === "PATCH") return await patch(req, res);
 
-  res.status(404).json(undefined);
+	res.status(404).json(undefined);
 }
 
 async function get(req: NextApiRequest, res: NextApiResponse) {
-  if (!req.session.user) {
-    res.status(401).json({ ok: false });
-    return;
-  }
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
 
-  const { id } = req.query as { id: string };
+	const {id} = req.query as {id: string};
 
-  const snapshot = await getDoc(doc(db, "tickets", id));
+	const snapshot = await getDoc(doc(db, "tickets", id));
 
-  if (snapshot.exists()) {
-    res.status(200).json({ ...snapshot.data(), id: snapshot.id });
-  } else {
-    res.status(404).json(undefined);
-  }
+	if (snapshot.exists()) {
+		res.status(200).json({...snapshot.data(), id: snapshot.id});
+	} else {
+		res.status(404).json(undefined);
+	}
 }
 
 async function del(req: NextApiRequest, res: NextApiResponse) {
-  if (!req.session.user) {
-    res.status(401).json({ ok: false });
-    return;
-  }
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
 
-  const { id } = req.query as { id: string };
+	const {id} = req.query as {id: string};
 
-  const snapshot = await getDoc(doc(db, "tickets", id));
-  const data = snapshot.data() as Ticket;
+	const snapshot = await getDoc(doc(db, "tickets", id));
+	const data = snapshot.data() as Ticket;
 
-  const user = req.session.user;
-  if (user.type === "admin" || user.type === "developer") {
-    await deleteDoc(snapshot.ref);
-    res.status(200).json({ ok: true });
-    return;
-  }
+	const user = req.session.user;
+	if (user.type === "admin" || user.type === "developer") {
+		await deleteDoc(snapshot.ref);
+		res.status(200).json({ok: true});
+		return;
+	}
 
-  res.status(403).json({ ok: false });
+	res.status(403).json({ok: false});
 }
 
 async function patch(req: NextApiRequest, res: NextApiResponse) {
-  if (!req.session.user) {
-    res.status(401).json({ ok: false });
-    return;
-  }
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
 
-  const { id } = req.query as { id: string };
-  const body = req.body as Ticket;
+	const {id} = req.query as {id: string};
+	const body = req.body as Ticket;
 
-  const snapshot = await getDoc(doc(db, "tickets", id));
+	const snapshot = await getDoc(doc(db, "tickets", id));
 
-  const user = req.session.user;
-  if (user.type === "admin" || user.type === "developer") {
-    const data = snapshot.data() as Ticket;
-    await setDoc(snapshot.ref, body, { merge: true });
-    try {
-      // send email if the status actually changed to completed
-      if(data.status !== req.body.status && req.body.status === 'completed') {
-        await sendEmail(
-          "ticketStatusCompleted",
-          {
-            id,
-            subject: body.subject,
-            reporter: body.reporter,
-            date: moment(body.date).format("DD/MM/YYYY - HH:mm"),
-            type: TicketTypeLabel[body.type],
-            reportedFrom: body.reportedFrom,
-            description: body.description,
-          },
-          [data.reporter.email],
-          `Ticket ${id}: ${data.subject}`,
-        );
-      }
-    } catch(err) {
-      console.error(err);
-      // doesnt matter if the email fails
-    }
-    res.status(200).json({ ok: true });
-    return;
-  }
+	const user = req.session.user;
+	if (user.type === "admin" || user.type === "developer") {
+		const data = snapshot.data() as Ticket;
+		await setDoc(snapshot.ref, body, {merge: true});
+		try {
+			// send email if the status actually changed to completed
+			if (data.status !== req.body.status && req.body.status === "completed") {
+				await sendEmail(
+					"ticketStatusCompleted",
+					{
+						id,
+						subject: body.subject,
+						reporter: body.reporter,
+						date: moment(body.date).format("DD/MM/YYYY - HH:mm"),
+						type: TicketTypeLabel[body.type],
+						reportedFrom: body.reportedFrom,
+						description: body.description,
+						environment: process.env.ENVIRONMENT,
+					},
+					[data.reporter.email],
+					`Ticket ${id}: ${data.subject}`,
+				);
+			}
+		} catch (err) {
+			console.error(err);
+			// doesnt matter if the email fails
+		}
+		res.status(200).json({ok: true});
+		return;
+	}
 
-  res.status(403).json({ ok: false });
+	res.status(403).json({ok: false});
 }

src/pages/api/tickets/index.ts

@@ -1,110 +1,103 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import { sendEmail } from "@/email";
-import { app } from "@/firebase";
-import { Ticket, TicketTypeLabel, TicketWithCorporate } from "@/interfaces/ticket";
-import { sessionOptions } from "@/lib/session";
-import {
-  collection,
-  doc,
-  getDocs,
-  getFirestore,
-  setDoc,
-  where,
-  query,
-} from "firebase/firestore";
-import { withIronSessionApiRoute } from "iron-session/next";
+import {sendEmail} from "@/email";
+import {app} from "@/firebase";
+import {Ticket, TicketTypeLabel, TicketWithCorporate} from "@/interfaces/ticket";
+import {sessionOptions} from "@/lib/session";
+import {collection, doc, getDocs, getFirestore, setDoc, where, query} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
 import moment from "moment";
-import type { NextApiRequest, NextApiResponse } from "next";
+import type {NextApiRequest, NextApiResponse} from "next";
 import ShortUniqueId from "short-unique-id";
-import { Group, CorporateUser } from "@/interfaces/user";
+import {Group, CorporateUser} from "@/interfaces/user";
 
 const db = getFirestore(app);
 
 export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
-  // due to integration with the homepage the POST request should be public
-  if (req.method === "POST") {
-    await post(req, res);
-    return;
-  }
+	// due to integration with the homepage the POST request should be public
+	if (req.method === "POST") {
+		await post(req, res);
+		return;
+	}
 
-  // specific logic for the preflight request
-  if (req.method === "OPTIONS") {
-    res.status(200).end();
-    return;
-  }
-  if (!req.session.user) {
-    res.status(401).json({ ok: false });
-    return;
-  }
+	// specific logic for the preflight request
+	if (req.method === "OPTIONS") {
+		res.status(200).end();
+		return;
+	}
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
 
-  if (req.method === "GET") {
-    await get(req, res);
-  }
+	if (req.method === "GET") {
+		await get(req, res);
+	}
 }
 
 async function get(req: NextApiRequest, res: NextApiResponse) {
-  const snapshot = await getDocs(collection(db, "tickets"));
+	const snapshot = await getDocs(collection(db, "tickets"));
 
-  const docs = snapshot.docs.map((doc) => ({
-    id: doc.id,
-    ...doc.data(),
-  })) as Ticket[];
+	const docs = snapshot.docs.map((doc) => ({
+		id: doc.id,
+		...doc.data(),
+	})) as Ticket[];
 
-  // fetch all groups for these users
+	// fetch all groups for these users
 
-  const reporters = [...new Set(docs.map((d) => d.reporter.id).filter((id) => id))];
+	const reporters = [...new Set(docs.map((d) => d.reporter.id).filter((id) => id))];
 
-  const groupsSnapshot = await getDocs(query(collection(db, "groups"), where("participants", "array-contains-any", reporters)));
-  const groups = groupsSnapshot.docs.map((doc) => doc.data()) as Group[];
+	const groupsSnapshot = await getDocs(query(collection(db, "groups"), where("participants", "array-contains-any", reporters)));
+	const groups = groupsSnapshot.docs.map((doc) => doc.data()) as Group[];
 
-  // based on the admin of each group, verify if it exists and it's of type corporate
-  const groupsAdmins = [...new Set(groups.map((g) => g.admin).filter((id) => id))];
-  const adminsSnapshot = await getDocs(query(collection(db, "users"), where("id", "in", groupsAdmins), where("type", "==", "corporate")));
-  const admins = adminsSnapshot.docs.map((doc) => doc.data());
+	// based on the admin of each group, verify if it exists and it's of type corporate
+	const groupsAdmins = [...new Set(groups.map((g) => g.admin).filter((id) => id))];
+	const adminsSnapshot = await getDocs(query(collection(db, "users"), where("id", "in", groupsAdmins), where("type", "==", "corporate")));
+	const admins = adminsSnapshot.docs.map((doc) => doc.data());
 
-  const docsWithAdmins = docs.map((d) => {
-    const group = groups.find((g) => g.participants.includes(d.reporter.id));
-    const admin = admins.find((a) => a.id === group?.admin) as CorporateUser;
+	const docsWithAdmins = docs.map((d) => {
+		const group = groups.find((g) => g.participants.includes(d.reporter.id));
+		const admin = admins.find((a) => a.id === group?.admin) as CorporateUser;
 
-    if(admin) {
-      return {
-        ...d,
-        corporate: admin.corporateInformation?.companyInformation?.name,
-      };
-    }
+		if (admin) {
+			return {
+				...d,
+				corporate: admin.corporateInformation?.companyInformation?.name,
+			};
+		}
 
-    return d;
-  }) as TicketWithCorporate[];
+		return d;
+	}) as TicketWithCorporate[];
 
-  res.status(200).json(docsWithAdmins);
+	res.status(200).json(docsWithAdmins);
 }
 
 async function post(req: NextApiRequest, res: NextApiResponse) {
-  const body = req.body as Ticket;
+	const body = req.body as Ticket;
 
-  const shortUID = new ShortUniqueId();
-  const id = body.id || shortUID.randomUUID(8);
-  await setDoc(doc(db, "tickets", id), body);
-  res.status(200).json({ ok: true });
+	const shortUID = new ShortUniqueId();
+	const id = body.id || shortUID.randomUUID(8);
+	await setDoc(doc(db, "tickets", id), body);
+	res.status(200).json({ok: true});
 
-  try {
-    await sendEmail(
-      "submittedFeedback",
-      {
-        id,
-        subject: body.subject,
-        reporter: body.reporter,
-        date: moment(body.date).format("DD/MM/YYYY - HH:mm"),
-        type: TicketTypeLabel[body.type],
-        reportedFrom: body.reportedFrom,
-        description: body.description,
-      },
-      [body.reporter.email],
-      `Ticket ${id}: ${body.subject}`
-    );
-  } catch (e) {
-    console.log(e);
-  }
+	try {
+		await sendEmail(
+			"submittedFeedback",
+			{
+				id,
+				subject: body.subject,
+				reporter: body.reporter,
+				date: moment(body.date).format("DD/MM/YYYY - HH:mm"),
+				type: TicketTypeLabel[body.type],
+				reportedFrom: body.reportedFrom,
+				description: body.description,
+				environment: process.env.ENVIRONMENT,
+			},
+			[body.reporter.email],
+			`Ticket ${id}: ${body.subject}`,
+		);
+	} catch (e) {
+		console.log(e);
+	}
 }

src/pages/api/users/[id].ts

@@ -0,0 +1,29 @@
+// 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,
+  getDoc,
+  doc,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res.status(401).json({ ok: false });
+    return;
+  }
+
+  const { id } = req.query as { id: string };
+  const snapshot = await getDoc(doc(db, "users", id));
+  if (!snapshot.exists()) return res.status(404).json({ ok: false });
+
+  res.status(200).json({ ...snapshot.data(), id: snapshot.id });
+}