Added a new type of e-mail to send to students when a new assignment is created

Report PDF improvements / bugs

Approved-by: Tiago Ribeiro

.gitignore

@@ -38,3 +38,4 @@ next-env.d.ts
 .env
 .yarn/*
 .history*
+__ENV.js

.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+      {
+        "name": "Next.js: debug server-side",
+        "type": "node-terminal",
+        "request": "launch",
+        "command": "npm run dev"
+      },
+      {
+        "name": "Next.js: debug client-side",
+        "type": "chrome",
+        "request": "launch",
+        "url": "http://localhost:3000"
+      },
+      {
+        "name": "Next.js: debug full stack",
+        "type": "node-terminal",
+        "request": "launch",
+        "command": "npm run dev",
+        "serverReadyAction": {
+          "pattern": "- Local:.+(https?://.+)",
+          "uriFormat": "%s",
+          "action": "debugWithChrome"
+        }
+      }
+    ]
+  }

next.config.js

@@ -2,6 +2,25 @@
 const nextConfig = {
 	reactStrictMode: true,
 	output: "standalone",
+	async headers() {
+		return [
+			{
+				source: "/api/packages",
+				headers: [
+					{key: "Access-Control-Allow-Credentials", value: "false"},
+					{key: "Access-Control-Allow-Origin", value: "https://encoach.com"},
+					{
+						key: "Access-Control-Allow-Methods",
+						value: "GET",
+					},
+					{
+						key: "Access-Control-Allow-Headers",
+						value: "Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date",
+					},
+				],
+			},
+		];
+	},
 };
 
 module.exports = nextConfig;

package.json

@@ -10,10 +10,14 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@beam-australia/react-env": "^3.1.1",
     "@headlessui/react": "^1.7.13",
     "@mdi/js": "^7.1.96",
     "@mdi/react": "^1.6.1",
     "@next/font": "13.1.6",
+    "@paypal/paypal-js": "^7.1.0",
+    "@paypal/react-paypal-js": "^8.1.3",
+    "@react-pdf/renderer": "^3.1.14",
     "@tanstack/react-table": "^8.10.1",
     "@types/node": "18.13.0",
     "@types/react": "18.0.27",
@@ -24,6 +28,7 @@
     "clsx": "^1.2.1",
     "countries-list": "^3.0.1",
     "country-codes-list": "^1.6.11",
+    "currency-symbol-map": "^5.1.0",
     "daisyui": "^3.1.5",
     "eslint": "8.33.0",
     "eslint-config-next": "13.1.6",
@@ -33,18 +38,24 @@
     "formidable": "^3.5.0",
     "formidable-serverless": "^1.1.1",
     "framer-motion": "^9.0.2",
+    "howler": "^2.2.4",
     "iron-session": "^6.3.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
+    "moment-timezone": "^0.5.44",
     "next": "13.1.6",
     "nodemailer": "^6.9.5",
     "nodemailer-express-handlebars": "^6.1.0",
     "primeicons": "^6.0.1",
     "primereact": "^9.2.3",
+    "qrcode": "^1.5.3",
     "random-words": "^2.0.0",
     "react": "18.2.0",
     "react-chartjs-2": "^5.2.0",
+    "react-csv": "^2.2.2",
+    "react-currency-input-field": "^3.6.12",
     "react-datepicker": "^4.18.0",
+    "react-diff-viewer": "^3.1.1",
     "react-dom": "18.2.0",
     "react-firebase-hooks": "^5.1.1",
     "react-icons": "^4.8.0",
@@ -56,6 +67,7 @@
     "react-string-replace": "^1.1.0",
     "react-toastify": "^9.1.2",
     "react-xarrows": "^2.0.2",
+    "read-excel-file": "^5.7.1",
     "short-unique-id": "^5.0.2",
     "stripe": "^13.10.0",
     "swr": "^2.1.3",
@@ -67,10 +79,14 @@
     "zustand": "^4.3.6"
   },
   "devDependencies": {
+    "@types/blob-stream": "^0.1.33",
     "@types/formidable": "^3.4.0",
+    "@types/howler": "^2.2.11",
     "@types/lodash": "^4.14.191",
     "@types/nodemailer": "^6.4.11",
     "@types/nodemailer-express-handlebars": "^4.0.3",
+    "@types/qrcode": "^1.5.5",
+    "@types/react-csv": "^1.1.10",
     "@types/react-datepicker": "^4.15.1",
     "@types/uuid": "^9.0.1",
     "@types/wavesurfer.js": "^6.0.6",
@@ -78,6 +94,7 @@
     "autoprefixer": "^10.4.13",
     "husky": "^8.0.3",
     "postcss": "^8.4.21",
-    "tailwindcss": "^3.2.4"
+    "tailwindcss": "^3.2.4",
+    "types/": "paypal/react-paypal-js"
   }
 }

src/components/DemographicInformationInput.tsx

@@ -10,18 +10,26 @@ import axios from "axios";
 import {toast} from "react-toastify";
 import {KeyedMutator} from "swr";
 import CountrySelect from "./Low/CountrySelect";
+import GenderInput from "@/components/High/GenderInput";
+import EmploymentStatusInput from "@/components/High/EmploymentStatusInput";
 
 interface Props {
+	user: User;
 	mutateUser: KeyedMutator<User>;
 }
 
-export default function DemographicInformationInput({mutateUser}: Props) {
+export default function DemographicInformationInput({user, mutateUser}: Props) {
 	const [country, setCountry] = useState<string>();
 	const [phone, setPhone] = useState<string>();
+	const [passport_id, setPassportID] = useState<string | undefined>(user.type === "student" ? user.demographicInformation?.passport_id : undefined);
 	const [gender, setGender] = useState<Gender>();
 	const [employment, setEmployment] = useState<EmploymentStatus>();
+	const [position, setPosition] = useState<string>();
 	const [isLoading, setIsLoading] = useState(false);
 
+	const [companyName, setCompanyName] = useState<string>();
+	const [commercialRegistration, setCommercialRegistration] = useState<string>();
+
 	const save = (e?: FormEvent) => {
 		if (e) e.preventDefault();
 		setIsLoading(true);
@@ -32,8 +40,11 @@ export default function DemographicInformationInput({mutateUser}: Props) {
 					country,
 					phone: `+${countryCodes.findOne("countryCode" as any, country!).countryCallingCode}${phone}`,
 					gender,
-					employment,
+					employment: user.type === "corporate" ? undefined : employment,
+					position: user.type === "corporate" ? position : undefined,
+					passport_id,
 				},
+				agentInformation: user.type === "agent" ? {companyName, commercialRegistration} : undefined,
 			})
 			.then((response) => mutateUser((response.data as {user: User}).user))
 			.catch(() => {
@@ -53,71 +64,41 @@ export default function DemographicInformationInput({mutateUser}: Props) {
 				about yourself.
 			</h2>
 			<form className="flex flex-col items-center justify-items-center gap-6 w-full h-full -md:px-4 lg:w-1/2 mb-32" onSubmit={save}>
-				<div className="relative flex flex-col gap-3 w-full">
+				{user.type === "agent" && (
-					<label className="font-normal text-base text-mti-gray-dim">Country *</label>
+					<div className="w-full flex gap-8">
-					<CountrySelect value={country} onChange={setCountry} />
+						<Input type="text" onChange={setCompanyName} name="companyName" label="Corporate Name" required />
-				</div>
+						<Input
-				<Input type="tel" name="phone" label="Phone number" onChange={(e) => setPhone(e)} placeholder="Enter phone number" required />
+							type="text"
-				<div className="relative flex flex-col gap-3 w-full">
+							onChange={setCommercialRegistration}
-					<label className="font-normal text-base text-mti-gray-dim">Gender *</label>
+							name="commercialRegistration"
-					<RadioGroup value={gender} onChange={setGender} className="flex flex-row justify-between">
+							label="Commercial Registration"
-						<RadioGroup.Option value="male">
+							required
-							{({checked}) => (
+						/>
-								<span
+					</div>
-									className={clsx(
+				)}
-										"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+				<div className="w-full grid grid-cols-2 gap-6">
-										"transition duration-300 ease-in-out",
+					<div className="relative flex flex-col gap-3 w-full">
-										!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
+						<label className="font-normal text-base text-mti-gray-dim">Country *</label>
-									)}>
+						<CountrySelect value={country} onChange={setCountry} />
-									Male
+					</div>
-								</span>
+					<Input type="tel" name="phone" label="Phone number" onChange={(e) => setPhone(e)} placeholder="Enter phone number" required />
-							)}
-						</RadioGroup.Option>
-						<RadioGroup.Option value="female">
-							{({checked}) => (
-								<span
-									className={clsx(
-										"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-										"transition duration-300 ease-in-out",
-										!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
-									)}>
-									Female
-								</span>
-							)}
-						</RadioGroup.Option>
-						<RadioGroup.Option value="other">
-							{({checked}) => (
-								<span
-									className={clsx(
-										"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-										"transition duration-300 ease-in-out",
-										!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
-									)}>
-									Other
-								</span>
-							)}
-						</RadioGroup.Option>
-					</RadioGroup>
-				</div>
-				<div className="relative flex flex-col gap-3 w-full">
-					<label className="font-normal text-base text-mti-gray-dim">Employment Status *</label>
-					<RadioGroup value={employment} onChange={setEmployment} className="grid grid-cols-2 items-center gap-4 place-items-center">
-						{EMPLOYMENT_STATUS.map(({status, label}) => (
-							<RadioGroup.Option value={status} key={status}>
-								{({checked}) => (
-									<span
-										className={clsx(
-											"px-6 py-4 w-44 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-											"transition duration-300 ease-in-out",
-											!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
-										)}>
-										{label}
-									</span>
-								)}
-							</RadioGroup.Option>
-						))}
-					</RadioGroup>
 				</div>
+				{user.type === "student" && (
+					<Input
+						type="text"
+						name="passport_id"
+						label="Passport/National ID"
+						onChange={(e) => setPassportID(e)}
+						value={passport_id}
+						placeholder="Enter National ID or Passport number"
+						required
+					/>
+				)}
+				<GenderInput value={gender} onChange={setGender} />
+				{user.type === "corporate" && (
+					<Input name="position" onChange={setPosition} type="text" label="Position" placeholder="CEO, Head of Marketing..." required />
+				)}
+				{user.type !== "corporate" && <EmploymentStatusInput value={employment} onChange={setEmployment} />}
 			</form>
 
 			<div className="self-end flex justify-end w-full gap-8 absolute bottom-8 left-0 px-8">
@@ -125,7 +106,14 @@ export default function DemographicInformationInput({mutateUser}: Props) {
 					className="lg:mt-8 max-w-[400px] w-full self-end"
 					color="purple"
 					onClick={save}
-					disabled={isLoading || !country || !phone || !gender || !employment}>
+					disabled={
+						isLoading ||
+						!country ||
+						!phone ||
+						!gender ||
+						(user.type === "corporate" ? !position : !employment) ||
+						(user.type === "agent" ? !companyName || !commercialRegistration : false)
+					}>
 					{!isLoading && "Save information"}
 					{isLoading && (
 						<div className="flex items-center justify-center">

src/components/Diagnostic.tsx

@@ -1,5 +1,4 @@
 import {infoButtonStyle} from "@/constants/buttonStyles";
-import {BAND_SCORES} from "@/constants/ielts";
 import {Module} from "@/interfaces";
 import {User} from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
@@ -23,8 +22,8 @@ interface Props {
 
 export default function Diagnostic({onFinish}: Props) {
 	const [focus, setFocus] = useState<"academic" | "general">();
-	const [levels, setLevels] = useState({reading: -1, listening: -1, writing: -1, speaking: -1});
+	const [levels, setLevels] = useState({reading: -1, listening: -1, writing: -1, speaking: -1, level: 0});
-	const [desiredLevels, setDesiredLevels] = useState({reading: 9, listening: 9, writing: 9, speaking: 9});
+	const [desiredLevels, setDesiredLevels] = useState({reading: 9, listening: 9, writing: 9, speaking: 9, level: 9});
 
 	const router = useRouter();
 
@@ -52,7 +51,7 @@ export default function Diagnostic({onFinish}: Props) {
 		axios
 			.patch("/api/users/update", {
 				focus,
-				levels: Object.values(levels).includes(-1) ? {reading: 0, listening: 0, writing: 0, speaking: 0} : levels,
+				levels: Object.values(levels).includes(-1) ? {reading: 0, listening: 0, writing: 0, speaking: 0, level: 0} : levels,
 				desiredLevels,
 				isFirstLogin: false,
 			})

src/components/Exercises/FillBlanks.tsx

@@ -53,7 +53,7 @@ function WordsDrawer({words, isOpen, blankId, previouslySelectedWord, onCancel,
 				</div>
 				<div className="flex justify-between w-full">
 					<Button color="purple" variant="outline" className="max-w-[200px] w-full" onClick={onCancel}>
-						Back
+						Cancel
 					</Button>
 					<Button color="purple" className="max-w-[200px] w-full" onClick={() => onAnswer(selectedWord!)} disabled={!selectedWord}>
 						Confirm

src/components/Exercises/InteractiveSpeaking.tsx

@@ -11,7 +11,16 @@ const ReactMediaRecorder = dynamic(() => import("react-media-recorder").then((mo
 	ssr: false,
 });
 
-export default function InteractiveSpeaking({id, title, text, type, prompts, onNext, onBack}: InteractiveSpeakingExercise & CommonProps) {
+export default function InteractiveSpeaking({
+	id,
+	title,
+	text,
+	type,
+	prompts,
+	updateIndex,
+	onNext,
+	onBack,
+}: InteractiveSpeakingExercise & CommonProps) {
 	const [recordingDuration, setRecordingDuration] = useState(0);
 	const [isRecording, setIsRecording] = useState(false);
 	const [mediaBlob, setMediaBlob] = useState<string>();
@@ -20,6 +29,10 @@ export default function InteractiveSpeaking({id, title, text, type, prompts, onN
 
 	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
 
+	useEffect(() => {
+		if (updateIndex) updateIndex(promptIndex);
+	}, [promptIndex, updateIndex]);
+
 	useEffect(() => {
 		if (hasExamEnded) {
 			onNext({

src/components/Exercises/MultipleChoice.tsx

@@ -48,7 +48,16 @@ function Question({
 	);
 }
 
-export default function MultipleChoice({id, prompt, type, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
+export default function MultipleChoice({
+	id,
+	prompt,
+	type,
+	questions,
+	userSolutions,
+	updateIndex,
+	onNext,
+	onBack,
+}: MultipleChoiceExercise & CommonProps) {
 	const [answers, setAnswers] = useState<{question: string; option: string}[]>(userSolutions);
 	const [questionIndex, setQuestionIndex] = useState(0);
 
@@ -59,6 +68,10 @@ export default function MultipleChoice({id, prompt, type, questions, userSolutio
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [hasExamEnded]);
 
+	useEffect(() => {
+		if (updateIndex) updateIndex(questionIndex);
+	}, [questionIndex, updateIndex]);
+
 	const onSelectOption = (option: string) => {
 		const question = questions[questionIndex];
 		setAnswers((prev) => [...prev.filter((x) => x.question !== question.id), {option, question: question.id}]);

src/components/Exercises/TrueFalse.tsx

@@ -17,7 +17,11 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
 	const calculateScore = () => {
 		const total = questions.length || 0;
 		const correct = answers.filter(
-			(x) => questions.find((y) => x.id.toString() === y.id.toString())?.solution === x.solution.toLowerCase() || false,
+			(x) =>
+				questions
+					.find((y) => x.id.toString() === y.id.toString())
+					?.solution?.toString()
+					.toLowerCase() === x.solution.toLowerCase() || false,
 		).length;
 		const missing = total - answers.filter((x) => questions.find((y) => x.id.toString() === y.id.toString())).length;
 
@@ -62,41 +66,37 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
 				</div>
 				<span className="text-sm w-full leading-6">You can click a selected option again to deselect it.</span>
 				<div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-8">
-					{questions.map((question, index) => (
+					{questions.map((question, index) => {
-						<div key={question.id.toString()} className="flex flex-col gap-4">
+						const id = question.id.toString();
-							<span>
+
-								{index + 1}. {question.prompt}
+						return (
-							</span>
+							<div key={question.id.toString()} className="flex flex-col gap-4">
-							<div className="flex gap-4">
+								<span>
-								<Button
+									{index + 1}. {question.prompt}
-									variant={
+								</span>
-										answers.find((x) => x.id.toString() === question.id.toString())?.solution === "true" ? "solid" : "outline"
+								<div className="flex gap-4">
-									}
+									<Button
-									onClick={() => toggleAnswer("true", question.id.toString())}
+										variant={answers.find((x) => x.id.toString() === id)?.solution === "true" ? "solid" : "outline"}
-									className="!py-2">
+										onClick={() => toggleAnswer("true", id)}
-									True
+										className="!py-2">
-								</Button>
+										True
-								<Button
+									</Button>
-									variant={
+									<Button
-										answers.find((x) => x.id.toString() === question.id.toString())?.solution === "false" ? "solid" : "outline"
+										variant={answers.find((x) => x.id.toString() === id)?.solution === "false" ? "solid" : "outline"}
-									}
+										onClick={() => toggleAnswer("false", id)}
-									onClick={() => toggleAnswer("false", question.id.toString())}
+										className="!py-2">
-									className="!py-2">
+										False
-									False
+									</Button>
-								</Button>
+									<Button
-								<Button
+										variant={answers.find((x) => x.id.toString() === id)?.solution === "not_given" ? "solid" : "outline"}
-									variant={
+										onClick={() => toggleAnswer("not_given", id)}
-										answers.find((x) => x.id.toString() === question.id.toString())?.solution === "not_given"
+										className="!py-2">
-											? "solid"
+										Not Given
-											: "outline"
+									</Button>
-									}
+								</div>
-									onClick={() => toggleAnswer("not_given", question.id.toString())}
-									className="!py-2">
-									Not Given
-								</Button>
 							</div>
-						</div>
+						);
-					))}
+					})}
 				</div>
 			</div>
 

src/components/Exercises/WriteBlanks.tsx

@@ -27,8 +27,8 @@ function Blank({
 	const [userInput, setUserInput] = useState(userSolution || "");
 
 	useEffect(() => {
-		const words = userInput.split(" ").filter((x) => x !== "");
+		const words = userInput.split(" ");
-		if (words.length >= maxWords) {
+		if (words.length > maxWords) {
 			toast.warning(`You have reached your word limit of ${maxWords} words!`, {toastId: "word-limit"});
 			setUserInput(words.join(" ").trim());
 		}

src/components/Exercises/Writing.tsx

@@ -26,6 +26,8 @@ export default function Writing({
 	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
 
 	useEffect(() => {
+		if (localStorage.getItem("enable_paste")) return;
+
 		const listener = (e: KeyboardEvent) => {
 			if ((e.ctrlKey || e.metaKey) && e.key === "v") {
 				e.preventDefault();
@@ -93,22 +95,8 @@ export default function Writing({
 			)}
 			<div className="flex flex-col h-full w-full gap-9 mb-20">
 				<div className="flex flex-col w-full gap-7 bg-mti-gray-smoke rounded-xl py-8 pb-12 px-16">
-					<span>
+					<span className="whitespace-pre-wrap">{prefix.replaceAll("\\n", "\n")}</span>
-						{prefix.split("\\n").map((line, index) => (
+					<span className="font-semibold whitespace-pre-wrap">{prompt.replaceAll("\\n", "\n")}</span>
-							<React.Fragment key={index}>
-								{line}
-								<br />
-							</React.Fragment>
-						))}
-					</span>
-					<span className="font-semibold">
-						{prompt.split("\\n").map((line, index) => (
-							<Fragment key={index}>
-								<p>{line}</p>
-								<br />
-							</Fragment>
-						))}
-					</span>
 					{attachment && (
 						<img
 							onClick={() => setIsModalOpen(true)}
@@ -120,14 +108,7 @@ export default function Writing({
 				</div>
 
 				<div className="w-full h-full flex flex-col gap-4">
-					<span>
+					<span className="whitespace-pre-wrap">{suffix}</span>
-						{suffix.split("\\n").map((line, index) => (
-							<React.Fragment key={index}>
-								{line}
-								<br />
-							</React.Fragment>
-						))}
-					</span>
 					<textarea
 						onContextMenu={(e) => e.preventDefault()}
 						className="w-full h-full min-h-[300px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl"

src/components/Exercises/index.tsx

@@ -22,11 +22,17 @@ import InteractiveSpeaking from "./InteractiveSpeaking";
 const MatchSentences = dynamic(() => import("@/components/Exercises/MatchSentences"), {ssr: false});
 
 export interface CommonProps {
+	updateIndex?: (internalIndex: number) => void;
 	onNext: (userSolutions: UserSolution) => void;
 	onBack: (userSolutions: UserSolution) => void;
 }
 
-export const renderExercise = (exercise: Exercise, onNext: (userSolutions: UserSolution) => void, onBack: (userSolutions: UserSolution) => void) => {
+export const renderExercise = (
+	exercise: Exercise,
+	onNext: (userSolutions: UserSolution) => void,
+	onBack: (userSolutions: UserSolution) => void,
+	updateIndex?: (internalIndex: number) => void,
+) => {
 	switch (exercise.type) {
 		case "fillBlanks":
 			return <FillBlanks key={exercise.id} {...(exercise as FillBlanksExercise)} onNext={onNext} onBack={onBack} />;
@@ -35,7 +41,15 @@ export const renderExercise = (exercise: Exercise, onNext: (userSolutions: UserS
 		case "matchSentences":
 			return <MatchSentences key={exercise.id} {...(exercise as MatchSentencesExercise)} onNext={onNext} onBack={onBack} />;
 		case "multipleChoice":
-			return <MultipleChoice key={exercise.id} {...(exercise as MultipleChoiceExercise)} onNext={onNext} onBack={onBack} />;
+			return (
+				<MultipleChoice
+					key={exercise.id}
+					{...(exercise as MultipleChoiceExercise)}
+					updateIndex={updateIndex}
+					onNext={onNext}
+					onBack={onBack}
+				/>
+			);
 		case "writeBlanks":
 			return <WriteBlanks key={exercise.id} {...(exercise as WriteBlanksExercise)} onNext={onNext} onBack={onBack} />;
 		case "writing":
@@ -43,6 +57,14 @@ export const renderExercise = (exercise: Exercise, onNext: (userSolutions: UserS
 		case "speaking":
 			return <Speaking key={exercise.id} {...(exercise as SpeakingExercise)} onNext={onNext} onBack={onBack} />;
 		case "interactiveSpeaking":
-			return <InteractiveSpeaking key={exercise.id} {...(exercise as InteractiveSpeakingExercise)} onNext={onNext} onBack={onBack} />;
+			return (
+				<InteractiveSpeaking
+					key={exercise.id}
+					{...(exercise as InteractiveSpeakingExercise)}
+					updateIndex={updateIndex}
+					onNext={onNext}
+					onBack={onBack}
+				/>
+			);
 	}
 };

src/components/High/EmploymentStatusInput.tsx

@@ -0,0 +1,32 @@
+import {EmploymentStatus, EMPLOYMENT_STATUS} from "@/interfaces/user";
+import {RadioGroup} from "@headlessui/react";
+import clsx from "clsx";
+
+interface Props {
+	value?: EmploymentStatus;
+	onChange: (value?: EmploymentStatus) => void;
+}
+
+export default function EmploymentStatusInput({value, onChange}: Props) {
+	return (
+		<div className="relative flex flex-col gap-3 w-full">
+			<label className="font-normal text-base text-mti-gray-dim">Employment Status *</label>
+			<RadioGroup value={value} onChange={onChange} className="grid grid-cols-2 items-center gap-4 place-items-center">
+				{EMPLOYMENT_STATUS.map(({status, label}) => (
+					<RadioGroup.Option value={status} key={status}>
+						{({checked}) => (
+							<span
+								className={clsx(
+									"px-6 py-4 w-40 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+									"transition duration-300 ease-in-out",
+									!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
+								)}>
+								{label}
+							</span>
+						)}
+					</RadioGroup.Option>
+				))}
+			</RadioGroup>
+		</div>
+	);
+}

src/components/High/GenderInput.tsx

@@ -0,0 +1,54 @@
+import {Gender} from "@/interfaces/user";
+import {RadioGroup} from "@headlessui/react";
+import clsx from "clsx";
+
+interface Props {
+	value?: Gender;
+	onChange: (value?: Gender) => void;
+}
+
+export default function GenderInput({value, onChange}: Props) {
+	return (
+		<div className="relative flex flex-col gap-3 w-full">
+			<label className="font-normal text-base text-mti-gray-dim">Gender *</label>
+			<RadioGroup value={value} onChange={onChange} className="flex flex-row gap-4 justify-between">
+				<RadioGroup.Option value="male">
+					{({checked}) => (
+						<span
+							className={clsx(
+								"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+								"transition duration-300 ease-in-out",
+								!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
+							)}>
+							Male
+						</span>
+					)}
+				</RadioGroup.Option>
+				<RadioGroup.Option value="female">
+					{({checked}) => (
+						<span
+							className={clsx(
+								"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+								"transition duration-300 ease-in-out",
+								!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
+							)}>
+							Female
+						</span>
+					)}
+				</RadioGroup.Option>
+				<RadioGroup.Option value="other">
+					{({checked}) => (
+						<span
+							className={clsx(
+								"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+								"transition duration-300 ease-in-out",
+								!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
+							)}>
+							Other
+						</span>
+					)}
+				</RadioGroup.Option>
+			</RadioGroup>
+		</div>
+	);
+}

src/components/Low/Badge.tsx

@@ -0,0 +1,30 @@
+import {Module} from "@/interfaces";
+import clsx from "clsx";
+import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
+
+interface Props {
+	module: Module;
+	children: string;
+}
+
+export default function Badge({module, children}: Props) {
+	return (
+		<div
+			key={module}
+			className={clsx(
+				"flex gap-2 items-center w-fit text-white -md:px-4 xl:px-4 md:px-2 py-2 rounded-xl",
+				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="w-4 h-4" />}
+			{module === "listening" && <BsHeadphones className="w-4 h-4" />}
+			{module === "writing" && <BsPen className="w-4 h-4" />}
+			{module === "speaking" && <BsMegaphone className="w-4 h-4" />}
+			{module === "level" && <BsClipboard className="w-4 h-4" />}
+			<span className="text-sm">{children}</span>
+		</div>
+	);
+}

src/components/Low/Button.tsx

@@ -4,7 +4,7 @@ import {BsArrowRepeat} from "react-icons/bs";
 
 interface Props {
 	children: ReactNode;
-	color?: "rose" | "purple" | "red" | "green";
+	color?: "rose" | "purple" | "red" | "green" | "gray";
 	variant?: "outline" | "solid";
 	className?: string;
 	disabled?: boolean;
@@ -39,6 +39,11 @@ export default function Button({
 			outline:
 				"bg-transparent text-mti-red-light border border-mti-red-light hover:bg-mti-red-light disabled:text-mti-red disabled:bg-mti-red-ultralight disabled:border-none selection:bg-mti-red-dark hover:text-white selection:text-white",
 		},
+		gray: {
+			solid: "bg-mti-gray-davy text-white border border-mti-gray-davy  hover:bg-mti-gray-davy disabled:text-mti-gray-davy disabled:bg-mti-gray-davy selection:bg-mti-gray-davy",
+			outline:
+				"bg-transparent text-mti-gray-davy border border-mti-gray-davy hover:bg-mti-gray-davy disabled:text-mti-gray-davy disabled:bg-mti-gray-davy disabled:border-none selection:bg-mti-gray-davy hover:text-white selection:text-white",
+		},
 		rose: {
 			solid: "bg-mti-rose-light text-white border border-mti-rose-light  hover:bg-mti-rose disabled:text-mti-rose disabled:bg-mti-rose-ultralight selection:bg-mti-rose-dark",
 			outline:

src/components/Low/Checkbox.tsx

@@ -6,11 +6,15 @@ interface Props {
 	isChecked: boolean;
 	onChange: (isChecked: boolean) => void;
 	children: ReactNode;
+	disabled?: boolean;
 }
 
-export default function Checkbox({isChecked, onChange, children}: Props) {
+export default function Checkbox({isChecked, onChange, children, disabled}: Props) {
 	return (
-		<div className="flex gap-3 items-center text-mti-gray-dim text-sm cursor-pointer" onClick={() => onChange(!isChecked)}>
+		<div className="flex gap-3 items-center text-mti-gray-dim text-sm cursor-pointer" onClick={() => {
+			if(disabled) return;
+			onChange(!isChecked);
+		}}>
 			<input type="checkbox" className="hidden" />
 			<div
 				className={clsx(

src/components/Low/Input.tsx

@@ -3,17 +3,31 @@ import {useState} from "react";
 
 interface Props {
 	type: "email" | "text" | "password" | "tel" | "number";
+	roundness?: "full" | "xl";
 	required?: boolean;
 	label?: string;
 	placeholder?: string;
 	defaultValue?: string | number;
+	value?: string | number;
 	className?: string;
 	disabled?: boolean;
 	name: string;
 	onChange: (value: string) => void;
 }
 
-export default function Input({type, label, placeholder, name, required = false, defaultValue, className, disabled = false, onChange}: Props) {
+export default function Input({
+	type,
+	label,
+	placeholder,
+	name,
+	required = false,
+	value,
+	defaultValue,
+	className,
+	roundness = "full",
+	disabled = false,
+	onChange,
+}: Props) {
 	const [showPassword, setShowPassword] = useState(false);
 
 	if (type === "password") {
@@ -57,9 +71,15 @@ export default function Input({type, label, placeholder, name, required = false,
 				type={type}
 				name={name}
 				disabled={disabled}
+				value={value}
 				onChange={(e) => onChange(e.target.value)}
+				min={type === "number" ? 0 : undefined}
 				placeholder={placeholder}
-				className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+				className={clsx(
+					"px-8 py-6 text-sm font-normal bg-white border border-mti-gray-platinum focus:outline-none",
+					"placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed",
+					roundness === "full" ? "rounded-full" : "rounded-xl",
+				)}
 				required={required}
 				defaultValue={defaultValue}
 			/>

src/components/Low/TImezoneSelect.tsx

@@ -0,0 +1,64 @@
+import { Fragment, useState } from "react";
+import { Combobox, Transition } from "@headlessui/react";
+import { BsChevronExpand } from "react-icons/bs";
+import moment from "moment-timezone";
+
+interface Props {
+  value?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+}
+
+export default function TimezoneSelect({
+  value,
+  disabled = false,
+  onChange,
+}: Props) {
+  const [query, setQuery] = useState("");
+  
+  const timezones = moment.tz.names();
+
+  const filteredTimezones = query === "" ? timezones : timezones.filter((x) => x.toLowerCase().includes(query.toLowerCase()));
+  return (
+    <>
+      <Combobox value={value} onChange={onChange} disabled={disabled}>
+        <div className="relative mt-1">
+          <div className="relative w-full cursor-default overflow-hidden ">
+            <Combobox.Input
+              className="py-6 w-full px-8 text-sm font-normal placeholder:text-mti-gray-cool bg-white disabled:bg-mti-gray-platinum/40 rounded-full border border-mti-gray-platinum focus:outline-none"
+              onChange={(e) => setQuery(e.target.value)}
+            />
+            <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-8">
+              <BsChevronExpand />
+            </Combobox.Button>
+          </div>
+          <Transition
+            as={Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+            afterLeave={() => setQuery("")}
+          >
+            <Combobox.Options className="absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-xl bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+              {filteredTimezones.map((timezone: string) => (
+                <Combobox.Option
+                  key={timezone}
+                  value={timezone}
+                  className={({ active }) =>
+                    `relative cursor-default select-none py-2 pl-10 pr-4 ${
+                      active
+                        ? "bg-mti-purple-light text-white"
+                        : "text-gray-900"
+                    }`
+                  }
+                >
+                  {timezone}
+                </Combobox.Option>
+              ))}
+            </Combobox.Options>
+          </Transition>
+        </div>
+      </Combobox>
+    </>
+  );
+}

src/components/MobileMenu.tsx

@@ -103,14 +103,25 @@ export default function MobileMenu({isOpen, onClose, path, user}: Props) {
 										)}>
 										Record
 									</Link>
-									{user.type !== "student" && (
+									{["admin", "developer", "agent", "corporate"].includes(user.type) && (
 										<Link
-											href="/admin"
+											href="/payment-record"
 											className={clsx(
 												"transition ease-in-out duration-300 w-fit",
-												path === "/admin" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
+												path === "/payment-record" &&
+													"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
 											)}>
-											Admin
+											Payment Record
+										</Link>
+									)}
+									{["admin", "developer", "corporate", "teacher"].includes(user.type) && (
+										<Link
+											href="/settings"
+											className={clsx(
+												"transition ease-in-out duration-300 w-fit",
+												path === "/settings" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
+											)}>
+											Settings
 										</Link>
 									)}
 									<Link

src/components/Navbar.tsx

@@ -7,7 +7,11 @@ import {BsList} from "react-icons/bs";
 import clsx from "clsx";
 import moment from "moment";
 import MobileMenu from "./MobileMenu";
-import {useState} from "react";
+import {useEffect, useState} from "react";
+import {Type} from "@/interfaces/user";
+import {USER_TYPE_LABELS} from "@/resources/user";
+import useGroups from "@/hooks/useGroups";
+import {isUserFromCorporate} from "@/utils/groups";
 
 interface Props {
 	user: User;
@@ -20,6 +24,7 @@ interface Props {
 /* eslint-disable @next/next/no-img-element */
 export default function Navbar({user, path, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
 	const [isMenuOpen, setIsMenuOpen] = useState(false);
+	const [disablePaymentPage, setDisablePaymentPage] = useState(true);
 
 	const disableNavigation = preventNavigation(navDisabled, focusMode);
 	const router = useRouter();
@@ -42,6 +47,11 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
 		return today.add(7, "days").isAfter(momentDate);
 	};
 
+	useEffect(() => {
+		if (user.type !== "student" && user.type !== "teacher") setDisablePaymentPage(false);
+		isUserFromCorporate(user.id).then((result) => setDisablePaymentPage(result));
+	}, [user]);
+
 	return (
 		<>
 			{user && <MobileMenu path={path} isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} user={user} />}
@@ -53,7 +63,7 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
 				<div className="flex justify-end -md:items-center gap-4 md:w-5/6 md:mr-8">
 					{showExpirationDate() && (
 						<Link
-							href="https://encoach.com/join"
+							href={disablePaymentPage ? "/payment" : ""}
 							data-tip="Expiry date"
 							className={clsx(
 								"py-2 px-6 w-fit flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
@@ -69,7 +79,10 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
 					)}
 					<Link href={disableNavigation ? "" : "/profile"} className="flex gap-6 items-center justify-end -md:hidden">
 						<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full object-cover" />
-						<span className="text-right -md:hidden">{user.name}</span>
+						<span className="text-right -md:hidden">
+							{user.type === "corporate" ? `${user.corporateInformation?.companyInformation.name} |` : ""} {user.name} |{" "}
+							{USER_TYPE_LABELS[user.type]}
+						</span>
 					</Link>
 					<div className="cursor-pointer md:hidden" onClick={() => setIsMenuOpen(true)}>
 						<BsList className="text-mti-purple-light w-8 h-8" />

src/components/PayPalPayment.tsx

@@ -0,0 +1,66 @@
+import {DurationUnit} from "@/interfaces/paypal";
+import {CreateOrderActions, CreateOrderData, OnApproveActions, OnApproveData, OnCancelledActions, OrderResponseBody} from "@paypal/paypal-js";
+import {PayPalButtons, PayPalScriptProvider, usePayPalScriptReducer} from "@paypal/react-paypal-js";
+import axios from "axios";
+import {useEffect, useState} from "react";
+import {toast} from "react-toastify";
+
+interface Props {
+	clientID: string;
+	currency: string;
+	price: number;
+	duration: number;
+	duration_unit: DurationUnit;
+	setIsLoading: (isLoading: boolean) => void;
+	onSuccess: (duration: number, duration_unit: DurationUnit) => void;
+}
+
+export default function PayPalPayment({clientID, price, currency, duration, duration_unit, setIsLoading, onSuccess}: Props) {
+	const createOrder = async (data: CreateOrderData, actions: CreateOrderActions): Promise<string> => {
+		setIsLoading(true);
+
+		return axios
+			.post<OrderResponseBody>("/api/paypal", {currencyCode: currency, price})
+			.then((response) => response.data)
+			.then((data) => data.id);
+	};
+
+	const onApprove = async (data: OnApproveData, actions: OnApproveActions) => {
+		const request = await axios.post<{ok: boolean; reason?: string}>("/api/paypal/approve", {id: data.orderID, duration, duration_unit});
+
+		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);
+	};
+
+	const onError = async (data: Record<string, unknown>) => {
+		setIsLoading(false);
+	};
+
+	const onCancel = async (data: Record<string, unknown>, actions: OnCancelledActions) => {
+		setIsLoading(false);
+	};
+
+	return (
+		<PayPalScriptProvider
+			options={{
+				clientId: clientID,
+				currency,
+				intent: "capture",
+				commit: true,
+				vault: true,
+			}}>
+			<PayPalButtons
+				className="w-full"
+				style={{layout: "vertical"}}
+				createOrder={createOrder}
+				onApprove={onApprove}
+				onCancel={onCancel}
+				onError={onError}></PayPalButtons>
+		</PayPalScriptProvider>
+	);
+}

src/components/PaymentAssetManager.tsx

@@ -0,0 +1,145 @@
+import React, {ChangeEvent} from "react";
+import {BsUpload, BsDownload, BsTrash, BsArrowRepeat, BsXCircleFill} from "react-icons/bs";
+import {FilesStorage} from "@/interfaces/storage.files";
+import axios from "axios";
+
+interface Asset {
+	file: string | File;
+	complete: boolean;
+}
+
+const PaymentAssetManager = (props: {
+	asset: string | undefined;
+	permissions: "read" | "write";
+	type: FilesStorage;
+	reload: () => void;
+	paymentId: string;
+}) => {
+	const {asset, permissions, type, paymentId} = props;
+
+	const fileInputRef = React.useRef<HTMLInputElement>(null);
+	const fileInputReplaceRef = React.useRef<HTMLInputElement>(null);
+
+	const [managingAsset, setManagingAsset] = React.useState<Asset>({
+		file: asset || "",
+		complete: asset ? true : false,
+	});
+
+	const {file, complete} = managingAsset;
+
+	const deleteAsset = () => {
+		if (confirm("Are you sure you want to delete this document?")) {
+			axios
+				.delete(`/api/payments/files/${type}/${paymentId}`)
+				.then((response) => {
+					if (response.status === 200) {
+						console.log("File deleted successfully!");
+						setManagingAsset({
+							file: "",
+							complete: false,
+						});
+						return;
+					}
+
+					console.error("File deletion failed");
+				})
+				.catch((error) => {
+					console.error("Error occurred during file deletion:", error);
+				})
+				.finally(props.reload);
+		}
+	};
+
+	const renderFileInput = (onChange: any, ref: React.RefObject<HTMLInputElement>) => (
+		<input type="file" ref={ref} style={{display: "none"}} onChange={onChange} multiple={false} accept="application/pdf" />
+	);
+
+	const handleFileChange = async (e: Event, method: "post" | "patch") => {
+		const newFile = (e.target as HTMLInputElement).files?.[0];
+		if (newFile) {
+			setManagingAsset({
+				file: newFile,
+				complete: false,
+			});
+
+			const formData = new FormData();
+			formData.append("file", newFile);
+
+			axios[method](`/api/payments/files/${type}/${paymentId}`, formData, {
+				headers: {
+					"Content-Type": "multipart/form-data",
+				},
+			})
+				.then((response) => {
+					if (response.status === 200) {
+						console.log("File uploaded successfully!");
+						console.log("Uploaded File URL:", response.data.ref);
+						// Further actions upon successful upload
+						setManagingAsset({
+							file: response.data.ref,
+							complete: true,
+						});
+						return;
+					}
+
+					console.error("File upload failed");
+				})
+				.catch((error) => {
+					console.error("Error occurred during file upload:", error);
+				})
+				.finally(props.reload);
+		}
+	};
+
+	const downloadAsset = () => {
+		axios
+			.get(`/api/payments/files/${type}/${paymentId}`)
+			.then((response) => {
+				if (response.status === 200) {
+					console.log("Uploaded File URL:", response.data.url);
+					const link = document.createElement("a");
+					link.download = response.data.filename;
+					link.href = response.data.url;
+					link.click();
+					return;
+				}
+
+				console.error("Failed to download file");
+			})
+			.catch((error) => {
+				console.error("Error occurred during file upload:", error);
+			});
+	};
+
+	if (permissions === "read") {
+		if (file) return <BsDownload onClick={downloadAsset} />;
+		return null;
+	}
+
+	if (file) {
+		if (complete) {
+			return (
+				<>
+					<BsDownload onClick={downloadAsset} />
+					<BsArrowRepeat onClick={() => fileInputReplaceRef.current?.click()} />
+					<BsTrash onClick={deleteAsset} />
+					{renderFileInput((e: Event) => handleFileChange(e, "patch"), fileInputReplaceRef)}
+					{renderFileInput((e: Event) => handleFileChange(e, "post"), fileInputRef)}
+				</>
+			);
+		}
+
+		return <span className="loading loading-infinity w-8" />;
+	}
+
+	return permissions === "write" ? (
+		<>
+			<BsUpload onClick={() => fileInputRef.current?.click()} />
+			{renderFileInput((e: Event) => handleFileChange(e, "post"), fileInputRef)}
+		</>
+	) : (
+		<BsXCircleFill />
+	);
+};
+
+export default PaymentAssetManager;

src/components/ProfileCard.tsx

@@ -1,31 +0,0 @@
-/* eslint-disable @next/next/no-img-element */
-import {User} from "@/interfaces/user";
-import clsx from "clsx";
-import LevelLabel from "./LevelLabel";
-import LevelProgressBar from "./LevelProgressBar";
-import {Avatar} from "primereact/avatar";
-
-interface Props {
-	user: User;
-	className: string;
-}
-
-export default function ProfileCard({user, className}: Props) {
-	return (
-		<div className={clsx("bg-white drop-shadow-xl p-4 md:p-8 rounded-xl w-full flex flex-col gap-6", className)}>
-			<div className="flex w-full items-center gap-8">
-				<div className="w-16 md:w-24 h-16 md:h-24 rounded-full border-2 md:border-4 border-white drop-shadow-md md:drop-shadow-xl">
-					{user.profilePicture.length > 0 && <img src={user.profilePicture} alt="Profile picture" className="rounded-full object-cover" />}
-					{user.profilePicture.length === 0 && (
-						<Avatar size="xlarge" style={{width: "100%", height: "100%"}} label={user.name.slice(0, 1)} shape="circle" />
-					)}
-				</div>
-				<div className="flex flex-col justify-center">
-					<span className="text-neutral-600 font-bold text-xl lg:text-2xl">{user.name}</span>
-					<LevelLabel experience={user.experience} />
-				</div>
-			</div>
-			<LevelProgressBar experience={user.experience} progressBarWidth="w-32 md:w-96" />
-		</div>
-	);
-}

src/components/ProfileLevel.tsx

@@ -1,31 +0,0 @@
-/* eslint-disable @next/next/no-img-element */
-import {User} from "@/interfaces/user";
-import {levelCalculator} from "@/resources/level";
-import clsx from "clsx";
-import LevelLabel from "./LevelLabel";
-import LevelProgressBar from "./LevelProgressBar";
-import {Avatar} from "primereact/avatar";
-
-interface Props {
-	user: User;
-	className?: string;
-}
-
-export default function ProfileLevel({user, className}: Props) {
-	const levelResult = levelCalculator(user.experience);
-
-	return (
-		<div className={clsx("flex flex-col items-center justify-center gap-4", className)}>
-			<div className="w-16 md:w-24 h-16 md:h-24 rounded-full">
-				{user.profilePicture.length > 0 && <img src={user.profilePicture} alt="Profile picture" className="rounded-full object-cover" />}
-				{user.profilePicture.length === 0 && (
-					<Avatar size="xlarge" style={{width: "100%", height: "100%"}} label={user.name.slice(0, 1)} shape="circle" />
-				)}
-			</div>
-			<div className="flex flex-col gap-1 items-center">
-				<LevelLabel experience={user.experience} />
-				<LevelProgressBar experience={user.experience} className="text-black" />
-			</div>
-		</div>
-	);
-}

src/components/ProfileSummary.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import {User} from "@/interfaces/user";
+import {USER_TYPE_LABELS} from "@/resources/user";
 import {calculateAverageLevel} from "@/utils/score";
 import {capitalize} from "lodash";
 import {ReactElement} from "react";
@@ -28,7 +29,7 @@ export default function ProfileSummary({user, items}: Props) {
 				<div className="flex -md:flex-col justify-between w-full gap-8">
 					<div className="flex flex-col gap-2 py-2">
 						<h1 className="font-bold text-2xl md:text-4xl">{user.name}</h1>
-						<h6 className="font-normal text-base text-mti-gray-taupe">{capitalize(user.type)}</h6>
+						<h6 className="font-normal text-base text-mti-gray-taupe">{USER_TYPE_LABELS[user.type]}</h6>
 					</div>
 					<ProgressBar
 						label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}

src/components/Sidebar.tsx

@@ -1,7 +1,17 @@
 import clsx from "clsx";
 import {IconType} from "react-icons";
 import {MdSpaceDashboard} from "react-icons/md";
-import {BsFileEarmarkText, BsClockHistory, BsPencil, BsGraphUp, BsChevronBarRight, BsChevronBarLeft, BsShieldFill} from "react-icons/bs";
+import {
+	BsFileEarmarkText,
+	BsClockHistory,
+	BsPencil,
+	BsGraphUp,
+	BsChevronBarRight,
+	BsChevronBarLeft,
+	BsShieldFill,
+	BsCloudFill,
+	BsCurrencyDollar,
+} from "react-icons/bs";
 import {RiLogoutBoxFill} from "react-icons/ri";
 import {SlPencil} from "react-icons/sl";
 import {FaAward} from "react-icons/fa";
@@ -89,8 +99,35 @@ 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 !== "student" && (
+				{["admin", "developer", "agent", "corporate"].includes(userType || "") && (
-					<Nav disabled={disableNavigation} Icon={BsShieldFill} label="Admin" path={path} keyPath="/admin" isMinimized={isMinimized} />
+					<Nav
+						disabled={disableNavigation}
+						Icon={BsCurrencyDollar}
+						label="Payment Record"
+						path={path}
+						keyPath="/payment-record"
+						isMinimized={isMinimized}
+					/>
+				)}
+				{["admin", "developer", "corporate", "teacher"].includes(userType || "") && (
+					<Nav
+						disabled={disableNavigation}
+						Icon={BsShieldFill}
+						label="Settings"
+						path={path}
+						keyPath="/settings"
+						isMinimized={isMinimized}
+					/>
+				)}
+				{userType === "developer" && (
+					<Nav
+						disabled={disableNavigation}
+						Icon={BsCloudFill}
+						label="Generation"
+						path={path}
+						keyPath="/generation"
+						isMinimized={isMinimized}
+					/>
 				)}
 			</div>
 			<div className="xl:hidden -xl:flex flex-col gap-3">
@@ -100,11 +137,14 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 				<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="Admin" path={path} keyPath="/admin" isMinimized={true} />
+					<Nav disabled={disableNavigation} Icon={BsShieldFill} label="Settings" path={path} keyPath="/settings" isMinimized={true} />
+				)}
+				{userType === "developer" && (
+					<Nav disabled={disableNavigation} Icon={BsCloudFill} label="Generation" path={path} keyPath="/generation" isMinimized={true} />
 				)}
 			</div>
 
-			<div className="flex flex-col gap-0 absolute bottom-12">
+			<div className="flex flex-col gap-0 bottom-12 fixed">
 				<div
 					role="button"
 					tabIndex={1}

src/components/Solutions/FillBlanks.tsx

@@ -28,9 +28,9 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, text,
 						return (
 							<button
 								className={clsx(
-									"rounded-full hover:text-white hover:bg-mti-red transition duration-300 ease-in-out my-1 px-5 py-2 text-center text-white bg-mti-red-light",
+									"rounded-full hover:text-white hover:bg-mti-gray-davy transition duration-300 ease-in-out my-1 px-5 py-2 text-center text-white bg-mti-gray-davy",
 								)}>
-								{solution.solution}
+								{solution?.solution}
 							</button>
 						);
 					}
