Merged develop into feature-payment-corporate-id

src/pages/stats.tsx

@@ -1,20 +1,20 @@
 /* eslint-disable @next/next/no-img-element */
 import Head from "next/head";
-import {BsFileEarmarkText, BsPencil, BsStar} from "react-icons/bs";
+import {BsArrowClockwise, BsChevronLeft, BsChevronRight, BsFileEarmarkText, BsPencil, BsStar} from "react-icons/bs";
 import {LinearScale, Chart as ChartJS, CategoryScale, PointElement, LineElement, Legend, Tooltip, LineController} from "chart.js";
 import {withIronSessionSsr} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
 import {useEffect, useState} from "react";
 import useStats from "@/hooks/useStats";
-import {averageScore, totalExamsByModule, groupBySession, groupByModule} from "@/utils/stats";
+import {averageScore, totalExamsByModule, groupBySession, groupByModule, timestampToMoment, groupByDate} from "@/utils/stats";
 import useUser from "@/hooks/useUser";
 import {ToastContainer} from "react-toastify";
-import {capitalize} from "lodash";
+import {capitalize, Dictionary} from "lodash";
 import {Module} from "@/interfaces";
 import ProgressBar from "@/components/Low/ProgressBar";
 import Layout from "@/components/High/Layout";
 import {calculateAverageLevel, calculateBandScore} from "@/utils/score";
-import {MODULE_ARRAY} from "@/utils/moduleUtils";
+import {MODULE_ARRAY, sortByModule} from "@/utils/moduleUtils";
 import {Chart} from "react-chartjs-2";
 import useUsers from "@/hooks/useUsers";
 import Select from "react-select";
@@ -24,10 +24,12 @@ import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import ProfileSummary from "@/components/ProfileSummary";
 import moment from "moment";
 import {Stat} from "@/interfaces/user";
+import {Divider} from "primereact/divider";
+import Badge from "@/components/Low/Badge";
 
 ChartJS.register(LinearScale, CategoryScale, PointElement, LineElement, LineController, Legend, Tooltip);
 
-const COLORS = ["#1EB3FF", "#FF790A", "#3D9F11", "#EF5DA8"];
+const COLORS = ["#1EB3FF", "#FF790A", "#3D9F11", "#EF5DA8", "#414288"];
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -61,9 +63,15 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 
 export default function Stats() {
 	const [statsUserId, setStatsUserId] = useState<string>();
-	const [startDate, setStartDate] = useState<Date | null>(moment("01/01/2023").toDate());
+	const [startDate, setStartDate] = useState<Date | null>(moment(new Date()).subtract(1, "weeks").toDate());
 	const [endDate, setEndDate] = useState<Date | null>(new Date());
-	const [displayStats, setDisplayStats] = useState<Stat[]>([]);
+	const [initialStatDate, setInitialStatDate] = useState<Date>();
+
+	const [monthlyOverallScoreDate, setMonthlyOverallScoreDate] = useState<Date | null>(new Date());
+	const [monthlyModuleScoreDate, setMonthlyModuleScoreDate] = useState<Date | null>(new Date());
+
+	const [dailyScoreDate, setDailyScoreDate] = useState<Date | null>(new Date());
+	const [intervalDates, setIntervalDates] = useState<Date[]>([]);
 
 	const {user} = useUser({redirectTo: "/login"});
 	const {users} = useUsers();
@@ -76,53 +84,30 @@ export default function Stats() {
 	}, [user]);
 
 	useEffect(() => {
-		const startDateFilter = (s: Stat) => moment.unix(s.date / 1000).isAfter(moment(startDate));
-		const endDateFilter = (s: Stat) => {
-			console.log(moment.unix(s.date / 1000), moment(endDate).isAfter(moment.unix(s.date)));
-			return moment(endDate).isAfter(moment.unix(s.date / 1000));
-		};
+		setInitialStatDate(
+			stats
+				.filter((s) => s.date)
+				.sort((a, b) => timestampToMoment(a).diff(timestampToMoment(b)))
+				.map(timestampToMoment)
+				.shift()
+				?.toDate(),
+		);
+	}, [stats]);
 
