Merge branch 'develop' into ENCOA-83_MasterStatistical

src/components/Exercises/FillBlanks.tsx

@@ -1,187 +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 hasExamEnded = useExamStore((state) => state.hasExamEnded);
-
-	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) => {
-			const solution = solutions.find((y) => x.id.toString() === y.id.toString())?.solution.toLowerCase();
-			if (!solution) return false;
-
-			const option = words.find((w) =>
-				typeof w === "string" ? w.toLowerCase() === x.solution.toLowerCase() : w.letter.toLowerCase() === x.solution.toLowerCase(),
-			);
-			if (!option) return false;
-
-			return solution === (typeof option === "string" ? option.toLowerCase() : option.word.toLowerCase());
-		}).length;
-		const missing = total - answers.filter((x) => solutions.find((y) => x.id.toString() === y.id.toString())).length;
-
-		return {total, correct, missing};
-	};
-
-	const renderLines = (line: string) => {
-		return (
-			<div className="text-base leading-5">
-				{reactStringReplace(line, /({{\d+}})/g, (match) => {
-					const id = match.replaceAll(/[\{\}]/g, "");
-					const userSolution = answers.find((x) => x.id === id);
-
-					return (
-						<input
-							className={clsx(
-								"rounded-full hover:text-white focus:ring-0 focus:outline-none focus:!text-white focus:bg-mti-purple transition duration-300 ease-in-out my-1 px-5 py-2 text-center",
-								!userSolution && "text-center text-mti-purple-light bg-mti-purple-ultralight",
-								userSolution && "px-5 py-2 text-center text-mti-purple-dark bg-mti-purple-ultralight",
-							)}
-							onChange={(e) => setAnswers((prev) => [...prev.filter((x) => x.id !== id), {id, solution: e.target.value}])}
-							value={userSolution?.solution}></input>
-					);
-				})}
-			</div>
-		);
-	};
-
-	return (
-		<>
-			<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}>
-							{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 className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-4">
-					<span className="font-medium text-mti-purple-dark">Options</span>
-					<div className="flex gap-4 flex-wrap">
-						{words.map((v) => {
-							const text = typeof v === "string" ? v : `${v.letter} - ${v.word}`;
-
-							return (
-								<span
-									className={clsx(
-										"border border-mti-purple-light rounded-full px-3 py-0.5 transition ease-in-out duration-300",
-										!!answers.find((x) => x.solution.toLowerCase() === (typeof v === "string" ? v : v.letter).toLowerCase()) &&
-											"bg-mti-purple-dark text-white",
-									)}
-									key={text}>
-									{text}
-								</span>
-							);
-						})}
-					</div>
-				</div>
-			</div>
-
-			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
-				<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/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,232 @@
+import { FillBlanksExercise, FillBlanksMCOption } 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";
+import { v4 } from "uuid";
+
+
+const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
+    id,
+    type,
+    prompt,
+    solutions,
+    text,
+    words,
+    userSolutions,
+    variant,
+    onNext,
+    onBack,
+}) => {
+    //const { shuffleMaps } = useExamStore((state) => state);
+    const [answers, setAnswers] = useState<{ id: string; solution: string }[]>(userSolutions);
+    const hasExamEnded = useExamStore((state) => state.hasExamEnded);
+
+    const [currentMCSelection, setCurrentMCSelection] = useState<{ id: string, selection: FillBlanksMCOption }>();
+
+    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 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]);
+
+    const calculateScore = () => {
+        const total = text.match(/({{\d+}})/g)?.length || 0;
+        const correct = userSolutions.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.word.toLowerCase() === x.solution.toLowerCase();
+            } else {
+              return w.id === x.id;
+            }
+          });
+          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) {
+            /*
+            if (shuffleMaps.length !== 0) {
+                const shuffleMap = shuffleMaps.find((map) => map.id == x.id)
+                if (!shuffleMap) {
+                    return false;
+                }
+                const original = shuffleMap[x.solution as keyof typeof shuffleMap];
+                return solution.toLowerCase() === (option.options[original as keyof typeof option.options] || '').toLowerCase();
+            }*/
+
+            return solution.toLowerCase() === (option.options[x.solution as keyof typeof option.options] || '').toLowerCase();
+          }
+          return false;
+        }).length;
+      
+        const missing = total - userSolutions.filter((x) => solutions.find((y) => x.id.toString() === y.id.toString())).length;
+      
+        return { total, correct, missing };
+      };
+
+    const renderLines = (line: string) => {
+        return (
+            <div className="text-base leading-5">
+                {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 focus:ring-0 focus:outline-none focus:!text-white focus:bg-mti-purple transition duration-300 ease-in-out my-1 px-5 py-2 text-center",
+                        !userSolution && "text-center text-mti-purple-light bg-mti-purple-ultralight",
+                        userSolution && "text-center text-mti-purple-dark bg-mti-purple-ultralight",
+                    )
+                    return (
+                        variant === "mc" ? (
+                            <button
+                                className={styles}
+                                onClick={() => {
+                                    setCurrentMCSelection(
+                                        {
+                                            id: id,
+                                            selection: words.find((x) => {
+                                                if (typeof x !== "string" && 'id' in x) {
+                                                    return (x as FillBlanksMCOption).id.toString() == id.toString();
+                                                }
+                                                return false;
+                                            }) as FillBlanksMCOption
+                                        }
+                                    );
+                                }}
+                            >
+                                {userSolution?.solution === undefined ? <span className="text-transparent select-none">placeholder</span> : <span> {userSolution.solution} </span>}
+                            </button>
+                        ) : (
+                            <input
+                                className={styles}
+                                onChange={(e) => setAnswers((prev) => [...prev.filter((x) => x.id !== id), { id, solution: e.target.value }])}
+                                value={userSolution?.solution} />
+                        )
+                    );
+                })}
+            </div>
+        );
+    };
+
+    const onSelection = (id: string, value: string) => {
+        setAnswers((prev) => [...prev.filter((x) => x.id !== id), { id: id, solution: value }]);
+    }
+
+    /*const getShuffles = () => {
+		let shuffle = {};
+		if (shuffleMaps.length !== 0) {
+			shuffle = {
+				shuffleMaps: shuffleMaps.filter((map) =>
+					answers.some(answer => answer.id === map.id)
+				)
+			}
+		}
+		return shuffle;
+	}*/
+
+    return (
+        <>
+            <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}>
+                            {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} className={clsx(variant === "mc" && "whitespace-pre-wrap")}>
+                            {renderLines(line)}
+                            <br />
+                        </p>
+                    ))}
+                </span>
+                {variant === "mc" && typeCheckWordsMC(words) ? (
+                    <>  
+                        {currentMCSelection && (
+                            <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">
+                                    {currentMCSelection.selection?.options && Object.entries(currentMCSelection.selection.options).sort((a, b) => a[0].localeCompare(b[0])).map(([key, value]) => {
+                                        return <button
+                                            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.toLocaleLowerCase() === value.toLocaleLowerCase() && x.id === currentMCSelection.id ) &&
+                                                "bg-mti-purple-dark text-white",
+                                            )}
+                                            key={v4()}
+                                            onClick={() => onSelection(currentMCSelection.id, value)}
+                                        >
+                                            {value}
+                                        </button>;
+                                    })}
+                                </div>
+                            </div>
+                        )}
+                    </>
+                ) : (
+                    <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, })}//...getShuffles() })}
+                    className="max-w-[200px] w-full">
+                    Back
+                </Button>
+
+                <Button
+                    color="purple"
+                    onClick={() => onNext({ exercise: id, solutions: answers, score: calculateScore(), type, })}//...getShuffles() })}
+                    className="max-w-[200px] self-end w-full">
+                    Next
+                </Button>
+            </div>
+        </>
+    );
+}
+
+export default FillBlanks;

src/components/Exercises/MultipleChoice.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable @next/next/no-img-element */
-import {MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam";
+import { MultipleChoiceExercise, MultipleChoiceQuestion } from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
 import clsx from "clsx";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import reactStringReplace from "react-string-replace";
-import {CommonProps} from ".";
+import { CommonProps } from ".";
 import Button from "../Low/Button";
 
 function Question({
@@ -14,22 +14,30 @@ function Question({
 	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>)[\w\s']+(<\/u>))/g, (match) => {
 			const word = match.replaceAll("<u>", "").replaceAll("</u>", "");
 			return word.length > 0 ? <u>{word}</u> : null;
 		});
 	};
+	*/
 
 	return (
+		// {renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")} 
 		<div className="flex flex-col gap-10">
 			{isNaN(Number(id)) ? (
-				<span>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")} </span>
+				<span dangerouslySetInnerHTML={{ __html: prompt }} />
 			) : (
 				<span className="">
 					<>
-						{id} - <span>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")} </span>
+						{id} - <span dangerouslySetInnerHTML={{ __html: prompt }} />
 					</>
 				</span>
 			)}
@@ -65,53 +73,79 @@ function Question({
 	);
 }
 
-export default function MultipleChoice({id, prompt, type, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
-	const [answers, setAnswers] = useState<{question: string; option: string}[]>(userSolutions);
+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} = useExamStore((state) => state);
-	const {userSolutions: storeUserSolutions, setUserSolutions} = useExamStore((state) => state);
+	//const { shuffleMaps } = useExamStore((state) => state);
+	const { questionIndex, setQuestionIndex } = useExamStore((state) => state);
+	const { userSolutions: storeUserSolutions, setUserSolutions } = useExamStore((state) => state);
 	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
 
 	const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));
 
 	useEffect(() => {
-		setUserSolutions([...storeUserSolutions.filter((x) => x.exercise !== id), {exercise: id, solutions: answers, score: calculateScore(), type}]);
+		setUserSolutions(
+			[...storeUserSolutions.filter((x) => x.exercise !== id), {
+				exercise: id, solutions: answers, score: calculateScore(), type
+			}]);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [answers]);
 
 	useEffect(() => {
-		if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
+		if (hasExamEnded) onNext({ exercise: id, solutions: answers, score: calculateScore(), type });
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [hasExamEnded]);
 
 	const onSelectOption = (option: string) => {
 		const question = questions[questionIndex];
-		setAnswers((prev) => [...prev.filter((x) => x.question !== question.id), {option, question: question.id}]);
+		setAnswers((prev) => [...prev.filter((x) => x.question !== question.id), { option, question: question.id }]);
 	};
 
 	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();
+			});
 
-		return {total, correct, missing};
+			let isSolutionCorrect;
+			//if (shuffleMaps.length == 0) {
+			isSolutionCorrect = matchingQuestion?.solution === x.option;
+			//} else {
+			//	const shuffleMap = shuffleMaps.find((map) => map.id == x.question)
+			//	isSolutionCorrect = shuffleMap?.map[x.option] == matchingQuestion?.solution;
+			//}
+			return isSolutionCorrect || false;
+		}).length;
+		const missing = total - correct;
+
+		return { total, correct, missing };
 	};
 
