Added a new feature to check for and register inactivity during an exam

src/exams/Finish.tsx

@@ -9,10 +9,21 @@ import clsx from "clsx";
 import Link from "next/link";
 import {useRouter} from "next/router";
 import {Fragment, useEffect, useState} from "react";
-import {BsArrowCounterclockwise, BsBook, BsClipboard, BsEyeFill, BsHeadphones, BsMegaphone, BsPen, BsShareFill} from "react-icons/bs";
+import {
+	BsArrowCounterclockwise,
+	BsBook,
+	BsClipboard,
+	BsClipboardFill,
+	BsEyeFill,
+	BsHeadphones,
+	BsMegaphone,
+	BsPen,
+	BsShareFill,
+} from "react-icons/bs";
 import {LevelScore} from "@/constants/ielts";
 import {getLevelScore} from "@/utils/score";
 import {capitalize} from "lodash";
+import Modal from "@/components/Modal";
 
 interface Score {
 	module: Module;
@@ -25,13 +36,18 @@ interface Props {
 	user: User;
 	modules: Module[];
 	scores: Score[];
+	information: {
+		timeSpent?: number;
+		inactivity?: number;
+	};
 	isLoading: boolean;
 	onViewResults: (moduleIndex?: number) => void;
 }
 
-export default function Finish({user, scores, modules, isLoading, onViewResults}: Props) {
+export default function Finish({user, scores, modules, information, isLoading, onViewResults}: Props) {
 	const [selectedModule, setSelectedModule] = useState(modules[0]);
 	const [selectedScore, setSelectedScore] = useState<Score>(scores.find((x) => x.module === modules[0])!);
+	const [isExtraInformationOpen, setIsExtraInformationOpen] = useState(false);
 
 	const exams = useExamStore((state) => state.exams);
 
@@ -86,6 +102,21 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
 
 	return (
 		<>
+			<Modal title="Extra Information" isOpen={isExtraInformationOpen} onClose={() => setIsExtraInformationOpen(false)}>
+				<div className="flex flex-col gap-2 mt-4">
+					{!!information.timeSpent && (
+						<span>
+							<b>Time Spent:</b> {Math.floor(information.timeSpent / 60)} minute(s)
+						</span>
+					)}
+					{!!information.inactivity && (
+						<span>
+							<b>Inactivity:</b> {Math.floor(information.inactivity / 60)} minute(s)
+						</span>
+					)}
+				</div>
+			</Modal>
+
 			<div className="flex h-fit min-h-full w-full flex-col items-center justify-between gap-8">
 				<ModuleTitle
 					module={selectedModule}
@@ -247,6 +278,16 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
 							</button>
 							<span>Review {capitalize(selectedModule)}</span>
 						</div>
+						{(!!information.inactivity || !!information.timeSpent) && (
+							<div className="flex w-fit cursor-pointer flex-col items-center gap-1">
+								<button
+									onClick={() => setIsExtraInformationOpen(true)}
+									className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out">
+									<BsClipboardFill className="h-7 w-7 text-white" />
+								</button>
+								<span>Extra Information</span>
+							</div>
+						)}
 					</div>
 
 					<Link href="/" className="w-full max-w-[200px] self-end">