Improved the table

Used main branch as base branch in the last time

Approved-by: Tiago Ribeiro

.gitignore

@@ -1,3 +1,5 @@
+src/constants/test_firebase.json
+
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies

.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

@@ -1,7 +1,57 @@
 /** @type {import('next').NextConfig} */
+const websiteUrl = process.env.NODE_ENV === 'production' ? "https://encoach.com" : "http://localhost:3000";
 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: websiteUrl},
+					{
+						key: "Access-Control-Allow-Methods",
+						value: "GET",
+					},
+					{
+						key: "Access-Control-Allow-Headers",
+						value: "Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date",
+					},
+				],
+			},
+			{
+				source: "/api/tickets",
+				headers: [
+					{key: "Access-Control-Allow-Credentials", value: "false"},
+					{key: "Access-Control-Allow-Origin", value: websiteUrl},
+					{
+						key: "Access-Control-Allow-Methods",
+						value: "POST,OPTIONS",
+					},
+					{
+						key: "Access-Control-Allow-Headers",
+						value: "Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date",
+					},
+				],
+			},
+			{
+				source: "/api/users/agents",
+				headers: [
+					{key: "Access-Control-Allow-Credentials", value: "false"},
+					{key: "Access-Control-Allow-Origin", value: websiteUrl},
+					{
+						key: "Access-Control-Allow-Methods",
+						value: "POST,OPTIONS",
+					},
+					{
+						key: "Access-Control-Allow-Headers",
+						value: "Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date",
+					},
+				],
+			},
+		];
+	},
 };
 
 module.exports = nextConfig;

package.json

@@ -11,12 +11,15 @@
   },
   "dependencies": {
     "@beam-australia/react-env": "^3.1.1",
+    "@dnd-kit/core": "^6.1.0",
+    "@firebase/util": "^1.9.7",
     "@headlessui/react": "^1.7.13",
     "@mdi/js": "^7.1.96",
     "@mdi/react": "^1.6.1",
     "@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",
@@ -41,16 +44,20 @@
     "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",
@@ -61,8 +68,10 @@
     "react-select": "^5.7.5",
     "react-string-replace": "^1.1.0",
     "react-toastify": "^9.1.2",
+    "react-tooltip": "^5.27.1",
     "react-xarrows": "^2.0.2",
-    "short-unique-id": "^5.0.2",
+    "read-excel-file": "^5.7.1",
+    "short-unique-id": "5.0.2",
     "stripe": "^13.10.0",
     "swr": "^2.1.3",
     "tailwind-scrollbar-hide": "^1.1.7",
@@ -73,11 +82,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",
@@ -85,7 +97,6 @@
     "autoprefixer": "^10.4.13",
     "husky": "^8.0.3",
     "postcss": "^8.4.21",
-    "tailwindcss": "^3.2.4",
-    "types/": "paypal/react-paypal-js"
+    "tailwindcss": "^3.2.4"
   }
 }

public/mat-icon-info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>

src/components/AIDetection.tsx

@@ -0,0 +1,193 @@
+import Image from "next/image";
+import clsx from "clsx";
+import RadialProgressBar from "./RadialProgressBar";
+import { AIDetectionAttributes } from "@/interfaces/exam";
+import { Tooltip } from 'react-tooltip';
+import SegmentedProgressBar from "./SegmentedProgressBar";
+
+
+// Colors and texts scrapped from gpt's zero react bundle
+const AIDetection: React.FC<AIDetectionAttributes> = ({ predicted_class, confidence_category, class_probabilities, sentences }) => {
+    const probabilityTooltipContent = `
+        GTP's Zero deep learning model predicts the <br/> 
+        probability this text has been entirely <br/> 
+        generated by AI. For instance, a 40% AI <br/> 
+        probability does not indicate that the text<br/> 
+        contains 40% AI-written content. Rather, it<br/> 
+        indicates the text is more likely to be partially<br/> 
+        human written than be entirely AI-written.
+    `;
+    const confidenceTooltipContent = `
+        Confidence scores are a safeguard to better<br/> 
+        understand AI identification results. GTP Zero<br/>
+        trained it's deep learning model on a diverse<br/>
+        dataset of millions of human and AI-written<br/>
+        documents. Green scores indicate that you can scan<br/>
+        with confidence that the model has classified<br/>
+        many similar documents with high accuracy.<br/>
+        Red scores indicate that this text is dissimilar<br/>
+        to the ones in their training set, which can impact<br/>
+        the model's accuracy, and to proceed with caution.
+    `;
+    const confidenceKeywords = ["moderately", "highly", "confident", "uncertain"];
+    var confidence = {
+        low: {
+            ai: "GPT Zero is uncertain about this text. If GPT Zero had to classify it, it would be considered",
+            human: "GPT Zero is uncertain about this text. If GPT Zero had to classify it, it would likely be considered",
+            mixed: "GPT Zero is uncertain about this text. If GPT Zero had to classify it, it would likely be a"
+        },
+        medium: {
+            ai: "GPT Zero is moderately confident this text was",
+            human: "GPT Zero is moderately confident this text is entirely",
+            mixed: "GPT Zero is moderately confident this text is a"
+        },
+        high: {
+            ai: "GPT Zero is highly confident this text was",
+            human: "GPT Zero is highly confident this text is entirely",
+            mixed: "GPT Zero is highly confident this text is a"
+        }
+    }
+    var classPrediction = {
+        ai: {
+            background: "bg-ai-detection-result-ai-bg",
+            color: "text-ai-detection-result-ai",
+            text: "ai generated"
+        },
+        mixed: {
+            background: "bg-ai-detection-result-mixed-bg",
+            color: "text-ai-detection-result-mixed",
+            text: "mix of ai and human"
+        },
+        human: {
+            background: "bg-ai-detection-result-human-bg",
+            color: "text-ai-detection-result-human",
+            text: "human"
+        }
+    }
+    const segments = [
+        { percentage: Math.round(class_probabilities["human"] * 100), subtitle: 'human', color: "ai-detection-result-human" },
+        { percentage: Math.round(class_probabilities["mixed"] * 100), subtitle: 'mixed', color: "ai-detection-result-mixed" },
+        { percentage: Math.round(class_probabilities["ai"] * 100), subtitle: 'ai', color: "ai-detection-result-ai" }
+    ];
+    const styleConfidenceText = (text: string): [string, string[]] => {
+        const keywords: string[] = [];
+        const styledText = text.split(" ").map(word => {
+            if (confidenceKeywords.includes(word)) {
+                keywords.push(word);
+                return `<span style="font-weight: 500; text-decoration: underline;">${word}</span>`;
+            }
+            return word
+        }).join(" ");
+        return [styledText, keywords];
+    };
+    const confidenceText = confidence[confidence_category][predicted_class];
+    const [styledText, keywords] = styleConfidenceText(confidenceText);
+    const tooltipStyle = {
+        "backgroundColor": "rgb(255, 255, 255)",
+        "color": "#8992B1",
+        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+        borderRadius: '0.125rem'
+    }
+    const highestProbability = Math.max(class_probabilities["ai"], class_probabilities["human"], class_probabilities["mixed"]);
+    const spanTextColor = highestProbability === class_probabilities["ai"]
+        ? "#f4bf4f"
+        : highestProbability === class_probabilities["human"]
+            ? "#50c08a"
+            : "#93aafb";
+    let spanClassName = highestProbability === class_probabilities["ai"]
+        ? "text-ai-detection-result-ai"
+        : highestProbability === class_probabilities["human"]
+            ? "text-ai-detection-result-human"
+            : "text-ai-detection-result-mixed";
+    spanClassName = `${spanClassName} font-bold text-lg`
+    const percentage = Math.round(highestProbability * 100)
+    const hasHighlightedForAI = sentences.some(item => item.highlight_sentence_for_ai);
+    return (
+        <>
+            <Tooltip id="probability-tooltip" className="z-50 bg-white shadow-md rounded-sm" style={tooltipStyle} />
+            <Tooltip id="confidence-tooltip" className="z-50 bg-white shadow-md rounded-sm" style={tooltipStyle} />
+            <div className="flex flex-col bg-white p-6 rounded-lg shadow-lg gap-16">
+                <h1 className="text-lg font-semibold">GPT Zero AI Detection Results</h1>
+                <div className="flex flex-row -md:flex-col -lg:gap-0 -xl:gap-10 gap-20 items-stretch -md:items-center">
+                    <div className="flex -md:w-5/6 w-1/2 justify-center">
+                        <div className="flex flex-col border rounded-xl">
+                            <h1 className="border-b p-6 font-medium">Text Classification</h1>
+                            <div className="flex flex-row gap-8 items-center p-6">
+                                <RadialProgressBar
+                                    percentage={percentage}
+                                    text={predicted_class}
+                                    color={spanTextColor}
+                                    spanClassName={spanClassName}
+                                />
+                                <div className="flex flex-col gap-1 text-sm">
+                                    <div className="flex flex-row items-center">
+                                        <span className="mr-2 text-ai-detection-result-ai-text font-semibold text-xl">
+                                            {`${Math.round(class_probabilities["ai"] * 100)}%`}
+                                        </span>
+                                        <span className="text-sm -md:text-xs text-ai-detection-text">Probability AI generated</span>
+                                        <a data-tooltip-id="probability-tooltip" data-tooltip-html={probabilityTooltipContent} className='ml-1 flex items-center justify-center'>
+                                            <Image src="/mat-icon-info.svg" width={24} height={24} alt="Probability Tooltip" />
+                                        </a>
+                                    </div>
+                                    <div className="flex flex-row items-center gap-1">
+                                        <div className={clsx(
+                                            "rounded-full w-3 h-3",
+                                            confidence_category == 'low' ?
+                                                "bg-ai-detection-confidence-low border border-ai-detection-confidence-border" : "bg-ai-detection-confidence-low-transparent"
+                                        )}></div>
+                                        <div className={clsx(
+                                            "rounded-full w-3 h-3",
+                                            confidence_category == 'medium' ?
+                                                "bg-ai-detection-confidence-medium border border-ai-detection-confidence-border" : "bg-ai-detection-confidence-medium-transparent"
+                                        )}></div>
+                                        <div className={clsx(
+                                            "rounded-full w-3 h-3 mr-2",
+                                            confidence_category == 'high' ?
+                                                "bg-ai-detection-confidence-high border border-ai-detection-confidence-border" : "bg-ai-detection-confidence-high-transparent"
+                                        )}></div>
+                                        <span className="text-sm -md:text-xs text-ai-detection-text">{keywords.join(' ')}</span>
+                                        <a data-tooltip-id="confidence-tooltip" data-tooltip-html={confidenceTooltipContent} className='ml-1 flex items-center justify-center'>
+                                            <Image src="/mat-icon-info.svg" width={24} height={24} alt="Probability Tooltip" />
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="flex flex-col border rounded-xl -md:w-5/6 w-2/6">
+                        <h1 className="border-b p-6 font-medium">Probability Breakdown</h1>
+                        <div className="flex items-center w-full h-full">
+                            <SegmentedProgressBar segments={segments} className="w-full px-8 -md:py-8 text-ai-detection-text" />
+                        </div>
+                    </div>
+                </div>
+                <div className="flex flex-col gap-2">
+                    <div className="flex flex-row items-center">
+                        <div dangerouslySetInnerHTML={{ __html: styledText }} className="mr-2"></div>
+                        <div className={clsx(
+                            "flex items-center justify-center p-2 rounded",
+                            classPrediction[predicted_class]['color'],
+                            classPrediction[predicted_class]['background']
+                        )}>
+                            <span className="text-sm">{classPrediction[predicted_class]['text']}</span>
+                        </div>
+                    </div>
+                    {(hasHighlightedForAI && <div>
+                        Sentences that are likely written by AI are <span className="font-semibold bg-ai-detection-highlight">highlighted</span>.
+                    </div>)}
+                </div>
+            </div >
+            <div>
+                {sentences.map((item, index) => (
+                    <span
+                        key={index}
+                        className={item.highlight_sentence_for_ai ? 'bg-ai-detection-highlight' : ''}
+                    >
+                        {item.sentence}{' '}
+                    </span>
+                ))}
+            </div>
+        </>
+    )
+}
+export default AIDetection;

src/components/DemographicInformationInput.tsx

@@ -1,5 +1,5 @@
 import {EmploymentStatus, EMPLOYMENT_STATUS, Gender, User} from "@/interfaces/user";
-import {FormEvent, useState} from "react";
+import {FormEvent, useEffect, useState} from "react";
 import countryCodes from "country-codes-list";
 import {RadioGroup} from "@headlessui/react";
 import Input from "./Low/Input";
@@ -10,6 +10,10 @@ 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";
+import TimezoneSelect from "./Low/TImezoneSelect";
+import moment from "moment";
 
 interface Props {
 	user: User;
@@ -19,9 +23,11 @@ interface 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 [timezone, setTimezone] = useState<string>(moment.tz.guess());
 	const [isLoading, setIsLoading] = useState(false);
 
 	const [companyName, setCompanyName] = useState<string>();
@@ -39,6 +45,8 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
 					gender,
 					employment: user.type === "corporate" ? undefined : employment,
 					position: user.type === "corporate" ? position : undefined,
+					passport_id,
+					timezone,
 				},
 				agentInformation: user.type === "agent" ? {companyName, commercialRegistration} : undefined,
 			})
@@ -62,7 +70,7 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
 			<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}>
 				{user.type === "agent" && (
 					<div className="w-full flex gap-8">
-						<Input type="text" onChange={setCompanyName} name="companyName" label="Company Name" required />
+						<Input type="text" onChange={setCompanyName} name="companyName" label="Corporate Name" required />
 						<Input
 							type="text"
 							onChange={setCommercialRegistration}
@@ -72,78 +80,35 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
 						/>
 					</div>
 				)}
+				<div className="w-full grid grid-cols-2 gap-6">
 					<div className="relative flex flex-col gap-3 w-full">
 						<label className="font-normal text-base text-mti-gray-dim">Country *</label>
 						<CountrySelect value={country} onChange={setCountry} />
 					</div>
 					<Input type="tel" name="phone" label="Phone number" onChange={(e) => setPhone(e)} placeholder="Enter phone number" required />
-				<div className="relative flex flex-col gap-3 w-full">
-					<label className="font-normal text-base text-mti-gray-dim">Gender *</label>
-					<RadioGroup value={gender} onChange={setGender} className="flex flex-row justify-between">
-						<RadioGroup.Option value="male">
-							{({checked}) => (
-								<span
-									className={clsx(
-										"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-										"transition duration-300 ease-in-out",
-										!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
-									)}>
-									Male
-								</span>
-							)}
-						</RadioGroup.Option>
-						<RadioGroup.Option value="female">
-							{({checked}) => (
-								<span
-									className={clsx(
-										"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-										"transition duration-300 ease-in-out",
-										!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
-									)}>
-									Female
-								</span>
-							)}
-						</RadioGroup.Option>
-						<RadioGroup.Option value="other">
-							{({checked}) => (
-								<span
-									className={clsx(
-										"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-										"transition duration-300 ease-in-out",
-										!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
-									)}>
-									Other
-								</span>
-							)}
-						</RadioGroup.Option>
-					</RadioGroup>
 				</div>
+				{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
+					/>
+				)}
+
+				<div className="flex flex-col gap-3 w-full">
+					<label className="font-normal text-base text-mti-gray-dim">Timezone</label>
+					<TimezoneSelect value={timezone} onChange={setTimezone} />
+				</div>
+
+				<GenderInput value={gender} onChange={setGender} />
 				{user.type === "corporate" && (
 					<Input name="position" onChange={setPosition} type="text" label="Position" placeholder="CEO, Head of Marketing..." required />
 				)}
-				{user.type !== "corporate" && (
-					<div className="relative flex flex-col gap-3 w-full">
-						<label className="font-normal text-base text-mti-gray-dim">Employment Status *</label>
-						<RadioGroup value={employment} onChange={setEmployment} className="grid grid-cols-2 items-center gap-4 place-items-center">
-							{EMPLOYMENT_STATUS.map(({status, label}) => (
-								<RadioGroup.Option value={status} key={status}>
-									{({checked}) => (
-										<span
-											className={clsx(
-												"px-6 py-4 w-44 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-												"transition duration-300 ease-in-out",
-												!checked
-													? "bg-white border-mti-gray-platinum"
-													: "bg-mti-purple-light border-mti-purple-dark text-white",
-											)}>
-											{label}
-										</span>
-									)}
-								</RadioGroup.Option>
-							))}
-						</RadioGroup>
-					</div>
-				)}
+				{user.type !== "corporate" && <EmploymentStatusInput value={employment} onChange={setEmployment} />}
 			</form>
 
 			<div className="self-end flex justify-end w-full gap-8 absolute bottom-8 left-0 px-8">

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";
@@ -15,6 +14,7 @@ import {useEffect, useState} from "react";
 import {BsBook, BsChevronDown, BsHeadphones, BsMegaphone, BsPen, BsQuestionSquare} from "react-icons/bs";
 import {toast} from "react-toastify";
 import Button from "./Low/Button";
+import ModuleLevelSelector from "./Medium/ModuleLevelSelector";
 
 interface Props {
 	user: User;
@@ -23,8 +23,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 [desiredLevels, setDesiredLevels] = useState({reading: 9, listening: 9, writing: 9, speaking: 9});
+	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, level: 9});
 
 	const router = useRouter();
 