@@ -99,7 +99,7 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, text,
 						Correct
 					</div>
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-red" />
+						<div className="w-4 h-4 rounded-full bg-mti-gray-davy" />
 						Unanswered
 					</div>
 					<div className="flex gap-2 items-center">

src/components/Solutions/InteractiveSpeaking.tsx

@@ -6,6 +6,8 @@ import Button from "../Low/Button";
 import dynamic from "next/dynamic";
 import axios from "axios";
 import {speakingReverseMarking} from "@/utils/score";
+import {Tab} from "@headlessui/react";
+import clsx from "clsx";
 
 const Waveform = dynamic(() => import("../Waveform"), {ssr: false});
 
@@ -47,7 +49,7 @@ export default function InteractiveSpeaking({
 					</div>
 					<div className="flex flex-col gap-4">
 						<span className="font-bold">You should talk about the following things:</span>
-						<div className="grid grid-cols-3 gap-6 text-center">
+						<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 text-center">
 							{prompts.map((x, index) => (
 								<div className="italic flex flex-col gap-2 text-sm" key={index}>
 									<video key={index} controls className="">
@@ -61,11 +63,11 @@ export default function InteractiveSpeaking({
 				</div>
 
 				<div className="w-full h-full flex flex-col gap-8">
-					<div className="flex items-center gap-8">
+					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 						{solutionsURL.map((x, index) => (
 							<div
 								key={index}
-								className="w-full min-w-[460px] p-4 px-8 bg-transparent border-2 border-mti-gray-platinum rounded-2xl flex-col gap-8 items-center">
+								className="w-full p-4 px-8 bg-transparent border-2 border-mti-gray-platinum rounded-2xl flex-col gap-8 items-center">
 								<div className="flex gap-8 items-center justify-center py-8">
 									<Waveform audio={x} waveColor="#FCDDEC" progressColor="#EF5DA8" />
 								</div>
@@ -73,7 +75,7 @@ export default function InteractiveSpeaking({
 						))}
 					</div>
 
-					{userSolutions && userSolutions.length > 0 && (
+					{userSolutions && userSolutions.length > 0 && userSolutions[0].evaluation && typeof userSolutions[0].evaluation !== "string" && (
 						<div className="flex flex-col gap-4 w-full">
 							<div className="flex gap-4 px-1">
 								{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => (
@@ -82,9 +84,81 @@ export default function InteractiveSpeaking({
 									</div>
 								))}
 							</div>
-							<div className="w-full h-full min-h-fit cursor-text px-7 py-8 bg-mti-gray-smoke rounded-3xl">
+							{userSolutions[0].evaluation &&
-								{userSolutions[0].evaluation!.comment}
+							Object.keys(userSolutions[0].evaluation).filter((x) => x.startsWith("perfect_answer")).length === 3 ? (
-							</div>
+								<Tab.Group>
+									<Tab.List className="flex space-x-1 rounded-xl bg-ielts-speaking/20 p-1">
+										<Tab
+											className={({selected}) =>
+												clsx(
+													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
+													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
+													"transition duration-300 ease-in-out",
+													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
+												)
+											}>
+											Evaluation
+										</Tab>
+										<Tab
+											className={({selected}) =>
+												clsx(
+													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
+													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
+													"transition duration-300 ease-in-out",
+													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
+												)
+											}>
+											Recommended Answer (Prompt 1)
+										</Tab>
+										<Tab
+											className={({selected}) =>
+												clsx(
+													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
+													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
+													"transition duration-300 ease-in-out",
+													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
+												)
+											}>
+											Recommended Answer (Prompt 2)
+										</Tab>
+										<Tab
+											className={({selected}) =>
+												clsx(
+													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
+													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
+													"transition duration-300 ease-in-out",
+													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
+												)
+											}>
+											Recommended Answer (Prompt 3)
+										</Tab>
+									</Tab.List>
+									<Tab.Panels>
+										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<span className="w-full h-full min-h-fit cursor-text">{userSolutions[0].evaluation!.comment}</span>
+										</Tab.Panel>
+										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
+												{userSolutions[0].evaluation!.perfect_answer_1!.replaceAll(/\s{2,}/g, "\n\n")}
+											</span>
+										</Tab.Panel>
+										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
+												{userSolutions[0].evaluation!.perfect_answer_2!.replaceAll(/\s{2,}/g, "\n\n")}
+											</span>
+										</Tab.Panel>
+										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
+												{userSolutions[0].evaluation!.perfect_answer_3!.replaceAll(/\s{2,}/g, "\n\n")}
+											</span>
+										</Tab.Panel>
+									</Tab.Panels>
+								</Tab.Group>
+							) : (
+								<div className="w-full h-full min-h-fit cursor-text px-7 py-8 bg-ielts-speaking/10 rounded-3xl">
+									{userSolutions[0].evaluation!.comment}
+								</div>
+							)}
 						</div>
 					)}
 				</div>

src/components/Solutions/MatchSentences.tsx

@@ -50,7 +50,7 @@ export default function MatchSentencesSolutions({
 									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-red",
+										!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",
 									)}>
@@ -96,7 +96,7 @@ export default function MatchSentencesSolutions({
 						<div className="w-4 h-4 rounded-full bg-mti-purple" /> Correct
 					</div>
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-red" /> Unanswered
+						<div className="w-4 h-4 rounded-full bg-mti-gray-davy" /> Unanswered
 					</div>
 					<div className="flex gap-2 items-center">
 						<div className="w-4 h-4 rounded-full bg-mti-rose" /> Wrong

src/components/Solutions/MultipleChoice.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
 import {MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam";
 import clsx from "clsx";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import {CommonProps} from ".";
 import Button from "../Low/Button";
 
@@ -14,7 +14,7 @@ function Question({
 }: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) {
 	const optionColor = (option: string) => {
 		if (option === solution && !userSolution) {
-			return "!border-mti-red-light !text-mti-red-light";
+			return "!border-mti-gray-davy !text-mti-gray-davy";
 		}
 
 		if (option === solution) {
@@ -54,7 +54,16 @@ function Question({
 	);
 }
 
-export default function MultipleChoice({id, type, prompt, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
+export default function MultipleChoice({
+	id,
+	type,
+	prompt,
+	questions,
+	userSolutions,
+	updateIndex,
+	onNext,
+	onBack,
+}: MultipleChoiceExercise & CommonProps) {
 	const [questionIndex, setQuestionIndex] = useState(0);
 
 	const calculateScore = () => {
@@ -67,6 +76,10 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio
 		return {total, correct, missing};
 	};
 
+	useEffect(() => {
+		if (updateIndex) updateIndex(questionIndex);
+	}, [questionIndex, updateIndex]);
+
 	const next = () => {
 		if (questionIndex === questions.length - 1) {
 			onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type});
@@ -101,7 +114,7 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio
 						Correct
 					</div>
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-red" />
+						<div className="w-4 h-4 rounded-full bg-mti-gray-davy" />
 						Unanswered
 					</div>
 					<div className="flex gap-2 items-center">

src/components/Solutions/Speaking.tsx

@@ -6,6 +6,8 @@ import Button from "../Low/Button";
 import dynamic from "next/dynamic";
 import axios from "axios";
 import {speakingReverseMarking} from "@/utils/score";
+import {Tab} from "@headlessui/react";
+import clsx from "clsx";
 
 const Waveform = dynamic(() => import("../Waveform"), {ssr: false});
 
@@ -69,7 +71,7 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
 							{solutionURL && <Waveform audio={solutionURL} waveColor="#FCDDEC" progressColor="#EF5DA8" />}
 						</div>
 					</div>
-					{userSolutions && userSolutions.length > 0 && (
+					{userSolutions && userSolutions.length > 0 && userSolutions[0].evaluation && typeof userSolutions[0].evaluation !== "string" && (
 						<div className="flex flex-col gap-4 w-full">
 							<div className="flex gap-4 px-1">
 								{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => (
@@ -78,9 +80,52 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
 									</div>
 								))}
 							</div>
-							<div className="w-full h-full min-h-fit cursor-text px-7 py-8 bg-mti-gray-smoke rounded-3xl">
+							{userSolutions[0].evaluation &&
-								{userSolutions[0].evaluation!.comment}
+							(userSolutions[0].evaluation.perfect_answer || userSolutions[0].evaluation.perfect_answer_1) ? (
-							</div>
+								<Tab.Group>
+									<Tab.List className="flex space-x-1 rounded-xl bg-ielts-speaking/20 p-1">
+										<Tab
+											className={({selected}) =>
+												clsx(
+													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
+													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
+													"transition duration-300 ease-in-out",
+													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
+												)
+											}>
+											Evaluation
+										</Tab>
+										<Tab
+											className={({selected}) =>
+												clsx(
+													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
+													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
+													"transition duration-300 ease-in-out",
+													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
+												)
+											}>
+											Recommended Answer
+										</Tab>
+									</Tab.List>
+									<Tab.Panels>
+										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<span className="w-full h-full min-h-fit cursor-text">{userSolutions[0].evaluation!.comment}</span>
+										</Tab.Panel>
+										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
+												{userSolutions[0].evaluation!.perfect_answer &&
+													userSolutions[0].evaluation!.perfect_answer.replaceAll(/\s{2,}/g, "\n\n")}
+												{userSolutions[0].evaluation!.perfect_answer_1 &&
+													userSolutions[0].evaluation!.perfect_answer_1.replaceAll(/\s{2,}/g, "\n\n")}
+											</span>
+										</Tab.Panel>
+									</Tab.Panels>
+								</Tab.Group>
+							) : (
+								<div className="w-full h-full min-h-fit cursor-text px-7 py-8 bg-ielts-speaking/10 rounded-3xl">
+									{userSolutions[0].evaluation!.comment}
+								</div>
+							)}
 						</div>
 					)}
 				</div>

src/components/Solutions/TrueFalse.tsx

@@ -33,7 +33,7 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
 			return "rose";
 		}
 
-		return "red";
+		return "gray";
 	};
 
 	return (
@@ -67,6 +67,7 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
 					{userSolutions &&
 						questions.map((question, index) => {
 							const userSolution = userSolutions.find((x) => x.id === question.id.toString());
+							const solution = question.solution.toString().toLowerCase() as Solution;
 
 							return (
 								<div key={question.id.toString()} className="flex flex-col gap-4">
@@ -75,23 +76,23 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
 									</span>
 									<div className="flex gap-4">
 										<Button
-											variant={question.solution === "true" || userSolution?.solution === "true" ? "solid" : "outline"}
+											variant={solution === "true" || userSolution?.solution.toLowerCase() === "true" ? "solid" : "outline"}
 											className="!py-2"
-											color={getButtonColor("true", question.solution, userSolution?.solution)}>
+											color={getButtonColor("true", solution, userSolution?.solution.toLowerCase() as Solution)}>
 											True
 										</Button>
 										<Button
-											variant={question.solution === "false" || userSolution?.solution === "false" ? "solid" : "outline"}
+											variant={solution === "false" || userSolution?.solution.toLowerCase() === "false" ? "solid" : "outline"}
 											className="!py-2"
-											color={getButtonColor("false", question.solution, userSolution?.solution)}>
+											color={getButtonColor("false", solution, userSolution?.solution.toLowerCase() as Solution)}>
 											False
 										</Button>
 										<Button
 											variant={
-												question.solution === "not_given" || userSolution?.solution === "not_given" ? "solid" : "outline"
+												solution === "not_given" || userSolution?.solution.toLowerCase() === "not_given" ? "solid" : "outline"
 											}
 											className="!py-2"
-											color={getButtonColor("not_given", question.solution, userSolution?.solution)}>
+											color={getButtonColor("not_given", solution, userSolution?.solution.toLowerCase() as Solution)}>
 											Not Given
 										</Button>
 									</div>
@@ -105,7 +106,7 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
 						Correct
 					</div>
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-red" />
+						<div className="w-4 h-4 rounded-full bg-mti-gray-davy" />
 						Unanswered
 					</div>
 					<div className="flex gap-2 items-center">

src/components/Solutions/WriteBlanks.tsx

@@ -38,7 +38,7 @@ function Blank({
 
 	const getSolutionStyling = () => {
 		if (!userSolution) {
-			return "bg-mti-red-ultralight text-mti-red-light";
+			return "bg-mti-gray-davy text-white";
 		}
 
 		return "bg-mti-purple-ultralight text-mti-purple-light";
@@ -131,7 +131,7 @@ export default function WriteBlanksSolutions({
 						Correct
 					</div>
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-red" />
+						<div className="w-4 h-4 rounded-full bg-mti-gray-davy" />
 						Unanswered
 					</div>
 					<div className="flex gap-2 items-center">

src/components/Solutions/Writing.tsx

@@ -1,18 +1,16 @@
 /* eslint-disable @next/next/no-img-element */
-import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
 import {WritingExercise} from "@/interfaces/exam";
-import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
-import Icon from "@mdi/react";
-import clsx from "clsx";
 import {CommonProps} from ".";
 import {Fragment, useEffect, useState} from "react";
-import {toast} from "react-toastify";
 import Button from "../Low/Button";
-import {Dialog, Transition} from "@headlessui/react";
+import {Dialog, Tab, Transition} from "@headlessui/react";
 import {writingReverseMarking} from "@/utils/score";
+import clsx from "clsx";
+import ReactDiffViewer, {DiffMethod} from "react-diff-viewer";
 
 export default function Writing({id, type, prompt, attachment, userSolutions, onNext, onBack}: WritingExercise & CommonProps) {
 	const [isModalOpen, setIsModalOpen] = useState(false);
+	const [showDiff, setShowDiff] = useState(false);
 
 	return (
 		<>
@@ -68,18 +66,55 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 				</div>
 
 				<div className="w-full h-full flex flex-col gap-8">
-					{userSolutions && (
+					{userSolutions && userSolutions.length > 0 && (
-						<div className="flex flex-col gap-4 w-full">
+						<div className="flex flex-col gap-4 w-full relative">
-							<span>Your answer:</span>
+							{!showDiff && (
-							<textarea
+								<>
-								className="w-full h-full min-h-[320px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl"
+									<span>Your answer:</span>
-								contentEditable={false}
+									<div className="w-full h-full min-h-[320px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl whitespace-pre-wrap">
-								readOnly
+										{userSolutions[0]!.solution.replaceAll("\\n", "\n")}
-								value={userSolutions[0]!.solution}
+									</div>
-							/>
+								</>
+							)}
+							{showDiff && (
+								<>
+									<span>Correction:</span>
+									<div className="w-full h-full max-h-[320px] overflow-y-scroll scrollbar-hide cursor-text border-2 overflow-x-hidden border-mti-gray-platinum bg-white rounded-3xl">
+										<ReactDiffViewer
+											styles={{
+												contentText: {
+													fontFamily: '"Open Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif',
+													padding: "32px 28px",
+												},
+												marker: {display: "none"},
+												diffRemoved: {padding: "32px 28px"},
+												diffAdded: {padding: "32px 28px"},
+
+												wordRemoved: {padding: "0px", display: "initial"},
+												wordAdded: {padding: "0px", display: "initial"},
+												wordDiff: {padding: "0px", display: "initial"},
+											}}
+											oldValue={userSolutions[0].solution.replaceAll("\\n", "\n")}
+											newValue={userSolutions[0].evaluation!.fixed_text!.replaceAll("\\n", "\n")}
+											splitView
+											hideLineNumbers
+											showDiffOnly={false}
+										/>
+									</div>
+								</>
+							)}
+							{userSolutions[0].solution && userSolutions[0].evaluation?.fixed_text && (
+								<Button
+									color="green"
+									variant="outline"
+									className="w-full max-w-[200px] self-end absolute -top-4 right-0 !py-2"
+									onClick={() => setShowDiff((prev) => !prev)}>
+									{showDiff ? "View answer" : "View correction"}
+								</Button>
+							)}
 						</div>
 					)}
-					{userSolutions && userSolutions.length > 0 && (
+					{userSolutions && userSolutions.length > 0 && userSolutions[0].evaluation && typeof userSolutions[0].evaluation !== "string" && (
 						<div className="flex flex-col gap-4 w-full">
 							<div className="flex gap-4 px-1">
 								{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => (
@@ -88,9 +123,48 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 									</div>
 								))}
 							</div>
-							<div className="w-full h-full min-h-fit cursor-text px-7 py-8 bg-mti-gray-smoke rounded-3xl">
+							{userSolutions[0].evaluation && userSolutions[0].evaluation.perfect_answer ? (
-								{userSolutions[0].evaluation!.comment}
+								<Tab.Group>
-							</div>
+									<Tab.List className="flex space-x-1 rounded-xl bg-ielts-writing/20 p-1">
+										<Tab
+											className={({selected}) =>
+												clsx(
+													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/80",
+													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing focus:outline-none focus:ring-2",
+													"transition duration-300 ease-in-out",
+													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-writing",
+												)
+											}>
+											Evaluation
+										</Tab>
+										<Tab
+											className={({selected}) =>
+												clsx(
+													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/80",
+													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing focus:outline-none focus:ring-2",
+													"transition duration-300 ease-in-out",
+													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-writing",
+												)
+											}>
+											Recommended Answer
+										</Tab>
+									</Tab.List>
+									<Tab.Panels>
+										<Tab.Panel className="w-full bg-ielts-writing/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<span className="w-full h-full min-h-fit cursor-text">{userSolutions[0].evaluation!.comment}</span>
+										</Tab.Panel>
+										<Tab.Panel className="w-full bg-ielts-writing/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
+												{userSolutions[0].evaluation!.perfect_answer.replaceAll(/\s{2,}/g, "\n\n").replaceAll("\\n", "\n")}
+											</span>
+										</Tab.Panel>
+									</Tab.Panels>
+								</Tab.Group>
+							) : (
+								<div className="w-full h-full min-h-fit cursor-text px-7 py-8 bg-ielts-writing/10 rounded-3xl">
+									{userSolutions[0].evaluation!.comment}
+								</div>
+							)}
 						</div>
 					)}
 				</div>

src/components/Solutions/index.tsx

@@ -22,27 +22,36 @@ import Writing from "./Writing";
 const MatchSentences = dynamic(() => import("@/components/Solutions/MatchSentences"), {ssr: false});
 
 export interface CommonProps {
+	updateIndex?: (internalIndex: number) => void;
 	onNext: (userSolutions: UserSolution) => void;
 	onBack: (userSolutions: UserSolution) => void;
 }
 
-export const renderSolution = (exercise: Exercise, onNext: () => void, onBack: () => void) => {
+export const renderSolution = (exercise: Exercise, onNext: () => void, onBack: () => void, updateIndex?: (internalIndex: number) => void) => {
 	switch (exercise.type) {
 		case "fillBlanks":
-			return <FillBlanks {...(exercise as FillBlanksExercise)} onNext={onNext} onBack={onBack} />;
+			return <FillBlanks key={exercise.id} {...(exercise as FillBlanksExercise)} onNext={onNext} onBack={onBack} />;
 		case "trueFalse":
-			return <TrueFalseSolution {...(exercise as TrueFalseExercise)} onNext={onNext} onBack={onBack} />;
+			return <TrueFalseSolution key={exercise.id} {...(exercise as TrueFalseExercise)} onNext={onNext} onBack={onBack} />;
 		case "matchSentences":
-			return <MatchSentences {...(exercise as MatchSentencesExercise)} onNext={onNext} onBack={onBack} />;
+			return <MatchSentences key={exercise.id} {...(exercise as MatchSentencesExercise)} onNext={onNext} onBack={onBack} />;
 		case "multipleChoice":
-			return <MultipleChoice {...(exercise as MultipleChoiceExercise)} onNext={onNext} onBack={onBack} />;
+			return (
+				<MultipleChoice
+					key={exercise.id}
+					{...(exercise as MultipleChoiceExercise)}
+					updateIndex={updateIndex}
+					onNext={onNext}
+					onBack={onBack}
+				/>
+			);
 		case "writeBlanks":
-			return <WriteBlanks {...(exercise as WriteBlanksExercise)} onNext={onNext} onBack={onBack} />;
+			return <WriteBlanks key={exercise.id} {...(exercise as WriteBlanksExercise)} onNext={onNext} onBack={onBack} />;
 		case "writing":
-			return <Writing {...(exercise as WritingExercise)} onNext={onNext} onBack={onBack} />;
+			return <Writing key={exercise.id} {...(exercise as WritingExercise)} onNext={onNext} onBack={onBack} />;
 		case "speaking":
-			return <Speaking {...(exercise as SpeakingExercise)} onNext={onNext} onBack={onBack} />;
+			return <Speaking key={exercise.id} {...(exercise as SpeakingExercise)} onNext={onNext} onBack={onBack} />;
 		case "interactiveSpeaking":
-			return <InteractiveSpeaking {...(exercise as InteractiveSpeakingExercise)} onNext={onNext} onBack={onBack} />;
+			return <InteractiveSpeaking key={exercise.id} {...(exercise as InteractiveSpeakingExercise)} onNext={onNext} onBack={onBack} />;
 	}
 };

src/components/UserCard.tsx

@@ -6,7 +6,7 @@ import axios from "axios";
 import clsx from "clsx";
 import moment from "moment";
 import {Divider} from "primereact/divider";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import ReactDatePicker from "react-datepicker";
 import {BsFileEarmarkText, BsPencil, BsStar} from "react-icons/bs";
 import {toast} from "react-toastify";
@@ -17,6 +17,8 @@ import Input from "./Low/Input";
 import ProfileSummary from "./ProfileSummary";
 import Select from "react-select";
 import useUsers from "@/hooks/useUsers";
+import {USER_TYPE_LABELS} from "@/resources/user";
+import {CURRENCIES} from "@/resources/paypal";
 
 const expirationDateColor = (date: Date) => {
 	const momentDate = moment(date);
@@ -33,22 +35,106 @@ interface Props {
 	onClose: (reload?: boolean) => void;
 	onViewStudents?: () => void;
 	onViewTeachers?: () => void;
+	onViewCorporate?: () => void;
+	disabled?: boolean;
 }
 
-const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}: Props) => {
+const USER_STATUS_OPTIONS = [
+	{
+		value: "active",
+		label: "Active",
+	},
+	{
+		value: "disabled",
+		label: "Disabled",
+	},
+	{
+		value: "paymentDue",
+		label: "Payment Due",
+	},
+];
+
+const USER_TYPE_OPTIONS = Object.keys(USER_TYPE_LABELS).map((type) => ({
+	value: type,
+	label: USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS],
+}));
+
+const CURRENCIES_OPTIONS = CURRENCIES.map(({label, currency}) => ({value: currency, label}));
+
+const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers, onViewCorporate, disabled = false}: Props) => {
 	const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
-	const [referralAgent, setReferralAgent] = useState(user.corporateInformation?.referralAgent);
 	const [type, setType] = useState(user.type);
 	const [status, setStatus] = useState(user.status);
+	const [referralAgentLabel, setReferralAgentLabel] = useState<string>();
+	const [position, setPosition] = useState<string | undefined>(user.type === "corporate" ? user.demographicInformation?.position : undefined);
+	const [passport_id, setPassportID] = useState<string | undefined>(user.type === "student" ? user.demographicInformation?.passport_id : undefined);
 
+	const [referralAgent, setReferralAgent] = useState(user.type === "corporate" ? user.corporateInformation?.referralAgent : undefined);
+	const [companyName, setCompanyName] = useState(
+		user.type === "corporate"
+			? user.corporateInformation?.companyInformation.name
+			: user.type === "agent"
+			? user.agentInformation?.companyName
+			: undefined,
+	);
+	const [commercialRegistration, setCommercialRegistration] = useState(
+		user.type === "agent" ? user.agentInformation?.commercialRegistration : undefined,
+	);
+	const [userAmount, setUserAmount] = useState(user.type === "corporate" ? user.corporateInformation?.companyInformation.userAmount : undefined);
+	const [paymentValue, setPaymentValue] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.value : undefined);
+	const [paymentCurrency, setPaymentCurrency] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.currency : "EUR");
+	const [monthlyDuration, setMonthlyDuration] = useState(user.type === "corporate" ? user.corporateInformation?.monthlyDuration : undefined);
+	const [commissionValue, setCommission] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.commission : undefined);
 	const {stats} = useStats(user.id);
 	const {users} = useUsers();
 
+	useEffect(() => {
+		if (users && users.length > 0) {
+			if (!referralAgent) {
+				setReferralAgentLabel("No manager");
+				return;
+			}
+
+			const agent = users.find((x) => x.id === referralAgent);
+			setReferralAgentLabel(`${agent?.name} - ${agent?.email}`);
+		}
+	}, [users, referralAgent]);
+
 	const updateUser = () => {
+		if (user.type === "corporate" && (!paymentValue || paymentValue < 0))
+			return toast.error("Please set a price for the user's package before updating!");
 		if (!confirm(`Are you sure you want to update ${user.name}'s account?`)) return;
 
 		axios
-			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {...user, subscriptionExpirationDate: expiryDate, type, status})
+			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
+				...user,
+				subscriptionExpirationDate: expiryDate,
+				type,
+				status,
+				agentInformation:
+					type === "agent"
+						? {
+								name: companyName,
+								commercialRegistration,
+						  }
+						: undefined,
+				corporateInformation:
+					type === "corporate"
+						? {
+								referralAgent,
+								monthlyDuration,
+								companyInformation: {
+									name: companyName,
+									userAmount,
+								},
+								payment: {
+									value: paymentValue,
+									currency: paymentCurrency,
+									...(referralAgent === "" ? {} : {commission: commissionValue}),
+								},
+						  }
+						: undefined,
+			})
 			.then(() => {
 				toast.success("User updated successfully!");
 				onClose(true);
@@ -81,6 +167,164 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
 				]}
 			/>
 
+			{user.type === "agent" && (
+				<>
+					<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
+						<Input
+							label="Corporate Name"
+							type="text"
+							name="companyName"
+							onChange={setCompanyName}
+							placeholder="Enter corporate name"
+							defaultValue={companyName}
+							required
+							disabled={disabled}
+						/>
+						<Input
+							label="Commercial Registration"
+							type="text"
+							name="commercialRegistration"
+							onChange={setCommercialRegistration}
+							placeholder="Enter commercial registration"
+							defaultValue={commercialRegistration}
+							required
+							disabled={disabled}
+						/>
+					</div>
+					<Divider className="w-full !m-0" />
+				</>
+			)}
+			{user.type === "corporate" && (
+				<>
+					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
+						<Input
+							label="Corporate Name"
+							type="text"
+							name="companyName"
+							onChange={setCompanyName}
+							placeholder="Enter corporate name"
+							defaultValue={companyName}
+							disabled={disabled}
+						/>
+						<Input
+							label="Number of Users"
+							type="number"
+							name="userAmount"
+							onChange={(e) => setUserAmount(e ? parseInt(e) : undefined)}
+							placeholder="Enter number of users"
+							defaultValue={userAmount}
+							disabled={disabled}
+						/>
+						<Input
+							label="Monthly Duration"
+							type="number"
+							name="monthlyDuration"
+							onChange={(e) => setMonthlyDuration(e ? parseInt(e) : undefined)}
+							placeholder="Enter monthly duration"
+							defaultValue={monthlyDuration}
+							disabled={disabled}
+						/>
+						<div className="flex flex-col gap-3 w-full lg:col-span-2">
+							<label className="font-normal text-base text-mti-gray-dim">Pricing</label>
+							<div className="w-full grid grid-cols-5 gap-2">
+								<Input
+									name="paymentValue"
+									onChange={(e) => setPaymentValue(e ? parseInt(e) : undefined)}
+									type="number"
+									defaultValue={paymentValue || 0}
+									className="col-span-3"
+									disabled={disabled}
+								/>
+								<Select
+									className={clsx(
+										"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
+										disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
+									)}
+									options={CURRENCIES_OPTIONS}
+									value={CURRENCIES_OPTIONS.find((c) => c.value === paymentCurrency)}
+									onChange={(value) => setPaymentCurrency(value?.value)}
+									styles={{
+										control: (styles) => ({
+											...styles,
+											paddingLeft: "4px",
+											border: "none",
+											outline: "none",
+											":focus": {
+												outline: "none",
+											},
+										}),
+										option: (styles, state) => ({
+											...styles,
+											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+											color: state.isFocused ? "black" : styles.color,
+										}),
+									}}
+									isDisabled={disabled}
+								/>
+							</div>
+						</div>
+					</div>
+					<div className="flex gap-3 w-full">
+						<div className="flex flex-col gap-3 w-8/12">
+							<label className="font-normal text-base text-mti-gray-dim">Country Manager</label>
+							{referralAgentLabel && (
+								<Select
+									className={clsx(
+										"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
+										!["developer", "admin"].includes(loggedInUser.type) &&
+											"!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
+									)}
+									options={[
+										{value: "", label: "No referral"},
+										...users.filter((u) => u.type === "agent").map((x) => ({value: x.id, label: `${x.name} - ${x.email}`})),
+									]}
+									defaultValue={{
+										value: referralAgent,
+										label: referralAgentLabel,
+									}}
+									onChange={(value) => setReferralAgent(value?.value)}
+									styles={{
+										control: (styles) => ({
+											...styles,
+											paddingLeft: "4px",
+											border: "none",
+											outline: "none",
+											":focus": {
+												outline: "none",
+											},
+										}),
+										option: (styles, state) => ({
+											...styles,
+											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+											color: state.isFocused ? "black" : styles.color,
+										}),
+									}}
+									// editing country manager should only be available for dev/admin
+									isDisabled={!["developer", "admin"].includes(loggedInUser.type)}
+								/>
+							)}
+						</div>
+						<div className="flex flex-col gap-3 w-4/12">
+							{referralAgent !== "" && loggedInUser.type !== "corporate" ? (
+								<>
+									<label className="font-normal text-base text-mti-gray-dim">Commission</label>
+									<Input
+										name="commissionValue"
+										onChange={(e) => setCommission(e ? parseInt(e) : undefined)}
+										type="number"
+										defaultValue={commissionValue || 0}
+										className="col-span-3"
+										disabled={disabled}
+									/>
+								</>
+							) : (
+								<div />
+							)}
+						</div>
+					</div>
+					<Divider className="w-full !m-0" />
+				</>
+			)}
 			<section className="flex flex-col gap-4 justify-between">
 				<div className="flex flex-col md:flex-row gap-8 w-full">
 					<Input
@@ -119,34 +363,65 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
 					/>
 				</div>
 
+				{user.type === "student" && (
+					<Input
+						type="text"
+						name="passport_id"
+						label="Passport/National ID"
+						onChange={() => null}
+						placeholder="Enter National ID or Passport number"
+						value={user.type === "student" ? user.demographicInformation?.passport_id : undefined}
+						disabled
+						required
+					/>
+				)}
+
 				<div className="flex flex-col md:flex-row gap-8 w-full">
-					<div className="relative flex flex-col gap-3 w-full">
+					{user.type !== "corporate" && (
-						<label className="font-normal text-base text-mti-gray-dim">Employment Status</label>
+						<div className="relative flex flex-col gap-3 w-full">
-						<RadioGroup
+							<label className="font-normal text-base text-mti-gray-dim">Employment Status</label>
-							value={user.demographicInformation?.employment}
+							<RadioGroup
-							className="grid grid-cols-2 items-center gap-4 place-items-center">
+								value={user.demographicInformation?.employment}
-							{EMPLOYMENT_STATUS.map(({status, label}) => (
+								className="grid grid-cols-2 items-center gap-4 place-items-center"
-								<RadioGroup.Option value={status} key={status}>
+								disabled={disabled}>
-									{({checked}) => (
+								{EMPLOYMENT_STATUS.map(({status, label}) => (
-										<span
+									<RadioGroup.Option value={status} key={status}>
-											className={clsx(
+										{({checked}) => (
-												"px-6 py-4 w-40 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+											<span
-												"transition duration-300 ease-in-out",
+												className={clsx(
-												!checked
+													"px-6 py-4 w-40 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-													? "bg-white border-mti-gray-platinum"
+													"transition duration-300 ease-in-out",
-													: "bg-mti-purple-light border-mti-purple-dark text-white",
+													!checked
-											)}>
+														? "bg-white border-mti-gray-platinum"
-											{label}
+														: "bg-mti-purple-light border-mti-purple-dark text-white",
-										</span>
+												)}>
-									)}
+												{label}
-								</RadioGroup.Option>
+											</span>
-							))}
+										)}
-						</RadioGroup>
+									</RadioGroup.Option>
-					</div>
+								))}
+							</RadioGroup>
+						</div>
+					)}
+					{user.type === "corporate" && (
+						<Input
+							name="position"
+							onChange={setPosition}
+							type="text"
+							label="Position"
+							defaultValue={position}
+							placeholder="CEO, Head of Marketing..."
+							disabled
+							required
+						/>
+					)}
 					<div className="flex flex-col gap-8 w-full">
 						<div className="relative flex flex-col gap-3 w-full">
 							<label className="font-normal text-base text-mti-gray-dim">Gender</label>
-							<RadioGroup value={user.demographicInformation?.gender} className="flex flex-row gap-4 justify-between">
+							<RadioGroup
+								value={user.demographicInformation?.gender}
+								className="flex flex-row gap-4 justify-between"
+								disabled={disabled}>
 								<RadioGroup.Option value="male">
 									{({checked}) => (
 										<span
@@ -196,7 +471,8 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
 								<label className="font-normal text-base text-mti-gray-dim">Expiry Date</label>
 								<Checkbox
 									isChecked={!!expiryDate}
-									onChange={(checked) => setExpiryDate(checked ? user.subscriptionExpirationDate || new Date() : undefined)}>
+									onChange={(checked) => setExpiryDate(checked ? user.subscriptionExpirationDate || new Date() : null)}
+									disabled={disabled}>
 									Enabled
 								</Checkbox>
 							</div>
@@ -229,77 +505,23 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
 									dateFormat="dd/MM/yyyy"
 									selected={moment(expiryDate).toDate()}
 									onChange={(date) => setExpiryDate(date)}
+									disabled={disabled}
 								/>
 							)}
 						</div>
 					</div>
 				</div>
-				{(loggedInUser.type === "developer" || loggedInUser.type === "owner") && (
+				{(loggedInUser.type === "developer" || loggedInUser.type === "admin") && (
 					<>
-						<Divider className="w-full" />
+						<Divider className="w-full !m-0" />
 						<div className="flex flex-col md:flex-row gap-8 w-full">
 							<div className="flex flex-col gap-3 w-full">
 								<label className="font-normal text-base text-mti-gray-dim">Status</label>
-								<select
-									defaultValue={user.status}
-									onChange={(e) => setStatus(e.target.value as typeof user.status)}
-									className="p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
-									<option value="active">Active</option>
-									<option value="disabled">Disabled</option>
-									<option value="paymentDue">Payment Due</option>
-								</select>
-							</div>
-							<div className="flex flex-col gap-3 w-full">
-								<label className="font-normal text-base text-mti-gray-dim">Type</label>
-								<select
-									defaultValue={user.type}
-									onChange={(e) => setType(e.target.value as typeof user.type)}
-									className="p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
-									<option value="student">Student</option>
-									<option value="teacher">Teacher</option>
-									<option value="corporate">Corporate</option>
-									<option value="agent">Country Agent</option>
-									<option value="owner">Owner</option>
-									<option value="developer">Developer</option>
-								</select>
-							</div>
-						</div>
-					</>
-				)}
-				{user.type === "corporate" && (
-					<>
-						<Divider className="w-full" />
-						<div className="flex flex-col md:flex-row gap-8 w-full">
-							<Input
-								label="Company Name"
-								type="text"
-								name="companyName"
-								onChange={() => null}
-								placeholder="Enter company name"
-								defaultValue={user.corporateInformation?.companyInformation.name}
-							/>
-							<Input
-								label="Amount of Users"
-								type="number"
-								name="userAmount"
-								onChange={() => null}
-								placeholder="Enter amount of users"
-								defaultValue={user.corporateInformation?.companyInformation.userAmount}
-							/>
-
-							<div className="flex flex-col gap-3 w-full">
-								<label className="font-normal text-base text-mti-gray-dim">Country Agent</label>
 								<Select
 									className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
-									options={[
+									options={USER_STATUS_OPTIONS}
-										{value: "", label: "No referral"},
+									value={USER_STATUS_OPTIONS.find((o) => o.value === status)}
-										...users.filter((u) => u.type === "agent").map((x) => ({value: x.id, label: `${x.name} - ${x.email}`})),
+									onChange={(value) => setStatus(value?.value as typeof user.status)}
-									]}
-									defaultValue={{
-										value: referralAgent,
-										label: referralAgent ? users.find((u) => u.id === referralAgent)?.name || "" : "No agent",
-									}}
-									onChange={(value) => setReferralAgent(value?.value)}
 									styles={{
 										control: (styles) => ({
 											...styles,
@@ -316,6 +538,33 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
 											color: state.isFocused ? "black" : styles.color,
 										}),
 									}}
+									isDisabled={disabled}
+								/>
+							</div>
+							<div className="flex flex-col gap-3 w-full">
+								<label className="font-normal text-base text-mti-gray-dim">Type</label>
+								<Select
+									className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+									options={USER_TYPE_OPTIONS}
+									value={USER_TYPE_OPTIONS.find((o) => o.value === type)}
+									onChange={(value) => setType(value?.value as typeof user.type)}
+									styles={{
+										control: (styles) => ({
+											...styles,
+											paddingLeft: "4px",
+											border: "none",
+											outline: "none",
+											":focus": {
+												outline: "none",
+											},
+										}),
+										option: (styles, state) => ({
+											...styles,
+											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+											color: state.isFocused ? "black" : styles.color,
+										}),
+									}}
+									isDisabled={disabled}
 								/>
 							</div>
 						</div>
@@ -325,6 +574,11 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
 
 			<div className="flex gap-4 justify-between mt-4 w-full">
 				<div className="self-start flex gap-4 justify-start items-center w-full">
+					{onViewCorporate && (
+						<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewCorporate}>
+							View Corporate
+						</Button>
+					)}
 					{onViewStudents && (
 						<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewStudents}>
 							View Students
@@ -340,7 +594,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
 					<Button className="w-full max-w-[200px]" variant="outline" onClick={onClose}>
 						Close
 					</Button>
-					<Button onClick={updateUser} className="w-full max-w-[200px]">
+					<Button disabled={disabled} onClick={updateUser} className="w-full max-w-[200px]">
 						Update
 					</Button>
 				</div>

src/constants/ielts.tsx

@@ -2,96 +2,119 @@ import {Module} from "@/interfaces";
 
 export const MODULES: Module[] = ["reading", "listening", "writing", "speaking"];
 
-export const BAND_SCORES: {[key in Module]: number[]} = {
+// BAND SCORES is not in use anymore and level scoring is made based on thresholds
-	reading: [0, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9],
+// export const BAND_SCORES: {[key in Module]: number[]} = {
-	listening: [0, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9],
+// 	reading: [0, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9],
-	writing: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+// 	listening: [0, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9],
-	speaking: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+// 	writing: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
-	level: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+// 	speaking: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
-};
+// 	level: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+// };
 
-export const moduleResultText = (level: number) => {
+export type LevelScore = "Advanced" | "Upper-Intermediate" | "Intermediate" | "Pre-Intermediate" | "Elementary" | "Beginner";
-	if (level === 9) {
-		return (
-			<>
-				Congratulations on your exam performance! You achieved an impressive <span className="font-bold">level {level}</span>, demonstrating
-				excellent mastery of the assessed knowledge.
-				<br />
-				<br />
-				If you disagree with the result, you can request a review by a qualified teacher. We are committed to the accuracy and transparency of
-				the results.
-				<br />
-				<br />
-				Please contact us for further information. Congratulations again on your outstanding achievement! We are here to support you on your
-				academic journey.
-			</>
-		);
-	}
 
-	if (level >= 6) {
-		return (
-			<>
-				Congratulations on your exam performance! You achieved a commendable <span className="font-bold">level {level}</span>, demonstrating a
-				good understanding of the assessed knowledge.
-				<br />
-				<br />
-				If you have any concerns about the result, you can request a review by a qualified teacher. We are committed to the accuracy and
-				transparency of the results.
-				<br />
-				<br />
-				Please contact us for further information. Congratulations again on your achievement! We are here to support you on your academic
-				journey.
-			</>
-		);
-	}
 
-	if (level >= 3) {
+const generateHighestScoreText = () : React.ReactNode => (
-		return (
+	<>
-			<>
+		<br />
-				Congratulations on your exam performance! You achieved a <span className="font-bold">level of {level}</span>, demonstrating a
+		<br />
-				satisfactory understanding of the assessed knowledge.
+		If you disagree with the result, you can request a review by a qualified teacher. We are committed to the accuracy and transparency of
-				<br />
+		the results.
-				<br />
+		<br />
-				If you have any concerns about the result, you can request a review by a qualified teacher. We are committed to the accuracy and
+		<br />
-				transparency of the results.
+		Please contact us for further information. Congratulations again on your outstanding achievement! We are here to support you on your
-				<br />
+		academic journey.
-				<br />
+	</>
-				Please contact us for further information. Congratulations again on your achievement! We are here to support you on your academic
+);
-				journey.
-			</>
-		);
-	}
 
-	return (
+const generateAverageScoreText = () : React.ReactNode => (
-		<>
+	<>
-			Thank you for taking the exam. You achieved a <span className="font-bold">level {level}</span>, but unfortunately, it did not meet the
+		<br />
-			required standards.
+		<br />
-			<br />
+		If you have any concerns about the result, you can request a review by a qualified teacher. We are committed to the accuracy and
-			<br />
+		transparency of the results.
-			If you have any concerns about the result, you can request a review by a qualified teacher. We are committed to the accuracy and
+		<br />
-			transparency of the results.
+		<br />
-			<br />
+		Please contact us for further information. Congratulations again on your achievement! We are here to support you on your academic
-			<br />
+		journey.
-			Please contact us for further information. We encourage you to continue your studies and wish you the best of luck in your future
+	</>
-			endeavors.
+);
-		</>
+
-	);
+const generateLowestScoreText = () : React.ReactNode => (
-};
+	<>
+		<br />
+		<br />
+		If you have any concerns about the result, you can request a review by a qualified teacher. We are committed to the accuracy and
+		transparency of the results.
+		<br />
+		<br />
+		Please contact us for further information. We encourage you to continue your studies and wish you the best of luck in your future
+		endeavors.
+	</>
+)
 
 export const levelResultText = (level: number) => {
+	if(level === 9) {
+		return (
+			<>
+				{"Outstanding! Your command of English is excellent. Focus on fine-tuning subtle language nuances and exploring sophisticated vocabulary. Keep up the excellent work!"}
+				{generateHighestScoreText()}
+			</>
+		);
+	}
+	if(level >= 8) {
+		return (
+			<>
+				{"Impressive! You're approaching fluency. Continue refining nuances in grammar and expanding your vocabulary to express ideas more precisely."}
+				{generateAverageScoreText()}
+			</>
+		);
+	}
+	if(level >= 6) {
+		return (
+			<>
+				{"Great job! You're navigating the complexities of English. Keep honing your grammar skills and exploring more advanced vocabulary."}
+				{generateAverageScoreText()}
+			</>
+		);
+	}
+	if(level >= 4) {
+		return (
+			<>
+				{"Well done! You're moving beyond the basics. Work on expanding your vocabulary and refining your understanding of grammar structures."}
+				{generateAverageScoreText()}
+			</>
+		);
+	}
+	if(level >= 2) {
+		return (
+			<>
+				{"Good effort! You're making progress. Continue studying and pay attention to common vocabulary and fundamental grammar rules."}
+				{generateAverageScoreText()}
+			</>
+		);
+	}
+	if(level >= 0) {
+		return (
+			<>
+				{"Keep practicing! You're just starting, and improvement takes time. Focus on building your vocabulary and basic grammar skills."}
+				{generateLowestScoreText()}
+			</>
+		);
+	}
+
+	return null;
+};
+
+
+export const moduleResultText = (module: Module, level: number) => {
+	if(module === 'level') return levelResultText(level);
 	if (level === 9) {
 		return (
 			<>
 				Congratulations on your exam performance! You achieved an impressive <span className="font-bold">level {level}</span>, demonstrating
 				excellent mastery of the assessed knowledge.
-				<br />
+				{generateHighestScoreText()}
-				<br />
-				If you disagree with the result, you can request a review by a qualified teacher. We are committed to the accuracy and transparency of
-				the results.
-				<br />
-				<br />
-				Please contact us for further information. Congratulations again on your outstanding achievement! We are here to support you on your
-				academic journey.
 			</>
 		);
 	}
@@ -101,14 +124,7 @@ export const levelResultText = (level: number) => {
 			<>
 				Congratulations on your exam performance! You achieved a commendable <span className="font-bold">level {level}</span>, demonstrating a
 				good understanding of the assessed knowledge.
-				<br />
+				{generateAverageScoreText()}
-				<br />
-				If you have any concerns about the result, you can request a review by a qualified teacher. We are committed to the accuracy and
-				transparency of the results.
-				<br />
-				<br />
-				Please contact us for further information. Congratulations again on your achievement! We are here to support you on your academic
-				journey.
 			</>
 		);
 	}
@@ -118,14 +134,7 @@ export const levelResultText = (level: number) => {
 			<>
 				Congratulations on your exam performance! You achieved a <span className="font-bold">level of {level}</span>, demonstrating a
 				satisfactory understanding of the assessed knowledge.
-				<br />
+				{generateAverageScoreText()}
-				<br />
-				If you have any concerns about the result, you can request a review by a qualified teacher. We are committed to the accuracy and
-				transparency of the results.
-				<br />
-				<br />
-				Please contact us for further information. Congratulations again on your achievement! We are here to support you on your academic
-				journey.
 			</>
 		);
 	}
@@ -134,14 +143,7 @@ export const levelResultText = (level: number) => {
 		<>
 			Thank you for taking the exam. You achieved a <span className="font-bold">level {level}</span>, but unfortunately, it did not meet the
 			required standards.
-			<br />
+			{generateLowestScoreText()}
-			<br />
-			If you have any concerns about the result, you can request a review by a qualified teacher. We are committed to the accuracy and
-			transparency of the results.
-			<br />
-			<br />
-			Please contact us for further information. We encourage you to continue your studies and wish you the best of luck in your future
-			endeavors.
 		</>
 	);
 };

src/constants/userPermissions.ts

@@ -2,38 +2,38 @@ import {Type} from "@/interfaces/user";
 
 export const PERMISSIONS = {
 	generateCode: {
-		student: ["corporate", "developer", "owner"],
+		student: ["corporate", "developer", "admin"],
-		teacher: ["corporate", "developer", "owner"],
+		teacher: ["corporate", "developer", "admin"],
-		corporate: ["owner", "developer"],
+		corporate: ["admin", "developer"],
-		owner: ["developer", "owner"],
+		admin: ["developer", "admin"],
-		agent: ["developer", "owner"],
+		agent: ["developer", "admin"],
 		developer: ["developer"],
 	},
 	deleteUser: {
-		student: ["teacher", "corporate", "developer", "owner"],
+		student: ["teacher", "corporate", "developer", "admin"],
-		teacher: ["corporate", "developer", "owner"],
+		teacher: ["corporate", "developer", "admin"],
-		corporate: ["owner", "developer"],
+		corporate: ["admin", "developer"],
-		owner: ["developer", "owner"],
+		admin: ["developer", "admin"],
-		agent: ["developer", "owner"],
+		agent: ["developer", "admin"],
 		developer: ["developer"],
 	},
 	updateUser: {
-		student: ["teacher", "corporate", "developer", "owner"],
+		student: ["teacher", "corporate", "developer", "admin"],
-		teacher: ["corporate", "developer", "owner"],
+		teacher: ["corporate", "developer", "admin"],
-		corporate: ["owner", "developer"],
+		corporate: ["admin", "developer"],
-		owner: ["developer", "owner"],
+		admin: ["developer", "admin"],
-		agent: ["developer", "owner"],
+		agent: ["developer", "admin"],
 		developer: ["developer"],
 	},
 	updateExpiryDate: {
-		student: ["developer", "owner"],
+		student: ["developer", "admin"],
-		teacher: ["developer", "owner"],
+		teacher: ["developer", "admin"],
-		corporate: ["owner", "developer"],
+		corporate: ["admin", "developer"],
-		owner: ["developer", "owner"],
+		admin: ["developer", "admin"],
-		agent: ["developer", "owner"],
+		agent: ["developer", "admin"],
 		developer: ["developer"],
 	},
 	examManagement: {
-		delete: ["developer", "owner"],
+		delete: ["developer", "admin"],
 	},
 };

src/dashboards/Admin.tsx

@@ -7,16 +7,19 @@ import UserList from "@/pages/(admin)/Lists/UserList";
 import {dateSorter} from "@/utils";
 import moment from "moment";
 import {useEffect, useState} from "react";
-import {BsArrowLeft, BsGlobeCentralSouthAsia, BsPerson, BsPersonFill, BsPersonFillGear, BsPersonGear, BsPersonLinesFill} from "react-icons/bs";
+import {BsArrowLeft, BsBriefcaseFill, BsGlobeCentralSouthAsia, BsPerson, BsPersonFill, BsPencilSquare, BsBank, BsCurrencyDollar} from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
 import IconCard from "./IconCard";
+import useFilterStore from "@/stores/listFilterStore";
+import {useRouter} from "next/router";
+import usePaymentStatusUsers from '@/hooks/usePaymentStatusUsers';
 
 interface Props {
 	user: User;
 }
 
-export default function OwnerDashboard({user}: Props) {
+export default function AdminDashboard({user}: Props) {
 	const [page, setPage] = useState("");
 	const [selectedUser, setSelectedUser] = useState<User>();
 	const [showModal, setShowModal] = useState(false);
@@ -24,18 +27,32 @@ export default function OwnerDashboard({user}: Props) {
 	const {stats} = useStats(user.id);
 	const {users, reload} = useUsers();
 	const {groups} = useGroups();
+	const { pending, done } = usePaymentStatusUsers();
+
+	const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
+	const router = useRouter();
 
 	useEffect(() => {
 		setShowModal(!!selectedUser && page === "");
 	}, [selectedUser, page]);
 
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	useEffect(reload, [page]);
+
+	const inactiveCountryManagerFilter = (x: User) =>
+		x.type === "agent" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate));
+
 	const UserDisplay = (displayUser: User) => (
 		<div
 			onClick={() => setSelectedUser(displayUser)}
 			className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300">
 			<img src={displayUser.profilePicture} alt={displayUser.name} className="rounded-full w-10 h-10" />
 			<div className="flex flex-col gap-1 items-start">
-				<span>{displayUser.name}</span>
+				<span>
+					{displayUser.type === "corporate"
+						? displayUser.corporateInformation?.companyInformation?.name || displayUser.name
+						: displayUser.name}
+				</span>
 				<span className="text-sm opacity-75">{displayUser.email}</span>
 			</div>
 		</div>
@@ -48,7 +65,7 @@ export default function OwnerDashboard({user}: Props) {
 				? groups
 						.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
 						.flatMap((g) => g.participants)
-						.includes(x.id) || false
+						.includes(x.id)
 				: true);
 
 		return (
@@ -63,7 +80,7 @@ export default function OwnerDashboard({user}: Props) {
 					<h2 className="text-2xl font-semibold">Students ({users.filter(filter).length})</h2>
 				</div>
 
-				<UserList user={user} filter={filter} />
+				<UserList user={user} filters={[filter]} />
 			</>
 		);
 	};
@@ -90,7 +107,27 @@ export default function OwnerDashboard({user}: Props) {
 					<h2 className="text-2xl font-semibold">Teachers ({users.filter(filter).length})</h2>
 				</div>
 
-				<UserList user={user} filter={filter} />
+				<UserList user={user} filters={[filter]} />
+			</>
+		);
+	};
+
+	const AgentsList = () => {
+		const filter = (x: User) => x.type === "agent";
+
+		return (
+			<>
+				<div className="flex flex-col gap-4">
+					<div
+						onClick={() => setPage("")}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<h2 className="text-2xl font-semibold">Country Managers ({users.filter(filter).length})</h2>
+				</div>
+
+				<UserList user={user} filters={[filter]} />
 			</>
 		);
 	};
@@ -107,10 +144,48 @@ export default function OwnerDashboard({user}: Props) {
 				<h2 className="text-2xl font-semibold">Corporate ({users.filter((x) => x.type === "corporate").length})</h2>
 			</div>
 
-			<UserList user={user} filter={(x) => x.type === "corporate"} />
+			<UserList user={user} filters={[(x) => x.type === "corporate"]} />
 		</>
 	);
 
+	const CorporatePaidStatusList = ({ paid }: {paid: Boolean}) => {
+		const list = paid ? done : pending;
+		const filter = (x: User) => x.type === "corporate" && list.includes(x.id);
+
+		return (
+			<>
+				<div className="flex flex-col gap-4">
+					<div
+						onClick={() => setPage("")}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<h2 className="text-2xl font-semibold">{paid ? 'Payment Done' : 'Pending Payment'} ({list.length})</h2>
+				</div>
+				<UserList user={user} filters={[filter]} />
+			</>
+		);
+	};
+
+	const InactiveCountryManagerList = () => {
+		return (
+			<>
+				<div className="flex flex-col gap-4">
+					<div
+						onClick={() => setPage("")}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<h2 className="text-2xl font-semibold">Inactive Country Managers ({users.filter(inactiveCountryManagerFilter).length})</h2>
+				</div>
+
+				<UserList user={user} filters={[inactiveCountryManagerFilter]} />
+			</>
+		);
+	};
+
 	const InactiveStudentsList = () => {
 		const filter = (x: User) => x.type === "student" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate));
 
@@ -126,7 +201,7 @@ export default function OwnerDashboard({user}: Props) {
 					<h2 className="text-2xl font-semibold">Inactive Students ({users.filter(filter).length})</h2>
 				</div>
 
-				<UserList user={user} filter={filter} />
+				<UserList user={user} filters={[filter]} />
 			</>
 		);
 	};
@@ -146,14 +221,14 @@ export default function OwnerDashboard({user}: Props) {
 					<h2 className="text-2xl font-semibold">Inactive Corporate ({users.filter(filter).length})</h2>
 				</div>
 
-				<UserList user={user} filter={filter} />
+				<UserList user={user} filters={[filter]} />
 			</>
 		);
 	};
 
 	const DefaultDashboard = () => (
 		<>
-			<section className="w-full flex flex-wrap gap-4 items-center justify-between">
+			<section className="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 place-items-center items-center justify-between">
 				<IconCard
 					Icon={BsPersonFill}
 					label="Students"
@@ -162,19 +237,26 @@ export default function OwnerDashboard({user}: Props) {
 					color="purple"
 				/>
 				<IconCard
-					Icon={BsPersonLinesFill}
+					Icon={BsPencilSquare}
 					label="Teachers"
 					value={users.filter((x) => x.type === "teacher").length}
 					onClick={() => setPage("teachers")}
 					color="purple"
 				/>
 				<IconCard
-					Icon={BsPersonLinesFill}
+					Icon={BsBank}
 					label="Corporate"
 					value={users.filter((x) => x.type === "corporate").length}
 					onClick={() => setPage("corporate")}
 					color="purple"
 				/>
+				<IconCard
+					Icon={BsBriefcaseFill}
+					label="Country Managers"
+					value={users.filter((x) => x.type === "agent").length}
+					onClick={() => setPage("agents")}
+					color="purple"
+				/>
 				<IconCard
 					Icon={BsGlobeCentralSouthAsia}
 					label="Countries"
@@ -183,7 +265,7 @@ export default function OwnerDashboard({user}: Props) {
 				/>
 				<IconCard
 					onClick={() => setPage("inactiveStudents")}
-					Icon={BsPerson}
+					Icon={BsPersonFill}
 					label="Inactive Students"
 					value={
 						users.filter((x) => x.type === "student" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)))
@@ -191,9 +273,16 @@ export default function OwnerDashboard({user}: Props) {
 					}
 					color="rose"
 				/>
+				<IconCard
+					onClick={() => setPage("inactiveCountryManagers")}
+					Icon={BsBriefcaseFill}
+					label="Inactive Country Managers"
+					value={users.filter(inactiveCountryManagerFilter).length}
+					color="rose"
+				/>
 				<IconCard
 					onClick={() => setPage("inactiveCorporate")}
-					Icon={BsPerson}
+					Icon={BsBank}
 					label="Inactive Corporate"
 					value={
 						users.filter((x) => x.type === "corporate" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)))
@@ -201,6 +290,20 @@ export default function OwnerDashboard({user}: Props) {
 					}
 					color="rose"
 				/>
+				<IconCard
+					onClick={() => setPage("paymentdone")}
+					Icon={BsCurrencyDollar}
+					label="Payment Done"
+					value={done.length}
+					color="purple"
+				/>
+				<IconCard
+					onClick={() => setPage("paymentpending")}
+					Icon={BsCurrencyDollar}
+					label="Pending Payment"
+					value={pending.length}
+					color="rose"
+				/>
 			</section>
 
 			<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full justify-between">
@@ -253,7 +356,7 @@ export default function OwnerDashboard({user}: Props) {
 					</div>
 				</div>
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
-					<span className="p-4">Teachers expiring in 1 month</span>
+					<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(
@@ -297,7 +400,7 @@ export default function OwnerDashboard({user}: Props) {
 					</div>
 				</div>
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
-					<span className="p-4">Expired Teachers</span>
+					<span className="p-4">Expired Country Manager</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
 						{users
 							.filter(
@@ -338,9 +441,65 @@ export default function OwnerDashboard({user}: Props) {
 									if (shouldReload) reload();
 								}}
 								onViewStudents={
-									selectedUser.type === "corporate" || selectedUser.type === "teacher" ? () => setPage("students") : undefined
+									selectedUser.type === "corporate" || selectedUser.type === "teacher"
+										? () => {
+												appendUserFilters({
+													id: "view-students",
+													filter: (x: User) => x.type === "student",
+												});
+												appendUserFilters({
+													id: "belongs-to-admin",
+													filter: (x: User) =>
+														groups
+															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+															.flatMap((g) => g.participants)
+															.includes(x.id),
+												});
+
+												router.push("/list/users");
+										  }
+										: undefined
+								}
+								onViewTeachers={
+									selectedUser.type === "corporate" || selectedUser.type === "student"
+										? () => {
+												appendUserFilters({
+													id: "view-teachers",
+													filter: (x: User) => x.type === "teacher",
+												});
+												appendUserFilters({
+													id: "belongs-to-admin",
+													filter: (x: User) =>
+														groups
+															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+															.flatMap((g) => g.participants)
+															.includes(x.id),
+												});
+
+												router.push("/list/users");
+										  }
+										: undefined
+								}
+								onViewCorporate={
+									selectedUser.type === "teacher" || selectedUser.type === "student"
+										? () => {
+												appendUserFilters({
+													id: "view-corporate",
+													filter: (x: User) => x.type === "corporate",
+												});
+												appendUserFilters({
+													id: "belongs-to-admin",
+													filter: (x: User) =>
+														groups
+															.filter((g) => g.participants.includes(selectedUser.id))
+															.flatMap((g) => [g.admin, ...g.participants])
+															.includes(x.id),
+												});
+
+												router.push("/list/users");
+										  }
+										: undefined
 								}
-								onViewTeachers={selectedUser.type === "corporate" ? () => setPage("teachers") : undefined}
 								user={selectedUser}
 							/>
 						</div>
@@ -350,8 +509,12 @@ export default function OwnerDashboard({user}: Props) {
 			{page === "students" && <StudentsList />}
 			{page === "teachers" && <TeachersList />}
 			{page === "corporate" && <CorporateList />}
+			{page === "agents" && <AgentsList />}
 			{page === "inactiveStudents" && <InactiveStudentsList />}
 			{page === "inactiveCorporate" && <InactiveCorporateList />}
+			{page === "inactiveCountryManagers" && <InactiveCountryManagerList />}
+			{page === "paymentdone" && <CorporatePaidStatusList paid={true} />}
+			{page === "paymentpending" && <CorporatePaidStatusList paid={false} />}
 			{page === "" && <DefaultDashboard />}
 		</>
 	);

src/dashboards/Agent.tsx

@@ -0,0 +1,244 @@
+/* eslint-disable @next/next/no-img-element */
+import Modal from "@/components/Modal";
+import useStats from "@/hooks/useStats";
+import useUsers from "@/hooks/useUsers";
+import { User} from "@/interfaces/user";
+import UserList from "@/pages/(admin)/Lists/UserList";
+import {dateSorter} from "@/utils";
+import moment from "moment";
+import {useEffect, useState} from "react";
+import {BsArrowLeft, BsPersonFill, BsBank, BsCurrencyDollar} from "react-icons/bs";
+import UserCard from "@/components/UserCard";
+import useGroups from "@/hooks/useGroups";
+
+import IconCard from "./IconCard";
+import usePaymentStatusUsers from '@/hooks/usePaymentStatusUsers';
+
+interface Props {
+	user: User;
+}
+
+export default function AgentDashboard({user}: Props) {
+	const [page, setPage] = useState("");
+	const [selectedUser, setSelectedUser] = useState<User>();
+	const [showModal, setShowModal] = useState(false);
+
+	const {stats} = useStats();
+	const {users, reload} = useUsers();
+	const {groups} = useGroups(user.id);
+	const { pending, done } = usePaymentStatusUsers();
+
+	useEffect(() => {
+		setShowModal(!!selectedUser && page === "");
+	}, [selectedUser, page]);
+
+	const corporateFilter = (user: User) => user.type === "corporate";
+	const referredCorporateFilter = (x: User) =>
+		x.type === "corporate" && !!x.corporateInformation && x.corporateInformation.referralAgent === user.id;
+	const inactiveReferredCorporateFilter = (x: User) =>
+		referredCorporateFilter(x) && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate));
+
+	const UserDisplay = ({ displayUser, allowClick = true }: {displayUser: User, allowClick?: boolean}) => (
+		<div
+			onClick={() => allowClick && setSelectedUser(displayUser)}
+			className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300">
+			<img src={displayUser.profilePicture} alt={displayUser.name} className="rounded-full w-10 h-10" />
+			<div className="flex flex-col gap-1 items-start">
+				<span>
+					{displayUser.type === "corporate"
+						? displayUser.corporateInformation?.companyInformation?.name || displayUser.name
+						: displayUser.name}
+				</span>
+				<span className="text-sm opacity-75">{displayUser.email}</span>
+			</div>
+		</div>
+	);
+
+	const ReferredCorporateList = () => {
+		return (
+			<>
+				<div className="flex flex-col gap-4">
+					<div
+						onClick={() => setPage("")}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<h2 className="text-2xl font-semibold">Referred Corporate ({users.filter(referredCorporateFilter).length})</h2>
+				</div>
+
+				<UserList user={user} filters={[referredCorporateFilter]} />
+			</>
+		);
+	};
+
+	const InactiveReferredCorporateList = () => {
+		return (
+			<>
+				<div className="flex flex-col gap-4">
+					<div
+						onClick={() => setPage("")}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<h2 className="text-2xl font-semibold">Inactive Referred Corporate ({users.filter(inactiveReferredCorporateFilter).length})</h2>
+				</div>
+
+				<UserList user={user} filters={[inactiveReferredCorporateFilter]} />
+			</>
+		);
+	};
+
+	const CorporateList = () => {
+		const filter = (x: User) => x.type === "corporate";
+
+		return (
+			<>
+				<div className="flex flex-col gap-4">
+					<div
+						onClick={() => setPage("")}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<h2 className="text-2xl font-semibold">Corporate ({users.filter(filter).length})</h2>
+				</div>
+				<UserList user={user} filters={[filter]} />
+			</>
+		);
+	};
+
+	const CorporatePaidStatusList = ({ paid }: {paid: Boolean}) => {
+		const list = paid ? done : pending;
+		const filter = (x: User) => x.type === "corporate" && list.includes(x.id);
+
+		return (
+			<>
+				<div className="flex flex-col gap-4">
+					<div
+						onClick={() => setPage("")}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<h2 className="text-2xl font-semibold">{paid ? 'Payment Done' : 'Pending Payment'} ({list.length})</h2>
+				</div>
+				<UserList user={user} filters={[filter]} />
+			</>
+		);
+	};
+
+	const DefaultDashboard = () => (
+		<>
+			<section className="flex flex-wrap gap-2 items-center -lg:justify-center lg:gap-4 text-center">
+				<IconCard
+					onClick={() => setPage("referredCorporate")}
+					Icon={BsBank}
+					label="Referred Corporate"
+					value={users.filter(referredCorporateFilter).length}
+					color="purple"
+				/>
+				<IconCard
+					onClick={() => setPage("inactiveReferredCorporate")}
+					Icon={BsBank}
+					label="Inactive Referred Corporate"
+					value={users.filter(inactiveReferredCorporateFilter).length}
+					color="rose"
+				/>
+				<IconCard
+					onClick={() => setPage("corporate")}
+					Icon={BsBank}
+					label="Corporate"
+					value={users.filter(corporateFilter).length}
+					color="purple"
+				/>
+				<IconCard
+					onClick={() => setPage("paymentdone")}
+					Icon={BsCurrencyDollar}
+					label="Payment Done"
+					value={done.length}
+					color="purple"
+				/>
+				<IconCard
+					onClick={() => setPage("paymentpending")}
+					Icon={BsCurrencyDollar}
+					label="Pending Payment"
+					value={pending.length}
+					color="rose"
+				/>
+			</section>
+
+			<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Latest Referred Corporate</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{users
+							.filter(referredCorporateFilter)
+							.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
+							.map((x) => (
+								<UserDisplay key={x.id} displayUser={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">
+						{users
+							.filter(corporateFilter)
+							.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
+							.map((x) => (
+								<UserDisplay key={x.id} displayUser={x} allowClick={false} />
+							))}
+					</div>
+				</div>
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Referenced corporate expiring in 1 month</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{users
+							.filter(
+								(x) =>
+									referredCorporateFilter(x) &&
+									moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
+									moment().isBefore(moment(x.subscriptionExpirationDate)),
+							)
+							.map((x) => (
+								<UserDisplay key={x.id} displayUser={x} />
+							))}
+					</div>
+				</div>
+			</section>
+		</>
+	);
+
+	return (
+		<>
+			<Modal isOpen={showModal} onClose={() => setSelectedUser(undefined)}>
+				<>
+					{selectedUser && (
+						<div className="w-full flex flex-col gap-8">
+							<UserCard
+								loggedInUser={user}
+								onClose={(shouldReload) => {
+									setSelectedUser(undefined);
+									if (shouldReload) reload();
+								}}
+								onViewStudents={
+									selectedUser.type === "corporate" || selectedUser.type === "teacher" ? () => setPage("students") : undefined
+								}
+								onViewTeachers={selectedUser.type === "corporate" ? () => setPage("teachers") : undefined}
+								user={selectedUser}
+							/>
+						</div>
+					)}
+				</>
+			</Modal>
+			{page === "referredCorporate" && <ReferredCorporateList />}
+			{page === "corporate" && <CorporateList />}
+			{page === "inactiveReferredCorporate" && <InactiveReferredCorporateList />}
+			{page === "paymentdone" && <CorporatePaidStatusList paid={true} />}
+			{page === "paymentpending" && <CorporatePaidStatusList paid={false} />}
+			{page === "" && <DefaultDashboard />}
+		</>
+	);
+}

src/dashboards/AssignmentCard.tsx

@@ -2,19 +2,20 @@ import ProgressBar from "@/components/Low/ProgressBar";
 import useUsers from "@/hooks/useUsers";
 import {Module} from "@/interfaces";
 import {Assignment} from "@/interfaces/results";
-import {Stat} from "@/interfaces/user";
 import {calculateBandScore} from "@/utils/score";
 import clsx from "clsx";
 import moment from "moment";
-import {useState} from "react";
 import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
+import { usePDFDownload } from "@/hooks/usePDFDownload";
 
 interface Props {
 	onClick?: () => void;
+	allowDownload?: boolean;
 }
 
-export default function AssignmentCard({id, name, assigner, startDate, endDate, assignees, results, exams, onClick}: Assignment & Props) {
+export default function AssignmentCard({id, name, assigner, startDate, endDate, assignees, results, exams, onClick, allowDownload}: Assignment & Props) {
 	const {users} = useUsers();
+	const renderPdfIcon = usePDFDownload("assignments");
 
 	const calculateAverageModuleScore = (module: Module) => {
 		const resultModuleBandScores = results.map((r) => {
@@ -33,7 +34,10 @@ export default function AssignmentCard({id, name, assigner, startDate, endDate,
 			onClick={onClick}
 			className="w-[350px] h-fit flex flex-col gap-6 bg-white border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300">
 			<div className="flex flex-col gap-3">
-				<h3 className="font-semibold text-xl">{name}</h3>
+				<div className="flex flex-row justify-between">
+					<h3 className="font-semibold text-xl">{name}</h3>
+					{allowDownload && renderPdfIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")}
+				</div>
 				<ProgressBar
 					color={results.length / assignees.length < 0.5 ? "red" : "purple"}
 					percentage={(results.length / assignees.length) * 100}

src/dashboards/AssignmentCreator.tsx

@@ -18,6 +18,7 @@ import {getExam} from "@/utils/exams";
 import {toast} from "react-toastify";
 import {uuidv4} from "@firebase/util";
 import {Assignment} from "@/interfaces/results";
+import Checkbox from "@/components/Low/Checkbox";
 
 interface Props {
 	isCreating: boolean;
@@ -33,8 +34,14 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 	const [assignees, setAssignees] = useState<string[]>(assignment?.assignees || []);
 	const [name, setName] = useState(assignment?.name || generate({minLength: 6, maxLength: 8, min: 2, max: 3, join: " ", formatter: capitalize}));
 	const [isLoading, setIsLoading] = useState(false);
-	const [startDate, setStartDate] = useState<Date | null>(assignment ? moment(assignment.startDate).toDate() : moment().add(1, "day").toDate());
+	const [startDate, setStartDate] = useState<Date | null>(
-	const [endDate, setEndDate] = useState<Date | null>(assignment ? moment(assignment.endDate).toDate() : moment().add(8, "day").toDate());
+		assignment ? moment(assignment.startDate).toDate() : moment().hours(0).minutes(0).add(1, "day").toDate(),
+	);
+	const [endDate, setEndDate] = useState<Date | null>(
+		assignment ? moment(assignment.endDate).toDate() : moment().hours(23).minutes(59).add(8, "day").toDate(),
+	);
+	// creates a new exam for each assignee or just one exam for all assignees
+	const [generateMultiple, setGenerateMultiple] = useState<boolean>(false);
 
 	const toggleModule = (module: Module) => {
 		const modules = selectedModules.filter((x) => x !== module);
@@ -48,33 +55,23 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 	const createAssignment = () => {
 		setIsLoading(true);
 
-		const examPromises = selectedModules.map(async (module) => getExam(module, false));
+		(assignment ? axios.patch : axios.post)(`/api/assignments${assignment ? `/${assignment.id}` : ""}`, {
-		Promise.all(examPromises)
+			assignees,
-			.then((exams) => {
+			name,
-				(assignment ? axios.patch : axios.post)(`/api/assignments${assignment ? `/${assignment.id}` : ""}`, {
+			startDate,
-					assigner,
+			endDate,
-					assignees,
+			selectedModules,
-					name,
+			generateMultiple,
-					startDate,
+		})
-					endDate,
+			.then(() => {
-					results: [],
+				toast.success(`The assignment "${name}" has been ${assignment ? "updated" : "created"} successfully!`);
-					exams: exams.map((e) => ({module: e?.module, id: e?.id})),
+				cancelCreation();
-				})
-					.then(() => {
-						toast.success(`The assignment "${name}" has been ${assignment ? "updated" : "created"} successfully!`);
-						cancelCreation();
-					})
-					.catch((e) => {
-						console.log(e);
-						toast.error("Something went wrong, please try again later!");
-					})
-					.finally(() => setIsLoading(false));
 			})
 			.catch((e) => {
 				console.log(e);
 				toast.error("Something went wrong, please try again later!");
-				setIsLoading(false);
+			})
-			});
+			.finally(() => setIsLoading(false));
 	};
 
 	const deleteAssignment = () => {
@@ -284,6 +281,11 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 						))}
 					</div>
 				</section>
+				<div className="flex gap-4 w-full justify-end">
+					<Checkbox isChecked={generateMultiple} onChange={() => setGenerateMultiple((d) => !d)}>
+						Generate different exams
+					</Checkbox>
+				</div>
 				<div className="flex gap-4 w-full justify-end">
 					<Button className="w-full max-w-[200px]" variant="outline" onClick={cancelCreation} disabled={isLoading} isLoading={isLoading}>
 						Cancel

src/dashboards/Corporate.tsx

@@ -19,7 +19,7 @@ import {
 	BsPersonFill,
 	BsPersonFillGear,
 	BsPersonGear,
-	BsPersonLinesFill,
+	BsPencilSquare,
 } from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
@@ -29,6 +29,8 @@ import {Module} from "@/interfaces";
 import {groupByExam} from "@/utils/stats";
 import IconCard from "./IconCard";
 import GroupList from "@/pages/(admin)/Lists/GroupList";
+import useFilterStore from "@/stores/listFilterStore";
+import {useRouter} from "next/router";
 
 interface Props {
 	user: User;
@@ -43,6 +45,9 @@ export default function CorporateDashboard({user}: Props) {
 	const {users, reload} = useUsers();
 	const {groups} = useGroups(user.id);
 
+	const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
+	const router = useRouter();
+
 	useEffect(() => {
 		setShowModal(!!selectedUser && page === "");
 	}, [selectedUser, page]);
@@ -86,7 +91,7 @@ export default function CorporateDashboard({user}: Props) {
 					<h2 className="text-2xl font-semibold">Students ({users.filter(filter).length})</h2>
 				</div>
 
-				<UserList user={user} filter={filter} />
+				<UserList user={user} filters={[filter]} />
 			</>
 		);
 	};
@@ -113,7 +118,7 @@ export default function CorporateDashboard({user}: Props) {
 					<h2 className="text-2xl font-semibold">Teachers ({users.filter(filter).length})</h2>
 				</div>
 
-				<UserList user={user} filter={filter} />
+				<UserList user={user} filters={[filter]} />
 			</>
 		);
 	};
@@ -165,7 +170,7 @@ export default function CorporateDashboard({user}: Props) {
 				/>
 				<IconCard
 					onClick={() => setPage("teachers")}
-					Icon={BsPersonLinesFill}
+					Icon={BsPencilSquare}
 					label="Teachers"
 					value={users.filter(teacherFilter).length}
 					color="purple"
@@ -256,9 +261,45 @@ export default function CorporateDashboard({user}: Props) {
 									if (shouldReload) reload();
 								}}
 								onViewStudents={
-									selectedUser.type === "corporate" || selectedUser.type === "teacher" ? () => setPage("students") : undefined
+									selectedUser.type === "corporate" || selectedUser.type === "teacher"
+										? () => {
+												appendUserFilters({
+													id: "view-students",
+													filter: (x: User) => x.type === "student",
+												});
+												appendUserFilters({
+													id: "belongs-to-admin",
+													filter: (x: User) =>
+														groups
+															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+															.flatMap((g) => g.participants)
+															.includes(x.id),
+												});
+
+												router.push("/list/users");
+										  }
+										: undefined
+								}
+								onViewTeachers={
+									selectedUser.type === "corporate" || selectedUser.type === "student"
+										? () => {
+												appendUserFilters({
+													id: "view-teachers",
+													filter: (x: User) => x.type === "teacher",
+												});
+												appendUserFilters({
+													id: "belongs-to-admin",
+													filter: (x: User) =>
+														groups
+															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+															.flatMap((g) => g.participants)
+															.includes(x.id),
+												});
+
+												router.push("/list/users");
+										  }
+										: undefined
 								}
-								onViewTeachers={selectedUser.type === "corporate" ? () => setPage("teachers") : undefined}
 								user={selectedUser}
 							/>
 						</div>

src/dashboards/IconCard.tsx

@@ -19,7 +19,7 @@ export default function IconCard({Icon, label, value, color, onClick}: Props) {
 	return (
 		<div
 			onClick={onClick}
-			className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
+			className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
 			<Icon className={clsx("text-6xl", colorClasses[color])} />
 			<span className="flex flex-col gap-1 items-center text-xl">
 				<span className="text-lg">{label}</span>

src/dashboards/Student.tsx

@@ -1,26 +1,35 @@
 import Button from "@/components/Low/Button";
 import ProgressBar from "@/components/Low/ProgressBar";
+import PayPalPayment from "@/components/PayPalPayment";
 import ProfileSummary from "@/components/ProfileSummary";
 import useAssignments from "@/hooks/useAssignments";
 import useStats from "@/hooks/useStats";
 import {Assignment} from "@/interfaces/results";
-import {User} from "@/interfaces/user";
+import {CorporateUser, User} from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
 import {getExamById} from "@/utils/exams";
+import {getUserCorporate} from "@/utils/groups";
 import {MODULE_ARRAY, sortByModule, sortByModuleName} from "@/utils/moduleUtils";
 import {averageScore, groupBySession} from "@/utils/stats";
+import {CreateOrderActions, CreateOrderData, OnApproveActions, OnApproveData, OrderResponseBody} from "@paypal/paypal-js";
+import {PayPalButtons} from "@paypal/react-paypal-js";
+import axios from "axios";
 import clsx from "clsx";
 import {capitalize} from "lodash";
 import moment from "moment";
 import Link from "next/link";
 import {useRouter} from "next/router";
+import {useEffect, useState} from "react";
 import {BsArrowRepeat, BsBook, BsClipboard, BsFileEarmarkText, BsHeadphones, BsMegaphone, BsPen, BsPencil, BsStar} from "react-icons/bs";
+import {toast} from "react-toastify";
 
 interface Props {
 	user: User;
 }
 
 export default function StudentDashboard({user}: Props) {
+	const [corporateUserToShow, setCorporateUserToShow] = useState<CorporateUser>();
+
 	const {stats} = useStats(user.id);
 	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({assignees: user?.id});
 
@@ -32,8 +41,12 @@ export default function StudentDashboard({user}: Props) {
 	const setSelectedModules = useExamStore((state) => state.setSelectedModules);
 	const setAssignment = useExamStore((state) => state.setAssignment);
 
+	useEffect(() => {
+		getUserCorporate("IXdh9EQziAVXXh0jOiC5cPVlgS82").then(setCorporateUserToShow);
+	}, [user]);
+
 	const startAssignment = (assignment: Assignment) => {
-		const examPromises = assignment.exams.map((e) => getExamById(e.module, e.id));
+		const examPromises = assignment.exams.filter((e) => e.assignee === user.id).map((e) => getExamById(e.module, e.id));
 
 		Promise.all(examPromises).then((exams) => {
 			if (exams.every((x) => !!x)) {
@@ -55,6 +68,11 @@ export default function StudentDashboard({user}: Props) {
 
 	return (
 		<>
+			{corporateUserToShow && (
+				<div className="absolute top-4 right-4 bg-neutral-200 px-2 rounded-lg py-1">
+					Linked to: <b>{corporateUserToShow?.corporateInformation?.companyInformation.name || corporateUserToShow.name}</b>
+				</div>
+			)}
 			<ProfileSummary
 				user={user}
 				items={[
@@ -116,6 +134,7 @@ export default function StudentDashboard({user}: Props) {
 								<div className="flex justify-between w-full items-center">
 									<div className="grid grid-cols-2 gap-2 place-items-center justify-center w-fit min-w-[104px] -md:mt-2">
 										{assignment.exams
+											.filter((e) => e.assignee === user.id)
 											.map((e) => e.module)
 											.sort(sortByModuleName)
 											.map((module) => (
@@ -185,11 +204,12 @@ export default function StudentDashboard({user}: Props) {
 									{module === "listening" && <BsHeadphones className="text-ielts-listening w-4 h-4 md:w-5 md:h-5" />}
 									{module === "writing" && <BsPen className="text-ielts-writing w-4 h-4 md:w-5 md:h-5" />}
 									{module === "speaking" && <BsMegaphone className="text-ielts-speaking w-4 h-4 md:w-5 md:h-5" />}
+									{module === "level" && <BsClipboard className="text-ielts-level w-4 h-4 md:w-5 md:h-5" />}
 								</div>
 								<div className="flex justify-between w-full">
 									<span className="font-bold md:font-extrabold text-sm">{capitalize(module)}</span>
 									<span className="text-sm font-normal text-mti-gray-dim">
-										Level {user.levels[module]} / Level {user.desiredLevels[module]}
+										Level {user.levels[module] || 0} / Level {user.desiredLevels[module] || 9}
 									</span>
 								</div>
 							</div>

src/dashboards/Teacher.tsx

@@ -2,7 +2,7 @@
 import Modal from "@/components/Modal";
 import useStats from "@/hooks/useStats";
 import useUsers from "@/hooks/useUsers";
-import {Group, Stat, User} from "@/interfaces/user";
+import {CorporateUser, Group, Stat, User} from "@/interfaces/user";
 import UserList from "@/pages/(admin)/Lists/UserList";
 import {dateSorter} from "@/utils";
 import moment from "moment";
@@ -24,7 +24,6 @@ import {
 	BsPersonFill,
 	BsPersonFillGear,
 	BsPersonGear,
-	BsPersonLinesFill,
 	BsPlus,
 	BsRepeat,
 	BsRepeat1,
@@ -45,6 +44,7 @@ import clsx from "clsx";
 import ProgressBar from "@/components/Low/ProgressBar";
 import AssignmentCreator from "./AssignmentCreator";
 import AssignmentView from "./AssignmentView";
+import {getUserCorporate} from "@/utils/groups";
 
 interface Props {
 	user: User;
@@ -56,6 +56,7 @@ export default function TeacherDashboard({user}: Props) {
 	const [showModal, setShowModal] = useState(false);
 	const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
 	const [isCreatingAssignment, setIsCreatingAssignment] = useState(false);
+	const [corporateUserToShow, setCorporateUserToShow] = useState<CorporateUser>();
 
 	const {stats} = useStats();
 	const {users, reload} = useUsers();
@@ -66,6 +67,10 @@ export default function TeacherDashboard({user}: Props) {
 		setShowModal(!!selectedUser && page === "");
 	}, [selectedUser, page]);
 
+	useEffect(() => {
+		getUserCorporate(user.id).then(setCorporateUserToShow);
+	}, [user]);
+
 	const studentFilter = (user: User) => user.type === "student" && groups.flatMap((g) => g.participants).includes(user.id);
 
 	const getStatsByStudent = (user: User) => stats.filter((s) => s.user === user.id);
@@ -104,7 +109,7 @@ export default function TeacherDashboard({user}: Props) {
 					<h2 className="text-2xl font-semibold">Students ({users.filter(filter).length})</h2>
 				</div>
 
-				<UserList user={user} filter={filter} />
+				<UserList user={user} filters={[filter]} />
 			</>
 		);
 	};
@@ -227,7 +232,7 @@ export default function TeacherDashboard({user}: Props) {
 					<h2 className="text-2xl font-semibold">Past Assignments ({assignments.filter(pastFilter).length})</h2>
 					<div className="flex flex-wrap gap-2">
 						{assignments.filter(pastFilter).map((a) => (
-							<AssignmentCard {...a} onClick={() => setSelectedAssignment(a)} key={a.id} />
+							<AssignmentCard {...a} onClick={() => setSelectedAssignment(a)} key={a.id} allowDownload />
 						))}
 					</div>
 				</section>
@@ -237,7 +242,16 @@ export default function TeacherDashboard({user}: Props) {
 
 	const DefaultDashboard = () => (
 		<>
-			<section className="flex -lg:flex-wrap gap-4 items-center -lg:justify-center lg:justify-start text-center">
+			{corporateUserToShow && (
+				<div className="absolute top-4 right-4 bg-neutral-200 px-2 rounded-lg py-1">
+					Linked to: <b>{corporateUserToShow?.corporateInformation?.companyInformation.name || corporateUserToShow.name}</b>
+				</div>
+			)}
+			<section
+				className={clsx(
+					"flex -lg:flex-wrap gap-4 items-center -lg:justify-center lg:justify-start text-center",
+					!!corporateUserToShow && "mt-12 xl:mt-6",
+				)}>
 				<IconCard
 					onClick={() => setPage("students")}
 					Icon={BsPersonFill}

src/email/index.ts

@@ -40,3 +40,15 @@ export function prepareMailOptions(context: object, to: string[], subject: strin
 		context,
 	};
 }
+
+export async function sendEmail(template: string, context: object, to: string[], subject: string): Promise<boolean> {
+	try {
+		const transport = prepareMailer(template);
+		const mailOptions = prepareMailOptions(context, to, subject, template);
+
+		await transport.sendMail(mailOptions);
+		return true;
+	} catch {
+		return false;
+	}
+}

src/email/templates/assignment.handlebars

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+</head>
+<div>
+  <p>Hello {{user.name}},</p>
+  <br />
+  <p>You have just been given the assignment <b>"{{assignment.name}}"</b> by your teacher {{assignment.assigner}}!</p>
+  <br />
+  <p>It's start date will be on <b>{{assignment.startDate}}</b> and will only last until <b>{{assignment.endDate}}</b>
+  </p>
+  <br />
+  <p>For this assignment, you've been tasked with completing exams of the following modules:
+    <b>{{assignment.modules}}</b>.
+  </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>
+  <br />
+  <p>Thanks,</p>
+  <p>Your EnCoach team</p>
+</div>
+
+</html>

src/email/templates/assignment.handlebars.json

@@ -0,0 +1,13 @@
+{
+  "user": {
+    "name": "Tiago Ribeiro"
+  },
+  "assignment": {
+    "name": "Final Exam",
+    "assigner": "Teacher",
+    "assignees": [],
+    "modules": "Reading and Writing",
+    "startDate": "24/12/2023",
+    "endDate": "27/01/2024"
+  }
+}

src/exams/Finish.tsx

@@ -10,6 +10,8 @@ import Link from "next/link";
 import {useRouter} from "next/router";
 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";
 
 interface Score {
 	module: Module;
@@ -66,6 +68,22 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
 		return exam.exercises.length;
 	};
 
+	const bandScore: number = calculateBandScore(selectedScore.correct, selectedScore.total, selectedModule, user.focus);
+
+	const showLevel = (level: number) => {
+		if (selectedModule === "level") {
+			const [levelStr, grade] = getLevelScore(level);
+			return (
+				<div className="flex flex-col items-center justify-center gap-1">
+					<span className="text-xl font-bold">{levelStr}</span>
+					<span className="text-xl">{grade}</span>
+				</div>
+			);
+		}
+
+		return <span className="text-3xl font-bold">{level}</span>;
+	};
+
 	return (
 		<>
 			<div className="w-full min-h-full h-fit flex flex-col items-center justify-between gap-8">
@@ -136,14 +154,16 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
 				{isLoading && (
 					<div className="w-fit h-fit absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 animate-pulse flex flex-col gap-12 items-center">
 						<span className={clsx("loading loading-infinity w-32", moduleColors[selectedModule].progress)} />
-						<span className={clsx("font-bold text-2xl", moduleColors[selectedModule].progress)}>Evaluating your answers...</span>
+						<span className={clsx("font-bold text-2xl text-center", moduleColors[selectedModule].progress)}>
+							Evaluating your answers, please be patient...
+							<br />
+							You can also check it later on your records page!
+						</span>
 					</div>
 				)}
 				{!isLoading && (
 					<div className="w-full flex gap-9 mt-32 items-center justify-between mb-20">
-						<span className="max-w-3xl">
+						<span className="max-w-3xl">{moduleResultText(selectedModule, bandScore)}</span>
-							{moduleResultText(calculateBandScore(selectedScore.correct, selectedScore.total, selectedModule, user.focus))}
-						</span>
 						<div className="flex gap-9 px-16">
 							<div
 								className={clsx("radial-progress overflow-hidden", moduleColors[selectedModule].progress)}
@@ -156,9 +176,7 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
 										moduleColors[selectedModule].inner,
 									)}>
 									<span className="text-xl">Level</span>
-									<span className="text-3xl font-bold">
+									{showLevel(bandScore)}
-										{calculateBandScore(selectedScore.correct, selectedScore.total, selectedModule, user.focus)}
-									</span>
 								</div>
 							</div>
 							<div className="flex flex-col gap-5">

src/exams/Level.tsx

@@ -19,15 +19,28 @@ interface Props {
 }
 
 export default function Level({exam, showSolutions = false, onFinish}: Props) {
+	const [questionIndex, setQuestionIndex] = useState(0);
+	const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
 	const [exerciseIndex, setExerciseIndex] = useState(0);
 	const [userSolutions, setUserSolutions] = useState<UserSolution[]>(exam.exercises.map((x) => defaultUserSolutions(x, exam)));
 
 	const [hasExamEnded, setHasExamEnded] = useExamStore((state) => [state.hasExamEnded, state.setHasExamEnded]);
 
+	useEffect(() => {
+		setCurrentQuestionIndex(0);
+	}, [questionIndex]);
+
+	useEffect(() => {
+		if (hasExamEnded && exerciseIndex === -1) {
+			setExerciseIndex((prev) => prev + 1);
+		}
+	}, [hasExamEnded, exerciseIndex]);
+
 	const nextExercise = (solution?: UserSolution) => {
 		if (solution) {
 			setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
 		}
+		setQuestionIndex((prev) => prev + currentQuestionIndex);
 
 		if (exerciseIndex + 1 < exam.exercises.length) {
 			setExerciseIndex((prev) => prev + 1);
@@ -70,7 +83,7 @@ export default function Level({exam, showSolutions = false, onFinish}: Props) {
 			<div className="flex flex-col h-full w-full gap-8 items-center">
 				<ModuleTitle
 					minTimer={exam.minTimer}
-					exerciseIndex={exerciseIndex + 1}
+					exerciseIndex={exerciseIndex + 1 + questionIndex + currentQuestionIndex}
 					module="level"
 					totalExercises={countExercises(exam.exercises)}
 					disableTimer={showSolutions}
@@ -78,11 +91,11 @@ export default function Level({exam, showSolutions = false, onFinish}: Props) {
 				{exerciseIndex > -1 &&
 					exerciseIndex < exam.exercises.length &&
 					!showSolutions &&
-					renderExercise(getExercise(), nextExercise, previousExercise)}
+					renderExercise(getExercise(), nextExercise, previousExercise, setCurrentQuestionIndex)}
 				{exerciseIndex > -1 &&
 					exerciseIndex < exam.exercises.length &&
 					showSolutions &&
-					renderSolution(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
+					renderSolution(exam.exercises[exerciseIndex], nextExercise, previousExercise, setCurrentQuestionIndex)}
 			</div>
 		</>
 	);

src/exams/Listening.tsx

@@ -17,6 +17,8 @@ interface Props {
 }
 
 export default function Listening({exam, showSolutions = false, onFinish}: Props) {
+	const [questionIndex, setQuestionIndex] = useState(0);
+	const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
 	const [exerciseIndex, setExerciseIndex] = useState(showSolutions ? 0 : -1);
 	const [partIndex, setPartIndex] = useState(0);
 	const [timesListened, setTimesListened] = useState(0);
@@ -33,6 +35,10 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 		}
 	}, [hasExamEnded, exerciseIndex]);
 
+	useEffect(() => {
+		setCurrentQuestionIndex(0);
+	}, [questionIndex]);
+
 	const confirmFinishModule = (keepGoing?: boolean) => {
 		if (!keepGoing) {
 			setShowBlankModal(false);
@@ -46,6 +52,7 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 		if (solution) {
 			setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
 		}
+		setQuestionIndex((prev) => prev + currentQuestionIndex);
 
 		if (exerciseIndex + 1 < exam.parts[partIndex].exercises.length && !hasExamEnded) {
 			setExerciseIndex((prev) => prev + 1);
@@ -130,7 +137,10 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 							.flatMap((x) => x.exercises)
 							.findIndex(
 								(x) => x.id === exam.parts[partIndex].exercises[exerciseIndex === -1 ? exerciseIndex + 1 : exerciseIndex]?.id,
-							) || 0) + (exerciseIndex === -1 ? 0 : 1)
+							) || 0) +
+						(exerciseIndex === -1 ? 0 : 1) +
+						questionIndex +
+						currentQuestionIndex
 					}
 					minTimer={exam.minTimer}
 					module="listening"
@@ -141,11 +151,11 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 				{exerciseIndex > -1 &&
 					exerciseIndex < exam.parts[partIndex].exercises.length &&
 					!showSolutions &&
-					renderExercise(getExercise(), nextExercise, previousExercise)}
+					renderExercise(getExercise(), nextExercise, previousExercise, setCurrentQuestionIndex)}
 				{exerciseIndex > -1 &&
 					exerciseIndex < exam.parts[partIndex].exercises.length &&
 					showSolutions &&
-					renderSolution(exam.parts[partIndex].exercises[exerciseIndex], nextExercise, previousExercise)}
+					renderSolution(exam.parts[partIndex].exercises[exerciseIndex], nextExercise, previousExercise, setCurrentQuestionIndex)}
 			</div>
 			{exerciseIndex === -1 && partIndex > 0 && (
 				<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
@@ -165,7 +175,7 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 					</Button>
 				</div>
 			)}
-			{exerciseIndex === -1 && (
+			{exerciseIndex === -1 && partIndex === 0 && (
 				<Button color="purple" onClick={() => nextExercise()} className="max-w-[200px] self-end w-full justify-self-end">
 					Start now
 				</Button>

src/exams/Reading.tsx

@@ -81,6 +81,8 @@ function TextModal({isOpen, title, content, onClose}: {isOpen: boolean; title: s
 }
 
 export default function Reading({exam, showSolutions = false, onFinish}: Props) {
+	const [questionIndex, setQuestionIndex] = useState(0);
+	const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
 	const [exerciseIndex, setExerciseIndex] = useState(showSolutions ? 0 : -1);
 	const [partIndex, setPartIndex] = useState(0);
 	const [showTextModal, setShowTextModal] = useState(false);
@@ -105,6 +107,10 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 		};
 	}, []);
 
+	useEffect(() => {
+		setCurrentQuestionIndex(0);
+	}, [questionIndex]);
+
 	useEffect(() => {
 		if (hasExamEnded && exerciseIndex === -1) {
 			setExerciseIndex((prev) => prev + 1);
@@ -124,6 +130,7 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 		if (solution) {
 			setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
 		}
+		setQuestionIndex((prev) => prev + currentQuestionIndex);
 
 		if (exerciseIndex + 1 < exam.parts[partIndex].exercises.length && !hasExamEnded) {
 			setExerciseIndex((prev) => prev + 1);
@@ -207,7 +214,10 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 							.flatMap((x) => x.exercises)
 							.findIndex(
 								(x) => x.id === exam.parts[partIndex].exercises[exerciseIndex === -1 ? exerciseIndex + 1 : exerciseIndex]?.id,
-							) || 0) + (exerciseIndex === -1 ? 0 : 1)
+							) || 0) +
+						(exerciseIndex === -1 ? 0 : 1) +
+						questionIndex +
+						currentQuestionIndex
 					}
 					module="reading"
 					totalExercises={countExercises(exam.parts.flatMap((x) => x.exercises))}
@@ -219,11 +229,11 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 					{exerciseIndex > -1 &&
 						exerciseIndex < exam.parts[partIndex].exercises.length &&
 						!showSolutions &&
-						renderExercise(getExercise(), nextExercise, previousExercise)}
+						renderExercise(getExercise(), nextExercise, previousExercise, setCurrentQuestionIndex)}
 					{exerciseIndex > -1 &&
 						exerciseIndex < exam.parts[partIndex].exercises.length &&
 						showSolutions &&
-						renderSolution(exam.parts[partIndex].exercises[exerciseIndex], nextExercise, previousExercise)}
+						renderSolution(exam.parts[partIndex].exercises[exerciseIndex], nextExercise, previousExercise, setCurrentQuestionIndex)}
 				</div>
 				{exerciseIndex > -1 && exerciseIndex < exam.parts[partIndex].exercises.length && (
 					<Button

src/exams/Speaking.tsx

@@ -20,14 +20,21 @@ interface Props {
 }
 
 export default function Speaking({exam, showSolutions = false, onFinish}: Props) {
+	const [questionIndex, setQuestionIndex] = useState(0);
+	const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
 	const [exerciseIndex, setExerciseIndex] = useState(0);
 	const [userSolutions, setUserSolutions] = useState<UserSolution[]>(exam.exercises.map((x) => defaultUserSolutions(x, exam)));
 	const [hasExamEnded, setHasExamEnded] = useExamStore((state) => [state.hasExamEnded, state.setHasExamEnded]);
 
+	useEffect(() => {
+		setCurrentQuestionIndex(0);
+	}, [questionIndex]);
+
 	const nextExercise = (solution?: UserSolution) => {
 		if (solution) {
 			setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
 		}
+		setQuestionIndex((prev) => prev + currentQuestionIndex);
 
 		if (exerciseIndex + 1 < exam.exercises.length) {
 			setExerciseIndex((prev) => prev + 1);
@@ -71,7 +78,7 @@ export default function Speaking({exam, showSolutions = false, onFinish}: Props)
 				<ModuleTitle
 					label={convertCamelCaseToReadable(exam.exercises[exerciseIndex].type)}
 					minTimer={exam.minTimer}
-					exerciseIndex={exerciseIndex + 1}
+					exerciseIndex={exerciseIndex + 1 + questionIndex + currentQuestionIndex}
 					module="speaking"
 					totalExercises={countExercises(exam.exercises)}
 					disableTimer={showSolutions}
@@ -79,11 +86,11 @@ export default function Speaking({exam, showSolutions = false, onFinish}: Props)
 				{exerciseIndex > -1 &&
 					exerciseIndex < exam.exercises.length &&
 					!showSolutions &&
-					renderExercise(getExercise(), nextExercise, previousExercise)}
+					renderExercise(getExercise(), nextExercise, previousExercise, setCurrentQuestionIndex)}
 				{exerciseIndex > -1 &&
 					exerciseIndex < exam.exercises.length &&
 					showSolutions &&
-					renderSolution(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
+					renderSolution(exam.exercises[exerciseIndex], nextExercise, previousExercise, setCurrentQuestionIndex)}
 			</div>
 		</>
 	);

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

@@ -0,0 +1,169 @@
+import React from "react";
+import { View, Text, StyleSheet } from "@react-pdf/renderer";
+import { ModuleScore } from "@/interfaces/module.scores";
+import { styles } from "../styles";
+import { RadialResult } from "./radial.result";
+interface Props {
+  detail: ModuleScore;
+  title: string;
+}
+
+const thresholds = [
+  {
+    level: "Low A1",
+    label: "Begginner",
+    minValue: 0,
+    maxValue: 3,
+  },
+  {
+    level: "High A1/Low A2",
+    label: "Elementary",
+    minValue: 4,
+    maxValue: 7,
+  },
+  {
+    level: "High A2/Low B1",
+    label: "Pre-Intermediate",
+    minValue: 8,
+    maxValue: 12,
+  },
+  {
+    level: "High B2/Low C1",
+    label: "Upper-Intermediate",
+    minValue: 16,
+    maxValue: 21,
+  },
+  {
+    level: "C1",
+    label: "Advanced",
+    minValue: 22,
+    maxValue: 25,
+  },
+];
+
+const customStyles = StyleSheet.create({
+  container: {
+    display: "flex",
+    flexDirection: "row",
+    gap: 30,
+    justifyContent: "space-between",
+  },
+  tableContainer: {
+    display: "flex",
+    flex: 1,
+    flexDirection: "column",
+  },
+  tableLabel: {
+    display: "flex",
+    alignItems: "center",
+  },
+  tableBody: { display: "flex", flex: 1, flexDirection: "row" },
+  tableRow: {
+    display: "flex",
+    flexDirection: "column",
+  },
+});
+
+export const LevelExamDetails = ({ detail, title }: Props) => {
+  const updatedThresholds = thresholds.map((t) => ({
+    ...t,
+    match: detail.score >= t.minValue && detail.score <= t.maxValue,
+  }));
+
+  const getBackgroundColor = (match: boolean, base: boolean) => {
+    if (match) return "#c2bfdd";
+    return base ? "#553b25" : "#ea7c7b";
+  };
+
+  const getTextColor = (match: boolean, base: boolean) => {
+    if (match) return "#9e7936";
+    return base ? "white" : "#553b25";
+  };
+  return (
+    <View style={[styles.textFont, customStyles.container]}>
+      <RadialResult {...detail} />
+      <View style={customStyles.tableContainer}>
+        <View style={customStyles.tableLabel}>
+          <Text
+            style={[styles.textBold, styles.textColor, { fontSize: "10px" }]}
+          >
+            {title}
+          </Text>
+        </View>
+        <View style={customStyles.tableBody}>
+          {updatedThresholds.map(
+            ({ level, label, minValue, maxValue, match }, index, arr) => (
+              <View
+                key={label}
+                style={[
+                  customStyles.tableRow,
+                  {
+                    width: `calc(100% / ${arr.length})`,
+                  },
+                ]}
+              >
+                <View
+                  style={{
+                    backgroundColor: getBackgroundColor(match, true),
+                    paddingVertical: "8px",
+                    alignItems: "center",
+                  }}
+                >
+                  <Text
+                    style={[
+                      styles.textBold,
+                      {
+                        color: getTextColor(match, true),
+                        fontSize: "6px",
+                      },
+                    ]}
+                  >
+                    {level}
+                  </Text>
+                </View>
+                <View
+                  style={{
+                    backgroundColor: getBackgroundColor(match, false),
+                    paddingVertical: "8px",
+                    alignItems: "center",
+                  }}
+                >
+                  <Text
+                    style={[
+                      styles.textBold,
+                      {
+                        color: getTextColor(match, false),
+                        fontSize: "6px",
+                      },
+                    ]}
+                  >
+                    {label}
+                  </Text>
+                </View>
+                <View
+                  style={{
+                    backgroundColor: getBackgroundColor(match, true),
+                    paddingVertical: "24px",
+                    alignItems: "center",
+                  }}
+                >
+                  <Text
+                    style={[
+                      styles.textBold,
+                      {
+                        color: getTextColor(match, true),
+                        fontSize: "10px",
+                      },
+                    ]}
+                  >
+                    {minValue}-{maxValue}
+                  </Text>
+                </View>
+              </View>
+            )
+          )}
+        </View>
+      </View>
+    </View>
+  );
+};

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

@@ -0,0 +1,24 @@
+/* eslint-disable jsx-a11y/alt-text */
+import React from "react";
+
+import { View, Text, Image } from "@react-pdf/renderer";
+import { styles } from "../styles";
+import { ModuleScore } from "@/interfaces/module.scores";
+
+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}</Text>
+      <Text style={{ fontSize: 8 }}>out of {total}</Text>
+    </View>
+  </View>
+);

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { View, StyleSheet } from "@react-pdf/renderer";
+import { ModuleScore } from "@/interfaces/module.scores";
+import { RadialResult } from "./radial.result";
+interface Props {
+  testDetails: ModuleScore[];
+}
+
+const customStyles = StyleSheet.create({
+  container: { display: "flex", flexDirection: "row", gap: 30 },
+});
+
+export const SkillExamDetails = ({ testDetails }: Props) => (
+  <View style={customStyles.container}>
+    {testDetails.map((detail) => {
+      const { module } = detail;
+      return <RadialResult key={module} {...detail} />;
+    })}
+  </View>
+);

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

@@ -0,0 +1,301 @@
+/* eslint-disable jsx-a11y/alt-text */
+import React from "react";
+import {
+  Document,
+  Page,
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  Font,
+} from "@react-pdf/renderer";
+import { styles } from "./styles";
+import TestReportFooter from "./test.report.footer";
+import { StudentData } from "@/interfaces/module.scores";
+import ProgressBar from "./progress.bar";
+Font.registerHyphenationCallback((word) => [word]);
+
+interface Props {
+  date: string;
+  name: string;
+  email: string;
+  id: string;
+  gender?: string;
+  summary: string;
+  logo: string;
+  qrcode: string;
+  renderDetails: React.ReactNode;
+  title: string;
+  numberOfStudents: number;
+  institution: string;
+  studentsData: StudentData[];
+  showLevel: boolean;
+  summaryPNG: string;
+  summaryScore: string;
+  groupScoreSummary: any[];
+  passportId: string;
+}
+
+const customStyles = StyleSheet.create({
+  tableCellHighlight: {
+    backgroundColor: "#4f4969",
+    color: "#bc9970",
+  },
+  table: {
+    display: "flex",
+    flexDirection: "column",
+    // maxWidth: "600px",
+    // margin: "0 auto",
+    // borderCollapse: 'collapse',
+  },
+  tableRow: {
+    display: "flex",
+    flexDirection: "row",
+  },
+  tableHeader: {
+    fontWeight: "bold",
+    backgroundColor: "#f2f2f2",
+  },
+  tableCell: {
+    flex: 1,
+    padding: "8px",
+    textAlign: "left",
+    wordBreak: "break-all",
+  },
+});
+
+const GroupTestReport = ({
+  title,
+  date,
+  name,
+  email,
+  id,
+  gender,
+  summary,
+  logo,
+  qrcode,
+  renderDetails,
+  numberOfStudents,
+  institution,
+  studentsData,
+  showLevel,
+  summaryPNG,
+  summaryScore,
+  groupScoreSummary,
+  passportId,
+}: Props) => {
+  const defaultTextStyle = [styles.textFont, { fontSize: 8 }];
+  return (
+    <Document>
+      <Page style={styles.body}>
+        <View style={styles.alignRightRow}>
+          <Image src={logo} fixed style={styles.image64} />
+        </View>
+        <View style={styles.titleView}>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              styles.textUnderline,
+              styles.title,
+              { fontSize: 14 },
+            ]}
+          >
+            {title}
+          </Text>
+        </View>
+        <View style={styles.textMargin}>
+          <Text style={defaultTextStyle}>Date of Test: {date}</Text>
+        </View>
+        <Text style={[styles.textFont, styles.textBold, { fontSize: 11 }]}>
+          Candidate Information:
+        </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>
+          <Text style={defaultTextStyle}>
+            Total Number of Students: {numberOfStudents}
+          </Text>
+          <Text style={defaultTextStyle}>Institution: {institution}</Text>
+        </View>
+        <View style={{ flex: 1 }}>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              { fontSize: 12 },
+            ]}
+          >
+            Group Test Details:
+          </Text>
+          <View>{renderDetails}</View>
+        </View>
+        <View>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              { fontSize: 12 },
+            ]}
+          >
+            Group Overall Performance Summary
+          </Text>
+          <View style={{ display: "flex", flexDirection: "row", gap: 16 }}>
+            <View style={{ flex: 1 }}>
+              <Text style={[styles.textFont, { fontSize: 8 }]}>{summary}</Text>
+            </View>
+            <View style={[styles.textFont, styles.radialContainer]}>
+              <Image src={summaryPNG} style={styles.image64}></Image>
+              <View style={[styles.textColor, styles.radialResultContainer]}>
+                <Text style={styles.textBold}>{summaryScore}</Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View style={[{ paddingTop: 30 }, styles.separator]}></View>
+        <View>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              styles.textUnderline,
+              { fontSize: 12, paddingTop: 10 },
+            ]}
+          >
+            Group Score Summary
+          </Text>
+          <View
+            style={{
+              paddingTop: 10,
+              gap: 8,
+            }}
+          >
+            <View
+              style={[
+                customStyles.table,
+                styles.textFont,
+                { width: "100%", fontSize: "8px" },
+              ]}
+            >
+              {groupScoreSummary.map(({ label, percent, description }) => (
+                <View
+                  style={[
+                    customStyles.tableRow,
+                    {
+                      width: "100%",
+                      alignItems: "center",
+                      justifyContent: "center",
+                    },
+                  ]}
+                  key={label}
+                >
+                  <Text style={customStyles.tableCell}>{label}</Text>
+                  <View style={[customStyles.tableCell, { flex: 2 }]}>
+                    <ProgressBar
+                      width={200}
+                      height={18}
+                      backgroundColor="#fab7b0"
+                      progressColor="#cc5b55"
+                      percentage={percent}
+                    />
+                  </View>
+                  <Text style={[customStyles.tableCell, { maxWidth: "48px" }]}>
+                    {percent}%
+                  </Text>
+                  <Text style={customStyles.tableCell}>{description}</Text>
+                </View>
+              ))}
+            </View>
+          </View>
+          <View style={styles.alignRightRow}>
+            <Image src={qrcode} style={styles.qrcode} />
+          </View>
+        </View>
+        <View style={[{ paddingBottom: 30 }, styles.separator]}></View>
+        <View style={{ flexGrow: 1 }}></View>
+        <TestReportFooter />
+      </Page>
+      <Page style={styles.body}>
+        <View
+          style={[
+            customStyles.table,
+            styles.textFont,
+            { border: "1px solid #ccc", width: "100%", fontSize: "8px" },
+          ]}
+        >
+          <View
+            style={[
+              customStyles.tableRow,
+              customStyles.tableHeader,
+              customStyles.tableCellHighlight,
+              { borderBottom: "1px solid #ccc" },
+            ]}
+          >
+            <Text style={[customStyles.tableCell, { maxWidth: "24px" }]}>
+              Sr
+            </Text>
+            <Text style={customStyles.tableCell}>Candidate Name</Text>
+            <Text style={customStyles.tableCell}>Email ID</Text>
+            <Text style={[customStyles.tableCell, { maxWidth: "48px" }]}>
+              Gender
+            </Text>
+            <Text style={[customStyles.tableCell, { maxWidth: "64px" }]}>
+              Date of test
+            </Text>
+            <Text style={[customStyles.tableCell, { maxWidth: "48px" }]}>
+              Result
+            </Text>
+            {showLevel && <Text style={customStyles.tableCell}>Level</Text>}
+          </View>
+          {studentsData.map(
+            ({ id, name, email, gender, date, result, level }, index) => (
+              <View
+                style={[
+                  customStyles.tableRow,
+                  { borderBottom: "1px solid #ccc" },
+                ]}
+                key={id}
+              >
+                <Text
+                  style={[
+                    customStyles.tableCell,
+                    customStyles.tableCellHighlight,
+                    { maxWidth: "24px" },
+                  ]}
+                >
+                  {index + 1}
+                </Text>
+                <Text style={customStyles.tableCell}>{name}</Text>
+                <Text style={customStyles.tableCell}>{email}</Text>
+                <Text style={[customStyles.tableCell, { maxWidth: "48px" }]}>
+                  {gender}
+                </Text>
+                <Text style={[customStyles.tableCell, { maxWidth: "64px" }]}>
+                  {date}
+                </Text>
+                <Text style={[customStyles.tableCell, { maxWidth: "48px" }]}>
+                  {result}
+                </Text>
+                {showLevel && (
+                  <Text style={customStyles.tableCell}>{level}</Text>
+                )}
+              </View>
+            )
+          )}
+        </View>
+
+        <View style={{ flexGrow: 1 }}></View>
+        <TestReportFooter />
+      </Page>
+    </Document>
+  );
+};
+
+export default GroupTestReport;

src/exams/pdf/progress.bar.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { View, StyleSheet } from "@react-pdf/renderer";
+
+const styles = StyleSheet.create({
+  progressBar: {
+    borderRadius: 16,
+    overflow: "hidden",
+  },
+  progressBarPerc: {
+    height: "100%",
+    zIndex: 1,
+  },
+});
+
+interface Props {
+	width: number;
+	height: number;
+    backgroundColor: string;
+    progressColor: string;
+    percentage: number;
+}
+
+const ProgressBar = ({
+  width,
+  height,
+  backgroundColor,
+  progressColor,
+  percentage,
+}: Props) => {
+  return (
+    <View
+      style={[
+        {
+          width,
+          height,
+          backgroundColor,
+        },
+        styles.progressBar,
+      ]}
+    >
+      <View
+        style={[
+          { width: `${percentage}%`, backgroundColor: progressColor },
+          styles.progressBarPerc,
+        ]}
+      ></View>
+    </View>
+  );
+};
+
+export default ProgressBar;

src/exams/pdf/styles.ts

@@ -0,0 +1,75 @@
+import { StyleSheet } from "@react-pdf/renderer";
+
+export const styles = StyleSheet.create({
+  body: {
+    paddingTop: 10,
+    paddingBottom: 20,
+    paddingHorizontal: 35,
+  },
+  titleView: {
+    display: "flex",
+    // flex: 1,
+    alignItems: "center",
+  },
+  title: {
+    textTransform: "uppercase",
+  },
+  textMargin: {
+    marginVertical: "8px",
+  },
+  separator: {
+    width: "100%",
+    borderBottom: "1px solid #89b0c2",
+  },
+  textFont: {
+    fontFamily: "Helvetica",
+  },
+  textBold: {
+    fontFamily: "Helvetica-Bold",
+    fontWeight: "bold",
+  },
+  textNormal: {
+    fontWeight: "normal",
+  },
+  textColor: {
+    color: "#4e4969",
+  },
+  textUnderline: {
+    textDecoration: "underline",
+  },
+  spacedRow: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  alignRightRow: {
+    display: "flex",
+    flexDirection: "row-reverse",
+  },
+  image64: {
+    height: "64px",
+    width: "64px",
+  },
+  qrcode: {
+    width: "80px",
+    height: "80px",
+  },
+  radialContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    position: "relative",
+  },
+  radialResultContainer: {
+    display: "flex",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: 10,
+    gap: 8,
+  },
+});

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

@@ -0,0 +1,60 @@
+import React from "react";
+import { styles } from "./styles";
+import { View, Text } from "@react-pdf/renderer";
+
+const TestReportFooter = () => (
+  <View
+    style={[
+      {
+        paddingTop: 30,
+        fontSize: 5,
+        position: "absolute",
+        bottom: 30,
+        left: 35,
+        right: 35,
+      },
+      styles.textFont,
+    ]}
+  >
+    <View style={[styles.spacedRow, styles.textMargin]}>
+      <View>
+        <Text style={styles.textBold}>Validity</Text>
+        <Text>
+          This report remains valid for a duration of three months from the test
+          date.
+        </Text>
+      </View>
+      <View>
+        <Text style={styles.textBold}>Confidential – <Text style={[styles.textFont, styles.textNormal]}>circulated for concern people</Text></Text>
+      </View>
+    </View>
+    <View style={{ paddingTop: 10 }}>
+      <Text style={styles.textBold}>Declaration</Text>
+      <Text style={{ paddingTop: 5 }}>
+        We hereby declare that exam results on our platform, assessed by AI, are
+        not the sole determinants of candidates&apos; English proficiency
+        levels. While EnCoach provides feedback based on assessments, we
+        recognize that language proficiency encompasses practical application,
+        cultural understanding, and real-life communication. We urge users to
+        consider exam results as a measure of progress and improvement, and we
+        continuously enhance our system to ensure accuracy and reliability.
+      </Text>
+    </View>
+    <View style={[styles.textColor, { paddingTop: 5 }]}>
+      <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 }) =>
+            `${pageNumber} / ${totalPages}`
+          }
+          fixed
+        />
+      </View>
+    </View>
+  </View>
+);
+
+export default TestReportFooter;

src/exams/pdf/test.report.tsx

@@ -0,0 +1,174 @@
+/* eslint-disable jsx-a11y/alt-text */
+import React from "react";
+import { Document, Page, View, Text, Image } from "@react-pdf/renderer";
+import { ModuleScore } from "@/interfaces/module.scores";
+import { styles } from "./styles";
+
+import { StyleSheet } from "@react-pdf/renderer";
+import TestReportFooter from "./test.report.footer";
+const customStyles = StyleSheet.create({
+  testDetails: {
+    display: "flex",
+    gap: 4,
+  },
+});
+
+interface Props {
+  date: string;
+  name: string;
+  email: string;
+  id: string;
+  gender?: string;
+  testDetails: ModuleScore[];
+  summary: string;
+  logo: string;
+  qrcode: string;
+  renderDetails: React.ReactNode;
+  title: string;
+  summaryPNG: string;
+  summaryScore: string;
+  passportId: string;
+}
+
+const TestReport = ({
+  title,
+  date,
+  name,
+  email,
+  id,
+  gender,
+  testDetails,
+  summary,
+  logo,
+  qrcode,
+  renderDetails,
+  summaryPNG,
+  summaryScore,
+  passportId,
+}: Props) => {
+  const defaultTextStyle = [styles.textFont, { fontSize: 8 }];
+  const defaultSkillsTextStyle = [styles.textFont, { fontSize: 8 }];
+  const defaultSkillsTitleStyle = [
+    styles.textFont,
+    styles.textColor,
+    styles.textBold,
+    { fontSize: 7 },
+  ];
+  return (
+    <Document>
+      <Page style={styles.body}>
+        <View style={styles.alignRightRow}>
+          <Image src={logo} fixed style={styles.image64} />
+        </View>
+        <View style={styles.titleView}>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              styles.textUnderline,
+              styles.title,
+              { fontSize: 14 },
+            ]}
+          >
+            {title}
+          </Text>
+        </View>
+        <View style={styles.textMargin}>
+          <Text style={defaultTextStyle}>Date of Test: {date}</Text>
+        </View>
+        <Text style={[styles.textFont, styles.textBold, { fontSize: 11 }]}>
+          Candidate Information:
+        </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>
+        </View>
+        <View style={{ height: "120px" }}>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              { fontSize: 12 },
+            ]}
+          >
+            Test Details:
+          </Text>
+          <View>{renderDetails}</View>
+        </View>
+        <View>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              { fontSize: 12 },
+            ]}
+          >
+            Performance Summary
+          </Text>
+          <View style={{ display: "flex", flexDirection: "row", gap: 16 }}>
+            <View style={{ flex: 1 }}>
+              <Text style={[styles.textFont, { fontSize: 8 }]}>{summary}</Text>
+            </View>
+            <View style={[styles.textFont, styles.radialContainer]}>
+              <Image src={summaryPNG} style={styles.image64}></Image>
+              <View style={[styles.textColor, styles.radialResultContainer]}>
+                <Text style={styles.textBold}>{summaryScore}</Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View style={[{ paddingTop: 30 }, styles.separator]}></View>
+        <TestReportFooter />
+      </Page>
+      <Page style={styles.body}>
+        <View>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              styles.textUnderline,
+              { fontSize: 12, paddingTop: 10 },
+            ]}
+          >
+            Skills Feedback
+          </Text>
+          <View
+            style={{
+              paddingTop: 10,
+              gap: 8,
+            }}
+          >
+            {testDetails
+              .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>
+              ))}
+          </View>
+          <View style={styles.alignRightRow}>
+            <Image src={qrcode} style={styles.qrcode} />
+          </View>
+        </View>
+        <View style={[{ paddingBottom: 30 }, styles.separator]}></View>
+        <View style={{ flexGrow: 1 }}></View>
+        <TestReportFooter />
+      </Page>
+    </Document>
+  );
+};
+
+export default TestReport;

src/firebase/index.ts

@@ -1,5 +1,6 @@
 import {initializeApp} from "firebase/app";
 import * as admin from "firebase-admin/app";
+import { getStorage } from "firebase/storage";
 
 const serviceAccount = require("@/constants/serviceAccountKey.json");
 
@@ -10,7 +11,6 @@ const firebaseConfig = {
 	storageBucket: process.env.FIREBASE_STORAGE_BUCKET || "",
 	messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID || "",
 	appId: process.env.FIREBASE_APP_ID || "",
-	measurementId: process.env.FIREBASE_MEASUREMENT_ID || "",
 };
 
 export const app = initializeApp(firebaseConfig, Math.random().toString());
@@ -20,3 +20,4 @@ export const adminApp = admin.initializeApp(
 	},
 	Math.random().toString(),
 );
+export const storage = getStorage(app);

src/hooks/useListSearch.tsx

@@ -0,0 +1,48 @@
+import {useState, useMemo} from 'react';
+import Input from "@/components/Low/Input";
+
+/*fields example = [
+    ['id'],
+    ['companyInformation', 'companyInformation', 'name']
+]*/
+
+
+const getFieldValue = (fields: string[], data: any): string => {
+    if(fields.length === 0) return data;
+    const [key, ...otherFields] = fields;
+
+    if(data[key]) return getFieldValue(otherFields, data[key]);
+    return data;
+}
+
+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/usePDFDownload.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import axios from "axios";
+import { toast } from "react-toastify";
+import { BsFilePdf } from "react-icons/bs";
+
+type DownloadingPdf = {
+  [key: string]: boolean;
+};
+
+type PdfEndpoint = "stats" | "assignments";
+
+export const usePDFDownload = (endpoint: PdfEndpoint) => {
+  const [downloadingPdf, setDownloadingPdf] = React.useState<DownloadingPdf>(
+    {}
+  );
+
+  const triggerDownload = async (id: string) => {
+    try {
+      setDownloadingPdf((prev) => ({ ...prev, [id]: true }));
+      const res = await axios.post(`/api/${endpoint}/${id}/export`);
+      toast.success("Report ready!");
+      const link = document.createElement("a");
+      link.href = res.data;
+      // download should have worked but there are some CORS issues
+      // https://firebase.google.com/docs/storage/web/download-files#cors_configuration
+      // link.download="report.pdf";
+      link.target = "_blank";
+      link.rel = "noreferrer";
+      link.click();
+      setDownloadingPdf((prev) => ({ ...prev, [id]: false }));
+    } catch (err) {
+      toast.error("Failed to display the report!");
+      console.error(err);
+      setDownloadingPdf((prev) => ({ ...prev, [id]: false }));
+    }
+  };
+
+  const renderIcon = (
+    id: string,
+    downloadClasses: string,
+    loadingClasses: string
+  ) => {
+    if (downloadingPdf[id]) {
+      return (
+        <span className={`${loadingClasses} loading loading-infinity w-6`} />
+      );
+    }
+    return (
+      <BsFilePdf
+        className={`${downloadClasses} text-2xl cursor-pointer`}
+        onClick={(e) => {
+          e.stopPropagation();
+          triggerDownload(id);
+        }}
+      />
+    );
+  };
+
+  return renderIcon;
+};

src/hooks/usePackages.tsx

@@ -0,0 +1,22 @@
+import {Exam} from "@/interfaces/exam";
+import {Package} from "@/interfaces/paypal";
+import axios from "axios";
+import {useEffect, useState} from "react";
+
+export default function usePackages() {
+	const [packages, setPackages] = useState<Package[]>([]);
+	const [isLoading, setIsLoading] = useState(false);
+	const [isError, setIsError] = useState(false);
+
+	const getData = () => {
+		setIsLoading(true);
+		axios
+			.get<Package[]>("/api/packages")
+			.then((response) => setPackages(response.data))
+			.finally(() => setIsLoading(false));
+	};
+
+	useEffect(getData, []);
+
+	return {packages, isLoading, isError, reload: getData};
+}

src/hooks/usePaymentStatusUsers.tsx

@@ -0,0 +1,20 @@
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { PaymentsStatus } from "@/interfaces/user.payments";
+
+export default function usePaymentStatusUsers() {
+  const [{ pending, done }, setStatus] = useState<PaymentsStatus>({
+    pending: [],
+    done: [],
+  });
+
+  const getData = () => {
+    axios.get<PaymentsStatus>("/api/payments/assigned").then((response) => {
+      setStatus(response.data);
+    });
+  };
+
+  useEffect(getData, []);
+
+  return { pending, done };
+}

src/hooks/usePayments.tsx

@@ -0,0 +1,24 @@
+import {Payment} from "@/interfaces/paypal";
+import {Group, User} from "@/interfaces/user";
+import axios from "axios";
+import {useEffect, useState} from "react";
+
+export default function usePayments() {
+	const [payments, setPayments] = useState<Payment[]>([]);
+	const [isLoading, setIsLoading] = useState(false);
+	const [isError, setIsError] = useState(false);
+
+	const getData = () => {
+		setIsLoading(true);
+		axios
+			.get<Payment[]>("/api/payments")
+			.then((response) => {
+				return setPayments(response.data);
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	useEffect(getData, []);
+
+	return {payments, isLoading, isError, reload: getData};
+}

src/hooks/useStats.tsx

@@ -10,7 +10,7 @@ export default function useStats(id?: string) {
 	useEffect(() => {
 		setIsLoading(true);
 		axios
-			.get<Stat[]>(!id ? "/api/stats" : `/api/stats/${id}`)
+			.get<Stat[]>(!id ? "/api/stats" : `/api/stats/user/${id}`)
 			.then((response) => setStats(response.data))
 			.finally(() => setIsLoading(false));
 	}, [id]);

src/hooks/useUser.tsx

@@ -15,10 +15,10 @@ export default function useUser({redirectTo = "", redirectIfFound = false} = {})
 		if (!redirectTo || !user) return;
 
 		if (
-			// If redirectTo is set, redirect if the user was not found.
-			(redirectTo && !redirectIfFound && (!user || (user && !user.isVerified))) ||
 			// If redirectIfFound is also set, redirect if the user was found
-			(redirectIfFound && user && user.isVerified)
+			(redirectIfFound && user && user.isVerified) ||
+			// If redirectTo is set, redirect if the user was not found.
+			(redirectTo && !redirectIfFound && (!user || (user && !user.isVerified)))
 		) {
 			Router.push(redirectTo);
 		}

src/interfaces/exam.ts

@@ -1,20 +1,24 @@
 import {Module} from ".";
 
 export type Exam = ReadingExam | ListeningExam | WritingExam | SpeakingExam | LevelExam;
+export type Variant = "diagnostic" | "partial";
 
 export interface ReadingExam {
-	parts: {
+	parts: ReadingPart[];
-		text: {
-			title: string;
-			content: string;
-		};
-		exercises: Exercise[];
-	}[];
 	id: string;
 	module: "reading";
 	minTimer: number;
 	type: "academic" | "general";
 	isDiagnostic: boolean;
+	variant?: Variant;
+}
+
+export interface ReadingPart {
+	text: {
+		title: string;
+		content: string;
+	};
+	exercises: Exercise[];
 }
 
 export interface LevelExam {
@@ -23,23 +27,28 @@ export interface LevelExam {
 	exercises: Exercise[];
 	minTimer: number;
 	isDiagnostic: boolean;
+	variant?: Variant;
 }
 
 export interface ListeningExam {
-	parts: {
+	parts: ListeningPart[];
-		audio: {
-			source: string;
-			repeatableTimes: number; // *The amount of times the user is allowed to repeat the audio, 0 for unlimited
-		};
-		exercises: Exercise[];
-	}[];
 	id: string;
 	module: "listening";
 	minTimer: number;
 	isDiagnostic: boolean;
+	variant?: Variant;
+}
+
+export interface ListeningPart {
+	audio: {
+		source: string;
+		repeatableTimes: number; // *The amount of times the user is allowed to repeat the audio, 0 for unlimited
+	};
+	exercises: Exercise[];
 }
 
 export interface UserSolution {
+	id?: string;
 	solutions: any[];
 	module?: Module;
 	exam?: string;
@@ -58,6 +67,7 @@ export interface WritingExam {
 	exercises: Exercise[];
 	minTimer: number;
 	isDiagnostic: boolean;
+	variant?: Variant;
 }
 
 interface WordCounter {
@@ -71,6 +81,7 @@ export interface SpeakingExam {
 	exercises: Exercise[];
 	minTimer: number;
 	isDiagnostic: boolean;
+	variant?: Variant;
 }
 
 export type Exercise =
@@ -87,7 +98,21 @@ export interface Evaluation {
 	comment: string;
 	overall: number;
 	task_response: {[key: string]: number};
+	misspelled_pairs?: {correction: string | null; misspelled: string}[];
 }
+
+interface InteractiveSpeakingEvaluation extends Evaluation {
+	perfect_answer_1?: string;
+	perfect_answer_2?: string;
+	perfect_answer_3?: string;
+}
+
+interface CommonEvaluation extends Evaluation {
+	perfect_answer?: string;
+	perfect_answer_1?: string;
+	fixed_text?: string;
+}
+
 export interface WritingExercise {
 	id: string;
 	type: "writing";
@@ -102,7 +127,7 @@ export interface WritingExercise {
 	userSolutions: {
 		id: string;
 		solution: string;
-		evaluation?: Evaluation;
+		evaluation?: CommonEvaluation;
 	}[];
 }
 
@@ -116,7 +141,7 @@ export interface SpeakingExercise {
 	userSolutions: {
 		id: string;
 		solution: string;
-		evaluation?: Evaluation;
+		evaluation?: CommonEvaluation;
 	}[];
 }
 
@@ -129,7 +154,7 @@ export interface InteractiveSpeakingExercise {
 	userSolutions: {
 		id: string;
 		solution: {question: string; answer: string}[];
-		evaluation?: Evaluation;
+		evaluation?: InteractiveSpeakingEvaluation;
 	}[];
 }
 

src/interfaces/module.scores.ts

@@ -0,0 +1,22 @@
+import {Module} from "@/interfaces";
+
+export interface ModuleScore {
+    score: number;
+    total: number;
+    code: Module;
+    module: Module | 'Overall';
+    png?: string,
+    evaluation?: string,
+    suggestions?: string,
+  }
+
+  export interface StudentData {
+    id: string;
+    name: string;
+    email: string;
+    gender: string;
+    date: string;
+    result: string;
+    level?: string;
+    bandScore: number;
+  }

src/interfaces/paypal.ts

@@ -0,0 +1,37 @@
+export interface TokenSuccess {
+	scope: string;
+	access_token: string;
+	token_type: string;
+	app_id: string;
+	expires_in: number;
+	nonce: string;
+}
+
+export interface TokenError {
+	error: string;
+	error_description: string;
+}
+
+export interface Package {
+	id: string;
+	currency: string;
+	duration: number;
+	duration_unit: DurationUnit;
+	price: number;
+}
+
+export type DurationUnit = "weeks" | "days" | "months" | "years";
+
+export interface Payment {
+	id: string;
+	corporate: string;
+	agent?: string;
+	agentCommission: number;
+	agentValue: number;
+	currency: string;
+	value: number;
+	isPaid: boolean;
+	date: Date | string;
+	corporateTransfer?: string;
+	commissionTransfer?: string;
+}