+	/*const getShuffles = () => {
+		let shuffle = {};
+		if (shuffleMaps.length !== 0) {
+			shuffle = {
+				shuffleMaps: shuffleMaps.filter((map) =>
+					answers.some(answer => answer.question === map.id)
+				)
+			}
+		}
+		return shuffle;
+	}*/
+
 	const next = () => {
 		if (questionIndex === questions.length - 1) {
-			onNext({exercise: id, solutions: answers, score: calculateScore(), type});
+			onNext({ exercise: id, solutions: answers, score: calculateScore(), type, });//...getShuffles() });
 		} else {
 			setQuestionIndex(questionIndex + 1);
 		}
-
 		scrollToTop();
 	};
 
 	const back = () => {
 		if (questionIndex === 0) {
-			onBack({exercise: id, solutions: answers, score: calculateScore(), type});
+			onBack({ exercise: id, solutions: answers, score: calculateScore(), type, });// ...getShuffles() });
 		} else {
 			setQuestionIndex(questionIndex - 1);
 		}

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

@@ -63,7 +63,7 @@ const FillBlanksEdit = (props: Props) => {
 							label={`Word ${index + 1}`}
 							name="word"
 							required
-							value={typeof word === "string" ? word : word.word}
+							value={typeof word === "string" ? word : ("word" in word ? word.word : "")}
 							onChange={(value) =>
 								updateExercise({
 									words: exercise.words.map((sol, idx) =>

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

@@ -13,6 +13,7 @@ import {
 	BsCurrencyDollar,
 	BsClipboardData,
 	BsFileLock,
+	BsPeople,
 } from "react-icons/bs";
 import {CiDumbbell} from "react-icons/ci";
 import {RiLogoutBoxFill} from "react-icons/ri";
@@ -109,6 +110,9 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 				{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} />
 				)}
@@ -146,25 +150,25 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 						badge={totalAssignedTickets}
 					/>
 				)}
-				{checkAccess(user, ["developer", "admin"]) && (
-					<>
-						<Nav
-							disabled={disableNavigation}
-							Icon={BsCloudFill}
-							label="Generation"
-							path={path}
-							keyPath="/generation"
-							isMinimized={isMinimized}
-						/>
-						<Nav
-							disabled={disableNavigation}
-							Icon={BsFileLock}
-							label="Permissions"
-							path={path}
-							keyPath="/permissions"
-							isMinimized={isMinimized}
-						/>
-					</>
+				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
+					<Nav
+						disabled={disableNavigation}
+						Icon={BsCloudFill}
+						label="Generation"
+						path={path}
+						keyPath="/generation"
+						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:flex flex-col gap-3 xl:hidden">

src/components/Solutions/FillBlanks.tsx

@@ -1,8 +1,8 @@
-import {FillBlanksExercise} from "@/interfaces/exam";
+import { FillBlanksExercise, FillBlanksMCOption } from "@/interfaces/exam";
 import clsx from "clsx";
 import reactStringReplace from "react-string-replace";
-import {CommonProps} from ".";
-import {Fragment} from "react";
+import { CommonProps } from ".";
+import { Fragment } from "react";
 import Button from "../Low/Button";
 
 export default function FillBlanksSolutions({
@@ -19,21 +19,42 @@ export default function FillBlanksSolutions({
 	const calculateScore = () => {
 		const total = text.match(/({{\d+}})/g)?.length || 0;
 		const correct = userSolutions.filter((x) => {
-			const solution = solutions.find((y) => x.id.toString() === y.id.toString())?.solution.toLowerCase();
+			const solution = solutions.find((y) => x.id.toString() === y.id.toString())?.solution;
 			if (!solution) return false;
 
-			const option = words.find((w) =>
-				typeof w === "string" ? w.toLowerCase() === x.solution.toLowerCase() : w.letter.toLowerCase() === x.solution.toLowerCase(),
-			);
+			const option = words.find((w) => {
+				if (typeof w === "string") {
+					return w.toLowerCase() === x.solution.toLowerCase();
+				} else if ('letter' in w) {
+					return w.word.toLowerCase() === x.solution.toLowerCase();
+				} else {
+					return w.id === x.id;
+				}
+			});
 			if (!option) return false;
 
-			return solution === (typeof option === "string" ? option.toLowerCase() : option.word.toLowerCase());
+			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 - userSolutions.filter((x) => solutions.find((y) => x.id.toString() === y.id.toString())).length;
 
-		return {total, correct, missing};
+		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>
@@ -56,23 +77,53 @@ export default function FillBlanksSolutions({
 					const userSolutionWord = words.find((w) =>
 						typeof w === "string"
 							? w.toLowerCase() === userSolution.solution.toLowerCase()
-							: w.letter.toLowerCase() === userSolution.solution.toLowerCase(),
+							: 'letter' in w
+								? w.letter.toLowerCase() === userSolution.solution.toLowerCase()
+								: 'options' in w
+									? w.id === userSolution.id
+									: false
 					);
-					const userSolutionText = typeof userSolutionWord === "string" ? userSolutionWord : userSolutionWord?.word;
 
-					if (userSolutionText === solution.solution) {
+					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 === id);
+						if (options) {
+							const correctKey = Object.keys(options.options).find(key =>
+								key.toLowerCase() === solution.solution.toLowerCase()
+							);
+							correct = userSolution.solution == options.options[correctKey as keyof typeof options.options];
+							solutionText = options.options[correctKey as keyof typeof options.options] || solution.solution;
+						} else {
+							correct = false;
+							solutionText = solution?.solution;
+						}
+
+					} else {
+						correct = userSolutionText === solution.solution;
+						solutionText = solution.solution;
+					}
+
+					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 (userSolutionText !== solution.solution) {
+					} else {
 						return (
 							<>
 								<button
@@ -88,7 +139,7 @@ export default function FillBlanksSolutions({
 										"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>
 							</>
 						);
@@ -138,14 +189,14 @@ export default function FillBlanksSolutions({
 				<Button
 					color="purple"
 					variant="outline"
-					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
+					onClick={() => onBack({ exercise: id, solutions: userSolutions, score: calculateScore(), type })}
 					className="max-w-[200px] w-full">
 					Back
 				</Button>
 
 				<Button
 					color="purple"
-					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
+					onClick={() => onNext({ exercise: id, solutions: userSolutions, score: calculateScore(), type })}
 					className="max-w-[200px] self-end w-full">
 					Next
 				</Button>

src/components/Solutions/MultipleChoice.tsx

@@ -1,10 +1,10 @@
 /* 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 { useEffect, useState } from "react";
 import reactStringReplace from "react-string-replace";
-import {CommonProps} from ".";
+import { CommonProps } from ".";
 import Button from "../Low/Button";
 
 function Question({
@@ -14,7 +14,40 @@ function Question({
 	solution,
 	options,
 	userSolution,
-}: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) {
+}: MultipleChoiceQuestion & { userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean }) {
+	const { userSolutions } = useExamStore((state) => state);
+
+	/*
+	const getShuffledOptions = (options: {id: string, text: string}[], questionShuffleMap: ShuffleMap) => {
+		const shuffledOptions = ['A', 'B', 'C', 'D'].map(newId => {
+			const originalId = questionShuffleMap.map[newId];
+			const originalOption = options.find(option => option.id === originalId);
+			return {
+				id: newId,
+				text: originalOption!.text
+			};
+		});
+		return shuffledOptions;
+	}
+
+	const getShuffledSolution = (originalSolution: string, questionShuffleMap: ShuffleMap) => {
+		for (const [newPosition, originalPosition] of Object.entries(questionShuffleMap.map)) {
+			if (originalPosition === originalSolution) {
+				return newPosition;
+			}
+		}
+		return originalSolution;
+	}
+
+	const questionShuffleMap = userSolutions.reduce((foundMap, userSolution) => {
+		if (foundMap) return foundMap;
+		return userSolution.shuffleMaps?.find(map => map.id === id) || null;
+	}, null as ShuffleMap | null);
+	*/
+	
+	const questionOptions = options; // questionShuffleMap ? getShuffledOptions(options as {id: string, text: string}[], questionShuffleMap) : options;
+	const newSolution = solution; //questionShuffleMap ? getShuffledSolution(solution, questionShuffleMap) : solution;
+
 	const renderPrompt = (prompt: string) => {
 		return reactStringReplace(prompt, /((<u>)[\w\s']+(<\/u>))/g, (match) => {
 			const word = match.replaceAll("<u>", "").replaceAll("</u>", "");
@@ -23,11 +56,11 @@ function Question({
 	};
 
 	const optionColor = (option: string) => {
-		if (option === solution && !userSolution) {
+		if (option === newSolution && !userSolution) {
 			return "!border-mti-gray-davy !text-mti-gray-davy";
 		}
 
-		if (option === solution) {
+		if (option === newSolution) {
 			return "!border-mti-purple-light !text-mti-purple-light";
 		}
 
@@ -47,24 +80,24 @@ function Question({
 			)}
 			<div className="grid grid-cols-4 gap-4 place-items-center">
 				{variant === "image" &&
-					options.map((option) => (
+					questionOptions.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),
+								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) => (
+					questionOptions.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-sm", optionColor(option!.id))}>
+							<span className="font-semibold">{option?.id}.</span>
+							<span>{option?.text}</span>
 						</div>
 					))}
 			</div>
@@ -72,8 +105,8 @@ function Question({
 	);
 }
 
-export default function MultipleChoice({id, type, prompt, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
-	const {questionIndex, setQuestionIndex} = useExamStore((state) => state);
+export default function MultipleChoice({ id, type, prompt, questions, userSolutions, onNext, onBack }: MultipleChoiceExercise & CommonProps) {
+	const { questionIndex, setQuestionIndex } = useExamStore((state) => state);
 
 	const calculateScore = () => {
 		const total = questions.length;
@@ -82,12 +115,12 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio
 		).length;
 		const missing = total - userSolutions.filter((x) => questions.find((y) => y.id.toString() === x.question.toString())).length;
 
-		return {total, correct, missing};
+		return { total, correct, missing };
 	};
 
 	const next = () => {
 		if (questionIndex === questions.length - 1) {
-			onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type});
+			onNext({ exercise: id, solutions: userSolutions, score: calculateScore(), type });
 		} else {
 			setQuestionIndex(questionIndex + 1);
 		}
@@ -95,7 +128,7 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio
 
 	const back = () => {
 		if (questionIndex === 0) {
-			onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type});
+			onBack({ exercise: id, solutions: userSolutions, score: calculateScore(), type });
 		} else {
 			setQuestionIndex(questionIndex - 1);
 		}

src/components/TrainingContent/AnimatedHighlight.tsx

@@ -1,23 +0,0 @@
-import { useCallback } from "react";
-
-const HighlightedContent: React.FC<{ html: string; highlightPhrases: string[] }> = ({ html, highlightPhrases }) => {
-
-    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('|')})`, 'gi');
-        const highlightedHtml = html.replace(regex, (match) => `<span style="background-color: yellow;">${match}</span>`);
-
-        return { __html: highlightedHtml };
-    }, [html, highlightPhrases]);
-
-    return <div dangerouslySetInnerHTML={createHighlightedContent()} />;
-};
-
-export default HighlightedContent;

src/components/TrainingContent/ExerciseWalkthrough.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { animated } from '@react-spring/web';
 import { FaRegCirclePlay, FaRegCircleStop } from "react-icons/fa6";
-import HighlightedContent from './AnimatedHighlight';
+import HighlightContent from '../HighlightContent';
 import { ITrainingTip, SegmentRef, TimelineEvent } from './TrainingInterfaces';
 
 
@@ -267,7 +267,7 @@ const ExerciseWalkthrough: React.FC<ITrainingTip> = (tip: ITrainingTip) => {
                     <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 }} />
-                        <HighlightedContent html={tip.exercise.highlightable} highlightPhrases={highlightedPhrases} />
+                        <HighlightContent html={tip.exercise.highlightable} highlightPhrases={highlightedPhrases} />
                     </div>
                     <div className='flex-1'>
                         <div className='bg-gray-50 rounded-lg shadow'>

src/components/UserCard.tsx

@@ -525,7 +525,9 @@ 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"].includes(loggedInUser.type) && !!loggedInUser.subscriptionExpirationDate)
+									}>
 									Enabled
 								</Checkbox>
 							</div>
@@ -564,7 +566,12 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 						</div>
 					</div>
 				</div>
-				{checkAccess(loggedInUser, ["developer", "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">
@@ -572,7 +579,10 @@ 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)}
@@ -600,7 +610,28 @@ 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)}

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/dashboards/Agent.tsx

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

src/dashboards/AssignmentCard.tsx

@@ -11,8 +11,10 @@ import {useAssignmentArchive} from "@/hooks/useAssignmentArchive";
 import {uniqBy} from "lodash";
 import {useAssignmentUnarchive} from "@/hooks/useAssignmentUnarchive";
 import {getUserName} from "@/utils/users";
+import {User} from "@/interfaces/user";
 
 interface Props {
+	users: User[];
 	onClick?: () => void;
 	allowDownload?: boolean;
 	reload?: Function;
@@ -37,9 +39,8 @@ export default function AssignmentCard({
 	allowArchive,
 	allowUnarchive,
 	allowExcelDownload,
+	users,
 }: Assignment & Props) {
-	const {users} = useUsers();
-
 	const renderPdfIcon = usePDFDownload("assignments");
 	const renderExcelIcon = usePDFDownload("assignments", "excel");
 	const renderArchiveIcon = useAssignmentArchive(id, reload);

src/dashboards/AssignmentCreator.tsx

@@ -371,7 +371,7 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 							!startDate ||
 							!endDate ||
 							assignees.length === 0 ||
-							(!!examIDs && examIDs.length < selectedModules.length)
+							(!useRandomExams && examIDs.length < selectedModules.length)
 						}
 						className="w-full max-w-[200px]"
 						onClick={createAssignment}

src/dashboards/Corporate.tsx

@@ -29,7 +29,7 @@ import {
 } 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";
@@ -45,11 +45,113 @@ 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";
 
 interface Props {
 	user: CorporateUser;
 }
 
+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}: Props) {
 	const [page, setPage] = useState("");
 	const [selectedUser, setSelectedUser] = useState<User>();
@@ -57,11 +159,12 @@ export default function CorporateDashboard({user}: Props) {
 	const [corporateUserToShow, setCorporateUserToShow] = useState<CorporateUser>();
 	const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
 	const [isCreatingAssignment, setIsCreatingAssignment] = useState(false);
+	const [userBalance, setUserBalance] = useState(0);
 
 	const {stats} = useStats();
-	const {users, reload} = useUsers();
+	const {users, reload, isLoading} = useUsers();
 	const {codes} = useCodes(user.id);
-	const {groups} = useGroups(user.id);
+	const {groups} = useGroups({admin: user.id});
 	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({corporate: user.id});
 
 	const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
@@ -71,6 +174,14 @@ export default function CorporateDashboard({user}: Props) {
 		setShowModal(!!selectedUser && page === "");
 	}, [selectedUser, page]);
 
+	useEffect(() => {
+		const relatedGroups = groups.filter((x) => x.name === "Students" || x.name === "Teachers" || x.name === "Corporate");
+		const usersInGroups = relatedGroups.map((x) => x.participants).flat();
+		const filteredCodes = codes.filter((x) => !x.userId || !usersInGroups.includes(x.userId));
+
+		setUserBalance(usersInGroups.length + filteredCodes.length);
+	}, [codes, groups]);
+
 	useEffect(() => {
 		// in this case it fetches the master corporate account
 		getUserCorporate(user.id).then(setCorporateUserToShow);
@@ -228,7 +339,7 @@ export default function CorporateDashboard({user}: Props) {
 					<h2 className="text-2xl font-semibold">Active Assignments ({assignments.filter(activeFilter).length})</h2>
 					<div className="flex flex-wrap gap-2">
 						{assignments.filter(activeFilter).map((a) => (
-							<AssignmentCard {...a} onClick={() => setSelectedAssignment(a)} key={a.id} />
+							<AssignmentCard {...a} users={users} onClick={() => setSelectedAssignment(a)} key={a.id} />
 						))}
 					</div>
 				</section>
@@ -244,6 +355,7 @@ export default function CorporateDashboard({user}: Props) {
 						{assignments.filter(futureFilter).map((a) => (
 							<AssignmentCard
 								{...a}
+								users={users}
 								onClick={() => {
 									setSelectedAssignment(a);
 									setIsCreatingAssignment(true);
@@ -259,6 +371,7 @@ export default function CorporateDashboard({user}: Props) {
 						{assignments.filter(pastFilter).map((a) => (
 							<AssignmentCard
 								{...a}
+								users={users}
 								onClick={() => setSelectedAssignment(a)}
 								key={a.id}
 								allowDownload
@@ -275,6 +388,7 @@ export default function CorporateDashboard({user}: Props) {
 						{assignments.filter(archivedFilter).map((a) => (
 							<AssignmentCard
 								{...a}
+								users={users}
 								onClick={() => setSelectedAssignment(a)}
 								key={a.id}
 								allowDownload
@@ -289,6 +403,36 @@ export default function CorporateDashboard({user}: Props) {
 		);
 	};
 
+	const StudentPerformancePage = () => {
+		const students = users
+			.filter((x) => x.type === "student" && groups.flatMap((g) => g.participants).includes(x.id))
+			.map((u) => ({
+				...u,
+				group: groups.find((x) => x.participants.includes(u.id))?.name || "N/A",
+				corporateName: getUserCompanyName(u, users, groups),
+			}));
+
+		return (
+			<>
+				<div className="w-full flex justify-between items-center">
+					<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>
+					<div
+						onClick={reload}
+						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", isLoading && "animate-spin")} />
+					</div>
+				</div>
+				<StudentPerformanceList items={students} stats={stats} users={users} />
+			</>
+		);
+	};
+
 	const averageLevelCalculator = (studentStats: Stat[]) => {
 		const formattedStats = studentStats
 			.map((s) => ({
@@ -352,7 +496,7 @@ export default function CorporateDashboard({user}: Props) {
 				<IconCard
 					Icon={BsPersonCheck}
 					label="User Balance"
-					value={`${codes.length}/${user.corporateInformation?.companyInformation?.userAmount || 0}`}
+					value={`${userBalance}/${user.corporateInformation?.companyInformation?.userAmount || 0}`}
 					color="purple"
 				/>
 				<IconCard
@@ -361,6 +505,13 @@ export default function CorporateDashboard({user}: Props) {
 					value={user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy") : "Unlimited"}
 					color="rose"
 				/>
+				<IconCard
+					Icon={BsPersonFillGear}
+					label="Student Performance"
+					value={users.filter(studentFilter).length}
+					color="purple"
+					onClick={() => setPage("studentsPerformance")}
+				/>
 				<button
 					disabled={isAssignmentsLoading}
 					onClick={() => setPage("assignments")}
@@ -489,6 +640,7 @@ export default function CorporateDashboard({user}: Props) {
 			{page === "teachers" && <TeachersList />}
 			{page === "groups" && <GroupsList />}
 			{page === "assignments" && <AssignmentsPage />}
+			{page === "studentsPerformance" && <StudentPerformancePage />}
 			{page === "" && <DefaultDashboard />}
 		</>
 	);

src/dashboards/CorporateStudentsLevels.tsx

@@ -1,140 +1,108 @@
 import React from "react";
 import useUsers from "@/hooks/useUsers";
 import useGroups from "@/hooks/useGroups";
-import { User } from "@/interfaces/user";
+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";
+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 flex-col gap-6 rounded-xl border bg-white p-4 transition duration-300 ease-in-out hover:drop-shadow">
-      <div className="flex flex-col gap-3">
-        <h3 className="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 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 { users } = useUsers();
-  const { groups } = useGroups();
+	const {users} = useUsers();
+	const {groups} = useGroups({});
 
-  const corporateUsers = users.filter((u) => u.type === "corporate") as User[];
-  const [corporateId, setCorporateId] = React.useState<string>("");
-  const corporate =
-    corporateUsers.find((u) => u.id === corporateId) || corporateUsers[0];
+	const corporateUsers = users.filter((u) => u.type === "corporate") as User[];
+	const [corporateId, setCorporateId] = React.useState<string>("");
+	const corporate = corporateUsers.find((u) => u.id === corporateId) || corporateUsers[0];
 
-  const groupsFromCorporate = corporate
-    ? groups.filter((g) => g.admin === corporate.id)
-    : [];
+	const groupsFromCorporate = corporate ? groups.filter((g) => g.admin === corporate.id) : [];
 
-  const groupsParticipants = groupsFromCorporate
-    .flatMap((g) => g.participants)
-    .reduce((accm: User[], p) => {
-      const user = users.find((u) => u.id === p) as User;
-      if (user) {
-        return [...accm, user];
-      }
-      return accm;
-    }, []);
+	const groupsParticipants = groupsFromCorporate
+		.flatMap((g) => g.participants)
+		.reduce((accm: User[], p) => {
+			const user = users.find((u) => u.id === p) as User;
+			if (user) {
+				return [...accm, user];
+			}
+			return accm;
+		}, []);
 
-  return (
-    <>
-      <Select
-        options={corporateUsers.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,
-          }),
-        }}
-      />
-      {groupsParticipants.map((u) => (
-        <Card user={u} key={u.id} />
-      ))}
-    </>
-  );
+	return (
+		<>
+			<Select
+				options={corporateUsers.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,
+					}),
+				}}
+			/>
+			{groupsParticipants.map((u) => (
+				<Card user={u} key={u.id} />
+			))}
+		</>
+	);
 };
 
 export default CorporateStudentsLevels;

src/dashboards/MasterCorporate.tsx

@@ -2,39 +2,35 @@
 import Modal from "@/components/Modal";
 import useStats from "@/hooks/useStats";
 import useUsers from "@/hooks/useUsers";
-import {
-  Group,
-  MasterCorporateUser,
-  Stat,
-  User,
-  CorporateUser,
-} from "@/interfaces/user";
+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 {
-  BsArrowLeft,
-  BsClipboard2Data,
-  BsClock,
-  BsPaperclip,
-  BsPersonFill,
-  BsPencilSquare,
-  BsPersonCheck,
-  BsPeople,
-  BsBank,
-  BsEnvelopePaper,
-  BsArrowRepeat,
-  BsPlus,
-  BsDatabase,
+	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 { calculateAverageLevel, calculateBandScore } from "@/utils/score";
-import { MODULE_ARRAY } from "@/utils/moduleUtils";
-import { Module } from "@/interfaces";
-import { groupByExam } from "@/utils/stats";
+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";
@@ -46,28 +42,279 @@ 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";
+
 interface Props {
   user: MasterCorporateUser;
 }
 
-export default function MasterCorporateDashboard({ user }: Props) {
-  const [page, setPage] = useState("");
-  const [selectedUser, setSelectedUser] = useState<User>();
-  const [showModal, setShowModal] = useState(false);
-  const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
-  const [isCreatingAssignment, setIsCreatingAssignment] = useState(false);
+const activeFilter = (a: Assignment) =>
+	moment(a.endDate).isAfter(moment()) && moment(a.startDate).isBefore(moment()) && a.assignees.length > a.results.length;
+const pastFilter = (a: Assignment) => (moment(a.endDate).isBefore(moment()) || a.assignees.length === a.results.length) && !a.archived;
+const archivedFilter = (a: Assignment) => a.archived;
+const futureFilter = (a: Assignment) => moment(a.startDate).isAfter(moment());
 
-  const { stats } = useStats();
-  const { users, reload } = useUsers();
-  const { codes } = useCodes(user.id);
-  const { groups } = useGroups(user.id, user.type);
+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[]) => {
+		console.log(data, selectedCorporate);
+		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 [page, setPage] = useState("");
+	const [selectedUser, setSelectedUser] = useState<User>();
+	const [showModal, setShowModal] = useState(false);
+	const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
+	const [isCreatingAssignment, setIsCreatingAssignment] = useState(false);
+	const [corporateAssignments, setCorporateAssignments] = useState<(Assignment & {corporate?: CorporateUser})[]>([]);
+
+	const {stats} = useStats();
+	const {users, reload} = useUsers();
+	const {codes} = useCodes(user.id);
+	const {groups} = useGroups({admin: user.id, userType: user.type});
 
   const masterCorporateUserGroups = [
     ...new Set(
       groups.filter((u) => u.admin === user.id).flatMap((g) => g.participants)
     ),
   ];
+
   const corporateUserGroups = [
     ...new Set(groups.flatMap((g) => g.participants)),
   ];
@@ -85,13 +332,20 @@ export default function MasterCorporateDashboard({ user }: Props) {
     setShowModal(!!selectedUser && page === "");
   }, [selectedUser, page]);
 
-  const studentFilter = (user: User) =>
-    user.type === "student" && corporateUserGroups.includes(user.id);
-  const teacherFilter = (user: User) =>
-    user.type === "teacher" && corporateUserGroups.includes(user.id);
+	useEffect(() => {
+		setCorporateAssignments(
+			assignments.filter(activeFilter).map((a) => ({
+				...a,
+				corporate: !!users.find((x) => x.id === a.assigner)
+					? getCorporateUser(users.find((x) => x.id === a.assigner)!, users, groups)
+					: undefined,
+			})),
+		);
+	}, [assignments, groups, users]);
 
-  const getStatsByStudent = (user: User) =>
-    stats.filter((s) => s.user === user.id);
+	const studentFilter = (user: User) => user.type === "student" && corporateUserGroups.includes(user.id);
+	const teacherFilter = (user: User) => user.type === "teacher" && corporateUserGroups.includes(user.id);
+	const getStatsByStudent = (user: User) => stats.filter((s) => s.user === user.id);
 
   const UserDisplay = (displayUser: User) => (
     <div
@@ -210,149 +464,179 @@ export default function MasterCorporateDashboard({ user }: Props) {
     );
   };
 
-  const AssignmentsPage = () => {
-    const activeFilter = (a: Assignment) =>
-      moment(a.endDate).isAfter(moment()) &&
-      moment(a.startDate).isBefore(moment()) &&
-      a.assignees.length > a.results.length;
-    const pastFilter = (a: Assignment) =>
-      (moment(a.endDate).isBefore(moment()) ||
-        a.assignees.length === a.results.length) &&
-      !a.archived;
-    const archivedFilter = (a: Assignment) => a.archived;
-    const futureFilter = (a: Assignment) =>
-      moment(a.startDate).isAfter(moment());
+  // const AssignmentsPage = () => {
+  //   const activeFilter = (a: Assignment) =>
+  //     moment(a.endDate).isAfter(moment()) &&
+  //     moment(a.startDate).isBefore(moment()) &&
+  //     a.assignees.length > a.results.length;
+  //   const pastFilter = (a: Assignment) =>
+  //     (moment(a.endDate).isBefore(moment()) ||
+  //       a.assignees.length === a.results.length) &&
+  //     !a.archived;
+  //   const archivedFilter = (a: Assignment) => a.archived;
+  //   const futureFilter = (a: Assignment) =>
+  //     moment(a.startDate).isAfter(moment());
 
-    return (
-      <>
-        <AssignmentView
-          isOpen={!!selectedAssignment && !isCreatingAssignment}
-          onClose={() => {
-            setSelectedAssignment(undefined);
-            setIsCreatingAssignment(false);
-            reloadAssignments();
-          }}
-          assignment={selectedAssignment}
-        />
-        <AssignmentCreator
-          assignment={selectedAssignment}
-          groups={groups.filter(
-            (x) => x.admin === user.id || x.participants.includes(user.id)
-          )}
-          users={users.filter(
-            (x) =>
-              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))
-          )}
-          assigner={user.id}
-          isCreating={isCreatingAssignment}
-          cancelCreation={() => {
-            setIsCreatingAssignment(false);
-            setSelectedAssignment(undefined);
-            reloadAssignments();
-          }}
-        />
-        <div className="w-full flex justify-between items-center">
-          <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>
-          <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>
-        <section className="flex flex-col gap-4">
-          <h2 className="text-2xl font-semibold">
-            Active Assignments ({assignments.filter(activeFilter).length})
-          </h2>
-          <div className="flex flex-wrap gap-2">
-            {assignments.filter(activeFilter).map((a) => (
-              <AssignmentCard
-                {...a}
-                onClick={() => setSelectedAssignment(a)}
-                key={a.id}
-              />
-            ))}
-          </div>
-        </section>
-        <section className="flex flex-col gap-4">
-          <h2 className="text-2xl font-semibold">
-            Planned Assignments ({assignments.filter(futureFilter).length})
-          </h2>
-          <div className="flex flex-wrap gap-2">
-            <div
-              onClick={() => setIsCreatingAssignment(true)}
-              className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300"
-            >
-              <BsPlus className="text-6xl" />
-              <span className="text-lg">New Assignment</span>
-            </div>
-            {assignments.filter(futureFilter).map((a) => (
-              <AssignmentCard
-                {...a}
-                onClick={() => {
-                  setSelectedAssignment(a);
-                  setIsCreatingAssignment(true);
-                }}
-                key={a.id}
-              />
-            ))}
-          </div>
-        </section>
-        <section className="flex flex-col gap-4">
-          <h2 className="text-2xl font-semibold">
-            Past Assignments ({assignments.filter(pastFilter).length})
-          </h2>
-          <div className="flex flex-wrap gap-2">
-            {assignments.filter(pastFilter).map((a) => (
-              <AssignmentCard
-                {...a}
-                onClick={() => setSelectedAssignment(a)}
-                key={a.id}
-                allowDownload
-                reload={reloadAssignments}
-                allowArchive
-              />
-            ))}
-          </div>
-        </section>
-        <section className="flex flex-col gap-4">
-          <h2 className="text-2xl font-semibold">
-            Archived Assignments ({assignments.filter(archivedFilter).length})
-          </h2>
-          <div className="flex flex-wrap gap-2">
-            {assignments.filter(archivedFilter).map((a) => (
-              <AssignmentCard
-                {...a}
-                onClick={() => setSelectedAssignment(a)}
-                key={a.id}
-                allowDownload
-                reload={reloadAssignments}
-                allowUnarchive
-              />
-            ))}
-          </div>
-        </section>
-      </>
-    );
-  };
+	const StudentPerformancePage = () => {
+		const students = users
+			.filter((x) => x.type === "student" && groups.flatMap((g) => g.participants).includes(x.id))
+			.map((u) => ({
+				...u,
+				group: groups.find((x) => x.participants.includes(u.id)),
+				corporate: getCorporateUser(u, users, groups),
+			}));
+
+		return (
+			<>
+				<div className="w-full flex justify-between items-center">
+					<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>
+					<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={users} groups={groups} />
+			</>
+		);
+	};
+
+	const AssignmentsPage = () => {
+		return (
+			<>
+				<AssignmentView
+					isOpen={!!selectedAssignment && !isCreatingAssignment}
+					onClose={() => {
+						setSelectedAssignment(undefined);
+						setIsCreatingAssignment(false);
+						reloadAssignments();
+					}}
+					assignment={selectedAssignment}
+				/>
+				<AssignmentCreator
+					assignment={selectedAssignment}
+					groups={groups.filter((x) => x.admin === user.id || x.participants.includes(user.id))}
+					users={users.filter(
+						(x) =>
+							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)),
+					)}
+					assigner={user.id}
+					isCreating={isCreatingAssignment}
+					cancelCreation={() => {
+						setIsCreatingAssignment(false);
+						setSelectedAssignment(undefined);
+						reloadAssignments();
+					}}
+				/>
+				<div className="w-full flex justify-between items-center">
+					<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>
+					<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>
+				<div className="flex flex-col gap-2">
+					<span className="text-lg font-bold">Active Assignments Status</span>
+					<div className="flex items-center gap-4">
+						<span>
+							<b>Total:</b> {assignments.filter(activeFilter).reduce((acc, curr) => acc + curr.results.length, 0)}/
+							{assignments.filter(activeFilter).reduce((acc, curr) => curr.exams.length + acc, 0)}
+						</span>
+						{Object.keys(groupBy(corporateAssignments, (x) => x.corporate?.id)).map((x) => (
+							<div key={x}>
+								<span className="font-semibold">{getUserCompanyName(users.find((u) => u.id === x)!, users, groups)}: </span>
+								<span>
+									{groupBy(corporateAssignments, (x) => x.corporate?.id)[x].reduce((acc, curr) => curr.results.length + acc, 0)}/
+									{groupBy(corporateAssignments, (x) => x.corporate?.id)[x].reduce((acc, curr) => curr.exams.length + acc, 0)}
+								</span>
+							</div>
+						))}
+					</div>
+				</div>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Active Assignments ({assignments.filter(activeFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						{assignments.filter(activeFilter).map((a) => (
+							<AssignmentCard {...a} users={users} onClick={() => setSelectedAssignment(a)} key={a.id} />
+						))}
+					</div>
+				</section>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Planned Assignments ({assignments.filter(futureFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						<div
+							onClick={() => setIsCreatingAssignment(true)}
+							className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300">
+							<BsPlus className="text-6xl" />
+							<span className="text-lg">New Assignment</span>
+						</div>
+						{assignments.filter(futureFilter).map((a) => (
+							<AssignmentCard
+								{...a}
+								users={users}
+								onClick={() => {
+									setSelectedAssignment(a);
+									setIsCreatingAssignment(true);
+								}}
+								key={a.id}
+							/>
+						))}
+					</div>
+				</section>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Past Assignments ({assignments.filter(pastFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						{assignments.filter(pastFilter).map((a) => (
+							<AssignmentCard
+								{...a}
+								users={users}
+								onClick={() => setSelectedAssignment(a)}
+								key={a.id}
+								allowDownload
+								reload={reloadAssignments}
+								allowArchive
+							/>
+						))}
+					</div>
+				</section>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Archived Assignments ({assignments.filter(archivedFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						{assignments.filter(archivedFilter).map((a) => (
+							<AssignmentCard
+								{...a}
+								users={users}
+								onClick={() => setSelectedAssignment(a)}
+								key={a.id}
+								allowDownload
+								reload={reloadAssignments}
+								allowUnarchive
+							/>
+						))}
+					</div>
+				</section>
+			</>
+		);
+	};
 
   const MasterStatisticalPage = () => {
     return (
@@ -381,128 +665,85 @@ export default function MasterCorporateDashboard({ user }: Props) {
     );
   };
 
-  const averageLevelCalculator = (studentStats: Stat[]) => {
-    const formattedStats = studentStats
-      .map((s) => ({
-        focus: users.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,
-    };
-    bandScores.forEach((b) => (levels[b.module] += b.level));
-
-    return calculateAverageLevel(levels);
-  };
-
-  const DefaultDashboard = () => (
-    <>
-      <section className="flex flex-wrap gap-2 items-center -lg:justify-center lg:justify-between text-center">
-        <IconCard
-          onClick={() => setPage("students")}
-          Icon={BsPersonFill}
-          label="Students"
-          value={users.filter(studentFilter).length}
-          color="purple"
-        />
-        <IconCard
-          onClick={() => setPage("teachers")}
-          Icon={BsPencilSquare}
-          label="Teachers"
-          value={users.filter(teacherFilter).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(
-            stats.filter((s) =>
-              groups.flatMap((g) => g.participants).includes(s.user)
-            )
-          ).toFixed(1)}
-          color="purple"
-        />
-        <IconCard
-          onClick={() => setPage("groups")}
-          Icon={BsPeople}
-          label="Groups"
-          value={groups.length}
-          color="purple"
-        />
-        <IconCard
-          Icon={BsPersonCheck}
-          label="User Balance"
-          value={`${codes.length}/${
-            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={masterCorporateUserGroups.length}
-          color="purple"
-          onClick={() => setPage("corporate")}
-        />
-        <IconCard
+	const DefaultDashboard = () => (
+		<>
+			<section className="flex flex-wrap gap-2 items-center -lg:justify-center lg:justify-between text-center">
+				<IconCard
+					onClick={() => setPage("students")}
+					Icon={BsPersonFill}
+					label="Students"
+					value={users.filter(studentFilter).length}
+					color="purple"
+				/>
+				<IconCard
+					onClick={() => setPage("teachers")}
+					Icon={BsPencilSquare}
+					label="Teachers"
+					value={users.filter(teacherFilter).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(
+						users,
+						stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user)),
+					).toFixed(1)}
+					color="purple"
+				/>
+				<IconCard onClick={() => setPage("groups")} Icon={BsPeople} label="Groups" value={groups.length} color="purple" />
+				<IconCard
+					Icon={BsPersonCheck}
+					label="User Balance"
+					value={`${codes.length}/${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={masterCorporateUserGroups.length}
+					color="purple"
+					onClick={() => setPage("corporate")}
+				/>
+				<IconCard
+					Icon={BsPersonFillGear}
+					label="Student Performance"
+					value={users.filter(studentFilter).length}
+					color="purple"
+					onClick={() => setPage("studentsPerformance")}
+				/>
+                <IconCard
           Icon={BsDatabase}
           label="Master Statistical"
           // value={masterCorporateUserGroups.length}
           color="purple"
           onClick={() => setPage("statistical")}
         />
-        <button
-          disabled={isAssignmentsLoading}
-          onClick={() => setPage("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>
+				<button
+					disabled={isAssignmentsLoading}
+					onClick={() => setPage("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">
@@ -619,23 +860,24 @@ export default function MasterCorporateDashboard({ user }: Props) {
                               .includes(x.id),
                         });
 
-                        router.push("/list/users");
-                      }
-                    : undefined
-                }
-                user={selectedUser}
-              />
-            </div>
-          )}
-        </>
-      </Modal>
-      {page === "students" && <StudentsList />}
-      {page === "teachers" && <TeachersList />}
-      {page === "groups" && <GroupsList />}
-      {page === "corporate" && <CorporateList />}
-      {page === "assignments" && <AssignmentsPage />}
+												router.push("/list/users");
+										  }
+										: undefined
+								}
+								user={selectedUser}
+							/>
+						</div>
+					)}
+				</>
+			</Modal>
+			{page === "students" && <StudentsList />}
+			{page === "teachers" && <TeachersList />}
+			{page === "groups" && <GroupsList />}
+			{page === "corporate" && <CorporateList />}
+			{page === "assignments" && <AssignmentsPage />}
+			{page === "studentsPerformance" && <StudentPerformancePage />}
       {page === "statistical" && <MasterStatisticalPage />}
-      {page === "" && <DefaultDashboard />}
-    </>
-  );
-}
+			{page === "" && <DefaultDashboard />}
+		</>
+	);
+}

src/dashboards/Teacher.tsx

@@ -63,7 +63,7 @@ export default function TeacherDashboard({user}: Props) {
 
 	const {stats} = useStats();
 	const {users, reload} = useUsers();
-	const {groups} = useGroups(user.id);
+	const {groups} = useGroups({adminAdmins: user.id});
 	const {permissions} = usePermissions(user.id);
 	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({assigner: user.id});
 
@@ -193,7 +193,7 @@ export default function TeacherDashboard({user}: Props) {
 								? groups
 										.filter((g) => g.admin === selectedUser.id)
 										.flatMap((g) => g.participants)
-										.includes(x.id) || false
+										.includes(x.id)
 								: groups.flatMap((g) => g.participants).includes(x.id)),
 					)}
 					assigner={user.id}
@@ -222,7 +222,7 @@ export default function TeacherDashboard({user}: Props) {
 					<h2 className="text-2xl font-semibold">Active Assignments ({assignments.filter(activeFilter).length})</h2>
 					<div className="flex flex-wrap gap-2">
 						{assignments.filter(activeFilter).map((a) => (
-							<AssignmentCard {...a} onClick={() => setSelectedAssignment(a)} key={a.id} />
+							<AssignmentCard {...a} users={users} onClick={() => setSelectedAssignment(a)} key={a.id} />
 						))}
 					</div>
 				</section>
@@ -238,6 +238,7 @@ export default function TeacherDashboard({user}: Props) {
 						{assignments.filter(futureFilter).map((a) => (
 							<AssignmentCard
 								{...a}
+								users={users}
 								onClick={() => {
 									setSelectedAssignment(a);
 									setIsCreatingAssignment(true);
@@ -253,6 +254,7 @@ export default function TeacherDashboard({user}: Props) {
 						{assignments.filter(pastFilter).map((a) => (
 							<AssignmentCard
 								{...a}
+								users={users}
 								onClick={() => setSelectedAssignment(a)}
 								key={a.id}
 								allowDownload
@@ -268,6 +270,7 @@ export default function TeacherDashboard({user}: Props) {
 						{assignments.filter(archivedFilter).map((a) => (
 							<AssignmentCard
 								{...a}
+								users={users}
 								onClick={() => setSelectedAssignment(a)}
 								key={a.id}
 								allowDownload

src/exams/Level.tsx

@@ -1,55 +1,191 @@
 import BlankQuestionsModal from "@/components/BlankQuestionsModal";
-import {renderExercise} from "@/components/Exercises";
+import { renderExercise } from "@/components/Exercises";
+import HighlightContent from "@/components/HighlightContent";
 import Button from "@/components/Low/Button";
 import ModuleTitle from "@/components/Medium/ModuleTitle";
-import {renderSolution} from "@/components/Solutions";
-import {infoButtonStyle} from "@/constants/buttonStyles";
-import {LevelExam, LevelPart, UserSolution, WritingExam} from "@/interfaces/exam";
+import { renderSolution } from "@/components/Solutions";
+import { infoButtonStyle } from "@/constants/buttonStyles";
+import { Module } from "@/interfaces";
+import { Exercise, FillBlanksExercise, FillBlanksMCOption, LevelExam, LevelPart, MultipleChoiceExercise, ShuffleMap, UserSolution, WritingExam } from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
-import {defaultUserSolutions} from "@/utils/exams";
-import {countExercises} from "@/utils/moduleUtils";
-import {mdiArrowRight} from "@mdi/js";
+import { defaultUserSolutions } from "@/utils/exams";
+import { countExercises } from "@/utils/moduleUtils";
+import { mdiArrowRight } from "@mdi/js";
 import Icon from "@mdi/react";
 import clsx from "clsx";
-import {Fragment, useEffect, useState} from "react";
-import {BsChevronDown, BsChevronUp} from "react-icons/bs";
-import {toast} from "react-toastify";
+import { Dispatch, Fragment, SetStateAction, use, useEffect, useMemo, useRef, useState } from "react";
+import { BsChevronDown, BsChevronUp } from "react-icons/bs";
+import { toast } from "react-toastify";
 
 interface Props {
 	exam: LevelExam;
 	showSolutions?: boolean;
 	onFinish: (userSolutions: UserSolution[]) => void;
+	editing?: boolean;
 }
 
-function TextComponent({part}: {part: LevelPart}) {
+function TextComponent({
+	part, highlightPhrases, contextWord, setContextWordLine
+}: {
+	part: LevelPart, highlightPhrases: string[], contextWord: string | undefined, setContextWordLine: React.Dispatch<React.SetStateAction<number | undefined>>
+}) {
+	const textRef = useRef<HTMLDivElement>(null);
+	const [lineNumbers, setLineNumbers] = useState<number[]>([]);
+	const [lineHeight, setLineHeight] = useState<number>(0);
+	part.showContextLines = true;
+
+	const calculateLineNumbers = () => {
+		if (textRef.current) {
+			const computedStyle = window.getComputedStyle(textRef.current);
+			const lineHeightValue = parseFloat(computedStyle.lineHeight);
+			const containerWidth = textRef.current.clientWidth;
+			setLineHeight(lineHeightValue);
+
+			const offscreenElement = document.createElement('div');
+			offscreenElement.style.position = 'absolute';
+			offscreenElement.style.top = '-9999px';
+			offscreenElement.style.left = '-9999px';
+			offscreenElement.style.whiteSpace = 'pre-wrap';
+			offscreenElement.style.width = `${containerWidth}px`;
+			offscreenElement.style.font = computedStyle.font;
+			offscreenElement.style.lineHeight = computedStyle.lineHeight;
+			offscreenElement.style.wordWrap = 'break-word';
+			offscreenElement.style.textAlign = computedStyle.textAlign as CanvasTextAlign;
+
+			const textContent = textRef.current.textContent || '';
+			textContent.split(/(\s+)/).forEach((word: string) => {
+				const span = document.createElement('span');
+				span.textContent = word;
+				offscreenElement.appendChild(span);
+			});
+
+			document.body.appendChild(offscreenElement);
+
+			const lines: string[][] = [[]];
+			let currentLine = 1;
+			let currentLineTop: number | undefined;
+			let contextWordLine: number | null = null;
+
+			const firstChild = offscreenElement.firstChild as HTMLElement;
+			if (firstChild) {
+				currentLineTop = firstChild.getBoundingClientRect().top;
+			}
+
+			const spans = offscreenElement.querySelectorAll<HTMLSpanElement>('span');
+
+			spans.forEach(span => {
+				const rect = span.getBoundingClientRect();
+				const top = rect.top;
+
+				if (currentLineTop !== undefined && top > currentLineTop) {
+					currentLine++;
+					currentLineTop = top;
+					lines.push([]);
+				}
+
+				lines[lines.length - 1].push(span.textContent?.trim() || '');
+
+
+				if (contextWord && contextWordLine === null && span.textContent?.includes(contextWord)) {
+					contextWordLine = currentLine;
+				}
+			});
+
+			setLineNumbers(lines.map((_, index) => index + 1));
+			if (contextWordLine) {
+				setContextWordLine(contextWordLine);
+			}
+
+			document.body.removeChild(offscreenElement);
+		}
+	};
+
+	useEffect(() => {
+		calculateLineNumbers();
+
+		const resizeObserver = new ResizeObserver(() => {
+			calculateLineNumbers();
+		});
+
+		if (textRef.current) {
+			resizeObserver.observe(textRef.current);
+		}
+
+		return () => {
+			if (textRef.current) {
+				resizeObserver.unobserve(textRef.current);
+			}
+		};
+	}, [part.context, part.showContextLines, contextWord]);
+
+	if (typeof part.showContextLines === "undefined") {
+		return (
+			<div className="flex flex-col gap-2 w-full">
+				<div className="border border-mti-gray-dim w-full rounded-full opacity-10" />
+				{!!part.context &&
+					part.context
+						.split(/\n|(\\n)/g)
+						.filter((x) => x && x.length > 0 && x !== "\\n")
+						.map((line, index) => (
+							<Fragment key={index}>
+								<p key={index}>{line}</p>
+							</Fragment>
+						))}
+			</div>
+		);
+	}
+
 	return (
 		<div className="flex flex-col gap-2 w-full">
 			<div className="border border-mti-gray-dim w-full rounded-full opacity-10" />
-			{!!part.context &&
-				part.context
-					.split(/\n|(\\n)/g)
-					.filter((x) => x && x.length > 0 && x !== "\\n")
-					.map((line, index) => (
-						<Fragment key={index}>
-							<p key={index}>{line}</p>
-						</Fragment>
+			<div className="flex mt-2">
+				<div className="flex-shrink-0 w-8 pr-2">
+					{lineNumbers.map(num => (
+						<div key={num} className="text-gray-400 flex justify-end" style={{ lineHeight: `${lineHeight}px` }}>
+							{num}
+						</div>
 					))}
+				</div>
+				<div ref={textRef} className="h-fit whitespace-pre-wrap ml-2">
+					<HighlightContent html={part.context!} highlightPhrases={highlightPhrases} firstOccurence={true} />
+				</div>
+			</div>
 		</div>
 	);
 }
 
-export default function Level({exam, showSolutions = false, onFinish}: Props) {
-	const [multipleChoicesDone, setMultipleChoicesDone] = useState<{id: string; amount: number}[]>([]);
+
+const typeCheckWordsMC = (words: any[]): words is FillBlanksMCOption[] => {
+	return Array.isArray(words) && words.every(
+		word => word && typeof word === 'object' && 'id' in word && 'options' in word
+	);
+}
+
+
+export default function Level({ exam, showSolutions = false, onFinish, editing = false }: Props) {
+	const [multipleChoicesDone, setMultipleChoicesDone] = useState<{ id: string; amount: number }[]>([]);
 	const [showBlankModal, setShowBlankModal] = useState(false);
 
-	const {userSolutions, setUserSolutions} = useExamStore((state) => state);
-	const {hasExamEnded, setHasExamEnded} = useExamStore((state) => state);
-	const {partIndex, setPartIndex} = useExamStore((state) => state);
-	const {exerciseIndex, setExerciseIndex} = useExamStore((state) => state);
+	const { userSolutions, setUserSolutions } = useExamStore((state) => state);
+	const { hasExamEnded, setHasExamEnded } = useExamStore((state) => state);
+	const { partIndex, setPartIndex } = useExamStore((state) => state);
+	const { exerciseIndex, setExerciseIndex } = useExamStore((state) => state);
 	const [storeQuestionIndex, setStoreQuestionIndex] = useExamStore((state) => [state.questionIndex, state.setQuestionIndex]);
+	//const [shuffleMaps, setShuffleMaps] = useExamStore((state) => [state.shuffleMaps, state.setShuffleMaps])
+	const [currentExercise, setCurrentExercise] = useState<Exercise>();
 
 	const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));
 
+	const [highlightPhrases, setContextHighlight] = useState<string[]>([]);
+	const [contextWord, setContextWord] = useState<string | undefined>(undefined);
+	const [contextWordLine, setContextWordLine] = useState<number | undefined>(undefined);
+
+	/*useEffect(() => {
+		if (showSolutions && userSolutions[exerciseIndex].shuffleMaps) {
+			setShuffleMaps(userSolutions[exerciseIndex].shuffleMaps as ShuffleMap[])
+		}
+	}, [showSolutions])*/
+
 	useEffect(() => {
 		if (hasExamEnded && exerciseIndex === -1) {
 			setExerciseIndex(exerciseIndex + 1);
@@ -65,15 +201,136 @@ export default function Level({exam, showSolutions = false, onFinish}: Props) {
 		onFinish(userSolutions);
 	};
 
+
+	const getExercise = () => {
+		if (exerciseIndex === -1) {
+			return undefined;
+		}
+		let exercise = exam.parts[partIndex]?.exercises[exerciseIndex];
+		if (!exercise) return undefined;
+
+		exercise = {
+			...exercise,
+			userSolutions: userSolutions.find((x) => x.exercise === exercise.id)?.solutions || [],
+		};
+
+		/*if (exam.shuffle && exercise.type === "multipleChoice") {
+			if (shuffleMaps.length == 0 && !showSolutions) {
+				console.log("Shuffling answers");
+				const newShuffleMaps: ShuffleMap[] = [];
+
+				exercise.questions = exercise.questions.map(question => {
+					const options = [...question.options];
+					let shuffledOptions = [...options].sort(() => Math.random() - 0.5);
+
+					const newOptions = options.map((option, index) => ({
+						id: option.id,
+						text: shuffledOptions[index].text
+					}));
+
+					const optionMapping = options.reduce<{ [key: string]: string }>((acc, originalOption) => {
+						const shuffledPosition = newOptions.find(newOpt => newOpt.text === originalOption.text)?.id;
+						if (shuffledPosition) {
+							acc[shuffledPosition] = originalOption.id;
+						}
+						return acc;
+					}, {});
+
+					newShuffleMaps.push({ id: question.id, map: optionMapping });
+
+					return { ...question, options: newOptions };
+				});
+
+				setShuffleMaps(newShuffleMaps);
+			} else {
+				console.log("Retrieving shuffles");
+				exercise.questions = exercise.questions.map(question => {
+					const questionShuffleMap = shuffleMaps.find(map => map.id === question.id);
+					if (questionShuffleMap) {
+						const newOptions = question.options.map(option => ({
+							id: option.id,
+							text: question.options.find(o => questionShuffleMap.map[o.id] === option.id)?.text || option.text
+						}));
+						return { ...question, options: newOptions };
+					}
+					return question;
+				});
+			}
+		} else if (exam.shuffle && exercise.type === "fillBlanks" && typeCheckWordsMC(exercise.words)) {
+			if (shuffleMaps.length === 0 && !showSolutions) {
+				const newShuffleMaps: ShuffleMap[] = [];
+
+				exercise.words = exercise.words.map(word => {
+					if ('options' in word) {
+						const options = { ...word.options };
+						const originalKeys = Object.keys(options);
+						const shuffledKeys = [...originalKeys].sort(() => Math.random() - 0.5);
+				
+						const newOptions = shuffledKeys.reduce((acc, key, index) => {
+							acc[key as keyof typeof options] = options[originalKeys[index] as keyof typeof options];
+							return acc;
+						}, {} as { [key in keyof typeof options]: string });
+				
+						const optionMapping = originalKeys.reduce((acc, key, index) => {
+							acc[key as keyof typeof options] = shuffledKeys[index];
+							return acc;
+						}, {} as { [key in keyof typeof options]: string });
+				
+						newShuffleMaps.push({ id: word.id, map: optionMapping });
+				
+						return { ...word, options: newOptions };
+					}
+					return word;
+				});
+
+				setShuffleMaps(newShuffleMaps);
+			}
+		}
+		*/
+		return exercise;
+	};
+
+	useEffect(() => {
+		//console.log("Getting another exercise");
+		//setShuffleMaps([]);
+		setCurrentExercise(getExercise());
+	}, [partIndex, exerciseIndex]);
+
+
+	useEffect(() => {
+		const regex = /.*?['"](.*?)['"] in line (\d+)\?$/;
+		if (currentExercise && currentExercise.type === "multipleChoice") {
+			const match = currentExercise.questions[storeQuestionIndex].prompt.match(regex);
+			if (match) {
+				const word = match[1];
+				const originalLineNumber = match[2];
+				setContextHighlight([word]);
+
+				if (word !== contextWord) {
+					setContextWord(word);
+				}
+
+				const updatedPrompt = currentExercise.questions[storeQuestionIndex].prompt.replace(
+					`in line ${originalLineNumber}`,
+					`in line ${contextWordLine || originalLineNumber}`
+				);
+
+				currentExercise.questions[storeQuestionIndex].prompt = updatedPrompt;
+			} else {
+				setContextHighlight([]);
+				setContextWord(undefined);
+			}
+		}
+	}, [storeQuestionIndex, contextWordLine, exerciseIndex, partIndex]); //, shuffleMaps]);
+
 	const nextExercise = (solution?: UserSolution) => {
 		scrollToTop();
 		if (solution) {
-			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "level", exam: exam.id}]);
+			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), { ...solution, module: "level", exam: exam.id }]);
 		}
 
 		if (storeQuestionIndex > 0) {
-			const exercise = getExercise();
-			setMultipleChoicesDone((prev) => [...prev.filter((x) => x.id !== exercise.id), {id: exercise.id, amount: storeQuestionIndex}]);
+			setMultipleChoicesDone((prev) => [...prev.filter((x) => x.id !== currentExercise!.id), { id: currentExercise!.id, amount: storeQuestionIndex }]);
 		}
 		setStoreQuestionIndex(0);
 
@@ -94,6 +351,7 @@ export default function Level({exam, showSolutions = false, onFinish}: Props) {
 				(x) => x === 0,
 			) &&
 			!showSolutions &&
+			!editing &&
 			!hasExamEnded
 		) {
 			setShowBlankModal(true);
@@ -103,7 +361,11 @@ export default function Level({exam, showSolutions = false, onFinish}: Props) {
 		setHasExamEnded(false);
 
 		if (solution) {
-			onFinish([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "level", exam: exam.id}]);
+			let stat = { ...solution, module: "level" as Module, exam: exam.id }
+			/*if (exam.shuffle) {
+				stat.shuffleMaps = shuffleMaps
+			}*/
+			onFinish([...userSolutions.filter((x) => x.exercise !== solution.exercise), { ...stat }]);
 		} else {
 			onFinish(userSolutions);
 		}
@@ -112,26 +374,17 @@ export default function Level({exam, showSolutions = false, onFinish}: Props) {
 	const previousExercise = (solution?: UserSolution) => {
 		scrollToTop();
 		if (solution) {
-			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "level", exam: exam.id}]);
+			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), { ...solution, module: "level", exam: exam.id }]);
 		}
 
 		if (storeQuestionIndex > 0) {
-			const exercise = getExercise();
-			setMultipleChoicesDone((prev) => [...prev.filter((x) => x.id !== exercise.id), {id: exercise.id, amount: storeQuestionIndex}]);
+			setMultipleChoicesDone((prev) => [...prev.filter((x) => x.id !== currentExercise!.id), { id: currentExercise!.id, amount: storeQuestionIndex }]);
 		}
 		setStoreQuestionIndex(0);
 
 		setExerciseIndex(exerciseIndex - 1);
 	};
 
-	const getExercise = () => {
-		const exercise = exam.parts[partIndex].exercises[exerciseIndex];
-		return {
-			...exercise,
-			userSolutions: userSolutions.find((x) => x.exercise === exercise.id)?.solutions || [],
-		};
-	};
-
 	const calculateExerciseIndex = () => {
 		if (partIndex === 0)
 			return (
@@ -157,7 +410,12 @@ export default function Level({exam, showSolutions = false, onFinish}: Props) {
 					</h4>
 					<span className="text-base">You will be allowed to read the text while doing the exercises</span>
 				</div>
-				<TextComponent part={exam.parts[partIndex]} />
+				<TextComponent
+					part={exam.parts[partIndex]}
+					highlightPhrases={highlightPhrases}
+					contextWord={contextWord}
+					setContextWordLine={setContextWordLine}
+				/>
 			</>
 		</div>
 	);
@@ -171,7 +429,7 @@ export default function Level({exam, showSolutions = false, onFinish}: Props) {
 					exerciseIndex={calculateExerciseIndex()}
 					module="level"
 					totalExercises={countExercises(exam.parts.flatMap((x) => x.exercises))}
-					disableTimer={showSolutions}
+					disableTimer={showSolutions || editing}
 				/>
 				<div
 					className={clsx(
@@ -184,12 +442,14 @@ export default function Level({exam, showSolutions = false, onFinish}: Props) {
 						partIndex > -1 &&
 						exerciseIndex < exam.parts[partIndex].exercises.length &&
 						!showSolutions &&
-						renderExercise(getExercise(), exam.id, nextExercise, previousExercise)}
+						!editing &&
+						currentExercise &&
+						renderExercise(currentExercise, exam.id, nextExercise, previousExercise)}
 
 					{exerciseIndex > -1 &&
 						partIndex > -1 &&
 						exerciseIndex < exam.parts[partIndex].exercises.length &&
-						showSolutions &&
+						(showSolutions || editing) &&
 						renderSolution(exam.parts[partIndex].exercises[exerciseIndex], nextExercise, previousExercise)}
 				</div>
 				{exerciseIndex === -1 && partIndex > 0 && (

src/exams/Selection.tsx

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

src/hooks/useGroups.tsx

@@ -2,32 +2,40 @@ import {Group, User} from "@/interfaces/user";
 import axios from "axios";
 import {useEffect, useState} from "react";
 
-export default function useGroups(admin?: string, userType?: string) {
+interface Props {
+	admin?: string;
+	userType?: string;
+	adminAdmins?: string;
+}
+
+export default function useGroups({admin, userType, adminAdmins}: Props) {
 	const [groups, setGroups] = useState<Group[]>([]);
 	const [isLoading, setIsLoading] = useState(false);
 	const [isError, setIsError] = useState(false);
 
-	const isMasterType = userType?.startsWith('master');
+	const isMasterType = userType?.startsWith("master");
 
 	const getData = () => {
 		setIsLoading(true);
 
-		const url = admin ? `/api/groups?admin=${admin}` : "/api/groups";
+		const url = admin && !adminAdmins ? `/api/groups?admin=${admin}` : "/api/groups";
 		axios
 			.get<Group[]>(url)
 			.then((response) => {
-				if(isMasterType) {
-					return setGroups(response.data);
-				}
-				const filter = (g: Group) => g.admin === admin || g.participants.includes(admin || "");
+				if (isMasterType) return setGroups(response.data);
 
-				const filteredGroups = admin ? response.data.filter(filter) : response.data;
+				const filterByAdmins = !!adminAdmins
+					? [adminAdmins, ...response.data.filter((g) => g.participants.includes(adminAdmins)).flatMap((g) => g.admin)]
+					: [admin];
+				const adminFilter = (g: Group) => filterByAdmins.includes(g.admin) || g.participants.includes(admin || "");
+
+				const filteredGroups = !!admin || !!adminAdmins ? response.data.filter(adminFilter) : response.data;
 				return setGroups(admin ? filteredGroups.map((g) => ({...g, disableEditing: g.disableEditing || g.admin !== admin})) : filteredGroups);
 			})
 			.finally(() => setIsLoading(false));
 	};
 
-	useEffect(getData, [admin, isMasterType]);
+	useEffect(getData, [admin, adminAdmins, isMasterType]);
 
 	return {groups, isLoading, isError, reload: getData};
 }

src/hooks/usePermissions.tsx

@@ -17,7 +17,6 @@ export default function usePermissions(user: string) {
 				const permissionTypes = response.data
 					.filter((x) => !x.users.includes(user))
 					.reduce((acc, curr) => [...acc, curr.type], [] as PermissionType[]);
-				console.log(response.data, permissionTypes);
 				setPermissions(permissionTypes);
 			})
 			.finally(() => setIsLoading(false));

src/interfaces/exam.ts

@@ -12,6 +12,7 @@ interface ExamBase {
 	isDiagnostic: boolean;
 	variant?: Variant;
 	difficulty?: Difficulty;
+	shuffle?: boolean;
 	createdBy?: string; // option as it has been added later
 	createdAt?: string; // option as it has been added later
 }
@@ -36,6 +37,7 @@ export interface LevelExam extends ExamBase {
 
 export interface LevelPart {
 	context?: string;
+	showContextLines?: boolean;
 	exercises: Exercise[];
 }
 
@@ -65,6 +67,7 @@ export interface UserSolution {
 	};
 	exercise: string;
 	isDisabled?: boolean;
+	shuffleMaps?: ShuffleMap[]
 }
 
 export interface WritingExam extends ExamBase {
@@ -77,7 +80,7 @@ interface WordCounter {
 	limit: number;
 }
 
-export interface SpeakingExam  extends ExamBase {
+export interface SpeakingExam extends ExamBase {
 	module: "speaking";
 	exercises: (SpeakingExercise | InteractiveSpeakingExercise)[];
 	instructorGender: InstructorGender;
@@ -96,8 +99,8 @@ export type Exercise =
 export interface Evaluation {
 	comment: string;
 	overall: number;
-	task_response: {[key: string]: number | {grade: number; comment: string}};
-	misspelled_pairs?: {correction: string | null; misspelled: string}[];
+	task_response: { [key: string]: number | { grade: number; comment: string } };
+	misspelled_pairs?: { correction: string | null; misspelled: string }[];
 }
 
 
@@ -110,10 +113,9 @@ type InteractiveTranscriptType = { [key in InteractiveTranscriptKey]?: string };
 type InteractiveFixedTextType = { [key in InteractiveFixedTextKey]?: string };
 
 interface InteractiveSpeakingEvaluation extends Evaluation,
-InteractivePerfectAnswerType, 
-InteractiveTranscriptType, 
-InteractiveFixedTextType 
-{}
+	InteractivePerfectAnswerType,
+	InteractiveTranscriptType,
+	InteractiveFixedTextType { }
 
 
 interface SpeakingEvaluation extends CommonEvaluation {
@@ -187,10 +189,10 @@ export interface InteractiveSpeakingExercise {
 	first_title?: string;
 	second_title?: string;
 	text: string;
-	prompts: {text: string; video_url: string}[];
+	prompts: { text: string; video_url: string }[];
 	userSolutions: {
 		id: string;
-		solution: {questionIndex: number; question: string; answer: string}[];
+		solution: { questionIndex: number; question: string; answer: string }[];
 		evaluation?: InteractiveSpeakingEvaluation;
 	}[];
 	topic?: string;
@@ -199,13 +201,23 @@ export interface InteractiveSpeakingExercise {
 	variant?: "initial" | "final";
 }
 
+export interface FillBlanksMCOption {
+	id: string;
+	options: {
+		A: string;
+		B: string;
+		C: string;
+		D: string;
+	}
+}
+
 export interface FillBlanksExercise {
 	prompt: string; // *EXAMPLE: "Complete the summary below. Click a blank to select the corresponding word for it."
 	type: "fillBlanks";
 	id: string;
-	words: (string | {letter: string; word: string})[]; // *EXAMPLE: ["preserve", "unaware"]
+	words: (string | { letter: string; word: string } | FillBlanksMCOption)[]; // *EXAMPLE: ["preserve", "unaware"]
 	text: string; // *EXAMPLE: "They tried to {{1}} burning"
-	allowRepetition: boolean;
+	allowRepetition?: boolean;
 	solutions: {
 		id: string; // *EXAMPLE: "1"
 		solution: string; // *EXAMPLE: "preserve"
@@ -214,6 +226,7 @@ export interface FillBlanksExercise {
 		id: string; // *EXAMPLE: "1"
 		solution: string; // *EXAMPLE: "preserve"
 	}[];
+	variant?: string;
 }
 
 export interface TrueFalseExercise {
@@ -221,7 +234,7 @@ export interface TrueFalseExercise {
 	id: string;
 	prompt: string; // *EXAMPLE: "Select the appropriate option."
 	questions: TrueFalseQuestion[];
-	userSolutions: {id: string; solution: "true" | "false" | "not_given"}[];
+	userSolutions: { id: string; solution: "true" | "false" | "not_given" }[];
 }
 
 export interface TrueFalseQuestion {
@@ -250,7 +263,7 @@ export interface MatchSentencesExercise {
 	type: "matchSentences";
 	id: string;
 	prompt: string;
-	userSolutions: {question: string; option: string}[];
+	userSolutions: { question: string; option: string }[];
 	sentences: MatchSentenceExerciseSentence[];
 	allowRepetition: boolean;
 	options: MatchSentenceExerciseOption[];
@@ -273,7 +286,7 @@ export interface MultipleChoiceExercise {
 	id: string;
 	prompt: string; // *EXAMPLE: "Select the appropriate option."
 	questions: MultipleChoiceQuestion[];
-	userSolutions: {question: string; option: string}[];
+	userSolutions: { question: string; option: string }[];
 }
 
 export interface MultipleChoiceQuestion {
@@ -286,4 +299,12 @@ export interface MultipleChoiceQuestion {
 		src?: string; // *EXAMPLE: "https://i.imgur.com/rEbrSqA.png" (only used if the variant is "image")
 		text?: string; // *EXAMPLE: "wallet, pens and novel" (only used if the variant is "text")
 	}[];
+	shuffleMap?: Record<string, string>;
+}
+
+export interface ShuffleMap {
+	id: string;
+	map: {
+		[key: string]: string;
+	}
 }

src/interfaces/user.ts

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

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

src/pages/(admin)/BatchCreateUser.tsx

@@ -111,7 +111,6 @@ export default function BatchCreateUser({user}: {user: User}) {
 						return clear();
 					}
 
-					console.log(information);
 					setInfos(information);
 				} catch {
 					toast.error(

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

@@ -154,7 +154,13 @@ const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
 								label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
 							}))}
 							options={users
-								.filter((x) => (user.type === "teacher" ? x.type === "student" : x.type === "student" || x.type === "teacher"))
+								.filter((x) =>
+									user.type === "teacher"
+										? x.type === "student"
+										: user.type === "corporate"
+										? x.type === "student" || x.type === "teacher"
+										: x.type === "student" || x.type === "teacher" || x.type === "corporate",
+								)
 								.map((x) => ({value: x.id, label: `${x.email} - ${x.name}`}))}
 							onChange={(value) => setParticipants(value.map((x) => x.value))}
 							isMulti
@@ -201,7 +207,11 @@ export default function GroupList({user}: {user: User}) {
 	const {permissions} = usePermissions(user?.id || "");
 
 	const {users} = useUsers();
-	const {groups, reload} = useGroups(user && filterTypes.includes(user?.type) ? user.id : undefined, user?.type);
+	const {groups, reload} = useGroups({
+		admin: user && filterTypes.includes(user?.type) ? user.id : undefined,
+		userType: user?.type,
+		adminAdmins: user?.type === "teacher" ? user?.id : undefined,
+	});
 
 	useEffect(() => {
 		if (user && ["corporate", "teacher", "mastercorporate"].includes(user.type)) {

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

@@ -58,7 +58,7 @@ export default function UserList({
 
 	const {users, reload} = useUsers();
 	const {permissions} = usePermissions(user?.id || "");
-	const {groups} = useGroups(user && ["corporate", "teacher", "mastercorporate"].includes(user?.type) ? user.id : undefined);
+	const {groups} = useGroups({admin: user && ["corporate", "teacher", "mastercorporate"].includes(user?.type) ? user.id : undefined});
 
 	const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
 	const router = useRouter();
@@ -262,10 +262,12 @@ export default function UserList({
 			cell: ({row, getValue}) => (
 				<div
 					className={clsx(
-						PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) &&
+						checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) &&
 							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
 					)}
-					onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}>
+					onClick={() =>
+						checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) ? setSelectedUser(row.original) : null
+					}>
 					{getValue()}
 				</div>
 			),
@@ -279,10 +281,10 @@ export default function UserList({
 			) as any,
 			cell: (info) =>
 				info.getValue()
-					? `${countryCodes.findOne("countryCode" as any, info.getValue()).flag} ${
-							countries[info.getValue() as unknown as keyof TCountries].name
-					  } (+${countryCodes.findOne("countryCode" as any, info.getValue()).countryCallingCode})`
-					: "Not available",
+					? `${countryCodes.findOne("countryCode" as any, info.getValue())?.flag} ${
+							countries[info.getValue() as unknown as keyof TCountries]?.name
+					  } (+${countryCodes.findOne("countryCode" as any, info.getValue())?.countryCallingCode})`
+					: "N/A",
 		}),
 		columnHelper.accessor("demographicInformation.phone", {
 			header: (
@@ -291,7 +293,7 @@ export default function UserList({
 					<SorterArrow name="phone" />
 				</button>
 			) as any,
-			cell: (info) => info.getValue() || "Not available",
+			cell: (info) => info.getValue() || "N/A",
 			enableSorting: true,
 		}),
 		columnHelper.accessor(
@@ -301,14 +303,23 @@ export default function UserList({
 				id: "employment",
 				header: (
 					<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "employment"))}>
-						<span>Employment/Position</span>
+						<span>Employment</span>
 						<SorterArrow name="employment" />
 					</button>
 				) as any,
-				cell: (info) => (info.row.original.type === "corporate" ? info.getValue() : capitalize(info.getValue())) || "Not available",
+				cell: (info) => (info.row.original.type === "corporate" ? info.getValue() : capitalize(info.getValue())) || "N/A",
 				enableSorting: true,
 			},
 		),
+		columnHelper.accessor("lastLogin", {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "lastLogin"))}>
+					<span>Last Login</span>
+					<SorterArrow name="lastLogin" />
+				</button>
+			) as any,
+			cell: (info) => (!!info.getValue() ? moment(info.getValue()).format("YYYY-MM-DD HH:mm") : "N/A"),
+		}),
 		columnHelper.accessor("demographicInformation.gender", {
 			header: (
 				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "gender"))}>
@@ -316,7 +327,7 @@ export default function UserList({
 					<SorterArrow name="gender" />
 				</button>
 			) as any,
-			cell: (info) => capitalize(info.getValue()) || "Not available",
+			cell: (info) => capitalize(info.getValue()) || "N/A",
 			enableSorting: true,
 		}),
 		{
@@ -341,11 +352,13 @@ export default function UserList({
 			cell: ({row, getValue}) => (
 				<div
 					className={clsx(
-						PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) &&
+						checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) &&
 							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
 					)}
-					onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}>
-					{row.original.type === "corporate" ? row.original.corporateInformation?.companyInformation?.name || getValue() : getValue()}
+					onClick={() =>
+						checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) ? setSelectedUser(row.original) : null
+					}>
+					{getValue()}
 				</div>
 			),
 		}),
@@ -379,7 +392,7 @@ export default function UserList({
 		columnHelper.accessor("corporateInformation.companyInformation.name", {
 			header: (
 				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "companyName"))}>
-					<span>Company Name</span>
+					<span>Company</span>
 					<SorterArrow name="companyName" />
 				</button>
 			) as any,
@@ -388,7 +401,7 @@ export default function UserList({
 		columnHelper.accessor("subscriptionExpirationDate", {
 			header: (
 				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "expiryDate"))}>
-					<span>Expiry Date</span>
+					<span>Expiration</span>
 					<SorterArrow name="expiryDate" />
 				</button>
 			) as any,
@@ -401,7 +414,7 @@ export default function UserList({
 		columnHelper.accessor("isVerified", {
 			header: (
 				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "verification"))}>
-					<span>Verification</span>
+					<span>Verified</span>
 					<SorterArrow name="verification" />
 				</button>
 			) as any,
@@ -464,6 +477,15 @@ export default function UserList({
 			return 0;
 		}
 
+		if (sorter === "lastLogin" || sorter === reverseString("lastLogin")) {
+			if (!a.lastLogin && b.lastLogin) return sorter === "lastLogin" ? -1 : 1;
+			if (a.lastLogin && !b.lastLogin) return sorter === "lastLogin" ? 1 : -1;
+			if (!a.lastLogin && !b.lastLogin) return 0;
+			if (moment(a.lastLogin).isAfter(b.lastLogin)) return sorter === "lastLogin" ? -1 : 1;
+			if (moment(b.lastLogin).isAfter(a.lastLogin)) return sorter === "lastLogin" ? 1 : -1;
+			return 0;
+		}
+
 		if (sorter === "country" || sorter === reverseString("country")) {
 			if (!a.demographicInformation?.country && b.demographicInformation?.country) return sorter === "country" ? -1 : 1;
 			if (a.demographicInformation?.country && !b.demographicInformation?.country) return sorter === "country" ? 1 : -1;

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

@@ -27,7 +27,7 @@ export default function Lists({user}: {user: User}) {
 					}>
 					User List
 				</Tab>
-				{checkAccess(user, ["developer"]) && (
+				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate", "teacher"]) && (
 					<Tab
 						className={({selected}) =>
 							clsx(

src/pages/(exam)/ExamPage.tsx

@@ -12,7 +12,7 @@ import Selection from "@/exams/Selection";
 import Speaking from "@/exams/Speaking";
 import Writing from "@/exams/Writing";
 import useUser from "@/hooks/useUser";
-import {Exam, UserSolution, Variant} from "@/interfaces/exam";
+import {Exam, LevelExam, UserSolution, Variant} from "@/interfaces/exam";
 import {Stat} from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
 import {evaluateSpeakingAnswer, evaluateWritingAnswer} from "@/utils/evaluation";
@@ -257,6 +257,7 @@ export default function ExamPage({page}: Props) {
 				user: user?.id || "",
 				date: new Date().getTime(),
 				isDisabled: solution.isDisabled,
+				shuffleMaps: solution.shuffleMaps,
 				...(assignment ? {assignment: assignment.id} : {}),
 			}));
 
@@ -459,6 +460,19 @@ export default function ExamPage({page}: Props) {
 						inactivity: totalInactivity,
 					}}
 					onViewResults={(index?: number) => {
+						if (exams[0].module === "level") {
+							const levelExam = exams[0] as LevelExam;
+							const allExercises = levelExam.parts.flatMap(part => part.exercises);
+							const exerciseOrderMap = new Map(allExercises.map((ex, index) => [ex.id, index]));
+							const orderedSolutions = userSolutions.slice().sort((a, b) => {
+								const indexA = exerciseOrderMap.get(a.exercise) ?? Infinity;
+								const indexB = exerciseOrderMap.get(b.exercise) ?? Infinity;
+								return indexA - indexB;
+							});
+							setUserSolutions(orderedSolutions);
+						} else {
+							setUserSolutions(userSolutions);
+						}
 						setShowSolutions(true);
 						setModuleIndex(index || 0);
 						setExerciseIndex(["reading", "listening"].includes(exams[0].module) ? -1 : 0);

src/pages/(status)/PaymentDue.tsx

@@ -31,7 +31,7 @@ export default function PaymentDue({user, hasExpired = false, reload}: Props) {
 	const {packages} = usePackages();
 	const {discounts} = useDiscounts();
 	const {users} = useUsers();
-	const {groups} = useGroups();
+	const {groups} = useGroups({});
 	const {invites, isLoading: isInvitesLoading, reload: reloadInvites} = useInvites({to: user?.id});
 
 	useEffect(() => {

src/pages/api/assignments/corporate/[id].ts

@@ -36,5 +36,5 @@ async function GET(req: NextApiRequest, res: NextApiResponse) {
 	const assigners = await getAllAssignersByCorporate(id);
 	const assignments = await getAssignmentsByAssigners([...assigners, id]);
 
-	res.status(200).json(assignments);
+	res.status(200).json(uniqBy(assignments, "id"));
 }

src/pages/api/code/index.ts

@@ -1,174 +1,160 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from "next";
-import { app } from "@/firebase";
-import {
-  getFirestore,
-  setDoc,
-  doc,
-  query,
-  collection,
-  where,
-  getDocs,
-  getDoc,
-  deleteDoc,
-} from "firebase/firestore";
-import { withIronSessionApiRoute } from "iron-session/next";
-import { sessionOptions } from "@/lib/session";
-import { Code, Type } from "@/interfaces/user";
-import { PERMISSIONS } from "@/constants/userPermissions";
-import { uuidv4 } from "@firebase/util";
-import { prepareMailer, prepareMailOptions } from "@/email";
+import type {NextApiRequest, NextApiResponse} from "next";
+import {app} from "@/firebase";
+import {getFirestore, setDoc, doc, query, collection, where, getDocs, getDoc, deleteDoc} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {Code, Group, Type} from "@/interfaces/user";
+import {PERMISSIONS} from "@/constants/userPermissions";
+import {uuidv4} from "@firebase/util";
+import {prepareMailer, prepareMailOptions} from "@/email";
 
 const db = getFirestore(app);
 
 export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
-  if (req.method === "GET") return get(req, res);
-  if (req.method === "POST") return post(req, res);
-  if (req.method === "DELETE") return del(req, res);
+	if (req.method === "GET") return get(req, res);
+	if (req.method === "POST") return post(req, res);
+	if (req.method === "DELETE") return del(req, res);
 
-  return res.status(404).json({ ok: false });
+	return res.status(404).json({ok: false});
 }
 
 async function get(req: NextApiRequest, res: NextApiResponse) {
-  if (!req.session.user) {
-    res
-      .status(401)
-      .json({ ok: false, reason: "You must be logged in to generate a code!" });
-    return;
-  }
+	if (!req.session.user) {
+		res.status(401).json({ok: false, reason: "You must be logged in to generate a code!"});
+		return;
+	}
 
-  const { creator } = req.query as { creator?: string };
-  const q = query(
-    collection(db, "codes"),
-    where("creator", "==", creator || ""),
-  );
-  const snapshot = await getDocs(creator ? q : collection(db, "codes"));
+	const {creator} = req.query as {creator?: string};
+	const q = query(collection(db, "codes"), where("creator", "==", creator || ""));
+	const snapshot = await getDocs(creator ? q : collection(db, "codes"));
 
-  res.status(200).json(snapshot.docs.map((doc) => doc.data()));
+	res.status(200).json(snapshot.docs.map((doc) => doc.data()));
 }
 
 async function post(req: NextApiRequest, res: NextApiResponse) {
-  if (!req.session.user) {
-    res
-      .status(401)
-      .json({ ok: false, reason: "You must be logged in to generate a code!" });
-    return;
-  }
+	if (!req.session.user) {
+		res.status(401).json({ok: false, reason: "You must be logged in to generate a code!"});
+		return;
+	}
 
-  const { type, codes, infos, expiryDate } = req.body as {
-    type: Type;
-    codes: string[];
-    infos?: { email: string; name: string; passport_id?: string }[];
-    expiryDate: null | Date;
-  };
-  const permission = PERMISSIONS.generateCode[type];
+	const {type, codes, infos, expiryDate} = req.body as {
+		type: Type;
+		codes: string[];
+		infos?: {email: string; name: string; passport_id?: string}[];
+		expiryDate: null | Date;
+	};
+	const permission = PERMISSIONS.generateCode[type];
 
-  if (!permission.includes(req.session.user.type)) {
-    res.status(403).json({
-      ok: false,
-      reason:
-        "Your account type does not have permissions to generate a code for that type of user!",
-    });
-    return;
-  }
+	if (!permission.includes(req.session.user.type)) {
+		res.status(403).json({
+			ok: false,
+			reason: "Your account type does not have permissions to generate a code for that type of user!",
+		});
+		return;
+	}
 
-  const codesGeneratedByUserSnapshot = await getDocs(
-    query(collection(db, "codes"), where("creator", "==", req.session.user.id)),
-  );
-  const userCodes = codesGeneratedByUserSnapshot.docs.map((x) => ({
-    ...x.data(),
-  }));
+	const codesGeneratedByUserSnapshot = await getDocs(query(collection(db, "codes"), where("creator", "==", req.session.user.id)));
+	const creatorGroupsSnapshot = await getDocs(query(collection(db, "groups"), where("admin", "==", req.session.user.id)));
 
-  if (req.session.user.type === "corporate") {
-    const totalCodes = codesGeneratedByUserSnapshot.docs.length + codes.length;
-    const allowedCodes =
-      req.session.user.corporateInformation?.companyInformation.userAmount || 0;
+	const creatorGroups = (
+		creatorGroupsSnapshot.docs.map((x) => ({
+			...x.data(),
+		})) as Group[]
+	).filter((x) => x.name === "Students" || x.name === "Teachers" || x.name === "Corporate");
 
-    if (totalCodes > allowedCodes) {
-      res.status(403).json({
-        ok: false,
-        reason: `You have or would have exceeded your amount of allowed codes, you currently are allowed to generate ${
-          allowedCodes - codesGeneratedByUserSnapshot.docs.length
-        } codes.`,
-      });
-      return;
-    }
-  }
+	const usersInGroups = creatorGroups.flatMap((x) => x.participants);
+	const userCodes = codesGeneratedByUserSnapshot.docs.map((x) => ({
+		...x.data(),
+	})) as Code[];
 
-  const codePromises = codes.map(async (code, index) => {
-    const codeRef = doc(db, "codes", code);
-    let codeInformation = {
-      type,
-      code,
-      creator: req.session.user!.id,
-      creationDate: new Date().toISOString(),
-      expiryDate,
-    };
+	if (req.session.user.type === "corporate") {
+		const totalCodes = userCodes.filter((x) => !x.userId || !usersInGroups.includes(x.userId)).length + usersInGroups.length + codes.length;
+		const allowedCodes = req.session.user.corporateInformation?.companyInformation.userAmount || 0;
 
-    if (infos && infos.length > index) {
-      const { email, name, passport_id } = infos[index];
-      const previousCode = userCodes.find((x) => x.email === email) as Code;
+		if (totalCodes > allowedCodes) {
+			res.status(403).json({
+				ok: false,
+				reason: `You have or would have exceeded your amount of allowed codes, you currently are allowed to generate ${
+					allowedCodes - codesGeneratedByUserSnapshot.docs.length
+				} codes.`,
+			});
+			return;
+		}
+	}
 
-      const transport = prepareMailer();
-      const mailOptions = prepareMailOptions(
-        {
-          type,
-          code: previousCode ? previousCode.code : code,
-          environment: process.env.ENVIRONMENT,
-        },
-        [email.toLowerCase().trim()],
-        "EnCoach Registration",
-        "main",
-      );
+	const codePromises = codes.map(async (code, index) => {
+		const codeRef = doc(db, "codes", code);
+		let codeInformation = {
+			type,
+			code,
+			creator: req.session.user!.id,
+			creationDate: new Date().toISOString(),
+			expiryDate,
+		};
 
-      try {
-        await transport.sendMail(mailOptions);
+		if (infos && infos.length > index) {
+			const {email, name, passport_id} = infos[index];
+			const previousCode = userCodes.find((x) => x.email === email) as Code;
 
-        if (!previousCode) {
-          await setDoc(
-            codeRef,
-            {
-              ...codeInformation,
-              email: email.trim().toLowerCase(),
-              name: name.trim(),
-              ...(passport_id ? { passport_id: passport_id.trim() } : {}),
-            },
-            { merge: true },
-          );
-        }
+			const transport = prepareMailer();
+			const mailOptions = prepareMailOptions(
+				{
+					type,
+					code: previousCode ? previousCode.code : code,
+					environment: process.env.ENVIRONMENT,
+				},
+				[email.toLowerCase().trim()],
+				"EnCoach Registration",
+				"main",
+			);
 
-        return true;
-      } catch (e) {
-        return false;
-      }
-    } else {
-      await setDoc(codeRef, codeInformation);
-    }
-  });
+			try {
+				await transport.sendMail(mailOptions);
 
-  Promise.all(codePromises).then((results) => {
-    res.status(200).json({ ok: true, valid: results.filter((x) => x).length });
-  });
+				if (!previousCode) {
+					await setDoc(
+						codeRef,
+						{
+							...codeInformation,
+							email: email.trim().toLowerCase(),
+							name: name.trim(),
+							...(passport_id ? {passport_id: passport_id.trim()} : {}),
+						},
+						{merge: true},
+					);
+				}
+
+				return true;
+			} catch (e) {
+				return false;
+			}
+		} else {
+			await setDoc(codeRef, codeInformation);
+		}
+	});
+
+	Promise.all(codePromises).then((results) => {
+		res.status(200).json({ok: true, valid: results.filter((x) => x).length});
+	});
 }
 
 async function del(req: NextApiRequest, res: NextApiResponse) {
-  if (!req.session.user) {
-    res
-      .status(401)
-      .json({ ok: false, reason: "You must be logged in to generate a code!" });
-    return;
-  }
+	if (!req.session.user) {
+		res.status(401).json({ok: false, reason: "You must be logged in to generate a code!"});
+		return;
+	}
 
-  const codes = req.query.code as string[];
+	const codes = req.query.code as string[];
 
-  for (const code of codes) {
-    const snapshot = await getDoc(doc(db, "codes", code as string));
-    if (!snapshot.exists()) continue;
+	for (const code of codes) {
+		const snapshot = await getDoc(doc(db, "codes", code as string));
+		if (!snapshot.exists()) continue;
 
-    await deleteDoc(snapshot.ref);
-  }
+		await deleteDoc(snapshot.ref);
+	}
 
-  res.status(200).json({ codes });
+	res.status(200).json({codes});
 }

src/pages/api/user.ts

@@ -107,10 +107,12 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 		}
 
 		const user = docUser.data() as User;
+		await setDoc(docUser.ref, {lastLogin: new Date().toISOString()}, {merge: true});
 
 		req.session.user = {
 			...user,
 			id: req.session.user.id,
+			lastLogin: new Date(),
 		};
 		await req.session.save();
 

src/pages/groups.tsx

@@ -0,0 +1,119 @@
+/* eslint-disable @next/next/no-img-element */
+import Head from "next/head";
+import Navbar from "@/components/Navbar";
+import {BsFileEarmarkText, BsPencil, BsStar, BsBook, BsHeadphones, BsPen, BsMegaphone} from "react-icons/bs";
+import {withIronSessionSsr} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {useEffect, useState} from "react";
+import useStats from "@/hooks/useStats";
+import {averageScore, groupBySession, totalExams} from "@/utils/stats";
+import useUser from "@/hooks/useUser";
+import Diagnostic from "@/components/Diagnostic";
+import {ToastContainer} from "react-toastify";
+import {capitalize} from "lodash";
+import {Module} from "@/interfaces";
+import ProgressBar from "@/components/Low/ProgressBar";
+import Layout from "@/components/High/Layout";
+import {calculateAverageLevel} from "@/utils/score";
+import axios from "axios";
+import DemographicInformationInput from "@/components/DemographicInformationInput";
+import moment from "moment";
+import Link from "next/link";
+import {MODULE_ARRAY} from "@/utils/moduleUtils";
+import ProfileSummary from "@/components/ProfileSummary";
+import StudentDashboard from "@/dashboards/Student";
+import AdminDashboard from "@/dashboards/Admin";
+import CorporateDashboard from "@/dashboards/Corporate";
+import TeacherDashboard from "@/dashboards/Teacher";
+import AgentDashboard from "@/dashboards/Agent";
+import MasterCorporateDashboard from "@/dashboards/MasterCorporate";
+import PaymentDue from "./(status)/PaymentDue";
+import {useRouter} from "next/router";
+import {PayPalScriptProvider} from "@paypal/react-paypal-js";
+import {CorporateUser, MasterCorporateUser, Type, User, userTypes} from "@/interfaces/user";
+import Select from "react-select";
+import {USER_TYPE_LABELS} from "@/resources/user";
+import {checkAccess, getTypesOfUser} from "@/utils/permissions";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import useGroups from "@/hooks/useGroups";
+import useUsers from "@/hooks/useUsers";
+import {getUserName} from "@/utils/users";
+
+export const getServerSideProps = withIronSessionSsr(({req, res}) => {
+	const user = req.session.user;
+
+	if (!user || !user.isVerified) {
+		return {
+			redirect: {
+				destination: "/login",
+				permanent: false,
+			},
+		};
+	}
+
+	if (shouldRedirectHome(user)) {
+		return {
+			redirect: {
+				destination: "/",
+				permanent: false,
+			},
+		};
+	}
+
+	return {
+		props: {user: req.session.user},
+	};
+}, sessionOptions);
+
+interface Props {
+	user: User;
+	envVariables: {[key: string]: string};
+}
+export default function Home(props: Props) {
+	const {user, mutateUser} = useUser({redirectTo: "/login"});
+	const {groups} = useGroups({});
+	const {users} = useUsers();
+
+	const router = useRouter();
+
+	useEffect(() => {
+		console.log(groups);
+	}, [groups]);
+
+	return (
+		<>
+			<Head>
+				<title>EnCoach</title>
+				<meta
+					name="description"
+					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+				/>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<ToastContainer />
+			{user && (
+				<Layout user={user}>
+					<div className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+						{groups
+							.filter((x) => x.participants.includes(user.id))
+							.map((group) => (
+								<div key={group.id} className="p-4 border rounded-xl flex flex-col gap-2">
+									<span>
+										<b>Group: </b>
+										{group.name}
+									</span>
+									<span>
+										<b>Admin: </b>
+										{getUserName(users.find((x) => x.id === group.admin))}
+									</span>
+									<b>Participants: </b>
+									<span>{group.participants.map((x) => getUserName(users.find((u) => u.id === x))).join(", ")}</span>
+								</div>
+							))}
+					</div>
+				</Layout>
+			)}
+		</>
+	);
+}

src/pages/record.tsx

@@ -1,30 +1,29 @@
 /* eslint-disable @next/next/no-img-element */
 import Head from "next/head";
-import { withIronSessionSsr } from "iron-session/next";
-import { sessionOptions } from "@/lib/session";
-import { Stat, User } from "@/interfaces/user";
-import { useEffect, useRef, useState } from "react";
+import {withIronSessionSsr} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {Stat, User} from "@/interfaces/user";
+import {useEffect, useRef, useState} from "react";
 import useStats from "@/hooks/useStats";
-import { groupByDate } from "@/utils/stats";
+import {groupByDate} from "@/utils/stats";
 import moment from "moment";
 import useUsers from "@/hooks/useUsers";
 import useExamStore from "@/stores/examStore";
-import { ToastContainer } from "react-toastify";
-import { useRouter } from "next/router";
+import {ToastContainer} from "react-toastify";
+import {useRouter} from "next/router";
 import Layout from "@/components/High/Layout";
 import clsx from "clsx";
 import Select from "@/components/Low/Select";
 import useGroups from "@/hooks/useGroups";
-import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import useAssignments from "@/hooks/useAssignments";
-import { uuidv4 } from "@firebase/util";
-import { usePDFDownload } from "@/hooks/usePDFDownload";
+import {uuidv4} from "@firebase/util";
+import {usePDFDownload} from "@/hooks/usePDFDownload";
 import useRecordStore from "@/stores/recordStore";
 import useTrainingContentStore from "@/stores/trainingContentStore";
 import StatsGridItem from "@/components/StatGridItem";
 
-
-export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
+export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
 
 	if (!user || !user.isVerified) {
@@ -46,7 +45,7 @@ export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
 	}
 
 	return {
-		props: { user: req.session.user },
+		props: {user: req.session.user},
 	};
 }, sessionOptions);
 
@@ -55,16 +54,21 @@ const defaultSelectableCorporate = {
 	label: "All",
 };
 
-export default function History({ user }: { user: User }) {
-	const [statsUserId, setStatsUserId, training, setTraining] = useRecordStore((state) => [state.selectedUser, state.setSelectedUser, state.training, state.setTraining]);
+export default function History({user}: {user: User}) {
+	const [statsUserId, setStatsUserId, training, setTraining] = useRecordStore((state) => [
+		state.selectedUser,
+		state.setSelectedUser,
+		state.training,
+		state.setTraining,
+	]);
 	// const [statsUserId, setStatsUserId] = useState<string | undefined>(user.id);
-	const [groupedStats, setGroupedStats] = useState<{ [key: string]: Stat[] }>();
+	const [groupedStats, setGroupedStats] = useState<{[key: string]: Stat[]}>();
 	const [filter, setFilter] = useState<"months" | "weeks" | "days" | "assignments">();
-	const { assignments } = useAssignments({});
+	const {assignments} = useAssignments({});
 
-	const { users } = useUsers();
-	const { stats, isLoading: isStatsLoading } = useStats(statsUserId);
-	const { groups: allGroups } = useGroups();
+	const {users} = useUsers();
+	const {stats, isLoading: isStatsLoading} = useStats(statsUserId);
+	const {groups: allGroups} = useGroups({});
 
 	const groups = allGroups.filter((x) => x.admin === user.id);
 
@@ -104,12 +108,12 @@ export default function History({ user }: { user: User }) {
 		setFilter((prev) => (prev === value ? undefined : value));
 	};
 
-	const filterStatsByDate = (stats: { [key: string]: Stat[] }) => {
+	const filterStatsByDate = (stats: {[key: string]: Stat[]}) => {
 		if (filter && filter !== "assignments") {
 			const filterDate = moment()
-				.subtract({ [filter as string]: 1 })
+				.subtract({[filter as string]: 1})
 				.format("x");
-			const filteredStats: { [key: string]: Stat[] } = {};
+			const filteredStats: {[key: string]: Stat[]} = {};
 
 			Object.keys(stats).forEach((timestamp) => {
 				if (timestamp >= filterDate) filteredStats[timestamp] = stats[timestamp];
@@ -118,7 +122,7 @@ export default function History({ user }: { user: User }) {
 		}
 
 		if (filter && filter === "assignments") {
-			const filteredStats: { [key: string]: Stat[] } = {};
+			const filteredStats: {[key: string]: Stat[]} = {};
 
 			Object.keys(stats).forEach((timestamp) => {
 				if (stats[timestamp].map((s) => s.assignment === undefined).includes(false))
@@ -137,13 +141,13 @@ export default function History({ user }: { user: User }) {
 
 	useEffect(() => {
 		const handleRouteChange = (url: string) => {
-			setTraining(false)
-		}
-		router.events.on('routeChangeStart', handleRouteChange)
+			setTraining(false);
+		};
+		router.events.on("routeChangeStart", handleRouteChange);
 		return () => {
-			router.events.off('routeChangeStart', handleRouteChange)
-		}
-	}, [router.events, setTraining])
+			router.events.off("routeChangeStart", handleRouteChange);
+		};
+	}, [router.events, setTraining]);
 
 	const handleTrainingContentSubmission = () => {
 		if (groupedStats) {
@@ -156,11 +160,10 @@ export default function History({ user }: { user: User }) {
 				}
 				return accumulator;
 			}, {});
-			setTrainingStats(Object.values(selectedStats).flat())
+			setTrainingStats(Object.values(selectedStats).flat());
 			router.push("/training");
 		}
-	}
-
+	};
 
 	const customContent = (timestamp: string) => {
 		if (!groupedStats) return <></>;
@@ -240,13 +243,13 @@ export default function History({ user }: { user: User }) {
 	const selectedUser = getSelectedUser();
 	const selectedUserSelectValue = selectedUser
 		? {
-			value: selectedUser.id,
-			label: `${selectedUser.name} - ${selectedUser.email}`,
-		}
+				value: selectedUser.id,
+				label: `${selectedUser.name} - ${selectedUser.email}`,
+		  }
 		: {
-			value: "",
-			label: "",
-		};
+				value: "",
+				label: "",
+		  };
 	return (
 		<>
 			<Head>
@@ -272,7 +275,7 @@ export default function History({ user }: { user: User }) {
 										value={selectableCorporates.find((x) => x.value === selectedCorporate)}
 										onChange={(value) => setSelectedCorporate(value?.value || "")}
 										styles={{
-											menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+											menuPortal: (base) => ({...base, zIndex: 9999}),
 											option: (styles, state) => ({
 												...styles,
 												backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
@@ -289,7 +292,7 @@ export default function History({ user }: { user: User }) {
 										value={selectedUserSelectValue}
 										onChange={(value) => setStatsUserId(value?.value!)}
 										styles={{
-											menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+											menuPortal: (base) => ({...base, zIndex: 9999}),
 											option: (styles, state) => ({
 												...styles,
 												backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
@@ -313,7 +316,7 @@ export default function History({ user }: { user: User }) {
 										value={selectedUserSelectValue}
 										onChange={(value) => setStatsUserId(value?.value!)}
 										styles={{
-											menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+											menuPortal: (base) => ({...base, zIndex: 9999}),
 											option: (styles, state) => ({
 												...styles,
 												backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
@@ -323,10 +326,12 @@ export default function History({ user }: { user: User }) {
 									/>
 								</>
 							)}
-							{(training && (
+							{training && (
 								<div className="flex flex-row">
-									<div className="font-semibold text-2xl mr-4">Select up to 10 exercises
-										{`(${selectedTrainingExams.length}/${MAX_TRAINING_EXAMS})`}</div>
+									<div className="font-semibold text-2xl mr-4">
+										Select up to 10 exercises
+										{`(${selectedTrainingExams.length}/${MAX_TRAINING_EXAMS})`}
+									</div>
 									<button
 										className={clsx(
 											"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light ml-4 disabled:cursor-not-allowed",
@@ -337,7 +342,7 @@ export default function History({ user }: { user: User }) {
 										Submit
 									</button>
 								</div>
-							))}
+							)}
 						</div>
 						<div className="flex gap-4 w-full justify-center xl:justify-end">
 							<button

src/pages/settings.tsx

@@ -28,7 +28,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 		};
 	}
 
-	if (shouldRedirectHome(user) || !["developer", "admin", "corporate", "agent", "mastercorporate"].includes(user.type)) {
+	if (shouldRedirectHome(user) || !checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"])) {
 		return {
 			redirect: {
 				destination: "/",

src/pages/stats.tsx

@@ -71,7 +71,7 @@ export default function Stats() {
 
 	const {user} = useUser({redirectTo: "/login"});
 	const {users} = useUsers();
-	const {groups} = useGroups(user?.id);
+	const {groups} = useGroups({admin: user?.id});
 	const {stats} = useStats(statsUserId, !statsUserId);
 
 	useEffect(() => {
@@ -202,7 +202,7 @@ export default function Stats() {
 										}}
 									/>
 								)}
-								{(["corporate", "teacher", "mastercorporate"].includes(user.type) ) && groups.length > 0 && (
+								{["corporate", "teacher", "mastercorporate"].includes(user.type) && groups.length > 0 && (
 									<Select
 										className="w-full"
 										options={users

src/pages/training/index.tsx

@@ -1,14 +1,14 @@
 /* eslint-disable @next/next/no-img-element */
 import Head from "next/head";
-import { withIronSessionSsr } from "iron-session/next";
-import { sessionOptions } from "@/lib/session";
-import { Stat, User } from "@/interfaces/user";
-import { ToastContainer } from "react-toastify";
+import {withIronSessionSsr} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {Stat, User} from "@/interfaces/user";
+import {ToastContainer} from "react-toastify";
 import Layout from "@/components/High/Layout";
-import { shouldRedirectHome } from "@/utils/navigation.disabled";
-import { use, useEffect, useState } from "react";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import {use, useEffect, useState} from "react";
 import clsx from "clsx";
-import { FaPlus } from "react-icons/fa";
+import {FaPlus} from "react-icons/fa";
 import useRecordStore from "@/stores/recordStore";
 import router from "next/router";
 import useTrainingContentStore from "@/stores/trainingContentStore";
@@ -16,390 +16,388 @@ import axios from "axios";
 import Select from "@/components/Low/Select";
 import useUsers from "@/hooks/useUsers";
 import useGroups from "@/hooks/useGroups";
-import { ITrainingContent } from "@/training/TrainingInterfaces";
+import {ITrainingContent} from "@/training/TrainingInterfaces";
 import moment from "moment";
-import { uuidv4 } from "@firebase/util";
+import {uuidv4} from "@firebase/util";
 import TrainingScore from "@/training/TrainingScore";
 import ModuleBadge from "@/components/ModuleBadge";
 
-export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
-    const user = req.session.user;
+export const getServerSideProps = withIronSessionSsr(({req, res}) => {
+	const user = req.session.user;
 
-    if (!user || !user.isVerified) {
-        return {
-            redirect: {
-                destination: "/login",
-                permanent: false,
-            },
-        };
-    }
+	if (!user || !user.isVerified) {
+		return {
+			redirect: {
+				destination: "/login",
+				permanent: false,
+			},
+		};
+	}
 
-    if (shouldRedirectHome(user)) {
-        return {
-            redirect: {
-                destination: "/",
-                permanent: false,
-            },
-        };
-    }
+	if (shouldRedirectHome(user)) {
+		return {
+			redirect: {
+				destination: "/",
+				permanent: false,
+			},
+		};
+	}
 
-    return {
-        props: { user: req.session.user },
-    };
+	return {
+		props: {user: req.session.user},
+	};
 }, sessionOptions);
 
 const defaultSelectableCorporate = {
-    value: "",
-    label: "All",
+	value: "",
+	label: "All",
 };
 
-const Training: React.FC<{ user: User }> = ({ user }) => {
-    // Record stuff
-    const { users } = useUsers();
-    const [selectedCorporate, setSelectedCorporate] = useState<string>(defaultSelectableCorporate.value);
-    const [statsUserId, setStatsUserId, setRecordTraining] = useRecordStore((state) => [state.selectedUser, state.setSelectedUser, state.setTraining]);
-    const { groups: allGroups } = useGroups();
-    const groups = allGroups.filter((x) => x.admin === user.id);
-    const [filter, setFilter] = useState<"months" | "weeks" | "days">();
+const Training: React.FC<{user: User}> = ({user}) => {
+	// Record stuff
+	const {users} = useUsers();
+	const [selectedCorporate, setSelectedCorporate] = useState<string>(defaultSelectableCorporate.value);
+	const [statsUserId, setStatsUserId, setRecordTraining] = useRecordStore((state) => [
+		state.selectedUser,
+		state.setSelectedUser,
+		state.setTraining,
+	]);
+	const {groups: allGroups} = useGroups({});
+	const groups = allGroups.filter((x) => x.admin === user.id);
+	const [filter, setFilter] = useState<"months" | "weeks" | "days">();
 
-    const toggleFilter = (value: "months" | "weeks" | "days") => {
-        setFilter((prev) => (prev === value ? undefined : value));
-    };
+	const toggleFilter = (value: "months" | "weeks" | "days") => {
+		setFilter((prev) => (prev === value ? undefined : value));
+	};
 
-    const [stats, setTrainingStats] = useTrainingContentStore((state) => [state.stats, state.setStats]);
-    const [trainingContent, setTrainingContent] = useState<ITrainingContent[]>([]);
-    const [isNewContentLoading, setIsNewContentLoading] = useState(stats.length != 0);
-    const [isLoading, setIsLoading] = useState<boolean>(true);
-    const [groupedByTrainingContent, setGroupedByTrainingContent] = useState<{ [key: string]: ITrainingContent }>();
+	const [stats, setTrainingStats] = useTrainingContentStore((state) => [state.stats, state.setStats]);
+	const [trainingContent, setTrainingContent] = useState<ITrainingContent[]>([]);
+	const [isNewContentLoading, setIsNewContentLoading] = useState(stats.length != 0);
+	const [isLoading, setIsLoading] = useState<boolean>(true);
+	const [groupedByTrainingContent, setGroupedByTrainingContent] = useState<{[key: string]: ITrainingContent}>();
 
-    useEffect(() => {
-        const handleRouteChange = (url: string) => {
-            setTrainingStats([])
-        }
-        router.events.on('routeChangeStart', handleRouteChange)
-        return () => {
-            router.events.off('routeChangeStart', handleRouteChange)
-        }
-    }, [router.events, setTrainingStats])
+	useEffect(() => {
+		const handleRouteChange = (url: string) => {
+			setTrainingStats([]);
+		};
+		router.events.on("routeChangeStart", handleRouteChange);
+		return () => {
+			router.events.off("routeChangeStart", handleRouteChange);
+		};
+	}, [router.events, setTrainingStats]);
 
-    useEffect(() => {
-        const postStats = async () => {
-            try {
-                const response = await axios.post<{ id: string }>(`/api/training`, stats);
-                return response.data.id;
-            } catch (error) {
-                setIsNewContentLoading(false);
-            }
-        };
+	useEffect(() => {
+		const postStats = async () => {
+			try {
+				const response = await axios.post<{id: string}>(`/api/training`, stats);
+				return response.data.id;
+			} catch (error) {
+				setIsNewContentLoading(false);
+			}
+		};
 
-        if (isNewContentLoading) {
-            postStats().then(id => {
-                setTrainingStats([]);
-                if (id) {
-                    router.push(`/training/${id}`)
-                }
-            });
-        }
-    }, [isNewContentLoading])
+		if (isNewContentLoading) {
+			postStats().then((id) => {
+				setTrainingStats([]);
+				if (id) {
+					router.push(`/training/${id}`);
+				}
+			});
+		}
+	}, [isNewContentLoading]);
 
-    useEffect(() => {
-        const loadTrainingContent = async () => {
-            try {
-                const response = await axios.get<ITrainingContent[]>('/api/training');
-                setTrainingContent(response.data);
-                setIsLoading(false);
-            } catch (error) {
-                setTrainingContent([]);
-                setIsLoading(false);
-            }
-        };
-        loadTrainingContent();
-    }, []);
+	useEffect(() => {
+		const loadTrainingContent = async () => {
+			try {
+				const response = await axios.get<ITrainingContent[]>("/api/training");
+				setTrainingContent(response.data);
+				setIsLoading(false);
+			} catch (error) {
+				setTrainingContent([]);
+				setIsLoading(false);
+			}
+		};
+		loadTrainingContent();
+	}, []);
 
-    const handleNewTrainingContent = () => {
-        setRecordTraining(true);
-        router.push('/record')
-    }
+	const handleNewTrainingContent = () => {
+		setRecordTraining(true);
+		router.push("/record");
+	};
 
+	const filterTrainingContentByDate = (trainingContent: {[key: string]: ITrainingContent}) => {
+		if (filter) {
+			const filterDate = moment()
+				.subtract({[filter as string]: 1})
+				.format("x");
+			const filteredTrainingContent: {[key: string]: ITrainingContent} = {};
 
-    const filterTrainingContentByDate = (trainingContent: { [key: string]: ITrainingContent }) => {
-        if (filter) {
-            const filterDate = moment()
-                .subtract({ [filter as string]: 1 })
-                .format("x");
-            const filteredTrainingContent: { [key: string]: ITrainingContent } = {};
+			Object.keys(trainingContent).forEach((timestamp) => {
+				if (timestamp >= filterDate) filteredTrainingContent[timestamp] = trainingContent[timestamp];
+			});
+			return filteredTrainingContent;
+		}
+		return trainingContent;
+	};
 
-            Object.keys(trainingContent).forEach((timestamp) => {
-                if (timestamp >= filterDate) filteredTrainingContent[timestamp] = trainingContent[timestamp];
-            });
-            return filteredTrainingContent;
-        }
-        return trainingContent;
-    };
+	useEffect(() => {
+		if (trainingContent.length > 0) {
+			const grouped = trainingContent.reduce((acc, content) => {
+				acc[content.created_at] = content;
+				return acc;
+			}, {} as {[key: number]: ITrainingContent});
 
-    useEffect(() => {
-        if (trainingContent.length > 0) {
-            const grouped = trainingContent.reduce((acc, content) => {
-                acc[content.created_at] = content;
-                return acc;
-            }, {} as { [key: number]: ITrainingContent });
+			setGroupedByTrainingContent(grouped);
+		}
+	}, [trainingContent]);
 
-            setGroupedByTrainingContent(grouped);
-        }
-    }, [trainingContent])
+	// Record Stuff
+	const selectableCorporates = [
+		defaultSelectableCorporate,
+		...users
+			.filter((x) => x.type === "corporate")
+			.map((x) => ({
+				value: x.id,
+				label: `${x.name} - ${x.email}`,
+			})),
+	];
 
+	const getUsersList = (): User[] => {
+		if (selectedCorporate) {
+			// get groups for that corporate
+			const selectedCorporateGroups = allGroups.filter((x) => x.admin === selectedCorporate);
 
-    // Record Stuff
-    const selectableCorporates = [
-        defaultSelectableCorporate,
-        ...users
-            .filter((x) => x.type === "corporate")
-            .map((x) => ({
-                value: x.id,
-                label: `${x.name} - ${x.email}`,
-            })),
-    ];
+			// get the teacher ids for that group
+			const selectedCorporateGroupsParticipants = selectedCorporateGroups.flatMap((x) => x.participants);
 
-    const getUsersList = (): User[] => {
-        if (selectedCorporate) {
-            // get groups for that corporate
-            const selectedCorporateGroups = allGroups.filter((x) => x.admin === selectedCorporate);
+			//   // search for groups for these teachers
+			//   const teacherGroups = allGroups.filter((x) => {
+			//     return selectedCorporateGroupsParticipants.includes(x.admin);
+			//   });
 
-            // get the teacher ids for that group
-            const selectedCorporateGroupsParticipants = selectedCorporateGroups.flatMap((x) => x.participants);
+			//   const usersList = [
+			//     ...selectedCorporateGroupsParticipants,
+			//     ...teacherGroups.flatMap((x) => x.participants),
+			//   ];
+			const userListWithUsers = selectedCorporateGroupsParticipants.map((x) => users.find((y) => y.id === x)) as User[];
+			return userListWithUsers.filter((x) => x);
+		}
 
-            //   // search for groups for these teachers
-            //   const teacherGroups = allGroups.filter((x) => {
-            //     return selectedCorporateGroupsParticipants.includes(x.admin);
-            //   });
+		return users || [];
+	};
 
-            //   const usersList = [
-            //     ...selectedCorporateGroupsParticipants,
-            //     ...teacherGroups.flatMap((x) => x.participants),
-            //   ];
-            const userListWithUsers = selectedCorporateGroupsParticipants.map((x) => users.find((y) => y.id === x)) as User[];
-            return userListWithUsers.filter((x) => x);
-        }
+	const corporateFilteredUserList = getUsersList();
+	const getSelectedUser = () => {
+		if (selectedCorporate) {
+			const userInCorporate = corporateFilteredUserList.find((x) => x.id === statsUserId);
+			return userInCorporate || corporateFilteredUserList[0];
+		}
 
-        return users || [];
-    };
+		return users.find((x) => x.id === statsUserId) || user;
+	};
 
-    const corporateFilteredUserList = getUsersList();
-    const getSelectedUser = () => {
-        if (selectedCorporate) {
-            const userInCorporate = corporateFilteredUserList.find((x) => x.id === statsUserId);
-            return userInCorporate || corporateFilteredUserList[0];
-        }
+	const selectedUser = getSelectedUser();
+	const selectedUserSelectValue = selectedUser
+		? {
+				value: selectedUser.id,
+				label: `${selectedUser.name} - ${selectedUser.email}`,
+		  }
+		: {
+				value: "",
+				label: "",
+		  };
 
-        return users.find((x) => x.id === statsUserId) || user;
-    };
+	const formatTimestamp = (timestamp: string) => {
+		const date = moment(parseInt(timestamp));
+		const formatter = "YYYY/MM/DD - HH:mm";
 
-    const selectedUser = getSelectedUser();
-    const selectedUserSelectValue = selectedUser
-        ? {
-            value: selectedUser.id,
-            label: `${selectedUser.name} - ${selectedUser.email}`,
-        }
-        : {
-            value: "",
-            label: "",
-        };
+		return date.format(formatter);
+	};
 
-    const formatTimestamp = (timestamp: string) => {
-        const date = moment(parseInt(timestamp));
-        const formatter = "YYYY/MM/DD - HH:mm";
+	const selectTrainingContent = (trainingContent: ITrainingContent) => {
+		router.push(`/training/${trainingContent.id}`);
+	};
 
-        return date.format(formatter);
-    };
+	const trainingContentContainer = (timestamp: string) => {
+		if (!groupedByTrainingContent) return <></>;
+		const trainingContent: ITrainingContent = groupedByTrainingContent[timestamp];
+		const uniqueModules = [...new Set(trainingContent.exams.map((exam) => exam.module))];
 
-    const selectTrainingContent = (trainingContent: ITrainingContent) => {
-        router.push(`/training/${trainingContent.id}`)
-    };
+		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",
+					)}
+					onClick={() => selectTrainingContent(trainingContent)}
+					role="button">
+					<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>
+						<div className="flex flex-col gap-2">
+							<div className="w-full flex flex-row gap-1">
+								{uniqueModules.map((module) => (
+									<ModuleBadge key={module} module={module} />
+								))}
+							</div>
+						</div>
+					</div>
+					<TrainingScore trainingContent={trainingContent} gridView={true} />
+				</div>
+			</>
+		);
+	};
 
+	return (
+		<>
+			<Head>
+				<title>Training | EnCoach</title>
+				<meta
+					name="description"
+					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+				/>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<ToastContainer />
 
-    const trainingContentContainer = (timestamp: string) => {
-        if (!groupedByTrainingContent) return <></>;
-        const trainingContent: ITrainingContent = groupedByTrainingContent[timestamp];
-        const uniqueModules = [...new Set(trainingContent.exams.map(exam => exam.module))];
+			<Layout user={user}>
+				{isNewContentLoading || isLoading ? (
+					<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
+						<span className="loading loading-infinity w-32 bg-mti-green-light" />
+						{isNewContentLoading && (
+							<span className="text-center text-2xl font-bold text-mti-green-light">Assessing your exams, please be patient...</span>
+						)}
+					</div>
+				) : (
+					<>
+						<div className="w-full flex -xl:flex-col -xl:gap-4 justify-between items-center">
+							<div className="xl:w-3/4">
+								{(user.type === "developer" || user.type === "admin") && (
+									<>
+										<label className="font-normal text-base text-mti-gray-dim">Corporate</label>
 
-        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"
-                    )}
-                    onClick={() => selectTrainingContent(trainingContent)}
-                    role="button">
-                    <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>
-                        <div className="flex flex-col gap-2">
-                            <div className="w-full flex flex-row gap-1">
-                                {uniqueModules.map((module) => (
-                                    <ModuleBadge key={module} module={module} />
-                                ))}
-                            </div>
-                        </div>
-                    </div>
-                    <TrainingScore
-                        trainingContent={trainingContent}
-                        gridView={true}
-                    />
-                </div>
-            </>
-        );
-    };
+										<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>
 
-    return (
-        <>
-            <Head>
-                <title>Training | EnCoach</title>
-                <meta
-                    name="description"
-                    content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
-                />
-                <meta name="viewport" content="width=device-width, initial-scale=1" />
-                <link rel="icon" href="/favicon.ico" />
-            </Head>
-            <ToastContainer />
+										<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 && (
+									<>
+										<label className="font-normal text-base text-mti-gray-dim">User</label>
 
-            <Layout user={user}>
-                {(isNewContentLoading || isLoading ? (
-                    <div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
-                        <span className="loading loading-infinity w-32 bg-mti-green-light" />
-                        {isNewContentLoading && (<span className="text-center text-2xl font-bold text-mti-green-light">
-                            Assessing your exams, please be patient...
-                        </span>)}
-                    </div>
-                ) : (
-                    <>
-                        <div className="w-full flex -xl:flex-col -xl:gap-4 justify-between items-center">
-                            <div className="xl:w-3/4">
-                                {(user.type === "developer" || user.type === "admin") && (
-                                    <>
-                                        <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 && (
-                                    <>
-                                        <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,
-                                                }),
-                                            }}
-                                        />
-                                    </>
-                                )}
-                                {(user.type === "student" && (
-                                    <>
-                                        <div className="flex items-center">
-                                            <div className="font-semibold text-2xl">Generate New Training Material</div>
-                                            <button
-                                                className={clsx(
-                                                    "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light ml-4",
-                                                    "transition duration-300 ease-in-out",
-                                                )}
-                                                onClick={handleNewTrainingContent}>
-                                                <FaPlus />
-                                            </button>
-                                        </div>
-                                    </>
-                                ))}
-                            </div>
-                            <div className="flex gap-4 w-full justify-center xl:justify-end">
-                                <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>
-                        {trainingContent.length == 0 && (
-                            <div className="flex flex-grow justify-center items-center">
-                                <span className="font-semibold ml-1">No training content to display...</span>
-                            </div>
-                        )}
-                        {groupedByTrainingContent && Object.keys(groupedByTrainingContent).length > 0 && (
-                            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-3 w-full gap-4 xl:gap-6">
-                                {Object.keys(filterTrainingContentByDate(groupedByTrainingContent))
-                                    .sort((a, b) => parseInt(b) - parseInt(a))
-                                    .map(trainingContentContainer)}
-                            </div>
-                        )}
-                    </>
-                ))}
-            </Layout>
-        </>
-    );
-}
+										<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,
+												}),
+											}}
+										/>
+									</>
+								)}
+								{user.type === "student" && (
+									<>
+										<div className="flex items-center">
+											<div className="font-semibold text-2xl">Generate New Training Material</div>
+											<button
+												className={clsx(
+													"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light ml-4",
+													"transition duration-300 ease-in-out",
+												)}
+												onClick={handleNewTrainingContent}>
+												<FaPlus />
+											</button>
+										</div>
+									</>
+								)}
+							</div>
+							<div className="flex gap-4 w-full justify-center xl:justify-end">
+								<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>
+						{trainingContent.length == 0 && (
+							<div className="flex flex-grow justify-center items-center">
+								<span className="font-semibold ml-1">No training content to display...</span>
+							</div>
+						)}
+						{groupedByTrainingContent && Object.keys(groupedByTrainingContent).length > 0 && (
+							<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-3 w-full gap-4 xl:gap-6">
+								{Object.keys(filterTrainingContentByDate(groupedByTrainingContent))
+									.sort((a, b) => parseInt(b) - parseInt(a))
+									.map(trainingContentContainer)}
+							</div>
+						)}
+					</>
+				)}
+			</Layout>
+		</>
+	);
+};
 
 export default Training;

src/resources/user.ts

@@ -5,17 +5,17 @@ export const USER_TYPE_LABELS: {[key in Type]: string} = {
 	teacher: "Teacher",
 	corporate: "Corporate",
 	agent: "Country Manager",
-	admin: "Admin",
+	admin: "Super Admin",
 	developer: "Developer",
-	mastercorporate: "Master Corporate"
+	mastercorporate: "Master Corporate",
 };
 
 export function isCorporateUser(user: User): user is CorporateUser {
-	return (user as CorporateUser).corporateInformation !== undefined;
+	return (user as CorporateUser)?.corporateInformation !== undefined;
 }
 
 export function isAgentUser(user: User): user is AgentUser {
-	return (user as AgentUser).agentInformation !== undefined;
+	return (user as AgentUser)?.agentInformation !== undefined;
 }
 
 export function getUserCompanyName(user: User, users: User[], groups: Group[]) {
@@ -30,3 +30,15 @@ export function getUserCompanyName(user: User, users: User[], groups: Group[]) {
 	const admin = belongingGroupsAdmins[0] as CorporateUser;
 	return admin.corporateInformation?.companyInformation.name || admin.name;
 }
+
+export function getCorporateUser(user: User, users: User[], groups: Group[]) {
+	if (isCorporateUser(user)) return user;
+
+	const belongingGroups = groups.filter((x) => x.participants.includes(user.id));
+	const belongingGroupsAdmins = belongingGroups.map((x) => users.find((u) => u.id === x.admin)).filter((x) => !!x && isCorporateUser(x));
+
+	if (belongingGroupsAdmins.length === 0) return undefined;
+
+	const admin = belongingGroupsAdmins[0] as CorporateUser;
+	return admin;
+}

src/stores/examStore.ts

@@ -1,5 +1,5 @@
 import {Module} from "@/interfaces";
-import {Exam, UserSolution} from "@/interfaces/exam";
+import {Exam, ShuffleMap, UserSolution} from "@/interfaces/exam";
 import {Assignment} from "@/interfaces/results";
 import {create} from "zustand";
 
@@ -18,6 +18,7 @@ export interface ExamState {
 	exerciseIndex: number;
 	questionIndex: number;
 	inactivity: number;
+	shuffleMaps: ShuffleMap[];
 }
 
 export interface ExamFunctions {
@@ -35,6 +36,7 @@ export interface ExamFunctions {
 	setExerciseIndex: (exerciseIndex: number) => void;
 	setQuestionIndex: (questionIndex: number) => void;
 	setInactivity: (inactivity: number) => void;
+	setShuffleMaps: (shuffleMaps: ShuffleMap[]) => void;
 	reset: () => void;
 }
 
@@ -53,6 +55,7 @@ export const initialState: ExamState = {
 	exerciseIndex: -1,
 	questionIndex: 0,
 	inactivity: 0,
+	shuffleMaps: []
 };
 
 const useExamStore = create<ExamState & ExamFunctions>((set) => ({
@@ -72,6 +75,7 @@ const useExamStore = create<ExamState & ExamFunctions>((set) => ({
 	setExerciseIndex: (exerciseIndex: number) => set(() => ({exerciseIndex})),
 	setQuestionIndex: (questionIndex: number) => set(() => ({questionIndex})),
 	setInactivity: (inactivity: number) => set(() => ({inactivity})),
+	setShuffleMaps: (shuffleMaps) => set(() => ({shuffleMaps})),
 
 	reset: () => set(() => initialState),
 }));

src/styles/globals.css

@@ -1,90 +1,4 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer utilities {
-	.scrollbar-hide {
-		-ms-overflow-style: none;
-		/* IE and Edge */
-		scrollbar-width: none;
-		/* Firefox */
-	}
-
-	.scrollbar-hide::-webkit-scrollbar {
-		display: none;
-		/* Chrome, Safari and Opera */
-	}
-}
-
-.training-scrollbar::-webkit-scrollbar {
-	@apply w-1.5;
-}
-
-.training-scrollbar::-webkit-scrollbar-track {
-	@apply bg-transparent;
-}
-
-.training-scrollbar::-webkit-scrollbar-thumb {
-	@apply bg-gray-400 hover:bg-gray-500 rounded-full transition-colors opacity-50 hover:opacity-75;
-}
-
-.training-scrollbar {
-	scrollbar-width: thin;
-	scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
-}
-
-:root {
-	--max-width: 1100px;
-	--border-radius: 12px;
-	--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
-		"Fira Mono", "Droid Sans Mono", "Courier New", monospace;
-
-	--foreground-rgb: 53, 51, 56;
-	--background-start-rgb: 245, 245, 245;
-	--background-end-rgb: 245, 245, 245;
-
-	--primary-glow: conic-gradient(from 180deg at 50% 50%, #16abff33 0deg, #0885ff33 55deg, #54d6ff33 120deg, #0071ff33 160deg, transparent 360deg);
-	--secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
-
-	--tile-start-rgb: 239, 245, 249;
-	--tile-end-rgb: 228, 232, 233;
-	--tile-border: conic-gradient(#00000080, #00000040, #00000030, #00000020, #00000010, #00000010, #00000080);
-
-	--callout-rgb: 238, 240, 241;
-	--callout-border-rgb: 172, 175, 176;
-	--card-rgb: 180, 185, 188;
-	--card-border-rgb: 131, 134, 135;
-}
-
-* {
-	box-sizing: border-box;
-	padding: 0;
-	margin: 0;
-}
-
-html {
-	min-height: 100vh !important;
-	height: 100%;
-	max-width: 100vw;
-	overflow-x: hidden;
-	overflow-y: auto;
-	font-family: "Open Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
-}
-
-body {
-	min-height: 100vh !important;
-	height: 100%;
-	max-width: 100vw;
-	overflow-x: hidden;
-	font-family: "Open Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
-}
-
-body {
-	color: rgb(var(--foreground-rgb));
-	background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
-}
-
-a {
-	color: inherit;
-	text-decoration: none;
-}
+  

src/utils/score.ts

@@ -1,5 +1,6 @@
 import {Module} from "@/interfaces";
 import {LevelScore} from "@/constants/ielts";
+import {Stat, User} from "@/interfaces/user";
 
 type Type = "academic" | "general";
 
@@ -178,3 +179,28 @@ export const getLevelLabel = (level: number) => {
 
 	return ["Proficiency", "C2"];
 };
+
+export const averageLevelCalculator = (users: User[], studentStats: Stat[]) => {
+	const formattedStats = studentStats
+		.map((s) => ({
+			focus: users.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,
+	};
+	bandScores.forEach((b) => (levels[b.module] += b.level));
+
+	return calculateAverageLevel(levels);
+};

src/utils/stats.ts

@@ -137,5 +137,6 @@ export const convertToUserSolutions = (stats: Stat[]): UserSolution[] => {
 		solutions: stat.solutions,
 		type: stat.type,
 		module: stat.module,
+		shuffleMaps: stat.shuffleMaps
 	}));
 };