From 9239068cde82315060c5eed55184f1038e087fda Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Mon, 2 Oct 2023 14:16:34 +0100
Subject: [PATCH] Updated the stats page a bit more

---
 src/exams/Selection.tsx               |  2 +-
 src/pages/(admin)/Lists/GroupList.tsx |  1 +
 src/pages/stats.tsx                   | 80 +++++++++++++++++++++++++--
 3 files changed, 77 insertions(+), 6 deletions(-)

diff --git a/src/exams/Selection.tsx b/src/exams/Selection.tsx
index 5b30da2b..c7a3f44f 100644
--- a/src/exams/Selection.tsx
+++ b/src/exams/Selection.tsx
@@ -19,7 +19,7 @@ interface Props {
 
 export default function Selection({user, onStart, disableSelection = false}: Props) {
 	const [selectedModules, setSelectedModules] = useState<Module[]>([]);
-	const [avoidRepeatedExams, setAvoidRepeatedExams] = useState(false);
+	const [avoidRepeatedExams, setAvoidRepeatedExams] = useState(true);
 	const {stats} = useStats(user?.id);
 
 	const toggleModule = (module: Module) => {
diff --git a/src/pages/(admin)/Lists/GroupList.tsx b/src/pages/(admin)/Lists/GroupList.tsx
index 93bfb9af..9469b436 100644
--- a/src/pages/(admin)/Lists/GroupList.tsx
+++ b/src/pages/(admin)/Lists/GroupList.tsx
@@ -244,6 +244,7 @@ export default function GroupList({user}: {user: User}) {
 									if (result) {
 										setShowDisclosure(false);
 										setEditingID(undefined);
+										reload();
 									}
 								});
 							}}
diff --git a/src/pages/stats.tsx b/src/pages/stats.tsx
index 73aaa604..5074c4f4 100644
--- a/src/pages/stats.tsx
+++ b/src/pages/stats.tsx
@@ -50,6 +50,7 @@ export default function Stats() {
 	const {users} = useUsers();
 	const {groups} = useGroups(user?.id);
 	const {stats} = useStats(statsUserId);
+	const {stats: userStats} = useStats(user?.id);
 
 	useEffect(() => {
 		if (user) setStatsUserId(user.id);
@@ -132,7 +133,7 @@ export default function Stats() {
 										<BsFileEarmarkText className="w-8 h-8 text-mti-red-light" />
 									</div>
 									<div className="flex flex-col">
-										<span className="font-bold text-xl">{Object.keys(groupBySession(stats)).length}</span>
+										<span className="font-bold text-xl">{Object.keys(groupBySession(userStats)).length}</span>
 										<span className="font-normal text-base text-mti-gray-dim">Exams</span>
 									</div>
 								</div>
@@ -141,7 +142,7 @@ export default function Stats() {
 										<BsPencil className="w-8 h-8 text-mti-red-light" />
 									</div>
 									<div className="flex flex-col">
-										<span className="font-bold text-xl">{stats.length}</span>
+										<span className="font-bold text-xl">{userStats.length}</span>
 										<span className="font-normal text-base text-mti-gray-dim">Exercises</span>
 									</div>
 								</div>
@@ -150,7 +151,7 @@ export default function Stats() {
 										<BsStar className="w-8 h-8 text-mti-red-light" />
 									</div>
 									<div className="flex flex-col">
-										<span className="font-bold text-xl">{averageScore(stats)}%</span>
+										<span className="font-bold text-xl">{averageScore(userStats)}%</span>
 										<span className="font-normal text-base text-mti-gray-dim">Average Score</span>
 									</div>
 								</div>
@@ -245,7 +246,75 @@ export default function Stats() {
 									</div>
 								</div>
 
-								<div className="w-full max-w-3xl border border-mti-gray-platinum p-4 pb-12 rounded-xl">
+								{/* 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">
+									<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>
+											</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">
 									<span className="text-sm font-bold">Total Score Band per Session</span>
 									<Chart
 										type="line"
@@ -267,7 +336,8 @@ export default function Stats() {
 									/>
 								</div>
 
-								<div className="w-full max-w-3xl border border-mti-gray-platinum p-4 pb-12 rounded-xl">
+								{/* Module Score Band per Session */}
+								<div className="w-full max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl">
 									<span className="text-sm font-bold">Module Score Band per Session</span>
 									<Chart
 										type="line"