-		const filters = [];
-		if (startDate) filters.push(startDateFilter);
-		if (endDate) filters.push(endDateFilter);
+	const calculateModuleScore = (stats: Stat[]) => {
+		const moduleStats = groupByModule(stats);
+		return Object.keys(moduleStats).map((y) => {
+			const correct = moduleStats[y].reduce((accumulator, current) => accumulator + current.score.correct, 0);
+			const total = moduleStats[y].reduce((accumulator, current) => accumulator + current.score.total, 0);
 
-		setDisplayStats(filters.reduce((d, f) => d.filter(f), stats));
-	}, [endDate, startDate, stats]);
-
-	const calculateTotalScorePerSession = () => {
-		const groupedBySession = groupBySession(stats);
-		const sessionAverage = Object.keys(groupedBySession).map((x: string) => {
-			const session = groupedBySession[x];
-			const moduleStats = groupByModule(session);
-			const moduleScores = Object.keys(moduleStats).map((y) => {
-				const correct = moduleStats[y].reduce((accumulator, current) => accumulator + current.score.correct, 0);
-				const total = moduleStats[y].reduce((accumulator, current) => accumulator + current.score.total, 0);
-
-				return {
-					module: y,
-					score: calculateBandScore(correct, total, y as Module, user?.focus || "academic"),
-				};
-			});
-
-			return moduleScores.reduce((acc, curr) => acc + curr.score, 0) / 4;
+			return {
+				module: y as Module,
+				score: calculateBandScore(correct, total, y as Module, user?.focus || "academic"),
+			};
 		});
-
-		return sessionAverage;
 	};
 
-	const calculateAverageTimePerModule = () => {
-		const groupedBySession = groupBySession(stats.filter((x) => !!x.timeSpent));
-		const sessionAverage = Object.keys(groupedBySession).map((x: string) => {
-			const session = groupedBySession[x];
-			const timeSpent = session[0].timeSpent!;
-
-			return Math.floor(timeSpent / session.length / 60);
-		});
-
-		return sessionAverage;
-	};
-
-	const calculateModularScorePerSession = (module: Module) => {
+	const calculateModularScorePerSession = (stats: Stat[], module: Module) => {
 		const groupedBySession = groupBySession(stats);
 		const sessionAverage = Object.keys(groupedBySession).map((x: string) => {
 			const session = groupedBySession[x];
@@ -137,6 +122,33 @@ export default function Stats() {
 		return sessionAverage;
 	};
 
+	const getListOfDateInInterval = (start: Date, end: Date) => {
+		let currentDate = moment(start);
+		const dates = [currentDate.toDate()];
+		while (moment(end).diff(currentDate, "days") > 0) {
+			currentDate = currentDate.add(1, "days");
+			dates.push(currentDate.toDate());
+		}
+
+		return dates;
+	};
+
+	useEffect(() => {
+		if (startDate && endDate) {
+			setIntervalDates(getListOfDateInInterval(startDate, endDate));
+		}
+	}, [startDate, endDate]);
+
+	const calculateTotalScore = (stats: Stat[]) => {
+		const moduleScores = calculateModuleScore(stats);
+		return moduleScores.reduce((acc, curr) => acc + curr.score, 0) / 4;
+	};
+
+	const calculateScorePerModule = (stats: Stat[], module: Module) => {
+		const moduleScores = calculateModuleScore(stats);
+		return moduleScores.find((x) => x.module === module)?.score || -1;
+	};
+
 	return (
 		<>
 			<Head>
@@ -208,144 +220,573 @@ export default function Stats() {
 									/>
 								)}
 							</>
-							<DatePicker
-								dateFormat="dd/MM/yyyy"
-								className="border border-mti-gray-dim/40 px-4 py-1.5 rounded-lg text-center w-[256px]"
-								startDate={startDate}
-								endDate={endDate}
-								selectsRange
-								showMonthDropdown
-								filterDate={(date) => moment(date).isSameOrBefore(moment(new Date()))}
-								onChange={([initialDate, finalDate]) => {
-									setStartDate(initialDate ?? moment("01/01/2023").toDate());
-									setEndDate(finalDate);
-								}}
-							/>
 						</div>
 
-						{displayStats.length > 0 && (
-							<div className="flex -md:flex-col -md:items-center gap-4 flex-wrap">
-								{/* Exams per module */}
-								<div className="flex flex-col gap-10 border w-full h-fit md:h-96 md: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">
-										{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(displayStats, module)}</span> of{" "}
-														<span className="font-medium">{Object.keys(groupBySession(displayStats)).length}</span>
-													</span>
-													<span className="text-xs">{capitalize(module)}</span>
-												</div>
-												<ProgressBar
-													color={module}
-													percentage={
-														(totalExamsByModule(displayStats, module) * 100) /
-														Object.keys(groupBySession(displayStats)).length
-													}
-													label=""
-													className="h-3"
+						{stats.length > 0 && (
+							<>
+								<div className="flex -md:flex-col -md:items-center gap-4 flex-wrap">
+									{/* Overall Level per Month */}
+									<div className="flex flex-col items-center gap-4 border w-full h-[420px] overflow-y-scroll scrollbar-hide md:max-w-sm border-mti-gray-platinum p-4 pb-12 rounded-xl">
+										<div className="flex flex-col gap-2 w-full">
+											<span className="text-sm font-bold">Overall Level per Month</span>
+											<div className="flex gap-2 items-center">
+												{monthlyOverallScoreDate && (
+													<button
+														onClick={() =>
+															setMonthlyOverallScoreDate((prev) => moment(prev).subtract(1, "months").toDate())
+														}>
+														<BsChevronLeft />
+													</button>
+												)}
+												<DatePicker
+													dateFormat="MMMM yyyy"
+													className="border border-mti-gray-dim/40 px-2 py-1.5 rounded-lg text-center w-[200px]"
+													minDate={initialStatDate}
+													maxDate={new Date()}
+													selected={monthlyOverallScoreDate}
+													showMonthYearPicker
+													onChange={setMonthlyOverallScoreDate}
 												/>
+												{monthlyOverallScoreDate && (
+													<button
+														disabled={moment(monthlyOverallScoreDate).add(1, "months").isAfter(moment())}
+														onClick={() => setMonthlyOverallScoreDate((prev) => moment(prev).add(1, "months").toDate())}
+														className="disabled:text-neutral-200">
+														<BsChevronRight />
+													</button>
+												)}
+												<button onClick={() => setMonthlyOverallScoreDate(new Date())}>
+													<BsArrowClockwise />
+												</button>
 											</div>
-										))}
+										</div>
+										<div className="w-full grid grid-cols-3 gap-4 items-center">
+											{[...Array(31).keys()].map((day) => {
+												const date = moment(
+													`${(day + 1).toString().padStart(2, "0")}/${
+														moment(monthlyOverallScoreDate).get("month") + 1
+													}/${moment(monthlyOverallScoreDate).get("year")}`,
+													"DD/MM/yyyy",
+												);
+
+												return date.isValid() && date.isSameOrBefore(moment()) ? (
+													<div
+														key={day}
+														className="flex flex-col gap-1 items-start border border-mti-gray-smoke rounded-lg overflow-hidden">
+														<span className="bg-mti-purple-ultralight w-full px-2 py-1 font-semibold">
+															Day {(day + 1).toString().padStart(2, "0")}
+														</span>
+														<span className="px-2">
+															Level{" "}
+															{calculateTotalScore(stats.filter((s) => timestampToMoment(s).isBefore(date))).toFixed(1)}
+														</span>
+													</div>
+												) : null;
+											})}
+										</div>
+									</div>
+
+									{/* Overall Level per Month Graph */}
+									<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-[420px]">
+										<div className="flex flex-col gap-2 w-full">
+											<span className="text-sm font-bold">Overall Level per Month</span>
+											<div className="flex gap-2 items-center">
+												{monthlyOverallScoreDate && (
+													<button
+														onClick={() =>
+															setMonthlyOverallScoreDate((prev) => moment(prev).subtract(1, "months").toDate())
+														}>
+														<BsChevronLeft />
+													</button>
+												)}
+												<DatePicker
+													dateFormat="MMMM yyyy"
+													className="border border-mti-gray-dim/40 px-2 py-1.5 rounded-lg text-center w-[200px]"
+													minDate={initialStatDate}
+													maxDate={new Date()}
+													selected={monthlyOverallScoreDate}
+													showMonthYearPicker
+													onChange={setMonthlyOverallScoreDate}
+												/>
+												{monthlyOverallScoreDate && (
+													<button
+														disabled={moment(monthlyOverallScoreDate).add(1, "months").isAfter(moment())}
+														onClick={() => setMonthlyOverallScoreDate((prev) => moment(prev).add(1, "months").toDate())}
+														className="disabled:text-neutral-200">
+														<BsChevronRight />
+													</button>
+												)}
+												<button onClick={() => setMonthlyOverallScoreDate(new Date())}>
+													<BsArrowClockwise />
+												</button>
+											</div>
+										</div>
+										<Chart
+											type="line"
+											options={{
+												scales: {
+													y: {
+														min: 0,
+														max: 9,
+													},
+												},
+											}}
+											data={{
+												labels: [...Array(31).keys()]
+													.map((day) => {
+														const date = moment(
+															`${(day + 1).toString().padStart(2, "0")}/${
+																moment(monthlyOverallScoreDate).get("month") + 1
+															}/${moment(monthlyOverallScoreDate).get("year")}`,
+															"DD/MM/yyyy",
+														);
+														return date.isValid() ? (day + 1).toString().padStart(2, "0") : undefined;
+													})
+													.filter((x) => !!x),
+												datasets: [
+													{
+														type: "line",
+														label: "Total",
+														fill: false,
+														borderColor: "#6A5FB1",
+														backgroundColor: "#7872BF",
+														borderWidth: 2,
+														spanGaps: true,
+														data: [...Array(31).keys()]
+															.map((day) => {
+																const date = moment(
+																	`${(day + 1).toString().padStart(2, "0")}/${
+																		moment(monthlyOverallScoreDate).get("month") + 1
+																	}/${moment(monthlyOverallScoreDate).get("year")}`,
+																	"DD/MM/yyyy",
+																);
+
+																return date.isValid()
+																	? calculateTotalScore(
+																			stats.filter((s) => timestampToMoment(s).isBefore(date)),
+																	  ).toFixed(1)
+																	: undefined;
+															})
+															.filter((x) => !!x),
+													},
+												],
+											}}
+										/>
+									</div>
+
+									{/* Module Level per Day */}
+									<div className="flex flex-col gap-8 border w-full h-fit md:h-[420px] md:max-w-xs border-mti-gray-platinum p-4 pb-12 rounded-xl">
+										<div className="flex flex-col gap-2 w-full">
+											<span className="text-sm font-bold">Module Level per Day</span>
+											<div className="flex gap-2 items-center">
+												{monthlyModuleScoreDate && (
+													<button
+														onClick={() =>
+															setMonthlyModuleScoreDate((prev) => moment(prev).subtract(1, "days").toDate())
+														}>
+														<BsChevronLeft />
+													</button>
+												)}
+												<DatePicker
+													dateFormat="dd MMMM yyyy"
+													className="border border-mti-gray-dim/40 px-2 py-1.5 rounded-lg text-center w-[200px]"
+													minDate={initialStatDate}
+													maxDate={new Date()}
+													selected={monthlyModuleScoreDate}
+													onChange={setMonthlyModuleScoreDate}
+												/>
+												{monthlyModuleScoreDate && (
+													<button
+														disabled={moment(monthlyModuleScoreDate).add(1, "days").isAfter(moment())}
+														onClick={() => setMonthlyModuleScoreDate((prev) => moment(prev).add(1, "days").toDate())}
+														className="disabled:text-neutral-200">
+														<BsChevronRight />
+													</button>
+												)}
+												<button onClick={() => setMonthlyModuleScoreDate(new Date())}>
+													<BsArrowClockwise />
+												</button>
+											</div>
+										</div>
+										<div className="flex flex-col gap-4">
+											{calculateModuleScore(stats.filter((s) => timestampToMoment(s).isBefore(moment(monthlyModuleScoreDate))))
+												.sort(sortByModule)
+												.map(({module, score}) => (
+													<div className="flex flex-col gap-2" key={module}>
+														<div className="flex justify-between items-end">
+															<span className="text-xs">
+																<span className="font-medium">{score}</span> of <span className="font-medium">9</span>
+															</span>
+															<span className="text-xs">{capitalize(module)}</span>
+														</div>
+														<ProgressBar
+															color={module as Module}
+															percentage={(score * 100) / 9}
+															label=""
+															className="h-3"
+														/>
+													</div>
+												))}
+										</div>
 									</div>
 								</div>
 
-								{/* Module Score */}
-								<div className="flex flex-col gap-10 border w-full h-fit md:h-96 md: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">
-										{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"
+								<Divider />
+
+								<div className="flex -md:flex-col -md:items-center gap-4 flex-wrap">
+									{/* Module Level per Exam */}
+									<div className="flex flex-col items-center gap-4 border w-full h-[420px] overflow-y-scroll scrollbar-hide md:max-w-sm border-mti-gray-platinum p-4 pb-12 rounded-xl">
+										<div className="flex flex-col gap-2 w-full">
+											<span className="text-sm font-bold">Module Level per Exam</span>
+											<div className="flex gap-2 items-center">
+												{dailyScoreDate && (
+													<button onClick={() => setDailyScoreDate((prev) => moment(prev).subtract(1, "days").toDate())}>
+														<BsChevronLeft />
+													</button>
+												)}
+												<DatePicker
+													dateFormat="dd MMMM yyyy"
+													className="border border-mti-gray-dim/40 px-2 py-1.5 rounded-lg text-center w-[200px]"
+													minDate={initialStatDate}
+													maxDate={new Date()}
+													selected={dailyScoreDate}
+													onChange={setDailyScoreDate}
 												/>
+												{dailyScoreDate && (
+													<button
+														disabled={moment(dailyScoreDate).add(1, "days").isAfter(moment())}
+														onClick={() => setDailyScoreDate((prev) => moment(prev).add(1, "days").toDate())}
+														className="disabled:text-neutral-200">
+														<BsChevronRight />
+													</button>
+												)}
+												<button onClick={() => setDailyScoreDate(new Date())}>
+													<BsArrowClockwise />
+												</button>
 											</div>
-										))}
+										</div>
+
+										<div className="w-full grid grid-cols-1 gap-6 items-center">
+											{Object.keys(
+												groupBySession(
+													stats.filter(
+														(s) =>
+															Math.abs(timestampToMoment(s).diff(moment(dailyScoreDate), "days")) === 0 &&
+															timestampToMoment(s).day() === moment(dailyScoreDate).day(),
+													),
+												),
+											).length === 0 && <span className="font-semibold ml-1">No exams performed this day...</span>}
+
+											{Object.keys(
+												groupBySession(
+													stats.filter(
+														(s) =>
+															Math.abs(timestampToMoment(s).diff(moment(dailyScoreDate), "days")) === 0 &&
+															timestampToMoment(s).day() === moment(dailyScoreDate).day(),
+													),
+												),
+											).map((session, index) => (
+												<div key={index} className="flex flex-col gap-2 items-start rounded-lg overflow-hidden">
+													<span className="bg-mti-purple-ultralight w-full px-2 py-1 font-semibold">
+														Exam {(index + 1).toString().padStart(2, "0")}
+													</span>
+													<div className="flex justify-between w-full">
+														{MODULE_ARRAY.map((module) => {
+															const score = calculateScorePerModule(
+																groupBySession(
+																	stats.filter(
+																		(s) =>
+																			Math.abs(timestampToMoment(s).diff(moment(dailyScoreDate), "days")) === 0,
+																	),
+																)[session],
+																module,
+															);
+
+															return score === -1 ? null : <Badge module={module}>{score.toFixed(1)}</Badge>;
+														}).filter((m) => !!m)}
+													</div>
+												</div>
+											))}
+										</div>
+									</div>
+
+									<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-[420px]">
+										<div className="flex flex-col gap-2 w-full mb-2">
+											<span className="text-sm font-bold">Module Level per Exam</span>
+											<div className="flex gap-2 items-center">
+												{dailyScoreDate && (
+													<button onClick={() => setDailyScoreDate((prev) => moment(prev).subtract(1, "days").toDate())}>
+														<BsChevronLeft />
+													</button>
+												)}
+												<DatePicker
+													dateFormat="dd MMMM yyyy"
+													className="border border-mti-gray-dim/40 px-2 py-1.5 rounded-lg text-center w-[200px]"
+													minDate={initialStatDate}
+													maxDate={new Date()}
+													selected={dailyScoreDate}
+													onChange={setDailyScoreDate}
+												/>
+												{dailyScoreDate && (
+													<button
+														disabled={moment(dailyScoreDate).add(1, "days").isAfter(moment())}
+														onClick={() => setDailyScoreDate((prev) => moment(prev).add(1, "days").toDate())}
+														className="disabled:text-neutral-200">
+														<BsChevronRight />
+													</button>
+												)}
+												<button onClick={() => setDailyScoreDate(new Date())}>
+													<BsArrowClockwise />
+												</button>
+											</div>
+										</div>
+										<Chart
+											type="line"
+											options={{
+												scales: {
+													y: {
+														min: 0,
+														max: 9,
+													},
+												},
+											}}
+											data={{
+												labels: Object.keys(
+													groupBySession(
+														stats.filter(
+															(s) =>
+																Math.abs(timestampToMoment(s).diff(moment(dailyScoreDate), "days")) === 0 &&
+																timestampToMoment(s).day() === moment(dailyScoreDate).day(),
+														),
+													),
+												).map((_, index) => `Exam ${(index + 1).toString().padStart(2, "0")}`),
+												datasets: [
+													...MODULE_ARRAY.map((module, index) => ({
+														type: "line" as const,
+														label: capitalize(module),
+														borderColor: COLORS[index],
+														backgroundColor: COLORS[index],
+														borderWidth: 2,
+														data: calculateModularScorePerSession(
+															stats.filter(
+																(s) =>
+																	Math.abs(timestampToMoment(s).diff(moment(dailyScoreDate), "days")) === 0 &&
+																	timestampToMoment(s).day() === moment(dailyScoreDate).day(),
+															),
+															module,
+														),
+													})),
+												],
+											}}
+										/>
 									</div>
 								</div>
 
-								{/* Total Score Band per Session */}
-								<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96">
-									<span className="text-sm font-bold">Total Score Band per Session</span>
-									<Chart
-										type="line"
-										data={{
-											labels: Object.keys(groupBySession(displayStats)).map((_, index) => index),
-											datasets: [
-												{
-													type: "line",
-													label: "Total",
-													fill: false,
-													borderColor: "#6A5FB1",
-													backgroundColor: "#7872BF",
-													borderWidth: 2,
-													spanGaps: true,
-													data: calculateTotalScorePerSession(),
-												},
-											],
-										}}
-									/>
-								</div>
+								<Divider />
 
-								{/* Module Score Band per Session */}
-								<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96">
-									<span className="text-sm font-bold">Module Score Band per Session</span>
-									<Chart
-										type="line"
-										data={{
-											labels: Object.keys(groupBySession(displayStats)).map((_, index) => index),
-											datasets: [
-												...MODULE_ARRAY.map((module, index) => ({
-													type: "line" as const,
-													label: capitalize(module),
-													borderColor: COLORS[index],
-													backgroundColor: COLORS[index],
-													borderWidth: 2,
-													data: calculateModularScorePerSession(module),
-												})),
-											],
+								<div className="w-full flex flex-col gap-4">
+									<DatePicker
+										dateFormat="dd/MM/yyyy"
+										className="border border-mti-gray-dim/40 px-4 py-2 rounded-lg text-center w-80"
+										startDate={startDate}
+										endDate={endDate}
+										selectsRange
+										showMonthDropdown
+										filterDate={(date) => moment(date).isSameOrBefore(moment(new Date()))}
+										onChange={([initialDate, finalDate]) => {
+											setStartDate(initialDate);
+											setEndDate(finalDate);
 										}}
 									/>
-								</div>
+									<div className="flex -md:flex-col -md:items-center gap-4 flex-wrap">
+										{/* Reading Score Band in Interval */}
+										<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96">
+											<span className="text-sm font-bold">Reading Score Band in Interval</span>
+											<Chart
+												options={{
+													scales: {
+														y: {
+															min: 0,
+															max: 9,
+														},
+													},
+												}}
+												type="line"
+												data={{
+													labels: intervalDates.map((date) => moment(date).format("DD/MM/YYYY")),
+													datasets: [
+														{
+															type: "line",
+															label: "Reading",
+															fill: false,
+															borderColor: COLORS[0],
+															backgroundColor: COLORS[0],
+															borderWidth: 2,
+															spanGaps: true,
+															data: intervalDates.map((date) => {
+																return calculateTotalScore(
+																	stats.filter(
+																		(s) => timestampToMoment(s).isBefore(date) && s.module === "reading",
+																	),
+																).toFixed(1);
+															}),
+														},
+													],
+												}}
+											/>
+										</div>
 
-								{/* Average Time per Module */}
-								<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96">
-									<span className="text-sm font-bold">Average Time per Module (in Minutes)</span>
-									<Chart
-										type="line"
-										data={{
-											labels: Object.keys(groupBySession(displayStats.filter((s) => !!s.timeSpent))).map((_, index) => index),
-											datasets: [
-												{
-													type: "line",
-													label: "Average (in minutes)",
-													fill: false,
-													borderColor: "#6A5FB1",
-													backgroundColor: "#7872BF",
-													borderWidth: 2,
-													spanGaps: true,
-													data: calculateAverageTimePerModule(),
-												},
-											],
-										}}
-									/>
+										{/* Listening Score Band in Interval */}
+										<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96">
+											<span className="text-sm font-bold">Listening Score Band in Interval</span>
+											<Chart
+												options={{
+													scales: {
+														y: {
+															min: 0,
+															max: 9,
+														},
+													},
+												}}
+												type="line"
+												data={{
+													labels: intervalDates.map((date) => moment(date).format("DD/MM/YYYY")),
+													datasets: [
+														{
+															type: "line",
+															label: "Listening",
+															fill: false,
+															borderColor: COLORS[1],
+															backgroundColor: COLORS[1],
+															borderWidth: 2,
+															spanGaps: true,
+															data: intervalDates.map((date) => {
+																return calculateTotalScore(
+																	stats.filter(
+																		(s) => timestampToMoment(s).isBefore(date) && s.module === "listening",
+																	),
+																).toFixed(1);
+															}),
+														},
+													],
+												}}
+											/>
+										</div>
+
+										{/* Writing Score Band in Interval */}
+										<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96">
+											<span className="text-sm font-bold">Writing Score Band in Interval</span>
+											<Chart
+												options={{
+													scales: {
+														y: {
+															min: 0,
+															max: 9,
+														},
+													},
+												}}
+												type="line"
+												data={{
+													labels: intervalDates.map((date) => moment(date).format("DD/MM/YYYY")),
+													datasets: [
+														{
+															type: "line",
+															label: "Writing",
+															fill: false,
+															borderColor: COLORS[2],
+															backgroundColor: COLORS[2],
+															borderWidth: 2,
+															spanGaps: true,
+															data: intervalDates.map((date) => {
+																return calculateTotalScore(
+																	stats.filter(
+																		(s) => timestampToMoment(s).isBefore(date) && s.module === "writing",
+																	),
+																).toFixed(1);
+															}),
+														},
+													],
+												}}
+											/>
+										</div>
+
+										{/* Speaking Score Band in Interval */}
+										<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96">
+											<span className="text-sm font-bold">Speaking Score Band in Interval</span>
+											<Chart
+												options={{
+													scales: {
+														y: {
+															min: 0,
+															max: 9,
+														},
+													},
+												}}
+												type="line"
+												data={{
+													labels: intervalDates.map((date) => moment(date).format("DD/MM/YYYY")),
+													datasets: [
+														{
+															type: "line",
+															label: "Speaking",
+															fill: false,
+															borderColor: COLORS[3],
+															backgroundColor: COLORS[3],
+															borderWidth: 2,
+															spanGaps: true,
+															data: intervalDates.map((date) => {
+																return calculateTotalScore(
+																	stats.filter(
+																		(s) => timestampToMoment(s).isBefore(date) && s.module === "speaking",
+																	),
+																).toFixed(1);
+															}),
+														},
+													],
+												}}
+											/>
+										</div>
+
+										{/* Level Score Band in Interval */}
+										<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96">
+											<span className="text-sm font-bold">Level Score Band in Interval</span>
+											<Chart
+												options={{
+													scales: {
+														y: {
+															min: 0,
+															max: 9,
+														},
+													},
+												}}
+												type="line"
+												data={{
+													labels: intervalDates.map((date) => moment(date).format("DD/MM/YYYY")),
+													datasets: [
+														{
+															type: "line",
+															label: "Level",
+															fill: false,
+															borderColor: COLORS[4],
+															backgroundColor: COLORS[4],
+															borderWidth: 2,
+															spanGaps: true,
+															data: intervalDates.map((date) => {
+																return calculateTotalScore(
+																	stats.filter((s) => timestampToMoment(s).isBefore(date) && s.module === "level"),
+																).toFixed(1);
+															}),
+														},
+													],
+												}}
+											/>
+										</div>
+									</div>
 								</div>
-							</div>
+							</>
 						)}
 					</section>
-					{displayStats.length === 0 && (
+					{stats.length === 0 && (
 						<section className="flex flex-col gap-3">
 							<span className="font-semibold ml-1">No stats to display...</span>
 						</section>