Updated the Dashboard for Corporate accounts

src/constants/userPermissions.ts

@@ -6,6 +6,7 @@ export const PERMISSIONS = {
 		teacher: ["corporate", "developer", "owner"],
 		corporate: ["owner", "developer"],
 		owner: ["developer", "owner"],
+		agent: ["developer", "owner"],
 		developer: ["developer"],
 	},
 	deleteUser: {
@@ -13,6 +14,7 @@ export const PERMISSIONS = {
 		teacher: ["corporate", "developer", "owner"],
 		corporate: ["owner", "developer"],
 		owner: ["developer", "owner"],
+		agent: ["developer", "owner"],
 		developer: ["developer"],
 	},
 	updateUser: {
@@ -20,6 +22,7 @@ export const PERMISSIONS = {
 		teacher: ["corporate", "developer", "owner"],
 		corporate: ["owner", "developer"],
 		owner: ["developer", "owner"],
+		agent: ["developer", "owner"],
 		developer: ["developer"],
 	},
 	updateExpiryDate: {
@@ -27,6 +30,7 @@ export const PERMISSIONS = {
 		teacher: ["developer", "owner"],
 		corporate: ["owner", "developer"],
 		owner: ["developer", "owner"],
+		agent: ["developer", "owner"],
 		developer: ["developer"],
 	},
 	examManagement: {

src/dashboards/Corporate.tsx

@@ -0,0 +1,249 @@
+/* eslint-disable @next/next/no-img-element */
+import Modal from "@/components/Modal";
+import useStats from "@/hooks/useStats";
+import useUsers from "@/hooks/useUsers";
+import {Group, Stat, User} from "@/interfaces/user";
+import UserList from "@/pages/(admin)/Lists/UserList";
+import {dateSorter} from "@/utils";
+import moment from "moment";
+import {useEffect, useState} from "react";
+import {
+	BsArrowLeft,
+	BsClipboard2Data,
+	BsClipboard2DataFill,
+	BsClock,
+	BsGlobeCentralSouthAsia,
+	BsPaperclip,
+	BsPerson,
+	BsPersonFill,
+	BsPersonFillGear,
+	BsPersonGear,
+	BsPersonLinesFill,
+} from "react-icons/bs";
+import UserCard from "@/components/UserCard";
+import useGroups from "@/hooks/useGroups";
+import {calculateAverageLevel, calculateBandScore} from "@/utils/score";
+import {MODULE_ARRAY} from "@/utils/moduleUtils";
+import {Module} from "@/interfaces";
+import {groupByExam} from "@/utils/stats";
+import IconCard from "./IconCard";
+
+interface Props {
+	user: User;
+}
+
+export default function CorporateDashboard({user}: Props) {
+	const [page, setPage] = useState("");
+	const [selectedUser, setSelectedUser] = useState<User>();
+	const [showModal, setShowModal] = useState(false);
+
+	const {stats} = useStats();
+	const {users, reload} = useUsers();
+	const {groups} = useGroups(user.id);
+
+	useEffect(() => {
+		setShowModal(!!selectedUser && page === "");
+	}, [selectedUser, page]);
+
+	const studentFilter = (user: User) => user.type === "student" && 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) => 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">
+			<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>
+			</div>
+		</div>
+	);
+
+	const StudentsList = () => {
+		const filter = (x: User) =>
+			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));
+
+		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">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<h2 className="text-2xl font-semibold">Students ({users.filter(filter).length})</h2>
+				</div>
+
+				<UserList user={user} filter={filter} />
+			</>
+		);
+	};
+
+	const TeachersList = () => {
+		const filter = (x: User) =>
+			x.type === "teacher" &&
+			(!!selectedUser
+				? groups
+						.filter((g) => g.admin === selectedUser.id)
+						.flatMap((g) => g.participants)
+						.includes(x.id) || false
+				: groups.flatMap((g) => g.participants).includes(x.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">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<h2 className="text-2xl font-semibold">Teachers ({users.filter(filter).length})</h2>
+				</div>
+
+				<UserList user={user} filter={filter} />
+			</>
+		);
+	};
+
+	const averageLevelCalculator = (studentStats: Stat[]) => {
+		const formattedStats = studentStats
+			.map((s) => ({focus: users.find((u) => u.id === s.user)?.focus, score: s.score, module: s.module}))
+			.filter((f) => !!f.focus);
+		const bandScores = formattedStats.map((s) => ({
+			module: s.module,
+			level: calculateBandScore(s.score.correct, s.score.total, s.module, s.focus!),
+		}));
+
+		const levels: {[key in Module]: number} = {reading: 0, listening: 0, writing: 0, speaking: 0};
+		bandScores.forEach((b) => (levels[b.module] += b.level));
+
+		return calculateAverageLevel(levels);
+	};
+
+	const DefaultDashboard = () => (
+		<div className="flex -xl:flex-col gap-4">
+			<section className="flex -lg:flex-wrap xl:flex-col gap-4 items-center -lg:justify-center lg:justify-between text-center">
+				<IconCard
+					onClick={() => setPage("students")}
+					Icon={BsPersonFill}
+					label="Students"
+					value={users.filter(studentFilter).length}
+					color="purple"
+				/>
+				<IconCard
+					onClick={() => setPage("teachers")}
+					Icon={BsPersonLinesFill}
+					label="Teachers"
+					value={users.filter(teacherFilter).length}
+					color="purple"
+				/>
+				<IconCard
+					Icon={BsClipboard2Data}
+					label="Exams Performed"
+					value={stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user)).length}
+					color="purple"
+				/>
+				<IconCard
+					Icon={BsPaperclip}
+					label="Average Level"
+					value={averageLevelCalculator(stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user))).toFixed(1)}
+					color="purple"
+				/>
+				<IconCard
+					Icon={BsClock}
+					label="Expiration Date"
+					value={user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy") : "Unlimited"}
+					color="rose"
+				/>
+			</section>
+
+			<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Latest students</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{users
+							.filter(studentFilter)
+							.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Latest teachers</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{users
+							.filter(teacherFilter)
+							.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Highest level students</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{users
+							.filter(studentFilter)
+							.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
+				<div className="bg-white shadow flex flex-col rounded-xl w-full">
+					<span className="p-4">Highest exam count students</span>
+					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+						{users
+							.filter(studentFilter)
+							.sort(
+								(a, b) =>
+									Object.keys(groupByExam(getStatsByStudent(b))).length - Object.keys(groupByExam(getStatsByStudent(a))).length,
+							)
+							.map((x) => (
+								<UserDisplay key={x.id} {...x} />
+							))}
+					</div>
+				</div>
+			</section>
+		</div>
+	);
+
+	return (
+		<>
+			<Modal isOpen={showModal} onClose={() => setSelectedUser(undefined)}>
+				<>
+					{selectedUser && (
+						<div className="w-full flex flex-col gap-8">
+							<UserCard
+								onClose={(shouldReload) => {
+									setSelectedUser(undefined);
+									if (shouldReload) reload();
+								}}
+								onViewStudents={
+									selectedUser.type === "corporate" || selectedUser.type === "teacher" ? () => setPage("students") : undefined
+								}
+								onViewTeachers={selectedUser.type === "corporate" ? () => setPage("teachers") : undefined}
+								{...selectedUser}
+							/>
+						</div>
+					)}
+				</>
+			</Modal>
+			{page === "students" && <StudentsList />}
+			{page === "teachers" && <TeachersList />}
+			{page === "" && <DefaultDashboard />}
+		</>
+	);
+}

src/dashboards/IconCard.tsx

@@ -0,0 +1,30 @@
+import clsx from "clsx";
+import {IconType} from "react-icons";
+
+interface Props {
+	Icon: IconType;
+	label: string;
+	value: string | number;
+	color: "purple" | "rose" | "red";
+	onClick?: () => void;
+}
+
+export default function IconCard({Icon, label, value, color, onClick}: Props) {
+	const colorClasses: {[key in typeof color]: string} = {
+		purple: "text-mti-purple-light",
+		red: "text-mti-red-light",
+		rose: "text-mti-rose-light",
+	};
+
+	return (
+		<div
+			onClick={onClick}
+			className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
+			<Icon className={clsx("text-6xl", colorClasses[color])} />
+			<span className="flex flex-col gap-1 items-center text-xl">
+				<span className="text-lg">{label}</span>
+				<span className={clsx("font-semibold", colorClasses[color])}>{value}</span>
+			</span>
+		</div>
+	);
+}

src/dashboards/Owner.tsx

@@ -10,6 +10,7 @@ import {useEffect, useState} from "react";
 import {BsArrowLeft, BsGlobeCentralSouthAsia, BsPerson, BsPersonFill, BsPersonFillGear, BsPersonGear, BsPersonLinesFill} from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
+import IconCard from "./IconCard";
 
 interface Props {
 	user: User;
@@ -153,72 +154,53 @@ export default function OwnerDashboard({user}: Props) {
 	const DefaultDashboard = () => (
 		<>
 			<section className="w-full flex flex-wrap gap-4 items-center justify-between">
-				<div
+				<IconCard
+					Icon={BsPersonFill}
+					label="Students"
+					value={users.filter((x) => x.type === "student").length}
 					onClick={() => setPage("students")}
-					className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
-					<BsPersonFill className="text-mti-purple-light text-6xl" />
-					<span className="flex flex-col gap-1 items-center text-xl">
-						<span className="text-lg">Students</span>
-						<span className="font-semibold text-mti-purple">{users.filter((x) => x.type === "student").length}</span>
-					</span>
-				</div>
-				<div
+					color="purple"
+				/>
+				<IconCard
+					Icon={BsPersonLinesFill}
+					label="Teachers"
+					value={users.filter((x) => x.type === "teacher").length}
 					onClick={() => setPage("teachers")}
-					className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
-					<BsPersonLinesFill className="text-mti-purple-light text-6xl" />
-					<span className="flex flex-col gap-1 items-center text-xl">
-						<span className="text-lg">Teachers</span>
-						<span className="font-semibold text-mti-purple">{users.filter((x) => x.type === "teacher").length}</span>
-					</span>
-				</div>
-				<div
+					color="purple"
+				/>
+				<IconCard
+					Icon={BsPersonLinesFill}
+					label="Corporate"
+					value={users.filter((x) => x.type === "corporate").length}
 					onClick={() => setPage("corporate")}
-					className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
-					<BsPersonFillGear className="text-mti-purple-light text-6xl" />
-					<span className="flex flex-col gap-1 items-center text-xl">
-						<span className="text-lg">Corporate</span>
-						<span className="font-semibold text-mti-purple">{users.filter((x) => x.type === "corporate").length}</span>
-					</span>
-				</div>
-				<div className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
-					<BsGlobeCentralSouthAsia className="text-mti-purple-light text-6xl" />
-					<span className="flex flex-col gap-1 items-center text-xl">
-						<span className="text-lg">Countries</span>
-						<span className="font-semibold text-mti-purple">
-							{[...new Set(users.filter((x) => x.demographicInformation).map((x) => x.demographicInformation?.country))].length}
-						</span>
-					</span>
-				</div>
-				<div
+					color="purple"
+				/>
+				<IconCard
+					Icon={BsGlobeCentralSouthAsia}
+					label="Countries"
+					value={[...new Set(users.filter((x) => x.demographicInformation).map((x) => x.demographicInformation?.country))].length}
+					color="purple"
+				/>
+				<IconCard
 					onClick={() => setPage("inactiveStudents")}
-					className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
-					<BsPerson className="text-mti-rose-light text-6xl" />
-					<span className="flex flex-col gap-1 items-center text-xl">
-						<span className="text-lg">Inactive Students</span>
-						<span className="font-semibold text-mti-rose">
-							{
-								users.filter(
-									(x) => x.type === "student" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)),
-								).length
+					Icon={BsPerson}
+					label="Inactive Students"
+					value={
+						users.filter((x) => x.type === "student" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)))
+							.length
 					}
-						</span>
-					</span>
-				</div>
-				<div
+					color="rose"
+				/>
+				<IconCard
 					onClick={() => setPage("inactiveCorporate")}
-					className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
-					<BsPersonGear className="text-mti-rose-light text-6xl" />
-					<span className="flex flex-col gap-1 items-center text-xl">
-						<span className="text-lg text-center">Inactive Corporate</span>
-						<span className="font-semibold text-mti-rose">
-							{
-								users.filter(
-									(x) => x.type === "corporate" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)),
-								).length
+					Icon={BsPerson}
+					label="Inactive Corporate"
+					value={
+						users.filter((x) => x.type === "corporate" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)))
+							.length
 					}
