From 932a2e4081552f0c1cde28f858289aa177a7185c Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Sun, 15 Oct 2023 23:23:46 +0100
Subject: [PATCH] Updated the look of the stats page

---
 src/pages/stats.tsx | 160 ++++++++++----------------------------------
 1 file changed, 36 insertions(+), 124 deletions(-)

diff --git a/src/pages/stats.tsx b/src/pages/stats.tsx
index 1ab77063..8b7fb90d 100644
--- a/src/pages/stats.tsx
+++ b/src/pages/stats.tsx
@@ -236,143 +236,55 @@ export default function Stats() {
 							</div>
 							<div className="flex gap-4 flex-wrap">
 								{/* Exams per module */}
-								<div className="flex flex-col gap-12 border w-full h-fit max-w-xs border-mti-gray-platinum p-4 pb-12 rounded-xl">
+								<div className="flex flex-col gap-10 border w-full h-96 max-w-xs border-mti-gray-platinum p-4 pb-12 rounded-xl">
 									<span className="text-sm font-bold">Exams per Module</span>
 									<div className="flex flex-col gap-4">
-										<div className="flex flex-col gap-2">
-											<div className="flex justify-between items-end">
-												<span className="text-xs">
-													<span className="font-medium">{totalExamsByModule(stats, "reading")}</span> of{" "}
-													<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
-												</span>
-												<span className="text-xs">Reading</span>
+										{MODULE_ARRAY.map((module) => (
+											<div className="flex flex-col gap-2" key={module}>
+												<div className="flex justify-between items-end">
+													<span className="text-xs">
+														<span className="font-medium">{totalExamsByModule(stats, module)}</span> of{" "}
+														<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
+													</span>
+													<span className="text-xs">{capitalize(module)}</span>
+												</div>
+												<ProgressBar
+													color={module}
+													percentage={(totalExamsByModule(stats, module) * 100) / Object.keys(groupBySession(stats)).length}
+													label=""
+													className="h-3"
+												/>
 											</div>
-											<ProgressBar
-												color="reading"
-												percentage={(totalExamsByModule(stats, "reading") * 100) / Object.keys(groupBySession(stats)).length}
-												label=""
-												className="h-1"
-											/>
-										</div>
-										<div className="flex flex-col gap-2">
-											<div className="flex justify-between items-end">
-												<span className="text-xs">
-													<span className="font-medium">{totalExamsByModule(stats, "listening")}</span> of{" "}
-													<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
-												</span>
-												<span className="text-xs">Listening</span>
-											</div>
-											<ProgressBar
-												color="listening"
-												percentage={
-													(totalExamsByModule(stats, "listening") * 100) / Object.keys(groupBySession(stats)).length
-												}
-												label=""
-												className="h-1"
-											/>
-										</div>
-										<div className="flex flex-col gap-2">
-											<div className="flex justify-between items-end">
-												<span className="text-xs">
-													<span className="font-medium">{totalExamsByModule(stats, "writing")}</span> of{" "}
-													<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
-												</span>
-												<span className="text-xs">Writing</span>
-											</div>
-											<ProgressBar
-												color="writing"
-												percentage={(totalExamsByModule(stats, "writing") * 100) / Object.keys(groupBySession(stats)).length}
-												label=""
-												className="h-1"
-											/>
-										</div>
-										<div className="flex flex-col gap-2">
-											<div className="flex justify-between items-end">
-												<span className="text-xs">
-													<span className="font-medium">{totalExamsByModule(stats, "speaking")}</span> of{" "}
-													<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
-												</span>
-												<span className="text-xs">Speaking</span>
-											</div>
-											<ProgressBar
-												color="speaking"
-												percentage={(totalExamsByModule(stats, "speaking") * 100) / Object.keys(groupBySession(stats)).length}
-												label=""
-												className="h-1"
-											/>
-										</div>
+										))}
 									</div>
 								</div>
 
 								{/* Module Score */}
-								<div className="flex flex-col gap-12 border w-full h-fit max-w-xs border-mti-gray-platinum p-4 pb-12 rounded-xl">
+								<div className="flex flex-col gap-10 border w-full h-96 max-w-xs border-mti-gray-platinum p-4 pb-12 rounded-xl">
 									<span className="text-sm font-bold">Module Score Bands</span>
 									<div className="flex flex-col gap-4">
-										<div className="flex flex-col gap-2">
-											<div className="flex justify-between items-end">
-												<span className="text-xs">
-													<span className="font-medium">{user.levels.reading}</span> of{" "}
-													<span className="font-medium">{user.desiredLevels.reading}</span>
-												</span>
-												<span className="text-xs">Reading</span>
+										{MODULE_ARRAY.map((module) => (
+											<div className="flex flex-col gap-2" key={module}>
+												<div className="flex justify-between items-end">
+													<span className="text-xs">
+														<span className="font-medium">{user.levels[module]}</span> of{" "}
+														<span className="font-medium">{user.desiredLevels[module]}</span>
+													</span>
+													<span className="text-xs">{capitalize(module)}</span>
+												</div>
+												<ProgressBar
+													color={module}
+													percentage={(user.levels[module] * 100) / user.desiredLevels[module]}
+													label=""
+													className="h-3"
+												/>
 											</div>
-											<ProgressBar
-												color="reading"
-												percentage={(user.levels.reading * 100) / user.desiredLevels.reading}
-												label=""
-												className="h-1"
-											/>
-										</div>
-										<div className="flex flex-col gap-2">
-											<div className="flex justify-between items-end">
-												<span className="text-xs">
-													<span className="font-medium">{user.levels.listening}</span> of{" "}
-													<span className="font-medium">{user.desiredLevels.listening}</span>
-												</span>
-												<span className="text-xs">Listening</span>
-											</div>
-											<ProgressBar
-												color="listening"
-												percentage={(user.levels.listening * 100) / user.desiredLevels.listening}
-												label=""
-												className="h-1"
-											/>
-										</div>
-										<div className="flex flex-col gap-2">
-											<div className="flex justify-between items-end">
-												<span className="text-xs">
-													<span className="font-medium">{user.levels.writing}</span> of{" "}
-													<span className="font-medium">{user.desiredLevels.writing}</span>
-												</span>
-												<span className="text-xs">Writing</span>
-											</div>
-											<ProgressBar
-												color="writing"
-												percentage={(user.levels.writing * 100) / user.desiredLevels.writing}
-												label=""
-												className="h-1"
-											/>
-										</div>
-										<div className="flex flex-col gap-2">
-											<div className="flex justify-between items-end">
-												<span className="text-xs">
-													<span className="font-medium">{user.levels.speaking}</span> of{" "}
-													<span className="font-medium">{user.desiredLevels.speaking}</span>
-												</span>
-												<span className="text-xs">Speaking</span>
-											</div>
-											<ProgressBar
-												color="speaking"
-												percentage={(user.levels.speaking * 100) / user.desiredLevels.speaking}
-												label=""
-												className="h-1"
-											/>
-										</div>
+										))}
 									</div>
 								</div>
 
 								{/* Total Score Band per Session */}
-								<div className="w-full max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl">
+								<div className="w-full max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-96">
 									<span className="text-sm font-bold">Total Score Band per Session</span>
 									<Chart
 										type="line"
@@ -395,7 +307,7 @@ export default function Stats() {
 								</div>
 
 								{/* Module Score Band per Session */}
-								<div className="w-full max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl">
+								<div className="w-full max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-96">
 									<span className="text-sm font-bold">Module Score Band per Session</span>
 									<Chart
 										type="line"