From d3a37eed3edd07739d4398a79f90c158a4d17e14 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Fri, 23 Jun 2023 14:14:12 +0100
Subject: [PATCH] Redesigned the Record page along with solving some bugs on
 the FillBlanks

---
 src/components/Exercises/FillBlanks.tsx     |  34 +--
 src/components/Exercises/MatchSentences.tsx |   2 +-
 src/components/High/Layout.tsx              |   5 +-
 src/components/Sidebar.tsx                  |   2 +-
 src/exams/Finish.tsx                        |   2 +-
 src/exams/Selection.tsx                     |   3 +-
 src/pages/exam.tsx                          |  15 +-
 src/pages/history.tsx                       | 153 -------------
 src/pages/record.tsx                        | 239 ++++++++++++++++++++
 src/utils/moduleUtils.ts                    |   4 +
 src/utils/score.ts                          |  30 ++-
 11 files changed, 311 insertions(+), 178 deletions(-)
 delete mode 100644 src/pages/history.tsx
 create mode 100644 src/pages/record.tsx

diff --git a/src/components/Exercises/FillBlanks.tsx b/src/components/Exercises/FillBlanks.tsx
index d8ff1dff..f22a916b 100644
--- a/src/components/Exercises/FillBlanks.tsx
+++ b/src/components/Exercises/FillBlanks.tsx
@@ -17,7 +17,9 @@ interface WordsDrawerProps {
 function WordsDrawer({words, isOpen, blankId, previouslySelectedWord, onCancel, onAnswer}: WordsDrawerProps) {
 	const [selectedWord, setSelectedWord] = useState<string | undefined>(previouslySelectedWord);
 
-	useEffect(() => setSelectedWord(previouslySelectedWord), [previouslySelectedWord]);
+	useEffect(() => {
+		console.log({previouslySelectedWord}), setSelectedWord(previouslySelectedWord);
+	}, [previouslySelectedWord]);
 
 	return (
 		<>
@@ -79,11 +81,11 @@ export default function FillBlanks({
 }: FillBlanksExercise & CommonProps) {
 	const [answers, setAnswers] = useState<{id: string; solution: string}[]>(userSolutions);
 	const [currentBlankId, setCurrentBlankId] = useState<string>();
-	const [blankSelectedWord, setBlankSelectedWord] = useState<string>();
+	const [isDrawerShowing, setIsDrawerShowing] = useState(false);
 
 	useEffect(() => {
-		setBlankSelectedWord(currentBlankId ? answers.find((x) => x.id === currentBlankId)?.solution : undefined);
-	}, [answers, currentBlankId]);
+		setTimeout(() => setIsDrawerShowing(!!currentBlankId), 100);
+	}, [currentBlankId]);
 
 	const calculateScore = () => {
 		const total = text.match(/({{\d+}})/g)?.length || 0;
@@ -120,17 +122,19 @@ export default function FillBlanks({
 	return (
 		<>
 			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
-				<WordsDrawer
-					blankId={currentBlankId}
-					words={words.map((word) => ({word, isDisabled: allowRepetition ? false : answers.map((x) => x.solution).includes(word)}))}
-					previouslySelectedWord={blankSelectedWord}
-					isOpen={!!currentBlankId}
-					onCancel={() => setCurrentBlankId(undefined)}
-					onAnswer={(solution: string) => {
-						setAnswers((prev) => [...prev.filter((x) => x.id !== currentBlankId), {id: currentBlankId!, solution}]);
-						setCurrentBlankId(undefined);
-					}}
-				/>
+				{(!!currentBlankId || isDrawerShowing) && (
+					<WordsDrawer
+						blankId={currentBlankId}
+						words={words.map((word) => ({word, isDisabled: allowRepetition ? false : answers.map((x) => x.solution).includes(word)}))}
+						previouslySelectedWord={currentBlankId ? answers.find((x) => x.id === currentBlankId)?.solution : undefined}
+						isOpen={isDrawerShowing}
+						onCancel={() => setCurrentBlankId(undefined)}
+						onAnswer={(solution: string) => {
+							setAnswers((prev) => [...prev.filter((x) => x.id !== currentBlankId), {id: currentBlankId!, solution}]);
+							setCurrentBlankId(undefined);
+						}}
+					/>
+				)}
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>
diff --git a/src/components/Exercises/MatchSentences.tsx b/src/components/Exercises/MatchSentences.tsx
index fca9da97..95fdfe0a 100644
--- a/src/components/Exercises/MatchSentences.tsx
+++ b/src/components/Exercises/MatchSentences.tsx
@@ -53,7 +53,7 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 									className={clsx(
 										"bg-mti-green-ultralight text-mti-green hover:text-white hover:bg-mti-green w-8 h-8 rounded-full z-10",
 										"transition duration-300 ease-in-out",
-										selectedQuestion === id && "!text-white bg-mti-green",
+										selectedQuestion === id && "!text-white !bg-mti-green",
 										id,
 									)}>
 									{id}
diff --git a/src/components/High/Layout.tsx b/src/components/High/Layout.tsx
index 55b292ec..847b7b96 100644
--- a/src/components/High/Layout.tsx
+++ b/src/components/High/Layout.tsx
@@ -1,5 +1,6 @@
 import {User} from "@/interfaces/user";
 import clsx from "clsx";
+import {useRouter} from "next/router";
 import Navbar from "../Navbar";
 import Sidebar from "../Sidebar";
 
@@ -10,11 +11,13 @@ interface Props {
 }
 
 export default function Layout({user, children, className}: Props) {
+	const router = useRouter();
+
 	return (
 		<main className="w-full min-h-full h-screen flex flex-col bg-mti-gray-smoke">
 			<Navbar user={user} />
 			<div className="h-full w-full flex py-4 pb-8 gap-2">
-				<Sidebar path={window.location.pathname} />
+				<Sidebar path={router.pathname} />
 				<div
 					className={clsx(
 						"w-5/6 min-h-full h-fit mr-8 bg-white shadow-md rounded-2xl p-12 pb-8 flex flex-col gap-12 relative overflow-hidden",
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index d03c2d21..dd140ee9 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -48,7 +48,7 @@ export default function Sidebar({path}: Props) {
 				<Nav Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" />
 				<Nav Icon={BsPencil} label="Exercises" path={path} keyPath="/#" />
 				<Nav Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" />
-				<Nav Icon={BsClockHistory} label="Record" path={path} keyPath="/#" />
+				<Nav Icon={BsClockHistory} label="Record" path={path} keyPath="/record" />
 			</div>
 
 			<div
diff --git a/src/exams/Finish.tsx b/src/exams/Finish.tsx
index e238b4eb..b2344fbb 100644
--- a/src/exams/Finish.tsx
+++ b/src/exams/Finish.tsx
@@ -150,7 +150,7 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
 								<div className="flex gap-2">
 									<div className="w-3 h-3 bg-mti-green-light rounded-full mt-1" />
 									<div className="flex flex-col">
-										<span className="text-mti-green-light">{selectedScore.total.toString().padStart(2, "0")}</span>
+										<span className="text-mti-green-light">{selectedScore.correct.toString().padStart(2, "0")}</span>
 										<span className="text-lg">Correct</span>
 									</div>
 								</div>
diff --git a/src/exams/Selection.tsx b/src/exams/Selection.tsx
index 79d793f7..4973c654 100644
--- a/src/exams/Selection.tsx
+++ b/src/exams/Selection.tsx
@@ -9,6 +9,7 @@ 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";
 
 interface Props {
 	user: User;
@@ -164,7 +165,7 @@ export default function Selection({user, onStart}: Props) {
 					</div>
 				</section>
 				<Button
-					onClick={() => onStart(selectedModules)}
+					onClick={() => onStart(selectedModules.sort(sortByModuleName))}
 					color="green"
 					className="px-12 w-full max-w-xs self-end"
 					disabled={selectedModules.length === 0}>
diff --git a/src/pages/exam.tsx b/src/pages/exam.tsx
index 1d0fffa8..8abb6f0f 100644
--- a/src/pages/exam.tsx
+++ b/src/pages/exam.tsx
@@ -6,7 +6,7 @@ import {Module} from "@/interfaces";
 
 import Selection from "@/exams/Selection";
 import Reading from "@/exams/Reading";
-import {Exam, ListeningExam, ReadingExam, SpeakingExam, UserSolution, WritingExam, WritingExercise} from "@/interfaces/exam";
+import {Exam, ListeningExam, ReadingExam, SpeakingExam, UserSolution, WritingEvaluation, WritingExam, WritingExercise} from "@/interfaces/exam";
 import Listening from "@/exams/Listening";
 import Writing from "@/exams/Writing";
 import {ToastContainer, toast} from "react-toastify";
@@ -22,6 +22,7 @@ import useExamStore from "@/stores/examStore";
 import Sidebar from "@/components/Sidebar";
 import Layout from "@/components/High/Layout";
 import {sortByModule} from "@/utils/moduleUtils";
+import {writingReverseMarking} from "@/utils/score";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -127,7 +128,7 @@ export default function Page() {
 		const writingExam = exams.find((x) => x.id === examId)!;
 		const exercise = writingExam.exercises.find((x) => x.id === exerciseId)! as WritingExercise;
 
-		const response = await axios.post("/api/exam/writing/evaluate", {
+		const response = await axios.post<WritingEvaluation>("/api/exam/writing/evaluate", {
 			question: `${exercise.prompt} ${exercise.attachment ? exercise.attachment.description : ""}`.replaceAll("\n", ""),
 			answer: solution.solutions[0].solution.trim().replaceAll("\n", " "),
 		});
@@ -135,7 +136,15 @@ export default function Page() {
 		if (response.status === 200) {
 			setUserSolutions([
 				...userSolutions.filter((x) => x.exercise !== exerciseId),
-				{...solution, solutions: [{id: exerciseId, solution: solution.solutions[0].solution, evaluation: response.data}]},
+				{
+					...solution,
+					score: {
+						correct: writingReverseMarking[response.data.overall],
+						missing: 0,
+						total: 100,
+					},
+					solutions: [{id: exerciseId, solution: solution.solutions[0].solution, evaluation: response.data}],
+				},
 			]);
 		}
 	};
diff --git a/src/pages/history.tsx b/src/pages/history.tsx
deleted file mode 100644
index 5fc6c161..00000000
--- a/src/pages/history.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-/* eslint-disable @next/next/no-img-element */
-import Head from "next/head";
-import SingleDatasetChart from "@/components/UserResultChart";
-import Navbar from "@/components/Navbar";
-import ProfileCard from "@/components/ProfileCard";
-import {withIronSessionSsr} from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
-import {Stat, User} from "@/interfaces/user";
-import {useEffect, useState} from "react";
-import useStats from "@/hooks/useStats";
-import {averageScore, convertToUserSolutions, formatModuleTotalStats, groupByDate, groupBySession, totalExams} from "@/utils/stats";
-import {Divider} from "primereact/divider";
-import useUser from "@/hooks/useUser";
-import {Timeline} from "primereact/timeline";
-import moment from "moment";
-import {AutoComplete} from "primereact/autocomplete";
-import useUsers from "@/hooks/useUsers";
-import {Dropdown} from "primereact/dropdown";
-import useExamStore from "@/stores/examStore";
-import {Exam, ListeningExam, ReadingExam, SpeakingExam, WritingExam} from "@/interfaces/exam";
-import {Module} from "@/interfaces";
-import axios from "axios";
-import {toast} from "react-toastify";
-import {useRouter} from "next/router";
-import Icon from "@mdi/react";
-import {mdiArrowRight, mdiChevronRight} from "@mdi/js";
-import {uniqBy} from "lodash";
-import {getExamById} from "@/utils/exams";
-import {sortByModule} from "@/utils/moduleUtils";
-
-export const getServerSideProps = withIronSessionSsr(({req, res}) => {
-	const user = req.session.user;
-
-	if (!user) {
-		res.setHeader("location", "/login");
-		res.statusCode = 302;
-		res.end();
-		return {
-			props: {
-				user: null,
-			},
-		};
-	}
-
-	return {
-		props: {user: req.session.user},
-	};
-}, sessionOptions);
-
-export default function History({user}: {user: User}) {
-	const [selectedUser, setSelectedUser] = useState<User>(user);
-	const [groupedStats, setGroupedStats] = useState<{[key: string]: Stat[]}>();
-
-	const {users, isLoading: isUsersLoading} = useUsers();
-	const {stats, isLoading: isStatsLoading} = useStats(selectedUser?.id);
-
-	const setExams = useExamStore((state) => state.setExams);
-	const setShowSolutions = useExamStore((state) => state.setShowSolutions);
-	const setUserSolutions = useExamStore((state) => state.setUserSolutions);
-	const setSelectedModules = useExamStore((state) => state.setSelectedModules);
-
-	const router = useRouter();
-
-	useEffect(() => {
-		if (stats && !isStatsLoading) {
-			setGroupedStats(groupByDate(stats));
-		}
-	}, [stats, isStatsLoading]);
-
-	const formatTimestamp = (timestamp: string) => {
-		const date = moment(parseInt(timestamp));
-		const formatter = "YYYY/MM/DD - HH:mm";
-
-		return date.format(formatter);
-	};
-
-	const customContent = (timestamp: string) => {
-		if (!groupedStats) return <></>;
-
-		const dateStats = groupedStats[timestamp];
-		const correct = dateStats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
-		const total = dateStats.reduce((accumulator, current) => accumulator + current.score.total, 0);
-
-		const selectExam = () => {
-			const examPromises = uniqBy(dateStats, "exam").map((stat) => getExamById(stat.module, stat.exam));
-
-			Promise.all(examPromises).then((exams) => {
-				if (exams.every((x) => !!x)) {
-					setUserSolutions(convertToUserSolutions(dateStats));
-					setShowSolutions(true);
-					setExams(exams.map((x) => x!).sort(sortByModule));
-					setSelectedModules(
-						exams
-							.map((x) => x!)
-							.sort(sortByModule)
-							.map((x) => x!.module),
-					);
-					router.push("/exam");
-				}
-			});
-		};
-
-		return (
-			<div className="flex flex-col gap-2">
-				<span>{formatTimestamp(timestamp)}</span>
-				<div
-					className="bg-white p-4 rounded-xl mb-4 flex justify-between items-center drop-shadow-lg cursor-pointer hover:bg-neutral-100 hover:drop-shadow-xl focus:bg-neutral-100 focus:drop-shadow-xl transition ease-in-out duration-300"
-					onClick={selectExam}
-					role="button">
-					<div className="flex flex-col gap-2 ">
-						<span>
-							Modules:{" "}
-							{formatModuleTotalStats(dateStats)
-								.filter((x) => x.value > 0)
-								.map((x) => x.label)
-								.join(", ")}
-						</span>
-						<span>
-							Score: {correct}/{total} | {((correct / total) * 100).toFixed(2)}%
-						</span>
-					</div>
-					<Icon path={mdiChevronRight} color="black" size={1} className="cursor-pointer" />
-				</div>
-			</div>
-		);
-	};
-
-	return (
-		<>
-			<Head>
-				<title>IELTS GPT | Muscat Training Institute</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>
-			<main className="w-full h-full min-h-[100vh] flex flex-col bg-neutral-100 text-black">
-				<div className="w-fit self-center">
-					{!isUsersLoading && user.type !== "student" && (
-						<Dropdown value={selectedUser} options={users} optionLabel="name" onChange={(e) => setSelectedUser(e.target.value)} />
-					)}
-				</div>
-				<div className="w-2/3 h-full p-4 relative flex flex-col gap-8">
-					{groupedStats && !isStatsLoading && (
-						<Timeline value={Object.keys(groupedStats).sort((a, b) => parseInt(b) - parseInt(a))} content={customContent} />
-					)}
-				</div>
-			</main>
-		</>
-	);
-}
diff --git a/src/pages/record.tsx b/src/pages/record.tsx
new file mode 100644
index 00000000..c56ded91
--- /dev/null
+++ b/src/pages/record.tsx
@@ -0,0 +1,239 @@
+/* eslint-disable @next/next/no-img-element */
+import Head from "next/head";
+import SingleDatasetChart from "@/components/UserResultChart";
+import Navbar from "@/components/Navbar";
+import ProfileCard from "@/components/ProfileCard";
+import {withIronSessionSsr} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {Stat, User} from "@/interfaces/user";
+import {useEffect, useState} from "react";
+import useStats from "@/hooks/useStats";
+import {averageScore, convertToUserSolutions, formatModuleTotalStats, groupByDate, groupBySession, totalExams} from "@/utils/stats";
+import {Divider} from "primereact/divider";
+import useUser from "@/hooks/useUser";
+import {Timeline} from "primereact/timeline";
+import moment from "moment";
+import {AutoComplete} from "primereact/autocomplete";
+import useUsers from "@/hooks/useUsers";
+import {Dropdown} from "primereact/dropdown";
+import useExamStore from "@/stores/examStore";
+import {Exam, ListeningExam, ReadingExam, SpeakingExam, WritingExam} from "@/interfaces/exam";
+import {Module} from "@/interfaces";
+import axios from "axios";
+import {toast, ToastContainer} from "react-toastify";
+import {useRouter} from "next/router";
+import Icon from "@mdi/react";
+import {mdiArrowRight, mdiChevronRight} from "@mdi/js";
+import {uniqBy} from "lodash";
+import {getExamById} from "@/utils/exams";
+import {sortByModule} from "@/utils/moduleUtils";
+import Layout from "@/components/High/Layout";
+import clsx from "clsx";
+import {calculateAverageLevel, calculateBandScore} from "@/utils/score";
+import {BsBook, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
+
+export const getServerSideProps = withIronSessionSsr(({req, res}) => {
+	const user = req.session.user;
+
+	if (!user) {
+		res.setHeader("location", "/login");
+		res.statusCode = 302;
+		res.end();
+		return {
+			props: {
+				user: null,
+			},
+		};
+	}
+
+	return {
+		props: {user: req.session.user},
+	};
+}, sessionOptions);
+
+export default function History({user}: {user: User}) {
+	const [selectedUser, setSelectedUser] = useState<User>(user);
+	const [groupedStats, setGroupedStats] = useState<{[key: string]: Stat[]}>();
+
+	const {users, isLoading: isUsersLoading} = useUsers();
+	const {stats, isLoading: isStatsLoading} = useStats(selectedUser?.id);
+
+	const setExams = useExamStore((state) => state.setExams);
+	const setShowSolutions = useExamStore((state) => state.setShowSolutions);
+	const setUserSolutions = useExamStore((state) => state.setUserSolutions);
+	const setSelectedModules = useExamStore((state) => state.setSelectedModules);
+
+	const router = useRouter();
+
+	useEffect(() => {
+		if (stats && !isStatsLoading) {
+			setGroupedStats(groupByDate(stats));
+		}
+	}, [stats, isStatsLoading]);
+
+	const formatTimestamp = (timestamp: string) => {
+		const date = moment(parseInt(timestamp));
+		const formatter = "YYYY/MM/DD - HH:mm";
+
+		return date.format(formatter);
+	};
+
+	const aggregateScoresByModule = (stats: Stat[]): {module: Module; total: number; missing: number; correct: number}[] => {
+		const scores: {[key in Module]: {total: number; missing: number; correct: number}} = {
+			reading: {
+				total: 0,
+				correct: 0,
+				missing: 0,
+			},
+			listening: {
+				total: 0,
+				correct: 0,
+				missing: 0,
+			},
+			writing: {
+				total: 0,
+				correct: 0,
+				missing: 0,
+			},
+			speaking: {
+				total: 0,
+				correct: 0,
+				missing: 0,
+			},
+		};
+
+		stats.forEach((x) => {
+			scores[x.module!] = {
+				total: scores[x.module!].total + x.score.total,
+				correct: scores[x.module!].correct + x.score.correct,
+				missing: scores[x.module!].missing + x.score.missing,
+			};
+		});
+
+		return Object.keys(scores)
+			.filter((x) => scores[x as Module].total > 0)
+			.map((x) => ({module: x as Module, ...scores[x as Module]}));
+	};
+
+	const customContent = (timestamp: string) => {
+		if (!groupedStats) return <></>;
+
+		const dateStats = groupedStats[timestamp];
+		const correct = dateStats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
+		const total = dateStats.reduce((accumulator, current) => accumulator + current.score.total, 0);
+		const aggregatedScores = aggregateScoresByModule(dateStats).filter((x) => x.total > 0);
+
+		const aggregatedLevels = aggregatedScores.map((x) => ({
+			module: x.module,
+			level: calculateBandScore(x.correct, x.total, x.module, user.focus),
+		}));
+
+		const selectExam = () => {
+			const examPromises = uniqBy(dateStats, "exam").map((stat) => getExamById(stat.module, stat.exam));
+
+			Promise.all(examPromises).then((exams) => {
+				if (exams.every((x) => !!x)) {
+					setUserSolutions(convertToUserSolutions(dateStats));
+					setShowSolutions(true);
+					setExams(exams.map((x) => x!).sort(sortByModule));
+					setSelectedModules(
+						exams
+							.map((x) => x!)
+							.sort(sortByModule)
+							.map((x) => x!.module),
+					);
+					router.push("/exam");
+				}
+			});
+		};
+
+		return (
+			<div
+				key={timestamp}
+				className={clsx(
+					"flex flex-col gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300",
+					correct / total >= 0.7 && "hover:border-mti-green",
+					correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-blue",
+					correct / total < 0.3 && "hover:border-mti-orange",
+				)}
+				onClick={selectExam}
+				role="button">
+				<div className="w-full flex justify-between items-center">
+					<span className="font-medium">{formatTimestamp(timestamp)}</span>
+					<span
+						className={clsx(
+							correct / total >= 0.7 && "text-mti-green",
+							correct / total >= 0.3 && correct / total < 0.7 && "text-mti-blue",
+							correct / total < 0.3 && "text-mti-orange",
+						)}>
+						Level{" "}
+						{(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)}
+					</span>
+				</div>
+				<div className="grid grid-cols-4 gap-4 place-items-center w-full">
+					{aggregatedLevels.map(({module, level}) => (
+						<div
+							key={module}
+							className={clsx(
+								"flex gap-2 items-center w-fit text-white px-4 py-2 rounded-xl",
+								module === "reading" && "bg-ielts-reading",
+								module === "listening" && "bg-ielts-listening",
+								module === "writing" && "bg-ielts-writing",
+								module === "speaking" && "bg-ielts-speaking",
+							)}>
+							{module === "reading" && <BsBook className="w-4 h-4" />}
+							{module === "listening" && <BsHeadphones className="w-4 h-4" />}
+							{module === "writing" && <BsPen className="w-4 h-4" />}
+							{module === "speaking" && <BsMegaphone className="w-4 h-4" />}
+							<span className="text-sm">{level.toFixed(1)}</span>
+						</div>
+					))}
+				</div>
+			</div>
+		);
+	};
+
+	return (
+		<>
+			<Head>
+				<title>IELTS GPT | Muscat Training Institute</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-fit">
+						{!isUsersLoading && user.type !== "student" && (
+							<>
+								<select
+									className="select w-full max-w-xs bg-white border border-mti-gray-platinum outline-none font-normal text-base"
+									onChange={(e) => setSelectedUser(users.find((x) => x.id === e.target.value)!)}>
+									{users.map((x) => (
+										<option key={x.id} selected={selectedUser.id === x.id} value={x.id}>
+											{x.name}
+										</option>
+									))}
+								</select>
+							</>
+						)}
+					</div>
+					{groupedStats && Object.keys(groupedStats).length > 0 && !isStatsLoading && (
+						<div className="grid grid-cols-3 w-full gap-6">
+							{Object.keys(groupedStats)
+								.sort((a, b) => parseInt(b) - parseInt(a))
+								.map(customContent)}
+						</div>
+					)}
+					{groupedStats && Object.keys(groupedStats).length === 0 && !isStatsLoading && (
+						<span className="font-semibold ml-1">No record to display...</span>
+					)}
+				</Layout>
+			)}
+		</>
+	);
+}
diff --git a/src/utils/moduleUtils.ts b/src/utils/moduleUtils.ts
index 2393e23a..abe9ed54 100644
--- a/src/utils/moduleUtils.ts
+++ b/src/utils/moduleUtils.ts
@@ -12,3 +12,7 @@ export const moduleLabels: {[key in Module]: string} = {
 export const sortByModule = (a: {module: Module}, b: {module: Module}) => {
 	return MODULE_ARRAY.findIndex((x) => a.module === x) - MODULE_ARRAY.findIndex((x) => b.module === x);
 };
+
+export const sortByModuleName = (a: string, b: string) => {
+	return MODULE_ARRAY.findIndex((x) => a === x) - MODULE_ARRAY.findIndex((x) => b === x);
+};
diff --git a/src/utils/score.ts b/src/utils/score.ts
index e9e90ccd..68359686 100644
--- a/src/utils/score.ts
+++ b/src/utils/score.ts
@@ -2,6 +2,32 @@ import {Module} from "@/interfaces";
 
 type Type = "academic" | "general";
 
+export const writingReverseMarking: {[key: number]: number} = {
+	9: 90,
+	8: 80,
+	7: 70,
+	6: 60,
+	5: 50,
+	4: 40,
+	3: 30,
+	2: 20,
+	1: 10,
+	0: 0,
+};
+
+const writingMarking: {[key: number]: number} = {
+	90: 9,
+	80: 8,
+	70: 7,
+	60: 6,
+	50: 5,
+	40: 4,
+	30: 3,
+	20: 2,
+	10: 1,
+	0: 0,
+};
+
 const readingGeneralMarking: {[key: number]: number} = {
 	100: 9,
 	97.5: 8.5,
@@ -46,8 +72,8 @@ const moduleMarkings: {[key in Module]: {[key in Type]: {[key: number]: number}}
 		general: academicMarking,
 	},
 	writing: {
-		academic: academicMarking,
-		general: readingGeneralMarking,
+		academic: writingMarking,
+		general: writingMarking,
 	},
 	speaking: {
 		academic: academicMarking,