@@ -37,7 +37,7 @@ export default function Diagnostic({onFinish}: Props) {
 	};
 
 	const selectExam = () => {
-		const examPromises = MODULE_ARRAY.map((module) => getExam(module, true));
+		const examPromises = MODULE_ARRAY.map((module) => getExam(module, true, "partial"));
 
 		Promise.all(examPromises).then((exams) => {
 			if (exams.every((x) => !!x)) {
@@ -52,7 +52,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,
 			})
@@ -91,111 +91,17 @@ export default function Diagnostic({onFinish}: Props) {
 					</div>
 				</div>
 			</div>
+
 			<div className="flex flex-col items-center justify-center gap-8 w-full">
 				<h2 className="font-semibold text-xl">What is your current IELTS level?</h2>
-				<div className="flex flex-col gap-32 w-full mb-20">
-					<div className="grid grid-cols-1 md:grid-cols-2 gap-y-4 gap-x-16 mb-24">
-						<div className="w-full flex flex-col gap-3.5 relative">
-							<span className="text-sm text-mti-gray-dim">
-								<span className="font-bold">Reading</span> level
-							</span>
-							<Menu>
-								<Menu.Button className="w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-between items-center gap-12 bg-white">
-									<BsBook className="text-ielts-reading" size={34} />
-									<span className="text-mti-gray-cool text-sm">
-										{levels.reading === -1 ? "Select your reading level" : `Level ${levels.reading}`}
-									</span>
-									<BsChevronDown className="text-mti-gray-cool" size={12} />
-								</Menu.Button>
-								<Menu.Items className="absolute overflow-y-scroll scrollbar-hide max-h-[230px] origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl">
-									{Object.values(writingMarking).map((x) => (
-										<Menu.Item key={x}>
-											<span
-												onClick={() => setLevels((prev) => ({...prev, reading: x}))}
-												className="w-full py-4 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
-												Level {x}
-											</span>
-										</Menu.Item>
-									))}
-								</Menu.Items>
-							</Menu>
-						</div>
-						<div className="w-full flex flex-col gap-3.5 relative">
-							<span className="text-sm text-mti-gray-dim">
-								<span className="font-bold">Listening</span> level
-							</span>
-							<Menu>
-								<Menu.Button className="w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-between items-center gap-12 bg-white">
-									<BsHeadphones className="text-ielts-listening" size={34} />
-									<span className="text-mti-gray-cool text-sm">
-										{levels.listening === -1 ? "Select your listening level" : `Level ${levels.listening}`}
-									</span>
-									<BsChevronDown className="text-mti-gray-cool" size={12} />
-								</Menu.Button>
-								<Menu.Items className="absolute overflow-y-scroll scrollbar-hide max-h-[230px] origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl">
-									{Object.values(writingMarking).map((x) => (
-										<Menu.Item key={x}>
-											<span
-												onClick={() => setLevels((prev) => ({...prev, listening: x}))}
-												className="w-full py-5 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
-												Level {x}
-											</span>
-										</Menu.Item>
-									))}
-								</Menu.Items>
-							</Menu>
-						</div>
-						<div className="w-full flex flex-col gap-3.5 relative">
-							<span className="text-sm text-mti-gray-dim">
-								<span className="font-bold">Writing</span> level
-							</span>
-							<Menu>
-								<Menu.Button className="w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-between items-center gap-12 bg-white">
-									<BsPen className="text-ielts-writing" size={34} />
-									<span className="text-mti-gray-cool text-sm">
-										{levels.writing === -1 ? "Select your writing level" : `Level ${levels.writing}`}
-									</span>
-									<BsChevronDown className="text-mti-gray-cool" size={12} />
-								</Menu.Button>
-								<Menu.Items className="absolute overflow-y-scroll scrollbar-hide max-h-[230px] origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl">
-									{Object.values(writingMarking).map((x) => (
-										<Menu.Item key={x}>
-											<span
-												onClick={() => setLevels((prev) => ({...prev, writing: x}))}
-												className="w-full py-5 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
-												Level {x}
-											</span>
-										</Menu.Item>
-									))}
-								</Menu.Items>
-							</Menu>
-						</div>
-						<div className="w-full flex flex-col gap-3.5 relative">
-							<span className="text-sm text-mti-gray-dim">
-								<span className="font-bold">Speaking</span> level
-							</span>
-							<Menu>
-								<Menu.Button className="w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-between items-center gap-12 bg-white">
-									<BsMegaphone className="text-ielts-speaking" size={34} />
-									<span className="text-mti-gray-cool text-sm">
-										{levels.speaking === -1 ? "Select your speaking level" : `Level ${levels.speaking}`}
-									</span>
-									<BsChevronDown className="text-mti-gray-cool" size={12} />
-								</Menu.Button>
-								<Menu.Items className="absolute overflow-y-scroll scrollbar-hide max-h-[230px] origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl">
-									{Object.values(writingMarking).map((x) => (
-										<Menu.Item key={x}>
-											<span
-												onClick={() => setLevels((prev) => ({...prev, speaking: x}))}
-												className="w-full py-5 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
-												Level {x}
-											</span>
-										</Menu.Item>
-									))}
-								</Menu.Items>
-							</Menu>
+				<ModuleLevelSelector levels={levels} setLevels={setLevels} />
 			</div>
+
+			<div className="flex flex-col items-center justify-center gap-8 w-full mb-44">
+				<h2 className="font-semibold text-xl">What is your desired IELTS level?</h2>
+				<ModuleLevelSelector levels={desiredLevels} setLevels={setDesiredLevels} />
 			</div>
+
 			<div className="md:self-end flex -md:flex-col justify-between w-full gap-8 absolute bottom-8 left-0 px-4 md:px-8">
 				<div className="w-full tooltip" data-tip="Your screen size is too small to perform a diagnostic test">
 					<Button
@@ -225,7 +131,5 @@ export default function Diagnostic({onFinish}: Props) {
 				</Button>
 			</div>
 		</div>
-			</div>
-		</div>
 	);
 }

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
@@ -77,15 +77,8 @@ export default function FillBlanks({
 	onBack,
 }: FillBlanksExercise & CommonProps) {
 	const [answers, setAnswers] = useState<{id: string; solution: string}[]>(userSolutions);
-	const [currentBlankId, setCurrentBlankId] = useState<string>();
-	const [isDrawerShowing, setIsDrawerShowing] = useState(false);
 
 	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
-	const allBlanks = Array.from(text.match(/({{\d+}})/g) || []).map((x) => x.replaceAll("{", "").replaceAll("}", ""));
-
-	useEffect(() => {
-		setTimeout(() => setIsDrawerShowing(!!currentBlankId), 100);
-	}, [currentBlankId]);
 
 	useEffect(() => {
 		if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
@@ -94,9 +87,17 @@ export default function FillBlanks({
 
 	const calculateScore = () => {
 		const total = text.match(/({{\d+}})/g)?.length || 0;
-		const correct = answers.filter(
-			(x) => solutions.find((y) => x.id.toString() === y.id.toString())?.solution === x.solution.toLowerCase() || false,
-		).length;
+		const correct = answers.filter((x) => {
+			const solution = solutions.find((y) => x.id.toString() === y.id.toString())?.solution.toLowerCase();
+			if (!solution) return false;
+
+			const option = words.find((w) =>
+				typeof w === "string" ? w.toLowerCase() === x.solution.toLowerCase() : w.letter.toLowerCase() === x.solution.toLowerCase(),
+			);
+			if (!option) return false;
+
+			return solution === (typeof option === "string" ? option.toLowerCase() : option.word.toLowerCase());
+		}).length;
 		const missing = total - answers.filter((x) => solutions.find((y) => x.id.toString() === y.id.toString())).length;
 
 		return {total, correct, missing};
@@ -104,49 +105,29 @@ export default function FillBlanks({
 
 	const renderLines = (line: string) => {
 		return (
-			<span className="text-base leading-5">
+			<div className="text-base leading-5">
 				{reactStringReplace(line, /({{\d+}})/g, (match) => {
 					const id = match.replaceAll(/[\{\}]/g, "");
 					const userSolution = answers.find((x) => x.id === id);
 
 					return (
-						<button
+						<input
 							className={clsx(
-								"rounded-full hover:text-white hover:bg-mti-purple transition duration-300 ease-in-out my-1",
-								!userSolution && "w-6 h-6 text-center text-mti-purple-light bg-mti-purple-ultralight",
-								currentBlankId === id && "text-white !bg-mti-purple-light ",
-								userSolution && "px-5 py-2 text-center text-white bg-mti-purple-light",
+								"rounded-full hover:text-white focus:ring-0 focus:outline-none focus:!text-white focus:bg-mti-purple transition duration-300 ease-in-out my-1 px-5 py-2 text-center",
+								!userSolution && "text-center text-mti-purple-light bg-mti-purple-ultralight",
+								userSolution && "px-5 py-2 text-center text-mti-purple-dark bg-mti-purple-ultralight",
 							)}
-							onClick={() => setCurrentBlankId(id)}>
-							{userSolution ? userSolution.solution : id}
-						</button>
+							onChange={(e) => setAnswers((prev) => [...prev.filter((x) => x.id !== id), {id, solution: e.target.value}])}
+							value={userSolution?.solution}></input>
 					);
 				})}
-			</span>
+			</div>
 		);
 	};
 
 	return (
 		<>
-			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
-				{(!!currentBlankId || isDrawerShowing) && (
-					<WordsDrawer
-						key={currentBlankId}
-						blankId={currentBlankId}
-						words={words.map((word) => ({word, isDisabled: allowRepetition ? false : answers.map((x) => x.solution).includes(word)}))}
-						previouslySelectedWord={currentBlankId ? answers.find((x) => x.id === currentBlankId)?.solution : undefined}
-						isOpen={isDrawerShowing}
-						onCancel={() => setCurrentBlankId(undefined)}
-						onAnswer={(solution: string) => {
-							setAnswers((prev) => [...prev.filter((x) => x.id !== currentBlankId), {id: currentBlankId!, solution}]);
-							if (allBlanks.findIndex((x) => x === currentBlankId) + 1 < allBlanks.length) {
-								setCurrentBlankId(allBlanks[allBlanks.findIndex((x) => x === currentBlankId) + 1]);
-								return;
-							}
-							setCurrentBlankId(undefined);
-						}}
-					/>
-				)}
+			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>
@@ -163,6 +144,26 @@ export default function FillBlanks({
 						</p>
 					))}
 				</span>
+				<div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-4">
+					<span className="font-medium text-mti-purple-dark">Options</span>
+					<div className="flex gap-4 flex-wrap">
+						{words.map((v) => {
+							const text = typeof v === "string" ? v : `${v.letter} - ${v.word}`;
+
+							return (
+								<span
+									className={clsx(
+										"border border-mti-purple-light rounded-full px-3 py-0.5 transition ease-in-out duration-300",
+										!!answers.find((x) => x.solution.toLowerCase() === (typeof v === "string" ? v : v.letter).toLowerCase()) &&
+											"bg-mti-purple-dark text-white",
+									)}
+									key={text}>
+									{text}
+								</span>
+							);
+						})}
+					</div>
+				</div>
 			</div>
 
 			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">

src/components/Exercises/InteractiveSpeaking.tsx

@@ -5,6 +5,8 @@ import {BsCheckCircleFill, BsMicFill, BsPauseCircle, BsPlayCircle, BsTrashFill}
 import dynamic from "next/dynamic";
 import Button from "../Low/Button";
 import useExamStore from "@/stores/examStore";
+import {downloadBlob} from "@/utils/evaluation";
+import axios from "axios";
 
 const Waveform = dynamic(() => import("../Waveform"), {ssr: false});
 const ReactMediaRecorder = dynamic(() => import("react-media-recorder").then((mod) => mod.ReactMediaRecorder), {
@@ -14,31 +16,90 @@ const ReactMediaRecorder = dynamic(() => import("react-media-recorder").then((mo
 export default function InteractiveSpeaking({
 	id,
 	title,
-	text,
+	first_title,
+	second_title,
+	examID,
 	type,
 	prompts,
-	updateIndex,
+	userSolutions,
 	onNext,
 	onBack,
 }: InteractiveSpeakingExercise & CommonProps) {
 	const [recordingDuration, setRecordingDuration] = useState(0);
 	const [isRecording, setIsRecording] = useState(false);
 	const [mediaBlob, setMediaBlob] = useState<string>();
-	const [promptIndex, setPromptIndex] = useState(0);
-	const [answers, setAnswers] = useState<{prompt: string; blob: string}[]>([]);
+	const [answers, setAnswers] = useState<{prompt: string; blob: string; questionIndex: number}[]>([]);
+	const [isLoading, setIsLoading] = useState(false);
+
+	const {questionIndex, setQuestionIndex} = useExamStore((state) => state);
+	const {userSolutions: storeUserSolutions, setUserSolutions} = useExamStore((state) => state);
 
 	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
 
+	const back = async () => {
+		setIsLoading(true);
+
+		const answer = await saveAnswer(questionIndex);
+		if (questionIndex - 1 >= 0) {
+			setQuestionIndex(questionIndex - 1);
+			setIsLoading(false);
+
+			return;
+		}
+		setIsLoading(false);
+
+		onBack({
+			exercise: id,
+			solutions: [...answers.filter((x) => x.questionIndex !== questionIndex), answer],
+			score: {correct: 100, total: 100, missing: 0},
+			type,
+		});
+	};
+
+	const next = async () => {
+		setIsLoading(true);
+
+		const answer = await saveAnswer(questionIndex);
+		if (questionIndex + 1 < prompts.length) {
+			setQuestionIndex(questionIndex + 1);
+			setIsLoading(false);
+
+			return;
+		}
+
+		setIsLoading(false);
+		setQuestionIndex(0);
+
+		onNext({
+			exercise: id,
+			solutions: [...answers.filter((x) => x.questionIndex !== questionIndex), answer],
+			score: {correct: 100, total: 100, missing: 0},
+			type,
+		});
+	};
+
 	useEffect(() => {
-		if (updateIndex) updateIndex(promptIndex);
-	}, [promptIndex, updateIndex]);
+		if (userSolutions.length > 0 && answers.length === 0) {
+			const solutions = userSolutions as unknown as typeof answers;
+			setAnswers(solutions);
+
+			if (!mediaBlob) setMediaBlob(solutions.find((x) => x.questionIndex === questionIndex)?.blob);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [userSolutions, mediaBlob, answers]);
 
 	useEffect(() => {
 		if (hasExamEnded) {
+			const answer = {
+				questionIndex,
+				prompt: prompts[questionIndex].text,
+				blob: mediaBlob!,
+			};
+
 			onNext({
 				exercise: id,
-				solutions: mediaBlob ? [{id, solution: mediaBlob}] : [],
-				score: {correct: 1, total: 1, missing: 0},
+				solutions: [...answers.filter((x) => x.questionIndex !== questionIndex), answer],
+				score: {correct: 100, total: 100, missing: 0},
 				type,
 			});
 		}
@@ -59,31 +120,47 @@ export default function InteractiveSpeaking({
 	}, [isRecording]);
 
 	useEffect(() => {
-		if (promptIndex === answers.length - 1) {
-			setMediaBlob(answers[promptIndex].blob);
+		if (questionIndex <= answers.length - 1) {
+			const blob = answers.find((x) => x.questionIndex === questionIndex)?.blob;
+			setMediaBlob(blob);
 		}
-	}, [answers, promptIndex]);
+	}, [answers, questionIndex]);
 
-	const saveAnswer = () => {
+	const saveAnswer = async (index: number) => {
 		const answer = {
-			prompt: prompts[promptIndex].text,
+			questionIndex,
+			prompt: prompts[questionIndex].text,
 			blob: mediaBlob!,
 		};
 
-		setAnswers((prev) => [...prev, answer]);
+		setAnswers((prev) => [...prev.filter((x) => x.questionIndex !== index), answer]);
 		setMediaBlob(undefined);
+
+		setUserSolutions([
+			...storeUserSolutions.filter((x) => x.exercise !== id),
+			{
+				exercise: id,
+				solutions: [...answers.filter((x) => x.questionIndex !== questionIndex), answer],
+				score: {correct: 100, total: 100, missing: 0},
+				module: "speaking",
+				exam: examID,
+				type,
+			},
+		]);
+
+		return answer;
 	};
 
 	return (
 		<div className="flex flex-col h-full w-full gap-9">
 			<div className="flex flex-col w-full gap-8 bg-mti-gray-smoke rounded-xl py-8 pb-12 px-16">
 				<div className="flex flex-col gap-3">
-					<span className="font-semibold">{title}</span>
+					<span className="font-semibold">{!!first_title && !!second_title ? `${first_title} & ${second_title}` : title}</span>
 				</div>
 				{prompts && prompts.length > 0 && (
 					<div className="flex flex-col gap-4 w-full items-center">
-						<video key={promptIndex} autoPlay controls className="max-w-3xl rounded-xl">
-							<source src={prompts[promptIndex].video_url} />
+						<video key={questionIndex} autoPlay controls className="max-w-3xl rounded-xl">
+							<source src={prompts[questionIndex].video_url} />
 						</video>
 					</div>
 				)}
@@ -91,7 +168,7 @@ export default function InteractiveSpeaking({
 
 			<ReactMediaRecorder
 				audio
-				key={promptIndex}
+				key={questionIndex}
 				onStop={(blob) => setMediaBlob(blob)}
 				render={({status, startRecording, stopRecording, pauseRecording, resumeRecording, clearBlobUrl, mediaBlobUrl}) => (
 					<div className="w-full p-4 px-8 bg-transparent border-2 border-mti-gray-platinum rounded-2xl flex-col gap-8 items-center">
@@ -208,44 +285,11 @@ export default function InteractiveSpeaking({
 			/>
 
 			<div className="self-end flex justify-between w-full  gap-8">
-				<Button
-					color="purple"
-					variant="outline"
-					onClick={() =>
-						onBack({
-							exercise: id,
-							solutions: answers,
-							score: {correct: 1, total: 1, missing: 0},
-							type,
-						})
-					}
-					className="max-w-[200px] self-end w-full">
+				<Button color="purple" variant="outline" isLoading={isLoading} onClick={back} className="max-w-[200px] self-end w-full">
 					Back
 				</Button>
-				<Button
-					color="purple"
-					disabled={!mediaBlob}
-					onClick={() => {
-						saveAnswer();
-						if (promptIndex + 1 < prompts.length) {
-							setPromptIndex((prev) => prev + 1);
-							return;
-						}
-						onNext({
-							exercise: id,
-							solutions: [
-								...answers,
-								{
-									prompt: prompts[promptIndex].text,
-									blob: mediaBlob!,
-								},
-							],
-							score: {correct: 1, total: 1, missing: 0},
-							type,
-						});
-					}}
-					className="max-w-[200px] self-end w-full">
-					{promptIndex + 1 < prompts.length ? "Next Prompt" : "Submit"}
+				<Button color="purple" disabled={!mediaBlob} isLoading={isLoading} onClick={next} className="max-w-[200px] self-end w-full">
+					{questionIndex + 1 < prompts.length ? "Next Prompt" : "Submit"}
 				</Button>
 			</div>
 		</div>

src/components/Exercises/MatchSentences.tsx

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

src/components/Exercises/MultipleChoice.tsx

@@ -3,19 +3,36 @@ import {MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam"
 import useExamStore from "@/stores/examStore";
 import clsx from "clsx";
 import {useEffect, useState} from "react";
+import reactStringReplace from "react-string-replace";
 import {CommonProps} from ".";
 import Button from "../Low/Button";
 
 function Question({
+	id,
 	variant,
 	prompt,
 	options,
 	userSolution,
 	onSelectOption,
 }: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) {
+	const renderPrompt = (prompt: string) => {
+		return reactStringReplace(prompt, /((<u>)[\w\s']+(<\/u>))/g, (match) => {
+			const word = match.replaceAll("<u>", "").replaceAll("</u>", "");
+			return word.length > 0 ? <u>{word}</u> : null;
+		});
+	};
+
 	return (
 		<div className="flex flex-col gap-10">
-			<span className="">{prompt}</span>
+			{isNaN(Number(id)) ? (
+				<span>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")} </span>
+			) : (
+				<span className="">
+					<>
+						{id} - <span>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")} </span>
+					</>
+				</span>
+			)}
 			<div className="flex flex-wrap gap-4 justify-between">
 				{variant === "image" &&
 					options.map((option) => (
@@ -48,30 +65,25 @@ function Question({
 	);
 }
 
-export default function MultipleChoice({
-	id,
-	prompt,
-	type,
-	questions,
-	userSolutions,
-	updateIndex,
-	onNext,
-	onBack,
-}: MultipleChoiceExercise & CommonProps) {
+export default function MultipleChoice({id, prompt, type, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
 	const [answers, setAnswers] = useState<{question: string; option: string}[]>(userSolutions);
-	const [questionIndex, setQuestionIndex] = useState(0);
 
+	const {questionIndex, setQuestionIndex} = useExamStore((state) => state);
+	const {userSolutions: storeUserSolutions, setUserSolutions} = useExamStore((state) => state);
 	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
 
+	const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));
+
+	useEffect(() => {
+		setUserSolutions([...storeUserSolutions.filter((x) => x.exercise !== id), {exercise: id, solutions: answers, score: calculateScore(), type}]);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [answers]);
+
 	useEffect(() => {
 		if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
 		// 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}]);
@@ -91,21 +103,25 @@ export default function MultipleChoice({
 		if (questionIndex === questions.length - 1) {
 			onNext({exercise: id, solutions: answers, score: calculateScore(), type});
 		} else {
-			setQuestionIndex((prev) => prev + 1);
+			setQuestionIndex(questionIndex + 1);
 		}
+
+		scrollToTop();
 	};
 
 	const back = () => {
 		if (questionIndex === 0) {
 			onBack({exercise: id, solutions: answers, score: calculateScore(), type});
 		} else {
-			setQuestionIndex((prev) => prev - 1);
+			setQuestionIndex(questionIndex - 1);
 		}
+
+		scrollToTop();
 	};
 
 	return (
 		<>
-			<div className="flex flex-col gap-2 mt-4 h-fit mb-20 bg-mti-gray-smoke rounded-xl px-16 py-8">
+			<div className="flex flex-col gap-2 mt-4 h-fit w-full mb-20 bg-mti-gray-smoke rounded-xl px-16 py-8">
 				<span className="text-xl font-semibold">{prompt}</span>
 				{questionIndex < questions.length && (
 					<Question

src/components/Exercises/Speaking.tsx

@@ -5,28 +5,60 @@ import {BsCheckCircleFill, BsMicFill, BsPauseCircle, BsPlayCircle, BsTrashFill}
 import dynamic from "next/dynamic";
 import Button from "../Low/Button";
 import useExamStore from "@/stores/examStore";
+import {downloadBlob} from "@/utils/evaluation";
+import axios from "axios";
+import Modal from "../Modal";
 
 const Waveform = dynamic(() => import("../Waveform"), {ssr: false});
 const ReactMediaRecorder = dynamic(() => import("react-media-recorder").then((mod) => mod.ReactMediaRecorder), {
 	ssr: false,
 });
 
-export default function Speaking({id, title, text, video_url, type, prompts, onNext, onBack}: SpeakingExercise & CommonProps) {
+export default function Speaking({id, title, text, video_url, type, prompts, suffix, userSolutions, onNext, onBack}: SpeakingExercise & CommonProps) {
 	const [recordingDuration, setRecordingDuration] = useState(0);
 	const [isRecording, setIsRecording] = useState(false);
 	const [mediaBlob, setMediaBlob] = useState<string>();
+	const [audioURL, setAudioURL] = useState<string>();
+	const [isLoading, setIsLoading] = useState(false);
+	const [isPromptsModalOpen, setIsPromptsModalOpen] = useState(false);
 
 	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
 
-	useEffect(() => {
-		if (hasExamEnded) {
-			onNext({
-				exercise: id,
-				solutions: mediaBlob ? [{id, solution: mediaBlob}] : [],
-				score: {correct: 1, total: 1, missing: 0},
-				type,
-			});
+	const saveToStorage = async () => {
+		if (mediaBlob && mediaBlob.startsWith("blob")) {
+			const blobBuffer = await downloadBlob(mediaBlob);
+			const audioFile = new File([blobBuffer], "audio.wav", {type: "audio/wav"});
+
+			const seed = Math.random().toString().replace("0.", "");
+
+			const formData = new FormData();
+			formData.append("audio", audioFile, `${seed}.wav`);
+			formData.append("root", "speaking_recordings");
+
+			const config = {
+				headers: {
+					"Content-Type": "audio/wav",
+				},
+			};
+
+			const response = await axios.post<{path: string}>("/api/storage/insert", formData, config);
+			if (audioURL) await axios.post("/api/storage/delete", {path: audioURL});
+			return response.data.path;
 		}
+
+		return undefined;
+	};
+
+	useEffect(() => {
+		if (userSolutions.length > 0) {
+			const {solution} = userSolutions[0] as {solution?: string};
+			if (solution && !mediaBlob) setMediaBlob(solution);
+			if (solution && !solution.startsWith("blob")) setAudioURL(solution);
+		}
+	}, [userSolutions, mediaBlob]);
+
+	useEffect(() => {
+		if (hasExamEnded) next();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [hasExamEnded]);
 
@@ -43,11 +75,46 @@ export default function Speaking({id, title, text, video_url, type, prompts, onN
 		};
 	}, [isRecording]);
 
+	const next = async () => {
+		onNext({
+			exercise: id,
+			solutions: mediaBlob ? [{id, solution: mediaBlob}] : [],
+			score: {correct: 0, total: 100, missing: 0},
+			type,
+		});
+	};
+
+	const back = async () => {
+		onBack({
+			exercise: id,
+			solutions: mediaBlob ? [{id, solution: mediaBlob}] : [],
+			score: {correct: 0, total: 100, missing: 0},
+			type,
+		});
+	};
+
 	return (
 		<div className="flex flex-col h-full w-full gap-9">
+			<Modal title="Prompts" className="!w-96 aspect-square" isOpen={isPromptsModalOpen} onClose={() => setIsPromptsModalOpen(false)}>
+				<div className="flex flex-col items-center justify-center gap-4 w-full h-full">
+					<div className="flex flex-col gap-1 ml-4">
+						{prompts.map((x, index) => (
+							<li className="italic" key={index}>
+								{x}
+							</li>
+						))}
+					</div>
+					{!!suffix && <span className="font-bold">{suffix}</span>}
+				</div>
+			</Modal>
 			<div className="flex flex-col w-full gap-2 bg-mti-gray-smoke rounded-xl py-8 px-16">
 				<div className="flex flex-col gap-3">
+					<div className="flex flex-col gap-0">
 						<span className="font-semibold">{title}</span>
+						{prompts.length > 0 && (
+							<span className="font-semibold">You should talk for at least 30 seconds for your answer to be valid.</span>
+						)}
+					</div>
 					{!video_url && (
 						<span className="font-regular">
 							{text.split("\\n").map((line, index) => (
@@ -59,7 +126,7 @@ export default function Speaking({id, title, text, video_url, type, prompts, onN
 						</span>
 					)}
 				</div>
-				<div className="flex gap-6">
+				<div className="flex flex-col gap-6 items-center">
 					{video_url && (
 						<div className="flex flex-col gap-4 w-full items-center">
 							<video key={id} autoPlay controls className="max-w-3xl rounded-xl">
@@ -67,18 +134,7 @@ export default function Speaking({id, title, text, video_url, type, prompts, onN
 							</video>
 						</div>
 					)}
-					{prompts && prompts.length > 0 && (
-						<div className="flex flex-col gap-4">
-							<span className="font-bold">You should talk about the following things:</span>
-							<div className="flex flex-col gap-1 ml-4">
-								{prompts.map((x, index) => (
-									<li className="italic" key={index}>
-										{x}
-									</li>
-								))}
-							</div>
-						</div>
-					)}
+					{prompts && prompts.length > 0 && <Button onClick={() => setIsPromptsModalOpen(true)}>View Prompts</Button>}
 				</div>
 			</div>
 
@@ -89,7 +145,7 @@ export default function Speaking({id, title, text, video_url, type, prompts, onN
 					<div className="w-full p-4 px-8 bg-transparent border-2 border-mti-gray-platinum rounded-2xl flex-col gap-8 items-center">
 						<p className="text-base font-normal">Record your answer:</p>
 						<div className="flex gap-8 items-center justify-center py-8">
-							{status === "idle" && (
+							{status === "idle" && !mediaBlob && (
 								<>
 									<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
 									{status === "idle" && (
@@ -168,9 +224,9 @@ export default function Speaking({id, title, text, video_url, type, prompts, onN
 									</div>
 								</>
 							)}
-							{status === "stopped" && mediaBlobUrl && (
+							{((status === "stopped" && mediaBlobUrl) || (status === "idle" && mediaBlob)) && (
 								<>
-									<Waveform audio={mediaBlobUrl} waveColor="#FCDDEC" progressColor="#EF5DA8" />
+									<Waveform audio={mediaBlobUrl ? mediaBlobUrl : mediaBlob!} waveColor="#FCDDEC" progressColor="#EF5DA8" />
 									<div className="flex gap-4 items-center">
 										<BsTrashFill
 											className="text-mti-gray-cool cursor-pointer w-5 h-5"
@@ -200,32 +256,10 @@ export default function Speaking({id, title, text, video_url, type, prompts, onN
 			/>
 
 			<div className="self-end flex justify-between w-full  gap-8">
-				<Button
-					color="purple"
-					variant="outline"
-					onClick={() =>
-						onBack({
-							exercise: id,
-							solutions: mediaBlob ? [{id, solution: mediaBlob}] : [],
-							score: {correct: 1, total: 1, missing: 0},
-							type,
-						})
-					}
-					className="max-w-[200px] self-end w-full">
+				<Button color="purple" variant="outline" isLoading={isLoading} onClick={back} className="max-w-[200px] self-end w-full">
 					Back
 				</Button>
-				<Button
-					color="purple"
-					disabled={!mediaBlob}
-					onClick={() =>
-						onNext({
-							exercise: id,
-							solutions: mediaBlob ? [{id, solution: mediaBlob}] : [],
-							score: {correct: 1, total: 1, missing: 0},
-							type,
-						})
-					}
-					className="max-w-[200px] self-end w-full">
+				<Button color="purple" isLoading={isLoading} disabled={!mediaBlob} onClick={next} className="max-w-[200px] self-end w-full">
 					Next
 				</Button>
 			</div>

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;
 
@@ -36,7 +40,7 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
 
 	return (
 		<>
-			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
+			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>
@@ -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) => {
+						const id = question.id.toString();
+
+						return (
 							<div key={question.id.toString()} className="flex flex-col gap-4">
 								<span>
 									{index + 1}. {question.prompt}
 								</span>
 								<div className="flex gap-4">
 									<Button
-									variant={
-										answers.find((x) => x.id.toString() === question.id.toString())?.solution === "true" ? "solid" : "outline"
-									}
-									onClick={() => toggleAnswer("true", question.id.toString())}
+										variant={answers.find((x) => x.id.toString() === id)?.solution === "true" ? "solid" : "outline"}
+										onClick={() => toggleAnswer("true", id)}
 										className="!py-2">
 										True
 									</Button>
 									<Button
-									variant={
-										answers.find((x) => x.id.toString() === question.id.toString())?.solution === "false" ? "solid" : "outline"
-									}
-									onClick={() => toggleAnswer("false", question.id.toString())}
+										variant={answers.find((x) => x.id.toString() === id)?.solution === "false" ? "solid" : "outline"}
+										onClick={() => toggleAnswer("false", id)}
 										className="!py-2">
 										False
 									</Button>
 									<Button
-									variant={
-										answers.find((x) => x.id.toString() === question.id.toString())?.solution === "not_given"
-											? "solid"
-											: "outline"
-									}
-									onClick={() => toggleAnswer("not_given", question.id.toString())}
+										variant={answers.find((x) => x.id.toString() === id)?.solution === "not_given" ? "solid" : "outline"}
+										onClick={() => toggleAnswer("not_given", id)}
 										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 !== "");
-		if (words.length >= maxWords) {
+		const words = userInput.split(" ");
+		if (words.length > maxWords) {
 			toast.warning(`You have reached your word limit of ${maxWords} words!`, {toastId: "word-limit"});
 			setUserInput(words.join(" ").trim());
 		}
@@ -88,7 +88,7 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
 
 	return (
 		<>
-			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
+			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<span key={index}>

src/components/Exercises/Writing.tsx

@@ -22,10 +22,34 @@ export default function Writing({
 	const [isModalOpen, setIsModalOpen] = useState(false);
 	const [inputText, setInputText] = useState(userSolutions.length === 1 ? userSolutions[0].solution : "");
 	const [isSubmitEnabled, setIsSubmitEnabled] = useState(false);
+	const [saveTimer, setSaveTimer] = useState(0);
 
+	const {userSolutions: storeUserSolutions, setUserSolutions} = useExamStore((state) => state);
 	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
 
 	useEffect(() => {
+		const saveTimerInterval = setInterval(() => {
+			setSaveTimer((prev) => prev + 1);
+		}, 1000);
+
+		return () => {
+			clearInterval(saveTimerInterval);
+		};
+	}, []);
+
+	useEffect(() => {
+		if (inputText.length > 0 && saveTimer % 10 === 0) {
+			setUserSolutions([
+				...storeUserSolutions.filter((x) => x.exercise !== id),
+				{exercise: id, solutions: [{id, solution: inputText}], score: {correct: 100, total: 100, missing: 0}, type, module: "writing"},
+			]);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [saveTimer]);
+
+	useEffect(() => {
+		if (localStorage.getItem("enable_paste")) return;
+
 		const listener = (e: KeyboardEvent) => {
 			if ((e.ctrlKey || e.metaKey) && e.key === "v") {
 				e.preventDefault();
@@ -40,7 +64,8 @@ export default function Writing({
 	}, []);
 
 	useEffect(() => {
-		if (hasExamEnded) onNext({exercise: id, solutions: [{id, solution: inputText}], score: {correct: 1, total: 1, missing: 0}, type});
+		if (hasExamEnded)
+			onNext({exercise: id, solutions: [{id, solution: inputText}], score: {correct: 100, total: 100, missing: 0}, type, module: "writing"});
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [hasExamEnded]);
 
@@ -93,22 +118,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>
-						{prefix.split("\\n").map((line, index) => (
-							<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>
+					<span className="whitespace-pre-wrap">{prefix.replaceAll("\\n", "\n")}</span>
+					<span className="font-semibold whitespace-pre-wrap">{prompt.replaceAll("\\n", "\n")}</span>
 					{attachment && (
 						<img
 							onClick={() => setIsModalOpen(true)}
@@ -120,14 +131,7 @@ export default function Writing({
 				</div>
 
 				<div className="w-full h-full flex flex-col gap-4">
-					<span>
-						{suffix.split("\\n").map((line, index) => (
-							<React.Fragment key={index}>
-								{line}
-								<br />
-							</React.Fragment>
-						))}
-					</span>
+					<span className="whitespace-pre-wrap">{suffix}</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"
@@ -144,14 +148,24 @@ export default function Writing({
 				<Button
 					color="purple"
 					variant="outline"
-					onClick={() => onBack({exercise: id, solutions: [{id, solution: inputText}], score: {correct: 1, total: 1, missing: 0}, type})}
+					onClick={() =>
+						onBack({exercise: id, solutions: [{id, solution: inputText}], score: {correct: 100, total: 100, missing: 0}, type})
+					}
 					className="max-w-[200px] self-end w-full">
 					Back
 				</Button>
 				<Button
 					color="purple"
 					disabled={!isSubmitEnabled}
-					onClick={() => onNext({exercise: id, solutions: [{id, solution: inputText}], score: {correct: 1, total: 1, missing: 0}, type})}
+					onClick={() =>
+						onNext({
+							exercise: id,
+							solutions: [{id, solution: inputText.replaceAll(/\s{2,}/g, " ")}],
+							score: {correct: 100, total: 100, missing: 0},
+							type,
+							module: "writing",
+						})
+					}
 					className="max-w-[200px] self-end w-full">
 					Next
 				</Button>

src/components/Exercises/index.tsx

@@ -22,46 +22,38 @@ import InteractiveSpeaking from "./InteractiveSpeaking";
 const MatchSentences = dynamic(() => import("@/components/Exercises/MatchSentences"), {ssr: false});
 
 export interface CommonProps {
-	updateIndex?: (internalIndex: number) => void;
+	examID?: string;
 	onNext: (userSolutions: UserSolution) => void;
 	onBack: (userSolutions: UserSolution) => void;
 }
 
 export const renderExercise = (
 	exercise: Exercise,
+	examID: string,
 	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} />;
+			return <FillBlanks key={exercise.id} {...(exercise as FillBlanksExercise)} onNext={onNext} onBack={onBack} examID={examID} />;
 		case "trueFalse":
-			return <TrueFalse key={exercise.id} {...(exercise as TrueFalseExercise)} onNext={onNext} onBack={onBack} />;
+			return <TrueFalse key={exercise.id} {...(exercise as TrueFalseExercise)} onNext={onNext} onBack={onBack} examID={examID} />;
 		case "matchSentences":
-			return <MatchSentences key={exercise.id} {...(exercise as MatchSentencesExercise)} onNext={onNext} onBack={onBack} />;
+			return <MatchSentences key={exercise.id} {...(exercise as MatchSentencesExercise)} onNext={onNext} onBack={onBack} examID={examID} />;
 		case "multipleChoice":
-			return (
-				<MultipleChoice
-					key={exercise.id}
-					{...(exercise as MultipleChoiceExercise)}
-					updateIndex={updateIndex}
-					onNext={onNext}
-					onBack={onBack}
-				/>
-			);
+			return <MultipleChoice key={exercise.id} {...(exercise as MultipleChoiceExercise)} onNext={onNext} onBack={onBack} examID={examID} />;
 		case "writeBlanks":
-			return <WriteBlanks key={exercise.id} {...(exercise as WriteBlanksExercise)} onNext={onNext} onBack={onBack} />;
+			return <WriteBlanks key={exercise.id} {...(exercise as WriteBlanksExercise)} onNext={onNext} onBack={onBack} examID={examID} />;
 		case "writing":
-			return <Writing key={exercise.id} {...(exercise as WritingExercise)} onNext={onNext} onBack={onBack} />;
+			return <Writing key={exercise.id} {...(exercise as WritingExercise)} onNext={onNext} onBack={onBack} examID={examID} />;
 		case "speaking":
-			return <Speaking key={exercise.id} {...(exercise as SpeakingExercise)} onNext={onNext} onBack={onBack} />;
+			return <Speaking key={exercise.id} {...(exercise as SpeakingExercise)} onNext={onNext} onBack={onBack} examID={examID} />;
 		case "interactiveSpeaking":
 			return (
 				<InteractiveSpeaking
 					key={exercise.id}
 					{...(exercise as InteractiveSpeakingExercise)}
-					updateIndex={updateIndex}
+					examID={examID}
 					onNext={onNext}
 					onBack={onBack}
 				/>

src/components/Generation/fill.blanks.edit.tsx

@@ -0,0 +1,82 @@
+import {FillBlanksExercise} from "@/interfaces/exam";
+import React from "react";
+import Input from "@/components/Low/Input";
+
+interface Props {
+	exercise: FillBlanksExercise;
+	updateExercise: (data: any) => void;
+}
+
+const FillBlanksEdit = (props: Props) => {
+	const {exercise, updateExercise} = props;
+	return (
+		<>
+			<Input
+				type="text"
+				label="Prompt"
+				name="prompt"
+				required
+				value={exercise.prompt}
+				onChange={(value) =>
+					updateExercise({
+						prompt: value,
+					})
+				}
+			/>
+			<Input
+				type="text"
+				label="Text"
+				name="text"
+				required
+				value={exercise.text}
+				onChange={(value) =>
+					updateExercise({
+						text: value,
+					})
+				}
+			/>
+			<h1>Solutions</h1>
+			<div className="w-full flex flex-wrap -mx-2">
+				{exercise.solutions.map((solution, index) => (
+					<div key={solution.id} className="flex sm:w-1/2 lg:w-1/4 px-2">
+						<Input
+							type="text"
+							label={`Solution ${index + 1}`}
+							name="solution"
+							required
+							value={solution.solution}
+							onChange={(value) =>
+								updateExercise({
+									solutions: exercise.solutions.map((sol) => (sol.id === solution.id ? {...sol, solution: value} : sol)),
+								})
+							}
+						/>
+					</div>
+				))}
+			</div>
+			<h1>Words</h1>
+			<div className="w-full flex flex-wrap -mx-2">
+				{exercise.words.map((word, index) => (
+					<div key={index} className="flex sm:w-1/2 lg:w-1/4 px-2">
+						<Input
+							type="text"
+							label={`Word ${index + 1}`}
+							name="word"
+							required
+							value={typeof word === "string" ? word : word.word}
+							onChange={(value) =>
+								updateExercise({
+									words: exercise.words.map((sol, idx) =>
+										index === idx ? (typeof word === "string" ? value : {...word, word: value}) : sol,
+									),
+								})
+							}
+						/>
+					</div>
+				))}
+			</div>
+		</>
+	);
+};
+
+export default FillBlanksEdit;

src/components/Generation/interactive.speaking.edit.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const InteractiveSpeakingEdit = () => {
+  return null;
+};
+
+export default InteractiveSpeakingEdit;

src/components/Generation/match.sentences.edit.tsx

@@ -0,0 +1,130 @@
+import React from "react";
+import { MatchSentencesExercise } from "@/interfaces/exam";
+import Input from "@/components/Low/Input";
+import Select from "@/components/Low/Select";
+
+interface Props {
+  exercise: MatchSentencesExercise;
+  updateExercise: (data: any) => void;
+}
+const MatchSentencesEdit = (props: Props) => {
+  const { exercise, updateExercise } = props;
+
+  const selectOptions = exercise.options.map((option) => ({
+    value: option.id,
+    label: option.id,
+  }));
+
+  return (
+    <>
+      <Input
+        type="text"
+        label="Prompt"
+        name="prompt"
+        required
+        value={exercise.prompt}
+        onChange={(value) =>
+          updateExercise({
+            prompt: value,
+          })
+        }
+      />
+      <h1>Solutions</h1>
+      <div className="w-full flex flex-wrap -mx-2">
+        {exercise.sentences.map((sentence, index) => (
+          <div key={sentence.id} className="flex flex-col w-full px-2">
+            <div className="flex w-full">
+              <Input
+                type="text"
+                label={`Sentence ${index + 1}`}
+                name="sentence"
+                required
+                value={sentence.sentence}
+                onChange={(value) =>
+                  updateExercise({
+                    sentences: exercise.sentences.map((iSol) =>
+                      iSol.id === sentence.id
+                        ? {
+                            ...iSol,
+                            sentence: value,
+                          }
+                        : iSol
+                    ),
+                  })
+                }
+                className="px-2"
+              />
+              <div className="w-48 flex items-end px-2">
+                <Select
+                  value={selectOptions.find(
+                    (o) => o.value === sentence.solution
+                  )}
+                  options={selectOptions}
+                  onChange={(value) => {
+                    updateExercise({
+                      sentences: exercise.sentences.map((iSol) =>
+                        iSol.id === sentence.id
+                          ? {
+                              ...iSol,
+                              solution: value?.value,
+                            }
+                          : iSol
+                      ),
+                    });
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        ))}
+        <h1>Options</h1>
+        <div className="w-full flex flex-wrap -mx-2">
+          {exercise.options.map((option, index) => (
+            <div key={option.id} className="flex flex-col w-full px-2">
+              <div className="flex w-full">
+                <Input
+                  type="text"
+                  label={`Option ${index + 1}`}
+                  name="option"
+                  required
+                  value={option.sentence}
+                  onChange={(value) =>
+                    updateExercise({
+                      options: exercise.options.map((iSol) =>
+                        iSol.id === option.id
+                          ? {
+                              ...iSol,
+                              sentence: value,
+                            }
+                          : iSol
+                      ),
+                    })
+                  }
+                  className="px-2"
+                />
+                <div className="w-48 flex items-end px-2">
+                  <Select
+                    value={{
+                      value: option.id,
+                      label: option.id,
+                    }}
+                    options={[
+                      {
+                        value: option.id,
+                        label: option.id,
+                      },
+                    ]}
+                    disabled
+                    onChange={() => {}}
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default MatchSentencesEdit;

src/components/Generation/multiple.choice.edit.tsx

@@ -0,0 +1,137 @@
+import React from "react";
+import Input from "@/components/Low/Input";
+import {
+  MultipleChoiceExercise,
+  MultipleChoiceQuestion,
+} from "@/interfaces/exam";
+import Select from "@/components/Low/Select";
+
+interface Props {
+  exercise: MultipleChoiceExercise;
+  updateExercise: (data: any) => void;
+}
+
+const variantOptions = [
+  { value: "text", label: "Text", key: "text" },
+  { value: "image", label: "Image", key: "src" },
+];
+
+const MultipleChoiceEdit = (props: Props) => {
+  const { exercise, updateExercise } = props;
+
+  return (
+    <>
+      <h1>Questions</h1>
+      <div className="w-full flex-no-wrap -mx-2">
+        {exercise.questions.map((question: MultipleChoiceQuestion, index) => {
+          const variantValue = variantOptions.find(
+            (o) => o.value === question.variant
+          );
+
+          const solutionsOptions = question.options.map((option) => ({
+            value: option.id,
+            label: option.id,
+          }));
+
+          const solutionValue = solutionsOptions.find(
+            (o) => o.value === question.solution
+          );
+          return (
+            <div key={question.id} className="flex w-full px-2 flex-col">
+              <span>Question ID: {question.id}</span>
+
+              <Input
+                type="text"
+                label="Prompt"
+                name="prompt"
+                required
+                value={question.prompt}
+                onChange={(value) =>
+                  updateExercise({
+                    questions: exercise.questions.map((sol) =>
+                      sol.id === question.id ? { ...sol, prompt: value } : sol
+                    ),
+                  })
+                }
+              />
+              <div className="flex w-full">
+                <div className="w-48 flex items-end px-2">
+                  <Select
+                    value={solutionValue}
+                    options={solutionsOptions}
+                    onChange={(value) => {
+                      updateExercise({
+                        questions: exercise.questions.map((sol) =>
+                          sol.id === question.id
+                            ? { ...sol, solution: value?.value }
+                            : sol
+                        ),
+                      });
+                    }}
+                  />
+                </div>
+                <div className="w-48 flex items-end px-2">
+                  <Select
+                    value={variantValue}
+                    options={variantOptions}
+                    onChange={(value) => {
+                      updateExercise({
+                        questions: exercise.questions.map((sol) =>
+                          sol.id === question.id
+                            ? { ...sol, variant: value?.value }
+                            : sol
+                        ),
+                      });
+                    }}
+                  />
+                </div>
+              </div>
+              <div className="flex w-full flex-wrap -mx-2">
+                {question.options.map((option) => (
+                  <div
+                    key={option.id}
+                    className="flex sm:w-1/2 lg:w-1/4 px-2 px-2"
+                  >
+                    <Input
+                      type="text"
+                      label={`Option ${option.id}`}
+                      name="option"
+                      required
+                      value={option.text}
+                      onChange={(value) =>
+                        updateExercise({
+                          questions: exercise.questions.map((sol) =>
+                            sol.id === question.id
+                              ? {
+                                  ...sol,
+                                  options: sol.options.map((opt) => {
+                                    if (
+                                      opt.id === option.id &&
+                                      variantValue?.key
+                                    ) {
+                                      return {
+                                        ...opt,
+                                        [variantValue.key]: value,
+                                      };
+                                    }
+
+                                    return opt;
+                                  }),
+                                }
+                              : sol
+                          ),
+                        })
+                      }
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+export default MultipleChoiceEdit;

src/components/Generation/speaking.edit.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const SpeakingEdit = () => {
+    return null;
+}
+
+export default SpeakingEdit;

src/components/Generation/true.false.edit.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { TrueFalseExercise } from "@/interfaces/exam";
+import Input from "@/components/Low/Input";
+import Select from "@/components/Low/Select";
+interface Props {
+  exercise: TrueFalseExercise;
+  updateExercise: (data: any) => void;
+}
+
+const options = [
+  { value: "true", label: "True" },
+  { value: "false", label: "False" },
+  { value: "not_given", label: "Not Given" },
+];
+
+const TrueFalseEdit = (props: Props) => {
+  const { exercise, updateExercise } = props;
+  return (
+    <>
+      <Input
+        type="text"
+        label="Prompt"
+        name="prompt"
+        required
+        value={exercise.prompt}
+        onChange={(value) =>
+          updateExercise({
+            prompt: value,
+          })
+        }
+      />
+      <h1>Questions</h1>
+      <div className="w-full flex-no-wrap -mx-2">
+        {exercise.questions.map((question, index) => (
+          <div key={question.id} className="flex w-full px-2">
+            <Input
+              type="text"
+              label={`Question ${index + 1}`}
+              name="question"
+              required
+              value={question.prompt}
+              onChange={(value) =>
+                updateExercise({
+                  questions: exercise.questions.map((sol) =>
+                    sol.id === question.id ? { ...sol, prompt: value } : sol
+                  ),
+                })
+              }
+            />
+            <div className="w-48 flex items-end px-2">
+              <Select
+                value={options.find((o) => o.value === question.solution)}
+                options={options}
+                onChange={(value) => {
+                  updateExercise({
+                    questions: exercise.questions.map((sol) =>
+                      sol.id === question.id ? { ...sol, solution: value?.value } : sol
+                    ),
+                  });
+                }}
+                className="h-18"
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default TrueFalseEdit;

src/components/Generation/write.blanks.edit.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import Input from "@/components/Low/Input";
+import { WriteBlanksExercise } from "@/interfaces/exam";
+
+interface Props {
+  exercise: WriteBlanksExercise;
+  updateExercise: (data: any) => void;
+}
+const WriteBlankEdits = (props: Props) => {
+  const { exercise, updateExercise } = props;
+
+  return (
+    <>
+      <Input
+        type="text"
+        label="Prompt"
+        name="prompt"
+        required
+        value={exercise.prompt}
+        onChange={(value) =>
+          updateExercise({
+            prompt: value,
+          })
+        }
+      />
+      <Input
+        type="text"
+        label="Text"
+        name="text"
+        required
+        value={exercise.text}
+        onChange={(value) =>
+          updateExercise({
+            text: value,
+          })
+        }
+      />
+      <Input
+        type="text"
+        label="Max Words"
+        name="number"
+        required
+        value={exercise.maxWords}
+        onChange={(value) =>
+          updateExercise({
+            maxWords: Number(value),
+          })
+        }
+      />
+      <h1>Solutions</h1>
+      <div className="w-full flex flex-wrap -mx-2">
+        {exercise.solutions.map((solution) => (
+          <div key={solution.id} className="flex flex-col w-full px-2">
+            <span>Solution ID: {solution.id}</span>
+            {/* TODO: Consider adding an add and delete button */}
+            <div className="flex flex-wrap">
+            {solution.solution.map((sol, solIndex) => (
+              <Input
+                key={`${sol}-${solIndex}`}
+                type="text"
+                label={`Solution ${solIndex + 1}`}
+                name="solution"
+                required
+                value={sol}
+                onChange={(value) =>
+                  updateExercise({
+                    solutions: exercise.solutions.map((iSol) =>
+                      iSol.id === solution.id
+                        ? {
+                            ...iSol,
+                            solution: iSol.solution.map((iiSol, iiIndex) => {
+                              if (iiIndex === solIndex) {
+                                return value;
+                              }
+
+                              return iiSol;
+                            }),
+                          }
+                        : iSol
+                    ),
+                  })
+                }
+                className="sm:w-1/2 lg:w-1/4 px-2"
+              />
+            ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default WriteBlankEdits;

src/components/Generation/writing.edit.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const WritingEdit = () => {
+    return null;
+}
+
+export default WritingEdit;

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/High/Layout.tsx

@@ -33,7 +33,7 @@ export default function Layout({user, children, className, navDisabled = false,
 					focusMode={focusMode}
 					onFocusLayerMouseEnter={onFocusLayerMouseEnter}
 					className="-md:hidden"
-					userType={user.type}
+					user={user}
 				/>
 				<div
 					className={clsx(

src/components/High/TicketDisplay.tsx

@@ -0,0 +1,255 @@
+import useUsers from "@/hooks/useUsers";
+import {
+  Ticket,
+  TicketStatus,
+  TicketStatusLabel,
+  TicketType,
+  TicketTypeLabel,
+} from "@/interfaces/ticket";
+import { User } from "@/interfaces/user";
+import { USER_TYPE_LABELS } from "@/resources/user";
+import axios from "axios";
+import moment from "moment";
+import { useState } from "react";
+import { toast } from "react-toastify";
+import ShortUniqueId from "short-unique-id";
+import Button from "../Low/Button";
+import Input from "../Low/Input";
+import Select from "../Low/Select";
+import { checkAccess } from "@/utils/permissions";
+
+interface Props {
+  user: User;
+  ticket: Ticket;
+  onClose: () => void;
+}
+
+export default function TicketDisplay({ user, ticket, onClose }: Props) {
+  const [subject] = useState(ticket.subject);
+  const [type, setType] = useState<TicketType>(ticket.type);
+  const [description] = useState(ticket.description);
+  const [reporter] = useState(ticket.reporter);
+  const [reportedFrom] = useState(ticket.reportedFrom);
+  const [status, setStatus] = useState(ticket.status);
+  const [assignedTo, setAssignedTo] = useState<string | null>(
+    ticket.assignedTo || null,
+  );
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { users } = useUsers();
+
+  const submit = () => {
+    if (!type)
+      return toast.error("Please choose a type!", { toastId: "missing-type" });
+
+    setIsLoading(true);
+    axios
+      .patch(`/api/tickets/${ticket.id}`, {
+        subject,
+        type,
+        description,
+        reporter,
+        reportedFrom,
+        status,
+        assignedTo,
+      })
+      .then(() => {
+        toast.success(`The ticket has been updated!`, { toastId: "submitted" });
+        onClose();
+      })
+      .catch((e) => {
+        console.error(e);
+        toast.error("Something went wrong, please try again later!", {
+          toastId: "error",
+        });
+      })
+      .finally(() => setIsLoading(false));
+  };
+
+  const del = () => {
+    if (!confirm("Are you sure you want to delete this ticket?")) return;
+
+    setIsLoading(true);
+    axios
+      .delete(`/api/tickets/${ticket.id}`)
+      .then(() => {
+        toast.success(`The ticket has been deleted!`, { toastId: "submitted" });
+        onClose();
+      })
+      .catch((e) => {
+        console.error(e);
+        toast.error("Something went wrong, please try again later!", {
+          toastId: "error",
+        });
+      })
+      .finally(() => setIsLoading(false));
+  };
+
+  return (
+    <form className="flex flex-col gap-4 pt-8">
+      <Input
+        label="Subject"
+        type="text"
+        name="subject"
+        placeholder="Subject..."
+        value={subject}
+        onChange={(e) => null}
+        disabled
+      />
+
+      <div className="-md:flex-col flex w-full items-center gap-4">
+        <div className="flex w-full flex-col gap-3">
+          <label className="text-mti-gray-dim text-base font-normal">
+            Status
+          </label>
+          <Select
+            options={Object.keys(TicketStatusLabel).map((x) => ({
+              value: x,
+              label: TicketStatusLabel[x as keyof typeof TicketStatusLabel],
+            }))}
+            value={{ value: status, label: TicketStatusLabel[status] }}
+            onChange={(value) =>
+              setStatus((value?.value as TicketStatus) ?? undefined)
+            }
+            placeholder="Status..."
+          />
+        </div>
+        <div className="flex w-full flex-col gap-3">
+          <label className="text-mti-gray-dim text-base font-normal">
+            Type
+          </label>
+          <Select
+            options={Object.keys(TicketTypeLabel).map((x) => ({
+              value: x,
+              label: TicketTypeLabel[x as keyof typeof TicketTypeLabel],
+            }))}
+            value={{ value: type, label: TicketTypeLabel[type] }}
+            onChange={(value) => setType(value!.value as TicketType)}
+            placeholder="Type..."
+          />
+        </div>
+      </div>
+
+      <div className="flex w-full flex-col gap-3">
+        <label className="text-mti-gray-dim text-base font-normal">
+          Assignee
+        </label>
+        <Select
+          options={[
+            { value: "me", label: "Assign to me" },
+            ...users
+              .filter((x) => checkAccess(x, ["admin", "developer", "agent"]))
+              .map((u) => ({
+                value: u.id,
+                label: `${u.name} - ${u.email}`,
+              })),
+          ]}
+          disabled={checkAccess(user, ["agent"])}
+          value={
+            assignedTo
+              ? {
+                  value: assignedTo,
+                  label: `${users.find((u) => u.id === assignedTo)?.name} - ${users.find((u) => u.id === assignedTo)?.email}`,
+                }
+              : null
+          }
+          onChange={(value) =>
+            value
+              ? setAssignedTo(value.value === "me" ? user.id : value.value)
+              : setAssignedTo(null)
+          }
+          placeholder="Assignee..."
+          isClearable
+        />
+      </div>
+
+      <div className="-md:flex-col flex w-full items-center gap-4">
+        <Input
+          label="Reported From"
+          type="text"
+          name="reportedFrom"
+          onChange={() => null}
+          value={reportedFrom}
+          disabled
+        />
+        <Input
+          label="Date"
+          type="text"
+          name="date"
+          onChange={() => null}
+          value={moment(ticket.date).format("DD/MM/YYYY - HH:mm")}
+          disabled
+        />
+      </div>
+
+      <div className="-md:flex-col flex w-full items-center gap-4">
+        <Input
+          label="Reporter's Name"
+          type="text"
+          name="reporter"
+          onChange={() => null}
+          value={reporter.name}
+          disabled
+        />
+        <Input
+          label="Reporter's E-mail"
+          type="text"
+          name="reporter"
+          onChange={() => null}
+          value={reporter.email}
+          disabled
+        />
+        <Input
+          label="Reporter's Type"
+          type="text"
+          name="reporterType"
+          onChange={() => null}
+          value={USER_TYPE_LABELS[reporter.type]}
+          disabled
+        />
+      </div>
+
+      <textarea
+        className="input border-mti-gray-platinum h-full min-h-[300px] w-full cursor-text rounded-3xl border bg-white px-7 py-8"
+        placeholder="Write your ticket's description here..."
+        contentEditable={false}
+        value={description}
+        spellCheck
+      />
+
+      <div className="-md:flex-col-reverse mt-2 flex w-full items-center justify-between gap-4">
+        <Button
+          type="button"
+          color="red"
+          className="w-full md:max-w-[200px]"
+          variant="outline"
+          onClick={del}
+          isLoading={isLoading}
+        >
+          Delete
+        </Button>
+
+        <div className="-md:flex-col-reverse flex w-full items-center justify-end gap-4">
+          <Button
+            type="button"
+            color="red"
+            className="w-full md:max-w-[200px]"
+            variant="outline"
+            onClick={onClose}
+            isLoading={isLoading}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            className="w-full md:max-w-[200px]"
+            isLoading={isLoading}
+            onClick={submit}
+          >
+            Update
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}

src/components/High/TicketSubmission.tsx

@@ -0,0 +1,116 @@
+import {Ticket, TicketType, TicketTypeLabel} from "@/interfaces/ticket";
+import {User} from "@/interfaces/user";
+import useExamStore from "@/stores/examStore";
+import axios from "axios";
+import {useState} from "react";
+import {toast} from "react-toastify";
+import ShortUniqueId from "short-unique-id";
+import Button from "../Low/Button";
+import Input from "../Low/Input";
+import Select from "../Low/Select";
+
+interface Props {
+	user: User;
+	page: string;
+	onClose: () => void;
+}
+
+export default function TicketSubmission({user, page, onClose}: Props) {
+	const [subject, setSubject] = useState("");
+	const [type, setType] = useState<TicketType>();
+	const [description, setDescription] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+
+	const examState = useExamStore((state) => state);
+
+	const submit = () => {
+		if (!type) return toast.error("Please choose a type!", {toastId: "missing-type"});
+		if (subject.trim() === "")
+			return toast.error("Please input a subject!", {
+				toastId: "missing-subject",
+			});
+		if (description.trim() === "")
+			return toast.error("Please describe your ticket!", {
+				toastId: "missing-desc",
+			});
+
+		setIsLoading(true);
+
+		const shortUID = new ShortUniqueId();
+		const ticket: Ticket = {
+			id: shortUID.randomUUID(8),
+			date: new Date().toISOString(),
+			reporter: {
+				id: user.id,
+				email: user.email,
+				name: user.name,
+				type: user.type,
+			},
+			status: "submitted",
+			subject,
+			type,
+			reportedFrom: page,
+			description,
+			examInformation:
+				page.includes("exam") || page.includes("exercises")
+					? {
+							exam: examState.exam?.id || "",
+							exams: examState.exams.map((x) => x.id),
+							exerciseIndex: examState.exerciseIndex,
+							moduleIndex: examState.moduleIndex,
+							partIndex: examState.partIndex,
+							questionIndex: examState.questionIndex,
+							selectedModules: examState.selectedModules,
+					  }
+					: undefined,
+		};
+
+		axios
+			.post(`/api/tickets`, ticket)
+			.then(() => {
+				toast.success(`Your ticket has been submitted! You will be contacted by e-mail for further discussion.`, {toastId: "submitted"});
+				onClose();
+			})
+			.catch((e) => {
+				console.error(e);
+				toast.error("Something went wrong, please try again later!", {
+					toastId: "error",
+				});
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	return (
+		<form className="flex flex-col gap-4 pt-8">
+			<Input label="Subject" type="text" name="subject" placeholder="Subject..." onChange={(e) => setSubject(e)} />
+			<div className="-md:flex-col flex w-full items-center gap-4">
+				<div className="flex w-full flex-col gap-3">
+					<label className="text-mti-gray-dim text-base font-normal">Type</label>
+					<Select
+						options={Object.keys(TicketTypeLabel).map((x) => ({
+							value: x,
+							label: TicketTypeLabel[x as keyof typeof TicketTypeLabel],
+						}))}
+						onChange={(value) => setType((value?.value as TicketType) ?? undefined)}
+						placeholder="Type..."
+					/>
+				</div>
+				<Input label="Reporter" type="text" name="reporter" onChange={() => null} value={`${user.name} - ${user.email}`} disabled />
+			</div>
+			<textarea
+				className="input border-mti-gray-platinum h-full min-h-[300px] w-full cursor-text rounded-3xl border bg-white px-7 py-8"
+				onChange={(e) => setDescription(e.target.value)}
+				placeholder="Write your ticket's description here..."
+				spellCheck
+			/>
+			<div className="mt-2 flex w-full items-center justify-end gap-4">
+				<Button type="button" color="red" className="w-full max-w-[200px]" variant="outline" onClick={onClose} isLoading={isLoading}>
+					Cancel
+				</Button>
+				<Button type="button" className="w-full max-w-[200px]" isLoading={isLoading} onClick={submit}>
+					Submit
+				</Button>
+			</div>
+		</form>
+	);
+}

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" | "pink";
 	variant?: "outline" | "solid";
 	className?: string;
 	disabled?: boolean;
@@ -39,11 +39,21 @@ 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:
 				"bg-transparent text-mti-rose-light border border-mti-rose-light hover:bg-mti-rose-light disabled:text-mti-rose disabled:bg-mti-rose-ultralight disabled:border-none selection:bg-mti-rose-dark hover:text-white selection:text-white",
 		},
+		pink: {
+			solid: "bg-ielts-speaking text-white border border-ielts-speaking  hover:bg-ielts-speaking disabled:text-ielts-speaking disabled:bg-ielts-speaking-transparent selection:bg-ielts-speaking",
+			outline:
+				"bg-transparent text-ielts-speaking border border-ielts-speaking hover:bg-ielts-speaking disabled:text-ielts-speaking disabled:bg-ielts-speaking-transparent disabled:border-none selection:bg-ielts-speaking hover:text-white selection:text-white",
+		},
 	};
 
 	return (
@@ -52,8 +62,8 @@ export default function Button({
 			onClick={onClick}
 			className={clsx(
 				"py-4 px-6 rounded-full transition ease-in-out duration-300 disabled:cursor-not-allowed cursor-pointer",
-				className,
 				colorClassNames[color][variant],
+				className,
 			)}
 			disabled={disabled || isLoading}>
 			{!isLoading && children}

src/components/Low/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/CountrySelect.tsx

@@ -42,7 +42,9 @@ export default function CountrySelect({value, disabled = false, onChange}: Props
 							displayValue={(code: string) => {
 								const country = countries[code as unknown as keyof TCountries];
 
-								return `${countryCodes.findOne("countryCode" as any, code).flag} ${country.name} (+${country.phone})`;
+								return `${countryCodes.findOne("countryCode" as any, code)?.flag || ""} ${country?.name || "N/A"} (+${
+									country?.phone || "N/A"
+								})`;
 							}}
 						/>
 						<Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-8">

src/components/Low/ProgressBar.tsx

@@ -5,12 +5,14 @@ interface Props {
 	label: string;
 	percentage: number;
 	color: "red" | "rose" | "purple" | Module;
+	mark?: number;
+	markLabel?: string;
 	useColor?: boolean;
 	className?: string;
 	textClassName?: string;
 }
 
-export default function ProgressBar({label, percentage, color, useColor = false, className, textClassName}: Props) {
+export default function ProgressBar({label, percentage, color, mark, markLabel, useColor = false, className, textClassName}: Props) {
 	const progressColorClass: {[key in typeof color]: string} = {
 		red: "bg-mti-red-light",
 		rose: "bg-mti-rose-light",
@@ -30,6 +32,9 @@ export default function ProgressBar({label, percentage, color, useColor = false,
 				!useColor ? "bg-mti-gray-anti-flash" : progressColorClass[color],
 				useColor && "bg-opacity-20",
 			)}>
+			{mark && (
+				<div style={{left: `${mark}%`}} className={clsx("w-3 h-2 bg-mti-gray-davy/60 absolute -translate-x-1/2 top-0 z-20 cursor-pointer")} />
+			)}
 			<div
 				style={{width: `${percentage}%`}}
 				className={clsx("absolute transition-all duration-300 ease-in-out top-0 left-0 h-full overflow-hidden", progressColorClass[color])}

src/components/Low/Select.tsx

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

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/Medium/InviteCard.tsx

@@ -0,0 +1,77 @@
+import { Invite } from "@/interfaces/invite";
+import { User } from "@/interfaces/user";
+import axios from "axios";
+import { useState } from "react";
+import { BsArrowRepeat } from "react-icons/bs";
+import { toast } from "react-toastify";
+
+interface Props {
+  invite: Invite;
+  users: User[];
+  reload: () => void;
+}
+
+export default function InviteCard({ invite, users, reload }: Props) {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const inviter = users.find((u) => u.id === invite.from);
+  const name = !inviter
+    ? null
+    : inviter.type === "corporate"
+      ? inviter.corporateInformation?.companyInformation?.name || inviter.name
+      : inviter.name;
+
+  const decide = (decision: "accept" | "decline") => {
+    if (!confirm(`Are you sure you want to ${decision} this invite?`)) return;
+
+    setIsLoading(true);
+    axios
+      .get(`/api/invites/${decision}/${invite.id}`)
+      .then(() => {
+        toast.success(
+          `Successfully ${decision === "accept" ? "accepted" : "declined"} the invite!`,
+          { toastId: "success" },
+        );
+        reload();
+      })
+      .catch((e) => {
+        toast.success(`Something went wrong, please try again later!`, {
+          toastId: "error",
+        });
+        reload();
+      })
+      .finally(() => setIsLoading(false));
+  };
+
+  return (
+    <div className="border-mti-gray-anti-flash flex min-w-[200px] flex-col gap-6 rounded-xl border p-4 text-black">
+      <span>Invited by {name}</span>
+      <div className="flex items-center gap-2">
+        <button
+          onClick={() => decide("accept")}
+          disabled={isLoading}
+          className="bg-mti-green-ultralight hover:bg-mti-green-light w-24 rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed"
+        >
+          {!isLoading && "Accept"}
+          {isLoading && (
+            <div className="flex items-center justify-center">
+              <BsArrowRepeat className="animate-spin text-white" size={25} />
+            </div>
+          )}
+        </button>
+        <button
+          onClick={() => decide("decline")}
+          disabled={isLoading}
+          className="bg-mti-red-ultralight hover:bg-mti-red-light w-24 rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed"
+        >
+          {!isLoading && "Decline"}
+          {isLoading && (
+            <div className="flex items-center justify-center">
+              <BsArrowRepeat className="animate-spin text-white" size={25} />
+            </div>
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/Medium/ModuleLevelSelector.tsx

@@ -0,0 +1,121 @@
+import {Module} from "@/interfaces";
+import {writingMarking} from "@/utils/score";
+import {Menu} from "@headlessui/react";
+import {Dispatch, SetStateAction} from "react";
+import {BsBook, BsChevronDown, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
+
+type Levels = {[key in Module]: number};
+
+interface Props {
+	levels: Levels;
+	setLevels: Dispatch<SetStateAction<Levels>>;
+}
+
+export default function ModuleLevelSelector({levels, setLevels}: Props) {
+	return (
+		<div className="flex flex-col gap-32 w-full">
+			<div className="grid grid-cols-1 md:grid-cols-2 gap-y-4 gap-x-16">
+				<div className="w-full flex flex-col gap-3.5 relative">
+					<span className="text-sm text-mti-gray-dim">
+						<span className="font-bold">Reading</span> level
+					</span>
+					<Menu>
+						<Menu.Button className="w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-between items-center gap-12 bg-white">
+							<BsBook className="text-ielts-reading" size={34} />
+							<span className="text-mti-gray-cool text-sm">
+								{levels.reading === -1 ? "Select your reading level" : `Level ${levels.reading}`}
+							</span>
+							<BsChevronDown className="text-mti-gray-cool" size={12} />
+						</Menu.Button>
+						<Menu.Items className="absolute overflow-y-scroll scrollbar-hide max-h-[230px] origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl">
+							{Object.values(writingMarking).map((x) => (
+								<Menu.Item key={x}>
+									<span
+										onClick={() => setLevels((prev) => ({...prev, reading: x}))}
+										className="w-full py-4 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
+										Level {x}
+									</span>
+								</Menu.Item>
+							))}
+						</Menu.Items>
+					</Menu>
+				</div>
+				<div className="w-full flex flex-col gap-3.5 relative">
+					<span className="text-sm text-mti-gray-dim">
+						<span className="font-bold">Listening</span> level
+					</span>
+					<Menu>
+						<Menu.Button className="w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-between items-center gap-12 bg-white">
+							<BsHeadphones className="text-ielts-listening" size={34} />
+							<span className="text-mti-gray-cool text-sm">
+								{levels.listening === -1 ? "Select your listening level" : `Level ${levels.listening}`}
+							</span>
+							<BsChevronDown className="text-mti-gray-cool" size={12} />
+						</Menu.Button>
+						<Menu.Items className="absolute overflow-y-scroll scrollbar-hide max-h-[230px] origin-top top-full bg-white flex flex-col items-center w-full z-50 drop-shadow-lg rounded-2xl">
+							{Object.values(writingMarking).map((x) => (
+								<Menu.Item key={x}>
+									<span
+										onClick={() => setLevels((prev) => ({...prev, listening: x}))}
+										className="w-full py-5 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
+										Level {x}
+									</span>
+								</Menu.Item>
+							))}
+						</Menu.Items>
+					</Menu>
+				</div>
+				<div className="w-full flex flex-col gap-3.5 relative">
+					<span className="text-sm text-mti-gray-dim">
+						<span className="font-bold">Writing</span> level
+					</span>
+					<Menu>
+						<Menu.Button className="w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-between items-center gap-12 bg-white">
+							<BsPen className="text-ielts-writing" size={34} />
+							<span className="text-mti-gray-cool text-sm">
+								{levels.writing === -1 ? "Select your writing level" : `Level ${levels.writing}`}
+							</span>
+							<BsChevronDown className="text-mti-gray-cool" size={12} />
+						</Menu.Button>
+						<Menu.Items className="absolute overflow-y-scroll scrollbar-hide max-h-[230px] origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl">
+							{Object.values(writingMarking).map((x) => (
+								<Menu.Item key={x}>
+									<span
+										onClick={() => setLevels((prev) => ({...prev, writing: x}))}
+										className="w-full py-5 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
+										Level {x}
+									</span>
+								</Menu.Item>
+							))}
+						</Menu.Items>
+					</Menu>
+				</div>
+				<div className="w-full flex flex-col gap-3.5 relative">
+					<span className="text-sm text-mti-gray-dim">
+						<span className="font-bold">Speaking</span> level
+					</span>
+					<Menu>
+						<Menu.Button className="w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-between items-center gap-12 bg-white">
+							<BsMegaphone className="text-ielts-speaking" size={34} />
+							<span className="text-mti-gray-cool text-sm">
+								{levels.speaking === -1 ? "Select your speaking level" : `Level ${levels.speaking}`}
+							</span>
+							<BsChevronDown className="text-mti-gray-cool" size={12} />
+						</Menu.Button>
+						<Menu.Items className="absolute overflow-y-scroll scrollbar-hide max-h-[230px] origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl">
+							{Object.values(writingMarking).map((x) => (
+								<Menu.Item key={x}>
+									<span
+										onClick={() => setLevels((prev) => ({...prev, speaking: x}))}
+										className="w-full py-5 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
+										Level {x}
+									</span>
+								</Menu.Item>
+							))}
+						</Menu.Items>
+					</Menu>
+				</div>
+			</div>
+		</div>
+	);
+}

src/components/Medium/ModuleTitle.tsx

@@ -21,7 +21,11 @@ export default function ModuleTitle({minTimer, module, label, exerciseIndex, tot
 	const [timer, setTimer] = useState(minTimer * 60);
 	const [showModal, setShowModal] = useState(false);
 	const [warningMode, setWarningMode] = useState(false);
+
 	const setHasExamEnded = useExamStore((state) => state.setHasExamEnded);
+	const {timeSpent} = useExamStore((state) => state);
+
+	useEffect(() => setTimer((prev) => prev - timeSpent), [timeSpent]);
 
 	useEffect(() => {
 		if (!disableTimer) {

src/components/Medium/SessionCard.tsx

@@ -0,0 +1,101 @@
+import {Session} from "@/hooks/useSessions";
+import useExamStore from "@/stores/examStore";
+import {sortByModuleName} from "@/utils/moduleUtils";
+import axios from "axios";
+import clsx from "clsx";
+import {capitalize} from "lodash";
+import moment from "moment";
+import {useState} from "react";
+import {BsArrowRepeat, BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
+import {toast} from "react-toastify";
+
+export default function SessionCard({
+	session,
+	reload,
+	loadSession,
+}: {
+	session: Session;
+	reload: () => void;
+	loadSession: (session: Session) => Promise<void>;
+}) {
+	const [isLoading, setIsLoading] = useState(false);
+
+	const deleteSession = async () => {
+		if (!confirm("Are you sure you want to delete this session?")) return;
+
+		setIsLoading(true);
+		await axios
+			.delete(`/api/sessions/${session.sessionId}`)
+			.then(() => {
+				toast.success(`Successfully delete session "${session.sessionId}"`);
+			})
+			.catch((e) => {
+				console.log(e);
+				toast.error("Something went wrong, please try again later");
+			})
+			.finally(() => {
+				reload();
+				setIsLoading(false);
+			});
+	};
+
+	return (
+		<div className="border-mti-gray-anti-flash flex w-64 flex-col gap-3 rounded-xl border p-4 text-black">
+			<span className="flex gap-1">
+				<b>ID:</b>
+				{session.sessionId}
+			</span>
+			<span className="flex gap-1">
+				<b>Date:</b>
+				{moment(session.date).format("DD/MM/YYYY - HH:mm")}
+			</span>
+			<div className="flex w-full items-center justify-between">
+				<div className="-md:mt-2 grid w-full grid-cols-4 place-items-center justify-center gap-2">
+					{session.selectedModules.sort(sortByModuleName).map((module) => (
+						<div
+							key={module}
+							data-tip={capitalize(module)}
+							className={clsx(
+								"-md:px-4 tooltip flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
+								module === "reading" && "bg-ielts-reading",
+								module === "listening" && "bg-ielts-listening",
+								module === "writing" && "bg-ielts-writing",
+								module === "speaking" && "bg-ielts-speaking",
+								module === "level" && "bg-ielts-level",
+							)}>
+							{module === "reading" && <BsBook className="h-4 w-4" />}
+							{module === "listening" && <BsHeadphones className="h-4 w-4" />}
+							{module === "writing" && <BsPen className="h-4 w-4" />}
+							{module === "speaking" && <BsMegaphone className="h-4 w-4" />}
+							{module === "level" && <BsClipboard className="h-4 w-4" />}
+						</div>
+					))}
+				</div>
+			</div>
+			<div className="flex items-center gap-2 w-full">
+				<button
+					onClick={async () => await loadSession(session)}
+					disabled={isLoading}
+					className="bg-mti-green-ultralight w-full hover:bg-mti-green-light rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed">
+					{!isLoading && "Resume"}
+					{isLoading && (
+						<div className="flex items-center justify-center">
+							<BsArrowRepeat className="animate-spin text-white" size={25} />
+						</div>
+					)}
+				</button>
+				<button
+					onClick={deleteSession}
+					disabled={isLoading}
+					className="bg-mti-red-ultralight w-full hover:bg-mti-red-light rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed">
+					{!isLoading && "Delete"}
+					{isLoading && (
+						<div className="flex items-center justify-center">
+							<BsArrowRepeat className="animate-spin text-white" size={25} />
+						</div>
+					)}
+				</button>
+			</div>
+		</div>
+	);
+}

src/components/Medium/TopicModal.tsx

@@ -0,0 +1,70 @@
+import topics from "@/resources/topics";
+import {useState} from "react";
+import {BsArrowLeft, BsArrowRight} from "react-icons/bs";
+import Button from "../Low/Button";
+import Modal from "../Modal";
+
+interface Props {
+	isOpen: boolean;
+	initialTopics: string[];
+	onClose: VoidFunction;
+	selectTopics: (topics: string[]) => void;
+}
+
+export default function TopicModal({isOpen, initialTopics, onClose, selectTopics}: Props) {
+	const [selectedTopics, setSelectedTopics] = useState([...initialTopics]);
+
+	return (
+		<Modal isOpen={isOpen} onClose={onClose} title="Preferred Topics">
+			<div className="flex flex-col w-full h-full gap-4 mt-4">
+				<div className="w-full h-full grid grid-cols-2 -md:gap-1 gap-4">
+					<div className="flex flex-col gap-2">
+						<span className="border-b border-b-neutral-400/30">Available Topics</span>
+						<div className=" max-h-[500px] overflow-y-scroll scrollbar-hide">
+							{topics
+								.filter((x) => !selectedTopics.includes(x))
+								.map((x) => (
+									<div key={x} className="odd:bg-mti-purple-ultralight/40 p-2 flex justify-between items-center">
+										<span>{x}</span>
+										<button
+											onClick={() => setSelectedTopics((prev) => [...prev, x])}
+											className="border border-mti-purple-light cursor-pointer p-2 rounded-lg bg-white drop-shadow transition ease-in-out duration-300 hover:bg-mti-purple hover:text-white">
+											<BsArrowRight />
+										</button>
+									</div>
+								))}
+						</div>
+					</div>
+					<div className="flex flex-col gap-2">
+						<span className="border-b border-b-neutral-400/30">Preferred Topics ({selectedTopics.length || "All"})</span>
+						<div className=" max-h-[500px] overflow-y-scroll scrollbar-hide">
+							{selectedTopics.map((x) => (
+								<div key={x} className="odd:bg-mti-purple-ultralight/40 p-2 flex justify-between items-center text-right">
+									<button
+										onClick={() => setSelectedTopics((prev) => [...prev.filter((y) => y !== x)])}
+										className="border border-mti-purple-light cursor-pointer p-2 rounded-lg bg-white drop-shadow transition ease-in-out duration-300 hover:bg-mti-purple hover:text-white">
+										<BsArrowLeft />
+									</button>
+									<span>{x}</span>
+								</div>
+							))}
+						</div>
+					</div>
+				</div>
+				<div className="w-full flex gap-4 items-center justify-end">
+					<Button variant="outline" color="rose" className="w-full max-w-[200px]" onClick={onClose}>
+						Close
+					</Button>
+					<Button
+						className="w-full max-w-[200px]"
+						onClick={() => {
+							selectTopics(selectedTopics);
+							onClose();
+						}}>
+						Select
+					</Button>
+				</div>
+			</div>
+		</Modal>
+	);
+}

src/components/MobileMenu.tsx

@@ -6,16 +6,24 @@ import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { Fragment } from "react";
-import {BsShield, BsShieldFill, BsXLg} from "react-icons/bs";
+import { BsXLg } from "react-icons/bs";
+import { checkAccess, getTypesOfUser } from "@/utils/permissions";
 
 interface Props {
   isOpen: boolean;
   onClose: () => void;
   path: string;
   user: User;
+  disableNavigation?: boolean;
 }
 
-export default function MobileMenu({isOpen, onClose, path, user}: Props) {
+export default function MobileMenu({
+  isOpen,
+  onClose,
+  path,
+  user,
+  disableNavigation,
+}: Props) {
   const router = useRouter();
 
   const logout = async () => {
@@ -34,7 +42,8 @@ export default function MobileMenu({isOpen, onClose, path, user}: Props) {
           enterTo="opacity-100"
           leave="ease-in duration-200"
           leaveFrom="opacity-100"
-					leaveTo="opacity-0">
+          leaveTo="opacity-0"
+        >
           <div className="fixed inset-0 bg-black bg-opacity-25" />
         </Transition.Child>
 
@@ -47,95 +56,152 @@ export default function MobileMenu({isOpen, onClose, path, user}: Props) {
               enterTo="opacity-100 scale-100"
               leave="ease-in duration-200"
               leaveFrom="opacity-100 scale-100"
-							leaveTo="opacity-0 scale-95">
-							<Dialog.Panel className="w-full h-screen transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all text-black flex flex-col gap-8">
-								<Dialog.Title as="header" className="w-full px-8 py-2 -md:flex justify-between items-center md:hidden shadow-sm">
-									<Link href="/">
-										<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
+              leaveTo="opacity-0 scale-95"
+            >
+              <Dialog.Panel className="flex h-screen w-full transform flex-col gap-8 overflow-hidden bg-white text-left align-middle text-black shadow-xl transition-all">
+                <Dialog.Title
+                  as="header"
+                  className="-md:flex w-full items-center justify-between px-8 py-2 shadow-sm md:hidden"
+                >
+                  <Link href={disableNavigation ? "" : "/"}>
+                    <Image
+                      src="/logo_title.png"
+                      alt="EnCoach logo"
+                      width={69}
+                      height={69}
+                    />
                   </Link>
-									<div className="cursor-pointer" onClick={onClose} tabIndex={0}>
-										<BsXLg className="text-2xl text-mti-purple-light" onClick={onClose} />
+                  <div
+                    className="cursor-pointer"
+                    onClick={onClose}
+                    tabIndex={0}
+                  >
+                    <BsXLg
+                      className="text-mti-purple-light text-2xl"
+                      onClick={onClose}
+                    />
                   </div>
                 </Dialog.Title>
-								<div className="flex flex-col h-full gap-6 px-8 text-lg">
+                <div className="flex h-full flex-col gap-6 px-8 text-lg">
                   <Link
-										href="/"
+                    href={disableNavigation ? "" : "/"}
                     className={clsx(
-											"transition ease-in-out duration-300 w-fit",
-											path === "/" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-										)}>
+                      "w-fit transition duration-300 ease-in-out",
+                      path === "/" &&
+                        "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
+                    )}
+                  >
                     Dashboard
                   </Link>
-									{(user.type === "student" || user.type === "teacher" || user.type === "developer") && (
+                  {checkAccess(user, ["student", "teacher", "developer"]) && (
                     <>
                       <Link
-												href="/exam"
+                        href={disableNavigation ? "" : "/exam"}
                         className={clsx(
-													"transition ease-in-out duration-300 w-fit",
-													path === "/exam" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-												)}>
+                          "w-fit transition duration-300 ease-in-out",
+                          path === "/exam" &&
+                            "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
+                        )}
+                      >
                         Exams
                       </Link>
                       <Link
-												href="/exercises"
+                        href={disableNavigation ? "" : "/exercises"}
                         className={clsx(
-													"transition ease-in-out duration-300 w-fit",
+                          "w-fit transition duration-300 ease-in-out",
                           path === "/exercises" &&
-														"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-												)}>
+                            "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
+                        )}
+                      >
                         Exercises
                       </Link>
                     </>
                   )}
                   <Link
-										href="/stats"
+                    href={disableNavigation ? "" : "/stats"}
                     className={clsx(
-											"transition ease-in-out duration-300 w-fit",
-											path === "/stats" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-										)}>
+                      "w-fit transition duration-300 ease-in-out",
+                      path === "/stats" &&
+                        "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
+                    )}
+                  >
                     Stats
                   </Link>
                   <Link
-										href="/record"
+                    href={disableNavigation ? "" : "/record"}
                     className={clsx(
-											"transition ease-in-out duration-300 w-fit",
-											path === "/record" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-										)}>
+                      "w-fit transition duration-300 ease-in-out",
+                      path === "/record" &&
+                        "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
+                    )}
+                  >
                     Record
                   </Link>
-									{["admin", "developer", "agent"].includes(user.type) && (
+                  {checkAccess(user, [
+                    "admin",
+                    "developer",
+                    "agent",
+                    "corporate",
+                    "mastercorporate",
+                  ]) && (
                     <Link
-											href="/payment-record"
+                      href={disableNavigation ? "" : "/payment-record"}
                       className={clsx(
-												"transition ease-in-out duration-300 w-fit",
+                        "w-fit transition duration-300 ease-in-out",
                         path === "/payment-record" &&
-													"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-											)}>
+                          "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
+                      )}
+                    >
                       Payment Record
                     </Link>
                   )}
-									{["admin", "developer", "corporate", "teacher"].includes(user.type) && (
+                  {checkAccess(user, [
+                    "admin",
+                    "developer",
+                    "corporate",
+                    "teacher",
+                    "mastercorporate",
+                  ]) && (
                     <Link
-											href="/settings"
+                      href={disableNavigation ? "" : "/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 ",
-											)}>
+                        "w-fit transition duration-300 ease-in-out",
+                        path === "/settings" &&
+                          "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
+                      )}
+                    >
                       Settings
                     </Link>
                   )}
+                  {checkAccess(user, ["admin", "developer", "agent"]) && (
                     <Link
-										href="/profile"
+                      href={disableNavigation ? "" : "/tickets"}
                       className={clsx(
-											"transition ease-in-out duration-300 w-fit",
-											path === "/profile" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-										)}>
+                        "w-fit transition duration-300 ease-in-out",
+                        path === "/tickets" &&
+                          "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
+                      )}
+                    >
+                      Tickets
+                    </Link>
+                  )}
+                  <Link
+                    href={disableNavigation ? "" : "/profile"}
+                    className={clsx(
+                      "w-fit transition duration-300 ease-in-out",
+                      path === "/profile" &&
+                        "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
+                    )}
+                  >
                     Profile
                   </Link>
 
                   <span
-										className={clsx("transition ease-in-out duration-300 w-fit justify-self-end cursor-pointer")}
-										onClick={logout}>
+                    className={clsx(
+                      "w-fit cursor-pointer justify-self-end transition duration-300 ease-in-out"
+                    )}
+                    onClick={logout}
+                  >
                     Logout
                   </span>
                 </div>

src/components/Modal.tsx

@@ -1,17 +1,19 @@
 import {Dialog, Transition} from "@headlessui/react";
+import clsx from "clsx";
 import {Fragment, ReactElement} from "react";
 
 interface Props {
 	isOpen: boolean;
 	onClose: () => void;
 	title?: string;
+	className?: string;
 	children?: ReactElement;
 }
 
-export default function Modal({isOpen, title, onClose, children}: Props) {
+export default function Modal({isOpen, title, className, onClose, children}: Props) {
 	return (
 		<Transition appear show={isOpen} as={Fragment}>
-			<Dialog as="div" className="relative z-10" onClose={onClose}>
+			<Dialog as="div" className="relative z-[200]" onClose={onClose}>
 				<Transition.Child
 					as={Fragment}
 					enter="ease-out duration-300"
@@ -33,7 +35,11 @@ export default function Modal({isOpen, title, onClose, children}: Props) {
 							leave="ease-in duration-200"
 							leaveFrom="opacity-100 scale-100"
 							leaveTo="opacity-0 scale-95">
-							<Dialog.Panel className="w-full max-w-6xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+							<Dialog.Panel
+								className={clsx(
+									"w-full max-w-6xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all",
+									className,
+								)}>
 								{title && (
 									<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
 										{title}

src/components/Navbar.tsx

@@ -3,12 +3,33 @@ import Link from "next/link";
 import FocusLayer from "@/components/FocusLayer";
 import { preventNavigation } from "@/utils/navigation.disabled";
 import { useRouter } from "next/router";
-import {BsList} from "react-icons/bs";
+import { BsList, BsQuestionCircle, BsQuestionCircleFill } 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";
+import Button from "./Low/Button";
+import Modal from "./Modal";
+import Input from "./Low/Input";
+import TicketSubmission from "./High/TicketSubmission";
+import { Module } from "@/interfaces";
+import Badge from "./Low/Badge";
 
+import {
+  BsArrowRepeat,
+  BsBook,
+  BsCheck,
+  BsCheckCircle,
+  BsClipboard,
+  BsHeadphones,
+  BsMegaphone,
+  BsPen,
+  BsXCircle,
+} from "react-icons/bs";
 interface Props {
   user: User;
   navDisabled?: boolean;
@@ -18,19 +39,31 @@ interface Props {
 }
 
 /* eslint-disable @next/next/no-img-element */
-export default function Navbar({user, path, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
+export default function Navbar({
+  user,
+  path,
+  navDisabled = false,
+  focusMode = false,
+  onFocusLayerMouseEnter,
+}: Props) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [disablePaymentPage, setDisablePaymentPage] = useState(true);
+  const [isTicketOpen, setIsTicketOpen] = useState(false);
+
+  const router = useRouter();
 
   const disableNavigation = preventNavigation(navDisabled, focusMode);
-	const router = useRouter();
 
   const expirationDateColor = (date: Date) => {
     const momentDate = moment(date);
     const today = moment(new Date());
 
-		if (today.add(1, "days").isAfter(momentDate)) return "!bg-mti-red-ultralight border-mti-red-light";
-		if (today.add(3, "days").isAfter(momentDate)) return "!bg-mti-rose-ultralight border-mti-rose-light";
-		if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
+    if (today.add(1, "days").isAfter(momentDate))
+      return "!bg-mti-red-ultralight border-mti-red-light";
+    if (today.add(3, "days").isAfter(momentDate))
+      return "!bg-mti-rose-ultralight border-mti-rose-light";
+    if (today.add(7, "days").isAfter(momentDate))
+      return "!bg-mti-orange-ultralight border-mti-orange-light";
   };
 
   const showExpirationDate = () => {
@@ -42,40 +75,144 @@ 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")
+      return setDisablePaymentPage(false);
+    isUserFromCorporate(user.id).then((result) =>
+      setDisablePaymentPage(result)
+    );
+  }, [user]);
+
+  const badges = [
+      {
+        module: "reading",
+        icon: () => <BsBook className="h-4 w-4 text-white" />,
+        achieved: user.levels.reading >= user.desiredLevels.reading,
+      },
+
+      {
+        module: "listening",
+        icon: () => <BsHeadphones className="h-4 w-4 text-white" />,
+        achieved: user.levels.listening >= user.desiredLevels.listening,
+      },
+      {
+        module: "writing",
+        icon: () => <BsPen className="h-4 w-4 text-white" />,
+        achieved: user.levels.writing >= user.desiredLevels.writing,
+      },
+      {
+        module: "speaking",
+        icon: () => <BsMegaphone className="h-4 w-4 text-white" />,
+        achieved: user.levels.speaking >= user.desiredLevels.speaking,
+      },
+      {
+        module: "level",
+        icon: () => <BsClipboard className="h-4 w-4 text-white" />,
+        achieved: user.levels.level >= user.desiredLevels.level,
+      },
+    ];
+
   return (
     <>
-			{user && <MobileMenu path={path} isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} user={user} />}
-			<header className="w-full bg-transparent py-2 md:py-4 -md:justify-between md:gap-12 flex items-center relative -md:px-4">
-				<Link href={disableNavigation ? "" : "/"} className=" md:px-8 flex gap-8 items-center">
+      <Modal
+        isOpen={isTicketOpen}
+        onClose={() => setIsTicketOpen(false)}
+        title="Submit a ticket"
+      >
+        <TicketSubmission
+          user={user}
+          page={router.asPath}
+          onClose={() => setIsTicketOpen(false)}
+        />
+      </Modal>
+
+      {user && (
+        <MobileMenu
+          disableNavigation={disableNavigation}
+          path={path}
+          isOpen={isMenuOpen}
+          onClose={() => setIsMenuOpen(false)}
+          user={user}
+        />
+      )}
+      <header className="-md:justify-between -md:px-4 relative flex w-full items-center bg-transparent py-2 md:gap-12 md:py-4">
+        <Link
+          href={disableNavigation ? "" : "/"}
+          className=" flex items-center gap-8 md:px-8"
+        >
           <img src="/logo.png" alt="EnCoach's Logo" className="w-8 md:w-12" />
-					<h1 className="font-bold text-2xl w-1/6 -md:hidden">EnCoach</h1>
+          <h1 className="-md:hidden w-1/6 text-2xl font-bold">EnCoach</h1>
         </Link>
-				<div className="flex justify-end -md:items-center gap-4 md:w-5/6 md:mr-8">
+        <div className="flex items-center justify-end gap-4 md:mr-8 md:w-5/6">
+          {user.type === "student" &&
+            badges.map((badge) => (
+              <div
+                key={badge.module}
+                className={`${badge.achieved ? `bg-ielts-${badge.module}`: 'bg-mti-gray-anti-flash'} flex h-8 w-8 items-center justify-center rounded-full`}
+              >
+                {badge.icon()}
+              </div>
+            ))}
+          {/* OPEN TICKET SYSTEM */}
+          <button
+            className={clsx(
+              "border-mti-purple-light tooltip tooltip-bottom flex h-8 w-8 flex-col items-center justify-center rounded-full border p-1",
+              "hover:bg-mti-purple-light transition duration-300 ease-in-out hover:text-white z-20"
+            )}
+            data-tip="Submit a help/feedback ticket"
+            onClick={() => setIsTicketOpen(true)}
+          >
+            <BsQuestionCircleFill />
+          </button>
+
           {showExpirationDate() && (
             <Link
-							href="/payment"
+              href={
+                !!user.subscriptionExpirationDate && !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",
-								"transition duration-300 ease-in-out tooltip tooltip-bottom",
+                "flex w-fit cursor-pointer justify-center rounded-full border px-6 py-2 text-sm font-normal focus:outline-none",
+                "tooltip tooltip-bottom transition duration-300 ease-in-out",
                 !user.subscriptionExpirationDate
                   ? "bg-mti-green-ultralight border-mti-green-light"
                   : expirationDateColor(user.subscriptionExpirationDate),
-								"bg-white border-mti-gray-platinum",
-							)}>
+                "border-mti-gray-platinum bg-white"
+              )}
+            >
               {!user.subscriptionExpirationDate && "Unlimited"}
-							{user.subscriptionExpirationDate && moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
+              {user.subscriptionExpirationDate &&
+                moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
             </Link>
           )}
-					<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>
+          <Link
+            href={disableNavigation ? "" : "/profile"}
+            className="-md:hidden flex items-center justify-end gap-6"
+          >
+            <img
+              src={user.profilePicture}
+              alt={user.name}
+              className="h-10 w-10 rounded-full object-cover"
+            />
+            <span className="-md:hidden text-right">
+              {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" />
+          <div
+            className="cursor-pointer md:hidden"
+            onClick={() => setIsMenuOpen(true)}
+          >
+            <BsList className="text-mti-purple-light h-8 w-8" />
           </div>
         </div>
-				{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
+        {focusMode && (
+          <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
+        )}
       </header>
     </>
   );

src/components/PayPalPayment.tsx

@@ -1,66 +0,0 @@
-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/PaymobPayment.tsx

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

src/components/PermissionList.tsx

@@ -0,0 +1,62 @@
+import {Permission} from "@/interfaces/permissions";
+import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import Link from "next/link";
+import {convertCamelCaseToReadable} from "@/utils/string";
+
+interface Props {
+	permissions: Permission[];
+}
+
+const columnHelper = createColumnHelper<Permission>();
+
+const defaultColumns = [
+	columnHelper.accessor("type", {
+		header: () => <span>Type</span>,
+		cell: ({row, getValue}) => (
+			<Link
+				href={`/permissions/${row.original.id}`}
+				key={row.id}
+				className="underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer">
+				{convertCamelCaseToReadable(getValue() as string)}
+			</Link>
+		),
+	}),
+];
+
+export default function PermissionList({permissions}: Props) {
+	const table = useReactTable({
+		data: permissions,
+		columns: defaultColumns,
+		getCoreRowModel: getCoreRowModel(),
+	});
+	return (
+		<div className="w-full">
+			<div className="w-full flex flex-col gap-2">
+				<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+					<thead>
+						{table.getHeaderGroups().map((headerGroup) => (
+							<tr key={headerGroup.id}>
+								{headerGroup.headers.map((header) => (
+									<th className="py-4 px-4 text-left" key={header.id}>
+										{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+									</th>
+								))}
+							</tr>
+						))}
+					</thead>
+					<tbody className="px-2">
+						{table.getRowModel().rows.map((row) => (
+							<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
+								{row.getVisibleCells().map((cell) => (
+									<td className="px-4 py-2 items-center w-fit" key={cell.id}>
+										{flexRender(cell.column.columnDef.cell, cell.getContext())}
+									</td>
+								))}
+							</tr>
+						))}
+					</tbody>
+				</table>
+			</div>
+		</div>
+	);
+}

src/components/ProfileSummary.tsx

@@ -12,6 +12,7 @@ interface Props {
 		icon: ReactElement;
 		value: string | number;
 		label: string;
+		tooltip?: string;
 	}[];
 	children?: ReactElement;
 }
@@ -48,7 +49,10 @@ export default function ProfileSummary({user, items}: Props) {
 				<div className="flex justify-between w-full mt-8 -md:hidden">
 					{items.map((item) => (
 						<div className="flex gap-4 items-center" key={item.label}>
-							<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
+							<div
+								className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl relative group tooltip tooltip-bottom"
+								data-tip={item.tooltip}
+							>
 								{item.icon}
 							</div>
 							<div className="flex flex-col">

src/components/RadialProgressBar.tsx

@@ -0,0 +1,64 @@
+import clsx from 'clsx';
+import React from 'react';
+
+
+interface RadialProgressBarProps {
+    percentage: number;
+    text: string;
+    color: string;
+    spanClassName?: string;
+    size?: number;
+    strokeWidth?: number;
+    strokeOpacity?: number;
+}
+
+
+// https://gist.github.com/eYinka/873be69fae3ef27b103681b8a9f5e379 Omarmarei's answer
+const RadialProgressBar: React.FC<RadialProgressBarProps> = ({
+    percentage,
+    text,
+    color,
+    spanClassName = "",
+    size = 100,
+    strokeWidth = 10,
+    strokeOpacity = 0.5
+}) => {
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - (percentage / 100) * circumference;
+    return (
+        <div className='relative flex items-center justify-center' style={{ width: size, height: size}}>
+            <svg
+                width={size}
+                height={size}
+                viewBox={`0 0 ${size} ${size}`
+                }
+                className="circular-progress-bar"
+            >
+                <circle className="circle-bg" stroke="#e6e6e6" strokeWidth={strokeWidth}
+                    fill="none"
+                    cx={size / 2}
+                    cy={size / 2}
+                    r={radius}
+                    strokeOpacity={strokeOpacity}
+                />
+                <circle
+                    className="circle-progress"
+                    stroke={color}
+                    strokeWidth={strokeWidth}
+                    strokeLinecap="round"
+                    fill="none"
+                    cx={size / 2}
+                    cy={size / 2}
+                    r={radius}
+                    strokeDasharray={circumference}
+                    strokeDashoffset={offset}
+                    transform={`rotate(-90 ${size / 2} ${size / 2})`}
+                    strokeOpacity={strokeOpacity}
+                />
+            </svg>
+            <span className={clsx('absolute', spanClassName)}>{text}</span>
+        </div>
+    );
+};
+export default RadialProgressBar;

src/components/SegmentedProgressBar.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import clsx from 'clsx';
+interface Segment {
+    percentage: number;
+    subtitle: string;
+    color: string;
+}
+interface SegmentedProgressBarProps {
+    segments: Segment[];
+    height?: number;
+    className?: string;
+}
+const SegmentedProgressBar: React.FC<SegmentedProgressBarProps> = ({ segments, height=15, className="" }) => {
+    return (
+        <div className={className}>
+            <div className="relative flex rounded-full overflow-hidden bg-gray-200" style={{height: `${height}px`}}>
+                {segments.map((segment, index) => (
+                    <div
+                        key={index}
+                        className={clsx(
+                            'h-full opacity-50',
+                            'transition-all duration-500 ease-out',
+                            `bg-${segment.color}`,
+                            {
+                                'rounded-l-full': index === 0,
+                                'rounded-r-full': index === segments.length - 1,
+                                'rounded-none': index !== 0 && index !== segments.length - 1
+                            }
+                        )}
+                        style={{width: `${segment.percentage}%`}}
+                    ></div>
+                ))}
+            </div>
+            <div className="mt-2 flex text-sm justify-between">
+                {segments.map((segment, index) => (
+                    <div
+                        key={index}
+                        className="flex flex-col text-center w-fit"
+                    >
+                        <span className={clsx('font-semibold',`text-${segment.color}`)}>{segment.subtitle}</span>
+                        <span>{`${segment.percentage}%`}</span>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+export default SegmentedProgressBar;

src/components/Sidebar.tsx

@@ -11,6 +11,8 @@ import {
 	BsShieldFill,
 	BsCloudFill,
 	BsCurrencyDollar,
+	BsClipboardData,
+	BsFileLock,
 } from "react-icons/bs";
 import {RiLogoutBoxFill} from "react-icons/ri";
 import {SlPencil} from "react-icons/sl";
@@ -20,16 +22,18 @@ import {useRouter} from "next/router";
 import axios from "axios";
 import FocusLayer from "@/components/FocusLayer";
 import {preventNavigation} from "@/utils/navigation.disabled";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import usePreferencesStore from "@/stores/preferencesStore";
-import {Type} from "@/interfaces/user";
+import {User} from "@/interfaces/user";
+import useTicketsListener from "@/hooks/useTicketsListener";
+import {checkAccess, getTypesOfUser} from "@/utils/permissions";
 interface Props {
 	path: string;
 	navDisabled?: boolean;
 	focusMode?: boolean;
 	onFocusLayerMouseEnter?: () => void;
 	className?: string;
-	userType?: Type;
+	user: User;
 }
 
 interface NavProps {
@@ -39,27 +43,43 @@ interface NavProps {
 	keyPath: string;
 	disabled?: boolean;
 	isMinimized?: boolean;
+	badge?: number;
 }
 
-const Nav = ({Icon, label, path, keyPath, disabled = false, isMinimized = false}: NavProps) => (
+const Nav = ({Icon, label, path, keyPath, disabled = false, isMinimized = false, badge}: NavProps) => {
+	return (
 		<Link
 			href={!disabled ? keyPath : ""}
 			className={clsx(
-			"p-4 rounded-full flex gap-4 items-center cursor-pointer text-gray-500 hover:bg-mti-purple-light hover:text-white",
-			"transition-all duration-300 ease-in-out",
+				"flex items-center gap-4 rounded-full p-4 text-gray-500 hover:text-white",
+				"transition-all duration-300 ease-in-out relative",
+				disabled ? "hover:bg-mti-gray-dim cursor-not-allowed" : "hover:bg-mti-purple-light cursor-pointer",
 				path === keyPath && "bg-mti-purple-light text-white",
-			isMinimized ? "w-fit" : "w-full min-w-[200px] 2xl:min-w-[220px] px-8",
+				isMinimized ? "w-fit" : "w-full min-w-[200px] px-8 2xl:min-w-[220px]",
 			)}>
 			<Icon size={24} />
 			{!isMinimized && <span className="text-lg font-semibold">{label}</span>}
+			{!!badge && badge > 0 && (
+				<div
+					className={clsx(
+						"bg-mti-purple-light h-5 w-5 text-xs rounded-full flex items-center justify-center text-white",
+						"transition ease-in-out duration-300",
+						isMinimized && "absolute right-0 top-0",
+					)}>
+					{badge}
+				</div>
+			)}
 		</Link>
 	);
+};
 
-export default function Sidebar({path, navDisabled = false, focusMode = false, userType, onFocusLayerMouseEnter, className}: Props) {
+export default function Sidebar({path, navDisabled = false, focusMode = false, user, onFocusLayerMouseEnter, className}: Props) {
 	const router = useRouter();
 
 	const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [state.isSidebarMinimized, state.toggleSidebarMinimized]);
 
+	const {totalAssignedTickets} = useTicketsListener(user.id);
+
 	const logout = async () => {
 		axios.post("/api/logout").finally(() => {
 			setTimeout(() => router.reload(), 500);
@@ -71,35 +91,25 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 	return (
 		<section
 			className={clsx(
-				"h-full flex bg-transparent flex-col justify-between px-4 py-4 pb-8 relative",
-				isMinimized ? "w-fit" : "w-1/6 -xl:w-fit",
+				"relative flex h-full flex-col justify-between bg-transparent px-4 py-4 pb-8",
+				isMinimized ? "w-fit" : "-xl:w-fit w-1/6",
 				className,
 			)}>
-			<div className="xl:flex -xl:hidden flex-col gap-3">
+			<div className="-xl:hidden flex-col gap-3 xl:flex">
 				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={isMinimized} />
-				{(userType === "student" || userType === "teacher" || userType === "developer") && (
-					<>
-						<Nav
-							disabled={disableNavigation}
-							Icon={BsFileEarmarkText}
-							label="Exams"
-							path={path}
-							keyPath="/exam"
-							isMinimized={isMinimized}
-						/>
-						<Nav
-							disabled={disableNavigation}
-							Icon={BsPencil}
-							label="Exercises"
-							path={path}
-							keyPath="/exercises"
-							isMinimized={isMinimized}
-						/>
-					</>
+				{checkAccess(user, ["student", "teacher", "developer"], "viewExams") && (
+					<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized={isMinimized} />
 				)}
+				{checkAccess(user, ["student", "teacher", "developer"], "viewExercises") && (
+					<Nav disabled={disableNavigation} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" isMinimized={isMinimized} />
+				)}
+				{checkAccess(user, getTypesOfUser(["agent"]), "viewStats") && (
 					<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
+				)}
+				{checkAccess(user, getTypesOfUser(["agent"]), "viewRecords") && (
 					<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />
-				{["admin", "developer", "agent"].includes(userType || "") && (
+				)}
+				{checkAccess(user, ["admin", "developer", "agent", "corporate", "mastercorporate"], "viewPaymentRecords") && (
 					<Nav
 						disabled={disableNavigation}
 						Icon={BsCurrencyDollar}
@@ -109,7 +119,7 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 						isMinimized={isMinimized}
 					/>
 				)}
-				{["admin", "developer", "corporate", "teacher"].includes(userType || "") && (
+				{checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"]) && (
 					<Nav
 						disabled={disableNavigation}
 						Icon={BsShieldFill}
@@ -119,7 +129,19 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 						isMinimized={isMinimized}
 					/>
 				)}
-				{userType === "developer" && (
+				{checkAccess(user, ["admin", "developer", "agent"], "viewTickets") && (
+					<Nav
+						disabled={disableNavigation}
+						Icon={BsClipboardData}
+						label="Tickets"
+						path={path}
+						keyPath="/tickets"
+						isMinimized={isMinimized}
+						badge={totalAssignedTickets}
+					/>
+				)}
+				{checkAccess(user, ["developer", "admin"]) && (
+					<>
 						<Nav
 							disabled={disableNavigation}
 							Icon={BsCloudFill}
@@ -128,29 +150,62 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 							keyPath="/generation"
 							isMinimized={isMinimized}
 						/>
+						<Nav
+							disabled={disableNavigation}
+							Icon={BsFileLock}
+							label="Permissions"
+							path={path}
+							keyPath="/permissions"
+							isMinimized={isMinimized}
+						/>
+					</>
 				)}
 			</div>
-			<div className="xl:hidden -xl:flex flex-col gap-3">
+			<div className="-xl:flex flex-col gap-3 xl:hidden">
 				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={true} />
 				<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized={true} />
 				<Nav disabled={disableNavigation} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" isMinimized={true} />
+				{checkAccess(user, getTypesOfUser(["agent"]), "viewStats") && (
 					<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={true} />
+				)}
+				{checkAccess(user, getTypesOfUser(["agent"]), "viewRecords") && (
 					<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={true} />
-				{userType !== "student" && (
+				)}
+				{checkAccess(user, getTypesOfUser(["student"])) && (
 					<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} />
+				{checkAccess(user, getTypesOfUser(["student"])) && (
+					<Nav disabled={disableNavigation} Icon={BsShieldFill} label="Permissions" path={path} keyPath="/permissions" isMinimized={true} />
+				)}
+				{checkAccess(user, ["developer"]) && (
+					<>
+						<Nav
+							disabled={disableNavigation}
+							Icon={BsCloudFill}
+							label="Generation"
+							path={path}
+							keyPath="/generation"
+							isMinimized={true}
+						/>
+						<Nav
+							disabled={disableNavigation}
+							Icon={BsFileLock}
+							label="Permissions"
+							path={path}
+							keyPath="/permissions"
+							isMinimized={true}
+						/>
+					</>
 				)}
 			</div>
 
-			<div className="flex flex-col gap-0 absolute bottom-12">
+			<div className="fixed bottom-12 flex flex-col gap-0">
 				<div
 					role="button"
 					tabIndex={1}
 					onClick={toggleMinimize}
 					className={clsx(
-						"p-4 rounded-full flex gap-4 items-center cursor-pointer text-black hover:text-mti-rose -xl:hidden transition duration-300 ease-in-out",
+						"hover:text-mti-rose -xl:hidden flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
 						isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
 					)}>
 					{isMinimized ? <BsChevronBarRight size={24} /> : <BsChevronBarLeft size={24} />}
@@ -161,11 +216,11 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 					tabIndex={1}
 					onClick={focusMode ? () => {} : logout}
 					className={clsx(
-						"p-4 rounded-full flex gap-4 items-center cursor-pointer text-black hover:text-mti-rose transition duration-300 ease-in-out",
+						"hover:text-mti-rose flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
 						isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
 					)}>
 					<RiLogoutBoxFill size={24} />
-					{!isMinimized && <span className="text-lg font-medium -xl:hidden">Log Out</span>}
+					{!isMinimized && <span className="-xl:hidden text-lg font-medium">Log Out</span>}
 				</div>
 			</div>
 			{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}

src/components/Solutions/FillBlanks.tsx

@@ -5,12 +5,30 @@ import {CommonProps} from ".";
 import {Fragment} from "react";
 import Button from "../Low/Button";
 
-export default function FillBlanksSolutions({id, type, prompt, solutions, text, userSolutions, onNext, onBack}: FillBlanksExercise & CommonProps) {
+export default function FillBlanksSolutions({
+	id,
+	type,
+	prompt,
+	solutions,
+	words,
+	text,
+	userSolutions,
+	onNext,
+	onBack,
+}: FillBlanksExercise & CommonProps) {
 	const calculateScore = () => {
 		const total = text.match(/({{\d+}})/g)?.length || 0;
-		const correct = userSolutions.filter(
-			(x) => solutions.find((y) => x.id.toString() === y.id.toString())?.solution === x.solution.toLowerCase() || false,
-		).length;
+		const correct = userSolutions.filter((x) => {
+			const solution = solutions.find((y) => x.id.toString() === y.id.toString())?.solution.toLowerCase();
+			if (!solution) return false;
+
+			const option = words.find((w) =>
+				typeof w === "string" ? w.toLowerCase() === x.solution.toLowerCase() : w.letter.toLowerCase() === x.solution.toLowerCase(),
+			);
+			if (!option) return false;
+
+			return solution === (typeof option === "string" ? option.toLowerCase() : option.word.toLowerCase());
+		}).length;
 		const missing = total - userSolutions.filter((x) => solutions.find((y) => x.id.toString() === y.id.toString())).length;
 
 		return {total, correct, missing};
@@ -28,14 +46,21 @@ 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>
 						);
 					}
 
-					if (userSolution.solution === solution.solution) {
+					const userSolutionWord = words.find((w) =>
+						typeof w === "string"
+							? w.toLowerCase() === userSolution.solution.toLowerCase()
+							: w.letter.toLowerCase() === userSolution.solution.toLowerCase(),
+					);
+					const userSolutionText = typeof userSolutionWord === "string" ? userSolutionWord : userSolutionWord?.word;
+
+					if (userSolutionText === solution.solution) {
 						return (
 							<button
 								className={clsx(
@@ -47,7 +72,7 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, text,
 						);
 					}
 
-					if (userSolution.solution !== solution.solution) {
+					if (userSolutionText !== solution.solution) {
 						return (
 							<>
 								<button
@@ -55,7 +80,7 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, text,
 										"rounded-full hover:text-white hover:bg-mti-rose transition duration-300 ease-in-out my-1 mr-1",
 										userSolution && "px-5 py-2 text-center text-white bg-mti-rose-light",
 									)}>
-									{userSolution.solution}
+									{userSolutionText}
 								</button>
 
 								<button
@@ -75,7 +100,7 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, text,
 
 	return (
 		<>
-			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
+			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>
@@ -99,7 +124,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,10 @@ 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";
+import Modal from "../Modal";
+import ReactDiffViewer, {DiffMethod} from "react-diff-viewer";
 
 const Waveform = dynamic(() => import("../Waveform"), {ssr: false});
 
@@ -20,9 +24,10 @@ export default function InteractiveSpeaking({
 	onBack,
 }: InteractiveSpeakingExercise & CommonProps) {
 	const [solutionsURL, setSolutionsURL] = useState<string[]>([]);
+	const [diffNumber, setDiffNumber] = useState<0 | 1 | 2 | 3>(0);
 
 	useEffect(() => {
-		if (userSolutions && userSolutions.length > 0) {
+		if (userSolutions && userSolutions.length > 0 && userSolutions[0].solution) {
 			Promise.all(userSolutions[0].solution.map((x) => axios.post(`/api/speaking`, {path: x.answer}, {responseType: "arraybuffer"}))).then(
 				(values) => {
 					setSolutionsURL(
@@ -40,6 +45,44 @@ export default function InteractiveSpeaking({
 
 	return (
 		<>
+			<Modal title={`Correction (Prompt ${diffNumber})`} isOpen={diffNumber !== 0} onClose={() => setDiffNumber(0)}>
+				<>
+					{userSolutions &&
+						userSolutions.length > 0 &&
+						diffNumber !== 0 &&
+						userSolutions[0].evaluation &&
+						userSolutions[0].evaluation[`transcript_${diffNumber}`] &&
+						userSolutions[0].evaluation[`fixed_text_${diffNumber}`] && (
+							<div className="w-full h-full rounded-xl overflow-hidden flex flex-col mt-4">
+								<div className="w-full grid grid-cols-2 bg-neutral-100">
+									<span className="p-3 font-medium text-lg border-r border-r-neutral-200">Transcript</span>
+									<span className="p-3 font-medium text-lg border-l border-l-neutral-200">Recommended Improvements</span>
+								</div>
+								<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].evaluation[`transcript_${diffNumber}`]?.replaceAll("\\n", "\n")}
+									newValue={userSolutions[0].evaluation[`fixed_text_${diffNumber}`]?.replaceAll("\\n", "\n")}
+									splitView
+									hideLineNumbers
+									showDiffOnly={false}
+								/>
+							</div>
+						)}
+				</>
+			</Modal>
+
 			<div className="flex flex-col h-full w-full gap-8 mb-20">
 				<div className="flex flex-col w-full gap-8 bg-mti-gray-smoke rounded-xl py-8 pb-12 px-16">
 					<div className="flex flex-col gap-3">
@@ -47,7 +90,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,30 +104,148 @@ 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 flex-col gap-4">
 								<div className="flex gap-8 items-center justify-center py-8">
 									<Waveform audio={x} waveColor="#FCDDEC" progressColor="#EF5DA8" />
 								</div>
+								{userSolutions &&
+									userSolutions.length > 0 &&
+									userSolutions[0].evaluation &&
+									userSolutions[0].evaluation[`transcript_${(index + 1) as 1 | 2 | 3}`] &&
+									userSolutions[0].evaluation[`fixed_text_${(index + 1) as 1 | 2 | 3}`] && (
+										<Button
+											className="w-full max-w-[180px] !py-2 self-center"
+											color="pink"
+											variant="outline"
+											onClick={() => setDiffNumber((index + 1) as 1 | 2 | 3)}>
+											View Correction
+										</Button>
+									)}
 							</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) => (
-									<div className="bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2" key={key}>
-										{key}: Level {userSolutions[0].evaluation!.task_response[key]}
+								{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => {
+									const taskResponse = userSolutions[0].evaluation!.task_response[key];
+									const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
+
+									return (
+										<div className={clsx("bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2")} key={key}>
+											{key}: Level {grade}
 										</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 &&
+							Object.keys(userSolutions[0].evaluation).filter((x) => x.startsWith("perfect_answer")).length === 3 ? (
+								<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
+											className={({selected}) =>
+												clsx(
+													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
+													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
+													"transition duration-300 ease-in-out",
+													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
+												)
+											}>
+											Global Overview
+										</Tab>
+									</Tab.List>
+									<Tab.Panels>
+										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<span className="w-full h-full min-h-fit cursor-text">{userSolutions[0].evaluation!.comment}</span>
+										</Tab.Panel>
+										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
+												{userSolutions[0].evaluation!.perfect_answer_1!.answer.replaceAll(/\s{2,}/g, "\n\n")}
+											</span>
+										</Tab.Panel>
+										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
+												{userSolutions[0].evaluation!.perfect_answer_2!.answer.replaceAll(/\s{2,}/g, "\n\n")}
+											</span>
+										</Tab.Panel>
+										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
+												{userSolutions[0].evaluation!.perfect_answer_3!.answer.replaceAll(/\s{2,}/g, "\n\n")}
+											</span>
+										</Tab.Panel>
+										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<div className="flex flex-col gap-4">
+												{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => {
+													const taskResponse = userSolutions[0].evaluation!.task_response[key];
+													const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
+
+													return (
+														<div key={key} className="flex flex-col gap-2">
+															<span className={"font-semibold"}>
+																{key}: Level {grade}
+															</span>
+															{typeof taskResponse !== "number" && <span>{taskResponse.comment}</span>}
+														</div>
+													);
+												})}
+											</div>
+										</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>
@@ -111,7 +272,11 @@ export default function InteractiveSpeaking({
 						onNext({
 							exercise: id,
 							solutions: userSolutions,
-							score: {total: 100, missing: 0, correct: speakingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0},
+							score: {
+								total: 100,
+								missing: 0,
+								correct: userSolutions[0]?.evaluation ? speakingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0 : 0,
+							},
 							type,
 						})
 					}

src/components/Solutions/MatchSentences.tsx

@@ -1,4 +1,4 @@
-import {MatchSentencesExercise} from "@/interfaces/exam";
+import {MatchSentenceExerciseSentence, MatchSentencesExercise} from "@/interfaces/exam";
 import clsx from "clsx";
 import LineTo from "react-lineto";
 import {CommonProps} from ".";
@@ -9,6 +9,48 @@ import {Fragment} from "react";
 import Button from "../Low/Button";
 import Xarrow from "react-xarrows";
 
+function QuestionSolutionArea({
+	question,
+	userSolution,
+}: {
+	question: MatchSentenceExerciseSentence;
+	userSolution?: {question: string; option: string};
+}) {
+	return (
+		<div className="grid grid-cols-3 gap-4">
+			<div className="flex items-center gap-3 cursor-pointer col-span-2">
+				<button
+					className={clsx(
+						"text-white w-8 h-8 rounded-full z-10",
+						!userSolution
+							? "bg-mti-gray-davy"
+							: userSolution.option.toString() === question.solution.toString()
+							? "bg-mti-purple"
+							: "bg-mti-rose",
+						"transition duration-300 ease-in-out",
+					)}>
+					{question.id}
+				</button>
+				<span>{question.sentence}</span>
+			</div>
+			<div
+				className={clsx(
+					"w-56 h-10 border rounded-xl items-center justify-center flex gap-3 px-2",
+					!userSolution
+						? "border-mti-gray-davy"
+						: userSolution.option.toString() === question.solution.toString()
+						? "border-mti-purple"
+						: "border-mti-rose",
+				)}>
+				<span className="line-through">
+					{userSolution && userSolution?.option.toString() !== question.solution.toString() && `Paragraph ${userSolution.option}`}
+				</span>
+				<span className="font-semibold">Paragraph {question.solution}</span>
+			</div>
+		</div>
+	);
+}
+
 export default function MatchSentencesSolutions({
 	id,
 	type,
@@ -31,7 +73,7 @@ export default function MatchSentencesSolutions({
 
 	return (
 		<>
-			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
+			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>
@@ -40,63 +82,24 @@ export default function MatchSentencesSolutions({
 						</Fragment>
 					))}
 				</span>
-				<div className="flex gap-8 w-full items-center justify-between bg-mti-gray-smoke rounded-xl px-24 py-6">
+				<div className="flex flex-col gap-8 w-full items-center justify-between bg-mti-gray-smoke rounded-xl px-24 py-6">
 					<div className="flex flex-col gap-4">
-						{sentences.map(({sentence, id, solution}) => (
-							<div key={`question_${id}`} className="flex items-center justify-end gap-2 cursor-pointer">
-								<span>{sentence} </span>
-								<button
-									id={id}
-									className={clsx(
-										"w-8 h-8 rounded-full z-10 text-white",
-										"transition duration-300 ease-in-out",
-										!userSolutions.find((x) => x.question.toString() === id.toString()) && "!bg-mti-red",
-										userSolutions.find((x) => x.question.toString() === id.toString())?.option === solution && "bg-mti-purple",
-										userSolutions.find((x) => x.question.toString() === id.toString())?.option !== solution && "bg-mti-rose",
-									)}>
-									{id}
-								</button>
-							</div>
-						))}
-					</div>
-					<div className="flex flex-col gap-4">
-						{options.map(({sentence, id}) => (
-							<div key={`answer_${id}`} className={clsx("flex items-center justify-start gap-2 cursor-pointer")}>
-								<button
-									id={id}
-									className={clsx(
-										"bg-mti-purple-ultralight text-mti-purple hover:text-white hover:bg-mti-purple w-8 h-8 rounded-full z-10",
-										"transition duration-300 ease-in-out",
-									)}>
-									{id}
-								</button>
-								<span>{sentence}</span>
-							</div>
-						))}
-					</div>
-					{userSolutions &&
-						sentences.map((sentence, index) => (
-							<Xarrow
-								key={index}
-								start={sentence.id}
-								end={sentence.solution}
-								lineColor={
-									!userSolutions.find((x) => x.question === sentence.id)
-										? "#CC5454"
-										: userSolutions.find((x) => x.question === sentence.id)?.option === sentence.solution
-										? "#7872BF"
-										: "#CC5454"
-								}
-								showHead={false}
+						{sentences.map((question) => (
+							<QuestionSolutionArea
+								question={question}
+								userSolution={userSolutions.find((x) => x.question.toString() === question.id.toString())}
+								key={`question_${question.id}`}
 							/>
 						))}
 					</div>
+				</div>
+
 				<div className="flex gap-4 items-center">
 					<div className="flex gap-2 items-center">
 						<div className="w-4 h-4 rounded-full bg-mti-purple" /> Correct
 					</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,20 +1,30 @@
 /* eslint-disable @next/next/no-img-element */
 import {MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam";
+import useExamStore from "@/stores/examStore";
 import clsx from "clsx";
 import {useEffect, useState} from "react";
+import reactStringReplace from "react-string-replace";
 import {CommonProps} from ".";
 import Button from "../Low/Button";
 
 function Question({
+	id,
 	variant,
 	prompt,
 	solution,
 	options,
 	userSolution,
 }: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) {
+	const renderPrompt = (prompt: string) => {
+		return reactStringReplace(prompt, /((<u>)[\w\s']+(<\/u>))/g, (match) => {
+			const word = match.replaceAll("<u>", "").replaceAll("</u>", "");
+			return word.length > 0 ? <u>{word}</u> : null;
+		});
+	};
+
 	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) {
@@ -26,7 +36,15 @@ function Question({
 
 	return (
 		<div className="flex flex-col items-center gap-4">
-			<span>{prompt}</span>
+			{isNaN(Number(id)) ? (
+				<span>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")} </span>
+			) : (
+				<span className="">
+					<>
+						{id} - <span>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")} </span>
+					</>
+				</span>
+			)}
 			<div className="grid grid-cols-4 gap-4 place-items-center">
 				{variant === "image" &&
 					options.map((option) => (
@@ -54,17 +72,8 @@ function Question({
 	);
 }
 
-export default function MultipleChoice({
-	id,
-	type,
-	prompt,
-	questions,
-	userSolutions,
-	updateIndex,
-	onNext,
-	onBack,
-}: MultipleChoiceExercise & CommonProps) {
-	const [questionIndex, setQuestionIndex] = useState(0);
+export default function MultipleChoice({id, type, prompt, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
+	const {questionIndex, setQuestionIndex} = useExamStore((state) => state);
 
 	const calculateScore = () => {
 		const total = questions.length;
@@ -76,15 +85,11 @@ export default function MultipleChoice({
 		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});
 		} else {
-			setQuestionIndex((prev) => prev + 1);
+			setQuestionIndex(questionIndex + 1);
 		}
 	};
 
@@ -92,7 +97,7 @@ export default function MultipleChoice({
 		if (questionIndex === 0) {
 			onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type});
 		} else {
-			setQuestionIndex((prev) => prev - 1);
+			setQuestionIndex(questionIndex - 1);
 		}
 	};
 
@@ -114,7 +119,7 @@ export default function MultipleChoice({
 						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,14 +6,23 @@ 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";
+import Modal from "../Modal";
+import {BsQuestionCircleFill} from "react-icons/bs";
+import ReactDiffViewer, {DiffMethod} from "react-diff-viewer";
 
 const Waveform = dynamic(() => import("../Waveform"), {ssr: false});
 
 export default function Speaking({id, type, title, video_url, text, prompts, userSolutions, onNext, onBack}: SpeakingExercise & CommonProps) {
 	const [solutionURL, setSolutionURL] = useState<string>();
+	const [showDiff, setShowDiff] = useState(false);
 
 	useEffect(() => {
-		if (userSolutions && userSolutions.length > 0) {
+		if (userSolutions && userSolutions.length > 0 && userSolutions[0].solution) {
+			const solution = userSolutions[0].solution;
+
+			if (solution.startsWith("https://")) return setSolutionURL(solution);
 			axios.post(`/api/speaking`, {path: userSolutions[0].solution}, {responseType: "arraybuffer"}).then(({data}) => {
 				const blob = new Blob([data], {type: "audio/wav"});
 				const url = URL.createObjectURL(blob);
@@ -25,6 +34,42 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
 
 	return (
 		<>
+			<Modal title="Correction" isOpen={showDiff} onClose={() => setShowDiff(false)}>
+				<>
+					{userSolutions &&
+						userSolutions.length > 0 &&
+						userSolutions[0].evaluation?.transcript_1 &&
+						userSolutions[0].evaluation?.fixed_text_1 && (
+							<div className="w-full h-full rounded-xl overflow-hidden flex flex-col mt-4">
+								<div className="w-full grid grid-cols-2 bg-neutral-100">
+									<span className="p-3 font-medium text-lg border-r border-r-neutral-200">Transcript</span>
+									<span className="p-3 font-medium text-lg border-l border-l-neutral-200">Recommended Improvements</span>
+								</div>
+								<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].evaluation.transcript_1.replaceAll("\\n", "\n")}
+									newValue={userSolutions[0].evaluation.fixed_text_1.replaceAll("\\n", "\n")}
+									splitView
+									hideLineNumbers
+									showDiffOnly={false}
+								/>
+							</div>
+						)}
+				</>
+			</Modal>
+
 			<div className="flex flex-col h-full w-full gap-8 mb-20">
 				<div className="flex flex-col w-full gap-2 bg-mti-gray-smoke rounded-xl py-8 px-16">
 					<div className="flex flex-col gap-3">
@@ -63,24 +108,109 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
 					</div>
 				</div>
 
-				<div className="w-full h-full flex flex-col gap-8">
-					<div 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="w-full h-full flex flex-col gap-8 relative">
+					<div className="w-full p-4 px-8 bg-transparent border-2 border-mti-gray-platinum rounded-2xl flex-col gap-8 items-center relative">
 						<div className="flex gap-8 items-center justify-center py-8">
 							{solutionURL && <Waveform audio={solutionURL} waveColor="#FCDDEC" progressColor="#EF5DA8" />}
+
+							{userSolutions &&
+								userSolutions.length > 0 &&
+								userSolutions[0].evaluation?.transcript_1 &&
+								userSolutions[0].evaluation?.fixed_text_1 && (
+									<Button className="w-full max-w-[180px] !py-2" color="pink" variant="outline" onClick={() => setShowDiff(true)}>
+										View Correction
+									</Button>
+								)}
 						</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) => (
-									<div className="bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2" key={key}>
-										{key}: Level {userSolutions[0].evaluation!.task_response[key]}
+								{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => {
+									const taskResponse = userSolutions[0].evaluation!.task_response[key];
+									const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
+
+									return (
+										<div className={clsx("bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2")} key={key}>
+											{key}: Level {grade}
 										</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.perfect_answer_1) ? (
+								<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
+											className={({selected}) =>
+												clsx(
+													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
+													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
+													"transition duration-300 ease-in-out",
+													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
+												)
+											}>
+											Global Overview
+										</Tab>
+									</Tab.List>
+									<Tab.Panels>
+										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<span className="w-full h-full min-h-fit cursor-text">{userSolutions[0].evaluation!.comment}</span>
+										</Tab.Panel>
+										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
+												{userSolutions[0].evaluation!.perfect_answer &&
+													userSolutions[0].evaluation!.perfect_answer.replaceAll(/\s{2,}/g, "\n\n")}
+												{userSolutions[0].evaluation!.perfect_answer_1 &&
+													userSolutions[0].evaluation!.perfect_answer_1.replaceAll(/\s{2,}/g, "\n\n")}
+											</span>
+										</Tab.Panel>
+										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<div className="flex flex-col gap-4">
+												{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => {
+													const taskResponse = userSolutions[0].evaluation!.task_response[key];
+													const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
+
+													return (
+														<div key={key} className="flex flex-col gap-2">
+															<span className={"font-semibold"}>
+																{key}: Level {grade}
+															</span>
+															{typeof taskResponse !== "number" && <span>{taskResponse.comment}</span>}
+														</div>
+													);
+												})}
+											</div>
+										</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>
@@ -107,7 +237,11 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
 						onNext({
 							exercise: id,
 							solutions: userSolutions,
-							score: {total: 100, missing: 0, correct: speakingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0},
+							score: {
+								total: 100,
+								missing: 0,
+								correct: userSolutions[0]?.evaluation ? speakingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0 : 0,
+							},
 							type,
 						})
 					}

src/components/Solutions/TrueFalse.tsx

@@ -33,12 +33,12 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
 			return "rose";
 		}
 
-		return "red";
+		return "gray";
 	};
 
 	return (
 		<>
-			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
+			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>
@@ -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";
@@ -107,7 +107,7 @@ export default function WriteBlanksSolutions({
 
 	return (
 		<>
-			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
+			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>
@@ -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,22 @@
 /* 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";
+import useUser from "@/hooks/useUser";
+import AIDetection from "../AIDetection";
 
 export default function Writing({id, type, prompt, attachment, userSolutions, onNext, onBack}: WritingExercise & CommonProps) {
 	const [isModalOpen, setIsModalOpen] = useState(false);
+	const [showDiff, setShowDiff] = useState(false);
+
+	const {user} = useUser();
+
+	const aiEval = userSolutions && userSolutions.length > 0 ? userSolutions[0].evaluation?.ai_detection : undefined;
 
 	return (
 		<>
@@ -68,29 +72,156 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 				</div>
 
 				<div className="w-full h-full flex flex-col gap-8">
-					{userSolutions && (
-						<div className="flex flex-col gap-4 w-full">
+					{userSolutions && userSolutions.length > 0 && (
+						<div className="flex flex-col gap-4 w-full relative">
+							{!showDiff && (
+								<>
 									<span>Your answer:</span>
-							<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"
-								contentEditable={false}
-								readOnly
-								value={userSolutions[0]!.solution}
+									<div className="w-full h-full min-h-[320px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl whitespace-pre-wrap">
+										{userSolutions[0]!.solution.replaceAll("\\n", "\n")}
+									</div>
+								</>
+							)}
+							{showDiff && userSolutions[0].evaluation && (
+								<>
+									<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 && userSolutions.length > 0 && (
+							{userSolutions[0].solution && userSolutions[0].evaluation?.fixed_text && (
+								<Button
+									color="green"
+									variant="outline"
+									className="w-full max-w-[200px] self-end absolute -top-4 right-0 !py-2"
+									onClick={() => setShowDiff((prev) => !prev)}>
+									{showDiff ? "View answer" : "View correction"}
+								</Button>
+							)}
+						</div>
+					)}
+					{userSolutions && userSolutions.length > 0 && userSolutions[0].evaluation && typeof userSolutions[0].evaluation !== "string" && (
 						<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) => (
-									<div className="bg-ielts-writing text-ielts-writing-light rounded-xl px-4 py-2" key={key}>
-										{key}: Level {userSolutions[0].evaluation!.task_response[key]}
+								{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => {
+									const taskResponse = userSolutions[0].evaluation!.task_response[key];
+									const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
+
+									return (
+										<div className={clsx("bg-ielts-writing text-ielts-writing-light rounded-xl px-4 py-2")} key={key}>
+											{key}: Level {grade}
 										</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 ? (
+								<Tab.Group>
+									<Tab.List className="flex space-x-1 rounded-xl bg-ielts-writing/20 p-1">
+										<Tab
+											className={({selected}) =>
+												clsx(
+													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/80",
+													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing focus:outline-none focus:ring-2",
+													"transition duration-300 ease-in-out",
+													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-writing",
+												)
+											}>
+											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
+											className={({selected}) =>
+												clsx(
+													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/80",
+													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing focus:outline-none focus:ring-2",
+													"transition duration-300 ease-in-out",
+													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-writing",
+												)
+											}>
+											Global Overview
+										</Tab>
+										{aiEval && user?.type !== "student" && (
+											<Tab
+												className={({selected}) =>
+													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",
+													)
+												}>
+												AI Use
+											</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.Panel className="w-full bg-ielts-writing/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<div className="flex flex-col gap-4">
+												{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => {
+													const taskResponse = userSolutions[0].evaluation!.task_response[key];
+													const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
+
+													return (
+														<div key={key} className="flex flex-col gap-2">
+															<span className={"font-semibold"}>
+																{key}: Level {grade}
+															</span>
+															{typeof taskResponse !== "number" && <span>{taskResponse.comment}</span>}
+														</div>
+													);
+												})}
+											</div>
+										</Tab.Panel>
+										{aiEval && user?.type !== "student" && (
+											<Tab.Panel className="w-full bg-ielts-writing/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+												<AIDetection {...aiEval} />
+											</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>
@@ -117,7 +248,11 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 						onNext({
 							exercise: id,
 							solutions: userSolutions,
-							score: {total: 100, missing: 0, correct: writingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0},
+							score: {
+								total: 100,
+								missing: 0,
+								correct: userSolutions[0]?.evaluation ? writingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0 : 0,
+							},
 							type,
 						})
 					}

src/components/Solutions/index.tsx

@@ -22,7 +22,6 @@ 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;
 }
@@ -30,20 +29,20 @@ export interface CommonProps {
 export const renderSolution = (exercise: Exercise, onNext: () => void, onBack: () => void, updateIndex?: (internalIndex: number) => void) => {
 	switch (exercise.type) {
 		case "fillBlanks":
-			return <FillBlanks {...(exercise as FillBlanksExercise)} onNext={onNext} onBack={onBack} />;
+			return <FillBlanks key={exercise.id} {...(exercise as FillBlanksExercise)} onNext={onNext} onBack={onBack} />;
 		case "trueFalse":
-			return <TrueFalseSolution {...(exercise as TrueFalseExercise)} onNext={onNext} onBack={onBack} />;
+			return <TrueFalseSolution key={exercise.id} {...(exercise as TrueFalseExercise)} onNext={onNext} onBack={onBack} />;
 		case "matchSentences":
-			return <MatchSentences {...(exercise as MatchSentencesExercise)} onNext={onNext} onBack={onBack} />;
+			return <MatchSentences key={exercise.id} {...(exercise as MatchSentencesExercise)} onNext={onNext} onBack={onBack} />;
 		case "multipleChoice":
-			return <MultipleChoice {...(exercise as MultipleChoiceExercise)} updateIndex={updateIndex} onNext={onNext} onBack={onBack} />;
+			return <MultipleChoice key={exercise.id} {...(exercise as MultipleChoiceExercise)} 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

@@ -1,5 +1,11 @@
 import useStats from "@/hooks/useStats";
-import {EMPLOYMENT_STATUS, User} from "@/interfaces/user";
+import {
+  CorporateInformation,
+  CorporateUser,
+  EMPLOYMENT_STATUS,
+  User,
+  Type,
+} from "@/interfaces/user";
 import { groupBySession, averageScore } from "@/utils/stats";
 import { RadioGroup } from "@headlessui/react";
 import axios from "axios";
@@ -8,7 +14,13 @@ import moment from "moment";
 import { Divider } from "primereact/divider";
 import { useEffect, useState } from "react";
 import ReactDatePicker from "react-datepicker";
-import {BsFileEarmarkText, BsPencil, BsStar} from "react-icons/bs";
+import {
+  BsFileEarmarkText,
+  BsPencil,
+  BsPerson,
+  BsPersonAdd,
+  BsStar,
+} from "react-icons/bs";
 import { toast } from "react-toastify";
 import Button from "./Low/Button";
 import Checkbox from "./Low/Checkbox";
@@ -19,14 +31,21 @@ import Select from "react-select";
 import useUsers from "@/hooks/useUsers";
 import { USER_TYPE_LABELS } from "@/resources/user";
 import { CURRENCIES } from "@/resources/paypal";
+import useCodes from "@/hooks/useCodes";
+import { checkAccess, getTypesOfUser } from "@/utils/permissions";
+import { PERMISSIONS } from "@/constants/userPermissions";
+import { PermissionType } from "@/interfaces/permissions";
 
 const expirationDateColor = (date: Date) => {
   const momentDate = moment(date);
   const today = moment(new Date());
 
-	if (today.add(1, "days").isAfter(momentDate)) return "!bg-mti-red-ultralight border-mti-red-light";
-	if (today.add(3, "days").isAfter(momentDate)) return "!bg-mti-rose-ultralight border-mti-rose-light";
-	if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
+  if (today.add(1, "days").isAfter(momentDate))
+    return "!bg-mti-red-ultralight border-mti-red-light";
+  if (today.add(3, "days").isAfter(momentDate))
+    return "!bg-mti-rose-ultralight border-mti-rose-light";
+  if (today.add(7, "days").isAfter(momentDate))
+    return "!bg-mti-orange-ultralight border-mti-orange-light";
 };
 
 interface Props {
@@ -36,33 +55,112 @@ interface Props {
   onViewStudents?: () => void;
   onViewTeachers?: () => void;
   onViewCorporate?: () => void;
+  disabled?: boolean;
+  disabledFields?: {
+    countryManager?: boolean;
+  };
 }
 
-const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers, onViewCorporate}: Props) => {
-	const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
+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,
+  disabledFields = {},
+}: Props) => {
+  const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(
+    user.subscriptionExpirationDate
+  );
   const [type, setType] = useState(user.type);
   const [status, setStatus] = useState(user.status);
   const [referralAgentLabel, setReferralAgentLabel] = useState<string>();
-	const [position, setPosition] = useState<string | undefined>(user.type === "corporate" ? user.demographicInformation?.position : undefined);
+  const [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 [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,
+      ? user.agentInformation?.companyName
+      : undefined
+  );
+  const [arabName, setArabName] = useState(
+    user.type === "agent" ? user.agentInformation?.companyArabName : undefined
   );
   const [commercialRegistration, setCommercialRegistration] = useState(
-		user.type === "agent" ? user.agentInformation.commercialRegistration : undefined,
+    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 [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 : undefined);
-	const [monthlyDuration, setMonthlyDuration] = useState(user.type === "corporate" ? user.corporateInformation?.monthlyDuration : undefined);
-
   const { stats } = useStats(user.id);
   const { users } = useUsers();
+  const { codes } = useCodes(user.id);
 
   useEffect(() => {
     if (users && users.length > 0) {
@@ -78,8 +176,11 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 
   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;
+      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}`, {
@@ -92,6 +193,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
             ? {
                 companyName,
                 commercialRegistration,
+                arabName,
               }
             : undefined,
         corporateInformation:
@@ -100,12 +202,15 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
                 referralAgent,
                 monthlyDuration,
                 companyInformation: {
-									companyName,
+                  name: companyName,
                   userAmount,
                 },
                 payment: {
                   value: paymentValue,
                   currency: paymentCurrency,
+                  ...(referralAgent === ""
+                    ? {}
+                    : { commission: commissionValue }),
                 },
               }
             : undefined,
@@ -119,49 +224,93 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
       });
   };
 
-	return (
-		<>
-			<ProfileSummary
-				user={user}
-				items={[
+  const generalProfileItems = [
     {
-						icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+      icon: (
+        <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
+      ),
       value: Object.keys(groupBySession(stats)).length,
       label: "Exams",
     },
     {
       icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
       value: stats.length,
-						label: "Exercises",
+      label: "Modules",
     },
     {
       icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
       value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
       label: "Average Score",
     },
-				]}
+  ];
+
+  const corporateProfileItems =
+    user.type === "corporate"
+      ? [
+          {
+            icon: (
+              <BsPerson className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
+            ),
+            value: codes.length,
+            label: "Users Used",
+          },
+          {
+            icon: (
+              <BsPersonAdd className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
+            ),
+            value: user.corporateInformation.companyInformation.userAmount,
+            label: "Number of Users",
+          },
+        ]
+      : [];
+
+  const updateUserPermission = PERMISSIONS.updateUser[user.type] as {
+    list: Type[];
+    perm: PermissionType;
+  };
+  return (
+    <>
+      <ProfileSummary
+        user={user}
+        items={
+          user.type === "corporate"
+            ? corporateProfileItems
+            : generalProfileItems
+        }
       />
 
       {user.type === "agent" && (
         <>
-					<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full">
             <Input
-							label="Company Name"
+              label="Company Name (Arabic)"
+              type="text"
+              name="arabName"
+              onChange={setArabName}
+              placeholder="Enter their company's name in arabic"
+              defaultValue={arabName}
+              required
+              disabled={disabled}
+            />
+            <Input
+              label="Company Name (English)"
               type="text"
               name="companyName"
               onChange={setCompanyName}
-							placeholder="Enter company name"
+              placeholder="Enter their company's name in english"
               defaultValue={companyName}
               required
+              disabled={disabled}
             />
             <Input
               label="Commercial Registration"
               type="text"
               name="commercialRegistration"
               onChange={setCommercialRegistration}
-							placeholder="Enter company name"
+              placeholder="Enter commercial registration"
               defaultValue={commercialRegistration}
               required
+              disabled={disabled}
             />
           </div>
           <Divider className="w-full !m-0" />
@@ -171,12 +320,13 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
         <>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
             <Input
-							label="Company Name"
+              label="Corporate Name"
               type="text"
               name="companyName"
               onChange={setCompanyName}
-							placeholder="Enter company name"
+              placeholder="Enter corporate name"
               defaultValue={companyName}
+              disabled={disabled}
             />
             <Input
               label="Number of Users"
@@ -185,6 +335,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
               onChange={(e) => setUserAmount(e ? parseInt(e) : undefined)}
               placeholder="Enter number of users"
               defaultValue={userAmount}
+              disabled={disabled}
             />
             <Input
               label="Monthly Duration"
@@ -193,23 +344,35 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
               onChange={(e) => setMonthlyDuration(e ? parseInt(e) : undefined)}
               placeholder="Enter monthly duration"
               defaultValue={monthlyDuration}
+              disabled={disabled}
+            />
+            <div className="flex flex-col gap-3 w-full lg:col-span-3">
+              <label className="font-normal text-base text-mti-gray-dim">
+                Pricing
+              </label>
+              <div className="w-full grid grid-cols-6 gap-2">
+                <Input
+                  name="paymentValue"
+                  onChange={(e) => setPaymentValue(e ? parseInt(e) : undefined)}
+                  type="number"
+                  defaultValue={paymentValue || 0}
+                  className="col-span-3"
+                  disabled={disabled}
                 />
-
-						<div className="flex flex-col gap-3 w-full">
-							<label className="font-normal text-base text-mti-gray-dim">Country Manager</label>
-							{referralAgentLabel && (
                 <Select
-									className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
-									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)}
+                  className={clsx(
+                    "px-4 py-4 col-span-3 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
+                    disabled &&
+                      "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed"
+                  )}
+                  options={CURRENCIES_OPTIONS}
+                  value={CURRENCIES_OPTIONS.find(
+                    (c) => c.value === paymentCurrency
+                  )}
+                  onChange={(value) => setPaymentCurrency(value?.value)}
+                  menuPortalTarget={document?.body}
                   styles={{
+                    menuPortal: (base) => ({ ...base, zIndex: 9999 }),
                     control: (styles) => ({
                       ...styles,
                       paddingLeft: "4px",
@@ -221,35 +384,99 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
                     }),
                     option: (styles, state) => ({
                       ...styles,
-											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+                      backgroundColor: state.isFocused
+                        ? "#D5D9F0"
+                        : state.isSelected
+                        ? "#7872BF"
+                        : "white",
                       color: state.isFocused ? "black" : styles.color,
                     }),
                   }}
+                  isDisabled={disabled}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="flex gap-3 w-full">
+            <div className="flex flex-col gap-3 w-8/12">
+              <label className="font-normal text-base text-mti-gray-dim">
+                Country Manager
+              </label>
+              {referralAgentLabel && (
+                <Select
+                  className={clsx(
+                    "px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
+                    (checkAccess(
+                      loggedInUser,
+                      getTypesOfUser(["developer", "admin"])
+                    ) ||
+                      disabledFields.countryManager) &&
+                      "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed"
+                  )}
+                  options={[
+                    { value: "", label: "No referral" },
+                    ...users
+                      .filter((u) => u.type === "agent")
+                      .map((x) => ({
+                        value: x.id,
+                        label: `${x.name} - ${x.email}`,
+                      })),
+                  ]}
+                  defaultValue={{
+                    value: referralAgent,
+                    label: referralAgentLabel,
+                  }}
+                  menuPortalTarget={document?.body}
+                  onChange={(value) => setReferralAgent(value?.value)}
+                  styles={{
+                    menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                    control: (styles) => ({
+                      ...styles,
+                      paddingLeft: "4px",
+                      border: "none",
+                      outline: "none",
+                      ":focus": {
+                        outline: "none",
+                      },
+                    }),
+                    option: (styles, state) => ({
+                      ...styles,
+                      backgroundColor: state.isFocused
+                        ? "#D5D9F0"
+                        : state.isSelected
+                        ? "#7872BF"
+                        : "white",
+                      color: state.isFocused ? "black" : styles.color,
+                    }),
+                  }}
+                  // editing country manager should only be available for dev/admin
+                  isDisabled={
+                    checkAccess(
+                      loggedInUser,
+                      getTypesOfUser(["developer", "admin"])
+                    ) || disabledFields.countryManager
+                  }
                 />
               )}
             </div>
-
-						<div className="flex flex-col gap-3 w-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">
+            <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="paymentValue"
-									onChange={(e) => setPaymentValue(e ? parseInt(e) : undefined)}
+                    name="commissionValue"
+                    onChange={(e) => setCommission(e ? parseInt(e) : undefined)}
                     type="number"
-									defaultValue={paymentValue || 0}
+                    defaultValue={commissionValue || 0}
                     className="col-span-3"
+                    disabled={disabled || loggedInUser.type === "agent"}
                   />
-								<select
-									defaultValue={paymentCurrency}
-									onChange={(e) => setPaymentCurrency(e.target.value)}
-									className="p-6 col-span-2 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
-									{CURRENCIES.map(({label, currency}) => (
-										<option value={currency} key={currency}>
-											{label}
-										</option>
-									))}
-								</select>
-							</div>
+                </>
+              ) : (
+                <div />
+              )}
             </div>
           </div>
           <Divider className="w-full !m-0" />
@@ -279,8 +506,13 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 
         <div className="flex flex-col md:flex-row gap-8 w-full">
           <div className="flex flex-col gap-3 w-full">
-						<label className="font-normal text-base text-mti-gray-dim">Country</label>
-						<CountrySelect disabled value={user.demographicInformation?.country} />
+            <label className="font-normal text-base text-mti-gray-dim">
+              Country
+            </label>
+            <CountrySelect
+              disabled
+              value={user.demographicInformation?.country}
+            />
           </div>
           <Input
             type="tel"
@@ -293,13 +525,34 @@ 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">
-					{user.type !== "corporate" && (
+          {user.type !== "corporate" && user.type !== "mastercorporate" && (
             <div className="relative flex flex-col gap-3 w-full">
-							<label className="font-normal text-base text-mti-gray-dim">Employment Status</label>
+              <label className="font-normal text-base text-mti-gray-dim">
+                Employment Status
+              </label>
               <RadioGroup
                 value={user.demographicInformation?.employment}
-								className="grid grid-cols-2 items-center gap-4 place-items-center">
+                className="grid grid-cols-2 items-center gap-4 place-items-center"
+                disabled={disabled}
+              >
                 {EMPLOYMENT_STATUS.map(({ status, label }) => (
                   <RadioGroup.Option value={status} key={status}>
                     {({ checked }) => (
@@ -309,8 +562,9 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
                           "transition duration-300 ease-in-out",
                           !checked
                             ? "bg-white border-mti-gray-platinum"
-														: "bg-mti-purple-light border-mti-purple-dark text-white",
-												)}>
+                            : "bg-mti-purple-light border-mti-purple-dark text-white"
+                        )}
+                      >
                         {label}
                       </span>
                     )}
@@ -333,8 +587,14 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
           )}
           <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">
+              <label className="font-normal text-base text-mti-gray-dim">
+                Gender
+              </label>
+              <RadioGroup
+                value={user.demographicInformation?.gender}
+                className="flex flex-row gap-4 justify-between"
+                disabled={disabled}
+              >
                 <RadioGroup.Option value="male">
                   {({ checked }) => (
                     <span
@@ -343,8 +603,9 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
                         "transition duration-300 ease-in-out",
                         !checked
                           ? "bg-white border-mti-gray-platinum"
-													: "bg-mti-purple-light border-mti-purple-dark text-white",
-											)}>
+                          : "bg-mti-purple-light border-mti-purple-dark text-white"
+                      )}
+                    >
                       Male
                     </span>
                   )}
@@ -357,8 +618,9 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
                         "transition duration-300 ease-in-out",
                         !checked
                           ? "bg-white border-mti-gray-platinum"
-													: "bg-mti-purple-light border-mti-purple-dark text-white",
-											)}>
+                          : "bg-mti-purple-light border-mti-purple-dark text-white"
+                      )}
+                    >
                       Female
                     </span>
                   )}
@@ -371,8 +633,9 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
                         "transition duration-300 ease-in-out",
                         !checked
                           ? "bg-white border-mti-gray-platinum"
-													: "bg-mti-purple-light border-mti-purple-dark text-white",
-											)}>
+                          : "bg-mti-purple-light border-mti-purple-dark text-white"
+                      )}
+                    >
                       Other
                     </span>
                   )}
@@ -381,10 +644,20 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
             </div>
             <div className="flex flex-col gap-3">
               <div className="flex justify-between items-center">
-								<label className="font-normal text-base text-mti-gray-dim">Expiry Date</label>
+                <label className="font-normal text-base text-mti-gray-dim">
+                  Expiry Date
+                </label>
                 <Checkbox
                   isChecked={!!expiryDate}
-									onChange={(checked) => setExpiryDate(checked ? user.subscriptionExpirationDate || new Date() : null)}>
+                  onChange={(checked) =>
+                    setExpiryDate(
+                      checked
+                        ? user.subscriptionExpirationDate || new Date()
+                        : null
+                    )
+                  }
+                  disabled={disabled}
+                >
                   Enabled
                 </Checkbox>
               </div>
@@ -393,9 +666,12 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
                   className={clsx(
                     "p-6 w-full flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
                     "transition duration-300 ease-in-out",
-										!expiryDate ? "!bg-mti-green-ultralight !border-mti-green-light" : expirationDateColor(expiryDate),
-										"bg-white border-mti-gray-platinum",
-									)}>
+                    !expiryDate
+                      ? "!bg-mti-green-ultralight !border-mti-green-light"
+                      : expirationDateColor(expiryDate),
+                    "bg-white border-mti-gray-platinum"
+                  )}
+                >
                   {!expiryDate && "Unlimited"}
                   {expiryDate && moment(expiryDate).format("DD/MM/YYYY")}
                 </div>
@@ -406,49 +682,100 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
                     "p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
                     "hover:border-mti-purple tooltip",
                     expirationDateColor(expiryDate),
-										"transition duration-300 ease-in-out",
+                    "transition duration-300 ease-in-out"
                   )}
                   filterDate={(date) =>
                     moment(date).isAfter(new Date()) &&
                     (loggedInUser.subscriptionExpirationDate
-											? moment(date).isBefore(moment(loggedInUser.subscriptionExpirationDate))
+                      ? moment(date).isBefore(
+                          moment(loggedInUser.subscriptionExpirationDate)
+                        )
                       : true)
                   }
                   dateFormat="dd/MM/yyyy"
                   selected={moment(expiryDate).toDate()}
                   onChange={(date) => setExpiryDate(date)}
+                  disabled={disabled}
                 />
               )}
             </div>
           </div>
         </div>
-				{(loggedInUser.type === "developer" || loggedInUser.type === "admin") && (
+        {checkAccess(loggedInUser, ["developer", "admin"]) && (
           <>
             <Divider className="w-full !m-0" />
             <div className="flex flex-col md:flex-row gap-8 w-full">
               <div className="flex flex-col gap-3 w-full">
-								<label className="font-normal text-base text-mti-gray-dim">Status</label>
-								<select
-									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>
+                <label className="font-normal text-base text-mti-gray-dim">
+                  Status
+                </label>
+                <Select
+                  className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+                  options={USER_STATUS_OPTIONS}
+                  menuPortalTarget={document?.body}
+                  value={USER_STATUS_OPTIONS.find((o) => o.value === status)}
+                  onChange={(value) =>
+                    setStatus(value?.value as typeof user.status)
+                  }
+                  styles={{
+                    control: (styles) => ({
+                      ...styles,
+                      paddingLeft: "4px",
+                      border: "none",
+                      outline: "none",
+                      ":focus": {
+                        outline: "none",
+                      },
+                    }),
+                    menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                    option: (styles, state) => ({
+                      ...styles,
+                      backgroundColor: state.isFocused
+                        ? "#D5D9F0"
+                        : state.isSelected
+                        ? "#7872BF"
+                        : "white",
+                      color: state.isFocused ? "black" : styles.color,
+                    }),
+                  }}
+                  isDisabled={disabled}
+                />
               </div>
               <div className="flex flex-col gap-3 w-full">
-								<label className="font-normal text-base text-mti-gray-dim">Type</label>
-								<select
-									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">
-									{Object.keys(USER_TYPE_LABELS).map((type) => (
-										<option key={type} value={type}>
-											{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
-										</option>
-									))}
-								</select>
+                <label className="font-normal text-base text-mti-gray-dim">
+                  Type
+                </label>
+                <Select
+                  className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+                  options={USER_TYPE_OPTIONS}
+                  menuPortalTarget={document?.body}
+                  value={USER_TYPE_OPTIONS.find((o) => o.value === type)}
+                  onChange={(value) =>
+                    setType(value?.value as typeof user.type)
+                  }
+                  styles={{
+                    control: (styles) => ({
+                      ...styles,
+                      paddingLeft: "4px",
+                      border: "none",
+                      outline: "none",
+                      ":focus": {
+                        outline: "none",
+                      },
+                    }),
+                    menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                    option: (styles, state) => ({
+                      ...styles,
+                      backgroundColor: state.isFocused
+                        ? "#D5D9F0"
+                        : state.isSelected
+                        ? "#7872BF"
+                        : "white",
+                      color: state.isFocused ? "black" : styles.color,
+                    }),
+                  }}
+                  isDisabled={disabled}
+                />
               </div>
             </div>
           </>
@@ -457,27 +784,57 @@ 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}>
+          {onViewCorporate && ["student", "teacher"].includes(user.type) && (
+            <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}>
+          {onViewStudents && ["corporate", "teacher"].includes(user.type) && (
+            <Button
+              className="w-full max-w-[200px]"
+              variant="outline"
+              color="rose"
+              onClick={onViewStudents}
+            >
               View Students
             </Button>
           )}
-					{onViewTeachers && (
-						<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewTeachers}>
+          {onViewTeachers && ["student", "corporate"].includes(user.type) && (
+            <Button
+              className="w-full max-w-[200px]"
+              variant="outline"
+              color="rose"
+              onClick={onViewTeachers}
+            >
               View Teachers
             </Button>
           )}
         </div>
         <div className="self-end flex gap-4 w-full justify-end">
-					<Button className="w-full max-w-[200px]" variant="outline" onClick={onClose}>
+          <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 ||
+              !checkAccess(
+                loggedInUser,
+                updateUserPermission.list,
+                updateUserPermission.perm
+              )
+            }
+            onClick={updateUser}
+            className="w-full max-w-[200px]"
+          >
             Update
           </Button>
         </div>

src/constants/errors.ts

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

src/constants/ielts.tsx

@@ -2,20 +2,20 @@ import {Module} from "@/interfaces";
 
 export const MODULES: Module[] = ["reading", "listening", "writing", "speaking"];
 
-export const BAND_SCORES: {[key in Module]: number[]} = {
-	reading: [0, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9],
-	listening: [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],
-	speaking: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
-	level: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
-};
+// BAND SCORES is not in use anymore and level scoring is made based on thresholds
+// export const BAND_SCORES: {[key in Module]: number[]} = {
+// 	reading: [0, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9],
+// 	listening: [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],
+// 	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) => {
-	if (level === 9) {
-		return (
+export type LevelScore = "Advanced" | "Upper-Intermediate" | "Intermediate" | "Pre-Intermediate" | "Elementary" | "Beginner";
+
+
+const generateHighestScoreText = () : React.ReactNode => (
 	<>
-				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
@@ -26,13 +26,9 @@ export const moduleResultText = (level: number) => {
 		academic journey.
 	</>
 );
-	}
 
-	if (level >= 6) {
-		return (
+const generateAverageScoreText = () : React.ReactNode => (
 	<>
-				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
@@ -43,29 +39,9 @@ export const moduleResultText = (level: number) => {
 		journey.
 	</>
 );
-	}
 
-	if (level >= 3) {
-		return (
+const generateLowestScoreText = () : React.ReactNode => (
 	<>
-				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 />
-				<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.
-			</>
-		);
-	}
-
-	return (
-		<>
-			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 />
 		<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
@@ -75,23 +51,70 @@ export const moduleResultText = (level: number) => {
 		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 />
-				<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.
+				{generateHighestScoreText()}
 			</>
 		);
 	}
@@ -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 />
-				<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.
+				{generateAverageScoreText()}
 			</>
 		);
 	}
@@ -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 />
-				<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.
+				{generateAverageScoreText()}
 			</>
 		);
 	}
@@ -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 />
-			<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.
+			{generateLowestScoreText()}
 		</>
 	);
 };

src/constants/platform.json

@@ -0,0 +1,13 @@
+{
+  "type": "service_account",
+  "project_id": "storied-phalanx-349916",
+  "private_key_id": "c9e05f6fe413b1031a71f981160075ff4b044444",
+  "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDdgavFB63nMHyb\n38ncwijTrUmqU9UyzNJ8wlZCWAWuoz25Gng988fkKNDXnHY+ap9esHyNYg9IdSA7\nAuZeHpzTZmKiWZzFWq61KWSTgIn1JwKHGHJJdmVhTYfCe9I51cFLa5q2lTFzJ0ce\nbP7/X/7kw53odgva+M8AhDTbe60akpemgZc+LFwO0Abm7erH2HiNyjoNZzNw525L\n933PCaQwhZan04s1u0oRdVlBIBwMk+J0ojgVEpUiJOzF7gkN+UpDXujalLYdlR4q\nhkGgScXQhDYJkECC3GuvOnEo1YXGNjW9D73S6sSH+Lvqta4wW1+sTn0kB6goiQBI\n7cA1G6x3AgMBAAECggEAZPMwAX/adb7XS4LWUNH8IVyccg/63kgSteErxtiu3kRv\nYOj7W+C6fPVNGLap/RBCybjNSvIh3PfkVICh1MtG1eGXmj4VAKyvaskOmVq/hQbe\nVAuEKo7W7V2UPcKIsOsGSQUlYYjlHIIOG4O5Q1HQrRmp4cPK62Txkl6uaEkZPz4u\nbvIK2BJI8aHRwxE3Phw09blwlLqQQQ8nrhK29x5puaN+ft++IlzIOVsLz+n4kTdB\n6qkG/dhenn3K8o3+NkmSN6eNRbdJd36zXTo4Oatbvqb7r0E8vYn/3Llawo2X75zn\nec7jMHrOmcwtiu9H3PsrTWtzdSjxPHy0UtEn1HWK4QKBgQD+c/V8tAvbaUGVoZf6\ntKtDSKF6IHuY2vUO33v950mVdjrTursqOG2d+SLfSnKpc+sjDlj7/S5u4uRP+qUN\ng1rb2U7oIA7tsDa2ZTSkIx6HkPUzS+fBOxELLrbgMoJ2RLzgkiPhS95YgXJ/rYG5\nWQTehzCT5roes0RvtgM0gl3EhQKBgQDe2m7PRIU4g3RJ8HTx92B4ja8W9FVCYDG5\nPOAdZB8WB6Bvu4BJHBDLr8vDi930pKj+vYObRqBDQuILW4t8wZQJ834dnoq6EpUz\nhbVEURVBP4A/nEHrQHfq0Lp+cxThy2rw7obRQOLPETtC7p3WFgSHT6PRTcpGzCCX\n+76a30yrywKBgC/5JNtyBppDaf4QDVtTHMb+tpMT9LmI7pLzR6lDJfhr5gNtPURk\nhyY1hoGaw6t3E2n0lopL3alCVdFObDfz//lbKylQggAGLQqOYjJf/K2KgvA862Df\nBgOZtxjl7PrnUsT0SJd9elotbazsxXxwcB6UVnBMG+MV4V0+b7RCr/MRAoGBAIfp\nTcVIs7roqOZjKN9dEE/VkR/9uXW2tvyS/NfP9Ql5c0ZRYwazgCbJOwsyZRZLyek6\naWYsp5b91mA435QhdwiuoI6t30tmA+qdNBTLIpxdfvjMcoNoGPpzfBmcU/L1HW58\n+mnqGalRiAPlBQvI99ASKQWAXMnaulIWrYNEhj0LAoGBALi+QZ2pp+hDeC59ezWr\nbP1zbbONceHKGgJcevChP2k1OJyIOIqmBYeTuM4cPc5ofZYQNaMC31cs8SVeSRX1\nNTxQZmvCjMyTe/WYWYNFXdgkVz4egFXbeochCGzMYo57HV1PCkPBrARRZO8OfdDD\n8sDu//ohb7nCzceEI0DnWs13\n-----END PRIVATE KEY-----\n",
+  "client_email": "firebase-adminsdk-3ml0u@storied-phalanx-349916.iam.gserviceaccount.com",
+  "client_id": "114163760341944984396",
+  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
+  "token_uri": "https://oauth2.googleapis.com/token",
+  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
+  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-3ml0u%40storied-phalanx-349916.iam.gserviceaccount.com",
+  "universe_domain": "googleapis.com"
+}

src/constants/serviceAccountKey.json

@@ -1,13 +0,0 @@
-{
-  "type": "service_account",
-  "project_id": "mti-ielts",
-  "private_key_id": "22b783a14c760d1215a8d1f5de0fa40a33a840e7",
-  "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQDoNkd7s/izUBRb\nlmJYWl0xk4X9wEVJU4LKA4HPeha8RFDse4T4suVP08oCP9ODSXF5A83+IqXNMs/N\na7PtFABBAx433JrB7I4NsAUrDSjI4LeYEIqh6YzHsQvBU53HAmPChX525S4i0IBy\ncNnyXut0nmlHz5ZwCPXgqg4eN44C+m0f7sxzivcnPth/zLupnMiDAHFZrxQolWO2\n6JfozMWGw0TmCkUxngzeGBMVYmsGiKRIxEi3MWeuwjYjGO4nR1krEUlcpjCbx4UX\nxYXicJb17HOs9LTcSh9bpDWZPHKXR48hxd2cMLr+XQzw7Otwu2p8fEUOJ+CiTyNz\nlkN9p7OhAgMBAAECggEAB5DsMZdGu1X4wdazr+AK4RCG2UKkZ0wbqvgkCMX4O2xo\n7BmmtqFCmEAk+P+KJWEVW81wTu9jUl0tWOrBVzBThUrEF2seVkL+SmshsfpI6cmr\npb5lO/sTgZau1L7kGU3GQRpvKVHUl+EODFyJt2xZFOjL8qFsjAw4sbgsw1aJT6a4\nFilm6Gapi1qSKOPSlXVmi0NJ9DUtNbKaQK8/coqEJRizeXs9MORvzyKQaV8PBmWI\noEnkxahKOD48U2kmI7rT9/YsCuaP2BlGdLxvANXLjAKcrDccVZkYEH82tPtCicED\noow3i956HPdWSXQgUOU65MfGccjOmqGaGa4zUTICyQKBgQD6zLMwL9YS+n9EKZaK\nEbzRybN2d+eKbXyDJzkDi6FnSGVre2ndShsimoOtwZDLmOF/XhN79YOLJVbI124p\npAWO+WxAfe9Xy3iFEBmL4kSREA873Sd8EN5OfYS2DsN7IbjZkoaLuM8QlyXL9ZRS\nBJDVGjx+wFKRjnClcBNbVMMXiQKBgQDtBumKZS0ZCtJuBeuwLGJ1ZJtYECykIrsD\nUtQ7zxwXJzPGqZ2c5JLpHdDm/bb9nllpLsh4SpDRqxFa2H2FF8x5KWaS7JQUsS8e\ner6x5wUt6wAJqV/ZvttVrLZCa8VYn+K7bTANnkPNJZHTqBTJbxkXMDTtkwWXUN2z\nQP3N9lodWQKBgFBHiewYw9ubV3WIImnbt6cne0ymoPUMitioi3V5Epcu81fuTzrI\nZ9sxvoi19xVUwIm2oWICerLlptvvKZImsKjNajtSlHRz6wYc2zCNowkULOwqpGLw\nO1jAkOR94VDewH7UikDbTVywJSceWvXOBFZSaZ7hDQ0OnTw3ndqUTUaRAoGAd2BG\n2PPyDa28o7sJpBYGlJdSAb1LrnLre1YJHAJIZITS99hPUEhykUP6BYx80CkjYO01\n/BeZ7m9Y80cbmJ+O1Or8BT1vqyg90f0B8/mlSyYTQ8pxQupz7ydoN/WtU+BawgjQ\n7drqzPSCCHab2YPBwEMANTMZ2sbYkcJG0aekZSkCgYBbnFJm8kUy57isxHyvrci+\nR30KQl2Y9okPytF8PpLH+yNjLDoduTOHL/hZoFC0M4Gklx4wPKpsEhImIrWmG9VC\n0UrQC6TT1WoY6/S3YehVmTXo/nBPD1XTUcbF/xxUrWDjmMjnt1IlXBbIzUPD3U4P\niRXzHnXb7yi+/iRxSDts2w==\n-----END PRIVATE KEY-----\n",
-  "client_email": "firebase-adminsdk-dyg6p@mti-ielts.iam.gserviceaccount.com",
-  "client_id": "104980563453519094431",
-  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
-  "token_uri": "https://oauth2.googleapis.com/token",
-  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
-  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-dyg6p%40mti-ielts.iam.gserviceaccount.com",
-  "universe_domain": "googleapis.com"
-}

src/constants/staging.json

@@ -0,0 +1,13 @@
+{
+  "type": "service_account",
+  "project_id": "encoach-staging",
+  "private_key_id": "5718a649419776df9637589f8696a258a6a70f6c",
+  "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQC2C6Es2gY8lLvH\ndVilNtRNm9glSaPXMNw2PzZZbSGuG1uGPFaCzlq1lOb2u17YfMG4GriKIMjIQKXF\nqdvxA8CAmAFRuDjUGmpbO/X1ZW7amOs5Bjed2BYmL01dEqzzwwh7rEfNDjeghRPx\n1uKzH8A6TLT5xq+74I5K1CIgiljBpZimsERu2SDawjkdtZfA7qoylA46Nq66LuwQ\nVyv9CK2SZNpBcT3sunCmRsrCzmSTzKdbcqRPdqUKgZOH/Rjp0sw9VuUgwoxdGZV3\n5SJjObo5ceZ1OSiJm7GwLzp7uq16sqycgSYwppNLI5OtzOfSuWbGD4+a044t2Mlq\n9PHXv7H/AgMBAAECggEAAfhKlFwq8MaL6PggRJq9HbaKgQ4fcOmCmy8AQmPNF1UM\nyVKSKGndjxUfPLCWsaaunUnjZlHoKkvndKXxDyttuVaBE9EiWEqNjRLZ3KpuJ9Jm\nH+CtLbmUCnISQb1n1AlvvZAwhLZbLBL/PhYyWiLapybZAdJAaOWLVKGgBD8gVRQW\nJFCqnszX1O2YlpWHutb979R4qoY/XAf94gyMkTpXZwuETvFqZbau2vxRZ8qARix3\nmic881PwiF6Cod8UPCS9yMK+Q+Se6SomwXU9PCmlummn9xmQBAxYy8gIAVs/J9Fg\n5SvhnImAPDd+zIzzw2cHCiruNWIhroMVZDZJgWdY1QKBgQDjTKKeFOur3ijJJL2/\nWg1SE2jLP0GpXzM5YMx6jdOCNDCzugPngRucRXiTkJ2FnUgyMcQyi6hyrbWXN/6z\nXhx5fwLB4tnTcqOMvNfcay5mDk3RW9ZZJxayB54Sf1Nm/4xiDBnGPT+iHQvK+/pT\nwScWznFkmk60E796o76OLn3PEwKBgQDNCC2uPq+uOcCopIO8HH88gqdxTvpbeHUU\nrdJOmr1VtGNuvay/mfpva9+VEtGbZTFzjhfvfCEIjpj3Llh8Flb9EYa6BmscBiyp\ngszEeFuB3zHndlSCZPnGJ7JiRAdPAEgG3Gl/r9th6PDaEMq0MFS5i7GGhPBIRYCG\nUtmY5eVy5QKBgH5Nuls/YsnJFD7ZNLscziQadvPhvZnhNbSfjmBXaP2EBMAKEFtX\nCcGndN4C0RVLFbAWqWAw7LR0xGA4FEcVd5snsZ+Nb98oZ6sv0H9B67F4J1O7xXsa\n1mitBPBgYjbsr9RXxwa6SB7MJx5vMGXUAeWRZ78wY6V7B76dOKkHOo+TAoGBAJf5\nBOsPueZZFm2qK58GPGVcrsI0+StNuPLP+H+dANQC9mTCIMaQWmm2Oq5jmYwmUKZH\nX4R6rH2MPOOSrbGkWWwRTpyaX1ARX49xzVefoqw8BOB8/Bz+vYjcKcPeitBK9Bhp\nzaUAc4s6PzRTl/xBirtRSQ/df8ECC0cFKBbF6PHlAoGAGqnlpo+k8vAtg6ulCuGu\nx2Y/c5UmvXGHk60pccnW3UtENSDnl99OgMfBz8/qLAMWs6DUQ/kvSlHQPmMBHRWZ\nNTr6ceGXyNs4KdYoj1K7AU3c0Lm0wyQ2giQMoOOUQAm98Xr8z5aiihj10hHPmzzL\n9kwpOmZpjNmC/ERD69imWhY=\n-----END PRIVATE KEY-----\n",
+  "client_email": "firebase-adminsdk-8rs9e@encoach-staging.iam.gserviceaccount.com",
+  "client_id": "108221424237414412378",
+  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
+  "token_uri": "https://oauth2.googleapis.com/token",
+  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
+  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-8rs9e%40encoach-staging.iam.gserviceaccount.com",
+  "universe_domain": "googleapis.com"
+}

src/constants/userPermissions.ts

@@ -2,33 +2,85 @@ import {Type} from "@/interfaces/user";
 
 export const PERMISSIONS = {
   generateCode: {
-		student: ["corporate", "developer", "admin"],
-		teacher: ["corporate", "developer", "admin"],
+    student: ["corporate", "developer", "admin", "mastercorporate"],
+    teacher: ["corporate", "developer", "admin", "mastercorporate"],
     corporate: ["admin", "developer"],
+    mastercorporate: ["admin", "developer"],
+
     admin: ["developer", "admin"],
     agent: ["developer", "admin"],
     developer: ["developer"],
   },
   deleteUser: {
-		student: ["teacher", "corporate", "developer", "admin"],
-		teacher: ["corporate", "developer", "admin"],
-		corporate: ["admin", "developer"],
-		admin: ["developer", "admin"],
-		agent: ["developer", "admin"],
-		developer: ["developer"],
+    student: {
+      perm: "deleteStudent",
+      list: ["corporate", "developer", "admin", "mastercorporate"],
+    },
+    teacher: {
+      perm: "deleteTeacher",
+      list: ["corporate", "developer", "admin", "mastercorporate"],
+    },
+    corporate: {
+      perm: "deleteCorporate",
+      list: ["admin", "developer"],
+    },
+    mastercorporate: {
+      perm: undefined,
+      list: ["admin", "developer"],
+    },
+
+    admin: {
+      perm: "deleteAdmin",
+      list: ["developer", "admin"],
+    },
+    agent: {
+      perm: "deleteCountryManager",
+      list: ["developer", "admin"],
+    },
+    developer: {
+      perm: undefined,
+      list: ["developer"],
+    },
   },
   updateUser: {
-		student: ["teacher", "corporate", "developer", "admin"],
-		teacher: ["corporate", "developer", "admin"],
-		corporate: ["admin", "developer"],
-		admin: ["developer", "admin"],
-		agent: ["developer", "admin"],
-		developer: ["developer"],
+    student: {
+      perm: "editStudent",
+      list: ["developer", "admin"],
+    },
+    teacher: {
+      perm: "editTeacher",
+      list: ["developer", "admin"],
+    },
+
+    corporate: {
+      perm: "editCorporate",
+      list: ["admin", "developer"],
+    },
+    mastercorporate: {
+      perm: undefined,
+      list: ["admin", "developer"],
+    },
+
+    admin: {
+      perm: "editAdmin",
+      list: ["developer", "admin"],
+    },
+
+    agent: {
+      perm: "editCountryManager",
+      list: ["developer", "admin"],
+    },
+    developer: {
+      perm: undefined,
+      list: ["developer"],
+    },
   },
   updateExpiryDate: {
     student: ["developer", "admin"],
     teacher: ["developer", "admin"],
     corporate: ["admin", "developer"],
+    mastercorporate: ["admin", "developer"],
+
     admin: ["developer", "admin"],
     agent: ["developer", "admin"],
     developer: ["developer"],

src/dashboards/Admin.tsx

@@ -13,15 +13,19 @@ import {
   BsGlobeCentralSouthAsia,
   BsPerson,
   BsPersonFill,
-	BsPersonFillGear,
-	BsPersonGear,
-	BsPersonLinesFill,
+  BsPencilSquare,
+  BsBank,
+  BsCurrencyDollar,
+  BsLayoutWtf,
+  BsLayoutSidebar,
 } 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";
+import CorporateStudentsLevels from "./CorporateStudentsLevels";
 
 interface Props {
   user: User;
@@ -35,6 +39,7 @@ export default function AdminDashboard({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();
@@ -43,15 +48,28 @@ export default function AdminDashboard({user}: Props) {
     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" />
+      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.corporateInformation?.companyInformation?.name ||
+              displayUser.name
             : displayUser.name}
         </span>
         <span className="text-sm opacity-75">{displayUser.email}</span>
@@ -64,25 +82,32 @@ export default function AdminDashboard({user}: Props) {
       x.type === "student" &&
       (!!selectedUser
         ? groups
-						.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+            .filter(
+              (g) =>
+                g.admin === selectedUser.id ||
+                g.participants.includes(selectedUser.id)
+            )
             .flatMap((g) => g.participants)
             .includes(x.id)
         : true);
 
     return (
-			<>
+      <UserList
+        user={user}
+        filters={[filter]}
+        renderHeader={(total) => (
           <div className="flex flex-col gap-4">
             <div
               onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+            >
               <BsArrowLeft className="text-xl" />
               <span>Back</span>
             </div>
-					<h2 className="text-2xl font-semibold">Students ({users.filter(filter).length})</h2>
+            <h2 className="text-2xl font-semibold">Students ({total})</h2>
           </div>
-
-				<UserList user={user} filters={[filter]} />
-			</>
+        )}
+      />
     );
   };
 
@@ -91,25 +116,32 @@ export default function AdminDashboard({user}: Props) {
       x.type === "teacher" &&
       (!!selectedUser
         ? groups
-						.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+            .filter(
+              (g) =>
+                g.admin === selectedUser.id ||
+                g.participants.includes(selectedUser.id)
+            )
             .flatMap((g) => g.participants)
             .includes(x.id) || false
         : true);
 
     return (
-			<>
+      <UserList
+        user={user}
+        filters={[filter]}
+        renderHeader={(total) => (
           <div className="flex flex-col gap-4">
             <div
               onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+            >
               <BsArrowLeft className="text-xl" />
               <span>Back</span>
             </div>
-					<h2 className="text-2xl font-semibold">Teachers ({users.filter(filter).length})</h2>
+            <h2 className="text-2xl font-semibold">Teachers ({total})</h2>
           </div>
-
-				<UserList user={user} filters={[filter]} />
-			</>
+        )}
+      />
     );
   };
 
@@ -117,81 +149,174 @@ export default function AdminDashboard({user}: Props) {
     const filter = (x: User) => x.type === "agent";
 
     return (
-			<>
+      <UserList
+        user={user}
+        filters={[filter]}
+        renderHeader={(total) => (
           <div className="flex flex-col gap-4">
             <div
               onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+              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>
+            <h2 className="text-2xl font-semibold">
+              Country Managers ({total})
+            </h2>
           </div>
-
-				<UserList user={user} filters={[filter]} />
-			</>
+        )}
+      />
     );
   };
 
   const CorporateList = () => (
-		<>
+    <UserList
+      user={user}
+      filters={[(x) => x.type === "corporate"]}
+      renderHeader={(total) => (
         <div className="flex flex-col gap-4">
           <div
             onClick={() => setPage("")}
-					className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+            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((x) => x.type === "corporate").length})</h2>
+          <h2 className="text-2xl font-semibold">Corporate ({total})</h2>
         </div>
-
-			<UserList user={user} filters={[(x) => x.type === "corporate"]} />
-		</>
+      )}
+    />
   );
 
-	const InactiveStudentsList = () => {
-		const filter = (x: User) => x.type === "student" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate));
+  const CorporatePaidStatusList = ({ paid }: { paid: Boolean }) => {
+    const list = paid ? done : pending;
+    const filter = (x: User) => x.type === "corporate" && list.includes(x.id);
 
     return (
-			<>
+      <UserList
+        user={user}
+        filters={[filter]}
+        renderHeader={(total) => (
           <div className="flex flex-col gap-4">
             <div
               onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+              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 Students ({users.filter(filter).length})</h2>
+            <h2 className="text-2xl font-semibold">
+              {paid ? "Payment Done" : "Pending Payment"} ({total})
+            </h2>
           </div>
+        )}
+      />
+    );
+  };
 
-				<UserList user={user} filters={[filter]} />
-			</>
+  const InactiveCountryManagerList = () => {
+    return (
+      <UserList
+        user={user}
+        filters={[inactiveCountryManagerFilter]}
+        renderHeader={(total) => (
+          <div className="flex flex-col gap-4">
+            <div
+              onClick={() => setPage("")}
+              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+            >
+              <BsArrowLeft className="text-xl" />
+              <span>Back</span>
+            </div>
+            <h2 className="text-2xl font-semibold">
+              Inactive Country Managers ({total})
+            </h2>
+          </div>
+        )}
+      />
+    );
+  };
+
+  const InactiveStudentsList = () => {
+    const filter = (x: User) =>
+      x.type === "student" &&
+      (x.status === "disabled" ||
+        moment().isAfter(x.subscriptionExpirationDate));
+
+    return (
+      <UserList
+        user={user}
+        filters={[filter]}
+        renderHeader={(total) => (
+          <div className="flex flex-col gap-4">
+            <div
+              onClick={() => setPage("")}
+              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+            >
+              <BsArrowLeft className="text-xl" />
+              <span>Back</span>
+            </div>
+            <h2 className="text-2xl font-semibold">
+              Inactive Students ({total})
+            </h2>
+          </div>
+        )}
+      />
     );
   };
 
   const InactiveCorporateList = () => {
-		const filter = (x: User) => x.type === "corporate" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate));
+    const filter = (x: User) =>
+      x.type === "corporate" &&
+      (x.status === "disabled" ||
+        moment().isAfter(x.subscriptionExpirationDate));
 
+    return (
+      <UserList
+        user={user}
+        filters={[filter]}
+        renderHeader={(total) => (
+          <div className="flex flex-col gap-4">
+            <div
+              onClick={() => setPage("")}
+              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+            >
+              <BsArrowLeft className="text-xl" />
+              <span>Back</span>
+            </div>
+            <h2 className="text-2xl font-semibold">
+              Inactive Corporate ({total})
+            </h2>
+          </div>
+        )}
+      />
+    );
+  };
+
+  const CorporateStudentsLevelsHelper = () => {
     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">
+            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 Corporate ({users.filter(filter).length})</h2>
+          <h2 className="text-2xl font-semibold">
+            Corporate Students Levels
+          </h2>
         </div>
-
-				<UserList user={user} filters={[filter]} />
+        <CorporateStudentsLevels />
       </>
     );
   };
 
   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"
@@ -200,14 +325,14 @@ export default function AdminDashboard({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")}
@@ -223,29 +348,78 @@ export default function AdminDashboard({user}: Props) {
         <IconCard
           Icon={BsGlobeCentralSouthAsia}
           label="Countries"
-					value={[...new Set(users.filter((x) => x.demographicInformation).map((x) => x.demographicInformation?.country))].length}
+          value={
+            [
+              ...new Set(
+                users
+                  .filter((x) => x.demographicInformation)
+                  .map((x) => x.demographicInformation?.country)
+              ),
+            ].length
+          }
           color="purple"
         />
         <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)))
-							.length
+            users.filter(
+              (x) =>
+                x.type === "student" &&
+                (x.status === "disabled" ||
+                  moment().isAfter(x.subscriptionExpirationDate))
+            ).length
           }
           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)))
-							.length
+            users.filter(
+              (x) =>
+                x.type === "corporate" &&
+                (x.status === "disabled" ||
+                  moment().isAfter(x.subscriptionExpirationDate))
+            ).length
           }
           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"
+        />
+        <IconCard
+          onClick={() => router.push("https://cms.encoach.com/admin")}
+          Icon={BsLayoutSidebar}
+          label="Content Management System (CMS)"
+          color="green"
+        />
+        <IconCard
+          onClick={() => setPage("corporatestudentslevels")}
+          Icon={BsPersonFill}
+          label="Corporate Students Levels"
+          color="purple"
+        />
       </section>
 
       <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full justify-between">
@@ -260,12 +434,27 @@ export default function AdminDashboard({user}: Props) {
               ))}
           </div>
         </div>
+        <div className="bg-white shadow flex flex-col rounded-xl w-full">
+          <span className="p-4">Latest teachers</span>
+          <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+            {users
+              .filter((x) => x.type === "teacher")
+              .sort((a, b) => {
+                return dateSorter(a, b, "desc", "registrationDate");
+              })
+              .map((x) => (
+                <UserDisplay key={x.id} {...x} />
+              ))}
+          </div>
+        </div>
         <div className="bg-white shadow flex flex-col rounded-xl w-full">
           <span className="p-4">Latest corporate</span>
           <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
             {users
               .filter((x) => x.type === "corporate")
-							.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
+              .sort((a, b) => {
+                return dateSorter(a, b, "desc", "registrationDate");
+              })
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
               ))}
@@ -275,7 +464,9 @@ export default function AdminDashboard({user}: Props) {
           <span className="p-4">Unpaid Corporate</span>
           <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
             {users
-							.filter((x) => x.type === "corporate" && x.status === "paymentDue")
+              .filter(
+                (x) => x.type === "corporate" && x.status === "paymentDue"
+              )
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
               ))}
@@ -289,8 +480,10 @@ export default function AdminDashboard({user}: Props) {
                 (x) =>
                   x.type === "student" &&
                   x.subscriptionExpirationDate &&
-									moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
-									moment().isBefore(moment(x.subscriptionExpirationDate)),
+                  moment().isAfter(
+                    moment(x.subscriptionExpirationDate).subtract(30, "days")
+                  ) &&
+                  moment().isBefore(moment(x.subscriptionExpirationDate))
               )
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
@@ -305,8 +498,28 @@ export default function AdminDashboard({user}: Props) {
                 (x) =>
                   x.type === "teacher" &&
                   x.subscriptionExpirationDate &&
-									moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
-									moment().isBefore(moment(x.subscriptionExpirationDate)),
+                  moment().isAfter(
+                    moment(x.subscriptionExpirationDate).subtract(30, "days")
+                  ) &&
+                  moment().isBefore(moment(x.subscriptionExpirationDate))
+              )
+              .map((x) => (
+                <UserDisplay key={x.id} {...x} />
+              ))}
+          </div>
+        </div>
+        <div className="bg-white shadow flex flex-col rounded-xl w-full">
+          <span className="p-4">Country Manager expiring in 1 month</span>
+          <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+            {users
+              .filter(
+                (x) =>
+                  x.type === "agent" &&
+                  x.subscriptionExpirationDate &&
+                  moment().isAfter(
+                    moment(x.subscriptionExpirationDate).subtract(30, "days")
+                  ) &&
+                  moment().isBefore(moment(x.subscriptionExpirationDate))
               )
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
@@ -321,8 +534,10 @@ export default function AdminDashboard({user}: Props) {
                 (x) =>
                   x.type === "corporate" &&
                   x.subscriptionExpirationDate &&
-									moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
-									moment().isBefore(moment(x.subscriptionExpirationDate)),
+                  moment().isAfter(
+                    moment(x.subscriptionExpirationDate).subtract(30, "days")
+                  ) &&
+                  moment().isBefore(moment(x.subscriptionExpirationDate))
               )
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
@@ -334,7 +549,10 @@ export default function AdminDashboard({user}: Props) {
           <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
             {users
               .filter(
-								(x) => x.type === "student" && x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)),
+                (x) =>
+                  x.type === "student" &&
+                  x.subscriptionExpirationDate &&
+                  moment().isAfter(moment(x.subscriptionExpirationDate))
               )
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
@@ -346,7 +564,25 @@ export default function AdminDashboard({user}: Props) {
           <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
             {users
               .filter(
-								(x) => x.type === "teacher" && x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)),
+                (x) =>
+                  x.type === "teacher" &&
+                  x.subscriptionExpirationDate &&
+                  moment().isAfter(moment(x.subscriptionExpirationDate))
+              )
+              .map((x) => (
+                <UserDisplay key={x.id} {...x} />
+              ))}
+          </div>
+        </div>
+        <div className="bg-white shadow flex flex-col rounded-xl w-full">
+          <span className="p-4">Expired Country Manager</span>
+          <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+            {users
+              .filter(
+                (x) =>
+                  x.type === "agent" &&
+                  x.subscriptionExpirationDate &&
+                  moment().isAfter(moment(x.subscriptionExpirationDate))
               )
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
@@ -359,7 +595,9 @@ export default function AdminDashboard({user}: Props) {
             {users
               .filter(
                 (x) =>
-									x.type === "corporate" && x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)),
+                  x.type === "corporate" &&
+                  x.subscriptionExpirationDate &&
+                  moment().isAfter(moment(x.subscriptionExpirationDate))
               )
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
@@ -383,7 +621,8 @@ export default function AdminDashboard({user}: Props) {
                   if (shouldReload) reload();
                 }}
                 onViewStudents={
-									selectedUser.type === "corporate" || selectedUser.type === "teacher"
+                  selectedUser.type === "corporate" ||
+                  selectedUser.type === "teacher"
                     ? () => {
                         appendUserFilters({
                           id: "view-students",
@@ -393,7 +632,11 @@ export default function AdminDashboard({user}: Props) {
                           id: "belongs-to-admin",
                           filter: (x: User) =>
                             groups
-															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+                              .filter(
+                                (g) =>
+                                  g.admin === selectedUser.id ||
+                                  g.participants.includes(selectedUser.id)
+                              )
                               .flatMap((g) => g.participants)
                               .includes(x.id),
                         });
@@ -403,7 +646,8 @@ export default function AdminDashboard({user}: Props) {
                     : undefined
                 }
                 onViewTeachers={
-									selectedUser.type === "corporate" || selectedUser.type === "student"
+                  selectedUser.type === "corporate" ||
+                  selectedUser.type === "student"
                     ? () => {
                         appendUserFilters({
                           id: "view-teachers",
@@ -413,7 +657,11 @@ export default function AdminDashboard({user}: Props) {
                           id: "belongs-to-admin",
                           filter: (x: User) =>
                             groups
-															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+                              .filter(
+                                (g) =>
+                                  g.admin === selectedUser.id ||
+                                  g.participants.includes(selectedUser.id)
+                              )
                               .flatMap((g) => g.participants)
                               .includes(x.id),
                         });
@@ -423,7 +671,8 @@ export default function AdminDashboard({user}: Props) {
                     : undefined
                 }
                 onViewCorporate={
-									selectedUser.type === "teacher" || selectedUser.type === "student"
+                  selectedUser.type === "teacher" ||
+                  selectedUser.type === "student"
                     ? () => {
                         appendUserFilters({
                           id: "view-corporate",
@@ -433,7 +682,9 @@ export default function AdminDashboard({user}: Props) {
                           id: "belongs-to-admin",
                           filter: (x: User) =>
                             groups
-															.filter((g) => g.participants.includes(selectedUser.id))
+                              .filter((g) =>
+                                g.participants.includes(selectedUser.id)
+                              )
                               .flatMap((g) => [g.admin, ...g.participants])
                               .includes(x.id),
                         });
@@ -454,6 +705,10 @@ export default function AdminDashboard({user}: Props) {
       {page === "agents" && <AgentsList />}
       {page === "inactiveStudents" && <InactiveStudentsList />}
       {page === "inactiveCorporate" && <InactiveCorporateList />}
+      {page === "inactiveCountryManagers" && <InactiveCountryManagerList />}
+      {page === "paymentdone" && <CorporatePaidStatusList paid={true} />}
+      {page === "paymentpending" && <CorporatePaidStatusList paid={false} />}
+      {page === "corporatestudentslevels" && <CorporateStudentsLevelsHelper />}
       {page === "" && <DefaultDashboard />}
     </>
   );

src/dashboards/Agent.tsx

@@ -2,33 +2,22 @@
 import Modal from "@/components/Modal";
 import useStats from "@/hooks/useStats";
 import useUsers from "@/hooks/useUsers";
-import {Group, Stat, User} from "@/interfaces/user";
+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,
-	BsClipboard2Data,
-	BsClipboard2DataFill,
-	BsClock,
-	BsGlobeCentralSouthAsia,
-	BsPaperclip,
-	BsPerson,
-	BsPersonAdd,
   BsPersonFill,
-	BsPersonFillGear,
-	BsPersonGear,
-	BsPersonLinesFill,
+  BsBank,
+  BsCurrencyDollar,
 } from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
-import {calculateAverageLevel, calculateBandScore} from "@/utils/score";
-import {MODULE_ARRAY} from "@/utils/moduleUtils";
-import {Module} from "@/interfaces";
-import {groupByExam} from "@/utils/stats";
+
 import IconCard from "./IconCard";
-import GroupList from "@/pages/(admin)/Lists/GroupList";
+import usePaymentStatusUsers from "@/hooks/usePaymentStatusUsers";
 
 interface Props {
   user: User;
@@ -42,6 +31,7 @@ export default function AgentDashboard({user}: Props) {
   const { stats } = useStats();
   const { users, reload } = useUsers();
   const { groups } = useGroups(user.id);
+  const { pending, done } = usePaymentStatusUsers();
 
   useEffect(() => {
     setShowModal(!!selectedUser && page === "");
@@ -49,17 +39,34 @@ export default function AgentDashboard({user}: Props) {
 
   const corporateFilter = (user: User) => user.type === "corporate";
   const referredCorporateFilter = (x: User) =>
-		x.type === "corporate" && !!x.corporateInformation && x.corporateInformation.referralAgent === user.id;
+    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: User) => (
+  const UserDisplay = ({
+    displayUser,
+    allowClick = true,
+  }: {
+    displayUser: User;
+    allowClick?: boolean;
+  }) => (
     <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" />
+      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.corporateInformation?.companyInformation?.name ||
+              displayUser.name
             : displayUser.name}
         </span>
         <span className="text-sm opacity-75">{displayUser.email}</span>
@@ -68,22 +75,48 @@ export default function AgentDashboard({user}: Props) {
   );
 
   const ReferredCorporateList = () => {
-		const filter = (x: User) => x.type === "corporate" && !!x.corporateInformation && x.corporateInformation.referralAgent === user.id;
-
     return (
-			<>
+      <UserList
+        user={user}
+        filters={[referredCorporateFilter]}
+        renderHeader={(total) => (
           <div className="flex flex-col gap-4">
             <div
               onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+              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(filter).length})</h2>
+            <h2 className="text-2xl font-semibold">
+              Referred Corporate ({total})
+            </h2>
           </div>
+        )}
+      />
+    );
+  };
 
-				<UserList user={user} filters={[filter]} />
-			</>
+  const InactiveReferredCorporateList = () => {
+    return (
+      <UserList
+        user={user}
+        filters={[inactiveReferredCorporateFilter]}
+        renderHeader={(total) => (
+          <div className="flex flex-col gap-4">
+            <div
+              onClick={() => setPage("")}
+              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+            >
+              <BsArrowLeft className="text-xl" />
+              <span>Back</span>
+            </div>
+            <h2 className="text-2xl font-semibold">
+              Inactive Referred Corporate ({total})
+            </h2>
+          </div>
+        )}
+      />
     );
   };
 
@@ -91,19 +124,48 @@ export default function AgentDashboard({user}: Props) {
     const filter = (x: User) => x.type === "corporate";
 
     return (
-			<>
+      <UserList
+        user={user}
+        filters={[filter]}
+        renderHeader={(total) => (
           <div className="flex flex-col gap-4">
             <div
               onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+              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(filter).length})</h2>
+            <h2 className="text-2xl font-semibold">Corporate ({total})</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 (
+      <UserList
+        user={user}
+        filters={[filter]}
+        renderHeader={(total) => (
+          <div className="flex flex-col gap-4">
+            <div
+              onClick={() => setPage("")}
+              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+            >
+              <BsArrowLeft className="text-xl" />
+              <span>Back</span>
+            </div>
+            <h2 className="text-2xl font-semibold">
+              {paid ? "Payment Done" : "Pending Payment"} ({total})
+            </h2>
+          </div>
+        )}
+      />
     );
   };
 
@@ -112,18 +174,39 @@ export default function AgentDashboard({user}: Props) {
       <section className="flex flex-wrap gap-2 items-center -lg:justify-center lg:gap-4 text-center">
         <IconCard
           onClick={() => setPage("referredCorporate")}
-					Icon={BsPersonFill}
+          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={BsPersonFill}
+          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">
@@ -134,7 +217,7 @@ export default function AgentDashboard({user}: Props) {
               .filter(referredCorporateFilter)
               .sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
               .map((x) => (
-								<UserDisplay key={x.id} {...x} />
+                <UserDisplay key={x.id} displayUser={x} />
               ))}
           </div>
         </div>
@@ -145,7 +228,24 @@ export default function AgentDashboard({user}: Props) {
               .filter(corporateFilter)
               .sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
               .map((x) => (
-								<UserDisplay key={x.id} {...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>
@@ -166,9 +266,16 @@ export default function AgentDashboard({user}: Props) {
                   if (shouldReload) reload();
                 }}
                 onViewStudents={
-									selectedUser.type === "corporate" || selectedUser.type === "teacher" ? () => setPage("students") : undefined
+                  selectedUser.type === "corporate" ||
+                  selectedUser.type === "teacher"
+                    ? () => setPage("students")
+                    : undefined
+                }
+                onViewTeachers={
+                  selectedUser.type === "corporate"
+                    ? () => setPage("teachers")
+                    : undefined
                 }
-								onViewTeachers={selectedUser.type === "corporate" ? () => setPage("teachers") : undefined}
                 user={selectedUser}
               />
             </div>
@@ -177,6 +284,11 @@ export default function AgentDashboard({user}: Props) {
       </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,42 @@ 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";
+import {useAssignmentArchive} from "@/hooks/useAssignmentArchive";
+import {uniqBy} from "lodash";
+import {useAssignmentUnarchive} from "@/hooks/useAssignmentUnarchive";
 
 interface Props {
 	onClick?: () => void;
+	allowDownload?: boolean;
+	reload?: Function;
+	allowArchive?: boolean;
+	allowUnarchive?: boolean;
 }
 
-export default function AssignmentCard({id, name, assigner, startDate, endDate, assignees, results, exams, onClick}: Assignment & Props) {
-	const {users} = useUsers();
+export default function AssignmentCard({
+	id,
+	name,
+	assigner,
+	startDate,
+	endDate,
+	assignees,
+	results,
+	exams,
+	archived,
+	onClick,
+	allowDownload,
+	reload,
+	allowArchive,
+	allowUnarchive,
+}: Assignment & Props) {
+	const renderPdfIcon = usePDFDownload("assignments");
+	const renderArchiveIcon = useAssignmentArchive(id, reload);
+	const renderUnarchiveIcon = useAssignmentUnarchive(id, reload);
 
 	const calculateAverageModuleScore = (module: Module) => {
 		const resultModuleBandScores = results.map((r) => {
@@ -31,9 +54,16 @@ export default function AssignmentCard({id, name, assigner, startDate, endDate,
 	return (
 		<div
 			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">
+			className="border-mti-gray-platinum flex h-fit w-[350px] cursor-pointer flex-col gap-6 rounded-xl border bg-white p-4 transition duration-300 ease-in-out hover:drop-shadow">
 			<div className="flex flex-col gap-3">
-				<h3 className="font-semibold text-xl">{name}</h3>
+				<div className="flex flex-row justify-between">
+					<h3 className="text-xl font-semibold">{name}</h3>
+					<div className="flex gap-2">
+						{allowDownload && renderPdfIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")}
+						{allowArchive && !archived && renderArchiveIcon("text-mti-gray-dim", "text-mti-gray-dim")}
+						{allowUnarchive && archived && renderUnarchiveIcon("text-mti-gray-dim", "text-mti-gray-dim")}
+					</div>
+				</div>
 				<ProgressBar
 					color={results.length / assignees.length < 0.5 ? "red" : "purple"}
 					percentage={(results.length / assignees.length) * 100}
@@ -42,28 +72,28 @@ export default function AssignmentCard({id, name, assigner, startDate, endDate,
 					textClassName={results.length / assignees.length < 0.5 ? "!text-mti-gray-dim font-light" : "text-white"}
 				/>
 			</div>
-			<span className="flex gap-1 justify-between">
+			<span className="flex justify-between gap-1">
 				<span>{moment(startDate).format("DD/MM/YY, HH:mm")}</span>
 				<span>-</span>
 				<span>{moment(endDate).format("DD/MM/YY, HH:mm")}</span>
 			</span>
-			<div className="grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2">
-				{exams.map(({module}) => (
+			<div className="-md:mt-2 grid w-full grid-cols-4 place-items-start gap-2">
+				{uniqBy(exams, (x) => x.module).map(({module}) => (
 					<div
 						key={module}
 						className={clsx(
-							"flex gap-2 items-center w-fit text-white -md:px-4 xl:px-4 md:px-2 py-2 rounded-xl",
+							"-md:px-4 flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
 							module === "reading" && "bg-ielts-reading",
 							module === "listening" && "bg-ielts-listening",
 							module === "writing" && "bg-ielts-writing",
 							module === "speaking" && "bg-ielts-speaking",
 							module === "level" && "bg-ielts-level",
 						)}>
-						{module === "reading" && <BsBook className="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" />}
+						{module === "reading" && <BsBook className="h-4 w-4" />}
+						{module === "listening" && <BsHeadphones className="h-4 w-4" />}
+						{module === "writing" && <BsPen className="h-4 w-4" />}
+						{module === "speaking" && <BsMegaphone className="h-4 w-4" />}
+						{module === "level" && <BsClipboard className="h-4 w-4" />}
 						{calculateAverageModuleScore(module) > -1 && (
 							<span className="text-sm">{calculateAverageModuleScore(module).toFixed(1)}</span>
 						)}

src/dashboards/AssignmentCreator.tsx

@@ -2,7 +2,7 @@ import Input from "@/components/Low/Input";
 import Modal from "@/components/Modal";
 import {Module} from "@/interfaces";
 import clsx from "clsx";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import {BsBook, BsCheckCircle, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsXCircle} from "react-icons/bs";
 import {generate} from "random-words";
 import {capitalize} from "lodash";
@@ -16,8 +16,11 @@ import moment from "moment";
 import axios from "axios";
 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";
+import {InstructorGender, Variant} from "@/interfaces/exam";
+import Select from "@/components/Low/Select";
+import useExams from "@/hooks/useExams";
 
 interface Props {
 	isCreating: boolean;
@@ -33,8 +36,22 @@ 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 [endDate, setEndDate] = useState<Date | null>(assignment ? moment(assignment.endDate).toDate() : moment().add(8, "day").toDate());
+	const [startDate, setStartDate] = useState<Date | null>(assignment ? moment(assignment.startDate).toDate() : new Date());
+	const [endDate, setEndDate] = useState<Date | null>(
+		assignment ? moment(assignment.endDate).toDate() : moment().hours(23).minutes(59).add(8, "day").toDate(),
+	);
+	const [variant, setVariant] = useState<Variant>("full");
+	const [instructorGender, setInstructorGender] = useState<InstructorGender>(assignment?.instructorGender || "varied");
+	// creates a new exam for each assignee or just one exam for all assignees
+	const [generateMultiple, setGenerateMultiple] = useState<boolean>(false);
+	const [useRandomExams, setUseRandomExams] = useState(true);
+	const [examIDs, setExamIDs] = useState<{id: string; module: Module}[]>([]);
+
+	const {exams} = useExams();
+
+	useEffect(() => {
+		setExamIDs((prev) => prev.filter((x) => selectedModules.includes(x.module)));
+	}, [selectedModules]);
 
 	const toggleModule = (module: Module) => {
 		const modules = selectedModules.filter((x) => x !== module);
@@ -48,17 +65,16 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 	const createAssignment = () => {
 		setIsLoading(true);
 
-		const examPromises = selectedModules.map(async (module) => getExam(module, false));
-		Promise.all(examPromises)
-			.then((exams) => {
 		(assignment ? axios.patch : axios.post)(`/api/assignments${assignment ? `/${assignment.id}` : ""}`, {
-					assigner,
 			assignees,
 			name,
 			startDate,
+			examIDs: !useRandomExams ? examIDs : undefined,
 			endDate,
-					results: [],
-					exams: exams.map((e) => ({module: e?.module, id: e?.id})),
+			selectedModules,
+			generateMultiple,
+			variant,
+			instructorGender,
 		})
 			.then(() => {
 				toast.success(`The assignment "${name}" has been ${assignment ? "updated" : "created"} successfully!`);
@@ -69,12 +85,6 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 				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);
-			});
 	};
 
 	const deleteAssignment = () => {
@@ -203,7 +213,7 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 								"transition duration-300 ease-in-out",
 							)}
 							popperClassName="!z-20"
-							filterDate={(date) => moment(date).isAfter(new Date())}
+							filterTime={(date) => moment(date).isSameOrAfter(new Date())}
 							dateFormat="dd/MM/yyyy HH:mm"
 							selected={startDate}
 							showTimeSelect
@@ -219,7 +229,7 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 								"transition duration-300 ease-in-out",
 							)}
 							popperClassName="!z-20"
-							filterDate={(date) => moment(date).isAfter(startDate)}
+							filterTime={(date) => moment(date).isAfter(startDate)}
 							dateFormat="dd/MM/yyyy HH:mm"
 							selected={endDate}
 							showTimeSelect
@@ -228,6 +238,53 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 					</div>
 				</div>
 
+				{selectedModules.includes("speaking") && (
+					<div className="flex flex-col gap-3 w-full">
+						<label className="font-normal text-base text-mti-gray-dim">Speaking Instructor&apos;s Gender</label>
+						<Select
+							value={{value: instructorGender, label: capitalize(instructorGender)}}
+							onChange={(value) => (value ? setInstructorGender(value.value as InstructorGender) : null)}
+							disabled={!selectedModules.includes("speaking") || !!assignment}
+							options={[
+								{value: "male", label: "Male"},
+								{value: "female", label: "Female"},
+								{value: "varied", label: "Varied"},
+							]}
+						/>
+					</div>
+				)}
+
+				{selectedModules.length > 0 && (
+					<div className="flex flex-col gap-3 w-full">
+						<Checkbox isChecked={useRandomExams} onChange={setUseRandomExams}>
+							Random Exams
+						</Checkbox>
+						{!useRandomExams && (
+							<div className="grid md:grid-cols-2 w-full gap-4">
+								{selectedModules.map((module) => (
+									<div key={module} className="flex flex-col gap-3 w-full">
+										<label className="font-normal text-base text-mti-gray-dim">{capitalize(module)} Exam</label>
+										<Select
+											value={{
+												value: examIDs.find((e) => e.module === module)?.id || null,
+												label: examIDs.find((e) => e.module === module)?.id || "",
+											}}
+											onChange={(value) =>
+												value
+													? setExamIDs((prev) => [...prev.filter((x) => x.module !== module), {id: value.value!, module}])
+													: setExamIDs((prev) => prev.filter((x) => x.module !== module))
+											}
+											options={exams
+												.filter((x) => !x.isDiagnostic && x.module === module)
+												.map((x) => ({value: x.id, label: x.id}))}
+										/>
+									</div>
+								))}
+							</div>
+						)}
+					</div>
+				)}
+
 				<section className="w-full flex flex-col gap-3">
 					<span className="font-semibold">Assignees ({assignees.length} selected)</span>
 					<div className="flex gap-4 overflow-x-scroll scrollbar-hide">
@@ -284,6 +341,14 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 						))}
 					</div>
 				</section>
+				<div className="flex flex-col gap-4 w-full items-end">
+					<Checkbox isChecked={variant === "full"} onChange={() => setVariant((prev) => (prev === "full" ? "partial" : "full"))}>
+						Full length exams
+					</Checkbox>
+					<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
@@ -300,7 +365,14 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 						</Button>
 					)}
 					<Button
-						disabled={selectedModules.length === 0 || !name || !startDate || !endDate || assignees.length === 0}
+						disabled={
+							selectedModules.length === 0 ||
+							!name ||
+							!startDate ||
+							!endDate ||
+							assignees.length === 0 ||
+							(!!examIDs && examIDs.length < selectedModules.length)
+						}
 						className="w-full max-w-[200px]"
 						onClick={createAssignment}
 						isLoading={isLoading}>