Created a simple "assignment" dashboard for teachers

2023-11-05 14:53:54 +00:00
parent 37baa11987
commit 40f095191a
9 changed files with 277 additions and 3 deletions
--- a/src/dashboards/AssignmentCard.tsx
+++ b/src/dashboards/AssignmentCard.tsx
@@ -0,0 +1,73 @@
+import ProgressBar from "@/components/Low/ProgressBar";
+import useUsers from "@/hooks/useUsers";
+import {Module} from "@/interfaces";
+import {Assignment} from "@/interfaces/results";
+import {Stat} from "@/interfaces/user";
+import {calculateBandScore} from "@/utils/score";
+import clsx from "clsx";
+import moment from "moment";
+import {useState} from "react";
+import {BsBook, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
+
+interface Props {
+	onClick?: () => void;
+}
+
+export default function AssignmentCard({id, name, assigner, startDate, endDate, assignees, results, exams, onClick}: Assignment & Props) {
+	const {users} = useUsers();
+
+	const calculateAverageModuleScore = (module: Module) => {
+		const resultModuleBandScores = results.map((r) => {
+			const moduleStats = r.stats.filter((s) => s.module === module);
+
+			const correct = moduleStats.reduce((acc, curr) => acc + curr.score.correct, 0);
+			const total = moduleStats.reduce((acc, curr) => acc + curr.score.total, 0);
+			return calculateBandScore(correct, total, module, r.type);
+		});
+
+		return resultModuleBandScores.length === 0 ? -1 : resultModuleBandScores.reduce((acc, curr) => acc + curr, 0) / results.length;
+	};
+
+	return (
+		<div
+			onClick={onClick}
+			className="w-[350px] h-fit flex flex-col gap-6 bg-white border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300">
+			<div className="flex flex-col gap-3">
+				<h3 className="font-semibold text-xl">{name}</h3>
+				<ProgressBar
+					color={results.length / assignees.length < 0.5 ? "red" : "purple"}
+					percentage={(results.length / assignees.length) * 100}
+					label={`${results.length}/${assignees.length}`}
+					className="h-5"
+					textClassName={results.length / assignees.length < 0.5 ? "!text-mti-gray-dim font-light" : "text-white"}
+				/>
+			</div>
+			<span className="flex gap-1 justify-between">
+				<span>{moment(startDate).format("DD/MM/YY, hh:mm")}</span>
+				<span>-</span>
+				<span>{moment(endDate).format("DD/MM/YY, hh:mm")}</span>
+			</span>
+			<div className="grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2">
+				{exams.map(({module}) => (
+					<div
+						key={module}
+						className={clsx(
+							"flex gap-2 items-center w-fit text-white -md:px-4 xl:px-4 md:px-2 py-2 rounded-xl",
+							module === "reading" && "bg-ielts-reading",
+							module === "listening" && "bg-ielts-listening",
+							module === "writing" && "bg-ielts-writing",
+							module === "speaking" && "bg-ielts-speaking",
+						)}>
+						{module === "reading" && <BsBook className="w-4 h-4" />}
+						{module === "listening" && <BsHeadphones className="w-4 h-4" />}
+						{module === "writing" && <BsPen className="w-4 h-4" />}
+						{module === "speaking" && <BsMegaphone className="w-4 h-4" />}
+						{calculateAverageModuleScore(module) > -1 && (
+							<span className="text-sm">{calculateAverageModuleScore(module).toFixed(1)}</span>
+						)}
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}