-						</span>
-					</span>
-				</div>
+					color="rose"
+				/>
 			</section>
 
 			<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full justify-between">

src/interfaces/user.ts

@@ -77,5 +77,5 @@ export interface Group {
 	disableEditing?: boolean;
 }
 
-export type Type = "student" | "teacher" | "corporate" | "owner" | "developer";
-export const userTypes: Type[] = ["student", "teacher", "corporate", "owner", "developer"];
+export type Type = "student" | "teacher" | "corporate" | "owner" | "developer" | "agent";
+export const userTypes: Type[] = ["student", "teacher", "corporate", "owner", "developer", "agent"];

src/pages/api/reset/sendVerification.ts

@@ -13,8 +13,6 @@ async function sendVerification(req: NextApiRequest, res: NextApiResponse) {
 	const short = new ShortUniqueId();
 
 	if (req.session.user) {
-		console.log("ME HERE");
-
 		const transport = prepareMailer("verification");
 		const mailOptions = prepareMailOptions(
 			{
@@ -27,8 +25,7 @@ async function sendVerification(req: NextApiRequest, res: NextApiResponse) {
 			"verification",
 		);
 
-		const result = await transport.sendMail(mailOptions);
-		console.log(result);
+		await transport.sendMail(mailOptions);
 
 		res.status(200).json({ok: true});
 		return;

src/pages/api/stats/index.ts

@@ -21,8 +21,7 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 		return;
 	}
 
-	const user = req.session.user;
-	const q = query(collection(db, "stats"), where("user", "==", user.id));
+	const q = query(collection(db, "stats"));
 
 	const snapshot = await getDocs(q);
 

src/pages/index.tsx

@@ -24,6 +24,7 @@ import {MODULE_ARRAY} from "@/utils/moduleUtils";
 import ProfileSummary from "@/components/ProfileSummary";
 import StudentDashboard from "@/dashboards/Student";
 import OwnerDashboard from "@/dashboards/Owner";
+import CorporateDashboard from "@/dashboards/Corporate";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -163,7 +164,7 @@ export default function Home() {
 				<Layout user={user}>
 					{user.type === "student" && <StudentDashboard user={user} />}
 					{user.type === "teacher" && <StudentDashboard user={user} />}
-					{user.type === "corporate" && <StudentDashboard user={user} />}
+					{user.type === "corporate" && <CorporateDashboard user={user} />}
 					{user.type === "owner" && <StudentDashboard user={user} />}
 					{user.type === "developer" && <OwnerDashboard user={user} />}
 				</Layout>

src/utils/stats.ts

@@ -121,6 +121,7 @@ export const getExamsBySession = (stats: Stat[], session: string) => {
 
 export const groupBySession = (stats: Stat[]) => groupBy(stats, "session");
 export const groupByDate = (stats: Stat[]) => groupBy(stats, "date");
+export const groupByExam = (stats: Stat[]) => groupBy(stats, "exam");
 export const groupByModule = (stats: Stat[]) => groupBy(stats, "module");
 
 export const convertToUserSolutions = (stats: Stat[]): UserSolution[] => {