Created a simple "assignment" dashboard for teachers

src/dashboards/Teacher.tsx

@@ -9,9 +9,14 @@ import moment from "moment";
 import {useEffect, useState} from "react";
 import {
 	BsArrowLeft,
+	BsArrowRepeat,
 	BsClipboard2Data,
 	BsClipboard2DataFill,
+	BsClipboard2Heart,
+	BsClipboard2X,
+	BsClipboardPulse,
 	BsClock,
+	BsEnvelopePaper,
 	BsGlobeCentralSouthAsia,
 	BsPaperclip,
 	BsPerson,
@@ -20,6 +25,9 @@ import {
 	BsPersonFillGear,
 	BsPersonGear,
 	BsPersonLinesFill,
+	BsPlus,
+	BsRepeat,
+	BsRepeat1,
 } from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
@@ -29,6 +37,12 @@ import {Module} from "@/interfaces";
 import {groupByExam} from "@/utils/stats";
 import IconCard from "./IconCard";
 import GroupList from "@/pages/(admin)/Lists/GroupList";
+import useAssignments from "@/hooks/useAssignments";
+import {Assignment} from "@/interfaces/results";
+import AssignmentCard from "./AssignmentCard";
+import Button from "@/components/Low/Button";
+import clsx from "clsx";
+import ProgressBar from "@/components/Low/ProgressBar";
 
 interface Props {
 	user: User;
@@ -38,10 +52,12 @@ export default function TeacherDashboard({user}: Props) {
 	const [page, setPage] = useState("");
 	const [selectedUser, setSelectedUser] = useState<User>();
 	const [showModal, setShowModal] = useState(false);
+	const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
 
 	const {stats} = useStats();
 	const {users, reload} = useUsers();
 	const {groups} = useGroups(user.id);
+	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({assigner: user.id});
 
 	useEffect(() => {
 		setShowModal(!!selectedUser && page === "");
@@ -125,6 +141,74 @@ export default function TeacherDashboard({user}: Props) {
 		return calculateAverageLevel(levels);
 	};
 
+	const AssignmentsPage = () => {
+		const activeFilter = (a: Assignment) => moment(a.endDate).isAfter(moment()) && moment(a.startDate).isBefore(moment());
+		const pastFilter = (a: Assignment) => moment(a.endDate).isBefore(moment());
+		const futureFilter = (a: Assignment) => moment(a.startDate).isAfter(moment());
+
+		return (
+			<>
+				<Modal isOpen={!!selectedAssignment} onClose={() => setSelectedAssignment(undefined)} title={selectedAssignment?.name}>
+					<div className="mt-4 flex flex-col w-full">
+						<ProgressBar
+							color="purple"
+							label={`${selectedAssignment?.results.length}/${selectedAssignment?.assignees.length}`}
+							className="h-6"
+							textClassName={
+								(selectedAssignment?.results.length || 0) / (selectedAssignment?.assignees.length || 1) < 0.5
+									? "!text-mti-gray-dim font-light"
+									: "text-white"
+							}
+							percentage={((selectedAssignment?.results.length || 0) / (selectedAssignment?.assignees.length || 1)) * 100}
+						/>
+					</div>
+				</Modal>
+				<div className="w-full flex justify-between items-center">
+					<div
+						onClick={() => setPage("")}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<div
+						onClick={reloadAssignments}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<span>Reload</span>
+						<BsArrowRepeat className={clsx("text-xl", isAssignmentsLoading && "animate-spin")} />
+					</div>
+				</div>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Active Assignments ({assignments.filter(activeFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						{assignments.filter(activeFilter).map((a) => (
+							<AssignmentCard {...a} onClick={() => setSelectedAssignment(a)} key={a.id} />
+						))}
+					</div>
+				</section>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Planned Assignments ({assignments.filter(futureFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						<div className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300">
+							<BsPlus className="text-6xl" />
+							<span className="text-lg">New Assignment</span>
+						</div>
+						{assignments.filter(futureFilter).map((a) => (
+							<AssignmentCard {...a} onClick={() => setSelectedAssignment(a)} key={a.id} />
+						))}
+					</div>
+				</section>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Past Assignments ({assignments.filter(pastFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						{assignments.filter(pastFilter).map((a) => (
+							<AssignmentCard {...a} onClick={() => setSelectedAssignment(a)} key={a.id} />
+						))}
+					</div>
+				</section>
+			</>
+		);
+	};
+
 	const DefaultDashboard = () => (
 		<>
 			<section className="flex -lg:flex-wrap gap-4 items-center -lg:justify-center lg:justify-start text-center">
@@ -148,6 +232,15 @@ export default function TeacherDashboard({user}: Props) {
 					color="purple"
 				/>
 				<IconCard Icon={BsPersonAdd} label="Groups" value={groups.length} color="purple" onClick={() => setPage("groups")} />
+				<div
+					onClick={() => setPage("assignments")}
+					className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-96 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
+					<BsEnvelopePaper className="text-6xl text-mti-purple-light" />
+					<span className="flex flex-col gap-1 items-center text-xl">
+						<span className="text-lg">Assignments</span>
+						<span className="font-semibold text-mti-purple-light">{assignments.length}</span>
+					</span>
+				</div>
 			</section>
 
 			<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full justify-between">
@@ -214,6 +307,7 @@ export default function TeacherDashboard({user}: Props) {
 			</Modal>
 			{page === "students" && <StudentsList />}
 			{page === "groups" && <GroupsList />}
+			{page === "assignments" && <AssignmentsPage />}
 			{page === "" && <DefaultDashboard />}
 		</>
 	);