Added the timeSpent to the stats

src/interfaces/user.ts

@@ -45,6 +45,7 @@ export interface Stat {
 	module: Module;
 	solutions: any[];
 	type: string;
+	timeSpent?: number;
 	score: {
 		correct: number;
 		total: number;

src/pages/exam.tsx

@@ -74,6 +74,7 @@ export default function Page() {
 	const [isEvaluationLoading, setIsEvaluationLoading] = useState(false);
 	const [showAbandonPopup, setShowAbandonPopup] = useState(false);
 	const [avoidRepeated, setAvoidRepeated] = useState(false);
+	const [timeSpent, setTimeSpent] = useState(0);
 
 	const [exams, setExams] = useExamStore((state) => [state.exams, state.setExams]);
 	const [userSolutions, setUserSolutions] = useExamStore((state) => [state.userSolutions, state.setUserSolutions]);
@@ -85,6 +86,20 @@ export default function Page() {
 
 	useEffect(() => setSessionId(uuidv4()), []);
 
+	useEffect(() => {
+		selectedModules.length > 0 && timeSpent === 0 && !showSolutions;
+		if (selectedModules.length > 0 && timeSpent === 0 && !showSolutions) {
+			const timerInterval = setInterval(() => {
+				setTimeSpent((prev) => prev + 1);
+			}, 1000);
+
+			return () => {
+				clearInterval(timerInterval);
+			};
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [selectedModules.length]);
+
 	useEffect(() => {
 		(async () => {
 			if (selectedModules.length > 0 && exams.length > 0 && moduleIndex < selectedModules.length) {
@@ -116,6 +131,7 @@ export default function Page() {
 		if (selectedModules.length > 0 && exams.length !== 0 && moduleIndex >= selectedModules.length && !hasBeenUploaded && !showSolutions) {
 			const newStats: Stat[] = userSolutions.map((solution) => ({
 				...solution,
+				timeSpent,
 				session: sessionId,
 				exam: solution.exam!,
 				module: solution.module!,

src/pages/exercises.tsx

@@ -77,6 +77,7 @@ export default function Page() {
 	const [isEvaluationLoading, setIsEvaluationLoading] = useState(false);
 	const [showAbandonPopup, setShowAbandonPopup] = useState(false);
 	const [avoidRepeated, setAvoidRepeated] = useState(false);
+	const [timeSpent, setTimeSpent] = useState(0);
 
 	const [exams, setExams] = useExamStore((state) => [state.exams, state.setExams]);
 	const [userSolutions, setUserSolutions] = useExamStore((state) => [state.userSolutions, state.setUserSolutions]);
@@ -89,6 +90,19 @@ export default function Page() {
 	useEffect(() => console.log({examId: exam?.id, exam}), [exam]);
 	useEffect(() => setSessionId(uuidv4()), []);
 
+	useEffect(() => {
+		if (selectedModules.length > 0 && timeSpent === 0 && !showSolutions) {
+			const timerInterval = setInterval(() => {
+				setTimeSpent((prev) => prev + 1);
+			}, 1000);
+
+			return () => {
+				clearInterval(timerInterval);
+			};
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [selectedModules.length]);
+
 	useEffect(() => {
 		(async () => {
 			if (selectedModules.length > 0 && exams.length > 0 && moduleIndex < selectedModules.length) {
@@ -120,6 +134,7 @@ export default function Page() {
 		if (selectedModules.length > 0 && exams.length !== 0 && moduleIndex >= selectedModules.length && !hasBeenUploaded && !showSolutions) {
 			const newStats: Stat[] = userSolutions.map((solution) => ({
 				...solution,
+				timeSpent,
 				session: sessionId,
 				exam: solution.exam!,
 				module: solution.module!,

src/pages/record.tsx

@@ -153,6 +153,8 @@ export default function History({user}: {user: User}) {
 			level: calculateBandScore(x.correct, x.total, x.module, user.focus),
 		}));
 
+		const timeSpent = dateStats[0].timeSpent;
+
 		const selectExam = () => {
 			const examPromises = uniqBy(dateStats, "exam").map((stat) => getExamById(stat.module, stat.exam));
 
@@ -184,7 +186,14 @@ export default function History({user}: {user: User}) {
 				onClick={selectExam}
 				role="button">
 				<div className="w-full flex justify-between items-center">
+					<div className="flex gap-2 items-center">
 						<span className="font-medium">{formatTimestamp(timestamp)}</span>
+						{timeSpent && (
+							<>
+								• <span className="text-sm">{Math.floor(timeSpent / 60)} minutes</span>
+							</>
+						)}
+					</div>
 					<span
 						className={clsx(
 							correct / total >= 0.7 && "text-mti-purple",

src/pages/stats.tsx

@@ -20,7 +20,6 @@ import useUsers from "@/hooks/useUsers";
 import Select from "react-select";
 import useGroups from "@/hooks/useGroups";
 import DatePicker from "react-datepicker";
-import moment from "moment";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
 
 ChartJS.register(LinearScale, CategoryScale, PointElement, LineElement, LineController, Legend, Tooltip);
@@ -104,6 +103,18 @@ export default function Stats() {
 		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 groupedBySession = groupBySession(stats);
 		const sessionAverage = Object.keys(groupedBySession).map((x: string) => {
@@ -185,7 +196,6 @@ export default function Stats() {
 							</div>
 						</div>
 					</section>
-					{stats.length > 0 && (
 					<section className="flex flex-col gap-3">
 						<div className="w-full flex justify-between gap-8 items-center">
 							<>
@@ -234,6 +244,8 @@ export default function Stats() {
 									}}
 								/> */}
 						</div>
+
+						{stats.length > 0 && (
 							<div className="flex gap-4 flex-wrap">
 								{/* Exams per module */}
 								<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">
@@ -326,9 +338,32 @@ export default function Stats() {
 										}}
 									/>
 								</div>
+
+								{/* Average Time per Module */}
+								<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">Average Time per Module (in Minutes)</span>
+									<Chart
+										type="line"
+										data={{
+											labels: Object.keys(groupBySession(stats.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(),
+												},
+											],
+										}}
+									/>
+								</div>
 							</div>
-						</section>
 						)}
+					</section>
 					{stats.length === 0 && (
 						<section className="flex flex-col gap-3">
 							<span className="font-semibold ml-1">No stats to display...</span>