Created the stats page where a user can select another user to view their stats;

Improved the whole stats and the home page

src/pages/api/stats/[user].ts

@@ -0,0 +1,29 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type {NextApiRequest, NextApiResponse} from "next";
+import {app} from "@/firebase";
+import {getFirestore, collection, getDocs, query, where, doc, setDoc, addDoc} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	const {user} = req.query;
+	const q = query(collection(db, "stats"), where("user", "==", user));
+
+	const snapshot = await getDocs(q);
+
+	res.status(200).json(
+		snapshot.docs.map((doc) => ({
+			id: doc.id,
+			...doc.data(),
+		})),
+	);
+}

src/pages/exam/index.tsx

@@ -16,6 +16,7 @@ import {withIronSessionSsr} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
 import {Stat, User} from "@/interfaces/user";
 import Speaking from "@/exams/Speaking";
+import {v4 as uuidv4} from "uuid";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -42,9 +43,12 @@ export default function Page({user}: {user: User}) {
 	const [hasBeenUploaded, setHasBeenUploaded] = useState(false);
 	const [showSolutions, setShowSolutions] = useState(false);
 	const [moduleIndex, setModuleIndex] = useState(0);
+	const [sessionId, setSessionId] = useState("");
 	const [exam, setExam] = useState<Exam>();
 	const [timer, setTimer] = useState(-1);
 
+	useEffect(() => setSessionId(uuidv4()), []);
+
 	useEffect(() => {
 		(async () => {
 			if (selectedModules.length > 0 && moduleIndex < selectedModules.length) {
@@ -60,6 +64,7 @@ export default function Page({user}: {user: User}) {
 			if (selectedModules.length > 0 && moduleIndex >= selectedModules.length && !hasBeenUploaded) {
 				const stats: Stat[] = userSolutions.map((solution) => ({
 					...solution,
+					session: sessionId,
 					exam: solution.exam!,
 					module: solution.module!,
 					user: user.id,

src/pages/index.tsx

@@ -8,7 +8,8 @@ import {sessionOptions} from "@/lib/session";
 import {User} from "@/interfaces/user";
 import {useEffect, useState} from "react";
 import useStats from "@/hooks/useStats";
-import {formatModuleTotalStats} from "@/utils/stats";
+import {averageScore, formatModuleTotalStats, totalExams} from "@/utils/stats";
+import {Divider} from "primereact/divider";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -31,10 +32,11 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 
 export default function Home({user}: {user: User}) {
 	const [showEndExam, setShowEndExam] = useState(false);
+	const [windowWidth, setWindowWidth] = useState(0);
 	const {stats, isLoading} = useStats();
 
 	useEffect(() => setShowEndExam(window.innerWidth <= 960), []);
-	useEffect(() => console.log(stats), [stats]);
+	useEffect(() => setWindowWidth(window.innerWidth), []);
 
 	return (
 		<>
@@ -47,19 +49,32 @@ export default function Home({user}: {user: User}) {
 				<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 items-center bg-neutral-100">
+			<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100 text-black">
 				<Navbar profilePicture={user.profilePicture} showExamEnd={showEndExam} />
-				<div className="w-full h-full p-4 relative">
-					<section className="h-full w-full flex flex-col lg:flex-row gap-12 justify-center items-center md:items-start">
-						<section className="w-full lg:w-1/2 h-full flex items-center">
+				<div className="w-full h-full p-4 relative flex flex-col gap-8">
+					<section className="h-full w-full flex lg:gap-8 flex-col lg:flex-row justify-center md:justify-start md:items-start">
+						<section className="w-full h-full flex items-center">
 							<ProfileCard user={user} className="text-black self-start" />
 						</section>
-						{!isLoading && stats && (
-							<section className="w-full lg:w-1/3 h-full flex items-center justify-center">
-								<UserResultChart data={formatModuleTotalStats(stats)} title="Total exams" className="w-2/3" />
-							</section>
-						)}
+						{windowWidth <= 960 && <Divider />}
+						<div className="flex flex-col w-full gap-4">
+							<span className="font-bold text-2xl">Statistics</span>
+							{!isLoading && stats && (
+								<div className="text-neutral-600 flex flex-wrap gap-2 md:gap-4 w-full justify-between md:justify-start">
+									<div className="bg-white p-4 rounded-xl drop-shadow-xl flex flex-col gap-2 md:gap-4 w-full">
+										<span className="font-bold text-xl">Exams: {totalExams(stats)}</span>
+										<span className="font-bold text-xl">Exercises: {stats.length}</span>
+										<span className="font-bold text-xl">Average Score: {averageScore(stats)}%</span>
+									</div>
+								</div>
+							)}
+						</div>
 					</section>
+					{!isLoading && stats && (
+						<section className="w-full lg:w-1/3 h-full flex items-center justify-center">
+							<UserResultChart type="polarArea" data={formatModuleTotalStats(stats)} title="Exams per Module" />
+						</section>
+					)}
 				</div>
 			</main>
 		</>

src/pages/stats.tsx

@@ -0,0 +1,126 @@
+import Navbar from "@/components/Navbar";
+import UserResultChart from "@/components/UserResultChart";
+import useStats from "@/hooks/useStats";
+import useUsers from "@/hooks/useUsers";
+import {User} from "@/interfaces/user";
+import {sessionOptions} from "@/lib/session";
+import {formatExerciseAverageScoreStats, formatModuleAverageScoreStats, formatModuleTotalStats} from "@/utils/stats";
+import {withIronSessionSsr} from "iron-session/next";
+import Head from "next/head";
+import {AutoComplete} from "primereact/autocomplete";
+import {Divider} from "primereact/divider";
+import {useEffect, useState} from "react";
+
+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 Stats({user}: {user: User}) {
+	const [autocompleteValue, setAutocompleteValue] = useState(user.name);
+	const [selectedUser, setSelectedUser] = useState<User>();
+	const [items, setItems] = useState<User[]>([]);
+
+	const {users, isLoading} = useUsers();
+	const {stats, isLoading: isStatsLoading} = useStats(selectedUser?.id);
+
+	useEffect(() => console.log({stats}), [stats]);
+
+	const search = (event: {query: string}) => {
+		setItems(event.query ? users.filter((x) => x.name.startsWith(event.query)) : users);
+	};
+
+	return (
+		<>
+			<Head>
+				<title>IELTS GPT | Stats</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 items-center bg-neutral-100 text-neutral-600">
+				<Navbar profilePicture={user.profilePicture} />
+				<div className="w-full h-full flex flex-col items-center justify-center p-4 relative gap-8">
+					<AutoComplete
+						value={autocompleteValue}
+						suggestions={items}
+						field="name"
+						onChange={(e) => setAutocompleteValue(e.target.value)}
+						completeMethod={search}
+						onSelect={(e) => setSelectedUser(e.value)}
+						dropdown
+					/>
+
+					<section className="flex flex-col gap-2 md:gap-4 w-full">
+						<div className="flex flex-col">
+							<span className="font-semibold">Module Statistics</span>
+							<Divider />
+						</div>
+						<div className="flex flex-col md:grid md:grid-cols-3 w-full gap-4">
+							{!isStatsLoading && stats && (
+								<>
+									<div className="max-w-lg">
+										<UserResultChart
+											type="polarArea"
+											data={formatModuleTotalStats(stats)}
+											title="Exams per Module"
+											label="Total"
+										/>
+									</div>
+									<div className="max-w-lg">
+										<UserResultChart
+											type="polarArea"
+											data={formatModuleAverageScoreStats(stats)}
+											title="Average Score per Module"
+											label="Score (in %)"
+										/>
+									</div>
+									<div className="max-w-lg">
+										<UserResultChart type="polarArea" data={formatModuleTotalStats(stats)} title="Total exams" />
+									</div>
+								</>
+							)}
+						</div>
+					</section>
+
+					<section className="flex flex-col gap-2 md:gap-4 w-full">
+						<div className="flex flex-col">
+							<span className="font-semibold">Exam Statistics</span>
+							<Divider />
+						</div>
+
+						<div className="flex flex-col md:grid md:grid-cols-3 w-full gap-4">
+							{!isStatsLoading && stats && (
+								<div className="max-w-lg">
+									<UserResultChart
+										type="polarArea"
+										data={formatExerciseAverageScoreStats(stats)}
+										title="Average Score by Exercise"
+										label="Average"
+									/>
+								</div>
+							)}
+						</div>
+					</section>
+				</div>
+			</main>
+		</>
+	);
+}

src/pages/users.tsx

@@ -58,7 +58,7 @@ export default function Users({user}: {user: User}) {
 	return (
 		<>
 			<Head>
-				<title>IELTS GPT | Profile</title>
+				<title>IELTS GPT | Users</title>
 				<meta
 					name="description"
 					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
@@ -66,7 +66,7 @@ export default function Users({user}: {user: User}) {
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-			<main className="w-full h-screen flex flex-col items-center bg-neutral-100">
+			<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100">
 				<Navbar profilePicture={user.profilePicture} />
 				<div className="w-full h-full flex flex-col items-center justify-center p-4 relative">
 					<DataTable