Added level part display on excel and a pseudo sorting

Small bug fix

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

Dockerfile

@@ -54,4 +54,4 @@ EXPOSE 3000
 ENV PORT 3000
 ENV HOSTNAME localhost
 
-CMD ["node", "server.js"]
+CMD HOSTNAME="0.0.0.0" node server.js

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

next.config.js

@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
+const websiteUrl = process.env.NODE_ENV === 'production' ? "https://encoach.com" : "http://localhost:3000";
 const nextConfig = {
-	reactStrictMode: true,
+	reactStrictMode: false,
 	output: "standalone",
 	async headers() {
 		return [
@@ -8,7 +9,7 @@ const nextConfig = {
 				source: "/api/packages",
 				headers: [
 					{key: "Access-Control-Allow-Credentials", value: "false"},
-					{key: "Access-Control-Allow-Origin", value: "https://encoach.com"},
+					{key: "Access-Control-Allow-Origin", value: websiteUrl},
 					{
 						key: "Access-Control-Allow-Methods",
 						value: "GET",
@@ -19,6 +20,36 @@ const nextConfig = {
 					},
 				],
 			},
+			{
+				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",
+					},
+				],
+			},
 		];
 	},
 };

package.json

@@ -11,30 +11,40 @@
   },
   "dependencies": {
     "@beam-australia/react-env": "^3.1.1",
-    "@headlessui/react": "^1.7.13",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@firebase/util": "^1.9.7",
+    "@headlessui/react": "^2.1.2",
     "@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",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-popover": "^1.1.1",
     "@react-pdf/renderer": "^3.1.14",
+    "@react-spring/web": "^9.7.4",
     "@tanstack/react-table": "^8.10.1",
     "@types/node": "18.13.0",
-    "@types/react": "18.0.27",
-    "@types/react-dom": "18.0.10",
-    "axios": "^1.3.5",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@use-gesture/react": "^10.3.1",
+    "axios": "^1",
+    "axios-cache-interceptor": "^1",
     "bcrypt": "^5.1.1",
     "chart.js": "^4.2.1",
-    "clsx": "^1.2.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
     "countries-list": "^3.0.1",
     "country-codes-list": "^1.6.11",
     "currency-symbol-map": "^5.1.0",
     "daisyui": "^3.1.5",
     "eslint": "8.33.0",
     "eslint-config-next": "13.1.6",
+    "exceljs": "^4.4.0",
     "express-handlebars": "^7.1.2",
     "firebase": "9.19.1",
     "firebase-admin": "^11.10.1",
+    "firebase-scrypt": "^2.2.0",
     "formidable": "^3.5.0",
     "formidable-serverless": "^1.1.1",
     "framer-motion": "^9.0.2",
@@ -42,7 +52,8 @@
     "iron-session": "^6.3.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
-    "next": "13.1.6",
+    "moment-timezone": "^0.5.44",
+    "next": "^14.2.5",
     "nodemailer": "^6.9.5",
     "nodemailer-express-handlebars": "^6.1.0",
     "primeicons": "^6.0.1",
@@ -54,9 +65,10 @@
     "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",
+    "react-icons": "^5.3.0",
     "react-lineto": "^3.3.0",
     "react-media-recorder": "1.6.5",
     "react-phone-number-input": "^3.3.6",
@@ -64,12 +76,15 @@
     "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",
     "read-excel-file": "^5.7.1",
-    "short-unique-id": "^5.0.2",
+    "short-unique-id": "5.0.2",
     "stripe": "^13.10.0",
-    "swr": "^2.1.3",
+    "swr": "^2.2.5",
+    "tailwind-merge": "^2.5.2",
     "tailwind-scrollbar-hide": "^1.1.7",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "4.9.5",
     "use-file-picker": "^2.1.0",
     "uuid": "^9.0.0",
@@ -77,6 +92,7 @@
     "zustand": "^4.3.6"
   },
   "devDependencies": {
+    "@simbathesailor/use-what-changed": "^2.0.0",
     "@types/blob-stream": "^0.1.33",
     "@types/formidable": "^3.4.0",
     "@types/howler": "^2.2.11",
@@ -92,7 +108,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 = `
+        Encoach's 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. Encoach<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: "Encoach is uncertain about this text. If Encoach had to classify it, it would be considered",
+            human: "Encoach is uncertain about this text. If Encoach had to classify it, it would likely be considered",
+            mixed: "Encoach is uncertain about this text. If Encoach had to classify it, it would likely be a"
+        },
+        medium: {
+            ai: "Encoach is moderately confident this text was",
+            human: "Encoach is moderately confident this text is entirely",
+            mixed: "Encoach is moderately confident this text is a"
+        },
+        high: {
+            ai: "Encoach is highly confident this text was",
+            human: "Encoach is highly confident this text is entirely",
+            mixed: "Encoach 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">Encoach 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/BlankQuestionsModal.tsx

@@ -1,56 +0,0 @@
-import {Dialog, Transition} from "@headlessui/react";
-import {Fragment} from "react";
-import Button from "./Low/Button";
-
-interface Props {
-	isOpen: boolean;
-	onClose: (next?: boolean) => void;
-}
-
-export default function BlankQuestionsModal({isOpen, onClose}: Props) {
-	return (
-		<Transition show={isOpen} as={Fragment}>
-			<Dialog onClose={() => onClose(false)} className="relative z-50">
-				<Transition.Child
-					as={Fragment}
-					enter="ease-out duration-300"
-					enterFrom="opacity-0"
-					enterTo="opacity-100"
-					leave="ease-in duration-200"
-					leaveFrom="opacity-100"
-					leaveTo="opacity-0">
-					<div className="fixed inset-0 bg-black/30" />
-				</Transition.Child>
-
-				<Transition.Child
-					as={Fragment}
-					enter="ease-out duration-300"
-					enterFrom="opacity-0 scale-95"
-					enterTo="opacity-100 scale-100"
-					leave="ease-in duration-200"
-					leaveFrom="opacity-100 scale-100"
-					leaveTo="opacity-0 scale-95">
-					<div className="fixed inset-0 flex items-center justify-center p-4">
-						<Dialog.Panel className="w-full max-w-2xl h-fit p-8 rounded-xl bg-white flex flex-col gap-4">
-							<Dialog.Title className="font-bold text-xl">Questions Unanswered</Dialog.Title>
-							<span>
-								Please note that you are finishing the current module and once you proceed to the next module, you will no longer be
-								able to change the answers in the current one, including your unanswered questions. <br />
-								<br />
-								Are you sure you want to continue without completing those questions?
-							</span>
-							<div className="w-full flex justify-between mt-8">
-								<Button color="purple" onClick={() => onClose(false)} variant="outline" className="max-w-[200px] self-end w-full">
-									Go Back
-								</Button>
-								<Button color="purple" onClick={() => onClose(true)} className="max-w-[200px] self-end w-full">
-									Continue
-								</Button>
-							</div>
-						</Dialog.Panel>
-					</div>
-				</Transition.Child>
-			</Dialog>
-		</Transition>
-	);
-}

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";
@@ -12,6 +12,8 @@ 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,13 +21,18 @@ interface Props {
 }
 
 export default function DemographicInformationInput({user, mutateUser}: Props) {
-	const [country, setCountry] = useState<string>();
-	const [phone, setPhone] = useState<string>();
+	const [country, setCountry] = useState(user.demographicInformation?.country);
+	const [phone, setPhone] = useState(user.demographicInformation?.phone);
 	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 [position, setPosition] = useState(
+		user.type === "corporate" || user.type === "mastercorporate"
+			? user.demographicInformation?.position
+			: user.demographicInformation?.employment,
+	);
 
 	const [companyName, setCompanyName] = useState<string>();
 	const [commercialRegistration, setCommercialRegistration] = useState<string>();
@@ -43,6 +50,7 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
 					employment: user.type === "corporate" ? undefined : employment,
 					position: user.type === "corporate" ? position : undefined,
 					passport_id,
+					timezone,
 				},
 				agentInformation: user.type === "agent" ? {companyName, commercialRegistration} : undefined,
 			})
@@ -81,7 +89,7 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
 						<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 />
+					<Input type="tel" name="phone" label="Phone number" onChange={(e) => setPhone(e)} value={phone} placeholder="Enter phone number" required />
 				</div>
 				{user.type === "student" && (
 					<Input
@@ -94,9 +102,15 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
 						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 />
+					<Input name="position" onChange={setPosition} type="text" label="Department" placeholder="CEO, Head of Marketing..." required />
 				)}
 				{user.type !== "corporate" && <EmploymentStatusInput value={employment} onChange={setEmployment} />}
 			</form>

src/components/Diagnostic.tsx

@@ -14,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;
@@ -36,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)) {
@@ -90,140 +91,44 @@ 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>
-						</div>
-					</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
-								color="purple"
-								variant="outline"
-								className="group flex items-center justify-center gap-6 relative md:max-w-[400px] w-full md:hidden"
-								disabled>
-								<BsQuestionSquare className="text-mti-purple-light transition duration-300 ease-in-out" size={20} />
-								<span>Perform diagnostic test instead</span>
-							</Button>
-						</div>
-						<Button
-							onClick={() => updateUser(selectExam)}
-							color="purple"
-							variant="outline"
-							className="group flex items-center justify-center gap-6 relative md:max-w-[400px] w-full -md:hidden"
-							disabled={!focus}>
-							<BsQuestionSquare
-								className="text-mti-purple-light group-hover:text-white transition duration-300 ease-in-out"
-								size={20}
-								onClick={() => updateUser(selectExam)}
-							/>
-							<span onClick={() => updateUser(selectExam)}>Perform diagnostic test instead</span>
-						</Button>
-						<Button color="purple" className="md:max-w-[400px] w-full" onClick={() => updateUser(onFinish)} disabled={isNextDisabled()}>
-							Next Step
-						</Button>
-					</div>
+				<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
+						color="purple"
+						variant="outline"
+						className="group flex items-center justify-center gap-6 relative md:max-w-[400px] w-full md:hidden"
+						disabled>
+						<BsQuestionSquare className="text-mti-purple-light transition duration-300 ease-in-out" size={20} />
+						<span>Perform diagnostic test instead</span>
+					</Button>
 				</div>
+				<Button
+					onClick={() => updateUser(selectExam)}
+					color="purple"
+					variant="outline"
+					className="group flex items-center justify-center gap-6 relative md:max-w-[400px] w-full -md:hidden"
+					disabled={!focus}>
+					<BsQuestionSquare
+						className="text-mti-purple-light group-hover:text-white transition duration-300 ease-in-out"
+						size={20}
+						onClick={() => updateUser(selectExam)}
+					/>
+					<span onClick={() => updateUser(selectExam)}>Perform diagnostic test instead</span>
+				</Button>
+				<Button color="purple" className="md:max-w-[400px] w-full" onClick={() => updateUser(onFinish)} disabled={isNextDisabled()}>
+					Next Step
+				</Button>
 			</div>
 		</div>
 	);

src/components/Dropdown.tsx

@@ -0,0 +1,84 @@
+import React, { useState, ReactNode, useRef, useEffect } from 'react';
+import { animated, useSpring } from '@react-spring/web';
+
+interface DropdownProps {
+    title: ReactNode;
+    open?: boolean;
+    className?: string;
+    contentWrapperClassName?: string;
+    bottomPadding?: number;
+    children: ReactNode;
+}
+
+const Dropdown: React.FC<DropdownProps> = ({
+    title,
+    open = false,
+    className = "w-full text-left font-semibold flex justify-between items-center p-4",
+    contentWrapperClassName = "px-6",
+    bottomPadding = 12,
+    children
+}) => {
+    const [isOpen, setIsOpen] = useState<boolean>(open);
+    const contentRef = useRef<HTMLDivElement>(null);
+    const [contentHeight, setContentHeight] = useState<number>(0);
+
+    useEffect(() => {
+        let resizeObserver: ResizeObserver | null = null;
+        
+        if (contentRef.current) {
+            resizeObserver = new ResizeObserver(entries => {
+                for (let entry of entries) {
+                    if (entry.borderBoxSize && entry.borderBoxSize.length > 0) {
+                        const height = entry.borderBoxSize[0].blockSize;
+                        setContentHeight(height + bottomPadding);
+                    } else {
+                        // Fallback for browsers that don't support borderBoxSize
+                        const height = entry.contentRect.height;
+                        setContentHeight(height + bottomPadding);
+                    }
+                }
+            });
+    
+            resizeObserver.observe(contentRef.current);
+        }
+    
+        return () => {
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+        };
+    }, [bottomPadding]);
+
+    const springProps = useSpring({
+        height: isOpen ? contentHeight : 0,
+        opacity: isOpen ? 1 : 0,
+        config: { tension: 300, friction: 30 }
+    });
+
+    return (
+        <>
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                className={className}
+            >
+                {title}
+                <svg
+                    className={`w-4 h-4 transform transition-transform ${isOpen ? 'rotate-180' : ''}`}
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+            </button>
+            <animated.div style={springProps} className="overflow-hidden">
+                <div ref={contentRef} className={contentWrapperClassName} style={{paddingBottom: bottomPadding}}>
+                    {children}
+                </div>
+            </animated.div>
+        </>
+    );
+};
+
+export default Dropdown;

src/components/Exercises/FillBlanks.tsx

@@ -1,186 +0,0 @@
-import {FillBlanksExercise} from "@/interfaces/exam";
-import useExamStore from "@/stores/examStore";
-import clsx from "clsx";
-import {Fragment, useEffect, useState} from "react";
-import reactStringReplace from "react-string-replace";
-import {CommonProps} from ".";
-import Button from "../Low/Button";
-
-interface WordsDrawerProps {
-	words: {word: string; isDisabled: boolean}[];
-	isOpen: boolean;
-	blankId?: string;
-	previouslySelectedWord?: string;
-	onCancel: () => void;
-	onAnswer: (answer: string) => void;
-}
-
-function WordsDrawer({words, isOpen, blankId, previouslySelectedWord, onCancel, onAnswer}: WordsDrawerProps) {
-	const [selectedWord, setSelectedWord] = useState<string | undefined>(previouslySelectedWord);
-
-	return (
-		<>
-			<div
-				className={clsx(
-					"w-full h-full absolute top-0 left-0 bg-gradient-to-t from-mti-black to-transparent z-10",
-					isOpen ? "visible opacity-10" : "invisible opacity-0",
-				)}
-			/>
-			<div
-				className={clsx(
-					"absolute w-full bg-white px-7 py-8 bottom-0 left-0 shadow-2xl rounded-2xl z-20 flex flex-col gap-8 transition-opacity duration-300 ease-in-out",
-					isOpen ? "visible opacity-100" : "invisible opacity-0",
-				)}>
-				<div className="w-full flex gap-2">
-					<div className="rounded-full w-6 h-6 flex items-center justify-center text-white bg-mti-purple-light">{blankId}</div>
-					<span> Choose the correct word:</span>
-				</div>
-				<div className="grid grid-cols-6 gap-6" key="word-array">
-					{words.map(({word, isDisabled}) => (
-						<button
-							key={`${word}_${blankId}`}
-							onClick={() => setSelectedWord((prev) => (prev === word ? undefined : word))}
-							className={clsx(
-								"rounded-full py-3 text-center transition duration-300 ease-in-out",
-								selectedWord === word ? "text-white bg-mti-purple-light" : "bg-mti-purple-ultralight",
-								!isDisabled && "hover:text-white hover:bg-mti-purple",
-								"disabled:cursor-not-allowed disabled:text-mti-gray-dim",
-							)}
-							disabled={isDisabled}>
-							{word}
-						</button>
-					))}
-				</div>
-				<div className="flex justify-between w-full">
-					<Button color="purple" variant="outline" className="max-w-[200px] w-full" onClick={onCancel}>
-						Cancel
-					</Button>
-					<Button color="purple" className="max-w-[200px] w-full" onClick={() => onAnswer(selectedWord!)} disabled={!selectedWord}>
-						Confirm
-					</Button>
-				</div>
-			</div>
-		</>
-	);
-}
-
-export default function FillBlanks({
-	id,
-	allowRepetition,
-	type,
-	prompt,
-	solutions,
-	text,
-	words,
-	userSolutions,
-	onNext,
-	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});
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [hasExamEnded]);
-
-	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 missing = total - answers.filter((x) => solutions.find((y) => x.id.toString() === y.id.toString())).length;
-
-		return {total, correct, missing};
-	};
-
-	const renderLines = (line: string) => {
-		return (
-			<span 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
-							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",
-							)}
-							onClick={() => setCurrentBlankId(id)}>
-							{userSolution ? userSolution.solution : id}
-						</button>
-					);
-				})}
-			</span>
-		);
-	};
-
-	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);
-						}}
-					/>
-				)}
-				<span className="text-sm w-full leading-6">
-					{prompt.split("\\n").map((line, index) => (
-						<Fragment key={index}>
-							{line}
-							<br />
-						</Fragment>
-					))}
-				</span>
-				<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">
-					{text.split("\\n").map((line, index) => (
-						<p key={index}>
-							{renderLines(line)}
-							<br />
-						</p>
-					))}
-				</span>
-			</div>
-
-			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
-				<Button
-					color="purple"
-					variant="outline"
-					onClick={() => onBack({exercise: id, solutions: answers, score: calculateScore(), type})}
-					className="max-w-[200px] w-full">
-					Back
-				</Button>
-
-				<Button
-					color="purple"
-					onClick={() => onNext({exercise: id, solutions: answers, score: calculateScore(), type})}
-					className="max-w-[200px] self-end w-full">
-					Next
-				</Button>
-			</div>
-		</>
-	);
-}

src/components/Exercises/FillBlanks/MCDropdown.tsx

@@ -0,0 +1,84 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { animated, useSpring } from '@react-spring/web';
+import clsx from 'clsx';
+
+interface MCDropdownProps {
+  id: string;
+  options: { [key: string]: string };
+  onSelect: (value: string) => void;
+  selectedValue?: string;
+  className?: string;
+  width: number;
+  isOpen: boolean;
+  onToggle: (id: string) => void;
+}
+
+const MCDropdown: React.FC<MCDropdownProps> = ({
+  id,
+  options,
+  onSelect,
+  selectedValue,
+  className = "relative",
+  width,
+  isOpen,
+  onToggle,
+}) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [contentHeight, setContentHeight] = useState(0);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      setContentHeight(contentRef.current.scrollHeight);
+    }
+  }, [options]);
+
+  const springProps = useSpring({
+    height: isOpen ? contentHeight : 0,
+    opacity: isOpen ? 1 : 0,
+    config: { tension: 300, friction: 30 }
+  });
+
+  return (
+    <div className={`${className} inline-block`} style={{ width: `${width}px` }}>
+      <button
+        onClick={() => onToggle(id)}
+        className={
+          clsx("rounded-full hover:text-white transition duration-300 ease-in-out px-5 py-2 text-center w-full flex items-center justify-between",
+          selectedValue ? "bg-mti-purple text-white" : "bg-mti-purple-ultralight text-mti-purple-light"
+        )}
+      >
+        <span className="truncate p-1">{selectedValue || 'Select an option'}</span>
+        <svg
+          className={`w-4 h-4 transform transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+      <animated.div
+        style={{ ...springProps, width: `${width}px` }}
+        className="absolute z-10 mt-1 overflow-hidden bg-white rounded-md shadow-lg"
+      >
+        <div ref={contentRef}>
+          {Object.entries(options).sort((a, b) => a[0].localeCompare(b[0])).map(([key, value]) => (
+            <div
+              key={key}
+              onClick={() => {
+                onSelect(value);
+                onToggle(id);
+              }}
+              className="p-4 hover:bg-mti-purple-ultralight cursor-pointer whitespace-nowrap"
+            >
+              <span>{value}</span>
+            </div>
+          ))}
+        </div>
+      </animated.div>
+    </div>
+  );
+};
+
+export default MCDropdown;

src/components/Exercises/FillBlanks/WordsDrawer.tsx

@@ -0,0 +1,64 @@
+import Button from "@/components/Low/Button";
+import clsx from "clsx";
+import { useState } from "react";
+
+interface WordsDrawerProps {
+	words: {word: string; isDisabled: boolean}[];
+	isOpen: boolean;
+	blankId?: string;
+	previouslySelectedWord?: string;
+	onCancel: () => void;
+	onAnswer: (answer: string) => void;
+}
+
+
+const WordsDrawer: React.FC<WordsDrawerProps> = ({words, isOpen, blankId, previouslySelectedWord, onCancel, onAnswer}) => {
+	const [selectedWord, setSelectedWord] = useState<string | undefined>(previouslySelectedWord);
+
+	return (
+		<>
+			<div
+				className={clsx(
+					"w-full h-full absolute top-0 left-0 bg-gradient-to-t from-mti-black to-transparent z-10",
+					isOpen ? "visible opacity-10" : "invisible opacity-0",
+				)}
+			/>
+			<div
+				className={clsx(
+					"absolute w-full bg-white px-7 py-8 bottom-0 left-0 shadow-2xl rounded-2xl z-20 flex flex-col gap-8 transition-opacity duration-300 ease-in-out",
+					isOpen ? "visible opacity-100" : "invisible opacity-0",
+				)}>
+				<div className="w-full flex gap-2">
+					<div className="rounded-full w-6 h-6 flex items-center justify-center text-white bg-mti-purple-light">{blankId}</div>
+					<span> Choose the correct word:</span>
+				</div>
+				<div className="grid grid-cols-6 gap-6" key="word-array">
+					{words.map(({word, isDisabled}) => (
+						<button
+							key={`${word}_${blankId}`}
+							onClick={() => setSelectedWord((prev) => (prev === word ? undefined : word))}
+							className={clsx(
+								"rounded-full py-3 text-center transition duration-300 ease-in-out",
+								selectedWord === word ? "text-white bg-mti-purple-light" : "bg-mti-purple-ultralight",
+								!isDisabled && "hover:text-white hover:bg-mti-purple",
+								"disabled:cursor-not-allowed disabled:text-mti-gray-dim",
+							)}
+							disabled={isDisabled}>
+							{word}
+						</button>
+					))}
+				</div>
+				<div className="flex justify-between w-full">
+					<Button color="purple" variant="outline" className="max-w-[200px] w-full" onClick={onCancel}>
+						Cancel
+					</Button>
+					<Button color="purple" className="max-w-[200px] w-full" onClick={() => onAnswer(selectedWord!)} disabled={!selectedWord}>
+						Confirm
+					</Button>
+				</div>
+			</div>
+		</>
+	);
+}
+
+export default WordsDrawer;

src/components/Exercises/FillBlanks/index.tsx

@@ -0,0 +1,239 @@
+import { FillBlanksExercise, FillBlanksMCOption } from "@/interfaces/exam";
+import useExamStore from "@/stores/examStore";
+import clsx from "clsx";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import reactStringReplace from "react-string-replace";
+import { CommonProps } from "..";
+import Button from "../../Low/Button";
+import { v4 } from "uuid";
+import MCDropdown from "./MCDropdown";
+
+const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
+	id,
+	type,
+	prompt,
+	solutions,
+	text,
+	words,
+	userSolutions,
+	variant,
+	onNext,
+	onBack,
+}) => {
+	const { shuffles, exam, partIndex, questionIndex, exerciseIndex } = useExamStore((state) => state);
+	const [answers, setAnswers] = useState<{ id: string; solution: string }[]>(userSolutions);
+	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
+	const setCurrentSolution = useExamStore((state) => state.setCurrentSolution);
+	const shuffleMaps = shuffles.find((x) => x.exerciseID == id)?.shuffles;
+	const dropdownRef = useRef<HTMLDivElement>(null);
+
+	const excludeWordMCType = (x: any) => {
+		return typeof x === "string" ? x : (x as { letter: string; word: string });
+	};
+
+	useEffect(() => {
+		if (hasExamEnded) onNext({ exercise: id, solutions: answers, score: calculateScore(), type });
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [hasExamEnded]);
+
+	let correctWords: any;
+	if (exam && (exam.module === "level" || exam.module === "reading") && exam.parts[partIndex].exercises[exerciseIndex].type === "fillBlanks") {
+		correctWords = (exam.parts[partIndex].exercises[exerciseIndex] as FillBlanksExercise).words;
+	}
+
+	useEffect(() => {
+		const handleClickOutside = (event: MouseEvent) => {
+		  if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+			setOpenDropdownId(null);
+		  }
+		};
+	  
+		document.addEventListener('mousedown', handleClickOutside);
+		return () => {
+		  document.removeEventListener('mousedown', handleClickOutside);
+		};
+	  }, []);
+
+	const calculateScore = () => {
+		const total = text.match(/({{\d+}})/g)?.length || 0;
+		const correct = answers!.filter((x) => {
+			const solution = solutions.find((y) => x.id.toString() === y.id.toString())?.solution;
+			if (!solution) return false;
+			const option = correctWords!.find((w: any) => {
+				if (typeof w === "string") {
+					return w.toLowerCase() === x.solution.toLowerCase();
+				} else if ("letter" in w) {
+					return w.letter.toLowerCase() === x.solution.toLowerCase();
+				} else {
+					return w.id.toString() === x.id.toString();
+				}
+			});
+			if (!option) return false;
+
+			if (typeof option === "string") {
+				return solution.toLowerCase() === option.toLowerCase();
+			} else if ("letter" in option) {
+				return solution.toLowerCase() === option.word.toLowerCase();
+			} else if ("options" in option) {
+				return option.options[solution as keyof typeof option.options] == x.solution;
+			}
+			return false;
+		}).length;
+		const missing = total - answers!.filter((x) => solutions.find((y) => x.id.toString() === y.id.toString())).length;
+		return { total, correct, missing };
+	};
+
+	const [openDropdownId, setOpenDropdownId] = useState<string | null>(null);
+
+	const renderLines = useCallback(
+		(line: string) => {
+			return (
+				<div className="text-xl leading-5" key={v4()} ref={dropdownRef}>
+					{reactStringReplace(line, /({{\d+}})/g, (match) => {
+						const id = match.replaceAll(/[\{\}]/g, "");
+						const userSolution = answers.find((x) => x.id === id);
+						const styles = clsx(
+							"rounded-full hover:text-white transition duration-300 ease-in-out my-1 px-5 py-2 text-center w-fit",
+							!userSolution && "text-center text-mti-purple-light bg-mti-purple-ultralight",
+							userSolution && "text-center text-mti-purple-dark bg-mti-purple-ultralight",
+						);
+
+						const currentSelection = words.find((x) => {
+							if (typeof x !== "string" && "id" in x) {
+								return (x as FillBlanksMCOption).id.toString() == id.toString();
+							}
+							return false;
+						}) as FillBlanksMCOption;
+
+						return variant === "mc" ? (
+							<MCDropdown
+								id={id}
+								options={currentSelection.options}
+								onSelect={(value) => onSelection(id, value)}
+								selectedValue={userSolution?.solution}
+								className="inline-block py-2 px-1"
+								width={220}
+								isOpen={openDropdownId === id}
+								onToggle={()=> setOpenDropdownId(prevId => prevId === id ? null : id)}
+							/>
+						) : (
+							<input
+								className={styles}
+								onChange={(e) => setAnswers((prev) => [...prev.filter((x) => x.id !== id), { id, solution: e.target.value }])}
+								value={userSolution?.solution}
+							/>
+						);
+					})
+					}
+				</div >
+			);
+		},
+		[variant, words, answers, openDropdownId],
+	);
+
+	const memoizedLines = useMemo(() => {
+		return text.split("\\n").map((line, index) => (
+			<p key={index} className={clsx(variant === "mc" && "whitespace-pre-wrap")}>
+				{renderLines(line)}
+				<br />
+			</p>
+		));
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [text, variant, renderLines]);
+
+	const onSelection = (questionID: string, value: string) => {
+		setAnswers((prev) => [...prev.filter((x) => x.id !== questionID), { id: questionID, solution: value }]);
+	};
+
+	useEffect(() => {
+		if (variant === "mc") {
+			setCurrentSolution({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps });
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [answers]);
+
+	return (
+		<div className="flex flex-col gap-4">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() => onBack({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps })}
+					className="max-w-[200px] w-full"
+					disabled={exam && exam.module === "level" && partIndex === 0 && questionIndex === 0}>
+					Previous Page
+				</Button>
+
+				<Button
+					color="purple"
+					onClick={() => {
+						onNext({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps });
+					}}
+					className="max-w-[200px] self-end w-full">
+					Next Page
+				</Button>
+			</div>
+
+			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
+				{variant !== "mc" && (
+					<span className="text-sm w-full leading-6">
+						{prompt.split("\\n").map((line, index) => (
+							<Fragment key={index}>
+								{line}
+								<br />
+							</Fragment>
+						))}
+					</span>
+				)}
+				<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">{memoizedLines}</span>
+				{variant !== "mc" && (
+					<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) => {
+								v = excludeWordMCType(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 : "letter" in v ? v.letter : "").toLowerCase(),
+											) && "bg-mti-purple-dark text-white",
+										)}
+										key={v4()}>
+										{text}
+									</span>
+								);
+							})}
+						</div>
+					</div>
+				)}
+			</div>
+			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() => onBack({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps })}
+					className="max-w-[200px] w-full"
+					disabled={exam && exam.module === "level" && partIndex === 0 && questionIndex === 0}>
+					Previous Page
+				</Button>
+
+				<Button
+					color="purple"
+					onClick={() => {
+						onNext({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps });
+					}}
+					className="max-w-[200px] self-end w-full">
+					Next Page
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+export default FillBlanks;

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,195 +120,189 @@ 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>
-				</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>
-					</div>
-				)}
-			</div>
-
-			<ReactMediaRecorder
-				audio
-				key={promptIndex}
-				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">
-						<p className="text-base font-normal">Record your answer:</p>
-						<div className="flex gap-8 items-center justify-center py-8">
-							{status === "idle" && (
-								<>
-									<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
-									{status === "idle" && (
-										<BsMicFill
-											onClick={() => {
-												setRecordingDuration(0);
-												startRecording();
-												setIsRecording(true);
-											}}
-											className="h-5 w-5 text-mti-gray-cool cursor-pointer"
-										/>
-									)}
-								</>
-							)}
-							{status === "recording" && (
-								<>
-									<div className="flex gap-4 items-center">
-										<span className="text-xs w-9">
-											{Math.floor(recordingDuration / 60)
-												.toString(10)
-												.padStart(2, "0")}
-											:
-											{Math.floor(recordingDuration % 60)
-												.toString(10)
-												.padStart(2, "0")}
-										</span>
-									</div>
-									<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
-									<div className="flex gap-4 items-center">
-										<BsPauseCircle
-											onClick={() => {
-												setIsRecording(false);
-												pauseRecording();
-											}}
-											className="text-red-500 w-8 h-8 cursor-pointer"
-										/>
-										<BsCheckCircleFill
-											onClick={() => {
-												setIsRecording(false);
-												stopRecording();
-											}}
-											className="text-mti-purple-light w-8 h-8 cursor-pointer"
-										/>
-									</div>
-								</>
-							)}
-							{status === "paused" && (
-								<>
-									<div className="flex gap-4 items-center">
-										<span className="text-xs w-9">
-											{Math.floor(recordingDuration / 60)
-												.toString(10)
-												.padStart(2, "0")}
-											:
-											{Math.floor(recordingDuration % 60)
-												.toString(10)
-												.padStart(2, "0")}
-										</span>
-									</div>
-									<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
-									<div className="flex gap-4 items-center">
-										<BsPlayCircle
-											onClick={() => {
-												setIsRecording(true);
-												resumeRecording();
-											}}
-											className="text-mti-purple-light w-8 h-8 cursor-pointer"
-										/>
-										<BsCheckCircleFill
-											onClick={() => {
-												setIsRecording(false);
-												stopRecording();
-											}}
-											className="text-mti-purple-light w-8 h-8 cursor-pointer"
-										/>
-									</div>
-								</>
-							)}
-							{status === "stopped" && mediaBlobUrl && (
-								<>
-									<Waveform audio={mediaBlobUrl} waveColor="#FCDDEC" progressColor="#EF5DA8" />
-									<div className="flex gap-4 items-center">
-										<BsTrashFill
-											className="text-mti-gray-cool cursor-pointer w-5 h-5"
-											onClick={() => {
-												setRecordingDuration(0);
-												clearBlobUrl();
-												setMediaBlob(undefined);
-											}}
-										/>
-
-										<BsMicFill
-											onClick={() => {
-												clearBlobUrl();
-												setRecordingDuration(0);
-												startRecording();
-												setIsRecording(true);
-												setMediaBlob(undefined);
-											}}
-											className="h-5 w-5 text-mti-gray-cool cursor-pointer"
-										/>
-									</div>
-								</>
-							)}
-						</div>
-					</div>
-				)}
-			/>
-
-			<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">
+		<div className="flex flex-col gap-4 mt-4 w-full">
+			<div className="flex justify-between w-full gap-8">
+				<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 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">{!!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={questionIndex} autoPlay controls className="max-w-3xl rounded-xl">
+								<source src={prompts[questionIndex].video_url} />
+							</video>
+						</div>
+					)}
+				</div>
+
+				<ReactMediaRecorder
+					audio
+					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">
+							<p className="text-base font-normal">Record your answer:</p>
+							<div className="flex gap-8 items-center justify-center py-8">
+								{status === "idle" && (
+									<>
+										<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
+										{status === "idle" && (
+											<BsMicFill
+												onClick={() => {
+													setRecordingDuration(0);
+													startRecording();
+													setIsRecording(true);
+												}}
+												className="h-5 w-5 text-mti-gray-cool cursor-pointer"
+											/>
+										)}
+									</>
+								)}
+								{status === "recording" && (
+									<>
+										<div className="flex gap-4 items-center">
+											<span className="text-xs w-9">
+												{Math.floor(recordingDuration / 60)
+													.toString(10)
+													.padStart(2, "0")}
+												:
+												{Math.floor(recordingDuration % 60)
+													.toString(10)
+													.padStart(2, "0")}
+											</span>
+										</div>
+										<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
+										<div className="flex gap-4 items-center">
+											<BsPauseCircle
+												onClick={() => {
+													setIsRecording(false);
+													pauseRecording();
+												}}
+												className="text-red-500 w-8 h-8 cursor-pointer"
+											/>
+											<BsCheckCircleFill
+												onClick={() => {
+													setIsRecording(false);
+													stopRecording();
+												}}
+												className="text-mti-purple-light w-8 h-8 cursor-pointer"
+											/>
+										</div>
+									</>
+								)}
+								{status === "paused" && (
+									<>
+										<div className="flex gap-4 items-center">
+											<span className="text-xs w-9">
+												{Math.floor(recordingDuration / 60)
+													.toString(10)
+													.padStart(2, "0")}
+												:
+												{Math.floor(recordingDuration % 60)
+													.toString(10)
+													.padStart(2, "0")}
+											</span>
+										</div>
+										<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
+										<div className="flex gap-4 items-center">
+											<BsPlayCircle
+												onClick={() => {
+													setIsRecording(true);
+													resumeRecording();
+												}}
+												className="text-mti-purple-light w-8 h-8 cursor-pointer"
+											/>
+											<BsCheckCircleFill
+												onClick={() => {
+													setIsRecording(false);
+													stopRecording();
+												}}
+												className="text-mti-purple-light w-8 h-8 cursor-pointer"
+											/>
+										</div>
+									</>
+								)}
+								{status === "stopped" && mediaBlobUrl && (
+									<>
+										<Waveform audio={mediaBlobUrl} waveColor="#FCDDEC" progressColor="#EF5DA8" />
+										<div className="flex gap-4 items-center">
+											<BsTrashFill
+												className="text-mti-gray-cool cursor-pointer w-5 h-5"
+												onClick={() => {
+													setRecordingDuration(0);
+													clearBlobUrl();
+													setMediaBlob(undefined);
+												}}
+											/>
+
+											<BsMicFill
+												onClick={() => {
+													clearBlobUrl();
+													setRecordingDuration(0);
+													startRecording();
+													setIsRecording(true);
+													setMediaBlob(undefined);
+												}}
+												className="h-5 w-5 text-mti-gray-cool cursor-pointer"
+											/>
+										</div>
+									</>
+								)}
+							</div>
+						</div>
+					)}
+				/>
+
+				<div className="self-end flex justify-between w-full  gap-8">
+					<Button color="purple" variant="outline" isLoading={isLoading} onClick={back} className="max-w-[200px] self-end w-full">
+						Back
+					</Button>
+					<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>
 		</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,81 @@ 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 setCurrentSolution = useExamStore((state) => state.setCurrentSolution);
+
+	useEffect(() => {
+		setCurrentSolution({exercise: id, solutions: answers, score: calculateScore(), type});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [answers, setAnswers]);
+
+	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,20 +94,31 @@ 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
 	}, [hasExamEnded]);
 
 	return (
-		<>
-			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
+		<div className="flex flex-col gap-4 mt-4">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() => onBack({exercise: id, solutions: answers, score: calculateScore(), type})}
+					className="max-w-[200px] w-full">
+					Back
+				</Button>
+
+				<Button
+					color="purple"
+					onClick={() => onNext({exercise: id, solutions: answers, score: calculateScore(), type})}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
+			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>
@@ -48,46 +127,28 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 						</Fragment>
 					))}
 				</span>
-				<div className="flex gap-8 w-full items-center justify-between bg-mti-gray-smoke rounded-xl px-24 py-6">
-					<div className="flex flex-col gap-4">
-						{sentences.map(({sentence, id}) => (
-							<div key={`question_${id}`} className="flex items-center justify-end gap-2 cursor-pointer">
-								<span>{sentence} </span>
-								<button
-									id={id}
-									onClick={() => setSelectedQuestion((prev) => (prev === id ? undefined : id))}
-									className={clsx(
-										"bg-mti-purple-ultralight text-mti-purple hover:text-white hover:bg-mti-purple w-8 h-8 rounded-full z-10",
-										"transition duration-300 ease-in-out",
-										selectedQuestion === id && "!text-white !bg-mti-purple",
-										id,
-									)}>
-									{id}
-								</button>
+
+				<DndContext onDragEnd={handleDragEnd}>
+					<div className="flex flex-col gap-8 w-full items-center justify-between bg-mti-gray-smoke rounded-xl px-24 py-6">
+						<div className="flex flex-col gap-4">
+							{sentences.map((question) => (
+								<DroppableQuestionArea
+									key={`question_${question.id}`}
+									question={question}
+									answer={answers.find((x) => x.question.toString() === question.id.toString())?.option}
+								/>
+							))}
+						</div>
+						<div className="flex flex-col gap-4">
+							<span>Drag one of these paragraphs into the slots above:</span>
+							<div className="flex gap-4 flex-wrap justify-center items-center max-w-lg">
+								{options.map((option) => (
+									<DraggableOptionArea key={`answer_${option.id}`} option={option} />
+								))}
 							</div>
-						))}
+						</div>
 					</div>
