Updated the MasterCorporate and Corporate pages to allow to have Assignments

src/dashboards/AssignmentCard.tsx

@@ -10,6 +10,7 @@ import {usePDFDownload} from "@/hooks/usePDFDownload";
 import {useAssignmentArchive} from "@/hooks/useAssignmentArchive";
 import {uniqBy} from "lodash";
 import {useAssignmentUnarchive} from "@/hooks/useAssignmentUnarchive";
+import {getUserName} from "@/utils/users";
 
 interface Props {
 	onClick?: () => void;
@@ -35,6 +36,8 @@ export default function AssignmentCard({
 	allowArchive,
 	allowUnarchive,
 }: Assignment & Props) {
+	const {users} = useUsers();
+
 	const renderPdfIcon = usePDFDownload("assignments");
 	const renderArchiveIcon = useAssignmentArchive(id, reload);
 	const renderUnarchiveIcon = useAssignmentUnarchive(id, reload);
@@ -72,11 +75,14 @@ export default function AssignmentCard({
 					textClassName={results.length / assignees.length < 0.5 ? "!text-mti-gray-dim font-light" : "text-white"}
 				/>
 			</div>
+			<div className="flex flex-col gap-1">
 				<span className="flex justify-between gap-1">
 					<span>{moment(startDate).format("DD/MM/YY, HH:mm")}</span>
 					<span>-</span>
 					<span>{moment(endDate).format("DD/MM/YY, HH:mm")}</span>
 				</span>
+				<span>Assigner: {getUserName(users.find((x) => x.id === assigner))}</span>
+			</div>
 			<div className="-md:mt-2 grid w-full grid-cols-4 place-items-start gap-2">
 				{uniqBy(exams, (x) => x.module).map(({module}) => (
 					<div

src/dashboards/AssignmentView.tsx

@@ -10,6 +10,7 @@ import {getExamById} from "@/utils/exams";
 import {sortByModule} from "@/utils/moduleUtils";
 import {calculateBandScore} from "@/utils/score";
 import {convertToUserSolutions} from "@/utils/stats";
+import {getUserName} from "@/utils/users";
 import axios from "axios";
 import clsx from "clsx";
 import {capitalize, uniqBy} from "lodash";
@@ -241,6 +242,7 @@ export default function AssignmentView({isOpen, assignment, onClose}: Props) {
 						<span>Start Date: {moment(assignment?.startDate).format("DD/MM/YY, HH:mm")}</span>
 						<span>End Date: {moment(assignment?.endDate).format("DD/MM/YY, HH:mm")}</span>
 					</div>
+					<div className="flex flex-col gap-2">
 						<span>
 							Assignees:{" "}
 							{users
@@ -248,6 +250,8 @@ export default function AssignmentView({isOpen, assignment, onClose}: Props) {
 								.map((u) => `${u.name} (${u.email})`)
 								.join(", ")}
 						</span>
+						<span>Assigner: {getUserName(users.find((x) => x.id === assignment?.assigner))}</span>
+					</div>
 				</div>
 				<div className="flex flex-col gap-2">
 					<span className="text-xl font-bold">Average Scores</span>

src/dashboards/Corporate.tsx

@@ -23,6 +23,9 @@ import {
 	BsPersonBadge,
 	BsPersonCheck,
 	BsPeople,
+	BsArrowRepeat,
+	BsPlus,
+	BsEnvelopePaper,
 } from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
@@ -36,6 +39,12 @@ import useFilterStore from "@/stores/listFilterStore";
 import {useRouter} from "next/router";
 import useCodes from "@/hooks/useCodes";
 import {getUserCorporate} from "@/utils/groups";
+import useAssignments from "@/hooks/useAssignments";
+import {Assignment} from "@/interfaces/results";
+import AssignmentView from "./AssignmentView";
+import AssignmentCreator from "./AssignmentCreator";
+import clsx from "clsx";
+import AssignmentCard from "./AssignmentCard";
 
 interface Props {
 	user: CorporateUser;
@@ -45,13 +54,15 @@ export default function CorporateDashboard({ user }: Props) {
 	const [page, setPage] = useState("");
 	const [selectedUser, setSelectedUser] = useState<User>();
 	const [showModal, setShowModal] = useState(false);
-  const [corporateUserToShow, setCorporateUserToShow] =
+	const [corporateUserToShow, setCorporateUserToShow] = useState<CorporateUser>();
-    useState<CorporateUser>();
+	const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
+	const [isCreatingAssignment, setIsCreatingAssignment] = useState(false);
 
 	const {stats} = useStats();
 	const {users, reload} = useUsers();
 	const {codes} = useCodes(user.id);
 	const {groups} = useGroups(user.id);
+	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({corporate: user.id});
 
 	const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
 	const router = useRouter();
@@ -65,26 +76,16 @@ export default function CorporateDashboard({ user }: Props) {
 		getUserCorporate(user.id).then(setCorporateUserToShow);
 	}, [user]);
 
-  const studentFilter = (user: User) =>
+	const studentFilter = (user: User) => user.type === "student" && groups.flatMap((g) => g.participants).includes(user.id);
-    user.type === "student" &&
+	const teacherFilter = (user: User) => user.type === "teacher" && groups.flatMap((g) => g.participants).includes(user.id);
-    groups.flatMap((g) => g.participants).includes(user.id);
-  const teacherFilter = (user: User) =>
-    user.type === "teacher" &&
-    groups.flatMap((g) => g.participants).includes(user.id);
 
-  const getStatsByStudent = (user: User) =>
+	const getStatsByStudent = (user: User) => stats.filter((s) => s.user === user.id);
-    stats.filter((s) => s.user === user.id);
 
 	const UserDisplay = (displayUser: User) => (
 		<div
 			onClick={() => setSelectedUser(displayUser)}
-      className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300"
+			className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300">
-    >
+			<img src={displayUser.profilePicture} alt={displayUser.name} className="rounded-full w-10 h-10" />
-      <img
-        src={displayUser.profilePicture}
-        alt={displayUser.name}
-        className="rounded-full w-10 h-10"
-      />
 			<div className="flex flex-col gap-1 items-start">
 				<span>{displayUser.name}</span>
 				<span className="text-sm opacity-75">{displayUser.email}</span>
@@ -110,8 +111,7 @@ export default function CorporateDashboard({ user }: Props) {
 					<div className="flex flex-col gap-4">
 						<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"
+							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>
@@ -140,8 +140,7 @@ export default function CorporateDashboard({ user }: Props) {
 					<div className="flex flex-col gap-4">
 						<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"
+							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>
@@ -153,22 +152,18 @@ export default function CorporateDashboard({ user }: Props) {
 	};
 
 	const GroupsList = () => {
-    const filter = (x: Group) =>
+		const filter = (x: Group) => x.admin === user.id || x.participants.includes(user.id);
-      x.admin === user.id || x.participants.includes(user.id);
 
 		return (
 			<>
 				<div className="flex flex-col gap-4">
 					<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"
+						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>
-          <h2 className="text-2xl font-semibold">
+					<h2 className="text-2xl font-semibold">Groups ({groups.filter(filter).length})</h2>
-            Groups ({groups.filter(filter).length})
-          </h2>
 				</div>
 
 				<GroupList user={user} />
@@ -176,6 +171,122 @@ export default function CorporateDashboard({ user }: Props) {
 		);
 	};
 
+	const AssignmentsPage = () => {
+		const activeFilter = (a: Assignment) =>
+			moment(a.endDate).isAfter(moment()) && moment(a.startDate).isBefore(moment()) && a.assignees.length > a.results.length;
+		const pastFilter = (a: Assignment) => (moment(a.endDate).isBefore(moment()) || a.assignees.length === a.results.length) && !a.archived;
+		const archivedFilter = (a: Assignment) => a.archived;
+		const futureFilter = (a: Assignment) => moment(a.startDate).isAfter(moment());
+
+		return (
+			<>
+				<AssignmentView
+					isOpen={!!selectedAssignment && !isCreatingAssignment}
+					onClose={() => {
+						setSelectedAssignment(undefined);
+						setIsCreatingAssignment(false);
+						reloadAssignments();
+					}}
+					assignment={selectedAssignment}
+				/>
+				<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("")}
+						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
+							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);
+									setIsCreatingAssignment(true);
+								}}
+								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}
+								allowDownload
+								reload={reloadAssignments}
+								allowArchive
+							/>
+						))}
+					</div>
+				</section>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Archived Assignments ({assignments.filter(archivedFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						{assignments.filter(archivedFilter).map((a) => (
+							<AssignmentCard
+								{...a}
+								onClick={() => setSelectedAssignment(a)}
+								key={a.id}
+								allowDownload
+								reload={reloadAssignments}
+								allowUnarchive
+							/>
+						))}
+					</div>
+				</section>
+			</>
+		);
+	};
+
 	const averageLevelCalculator = (studentStats: Stat[]) => {
 		const formattedStats = studentStats
 			.map((s) => ({
@@ -186,12 +297,7 @@ export default function CorporateDashboard({ user }: Props) {
 			.filter((f) => !!f.focus);
 		const bandScores = formattedStats.map((s) => ({
 			module: s.module,
-      level: calculateBandScore(
+			level: calculateBandScore(s.score.correct, s.score.total, s.module, s.focus!),
-        s.score.correct,
-        s.score.total,
-        s.module,
-        s.focus!
-      ),
 		}));
 
 		const levels: {[key in Module]: number} = {
@@ -210,14 +316,10 @@ export default function CorporateDashboard({ user }: Props) {
 		<>
 			{corporateUserToShow && (
 				<div className="absolute top-4 right-4 bg-neutral-200 px-2 rounded-lg py-1">
-          Linked to:{" "}
+					Linked to: <b>{corporateUserToShow?.corporateInformation?.companyInformation.name || corporateUserToShow.name}</b>
-          <b>
-            {corporateUserToShow?.corporateInformation?.companyInformation
-              .name || corporateUserToShow.name}
-          </b>
 				</div>
 			)}
-      <section className="flex flex-wrap gap-2 items-center -lg:justify-center lg:justify-between text-center">
+			<section className="grid grid-cols-5 -md:grid-cols-2 gap-4 text-center">
 				<IconCard
 					onClick={() => setPage("students")}
 					Icon={BsPersonFill}
@@ -235,48 +337,40 @@ export default function CorporateDashboard({ user }: Props) {
 				<IconCard
 					Icon={BsClipboard2Data}
 					label="Exams Performed"
-          value={
+					value={stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user)).length}
-            stats.filter((s) =>
-              groups.flatMap((g) => g.participants).includes(s.user)
-            ).length
-          }
 					color="purple"
 				/>
 				<IconCard
 					Icon={BsPaperclip}
 					label="Average Level"
-          value={averageLevelCalculator(
+					value={averageLevelCalculator(stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user))).toFixed(1)}
-            stats.filter((s) =>
-              groups.flatMap((g) => g.participants).includes(s.user)
-            )
-          ).toFixed(1)}
-          color="purple"
-        />
-        <IconCard
-          onClick={() => setPage("groups")}
-          Icon={BsPeople}
-          label="Groups"
-          value={groups.length}
 					color="purple"
 				/>
+				<IconCard onClick={() => setPage("groups")} Icon={BsPeople} label="Groups" value={groups.length} color="purple" />
 				<IconCard
 					Icon={BsPersonCheck}
 					label="User Balance"
-          value={`${codes.length}/${
+					value={`${codes.length}/${user.corporateInformation?.companyInformation?.userAmount || 0}`}
-            user.corporateInformation?.companyInformation?.userAmount || 0
-          }`}
 					color="purple"
 				/>
 				<IconCard
 					Icon={BsClock}
 					label="Expiration Date"
-          value={
+					value={user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy") : "Unlimited"}
-            user.subscriptionExpirationDate
-              ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy")
-              : "Unlimited"
-          }
 					color="rose"
 				/>
+				<button
+					disabled={isAssignmentsLoading}
+					onClick={() => setPage("assignments")}
+					className="bg-white col-span-2 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">
+							{isAssignmentsLoading ? "Loading..." : assignments.filter((a) => !a.archived).length}
+						</span>
+					</span>
+				</button>
 			</section>
 
 			<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
@@ -307,11 +401,7 @@ export default function CorporateDashboard({ user }: Props) {
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
 						{users
 							.filter(studentFilter)
-              .sort(
+							.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))
-                (a, b) =>
-                  calculateAverageLevel(b.levels) -
-                  calculateAverageLevel(a.levels)
-              )
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
 							))}
@@ -324,8 +414,7 @@ export default function CorporateDashboard({ user }: Props) {
 							.filter(studentFilter)
 							.sort(
 								(a, b) =>
-                  Object.keys(groupByExam(getStatsByStudent(b))).length -
+									Object.keys(groupByExam(getStatsByStudent(b))).length - Object.keys(groupByExam(getStatsByStudent(a))).length,
-                  Object.keys(groupByExam(getStatsByStudent(a))).length
 							)
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
@@ -349,8 +438,7 @@ export default function CorporateDashboard({ user }: Props) {
 									if (shouldReload) reload();
 								}}
 								onViewStudents={
-                  selectedUser.type === "corporate" ||
+									selectedUser.type === "corporate" || selectedUser.type === "teacher"
-                  selectedUser.type === "teacher"
 										? () => {
 												appendUserFilters({
 													id: "view-students",
@@ -360,11 +448,7 @@ export default function CorporateDashboard({ user }: Props) {
 													id: "belongs-to-admin",
 													filter: (x: User) =>
 														groups
-                              .filter(
+															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
-                                (g) =>
-                                  g.admin === selectedUser.id ||
-                                  g.participants.includes(selectedUser.id)
-                              )
 															.flatMap((g) => g.participants)
 															.includes(x.id),
 												});
@@ -374,8 +458,7 @@ export default function CorporateDashboard({ user }: Props) {
 										: undefined
 								}
 								onViewTeachers={
-                  selectedUser.type === "corporate" ||
+									selectedUser.type === "corporate" || selectedUser.type === "student"
-                  selectedUser.type === "student"
 										? () => {
 												appendUserFilters({
 													id: "view-teachers",
@@ -385,11 +468,7 @@ export default function CorporateDashboard({ user }: Props) {
 													id: "belongs-to-admin",
 													filter: (x: User) =>
 														groups
-                              .filter(
+															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
-                                (g) =>
-                                  g.admin === selectedUser.id ||
-                                  g.participants.includes(selectedUser.id)
-                              )
 															.flatMap((g) => g.participants)
 															.includes(x.id),
 												});
@@ -407,6 +486,7 @@ export default function CorporateDashboard({ user }: Props) {
 			{page === "students" && <StudentsList />}
 			{page === "teachers" && <TeachersList />}
 			{page === "groups" && <GroupsList />}
+			{page === "assignments" && <AssignmentsPage />}
 			{page === "" && <DefaultDashboard />}
 		</>
 	);

src/dashboards/MasterCorporate.tsx

@@ -17,6 +17,9 @@ import {
 	BsPersonCheck,
 	BsPeople,
 	BsBank,
+	BsEnvelopePaper,
+	BsArrowRepeat,
+	BsPlus,
 } from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
@@ -30,6 +33,12 @@ import GroupList from "@/pages/(admin)/Lists/GroupList";
 import useFilterStore from "@/stores/listFilterStore";
 import {useRouter} from "next/router";
 import useCodes from "@/hooks/useCodes";
+import useAssignments from "@/hooks/useAssignments";
+import {Assignment} from "@/interfaces/results";
+import AssignmentView from "./AssignmentView";
+import AssignmentCreator from "./AssignmentCreator";
+import clsx from "clsx";
+import AssignmentCard from "./AssignmentCard";
 
 interface Props {
 	user: MasterCorporateUser;
@@ -39,20 +48,18 @@ export default function MasterCorporateDashboard({ user }: Props) {
 	const [page, setPage] = useState("");
 	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();
 	const {codes} = useCodes(user.id);
 	const {groups} = useGroups(user.id, user.type);
 
-  const masterCorporateUserGroups = [
+	const masterCorporateUserGroups = [...new Set(groups.filter((u) => u.admin === user.id).flatMap((g) => g.participants))];
-    ...new Set(
+	const corporateUserGroups = [...new Set(groups.flatMap((g) => g.participants))];
-      groups.filter((u) => u.admin === user.id).flatMap((g) => g.participants)
+
-    ),
+	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({corporate: user.id});
-  ];
-  const corporateUserGroups = [
-    ...new Set(groups.flatMap((g) => g.participants)),
-  ];
 
 	const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
 	const router = useRouter();
@@ -61,24 +68,16 @@ export default function MasterCorporateDashboard({ user }: Props) {
 		setShowModal(!!selectedUser && page === "");
 	}, [selectedUser, page]);
 
-  const studentFilter = (user: User) =>
+	const studentFilter = (user: User) => user.type === "student" && corporateUserGroups.includes(user.id);
-    user.type === "student" && corporateUserGroups.includes(user.id);
+	const teacherFilter = (user: User) => user.type === "teacher" && corporateUserGroups.includes(user.id);
-  const teacherFilter = (user: User) =>
-    user.type === "teacher" && corporateUserGroups.includes(user.id);
 
-  const getStatsByStudent = (user: User) =>
+	const getStatsByStudent = (user: User) => stats.filter((s) => s.user === user.id);
-    stats.filter((s) => s.user === user.id);
 
 	const UserDisplay = (displayUser: User) => (
 		<div
 			onClick={() => setSelectedUser(displayUser)}
-      className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300"
+			className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300">
-    >
+			<img src={displayUser.profilePicture} alt={displayUser.name} className="rounded-full w-10 h-10" />
-      <img
-        src={displayUser.profilePicture}
-        alt={displayUser.name}
-        className="rounded-full w-10 h-10"
-      />
 			<div className="flex flex-col gap-1 items-start">
 				<span>{displayUser.name}</span>
 				<span className="text-sm opacity-75">{displayUser.email}</span>
@@ -88,10 +87,7 @@ export default function MasterCorporateDashboard({ user }: Props) {
 
 	const StudentsList = () => {
 		const filter = (x: User) =>
-      x.type === "student" &&
+			x.type === "student" && (!!selectedUser ? corporateUserGroups.includes(x.id) || false : corporateUserGroups.includes(x.id));
-      (!!selectedUser
-        ? corporateUserGroups.includes(x.id) || false
-        : corporateUserGroups.includes(x.id));
 
 		return (
 			<UserList
@@ -101,8 +97,7 @@ export default function MasterCorporateDashboard({ user }: Props) {
 					<div className="flex flex-col gap-4">
 						<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"
+							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>
@@ -115,10 +110,7 @@ export default function MasterCorporateDashboard({ user }: Props) {
 
 	const TeachersList = () => {
 		const filter = (x: User) =>
-      x.type === "teacher" &&
+			x.type === "teacher" && (!!selectedUser ? corporateUserGroups.includes(x.id) || false : corporateUserGroups.includes(x.id));
-      (!!selectedUser
-        ? corporateUserGroups.includes(x.id) || false
-        : corporateUserGroups.includes(x.id));
 
 		return (
 			<UserList
@@ -128,8 +120,7 @@ export default function MasterCorporateDashboard({ user }: Props) {
 					<div className="flex flex-col gap-4">
 						<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"
+							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>
@@ -141,10 +132,7 @@ export default function MasterCorporateDashboard({ user }: Props) {
 	};
 
 	const corporateUserFilter = (x: User) =>
-    x.type === "corporate" &&
+		x.type === "corporate" && (!!selectedUser ? masterCorporateUserGroups.includes(x.id) || false : masterCorporateUserGroups.includes(x.id));
-    (!!selectedUser
-      ? masterCorporateUserGroups.includes(x.id) || false
-      : masterCorporateUserGroups.includes(x.id));
 
 	const CorporateList = () => {
 		return (
@@ -155,8 +143,7 @@ export default function MasterCorporateDashboard({ user }: Props) {
 					<div className="flex flex-col gap-4">
 						<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"
+							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>
@@ -173,14 +160,11 @@ export default function MasterCorporateDashboard({ user }: Props) {
 				<div className="flex flex-col gap-4">
 					<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"
+						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>
-          <h2 className="text-2xl font-semibold">
+					<h2 className="text-2xl font-semibold">Groups ({groups.length})</h2>
-            Groups ({groups.length})
-          </h2>
 				</div>
 
 				<GroupList user={user} />
@@ -188,6 +172,122 @@ export default function MasterCorporateDashboard({ user }: Props) {
 		);
 	};
 
+	const AssignmentsPage = () => {
+		const activeFilter = (a: Assignment) =>
+			moment(a.endDate).isAfter(moment()) && moment(a.startDate).isBefore(moment()) && a.assignees.length > a.results.length;
+		const pastFilter = (a: Assignment) => (moment(a.endDate).isBefore(moment()) || a.assignees.length === a.results.length) && !a.archived;
+		const archivedFilter = (a: Assignment) => a.archived;
+		const futureFilter = (a: Assignment) => moment(a.startDate).isAfter(moment());
+
+		return (
+			<>
+				<AssignmentView
+					isOpen={!!selectedAssignment && !isCreatingAssignment}
+					onClose={() => {
+						setSelectedAssignment(undefined);
+						setIsCreatingAssignment(false);
+						reloadAssignments();
+					}}
+					assignment={selectedAssignment}
+				/>
+				<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("")}
+						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
+							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);
+									setIsCreatingAssignment(true);
+								}}
+								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}
+								allowDownload
+								reload={reloadAssignments}
+								allowArchive
+							/>
+						))}
+					</div>
+				</section>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Archived Assignments ({assignments.filter(archivedFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						{assignments.filter(archivedFilter).map((a) => (
+							<AssignmentCard
+								{...a}
+								onClick={() => setSelectedAssignment(a)}
+								key={a.id}
+								allowDownload
+								reload={reloadAssignments}
+								allowUnarchive
+							/>
+						))}
+					</div>
+				</section>
+			</>
+		);
+	};
+
 	const averageLevelCalculator = (studentStats: Stat[]) => {
 		const formattedStats = studentStats
 			.map((s) => ({
@@ -198,12 +298,7 @@ export default function MasterCorporateDashboard({ user }: Props) {
 			.filter((f) => !!f.focus);
 		const bandScores = formattedStats.map((s) => ({
 			module: s.module,
-      level: calculateBandScore(
+			level: calculateBandScore(s.score.correct, s.score.total, s.module, s.focus!),
-        s.score.correct,
-        s.score.total,
-        s.module,
-        s.focus!
-      ),
 		}));
 
 		const levels: {[key in Module]: number} = {
@@ -238,46 +333,26 @@ export default function MasterCorporateDashboard({ user }: Props) {
 				<IconCard
 					Icon={BsClipboard2Data}
 					label="Exams Performed"
-          value={
+					value={stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user)).length}
-            stats.filter((s) =>
-              groups.flatMap((g) => g.participants).includes(s.user)
-            ).length
-          }
 					color="purple"
 				/>
 				<IconCard
 					Icon={BsPaperclip}
 					label="Average Level"
-          value={averageLevelCalculator(
+					value={averageLevelCalculator(stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user))).toFixed(1)}
-            stats.filter((s) =>
-              groups.flatMap((g) => g.participants).includes(s.user)
-            )
-          ).toFixed(1)}
-          color="purple"
-        />
-        <IconCard
-          onClick={() => setPage("groups")}
-          Icon={BsPeople}
-          label="Groups"
-          value={groups.length}
 					color="purple"
 				/>
+				<IconCard onClick={() => setPage("groups")} Icon={BsPeople} label="Groups" value={groups.length} color="purple" />
 				<IconCard
 					Icon={BsPersonCheck}
 					label="User Balance"
-          value={`${codes.length}/${
+					value={`${codes.length}/${user.corporateInformation?.companyInformation?.userAmount || 0}`}
-            user.corporateInformation?.companyInformation?.userAmount || 0
-          }`}
 					color="purple"
 				/>
 				<IconCard
 					Icon={BsClock}
 					label="Expiration Date"
-          value={
+					value={user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy") : "Unlimited"}
-            user.subscriptionExpirationDate
-              ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy")
-              : "Unlimited"
-          }
 					color="rose"
 				/>
 				<IconCard
@@ -287,6 +362,18 @@ export default function MasterCorporateDashboard({ user }: Props) {
 					color="purple"
 					onClick={() => setPage("corporate")}
 				/>
+				<button
+					disabled={isAssignmentsLoading}
+					onClick={() => setPage("assignments")}
+					className="bg-white col-span-2 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">
+							{isAssignmentsLoading ? "Loading..." : assignments.filter((a) => !a.archived).length}
+						</span>
+					</span>
+				</button>
 			</section>
 
 			<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
@@ -317,11 +404,7 @@ export default function MasterCorporateDashboard({ user }: Props) {
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
 						{users
 							.filter(studentFilter)
-              .sort(
+							.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))
-                (a, b) =>
-                  calculateAverageLevel(b.levels) -
-                  calculateAverageLevel(a.levels)
-              )
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
 							))}
@@ -334,8 +417,7 @@ export default function MasterCorporateDashboard({ user }: Props) {
 							.filter(studentFilter)
 							.sort(
 								(a, b) =>
-                  Object.keys(groupByExam(getStatsByStudent(b))).length -
+									Object.keys(groupByExam(getStatsByStudent(b))).length - Object.keys(groupByExam(getStatsByStudent(a))).length,
-                  Object.keys(groupByExam(getStatsByStudent(a))).length
 							)
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
@@ -359,8 +441,7 @@ export default function MasterCorporateDashboard({ user }: Props) {
 									if (shouldReload) reload();
 								}}
 								onViewStudents={
-                  selectedUser.type === "corporate" ||
+									selectedUser.type === "corporate" || selectedUser.type === "teacher"
-                  selectedUser.type === "teacher"
 										? () => {
 												appendUserFilters({
 													id: "view-students",
@@ -370,11 +451,7 @@ export default function MasterCorporateDashboard({ user }: Props) {
 													id: "belongs-to-admin",
 													filter: (x: User) =>
 														groups
-                              .filter(
+															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
-                                (g) =>
-                                  g.admin === selectedUser.id ||
-                                  g.participants.includes(selectedUser.id)
-                              )
 															.flatMap((g) => g.participants)
 															.includes(x.id),
 												});
@@ -384,8 +461,7 @@ export default function MasterCorporateDashboard({ user }: Props) {
 										: undefined
 								}
 								onViewTeachers={
-                  selectedUser.type === "corporate" ||
+									selectedUser.type === "corporate" || selectedUser.type === "student"
-                  selectedUser.type === "student"
 										? () => {
 												appendUserFilters({
 													id: "view-teachers",
@@ -395,11 +471,7 @@ export default function MasterCorporateDashboard({ user }: Props) {
 													id: "belongs-to-admin",
 													filter: (x: User) =>
 														groups
-                              .filter(
+															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
-                                (g) =>
-                                  g.admin === selectedUser.id ||
-                                  g.participants.includes(selectedUser.id)
-                              )
 															.flatMap((g) => g.participants)
 															.includes(x.id),
 												});
@@ -418,6 +490,7 @@ export default function MasterCorporateDashboard({ user }: Props) {
 			{page === "teachers" && <TeachersList />}
 			{page === "groups" && <GroupsList />}
 			{page === "corporate" && <CorporateList />}
+			{page === "assignments" && <AssignmentsPage />}
 			{page === "" && <DefaultDashboard />}
 		</>
 	);

src/hooks/useAssignments.tsx

@@ -2,7 +2,7 @@ import {Assignment} from "@/interfaces/results";
 import axios from "axios";
 import {useEffect, useState} from "react";
 
-export default function useAssignments({assigner, assignees}: {assigner?: string; assignees?: string}) {
+export default function useAssignments({assigner, assignees, corporate}: {assigner?: string; assignees?: string; corporate?: string}) {
 	const [assignments, setAssignments] = useState<Assignment[]>([]);
 	const [isLoading, setIsLoading] = useState(false);
 	const [isError, setIsError] = useState(false);
@@ -10,12 +10,13 @@ export default function useAssignments({assigner, assignees}: {assigner?: string
 	const getData = () => {
 		setIsLoading(true);
 		axios
-			.get<Assignment[]>("/api/assignments")
+			.get<Assignment[]>(!corporate ? "/api/assignments" : `/api/assignments/corporate?id=${corporate}`)
-			.then((response) => {
+			.then(async (response) => {
 				if (assigner) {
 					setAssignments(response.data.filter((a) => a.assigner === assigner));
 					return;
 				}
+
 				if (assignees) {
 					setAssignments(response.data.filter((a) => a.assignees.filter((x) => assignees.includes(x)).length > 0));
 					return;
@@ -26,7 +27,7 @@ export default function useAssignments({assigner, assignees}: {assigner?: string
 			.finally(() => setIsLoading(false));
 	};
 
-	useEffect(getData, [assignees, assigner]);
+	useEffect(getData, [assignees, assigner, corporate]);
 
 	return {assignments, isLoading, isError, reload: getData};
 }

src/pages/api/assignments/corporate.ts

@@ -0,0 +1,40 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type {NextApiRequest, NextApiResponse} from "next";
+import {app} from "@/firebase";
+import {getFirestore, collection, getDocs, query, where, setDoc, doc, getDoc} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {uuidv4} from "@firebase/util";
+import {Module} from "@/interfaces";
+import {getExams} from "@/utils/exams.be";
+import {Exam, InstructorGender, Variant} from "@/interfaces/exam";
+import {capitalize, flatten, uniqBy} from "lodash";
+import {User} from "@/interfaces/user";
+import moment from "moment";
+import {sendEmail} from "@/email";
+import {getAllAssignersByCorporate} from "@/utils/groups.be";
+import {getAssignmentsByAssigners} from "@/utils/assignments.be";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	if (req.method === "GET") return GET(req, res);
+
+	res.status(404).json({ok: false});
+}
+
+async function GET(req: NextApiRequest, res: NextApiResponse) {
+	const {id} = req.query as {id: string};
+
+	const assigners = await getAllAssignersByCorporate(id);
+	const assignments = await getAssignmentsByAssigners([...assigners, id]);
+
+	res.status(200).json(assignments);
+}

src/utils/assignments.be.ts

@@ -0,0 +1,14 @@
+import {app} from "@/firebase";
+import {Assignment} from "@/interfaces/results";
+import {collection, getDocs, getFirestore, query, where} from "firebase/firestore";
+
+const db = getFirestore(app);
+
+export const getAssignmentsByAssigner = async (id: string) => {
+	const {docs} = await getDocs(query(collection(db, "assignments"), where("assigner", "==", id)));
+	return docs.map((x) => ({...x.data(), id: x.id})) as Assignment[];
+};
+
+export const getAssignmentsByAssigners = async (ids: string[]) => {
+	return (await Promise.all(ids.map(getAssignmentsByAssigner))).flat();
+};

src/utils/groups.be.ts

@@ -1,14 +1,12 @@
 import {app} from "@/firebase";
-import { CorporateUser, StudentUser, TeacherUser } from "@/interfaces/user";
+import {CorporateUser, Group, StudentUser, TeacherUser} from "@/interfaces/user";
-import { doc, getDoc, getFirestore, setDoc } from "firebase/firestore";
+import {collection, doc, getDoc, getDocs, getFirestore, query, setDoc, where} from "firebase/firestore";
 import moment from "moment";
+import {getUser} from "./users.be";
 
 const db = getFirestore(app);
 
-export const updateExpiryDateOnGroup = async (
+export const updateExpiryDateOnGroup = async (participantID: string, corporateID: string) => {
-  participantID: string,
-  corporateID: string,
-) => {
 	const corporateRef = await getDoc(doc(db, "users", corporateID));
 	const participantRef = await getDoc(doc(db, "users", participantID));
 
@@ -18,36 +16,36 @@ export const updateExpiryDateOnGroup = async (
 		...corporateRef.data(),
 		id: corporateRef.id,
 	} as CorporateUser;
-  const participant = { ...participantRef.data(), id: participantRef.id } as
+	const participant = {...participantRef.data(), id: participantRef.id} as StudentUser | TeacherUser;
-    | StudentUser
-    | TeacherUser;
 
-  if (
+	if (corporate.type !== "corporate" || (participant.type !== "student" && participant.type !== "teacher")) return;
-    corporate.type !== "corporate" ||
-    (participant.type !== "student" && participant.type !== "teacher")
-  )
-    return;
 
-  if (
+	if (!corporate.subscriptionExpirationDate || !participant.subscriptionExpirationDate) {
-    !corporate.subscriptionExpirationDate ||
+		return await setDoc(doc(db, "users", participant.id), {subscriptionExpirationDate: null}, {merge: true});
-    !participant.subscriptionExpirationDate
-  ) {
-    return await setDoc(
-      doc(db, "users", participant.id),
-      { subscriptionExpirationDate: null },
-      { merge: true },
-    );
 	}
 
 	const corporateDate = moment(corporate.subscriptionExpirationDate);
 	const participantDate = moment(participant.subscriptionExpirationDate);
 
 	if (corporateDate.isAfter(participantDate))
-    return await setDoc(
+		return await setDoc(doc(db, "users", participant.id), {subscriptionExpirationDate: corporateDate.toISOString()}, {merge: true});
-      doc(db, "users", participant.id),
-      { subscriptionExpirationDate: corporateDate.toISOString() },
-      { merge: true },
-    );
 
 	return;
 };
+
+export const getUserGroups = async (id: string): Promise<Group[]> => {
+	const groupDocs = await getDocs(query(collection(db, "groups"), where("admin", "==", id)));
+	return groupDocs.docs.map((x) => ({...x.data(), id})) as Group[];
+};
+
+export const getAllAssignersByCorporate = async (corporateID: string): Promise<string[]> => {
+	const groups = await getUserGroups(corporateID);
+	const groupUsers = (await Promise.all(groups.map(async (g) => await Promise.all(g.participants.map(getUser))))).flat();
+	const teacherPromises = await Promise.all(
+		groupUsers.map(async (u) =>
+			u.type === "teacher" ? u.id : u.type === "corporate" ? [...(await getAllAssignersByCorporate(u.id)), u.id] : undefined,
+		),
+	);
+
+	return teacherPromises.filter((x) => !!x).flat() as string[];
+};

src/utils/users.be.ts

@@ -1,6 +1,6 @@
 import {app} from "@/firebase";
 
-import { collection, getDocs, getFirestore } from "firebase/firestore";
+import {collection, doc, getDoc, getDocs, getFirestore} from "firebase/firestore";
 import {User} from "@/interfaces/user";
 const db = getFirestore(app);
 
@@ -12,3 +12,9 @@ export async function getUsers() {
 		...doc.data(),
 	})) as User[];
 }
+
+export async function getUser(id: string) {
+	const userDoc = await getDoc(doc(db, "users", id));
+
+	return {...userDoc.data(), id} as User;
+}

src/utils/users.ts

@@ -25,7 +25,10 @@ export const exportListToExcel = (rowUsers: User[], users: User[], groups: Group
 		expiryDate: user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/YYYY") : "Unlimited",
 		country: user.demographicInformation?.country || "N/A",
 		phone: user.demographicInformation?.phone || "N/A",
-		employmentPosition: (user.type === "corporate" || user.type === "mastercorporate" ? user.demographicInformation?.position : user.demographicInformation?.employment) || "N/A",
+		employmentPosition:
+			(user.type === "corporate" || user.type === "mastercorporate"
+				? user.demographicInformation?.position
+				: user.demographicInformation?.employment) || "N/A",
 		gender: user.demographicInformation?.gender ? capitalize(user.demographicInformation.gender) : "N/A",
 		verified: user.isVerified?.toString() || "FALSE",
 	}));
@@ -34,3 +37,9 @@ export const exportListToExcel = (rowUsers: User[], users: User[], groups: Group
 
 	return `${header}\n${rowsString}`;
 };
+
+export const getUserName = (user?: User) => {
+	if (!user) return "N/A";
+	if (user.type === "corporate" || user.type === "mastercorporate") return user.corporateInformation?.companyInformation?.name || user.name;
+	return user.name;
+};