Did the same treatment to Corporate and Teacher dashboards

src/dashboards/Teacher.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
 import Modal from "@/components/Modal";
 import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
-import useUsers, {  userHashStudent, userHashTeacher, userHashCorporate } from "@/hooks/useUsers";
+import useUsers, {userHashStudent, userHashTeacher, userHashCorporate} from "@/hooks/useUsers";
 import {CorporateUser, Group, MasterCorporateUser, Stat, User} from "@/interfaces/user";
 import UserList from "@/pages/(admin)/Lists/UserList";
 import {dateSorter} from "@/utils";
@@ -58,6 +58,12 @@ interface Props {
 	linkedCorporate?: CorporateUser | MasterCorporateUser;
 }
 
+const studentHash = {
+	type: "student",
+	orderBy: "registrationDate",
+	size: 25,
+};
+
 export default function TeacherDashboard({user, linkedCorporate}: Props) {
 	const [selectedUser, setSelectedUser] = useState<User>();
 	const [showModal, setShowModal] = useState(false);
@@ -67,26 +73,13 @@ export default function TeacherDashboard({user, linkedCorporate}: Props) {
 	const {permissions} = usePermissions(user.id);
 	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({assigner: user.id});
 
-	const {users: students, reload: reloadStudents, isLoading: isStudentsLoading} = useUsers(userHashStudent);
+	const {users: students, total: totalStudents, reload: reloadStudents, isLoading: isStudentsLoading} = useUsers(studentHash);
 
 	const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
 	const router = useRouter();
 
 	const assignmentsGroups = useMemo(() => groups.filter((x) => x.admin === user.id || x.participants.includes(user.id)), [groups, user.id]);
 
-	const assignmentsUsers = useMemo(
-		() =>
-			students.filter((x) =>
-				!!selectedUser
-					? groups
-							.filter((g) => g.admin === selectedUser.id)
-							.flatMap((g) => g.participants)
-							.includes(x.id)
-					: groups.flatMap((g) => g.participants).includes(x.id),
-			),
-		[groups, students, selectedUser],
-	);
-
 	useEffect(() => {
 		setShowModal(!!selectedUser && router.asPath === "/#");
 	}, [selectedUser, router.asPath]);
@@ -150,96 +143,36 @@ export default function TeacherDashboard({user, linkedCorporate}: Props) {
 		return calculateAverageLevel(levels);
 	};
 
-	const DefaultDashboard = () => (
-		<>
-			{linkedCorporate && (
-				<div className="absolute top-4 right-4 bg-neutral-200 px-2 rounded-lg py-1">
-					Linked to: <b>{linkedCorporate?.corporateInformation?.companyInformation.name || linkedCorporate.name}</b>
-				</div>
-			)}
-			<section
-				className={clsx(
-					"flex -lg:flex-wrap gap-4 items-center -lg:justify-center lg:justify-start text-center",
-					!!linkedCorporate && "mt-12 xl:mt-6",
-				)}>
-				<IconCard
-					onClick={() => router.push("/#students")}
-					isLoading={isStudentsLoading}
-					Icon={BsPersonFill}
-					label="Students"
-					value={students.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"
-					isLoading={isStudentsLoading}
-					value={averageLevelCalculator(stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user))).toFixed(1)}
-					color="purple"
-				/>
-				{checkAccess(user, ["teacher", "developer"], permissions, "viewGroup") && (
-					<IconCard
-						Icon={BsPeople}
-						label="Groups"
-						value={groups.filter((x) => x.admin === user.id).length}
-						color="purple"
-						onClick={() => router.push("/#groups")}
-					/>
+	if (router.asPath === "/#students")
+		return (
+			<UserList
+				user={user}
+				type="student"
+				renderHeader={(total) => (
+					<div className="flex flex-col gap-4">
+						<div
+							onClick={() => router.push("/")}
+							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 ({total})</h2>
+					</div>
 				)}
-				<div
-					onClick={() => router.push("/#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.filter((a) => !a.archived).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">
-				<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">
-						{students
-							.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">
-						{students
-							.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">
-						{students
-							.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>
-		</>
-	);
+			/>
+		);
+	if (router.asPath === "/#assignments")
+		return (
+			<AssignmentsPage
+				assignments={assignments}
+				groups={assignmentsGroups}
+				user={user}
+				reloadAssignments={reloadAssignments}
+				isLoading={isAssignmentsLoading}
+				onBack={() => router.push("/")}
+			/>
+		);
+	if (router.asPath === "/#groups") return <GroupsList />;
 
 	return (
 		<>
@@ -299,36 +232,95 @@ export default function TeacherDashboard({user, linkedCorporate}: Props) {
 					)}
 				</>
 			</Modal>
-			{router.asPath === "/#students" && (
-				<UserList
-					user={user}
-					type="student"
-					renderHeader={(total) => (
-						<div className="flex flex-col gap-4">
-							<div
-								onClick={() => router.push("/")}
-								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 ({total})</h2>
-						</div>
+
+			<>
+				{linkedCorporate && (
+					<div className="absolute top-4 right-4 bg-neutral-200 px-2 rounded-lg py-1">
+						Linked to: <b>{linkedCorporate?.corporateInformation?.companyInformation.name || linkedCorporate.name}</b>
+					</div>
+				)}
+				<section
+					className={clsx(
+						"flex -lg:flex-wrap gap-4 items-center -lg:justify-center lg:justify-start text-center",
+						!!linkedCorporate && "mt-12 xl:mt-6",
+					)}>
+					<IconCard
+						onClick={() => router.push("/#students")}
+						isLoading={isStudentsLoading}
+						Icon={BsPersonFill}
+						label="Students"
+						value={totalStudents}
+						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"
+						isLoading={isStudentsLoading}
+						value={averageLevelCalculator(stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user))).toFixed(1)}
+						color="purple"
+					/>
+					{checkAccess(user, ["teacher", "developer"], permissions, "viewGroup") && (
+						<IconCard
+							Icon={BsPeople}
+							label="Groups"
+							value={groups.filter((x) => x.admin === user.id).length}
+							color="purple"
+							onClick={() => router.push("/#groups")}
+						/>
 					)}
-				/>
-			)}
-			{router.asPath === "/#groups" && <GroupsList />}
-			{router.asPath === "/#assignments" && (
-				<AssignmentsPage
-					assignments={assignments}
-					groups={assignmentsGroups}
-					users={assignmentsUsers}
-					user={user}
-					reloadAssignments={reloadAssignments}
-					isLoading={isAssignmentsLoading}
-					onBack={() => router.push("/")}
-				/>
-			)}
-			{router.asPath === "/" && <DefaultDashboard />}
+					<div
+						onClick={() => router.push("/#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.filter((a) => !a.archived).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">
+					<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">
+							{students
+								.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">
+							{students
+								.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">
+							{students
+								.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>
+			</>
 		</>
 	);
 }