-					<div className="flex flex-col gap-4">
-						{options.map(({sentence, id}) => (
-							<div key={`answer_${id}`} className={clsx("flex items-center justify-start gap-2 cursor-pointer")}>
-								<button
-									id={id}
-									onClick={() => selectOption(id)}
-									className={clsx(
-										"bg-mti-purple-ultralight text-mti-purple hover:text-white hover:bg-mti-purple w-8 h-8 rounded-full z-10",
-										"transition duration-300 ease-in-out",
-										id,
-									)}>
-									{id}
-								</button>
-								<span>{sentence}</span>
-							</div>
-						))}
-					</div>
-					{answers.map((solution, index) => (
-						<Xarrow key={index} start={solution.question} end={solution.option} lineColor="#7872BF" showHead={false} />
-					))}
-				</div>
+				</DndContext>
 			</div>
 
 			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
@@ -106,6 +167,6 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

src/components/Exercises/MultipleChoice.tsx

@@ -1,43 +1,67 @@
 /* eslint-disable @next/next/no-img-element */
-import {MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam";
+import {MultipleChoiceExercise, MultipleChoiceQuestion, ShuffleMap} 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";
+import {v4} from "uuid";
 
 function Question({
+	id,
 	variant,
 	prompt,
 	options,
 	userSolution,
 	onSelectOption,
-}: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) {
+}: MultipleChoiceQuestion & {
+	userSolution: string | undefined;
+	onSelectOption?: (option: string) => void;
+	showSolution?: boolean;
+}) {
+	const renderPrompt = (prompt: string) => {
+		return reactStringReplace(prompt, /(<u>.*?<\/u>)/g, (match) => {
+			const word = match.replaceAll("<u>", "").replaceAll("</u>", "");
+			return word.length > 0 ? <u key={v4()}>{word}</u> : null;
+		});
+	};
+
 	return (
-		<div className="flex flex-col gap-10">
-			<span className="">{prompt}</span>
+		<div className="flex flex-col gap-8">
+			{isNaN(Number(id)) ? (
+				<span className="text-lg">{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")}</span>
+			) : (
+				<span className="text-lg">
+					<>
+						{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) => (
 						<div
-							key={option.id.toString()}
+							key={v4()}
 							onClick={() => (onSelectOption ? onSelectOption(option.id.toString()) : null)}
 							className={clsx(
-								"flex flex-col items-center border border-mti-gray-platinum p-4 px-8 rounded-xl gap-4 cursor-pointer bg-white relative",
+								"flex flex-col items-center border border-mti-gray-platinum p-4 px-8 rounded-xl gap-4 cursor-pointer bg-white relative select-none",
 								userSolution === option.id.toString() && "border-mti-purple-light",
 							)}>
-							<span className={clsx("text-sm", userSolution !== option.id.toString() && "opacity-50")}>{option.id.toString()}</span>
+							<span key={v4()} className={clsx("text-sm", userSolution !== option.id.toString() && "opacity-50")}>
+								{option.id.toString()}
+							</span>
 							<img src={option.src!} alt={`Option ${option.id.toString()}`} />
 						</div>
 					))}
 				{variant === "text" &&
 					options.map((option) => (
 						<div
-							key={option.id.toString()}
+							key={v4()}
 							onClick={() => (onSelectOption ? onSelectOption(option.id.toString()) : null)}
 							className={clsx(
-								"flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-sm",
-								userSolution === option.id.toString() && "border-mti-purple-light",
+								"flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-base select-none",
+								userSolution === option.id.toString() && "!bg-mti-purple-light !text-white",
 							)}>
 							<span className="font-semibold">{option.id.toString()}.</span>
 							<span>{option.text}</span>
@@ -48,83 +72,150 @@ 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 hasExamEnded = useExamStore((state) => state.hasExamEnded);
+	const {questionIndex, exerciseIndex, exam, shuffles, hasExamEnded, partIndex, setQuestionIndex, setCurrentSolution} = useExamStore(
+		(state) => state,
+	);
+
+	const shuffleMaps = shuffles.find((x) => x.exerciseID == id)?.shuffles;
+
+	const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));
 
 	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];
+	const onSelectOption = (option: string, question: MultipleChoiceQuestion) => {
 		setAnswers((prev) => [...prev.filter((x) => x.question !== question.id), {option, question: question.id}]);
 	};
 
+	useEffect(() => {
+		setCurrentSolution({exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [answers, setAnswers]);
+
+	const getShuffledSolution = (originalSolution: string, questionShuffleMap: ShuffleMap) => {
+		for (const [newPosition, originalPosition] of Object.entries(questionShuffleMap.map)) {
+			if (originalPosition === originalSolution) {
+				return newPosition;
+			}
+		}
+		return originalSolution;
+	};
+
 	const calculateScore = () => {
 		const total = questions.length;
-		const correct = answers.filter(
-			(x) => questions.find((y) => y.id.toString() === x.question.toString())?.solution === x.option || false,
-		).length;
-		const missing = total - answers.filter((x) => questions.find((y) => y.id.toString() === x.question.toString())).length;
+		const correct = answers.filter((x) => {
+			const matchingQuestion = questions.find((y) => {
+				return y.id.toString() === x.question.toString();
+			});
 
+			let isSolutionCorrect;
+			if (!shuffleMaps) {
+				isSolutionCorrect = matchingQuestion?.solution === x.option;
+			} else {
+				const shuffleMap = shuffleMaps.find((map) => map.questionID == x.question);
+				if (shuffleMap) {
+					isSolutionCorrect = getShuffledSolution(x.option, shuffleMap) == matchingQuestion?.solution;
+				} else {
+					isSolutionCorrect = matchingQuestion?.solution === x.option;
+				}
+			}
+			return isSolutionCorrect || false;
+		}).length;
+		const missing = total - answers!.filter((x) => questions.find((y) => x.question.toString() === y.id.toString())).length;
 		return {total, correct, missing};
 	};
 
 	const next = () => {
-		if (questionIndex === questions.length - 1) {
-			onNext({exercise: id, solutions: answers, score: calculateScore(), type});
+		if (questionIndex + 1 >= questions.length - 1) {
+			onNext({exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps});
 		} else {
-			setQuestionIndex((prev) => prev + 1);
+			setQuestionIndex(questionIndex + 2);
 		}
+		scrollToTop();
 	};
 
 	const back = () => {
 		if (questionIndex === 0) {
-			onBack({exercise: id, solutions: answers, score: calculateScore(), type});
+			onBack({exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps});
 		} else {
-			setQuestionIndex((prev) => prev - 1);
+			if (exam?.module === "level" && typeof exam.parts[0].intro !== "undefined" && questionIndex === 0) return;
+			setQuestionIndex(questionIndex - 2);
 		}
+
+		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">
-				<span className="text-xl font-semibold">{prompt}</span>
-				{questionIndex < questions.length && (
-					<Question
-						{...questions[questionIndex]}
-						userSolution={answers.find((x) => questions[questionIndex].id === x.question)?.option}
-						onSelectOption={onSelectOption}
-					/>
-				)}
-			</div>
-
-			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
-				<Button color="purple" variant="outline" onClick={back} className="max-w-[200px] w-full">
+		<div className="flex flex-col gap-4">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={back}
+					className="max-w-[200px] w-full"
+					disabled={exam && exam.module === "level" && partIndex === 0 && questionIndex === 0}>
 					Back
 				</Button>
 
 				<Button color="purple" onClick={next} className="max-w-[200px] self-end w-full">
-					Next
+					{exam &&
+					exam.module === "level" &&
+					partIndex === exam.parts.length - 1 &&
+					exerciseIndex === exam.parts[partIndex].exercises.length - 1 &&
+					questionIndex + 1 >= questions.length - 1
+						? "Submit"
+						: "Next"}
 				</Button>
 			</div>
-		</>
+
+			<div className="flex flex-col gap-4 mt-4 mb-20">
+				<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
+					{/*<span className="text-xl font-semibold mb-2">{"Select the appropriate option."}</span>*/}
+					{questionIndex < questions.length && (
+						<Question
+							{...questions[questionIndex]}
+							userSolution={answers.find((x) => questions[questionIndex].id === x.question)?.option}
+							onSelectOption={(option) => onSelectOption(option, questions[questionIndex])}
+						/>
+					)}
+				</div>
+
+				{questionIndex + 1 < questions.length && (
+					<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
+						<Question
+							{...questions[questionIndex + 1]}
+							userSolution={answers.find((x) => questions[questionIndex + 1].id === x.question)?.option}
+							onSelectOption={(option) => onSelectOption(option, questions[questionIndex + 1])}
+						/>
+					</div>
+				)}
+			</div>
+
+			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={back}
+					className="max-w-[200px] w-full"
+					disabled={exam && exam.module === "level" && partIndex === 0 && questionIndex === 0}>
+					Back
+				</Button>
+
+				<Button color="purple" onClick={next} className="max-w-[200px] self-end w-full">
+					{exam &&
+					exam.module === "level" &&
+					partIndex === exam.parts.length - 1 &&
+					exerciseIndex === exam.parts[partIndex].exercises.length - 1 &&
+					questionIndex + 1 >= questions.length - 1
+						? "Submit"
+						: "Next"}
+				</Button>
+			</div>
+		</div>
 	);
 }

src/components/Exercises/Speaking.tsx

@@ -5,28 +5,61 @@ 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 [inputText, setInputText] = useState("");
 
 	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,192 +76,242 @@ 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,
+		});
+	};
+
+	const handleNoteWriting = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+		const newText = e.target.value;
+		const words = newText.match(/\S+/g);
+		const wordCount = words ? words.length : 0;
+
+		if (wordCount <= 100) {
+			setInputText(newText);
+		} else {
+			let count = 0;
+			let lastIndex = 0;
+			const matches = newText.matchAll(/\S+/g);
+			for (const match of matches) {
+				count++;
+				if (count > 100) break;
+				lastIndex = match.index! + match[0].length;
+			}
+
+			setInputText(newText.slice(0, lastIndex));
+		}
+	};
+
 	return (
-		<div className="flex flex-col h-full w-full gap-9">
-			<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">
-					<span className="font-semibold">{title}</span>
-					{!video_url && (
-						<span className="font-regular">
-							{text.split("\\n").map((line, index) => (
-								<Fragment key={index}>
-									<span>{line}</span>
-									<br />
-								</Fragment>
+		<div className="flex flex-col gap-4 mt-4 w-full">
+			<div className="flex justify-between w-full gap-8">
+				<Button color="purple" variant="outline" isLoading={isLoading} onClick={back} className="max-w-[200px] self-end w-full">
+					Back
+				</Button>
+				<Button color="purple" isLoading={isLoading} disabled={!mediaBlob} onClick={next} className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
+			<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>
 							))}
-						</span>
-					)}
-				</div>
-				<div className="flex gap-6">
-					{video_url && (
-						<div className="flex flex-col gap-4 w-full items-center">
-							<video key={id} autoPlay controls className="max-w-3xl rounded-xl">
-								<source src={video_url} />
-							</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>
+						{!!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 1 minute and 30 seconds for your answer to be valid.
+								</span>
+							)}
+						</div>
+						{!video_url && (
+							<span className="font-regular">
+								{text.split("\\n").map((line, index) => (
+									<Fragment key={index}>
+										<span>{line}</span>
+										<br />
+									</Fragment>
 								))}
+							</span>
+						)}
+					</div>
+					<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">
+									<source src={video_url} />
+								</video>
+							</div>
+						)}
+						{prompts && prompts.length > 0 && <Button onClick={() => setIsPromptsModalOpen(true)}>View Prompts</Button>}
+					</div>
+				</div>
+
+				{prompts && prompts.length > 0 && (
+					<div className="w-full h-full flex flex-col gap-4">
+						<textarea
+							onContextMenu={(e) => e.preventDefault()}
+							className="w-full h-full min-h-[200px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl"
+							onChange={handleNoteWriting}
+							value={inputText}
+							placeholder="Write your notes here..."
+							spellCheck={false}
+						/>
+						<span className="text-base self-end text-mti-gray-cool">Word Count: {(inputText.match(/\S+/g) || []).length}/100</span>
+					</div>
+				)}
+
+				<ReactMediaRecorder
+					audio
+					onStop={(blob) => setMediaBlob(blob)}
+					render={({status, startRecording, stopRecording, pauseRecording, resumeRecording, clearBlobUrl, mediaBlobUrl}) => (
+						<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" && !mediaBlob && (
+									<>
+										<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
+										{status === "idle" && (
+											<BsMicFill
+												onClick={() => {
+													setRecordingDuration(0);
+													startRecording();
+													setIsRecording(true);
+												}}
+												className="h-5 w-5 text-mti-gray-cool cursor-pointer"
+											/>
+										)}
+									</>
+								)}
+								{status === "recording" && (
+									<>
+										<div className="flex gap-4 items-center">
+											<span className="text-xs w-9">
+												{Math.floor(recordingDuration / 60)
+													.toString(10)
+													.padStart(2, "0")}
+												:
+												{Math.floor(recordingDuration % 60)
+													.toString(10)
+													.padStart(2, "0")}
+											</span>
+										</div>
+										<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
+										<div className="flex gap-4 items-center">
+											<BsPauseCircle
+												onClick={() => {
+													setIsRecording(false);
+													pauseRecording();
+												}}
+												className="text-red-500 w-8 h-8 cursor-pointer"
+											/>
+											<BsCheckCircleFill
+												onClick={() => {
+													setIsRecording(false);
+													stopRecording();
+												}}
+												className="text-mti-purple-light w-8 h-8 cursor-pointer"
+											/>
+										</div>
+									</>
+								)}
+								{status === "paused" && (
+									<>
+										<div className="flex gap-4 items-center">
+											<span className="text-xs w-9">
+												{Math.floor(recordingDuration / 60)
+													.toString(10)
+													.padStart(2, "0")}
+												:
+												{Math.floor(recordingDuration % 60)
+													.toString(10)
+													.padStart(2, "0")}
+											</span>
+										</div>
+										<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
+										<div className="flex gap-4 items-center">
+											<BsPlayCircle
+												onClick={() => {
+													setIsRecording(true);
+													resumeRecording();
+												}}
+												className="text-mti-purple-light w-8 h-8 cursor-pointer"
+											/>
+											<BsCheckCircleFill
+												onClick={() => {
+													setIsRecording(false);
+													stopRecording();
+												}}
+												className="text-mti-purple-light w-8 h-8 cursor-pointer"
+											/>
+										</div>
+									</>
+								)}
+								{((status === "stopped" && mediaBlobUrl) || (status === "idle" && mediaBlob)) && (
+									<>
+										<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"
+												onClick={() => {
+													setRecordingDuration(0);
+													clearBlobUrl();
+													setMediaBlob(undefined);
+												}}
+											/>
+
+											<BsMicFill
+												onClick={() => {
+													clearBlobUrl();
+													setRecordingDuration(0);
+													startRecording();
+													setIsRecording(true);
+													setMediaBlob(undefined);
+												}}
+												className="h-5 w-5 text-mti-gray-cool cursor-pointer"
+											/>
+										</div>
+									</>
+								)}
 							</div>
 						</div>
 					)}
+				/>
+
+				<div className="self-end flex justify-between w-full  gap-8">
+					<Button color="purple" variant="outline" isLoading={isLoading} onClick={back} className="max-w-[200px] self-end w-full">
+						Back
+					</Button>
+					<Button color="purple" isLoading={isLoading} disabled={!mediaBlob} onClick={next} className="max-w-[200px] self-end w-full">
+						Next
+					</Button>
 				</div>
 			</div>
-
-			<ReactMediaRecorder
-				audio
-				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">
-						<p className="text-base font-normal">Record your answer:</p>
-						<div className="flex gap-8 items-center justify-center py-8">
-							{status === "idle" && (
-								<>
-									<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
-									{status === "idle" && (
-										<BsMicFill
-											onClick={() => {
-												setRecordingDuration(0);
-												startRecording();
-												setIsRecording(true);
-											}}
-											className="h-5 w-5 text-mti-gray-cool cursor-pointer"
-										/>
-									)}
-								</>
-							)}
-							{status === "recording" && (
-								<>
-									<div className="flex gap-4 items-center">
-										<span className="text-xs w-9">
-											{Math.floor(recordingDuration / 60)
-												.toString(10)
-												.padStart(2, "0")}
-											:
-											{Math.floor(recordingDuration % 60)
-												.toString(10)
-												.padStart(2, "0")}
-										</span>
-									</div>
-									<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
-									<div className="flex gap-4 items-center">
-										<BsPauseCircle
-											onClick={() => {
-												setIsRecording(false);
-												pauseRecording();
-											}}
-											className="text-red-500 w-8 h-8 cursor-pointer"
-										/>
-										<BsCheckCircleFill
-											onClick={() => {
-												setIsRecording(false);
-												stopRecording();
-											}}
-											className="text-mti-purple-light w-8 h-8 cursor-pointer"
-										/>
-									</div>
-								</>
-							)}
-							{status === "paused" && (
-								<>
-									<div className="flex gap-4 items-center">
-										<span className="text-xs w-9">
-											{Math.floor(recordingDuration / 60)
-												.toString(10)
-												.padStart(2, "0")}
-											:
-											{Math.floor(recordingDuration % 60)
-												.toString(10)
-												.padStart(2, "0")}
-										</span>
-									</div>
-									<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
-									<div className="flex gap-4 items-center">
-										<BsPlayCircle
-											onClick={() => {
-												setIsRecording(true);
-												resumeRecording();
-											}}
-											className="text-mti-purple-light w-8 h-8 cursor-pointer"
-										/>
-										<BsCheckCircleFill
-											onClick={() => {
-												setIsRecording(false);
-												stopRecording();
-											}}
-											className="text-mti-purple-light w-8 h-8 cursor-pointer"
-										/>
-									</div>
-								</>
-							)}
-							{status === "stopped" && mediaBlobUrl && (
-								<>
-									<Waveform audio={mediaBlobUrl} waveColor="#FCDDEC" progressColor="#EF5DA8" />
-									<div className="flex gap-4 items-center">
-										<BsTrashFill
-											className="text-mti-gray-cool cursor-pointer w-5 h-5"
-											onClick={() => {
-												setRecordingDuration(0);
-												clearBlobUrl();
-												setMediaBlob(undefined);
-											}}
-										/>
-
-										<BsMicFill
-											onClick={() => {
-												clearBlobUrl();
-												setRecordingDuration(0);
-												startRecording();
-												setIsRecording(true);
-												setMediaBlob(undefined);
-											}}
-											className="h-5 w-5 text-mti-gray-cool cursor-pointer"
-										/>
-									</div>
-								</>
-							)}
-						</div>
-					</div>
-				)}
-			/>
-
-			<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">
-					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">
-					Next
-				</Button>
-			</div>
 		</div>
 	);
 }

src/components/Exercises/TrueFalse.tsx

@@ -8,6 +8,7 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
 	const [answers, setAnswers] = useState<{id: string; solution: "true" | "false" | "not_given"}[]>(userSolutions);
 
 	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
