Finished up a wizard to create Assignments

src/dashboards/AssignmentCard.tsx

@@ -43,9 +43,9 @@ export default function AssignmentCard({id, name, assigner, startDate, endDate,
 				/>
 			</div>
 			<span className="flex gap-1 justify-between">
-				<span>{moment(startDate).format("DD/MM/YY, hh:mm")}</span>
+				<span>{moment(startDate).format("DD/MM/YY, HH:mm")}</span>
 				<span>-</span>
-				<span>{moment(endDate).format("DD/MM/YY, hh:mm")}</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}) => (

src/dashboards/AssignmentCreator.tsx

@@ -0,0 +1,276 @@
+import Input from "@/components/Low/Input";
+import Modal from "@/components/Modal";
+import {Module} from "@/interfaces";
+import clsx from "clsx";
+import {useState} from "react";
+import {BsBook, BsCheckCircle, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
+import {generate} from "random-words";
+import {capitalize} from "lodash";
+import useUsers from "@/hooks/useUsers";
+import {Group, User} from "@/interfaces/user";
+import ProgressBar from "@/components/Low/ProgressBar";
+import {calculateAverageLevel} from "@/utils/score";
+import Button from "@/components/Low/Button";
+import ReactDatePicker from "react-datepicker";
+import moment from "moment";
+import axios from "axios";
+import {getExam} from "@/utils/exams";
+import {toast} from "react-toastify";
+import {uuidv4} from "@firebase/util";
+import {Assignment} from "@/interfaces/results";
+
+interface Props {
+	isCreating: boolean;
+	assigner: string;
+	users: User[];
+	groups: Group[];
+	assignment?: Assignment;
+	cancelCreation: () => void;
+}
+
+export default function AssignmentCreator({isCreating, assignment, assigner, groups, users, cancelCreation}: Props) {
+	const [selectedModules, setSelectedModules] = useState<Module[]>(assignment?.exams.map((e) => e.module) || []);
+	const [assignees, setAssignees] = useState<string[]>(assignment?.assignees || []);
+	const [name, setName] = useState(assignment?.name || generate({minLength: 6, maxLength: 8, min: 2, max: 3, join: " ", formatter: capitalize}));
+	const [isLoading, setIsLoading] = useState(false);
+	const [startDate, setStartDate] = useState<Date | null>(assignment ? moment(assignment.startDate).toDate() : new Date());
+	const [endDate, setEndDate] = useState<Date | null>(assignment ? moment(assignment.endDate).toDate() : moment().add(1, "week").toDate());
+
+	const toggleModule = (module: Module) => {
+		const modules = selectedModules.filter((x) => x !== module);
+		setSelectedModules((prev) => (prev.includes(module) ? modules : [...modules, module]));
+	};
+
+	const toggleAssignee = (user: User) => {
+		setAssignees((prev) => (prev.includes(user.id) ? prev.filter((a) => a !== user.id) : [...prev, user.id]));
+	};
+
+	const createAssignment = () => {
+		setIsLoading(true);
+
+		const examPromises = selectedModules.map(async (module) => getExam(module, false));
+		Promise.all(examPromises)
+			.then((exams) => {
+				(assignment ? axios.patch : axios.post)(`/api/assignments${assignment ? `/${assignment.id}` : ""}`, {
+					assigner,
+					assignees,
+					name,
+					startDate,
+					endDate,
+					results: [],
+					exams: exams.map((e) => ({module: e?.module, id: e?.id})),
+				})
+					.then(() => {
+						toast.success(`The assignment "${name}" has been ${assignment ? "updated" : "created"} successfully!`);
+						cancelCreation();
+					})
+					.catch((e) => {
+						console.log(e);
+						toast.error("Something went wrong, please try again later!");
+					})
+					.finally(() => setIsLoading(false));
+			})
+			.catch((e) => {
+				console.log(e);
+				toast.error("Something went wrong, please try again later!");
+				setIsLoading(false);
+			});
+	};
+
+	const deleteAssignment = () => {
+		if (assignment) {
+			setIsLoading(true);
+
+			if (!confirm(`Are you sure you want to delete the "${assignment.name}" assignment?`)) return;
+			axios
+				.delete(`api/assignments/${assignment.id}`)
+				.then(() => {
+					toast.success(`The assignment "${name}" has been deleted successfully!`);
+					cancelCreation();
+				})
+				.catch((e) => {
+					console.log(e);
+					toast.error("Something went wrong, please try again later!");
+				})
+				.finally(() => setIsLoading(false));
+		}
+	};
+
+	return (
+		<Modal isOpen={isCreating} onClose={cancelCreation} title="New Assignment">
+			<div className="w-full flex flex-col gap-4">
+				<section className="w-full grid grid-cols-4 -md:flex-col -md:items-center -md:gap-12 justify-between gap-8 mt-8 px-8">
+					<div
+						onClick={() => toggleModule("reading")}
+						className={clsx(
+							"w-fit relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+							selectedModules.includes("reading") ? "border-mti-purple-light" : "border-mti-gray-platinum",
+						)}>
+						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-reading top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+							<BsBook className="text-white w-7 h-7" />
+						</div>
+						<span className="ml-8 font-semibold">Reading</span>
+						{!selectedModules.includes("reading") && <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />}
+						{selectedModules.includes("reading") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
+					</div>
+					<div
+						onClick={() => toggleModule("listening")}
+						className={clsx(
+							"w-fit relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+							selectedModules.includes("listening") ? "border-mti-purple-light" : "border-mti-gray-platinum",
+						)}>
+						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-listening top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+							<BsHeadphones className="text-white w-7 h-7" />
+						</div>
+						<span className="ml-8 font-semibold">Listening</span>
+						{!selectedModules.includes("listening") && <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />}
+						{selectedModules.includes("listening") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
+					</div>
+					<div
+						onClick={() => toggleModule("writing")}
+						className={clsx(
+							"w-fit relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+							selectedModules.includes("writing") ? "border-mti-purple-light" : "border-mti-gray-platinum",
+						)}>
+						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-writing top-1/2 -translate-y-1/2 right-0 translate-x-1/2">
+							<BsPen className="text-white w-7 h-7" />
+						</div>
+						{!selectedModules.includes("writing") && <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />}
+						{selectedModules.includes("writing") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
+						<span className="mr-8 font-semibold">Writing</span>
+					</div>
+					<div
+						onClick={() => toggleModule("speaking")}
+						className={clsx(
+							"w-fit relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+							selectedModules.includes("speaking") ? "border-mti-purple-light" : "border-mti-gray-platinum",
+						)}>
+						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-speaking top-1/2 -translate-y-1/2 right-0 translate-x-1/2">
+							<BsMegaphone className="text-white w-7 h-7 -scale-x-100" />
+						</div>
+						{!selectedModules.includes("speaking") && <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />}
+						{selectedModules.includes("speaking") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
+						<span className="mr-8 font-semibold">Speaking</span>
+					</div>
+				</section>
+
+				<Input type="text" name="name" onChange={(e) => setName(e)} defaultValue={name} label="Assignment Name" required />
+
+				<div className="w-full grid grid-cols-2 gap-8">
+					<div className="flex flex-col gap-2">
+						<label className="font-normal text-base text-mti-gray-dim">Start Date *</label>
+						<ReactDatePicker
+							className={clsx(
+								"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+								"hover:border-mti-purple tooltip z-10",
+								"transition duration-300 ease-in-out",
+							)}
+							popperClassName="!z-20"
+							filterDate={(date) => moment(date).isAfter(new Date())}
+							dateFormat="dd/MM/yyyy HH:mm"
+							selected={startDate}
+							showTimeSelect
+							onChange={(date) => setStartDate(date)}
+						/>
+					</div>
+					<div className="flex flex-col gap-2">
+						<label className="font-normal text-base text-mti-gray-dim">End Date *</label>
+						<ReactDatePicker
+							className={clsx(
+								"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+								"hover:border-mti-purple tooltip z-10",
+								"transition duration-300 ease-in-out",
+							)}
+							popperClassName="!z-20"
+							filterDate={(date) => moment(date).isAfter(startDate)}
+							dateFormat="dd/MM/yyyy HH:mm"
+							selected={endDate}
+							showTimeSelect
+							onChange={(date) => setEndDate(date)}
+						/>
+					</div>
+				</div>
+
+				<section className="w-full flex flex-col gap-3">
+					<span className="font-semibold">Assignees ({assignees.length} selected)</span>
+					<div className="flex gap-4 overflow-x-scroll scrollbar-hide">
+						{groups.map((g) => (
+							<button
+								key={g.id}
+								onClick={() => {
+									const groupStudentIds = users.filter((u) => g.participants.includes(u.id)).map((u) => u.id);
+									if (groupStudentIds.every((u) => assignees.includes(u))) {
+										setAssignees((prev) => prev.filter((a) => !groupStudentIds.includes(a)));
+									} else {
+										setAssignees((prev) => [...prev.filter((a) => !groupStudentIds.includes(a)), ...groupStudentIds]);
+									}
+								}}
+								className={clsx(
+									"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+									"transition duration-300 ease-in-out",
+									users.filter((u) => g.participants.includes(u.id)).every((u) => assignees.includes(u.id)) &&
+										"!bg-mti-purple-light !text-white",
+								)}>
+								{g.name}
+							</button>
+						))}
+					</div>
+					<div className="flex flex-wrap gap-4">
+						{users.map((user) => (
+							<div
+								onClick={() => toggleAssignee(user)}
+								className={clsx(
+									"p-4 flex flex-col gap-2 rounded-xl border cursor-pointer w-72",
+									"transition ease-in-out duration-300",
+									assignees.includes(user.id) ? "border-mti-purple" : "border-mti-gray-platinum",
+								)}
+								key={user.id}>
+								<span className="flex flex-col gap-0 justify-center">
+									<span className="font-semibold">{user.name}</span>
+									<span className="text-sm opacity-80">{user.email}</span>
+								</span>
+								<ProgressBar
+									color="purple"
+									textClassName="!text-mti-black/80"
+									label={`Level ${calculateAverageLevel(user.levels)}`}
+									percentage={(calculateAverageLevel(user.levels) / 9) * 100}
+									className="h-6"
+								/>
+								<span className="text-mti-black/80 text-sm whitespace-pre-wrap mt-2">
+									Groups:{" "}
+									{groups
+										.filter((g) => g.participants.includes(user.id))
+										.map((g) => g.name)
+										.join(", ")}
+								</span>
+							</div>
+						))}
+					</div>
+				</section>
+				<div className="flex gap-4 w-full justify-end">
+					<Button className="w-full max-w-[200px]" variant="outline" onClick={cancelCreation} disabled={isLoading} isLoading={isLoading}>
+						Cancel
+					</Button>
+					{assignment && (
+						<Button
+							className="w-full max-w-[200px]"
+							color="red"
+							variant="outline"
+							onClick={deleteAssignment}
+							disabled={isLoading}
+							isLoading={isLoading}>
+							Delete
+						</Button>
+					)}
+					<Button
+						disabled={selectedModules.length === 0 || !name || !startDate || !endDate || assignees.length === 0}
+						className="w-full max-w-[200px]"
+						onClick={createAssignment}
+						isLoading={isLoading}>
+						{assignment ? "Update" : "Create"}
+					</Button>
+				</div>
+			</div>
+		</Modal>
+	);
+}

src/dashboards/Corporate.tsx

@@ -258,7 +258,7 @@ export default function CorporateDashboard({user}: Props) {
 									selectedUser.type === "corporate" || selectedUser.type === "teacher" ? () => setPage("students") : undefined
 								}
 								onViewTeachers={selectedUser.type === "corporate" ? () => setPage("teachers") : undefined}
-								{...selectedUser}
+								user={selectedUser}
 							/>
 						</div>
 					)}

src/dashboards/Owner.tsx

@@ -300,7 +300,7 @@ export default function OwnerDashboard({user}: Props) {
 									selectedUser.type === "corporate" || selectedUser.type === "teacher" ? () => setPage("students") : undefined
 								}
 								onViewTeachers={selectedUser.type === "corporate" ? () => setPage("teachers") : undefined}
-								{...selectedUser}
+								user={selectedUser}
 							/>
 						</div>
 					)}

src/dashboards/Student.tsx

@@ -1,11 +1,15 @@
+import Button from "@/components/Low/Button";
 import ProgressBar from "@/components/Low/ProgressBar";
 import ProfileSummary from "@/components/ProfileSummary";
+import useAssignments from "@/hooks/useAssignments";
 import useStats from "@/hooks/useStats";
 import {User} from "@/interfaces/user";
 import {MODULE_ARRAY} from "@/utils/moduleUtils";
 import {averageScore, groupBySession} from "@/utils/stats";
+import clsx from "clsx";
 import {capitalize} from "lodash";
-import {BsBook, BsFileEarmarkText, BsHeadphones, BsMegaphone, BsPen, BsPencil, BsStar} from "react-icons/bs";
+import moment from "moment";
+import {BsArrowRepeat, BsBook, BsFileEarmarkText, BsHeadphones, BsMegaphone, BsPen, BsPencil, BsStar} from "react-icons/bs";
 
 interface Props {
 	user: User;
@@ -13,6 +17,7 @@ interface Props {
 
 export default function StudentDashboard({user}: Props) {
 	const {stats} = useStats(user.id);
+	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({assignees: user?.id});
 
 	return (
 		<>
@@ -44,6 +49,88 @@ export default function StudentDashboard({user}: Props) {
 				</span>
 			</section>
 
+			<section className="flex flex-col gap-1 md:gap-3">
+				<div className="flex gap-4 items-center">
+					<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 className="font-bold text-lg text-mti-black">Assignments</span>
+						<BsArrowRepeat className={clsx("text-xl", isAssignmentsLoading && "animate-spin")} />
+					</div>
+				</div>
+				<span className="text-mti-gray-taupe flex gap-8 overflow-x-scroll scrollbar-hide">
+					{assignments.filter((a) => moment(a.endDate).isSameOrAfter(moment())).length === 0 &&
+						"Assignments will appear here. It seems that for now there are no assignments for you."}
+					{assignments
+						.filter((a) => moment(a.endDate).isSameOrAfter(moment()))
+						.sort((a, b) => moment(a.startDate).diff(b.startDate))
+						.map((assignment) => (
+							<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-6 p-4 min-w-[300px]" key={assignment.id}>
+								<div className="flex flex-col gap-1">
+									<h3 className="font-semibold text-xl text-mti-black/90">{assignment.name}</h3>
+									<span className="flex gap-1 justify-between">
+										<span>{moment(assignment.startDate).format("DD/MM/YY, HH:mm")}</span>
+										<span>-</span>
+										<span>{moment(assignment.endDate).format("DD/MM/YY, HH:mm")}</span>
+									</span>
+								</div>
+								<div className="flex justify-between w-full items-center">
+									<div className="grid grid-cols-2 gap-2 place-items-center justify-center w-fit min-w-[104px] -md:mt-2">
+										{MODULE_ARRAY.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" &&
+														(assignment.exams.map((e) => e.module).includes("reading")
+															? "bg-ielts-reading"
+															: "bg-mti-black/40"),
+													module === "listening" &&
+														(assignment.exams.map((e) => e.module).includes("listening")
+															? "bg-ielts-listening"
+															: "bg-mti-black/40"),
+													module === "writing" &&
+														(assignment.exams.map((e) => e.module).includes("writing")
+															? "bg-ielts-writing"
+															: "bg-mti-black/40"),
+													module === "speaking" &&
+														(assignment.exams.map((e) => e.module).includes("speaking")
+															? "bg-ielts-speaking"
+															: "bg-mti-black/40"),
+												)}>
+												{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" />}
+											</div>
+										))}
+									</div>
+									{!assignment.results.map((r) => r.user).includes(user.id) && (
+										<>
+											<div
+												className="tooltip w-full md:hidden h-full flex items-center justify-end pl-8"
+												data-tip="Your screen size is too small to perform an assignment">
+												<Button
+													disabled={moment(assignment.startDate).isAfter(moment())}
+													className="w-full h-full !rounded-xl"
+													variant="outline">
+													Start
+												</Button>
+											</div>
+											<Button
+												disabled={moment(assignment.startDate).isAfter(moment())}
+												className="w-full max-w-[50%] h-full !rounded-xl -md:hidden"
+												variant="outline">
+												Start
+											</Button>
+										</>
+									)}
+								</div>
+							</div>
+						))}
+				</span>
+			</section>
+
 			<section className="flex flex-col gap-3">
 				<span className="font-bold text-lg">Score History</span>
 				<div className="grid -md:grid-rows-4 md:grid-cols-2 gap-6">

src/dashboards/Teacher.tsx

@@ -43,6 +43,7 @@ import AssignmentCard from "./AssignmentCard";
 import Button from "@/components/Low/Button";
 import clsx from "clsx";
 import ProgressBar from "@/components/Low/ProgressBar";
+import AssignmentCreator from "./AssignmentCreator";
 
 interface Props {
 	user: User;
@@ -53,6 +54,7 @@ export default function TeacherDashboard({user}: Props) {
 	const [selectedUser, setSelectedUser] = useState<User>();
 	const [showModal, setShowModal] = useState(false);
 	const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
+	const [isCreatingAssignment, setIsCreatingAssignment] = useState(false);
 
 	const {stats} = useStats();
 	const {users, reload} = useUsers();
@@ -148,7 +150,10 @@ export default function TeacherDashboard({user}: Props) {
 
 		return (
 			<>
-				<Modal isOpen={!!selectedAssignment} onClose={() => setSelectedAssignment(undefined)} title={selectedAssignment?.name}>
+				<Modal
+					isOpen={!!selectedAssignment && !isCreatingAssignment}
+					onClose={() => setSelectedAssignment(undefined)}
+					title={selectedAssignment?.name}>
 					<div className="mt-4 flex flex-col w-full">
 						<ProgressBar
 							color="purple"
@@ -163,6 +168,27 @@ export default function TeacherDashboard({user}: Props) {
 						/>
 					</div>
 				</Modal>
+				<AssignmentCreator
+					assignment={selectedAssignment}
+					groups={groups.filter((x) => x.admin === user.id || x.participants.includes(user.id))}
+					users={users.filter(
+						(x) =>
+							x.type === "student" &&
+							(!!selectedUser
+								? groups
+										.filter((g) => g.admin === selectedUser.id)
+										.flatMap((g) => g.participants)
+										.includes(x.id) || false
+								: groups.flatMap((g) => g.participants).includes(x.id)),
+					)}
+					assigner={user.id}
+					isCreating={isCreatingAssignment}
+					cancelCreation={() => {
+						setIsCreatingAssignment(false);
+						setSelectedAssignment(undefined);
+						reloadAssignments();
+					}}
+				/>
 				<div className="w-full flex justify-between items-center">
 					<div
 						onClick={() => setPage("")}
@@ -188,12 +214,21 @@ export default function TeacherDashboard({user}: Props) {
 				<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">
+						<div
+							onClick={() => setIsCreatingAssignment(true)}
+							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} />
+							<AssignmentCard
+								{...a}
+								onClick={() => {
+									setSelectedAssignment(a);
+									setIsCreatingAssignment(true);
+								}}
+								key={a.id}
+							/>
 						))}
 					</div>
 				</section>
@@ -299,7 +334,7 @@ export default function TeacherDashboard({user}: Props) {
 									selectedUser.type === "corporate" || selectedUser.type === "teacher" ? () => setPage("students") : undefined
 								}
 								onViewTeachers={selectedUser.type === "corporate" ? () => setPage("teachers") : undefined}
-								{...selectedUser}
+								user={selectedUser}
 							/>
 						</div>
 					)}