ENCOA-120: Prevent Assignment Creator from disappearing

src/dashboards/AssignmentCreator.tsx

@@ -24,14 +24,13 @@ import useExams from "@/hooks/useExams";
 
 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) {
+export default function AssignmentCreator({isCreating, assignment, 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(

src/dashboards/Teacher.tsx

@@ -2,486 +2,410 @@
 import Modal from "@/components/Modal";
 import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
 import useUsers from "@/hooks/useUsers";
-import { CorporateUser, Group, Stat, User } from "@/interfaces/user";
+import {CorporateUser, Group, Stat, User} from "@/interfaces/user";
 import UserList from "@/pages/(admin)/Lists/UserList";
-import { dateSorter } from "@/utils";
+import {dateSorter} from "@/utils";
 import moment from "moment";
-import { useEffect, useState } from "react";
+import {useEffect, useMemo, useState} from "react";
 import {
-  BsArrowLeft,
+	BsArrowLeft,
-  BsArrowRepeat,
+	BsArrowRepeat,
-  BsClipboard2Data,
+	BsClipboard2Data,
-  BsClipboard2DataFill,
+	BsClipboard2DataFill,
-  BsClipboard2Heart,
+	BsClipboard2Heart,
-  BsClipboard2X,
+	BsClipboard2X,
-  BsClipboardPulse,
+	BsClipboardPulse,
-  BsClock,
+	BsClock,
-  BsEnvelopePaper,
+	BsEnvelopePaper,
-  BsGlobeCentralSouthAsia,
+	BsGlobeCentralSouthAsia,
-  BsPaperclip,
+	BsPaperclip,
-  BsPeople,
+	BsPeople,
-  BsPerson,
+	BsPerson,
-  BsPersonAdd,
+	BsPersonAdd,
-  BsPersonFill,
+	BsPersonFill,
-  BsPersonFillGear,
+	BsPersonFillGear,
-  BsPersonGear,
+	BsPersonGear,
-  BsPlus,
+	BsPlus,
-  BsRepeat,
+	BsRepeat,
-  BsRepeat1,
+	BsRepeat1,
 } from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
-import { calculateAverageLevel, calculateBandScore } from "@/utils/score";
+import {calculateAverageLevel, calculateBandScore} from "@/utils/score";
-import { MODULE_ARRAY } from "@/utils/moduleUtils";
+import {MODULE_ARRAY} from "@/utils/moduleUtils";
-import { Module } from "@/interfaces";
+import {Module} from "@/interfaces";
-import { groupByExam } from "@/utils/stats";
+import {groupByExam} from "@/utils/stats";
 import IconCard from "./IconCard";
 import GroupList from "@/pages/(admin)/Lists/GroupList";
 import useAssignments from "@/hooks/useAssignments";
-import { Assignment } from "@/interfaces/results";
+import {Assignment} from "@/interfaces/results";
 import AssignmentCard from "./AssignmentCard";
 import Button from "@/components/Low/Button";
 import clsx from "clsx";
 import ProgressBar from "@/components/Low/ProgressBar";
 import AssignmentCreator from "./AssignmentCreator";
 import AssignmentView from "./AssignmentView";
-import { getUserCorporate } from "@/utils/groups";
+import {getUserCorporate} from "@/utils/groups";
-import { checkAccess } from "@/utils/permissions";
+import {checkAccess} from "@/utils/permissions";
 import usePermissions from "@/hooks/usePermissions";
-import {
+import {futureAssignmentFilter, pastAssignmentFilter, archivedAssignmentFilter, activeAssignmentFilter} from "@/utils/assignments";
-	futureAssignmentFilter,
-	pastAssignmentFilter,
-	archivedAssignmentFilter,
-	activeAssignmentFilter
-} from '@/utils/assignments';
 
 interface Props {
-  user: User;
+	user: User;
 }
 
-export default function TeacherDashboard({ user }: Props) {
+export default function TeacherDashboard({user}: Props) {
-  const [page, setPage] = useState("");
+	const [page, setPage] = useState("");
-  const [selectedUser, setSelectedUser] = useState<User>();
+	const [selectedUser, setSelectedUser] = useState<User>();
-  const [showModal, setShowModal] = useState(false);
+	const [showModal, setShowModal] = useState(false);
-  const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
+	const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
-  const [isCreatingAssignment, setIsCreatingAssignment] = useState(false);
+	const [isCreatingAssignment, setIsCreatingAssignment] = useState(false);
-  const [corporateUserToShow, setCorporateUserToShow] =
+	const [corporateUserToShow, setCorporateUserToShow] = useState<CorporateUser>();
-    useState<CorporateUser>();
 
-  const { data: stats } = useFilterRecordsByUser<Stat[]>();
+	const {data: stats} = useFilterRecordsByUser<Stat[]>();
-  const { users, reload } = useUsers();
+	const {users, reload} = useUsers();
-  const { groups } = useGroups({ adminAdmins: user.id });
+	const {groups} = useGroups({adminAdmins: user.id});
-  const { permissions } = usePermissions(user.id);
+	const {permissions} = usePermissions(user.id);
-  const {
+	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({assigner: user.id});
-    assignments,
-    isLoading: isAssignmentsLoading,
-    reload: reloadAssignments,
-  } = useAssignments({ assigner: user.id });
 
-  useEffect(() => {
+	const assignmentsGroups = useMemo(() => groups.filter((x) => x.admin === user.id || x.participants.includes(user.id)), [groups, user.id]);
-    setShowModal(!!selectedUser && page === "");
-  }, [selectedUser, page]);
 
-  useEffect(() => {
+	const assignmentsUsers = useMemo(
-    getUserCorporate(user.id).then(setCorporateUserToShow);
+		() =>
-  }, [user]);
+			users.filter(
+				(x) =>
+					x.type === "student" &&
+					(!!selectedUser
+						? groups
+								.filter((g) => g.admin === selectedUser.id)
+								.flatMap((g) => g.participants)
+								.includes(x.id)
+						: groups.flatMap((g) => g.participants).includes(x.id)),
+			),
+		[groups, users, selectedUser],
+	);
 
-  const studentFilter = (user: User) =>
+	useEffect(() => {
-    user.type === "student" &&
+		setShowModal(!!selectedUser && page === "");
-    groups.flatMap((g) => g.participants).includes(user.id);
+	}, [selectedUser, page]);
 
-  const getStatsByStudent = (user: User) =>
+	useEffect(() => {
-    stats.filter((s) => s.user === user.id);
+		getUserCorporate(user.id).then(setCorporateUserToShow);
+	}, [user]);
 
-  const UserDisplay = (displayUser: User) => (
+	const studentFilter = (user: User) => user.type === "student" && groups.flatMap((g) => g.participants).includes(user.id);
-    <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 getStatsByStudent = (user: User) => stats.filter((s) => s.user === user.id);
-    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 (
+	const UserDisplay = (displayUser: User) => (
-      <UserList
+		<div
-        user={user}
+			onClick={() => setSelectedUser(displayUser)}
-        filters={[filter]}
+			className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300">
-        renderHeader={(total) => (
+			<img src={displayUser.profilePicture} alt={displayUser.name} className="rounded-full w-10 h-10" />
-          <div className="flex flex-col gap-4">
+			<div className="flex flex-col gap-1 items-start">
-            <div
+				<span>{displayUser.name}</span>
-              onClick={() => setPage("")}
+				<span className="text-sm opacity-75">{displayUser.email}</span>
-              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+			</div>
-            >
+		</div>
-              <BsArrowLeft className="text-xl" />
+	);
-              <span>Back</span>
-            </div>
-            <h2 className="text-2xl font-semibold">Students ({total})</h2>
-          </div>
-        )}
-      />
-    );
-  };
 
-  const GroupsList = () => {
+	const StudentsList = () => {
-    const filter = (x: Group) => x.admin === user.id;
+		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 (
+		return (
-      <>
+			<UserList
-        <div className="flex flex-col gap-4">
+				user={user}
-          <div
+				filters={[filter]}
-            onClick={() => setPage("")}
+				renderHeader={(total) => (
-            className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+					<div className="flex flex-col gap-4">
-          >
+						<div
-            <BsArrowLeft className="text-xl" />
+							onClick={() => setPage("")}
-            <span>Back</span>
+							className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
-          </div>
+							<BsArrowLeft className="text-xl" />
-          <h2 className="text-2xl font-semibold">
+							<span>Back</span>
-            Groups ({groups.filter(filter).length})
+						</div>
-          </h2>
+						<h2 className="text-2xl font-semibold">Students ({total})</h2>
-        </div>
+					</div>
+				)}
+			/>
+		);
+	};
 
-        <GroupList user={user} />
+	const GroupsList = () => {
-      </>
+		const filter = (x: Group) => x.admin === user.id;
-    );
-  };
 
-  const averageLevelCalculator = (studentStats: Stat[]) => {
+		return (
-    const formattedStats = studentStats
+			<>
-      .map((s) => ({
+				<div className="flex flex-col gap-4">
-        focus: users.find((u) => u.id === s.user)?.focus,
+					<div
-        score: s.score,
+						onClick={() => setPage("")}
-        module: s.module,
+						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" />
-      .filter((f) => !!f.focus);
+						<span>Back</span>
-    const bandScores = formattedStats.map((s) => ({
+					</div>
-      module: s.module,
+					<h2 className="text-2xl font-semibold">Groups ({groups.filter(filter).length})</h2>
-      level: calculateBandScore(
+				</div>
-        s.score.correct,
-        s.score.total,
-        s.module,
-        s.focus!
-      ),
-    }));
 
-    const levels: { [key in Module]: number } = {
+				<GroupList user={user} />
-      reading: 0,
+			</>
-      listening: 0,
+		);
-      writing: 0,
+	};
-      speaking: 0,
-      level: 0,
-    };
-    bandScores.forEach((b) => (levels[b.module] += b.level));
 
-    return calculateAverageLevel(levels);
+	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 AssignmentsPage = () => {
+		const levels: {[key in Module]: number} = {
-    return (
+			reading: 0,
-      <>
+			listening: 0,
-        <AssignmentView
+			writing: 0,
-          isOpen={!!selectedAssignment && !isCreatingAssignment}
+			speaking: 0,
-          onClose={() => {
+			level: 0,
-            setSelectedAssignment(undefined);
+		};
-            setIsCreatingAssignment(false);
+		bandScores.forEach((b) => (levels[b.module] += b.level));
-            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)
-                : 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(activeAssignmentFilter).length})
-          </h2>
-          <div className="flex flex-wrap gap-2">
-            {assignments.filter(activeAssignmentFilter).map((a) => (
-              <AssignmentCard
-                {...a}
-                users={users}
-                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(futureAssignmentFilter).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(futureAssignmentFilter).map((a) => (
-              <AssignmentCard
-                {...a}
-                users={users}
-                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(pastAssignmentFilter).length})
-          </h2>
-          <div className="flex flex-wrap gap-2">
-            {assignments.filter(pastAssignmentFilter).map((a) => (
-              <AssignmentCard
-                {...a}
-                users={users}
-                onClick={() => setSelectedAssignment(a)}
-                key={a.id}
-                allowDownload
-                reload={reloadAssignments}
-                allowArchive
-                allowExcelDownload
-              />
-            ))}
-          </div>
-        </section>
-        <section className="flex flex-col gap-4">
-          <h2 className="text-2xl font-semibold">
-            Archived Assignments ({assignments.filter(archivedAssignmentFilter).length})
-          </h2>
-          <div className="flex flex-wrap gap-2">
-            {assignments.filter(archivedAssignmentFilter).map((a) => (
-              <AssignmentCard
-                {...a}
-                users={users}
-                onClick={() => setSelectedAssignment(a)}
-                key={a.id}
-                allowDownload
-                reload={reloadAssignments}
-                allowUnarchive
-                allowExcelDownload
-              />
-            ))}
-          </div>
-        </section>
-      </>
-    );
-  };
 
-  const DefaultDashboard = () => (
+		return calculateAverageLevel(levels);
-    <>
+	};
-      {corporateUserToShow && (
-        <div className="absolute top-4 right-4 bg-neutral-200 px-2 rounded-lg py-1">
-          Linked to:{" "}
-          <b>
-            {corporateUserToShow?.corporateInformation?.companyInformation
-              .name || corporateUserToShow.name}
-          </b>
-        </div>
-      )}
-      <section
-        className={clsx(
-          "flex -lg:flex-wrap gap-4 items-center -lg:justify-center lg:justify-start text-center",
-          !!corporateUserToShow && "mt-12 xl:mt-6"
-        )}
-      >
-        <IconCard
-          onClick={() => setPage("students")}
-          Icon={BsPersonFill}
-          label="Students"
-          value={users.filter(studentFilter).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"
-        />
-        {checkAccess(
-          user,
-          ["teacher", "developer"],
-          permissions,
-          "viewGroup"
-        ) && (
-          <IconCard
-            Icon={BsPeople}
-            label="Groups"
-            value={groups.filter((x) => x.admin === user.id).length}
-            color="purple"
-            onClick={() => setPage("groups")}
-          />
-        )}
-        <div
-          onClick={() => setPage("assignments")}
-          className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-96 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300"
-        >
-          <BsEnvelopePaper className="text-6xl text-mti-purple-light" />
-          <span className="flex flex-col gap-1 items-center text-xl">
-            <span className="text-lg">Assignments</span>
-            <span className="font-semibold text-mti-purple-light">
-              {assignments.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">
+	const AssignmentsPage = () => {
-        <div className="bg-white shadow flex flex-col rounded-xl w-full">
+		return (
-          <span className="p-4">Latest students</span>
+			<>
-          <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+				<AssignmentView
-            {users
+					isOpen={!!selectedAssignment && !isCreatingAssignment}
-              .filter(studentFilter)
+					onClose={() => {
-              .sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
+						setSelectedAssignment(undefined);
-              .map((x) => (
+						setIsCreatingAssignment(false);
-                <UserDisplay key={x.id} {...x} />
+						reloadAssignments();
-              ))}
+					}}
-          </div>
+					assignment={selectedAssignment}
-        </div>
+				/>
-        <div className="bg-white shadow flex flex-col rounded-xl w-full">
+				<AssignmentCreator
-          <span className="p-4">Highest level students</span>
+					assignment={selectedAssignment}
-          <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+					groups={assignmentsGroups}
-            {users
+					users={assignmentsUsers}
-              .filter(studentFilter)
+					isCreating={isCreatingAssignment}
-              .sort(
+					cancelCreation={() => {
-                (a, b) =>
+						setIsCreatingAssignment(false);
-                  calculateAverageLevel(b.levels) -
+						setSelectedAssignment(undefined);
-                  calculateAverageLevel(a.levels)
+						reloadAssignments();
-              )
+					}}
-              .map((x) => (
+				/>
-                <UserDisplay key={x.id} {...x} />
+				<div className="w-full flex justify-between items-center">
-              ))}
+					<div
-          </div>
+						onClick={() => setPage("")}
-        </div>
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
-        <div className="bg-white shadow flex flex-col rounded-xl w-full">
+						<BsArrowLeft className="text-xl" />
-          <span className="p-4">Highest exam count students</span>
+						<span>Back</span>
-          <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+					</div>
-            {users
+					<div
-              .filter(studentFilter)
+						onClick={reloadAssignments}
-              .sort(
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
-                (a, b) =>
+						<span>Reload</span>
-                  Object.keys(groupByExam(getStatsByStudent(b))).length -
+						<BsArrowRepeat className={clsx("text-xl", isAssignmentsLoading && "animate-spin")} />
-                  Object.keys(groupByExam(getStatsByStudent(a))).length
+					</div>
-              )
+				</div>
-              .map((x) => (
+				<section className="flex flex-col gap-4">
-                <UserDisplay key={x.id} {...x} />
+					<h2 className="text-2xl font-semibold">Active Assignments ({assignments.filter(activeAssignmentFilter).length})</h2>
-              ))}
+					<div className="flex flex-wrap gap-2">
-          </div>
+						{assignments.filter(activeAssignmentFilter).map((a) => (
-        </div>
+							<AssignmentCard {...a} users={users} onClick={() => setSelectedAssignment(a)} key={a.id} />
-      </section>
+						))}
-    </>
+					</div>
-  );
+				</section>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Planned Assignments ({assignments.filter(futureAssignmentFilter).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(futureAssignmentFilter).map((a) => (
+							<AssignmentCard
+								{...a}
+								users={users}
+								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(pastAssignmentFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						{assignments.filter(pastAssignmentFilter).map((a) => (
+							<AssignmentCard
+								{...a}
+								users={users}
+								onClick={() => setSelectedAssignment(a)}
+								key={a.id}
+								allowDownload
+								reload={reloadAssignments}
+								allowArchive
+								allowExcelDownload
+							/>
+						))}
+					</div>
+				</section>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Archived Assignments ({assignments.filter(archivedAssignmentFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						{assignments.filter(archivedAssignmentFilter).map((a) => (
+							<AssignmentCard
+								{...a}
+								users={users}
+								onClick={() => setSelectedAssignment(a)}
+								key={a.id}
+								allowDownload
+								reload={reloadAssignments}
+								allowUnarchive
+								allowExcelDownload
+							/>
+						))}
+					</div>
+				</section>
+			</>
+		);
+	};
 
-  return (
+	const DefaultDashboard = () => (
-    <>
+		<>
-      <Modal isOpen={showModal} onClose={() => setSelectedUser(undefined)}>
+			{corporateUserToShow && (
-        <>
+				<div className="absolute top-4 right-4 bg-neutral-200 px-2 rounded-lg py-1">
-          {selectedUser && (
+					Linked to: <b>{corporateUserToShow?.corporateInformation?.companyInformation.name || corporateUserToShow.name}</b>
-            <div className="w-full flex flex-col gap-8">
+				</div>
-              <UserCard
+			)}
-                loggedInUser={user}
+			<section
-                onClose={(shouldReload) => {
+				className={clsx(
-                  setSelectedUser(undefined);
+					"flex -lg:flex-wrap gap-4 items-center -lg:justify-center lg:justify-start text-center",
-                  if (shouldReload) reload();
+					!!corporateUserToShow && "mt-12 xl:mt-6",
-                }}
+				)}>
-                onViewStudents={
+				<IconCard
-                  selectedUser.type === "corporate" ||
+					onClick={() => setPage("students")}
-                  selectedUser.type === "teacher"
+					Icon={BsPersonFill}
-                    ? () => setPage("students")
+					label="Students"
-                    : undefined
+					value={users.filter(studentFilter).length}
-                }
+					color="purple"
-                onViewTeachers={
+				/>
-                  selectedUser.type === "corporate"
+				<IconCard
-                    ? () => setPage("teachers")
+					Icon={BsClipboard2Data}
-                    : undefined
+					label="Exams Performed"
-                }
+					value={stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user)).length}
-                user={selectedUser}
+					color="purple"
-              />
+				/>
-            </div>
+				<IconCard
-          )}
+					Icon={BsPaperclip}
-        </>
+					label="Average Level"
-      </Modal>
+					value={averageLevelCalculator(stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user))).toFixed(1)}
-      {page === "students" && <StudentsList />}
+					color="purple"
-      {page === "groups" && <GroupsList />}
+				/>
-      {page === "assignments" && <AssignmentsPage />}
+				{checkAccess(user, ["teacher", "developer"], permissions, "viewGroup") && (
-      {page === "" && <DefaultDashboard />}
+					<IconCard
-    </>
+						Icon={BsPeople}
-  );
+						label="Groups"
+						value={groups.filter((x) => x.admin === user.id).length}
+						color="purple"
+						onClick={() => setPage("groups")}
+					/>
+				)}
+				<div
+					onClick={() => setPage("assignments")}
+					className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-96 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
+					<BsEnvelopePaper className="text-6xl text-mti-purple-light" />
+					<span className="flex flex-col gap-1 items-center text-xl">
+						<span className="text-lg">Assignments</span>
+						<span className="font-semibold text-mti-purple-light">{assignments.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">
+						{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">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>
+		</>
+	);
+
+	return (
+		<>
+			<Modal isOpen={showModal} onClose={() => setSelectedUser(undefined)}>
+				<>
+					{selectedUser && (
+						<div className="w-full flex flex-col gap-8">
+							<UserCard
+								loggedInUser={user}
+								onClose={(shouldReload) => {
+									setSelectedUser(undefined);
+									if (shouldReload) reload();
+								}}
+								onViewStudents={
+									selectedUser.type === "corporate" || selectedUser.type === "teacher" ? () => setPage("students") : undefined
+								}
+								onViewTeachers={selectedUser.type === "corporate" ? () => setPage("teachers") : undefined}
+								user={selectedUser}
+							/>
+						</div>
+					)}
+				</>
+			</Modal>
+			{page === "students" && <StudentsList />}
+			{page === "groups" && <GroupsList />}
+			{page === "assignments" && <AssignmentsPage />}
+			{page === "" && <DefaultDashboard />}
+		</>
+	);
 }