+	const setCurrentSolution = useExamStore((state) => state.setCurrentSolution);
 
 	useEffect(() => {
 		if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
@@ -28,6 +29,11 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
 		return {total, correct, missing};
 	};
 
+	useEffect(() => {
+		setCurrentSolution({exercise: id, solutions: answers, score: calculateScore(), type});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [answers, setAnswers]);
+
 	const toggleAnswer = (solution: "true" | "false" | "not_given", questionId: string) => {
 		const answer = answers.find((x) => x.id === questionId);
 		if (answer && answer.solution === solution) {
@@ -39,8 +45,25 @@ 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">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() => onBack({exercise: id, solutions: answers, score: calculateScore(), type})}
+					className="max-w-[200px] w-full">
+					Back
+				</Button>
+
+				<Button
+					color="purple"
+					onClick={() => onNext({exercise: id, solutions: answers, score: calculateScore(), type})}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
+			<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}>
@@ -116,6 +139,6 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

src/components/Exercises/WriteBlanks.tsx

@@ -49,7 +49,7 @@ function Blank({
 export default function WriteBlanks({id, prompt, type, maxWords, solutions, userSolutions, text, onNext, onBack}: WriteBlanksExercise & CommonProps) {
 	const [answers, setAnswers] = useState<{id: string; solution: string}[]>(userSolutions);
 
-	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
+	const {hasExamEnded, setCurrentSolution} = useExamStore((state) => state);
 
 	useEffect(() => {
 		if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
@@ -70,6 +70,11 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
 		return {total, correct, missing};
 	};
 
+	useEffect(() => {
+		setCurrentSolution({exercise: id, solutions: answers, score: calculateScore(), type});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [answers, setAnswers]);
+
 	const renderLines = (line: string) => {
 		return (
 			<span className="text-base leading-5">
@@ -87,8 +92,25 @@ 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">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() => onBack({exercise: id, solutions: answers, score: calculateScore(), type})}
+					className="max-w-[200px] w-full">
+					Back
+				</Button>
+
+				<Button
+					color="purple"
+					onClick={() => onNext({exercise: id, solutions: answers, score: calculateScore(), type})}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
+			<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}>
@@ -123,6 +145,6 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

src/components/Exercises/Writing.tsx

@@ -22,9 +22,31 @@ 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;
 
@@ -42,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]);
 
@@ -61,7 +84,34 @@ export default function Writing({
 	}, [inputText, wordCounter]);
 
 	return (
-		<>
+		<div className="flex flex-col gap-4 mt-4">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					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.replaceAll(/\s{2,}/g, " ")}],
+							score: {correct: 100, total: 100, missing: 0},
+							type,
+							module: "writing",
+						})
+					}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
 			{attachment && (
 				<Transition show={isModalOpen} as={Fragment}>
 					<Dialog onClose={() => setIsModalOpen(false)} className="relative z-50">
@@ -125,18 +175,28 @@ 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>
 			</div>
-		</>
+		</div>
 	);
 }

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,130 @@
+import { FillBlanksExercise, FillBlanksMCOption } from "@/interfaces/exam";
+import React from "react";
+import Input from "@/components/Low/Input";
+import clsx from "clsx";
+
+interface Props {
+	exercise: FillBlanksExercise;
+	updateExercise: (data: any) => void;
+}
+
+const FillBlanksEdit = (props: Props) => {
+	const { exercise, updateExercise } = props;
+
+	const typeCheckWordsMC = (words: any[]): words is FillBlanksMCOption[] => {
+		return Array.isArray(words) && words.every((word) => word && typeof word === "object" && "id" in word && "options" in word);
+	};
+
+	return (
+		<>
+			<Input
+				type={exercise?.variant && exercise.variant === "mc" ? "textarea" : "text"}
+				label="Prompt"
+				name="prompt"
+				required
+				value={exercise.prompt}
+				onChange={(value) =>
+					updateExercise({
+						prompt: value,
+					})
+				}
+			/>
+			<Input
+				type={exercise?.variant && exercise.variant === "mc" ? "textarea" : "text"}
+				label="Text"
+				name="text"
+				required
+				value={exercise.text}
+				onChange={(value) =>
+					updateExercise({
+						text: exercise?.variant && exercise.variant === "mc" ? value : value,
+					})
+				}
+			/>
+			<h1 className="mt-4">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 className="mt-4">Words</h1>
+			<div className={clsx(exercise?.variant && exercise.variant === "mc" ? "w-full flex flex-row" : "w-full flex flex-wrap -mx-2")}>
+				{exercise?.variant && exercise.variant === "mc" && typeCheckWordsMC(exercise.words) ?
+					(
+						<div className="flex flex-col w-full">
+							{exercise.words.flatMap((mcOptions, wordIndex) =>
+								<>
+									<label className="font-semibold">{`Word ${wordIndex + 1}`}</label>
+									<div className="flex flex-row">
+									{Object.entries(mcOptions.options).map(([key, value], optionIndex) => (
+										<div key={`${wordIndex}-${optionIndex}-${key}`} className="flex sm:w-1/2 lg:w-1/4 px-2 mb-4">
+											<Input
+												type="text"
+												label={`Option ${key}`}
+												name="word"
+												required
+												value={value}
+												onChange={(newValue) =>
+													updateExercise({
+														words: exercise.words.map((word, idx) =>
+															idx === wordIndex
+																? {
+																	...(word as FillBlanksMCOption),
+																	options: {
+																		...(word as FillBlanksMCOption).options,
+																		[key]: newValue
+																	}
+																}
+																: word
+														)
+													})
+												}
+											/>
+										</div>
+									))}
+									</div>
+								</>
+							)}
+						</div>
+					)
+					:
+					(
+						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" in 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/Layout.tsx

@@ -11,14 +11,15 @@ interface Props {
 	className?: string;
 	navDisabled?: boolean;
 	focusMode?: boolean;
+	bgColor?: string;
 	onFocusLayerMouseEnter?: () => void;
 }
 
-export default function Layout({user, children, className, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
+export default function Layout({user, children, className, bgColor="bg-white", navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
 	const router = useRouter();
 
 	return (
-		<main className="w-full min-h-full h-screen flex flex-col bg-mti-gray-smoke relative">
+		<main className={clsx("w-full min-h-full h-screen flex flex-col bg-mti-gray-smoke relative")}>
 			<Navbar
 				path={router.pathname}
 				user={user}
@@ -33,11 +34,12 @@ export default function Layout({user, children, className, navDisabled = false,
 					focusMode={focusMode}
 					onFocusLayerMouseEnter={onFocusLayerMouseEnter}
 					className="-md:hidden"
-					userType={user.type}
+					user={user}
 				/>
 				<div
 					className={clsx(
-						"w-full min-h-full h-fit md:mr-8 bg-white shadow-md rounded-2xl p-4 xl:p-10 pb-8 flex flex-col gap-8 relative overflow-hidden mt-2",
+						`w-full min-h-full md:mr-8 ${bgColor} shadow-md rounded-2xl p-4 xl:p-10 pb-8 flex flex-col gap-8 relative overflow-hidden mt-2`,
+						bgColor !== "bg-white" ? "justify-center" : "h-fit",
 						className,
 					)}>
 					{children}

src/components/High/TicketDisplay.tsx

@@ -0,0 +1,179 @@
+import useUsers from "@/hooks/useUsers";
+import {Ticket, TicketStatus, TicketStatusLabel, TicketType, TicketTypeLabel} from "@/interfaces/ticket";
+import {User} from "@/interfaces/user";
+import {USER_TYPE_LABELS} from "@/resources/user";
+import 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/HighlightContent.tsx

@@ -0,0 +1,39 @@
+import { useCallback } from "react";
+
+const HighlightContent: React.FC<{
+    html: string; 
+    highlightPhrases: string[], 
+    firstOccurence?: boolean
+}> = ({
+    html, 
+    highlightPhrases, 
+    firstOccurence = false 
+}) => {
+
+    const createHighlightedContent = useCallback(() => {
+        if (highlightPhrases.length === 0) {
+            return { __html: html };
+        }
+
+        const escapeRegExp = (string: string) => {
+            return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        };
+
+        const regex = new RegExp(`(${highlightPhrases.map(escapeRegExp).join('|')})`, 'i');
+        const globalRegex = new RegExp(`(${highlightPhrases.map(escapeRegExp).join('|')})`, 'gi');
+
+        let highlightedHtml = html;
+
+        if (firstOccurence) {
+            highlightedHtml = html.replace(regex, (match) => `<span style="background-color: yellow;">${match}</span>`);
+        } else {
+            highlightedHtml = html.replace(globalRegex, (match) => `<span style="background-color: yellow;">${match}</span>`);
+        }
+
+        return { __html: highlightedHtml };
+    }, [html, highlightPhrases, firstOccurence]);
+
+    return <div dangerouslySetInnerHTML={createHighlightedContent()} />;
+};
+
+export default HighlightContent;

src/components/InfiniteCarousel.tsx

@@ -0,0 +1,168 @@
+import React, { useRef, useEffect, useState, useCallback, ReactNode } from 'react';
+import { useSpring, animated } from '@react-spring/web';
+import { useDrag } from '@use-gesture/react';
+import clsx from 'clsx';
+
+interface InfiniteCarouselProps {
+  children: React.ReactNode;
+  height: string;
+  speed?: number;
+  gap?: number;
+  overlay?: ReactNode;
+  overlayFunc?: (index: number) => void;
+  overlayClassName?: string;
+}
+
+const InfiniteCarousel: React.FC<InfiniteCarouselProps> = ({
+  children,
+  height,
+  speed = 20000,
+  gap = 16,
+  overlay = undefined,
+  overlayFunc = undefined,
+  overlayClassName = ""
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState<number>(0);
+  const itemCount = React.Children.count(children);
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+  const [itemWidth, setItemWidth] = useState<number>(0);
+  const [isInfinite, setIsInfinite] = useState<boolean>(true);
+  const dragStartX = useRef<number>(0);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (containerRef.current) {
+        const containerWidth = containerRef.current.clientWidth;
+        setContainerWidth(containerWidth);
+
+        const firstChild = containerRef.current.firstElementChild?.firstElementChild as HTMLElement;
+        if (firstChild) {
+          const childWidth = firstChild.offsetWidth;
+          setItemWidth(childWidth);
+
+          const totalContentWidth = (childWidth + gap) * itemCount - gap;
+          setIsInfinite(totalContentWidth > containerWidth);
+        }
+      }
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [gap, itemCount]);
+
+  const totalWidth = (itemWidth + gap) * itemCount;
+
+  const [{ x }, api] = useSpring(() => ({
+    from: { x: 0 },
+    to: { x: -totalWidth },
+    config: { duration: speed },
+    loop: true,
+  }));
+
+  const startAnimation = useCallback(() => {
+    if (isInfinite) {
+      api.start({
+        from: { x: x.get() },
+        to: { x: x.get() - totalWidth },
+        config: { duration: speed },
+        loop: true,
+      });
+    } else {
+      api.stop();
+      api.start({ x: 0, immediate: true });
+    }
+  }, [api, x, totalWidth, speed, isInfinite]);
+
+  useEffect(() => {
+    if (containerWidth > 0 && !isDragging) {
+      startAnimation();
+    }
+  }, [containerWidth, isDragging, startAnimation]);
+
+  const bind = useDrag(({ down, movement: [mx], first }) => {
+    if (!isInfinite) return;
+    if (first) {
+      setIsDragging(true);
+      api.stop();
+      dragStartX.current = x.get();
+    }
+    if (down) {
+      let newX = dragStartX.current + mx;
+      newX = ((newX % totalWidth) + totalWidth) % totalWidth;
+      if (newX > 0) newX -= totalWidth;
+      api.start({ x: newX, immediate: true });
+    } else {
+      setIsDragging(false);
+      startAnimation();
+    }
+  }, {
+    filterTaps: true,
+    from: () => [x.get(), 0],
+  });
+
+  return (
+    <div
+      className="overflow-hidden relative select-none"
+      style={{ height, touchAction: 'pan-y' }}
+      ref={containerRef}
+      {...(isInfinite ? bind() : {})}
+    >
+      <animated.div
+        className="flex"
+        style={{
+          display: 'flex',
+          willChange: 'transform',
+          transform: isInfinite
+            ? x.to((x) => `translate3d(${x}px, 0, 0)`)
+            : 'none',
+          gap: `${gap}px`,
+          width: 'fit-content',
+        }}
+      >
+        {React.Children.map(children, (child, i) => (
+          <div
+            key={i}
+            className="flex-shrink-0 relative"
+          >
+            {overlay !== undefined && overlayFunc !== undefined && (
+              <div className={clsx('absolute', overlayClassName)} onClick={() => overlayFunc(i)}>
+                {overlay}
+              </div>
+            )}
+            <div
+              className="select-none"
+              style={{ pointerEvents: 'none' }}
+            >
+              {child}
+            </div>
+          </div>
+        ))}
+        {isInfinite && React.Children.map(children, (child, i) => (
+          <div
+            key={`clone-${i}`}
+            className="flex-shrink-0 relative"
+          >
+            {overlay !== undefined && overlayFunc !== undefined && (
+              <div className={clsx('absolute', overlayClassName)} onClick={() => overlayFunc(i)}>
+                {overlay}
+              </div>
+            )}
+            <div
+              className="select-none"
+              style={{ pointerEvents: 'none' }}
+            >
+              {child}
+            </div>
+          </div>
+        ))}
+      </animated.div>
+    </div>
+  );
+};
+
+export default InfiniteCarousel;

src/components/List.tsx

@@ -0,0 +1,51 @@
+import {Column, flexRender, getCoreRowModel, getSortedRowModel, useReactTable} from "@tanstack/react-table";
+
+export default function List<T>({data, columns}: {data: T[]; columns: any[]}) {
+	const table = useReactTable({
+		data,
+		columns: columns,
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+	});
+
+	return (
+		<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+			<thead>
+				{table.getHeaderGroups().map((headerGroup) => (
+					<tr key={headerGroup.id}>
+						{headerGroup.headers.map((header) => (
+							<th key={header.id} colSpan={header.colSpan}>
+								{header.isPlaceholder ? null : (
+									<>
+										<div
+											{...{
+												className: header.column.getCanSort() ? "cursor-pointer select-none py-4 text-left first:pl-4" : "",
+												onClick: header.column.getToggleSortingHandler(),
+											}}>
+											{flexRender(header.column.columnDef.header, header.getContext())}
+											{{
+												asc: " 🔼",
+												desc: " 🔽",
+											}[header.column.getIsSorted() as string] ?? null}
+										</div>
+									</>
+								)}
+							</th>
+						))}
+					</tr>
+				))}
+			</thead>
+			<tbody className="px-2">
+				{table.getRowModel().rows.map((row) => (
+					<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
+						{row.getVisibleCells().map((cell) => (
+							<td className="px-4 py-2" key={cell.id}>
+								{flexRender(cell.column.columnDef.cell, cell.getContext())}
+							</td>
+						))}
+					</tr>
+				))}
+			</tbody>
+		</table>
+	);
+}

src/components/Low/Button.tsx

@@ -4,11 +4,12 @@ import {BsArrowRepeat} from "react-icons/bs";
 
 interface Props {
 	children: ReactNode;
-	color?: "rose" | "purple" | "red" | "green" | "gray";
+	color?: "rose" | "purple" | "red" | "green" | "gray" | "pink";
 	variant?: "outline" | "solid";
 	className?: string;
 	disabled?: boolean;
 	isLoading?: boolean;
+	padding?: string;
 	onClick?: () => void;
 	type?: "button" | "reset" | "submit";
 }
@@ -21,6 +22,7 @@ export default function Button({
 	className,
 	children,
 	type,
+	padding = "py-4 px-6",
 	onClick,
 }: Props) {
 	const colorClassNames: {[key in typeof color]: {[key in typeof variant]: string}} = {
@@ -49,6 +51,11 @@ export default function Button({
 			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 (
@@ -56,9 +63,10 @@ export default function Button({
 			type={type}
 			onClick={onClick}
 			className={clsx(
-				"py-4 px-6 rounded-full transition ease-in-out duration-300 disabled:cursor-not-allowed cursor-pointer",
-				className,
+				"rounded-full transition ease-in-out duration-300 disabled:cursor-not-allowed cursor-pointer select-none",
+				padding,
 				colorClassNames[color][variant],
+				className,
 			)}
 			disabled={disabled || isLoading}>
 			{!isLoading && children}

src/components/Low/Checkbox.tsx

@@ -11,14 +11,16 @@ interface 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={() => {
-			if(disabled) return;
-			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(
-					"w-6 h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white",
+					"w-6 h-6 min-w-6 min-h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white",
 					"transition duration-300 ease-in-out",
 					isChecked && "!bg-mti-purple-light ",
 				)}>

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/Input.tsx

@@ -1,8 +1,8 @@
 import clsx from "clsx";
-import {useState} from "react";
+import { useState } from "react";
 
 interface Props {
-	type: "email" | "text" | "password" | "tel" | "number";
+	type: "email" | "text" | "password" | "tel" | "number" | "textarea";
 	roundness?: "full" | "xl";
 	required?: boolean;
 	label?: string;
@@ -11,6 +11,7 @@ interface Props {
 	value?: string | number;
 	className?: string;
 	disabled?: boolean;
+	max?: number;
 	name: string;
 	onChange: (value: string) => void;
 }
@@ -23,6 +24,7 @@ export default function Input({
 	required = false,
 	value,
 	defaultValue,
+	max,
 	className,
 	roundness = "full",
 	disabled = false,
@@ -30,6 +32,20 @@ export default function Input({
 }: Props) {
 	const [showPassword, setShowPassword] = useState(false);
 
+	if (type === "textarea") {
+		return (
+			<textarea
+				onContextMenu={(e) => e.preventDefault()}
+				className="w-full h-full cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl min-h-[200px]"
+				onChange={(e) => onChange(e.target.value)}
+				value={value}
+				placeholder={placeholder}
+				spellCheck={false}
+			/>
+		);
+	}
+
+
 	if (type === "password") {
 		return (
 			<div className="relative flex flex-col gap-3 w-full">
@@ -72,6 +88,7 @@ export default function Input({
 				name={name}
 				disabled={disabled}
 				value={value}
+				max={max}
 				onChange={(e) => onChange(e.target.value)}
 				min={type === "number" ? 0 : undefined}
 				placeholder={placeholder}

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

@@ -1,47 +1,55 @@
-import {Module} from "@/interfaces";
-import useExamStore from "@/stores/examStore";
-import {moduleLabels} from "@/utils/moduleUtils";
+import { Module } from "@/interfaces";
+import { moduleLabels } from "@/utils/moduleUtils";
 import clsx from "clsx";
-import {motion} from "framer-motion";
-import {ReactNode, useEffect, useState} from "react";
-import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsStopwatch} from "react-icons/bs";
+import { ReactNode, useState } from "react";
+import { BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsStopwatch } from "react-icons/bs";
 import ProgressBar from "../Low/ProgressBar";
-import TimerEndedModal from "../TimerEndedModal";
+import Timer from "./Timer";
+import { Exercise, LevelExam, MultipleChoiceExercise, ShuffleMap, UserSolution } from "@/interfaces/exam";
+import { BsFillGrid3X3GapFill } from "react-icons/bs";
+import Button from "../Low/Button";
+import useExamStore from "@/stores/examStore";
+import Modal from "../Modal";
+import React from "react";
 
 interface Props {
 	minTimer: number;
 	module: Module;
+	examLabel?: string;
 	label?: string;
 	exerciseIndex: number;
 	totalExercises: number;
 	disableTimer?: boolean;
+	partLabel?: string;
+	showTimer?: boolean;
+	showSolutions?: boolean;
+	currentExercise?: Exercise;
+	runOnClick?: ((questionIndex: number) => void) | undefined;
 }
 
-export default function ModuleTitle({minTimer, module, label, exerciseIndex, totalExercises, disableTimer = false}: Props) {
-	const [timer, setTimer] = useState(minTimer * 60);
-	const [showModal, setShowModal] = useState(false);
-	const [warningMode, setWarningMode] = useState(false);
-	const setHasExamEnded = useExamStore((state) => state.setHasExamEnded);
+export default function ModuleTitle({
+	minTimer,
+	module,
+	label,
+	examLabel,
+	exerciseIndex,
+	totalExercises,
+	disableTimer = false,
+	partLabel,
+	showTimer = true,
+	showSolutions = false,
+	runOnClick = undefined
+}: Props) {
+	const {
+		userSolutions,
+		partIndex,
+		exam
+	} = useExamStore((state) => state);
+	const examExerciseIndex = useExamStore((state) => state.exerciseIndex)
 
-	useEffect(() => {
-		if (!disableTimer) {
-			const timerInterval = setInterval(() => setTimer((prev) => prev - 1), 1000);
+	const [isOpen, setIsOpen] = useState(false);
 
-			return () => {
-				clearInterval(timerInterval);
-			};
-		}
-	}, [disableTimer, minTimer]);
-
-	useEffect(() => {
-		if (timer <= 0) setShowModal(true);
-	}, [timer]);
-
-	useEffect(() => {
-		if (timer < 300 && !warningMode) setWarningMode(true);
-	}, [timer, warningMode]);
-
-	const moduleIcon: {[key in Module]: ReactNode} = {
+	const moduleIcon: { [key in Module]: ReactNode } = {
 		reading: <BsBook className="text-ielts-reading w-6 h-6" />,
 		listening: <BsHeadphones className="text-ielts-listening w-6 h-6" />,
 		writing: <BsPen className="text-ielts-writing w-6 h-6" />,
@@ -49,51 +57,133 @@ export default function ModuleTitle({minTimer, module, label, exerciseIndex, tot
 		level: <BsClipboard className="text-ielts-level w-6 h-6" />,
 	};
 
+	const isMultipleChoiceLevelExercise = () => {
+		if (exam?.module === 'level' && typeof partIndex === "number" && partIndex > -1) {
+			const currentExercise = (exam as LevelExam).parts[partIndex].exercises[examExerciseIndex];
+			return currentExercise && currentExercise.type === 'multipleChoice';
+		}
+		return false;
+	};
+
+	const renderMCQuestionGrid = () => {
+		if (!isMultipleChoiceLevelExercise() && !userSolutions) return null;
+
+		const currentExercise = (exam as LevelExam).parts[partIndex!].exercises[examExerciseIndex] as MultipleChoiceExercise;
+		const userSolution = userSolutions!.find((x) => x.exercise.toString() == currentExercise.id.toString())!;
+		const answeredQuestions = new Set(userSolution.solutions.map(sol => sol.question.toString()));
+		const exerciseOffset = Number(currentExercise.questions[0].id);
+		const lastExercise = exerciseOffset + (currentExercise.questions.length - 1);
+
+		const getQuestionColor = (questionId: string, solution: string, userQuestionSolution: string | undefined) => {
+			const questionShuffleMap = userSolutions.reduce((foundMap, userSolution) => {
+				if (foundMap) return foundMap;
+				return userSolution.shuffleMaps?.find(map => map.questionID.toString() === questionId.toString()) || null;
+			}, null as ShuffleMap | null);
+			const newSolution = questionShuffleMap ? questionShuffleMap?.map[solution] : solution;
+
+			if (!userSolutions) return "";
+
+			if (!userQuestionSolution) {
+				return "!bg-mti-gray-davy !border--mti-gray-davy !text-mti-gray-davy !text-white hover:!bg-gray-700";
+			}
+
+			return userQuestionSolution === newSolution ?
+				"!bg-mti-purple-light !text-mti-purple-light !text-white hover:!bg-mti-purple-dark" :
+				"!bg-mti-rose-light !border-mti-rose-light !text-mti-rose-light !text-white hover:!bg-mti-rose-dark";
+		}
+		return (
+			<>
+				<h3 className="text-xl font-semibold mb-4 text-center">{`Part ${partIndex + 1} (Questions ${exerciseOffset} - ${lastExercise})`}</h3>
+				<div className="grid grid-cols-5 gap-3 px-4 py-2">
+					{currentExercise.questions.map((_, index) => {
+						const questionNumber = exerciseOffset + index;
+						const isAnswered = answeredQuestions.has(questionNumber.toString());
+						const solution = currentExercise.questions.find((x) => x.id.toString() == questionNumber.toString())!.solution;
+
+						const userQuestionSolution = currentExercise.userSolutions?.find((x) => x.question.toString() == questionNumber.toString())?.option;
+						return (
+							<Button
+								variant={showSolutions ? "solid" : (isAnswered ? "solid" : "outline")}
+								key={index}
+								className={clsx(
+									"w-12 h-12 flex items-center justify-center rounded-lg text-sm font-bold transition-all duration-200 ease-in-out",
+									(showSolutions ?
+										getQuestionColor(questionNumber.toString(), solution, userQuestionSolution) :
+										(isAnswered ?
+											"bg-mti-purple-light border-mti-purple-light text-white hover:bg-mti-purple-dark hover:border-mti-purple-dark" :
+											"bg-white border-gray-400 hover:bg-gray-100 hover:text-gray-700"
+										)
+									)
+								)}
+								onClick={() => { if (typeof runOnClick !== "undefined") { runOnClick(index); } setIsOpen(false); }}
+							>
+								{questionNumber}
+							</Button>
+						);
+					})}
+				</div>
+				<p className="mt-4 text-sm text-gray-600 text-center">
+					Click a question number to jump to that question
+				</p>
+			</>
+		);
+	};
 	return (
 		<>
-			<TimerEndedModal
-				isOpen={showModal}
-				onClose={() => {
-					setHasExamEnded(true);
-					setShowModal(false);
-				}}
-			/>
-			<motion.div
-				className={clsx(
-					"absolute top-4 right-6 bg-mti-gray-seasalt px-4 py-3 flex items-center gap-2 rounded-full text-mti-gray-davy",
-					warningMode && !disableTimer && "bg-mti-red-light text-mti-gray-seasalt",
+			{showTimer && <Timer minTimer={minTimer} disableTimer={disableTimer} />}
+			<div className="w-full">
+				{partLabel && (
+					<div className="text-3xl space-y-4">
+						{partLabel.split("\n\n").map((partInstructions, index) => {
+							if (index === 0)
+								return (
+									<p key={index} className="font-bold">
+										{partInstructions}
+									</p>
+								);
+							else
+								return (
+									<div key={index} className="text-2xl font-semibold flex flex-col gap-2">
+										{partInstructions.split("\\n").map((line, lineIndex) => (
+											<span key={lineIndex} dangerouslySetInnerHTML={{__html: line.replace('that is not correct', 'that is <span class="font-bold"><u>not correct</u></span>')}}></span>
+										))}
+									</div>
+								);
+						})}
+					</div>
 				)}
-				initial={{scale: warningMode && !disableTimer ? 0.8 : 1}}
-				animate={{scale: warningMode && !disableTimer ? 1.1 : 1}}
-				transition={{repeat: Infinity, repeatType: "reverse", duration: 0.5, ease: "easeInOut"}}>
-				<BsStopwatch className="w-6 h-6" />
-				<span className="text-base font-semibold w-12">
-					{timer > 0 && (
+				<div className={clsx("flex gap-6 w-full h-fit items-center", partLabel ? "mt-10" : "mt-5")}>
+					<div className="w-12 h-12 bg-mti-gray-smoke flex items-center justify-center rounded-lg">{moduleIcon[module]}</div>
+					<div className="flex flex-col gap-3 w-full">
+						<div className="w-full flex justify-between">
+							<span className="text-base font-semibold">
+								{module === "level"
+									? (examLabel ? examLabel : "Placement Test")
+									: `${moduleLabels[module]} exam${label ? ` - ${label}` : ''}`
+								}
+							</span>
+							<span className="text-sm font-semibold self-end">
+								Question {exerciseIndex}/{totalExercises}
+							</span>
+						</div>
+						<ProgressBar color={module} label="" percentage={(exerciseIndex * 100) / totalExercises} className="h-2 w-full" />
+					</div>
+					{isMultipleChoiceLevelExercise() && (
 						<>
-							{Math.floor(timer / 60)
-								.toString(10)
-								.padStart(2, "0")}
-							:
-							{Math.floor(timer % 60)
-								.toString(10)
-								.padStart(2, "0")}
+							<Button variant="outline" onClick={() => setIsOpen(true)} padding="p-2" className="rounded-lg">
+								<BsFillGrid3X3GapFill size={24} />
+							</Button>
+							<Modal
+								isOpen={isOpen}
+								onClose={() => setIsOpen(false)}
+								className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white shadow-xl transition-all"
+							>
+								<>
+									{renderMCQuestionGrid()}
+								</>
+							</Modal>
 						</>
 					)}
-					{timer <= 0 && <>00:00</>}
-				</span>
-			</motion.div>
-			<div className="flex gap-6 w-full h-fit items-center mt-5">
-				<div className="w-12 h-12 bg-mti-gray-smoke flex items-center justify-center rounded-lg">{moduleIcon[module]}</div>
-				<div className="flex flex-col gap-3 w-full">
-					<div className="w-full flex justify-between">
-						<span className="text-base font-semibold">
-							{moduleLabels[module]} exam {label && `- ${label}`}
-						</span>
-						<span className="text-sm font-semibold self-end">
-							Exercise {exerciseIndex}/{totalExercises}
-						</span>
-					</div>
-					<ProgressBar color={module} label="" percentage={(exerciseIndex * 100) / totalExercises} className="h-2 w-full" />
 				</div>
 			</div>
 		</>

src/components/Medium/RecordFilter.tsx

@@ -0,0 +1,206 @@
+import { User } from "@/interfaces/user";
+import { checkAccess } from "@/utils/permissions";
+import Select from "../Low/Select";
+import { ReactNode, useEffect, useState } from "react";
+import clsx from "clsx";
+import useUsers from "@/hooks/useUsers";
+import useGroups from "@/hooks/useGroups";
+import useRecordStore from "@/stores/recordStore";
+
+
+type TimeFilter = "months" | "weeks" | "days";
+type Filter = TimeFilter | "assignments" | undefined;
+
+interface Props {
+    user: User;
+    filterState: {
+        filter: Filter,
+        setFilter: React.Dispatch<React.SetStateAction<Filter>>
+    },
+    assignments?: boolean;
+    children?: ReactNode
+}
+
+const defaultSelectableCorporate = {
+    value: "",
+    label: "All",
+};
+
+const RecordFilter: React.FC<Props> = ({
+    user,
+    filterState,
+    assignments = true,
+    children
+}) => {
+    const { filter, setFilter } = filterState;
+
+    const [statsUserId, setStatsUserId] = useRecordStore((state) => [
+        state.selectedUser,
+        state.setSelectedUser
+    ]);
+
+    const { users } = useUsers();
+    const { groups: allGroups } = useGroups({});
+    const { groups } = useGroups({ admin: user?.id, userType: user?.type });
+
+    const toggleFilter = (value: "months" | "weeks" | "days" | "assignments") => {
+        setFilter((prev) => (prev === value ? undefined : value));
+    };
+
+    const selectableCorporates = [
+        defaultSelectableCorporate,
+        ...users
+            .filter((x) => groups.flatMap((g) => [g.admin, ...g.participants]).includes(x.id))
+            .filter((x) => x.type === "corporate")
+            .map((x) => ({
+                value: x.id,
+                label: `${x.name} - ${x.email}`,
+            })),
+    ];
+
+    const [selectedCorporate, setSelectedCorporate] = useState<string>(defaultSelectableCorporate.value);
+
+    const getUsersList = (): User[] => {
+        if (selectedCorporate) {
+            const selectedCorporateGroups = allGroups.filter((x) => x.admin === selectedCorporate);
+            const selectedCorporateGroupsParticipants = selectedCorporateGroups.flatMap((x) => x.participants);
+
+            const userListWithUsers = selectedCorporateGroupsParticipants.map((x) => users.find((y) => y.id === x)) as User[];
+            return userListWithUsers.filter((x) => x);
+        }
+
+        return user.type !== "mastercorporate" ? users : users.filter((x) => groups.flatMap((g) => [g.admin, ...g.participants]).includes(x.id));
+    };
+
+    const corporateFilteredUserList = getUsersList();
+
+    const getSelectedUser = () => {
+        if (selectedCorporate) {
+            const userInCorporate = corporateFilteredUserList.find((x) => x.id === statsUserId);
+            return userInCorporate || corporateFilteredUserList[0];
+        }
+
+        return users.find((x) => x.id === statsUserId) || user;
+    };
+
+    const selectedUser = getSelectedUser();
+    const selectedUserSelectValue = selectedUser
+        ? {
+            value: selectedUser.id,
+            label: `${selectedUser.name} - ${selectedUser.email}`,
+        }
+        : {
+            value: "",
+            label: "",
+        };
+
+    return (
+        <div className="w-full flex -xl:flex-col -xl:gap-4 justify-between items-center">
+            <div className="xl:w-3/4">
+                {checkAccess(user, ["developer", "admin", "mastercorporate"]) && !children && (
+                    <>
+                        <label className="font-normal text-base text-mti-gray-dim">Corporate</label>
+
+                        <Select
+                            options={selectableCorporates}
+                            value={selectableCorporates.find((x) => x.value === selectedCorporate)}
+                            onChange={(value) => setSelectedCorporate(value?.value || "")}
+                            styles={{
+                                menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                                option: (styles, state) => ({
+                                    ...styles,
+                                    backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+                                    color: state.isFocused ? "black" : styles.color,
+                                }),
+                            }}></Select>
+                        <label className="font-normal text-base text-mti-gray-dim">User</label>
+
+                        <Select
+                            options={corporateFilteredUserList.map((x) => ({
+                                value: x.id,
+                                label: `${x.name} - ${x.email}`,
+                            }))}
+                            value={selectedUserSelectValue}
+                            onChange={(value) => setStatsUserId(value?.value!)}
+                            styles={{
+                                menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                                option: (styles, state) => ({
+                                    ...styles,
+                                    backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+                                    color: state.isFocused ? "black" : styles.color,
+                                }),
+                            }}
+                        />
+                    </>
+                )}
+                {(user.type === "corporate" || user.type === "teacher") && groups.length > 0 && !children && (
+                    <>
+                        <label className="font-normal text-base text-mti-gray-dim">User</label>
+
+                        <Select
+                            options={users
+                                .filter((x) => groups.flatMap((y) => y.participants).includes(x.id))
+                                .map((x) => ({
+                                    value: x.id,
+                                    label: `${x.name} - ${x.email}`,
+                                }))}
+                            value={selectedUserSelectValue}
+                            onChange={(value) => setStatsUserId(value?.value!)}
+                            styles={{
+                                menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                                option: (styles, state) => ({
+                                    ...styles,
+                                    backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+                                    color: state.isFocused ? "black" : styles.color,
+                                }),
+                            }}
+                        />
+                    </>
+                )}
+                {children}
+            </div>
+            <div className="flex gap-4 w-full justify-center xl:justify-end">
+                {assignments && (
+                    <button
+                        className={clsx(
+                            "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+                            "transition duration-300 ease-in-out",
+                            filter === "assignments" && "!bg-mti-purple-light !text-white",
+                        )}
+                        onClick={() => toggleFilter("assignments")}>
+                        Assignments
+                    </button>
+                )}
+                <button
+                    className={clsx(
+                        "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+                        "transition duration-300 ease-in-out",
+                        filter === "months" && "!bg-mti-purple-light !text-white",
+                    )}
+                    onClick={() => toggleFilter("months")}>
+                    Last month
+                </button>
+                <button
+                    className={clsx(
+                        "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+                        "transition duration-300 ease-in-out",
+                        filter === "weeks" && "!bg-mti-purple-light !text-white",
+                    )}
+                    onClick={() => toggleFilter("weeks")}>
+                    Last week
+                </button>
+                <button
+                    className={clsx(
+                        "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+                        "transition duration-300 ease-in-out",
+                        filter === "days" && "!bg-mti-purple-light !text-white",
+                    )}
+                    onClick={() => toggleFilter("days")}>
+                    Last day
+                </button>
+            </div>
+        </div>
+    );
+}
+
+export default RecordFilter;

src/components/Medium/SessionCard.tsx

@@ -0,0 +1,111 @@
+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 justify-between gap-3 rounded-xl border p-4 text-black">
+			<div className="flex flex-col gap-3">
+				<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>
+				{session.assignment && (
+					<span className="flex flex-col gap-0">
+						<b>Assignment:</b>
+						{session.assignment.name}
+					</span>
+				)}
+			</div>
+			<div className="flex flex-col gap-3">
+				<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>
+		</div>
+	);
+}

src/components/Medium/StatGridItem.tsx

@@ -0,0 +1,313 @@
+import React from "react";
+import {BsClock, BsXCircle} from "react-icons/bs";
+import clsx from "clsx";
+import {Stat, User} from "@/interfaces/user";
+import {Module, Step} from "@/interfaces";
+import ai_usage from "@/utils/ai.detection";
+import {calculateBandScore} from "@/utils/score";
+import moment from "moment";
+import {Assignment} from "@/interfaces/results";
+import {uuidv4} from "@firebase/util";
+import {useRouter} from "next/router";
+import {uniqBy} from "lodash";
+import {sortByModule} from "@/utils/moduleUtils";
+import {convertToUserSolutions} from "@/utils/stats";
+import {getExamById} from "@/utils/exams";
+import {Exam, UserSolution} from "@/interfaces/exam";
+import ModuleBadge from "../ModuleBadge";
+
+const formatTimestamp = (timestamp: string | number) => {
+	const time = typeof timestamp === "string" ? parseInt(timestamp) : timestamp;
+	const date = moment(time);
+	const formatter = "YYYY/MM/DD - HH:mm";
+	return date.format(formatter);
+};
+
+const aggregateScoresByModule = (stats: Stat[]): {module: Module; total: number; missing: number; correct: number}[] => {
+	const scores: {
+		[key in Module]: {total: number; missing: number; correct: number};
+	} = {
+		reading: {
+			total: 0,
+			correct: 0,
+			missing: 0,
+		},
+		listening: {
+			total: 0,
+			correct: 0,
+			missing: 0,
+		},
+		writing: {
+			total: 0,
+			correct: 0,
+			missing: 0,
+		},
+		speaking: {
+			total: 0,
+			correct: 0,
+			missing: 0,
+		},
+		level: {
+			total: 0,
+			correct: 0,
+			missing: 0,
+		},
+	};
+
+	stats.forEach((x) => {
+		scores[x.module!] = {
+			total: scores[x.module!].total + x.score.total,
+			correct: scores[x.module!].correct + x.score.correct,
+			missing: scores[x.module!].missing + x.score.missing,
+		};
+	});
+
+	return Object.keys(scores)
+		.filter((x) => scores[x as Module].total > 0)
+		.map((x) => ({module: x as Module, ...scores[x as Module]}));
+};
+
+interface StatsGridItemProps {
+	width?: string | undefined;
+	height?: string | undefined;
+	examNumber?: number | undefined;
+	stats: Stat[];
+	timestamp: string | number;
+	user: User;
+	assignments: Assignment[];
+	users: User[];
+	training?: boolean;
+	gradingSystem?: Step[];
+	selectedTrainingExams?: string[];
+	maxTrainingExams?: number;
+	setSelectedTrainingExams?: React.Dispatch<React.SetStateAction<string[]>>;
+	setExams: (exams: Exam[]) => void;
+	setShowSolutions: (show: boolean) => void;
+	setUserSolutions: (solutions: UserSolution[]) => void;
+	setSelectedModules: (modules: Module[]) => void;
+	setInactivity: (inactivity: number) => void;
+	setTimeSpent: (time: number) => void;
+	renderPdfIcon: (session: string, color: string, textColor: string) => React.ReactNode;
+}
+
+const StatsGridItem: React.FC<StatsGridItemProps> = ({
+	stats,
+	timestamp,
+	user,
+	assignments,
+	users,
+	training,
+	selectedTrainingExams,
+	gradingSystem,
+	setSelectedTrainingExams,
+	setExams,
+	setShowSolutions,
+	setUserSolutions,
+	setSelectedModules,
+	setInactivity,
+	setTimeSpent,
+	renderPdfIcon,
+	width = undefined,
+	height = undefined,
+	examNumber = undefined,
+	maxTrainingExams = undefined,
+}) => {
+	const router = useRouter();
+	const correct = stats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
+	const total = stats.reduce((accumulator, current) => accumulator + current.score.total, 0);
+	const aggregatedScores = aggregateScoresByModule(stats).filter((x) => x.total > 0);
+	const assignmentID = stats.reduce((_, current) => current.assignment as any, "");
+	const assignment = assignments.find((a) => a.id === assignmentID);
+	const isDisabled = stats.some((x) => x.isDisabled);
+
+	const aiUsage = Math.round(ai_usage(stats) * 100);
+
+	const aggregatedLevels = aggregatedScores.map((x) => ({
+		module: x.module,
+		level: calculateBandScore(x.correct, x.total, x.module, user.focus),
+	}));
+
+	const textColor = clsx(
+		correct / total >= 0.7 && "text-mti-purple",
+		correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
+		correct / total < 0.3 && "text-mti-rose",
+	);
+
+	const {timeSpent, inactivity, session} = stats[0];
+
+	const selectExam = () => {
+		if (
+			training &&
+			!isDisabled &&
+			typeof maxTrainingExams !== "undefined" &&
+			typeof setSelectedTrainingExams !== "undefined" &&
+			typeof timestamp == "string"
+		) {
+			setSelectedTrainingExams((prevExams) => {
+				const uniqueExams = [...new Set(stats.map((stat) => `${stat.module}-${stat.date}`))];
+				const indexes = uniqueExams.map((exam) => prevExams.indexOf(exam)).filter((index) => index !== -1);
+				if (indexes.length > 0) {
+					const newExams = [...prevExams];
+					indexes
+						.sort((a, b) => b - a)
+						.forEach((index) => {
+							newExams.splice(index, 1);
+						});
+					return newExams;
+				} else {
+					if (prevExams.length + uniqueExams.length <= maxTrainingExams) {
+						return [...prevExams, ...uniqueExams];
+					} else {
+						return prevExams;
+					}
+				}
+			});
+		} else {
+			const examPromises = uniqBy(stats, "exam").map((stat) => {
+				return getExamById(stat.module, stat.exam);
+			});
+
+			if (isDisabled) return;
+
+			Promise.all(examPromises).then((exams) => {
+				if (exams.every((x) => !!x)) {
+					if (!!timeSpent) setTimeSpent(timeSpent);
+					if (!!inactivity) setInactivity(inactivity);
+					setUserSolutions(convertToUserSolutions(stats));
+					setShowSolutions(true);
+					setExams(exams.map((x) => x!).sort(sortByModule));
+					setSelectedModules(
+						exams
+							.map((x) => x!)
+							.sort(sortByModule)
+							.map((x) => x!.module),
+					);
+					router.push("/exercises");
+				}
+			});
+		}
+	};
+
+	const shouldRenderPDFIcon = () => {
+		if (assignment) {
+			return assignment.released;
+		}
+
+		return true;
+	};
+
+	const content = (
+		<>
+			<div className="w-full flex justify-between -md:items-center 2xl:items-center">
+				<div className="flex flex-col md:gap-1 -md:gap-2 2xl:gap-2">
+					<span className="font-medium">{formatTimestamp(timestamp)}</span>
+					<div className="flex items-center gap-2">
+						{!!timeSpent && (
+							<span className="text-sm flex gap-2 items-center tooltip" data-tip="Time Spent">
+								<BsClock /> {Math.floor(timeSpent / 60)} minutes
+							</span>
+						)}
+						{!!inactivity && (
+							<span className="text-sm flex gap-2 items-center tooltip" data-tip="Inactivity">
+								<BsXCircle /> {Math.floor(inactivity / 60)} minutes
+							</span>
+						)}
+					</div>
+				</div>
+				<div className="flex flex-col gap-2">
+					<div className="flex flex-row gap-2">
+						{!!assignment && (assignment.released || assignment.released === undefined) && (
+							<span className={textColor}>
+								Level{" "}
+								{(
+									aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length
+								).toFixed(1)}
+							</span>
+						)}
+						{shouldRenderPDFIcon() && renderPdfIcon(session, textColor, textColor)}
+					</div>
+					{examNumber === undefined ? (
+						<>
+							{aiUsage >= 50 && user.type !== "student" && (
+								<div
+									className={clsx("ml-auto border px-1 rounded w-fit mr-1", {
+										"bg-orange-100 border-orange-400 text-orange-700": aiUsage < 80,
+										"bg-red-100 border-red-400 text-red-700": aiUsage >= 80,
+									})}>
+									<span className="text-xs">AI Usage</span>
+								</div>
+							)}
+						</>
+					) : (
+						<div className="flex justify-end">
+							<span className="font-semibold bg-gray-200 text-gray-800 px-2.5 py-0.5 rounded-full mt-0.5">{examNumber}</span>
+						</div>
+					)}
+				</div>
+			</div>
+
+			<div className="w-full flex flex-col gap-1">
+				<div className={clsx("grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2", examNumber !== undefined && "pr-10")}>
+					{!!assignment &&
+						(assignment.released || assignment.released === undefined) &&
+						aggregatedLevels.map(({module, level}) => <ModuleBadge key={module} module={module} level={level} />)}
+				</div>
+
+				{assignment && (
+					<span className="font-light text-sm">
+						Assignment: {assignment.name}, Teacher: {users.find((u) => u.id === assignment.assigner)?.name}
+					</span>
+				)}
+			</div>
+		</>
+	);
+
+	return (
+		<>
+			<div
+				key={uuidv4()}
+				className={clsx(
+					"flex flex-col justify-between gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:hidden",
+					(isDisabled || (!!assignment && !assignment.released)) && "grayscale tooltip",
+					correct / total >= 0.7 && "hover:border-mti-purple",
+					correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
+					correct / total < 0.3 && "hover:border-mti-rose",
+					typeof selectedTrainingExams !== "undefined" &&
+						typeof timestamp === "string" &&
+						selectedTrainingExams.some((exam) => exam.includes(timestamp)) &&
+						"border-2 border-slate-600",
+				)}
+				onClick={() => {
+					if (!!assignment && !assignment.released) return;
+					if (examNumber === undefined) return selectExam();
+					return;
+				}}
+				style={{
+					...(width !== undefined && {width}),
+					...(height !== undefined && {height}),
+				}}
+				data-tip={isDisabled ? "This exam is still being evaluated..." : "This exam is still locked by its assigner..."}
+				role="button">
+				{content}
+			</div>
+			<div
+				key={uuidv4()}
+				className={clsx(
+					"flex flex-col gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:tooltip md:hidden",
+					correct / total >= 0.7 && "hover:border-mti-purple",
+					correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
+					correct / total < 0.3 && "hover:border-mti-rose",
+				)}
+				data-tip="Your screen size is too small to view previous exams."
+				style={{
+					...(width !== undefined && {width}),
+					...(height !== undefined && {height}),
+				}}
+				role="button">
+				{content}
+			</div>
+		</>
+	);
+};
+
+export default StatsGridItem;

src/components/Medium/Timer.tsx

@@ -0,0 +1,80 @@
+import useExamStore from "@/stores/examStore";
+import {useEffect, useState} from "react";
+import {motion} from "framer-motion";
+import TimerEndedModal from "../TimerEndedModal";
+import clsx from "clsx";
+import {BsStopwatch} from "react-icons/bs";
+
+interface Props {
+	minTimer: number;
+	disableTimer?: boolean;
+	standalone?: boolean;
+}
+
+const Timer: React.FC<Props> = ({minTimer, disableTimer, standalone = false}) => {
+	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) {
+			const timerInterval = setInterval(() => setTimer((prev) => prev - 1), 1000);
+
+			return () => {
+				clearInterval(timerInterval);
+			};
+		}
+	}, [disableTimer, minTimer]);
+
+	useEffect(() => {
+		if (timer <= 0) setShowModal(true);
+	}, [timer]);
+
+	useEffect(() => {
+		if (timer < 300 && !warningMode) setWarningMode(true);
+	}, [timer, warningMode]);
+
+	return (
+		<>
+			<TimerEndedModal
+				isOpen={showModal}
+				onClose={() => {
+					setHasExamEnded(true);
+					setShowModal(false);
+				}}
+			/>
+			<motion.div
+				className={clsx(
+					"absolute right-6 bg-mti-gray-seasalt px-4 py-3 flex items-center gap-2 rounded-full text-mti-gray-davy",
+					standalone ? "top-10" : "top-4",
+					warningMode && !disableTimer && "bg-mti-red-light text-mti-gray-seasalt",
+				)}
+				initial={{scale: warningMode && !disableTimer ? 0.8 : 1}}
+				animate={{scale: warningMode && !disableTimer ? 1.1 : 1}}
+				transition={{repeat: Infinity, repeatType: "reverse", duration: 0.5, ease: "easeInOut"}}>
+				<BsStopwatch className="w-6 h-6" />
+				<span className="text-lg font-bold w-12">
+					{timer > 0 && (
+						<>
+							{Math.floor(timer / 60)
+								.toString(10)
+								.padStart(2, "0")}
+							:
+							{Math.floor(timer % 60)
+								.toString(10)
+								.padStart(2, "0")}
+						</>
+					)}
+					{timer <= 0 && <>00:00</>}
+				</span>
+			</motion.div>
+		</>
+	);
+};
+
+export default Timer;

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

@@ -1,149 +1,215 @@
-import {User} from "@/interfaces/user";
-import {Dialog, Transition} from "@headlessui/react";
+import { User } from "@/interfaces/user";
+import { Dialog, Transition } from "@headlessui/react";
 import axios from "axios";
 import clsx from "clsx";
 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 { useRouter } from "next/router";
+import { Fragment } from "react";
+import { BsXLg } from "react-icons/bs";
+import { checkAccess, getTypesOfUser } from "@/utils/permissions";
 
 interface Props {
-	isOpen: boolean;
-	onClose: () => void;
-	path: string;
-	user: User;
+  isOpen: boolean;
+  onClose: () => void;
+  path: string;
+  user: User;
+  disableNavigation?: boolean;
 }
 
-export default function MobileMenu({isOpen, onClose, path, user}: Props) {
-	const router = useRouter();
+export default function MobileMenu({
+  isOpen,
+  onClose,
+  path,
+  user,
+  disableNavigation,
+}: Props) {
+  const router = useRouter();
 
-	const logout = async () => {
-		axios.post("/api/logout").finally(() => {
-			setTimeout(() => router.reload(), 500);
-		});
-	};
+  const logout = async () => {
+    axios.post("/api/logout").finally(() => {
+      setTimeout(() => router.reload(), 500);
+    });
+  };
 
-	return (
-		<Transition appear show={isOpen} as={Fragment}>
-			<Dialog as="div" className="relative z-10" onClose={onClose}>
-				<Transition.Child
-					as={Fragment}
-					enter="ease-out duration-300"
-					enterFrom="opacity-0"
-					enterTo="opacity-100"
-					leave="ease-in duration-200"
-					leaveFrom="opacity-100"
-					leaveTo="opacity-0">
-					<div className="fixed inset-0 bg-black bg-opacity-25" />
-				</Transition.Child>
+  return (
+    <Transition appear show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-10" onClose={onClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-black bg-opacity-25" />
+        </Transition.Child>
 
-				<div className="fixed inset-0 overflow-y-auto">
-					<div className="flex min-h-full items-center justify-center text-center">
-						<Transition.Child
-							as={Fragment}
-							enter="ease-out duration-300"
-							enterFrom="opacity-0 scale-95"
-							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} />
-									</Link>
-									<div className="cursor-pointer" onClick={onClose} tabIndex={0}>
-										<BsXLg className="text-2xl text-mti-purple-light" onClick={onClose} />
-									</div>
-								</Dialog.Title>
-								<div className="flex flex-col h-full gap-6 px-8 text-lg">
-									<Link
-										href="/"
-										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 ",
-										)}>
-										Dashboard
-									</Link>
-									{(user.type === "student" || user.type === "teacher" || user.type === "developer") && (
-										<>
-											<Link
-												href="/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 ",
-												)}>
-												Exams
-											</Link>
-											<Link
-												href="/exercises"
-												className={clsx(
-													"transition ease-in-out duration-300 w-fit",
-													path === "/exercises" &&
-														"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-												)}>
-												Exercises
-											</Link>
-										</>
-									)}
-									<Link
-										href="/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 ",
-										)}>
-										Stats
-									</Link>
-									<Link
-										href="/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 ",
-										)}>
-										Record
-									</Link>
-									{["admin", "developer", "agent", "corporate"].includes(user.type) && (
-										<Link
-											href="/payment-record"
-											className={clsx(
-												"transition ease-in-out duration-300 w-fit",
-												path === "/payment-record" &&
-													"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-											)}>
-											Payment Record
-										</Link>
-									)}
-									{["admin", "developer", "corporate", "teacher"].includes(user.type) && (
-										<Link
-											href="/settings"
-											className={clsx(
-												"transition ease-in-out duration-300 w-fit",
-												path === "/settings" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-											)}>
-											Settings
-										</Link>
-									)}
-									<Link
-										href="/profile"
-										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 ",
-										)}>
-										Profile
-									</Link>
+        <div className="fixed inset-0 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center text-center">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              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-mti-purple-light text-2xl"
+                      onClick={onClose}
+                    />
+                  </div>
+                </Dialog.Title>
+                <div className="flex h-full flex-col gap-6 px-8 text-lg">
+                  <Link
+                    href={disableNavigation ? "" : "/"}
+                    className={clsx(
+                      "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>
+                  {checkAccess(user, ["student", "teacher", "developer"]) && (
+                    <>
+                      <Link
+                        href={disableNavigation ? "" : "/exam"}
+                        className={clsx(
+                          "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={disableNavigation ? "" : "/exercises"}
+                        className={clsx(
+                          "w-fit transition duration-300 ease-in-out",
+                          path === "/exercises" &&
+                            "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
+                        )}
+                      >
+                        Exercises
+                      </Link>
+                    </>
+                  )}
+                  <Link
+                    href={disableNavigation ? "" : "/stats"}
+                    className={clsx(
+                      "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={disableNavigation ? "" : "/record"}
+                    className={clsx(
+                      "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>
+                  {checkAccess(user, [
+                    "admin",
+                    "developer",
+                    "agent",
+                    "corporate",
+                    "mastercorporate",
+                  ]) && (
+                    <Link
+                      href={disableNavigation ? "" : "/payment-record"}
+                      className={clsx(
+                        "w-fit transition duration-300 ease-in-out",
+                        path === "/payment-record" &&
+                          "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
+                      )}
+                    >
+                      Payment Record
+                    </Link>
+                  )}
+                  {checkAccess(user, [
+                    "admin",
+                    "developer",
+                    "corporate",
+                    "teacher",
+                    "mastercorporate",
+                  ]) && (
+                    <Link
+                      href={disableNavigation ? "" : "/settings"}
+                      className={clsx(
+                        "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={disableNavigation ? "" : "/tickets"}
+                      className={clsx(
+                        "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}>
-										Logout
-									</span>
-								</div>
-							</Dialog.Panel>
-						</Transition.Child>
-					</div>
-				</div>
-			</Dialog>
-		</Transition>
-	);
+                  <span
+                    className={clsx(
+                      "w-fit cursor-pointer justify-self-end transition duration-300 ease-in-out"
+                    )}
+                    onClick={logout}
+                  >
+                    Logout
+                  </span>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  );
 }

src/components/Modal.tsx

@@ -1,17 +1,20 @@
 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;
+	titleClassName?: string;
 	children?: ReactElement;
 }
 
-export default function Modal({isOpen, title, onClose, children}: Props) {
+export default function Modal({isOpen, title, className, titleClassName, 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,9 +36,13 @@ 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">
+									<Dialog.Title as="h3" className={clsx(titleClassName ? titleClassName : "text-lg font-medium leading-6 text-gray-900")}>
 										{title}
 									</Dialog.Title>
 								)}

src/components/ModuleBadge.tsx

@@ -0,0 +1,34 @@
+import {Step} from "@/interfaces";
+import {getGradingLabel, getLevelLabel} from "@/utils/score";
+import clsx from "clsx";
+import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
+
+const ModuleBadge: React.FC<{module: string; level?: number; gradingSystem?: Step[]; className?: string}> = ({
+	module,
+	level,
+	gradingSystem,
+	className,
+}) => (
+	<div
+		className={clsx(
+			"flex gap-2 justify-center 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",
+			className,
+		)}>
+		{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" />}
+		{/* do not switch to level && it will convert the 0.0 to 0*/}
+		{level !== undefined && (
+			<span className="text-sm">{module === "level" && gradingSystem ? getGradingLabel(level, gradingSystem) : level.toFixed(1)}</span>
+		)}
+	</div>
+);
+
+export default ModuleBadge;

src/components/Navbar.tsx

@@ -3,7 +3,7 @@ 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";
@@ -12,7 +12,14 @@ 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;
@@ -25,9 +32,11 @@ interface 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);
@@ -48,44 +57,105 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
 	};
 
 	useEffect(() => {
-		if (user.type !== "student" && user.type !== "teacher") setDisablePaymentPage(false);
+		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={disablePaymentPage ? "/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")}
 						</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.type === "corporate" ? `${user.corporateInformation?.companyInformation.name} |` : ""} {user.name} |{" "}
-							{USER_TYPE_LABELS[user.type]}
+					<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.type === "mastercorporate") && !!user.corporateInformation?.companyInformation?.name
+								? `${user.corporateInformation?.companyInformation.name} |`
+								: ""}{" "}
+							{user.name} | {USER_TYPE_LABELS[user.type]}
+							{user.type === "corporate" &&
+								!!user.demographicInformation?.position &&
+								` | ${user.demographicInformation?.position || "N/A"}`}
 						</span>
 					</Link>
 					<div className="cursor-pointer md:hidden" onClick={() => setIsMenuOpen(true)}>
-						<BsList className="text-mti-purple-light w-8 h-8" />
+						<BsList className="text-mti-purple-light h-8 w-8" />
 					</div>
 				</div>
 				{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}

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/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,82 @@
+import React from "react";
+import {Permission} from "@/interfaces/permissions";
+import {createColumnHelper, flexRender, getCoreRowModel, useReactTable, Row} 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(),
+	});
+
+	const groupedData: {[key: string]: Row<Permission>[]} = table.getRowModel().rows.reduce((groups: {[key: string]: Row<Permission>[]}, row) => {
+		const parent = row.original.topic;
+		if (!groups[parent]) {
+			groups[parent] = [];
+		}
+		groups[parent].push(row);
+		return groups;
+	}, {});
+
+	return (
+		<div className="w-full h-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">
+						{Object.keys(groupedData).map((parent) => (
+							<React.Fragment key={parent}>
+								<tr>
+									<td className="px-2 py-2 items-center w-fit">
+										<strong>{parent}</strong>
+									</td>
+								</tr>
+								{groupedData[parent].map((row, i) => (
+									<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>
+								))}
+							</React.Fragment>
+						))}
+					</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/QuestionsModal.tsx

@@ -0,0 +1,121 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { Fragment, useEffect, useState } from "react";
+import Button from "./Low/Button";
+
+interface Props {
+	isOpen: boolean;
+	type?: "module" | "blankQuestions" | "submit";
+	unanswered?: boolean;
+	onClose: (next?: boolean) => void;
+}
+
+export default function QuestionsModal({ isOpen, onClose, type = "module", unanswered = false }: Props) {
+	const [isClosing, setIsClosing] = useState(false);
+
+	const blockMultipleClicksClose = (x: boolean) => {
+		if (!isClosing) {
+			setIsClosing(true);
+			onClose(x);
+		}
+
+		setTimeout(() => {
+			setIsClosing(false);
+		}, 400);
+	}
+
+	return (
+		<Transition show={isOpen} as={Fragment}>
+			<Dialog onClose={() => onClose(false)} className="relative z-50">
+				<Transition.Child
+					as={Fragment}
+					enter="ease-out duration-300"
+					enterFrom="opacity-0"
+					enterTo="opacity-100"
+					leave="ease-in duration-200"
+					leaveFrom="opacity-100"
+					leaveTo="opacity-0">
+					<div className="fixed inset-0 bg-black/30" />
+				</Transition.Child>
+
+				<Transition.Child
+					as={Fragment}
+					enter="ease-out duration-300"
+					enterFrom="opacity-0 scale-95"
+					enterTo="opacity-100 scale-100"
+					leave="ease-in duration-200"
+					leaveFrom="opacity-100 scale-100"
+					leaveTo="opacity-0 scale-95">
+					<div className="fixed inset-0 flex items-center justify-center p-4">
+						<Dialog.Panel className="w-full max-w-2xl h-fit p-8 rounded-xl bg-white flex flex-col gap-4">
+							{type === "module" && (
+								<>
+									<Dialog.Title className="font-bold text-xl">Questions Unanswered</Dialog.Title>
+									<span>
+										Please note that you are finishing the current module and once you proceed to the next module, you will no longer be
+										able to change the answers of the current one, including your unanswered questions. <br />
+										<br />
+										Are you sure you want to continue without completing those questions?
+									</span>
+									<div className="w-full flex justify-between mt-8">
+										<Button color="purple" onClick={() => blockMultipleClicksClose(false)} variant="outline" className="max-w-[200px] self-end w-full">
+											Go Back
+										</Button>
+										<Button color="purple" onClick={() => blockMultipleClicksClose(true)} className="max-w-[200px] self-end w-full">
+											Continue
+										</Button>
+									</div>
+								</>
+							)}
+							{type === "blankQuestions" && (
+								<>
+									<Dialog.Title className="font-bold text-2xl">Questions Unanswered</Dialog.Title>
+									<div className="flex flex-col text-xl gap-2">
+										<p>You have left some questions unanswered in the current part.</p>
+										<p>If you wish to continue, you can still access this part later using the navigation bar at the top or the &quot;Back&quot; button.</p>
+										<p>Do you want to proceed to the next part, or would you like to go back and complete the unanswered questions in the current part?</p>
+									</div>
+									<div className="w-full flex justify-between mt-4">
+										<Button color="purple" onClick={() => blockMultipleClicksClose(false)} variant="outline" className="max-w-[200px] self-end w-full">
+											Go Back
+										</Button>
+										<Button color="purple" onClick={() => blockMultipleClicksClose(true)} className="max-w-[200px] self-end w-full">
+											Continue
+										</Button>
+									</div>
+								</>
+							)}
+							{type === "submit" && (
+								<>
+									<Dialog.Title className="font-bold text-3xl text-mti-rose-light">Confirm Submission</Dialog.Title>
+									<span className="text-xl">
+										{unanswered ? (
+											<>
+												By clicking &quot;Submit&quot;, you are finalizing your exam with some <b>questions left unanswered</b>. Once you submit, you will not be able to review or change any of your answers, including the unanswered ones. <br />
+												<br />
+												Are you sure you want to submit and complete the exam <b>with unanswered questions</b>?
+											</>
+										) : (
+											<>
+												By clicking &quot;Submit&quot;, you are finalizing your exam. Once you submit, you will not be able to review or change any of your answers. <br />
+												<br />
+												Are you sure you want to submit and complete the exam?
+											</>
+										)}
+									</span>
+									<div className="w-full flex justify-between mt-4">
+										<Button color="purple" onClick={() => blockMultipleClicksClose(false)} variant="outline" className="max-w-[200px] self-end w-full !text-xl">
+											Go Back
+										</Button>
+										<Button color="rose" onClick={() => blockMultipleClicksClose(true)} className="max-w-[200px] self-end w-full !text-xl">
+											Submit
+										</Button>
+									</div>
+								</>
+							)}
+						</Dialog.Panel>
+					</div>
+				</Transition.Child>
+			</Dialog>
+		</Transition>
+	);
+}

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,7 +11,11 @@ import {
 	BsShieldFill,
 	BsCloudFill,
 	BsCurrencyDollar,
+	BsClipboardData,
+	BsFileLock,
+	BsPeople,
 } from "react-icons/bs";
+import {CiDumbbell} from "react-icons/ci";
 import {RiLogoutBoxFill} from "react-icons/ri";
 import {SlPencil} from "react-icons/sl";
 import {FaAward} from "react-icons/fa";
@@ -20,16 +24,19 @@ 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";
+import usePermissions from "@/hooks/usePermissions";
 interface Props {
 	path: string;
 	navDisabled?: boolean;
 	focusMode?: boolean;
 	onFocusLayerMouseEnter?: () => void;
 	className?: string;
-	userType?: Type;
+	user: User;
 }
 
 interface NavProps {
@@ -39,27 +46,44 @@ interface NavProps {
 	keyPath: string;
 	disabled?: boolean;
 	isMinimized?: boolean;
+	badge?: number;
 }
 
-const Nav = ({Icon, label, path, keyPath, disabled = false, isMinimized = false}: NavProps) => (
-	<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",
-			path === keyPath && "bg-mti-purple-light text-white",
-			isMinimized ? "w-fit" : "w-full min-w-[200px] 2xl:min-w-[220px] px-8",
-		)}>
-		<Icon size={24} />
-		{!isMinimized && <span className="text-lg font-semibold">{label}</span>}
-	</Link>
-);
+const Nav = ({Icon, label, path, keyPath, disabled = false, isMinimized = false, badge}: NavProps) => {
+	return (
+		<Link
+			href={!disabled ? keyPath : ""}
+			className={clsx(
+				"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] 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 {permissions} = usePermissions(user.id);
+
 	const logout = async () => {
 		axios.post("/api/logout").finally(() => {
 			setTimeout(() => router.reload(), 500);
@@ -71,35 +95,31 @@ 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"], permissions, "viewExams") && (
+					<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized={isMinimized} />
 				)}
-				<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
-				<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />
-				{["admin", "developer", "agent", "corporate"].includes(userType || "") && (
+				{checkAccess(user, ["student", "teacher", "developer"], permissions, "viewExercises") && (
+					<Nav disabled={disableNavigation} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" isMinimized={isMinimized} />
+				)}
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewStats") && (
+					<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
+				)}
+				{checkAccess(user, ["developer", "admin", "teacher", "student"], permissions) && (
+					<Nav disabled={disableNavigation} Icon={BsPeople} label="Groups" path={path} keyPath="/groups" isMinimized={isMinimized} />
+				)}
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
+					<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />
+				)}
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
+					<Nav disabled={disableNavigation} Icon={CiDumbbell} label="Training" path={path} keyPath="/training" isMinimized={isMinimized} />
+				)}
+				{checkAccess(user, ["admin", "developer", "agent", "corporate", "mastercorporate"], permissions, "viewPaymentRecords") && (
 					<Nav
 						disabled={disableNavigation}
 						Icon={BsCurrencyDollar}
@@ -109,7 +129,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 +139,18 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 						isMinimized={isMinimized}
 					/>
 				)}
-				{userType === "developer" && (
+				{checkAccess(user, ["admin", "developer", "agent"], permissions, "viewTickets") && (
+					<Nav
+						disabled={disableNavigation}
+						Icon={BsClipboardData}
+						label="Tickets"
+						path={path}
+						keyPath="/tickets"
+						isMinimized={isMinimized}
+						badge={totalAssignedTickets}
+					/>
+				)}
+				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
 					<Nav
 						disabled={disableNavigation}
 						Icon={BsCloudFill}
@@ -129,28 +160,65 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 						isMinimized={isMinimized}
 					/>
 				)}
+				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate", "agent"]) && (
+					<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} />
-				<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={true} />
-				<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={true} />
-				{userType !== "student" && (
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewStats") && (
+					<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={true} />
+				)}
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
+					<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={true} />
+				)}
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
+					<Nav disabled={disableNavigation} Icon={CiDumbbell} label="Training" path={path} keyPath="/training" isMinimized={true} />
+				)}
+				{checkAccess(user, getTypesOfUser(["student"])) && (
 					<Nav disabled={disableNavigation} Icon={BsShieldFill} label="Settings" path={path} keyPath="/settings" isMinimized={true} />
 				)}
-				{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 bottom-12 fixed">
+			<div className="2xl:fixed bottom-12 flex flex-col gap-0 -2xl:mt-8">
 				<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 +229,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

@@ -1,53 +1,132 @@
-import {FillBlanksExercise} from "@/interfaces/exam";
+import {FillBlanksExercise, FillBlanksMCOption, ShuffleMap} from "@/interfaces/exam";
 import clsx from "clsx";
 import reactStringReplace from "react-string-replace";
 import {CommonProps} from ".";
 import {Fragment} from "react";
 import Button from "../Low/Button";
+import useExamStore from "@/stores/examStore";
+
+export default function FillBlanksSolutions({id, type, prompt, solutions, words, text, onNext, onBack}: FillBlanksExercise & CommonProps) {
+	const storeUserSolutions = useExamStore((state) => state.userSolutions);
+	const {questionIndex, setQuestionIndex, partIndex, exam} = useExamStore((state) => state);
+
+	const correctUserSolutions = storeUserSolutions.find((solution) => solution.exercise === id)?.solutions;
+
+	const shuffles = useExamStore((state) => state.shuffles);
 
-export default function FillBlanksSolutions({id, type, prompt, solutions, 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 missing = total - userSolutions.filter((x) => solutions.find((y) => x.id.toString() === y.id.toString())).length;
+		const correct = correctUserSolutions!.filter((x) => {
+			const solution = solutions.find((y) => x.id.toString() === y.id.toString())?.solution;
+			if (!solution) return false;
 
+			const option = words.find((w) => {
+				if (typeof w === "string") {
+					return w.toLowerCase() === x.solution.toLowerCase();
+				} else if ("letter" in w) {
+					return w.letter.toLowerCase() === x.solution.toLowerCase();
+				} else {
+					return w.id.toString() === x.id.toString();
+				}
+			});
+			if (!option) return false;
+
+			if (typeof option === "string") {
+				return solution.toLowerCase() === option.toLowerCase();
+			} else if ("letter" in option) {
+				return solution.toLowerCase() === option.word.toLowerCase();
+			} else if ("options" in option) {
+				return option.options[solution as keyof typeof option.options] == x.solution;
+			}
+			return false;
+		}).length;
+		const missing = total - correctUserSolutions!.filter((x) => solutions.find((y) => x.id.toString() === y.id.toString())).length;
 		return {total, correct, missing};
 	};
 
+	const typeCheckWordsMC = (words: any[]): words is FillBlanksMCOption[] => {
+		return Array.isArray(words) && words.every((word) => word && typeof word === "object" && "id" in word && "options" in word);
+	};
+
 	const renderLines = (line: string) => {
 		return (
 			<span>
 				{reactStringReplace(line, /({{\d+}})/g, (match) => {
-					const id = match.replaceAll(/[\{\}]/g, "");
-					const userSolution = userSolutions.find((x) => x.id === id);
-					const solution = solutions.find((x) => x.id === id)!;
+					const questionId = match.replaceAll(/[\{\}]/g, "");
+					const userSolution = correctUserSolutions!.find((x) => x.id.toString() === questionId.toString());
+					const answerSolution = solutions.find((sol) => sol.id.toString() === questionId.toString())!.solution;
+					const questionShuffleMap = shuffles.find((x) => x.exerciseID == id)?.shuffles.find((y) => y.questionID == questionId);
+					const newAnswerSolution = questionShuffleMap
+						? questionShuffleMap.map[answerSolution].toLowerCase()
+						: answerSolution.toLowerCase();
 
 					if (!userSolution) {
+						let answerText;
+						if (typeCheckWordsMC(words)) {
+							const options = words.find((x) => x.id.toString() === questionId.toString());
+							const correctKey = Object.keys(options!.options).find((key) => key.toLowerCase() === newAnswerSolution);
+							answerText = options!.options[correctKey as keyof typeof options];
+						} else {
+							answerText = answerSolution;
+						}
+
 						return (
 							<button
 								className={clsx(
 									"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}
+								{answerText}
 							</button>
 						);
 					}
 
-					if (userSolution.solution === solution.solution) {
+					const userSolutionWord = words.find((w) =>
+						typeof w === "string"
+							? w.toLowerCase() === userSolution.solution.toLowerCase()
+							: "letter" in w
+							? w.letter.toLowerCase() === userSolution.solution.toLowerCase()
+							: "options" in w
+							? w.id === userSolution.questionId
+							: false,
+					);
+
+					const userSolutionText =
+						typeof userSolutionWord === "string"
+							? userSolutionWord
+							: userSolutionWord && "letter" in userSolutionWord
+							? userSolutionWord.word
+							: userSolutionWord && "options" in userSolutionWord
+							? userSolution.solution
+							: userSolution.solution;
+
+					let correct;
+					let solutionText;
+					if (typeCheckWordsMC(words)) {
+						const options = words.find((x) => x.id.toString() === questionId.toString());
+						if (options) {
+							const correctKey = Object.keys(options.options).find((key) => key.toLowerCase() === newAnswerSolution);
+							correct = userSolution.solution == options.options[correctKey as keyof typeof options.options];
+							solutionText = options.options[correctKey as keyof typeof options.options] || answerSolution;
+						} else {
+							correct = false;
+							solutionText = answerSolution;
+						}
+					} else {
+						correct = userSolutionText === answerSolution;
+						solutionText = answerSolution;
+					}
+
+					if (correct) {
 						return (
 							<button
 								className={clsx(
 									"rounded-full hover:text-white hover:bg-mti-purple transition duration-300 ease-in-out my-1",
 									userSolution && "px-5 py-2 text-center text-white bg-mti-purple-light",
 								)}>
-								{solution.solution}
+								{solutionText}
 							</button>
 						);
-					}
-
-					if (userSolution.solution !== solution.solution) {
+					} else {
 						return (
 							<>
 								<button
@@ -55,7 +134,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
@@ -63,7 +142,7 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, text,
 										"rounded-full hover:text-white hover:bg-mti-purple transition duration-300 ease-in-out my-1",
 										userSolution && "px-5 py-2 text-center text-white bg-mti-purple-light",
 									)}>
-									{solution.solution}
+									{solutionText}
 								</button>
 							</>
 						);
@@ -74,18 +153,28 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, text,
 	};
 
 	return (
-		<>
-			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
-				<span className="text-sm w-full leading-6">
-					{prompt.split("\\n").map((line, index) => (
-						<Fragment key={index}>
-							{line}
-							<br />
-						</Fragment>
-					))}
-				</span>
+		<div className="flex flex-col gap-4">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() => onBack({exercise: id, solutions: correctUserSolutions!, score: calculateScore(), type})}
+					className="max-w-[200px] w-full"
+					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
+					Back
+				</Button>
+
+				<Button
+					color="purple"
+					onClick={() => onNext({exercise: id, solutions: correctUserSolutions!, score: calculateScore(), type})}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
+			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">
-					{userSolutions &&
+					{correctUserSolutions &&
 						text.split("\\n").map((line, index) => (
 							<p key={index}>
 								{renderLines(line)}
@@ -113,18 +202,19 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, text,
 				<Button
 					color="purple"
 					variant="outline"
-					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
-					className="max-w-[200px] w-full">
+					onClick={() => onBack({exercise: id, solutions: correctUserSolutions!, score: calculateScore(), type})}
+					className="max-w-[200px] w-full"
+					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
 					Back
 				</Button>
 
 				<Button
 					color="purple"
-					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
+					onClick={() => onNext({exercise: id, solutions: correctUserSolutions!, score: calculateScore(), type})}
 					className="max-w-[200px] self-end w-full">
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

src/components/Solutions/InteractiveSpeaking.tsx

@@ -8,6 +8,8 @@ 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});
 
@@ -22,9 +24,21 @@ export default function InteractiveSpeaking({
 	onBack,
 }: InteractiveSpeakingExercise & CommonProps) {
 	const [solutionsURL, setSolutionsURL] = useState<string[]>([]);
+	const [diffNumber, setDiffNumber] = useState(0);
+
+	const tooltips: {[key: string]: string} = {
+		"Grammatical Range and Accuracy":
+			"Assesses the variety and correctness of grammatical structures used. A higher score indicates a wide range of complex and accurate grammar; a lower score suggests the need for more basic grammar practice.",
+		"Fluency and Coherence":
+			"Evaluates smoothness and logical flow of speech. A higher score means natural, effortless speech and clear idea progression; a lower score indicates frequent pauses and difficulty in maintaining coherence.",
+		Pronunciation:
+			"Measures clarity and accuracy of spoken words. A higher score reflects clear, well-articulated speech with correct intonation; a lower score shows challenges in being understood.",
+		"Lexical Resource":
+			"Looks at the range and appropriateness of vocabulary. A higher score demonstrates a rich and precise vocabulary; a lower score suggests limited vocabulary usage and appropriateness.",
+	};
 
 	useEffect(() => {
-		if (userSolutions && userSolutions.length > 0) {
+		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(
@@ -41,7 +55,79 @@ export default function InteractiveSpeaking({
 	}, [userSolutions]);
 
 	return (
-		<>
+		<div className="flex flex-col gap-4 mt-4 w-full">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() =>
+						onBack({
+							exercise: id,
+							solutions: userSolutions,
+							score: {total: 100, missing: 0, correct: speakingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0},
+							type,
+						})
+					}
+					className="max-w-[200px] self-end w-full">
+					Back
+				</Button>
+				<Button
+					color="purple"
+					onClick={() =>
+						onNext({
+							exercise: id,
+							solutions: userSolutions,
+							score: {
+								total: 100,
+								missing: 0,
+								correct: userSolutions[0]?.evaluation ? speakingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0 : 0,
+							},
+							type,
+						})
+					}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
+			<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">
@@ -67,10 +153,23 @@ export default function InteractiveSpeaking({
 						{solutionsURL.map((x, index) => (
 							<div
 								key={index}
-								className="w-full 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}`] &&
+									userSolutions[0].evaluation[`fixed_text_${index + 1}`] && (
+										<Button
+											className="w-full max-w-[180px] !py-2 self-center"
+											color="pink"
+											variant="outline"
+											onClick={() => setDiffNumber(index + 1)}>
+											View Correction
+										</Button>
+									)}
 							</div>
 						))}
 					</div>
@@ -78,16 +177,38 @@ export default function InteractiveSpeaking({
 					{userSolutions && userSolutions.length > 0 && userSolutions[0].evaluation && typeof userSolutions[0].evaluation !== "string" && (
 						<div className="flex flex-col gap-4 w-full">
 							<div className="flex gap-4 px-1">
-								{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => (
-									<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]}
-									</div>
-								))}
+								{Object.keys(userSolutions[0].evaluation!.task_response).map((key, index) => {
+									const taskResponse = userSolutions[0].evaluation!.task_response[key];
+									const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
+
+									return (
+										<div
+											className={clsx(
+												"bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2 tooltip tooltip-bottom",
+												index === 0 && "tooltip-right",
+											)}
+											key={key}
+											data-tip={tooltips[key] || "No additional information available"}>
+											{key}: Level {grade}
+										</div>
+									);
+								})}
 							</div>
 							{userSolutions[0].evaluation &&
-							Object.keys(userSolutions[0].evaluation).filter((x) => x.startsWith("perfect_answer")).length === 3 ? (
+							Object.keys(userSolutions[0].evaluation).filter((x) => x.startsWith("perfect_answer")).length > 0 ? (
 								<Tab.Group>
 									<Tab.List className="flex space-x-1 rounded-xl bg-ielts-speaking/20 p-1">
+										<Tab
+											className={({selected}) =>
+												clsx(
+													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
+													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
+													"transition duration-300 ease-in-out",
+													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
+												)
+											}>
+											General Feedback
+										</Tab>
 										<Tab
 											className={({selected}) =>
 												clsx(
@@ -99,59 +220,66 @@ export default function InteractiveSpeaking({
 											}>
 											Evaluation
 										</Tab>
-										<Tab
-											className={({selected}) =>
-												clsx(
-													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
-													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
-													"transition duration-300 ease-in-out",
-													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
-												)
-											}>
-											Recommended Answer (Prompt 1)
-										</Tab>
-										<Tab
-											className={({selected}) =>
-												clsx(
-													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
-													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
-													"transition duration-300 ease-in-out",
-													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
-												)
-											}>
-											Recommended Answer (Prompt 2)
-										</Tab>
-										<Tab
-											className={({selected}) =>
-												clsx(
-													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
-													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
-													"transition duration-300 ease-in-out",
-													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
-												)
-											}>
-											Recommended Answer (Prompt 3)
-										</Tab>
+										{Object.keys(userSolutions[0].evaluation)
+											.filter((x) => x.startsWith("perfect_answer"))
+											.map((key, index) => (
+												<Tab
+													key={key}
+													className={({selected}) =>
+														clsx(
+															"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
+															"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
+															"transition duration-300 ease-in-out",
+															selected
+																? "bg-white shadow"
+																: "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
+														)
+													}>
+													Recommended Answer
+													<br />
+													(Prompt {index + 1})
+												</Tab>
+											))}
 									</Tab.List>
 									<Tab.Panels>
+										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<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">
+															<div
+																className={clsx(
+																	"bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2 w-fit",
+																)}
+																key={key}>
+																{key}: Level {grade}
+															</div>
+															{typeof taskResponse !== "number" && (
+																<span className="px-2 py-2">{taskResponse.comment}</span>
+															)}
+														</div>
+													);
+												})}
+											</div>
+										</Tab.Panel>
 										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
 											<span className="w-full h-full min-h-fit cursor-text">{userSolutions[0].evaluation!.comment}</span>
 										</Tab.Panel>
-										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
-											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
-												{userSolutions[0].evaluation!.perfect_answer_1!.replaceAll(/\s{2,}/g, "\n\n")}
-											</span>
-										</Tab.Panel>
-										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
-											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
-												{userSolutions[0].evaluation!.perfect_answer_2!.replaceAll(/\s{2,}/g, "\n\n")}
-											</span>
-										</Tab.Panel>
-										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
-											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
-												{userSolutions[0].evaluation!.perfect_answer_3!.replaceAll(/\s{2,}/g, "\n\n")}
-											</span>
-										</Tab.Panel>
+										{Object.keys(userSolutions[0].evaluation)
+											.filter((x) => x.startsWith("perfect_answer"))
+											.map((key, index) => (
+												<Tab.Panel key={key} className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+													<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
+														{userSolutions[0].evaluation![`perfect_answer_${index + 1}`].answer.replaceAll(
+															/\s{2,}/g,
+															"\n\n",
+														)}
+													</span>
+												</Tab.Panel>
+											))}
 									</Tab.Panels>
 								</Tab.Group>
 							) : (
@@ -185,7 +313,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,
 						})
 					}
@@ -193,6 +325,6 @@ export default function InteractiveSpeaking({
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

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 ".";
@@ -8,6 +8,49 @@ import Icon from "@mdi/react";
 import {Fragment} from "react";
 import Button from "../Low/Button";
 import Xarrow from "react-xarrows";
+import useExamStore from "@/stores/examStore";
+
+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,
@@ -19,6 +62,8 @@ export default function MatchSentencesSolutions({
 	onNext,
 	onBack,
 }: MatchSentencesExercise & CommonProps) {
+	const {questionIndex, setQuestionIndex, partIndex, exam} = useExamStore((state) => state);
+
 	const calculateScore = () => {
 		const total = sentences.length;
 		const correct = userSolutions.filter(
@@ -30,8 +75,26 @@ 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">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
+					className="max-w-[200px] w-full"
+					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
+					Back
+				</Button>
+
+				<Button
+					color="purple"
+					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
+			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>
@@ -40,57 +103,18 @@ export default function MatchSentencesSolutions({
 						</Fragment>
 					))}
 				</span>
-				<div className="flex gap-8 w-full items-center justify-between bg-mti-gray-smoke rounded-xl px-24 py-6">
+				<div className="flex flex-col gap-8 w-full items-center justify-between bg-mti-gray-smoke rounded-xl px-24 py-6">
 					<div className="flex flex-col gap-4">
-						{sentences.map(({sentence, id, solution}) => (
-							<div key={`question_${id}`} className="flex items-center justify-end gap-2 cursor-pointer">
-								<span>{sentence} </span>
-								<button
-									id={id}
-									className={clsx(
-										"w-8 h-8 rounded-full z-10 text-white",
-										"transition duration-300 ease-in-out",
-										!userSolutions.find((x) => x.question.toString() === id.toString()) && "!bg-mti-gray-davy",
-										userSolutions.find((x) => x.question.toString() === id.toString())?.option === solution && "bg-mti-purple",
-										userSolutions.find((x) => x.question.toString() === id.toString())?.option !== solution && "bg-mti-rose",
-									)}>
-									{id}
-								</button>
-							</div>
-						))}
-					</div>
-					<div className="flex flex-col gap-4">
-						{options.map(({sentence, id}) => (
-							<div key={`answer_${id}`} className={clsx("flex items-center justify-start gap-2 cursor-pointer")}>
-								<button
-									id={id}
-									className={clsx(
-										"bg-mti-purple-ultralight text-mti-purple hover:text-white hover:bg-mti-purple w-8 h-8 rounded-full z-10",
-										"transition duration-300 ease-in-out",
-									)}>
-									{id}
-								</button>
-								<span>{sentence}</span>
-							</div>
-						))}
-					</div>
-					{userSolutions &&
-						sentences.map((sentence, index) => (
-							<Xarrow
-								key={index}
-								start={sentence.id}
-								end={sentence.solution}
-								lineColor={
-									!userSolutions.find((x) => x.question === sentence.id)
-										? "#CC5454"
-										: userSolutions.find((x) => x.question === sentence.id)?.option === sentence.solution
-										? "#7872BF"
-										: "#CC5454"
-								}
-								showHead={false}
+						{sentences.map((question) => (
+							<QuestionSolutionArea
+								question={question}
+								userSolution={userSolutions.find((x) => x.question.toString() === question.id.toString())}
+								key={`question_${question.id}`}
 							/>
 						))}
+					</div>
 				</div>
+
 				<div className="flex gap-4 items-center">
 					<div className="flex gap-2 items-center">
 						<div className="w-4 h-4 rounded-full bg-mti-purple" /> Correct
@@ -109,7 +133,8 @@ export default function MatchSentencesSolutions({
 					color="purple"
 					variant="outline"
 					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
-					className="max-w-[200px] w-full">
+					className="max-w-[200px] w-full"
+					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
 					Back
 				</Button>
 
@@ -120,6 +145,6 @@ export default function MatchSentencesSolutions({
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

src/components/Solutions/MultipleChoice.tsx

@@ -1,52 +1,87 @@
 /* eslint-disable @next/next/no-img-element */
-import {MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam";
+import {MultipleChoiceExercise, MultipleChoiceQuestion, ShuffleMap} 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";
+import {v4} from "uuid";
 
 function Question({
+	id,
 	variant,
 	prompt,
 	solution,
 	options,
 	userSolution,
 }: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) {
+	const {userSolutions} = useExamStore((state) => state);
+
+	const questionShuffleMap = userSolutions.reduce((foundMap, userSolution) => {
+		if (foundMap) return foundMap;
+		return userSolution.shuffleMaps?.find((map) => map.questionID === id) || null;
+	}, null as ShuffleMap | null);
+
+	const newSolution = questionShuffleMap ? questionShuffleMap?.map[solution] : solution;
+
+	const renderPrompt = (prompt: string) => {
+		return reactStringReplace(prompt, /(<u>.*?<\/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-gray-davy !text-mti-gray-davy";
+		if (option === newSolution && !userSolution) {
+			return "!bg-mti-gray-davy !text-white";
 		}
 
-		if (option === solution) {
-			return "!border-mti-purple-light !text-mti-purple-light";
+		if (option === newSolution) {
+			return "!bg-mti-purple-light !text-white";
 		}
 
-		return userSolution === option ? "!border-mti-rose-light !text-mti-rose-light" : "";
+		return userSolution === option ? "!bg-mti-rose-light !text-white" : "";
 	};
 
 	return (
-		<div className="flex flex-col items-center gap-4">
-			<span>{prompt}</span>
-			<div className="grid grid-cols-4 gap-4 place-items-center">
+		<div className="flex flex-col gap-4">
+			{isNaN(Number(id)) ? (
+				<span>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")} </span>
+			) : (
+				<span className="text-lg" key={v4()}>
+					<>
+						{id} -{" "}
+						<span className="text-lg" key={v4()}>
+							{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")}{" "}
+						</span>
+					</>
+				</span>
+			)}
+			<div className="flex flex-wrap gap-4 justify-between">
 				{variant === "image" &&
 					options.map((option) => (
 						<div
-							key={option.id}
+							key={option?.id}
 							className={clsx(
-								"flex flex-col items-center border border-mti-gray-platinum p-4 px-8 rounded-xl gap-4 cursor-pointer bg-white relative",
-								optionColor(option.id),
+								"flex flex-col items-center border border-mti-gray-platinum p-4 px-8 rounded-xl gap-4 cursor-pointer bg-white relative select-none",
+								optionColor(option!.id),
 							)}>
-							<span className={clsx("text-sm", solution !== option.id && userSolution !== option.id && "opacity-50")}>{option.id}</span>
-							<img src={option.src!} alt={`Option ${option.id}`} />
+							<span className={clsx("text-sm", newSolution !== option?.id && userSolution !== option?.id && "opacity-50")}>
+								{option?.id}
+							</span>
+							{"src" in option && <img src={option?.src!} alt={`Option ${option?.id}`} />}
 						</div>
 					))}
 				{variant === "text" &&
 					options.map((option) => (
 						<div
-							key={option.id}
-							className={clsx("flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-sm", optionColor(option.id))}>
-							<span className="font-semibold">{option.id}.</span>
-							<span>{option.text}</span>
+							key={option?.id}
+							className={clsx(
+								"flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-base select-none",
+								optionColor(option!.id),
+							)}>
+							<span className="font-semibold">{option?.id}.</span>
+							<span>{option?.text}</span>
 						</div>
 					))}
 			</div>
@@ -54,37 +89,32 @@ 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, partIndex, exam} = useExamStore((state) => state);
+
+	const stats = useExamStore((state) => state.userSolutions);
 
 	const calculateScore = () => {
 		const total = questions.length;
-		const correct = userSolutions.filter(
-			(x) => questions.find((y) => y.id.toString() === x.question.toString())?.solution === x.option || false,
-		).length;
+		const questionShuffleMap = stats.find((x) => x.exercise == id)?.shuffleMaps;
+		const correct = userSolutions.filter((x) => {
+			if (questionShuffleMap) {
+				const shuffleMap = questionShuffleMap.find((y) => y.questionID === x.question);
+				const originalSol = questions.find((y) => y.id.toString() === x.question.toString())?.solution!;
+				return x.option == shuffleMap?.map[originalSol];
+			} else {
+				return questions.find((y) => y.id.toString() === x.question.toString())?.solution === x.option || false;
+			}
+		}).length;
 		const missing = total - userSolutions.filter((x) => questions.find((y) => y.id.toString() === x.question.toString())).length;
-
 		return {total, correct, missing};
 	};
 
-	useEffect(() => {
-		if (updateIndex) updateIndex(questionIndex);
-	}, [questionIndex, updateIndex]);
-
 	const next = () => {
-		if (questionIndex === questions.length - 1) {
+		if (questionIndex + 1 >= questions.length - 1) {
 			onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type});
 		} else {
-			setQuestionIndex((prev) => prev + 1);
+			setQuestionIndex(questionIndex + 2);
 		}
 	};
 
@@ -92,22 +122,49 @@ export default function MultipleChoice({
 		if (questionIndex === 0) {
 			onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type});
 		} else {
-			setQuestionIndex((prev) => prev - 1);
+			setQuestionIndex(questionIndex - 2);
 		}
 	};
 
 	return (
-		<>
-			<div className="flex flex-col gap-4 w-full h-full mb-20">
-				<div className="flex flex-col gap-2 mt-4 h-full bg-mti-gray-smoke rounded-xl px-16 py-8">
-					<span className="text-xl font-semibold">{prompt}</span>
-					{userSolutions && questionIndex < questions.length && (
-						<Question
-							{...questions[questionIndex]}
-							userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option}
-						/>
+		<div className="flex flex-col gap-4">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={back}
+					className="max-w-[200px] w-full"
+					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
+					Back
+				</Button>
+
+				<Button color="purple" onClick={next} className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
+			<div className="flex flex-col gap-4 w-full h-full mb-20 mt-4">
+				<div className="flex flex-col gap-4 mt-2">
+					<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
+						{/*<span className="text-xl font-semibold">{prompt}</span>*/}
+						{userSolutions && questionIndex < questions.length && (
+							<Question
+								{...questions[questionIndex]}
+								userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option}
+							/>
+						)}
+					</div>
+
+					{userSolutions && questionIndex + 1 < questions.length && (
+						<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
+							<Question
+								{...questions[questionIndex + 1]}
+								userSolution={userSolutions.find((x) => questions[questionIndex + 1].id === x.question)?.option}
+							/>
+						</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" />
@@ -125,7 +182,12 @@ export default function MultipleChoice({
 			</div>
 
 			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
-				<Button color="purple" variant="outline" onClick={back} className="max-w-[200px] w-full">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={back}
+					className="max-w-[200px] w-full"
+					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
 					Back
 				</Button>
 
@@ -133,6 +195,6 @@ export default function MultipleChoice({
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

src/components/Solutions/Speaking.tsx

@@ -8,14 +8,21 @@ 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,8 +32,89 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
 		}
 	}, [userSolutions]);
 
+	const tooltips: {[key: string]: string} = {
+		"Grammatical Range and Accuracy":
+			"Assesses the variety and correctness of grammatical structures used. A higher score indicates a wide range of complex and accurate grammar; a lower score suggests the need for more basic grammar practice.",
+		"Fluency and Coherence":
+			"Evaluates smoothness and logical flow of speech. A higher score means natural, effortless speech and clear idea progression; a lower score indicates frequent pauses and difficulty in maintaining coherence.",
+		Pronunciation:
+			"Measures clarity and accuracy of spoken words. A higher score reflects clear, well-articulated speech with correct intonation; a lower score shows challenges in being understood.",
+		"Lexical Resource":
+			"Looks at the range and appropriateness of vocabulary. A higher score demonstrates a rich and precise vocabulary; a lower score suggests limited vocabulary usage and appropriateness.",
+	};
+
 	return (
-		<>
+		<div className="flex flex-col gap-4 mt-4 w-full">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() =>
+						onBack({
+							exercise: id,
+							solutions: userSolutions,
+							score: {total: 100, missing: 0, correct: speakingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0},
+							type,
+						})
+					}
+					className="max-w-[200px] self-end w-full">
+					Back
+				</Button>
+				<Button
+					color="purple"
+					onClick={() =>
+						onNext({
+							exercise: id,
+							solutions: userSolutions,
+							score: {
+								total: 100,
+								missing: 0,
+								correct: userSolutions[0]?.evaluation ? speakingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0 : 0,
+							},
+							type,
+						})
+					}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
+			<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">
@@ -65,25 +153,56 @@ 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[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]}
-									</div>
-								))}
+								{Object.keys(userSolutions[0].evaluation!.task_response).map((key, index) => {
+									const taskResponse = userSolutions[0].evaluation!.task_response[key];
+									const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
+
+									return (
+										<div
+											className={clsx(
+												"bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2 tooltip tooltip-bottom",
+												index === 0 && "tooltip-right",
+											)}
+											key={key}
+											data-tip={tooltips[key] || "No additional information available"}>
+											{key}: Level {grade}
+										</div>
+									);
+								})}
 							</div>
 							{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",
+												)
+											}>
+											General Feedback
+										</Tab>
 										<Tab
 											className={({selected}) =>
 												clsx(
@@ -108,9 +227,35 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
 										</Tab>
 									</Tab.List>
 									<Tab.Panels>
+										{/* General Feedback */}
+										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<div className="flex flex-col gap-4">
+												{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => {
+													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">
+															<div
+																className={clsx(
+																	"bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2 w-fit",
+																)}
+																key={key}>
+																{key}: Level {grade}
+															</div>
+															{typeof taskResponse !== "number" && (
+																<span className="px-2 py-2">{taskResponse.comment}</span>
+															)}
+														</div>
+													);
+												})}
+											</div>
+										</Tab.Panel>
+										{/* Evaluation */}
 										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
 											<span className="w-full h-full min-h-fit cursor-text">{userSolutions[0].evaluation!.comment}</span>
 										</Tab.Panel>
+										{/* Recommended Answer */}
 										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
 											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
 												{userSolutions[0].evaluation!.perfect_answer &&
@@ -152,7 +297,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,
 						})
 					}
@@ -160,6 +309,6 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

src/components/Solutions/TrueFalse.tsx

@@ -4,10 +4,13 @@ import reactStringReplace from "react-string-replace";
 import {CommonProps} from ".";
 import {Fragment} from "react";
 import Button from "../Low/Button";
+import useExamStore from "@/stores/examStore";
 
 type Solution = "true" | "false" | "not_given";
 
 export default function TrueFalseSolution({prompt, type, id, questions, userSolutions, onNext, onBack}: TrueFalseExercise & CommonProps) {
+	const {questionIndex, setQuestionIndex, partIndex, exam} = useExamStore((state) => state);
+
 	const calculateScore = () => {
 		const total = questions.length || 0;
 		const correct = userSolutions.filter(
@@ -37,8 +40,26 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
 	};
 
 	return (
-		<>
-			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
+		<div className="flex flex-col gap-4 mt-4">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
+					className="max-w-[200px] w-full"
+					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
+					Back
+				</Button>
+
+				<Button
+					color="purple"
+					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
+			<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}>
@@ -121,7 +142,8 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
 					color="purple"
 					variant="outline"
 					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
-					className="max-w-[200px] w-full">
+					className="max-w-[200px] w-full"
+					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
 					Back
 				</Button>
 
@@ -132,6 +154,6 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

src/components/Solutions/WriteBlanks.tsx

@@ -8,6 +8,7 @@ import reactStringReplace from "react-string-replace";
 import {CommonProps} from ".";
 import {toast} from "react-toastify";
 import Button from "../Low/Button";
+import useExamStore from "@/stores/examStore";
 
 function Blank({
 	id,
@@ -49,15 +50,11 @@ function Blank({
 			{userSolution && !isUserSolutionCorrect() && (
 				<div
 					className="py-2 px-3 rounded-2xl w-fit focus:outline-none my-2 bg-mti-rose-ultralight text-mti-rose-light"
-					placeholder={id}
 					contentEditable={disabled}>
 					{userSolution}
 				</div>
 			)}
-			<div
-				className={clsx("py-2 px-3 rounded-2xl w-fit focus:outline-none my-2", getSolutionStyling())}
-				placeholder={id}
-				contentEditable={disabled}>
+			<div className={clsx("py-2 px-3 rounded-2xl w-fit focus:outline-none my-2", getSolutionStyling())} contentEditable={disabled}>
 				{!solutions ? userInput : solutions.join(" / ")}
 			</div>
 		</span>
@@ -75,6 +72,8 @@ export default function WriteBlanksSolutions({
 	onNext,
 	onBack,
 }: WriteBlanksExercise & CommonProps) {
+	const {questionIndex, setQuestionIndex, partIndex, exam} = useExamStore((state) => state);
+
 	const calculateScore = () => {
 		const total = text.match(/({{\d+}})/g)?.length || 0;
 		const correct = userSolutions.filter(
@@ -106,8 +105,26 @@ 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">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
+					className="max-w-[200px] w-full"
+					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
+					Back
+				</Button>
+
+				<Button
+					color="purple"
+					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
+			<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}>
@@ -146,7 +163,8 @@ export default function WriteBlanksSolutions({
 					color="purple"
 					variant="outline"
 					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
-					className="max-w-[200px] w-full">
+					className="max-w-[200px] w-full"
+					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
 					Back
 				</Button>
 
@@ -157,6 +175,6 @@ export default function WriteBlanksSolutions({
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

src/components/Solutions/Writing.tsx

@@ -6,33 +6,65 @@ import Button from "../Low/Button";
 import {Dialog, Tab, Transition} from "@headlessui/react";
 import {writingReverseMarking} from "@/utils/score";
 import clsx from "clsx";
-import reactStringReplace from "react-string-replace";
+import ReactDiffViewer, {DiffMethod} from "react-diff-viewer";
+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 formatSolution = (solution: string, errors: {correction: string | null; misspelled: string}[]) => {
-		const errorRegex = new RegExp(errors.map((x) => `(${x.misspelled})`).join("|"));
+	const {user} = useUser();
 
-		return (
-			<>
-				{reactStringReplace(solution, errorRegex, (match) => {
-					const correction = errors.find((x) => x.misspelled === match)?.correction;
+	const aiEval = userSolutions && userSolutions.length > 0 ? userSolutions[0].evaluation?.ai_detection : undefined;
 
-					return (
-						<span
-							data-tip={correction ? correction : undefined}
-							className={clsx("text-mti-red-light font-medium underline underline-offset-2", correction && "tooltip")}>
-							{match}
-						</span>
-					);
-				})}
-			</>
-		);
+	const tooltips: {[key: string]: string} = {
+		"Lexical Resource":
+			"Assesses the diversity and accuracy of vocabulary used. A higher score indicates varied and precise word choice; a lower score points to limited vocabulary and inaccuracies.",
+		"Task Achievement":
+			"Evaluates how well the task requirements are fulfilled. A higher score means all parts of the task are addressed thoroughly; a lower score shows incomplete or inadequate task response.",
+		"Coherence and Cohesion":
+			"Measures logical organization and flow of writing. A higher score reflects well-structured and connected ideas; a lower score indicates disorganized writing and poor linkage between ideas.",
+		"Grammatical Range and Accuracy":
+			"Looks at the range and precision of grammatical structures. A higher score shows varied and accurate grammar use; a lower score suggests frequent errors and limited range.",
 	};
 
 	return (
-		<>
+		<div className="flex flex-col gap-4 mt-4">
+			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() =>
+						onBack({
+							exercise: id,
+							solutions: userSolutions,
+							score: {total: 100, missing: 0, correct: writingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0},
+							type,
+						})
+					}
+					className="max-w-[200px] self-end w-full">
+					Back
+				</Button>
+				<Button
+					color="purple"
+					onClick={() =>
+						onNext({
+							exercise: id,
+							solutions: userSolutions,
+							score: {
+								total: 100,
+								missing: 0,
+								correct: userSolutions[0]?.evaluation ? writingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0 : 0,
+							},
+							type,
+						})
+					}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
 			{attachment && (
 				<Transition show={isModalOpen} as={Fragment}>
 					<Dialog onClose={() => setIsModalOpen(false)} className="relative z-50">
@@ -86,30 +118,87 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 
 				<div className="w-full h-full flex flex-col gap-8">
 					{userSolutions && userSolutions.length > 0 && (
-						<div className="flex flex-col gap-4 w-full">
-							<span>Your answer:</span>
-							<div className="w-full h-full min-h-[320px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl whitespace-pre-wrap">
-								{userSolutions[0]!.evaluation && userSolutions[0]!.evaluation.misspelled_pairs
-									? formatSolution(
-											userSolutions[0]!.solution.replaceAll("\\n", "\n"),
-											userSolutions[0]!.evaluation.misspelled_pairs,
-									  )
-									: userSolutions[0]!.solution.replaceAll("\\n", "\n")}
-							</div>
+						<div className="flex flex-col gap-4 w-full relative">
+							{!showDiff && (
+								<>
+									<span>Your answer:</span>
+									<div className="w-full h-full min-h-[320px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl whitespace-pre-wrap">
+										{userSolutions[0]!.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[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]}
-									</div>
-								))}
+								{Object.keys(userSolutions[0].evaluation!.task_response).map((key, index) => {
+									const taskResponse = userSolutions[0].evaluation!.task_response[key];
+									const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
+
+									return (
+										<div
+											className={clsx(
+												"bg-ielts-writing text-ielts-writing-light rounded-xl px-4 py-2 tooltip tooltip-bottom",
+												index === 0 && "tooltip-right",
+											)}
+											key={key}
+											data-tip={tooltips[key] || "No additional information available"}>
+											{key}: Level {grade}
+										</div>
+									);
+								})}
 							</div>
 							{userSolutions[0].evaluation && userSolutions[0].evaluation.perfect_answer ? (
 								<Tab.Group>
 									<Tab.List className="flex space-x-1 rounded-xl bg-ielts-writing/20 p-1">
+										<Tab
+											className={({selected}) =>
+												clsx(
+													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/80",
+													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing focus:outline-none focus:ring-2",
+													"transition duration-300 ease-in-out",
+													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-writing",
+												)
+											}>
+											General Feedback
+										</Tab>
 										<Tab
 											className={({selected}) =>
 												clsx(
@@ -132,16 +221,60 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 											}>
 											Recommended Answer
 										</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>
+										{/* Global */}
+										<Tab.Panel className="w-full bg-ielts-writing/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+											<div className="flex flex-col gap-4">
+												{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => {
+													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">
+															<div
+																className={clsx(
+																	"bg-ielts-writing text-ielts-writing-light rounded-xl px-4 py-2 w-fit",
+																)}
+																key={key}>
+																{key}: Level {grade}
+															</div>
+															{typeof taskResponse !== "number" && (
+																<span className="px-2 py-2">{taskResponse.comment}</span>
+															)}
+														</div>
+													);
+												})}
+											</div>
+										</Tab.Panel>
+										{/* Evaluation */}
 										<Tab.Panel className="w-full bg-ielts-writing/10 h-fit rounded-xl p-6 flex flex-col gap-4">
 											<span className="w-full h-full min-h-fit cursor-text">{userSolutions[0].evaluation!.comment}</span>
 										</Tab.Panel>
+										{/* Recommended Answer */}
 										<Tab.Panel className="w-full bg-ielts-writing/10 h-fit rounded-xl p-6 flex flex-col gap-4">
 											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
 												{userSolutions[0].evaluation!.perfect_answer.replaceAll(/\s{2,}/g, "\n\n").replaceAll("\\n", "\n")}
 											</span>
 										</Tab.Panel>
+										{aiEval && user?.type !== "student" && (
+											<Tab.Panel className="w-full bg-ielts-writing/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+												<AIDetection {...aiEval} />
+											</Tab.Panel>
+										)}
 									</Tab.Panels>
 								</Tab.Group>
 							) : (
@@ -175,7 +308,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,
 						})
 					}
@@ -183,6 +320,6 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

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/TrainingContent/Exercise.tsx

@@ -0,0 +1,91 @@
+import React, { useState, useCallback } from "react";
+import ExerciseWalkthrough from "@/training/ExerciseWalkthrough";
+import { ITrainingTip, WalkthroughConfigs } from "./TrainingInterfaces";
+
+
+// This wrapper is just to test new exercises from the handbook, will be removed when all the tips and exercises are in firestore
+const TrainingExercise: React.FC<ITrainingTip> = (trainingTip: ITrainingTip) => {
+  const leftText = "<div class=\"container mx-auto px-4 overflow-x-auto\"><table class=\"min-w-full bg-white border border-gray-300\"><thead><tr class=\"bg-gray-100\"><th class=\"py-2 px-4 border-b font-semibold text-left\">Category</th><th class=\"py-2 px-4 border-b font-semibold text-left\">Option A</th><th class=\"py-2 px-4 border-b font-semibold text-left\">Option B</th></tr></thead><tbody><tr><td class=\"py-2 px-4 border-b font-medium\">Self</td><td class=\"py-2 px-4 border-b\">You need to take care of yourself and connect with the people around you.</td><td class=\"py-2 px-4 border-b\">Focus on your interests and talents and meet people who are like you.</td></tr><tr class=\"bg-gray-50\"><td class=\"py-2 px-4 border-b font-medium\">Home</td><td class=\"py-2 px-4 border-b\">It's a good idea to paint your living room yellow.</td><td class=\"py-2 px-4 border-b\">You should arrange your home so that it makes you feel happy.</td></tr><tr><td class=\"py-2 px-4 border-b font-medium\">Financial Life</td><td class=\"py-2 px-4 border-b\">You can be happy if you have enough money, but don't want money too much.</td><td class=\"py-2 px-4 border-b\">If you waste money on things you don't need, you won't have enough money for things that you do need.</td></tr><tr class=\"bg-gray-50\"><td class=\"py-2 px-4 border-b font-medium\">Social Life</td><td class=\"py-2 px-4 border-b\">A good group of friends can increase your happiness.</td><td class=\"py-2 px-4 border-b\">Researchers say that a happy friend can increase our mood by nine percent.</td></tr><tr><td class=\"py-2 px-4 border-b font-medium\">Workplace</td><td class=\"py-2 px-4 border-b\">You spend a lot of time at work, so you should like your workplace.</td><td class=\"py-2 px-4 border-b\">Your boss needs to be someone you enjoy working for.</td></tr><tr class=\"bg-gray-50\"><td class=\"py-2 px-4 border-b font-medium\">Community</td><td class=\"py-2 px-4 border-b\">The place where you live is more important for happiness than anything else.</td><td class=\"py-2 px-4 border-b\">Live around people who have the same amount of money as you do.</td></tr></tbody></table></div>";
+  const tip = {
+    category: "Strategy",
+    body: "<p>Look for <b>clues to the main idea</b> in the first (and sometimes second) sentence of a paragraph.</p>"
+  }
+  const question = "<div class=\"container mx-auto px-4 py-8\"><h2 class=\"text-2xl font-bold mb-4\">Identifying Main Ideas</h2><p class=\"text-lg leading-relaxed mb-6\">Read the statements below. Circle the main idea in each pair of statements (a or b).</p></div>";
+  const rightTextData: WalkthroughConfigs[] = [
+    {
+      "html": "<div class='bg-blue-100 p-4 rounded-lg mb-4'><h2 class='text-xl font-bold mb-2'>Identifying Main Ideas</h2><p class='text-gray-700 leading-relaxed'>Let's analyze each pair of statements to determine which one represents the main idea. We'll focus on which statement is more general and encompasses the overall concept.</p></div>",
+      "wordDelay": 200,
+      "holdDelay": 5000,
+      "highlight": []
+    },
+    {
+      "html": "<div class='bg-green-50 p-4 rounded-lg mb-4'><h3 class='text-lg font-semibold mb-2'>1. Self</h3><p class='text-gray-700 leading-relaxed'>Main idea: <b>A. You need to take care of yourself and connect with the people around you.</b></p><p class='mt-2'>This statement is more comprehensive, covering both self-care and social connections. Option B is more specific and could be considered a subset of A.</p></div>",
+      "wordDelay": 200,
+      "holdDelay": 8000,
+      "highlight": ["You need to take care of yourself and connect with the people around you."]
+    },
+    {
+      "html": "<div class='bg-yellow-50 p-4 rounded-lg mb-4'><h3 class='text-lg font-semibold mb-2'>2. Home</h3><p class='text-gray-700 leading-relaxed'>Main idea: <b>B. You should arrange your home so that it makes you feel happy.</b></p><p class='mt-2'>This statement is more general and applies to the entire home. Option A is a specific example that could fall under this broader concept.</p></div>",
+      "wordDelay": 200,
+      "holdDelay": 8000,
+      "highlight": ["You should arrange your home so that it makes you feel happy."]
+    },
+    {
+      "html": "<div class='bg-pink-50 p-4 rounded-lg mb-4'><h3 class='text-lg font-semibold mb-2'>3. Financial Life</h3><p class='text-gray-700 leading-relaxed'>Main idea: <b>A. You can be happy if you have enough money, but don't want money too much.</b></p><p class='mt-2'>This statement provides a balanced view of money's role in happiness. Option B is more specific and could be seen as a consequence of wanting money too much.</p></div>",
+      "wordDelay": 200,
+      "holdDelay": 8000,
+      "highlight": ["You can be happy if you have enough money, but don't want money too much."]
+    },
+    {
+      "html": "<div class='bg-purple-50 p-4 rounded-lg mb-4'><h3 class='text-lg font-semibold mb-2'>4. Social Life</h3><p class='text-gray-700 leading-relaxed'>Main idea: <b>A. A good group of friends can increase your happiness.</b></p><p class='mt-2'>This statement is more general about the impact of friendships. Option B provides a specific statistic that supports this main idea.</p></div>",
+      "wordDelay": 200,
+      "holdDelay": 8000,
+      "highlight": ["A good group of friends can increase your happiness."]
+    },
+    {
+      "html": "<div class='bg-indigo-50 p-4 rounded-lg mb-4'><h3 class='text-lg font-semibold mb-2'>5. Workplace</h3><p class='text-gray-700 leading-relaxed'>Main idea: <b>A. You spend a lot of time at work, so you should like your workplace.</b></p><p class='mt-2'>This statement covers the overall importance of workplace satisfaction. Option B focuses on one specific aspect (the boss) and is less comprehensive.</p></div>",
+      "wordDelay": 200,
+      "holdDelay": 8000,
+      "highlight": ["You spend a lot of time at work, so you should like your workplace."]
+    },
+    {
+      "html": "<div class='bg-red-50 p-4 rounded-lg mb-4'><h3 class='text-lg font-semibold mb-2'>6. Community</h3><p class='text-gray-700 leading-relaxed'>Main idea: <b>A. The place where you live is more important for happiness than anything else.</b></p><p class='mt-2'>While this statement might be debatable, it's more general and encompasses the overall importance of community. Option B is a specific suggestion about community demographics.</p></div>",
+      "wordDelay": 200,
+      "holdDelay": 8000,
+      "highlight": ["The place where you live is more important for happiness than anything else."]
+    },
+    {
+      "html": "<div class='bg-orange-50 p-4 rounded-lg mb-4'><h3 class='text-lg font-semibold mb-2'>Key Strategy</h3><p class='text-gray-700 leading-relaxed'>When identifying main ideas:</p><ul class='list-disc pl-5 space-y-2'><li>Look for broader, more encompassing statements</li><li>Consider which statement other ideas could fall under</li><li>Identify which statement provides a general principle rather than a specific example</li></ul></div>",
+      "wordDelay": 200,
+      "holdDelay": 8000,
+      "highlight": []
+    },
+    {
+      "html": "<div class='bg-teal-50 p-4 rounded-lg'><h3 class='text-lg font-semibold mb-2'>Helpful Tip</h3><p class='text-gray-700 leading-relaxed'>Remember to look for clues to the main idea in the first (and sometimes second) sentence of a paragraph. In this exercise, we applied this concept to pairs of statements. This approach can help you quickly identify the central theme or main point in various types of text.</p></div>",
+      "wordDelay": 200,
+      "holdDelay": 5000,
+      "highlight": []
+    }
+  ]
+
+  const mockTip: ITrainingTip = {
+      id: "some random id",
+      tipCategory: tip.category,
+      tipHtml: tip.body,
+      standalone: false,
+      exercise: {
+        question: question,
+        highlightable: leftText,
+        segments: rightTextData
+      }
+  }
+
+  return (
+    <div className="flex flex-col p-10">
+      <ExerciseWalkthrough {...trainingTip}
+      />
+    </div>
+  );
+}
+
+export default TrainingExercise;

src/components/TrainingContent/ExerciseWalkthrough.tsx

@@ -0,0 +1,280 @@
+import React, {useState, useEffect, useRef, useCallback} from "react";
+import {animated} from "@react-spring/web";
+import {FaRegCirclePlay, FaRegCircleStop} from "react-icons/fa6";
+import HighlightContent from "../HighlightContent";
+import {ITrainingTip, SegmentRef, TimelineEvent} from "./TrainingInterfaces";
+
+const ExerciseWalkthrough: React.FC<ITrainingTip> = (tip: ITrainingTip) => {
+	const [isAutoPlaying, setIsAutoPlaying] = useState<boolean>(false);
+	const [currentTime, setCurrentTime] = useState<number>(0);
+	const [walkthroughHtml, setWalkthroughHtml] = useState<string>("");
+	const [highlightedPhrases, setHighlightedPhrases] = useState<string[]>([]);
+	const [isPlaying, setIsPlaying] = useState<boolean>(false);
+	const timelineRef = useRef<TimelineEvent[]>([]);
+	const animationRef = useRef<number | null>(null);
+	const segmentsRef = useRef<SegmentRef[]>([]);
+
+	const toggleAutoPlay = useCallback(() => {
+		setIsAutoPlaying((prev) => {
+			if (!prev && currentTime === getMaxTime()) {
+				setCurrentTime(0);
+			}
+			return !prev;
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [currentTime]);
+
+	const handleAnimationComplete = useCallback(() => {
+		setIsAutoPlaying(false);
+	}, []);
+
+	const handleResetAnimation = useCallback((newTime: number) => {
+		setCurrentTime(newTime);
+	}, []);
+
+	const getMaxTime = (): number => {
+		return (
+			tip.exercise?.segments.reduce((sum, segment) => sum + segment.wordDelay * segment.html.split(/\s+/).length + segment.holdDelay, 0) ?? 0
+		);
+	};
+
+	useEffect(() => {
+		const timeline: TimelineEvent[] = [];
+		let currentTimePosition = 0;
+		segmentsRef.current = [];
+
+		tip.exercise?.segments.forEach((segment, index) => {
+			const parser = new DOMParser();
+			const doc = parser.parseFromString(segment.html, "text/html");
+			const words: string[] = [];
+			const walkTree = (node: Node) => {
+				if (node.nodeType === Node.TEXT_NODE) {
+					words.push(...(node.textContent?.split(/\s+/).filter((word) => word.length > 0) || []));
+				} else if (node.nodeType === Node.ELEMENT_NODE) {
+					Array.from(node.childNodes).forEach(walkTree);
+				}
+			};
+			walkTree(doc.body);
+
+			const textDuration = words.length * segment.wordDelay;
+
+			segmentsRef.current.push({
+				...segment,
+				words: words,
+				startTime: currentTimePosition,
+				endTime: currentTimePosition + textDuration,
+			});
+
+			timeline.push({
+				type: "text",
+				start: currentTimePosition,
+				end: currentTimePosition + textDuration,
+				segmentIndex: index,
+			});
+
+			currentTimePosition += textDuration;
+
+			timeline.push({
+				type: "highlight",
+				start: currentTimePosition,
+				end: currentTimePosition + segment.holdDelay,
+				content: segment.highlight,
+				segmentIndex: index,
+			});
+
+			currentTimePosition += segment.holdDelay;
+		});
+
+		timelineRef.current = timeline;
+	}, [tip.exercise?.segments]);
+
+	const updateText = useCallback(() => {
+		const currentEvent = timelineRef.current.find((event) => currentTime >= event.start && currentTime < event.end);
+
+		if (currentEvent) {
+			if (currentEvent.type === "text") {
+				const segment = segmentsRef.current[currentEvent.segmentIndex];
+				const elapsedTime = currentTime - currentEvent.start;
+				const wordsToShow = Math.min(Math.floor(elapsedTime / segment.wordDelay), segment.words.length);
+
+				const previousSegmentsHtml = segmentsRef.current
+					.slice(0, currentEvent.segmentIndex)
+					.map((seg) => seg.html)
+					.join("");
+
+				const parser = new DOMParser();
+				const doc = parser.parseFromString(segment.html, "text/html");
+				let wordCount = 0;
+				const walkTree = (node: Node, action: (node: Node) => void): boolean => {
+					if (node.nodeType === Node.TEXT_NODE && node.textContent) {
+						const words = node.textContent.split(/(\s+)/).filter((word) => word.length > 0);
+						if (wordCount + words.filter((w) => !/\s+/.test(w)).length <= wordsToShow) {
+							action(node.cloneNode(true));
+							wordCount += words.filter((w) => !/\s+/.test(w)).length;
+						} else {
+							const remainingWords = wordsToShow - wordCount;
+							const newTextContent = words.reduce(
+								(acc, word) => {
+									if (!/\s+/.test(word) && acc.nonSpaceWords < remainingWords) {
+										acc.text += word;
+										acc.nonSpaceWords++;
+									} else if (/\s+/.test(word) || acc.nonSpaceWords < remainingWords) {
+										acc.text += word;
+									}
+									return acc;
+								},
+								{text: "", nonSpaceWords: 0},
+							).text;
+							const newNode = node.cloneNode(false);
+							newNode.textContent = newTextContent;
+							action(newNode);
+							wordCount = wordsToShow;
+						}
+					} else if (node.nodeType === Node.ELEMENT_NODE) {
+						const clone = node.cloneNode(false);
+						action(clone);
+						Array.from(node.childNodes).some((child) => {
+							return walkTree(child, (childNode) => (clone as Node).appendChild(childNode));
+						});
+					}
+					return wordCount >= wordsToShow;
+				};
+				const fragment = document.createDocumentFragment();
+				walkTree(doc.body, (node) => fragment.appendChild(node));
+
+				const serializer = new XMLSerializer();
+				const currentSegmentHtml = Array.from(fragment.childNodes)
+					.map((node) => serializer.serializeToString(node))
+					.join("");
+				const newHtml = previousSegmentsHtml + currentSegmentHtml;
+
+				setWalkthroughHtml(newHtml);
+				setHighlightedPhrases([]);
+			} else if (currentEvent.type === "highlight") {
+				const newHtml = segmentsRef.current
+					.slice(0, currentEvent.segmentIndex + 1)
+					.map((seg) => seg.html)
+					.join("");
+				setWalkthroughHtml(newHtml);
+				setHighlightedPhrases(currentEvent.content || []);
+			}
+		}
+	}, [currentTime]);
+
+	useEffect(() => {
+		updateText();
+	}, [currentTime, updateText]);
+
+	useEffect(() => {
+		if (isAutoPlaying) {
+			const lastEvent = timelineRef.current[timelineRef.current.length - 1];
+			if (lastEvent && currentTime >= lastEvent.end) {
+				setCurrentTime(0);
+			}
+			setIsPlaying(true);
+		} else {
+			setIsPlaying(false);
+		}
+	}, [isAutoPlaying, currentTime]);
+
+	useEffect(() => {
+		const animate = () => {
+			if (isPlaying) {
+				setCurrentTime((prevTime) => {
+					const newTime = prevTime + 50;
+					const lastEvent = timelineRef.current[timelineRef.current.length - 1];
+					if (lastEvent && newTime >= lastEvent.end) {
+						setIsPlaying(false);
+						handleAnimationComplete();
+						return lastEvent.end;
+					}
+					return newTime;
+				});
+			}
+			animationRef.current = requestAnimationFrame(animate);
+		};
+
+		animationRef.current = requestAnimationFrame(animate);
+
+		return () => {
+			if (animationRef.current) {
+				cancelAnimationFrame(animationRef.current);
+			}
+		};
+	}, [isPlaying, handleAnimationComplete]);
+
+	const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const newTime = parseInt(e.target.value, 10);
+		setCurrentTime(newTime);
+		handleResetAnimation(newTime);
+	};
+
+	const handleSliderMouseDown = () => {
+		setIsPlaying(false);
+	};
+
+	const handleSliderMouseUp = () => {
+		if (isAutoPlaying) {
+			setIsPlaying(true);
+		}
+	};
+
+	if (tip.standalone || !tip.exercise) {
+		return (
+			<div className="container mx-auto">
+				<h1 className="text-xl font-bold text-red-600">The exercise for this tip is not available yet!</h1>
+				<div className="tip-container bg-blue-100 p-4 rounded-lg shadow-md mb-4 mt-10">
+					<h3 className="text-xl font-semibold text-blue-800 mb-2">{tip.tipCategory}</h3>
+					<div className="text-gray-700" dangerouslySetInnerHTML={{__html: tip.tipHtml}} />
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="container mx-auto">
+			<div className="tip-container bg-blue-100 p-4 rounded-lg shadow-md mb-4">
+				<h3 className="text-xl font-semibold text-blue-800 mb-2">{tip.tipCategory}</h3>
+				<div className="text-gray-700" dangerouslySetInnerHTML={{__html: tip.tipHtml}} />
+			</div>
+			<div className="flex flex-col space-y-4">
+				<div className="flex flex-row items-center space-x-4 py-4">
+					<button
+						onClick={toggleAutoPlay}
+						className="p-2 bg-blue-500 text-white rounded-full transition-colors duration-200 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
+						aria-label={isAutoPlaying ? "Pause" : "Play"}>
+						{isAutoPlaying ? <FaRegCircleStop className="w-6 h-6" /> : <FaRegCirclePlay className="w-6 h-6" />}
+					</button>
+					<input
+						type="range"
+						min="0"
+						max={timelineRef.current.length > 0 ? timelineRef.current[timelineRef.current.length - 1].end : 0}
+						value={currentTime}
+						onChange={handleSliderChange}
+						onMouseDown={handleSliderMouseDown}
+						onMouseUp={handleSliderMouseUp}
+						onTouchStart={handleSliderMouseDown}
+						onTouchEnd={handleSliderMouseUp}
+						className="flex-grow"
+					/>
+				</div>
+				<div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
+					<div className="flex-1 bg-white p-6 rounded-lg shadow">
+						{/*<h2 className="text-xl font-bold mb-4">Question</h2>*/}
+						<div className="mb-4" dangerouslySetInnerHTML={{__html: tip.exercise.question}} />
+						<HighlightContent html={tip.exercise.highlightable} highlightPhrases={highlightedPhrases} />
+					</div>
+					<div className="flex-1">
+						<div className="bg-gray-50 rounded-lg shadow">
+							<div className="p-6 space-y-4">
+								<animated.div dangerouslySetInnerHTML={{__html: walkthroughHtml}} />
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default ExerciseWalkthrough;

src/components/TrainingContent/TrainingInterfaces.ts

@@ -0,0 +1,57 @@
+import { Stat } from "@/interfaces/user";
+
+export interface ITrainingContent {
+    id: string;
+    created_at: number;
+    user: string;
+    exams: {
+        id: string;
+        date: number;
+        detailed_summary: string;
+        performance_comment: string;
+        score: number;
+        module: string;
+        stat_ids: string[];
+        stats?: Stat[];
+    }[];
+    tip_ids: string[];
+    tips?: ITrainingTip[];
+    weak_areas: {
+        area: string;
+        comment: string;
+    }[];
+}
+
+export interface ITrainingTip {
+    id: string;
+    tipCategory: string;
+    tipHtml: string;
+    standalone: boolean;
+    exercise?: {
+        question: string;
+        highlightable: string;
+        segments: WalkthroughConfigs[]
+    }
+}
+
+export interface WalkthroughConfigs {
+    html: string;
+    wordDelay: number;
+    holdDelay: number;
+    highlight: string[];
+}
+
+
+export interface TimelineEvent {
+    type: 'text' | 'highlight';
+    start: number;
+    end: number;
+    segmentIndex: number;
+    content?: string[];
+}
+
+export interface SegmentRef extends WalkthroughConfigs {
+    words: string[];
+    startTime: number;
+    endTime: number;
+}

src/components/TrainingContent/TrainingScore.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { RiArrowRightUpLine, RiArrowLeftDownLine } from 'react-icons/ri';
+import { FaChartLine } from 'react-icons/fa';
+import { GiLightBulb } from 'react-icons/gi';
+import clsx from 'clsx';
+import { ITrainingContent } from './TrainingInterfaces';
+
+interface TrainingScoreProps {
+    trainingContent: ITrainingContent
+    gridView: boolean;
+}
+
+const TrainingScore: React.FC<TrainingScoreProps> = ({
+    trainingContent,
+    gridView
+}) => {
+    const scores = trainingContent.exams.map(exam => exam.score);
+    const highestScore = Math.max(...scores);
+    const lowestScore = Math.min(...scores);
+    let averageScore = scores.length > 0
+        ? scores.reduce((sum, score) => sum + score, 0) / scores.length
+        : 0;
+    averageScore = Math.round(averageScore);
+
+    const containerClasses = clsx(
+        "flex flex-row mb-4",
+        gridView ? "gap-4 justify-between" : "gap-8"
+    );
+
+    const columnClasses = clsx(
+        "flex flex-col",
+        gridView ? "gap-4" : "gap-8"
+    ); 
+
+    return (
+        <div className={containerClasses}>
+            <div className={columnClasses}>
+                <div className="flex flex-row items-center gap-4">
+                    <div className="flex w-14 h-14 bg-[#F5F5F5] items-center justify-center rounded-xl border border-[#DBDBDB]">
+                        <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M11.7083 3.16669C11.4166 3.16669 11.1701 3.06599 10.9687 2.8646C10.7673 2.66321 10.6666 2.41669 10.6666 2.12502C10.6666 1.83335 10.7673 1.58683 10.9687 1.38544C11.1701 1.18405 11.4166 1.08335 11.7083 1.08335C12 1.08335 12.2465 1.18405 12.4479 1.38544C12.6493 1.58683 12.75 1.83335 12.75 2.12502C12.75 2.41669 12.6493 2.66321 12.4479 2.8646C12.2465 3.06599 12 3.16669 11.7083 3.16669ZM11.7083 16.9167C11.4166 16.9167 11.1701 16.816 10.9687 16.6146C10.7673 16.4132 10.6666 16.1667 10.6666 15.875C10.6666 15.5834 10.7673 15.3368 10.9687 15.1354C11.1701 14.934 11.4166 14.8334 11.7083 14.8334C12 14.8334 12.2465 14.934 12.4479 15.1354C12.6493 15.3368 12.75 15.5834 12.75 15.875C12.75 16.1667 12.6493 16.4132 12.4479 16.6146C12.2465 16.816 12 16.9167 11.7083 16.9167ZM15.0416 6.08335C14.75 6.08335 14.5034 5.98266 14.302 5.78127C14.1007 5.57988 14 5.33335 14 5.04169C14 4.75002 14.1007 4.50349 14.302 4.3021C14.5034 4.10071 14.75 4.00002 15.0416 4.00002C15.3333 4.00002 15.5798 4.10071 15.7812 4.3021C15.9826 4.50349 16.0833 4.75002 16.0833 5.04169C16.0833 5.33335 15.9826 5.57988 15.7812 5.78127C15.5798 5.98266 15.3333 6.08335 15.0416 6.08335ZM15.0416 14C14.75 14 14.5034 13.8993 14.302 13.6979C14.1007 13.4965 14 13.25 14 12.9584C14 12.6667 14.1007 12.4202 14.302 12.2188C14.5034 12.0174 14.75 11.9167 15.0416 11.9167C15.3333 11.9167 15.5798 12.0174 15.7812 12.2188C15.9826 12.4202 16.0833 12.6667 16.0833 12.9584C16.0833 13.25 15.9826 13.4965 15.7812 13.6979C15.5798 13.8993 15.3333 14 15.0416 14ZM16.2916 10.0417C16 10.0417 15.7534 9.94099 15.552 9.7396C15.3507 9.53821 15.25 9.29169 15.25 9.00002C15.25 8.70835 15.3507 8.46183 15.552 8.26044C15.7534 8.05905 16 7.95835 16.2916 7.95835C16.5833 7.95835 16.8298 8.05905 17.0312 8.26044C17.2326 8.46183 17.3333 8.70835 17.3333 9.00002C17.3333 9.29169 17.2326 9.53821 17.0312 9.7396C16.8298 9.94099 16.5833 10.0417 16.2916 10.0417ZM8.99996 17.3334C7.84718 17.3334 6.76385 17.1146 5.74996 16.6771C4.73607 16.2396 3.85413 15.6459 3.10413 14.8959C2.35413 14.1459 1.76038 13.2639 1.32288 12.25C0.885376 11.2361 0.666626 10.1528 0.666626 9.00002C0.666626 7.84724 0.885376 6.76391 1.32288 5.75002C1.76038 4.73613 2.35413 3.85419 3.10413 3.10419C3.85413 2.35419 4.73607 1.76044 5.74996 1.32294C6.76385 0.885437 7.84718 0.666687 8.99996 0.666687V2.33335C7.13885 2.33335 5.56246 2.97919 4.27079 4.27085C2.97913 5.56252 2.33329 7.13891 2.33329 9.00002C2.33329 10.8611 2.97913 12.4375 4.27079 13.7292C5.56246 15.0209 7.13885 15.6667 8.99996 15.6667V17.3334ZM8.99996 10.6667C8.54163 10.6667 8.14927 10.5035 7.82288 10.1771C7.49649 9.85071 7.33329 9.45835 7.33329 9.00002C7.33329 8.93058 7.33676 8.85766 7.34371 8.78127C7.35065 8.70488 7.36801 8.63196 7.39579 8.56252L5.66663 6.83335L6.83329 5.66669L8.56246 7.39585C8.61801 7.38196 8.76385 7.36113 8.99996 7.33335C9.45829 7.33335 9.85065 7.49655 10.177 7.82294C10.5034 8.14933 10.6666 8.54169 10.6666 9.00002C10.6666 9.45835 10.5034 9.85071 10.177 10.1771C9.85065 10.5035 9.45829 10.6667 8.99996 10.6667Z" fill="#40A1EA" />
+                        </svg>
+                    </div>
+                    <div className="flex flex-col">
+                        <p className="font-bold">{trainingContent.exams.length}</p>
+                        <p>Exams Selected</p>
+                    </div>
+                </div>
+                <div className="flex flex-row items-center gap-4">
+                    <div className="flex w-14 h-14 bg-[#F5F5F5] items-center justify-center rounded-xl border border-[#DBDBDB]">
+                        <RiArrowRightUpLine color={"#22E1B3"} size={gridView ? 28 : 26} />
+                    </div>
+                    <div className="flex flex-col">
+                        <p className="font-bold">{highestScore}%</p>
+                        <p>Highest Score</p>
+                    </div>
+                </div>
+            </div>
+            <div className={columnClasses}>
+                <div className="flex flex-row items-center gap-4">
+                    <div className="flex w-14 h-14 bg-[#F5F5F5] items-center justify-center rounded-xl border border-[#DBDBDB]">
+                        <FaChartLine color={"#40A1EA"} size={gridView ? 24 : 26} />
+                    </div>
+                    <div className="flex flex-col">
+                        <p className="font-bold">{averageScore}%</p>
+                        <p>Average Score</p>
+                    </div>
+                </div>
+                <div className="flex flex-row items-center gap-4">
+                    <div className="flex w-14 h-14 bg-[#F5F5F5] items-center justify-center rounded-xl border border-[#DBDBDB]">
+                        <RiArrowLeftDownLine color={"#E13922"} size={gridView ? 28 : 26} />
+                    </div>
+                    <div className="flex flex-col">
+                        <p className="font-bold">{lowestScore}%</p>
+                        <p>Lowest Score</p>
+                    </div>
+                </div>
+            </div>
+            {gridView && (
+                <div className="flex flex-col items-center justify-center gap-2 -lg:hidden">
+                    <div className="flex w-14 h-14 bg-[#F5F5F5] items-center justify-center rounded-xl border border-[#DBDBDB]">
+                        <GiLightBulb color={"#FFCC00"} size={28} />
+                    </div>
+                    <p><span className="font-bold">{trainingContent.tip_ids.length}</span> Tips</p>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default TrainingScore;

src/components/UserCard.tsx

@@ -1,5 +1,5 @@
-import useStats from "@/hooks/useStats";
-import {EMPLOYMENT_STATUS, User} from "@/interfaces/user";
+import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
+import {CorporateInformation, CorporateUser, EMPLOYMENT_STATUS, User, Type, Stat, Gender} from "@/interfaces/user";
 import {groupBySession, averageScore} from "@/utils/stats";
 import {RadioGroup} from "@headlessui/react";
 import axios from "axios";
@@ -8,7 +8,7 @@ import moment from "moment";
 import {Divider} from "primereact/divider";
 import {useEffect, useState} from "react";
 import ReactDatePicker from "react-datepicker";
-import {BsFileEarmarkText, BsPencil, BsStar} from "react-icons/bs";
+import {BsFileEarmarkText, BsPencil, BsPerson, BsPersonAdd, BsStar} from "react-icons/bs";
 import {toast} from "react-toastify";
 import Button from "./Low/Button";
 import Checkbox from "./Low/Checkbox";
@@ -19,6 +19,11 @@ 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";
+import usePermissions from "@/hooks/usePermissions";
 
 const expirationDateColor = (date: Date) => {
 	const momentDate = moment(date);
@@ -36,7 +41,11 @@ interface Props {
 	onViewStudents?: () => void;
 	onViewTeachers?: () => void;
 	onViewCorporate?: () => void;
+	maxUserAmount?: number;
 	disabled?: boolean;
+	disabledFields?: {
+		countryManager?: boolean;
+	};
 }
 
 const USER_STATUS_OPTIONS = [
@@ -59,34 +68,67 @@ const USER_TYPE_OPTIONS = Object.keys(USER_TYPE_LABELS).map((type) => ({
 	label: USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS],
 }));
 
-const CURRENCIES_OPTIONS = CURRENCIES.map(({label, currency}) => ({value: currency, label}));
+const CURRENCIES_OPTIONS = CURRENCIES.map(({label, currency}) => ({
+	value: currency,
+	label,
+}));
 
-const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers, onViewCorporate, disabled = false}: Props) => {
+const UserCard = ({
+	user,
+	loggedInUser,
+	maxUserAmount,
+	onClose,
+	onViewStudents,
+	onViewTeachers,
+	onViewCorporate,
+	disabled = false,
+	disabledFields = {},
+}: Props) => {
 	const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
 	const [type, setType] = useState(user.type);
 	const [status, setStatus] = useState(user.status);
 	const [referralAgentLabel, setReferralAgentLabel] = useState<string>();
-	const [position, setPosition] = useState<string | undefined>(user.type === "corporate" ? user.demographicInformation?.position : undefined);
-	const [passport_id, setPassportID] = useState<string | undefined>(user.type === "student" ? user.demographicInformation?.passport_id : undefined);
+	const [position, setPosition] = useState<string | undefined>(
+		user.type === "corporate" || user.type === "mastercorporate" ? user.demographicInformation?.position : undefined,
+	);
+	const [studentID, setStudentID] = useState<string | undefined>(user.type === "student" ? user.studentID : undefined);
+	const [name, setName] = useState<string>(user.name);
+	const [phone, setPhone] = useState<string | undefined>(user.demographicInformation?.phone);
+	const [gender, setGender] = useState<Gender | undefined>(user.demographicInformation?.gender);
 
-	const [referralAgent, setReferralAgent] = useState(user.type === "corporate" ? user.corporateInformation?.referralAgent : undefined);
+	const [referralAgent, setReferralAgent] = useState(
+		user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.referralAgent : undefined,
+	);
 	const [companyName, setCompanyName] = useState(
-		user.type === "corporate"
+		user.type === "corporate" || user.type === "mastercorporate"
 			? user.corporateInformation?.companyInformation.name
 			: user.type === "agent"
 			? user.agentInformation?.companyName
 			: undefined,
 	);
+	const [arabName, setArabName] = useState(user.type === "agent" ? user.agentInformation?.companyArabName : undefined);
 	const [commercialRegistration, setCommercialRegistration] = useState(
 		user.type === "agent" ? user.agentInformation?.commercialRegistration : undefined,
 	);
-	const [userAmount, setUserAmount] = useState(user.type === "corporate" ? user.corporateInformation?.companyInformation.userAmount : undefined);
-	const [paymentValue, setPaymentValue] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.value : undefined);
-	const [paymentCurrency, setPaymentCurrency] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.currency : "EUR");
-	const [monthlyDuration, setMonthlyDuration] = useState(user.type === "corporate" ? user.corporateInformation?.monthlyDuration : undefined);
-	const [commissionValue, setCommission] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.commission : undefined);
-	const {stats} = useStats(user.id);
+	const [userAmount, setUserAmount] = useState(
+		user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.companyInformation.userAmount : undefined,
+	);
+	const [paymentValue, setPaymentValue] = useState(
+		user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.payment?.value : undefined,
+	);
+	const [paymentCurrency, setPaymentCurrency] = useState(
+		user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.payment?.currency : "EUR",
+	);
+	const [monthlyDuration, setMonthlyDuration] = useState(
+		user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.monthlyDuration : undefined,
+	);
+	const [commissionValue, setCommission] = useState(
+		user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.payment?.commission : undefined,
+	);
+	const {data: stats} = useFilterRecordsByUser<Stat[]>(user.id);
 	const {users} = useUsers();
+	const {codes} = useCodes(user.id);
+	const {permissions} = usePermissions(loggedInUser.id);
 
 	useEffect(() => {
 		if (users && users.length > 0) {
@@ -101,25 +143,37 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 	}, [users, referralAgent]);
 
 	const updateUser = () => {
-		if (user.type === "corporate" && (!paymentValue || paymentValue < 0))
+		if (
+			(user.type === "corporate" || user.type === "mastercorporate") &&
+			(!paymentValue || paymentValue < 0) &&
+			["admin", "developer"].includes(loggedInUser.type)
+		)
 			return toast.error("Please set a price for the user's package before updating!");
+
 		if (!confirm(`Are you sure you want to update ${user.name}'s account?`)) return;
 
 		axios
 			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
 				...user,
 				subscriptionExpirationDate: expiryDate,
+				studentID,
 				type,
 				status,
+				name,
+				demographicInformation: {
+					...(!!user.demographicInformation ? user.demographicInformation : {}),
+					phone,
+				},
 				agentInformation:
 					type === "agent"
 						? {
-								name: companyName,
+								companyName,
 								commercialRegistration,
+								arabName,
 						  }
 						: undefined,
 				corporateInformation:
-					type === "corporate"
+					type === "corporate" || type === "mastercorporate"
 						? {
 								referralAgent,
 								monthlyDuration,
@@ -144,38 +198,70 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 			});
 	};
 
+	const generalProfileItems = [
+		{
+			icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+			value: Object.keys(groupBySession(stats)).length,
+			label: "Exams",
+		},
+		{
+			icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+			value: stats.length,
+			label: "Modules",
+		},
+		{
+			icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+			value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
+			label: "Average Score",
+		},
+	];
+
+	const corporateProfileItems =
+		user.type === "corporate" || user.type === "mastercorporate"
+			? [
+					{
+						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={[
-					{
-						icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-						value: Object.keys(groupBySession(stats)).length,
-						label: "Exams",
-					},
-					{
-						icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-						value: stats.length,
-						label: "Exercises",
-					},
-					{
-						icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-						value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
-						label: "Average Score",
-					},
-				]}
+				items={user.type === "corporate" || user.type === "mastercorporate" ? corporateProfileItems : generalProfileItems}
 			/>
 
 			{user.type === "agent" && (
 				<>
-					<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
+					<div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full">
 						<Input
-							label="Corporate Name"
+							label="Company Name (Arabic)"
+							type="text"
+							name="arabName"
+							onChange={setArabName}
+							placeholder="Enter their company's name in arabic"
+							defaultValue={arabName}
+							required
+							disabled={disabled}
+						/>
+						<Input
+							label="Company Name (English)"
 							type="text"
 							name="companyName"
 							onChange={setCompanyName}
-							placeholder="Enter corporate name"
+							placeholder="Enter their company's name in english"
 							defaultValue={companyName}
 							required
 							disabled={disabled}
@@ -194,7 +280,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 					<Divider className="w-full !m-0" />
 				</>
 			)}
-			{user.type === "corporate" && (
+			{(user.type === "corporate" || user.type === "mastercorporate") && (
 				<>
 					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
 						<Input
@@ -204,16 +290,31 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 							onChange={setCompanyName}
 							placeholder="Enter corporate name"
 							defaultValue={companyName}
-							disabled={disabled}
+							disabled={
+								disabled ||
+								checkAccess(
+									loggedInUser,
+									getTypesOfUser(
+										user.type === "mastercorporate" ? ["developer", "admin"] : ["developer", "admin", "mastercorporate"],
+									),
+								)
+							}
 						/>
 						<Input
 							label="Number of Users"
 							type="number"
 							name="userAmount"
+							max={maxUserAmount}
 							onChange={(e) => setUserAmount(e ? parseInt(e) : undefined)}
 							placeholder="Enter number of users"
 							defaultValue={userAmount}
-							disabled={disabled}
+							disabled={
+								disabled ||
+								checkAccess(
+									loggedInUser,
+									getTypesOfUser(["developer", "admin", ...((user.type === "corporate" ? ["mastercorporate"] : []) as Type[])]),
+								)
+							}
 						/>
 						<Input
 							label="Monthly Duration"
@@ -222,28 +323,30 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 							onChange={(e) => setMonthlyDuration(e ? parseInt(e) : undefined)}
 							placeholder="Enter monthly duration"
 							defaultValue={monthlyDuration}
-							disabled={disabled}
+							disabled={disabled || checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"]))}
 						/>
-						<div className="flex flex-col gap-3 w-full lg:col-span-2">
+						<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-5 gap-2">
+							<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}
+									disabled={disabled || checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"]))}
 								/>
 								<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",
+										"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",
@@ -259,7 +362,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 											color: state.isFocused ? "black" : styles.color,
 										}),
 									}}
-									isDisabled={disabled}
+									isDisabled={disabled || checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"]))}
 								/>
 							</div>
 						</div>
@@ -271,19 +374,26 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 								<Select
 									className={clsx(
 										"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
-										!["developer", "admin"].includes(loggedInUser.type) &&
+										(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}`})),
+										...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",
@@ -300,7 +410,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 										}),
 									}}
 									// editing country manager should only be available for dev/admin
-									isDisabled={!["developer", "admin"].includes(loggedInUser.type)}
+									isDisabled={checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"])) || disabledFields.countryManager}
 								/>
 							)}
 						</div>
@@ -314,7 +424,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 										type="number"
 										defaultValue={commissionValue || 0}
 										className="col-span-3"
-										disabled={disabled}
+										disabled={disabled || loggedInUser.type === "agent"}
 									/>
 								</>
 							) : (
@@ -331,10 +441,10 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 						label="Name"
 						type="text"
 						name="name"
-						onChange={() => null}
+						onChange={setName}
 						placeholder="Enter your name"
-						defaultValue={user.name}
-						disabled
+						defaultValue={name}
+						disabled={disabled}
 					/>
 					<Input
 						label="E-mail Address"
@@ -356,28 +466,39 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 						type="tel"
 						name="phone"
 						label="Phone number"
-						onChange={() => null}
+						onChange={setPhone}
 						placeholder="Enter phone number"
-						defaultValue={user.demographicInformation?.phone}
-						disabled
+						defaultValue={phone}
+						disabled={disabled}
 					/>
 				</div>
 
 				{user.type === "student" && (
-					<Input
-						type="text"
-						name="passport_id"
-						label="Passport/National ID"
-						onChange={() => null}
-						placeholder="Enter National ID or Passport number"
-						value={user.type === "student" ? user.demographicInformation?.passport_id : undefined}
-						disabled
-						required
-					/>
+					<div className="flex flex-col md:flex-row gap-8 w-full">
+						<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
+						/>
+						<Input
+							type="text"
+							name="studentID"
+							label="Student ID"
+							onChange={setStudentID}
+							placeholder="Enter Student ID"
+							disabled={!checkAccess(loggedInUser, getTypesOfUser(["teacher", "agent", "student"]), permissions, "editStudent")}
+							value={studentID}
+						/>
+					</div>
 				)}
 
 				<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>
 							<RadioGroup
@@ -403,12 +524,12 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 							</RadioGroup>
 						</div>
 					)}
-					{user.type === "corporate" && (
+					{(user.type === "corporate" || user.type === "mastercorporate") && (
 						<Input
 							name="position"
 							onChange={setPosition}
 							type="text"
-							label="Position"
+							label="Department"
 							defaultValue={position}
 							placeholder="CEO, Head of Marketing..."
 							disabled
@@ -419,7 +540,8 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 						<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}
+								value={gender}
+								onChange={(e) => setGender(e)}
 								className="flex flex-row gap-4 justify-between"
 								disabled={disabled}>
 								<RadioGroup.Option value="male">
@@ -472,7 +594,11 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 								<Checkbox
 									isChecked={!!expiryDate}
 									onChange={(checked) => setExpiryDate(checked ? user.subscriptionExpirationDate || new Date() : null)}
-									disabled={disabled}>
+									disabled={
+										disabled ||
+										(!["admin", "developer", "mastercorporate", "corporate"].includes(loggedInUser.type) &&
+											!!loggedInUser.subscriptionExpirationDate)
+									}>
 									Enabled
 								</Checkbox>
 							</div>
@@ -511,7 +637,12 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 						</div>
 					</div>
 				</div>
-				{(loggedInUser.type === "developer" || loggedInUser.type === "admin") && (
+				{checkAccess(
+					loggedInUser,
+					["developer", "admin", "corporate", "mastercorporate"],
+					permissions,
+					user.type === "teacher" ? "editTeacher" : user.type === "student" ? "editStudent" : undefined,
+				) && (
 					<>
 						<Divider className="w-full !m-0" />
 						<div className="flex flex-col md:flex-row gap-8 w-full">
@@ -519,7 +650,11 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 								<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}
+									options={USER_STATUS_OPTIONS.filter((x) => {
+										if (checkAccess(loggedInUser, ["admin", "developer"])) return true;
+										return x.value !== "paymentDue";
+									})}
+									menuPortalTarget={document?.body}
 									value={USER_STATUS_OPTIONS.find((o) => o.value === status)}
 									onChange={(value) => setStatus(value?.value as typeof user.status)}
 									styles={{
@@ -532,6 +667,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 												outline: "none",
 											},
 										}),
+										menuPortal: (base) => ({...base, zIndex: 9999}),
 										option: (styles, state) => ({
 											...styles,
 											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
@@ -545,7 +681,29 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 								<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}
+									options={USER_TYPE_OPTIONS.filter((x) => {
+										if (x.value === "student")
+											return checkAccess(
+												loggedInUser,
+												["developer", "admin", "corporate", "mastercorporate"],
+												permissions,
+												"editStudent",
+											);
+
+										if (x.value === "teacher")
+											return checkAccess(
+												loggedInUser,
+												["developer", "admin", "corporate", "mastercorporate"],
+												permissions,
+												"editTeacher",
+											);
+
+										if (x.value === "corporate")
+											return checkAccess(loggedInUser, ["developer", "admin", "mastercorporate"], permissions, "editCorporate");
+
+										return checkAccess(loggedInUser, ["developer", "admin"]);
+									})}
+									menuPortalTarget={document?.body}
 									value={USER_TYPE_OPTIONS.find((o) => o.value === type)}
 									onChange={(value) => setType(value?.value as typeof user.type)}
 									styles={{
@@ -558,6 +716,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 												outline: "none",
 											},
 										}),
+										menuPortal: (base) => ({...base, zIndex: 9999}),
 										option: (styles, state) => ({
 											...styles,
 											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
@@ -574,17 +733,17 @@ 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 && (
+					{onViewCorporate && ["student", "teacher"].includes(user.type) && (
 						<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewCorporate}>
 							View Corporate
 						</Button>
 					)}
-					{onViewStudents && (
+					{onViewStudents && ["corporate", "teacher"].includes(user.type) && (
 						<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewStudents}>
 							View Students
 						</Button>
 					)}
-					{onViewTeachers && (
+					{onViewTeachers && ["student", "corporate"].includes(user.type) && (
 						<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewTeachers}>
 							View Teachers
 						</Button>
@@ -594,7 +753,10 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 					<Button className="w-full max-w-[200px]" variant="outline" onClick={onClose}>
 						Close
 					</Button>
-					<Button disabled={disabled} onClick={updateUser} className="w-full max-w-[200px]">
+					<Button
+						disabled={disabled || !checkAccess(loggedInUser, updateUserPermission.list, permissions, updateUserPermission.perm)}
+						onClick={updateUser}
+						className="w-full max-w-[200px]">
 						Update
 					</Button>
 				</div>

src/components/ui/popover.tsx

@@ -0,0 +1,31 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border border-neutral-200 bg-white p-4 text-neutral-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

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/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", "corporate", "mastercorporate", "teacher"],
+		},
+		teacher: {
+			perm: "editTeacher",
+			list: ["developer", "admin", "corporate", "mastercorporate"],
+		},
+
+		corporate: {
+			perm: "editCorporate",
+			list: ["developer", "admin", "mastercorporate"],
+		},
+		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

@@ -1,19 +1,31 @@
 /* eslint-disable @next/next/no-img-element */
 import Modal from "@/components/Modal";
-import useStats from "@/hooks/useStats";
+import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
 import useUsers from "@/hooks/useUsers";
-import {User} from "@/interfaces/user";
+import {Stat, 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, BsBriefcaseFill, BsGlobeCentralSouthAsia, BsPerson, BsPersonFill, BsPencilSquare, BsBank, BsCurrencyDollar} from "react-icons/bs";
+import {
+	BsArrowLeft,
+	BsBriefcaseFill,
+	BsGlobeCentralSouthAsia,
+	BsPerson,
+	BsPersonFill,
+	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 usePaymentStatusUsers from "@/hooks/usePaymentStatusUsers";
+import CorporateStudentsLevels from "./CorporateStudentsLevels";
 
 interface Props {
 	user: User;
@@ -24,23 +36,22 @@ export default function AdminDashboard({user}: Props) {
 	const [selectedUser, setSelectedUser] = useState<User>();
 	const [showModal, setShowModal] = useState(false);
 
-	const {stats} = useStats(user.id);
+	const {data: stats} = useFilterRecordsByUser<Stat[]>(user.id);
 	const {users, reload} = useUsers();
-	const {groups} = useGroups();
-	const { pending, done } = usePaymentStatusUsers();
+	const {groups} = useGroups({});
+	const {pending, done} = usePaymentStatusUsers();
 
 	const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
 	const router = useRouter();
 
 	useEffect(() => {
-		setShowModal(!!selectedUser && page === "");
-	}, [selectedUser, page]);
+		setShowModal(!!selectedUser && router.asPath === "/#");
+	}, [selectedUser, router.asPath]);
 
 	// 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 inactiveCountryManagerFilter = (x: User) => x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate);
 
 	const UserDisplay = (displayUser: User) => (
 		<div
@@ -60,168 +71,206 @@ export default function AdminDashboard({user}: Props) {
 
 	const StudentsList = () => {
 		const filter = (x: User) =>
-			x.type === "student" &&
-			(!!selectedUser
+			!!selectedUser
 				? groups
 						.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
 						.flatMap((g) => g.participants)
 						.includes(x.id)
-				: true);
+				: true;
 
 		return (
-			<>
-				<div className="flex flex-col gap-4">
-					<div
-						onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
-						<BsArrowLeft className="text-xl" />
-						<span>Back</span>
+			<UserList
+				user={user}
+				type="student"
+				filters={[filter]}
+				renderHeader={(total) => (
+					<div className="flex flex-col gap-4">
+						<div
+							onClick={() => router.push("/")}
+							className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+							<BsArrowLeft className="text-xl" />
+							<span>Back</span>
+						</div>
+						<h2 className="text-2xl font-semibold">Students ({total})</h2>
 					</div>
-					<h2 className="text-2xl font-semibold">Students ({users.filter(filter).length})</h2>
-				</div>
-
-				<UserList user={user} filters={[filter]} />
-			</>
+				)}
+			/>
 		);
 	};
 
 	const TeachersList = () => {
 		const filter = (x: User) =>
-			x.type === "teacher" &&
-			(!!selectedUser
+			!!selectedUser
 				? groups
 						.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
 						.flatMap((g) => g.participants)
 						.includes(x.id) || false
-				: true);
+				: true;
 
 		return (
-			<>
-				<div className="flex flex-col gap-4">
-					<div
-						onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
-						<BsArrowLeft className="text-xl" />
-						<span>Back</span>
+			<UserList
+				user={user}
+				type="teacher"
+				filters={[filter]}
+				renderHeader={(total) => (
+					<div className="flex flex-col gap-4">
+						<div
+							onClick={() => router.push("/")}
+							className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+							<BsArrowLeft className="text-xl" />
+							<span>Back</span>
+						</div>
+						<h2 className="text-2xl font-semibold">Teachers ({total})</h2>
 					</div>
-					<h2 className="text-2xl font-semibold">Teachers ({users.filter(filter).length})</h2>
-				</div>
-
-				<UserList user={user} filters={[filter]} />
-			</>
+				)}
+			/>
 		);
 	};
 
 	const AgentsList = () => {
-		const filter = (x: User) => x.type === "agent";
-
 		return (
-			<>
-				<div className="flex flex-col gap-4">
-					<div
-						onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
-						<BsArrowLeft className="text-xl" />
-						<span>Back</span>
+			<UserList
+				user={user}
+				type="agent"
+				renderHeader={(total) => (
+					<div className="flex flex-col gap-4">
+						<div
+							onClick={() => router.push("/")}
+							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 ({total})</h2>
 					</div>
-					<h2 className="text-2xl font-semibold">Country Managers ({users.filter(filter).length})</h2>
-				</div>
-
-				<UserList user={user} filters={[filter]} />
-			</>
+				)}
+			/>
 		);
 	};
 
 	const CorporateList = () => (
-		<>
-			<div className="flex flex-col gap-4">
-				<div
-					onClick={() => setPage("")}
-					className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
-					<BsArrowLeft className="text-xl" />
-					<span>Back</span>
-				</div>
-				<h2 className="text-2xl font-semibold">Corporate ({users.filter((x) => x.type === "corporate").length})</h2>
-			</div>
-
-			<UserList user={user} filters={[(x) => x.type === "corporate"]} />
-		</>
-	);
-
-	const CorporatePaidStatusList = ({ paid }: {paid: Boolean}) => {
-		const list = paid ? done : pending;
-		const filter = (x: User) => x.type === "corporate" && list.includes(x.id);
-
-		return (
-			<>
+		<UserList
+			user={user}
+			type="corporate"
+			renderHeader={(total) => (
 				<div className="flex flex-col gap-4">
 					<div
-						onClick={() => setPage("")}
+						onClick={() => router.push("/")}
 						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
 						<BsArrowLeft className="text-xl" />
 						<span>Back</span>
 					</div>
-					<h2 className="text-2xl font-semibold">{paid ? 'Payment Done' : 'Pending Payment'} ({list.length})</h2>
+					<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) => list.includes(x.id);
+
+		return (
+			<UserList
+				user={user}
+				type="corporate"
+				filters={[filter]}
+				renderHeader={(total) => (
+					<div className="flex flex-col gap-4">
+						<div
+							onClick={() => router.push("/")}
+							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>
+				)}
+			/>
 		);
 	};
 
 	const InactiveCountryManagerList = () => {
 		return (
-			<>
-				<div className="flex flex-col gap-4">
-					<div
-						onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
-						<BsArrowLeft className="text-xl" />
-						<span>Back</span>
+			<UserList
+				user={user}
+				type="agent"
+				filters={[inactiveCountryManagerFilter]}
+				renderHeader={(total) => (
+					<div className="flex flex-col gap-4">
+						<div
+							onClick={() => router.push("/")}
+							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>
-					<h2 className="text-2xl font-semibold">Inactive Country Managers ({users.filter(inactiveCountryManagerFilter).length})</h2>
-				</div>
-
-				<UserList user={user} filters={[inactiveCountryManagerFilter]} />
-			</>
+				)}
+			/>
 		);
 	};
 
 	const InactiveStudentsList = () => {
-		const filter = (x: User) => x.type === "student" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate));
+		const filter = (x: User) => x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate);
 
 		return (
-			<>
-				<div className="flex flex-col gap-4">
-					<div
-						onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
-						<BsArrowLeft className="text-xl" />
-						<span>Back</span>
+			<UserList
+				user={user}
+				type="student"
+				filters={[filter]}
+				renderHeader={(total) => (
+					<div className="flex flex-col gap-4">
+						<div
+							onClick={() => router.push("/")}
+							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>
-					<h2 className="text-2xl font-semibold">Inactive Students ({users.filter(filter).length})</h2>
-				</div>
-
-				<UserList user={user} filters={[filter]} />
-			</>
+				)}
+			/>
 		);
 	};
 
 	const InactiveCorporateList = () => {
-		const filter = (x: User) => x.type === "corporate" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate));
+		const filter = (x: User) => x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate);
 
+		return (
+			<UserList
+				user={user}
+				filters={[filter]}
+				type="corporate"
+				renderHeader={(total) => (
+					<div className="flex flex-col gap-4">
+						<div
+							onClick={() => router.push("/")}
+							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("")}
+						onClick={() => router.push("/")}
 						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 />
 			</>
 		);
 	};
@@ -233,28 +282,28 @@ export default function AdminDashboard({user}: Props) {
 					Icon={BsPersonFill}
 					label="Students"
 					value={users.filter((x) => x.type === "student").length}
-					onClick={() => setPage("students")}
+					onClick={() => router.push("/#students")}
 					color="purple"
 				/>
 				<IconCard
 					Icon={BsPencilSquare}
 					label="Teachers"
 					value={users.filter((x) => x.type === "teacher").length}
-					onClick={() => setPage("teachers")}
+					onClick={() => router.push("/#teachers")}
 					color="purple"
 				/>
 				<IconCard
 					Icon={BsBank}
 					label="Corporate"
 					value={users.filter((x) => x.type === "corporate").length}
-					onClick={() => setPage("corporate")}
+					onClick={() => router.push("/#corporate")}
 					color="purple"
 				/>
 				<IconCard
 					Icon={BsBriefcaseFill}
 					label="Country Managers"
 					value={users.filter((x) => x.type === "agent").length}
-					onClick={() => setPage("agents")}
+					onClick={() => router.push("/#agents")}
 					color="purple"
 				/>
 				<IconCard
@@ -264,7 +313,7 @@ export default function AdminDashboard({user}: Props) {
 					color="purple"
 				/>
 				<IconCard
-					onClick={() => setPage("inactiveStudents")}
+					onClick={() => router.push("/#inactiveStudents")}
 					Icon={BsPersonFill}
 					label="Inactive Students"
 					value={
@@ -274,14 +323,14 @@ export default function AdminDashboard({user}: Props) {
 					color="rose"
 				/>
 				<IconCard
-					onClick={() => setPage("inactiveCountryManagers")}
+					onClick={() => router.push("/#inactiveCountryManagers")}
 					Icon={BsBriefcaseFill}
 					label="Inactive Country Managers"
 					value={users.filter(inactiveCountryManagerFilter).length}
 					color="rose"
 				/>
 				<IconCard
-					onClick={() => setPage("inactiveCorporate")}
+					onClick={() => router.push("/#inactiveCorporate")}
 					Icon={BsBank}
 					label="Inactive Corporate"
 					value={
@@ -291,19 +340,31 @@ export default function AdminDashboard({user}: Props) {
 					color="rose"
 				/>
 				<IconCard
-					onClick={() => setPage("paymentdone")}
+					onClick={() => router.push("/#paymentdone")}
 					Icon={BsCurrencyDollar}
 					label="Payment Done"
 					value={done.length}
 					color="purple"
 				/>
 				<IconCard
-					onClick={() => setPage("paymentpending")}
+					onClick={() => router.push("/#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={() => router.push("/#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">
@@ -318,12 +379,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} />
 							))}
@@ -356,7 +432,7 @@ export default function AdminDashboard({user}: Props) {
 					</div>
 				</div>
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
-					<span className="p-4">Country Manager expiring in 1 month</span>
+					<span className="p-4">Teachers expiring in 1 month</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
 						{users
 							.filter(
@@ -371,6 +447,22 @@ export default function AdminDashboard({user}: Props) {
 							))}
 					</div>
 				</div>
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Country Manager expiring in 1 month</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{users
+							.filter(
+								(x) =>
+									x.type === "agent" &&
+									x.subscriptionExpirationDate &&
+									moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
+									moment().isBefore(moment(x.subscriptionExpirationDate)),
+							)
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Corporate expiring in 1 month</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
@@ -400,7 +492,7 @@ export default function AdminDashboard({user}: Props) {
 					</div>
 				</div>
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
-					<span className="p-4">Expired Country Manager</span>
+					<span className="p-4">Expired Teachers</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
 						{users
 							.filter(
@@ -411,6 +503,18 @@ export default function AdminDashboard({user}: Props) {
 							))}
 					</div>
 				</div>
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Expired Country Manager</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{users
+							.filter(
+								(x) => x.type === "agent" && x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)),
+							)
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Expired Corporate</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
@@ -506,16 +610,17 @@ export default function AdminDashboard({user}: Props) {
 					)}
 				</>
 			</Modal>
-			{page === "students" && <StudentsList />}
-			{page === "teachers" && <TeachersList />}
-			{page === "corporate" && <CorporateList />}
-			{page === "agents" && <AgentsList />}
-			{page === "inactiveStudents" && <InactiveStudentsList />}
-			{page === "inactiveCorporate" && <InactiveCorporateList />}
-			{page === "inactiveCountryManagers" && <InactiveCountryManagerList />}
-			{page === "paymentdone" && <CorporatePaidStatusList paid={true} />}
-			{page === "paymentpending" && <CorporatePaidStatusList paid={false} />}
-			{page === "" && <DefaultDashboard />}
+			{router.asPath === "/#students" && <StudentsList />}
+			{router.asPath === "/#teachers" && <TeachersList />}
+			{router.asPath === "/#corporate" && <CorporateList />}
+			{router.asPath === "/#agents" && <AgentsList />}
+			{router.asPath === "/#inactiveStudents" && <InactiveStudentsList />}
+			{router.asPath === "/#inactiveCorporate" && <InactiveCorporateList />}
+			{router.asPath === "/#inactiveCountryManagers" && <InactiveCountryManagerList />}
+			{router.asPath === "/#paymentdone" && <CorporatePaidStatusList paid={true} />}
+			{router.asPath === "/#paymentpending" && <CorporatePaidStatusList paid={false} />}
+			{router.asPath === "/#corporatestudentslevels" && <CorporateStudentsLevelsHelper />}
+			{router.asPath === "/" && <DefaultDashboard />}
 		</>
 	);
 }

src/dashboards/Agent.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @next/next/no-img-element */
 import Modal from "@/components/Modal";
-import useStats from "@/hooks/useStats";
+import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
 import useUsers from "@/hooks/useUsers";
-import { User} from "@/interfaces/user";
+import {Stat, User} from "@/interfaces/user";
 import UserList from "@/pages/(admin)/Lists/UserList";
 import {dateSorter} from "@/utils";
 import moment from "moment";
@@ -12,7 +12,7 @@ import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
 
 import IconCard from "./IconCard";
-import usePaymentStatusUsers from '@/hooks/usePaymentStatusUsers';
+import usePaymentStatusUsers from "@/hooks/usePaymentStatusUsers";
 
 interface Props {
 	user: User;
@@ -23,10 +23,9 @@ export default function AgentDashboard({user}: Props) {
 	const [selectedUser, setSelectedUser] = useState<User>();
 	const [showModal, setShowModal] = useState(false);
 
-	const {stats} = useStats();
+	const {data: stats} = useFilterRecordsByUser<Stat[]>();
 	const {users, reload} = useUsers();
-	const {groups} = useGroups(user.id);
-	const { pending, done } = usePaymentStatusUsers();
+	const {pending, done} = usePaymentStatusUsers();
 
 	useEffect(() => {
 		setShowModal(!!selectedUser && page === "");
@@ -38,7 +37,7 @@ export default function AgentDashboard({user}: Props) {
 	const inactiveReferredCorporateFilter = (x: User) =>
 		referredCorporateFilter(x) && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate));
 
-	const UserDisplay = ({ displayUser, allowClick = true }: {displayUser: User, allowClick?: boolean}) => (
+	const UserDisplay = ({displayUser, allowClick = true}: {displayUser: User; allowClick?: boolean}) => (
 		<div
 			onClick={() => allowClick && setSelectedUser(displayUser)}
 			className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300">
@@ -56,37 +55,41 @@ export default function AgentDashboard({user}: Props) {
 
 	const ReferredCorporateList = () => {
 		return (
-			<>
-				<div className="flex flex-col gap-4">
-					<div
-						onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
-						<BsArrowLeft className="text-xl" />
-						<span>Back</span>
+			<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">
+							<BsArrowLeft className="text-xl" />
+							<span>Back</span>
+						</div>
+						<h2 className="text-2xl font-semibold">Referred Corporate ({total})</h2>
 					</div>
-					<h2 className="text-2xl font-semibold">Referred Corporate ({users.filter(referredCorporateFilter).length})</h2>
-				</div>
-
-				<UserList user={user} filters={[referredCorporateFilter]} />
-			</>
+				)}
+			/>
 		);
 	};
 
 	const InactiveReferredCorporateList = () => {
 		return (
-			<>
-				<div className="flex flex-col gap-4">
-					<div
-						onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
-						<BsArrowLeft className="text-xl" />
-						<span>Back</span>
+			<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>
-					<h2 className="text-2xl font-semibold">Inactive Referred Corporate ({users.filter(inactiveReferredCorporateFilter).length})</h2>
-				</div>
-
-				<UserList user={user} filters={[inactiveReferredCorporateFilter]} />
-			</>
+				)}
+			/>
 		);
 	};
 
@@ -94,38 +97,46 @@ export default function AgentDashboard({user}: Props) {
 		const filter = (x: User) => x.type === "corporate";
 
 		return (
-			<>
-				<div className="flex flex-col gap-4">
-					<div
-						onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
-						<BsArrowLeft className="text-xl" />
-						<span>Back</span>
+			<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">Corporate ({total})</h2>
 					</div>
-					<h2 className="text-2xl font-semibold">Corporate ({users.filter(filter).length})</h2>
-				</div>
-				<UserList user={user} filters={[filter]} />
-			</>
+				)}
+			/>
 		);
 	};
 
-	const CorporatePaidStatusList = ({ paid }: {paid: Boolean}) => {
+	const CorporatePaidStatusList = ({paid}: {paid: Boolean}) => {
 		const list = paid ? done : pending;
 		const filter = (x: User) => x.type === "corporate" && list.includes(x.id);
 
 		return (
-			<>
-				<div className="flex flex-col gap-4">
-					<div
-						onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
-						<BsArrowLeft className="text-xl" />
-						<span>Back</span>
+			<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>
-					<h2 className="text-2xl font-semibold">{paid ? 'Payment Done' : 'Pending Payment'} ({list.length})</h2>
-				</div>
-				<UserList user={user} filters={[filter]} />
-			</>
+				)}
+			/>
 		);
 	};
 
@@ -153,13 +164,7 @@ export default function AgentDashboard({user}: Props) {
 					value={users.filter(corporateFilter).length}
 					color="purple"
 				/>
-				<IconCard
-					onClick={() => setPage("paymentdone")}
-					Icon={BsCurrencyDollar}
-					label="Payment Done"
-					value={done.length}
-					color="purple"
-				/>
+				<IconCard onClick={() => setPage("paymentdone")} Icon={BsCurrencyDollar} label="Payment Done" value={done.length} color="purple" />
 				<IconCard
 					onClick={() => setPage("paymentpending")}
 					Icon={BsCurrencyDollar}

src/dashboards/AssignmentCard.tsx

@@ -6,16 +6,49 @@ import {calculateBandScore} from "@/utils/score";
 import clsx from "clsx";
 import moment from "moment";
 import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
-import { usePDFDownload } from "@/hooks/usePDFDownload";
+import {usePDFDownload} from "@/hooks/usePDFDownload";
+import {useAssignmentArchive} from "@/hooks/useAssignmentArchive";
+import {uniqBy} from "lodash";
+import {useAssignmentUnarchive} from "@/hooks/useAssignmentUnarchive";
+import {useAssignmentRelease} from "@/hooks/useAssignmentRelease";
+import {getUserName} from "@/utils/users";
+import {User} from "@/interfaces/user";
 
 interface Props {
+	users: User[];
 	onClick?: () => void;
 	allowDownload?: boolean;
+	reload?: Function;
+	allowArchive?: boolean;
+	allowUnarchive?: boolean;
+	allowExcelDownload?: boolean;
 }
 
-export default function AssignmentCard({id, name, assigner, startDate, endDate, assignees, results, exams, onClick, allowDownload}: Assignment & Props) {
-	const {users} = useUsers();
+export default function AssignmentCard({
+	id,
+	name,
+	assigner,
+	startDate,
+	endDate,
+	assignees,
+	results,
+	exams,
+	archived,
+	onClick,
+	allowDownload,
+	reload,
+	allowArchive,
+	allowUnarchive,
+	allowExcelDownload,
+	users,
+	released,
+}: Assignment & Props) {
 	const renderPdfIcon = usePDFDownload("assignments");
+	const renderExcelIcon = usePDFDownload("assignments", "excel");
+	const renderArchiveIcon = useAssignmentArchive(id, reload);
+	const renderUnarchiveIcon = useAssignmentUnarchive(id, reload);
+	const renderReleaseIcon = useAssignmentRelease(id, reload);
+
 
 	const calculateAverageModuleScore = (module: Module) => {
 		const resultModuleBandScores = results.map((r) => {
@@ -29,14 +62,44 @@ export default function AssignmentCard({id, name, assigner, startDate, endDate,
 		return resultModuleBandScores.length === 0 ? -1 : resultModuleBandScores.reduce((acc, curr) => acc + curr, 0) / results.length;
 	};
 
+	const uniqModules = uniqBy(exams, (x) => x.module);
+
+	const shouldRenderPDF = () => {
+		if(released && allowDownload) {
+			// in order to be downloadable, the assignment has to be released
+			// the component should have the allowDownload prop
+			// and the assignment should not have the level module
+			return uniqModules.every(({ module }) => module !== 'level');
+		}
+
+		return false;
+	}
+
+	const shouldRenderExcel = () => {
+		if(released && allowExcelDownload) {
+			// in order to be downloadable, the assignment has to be released
+			// the component should have the allowExcelDownload prop
+			// and the assignment should have the level module
+			return uniqModules.some(({ module }) => module === 'level');
+		}
+
+		return false;
+	}
+
 	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">
 				<div className="flex flex-row justify-between">
-					<h3 className="font-semibold text-xl">{name}</h3>
-					{allowDownload && renderPdfIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")}
+					<h3 className="text-xl font-semibold">{name}</h3>
+					<div className="flex gap-2">
+						{shouldRenderPDF() && renderPdfIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")}
+						{shouldRenderExcel() && renderExcelIcon(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")}
+						{!released && renderReleaseIcon("text-mti-gray-dim", "text-mti-gray-dim")}
+					</div>
 				</div>
 				<ProgressBar
 					color={results.length / assignees.length < 0.5 ? "red" : "purple"}
@@ -46,28 +109,31 @@ 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>{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="flex flex-col gap-1">
+				<span className="flex justify-between gap-1">
+					<span>{moment(startDate).format("DD/MM/YY, HH:mm")}</span>
+					<span>-</span>
+					<span>{moment(endDate).format("DD/MM/YY, HH:mm")}</span>
+				</span>
+				<span>Assigner: {getUserName(users.find((x) => x.id === assigner))}</span>
+			</div>
+			<div className="-md:mt-2 grid w-full grid-cols-4 place-items-start gap-2">
+				{uniqModules.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, useMemo, 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,28 +16,62 @@ 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;
-	assigner: string;
 	users: User[];
+	user: User;
 	groups: Group[];
 	assignment?: Assignment;
 	cancelCreation: () => void;
 }
 
-export default function AssignmentCreator({isCreating, assignment, assigner, groups, users, cancelCreation}: Props) {
+export default function AssignmentCreator({isCreating, assignment, user, groups, users, cancelCreation}: Props) {
 	const [selectedModules, setSelectedModules] = useState<Module[]>(assignment?.exams.map((e) => e.module) || []);
 	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 [teachers, setTeachers] = useState<string[]>(!!assignment ? assignment.teachers || [] : [...(user.type === "teacher" ? [user.id] : [])]);
+	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() : moment().add(1, "hour").toDate());
+
+	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 [released, setReleased] = useState<boolean>(assignment?.released || false);
+
+	const [autoStart, setAutostart] = useState<boolean>(assignment?.autoStart || false);
+	const [autoStartDate, setAutoStartDate] = useState<Date | null>(assignment ? moment(assignment.autoStartDate).toDate() : new Date());
+
+	const [useRandomExams, setUseRandomExams] = useState(true);
+	const [examIDs, setExamIDs] = useState<{id: string; module: Module}[]>([]);
+
+	const {exams} = useExams();
+
+	const userStudents = useMemo(() => users.filter((x) => x.type === "student"), [users]);
+	const userTeachers = useMemo(() => users.filter((x) => x.type === "teacher"), [users]);
+
+	useEffect(() => {
+		setExamIDs((prev) => prev.filter((x) => selectedModules.includes(x.module)));
+	}, [selectedModules]);
 
 	const toggleModule = (module: Module) => {
 		const modules = selectedModules.filter((x) => x !== module);
@@ -48,34 +82,38 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 		setAssignees((prev) => (prev.includes(user.id) ? prev.filter((a) => a !== user.id) : [...prev, user.id]));
 	};
 
-	const createAssignment = () => {
-    setIsLoading(true);
+	const toggleTeacher = (user: User) => {
+		setTeachers((prev) => (prev.includes(user.id) ? prev.filter((a) => a !== user.id) : [...prev, user.id]));
+	};
 
-    (assignment ? axios.patch : axios.post)(
-      `/api/assignments${assignment ? `/${assignment.id}` : ""}`,
-      {
-        assignees,
-        name,
-        startDate,
-        endDate,
-		selectedModules,
-		generateMultiple,
-      }
-    )
-      .then(() => {
-        toast.success(
-          `The assignment "${name}" has been ${
-            assignment ? "updated" : "created"
-          } successfully!`
-        );
-        cancelCreation();
-      })
-      .catch((e) => {
-        console.log(e);
-        toast.error("Something went wrong, please try again later!");
-      })
-      .finally(() => setIsLoading(false));
-  };
+	const createAssignment = () => {
+		setIsLoading(true);
+
+		(assignment ? axios.patch : axios.post)(`/api/assignments${assignment ? `/${assignment.id}` : ""}`, {
+			assignees,
+			name,
+			startDate,
+			examIDs: !useRandomExams ? examIDs : undefined,
+			endDate,
+			selectedModules,
+			generateMultiple,
+			teachers,
+			variant,
+			instructorGender,
+			released,
+			autoStart,
+			autoStartDate,
+		})
+			.then(() => {
+				toast.success(`The assignment "${name}" has been ${assignment ? "updated" : "created"} successfully!`);
+				cancelCreation();
+			})
+			.catch((e) => {
+				console.log(e);
+				toast.error("Something went wrong, please try again later!");
+			})
+			.finally(() => setIsLoading(false));
+	};
 
 	const deleteAssignment = () => {
 		if (assignment) {
@@ -96,15 +134,32 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 		}
 	};
 
+	const startAssignment = () => {
+		if (assignment) {
+			setIsLoading(true);
+
+			axios
+				.post(`/api/assignments/${assignment.id}/start`)
+				.then(() => {
+					toast.success(`The assignment "${name}" has been started successfully!`);
+					cancelCreation();
+				})
+				.catch((e) => {
+					console.log(e);
+					toast.error("Something went wrong, please try again later!");
+				})
+				.finally(() => setIsLoading(false));
+		}
+	};
+
 	return (
 		<Modal isOpen={isCreating} onClose={cancelCreation} title="New Assignment">
 			<div className="w-full flex flex-col gap-4">
-				<section className="w-full grid -md:grid-cols-1 md:grid-cols-2 place-items-center lg:grid-cols-6 -md:flex-col -md:items-center -md:gap-12 justify-between gap-8 mt-8 px-8">
+				<section className="w-full grid -md:grid-cols-1 md:grid-cols-3 place-items-center -md:flex-col -md:items-center -md:gap-12 justify-between gap-8 mt-8 px-8">
 					<div
 						onClick={!selectedModules.includes("level") ? () => toggleModule("reading") : undefined}
 						className={clsx(
 							"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
-							"lg:col-span-2",
 							selectedModules.includes("reading") ? "border-mti-purple-light" : "border-mti-gray-platinum",
 						)}>
 						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-reading top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
@@ -121,7 +176,6 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 						onClick={!selectedModules.includes("level") ? () => toggleModule("listening") : undefined}
 						className={clsx(
 							"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
-							"lg:col-span-2",
 							selectedModules.includes("listening") ? "border-mti-purple-light" : "border-mti-gray-platinum",
 						)}>
 						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-listening top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
@@ -134,11 +188,30 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
 						{selectedModules.includes("listening") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
 					</div>
+					<div
+						onClick={
+							(!selectedModules.includes("level") && selectedModules.length === 0) || selectedModules.includes("level")
+								? () => toggleModule("level")
+								: undefined
+						}
+						className={clsx(
+							"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+							selectedModules.includes("level") ? "border-mti-purple-light" : "border-mti-gray-platinum",
+						)}>
+						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-level top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+							<BsClipboard className="text-white w-7 h-7" />
+						</div>
+						<span className="ml-8 font-semibold">Level</span>
+						{!selectedModules.includes("level") && selectedModules.length === 0 && (
+							<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+						)}
+						{!selectedModules.includes("level") && selectedModules.length > 0 && <BsXCircle className="text-mti-red-light w-8 h-8" />}
+						{selectedModules.includes("level") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
+					</div>
 					<div
 						onClick={!selectedModules.includes("level") ? () => toggleModule("writing") : undefined}
 						className={clsx(
 							"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
-							"lg:col-span-2",
 							selectedModules.includes("writing") ? "border-mti-purple-light" : "border-mti-gray-platinum",
 						)}>
 						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-writing top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
@@ -155,7 +228,6 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 						onClick={!selectedModules.includes("level") ? () => toggleModule("speaking") : undefined}
 						className={clsx(
 							"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
-							"lg:col-span-3",
 							selectedModules.includes("speaking") ? "border-mti-purple-light" : "border-mti-gray-platinum",
 						)}>
 						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-speaking top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
@@ -168,34 +240,13 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
 						{selectedModules.includes("speaking") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
 					</div>
-					<div
-						onClick={
-							(!selectedModules.includes("level") && selectedModules.length === 0) || selectedModules.includes("level")
-								? () => toggleModule("level")
-								: undefined
-						}
-						className={clsx(
-							"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
-							"lg:col-span-3",
-							selectedModules.includes("level") ? "border-mti-purple-light" : "border-mti-gray-platinum",
-						)}>
-						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-level top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
-							<BsClipboard className="text-white w-7 h-7" />
-						</div>
-						<span className="ml-8 font-semibold">Level</span>
-						{!selectedModules.includes("level") && selectedModules.length === 0 && (
-							<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
-						)}
-						{!selectedModules.includes("level") && selectedModules.length > 0 && <BsXCircle className="text-mti-red-light w-8 h-8" />}
-						{selectedModules.includes("level") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
-					</div>
 				</section>
 
 				<Input type="text" name="name" onChange={(e) => setName(e)} defaultValue={name} label="Assignment Name" required />
 
 				<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
 					<div className="flex flex-col gap-2">
-						<label className="font-normal text-base text-mti-gray-dim">Start Date *</label>
+						<label className="font-normal text-base text-mti-gray-dim">Limit Start Date *</label>
 						<ReactDatePicker
 							className={clsx(
 								"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
@@ -203,7 +254,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,15 +270,83 @@ 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
 							onChange={(date) => setEndDate(date)}
 						/>
 					</div>
+					{autoStart && (
+						<div className="flex flex-col gap-2">
+							<label className="font-normal text-base text-mti-gray-dim">Automatic Start Date *</label>
+							<ReactDatePicker
+								className={clsx(
+									"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+									"hover:border-mti-purple tooltip z-10",
+									"transition duration-300 ease-in-out",
+								)}
+								popperClassName="!z-20"
+								filterTime={(date) => moment(date).isSameOrAfter(new Date())}
+								dateFormat="dd/MM/yyyy HH:mm"
+								selected={autoStartDate}
+								showTimeSelect
+								onChange={(date) => setAutoStartDate(date)}
+							/>
+						</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">
@@ -253,7 +372,7 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 						))}
 					</div>
 					<div className="flex flex-wrap -md:justify-center gap-4">
-						{users.map((user) => (
+						{userStudents.map((user) => (
 							<div
 								onClick={() => toggleAssignee(user)}
 								className={clsx(
@@ -284,28 +403,108 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 						))}
 					</div>
 				</section>
-				<div className="flex gap-4 w-full justify-end">
-					<Checkbox isChecked={generateMultiple} onChange={() => setGenerateMultiple(d => !d)}>
+
+				{user.type !== "teacher" && (
+					<section className="w-full flex flex-col gap-3">
+						<span className="font-semibold">Teachers ({teachers.length} selected)</span>
+						<div className="flex gap-4 overflow-x-scroll scrollbar-hide">
+							{groups.map((g) => (
+								<button
+									key={g.id}
+									onClick={() => {
+										const groupStudentIds = users.filter((u) => g.participants.includes(u.id)).map((u) => u.id);
+										if (groupStudentIds.every((u) => teachers.includes(u))) {
+											setTeachers((prev) => prev.filter((a) => !groupStudentIds.includes(a)));
+										} else {
+											setTeachers((prev) => [...prev.filter((a) => !groupStudentIds.includes(a)), ...groupStudentIds]);
+										}
+									}}
+									className={clsx(
+										"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+										"transition duration-300 ease-in-out",
+										users.filter((u) => g.participants.includes(u.id)).every((u) => teachers.includes(u.id)) &&
+											"!bg-mti-purple-light !text-white",
+									)}>
+									{g.name}
+								</button>
+							))}
+						</div>
+						<div className="flex flex-wrap -md:justify-center gap-4">
+							{userTeachers.map((user) => (
+								<div
+									onClick={() => toggleTeacher(user)}
+									className={clsx(
+										"p-4 flex flex-col gap-2 rounded-xl border cursor-pointer w-72",
+										"transition ease-in-out duration-300",
+										teachers.includes(user.id) ? "border-mti-purple" : "border-mti-gray-platinum",
+									)}
+									key={user.id}>
+									<span className="flex flex-col gap-0 justify-center">
+										<span className="font-semibold">{user.name}</span>
+										<span className="text-sm opacity-80">{user.email}</span>
+									</span>
+									<span className="text-mti-black/80 text-sm whitespace-pre-wrap mt-2">
+										Groups:{" "}
+										{groups
+											.filter((g) => g.participants.includes(user.id))
+											.map((g) => g.name)
+											.join(", ")}
+									</span>
+								</div>
+							))}
+						</div>
+					</section>
+				)}
+
+				<div className="flex 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>
+					<Checkbox isChecked={released} onChange={() => setReleased((d) => !d)}>
+						Auto release results
+					</Checkbox>
+					<Checkbox isChecked={autoStart} onChange={() => setAutostart((d) => !d)}>
+						Auto start exam
+					</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
 					</Button>
 					{assignment && (
-						<Button
-							className="w-full max-w-[200px]"
-							color="red"
-							variant="outline"
-							onClick={deleteAssignment}
-							disabled={isLoading}
-							isLoading={isLoading}>
-							Delete
-						</Button>
+						<>
+							<Button
+								className="w-full max-w-[200px]"
+								color="green"
+								variant="outline"
+								onClick={startAssignment}
+								disabled={isLoading || moment().isAfter(startDate)}
+								isLoading={isLoading}>
+								Start
+							</Button>
+							<Button
+								className="w-full max-w-[200px]"
+								color="red"
+								variant="outline"
+								onClick={deleteAssignment}
+								disabled={isLoading}
+								isLoading={isLoading}>
+								Delete
+							</Button>
+						</>
 					)}
 					<Button
-						disabled={selectedModules.length === 0 || !name || !startDate || !endDate || assignees.length === 0}
+						disabled={
+							selectedModules.length === 0 ||
+							!name ||
+							!startDate ||
+							!endDate ||
+							assignees.length === 0 ||
+							(!useRandomExams && examIDs.length < selectedModules.length)
+						}
 						className="w-full max-w-[200px]"
 						onClick={createAssignment}
 						isLoading={isLoading}>

src/dashboards/AssignmentView.tsx

@@ -1,280 +1,434 @@
+import Button from "@/components/Low/Button";
 import ProgressBar from "@/components/Low/ProgressBar";
 import Modal from "@/components/Modal";
 import useUsers from "@/hooks/useUsers";
-import {Module} from "@/interfaces";
-import {Assignment} from "@/interfaces/results";
-import {Stat, User} from "@/interfaces/user";
+import { Module } from "@/interfaces";
+import { Assignment } from "@/interfaces/results";
+import { Stat, User } from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
-import {getExamById} from "@/utils/exams";
-import {sortByModule} from "@/utils/moduleUtils";
-import {calculateBandScore} from "@/utils/score";
-import {convertToUserSolutions} from "@/utils/stats";
+import { getExamById } from "@/utils/exams";
+import { sortByModule } from "@/utils/moduleUtils";
+import { calculateBandScore } from "@/utils/score";
+import { convertToUserSolutions } from "@/utils/stats";
+import { getUserName } from "@/utils/users";
+import axios from "axios";
 import clsx from "clsx";
-import {capitalize, uniqBy} from "lodash";
+import { capitalize, uniqBy } from "lodash";
 import moment from "moment";
-import {useRouter} from "next/router";
-import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
+import { useRouter } from "next/router";
+import {
+  BsBook,
+  BsClipboard,
+  BsHeadphones,
+  BsMegaphone,
+  BsPen,
+} from "react-icons/bs";
+import { toast } from "react-toastify";
+import { futureAssignmentFilter } from "@/utils/assignments";
 
 interface Props {
-	isOpen: boolean;
-	assignment?: Assignment;
-	onClose: () => void;
+  isOpen: boolean;
+  assignment?: Assignment;
+  onClose: () => void;
 }
 
-export default function AssignmentView({isOpen, assignment, onClose}: Props) {
-	const {users} = useUsers();
-	const router = useRouter();
+export default function AssignmentView({ isOpen, assignment, onClose }: Props) {
+  const { users } = useUsers();
+  const router = useRouter();
 
-	const setExams = useExamStore((state) => state.setExams);
-	const setShowSolutions = useExamStore((state) => state.setShowSolutions);
-	const setUserSolutions = useExamStore((state) => state.setUserSolutions);
-	const setSelectedModules = useExamStore((state) => state.setSelectedModules);
+  const setExams = useExamStore((state) => state.setExams);
+  const setShowSolutions = useExamStore((state) => state.setShowSolutions);
+  const setUserSolutions = useExamStore((state) => state.setUserSolutions);
+  const setSelectedModules = useExamStore((state) => state.setSelectedModules);
 
-	const formatTimestamp = (timestamp: string) => {
-		const date = moment(parseInt(timestamp));
-		const formatter = "YYYY/MM/DD - HH:mm";
+  const deleteAssignment = async () => {
+    if (!confirm("Are you sure you want to delete this assignment?")) return;
 
-		return date.format(formatter);
-	};
+    axios
+      .delete(`/api/assignments/${assignment?.id}`)
+      .then(() =>
+        toast.success(
+          `Successfully deleted the assignment "${assignment?.name}".`
+        )
+      )
+      .catch(() => toast.error("Something went wrong, please try again later."))
+      .finally(onClose);
+  };
 
-	const calculateAverageModuleScore = (module: Module) => {
-		if (!assignment) return -1;
+  const startAssignment = () => {
+    if (assignment) {
+      axios
+        .post(`/api/assignments/${assignment.id}/start`)
+        .then(() => {
+          toast.success(
+            `The assignment "${assignment.name}" has been started successfully!`
+          );
+        })
+        .catch((e) => {
+          console.log(e);
+          toast.error("Something went wrong, please try again later!");
+        });
+    }
+  };
 
-		const resultModuleBandScores = assignment.results.map((r) => {
-			const moduleStats = r.stats.filter((s) => s.module === module);
+  const formatTimestamp = (timestamp: string) => {
+    const date = moment(parseInt(timestamp));
+    const formatter = "YYYY/MM/DD - HH:mm";
 
-			const correct = moduleStats.reduce((acc, curr) => acc + curr.score.correct, 0);
-			const total = moduleStats.reduce((acc, curr) => acc + curr.score.total, 0);
-			return calculateBandScore(correct, total, module, r.type);
-		});
+    return date.format(formatter);
+  };
 
-		return resultModuleBandScores.length === 0 ? -1 : resultModuleBandScores.reduce((acc, curr) => acc + curr, 0) / assignment.results.length;
-	};
+  const calculateAverageModuleScore = (module: Module) => {
+    if (!assignment) return -1;
 
-	const aggregateScoresByModule = (stats: Stat[]): {module: Module; total: number; missing: number; correct: number}[] => {
-		const scores: {[key in Module]: {total: number; missing: number; correct: number}} = {
-			reading: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-			listening: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-			writing: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-			speaking: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-			level: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-		};
+    const resultModuleBandScores = assignment.results.map((r) => {
+      const moduleStats = r.stats.filter((s) => s.module === module);
 
-		stats.forEach((x) => {
-			scores[x.module!] = {
-				total: scores[x.module!].total + x.score.total,
-				correct: scores[x.module!].correct + x.score.correct,
-				missing: scores[x.module!].missing + x.score.missing,
-			};
-		});
+      const correct = moduleStats.reduce(
+        (acc, curr) => acc + curr.score.correct,
+        0
+      );
+      const total = moduleStats.reduce(
+        (acc, curr) => acc + curr.score.total,
+        0
+      );
+      return calculateBandScore(correct, total, module, r.type);
+    });
 
-		return Object.keys(scores)
-			.filter((x) => scores[x as Module].total > 0)
-			.map((x) => ({module: x as Module, ...scores[x as Module]}));
-	};
+    return resultModuleBandScores.length === 0
+      ? -1
+      : resultModuleBandScores.reduce((acc, curr) => acc + curr, 0) /
+          assignment.results.length;
+  };
 
-	const customContent = (stats: Stat[], user: string, focus: "academic" | "general") => {
-		const correct = stats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
-		const total = stats.reduce((accumulator, current) => accumulator + current.score.total, 0);
-		const aggregatedScores = aggregateScoresByModule(stats).filter((x) => x.total > 0);
+  const aggregateScoresByModule = (
+    stats: Stat[]
+  ): { module: Module; total: number; missing: number; correct: number }[] => {
+    const scores: {
+      [key in Module]: { total: number; missing: number; correct: number };
+    } = {
+      reading: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+      listening: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+      writing: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+      speaking: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+      level: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+    };
 
-		const aggregatedLevels = aggregatedScores.map((x) => ({
-			module: x.module,
-			level: calculateBandScore(x.correct, x.total, x.module, focus),
-		}));
+    stats.forEach((x) => {
+      scores[x.module!] = {
+        total: scores[x.module!].total + x.score.total,
+        correct: scores[x.module!].correct + x.score.correct,
+        missing: scores[x.module!].missing + x.score.missing,
+      };
+    });
 
-		const timeSpent = stats[0].timeSpent;
+    return Object.keys(scores)
+      .filter((x) => scores[x as Module].total > 0)
+      .map((x) => ({ module: x as Module, ...scores[x as Module] }));
+  };
 
-		const selectExam = () => {
-			const examPromises = uniqBy(stats, "exam").map((stat) => getExamById(stat.module, stat.exam));
+  const customContent = (
+    stats: Stat[],
+    user: string,
+    focus: "academic" | "general"
+  ) => {
+    const correct = stats.reduce(
+      (accumulator, current) => accumulator + current.score.correct,
+      0
+    );
+    const total = stats.reduce(
+      (accumulator, current) => accumulator + current.score.total,
+      0
+    );
+    const aggregatedScores = aggregateScoresByModule(stats).filter(
+      (x) => x.total > 0
+    );
 
-			Promise.all(examPromises).then((exams) => {
-				if (exams.every((x) => !!x)) {
-					setUserSolutions(convertToUserSolutions(stats));
-					setShowSolutions(true);
-					setExams(exams.map((x) => x!).sort(sortByModule));
-					setSelectedModules(
-						exams
-							.map((x) => x!)
-							.sort(sortByModule)
-							.map((x) => x!.module),
-					);
-					router.push("/exercises");
-				}
-			});
-		};
+    const aggregatedLevels = aggregatedScores.map((x) => ({
+      module: x.module,
+      level: calculateBandScore(x.correct, x.total, x.module, focus),
+    }));
 
-		const content = (
-			<>
-				<div className="w-full flex justify-between -md:items-center 2xl:items-center">
-					<div className="flex md:flex-col 2xl:flex-row md:gap-1 -md:gap-2 2xl:gap-2 -md:items-center 2xl:items-center">
-						<span className="font-medium">{formatTimestamp(stats[0].date.toString())}</span>
-						{timeSpent && (
-							<>
-								<span className="md:hidden 2xl:flex">• </span>
-								<span className="text-sm">{Math.floor(timeSpent / 60)} minutes</span>
-							</>
-						)}
-					</div>
-					<span
-						className={clsx(
-							correct / total >= 0.7 && "text-mti-purple",
-							correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
-							correct / total < 0.3 && "text-mti-rose",
-						)}>
-						Level{" "}
-						{(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)}
-					</span>
-				</div>
+    const timeSpent = stats[0].timeSpent;
 
-				<div className="w-full flex flex-col gap-1">
-					<div className="grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2">
-						{aggregatedLevels.map(({module, level}) => (
-							<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">{level.toFixed(1)}</span>
-							</div>
-						))}
-					</div>
-				</div>
-			</>
-		);
+    const selectExam = () => {
+      const examPromises = uniqBy(stats, "exam").map((stat) =>
+        getExamById(stat.module, stat.exam)
+      );
 
-		return (
-			<div className="flex flex-col gap-2">
-				<span>
-					{(() => {
-						const student = users.find((u) => u.id === user);
-						return `${student?.name} (${student?.email})`;
-					})()}
-				</span>
-				<div
-					key={user}
-					className={clsx(
-						"flex flex-col gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:hidden",
-						correct / total >= 0.7 && "hover:border-mti-purple",
-						correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
-						correct / total < 0.3 && "hover:border-mti-rose",
-					)}
-					onClick={selectExam}
-					role="button">
-					{content}
-				</div>
-				<div
-					key={user}
-					className={clsx(
-						"flex flex-col gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:tooltip md:hidden",
-						correct / total >= 0.7 && "hover:border-mti-purple",
-						correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
-						correct / total < 0.3 && "hover:border-mti-rose",
-					)}
-					data-tip="Your screen size is too small to view previous exams."
-					role="button">
-					{content}
-				</div>
-			</div>
-		);
-	};
+      Promise.all(examPromises).then((exams) => {
+        if (exams.every((x) => !!x)) {
+          setUserSolutions(convertToUserSolutions(stats));
+          setShowSolutions(true);
+          setExams(exams.map((x) => x!).sort(sortByModule));
+          setSelectedModules(
+            exams
+              .map((x) => x!)
+              .sort(sortByModule)
+              .map((x) => x!.module)
+          );
+          router.push("/exercises");
+        }
+      });
+    };
 
-	return (
-		<Modal isOpen={isOpen} onClose={onClose} title={assignment?.name}>
-			<div className="mt-4 flex flex-col w-full gap-4">
-				<ProgressBar
-					color="purple"
-					label={`${assignment?.results.length}/${assignment?.assignees.length} assignees completed`}
-					className="h-6"
-					textClassName={
-						(assignment?.results.length || 0) / (assignment?.assignees.length || 1) < 0.5 ? "!text-mti-gray-dim font-light" : "text-white"
-					}
-					percentage={((assignment?.results.length || 0) / (assignment?.assignees.length || 1)) * 100}
-				/>
-				<div className="flex gap-8 items-start">
-					<div className="flex flex-col gap-2">
-						<span>Start Date: {moment(assignment?.startDate).format("DD/MM/YY, HH:mm")}</span>
-						<span>End Date: {moment(assignment?.endDate).format("DD/MM/YY, HH:mm")}</span>
-					</div>
-					<span>
-						Assignees:{" "}
-						{users
-							.filter((u) => assignment?.assignees.includes(u.id))
-							.map((u) => `${u.name} (${u.email})`)
-							.join(", ")}
-					</span>
-				</div>
-				<div className="flex flex-col gap-2">
-					<span className="text-xl font-bold">Average Scores</span>
-					<div className="grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2">
-						{assignment?.exams.map(({module}) => (
-							<div
-								data-tip={capitalize(module)}
-								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 tooltip",
-									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" />}
-								{calculateAverageModuleScore(module) > -1 && (
-									<span className="text-sm">{calculateAverageModuleScore(module).toFixed(1)}</span>
-								)}
-							</div>
-						))}
-					</div>
-				</div>
-				<div className="flex flex-col gap-2">
-					<span className="text-xl font-bold">
-						Results ({assignment?.results.length}/{assignment?.assignees.length})
-					</span>
-					<div>
-						{assignment && assignment?.results.length > 0 && (
-							<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 w-full gap-4 xl:gap-6">
-								{assignment.results.map((r) => customContent(r.stats, r.user, r.type))}
-							</div>
-						)}
-						{assignment && assignment?.results.length === 0 && <span className="font-semibold ml-1">No results yet...</span>}
-					</div>
-				</div>
-			</div>
-		</Modal>
-	);
+    const content = (
+      <>
+        <div className="-md:items-center flex w-full justify-between 2xl:items-center">
+          <div className="-md:gap-2 -md:items-center flex md:flex-col md:gap-1 2xl:flex-row 2xl:items-center 2xl:gap-2">
+            <span className="font-medium">
+              {formatTimestamp(stats[0].date.toString())}
+            </span>
+            {timeSpent && (
+              <>
+                <span className="md:hidden 2xl:flex">• </span>
+                <span className="text-sm">
+                  {Math.floor(timeSpent / 60)} minutes
+                </span>
+              </>
+            )}
+          </div>
+          <span
+            className={clsx(
+              correct / total >= 0.7 && "text-mti-purple",
+              correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
+              correct / total < 0.3 && "text-mti-rose"
+            )}
+          >
+            Level{" "}
+            {(
+              aggregatedLevels.reduce(
+                (accumulator, current) => accumulator + current.level,
+                0
+              ) / aggregatedLevels.length
+            ).toFixed(1)}
+          </span>
+        </div>
+
+        <div className="flex w-full flex-col gap-1">
+          <div className="-md:mt-2 grid w-full grid-cols-4 place-items-start gap-2">
+            {aggregatedLevels.map(({ module, level }) => (
+              <div
+                key={module}
+                className={clsx(
+                  "-md:px-4 flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
+                  module === "reading" && "bg-ielts-reading",
+                  module === "listening" && "bg-ielts-listening",
+                  module === "writing" && "bg-ielts-writing",
+                  module === "speaking" && "bg-ielts-speaking",
+                  module === "level" && "bg-ielts-level"
+                )}
+              >
+                {module === "reading" && <BsBook className="h-4 w-4" />}
+                {module === "listening" && <BsHeadphones className="h-4 w-4" />}
+                {module === "writing" && <BsPen className="h-4 w-4" />}
+                {module === "speaking" && <BsMegaphone className="h-4 w-4" />}
+                {module === "level" && <BsClipboard className="h-4 w-4" />}
+                <span className="text-sm">{level.toFixed(1)}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </>
+    );
+
+    return (
+      <div className="flex flex-col gap-2">
+        <span>
+          {(() => {
+            const student = users.find((u) => u.id === user);
+            return `${student?.name} (${student?.email})`;
+          })()}
+        </span>
+        <div
+          key={user}
+          className={clsx(
+            "border-mti-gray-platinum -md:hidden flex cursor-pointer flex-col gap-4 rounded-xl border p-4 transition duration-300 ease-in-out",
+            correct / total >= 0.7 && "hover:border-mti-purple",
+            correct / total >= 0.3 &&
+              correct / total < 0.7 &&
+              "hover:border-mti-red",
+            correct / total < 0.3 && "hover:border-mti-rose"
+          )}
+          onClick={selectExam}
+          role="button"
+        >
+          {content}
+        </div>
+        <div
+          key={user}
+          className={clsx(
+            "border-mti-gray-platinum -md:tooltip flex cursor-pointer flex-col gap-4 rounded-xl border p-4 transition duration-300 ease-in-out md:hidden",
+            correct / total >= 0.7 && "hover:border-mti-purple",
+            correct / total >= 0.3 &&
+              correct / total < 0.7 &&
+              "hover:border-mti-red",
+            correct / total < 0.3 && "hover:border-mti-rose"
+          )}
+          data-tip="Your screen size is too small to view previous exams."
+          role="button"
+        >
+          {content}
+        </div>
+      </div>
+    );
+  };
+
+  const shouldRenderStart = () => {
+    if (assignment) {
+      if (futureAssignmentFilter(assignment)) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={assignment?.name}>
+      <div className="mt-4 flex w-full flex-col gap-4">
+        <ProgressBar
+          color="purple"
+          label={`${assignment?.results.length}/${assignment?.assignees.length} assignees completed`}
+          className="h-6"
+          textClassName={
+            (assignment?.results.length || 0) /
+              (assignment?.assignees.length || 1) <
+            0.5
+              ? "!text-mti-gray-dim font-light"
+              : "text-white"
+          }
+          percentage={
+            ((assignment?.results.length || 0) /
+              (assignment?.assignees.length || 1)) *
+            100
+          }
+        />
+        <div className="flex items-start gap-8">
+          <div className="flex flex-col gap-2">
+            <span>
+              Start Date:{" "}
+              {moment(assignment?.startDate).format("DD/MM/YY, HH:mm")}
+            </span>
+            <span>
+              End Date: {moment(assignment?.endDate).format("DD/MM/YY, HH:mm")}
+            </span>
+          </div>
+          <div className="flex flex-col gap-2">
+            <span>
+              Assignees:{" "}
+              {users
+                .filter((u) => assignment?.assignees.includes(u.id))
+                .map((u) => `${u.name} (${u.email})`)
+                .join(", ")}
+            </span>
+            <span>
+              Assigner:{" "}
+              {getUserName(users.find((x) => x.id === assignment?.assigner))}
+            </span>
+          </div>
+        </div>
+        <div className="flex flex-col gap-2">
+          <span className="text-xl font-bold">Average Scores</span>
+          <div className="-md:mt-2 flex w-full items-center gap-4">
+            {assignment &&
+              uniqBy(assignment.exams, (x) => x.module).map(({ module }) => (
+                <div
+                  data-tip={capitalize(module)}
+                  key={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" />}
+                  {calculateAverageModuleScore(module) > -1 && (
+                    <span className="text-sm">
+                      {calculateAverageModuleScore(module).toFixed(1)}
+                    </span>
+                  )}
+                </div>
+              ))}
+          </div>
+        </div>
+        <div className="flex flex-col gap-2">
+          <span className="text-xl font-bold">
+            Results ({assignment?.results.length}/{assignment?.assignees.length}
+            )
+          </span>
+          <div>
+            {assignment && assignment?.results.length > 0 && (
+              <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 xl:gap-6">
+                {assignment.results.map((r) =>
+                  customContent(r.stats, r.user, r.type)
+                )}
+              </div>
+            )}
+            {assignment && assignment?.results.length === 0 && (
+              <span className="ml-1 font-semibold">No results yet...</span>
+            )}
+          </div>
+        </div>
+
+        <div className="flex gap-4 w-full items-center justify-end">
+          {assignment &&
+            (assignment.results.length === assignment.assignees.length ||
+              moment().isAfter(moment(assignment.endDate))) && (
+              <Button
+                variant="outline"
+                color="red"
+                className="w-full max-w-[200px]"
+                onClick={deleteAssignment}
+              >
+                Delete
+              </Button>
+            )}
+          {/** if the assignment is not deemed as active yet, display start */}
+          {shouldRenderStart() && (
+            <Button
+              variant="outline"
+              color="green"
+              className="w-full max-w-[200px]"
+              onClick={startAssignment}
+            >
+              Start
+            </Button>
+          )}
+          <Button onClick={onClose} className="w-full max-w-[200px]">
+            Close
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
 }

src/dashboards/Corporate.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable @next/next/no-img-element */
 import Modal from "@/components/Modal";
-import useStats from "@/hooks/useStats";
-import useUsers from "@/hooks/useUsers";
-import {Group, Stat, User} from "@/interfaces/user";
+import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
+import useUsers, {  userHashStudent, userHashTeacher, userHashCorporate} from "@/hooks/useUsers";
+import {CorporateUser, Group, MasterCorporateUser, Stat, 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 {useEffect, useMemo, useState} from "react";
 import {
 	BsArrowLeft,
 	BsClipboard2Data,
@@ -20,10 +20,16 @@ import {
 	BsPersonFillGear,
 	BsPersonGear,
 	BsPencilSquare,
+	BsPersonBadge,
+	BsPersonCheck,
+	BsPeople,
+	BsArrowRepeat,
+	BsPlus,
+	BsEnvelopePaper,
 } from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
-import {calculateAverageLevel, calculateBandScore} from "@/utils/score";
+import {averageLevelCalculator, calculateAverageLevel, calculateBandScore} from "@/utils/score";
 import {MODULE_ARRAY} from "@/utils/moduleUtils";
 import {Module} from "@/interfaces";
 import {groupByExam} from "@/utils/stats";
@@ -31,29 +37,159 @@ import IconCard from "./IconCard";
 import GroupList from "@/pages/(admin)/Lists/GroupList";
 import useFilterStore from "@/stores/listFilterStore";
 import {useRouter} from "next/router";
+import useCodes from "@/hooks/useCodes";
+import {getUserCorporate} from "@/utils/groups";
+import useAssignments from "@/hooks/useAssignments";
+import {Assignment} from "@/interfaces/results";
+import AssignmentView from "./AssignmentView";
+import AssignmentCreator from "./AssignmentCreator";
+import clsx from "clsx";
+import AssignmentCard from "./AssignmentCard";
+import {createColumnHelper} from "@tanstack/react-table";
+import Checkbox from "@/components/Low/Checkbox";
+import List from "@/components/List";
+import {getUserCompanyName} from "@/resources/user";
+import {futureAssignmentFilter, pastAssignmentFilter, archivedAssignmentFilter, activeAssignmentFilter} from "@/utils/assignments";
+import useUserBalance from "@/hooks/useUserBalance";
+import AssignmentsPage from "./views/AssignmentsPage";
 
 interface Props {
-	user: User;
+	user: CorporateUser;
+	linkedCorporate?: CorporateUser | MasterCorporateUser;
 }
 
-export default function CorporateDashboard({user}: Props) {
-	const [page, setPage] = useState("");
+type StudentPerformanceItem = User & {corporateName: string; group: string};
+const StudentPerformanceList = ({items, stats, users}: {items: StudentPerformanceItem[]; stats: Stat[]; users: User[]}) => {
+	const [isShowingAmount, setIsShowingAmount] = useState(false);
+
+	const columnHelper = createColumnHelper<StudentPerformanceItem>();
+
+	const columns = [
+		columnHelper.accessor("name", {
+			header: "Student Name",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("email", {
+			header: "E-mail",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("demographicInformation.passport_id", {
+			header: "ID",
+			cell: (info) => info.getValue() || "N/A",
+		}),
+		columnHelper.accessor("group", {
+			header: "Group",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("corporateName", {
+			header: "Corporate",
+			cell: (info) => info.getValue() || "N/A",
+		}),
+		columnHelper.accessor("levels.reading", {
+			header: "Reading",
+			cell: (info) =>
+				!isShowingAmount
+					? info.getValue() || 0
+					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "reading" && x.user === info.row.original.id))).length} exams`,
+		}),
+		columnHelper.accessor("levels.listening", {
+			header: "Listening",
+			cell: (info) =>
+				!isShowingAmount
+					? info.getValue() || 0
+					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "listening" && x.user === info.row.original.id))).length} exams`,
+		}),
+		columnHelper.accessor("levels.writing", {
+			header: "Writing",
+			cell: (info) =>
+				!isShowingAmount
+					? info.getValue() || 0
+					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "writing" && x.user === info.row.original.id))).length} exams`,
+		}),
+		columnHelper.accessor("levels.speaking", {
+			header: "Speaking",
+			cell: (info) =>
+				!isShowingAmount
+					? info.getValue() || 0
+					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "speaking" && x.user === info.row.original.id))).length} exams`,
+		}),
+		columnHelper.accessor("levels.level", {
+			header: "Level",
+			cell: (info) =>
+				!isShowingAmount
+					? info.getValue() || 0
+					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "level" && x.user === info.row.original.id))).length} exams`,
+		}),
+		columnHelper.accessor("levels", {
+			id: "overall_level",
+			header: "Overall",
+			cell: (info) =>
+				!isShowingAmount
+					? averageLevelCalculator(
+							users,
+							stats.filter((x) => x.user === info.row.original.id),
+					  ).toFixed(1)
+					: `${Object.keys(groupByExam(stats.filter((x) => x.user === info.row.original.id))).length} exams`,
+		}),
+	];
+
+	return (
+		<div className="flex flex-col gap-4 w-full h-full">
+			<Checkbox isChecked={isShowingAmount} onChange={setIsShowingAmount}>
+				Show Utilization
+			</Checkbox>
+			<List<StudentPerformanceItem>
+				data={items.sort(
+					(a, b) =>
+						averageLevelCalculator(
+							users,
+							stats.filter((x) => x.user === b.id),
+						) -
+						averageLevelCalculator(
+							users,
+							stats.filter((x) => x.user === a.id),
+						),
+				)}
+				columns={columns}
+			/>
+		</div>
+	);
+};
+
+
+export default function CorporateDashboard({user, linkedCorporate}: Props) {
 	const [selectedUser, setSelectedUser] = useState<User>();
 	const [showModal, setShowModal] = useState(false);
 
-	const {stats} = useStats();
-	const {users, reload} = useUsers();
-	const {groups} = useGroups(user.id);
+	const {data: stats} = useFilterRecordsByUser<Stat[]>();
+	const {groups} = useGroups({admin: user.id});
+	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({corporate: user.id});
+	const {balance} = useUserBalance();
+
+	const {users: students, reload: reloadStudents, isLoading: isStudentsLoading} = useUsers(userHashStudent);
+	const {users: teachers, reload: reloadTeachers, isLoading: isTeachersLoading} = useUsers(userHashTeacher);
 
 	const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
 	const router = useRouter();
 
-	useEffect(() => {
-		setShowModal(!!selectedUser && page === "");
-	}, [selectedUser, page]);
+	const assignmentsGroups = useMemo(() => groups.filter((x) => x.admin === user.id || x.participants.includes(user.id)), [groups, user.id]);
 
-	const studentFilter = (user: User) => user.type === "student" && groups.flatMap((g) => g.participants).includes(user.id);
-	const teacherFilter = (user: User) => user.type === "teacher" && groups.flatMap((g) => g.participants).includes(user.id);
+	const assignmentsUsers = useMemo(
+		() =>
+			[...teachers, ...students].filter((x) =>
+				!!selectedUser
+					? groups
+							.filter((g) => g.admin === selectedUser.id)
+							.flatMap((g) => g.participants)
+							.includes(x.id) || false
+					: groups.flatMap((g) => g.participants).includes(x.id),
+			),
+		[groups, teachers, students, selectedUser],
+	);
+
+	useEffect(() => {
+		setShowModal(!!selectedUser && router.asPath === "/#");
+	}, [selectedUser, router.asPath]);
 
 	const getStatsByStudent = (user: User) => stats.filter((s) => s.user === user.id);
 
@@ -69,60 +205,6 @@ export default function CorporateDashboard({user}: Props) {
 		</div>
 	);
 
-	const StudentsList = () => {
-		const filter = (x: User) =>
-			x.type === "student" &&
-			(!!selectedUser
-				? groups
-						.filter((g) => g.admin === selectedUser.id)
-						.flatMap((g) => g.participants)
-						.includes(x.id) || false
-				: groups.flatMap((g) => g.participants).includes(x.id));
-
-		return (
-			<>
-				<div className="flex flex-col gap-4">
-					<div
-						onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
-						<BsArrowLeft className="text-xl" />
-						<span>Back</span>
-					</div>
-					<h2 className="text-2xl font-semibold">Students ({users.filter(filter).length})</h2>
-				</div>
-
-				<UserList user={user} filters={[filter]} />
-			</>
-		);
-	};
-
-	const TeachersList = () => {
-		const filter = (x: User) =>
-			x.type === "teacher" &&
-			(!!selectedUser
-				? groups
-						.filter((g) => g.admin === selectedUser.id)
-						.flatMap((g) => g.participants)
-						.includes(x.id) || false
-				: groups.flatMap((g) => g.participants).includes(x.id));
-
-		return (
-			<>
-				<div className="flex flex-col gap-4">
-					<div
-						onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
-						<BsArrowLeft className="text-xl" />
-						<span>Back</span>
-					</div>
-					<h2 className="text-2xl font-semibold">Teachers ({users.filter(filter).length})</h2>
-				</div>
-
-				<UserList user={user} filters={[filter]} />
-			</>
-		);
-	};
-
 	const GroupsList = () => {
 		const filter = (x: Group) => x.admin === user.id || x.participants.includes(user.id);
 
@@ -130,7 +212,7 @@ export default function CorporateDashboard({user}: Props) {
 			<>
 				<div className="flex flex-col gap-4">
 					<div
-						onClick={() => setPage("")}
+						onClick={() => router.push("/")}
 						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>
@@ -143,16 +225,54 @@ export default function CorporateDashboard({user}: Props) {
 		);
 	};
 
+	const StudentPerformancePage = () => {
+		const performanceStudents = students.map((u) => ({
+			...u,
+			group: groups.find((x) => x.participants.includes(u.id))?.name || "N/A",
+			corporateName: getUserCompanyName(user, [], groups),
+		}));
+
+		return (
+			<>
+				<div className="w-full flex justify-between items-center">
+					<div
+						onClick={() => router.push("/")}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<div
+						onClick={reloadStudents}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<span>Reload</span>
+						<BsArrowRepeat className={clsx("text-xl", isStudentsLoading && "animate-spin")} />
+					</div>
+				</div>
+				<StudentPerformanceList items={performanceStudents} stats={stats} users={students} />
+			</>
+		);
+	};
+
 	const averageLevelCalculator = (studentStats: Stat[]) => {
 		const formattedStats = studentStats
-			.map((s) => ({focus: users.find((u) => u.id === s.user)?.focus, score: s.score, module: s.module}))
+			.map((s) => ({
+				focus: students.find((u) => u.id === s.user)?.focus,
+				score: s.score,
+				module: s.module,
+			}))
 			.filter((f) => !!f.focus);
 		const bandScores = formattedStats.map((s) => ({
 			module: s.module,
 			level: calculateBandScore(s.score.correct, s.score.total, s.module, s.focus!),
 		}));
 
-		const levels: {[key in Module]: number} = {reading: 0, listening: 0, writing: 0, speaking: 0, level: 0};
+		const levels: {[key in Module]: number} = {
+			reading: 0,
+			listening: 0,
+			writing: 0,
+			speaking: 0,
+			level: 0,
+		};
 		bandScores.forEach((b) => (levels[b.module] += b.level));
 
 		return calculateAverageLevel(levels);
@@ -160,19 +280,26 @@ export default function CorporateDashboard({user}: Props) {
 
 	const DefaultDashboard = () => (
 		<>
-			<section className="flex flex-wrap gap-2 items-center -lg:justify-center lg:justify-between text-center">
+			{!!linkedCorporate && (
+				<div className="absolute top-4 right-4 bg-neutral-200 px-2 rounded-lg py-1">
+					Linked to: <b>{linkedCorporate?.corporateInformation?.companyInformation.name || linkedCorporate.name}</b>
+				</div>
+			)}
+			<section className="grid grid-cols-5 -md:grid-cols-2 gap-4 text-center">
 				<IconCard
-					onClick={() => setPage("students")}
+					onClick={() => router.push("/#students")}
+					isLoading={isStudentsLoading}
 					Icon={BsPersonFill}
 					label="Students"
-					value={users.filter(studentFilter).length}
+					value={students.length}
 					color="purple"
 				/>
 				<IconCard
-					onClick={() => setPage("teachers")}
+					onClick={() => router.push("/#teachers")}
+					isLoading={isTeachersLoading}
 					Icon={BsPencilSquare}
 					label="Teachers"
-					value={users.filter(teacherFilter).length}
+					value={teachers.length}
 					color="purple"
 				/>
 				<IconCard
@@ -183,25 +310,51 @@ export default function CorporateDashboard({user}: Props) {
 				/>
 				<IconCard
 					Icon={BsPaperclip}
+					isLoading={isStudentsLoading}
 					label="Average Level"
 					value={averageLevelCalculator(stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user))).toFixed(1)}
 					color="purple"
 				/>
-				<IconCard onClick={() => setPage("groups")} Icon={BsPersonAdd} label="Groups" value={groups.length} color="purple" />
+				<IconCard onClick={() => router.push("/#groups")} Icon={BsPeople} label="Groups" value={groups.length} color="purple" />
+				<IconCard
+					Icon={BsPersonCheck}
+					label="User Balance"
+					value={`${balance}/${user.corporateInformation?.companyInformation?.userAmount || 0}`}
+					color="purple"
+				/>
 				<IconCard
 					Icon={BsClock}
 					label="Expiration Date"
 					value={user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy") : "Unlimited"}
 					color="rose"
 				/>
+				<IconCard
+					Icon={BsPersonFillGear}
+					isLoading={isStudentsLoading}
+					label="Student Performance"
+					value={students.length}
+					color="purple"
+					onClick={() => router.push("/#studentsPerformance")}
+				/>
+				<button
+					disabled={isAssignmentsLoading}
+					onClick={() => router.push("/#assignments")}
+					className="bg-white col-span-2 rounded-xl shadow p-4 flex flex-col gap-4 items-center w-96 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
+					<BsEnvelopePaper className="text-6xl text-mti-purple-light" />
+					<span className="flex flex-col gap-1 items-center text-xl">
+						<span className="text-lg">Assignments</span>
+						<span className="font-semibold text-mti-purple-light">
+							{isAssignmentsLoading ? "Loading..." : assignments.filter((a) => !a.archived).length}
+						</span>
+					</span>
+				</button>
 			</section>
 
 			<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Latest students</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter(studentFilter)
+						{students
 							.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
@@ -211,8 +364,7 @@ export default function CorporateDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Latest teachers</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter(teacherFilter)
+						{teachers
 							.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
@@ -222,8 +374,7 @@ export default function CorporateDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Highest level students</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter(studentFilter)
+						{students
 							.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
@@ -233,8 +384,7 @@ export default function CorporateDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Highest exam count students</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter(studentFilter)
+						{students
 							.sort(
 								(a, b) =>
 									Object.keys(groupByExam(getStatsByStudent(b))).length - Object.keys(groupByExam(getStatsByStudent(a))).length,
@@ -258,7 +408,8 @@ export default function CorporateDashboard({user}: Props) {
 								loggedInUser={user}
 								onClose={(shouldReload) => {
 									setSelectedUser(undefined);
-									if (shouldReload) reload();
+									if (shouldReload && selectedUser!.type === "student") reloadStudents();
+									if (shouldReload && selectedUser!.type === "teacher") reloadTeachers();
 								}}
 								onViewStudents={
 									selectedUser.type === "corporate" || selectedUser.type === "teacher"
@@ -306,10 +457,54 @@ export default function CorporateDashboard({user}: Props) {
 					)}
 				</>
 			</Modal>
-			{page === "students" && <StudentsList />}
-			{page === "teachers" && <TeachersList />}
-			{page === "groups" && <GroupsList />}
-			{page === "" && <DefaultDashboard />}
+			{router.asPath === "/#students" && (
+				<UserList
+					user={user}
+					type="student"
+					renderHeader={(total) => (
+						<div className="flex flex-col gap-4">
+							<div
+								onClick={() => router.push("/")}
+								className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+								<BsArrowLeft className="text-xl" />
+								<span>Back</span>
+							</div>
+							<h2 className="text-2xl font-semibold">Students ({total})</h2>
+						</div>
+					)}
+				/>
+			)}
+			{router.asPath === "/#teachers" && (
+				<UserList
+					user={user}
+					type="teacher"
+					renderHeader={(total) => (
+						<div className="flex flex-col gap-4">
+							<div
+								onClick={() => router.push("/")}
+								className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+								<BsArrowLeft className="text-xl" />
+								<span>Back</span>
+							</div>
+							<h2 className="text-2xl font-semibold">Teachers ({total})</h2>
+						</div>
+					)}
+				/>
+			)}
+			{router.asPath === "/#groups" && <GroupsList />}
+			{router.asPath === "/#assignments" && (
+				<AssignmentsPage
+					assignments={assignments}
+					user={user}
+					groups={assignmentsGroups}
+					users={assignmentsUsers}
+					reloadAssignments={reloadAssignments}
+					isLoading={isAssignmentsLoading}
+					onBack={() => router.push("/")}
+				/>
+			)}
+			{router.asPath === "/#studentsPerformance" && <StudentPerformancePage />}
+			{router.asPath === "/" && <DefaultDashboard />}
 		</>
 	);
 }

src/dashboards/CorporateStudentsLevels.tsx

@@ -0,0 +1,96 @@
+import React, {useMemo} from "react";
+import useUsers, { userHashStudent, userHashTeacher, userHashCorporate } from "@/hooks/useUsers";
+import useGroups from "@/hooks/useGroups";
+import {User} from "@/interfaces/user";
+import Select from "@/components/Low/Select";
+import ProgressBar from "@/components/Low/ProgressBar";
+import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
+import {MODULE_ARRAY} from "@/utils/moduleUtils";
+import {capitalize} from "lodash";
+import {getLevelLabel} from "@/utils/score";
+
+const Card = ({user}: {user: User}) => {
+	return (
+		<div className="border-mti-gray-platinum flex flex-col h-fit w-full cursor-pointer 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="text-xl font-semibold">{user.name}</h3>
+			</div>
+			<div className="flex w-full gap-3 flex-wrap">
+				{MODULE_ARRAY.map((module) => {
+					const desiredLevel = user.desiredLevels[module] || 9;
+					const level = user.levels[module] || 0;
+					return (
+						<div className="border-mti-gray-anti-flash flex flex-col gap-2 rounded-xl border p-4 min-w-[250px]" key={module}>
+							<div className="flex items-center gap-2 md:gap-3">
+								<div className="bg-mti-gray-smoke flex h-8 w-8 items-center justify-center rounded-lg md:h-12 md:w-12 md:rounded-xl">
+									{module === "reading" && <BsBook className="text-ielts-reading h-4 w-4 md:h-5 md:w-5" />}
+									{module === "listening" && <BsHeadphones className="text-ielts-listening h-4 w-4 md:h-5 md:w-5" />}
+									{module === "writing" && <BsPen className="text-ielts-writing h-4 w-4 md:h-5 md:w-5" />}
+									{module === "speaking" && <BsMegaphone className="text-ielts-speaking h-4 w-4 md:h-5 md:w-5" />}
+									{module === "level" && <BsClipboard className="text-ielts-level h-4 w-4 md:h-5 md:w-5" />}
+								</div>
+								<div className="flex w-full flex-col">
+									<span className="text-sm font-bold md:font-extrabold w-full">{capitalize(module)}</span>
+									<div className="text-mti-gray-dim text-sm font-normal">
+										{module === "level" && <span>English Level: {getLevelLabel(level).join(" / ")}</span>}
+										{module !== "level" && (
+											<div className="flex flex-col">
+												<span>Level {level} / Level 9</span>
+												<span>Desired Level: {desiredLevel}</span>
+											</div>
+										)}
+									</div>
+								</div>
+							</div>
+							<div className="md:pl-14">
+								<ProgressBar
+									color={module}
+									label=""
+									mark={Math.round((desiredLevel * 100) / 9)}
+									markLabel={`Desired Level: ${desiredLevel}`}
+									percentage={Math.round((level * 100) / 9)}
+									className="h-2 w-full"
+								/>
+							</div>
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+};
+
+const CorporateStudentsLevels = () => {
+	const [corporateId, setCorporateId] = React.useState<string>("");
+
+	const {users: students} = useUsers(userHashStudent);
+	const {users: corporates} = useUsers(userHashCorporate);
+
+	const corporate = useMemo(() => corporates.find((u) => u.id === corporateId) || corporates[0], [corporates, corporateId]);
+
+	return (
+		<>
+			<Select
+				options={corporates.map((x: User) => ({
+					value: x.id,
+					label: `${x.name} - ${x.email}`,
+				}))}
+				value={corporate ? {value: corporate.id, label: corporate.name} : null}
+				onChange={(value) => setCorporateId(value?.value!)}
+				styles={{
+					menuPortal: (base) => ({...base, zIndex: 9999}),
+					option: (styles, state) => ({
+						...styles,
+						backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+						color: state.isFocused ? "black" : styles.color,
+					}),
+				}}
+			/>
+			{students.map((u) => (
+				<Card user={u} key={u.id} />
+			))}
+		</>
+	);
+};
+
+export default CorporateStudentsLevels;

src/dashboards/IconCard.tsx

@@ -4,26 +4,39 @@ import {IconType} from "react-icons";
 interface Props {
 	Icon: IconType;
 	label: string;
-	value: string | number;
-	color: "purple" | "rose" | "red";
+	value?: string | number;
+	color: "purple" | "rose" | "red" | "green";
+	tooltip?: string;
 	onClick?: () => void;
+	isSelected?: boolean;
+	isLoading?: boolean;
+	className?: string;
 }
 
-export default function IconCard({Icon, label, value, color, onClick}: Props) {
+export default function IconCard({Icon, label, value, color, tooltip, onClick, className, isLoading, isSelected}: Props) {
 	const colorClasses: {[key in typeof color]: string} = {
-		purple: "text-mti-purple-light",
-		red: "text-mti-red-light",
-		rose: "text-mti-rose-light",
+		purple: "mti-purple-light",
+		red: "mti-red-light",
+		rose: "mti-rose-light",
+		green: "mti-green-light",
 	};
 
 	return (
 		<div
 			onClick={onClick}
-			className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
-			<Icon className={clsx("text-6xl", colorClasses[color])} />
+			className={clsx(
+				"bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300",
+				tooltip && "tooltip tooltip-bottom",
+				isSelected && `border border-solid border-${colorClasses[color]}`,
+				className,
+			)}
+			data-tip={tooltip}>
+			<Icon className={clsx("text-6xl", `text-${colorClasses[color]}`)} />
 			<span className="flex flex-col gap-1 items-center text-xl">
 				<span className="text-lg">{label}</span>
-				<span className={clsx("font-semibold", colorClasses[color])}>{value}</span>
+				<span className={clsx("font-semibold", `text-${colorClasses[color]}`, isLoading && "animate-pulse")}>
+					{isLoading ? "..." : value}
+				</span>
 			</span>
 		</div>
 	);

src/dashboards/MasterCorporate.tsx

@@ -0,0 +1,688 @@
+/* eslint-disable @next/next/no-img-element */
+import Modal from "@/components/Modal";
+import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
+import useUsers, {  userHashStudent, userHashTeacher, userHashCorporate } from "@/hooks/useUsers";
+import {CorporateUser, Group, MasterCorporateUser, Stat, User} from "@/interfaces/user";
+import UserList from "@/pages/(admin)/Lists/UserList";
+import {dateSorter} from "@/utils";
+import moment from "moment";
+import {useEffect, useState, useMemo} from "react";
+import {
+	BsArrowLeft,
+	BsClipboard2Data,
+	BsClock,
+	BsPaperclip,
+	BsPersonFill,
+	BsPencilSquare,
+	BsPersonCheck,
+	BsPeople,
+	BsBank,
+	BsEnvelopePaper,
+	BsArrowRepeat,
+	BsPlus,
+	BsPersonFillGear,
+	BsFilter,
+	BsDatabase,
+} from "react-icons/bs";
+import UserCard from "@/components/UserCard";
+import useGroups from "@/hooks/useGroups";
+
+import {averageLevelCalculator, calculateAverageLevel, calculateBandScore} from "@/utils/score";
+import {MODULE_ARRAY} from "@/utils/moduleUtils";
+import {Module} from "@/interfaces";
+import {groupByExam} from "@/utils/stats";
+import IconCard from "./IconCard";
+import GroupList from "@/pages/(admin)/Lists/GroupList";
+import useFilterStore from "@/stores/listFilterStore";
+import {useRouter} from "next/router";
+import useCodes from "@/hooks/useCodes";
+import useAssignments from "@/hooks/useAssignments";
+import {Assignment} from "@/interfaces/results";
+import AssignmentView from "./AssignmentView";
+import AssignmentCreator from "./AssignmentCreator";
+import clsx from "clsx";
+import AssignmentCard from "./AssignmentCard";
+import {createColumn, createColumnHelper} from "@tanstack/react-table";
+import List from "@/components/List";
+import {getUserCorporate} from "@/utils/groups";
+import {getCorporateUser, getUserCompanyName} from "@/resources/user";
+import Checkbox from "@/components/Low/Checkbox";
+import {groupBy, uniq, uniqBy} from "lodash";
+import Select from "@/components/Low/Select";
+import {Menu, MenuButton, MenuItem, MenuItems} from "@headlessui/react";
+import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
+import MasterStatistical from "./MasterStatistical";
+import {futureAssignmentFilter, pastAssignmentFilter, archivedAssignmentFilter, activeAssignmentFilter} from "@/utils/assignments";
+import useUserBalance from "@/hooks/useUserBalance";
+import AssignmentsPage from "./views/AssignmentsPage";
+
+interface Props {
+	user: MasterCorporateUser;
+}
+
+type StudentPerformanceItem = User & {
+	corporate?: CorporateUser;
+	group?: Group;
+};
+const StudentPerformanceList = ({items, stats, users, groups}: {items: StudentPerformanceItem[]; stats: Stat[]; users: User[]; groups: Group[]}) => {
+	const [isShowingAmount, setIsShowingAmount] = useState(false);
+	const [availableCorporates] = useState(
+		uniqBy(
+			items.map((x) => x.corporate),
+			"id",
+		),
+	);
+	const [availableGroups] = useState(
+		uniqBy(
+			items.map((x) => x.group),
+			"id",
+		),
+	);
+
+	const [selectedCorporate, setSelectedCorporate] = useState<CorporateUser | null | undefined>(null);
+	const [selectedGroup, setSelectedGroup] = useState<Group | null | undefined>(null);
+
+	const columnHelper = createColumnHelper<StudentPerformanceItem>();
+
+	const columns = [
+		columnHelper.accessor("name", {
+			header: "Student Name",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("email", {
+			header: "E-mail",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("demographicInformation.passport_id", {
+			header: "ID",
+			cell: (info) => info.getValue() || "N/A",
+		}),
+		columnHelper.accessor("group", {
+			header: "Group",
+			cell: (info) => info.getValue()?.name || "N/A",
+		}),
+		columnHelper.accessor("corporate", {
+			header: "Corporate",
+			cell: (info) => (!!info.getValue() ? getUserCompanyName(info.getValue() as User, users, groups) : "N/A"),
+		}),
+		columnHelper.accessor("levels.reading", {
+			header: "Reading",
+			cell: (info) =>
+				!isShowingAmount
+					? calculateBandScore(
+							stats
+								.filter((x) => x.module === "reading" && x.user === info.row.original.id)
+								.reduce((acc, curr) => acc + curr.score.correct, 0),
+							stats
+								.filter((x) => x.module === "reading" && x.user === info.row.original.id)
+								.reduce((acc, curr) => acc + curr.score.total, 0),
+							"level",
+							info.row.original.focus || "academic",
+					  ) || 0
+					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "reading" && x.user === info.row.original.id))).length} exams`,
+		}),
+		columnHelper.accessor("levels.listening", {
+			header: "Listening",
+			cell: (info) =>
+				!isShowingAmount
+					? calculateBandScore(
+							stats
+								.filter((x) => x.module === "listening" && x.user === info.row.original.id)
+								.reduce((acc, curr) => acc + curr.score.correct, 0),
+							stats
+								.filter((x) => x.module === "listening" && x.user === info.row.original.id)
+								.reduce((acc, curr) => acc + curr.score.total, 0),
+							"level",
+							info.row.original.focus || "academic",
+					  ) || 0
+					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "listening" && x.user === info.row.original.id))).length} exams`,
+		}),
+		columnHelper.accessor("levels.writing", {
+			header: "Writing",
+			cell: (info) =>
+				!isShowingAmount
+					? calculateBandScore(
+							stats
+								.filter((x) => x.module === "writing" && x.user === info.row.original.id)
+								.reduce((acc, curr) => acc + curr.score.correct, 0),
+							stats
+								.filter((x) => x.module === "writing" && x.user === info.row.original.id)
+								.reduce((acc, curr) => acc + curr.score.total, 0),
+							"level",
+							info.row.original.focus || "academic",
+					  ) || 0
+					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "writing" && x.user === info.row.original.id))).length} exams`,
+		}),
+		columnHelper.accessor("levels.speaking", {
+			header: "Speaking",
+			cell: (info) =>
+				!isShowingAmount
+					? calculateBandScore(
+							stats
+								.filter((x) => x.module === "speaking" && x.user === info.row.original.id)
+								.reduce((acc, curr) => acc + curr.score.correct, 0),
+							stats
+								.filter((x) => x.module === "speaking" && x.user === info.row.original.id)
+								.reduce((acc, curr) => acc + curr.score.total, 0),
+							"level",
+							info.row.original.focus || "academic",
+					  ) || 0
+					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "speaking" && x.user === info.row.original.id))).length} exams`,
+		}),
+		columnHelper.accessor("levels.level", {
+			header: "Level",
+			cell: (info) =>
+				!isShowingAmount
+					? calculateBandScore(
+							stats
+								.filter((x) => x.module === "level" && x.user === info.row.original.id)
+								.reduce((acc, curr) => acc + curr.score.correct, 0),
+							stats
+								.filter((x) => x.module === "level" && x.user === info.row.original.id)
+								.reduce((acc, curr) => acc + curr.score.total, 0),
+							"level",
+							info.row.original.focus || "academic",
+					  ) || 0
+					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "level" && x.user === info.row.original.id))).length} exams`,
+		}),
+		columnHelper.accessor("levels", {
+			id: "overall_level",
+			header: "Overall",
+			cell: (info) =>
+				!isShowingAmount
+					? averageLevelCalculator(
+							users,
+							stats.filter((x) => x.user === info.row.original.id),
+					  ).toFixed(1)
+					: `${Object.keys(groupByExam(stats.filter((x) => x.user === info.row.original.id))).length} exams`,
+		}),
+	];
+
+	const filterUsers = (data: StudentPerformanceItem[]) => {
+		const filterByCorporate = (item: StudentPerformanceItem) => item.corporate?.id === selectedCorporate?.id;
+		const filterByGroup = (item: StudentPerformanceItem) => item.group?.id === selectedGroup?.id;
+
+		const filters: ((item: StudentPerformanceItem) => boolean)[] = [];
+		if (selectedCorporate !== null) filters.push(filterByCorporate);
+		if (selectedGroup !== null) filters.push(filterByGroup);
+
+		return filters.reduce((d, f) => d.filter(f), data);
+	};
+
+	return (
+		<div className="flex flex-col gap-4 w-full h-full">
+			<div className="w-full flex gap-4 justify-between items-center">
+				<Checkbox isChecked={isShowingAmount} onChange={setIsShowingAmount}>
+					Show Utilization
+				</Checkbox>
+				<Popover>
+					<PopoverTrigger>
+						<div className="flex items-center justify-center p-2 hover:bg-neutral-300/50 rounded-full transition ease-in-out duration-300">
+							<BsFilter size={20} />
+						</div>
+					</PopoverTrigger>
+					<PopoverContent className="w-96">
+						<div className="flex flex-col gap-4">
+							<span className="font-bold text-lg">Filters</span>
+							<Select
+								options={availableCorporates.map((x) => ({
+									value: x?.id || "N/A",
+									label: x?.corporateInformation?.companyInformation?.name || x?.name || "N/A",
+								}))}
+								isClearable
+								value={
+									selectedCorporate === null
+										? null
+										: {
+												value: selectedCorporate?.id || "N/A",
+												label:
+													selectedCorporate?.corporateInformation?.companyInformation?.name ||
+													selectedCorporate?.name ||
+													"N/A",
+										  }
+								}
+								placeholder="Select a Corporate..."
+								onChange={(value) =>
+									!value
+										? setSelectedCorporate(null)
+										: setSelectedCorporate(
+												value.value === "N/A" ? undefined : availableCorporates.find((x) => x?.id === value.value),
+										  )
+								}
+							/>
+							<Select
+								options={availableGroups.map((x) => ({
+									value: x?.id || "N/A",
+									label: x?.name || "N/A",
+								}))}
+								isClearable
+								value={
+									selectedGroup === null
+										? null
+										: {
+												value: selectedGroup?.id || "N/A",
+												label: selectedGroup?.name || "N/A",
+										  }
+								}
+								placeholder="Select a Group..."
+								onChange={(value) =>
+									!value
+										? setSelectedGroup(null)
+										: setSelectedGroup(value.value === "N/A" ? undefined : availableGroups.find((x) => x?.id === value.value))
+								}
+							/>
+						</div>
+					</PopoverContent>
+				</Popover>
+			</div>
+			<List<StudentPerformanceItem>
+				data={filterUsers(
+					items.sort(
+						(a, b) =>
+							averageLevelCalculator(
+								users,
+								stats.filter((x) => x.user === b.id),
+							) -
+							averageLevelCalculator(
+								users,
+								stats.filter((x) => x.user === a.id),
+							),
+					),
+				)}
+				columns={columns}
+			/>
+		</div>
+	);
+};
+
+export default function MasterCorporateDashboard({user}: Props) {
+	const [selectedUser, setSelectedUser] = useState<User>();
+	const [showModal, setShowModal] = useState(false);
+	const [corporateAssignments, setCorporateAssignments] = useState<(Assignment & {corporate?: CorporateUser})[]>([]);
+
+	const {data: stats} = useFilterRecordsByUser<Stat[]>();
+
+	const {users: students, reload: reloadStudents, isLoading: isStudentsLoading} = useUsers(userHashStudent);
+	const {users: teachers, reload: reloadTeachers, isLoading: isTeachersLoading} = useUsers(userHashTeacher);
+	const {users: corporates, reload: reloadCorporates, isLoading: isCorporatesLoading} = useUsers(userHashCorporate);
+
+	const {groups} = useGroups({admin: user.id, userType: user.type});
+	const {balance} = useUserBalance();
+
+	const users = useMemo(() => uniqBy([...students, ...teachers, ...corporates, user], "id"), [corporates, students, teachers, user]);
+
+	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({corporate: user.id});
+
+	const assignmentsGroups = useMemo(() => groups.filter((x) => x.admin === user.id || x.participants.includes(user.id)), [groups, user.id]);
+	const assignmentsUsers = useMemo(
+		() =>
+			[...students, ...teachers].filter((x) =>
+				!!selectedUser
+					? groups
+							.filter((g) => g.admin === selectedUser.id)
+							.flatMap((g) => g.participants)
+							.includes(x.id) || false
+					: groups.flatMap((g) => g.participants).includes(x.id),
+			),
+		[groups, selectedUser, teachers, students],
+	);
+
+	const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
+	const router = useRouter();
+
+	useEffect(() => {
+		setShowModal(!!selectedUser && router.asPath === "/");
+	}, [selectedUser, router.asPath]);
+
+	useEffect(() => {
+		setCorporateAssignments(
+			assignments.filter(activeAssignmentFilter).map((a) => {
+				const assigner = [...teachers, ...corporates].find((x) => x.id === a.assigner);
+
+				return {
+					...a,
+					corporate: assigner ? getCorporateUser(assigner, [...teachers, ...corporates], groups) : undefined,
+				};
+			}),
+		);
+	}, [assignments, groups, teachers, corporates]);
+	const getStatsByStudent = (user: User) => stats.filter((s) => s.user === user.id);
+
+	const UserDisplay = (displayUser: User) => (
+		<div
+			onClick={() => setSelectedUser(displayUser)}
+			className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300">
+			<img src={displayUser.profilePicture} alt={displayUser.name} className="rounded-full w-10 h-10" />
+			<div className="flex flex-col gap-1 items-start">
+				<span>{displayUser.name}</span>
+				<span className="text-sm opacity-75">{displayUser.email}</span>
+			</div>
+		</div>
+	);
+
+	const corporateUserFilter = (x: User) => x.type === "corporate";
+
+	const GroupsList = () => {
+		return (
+			<>
+				<div className="flex flex-col gap-4">
+					<div
+						onClick={() => router.push("/")}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<h2 className="text-2xl font-semibold">Groups ({groups.length})</h2>
+				</div>
+
+				<GroupList user={user} />
+			</>
+		);
+	};
+
+	const StudentPerformancePage = () => {
+		return (
+			<>
+				<div className="w-full flex justify-between items-center">
+					<div
+						onClick={() => router.push("/")}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<div
+						onClick={reloadAssignments}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<span>Reload</span>
+						<BsArrowRepeat className={clsx("text-xl", isAssignmentsLoading && "animate-spin")} />
+					</div>
+				</div>
+				<StudentPerformanceList items={students} stats={stats} users={corporates} groups={groups} />
+			</>
+		);
+	};
+
+	const MasterStatisticalPage = () => {
+		return (
+			<>
+				<div className="flex flex-col gap-4">
+					<div
+						onClick={() => router.push("/")}
+						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">Master Statistical</h2>
+				</div>
+				<MasterStatistical users={users} corporateUsers={corporates} />
+			</>
+		);
+	};
+
+	const DefaultDashboard = () => (
+		<>
+			<section className="flex flex-wrap gap-2 items-center -lg:justify-center lg:justify-between text-center">
+				<IconCard
+					onClick={() => router.push("/#students")}
+					Icon={BsPersonFill}
+					isLoading={isStudentsLoading}
+					label="Students"
+					value={students.length}
+					color="purple"
+				/>
+				<IconCard
+					onClick={() => router.push("/#teachers")}
+					Icon={BsPencilSquare}
+					isLoading={isTeachersLoading}
+					label="Teachers"
+					value={teachers.length}
+					color="purple"
+				/>
+				<IconCard
+					Icon={BsClipboard2Data}
+					label="Exams Performed"
+					value={stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user)).length}
+					color="purple"
+				/>
+				<IconCard
+					Icon={BsPaperclip}
+					label="Average Level"
+					value={averageLevelCalculator(
+						students,
+						stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user)),
+					).toFixed(1)}
+					color="purple"
+				/>
+				<IconCard onClick={() => router.push("/#groups")} Icon={BsPeople} label="Groups" value={groups.length} color="purple" />
+				<IconCard
+					Icon={BsPersonCheck}
+					label="User Balance"
+					value={`${balance}/${user.corporateInformation?.companyInformation?.userAmount || 0}`}
+					color="purple"
+				/>
+				<IconCard
+					Icon={BsClock}
+					label="Expiration Date"
+					value={user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy") : "Unlimited"}
+					color="rose"
+				/>
+				<IconCard
+					Icon={BsBank}
+					label="Corporate"
+					value={corporates.length}
+					isLoading={isCorporatesLoading}
+					color="purple"
+					onClick={() => router.push("/#corporate")}
+				/>
+				<IconCard
+					Icon={BsPersonFillGear}
+					isLoading={isStudentsLoading}
+					label="Student Performance"
+					value={students.length}
+					color="purple"
+					onClick={() => router.push("/#studentsPerformance")}
+				/>
+				<IconCard
+					Icon={BsDatabase}
+					label="Master Statistical"
+					// value={masterCorporateUserGroups.length}
+					color="purple"
+					onClick={() => router.push("/#statistical")}
+				/>
+				<button
+					disabled={isAssignmentsLoading}
+					onClick={() => router.push("/#assignments")}
+					className="bg-white col-span-2 rounded-xl shadow p-4 flex flex-col gap-4 items-center w-96 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
+					<BsEnvelopePaper className="text-6xl text-mti-purple-light" />
+					<span className="flex flex-col gap-1 items-center text-xl">
+						<span className="text-lg">Assignments</span>
+						<span className="font-semibold text-mti-purple-light">
+							{isAssignmentsLoading ? "Loading..." : assignments.filter((a) => !a.archived).length}
+						</span>
+					</span>
+				</button>
+			</section>
+
+			<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Latest students</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{students
+							.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Latest teachers</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{teachers
+							.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Highest level students</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{students
+							.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Highest exam count students</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{students
+							.sort(
+								(a, b) =>
+									Object.keys(groupByExam(getStatsByStudent(b))).length - Object.keys(groupByExam(getStatsByStudent(a))).length,
+							)
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
+			</section>
+		</>
+	);
+
+	return (
+		<>
+			<Modal isOpen={showModal} onClose={() => setSelectedUser(undefined)}>
+				<>
+					{selectedUser && (
+						<div className="w-full flex flex-col gap-8">
+							<UserCard
+								maxUserAmount={
+									user.type === "mastercorporate"
+										? (user.corporateInformation?.companyInformation?.userAmount || 0) - balance
+										: undefined
+								}
+								loggedInUser={user}
+								onClose={(shouldReload) => {
+									setSelectedUser(undefined);
+									if (shouldReload && selectedUser!.type === "student") reloadStudents();
+									if (shouldReload && selectedUser!.type === "teacher") reloadTeachers();
+									if (shouldReload && selectedUser!.type === "corporate") reloadCorporates();
+								}}
+								onViewStudents={
+									selectedUser.type === "corporate" || selectedUser.type === "teacher"
+										? () => {
+												appendUserFilters({
+													id: "view-students",
+													filter: (x: User) => x.type === "student",
+												});
+												appendUserFilters({
+													id: "belongs-to-admin",
+													filter: (x: User) =>
+														groups
+															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+															.flatMap((g) => g.participants)
+															.includes(x.id),
+												});
+
+												router.push("/list/users");
+										  }
+										: undefined
+								}
+								onViewTeachers={
+									selectedUser.type === "corporate" || selectedUser.type === "student"
+										? () => {
+												appendUserFilters({
+													id: "view-teachers",
+													filter: (x: User) => x.type === "teacher",
+												});
+												appendUserFilters({
+													id: "belongs-to-admin",
+													filter: (x: User) =>
+														groups
+															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+															.flatMap((g) => g.participants)
+															.includes(x.id),
+												});
+
+												router.push("/list/users");
+										  }
+										: undefined
+								}
+								user={selectedUser}
+							/>
+						</div>
+					)}
+				</>
+			</Modal>
+			{router.asPath === "/#students" && (
+				<UserList
+					user={user}
+					type="student"
+					renderHeader={(total) => (
+						<div className="flex flex-col gap-4">
+							<div
+								onClick={() => router.push("/")}
+								className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+								<BsArrowLeft className="text-xl" />
+								<span>Back</span>
+							</div>
+							<h2 className="text-2xl font-semibold">Students ({total})</h2>
+						</div>
+					)}
+				/>
+			)}
+			{router.asPath === "/#teachers" && (
+				<UserList
+					user={user}
+					type="teacher"
+					renderHeader={(total) => (
+						<div className="flex flex-col gap-4">
+							<div
+								onClick={() => router.push("/")}
+								className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+								<BsArrowLeft className="text-xl" />
+								<span>Back</span>
+							</div>
+							<h2 className="text-2xl font-semibold">Teachers ({total})</h2>
+						</div>
+					)}
+				/>
+			)}
+			{router.asPath === "/#groups" && <GroupsList />}
+			{router.asPath === "/#corporate" && (
+				<UserList
+					user={user}
+					type="corporate"
+					renderHeader={(total) => (
+						<div className="flex flex-col gap-4">
+							<div
+								onClick={() => router.push("/")}
+								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 ({total})</h2>
+						</div>
+					)}
+				/>
+			)}
+			{router.asPath === "/#assignments" && (
+				<AssignmentsPage
+					assignments={assignments}
+					corporateAssignments={corporateAssignments}
+					groups={assignmentsGroups}
+					user={user}
+					users={assignmentsUsers}
+					reloadAssignments={reloadAssignments}
+					isLoading={isAssignmentsLoading}
+					onBack={() => router.push("/")}
+				/>
+			)}
+			{router.asPath === "/#studentsPerformance" && <StudentPerformancePage />}
+			{router.asPath === "/#statistical" && <MasterStatisticalPage />}
+			{router.asPath === "/" && <DefaultDashboard />}
+		</>
+	);
+}