Merge with develop

src/components/Diagnostic.tsx

@@ -43,7 +43,7 @@ export default function Diagnostic({onFinish}: Props) {
 			if (exams.every((x) => !!x)) {
 				setExams(exams.map((x) => x!));
 				setSelectedModules(exams.map((x) => x!.module));
-				router.push("/exercises");
+				router.push("/exam");
 			}
 		});
 	};

src/components/High/CardList.tsx

@@ -0,0 +1,34 @@
+import {useListSearch} from "@/hooks/useListSearch";
+import usePagination from "@/hooks/usePagination";
+import { clsx } from "clsx";
+import {ReactNode} from "react";
+import Checkbox from "../Low/Checkbox";
+import Separator from "../Low/Separator";
+
+interface Props<T> {
+	list: T[];
+	searchFields: string[][];
+	pageSize?: number;
+	firstCard?: () => ReactNode;
+	renderCard: (item: T) => ReactNode;
+	className?: string
+}
+
+export default function CardList<T>({list, searchFields, renderCard, firstCard, className, pageSize = 20}: Props<T>) {
+	const {rows, renderSearch} = useListSearch(searchFields, list);
+
+	const {items, page, render, renderMinimal} = usePagination(rows, pageSize);
+
+	return (
+		<section className="flex flex-col gap-4 w-full">
+			<div className="w-full flex items-center gap-4">
+				{searchFields.length > 0 && renderSearch()}
+				{searchFields.length > 0 ? renderMinimal() : render()}
+			</div>
+			<div className={clsx("w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", className)}>
+				{page === 0 && !!firstCard && firstCard()}
+				{items.map(renderCard)}
+			</div>
+		</section>
+	);
+}

src/components/High/Layout.tsx

@@ -1,45 +1,66 @@
+import useEntities from "@/hooks/useEntities";
+import { EntityWithRoles } from "@/interfaces/entity";
 import {User} from "@/interfaces/user";
 import clsx from "clsx";
 import {useRouter} from "next/router";
-import BottomBar from "../BottomBar";
+import { ToastContainer } from "react-toastify";
 import Navbar from "../Navbar";
 import Sidebar from "../Sidebar";
 
 interface Props {
 	user: User;
+	entities?: EntityWithRoles[]
 	children: React.ReactNode;
 	className?: string;
 	navDisabled?: boolean;
 	focusMode?: boolean;
+	hideSidebar?: boolean
 	bgColor?: string;
 	onFocusLayerMouseEnter?: () => void;
 }
 
-export default function Layout({user, children, className, bgColor="bg-white", navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
+export default function Layout({
+	user,
+	children,
+	className,
+	bgColor="bg-white",
+	hideSidebar,
+	navDisabled = false,
+	focusMode = false,
+	onFocusLayerMouseEnter
+}: Props) {
 	const router = useRouter();
+	const {entities} = useEntities()
 
 	return (
 		<main className={clsx("w-full min-h-full h-screen flex flex-col bg-mti-gray-smoke relative")}>
-			<Navbar
-				path={router.pathname}
-				user={user}
-				navDisabled={navDisabled}
-				focusMode={focusMode}
-				onFocusLayerMouseEnter={onFocusLayerMouseEnter}
-			/>
-			<div className="h-full w-full flex gap-2">
-				<Sidebar
+			<ToastContainer />
+			{!hideSidebar && (
+				<Navbar
 					path={router.pathname}
+					user={user}
 					navDisabled={navDisabled}
 					focusMode={focusMode}
 					onFocusLayerMouseEnter={onFocusLayerMouseEnter}
-					className="-md:hidden"
-					user={user}
 				/>
+			)}
+			<div className={clsx("h-full w-full flex gap-2")}>
+				{!hideSidebar && (
+					<Sidebar
+						path={router.pathname}
+						navDisabled={navDisabled}
+						focusMode={focusMode}
+						onFocusLayerMouseEnter={onFocusLayerMouseEnter}
+						className="-md:hidden"
+						user={user}
+						entities={entities}
+					/>
+				)}
 				<div
 					className={clsx(
-						`w-full min-h-full md:mr-8 ${bgColor} shadow-md rounded-2xl p-4 xl:p-10 pb-8 flex flex-col gap-8 relative overflow-hidden mt-2`,
+						`w-full min-h-full ${bgColor} shadow-md rounded-2xl p-4 xl:p-10 pb-8 flex flex-col gap-8 relative overflow-hidden mt-2`,
 						bgColor !== "bg-white" ? "justify-center" : "h-fit",
+						hideSidebar ? "md:mx-8" : "md:mr-8",
 						className,
 					)}>
 					{children}

src/components/High/Table.tsx

@@ -0,0 +1,107 @@
+import { useListSearch } from "@/hooks/useListSearch"
+import { ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, PaginationState, useReactTable } from "@tanstack/react-table"
+import clsx from "clsx"
+import { useState } from "react"
+import { BsArrowDown, BsArrowUp } from "react-icons/bs"
+import Button from "../Low/Button"
+
+interface Props<T> {
+  data: T[]
+  columns: ColumnDef<any, any>[]
+  searchFields: string[][]
+  size?: number
+  onDownload?: (rows: T[]) => void
+}
+
+export default function Table<T>({ data, columns, searchFields, size = 16, onDownload }: Props<T>) {
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 16,
+  })
+
+  const { rows, renderSearch } = useListSearch<T>(searchFields, data);
+
+  const table = useReactTable({
+    data: rows,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    state: {
+      pagination
+    }
+  });
+
+  return (
+    <div className="w-full flex flex-col gap-2">
+      <div className="w-full flex gap-2 items-end">
+        {renderSearch()}
+        {onDownload && (
+          <Button className="w-full max-w-[200px] mb-1" variant="outline" onClick={() => onDownload(rows)}>
+            Download List
+          </Button>
+        )
+        }
+      </div>
+
+      <div className="w-full flex gap-2 justify-between items-center">
+        <div className="flex items-center gap-4 w-fit">
+          <Button className="w-[200px] h-fit" disabled={!table.getCanPreviousPage()} onClick={() => table.previousPage()}>
+            Previous Page
+          </Button>
+        </div>
+        <div className="flex items-center gap-4 w-fit">
+          <span className="flex items-center gap-1">
+            <div>Page</div>
+            <strong>
+              {table.getState().pagination.pageIndex + 1} of{' '}
+              {table.getPageCount().toLocaleString()}
+            </strong>
+            <div>| Total: {table.getRowCount().toLocaleString()}</div>
+          </span>
+          <Button className="w-[200px]" disabled={!table.getCanNextPage()} onClick={() => table.nextPage()}>
+            Next Page
+          </Button>
+        </div>
+      </div>
+
+      <table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+        <thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <th className="py-4 px-4 text-left" key={header.id} colSpan={header.colSpan}>
+                  <div
+                    className={clsx(header.column.getCanSort() && 'cursor-pointer select-none', 'flex items-center gap-2')}
+                    onClick={header.column.getToggleSortingHandler()}
+                  >
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                    {{
+                      asc: <BsArrowUp />,
+                      desc: <BsArrowDown />,
+                    }[header.column.getIsSorted() as string] ?? null}
+                  </div>
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody className="px-2 w-full">
+          {table.getRowModel().rows.map((row) => (
+            <tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
+              {row.getVisibleCells().map((cell) => (
+                <td className="px-4 py-2 items-center w-fit" key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}

src/components/List.tsx

@@ -1,13 +1,26 @@
+import {useListSearch} from "@/hooks/useListSearch";
+import usePagination from "@/hooks/usePagination";
 import {Column, flexRender, getCoreRowModel, getSortedRowModel, useReactTable} from "@tanstack/react-table";
+import clsx from "clsx";
 import {useMemo, useState} from "react";
 import Button from "./Low/Button";
 
 const SIZE = 25;
 
-export default function List<T>({data, columns}: {data: T[]; columns: any[]}) {
-	const [page, setPage] = useState(0);
+export default function List<T>({
+	data,
+	columns,
+	searchFields = [],
+	pageSize = SIZE,
+}: {
+	data: T[];
+	columns: any[];
+	searchFields?: string[][];
+	pageSize?: number;
+}) {
+	const {rows, renderSearch} = useListSearch(searchFields, data);
 
-	const items = useMemo(() => data.slice(page * SIZE, (page + 1) * SIZE > data.length ? data.length : (page + 1) * SIZE), [data, page]);
+	const {items, page, renderMinimal} = usePagination(rows, pageSize);
 
 	const table = useReactTable({
 		data: items,
@@ -17,19 +30,10 @@ export default function List<T>({data, columns}: {data: T[]; columns: any[]}) {
 	});
 
 	return (
-		<div className="w-full h-full flex flex-col gap-2">
-			<div className="w-full flex gap-2 justify-between">
-				<Button className="w-full max-w-[200px]" disabled={page === 0} onClick={() => setPage((prev) => prev - 1)}>
-					Previous Page
-				</Button>
-				<div className="flex items-center gap-4 w-fit">
-					<span className="opacity-80">
-						{page * SIZE + 1} - {(page + 1) * SIZE > data.length ? data.length : (page + 1) * SIZE} / {data.length}
-					</span>
-					<Button className="w-[200px]" disabled={(page + 1) * SIZE >= data.length} onClick={() => setPage((prev) => prev + 1)}>
-						Next Page
-					</Button>
-				</div>
+		<div className="w-full h-full flex flex-col gap-6">
+			<div className={clsx("w-full flex items-center gap-4", searchFields.length === 0 && "justify-end")}>
+				{searchFields.length > 0 && renderSearch()}
+				{renderMinimal()}
 			</div>
 
 			<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">

src/components/Low/Checkbox.tsx

@@ -5,7 +5,7 @@ import {BsCheck} from "react-icons/bs";
 interface Props {
 	isChecked: boolean;
 	onChange: (isChecked: boolean) => void;
-	children: ReactNode;
+	children?: ReactNode;
 	disabled?: boolean;
 }
 

src/components/Low/Select.tsx

@@ -13,9 +13,10 @@ interface Props {
 	isClearable?: boolean;
 	styles?: StylesConfig<Option, boolean, GroupBase<Option>>;
 	className?: string;
+	label?: string;
 }
 
-export default function Select({value, defaultValue, options, placeholder, disabled, onChange, styles, isClearable, className}: Props) {
+export default function Select({value, defaultValue, options, placeholder, disabled, onChange, styles, isClearable, label, className}: Props) {
 	const [target, setTarget] = useState<HTMLElement>();
 
 	useEffect(() => {
@@ -23,43 +24,46 @@ export default function Select({value, defaultValue, options, placeholder, disab
 	}, []);
 
 	return (
-		<ReactSelect
-			className={
-				styles
-					? undefined
-					: clsx(
-							"placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
-							disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
-							className,
-					  )
-			}
-			options={options}
-			value={value}
-			onChange={onChange as any}
-			placeholder={placeholder}
-			menuPortalTarget={target}
-			defaultValue={defaultValue}
-			styles={
-				styles || {
-					menuPortal: (base) => ({...base, zIndex: 9999}),
-					control: (styles) => ({
-						...styles,
-						paddingLeft: "4px",
-						border: "none",
-						outline: "none",
-						":focus": {
-							outline: "none",
-						},
-					}),
-					option: (styles, state) => ({
-						...styles,
-						backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
-						color: state.isFocused ? "black" : styles.color,
-					}),
+		<div className="w-full flex flex-col gap-3">
+			{label && <label className="font-normal text-base text-mti-gray-dim">{label}</label>}
+			<ReactSelect
+				className={
+					styles
+						? undefined
+						: clsx(
+								"placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
+								disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
+								className,
+						  )
 				}
-			}
-			isDisabled={disabled}
-			isClearable={isClearable}
-		/>
+				options={options}
+				value={value}
+				onChange={onChange as any}
+				placeholder={placeholder}
+				menuPortalTarget={target}
+				defaultValue={defaultValue}
+				styles={
+					styles || {
+						menuPortal: (base) => ({...base, zIndex: 9999}),
+						control: (styles) => ({
+							...styles,
+							paddingLeft: "4px",
+							border: "none",
+							outline: "none",
+							":focus": {
+								outline: "none",
+							},
+						}),
+						option: (styles, state) => ({
+							...styles,
+							backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+							color: state.isFocused ? "black" : styles.color,
+						}),
+					}
+				}
+				isDisabled={disabled}
+				isClearable={isClearable}
+			/>
+		</div>
 	);
 }

src/components/Low/Separator.tsx

@@ -0,0 +1,3 @@
+const Separator = () => <div className="w-full h-[1px] bg-mti-gray-platinum rounded-full" />;
+
+export default Separator;

src/components/Low/Tooltip.tsx

@@ -0,0 +1,17 @@
+import clsx from "clsx";
+import {ReactNode} from "react";
+
+interface Props {
+	tooltip: string;
+	disabled?: boolean;
+	className?: string;
+	children: ReactNode;
+}
+
+export default function Tooltip({tooltip, disabled = false, className, children}: Props) {
+	return (
+		<div className={clsx(!disabled && "tooltip", className)} data-tip={tooltip}>
+			{children}
+		</div>
+	);
+}

src/components/Medium/InviteWithUserCard.tsx

@@ -0,0 +1,67 @@
+import {Invite, InviteWithEntity} from "@/interfaces/invite";
+import {User} from "@/interfaces/user";
+import {getUserName} from "@/utils/users";
+import axios from "axios";
+import {useMemo, useState} from "react";
+import {BsArrowRepeat} from "react-icons/bs";
+import {toast} from "react-toastify";
+
+interface Props {
+	invite: InviteWithEntity;
+	reload: () => void;
+}
+
+export default function InviteWithUserCard({invite, reload}: Props) {
+	const [isLoading, setIsLoading] = useState(false);
+
+	const name = useMemo(() => (!invite.entity ? null : invite.entity.label), [invite.entity]);
+
+	const decide = (decision: "accept" | "decline") => {
+		if (!confirm(`Are you sure you want to ${decision} this invite?`)) return;
+
+		setIsLoading(true);
+		axios
+			.get(`/api/invites/${decision}/${invite.id}`)
+			.then(() => {
+				toast.success(`Successfully ${decision === "accept" ? "accepted" : "declined"} the invite!`, {toastId: "success"});
+				reload();
+			})
+			.catch((e) => {
+				toast.success(`Something went wrong, please try again later!`, {
+					toastId: "error",
+				});
+				reload();
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	return (
+		<div className="border-mti-gray-anti-flash flex min-w-[200px] flex-col gap-6 rounded-xl border p-4 text-black">
+			<span>Invited to <b>{name}</b></span>
+			<div className="flex items-center gap-2">
+				<button
+					onClick={() => decide("accept")}
+					disabled={isLoading}
+					className="bg-mti-green-ultralight hover:bg-mti-green-light w-24 rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed">
+					{!isLoading && "Accept"}
+					{isLoading && (
+						<div className="flex items-center justify-center">
+							<BsArrowRepeat className="animate-spin text-white" size={25} />
+						</div>
+					)}
+				</button>
+				<button
+					onClick={() => decide("decline")}
+					disabled={isLoading}
+					className="bg-mti-red-ultralight hover:bg-mti-red-light w-24 rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed">
+					{!isLoading && "Decline"}
+					{isLoading && (
+						<div className="flex items-center justify-center">
+							<BsArrowRepeat className="animate-spin text-white" size={25} />
+						</div>
+					)}
+				</button>
+			</div>
+		</div>
+	);
+}

src/components/Medium/RecordFilter.tsx

@@ -1,11 +1,13 @@
 import { User } from "@/interfaces/user";
 import { checkAccess } from "@/utils/permissions";
 import Select from "../Low/Select";
-import { ReactNode, useEffect, useState } from "react";
+import { ReactNode, useEffect, useMemo, useState } from "react";
 import clsx from "clsx";
 import useUsers from "@/hooks/useUsers";
 import useGroups from "@/hooks/useGroups";
 import useRecordStore from "@/stores/recordStore";
+import { EntityWithRoles } from "@/interfaces/entity";
+import { mapBy } from "@/utils";
 
 
 type TimeFilter = "months" | "weeks" | "days";
@@ -13,6 +15,8 @@ type Filter = TimeFilter | "assignments" | undefined;
 
 interface Props {
     user: User;
+    entities: EntityWithRoles[]
+    users: User[]
     filterState: {
         filter: Filter,
         setFilter: React.Dispatch<React.SetStateAction<Filter>>
@@ -28,83 +32,41 @@ const defaultSelectableCorporate = {
 
 const RecordFilter: React.FC<Props> = ({
     user,
+    entities,
+    users,
     filterState,
     assignments = true,
     children
 }) => {
     const { filter, setFilter } = filterState;
 
-    const [statsUserId, setStatsUserId] = useRecordStore((state) => [
+    const [entity, setEntity] = useState<string>()
+
+    const [, setStatsUserId] = useRecordStore((state) => [
         state.selectedUser,
         state.setSelectedUser
     ]);
 
-    const { users } = useUsers();
-    const { groups: allGroups } = useGroups({});
-    const { groups } = useGroups({ admin: user?.id, userType: user?.type });
+    const entityUsers = useMemo(() => !entity ? users : users.filter(u => mapBy(u.entities, 'id').includes(entity)), [users, entity])
+
+    useEffect(() => setStatsUserId(user.id), [setStatsUserId, user.id])
 
     const toggleFilter = (value: "months" | "weeks" | "days" | "assignments") => {
         setFilter((prev) => (prev === value ? undefined : value));
     };
 
-    const selectableCorporates = [
-        defaultSelectableCorporate,
-        ...users
-            .filter((x) => groups.flatMap((g) => [g.admin, ...g.participants]).includes(x.id))
-            .filter((x) => x.type === "corporate")
-            .map((x) => ({
-                value: x.id,
-                label: `${x.name} - ${x.email}`,
-            })),
-    ];
-
-    const [selectedCorporate, setSelectedCorporate] = useState<string>(defaultSelectableCorporate.value);
-
-    const getUsersList = (): User[] => {
-        if (selectedCorporate) {
-            const selectedCorporateGroups = allGroups.filter((x) => x.admin === selectedCorporate);
-            const selectedCorporateGroupsParticipants = selectedCorporateGroups.flatMap((x) => x.participants);
-
-            const userListWithUsers = selectedCorporateGroupsParticipants.map((x) => users.find((y) => y.id === x)) as User[];
-            return userListWithUsers.filter((x) => x);
-        }
-
-        return user.type !== "mastercorporate" ? users : users.filter((x) => groups.flatMap((g) => [g.admin, ...g.participants]).includes(x.id));
-    };
-
-    const corporateFilteredUserList = getUsersList();
-
-    const getSelectedUser = () => {
-        if (selectedCorporate) {
-            const userInCorporate = corporateFilteredUserList.find((x) => x.id === statsUserId);
-            return userInCorporate || corporateFilteredUserList[0];
-        }
-
-        return users.find((x) => x.id === statsUserId) || user;
-    };
-
-    const selectedUser = getSelectedUser();
-    const selectedUserSelectValue = selectedUser
-        ? {
-            value: selectedUser.id,
-            label: `${selectedUser.name} - ${selectedUser.email}`,
-        }
-        : {
-            value: "",
-            label: "",
-        };
-
     return (
         <div className="w-full flex -xl:flex-col -xl:gap-4 justify-between items-center">
-            <div className="xl:w-3/4">
+            <div className="xl:w-3/4 flex gap-2">
                 {checkAccess(user, ["developer", "admin", "mastercorporate"]) && !children && (
                     <>
-                        <label className="font-normal text-base text-mti-gray-dim">Corporate</label>
+                    	<div className="flex flex-col gap-2 w-full">
+                        <label className="font-normal text-base text-mti-gray-dim">Entity</label>
 
                         <Select
-                            options={selectableCorporates}
-                            value={selectableCorporates.find((x) => x.value === selectedCorporate)}
-                            onChange={(value) => setSelectedCorporate(value?.value || "")}
+                            options={entities.map((e) => ({value: e.id, label: e.label}))}
+                            onChange={(value) => setEntity(value?.value || undefined)}
+                            isClearable
                             styles={{
                                 menuPortal: (base) => ({ ...base, zIndex: 9999 }),
                                 option: (styles, state) => ({
@@ -112,15 +74,17 @@ const RecordFilter: React.FC<Props> = ({
                                     backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
                                     color: state.isFocused ? "black" : styles.color,
                                 }),
-                            }}></Select>
+                            }} />
+                      </div>
+                      <div className="flex flex-col gap-2 w-full">
                         <label className="font-normal text-base text-mti-gray-dim">User</label>
 
                         <Select
-                            options={corporateFilteredUserList.map((x) => ({
+                            options={entityUsers.map((x) => ({
                                 value: x.id,
                                 label: `${x.name} - ${x.email}`,
                             }))}
-                            value={selectedUserSelectValue}
+                            defaultValue={{value: user.id, label: `${user.name} - ${user.email}`}}
                             onChange={(value) => setStatsUserId(value?.value!)}
                             styles={{
                                 menuPortal: (base) => ({ ...base, zIndex: 9999 }),
@@ -131,20 +95,20 @@ const RecordFilter: React.FC<Props> = ({
                                 }),
                             }}
                         />
+                      </div>
                     </>
                 )}
-                {(user.type === "corporate" || user.type === "teacher") && groups.length > 0 && !children && (
-                    <>
+                {(user.type === "corporate" || user.type === "teacher") && !children && (
+                    <div className="flex flex-col gap-2">
                         <label className="font-normal text-base text-mti-gray-dim">User</label>
 
                         <Select
                             options={users
-                                .filter((x) => groups.flatMap((y) => y.participants).includes(x.id))
                                 .map((x) => ({
                                     value: x.id,
                                     label: `${x.name} - ${x.email}`,
                                 }))}
-                            value={selectedUserSelectValue}
+                            defaultValue={{value: user.id, label: `${user.name} - ${user.email}`}}
                             onChange={(value) => setStatsUserId(value?.value!)}
                             styles={{
                                 menuPortal: (base) => ({ ...base, zIndex: 9999 }),
@@ -155,7 +119,7 @@ const RecordFilter: React.FC<Props> = ({
                                 }),
                             }}
                         />
-                    </>
+                    </div>
                 )}
                 {children}
             </div>
@@ -203,4 +167,4 @@ const RecordFilter: React.FC<Props> = ({
     );
 }
 
-export default RecordFilter;
+export default RecordFilter;

src/components/Medium/StatGridItem.tsx

@@ -182,7 +182,7 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 							.sort(sortByModule)
 							.map((x) => x!.module),
 					);
-					router.push("/exercises");
+					router.push("/exam");
 				}
 			});
 		}

src/components/MobileMenu.tsx

@@ -105,16 +105,6 @@ export default function MobileMenu({
                       >
                         Exams
                       </Link>
-                      <Link
-                        href={disableNavigation ? "" : "/exercises"}
-                        className={clsx(
-                          "w-fit transition duration-300 ease-in-out",
-                          path === "/exercises" &&
-                            "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
-                        )}
-                      >
-                        Exercises
-                      </Link>
                     </>
                   )}
                   <Link

src/components/Sidebar.tsx

@@ -1,242 +1,237 @@
 import clsx from "clsx";
-import {IconType} from "react-icons";
-import {MdSpaceDashboard} from "react-icons/md";
+import { IconType } from "react-icons";
+import { MdSpaceDashboard } from "react-icons/md";
 import {
-	BsFileEarmarkText,
-	BsClockHistory,
-	BsPencil,
-	BsGraphUp,
-	BsChevronBarRight,
-	BsChevronBarLeft,
-	BsShieldFill,
-	BsCloudFill,
-	BsCurrencyDollar,
-	BsClipboardData,
-	BsFileLock,
-	BsPeople,
+  BsFileEarmarkText,
+  BsClockHistory,
+  BsPencil,
+  BsGraphUp,
+  BsChevronBarRight,
+  BsChevronBarLeft,
+  BsShieldFill,
+  BsCloudFill,
+  BsCurrencyDollar,
+  BsClipboardData,
+  BsPeople,
 } from "react-icons/bs";
-import {CiDumbbell} from "react-icons/ci";
-import {RiLogoutBoxFill} from "react-icons/ri";
-import {SlPencil} from "react-icons/sl";
-import {FaAward} from "react-icons/fa";
+import { CiDumbbell } from "react-icons/ci";
+import { RiLogoutBoxFill } from "react-icons/ri";
 import Link from "next/link";
-import {useRouter} from "next/router";
+import { useRouter } from "next/router";
 import axios from "axios";
 import FocusLayer from "@/components/FocusLayer";
-import {preventNavigation} from "@/utils/navigation.disabled";
-import {useEffect, useState} from "react";
+import { preventNavigation } from "@/utils/navigation.disabled";
 import usePreferencesStore from "@/stores/preferencesStore";
-import {User} from "@/interfaces/user";
+import { User } from "@/interfaces/user";
 import useTicketsListener from "@/hooks/useTicketsListener";
-import {checkAccess, getTypesOfUser} from "@/utils/permissions";
+import { checkAccess, getTypesOfUser } from "@/utils/permissions";
 import usePermissions from "@/hooks/usePermissions";
+import { EntityWithRoles } from "@/interfaces/entity";
+import { useAllowedEntitiesSomePermissions } from "@/hooks/useEntityPermissions";
+import { useMemo } from "react";
+
 interface Props {
-	path: string;
-	navDisabled?: boolean;
-	focusMode?: boolean;
-	onFocusLayerMouseEnter?: () => void;
-	className?: string;
-	user: User;
+  path: string;
+  navDisabled?: boolean;
+  focusMode?: boolean;
+  onFocusLayerMouseEnter?: () => void;
+  className?: string;
+  user: User;
+  entities?: EntityWithRoles[]
 }
 
 interface NavProps {
-	Icon: IconType;
-	label: string;
-	path: string;
-	keyPath: string;
-	disabled?: boolean;
-	isMinimized?: boolean;
-	badge?: number;
+  Icon: IconType;
+  label: string;
+  path: string;
+  keyPath: string;
+  disabled?: boolean;
+  isMinimized?: boolean;
+  badge?: number;
 }
 
-const Nav = ({Icon, label, path, keyPath, disabled = false, isMinimized = false, badge}: NavProps) => {
-	return (
-		<Link
-			href={!disabled ? keyPath : ""}
-			className={clsx(
-				"flex items-center gap-4 rounded-full p-4 text-gray-500 hover:text-white",
-				"transition-all duration-300 ease-in-out relative",
-				disabled ? "hover:bg-mti-gray-dim cursor-not-allowed" : "hover:bg-mti-purple-light cursor-pointer",
-				path === keyPath && "bg-mti-purple-light text-white",
-				isMinimized ? "w-fit" : "w-full min-w-[200px] px-8 2xl:min-w-[220px]",
-			)}>
-			<Icon size={24} />
-			{!isMinimized && <span className="text-lg font-semibold">{label}</span>}
-			{!!badge && badge > 0 && (
-				<div
-					className={clsx(
-						"bg-mti-purple-light h-5 w-5 text-xs rounded-full flex items-center justify-center text-white",
-						"transition ease-in-out duration-300",
-						isMinimized && "absolute right-0 top-0",
-					)}>
-					{badge}
-				</div>
-			)}
-		</Link>
-	);
+const Nav = ({ Icon, label, path, keyPath, disabled = false, isMinimized = false, badge }: NavProps) => {
+  return (
+    <Link
+      href={!disabled ? keyPath : ""}
+      className={clsx(
+        "flex items-center gap-4 rounded-full p-4 text-gray-500 hover:text-white",
+        "transition-all duration-300 ease-in-out relative",
+        disabled ? "hover:bg-mti-gray-dim cursor-not-allowed" : "hover:bg-mti-purple-light cursor-pointer",
+        path.startsWith(keyPath) && "bg-mti-purple-light text-white",
+        isMinimized ? "w-fit" : "w-full min-w-[200px] px-8 2xl:min-w-[220px]",
+      )}>
+      <Icon size={24} />
+      {!isMinimized && <span className="text-lg font-semibold">{label}</span>}
+      {!!badge && badge > 0 && (
+        <div
+          className={clsx(
+            "bg-mti-purple-light h-5 w-5 text-xs rounded-full flex items-center justify-center text-white",
+            "transition ease-in-out duration-300",
+            isMinimized && "absolute right-0 top-0",
+          )}>
+          {badge}
+        </div>
+      )}
+    </Link>
+  );
 };
 
-export default function Sidebar({path, navDisabled = false, focusMode = false, user, onFocusLayerMouseEnter, className}: Props) {
-	const router = useRouter();
+export default function Sidebar({
+	path,
+	entities = [],
+	navDisabled = false,
+	focusMode = false,
+	user,
+	onFocusLayerMouseEnter,
+	className
+}: Props) {
+  const router = useRouter();
 
-	const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [state.isSidebarMinimized, state.toggleSidebarMinimized]);
+  const isAdmin = useMemo(() => ['developer', 'admin'].includes(user?.type), [user?.type])
 
-	const {totalAssignedTickets} = useTicketsListener(user.id);
-	const {permissions} = usePermissions(user.id);
+  const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [state.isSidebarMinimized, state.toggleSidebarMinimized]);
 
-	const logout = async () => {
-		axios.post("/api/logout").finally(() => {
-			setTimeout(() => router.reload(), 500);
-		});
-	};
+  const { totalAssignedTickets } = useTicketsListener(user.id);
+  const { permissions } = usePermissions(user.id);
 
-	const disableNavigation = preventNavigation(navDisabled, focusMode);
+  const entitiesAllowGeneration = useAllowedEntitiesSomePermissions(user, entities, [
+  	"generate_reading", "generate_listening", "generate_writing", "generate_speaking", "generate_level"
+  ])
 
-	return (
-		<section
-			className={clsx(
-				"relative flex h-full flex-col justify-between bg-transparent px-4 py-4 pb-8",
-				isMinimized ? "w-fit" : "-xl:w-fit w-1/6",
-				className,
-			)}>
-			<div className="-xl:hidden flex-col gap-3 xl:flex">
-				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={isMinimized} />
-				{checkAccess(user, ["student", "teacher", "developer"], permissions, "viewExams") && (
-					<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized={isMinimized} />
-				)}
-				{checkAccess(user, ["student", "teacher", "developer"], permissions, "viewExercises") && (
-					<Nav disabled={disableNavigation} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" isMinimized={isMinimized} />
-				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewStats") && (
-					<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
-				)}
-				{checkAccess(user, ["developer", "admin", "teacher", "student"], permissions) && (
-					<Nav disabled={disableNavigation} Icon={BsPeople} label="Groups" path={path} keyPath="/groups" isMinimized={isMinimized} />
-				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
-					<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />
-				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
-					<Nav disabled={disableNavigation} Icon={CiDumbbell} label="Training" path={path} keyPath="/training" isMinimized={isMinimized} />
-				)}
-				{checkAccess(user, ["admin", "developer", "agent", "corporate", "mastercorporate"], permissions, "viewPaymentRecords") && (
-					<Nav
-						disabled={disableNavigation}
-						Icon={BsCurrencyDollar}
-						label="Payment Record"
-						path={path}
-						keyPath="/payment-record"
-						isMinimized={isMinimized}
-					/>
-				)}
-				{checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"]) && (
-					<Nav
-						disabled={disableNavigation}
-						Icon={BsShieldFill}
-						label="Settings"
-						path={path}
-						keyPath="/settings"
-						isMinimized={isMinimized}
-					/>
-				)}
-				{checkAccess(user, ["admin", "developer", "agent"], permissions, "viewTickets") && (
-					<Nav
-						disabled={disableNavigation}
-						Icon={BsClipboardData}
-						label="Tickets"
-						path={path}
-						keyPath="/tickets"
-						isMinimized={isMinimized}
-						badge={totalAssignedTickets}
-					/>
-				)}
-				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
-					<Nav
-						disabled={disableNavigation}
-						Icon={BsCloudFill}
-						label="Generation"
-						path={path}
-						keyPath="/generation"
-						isMinimized={isMinimized}
-					/>
-				)}
-				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate", "agent"]) && (
-					<Nav
-						disabled={disableNavigation}
-						Icon={BsFileLock}
-						label="Permissions"
-						path={path}
-						keyPath="/permissions"
-						isMinimized={isMinimized}
-					/>
-				)}
-			</div>
-			<div className="-xl:flex flex-col gap-3 xl:hidden">
-				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={true} />
-				<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized={true} />
-				<Nav disabled={disableNavigation} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" isMinimized={true} />
-				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewStats") && (
-					<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={true} />
-				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
-					<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={true} />
-				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
-					<Nav disabled={disableNavigation} Icon={CiDumbbell} label="Training" path={path} keyPath="/training" isMinimized={true} />
-				)}
-				{checkAccess(user, getTypesOfUser(["student"])) && (
-					<Nav disabled={disableNavigation} Icon={BsShieldFill} label="Settings" path={path} keyPath="/settings" isMinimized={true} />
-				)}
-				{checkAccess(user, getTypesOfUser(["student"])) && (
-					<Nav disabled={disableNavigation} Icon={BsShieldFill} label="Permissions" path={path} keyPath="/permissions" isMinimized={true} />
-				)}
-				{checkAccess(user, ["developer"]) && (
-					<>
-						<Nav
-							disabled={disableNavigation}
-							Icon={BsCloudFill}
-							label="Generation"
-							path={path}
-							keyPath="/generation"
-							isMinimized={true}
-						/>
-						<Nav
-							disabled={disableNavigation}
-							Icon={BsFileLock}
-							label="Permissions"
-							path={path}
-							keyPath="/permissions"
-							isMinimized={true}
-						/>
-					</>
-				)}
-			</div>
+  const logout = async () => {
+    axios.post("/api/logout").finally(() => {
+      setTimeout(() => router.reload(), 500);
+    });
+  };
 
-			<div className="2xl:fixed bottom-12 flex flex-col gap-0 -2xl:mt-8">
-				<div
-					role="button"
-					tabIndex={1}
-					onClick={toggleMinimize}
-					className={clsx(
-						"hover:text-mti-rose -xl:hidden flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
-						isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
-					)}>
-					{isMinimized ? <BsChevronBarRight size={24} /> : <BsChevronBarLeft size={24} />}
-					{!isMinimized && <span className="text-lg font-medium">Minimize</span>}
-				</div>
-				<div
-					role="button"
-					tabIndex={1}
-					onClick={focusMode ? () => {} : logout}
-					className={clsx(
-						"hover:text-mti-rose flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
-						isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
-					)}>
-					<RiLogoutBoxFill size={24} />
-					{!isMinimized && <span className="-xl:hidden text-lg font-medium">Log Out</span>}
-				</div>
-			</div>
-			{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
-		</section>
-	);
+  const disableNavigation = preventNavigation(navDisabled, focusMode);
+
+  return (
+    <section
+      className={clsx(
+        "relative flex h-full flex-col justify-between bg-transparent px-4 py-4 pb-8",
+        isMinimized ? "w-fit" : "-xl:w-fit w-1/6",
+        className,
+      )}>
+      <div className="-xl:hidden flex-col gap-3 xl:flex">
+        <Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/dashboard" isMinimized={isMinimized} />
+        {checkAccess(user, ["student", "teacher", "developer"], permissions, "viewExams") && (
+          <Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized={isMinimized} />
+        )}
+        {checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewStats") && (
+          <Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
+        )}
+        {checkAccess(user, ["developer", "admin", "mastercorporate", "corporate", "teacher", "student"], permissions) && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsPeople}
+            label="Classrooms"
+            path={path}
+            keyPath="/classrooms"
+            isMinimized={isMinimized}
+          />
+        )}
+        {checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
+          <Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />
+        )}
+        {checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
+          <Nav disabled={disableNavigation} Icon={CiDumbbell} label="Training" path={path} keyPath="/training" isMinimized={isMinimized} />
+        )}
+        {checkAccess(user, ["admin", "developer", "agent", "corporate", "mastercorporate"], permissions, "viewPaymentRecords") && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsCurrencyDollar}
+            label="Payment Record"
+            path={path}
+            keyPath="/payment-record"
+            isMinimized={isMinimized}
+          />
+        )}
+        {checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"]) && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsShieldFill}
+            label="Settings"
+            path={path}
+            keyPath="/settings"
+            isMinimized={isMinimized}
+          />
+        )}
+        {checkAccess(user, ["admin", "developer", "agent"], permissions, "viewTickets") && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsClipboardData}
+            label="Tickets"
+            path={path}
+            keyPath="/tickets"
+            isMinimized={isMinimized}
+            badge={totalAssignedTickets}
+          />
+        )}
+        {(entitiesAllowGeneration.length > 0 || isAdmin) && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsCloudFill}
+            label="Generation"
+            path={path}
+            keyPath="/generation"
+            isMinimized={isMinimized}
+          />
+        )}
+      </div>
+      <div className="-xl:flex flex-col gap-3 xl:hidden">
+        <Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized />
+        <Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized />
+        {checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewStats") && (
+          <Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized />
+        )}
+        {checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
+          <Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized />
+        )}
+        {checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
+          <Nav disabled={disableNavigation} Icon={CiDumbbell} label="Training" path={path} keyPath="/training" isMinimized />
+        )}
+        {checkAccess(user, getTypesOfUser(["student"])) && (
+          <Nav disabled={disableNavigation} Icon={BsShieldFill} label="Settings" path={path} keyPath="/settings" isMinimized />
+        )}
+        {entitiesAllowGeneration.length > 0 && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsCloudFill}
+            label="Generation"
+            path={path}
+            keyPath="/generation"
+            isMinimized
+          />
+        )}
+      </div>
+
+      <div className="2xl:fixed bottom-12 flex flex-col gap-0 -2xl:mt-8">
+        <div
+          role="button"
+          tabIndex={1}
+          onClick={toggleMinimize}
+          className={clsx(
+            "hover:text-mti-rose -xl:hidden flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
+            isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
+          )}>
+          {isMinimized ? <BsChevronBarRight size={24} /> : <BsChevronBarLeft size={24} />}
+          {!isMinimized && <span className="text-lg font-medium">Minimize</span>}
+        </div>
+        <div
+          role="button"
+          tabIndex={1}
+          onClick={focusMode ? () => { } : logout}
+          className={clsx(
+            "hover:text-mti-rose flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
+            isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
+          )}>
+          <RiLogoutBoxFill size={24} />
+          {!isMinimized && <span className="-xl:hidden text-lg font-medium">Log Out</span>}
+        </div>
+      </div>
+      {focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
+    </section>
+  );
 }

src/components/UserDisplayList.tsx

@@ -0,0 +1,30 @@
+/** eslint-disable @next/next/no-img-element */
+import { User } from "@/interfaces/user"
+
+interface Props {
+  users: User[]
+  title: string;
+}
+
+const UserDisplay = (displayUser: User) => (
+  <div 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>
+);
+
+export default function UserDisplayList({ title, users }: Props) {
+  return (<div className="bg-white border shadow flex flex-col rounded-xl w-full">
+    <span className="p-4">{title}</span>
+    <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+      {users
+        .slice(0, 10)
+        .map((x) => (
+          <UserDisplay key={x.id} {...x} />
+        ))}
+    </div>
+  </div>)
+}

src/dashboards/Admin.tsx

@@ -581,7 +581,7 @@ export default function AdminDashboard({user}: Props) {
 															.includes(x.id),
 												});
 
-												router.push("/list/users");
+												router.push("/users");
 										  }
 										: undefined
 								}
@@ -601,7 +601,7 @@ export default function AdminDashboard({user}: Props) {
 															.includes(x.id),
 												});
 
-												router.push("/list/users");
+												router.push("/users");
 										  }
 										: undefined
 								}
@@ -621,7 +621,7 @@ export default function AdminDashboard({user}: Props) {
 															.includes(x.id),
 												});
 
-												router.push("/list/users");
+												router.push("/users");
 										  }
 										: undefined
 								}

src/dashboards/AssignmentCard.tsx

@@ -13,6 +13,7 @@ import {useAssignmentUnarchive} from "@/hooks/useAssignmentUnarchive";
 import {useAssignmentRelease} from "@/hooks/useAssignmentRelease";
 import {getUserName} from "@/utils/users";
 import {User} from "@/interfaces/user";
+import { EntityWithRoles } from "@/interfaces/entity";
 
 interface Props {
 	users: User[];
@@ -22,6 +23,7 @@ interface Props {
 	allowArchive?: boolean;
 	allowUnarchive?: boolean;
 	allowExcelDownload?: boolean;
+	entityObj?: EntityWithRoles
 }
 
 export default function AssignmentCard({
@@ -30,6 +32,7 @@ export default function AssignmentCard({
 	assigner,
 	startDate,
 	endDate,
+	entityObj,
 	assignees,
 	results,
 	exams,
@@ -49,7 +52,6 @@ export default function AssignmentCard({
 	const renderUnarchiveIcon = useAssignmentUnarchive(id, reload);
 	const renderReleaseIcon = useAssignmentRelease(id, reload);
 
-
 	const calculateAverageModuleScore = (module: Module) => {
 		const resultModuleBandScores = results.map((r) => {
 			const moduleStats = r.stats.filter((s) => s.module === module);
@@ -65,26 +67,26 @@ export default function AssignmentCard({
 	const uniqModules = uniqBy(exams, (x) => x.module);
 
 	const shouldRenderPDF = () => {
-		if(released && allowDownload) {
+		if (released && allowDownload) {
 			// in order to be downloadable, the assignment has to be released
 			// the component should have the allowDownload prop
 			// and the assignment should not have the level module
-			return uniqModules.every(({ module }) => module !== 'level');
+			return uniqModules.every(({module}) => module !== "level");
 		}
 
 		return false;
-	}
+	};
 
 	const shouldRenderExcel = () => {
-		if(released && allowExcelDownload) {
+		if (released && allowExcelDownload) {
 			// in order to be downloadable, the assignment has to be released
 			// the component should have the allowExcelDownload prop
 			// and the assignment should have the level module
-			return uniqModules.some(({ module }) => module === 'level');
+			return uniqModules.some(({module}) => module === "level");
 		}
 
 		return false;
-	}
+	};
 
 	return (
 		<div
@@ -116,6 +118,7 @@ export default function AssignmentCard({
 					<span>{moment(endDate).format("DD/MM/YY, HH:mm")}</span>
 				</span>
 				<span>Assigner: {getUserName(users.find((x) => x.id === assigner))}</span>
+				{entityObj && <span>Entity: {entityObj.label}</span>}
 			</div>
 			<div className="-md:mt-2 grid w-full grid-cols-4 place-items-start gap-2">
 				{uniqModules.map(({module}) => (

src/dashboards/AssignmentView.tsx

@@ -2,433 +2,341 @@ import Button from "@/components/Low/Button";
 import ProgressBar from "@/components/Low/ProgressBar";
 import Modal from "@/components/Modal";
 import useUsers from "@/hooks/useUsers";
-import { Module } from "@/interfaces";
-import { Assignment } from "@/interfaces/results";
-import { Stat, User } from "@/interfaces/user";
+import {Module} from "@/interfaces";
+import {Assignment} from "@/interfaces/results";
+import {Stat, User} from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
-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 {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";
+import {capitalize, uniqBy} from "lodash";
 import moment from "moment";
-import { useRouter } from "next/router";
-import {
-  BsBook,
-  BsClipboard,
-  BsHeadphones,
-  BsMegaphone,
-  BsPen,
-} from "react-icons/bs";
-import { toast } from "react-toastify";
-import { futureAssignmentFilter } from "@/utils/assignments";
+import {useRouter} from "next/router";
+import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
+import {toast} from "react-toastify";
+import {futureAssignmentFilter} from "@/utils/assignments";
 
 interface Props {
-  isOpen: boolean;
-  assignment?: Assignment;
-  onClose: () => void;
+	isOpen: boolean;
+	users: User[];
+	assignment?: Assignment;
+	onClose: () => void;
 }
 
-export default function AssignmentView({ isOpen, assignment, onClose }: Props) {
-  const { users } = useUsers();
-  const router = useRouter();
+export default function AssignmentView({isOpen, users, assignment, onClose}: Props) {
+	const router = useRouter();
 
-  const setExams = useExamStore((state) => state.setExams);
-  const setShowSolutions = useExamStore((state) => state.setShowSolutions);
-  const setUserSolutions = useExamStore((state) => state.setUserSolutions);
-  const setSelectedModules = useExamStore((state) => state.setSelectedModules);
+	const setExams = useExamStore((state) => state.setExams);
+	const setShowSolutions = useExamStore((state) => state.setShowSolutions);
+	const setUserSolutions = useExamStore((state) => state.setUserSolutions);
+	const setSelectedModules = useExamStore((state) => state.setSelectedModules);
 
-  const deleteAssignment = async () => {
-    if (!confirm("Are you sure you want to delete this assignment?")) return;
+	const deleteAssignment = async () => {
+		if (!confirm("Are you sure you want to delete this assignment?")) return;
 
-    axios
-      .delete(`/api/assignments/${assignment?.id}`)
-      .then(() =>
-        toast.success(
-          `Successfully deleted the assignment "${assignment?.name}".`
-        )
-      )
-      .catch(() => toast.error("Something went wrong, please try again later."))
-      .finally(onClose);
-  };
+		axios
+			.delete(`/api/assignments/${assignment?.id}`)
+			.then(() => toast.success(`Successfully deleted the assignment "${assignment?.name}".`))
+			.catch(() => toast.error("Something went wrong, please try again later."))
+			.finally(onClose);
+	};
 
-  const startAssignment = () => {
-    if (assignment) {
-      axios
-        .post(`/api/assignments/${assignment.id}/start`)
-        .then(() => {
-          toast.success(
-            `The assignment "${assignment.name}" has been started successfully!`
-          );
-        })
-        .catch((e) => {
-          console.log(e);
-          toast.error("Something went wrong, please try again later!");
-        });
-    }
-  };
+	const startAssignment = () => {
+		if (assignment) {
+			axios
+				.post(`/api/assignments/${assignment.id}/start`)
+				.then(() => {
+					toast.success(`The assignment "${assignment.name}" has been started successfully!`);
+				})
+				.catch((e) => {
+					console.log(e);
+					toast.error("Something went wrong, please try again later!");
+				});
+		}
+	};
 
-  const formatTimestamp = (timestamp: string) => {
-    const date = moment(parseInt(timestamp));
-    const formatter = "YYYY/MM/DD - HH:mm";
+	const formatTimestamp = (timestamp: string) => {
+		const date = moment(parseInt(timestamp));
+		const formatter = "YYYY/MM/DD - HH:mm";
 
-    return date.format(formatter);
-  };
+		return date.format(formatter);
+	};
 
-  const calculateAverageModuleScore = (module: Module) => {
-    if (!assignment) return -1;
+	const calculateAverageModuleScore = (module: Module) => {
+		if (!assignment) return -1;
 
-    const resultModuleBandScores = assignment.results.map((r) => {
-      const moduleStats = r.stats.filter((s) => s.module === module);
+		const resultModuleBandScores = assignment.results.map((r) => {
+			const moduleStats = r.stats.filter((s) => s.module === module);
 
-      const correct = moduleStats.reduce(
-        (acc, curr) => acc + curr.score.correct,
-        0
-      );
-      const total = moduleStats.reduce(
-        (acc, curr) => acc + curr.score.total,
-        0
-      );
-      return calculateBandScore(correct, total, module, r.type);
-    });
+			const correct = moduleStats.reduce((acc, curr) => acc + curr.score.correct, 0);
+			const total = moduleStats.reduce((acc, curr) => acc + curr.score.total, 0);
+			return calculateBandScore(correct, total, module, r.type);
+		});
 
-    return resultModuleBandScores.length === 0
-      ? -1
-      : resultModuleBandScores.reduce((acc, curr) => acc + curr, 0) /
-          assignment.results.length;
-  };
+		return resultModuleBandScores.length === 0 ? -1 : resultModuleBandScores.reduce((acc, curr) => acc + curr, 0) / assignment.results.length;
+	};
 
-  const aggregateScoresByModule = (
-    stats: Stat[]
-  ): { module: Module; total: number; missing: number; correct: number }[] => {
-    const scores: {
-      [key in Module]: { total: number; missing: number; correct: number };
-    } = {
-      reading: {
-        total: 0,
-        correct: 0,
-        missing: 0,
-      },
-      listening: {
-        total: 0,
-        correct: 0,
-        missing: 0,
-      },
-      writing: {
-        total: 0,
-        correct: 0,
-        missing: 0,
-      },
-      speaking: {
-        total: 0,
-        correct: 0,
-        missing: 0,
-      },
-      level: {
-        total: 0,
-        correct: 0,
-        missing: 0,
-      },
-    };
+	const aggregateScoresByModule = (stats: Stat[]): {module: Module; total: number; missing: number; correct: number}[] => {
+		const scores: {
+			[key in Module]: {total: number; missing: number; correct: number};
+		} = {
+			reading: {
+				total: 0,
+				correct: 0,
+				missing: 0,
+			},
+			listening: {
+				total: 0,
+				correct: 0,
+				missing: 0,
+			},
+			writing: {
+				total: 0,
+				correct: 0,
+				missing: 0,
+			},
+			speaking: {
+				total: 0,
+				correct: 0,
+				missing: 0,
+			},
+			level: {
+				total: 0,
+				correct: 0,
+				missing: 0,
+			},
+		};
 
-    stats.forEach((x) => {
-      scores[x.module!] = {
-        total: scores[x.module!].total + x.score.total,
-        correct: scores[x.module!].correct + x.score.correct,
-        missing: scores[x.module!].missing + x.score.missing,
-      };
-    });
+		stats.forEach((x) => {
+			scores[x.module!] = {
+				total: scores[x.module!].total + x.score.total,
+				correct: scores[x.module!].correct + x.score.correct,
+				missing: scores[x.module!].missing + x.score.missing,
+			};
+		});
 
-    return Object.keys(scores)
-      .filter((x) => scores[x as Module].total > 0)
-      .map((x) => ({ module: x as Module, ...scores[x as Module] }));
-  };
+		return Object.keys(scores)
+			.filter((x) => scores[x as Module].total > 0)
+			.map((x) => ({module: x as Module, ...scores[x as Module]}));
+	};
 
-  const customContent = (
-    stats: Stat[],
-    user: string,
-    focus: "academic" | "general"
-  ) => {
-    const correct = stats.reduce(
-      (accumulator, current) => accumulator + current.score.correct,
-      0
-    );
-    const total = stats.reduce(
-      (accumulator, current) => accumulator + current.score.total,
-      0
-    );
-    const aggregatedScores = aggregateScoresByModule(stats).filter(
-      (x) => x.total > 0
-    );
+	const customContent = (stats: Stat[], user: string, focus: "academic" | "general") => {
+		const correct = stats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
+		const total = stats.reduce((accumulator, current) => accumulator + current.score.total, 0);
+		const aggregatedScores = aggregateScoresByModule(stats).filter((x) => x.total > 0);
 
-    const aggregatedLevels = aggregatedScores.map((x) => ({
-      module: x.module,
-      level: calculateBandScore(x.correct, x.total, x.module, focus),
-    }));
+		const aggregatedLevels = aggregatedScores.map((x) => ({
+			module: x.module,
+			level: calculateBandScore(x.correct, x.total, x.module, focus),
+		}));
 
-    const timeSpent = stats[0].timeSpent;
+		const timeSpent = stats[0].timeSpent;
 
-    const selectExam = () => {
-      const examPromises = uniqBy(stats, "exam").map((stat) =>
-        getExamById(stat.module, stat.exam)
-      );
+		const selectExam = () => {
+			const examPromises = uniqBy(stats, "exam").map((stat) => getExamById(stat.module, stat.exam));
 
-      Promise.all(examPromises).then((exams) => {
-        if (exams.every((x) => !!x)) {
-          setUserSolutions(convertToUserSolutions(stats));
-          setShowSolutions(true);
-          setExams(exams.map((x) => x!).sort(sortByModule));
-          setSelectedModules(
-            exams
-              .map((x) => x!)
-              .sort(sortByModule)
-              .map((x) => x!.module)
-          );
-          router.push("/exercises");
-        }
-      });
-    };
+			Promise.all(examPromises).then((exams) => {
+				if (exams.every((x) => !!x)) {
+					setUserSolutions(convertToUserSolutions(stats));
+					setShowSolutions(true);
+					setExams(exams.map((x) => x!).sort(sortByModule));
+					setSelectedModules(
+						exams
+							.map((x) => x!)
+							.sort(sortByModule)
+							.map((x) => x!.module),
+					);
+					router.push("/exam");
+				}
+			});
+		};
 
-    const content = (
-      <>
-        <div className="-md:items-center flex w-full justify-between 2xl:items-center">
-          <div className="-md:gap-2 -md:items-center flex md:flex-col md:gap-1 2xl:flex-row 2xl:items-center 2xl:gap-2">
-            <span className="font-medium">
-              {formatTimestamp(stats[0].date.toString())}
-            </span>
-            {timeSpent && (
-              <>
-                <span className="md:hidden 2xl:flex">• </span>
-                <span className="text-sm">
-                  {Math.floor(timeSpent / 60)} minutes
-                </span>
-              </>
-            )}
-          </div>
-          <span
-            className={clsx(
-              correct / total >= 0.7 && "text-mti-purple",
-              correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
-              correct / total < 0.3 && "text-mti-rose"
-            )}
-          >
-            Level{" "}
-            {(
-              aggregatedLevels.reduce(
-                (accumulator, current) => accumulator + current.level,
-                0
-              ) / aggregatedLevels.length
-            ).toFixed(1)}
-          </span>
-        </div>
+		const content = (
+			<>
+				<div className="-md:items-center flex w-full justify-between 2xl:items-center">
+					<div className="-md:gap-2 -md:items-center flex md:flex-col md:gap-1 2xl:flex-row 2xl:items-center 2xl:gap-2">
+						<span className="font-medium">{formatTimestamp(stats[0].date.toString())}</span>
+						{timeSpent && (
+							<>
+								<span className="md:hidden 2xl:flex">• </span>
+								<span className="text-sm">{Math.floor(timeSpent / 60)} minutes</span>
+							</>
+						)}
+					</div>
+					<span
+						className={clsx(
+							correct / total >= 0.7 && "text-mti-purple",
+							correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
+							correct / total < 0.3 && "text-mti-rose",
+						)}>
+						Level{" "}
+						{(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)}
+					</span>
+				</div>
 
-        <div className="flex w-full flex-col gap-1">
-          <div className="-md:mt-2 grid w-full grid-cols-4 place-items-start gap-2">
-            {aggregatedLevels.map(({ module, level }) => (
-              <div
-                key={module}
-                className={clsx(
-                  "-md:px-4 flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
-                  module === "reading" && "bg-ielts-reading",
-                  module === "listening" && "bg-ielts-listening",
-                  module === "writing" && "bg-ielts-writing",
-                  module === "speaking" && "bg-ielts-speaking",
-                  module === "level" && "bg-ielts-level"
-                )}
-              >
-                {module === "reading" && <BsBook className="h-4 w-4" />}
-                {module === "listening" && <BsHeadphones className="h-4 w-4" />}
-                {module === "writing" && <BsPen className="h-4 w-4" />}
-                {module === "speaking" && <BsMegaphone className="h-4 w-4" />}
-                {module === "level" && <BsClipboard className="h-4 w-4" />}
-                <span className="text-sm">{level.toFixed(1)}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      </>
-    );
+				<div className="flex w-full flex-col gap-1">
+					<div className="-md:mt-2 grid w-full grid-cols-4 place-items-start gap-2">
+						{aggregatedLevels.map(({module, level}) => (
+							<div
+								key={module}
+								className={clsx(
+									"-md:px-4 flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
+									module === "reading" && "bg-ielts-reading",
+									module === "listening" && "bg-ielts-listening",
+									module === "writing" && "bg-ielts-writing",
+									module === "speaking" && "bg-ielts-speaking",
+									module === "level" && "bg-ielts-level",
+								)}>
+								{module === "reading" && <BsBook className="h-4 w-4" />}
+								{module === "listening" && <BsHeadphones className="h-4 w-4" />}
+								{module === "writing" && <BsPen className="h-4 w-4" />}
+								{module === "speaking" && <BsMegaphone className="h-4 w-4" />}
+								{module === "level" && <BsClipboard className="h-4 w-4" />}
+								<span className="text-sm">{level.toFixed(1)}</span>
+							</div>
+						))}
+					</div>
+				</div>
+			</>
+		);
 
-    return (
-      <div className="flex flex-col gap-2">
-        <span>
-          {(() => {
-            const student = users.find((u) => u.id === user);
-            return `${student?.name} (${student?.email})`;
-          })()}
-        </span>
-        <div
-          key={user}
-          className={clsx(
-            "border-mti-gray-platinum -md:hidden flex cursor-pointer flex-col gap-4 rounded-xl border p-4 transition duration-300 ease-in-out",
-            correct / total >= 0.7 && "hover:border-mti-purple",
-            correct / total >= 0.3 &&
-              correct / total < 0.7 &&
-              "hover:border-mti-red",
-            correct / total < 0.3 && "hover:border-mti-rose"
-          )}
-          onClick={selectExam}
-          role="button"
-        >
-          {content}
-        </div>
-        <div
-          key={user}
-          className={clsx(
-            "border-mti-gray-platinum -md:tooltip flex cursor-pointer flex-col gap-4 rounded-xl border p-4 transition duration-300 ease-in-out md:hidden",
-            correct / total >= 0.7 && "hover:border-mti-purple",
-            correct / total >= 0.3 &&
-              correct / total < 0.7 &&
-              "hover:border-mti-red",
-            correct / total < 0.3 && "hover:border-mti-rose"
-          )}
-          data-tip="Your screen size is too small to view previous exams."
-          role="button"
-        >
-          {content}
-        </div>
-      </div>
-    );
-  };
+		return (
+			<div className="flex flex-col gap-2">
+				<span>
+					{(() => {
+						const student = users.find((u) => u.id === user);
+						return `${student?.name} (${student?.email})`;
+					})()}
+				</span>
+				<div
+					key={user}
+					className={clsx(
+						"border-mti-gray-platinum -md:hidden flex cursor-pointer flex-col gap-4 rounded-xl border p-4 transition duration-300 ease-in-out",
+						correct / total >= 0.7 && "hover:border-mti-purple",
+						correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
+						correct / total < 0.3 && "hover:border-mti-rose",
+					)}
+					onClick={selectExam}
+					role="button">
+					{content}
+				</div>
+				<div
+					key={user}
+					className={clsx(
+						"border-mti-gray-platinum -md:tooltip flex cursor-pointer flex-col gap-4 rounded-xl border p-4 transition duration-300 ease-in-out md:hidden",
+						correct / total >= 0.7 && "hover:border-mti-purple",
+						correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
+						correct / total < 0.3 && "hover:border-mti-rose",
+					)}
+					data-tip="Your screen size is too small to view previous exams."
+					role="button">
+					{content}
+				</div>
+			</div>
+		);
+	};
 
-  const shouldRenderStart = () => {
-    if (assignment) {
-      if (futureAssignmentFilter(assignment)) {
-        return true;
-      }
-    }
+	const shouldRenderStart = () => {
+		if (assignment) {
+			if (futureAssignmentFilter(assignment)) {
+				return true;
+			}
+		}
 
-    return false;
-  };
+		return false;
+	};
 
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} title={assignment?.name}>
-      <div className="mt-4 flex w-full flex-col gap-4">
-        <ProgressBar
-          color="purple"
-          label={`${assignment?.results.length}/${assignment?.assignees.length} assignees completed`}
-          className="h-6"
-          textClassName={
-            (assignment?.results.length || 0) /
-              (assignment?.assignees.length || 1) <
-            0.5
-              ? "!text-mti-gray-dim font-light"
-              : "text-white"
-          }
-          percentage={
-            ((assignment?.results.length || 0) /
-              (assignment?.assignees.length || 1)) *
-            100
-          }
-        />
-        <div className="flex items-start gap-8">
-          <div className="flex flex-col gap-2">
-            <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
-                .filter((u) => assignment?.assignees.includes(u.id))
-                .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>
-          <div className="-md:mt-2 flex w-full items-center gap-4">
-            {assignment &&
-              uniqBy(assignment.exams, (x) => x.module).map(({ module }) => (
-                <div
-                  data-tip={capitalize(module)}
-                  key={module}
-                  className={clsx(
-                    "-md:px-4 tooltip flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
-                    module === "reading" && "bg-ielts-reading",
-                    module === "listening" && "bg-ielts-listening",
-                    module === "writing" && "bg-ielts-writing",
-                    module === "speaking" && "bg-ielts-speaking",
-                    module === "level" && "bg-ielts-level"
-                  )}
-                >
-                  {module === "reading" && <BsBook className="h-4 w-4" />}
-                  {module === "listening" && (
-                    <BsHeadphones className="h-4 w-4" />
-                  )}
-                  {module === "writing" && <BsPen className="h-4 w-4" />}
-                  {module === "speaking" && <BsMegaphone className="h-4 w-4" />}
-                  {module === "level" && <BsClipboard className="h-4 w-4" />}
-                  {calculateAverageModuleScore(module) > -1 && (
-                    <span className="text-sm">
-                      {calculateAverageModuleScore(module).toFixed(1)}
-                    </span>
-                  )}
-                </div>
-              ))}
-          </div>
-        </div>
-        <div className="flex flex-col gap-2">
-          <span className="text-xl font-bold">
-            Results ({assignment?.results.length}/{assignment?.assignees.length}
-            )
-          </span>
-          <div>
-            {assignment && assignment?.results.length > 0 && (
-              <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 xl:gap-6">
-                {assignment.results.map((r) =>
-                  customContent(r.stats, r.user, r.type)
-                )}
-              </div>
-            )}
-            {assignment && assignment?.results.length === 0 && (
-              <span className="ml-1 font-semibold">No results yet...</span>
-            )}
-          </div>
-        </div>
+	return (
+		<Modal isOpen={isOpen} onClose={onClose} title={assignment?.name}>
+			<div className="mt-4 flex w-full flex-col gap-4">
+				<ProgressBar
+					color="purple"
+					label={`${assignment?.results.length}/${assignment?.assignees.length} assignees completed`}
+					className="h-6"
+					textClassName={
+						(assignment?.results.length || 0) / (assignment?.assignees.length || 1) < 0.5 ? "!text-mti-gray-dim font-light" : "text-white"
+					}
+					percentage={((assignment?.results.length || 0) / (assignment?.assignees.length || 1)) * 100}
+				/>
+				<div className="flex items-start gap-8">
+					<div className="flex flex-col gap-2">
+						<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
+								.filter((u) => assignment?.assignees.includes(u.id))
+								.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>
+					<div className="-md:mt-2 flex w-full items-center gap-4">
+						{assignment &&
+							uniqBy(assignment.exams, (x) => x.module).map(({module}) => (
+								<div
+									data-tip={capitalize(module)}
+									key={module}
+									className={clsx(
+										"-md:px-4 tooltip flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
+										module === "reading" && "bg-ielts-reading",
+										module === "listening" && "bg-ielts-listening",
+										module === "writing" && "bg-ielts-writing",
+										module === "speaking" && "bg-ielts-speaking",
+										module === "level" && "bg-ielts-level",
+									)}>
+									{module === "reading" && <BsBook className="h-4 w-4" />}
+									{module === "listening" && <BsHeadphones className="h-4 w-4" />}
+									{module === "writing" && <BsPen className="h-4 w-4" />}
+									{module === "speaking" && <BsMegaphone className="h-4 w-4" />}
+									{module === "level" && <BsClipboard className="h-4 w-4" />}
+									{calculateAverageModuleScore(module) > -1 && (
+										<span className="text-sm">{calculateAverageModuleScore(module).toFixed(1)}</span>
+									)}
+								</div>
+							))}
+					</div>
+				</div>
+				<div className="flex flex-col gap-2">
+					<span className="text-xl font-bold">
+						Results ({assignment?.results.length}/{assignment?.assignees.length})
+					</span>
+					<div>
+						{assignment && assignment?.results.length > 0 && (
+							<div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 xl:gap-6">
+								{assignment.results.map((r) => customContent(r.stats, r.user, r.type))}
+							</div>
+						)}
+						{assignment && assignment?.results.length === 0 && <span className="ml-1 font-semibold">No results yet...</span>}
+					</div>
+				</div>
 
-        <div className="flex gap-4 w-full items-center justify-end">
-          {assignment &&
-            (assignment.results.length === assignment.assignees.length ||
-              moment().isAfter(moment(assignment.endDate))) && (
-              <Button
-                variant="outline"
-                color="red"
-                className="w-full max-w-[200px]"
-                onClick={deleteAssignment}
-              >
-                Delete
-              </Button>
-            )}
-          {/** if the assignment is not deemed as active yet, display start */}
-          {shouldRenderStart() && (
-            <Button
-              variant="outline"
-              color="green"
-              className="w-full max-w-[200px]"
-              onClick={startAssignment}
-            >
-              Start
-            </Button>
-          )}
-          <Button onClick={onClose} className="w-full max-w-[200px]">
-            Close
-          </Button>
-        </div>
-      </div>
-    </Modal>
-  );
+				<div className="flex gap-4 w-full items-center justify-end">
+					{assignment && (assignment.results.length === assignment.assignees.length || moment().isAfter(moment(assignment.endDate))) && (
+						<Button variant="outline" color="red" className="w-full max-w-[200px]" onClick={deleteAssignment}>
+							Delete
+						</Button>
+					)}
+					{/** if the assignment is not deemed as active yet, display start */}
+					{shouldRenderStart() && (
+						<Button variant="outline" color="green" className="w-full max-w-[200px]" onClick={startAssignment}>
+							Start
+						</Button>
+					)}
+					<Button onClick={onClose} className="w-full max-w-[200px]">
+						Close
+					</Button>
+				</div>
+			</div>
+		</Modal>
+	);
 }

src/dashboards/Corporate/index.tsx

@@ -1,61 +1,40 @@
 /* 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 from "@/hooks/useUsers";
 import {CorporateUser, Group, MasterCorporateUser, Stat, User} from "@/interfaces/user";
 import UserList from "@/pages/(admin)/Lists/UserList";
-import {dateSorter} from "@/utils";
+import {dateSorter, mapBy} from "@/utils";
 import moment from "moment";
 import {useEffect, useMemo, useState} from "react";
 import {
 	BsArrowLeft,
 	BsClipboard2Data,
-	BsClipboard2DataFill,
 	BsClock,
-	BsGlobeCentralSouthAsia,
 	BsPaperclip,
-	BsPerson,
-	BsPersonAdd,
 	BsPersonFill,
 	BsPersonFillGear,
-	BsPersonGear,
 	BsPencilSquare,
-	BsPersonBadge,
 	BsPersonCheck,
 	BsPeople,
-	BsArrowRepeat,
-	BsPlus,
 	BsEnvelopePaper,
 	BsDatabase,
 } from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
-import {averageLevelCalculator, calculateAverageLevel, calculateBandScore} from "@/utils/score";
-import {MODULE_ARRAY} from "@/utils/moduleUtils";
+import {calculateAverageLevel, calculateBandScore} from "@/utils/score";
 import {Module} from "@/interfaces";
 import {groupByExam} from "@/utils/stats";
 import IconCard from "../IconCard";
 import GroupList from "@/pages/(admin)/Lists/GroupList";
 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";
-import {createColumnHelper} from "@tanstack/react-table";
-import Checkbox from "@/components/Low/Checkbox";
-import List from "@/components/List";
-import {getUserCompanyName} from "@/resources/user";
-import {futureAssignmentFilter, pastAssignmentFilter, archivedAssignmentFilter, activeAssignmentFilter} from "@/utils/assignments";
 import useUserBalance from "@/hooks/useUserBalance";
 import AssignmentsPage from "../views/AssignmentsPage";
 import StudentPerformancePage from "./StudentPerformancePage";
-import MasterStatistical from "../MasterCorporate/MasterStatistical";
 import MasterStatisticalPage from "./MasterStatisticalPage";
+import {getEntitiesUsers} from "@/utils/users.be";
 
 interface Props {
 	user: CorporateUser;
@@ -91,19 +70,6 @@ export default function CorporateDashboard({user, linkedCorporate}: Props) {
 
 	const assignmentsGroups = useMemo(() => groups.filter((x) => x.admin === user.id || x.participants.includes(user.id)), [groups, user.id]);
 
-	const assignmentsUsers = useMemo(
-		() =>
-			[...teachers, ...students].filter((x) =>
-				!!selectedUser
-					? groups
-							.filter((g) => g.admin === selectedUser.id)
-							.flatMap((g) => g.participants)
-							.includes(x.id) || false
-					: groups.flatMap((g) => g.participants).includes(x.id),
-			),
-		[groups, teachers, students, selectedUser],
-	);
-
 	useEffect(() => {
 		setShowModal(!!selectedUser && router.asPath === "/#");
 	}, [selectedUser, router.asPath]);
@@ -251,7 +217,7 @@ export default function CorporateDashboard({user, linkedCorporate}: Props) {
 															.includes(x.id),
 												});
 
-												router.push("/list/users");
+												router.push("/users");
 										  }
 										: undefined
 								}
@@ -271,7 +237,7 @@ export default function CorporateDashboard({user, linkedCorporate}: Props) {
 															.includes(x.id),
 												});
 
-												router.push("/list/users");
+												router.push("/users");
 										  }
 										: undefined
 								}

src/dashboards/IconCard.tsx

@@ -22,10 +22,10 @@ export default function IconCard({Icon, label, value, color, tooltip, onClick, c
 	};
 
 	return (
-		<div
+		<button
 			onClick={onClick}
 			className={clsx(
-				"bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300",
+				"bg-white border rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-full h-52 justify-center cursor-pointer hover:shadow-lg hover:border-mti-purple-dark transition ease-in-out duration-300",
 				tooltip && "tooltip tooltip-bottom",
 				isSelected && `border border-solid border-${colorClasses[color]}`,
 				className,
@@ -38,6 +38,6 @@ export default function IconCard({Icon, label, value, color, tooltip, onClick, c
 					{isLoading ? "..." : value}
 				</span>
 			</span>
-		</div>
+		</button>
 	);
 }

src/dashboards/MasterCorporate/index.tsx

@@ -276,7 +276,7 @@ export default function MasterCorporateDashboard({user}: Props) {
 															.includes(x.id),
 												});
 
-												router.push("/list/users");
+												router.push("/users");
 										  }
 										: undefined
 								}
@@ -296,7 +296,7 @@ export default function MasterCorporateDashboard({user}: Props) {
 															.includes(x.id),
 												});
 
-												router.push("/list/users");
+												router.push("/users");
 										  }
 										: undefined
 								}

src/dashboards/Student.tsx

@@ -71,7 +71,7 @@ export default function StudentDashboard({user, linkedCorporate}: Props) {
 				);
 				setAssignment(assignment);
 
-				router.push("/exercises");
+				router.push("/exam");
 			}
 		});
 	};

src/dashboards/Teacher.tsx

@@ -202,7 +202,7 @@ export default function TeacherDashboard({user, linkedCorporate}: Props) {
 															.includes(x.id),
 												});
 
-												router.push("/list/users");
+												router.push("/users");
 										  }
 										: undefined
 								}
@@ -222,7 +222,7 @@ export default function TeacherDashboard({user, linkedCorporate}: Props) {
 															.includes(x.id),
 												});
 
-												router.push("/list/users");
+												router.push("/users");
 										  }
 										: undefined
 								}

src/dashboards/views/AssignmentsPage.tsx

@@ -42,6 +42,7 @@ export default function AssignmentsPage({assignments, corporateAssignments, user
 			{displayAssignmentView && (
 				<AssignmentView
 					isOpen={displayAssignmentView}
+					users={users}
 					onClose={() => {
 						setSelectedAssignment(undefined);
 						setIsCreatingAssignment(false);

src/email/templates/assignment.handlebars

@@ -19,10 +19,10 @@
   </p>
   <br />
   <p>Don't forget to do it before its end date!</p>
-  <p>Click <b><a href="https://{{environment}}.encoach.com">here</a></b> to open the EnCoach Platform!</p>
+  <p>Click <b><a href="https://{{environment}}.encoach.com/exam?assignment={{assignment.id}}">here</a></b> to open the assignment on EnCoach!</p>
   <br />
   <p>Thanks,</p>
   <p>Your EnCoach team</p>
 </div>
 
-</html>
+</html>

src/email/templates/assignment.handlebars.json

@@ -8,6 +8,7 @@
     "assignees": [],
     "modules": "Reading and Writing",
     "startDate": "24/12/2023",
-    "endDate": "27/01/2024"
+    "endDate": "27/01/2024",
+    "id": "123"
   }
-}
+}

src/email/templates/receivedInvite.handlebars

@@ -13,7 +13,7 @@
     <span>Hello {{name}},</span>
     <br/>
     <br/>
-    <span>You have been invited to join {{corporateName}}'s group!</span>
+    <span>You have been invited to join the {{entity}} entity!</span>
     <br />
     <br/>
     <span>Please access the platform to accept or decline the invite.</span>

src/email/templates/resetPassword.handlebars

@@ -0,0 +1,16 @@
+<html>
+
+<head>
+  <style>
+
+  </style>
+</head>
+
+<body>
+  <p>Hi {{name}},</p>
+  <p>You requested to reset your password.</p>
+  <p> Please, click the link below to reset your password</p>
+  <a href="https://{{link}}">Reset Password</a>
+</body>
+
+</html>

src/exams/Selection.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
-import {useState} from "react";
+import {useMemo, useState} from "react";
 import {Module} from "@/interfaces";
 import clsx from "clsx";
 import {Stat, User} from "@/interfaces/user";
@@ -22,10 +22,9 @@ interface Props {
 	user: User;
 	page: "exercises" | "exams";
 	onStart: (modules: Module[], avoidRepeated: boolean, variant: Variant) => void;
-	disableSelection?: boolean;
 }
 
-export default function Selection({user, page, onStart, disableSelection = false}: Props) {
+export default function Selection({user, page, onStart}: Props) {
 	const [selectedModules, setSelectedModules] = useState<Module[]>([]);
 	const [avoidRepeatedExams, setAvoidRepeatedExams] = useState(true);
 	const [variant, setVariant] = useState<Variant>("full");
@@ -40,6 +39,10 @@ export default function Selection({user, page, onStart, disableSelection = false
 		setSelectedModules((prev) => (prev.includes(module) ? modules : [...modules, module]));
 	};
 
+	const isCompleteExam = useMemo(() =>
+		["reading", "listening", "writing", "speaking"].every(m => selectedModules.includes(m as Module)), [selectedModules]
+	)
+
 	const loadSession = async (session: Session) => {
 		state.setShuffles(session.userSolutions.map((x) => ({exerciseID: x.exercise, shuffles: x.shuffleMaps ? x.shuffleMaps : []})));
 		state.setSelectedModules(session.selectedModules);
@@ -146,10 +149,10 @@ export default function Selection({user, page, onStart, disableSelection = false
 
 				<section className="-lg:flex-col -lg:items-center -lg:gap-12 mt-4 flex w-full justify-between gap-8">
 					<div
-						onClick={!disableSelection && !selectedModules.includes("level") ? () => toggleModule("reading") : undefined}
+						onClick={!selectedModules.includes("level") ? () => toggleModule("reading") : undefined}
 						className={clsx(
 							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-							selectedModules.includes("reading") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
+							selectedModules.includes("reading") ? "border-mti-purple-light" : "border-mti-gray-platinum",
 						)}>
 						<div className="bg-ielts-reading absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
 							<BsBook className="h-7 w-7 text-white" />
@@ -158,19 +161,19 @@ export default function Selection({user, page, onStart, disableSelection = false
 						<p className="text-left text-xs">
 							Expand your vocabulary, improve your reading comprehension and improve your ability to interpret texts in English.
 						</p>
-						{!selectedModules.includes("reading") && !selectedModules.includes("level") && !disableSelection && (
+						{!selectedModules.includes("reading") && !selectedModules.includes("level") && (
 							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
 						)}
-						{(selectedModules.includes("reading") || disableSelection) && (
+						{(selectedModules.includes("reading")) && (
 							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
 						)}
 						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
 					</div>
 					<div
-						onClick={!disableSelection && !selectedModules.includes("level") ? () => toggleModule("listening") : undefined}
+						onClick={!selectedModules.includes("level") ? () => toggleModule("listening") : undefined}
 						className={clsx(
 							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-							selectedModules.includes("listening") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
+							selectedModules.includes("listening") ? "border-mti-purple-light" : "border-mti-gray-platinum",
 						)}>
 						<div className="bg-ielts-listening absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
 							<BsHeadphones className="h-7 w-7 text-white" />
@@ -179,19 +182,19 @@ export default function Selection({user, page, onStart, disableSelection = false
 						<p className="text-left text-xs">
 							Improve your ability to follow conversations in English and your ability to understand different accents and intonations.
 						</p>
-						{!selectedModules.includes("listening") && !selectedModules.includes("level") && !disableSelection && (
+						{!selectedModules.includes("listening") && !selectedModules.includes("level") && (
 							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
 						)}
-						{(selectedModules.includes("listening") || disableSelection) && (
+						{(selectedModules.includes("listening")) && (
 							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
 						)}
 						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
 					</div>
 					<div
-						onClick={!disableSelection && !selectedModules.includes("level") ? () => toggleModule("writing") : undefined}
+						onClick={!selectedModules.includes("level") ? () => toggleModule("writing") : undefined}
 						className={clsx(
 							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-							selectedModules.includes("writing") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
+							selectedModules.includes("writing") ? "border-mti-purple-light" : "border-mti-gray-platinum",
 						)}>
 						<div className="bg-ielts-writing absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
 							<BsPen className="h-7 w-7 text-white" />
@@ -200,19 +203,19 @@ export default function Selection({user, page, onStart, disableSelection = false
 						<p className="text-left text-xs">
 							Allow you to practice writing in a variety of formats, from simple paragraphs to complex essays.
 						</p>
-						{!selectedModules.includes("writing") && !selectedModules.includes("level") && !disableSelection && (
+						{!selectedModules.includes("writing") && !selectedModules.includes("level") && (
 							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
 						)}
-						{(selectedModules.includes("writing") || disableSelection) && (
+						{(selectedModules.includes("writing")) && (
 							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
 						)}
 						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
 					</div>
 					<div
-						onClick={!disableSelection && !selectedModules.includes("level") ? () => toggleModule("speaking") : undefined}
+						onClick={!selectedModules.includes("level") ? () => toggleModule("speaking") : undefined}
 						className={clsx(
 							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-							selectedModules.includes("speaking") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
+							selectedModules.includes("speaking") ? "border-mti-purple-light" : "border-mti-gray-platinum",
 						)}>
 						<div className="bg-ielts-speaking absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
 							<BsMegaphone className="h-7 w-7 text-white" />
@@ -221,37 +224,35 @@ export default function Selection({user, page, onStart, disableSelection = false
 						<p className="text-left text-xs">
 							You&apos;ll have access to interactive dialogs, pronunciation exercises and speech recordings.
 						</p>
-						{!selectedModules.includes("speaking") && !selectedModules.includes("level") && !disableSelection && (
+						{!selectedModules.includes("speaking") && !selectedModules.includes("level") && (
 							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
 						)}
-						{(selectedModules.includes("speaking") || disableSelection) && (
+						{(selectedModules.includes("speaking")) && (
 							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
 						)}
 						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
 					</div>
-					{!disableSelection && (
-						<div
-							onClick={selectedModules.length === 0 || selectedModules.includes("level") ? () => toggleModule("level") : undefined}
-							className={clsx(
-								"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-								selectedModules.includes("level") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
-							)}>
-							<div className="bg-ielts-level absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
-								<BsClipboard className="h-7 w-7 text-white" />
-							</div>
-							<span className="font-semibold">Level:</span>
-							<p className="text-left text-xs">You&apos;ll be able to test your english level with multiple choice questions.</p>
-							{!selectedModules.includes("level") && selectedModules.length === 0 && !disableSelection && (
-								<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
-							)}
-							{(selectedModules.includes("level") || disableSelection) && (
-								<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
-							)}
-							{!selectedModules.includes("level") && selectedModules.length > 0 && (
-								<BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
-							)}
+					<div
+						onClick={selectedModules.length === 0 || selectedModules.includes("level") ? () => toggleModule("level") : undefined}
+						className={clsx(
+							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
+							selectedModules.includes("level") ? "border-mti-purple-light" : "border-mti-gray-platinum",
+						)}>
+						<div className="bg-ielts-level absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
+							<BsClipboard className="h-7 w-7 text-white" />
 						</div>
-					)}
+						<span className="font-semibold">Level:</span>
+						<p className="text-left text-xs">You&apos;ll be able to test your english level with multiple choice questions.</p>
+						{!selectedModules.includes("level") && selectedModules.length === 0 && (
+							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
+						)}
+						{(selectedModules.includes("level")) && (
+							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
+						)}
+						{!selectedModules.includes("level") && selectedModules.length > 0 && (
+							<BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
+						)}
+					</div>
 				</section>
 				<div className="-md:flex-col -md:gap-4 -md:justify-center flex w-full items-center md:justify-between">
 					<div className="flex w-full flex-col items-center gap-3">
@@ -291,19 +292,29 @@ export default function Selection({user, page, onStart, disableSelection = false
 							Start Exam
 						</Button>
 					</div>
-					<Button
-						onClick={() =>
-							onStart(
-								!disableSelection ? selectedModules.sort(sortByModuleName) : ["reading", "listening", "writing", "speaking"],
-								avoidRepeatedExams,
-								variant,
-							)
-						}
-						color="purple"
-						className="-md:hidden w-full max-w-xs px-12 md:self-end"
-						disabled={selectedModules.length === 0 && !disableSelection}>
-						Start Exam
-					</Button>
+					<div className="flex items-center gap-4 w-full">
+						<Button
+							color="green"
+							variant={isCompleteExam ? "solid" : "outline"}
+							onClick={() => isCompleteExam ? setSelectedModules([]) : setSelectedModules(["reading", "listening", "writing", "speaking"])}
+							className="-md:hidden w-full max-w-xs px-12 md:self-end"
+						>
+								Complete Exam
+						</Button>
+						<Button
+							onClick={() =>
+								onStart(
+									selectedModules.sort(sortByModuleName),
+									avoidRepeatedExams,
+									variant,
+								)
+							}
+							color="purple"
+							className="-md:hidden w-full max-w-xs px-12 md:self-end"
+							disabled={selectedModules.length === 0}>
+							Start Exam
+						</Button>
+					</div>
 				</div>
 			</div>
 		</>

src/exams/Speaking.tsx

@@ -27,6 +27,12 @@ export default function Speaking({exam, showSolutions = false, onFinish}: Props)
 	const {hasExamEnded, setHasExamEnded} = useExamStore((state) => state);
 	const {exerciseIndex, setExerciseIndex} = useExamStore((state) => state);
 
+	useEffect(() => {
+		if (hasExamEnded && exerciseIndex === -1) {
+			setExerciseIndex(exerciseIndex + 1);
+		}
+	}, [hasExamEnded, exerciseIndex, setExerciseIndex]);
+
 	const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));
 
 	const nextExercise = (solution?: UserSolution) => {

src/exams/Writing.tsx

@@ -32,6 +32,12 @@ export default function Writing({ exam, showSolutions = false, preview = false,
 	const [seenParts, setSeenParts] = useState<Set<number>>(new Set(showSolutions ? exam.exercises.map((_, index) => index) : []));
 	const [showPartDivider, setShowPartDivider] = useState<boolean>(typeof exam.exercises[0].intro === "string" && exam.exercises[0].intro !== "");
 
+	useEffect(() => {
+		if (hasExamEnded && exerciseIndex === -1) {
+			setExerciseIndex(exerciseIndex + 1);
+		}
+	}, [hasExamEnded, exerciseIndex, setExerciseIndex]);
+
 	const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));
 
 	useEffect(() => {

src/hooks/useEntities.tsx

@@ -0,0 +1,23 @@
+import { EntityWithRoles } from "@/interfaces/entity";
+import { Discount } from "@/interfaces/paypal";
+import { Code, Group, User } from "@/interfaces/user";
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+export default function useEntities() {
+  const [entities, setEntities] = useState<EntityWithRoles[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const getData = () => {
+    setIsLoading(true);
+    axios
+      .get<EntityWithRoles[]>("/api/entities?showRoles=true")
+      .then((response) => setEntities(response.data))
+      .finally(() => setIsLoading(false));
+  };
+
+  useEffect(getData, []);
+
+  return { entities, isLoading, isError, reload: getData };
+}

src/hooks/useEntitiesGroups.tsx

@@ -0,0 +1,23 @@
+import { EntityWithRoles, WithEntity, WithLabeledEntities } from "@/interfaces/entity";
+import { Discount } from "@/interfaces/paypal";
+import { Code, Group, Type, User } from "@/interfaces/user";
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+export default function useEntitiesGroups() {
+  const [groups, setGroups] = useState<WithEntity<Group>[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const getData = () => {
+    setIsLoading(true);
+    axios
+      .get<WithEntity<Group>[]>(`/api/entities/groups`)
+      .then((response) => setGroups(response.data))
+      .finally(() => setIsLoading(false));
+  };
+
+  useEffect(getData, []);
+
+  return { groups, isLoading, isError, reload: getData };
+}

src/hooks/useEntitiesUsers.tsx

@@ -0,0 +1,23 @@
+import { EntityWithRoles, WithLabeledEntities } from "@/interfaces/entity";
+import { Discount } from "@/interfaces/paypal";
+import { Code, Group, Type, User } from "@/interfaces/user";
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+export default function useEntitiesUsers(type?: Type) {
+  const [users, setUsers] = useState<WithLabeledEntities<User>[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const getData = () => {
+    setIsLoading(true);
+    axios
+      .get<WithLabeledEntities<User>[]>(`/api/entities/users${type ? "?type=" + type : ""}`)
+      .then((response) => setUsers(response.data))
+      .finally(() => setIsLoading(false));
+  };
+
+  useEffect(getData, [type]);
+
+  return { users, isLoading, isError, reload: getData };
+}

src/hooks/useEntityPermissions.tsx

@@ -0,0 +1,24 @@
+import { EntityWithRoles } from "@/interfaces/entity";
+import { User } from "@/interfaces/user";
+import { RolePermission } from "@/resources/entityPermissions";
+import { mapBy } from "@/utils";
+import { doesEntityAllow, findAllowedEntities, findAllowedEntitiesSomePermissions } from "@/utils/permissions";
+import { isAdmin } from "@/utils/users";
+import { useMemo, useState } from "react";
+
+export const useAllowedEntities = (user: User, entities: EntityWithRoles[], permission: RolePermission) => {
+	const allowedEntityIds = useMemo(() => findAllowedEntities(user, entities, permission), [user, entities, permission])
+	return allowedEntityIds
+}
+
+export const useAllowedEntitiesSomePermissions = (user: User, entities: EntityWithRoles[], permissions: RolePermission[]) => {
+	const allowedEntityIds = useMemo(() => findAllowedEntitiesSomePermissions(user, entities, permissions), [user, entities, permissions])
+	return allowedEntityIds
+}
+
+export const useEntityPermission = (user: User, entity?: EntityWithRoles, permission?: RolePermission) => {
+	if (isAdmin(user)) return true
+	if (!entity || !permission) return false
+
+	return doesEntityAllow(user, entity, permission)
+}

src/hooks/useListSearch.tsx

@@ -5,7 +5,7 @@ import {search} from "@/utils/search";
 export function useListSearch<T>(fields: string[][], rows: T[]) {
 	const [text, setText] = useState("");
 
-	const renderSearch = () => <Input label="Search" type="text" name="search" onChange={setText} placeholder="Enter search text" value={text} />;
+	const renderSearch = () => <Input type="text" name="search" onChange={setText} placeholder="Enter search text" value={text} />;
 
 	const updatedRows = useMemo(() => {
 		if (text.length > 0) return search(text, fields, rows);

src/hooks/usePagination.tsx

@@ -1,5 +1,7 @@
 import Button from "@/components/Low/Button";
 import {useMemo, useState} from "react";
+import {BiChevronLeft} from "react-icons/bi";
+import {BsChevronDoubleLeft, BsChevronDoubleRight, BsChevronLeft, BsChevronRight} from "react-icons/bs";
 
 export default function usePagination<T>(list: T[], size = 25) {
 	const [page, setPage] = useState(0);
@@ -24,5 +26,35 @@ export default function usePagination<T>(list: T[], size = 25) {
 		</div>
 	);
 
-	return {page, items, setPage, render};
+	const renderMinimal = () => (
+		<div className="flex gap-4 items-center">
+			<div className="flex gap-2 items-center">
+				<button disabled={page === 0} onClick={() => setPage(0)} className="disabled:opacity-60 disabled:cursor-not-allowed">
+					<BsChevronDoubleLeft />
+				</button>
+				<button disabled={page === 0} onClick={() => setPage((prev) => prev - 1)} className="disabled:opacity-60 disabled:cursor-not-allowed">
+					<BsChevronLeft />
+				</button>
+			</div>
+			<span className="opacity-80 w-32 text-center">
+				{page * size + 1} - {(page + 1) * size > list.length ? list.length : (page + 1) * size} / {list.length}
+			</span>
+			<div className="flex gap-2 items-center">
+				<button
+					disabled={(page + 1) * size >= list.length}
+					onClick={() => setPage((prev) => prev + 1)}
+					className="disabled:opacity-60 disabled:cursor-not-allowed">
+					<BsChevronRight />
+				</button>
+				<button
+					disabled={(page + 1) * size >= list.length}
+					onClick={() => setPage(Math.floor(list.length / size))}
+					className="disabled:opacity-60 disabled:cursor-not-allowed">
+					<BsChevronDoubleRight />
+				</button>
+			</div>
+		</div>
+	);
+
+	return {page, items, setPage, render, renderMinimal};
 }

src/interfaces/entity.ts

@@ -0,0 +1,31 @@
+import { RolePermission } from "@/resources/entityPermissions";
+
+export interface Entity {
+  id: string;
+  label: string;
+}
+
+export interface Role {
+  id: string;
+  entityID: string;
+  permissions: RolePermission[];
+  label: string;
+  isDefault?: boolean
+}
+
+export interface EntityWithRoles extends Entity {
+  roles: Role[];
+};
+
+export type WithLabeledEntities<T> = T extends { entities: { id: string; role: string }[] }
+  ? Omit<T, "entities"> & { entities: { id: string; label?: string; role: string, roleLabel?: string }[] }
+  : T;
+
+
+export type WithEntity<T> = T extends { entity?: string }
+  ? Omit<T, "entity"> & { entity: Entity }
+  : T;
+
+export type WithEntities<T> = T extends { entities: { id: string; role: string }[] }
+  ? Omit<T, "entities"> & { entities: { entity?: Entity; role?: Role }[] }
+  : T;

src/interfaces/index.ts

@@ -8,5 +8,6 @@ export interface Step {
 
 export interface Grading {
 	user: string;
+	entity?: string;
 	steps: Step[];
 }

src/interfaces/invite.ts

@@ -1,5 +1,12 @@
+import { Entity } from "./entity";
+
 export interface Invite {
-  id: string;
-  from: string;
-  to: string;
+	id: string;
+	entity: string;
+	from: string
+	to: string;
+}
+
+export interface InviteWithEntity extends Omit<Invite, "entity"> {
+	entity?: Entity;
 }

src/interfaces/results.ts

@@ -34,6 +34,7 @@ export interface Assignment {
 	start?: boolean;
 	autoStartDate?: Date;
 	autoStart?: boolean;
+	entity?: string;
 }
 
 export type AssignmentWithCorporateId = Assignment & {corporateId: string};

src/interfaces/user.ts

@@ -22,6 +22,7 @@ export interface BasicUser {
 	status: UserStatus;
 	permissions: PermissionType[];
 	lastLogin?: Date;
+	entities: {id: string; role: string}[];
 }
 
 export interface StudentUser extends BasicUser {
@@ -149,6 +150,12 @@ export interface Group {
 	participants: string[];
 	id: string;
 	disableEditing?: boolean;
+	entity?: string;
+}
+
+export interface GroupWithUsers extends Omit<Group, "participants" | "admin"> {
+	admin: User;
+	participants: User[];
 }
 
 export interface Code {
@@ -165,4 +172,6 @@ export interface Code {
 }
 
 export type Type = "student" | "teacher" | "corporate" | "admin" | "developer" | "agent" | "mastercorporate";
-export const userTypes: Type[] = ["student", "teacher", "corporate", "admin", "developer", "agent", "mastercorporate"];
+export const userTypes: Type[] = ["student", "teacher", "corporate", "admin", "developer", "agent", "mastercorporate"];
+
+export type WithUser<T> = T extends {participants: string[]} ? Omit<T, "participants"> & {participants: User[]} : T;

src/pages/(admin)/BatchCreateUser/IUserImport.ts

@@ -3,12 +3,13 @@ import { Type as UserType} from "@/interfaces/user";
 export type Type = Exclude<UserType, "admin" | "developer" | "agent" | "mastercorporate">;
 
 export interface UserImport {
+	id: string;
 	email: string;
 	name: string;
 	passport_id: string;
 	type: Type;
 	groupName: string;
-	corporate: string;
+	entity: string;
 	studentID: string;
 	demographicInformation: {
 		country: string;

src/pages/(admin)/BatchCreateUser/UserTable.tsx

@@ -40,13 +40,9 @@ const columns = [
     cell: info => info.getValue(),
     header: () => 'Phone Number',
   }),
-  columnHelper.accessor('corporate', {
-    cell: info => info.getValue(),
-    header: () => 'Corporate (e-mail)',
-  }),
   columnHelper.accessor('groupName', {
     cell: info => info.getValue(),
-    header: () => 'Group Name',
+    header: () => 'Classroom Name',
   }),
   columnHelper.accessor('demographicInformation.country', {
     cell: info => info.getValue(),

src/pages/(admin)/BatchCreateUser/index.tsx

@@ -17,6 +17,8 @@ import countryCodes from "country-codes-list";
 import { User, Type as UserType } from "@/interfaces/user";
 import { Type, UserImport } from "./IUserImport";
 import UserTable from "./UserTable";
+import { EntityWithRoles } from "@/interfaces/entity";
+import Select from "@/components/Low/Select";
 
 const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
 
@@ -62,10 +64,11 @@ const USER_TYPE_PERMISSIONS: {
 interface Props {
 	user: User;
 	permissions: PermissionType[];
+	entities: EntityWithRoles[]
 	onFinish: () => void;
 }
 
-export default function BatchCreateUser({ user, permissions, onFinish }: Props) {
+export default function BatchCreateUser({ user, entities, permissions, onFinish }: Props) {
 	const [infos, setInfos] = useState<UserImport[]>([]);
 
 	const [duplicatedUsers, setDuplicatedUsers] = useState<UserImport[]>([]);
@@ -78,6 +81,7 @@ export default function BatchCreateUser({ user, permissions, onFinish }: Props)
 	const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
 	const [type, setType] = useState<Type>("student");
 	const [showHelp, setShowHelp] = useState(false);
+	const [entity, setEntity] = useState((entities || [])[0]?.id || undefined)
 
 	const { openFilePicker, filesContent, clear } = useFilePicker({
 		accept: ".xlsx",
@@ -97,7 +101,7 @@ export default function BatchCreateUser({ user, permissions, onFinish }: Props)
 					const information = uniqBy(
 						rows
 							.map((row) => {
-								const [firstName, lastName, studentID, passport_id, email, phone, corporate, group, country] = row as string[];
+								const [firstName, lastName, studentID, passport_id, email, phone, group, country] = row as string[];
 								const countryItem =
 									countryCodes.findOne("countryCode" as any, country.toUpperCase()) ||
 									countryCodes.all().find((x) => x.countryNameEn.toLowerCase() === country.toLowerCase());
@@ -109,8 +113,8 @@ export default function BatchCreateUser({ user, permissions, onFinish }: Props)
 										type: type,
 										passport_id: passport_id?.toString().trim() || undefined,
 										groupName: group,
-										corporate,
 										studentID,
+										entity,
 										demographicInformation: {
 											country: countryItem?.countryCode,
 											passport_id: passport_id?.toString().trim() || undefined,
@@ -131,7 +135,9 @@ export default function BatchCreateUser({ user, permissions, onFinish }: Props)
 					}
 
 					setInfos(information);
-				} catch {
+				} catch(e) {
+					console.log(e)
+
 					toast.error(
 						"Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!",
 					);
@@ -170,22 +176,37 @@ export default function BatchCreateUser({ user, permissions, onFinish }: Props)
 	}, [infos]);
 
 	const makeUsers = async () => {
-		if (!confirm(`You are about to add ${newUsers.length} user${newUsers.length !== 1 ? 's' : ''}, are you sure you want to continue?`)) return;
+		const newUsersSentence = newUsers.length > 0 ? `create ${newUsers.length} user(s)` : undefined;
+		const existingUsersSentence = duplicatedUsers.length > 0 ? `invite ${duplicatedUsers.length} registered student(s)` : undefined;
 
+		if (!confirm(`You are about to ${[newUsersSentence, existingUsersSentence].filter((x) => !!x).join(" and ")}, are you sure you want to continue?`))
+			return;
+
+		/*Promise.all(duplicatedUsers.map(async (u) => await axios.post(`/api/invites`, {to: u.id, entity, from: user.id})))
+			.then(() => toast.success(`Successfully invited ${duplicatedUsers.length} registered student(s)!`))
+			.finally(() => {
+				if (newUsers.length === 0) setIsLoading(false);
+			});
+		*/
 		if (newUsers.length > 0) {
 			setIsLoading(true);
 
 			try {
-				//await axios.post("/api/batch_users", {users: newUsers.map((user) => ({...user, type, expiryDate}))});
+				await axios.post("/api/batch_users", {users: newUsers.map((user) => ({...user, type, expiryDate}))});
 				toast.success(`Successfully added ${newUsers.length} user(s)!`);
 				onFinish();
-			} catch {
+			} catch(e) {
+				console.error(e)
 				toast.error("Something went wrong, please try again later!");
 			} finally {
 				setIsLoading(false);
 				setInfos([]);
 				clear();
 			}
+		} else {
+			setIsLoading(false);
+			setInfos([]);
+			clear();
 		}
 	};
 
@@ -203,8 +224,7 @@ export default function BatchCreateUser({ user, permissions, onFinish }: Props)
 								<th className="border border-neutral-200 px-2 py-1">Passport/National ID</th>
 								<th className="border border-neutral-200 px-2 py-1">E-mail</th>
 								<th className="border border-neutral-200 px-2 py-1">Phone Number</th>
-								{user?.type !== "corporate" && <th className="border border-neutral-200 px-2 py-1">Corporate (e-mail)</th>}
-								<th className="border border-neutral-200 px-2 py-1">Group Name</th>
+								<th className="border border-neutral-200 px-2 py-1">Classroom Name</th>
 								<th className="border border-neutral-200 px-2 py-1">Country</th>
 							</tr>
 						</thead>
@@ -221,15 +241,28 @@ export default function BatchCreateUser({ user, permissions, onFinish }: Props)
 				</div>
 			</Modal>
 			<div className="border-mti-gray-platinum flex flex-col gap-4 rounded-xl border p-4">
-				<div className="flex items-end justify-between">
-					<label className="text-mti-gray-dim text-base font-normal">Choose an Excel file</label>
-					<div className="tooltip cursor-pointer" data-tip="Excel File Format" onClick={() => setShowHelp(true)}>
-						<BsQuestionCircleFill />
+				<div className="grid grid-cols-2 -md:grid-cols-1 gap-4">
+					<div className="flex flex-col gap-4">
+						<div className="flex items-end justify-between">
+							<label className="text-mti-gray-dim text-base font-normal">Choose an Excel file</label>
+							<div className="tooltip cursor-pointer" data-tip="Excel File Format" onClick={() => setShowHelp(true)}>
+								<BsQuestionCircleFill />
+							</div>
+						</div>
+						<Button onClick={openFilePicker} isLoading={isLoading} disabled={isLoading}>
+							{filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
+						</Button>
+					</div>
+					<div className={clsx("flex flex-col gap-4")}>
+          	<label className="font-normal text-base text-mti-gray-dim">Entity</label>
+	          <Select
+	            defaultValue={{ value: (entities || [])[0]?.id, label: (entities || [])[0]?.label }}
+	            options={entities.map((e) => ({ value: e.id, label: e.label }))}
+	            onChange={(e) => setEntity(e?.value || undefined)}
+	            isClearable={checkAccess(user, ["admin", "developer"])}
+	          />
 					</div>
 				</div>
-				<Button onClick={openFilePicker} isLoading={isLoading} disabled={isLoading}>
-					{filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
-				</Button>
 				{user && checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
 					<>
 						<div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">

src/pages/(admin)/ExamLoader.tsx

@@ -39,7 +39,7 @@ export default function ExamLoader() {
 			setExams([exam]);
 			setSelectedModules([selectedModule]);
 
-			router.push("/exercises");
+			router.push("/exam");
 		}
 
 		setIsLoading(false);

src/pages/(admin)/Lists/CodeList.tsx

@@ -29,7 +29,7 @@ const CreatorCell = ({id, users}: {id: string; users: User[]}) => {
 	return (
 		<>
 			{(creatorUser?.type === "corporate" ? creatorUser?.corporateInformation?.companyInformation?.name : creatorUser?.name || "N/A") || "N/A"}{" "}
-			{creatorUser && `(${USER_TYPE_LABELS[creatorUser.type]})`}
+			{creatorUser && `(${USER_TYPE_LABELS[creatorUser?.type]})`}
 		</>
 	);
 };
@@ -216,10 +216,10 @@ export default function CodeList({user}: {user: User}) {
 							filteredCorporate
 								? {
 										label: `${
-											filteredCorporate.type === "corporate"
+											filteredCorporate?.type === "corporate"
 												? filteredCorporate.corporateInformation?.companyInformation?.name || filteredCorporate.name
 												: filteredCorporate.name
-										} (${USER_TYPE_LABELS[filteredCorporate.type]})`,
+										} (${USER_TYPE_LABELS[filteredCorporate?.type]})`,
 										value: filteredCorporate.id,
 								  }
 								: null

src/pages/(admin)/Lists/ExamList.tsx

@@ -303,4 +303,4 @@ export default function ExamList({user}: {user: User}) {
 			</table>
 		</div>
 	);
-}
+}

src/pages/(admin)/Lists/GroupList.tsx

@@ -3,373 +3,300 @@ import Input from "@/components/Low/Input";
 import Modal from "@/components/Modal";
 import useGroups from "@/hooks/useGroups";
 import useUsers from "@/hooks/useUsers";
-import {CorporateUser, Group, User} from "@/interfaces/user";
-import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import { CorporateUser, Group, User } from "@/interfaces/user";
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import axios from "axios";
-import {capitalize, uniq} from "lodash";
-import {useEffect, useMemo, useState} from "react";
-import {BsPencil, BsQuestionCircleFill, BsTrash} from "react-icons/bs";
+import { capitalize, uniq } from "lodash";
+import { useEffect, useMemo, useState } from "react";
+import { BsPencil, BsQuestionCircleFill, BsTrash } from "react-icons/bs";
 import Select from "react-select";
-import {toast} from "react-toastify";
+import { toast } from "react-toastify";
 import readXlsxFile from "read-excel-file";
-import {useFilePicker} from "use-file-picker";
-import {getUserCorporate} from "@/utils/groups";
-import {isAgentUser, isCorporateUser, USER_TYPE_LABELS} from "@/resources/user";
-import {checkAccess} from "@/utils/permissions";
+import { useFilePicker } from "use-file-picker";
+import { getUserCorporate } from "@/utils/groups";
+import { isAgentUser, isCorporateUser, USER_TYPE_LABELS } from "@/resources/user";
+import { checkAccess } from "@/utils/permissions";
 import usePermissions from "@/hooks/usePermissions";
-import {useListSearch} from "@/hooks/useListSearch";
+import { useListSearch } from "@/hooks/useListSearch";
+import Table from "@/components/High/Table";
+import useEntitiesGroups from "@/hooks/useEntitiesGroups";
+import useEntitiesUsers from "@/hooks/useEntitiesUsers";
+import { WithEntity } from "@/interfaces/entity";
 const searchFields = [["name"]];
 
-const columnHelper = createColumnHelper<Group>();
+const columnHelper = createColumnHelper<WithEntity<Group>>();
 const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
 
-const LinkedCorporate = ({userId, users, groups}: {userId: string; users: User[]; groups: Group[]}) => {
-	const [companyName, setCompanyName] = useState("");
-	const [isLoading, setIsLoading] = useState(false);
-
-	useEffect(() => {
-		const user = users.find((u) => u.id === userId);
-		if (!user) return setCompanyName("");
-
-		if (isCorporateUser(user)) return setCompanyName(user.corporateInformation?.companyInformation?.name || user.name);
-		if (isAgentUser(user)) return setCompanyName(user.agentInformation?.companyName || user.name);
-
-		const belongingGroups = groups.filter((x) => x.participants.includes(userId));
-		const belongingGroupsAdmins = belongingGroups.map((x) => users.find((u) => u.id === x.admin)).filter((x) => !!x && isCorporateUser(x));
-
-		if (belongingGroupsAdmins.length === 0) return setCompanyName("");
-
-		const admin = belongingGroupsAdmins[0] as CorporateUser;
-		setCompanyName(admin.corporateInformation?.companyInformation.name || admin.name);
-	}, [userId, users, groups]);
-
-	return isLoading ? <span className="animate-pulse">Loading...</span> : <>{companyName}</>;
-};
-
 interface CreateDialogProps {
-	user: User;
-	users: User[];
-	group?: Group;
-	onClose: () => void;
+  user: User;
+  users: User[];
+  group?: Group;
+  onClose: () => void;
 }
 
-const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
-	const [name, setName] = useState<string | undefined>(group?.name || undefined);
-	const [admin, setAdmin] = useState<string>(group?.admin || user.id);
-	const [participants, setParticipants] = useState<string[]>(group?.participants || []);
-	const [isLoading, setIsLoading] = useState(false);
+const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
+  const [name, setName] = useState<string | undefined>(group?.name || undefined);
+  const [admin, setAdmin] = useState<string>(group?.admin || user.id);
+  const [participants, setParticipants] = useState<string[]>(group?.participants || []);
+  const [isLoading, setIsLoading] = useState(false);
 
-	const {openFilePicker, filesContent, clear} = useFilePicker({
-		accept: ".xlsx",
-		multiple: false,
-		readAs: "ArrayBuffer",
-	});
+  const { openFilePicker, filesContent, clear } = useFilePicker({
+    accept: ".xlsx",
+    multiple: false,
+    readAs: "ArrayBuffer",
+  });
 
-	const availableUsers = useMemo(() => {
-		if (user.type === "teacher") return users.filter((x) => ["student"].includes(x.type));
-		if (user.type === "corporate") return users.filter((x) => ["teacher", "student"].includes(x.type));
-		if (user.type === "mastercorporate") return users.filter((x) => ["corporate", "teacher", "student"].includes(x.type));
+  const availableUsers = useMemo(() => {
+    if (user?.type === "teacher") return users.filter((x) => ["student"].includes(x.type));
+    if (user?.type === "corporate") return users.filter((x) => ["teacher", "student"].includes(x.type));
+    if (user?.type === "mastercorporate") return users.filter((x) => ["corporate", "teacher", "student"].includes(x.type));
 
-		return users;
-	}, [user, users]);
+    return users;
+  }, [user, users]);
 
-	useEffect(() => {
-		if (filesContent.length > 0) {
-			setIsLoading(true);
+  useEffect(() => {
+    if (filesContent.length > 0) {
+      setIsLoading(true);
 
-			const file = filesContent[0];
-			readXlsxFile(file.content).then((rows) => {
-				const emails = uniq(
-					rows
-						.map((row) => {
-							const [email] = row as string[];
-							return EMAIL_REGEX.test(email) && !users.map((u) => u.email).includes(email) ? email.toString().trim() : undefined;
-						})
-						.filter((x) => !!x),
-				);
+      const file = filesContent[0];
+      readXlsxFile(file.content).then((rows) => {
+        const emails = uniq(
+          rows
+            .map((row) => {
+              const [email] = row as string[];
+              return EMAIL_REGEX.test(email) && !users.map((u) => u.email).includes(email) ? email.toString().trim() : undefined;
+            })
+            .filter((x) => !!x),
+        );
 
-				if (emails.length === 0) {
-					toast.error("Please upload an Excel file containing e-mails!");
-					clear();
-					setIsLoading(false);
-					return;
-				}
+        if (emails.length === 0) {
+          toast.error("Please upload an Excel file containing e-mails!");
+          clear();
+          setIsLoading(false);
+          return;
+        }
 
-				const emailUsers = [...new Set(emails)].map((x) => users.find((y) => y.email.toLowerCase() === x)).filter((x) => x !== undefined);
-				const filteredUsers = emailUsers.filter(
-					(x) =>
-						((user.type === "developer" || user.type === "admin" || user.type === "corporate" || user.type === "mastercorporate") &&
-							(x?.type === "student" || x?.type === "teacher")) ||
-						(user.type === "teacher" && x?.type === "student"),
-				);
+        const emailUsers = [...new Set(emails)].map((x) => users.find((y) => y.email.toLowerCase() === x)).filter((x) => x !== undefined);
+        const filteredUsers = emailUsers.filter(
+          (x) =>
+            ((user.type === "developer" || user.type === "admin" || user.type === "corporate" || user.type === "mastercorporate") &&
+              (x?.type === "student" || x?.type === "teacher")) ||
+            (user.type === "teacher" && x?.type === "student"),
+        );
 
-				setParticipants(filteredUsers.filter((x) => !!x).map((x) => x!.id));
-				toast.success(
-					user.type !== "teacher"
-						? "Added all teachers and students found in the file you've provided!"
-						: "Added all students found in the file you've provided!",
-					{toastId: "upload-success"},
-				);
-				setIsLoading(false);
-			});
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [filesContent, user.type, users]);
+        setParticipants(filteredUsers.filter((x) => !!x).map((x) => x!.id));
+        toast.success(
+          user.type !== "teacher"
+            ? "Added all teachers and students found in the file you've provided!"
+            : "Added all students found in the file you've provided!",
+          { toastId: "upload-success" },
+        );
+        setIsLoading(false);
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filesContent, user.type, users]);
 
-	const submit = () => {
-		setIsLoading(true);
+  const submit = () => {
+    setIsLoading(true);
 
-		if (name !== group?.name && (name?.trim() === "Students" || name?.trim() === "Teachers" || name?.trim() === "Corporate")) {
-			toast.error("That group name is reserved and cannot be used, please enter another one.");
-			setIsLoading(false);
-			return;
-		}
+    if (name !== group?.name && (name?.trim() === "Students" || name?.trim() === "Teachers" || name?.trim() === "Corporate")) {
+      toast.error("That group name is reserved and cannot be used, please enter another one.");
+      setIsLoading(false);
+      return;
+    }
 
-		(group ? axios.patch : axios.post)(group ? `/api/groups/${group.id}` : "/api/groups", {name, admin, participants})
-			.then(() => {
-				toast.success(`Group "${name}" ${group ? "edited" : "created"} successfully`);
-				return true;
-			})
-			.catch(() => {
-				toast.error("Something went wrong, please try again later!");
-				return false;
-			})
-			.finally(() => {
-				setIsLoading(false);
-				onClose();
-			});
-	};
+    (group ? axios.patch : axios.post)(group ? `/api/groups/${group.id}` : "/api/groups", { name, admin, participants })
+      .then(() => {
+        toast.success(`Group "${name}" ${group ? "edited" : "created"} successfully`);
+        return true;
+      })
+      .catch(() => {
+        toast.error("Something went wrong, please try again later!");
+        return false;
+      })
+      .finally(() => {
+        setIsLoading(false);
+        onClose();
+      });
+  };
 
-	return (
-		<div className="mt-4 flex w-full flex-col gap-12 px-4 py-2">
-			<div className="flex flex-col gap-8">
-				<Input name="name" type="text" label="Name" defaultValue={name} onChange={setName} required disabled={group?.disableEditing} />
-				<div className="flex w-full flex-col gap-3">
-					<div className="flex items-center gap-2">
-						<label className="text-mti-gray-dim text-base font-normal">Participants</label>
-						<div className="tooltip" data-tip="The Excel file should only include a column with the desired e-mails.">
-							<BsQuestionCircleFill />
-						</div>
-					</div>
-					<div className="flex w-full gap-8">
-						<Select
-							className="w-full"
-							value={participants.map((x) => ({
-								value: x,
-								label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
-							}))}
-							placeholder="Participants..."
-							defaultValue={participants.map((x) => ({
-								value: x,
-								label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
-							}))}
-							options={availableUsers.map((x) => ({value: x.id, label: `${x.email} - ${x.name}`}))}
-							onChange={(value) => setParticipants(value.map((x) => x.value))}
-							isMulti
-							isSearchable
-							menuPortalTarget={document?.body}
-							styles={{
-								menuPortal: (base) => ({...base, zIndex: 9999}),
-								control: (styles) => ({
-									...styles,
-									backgroundColor: "white",
-									padding: "1rem 1.5rem",
-									zIndex: "40",
-								}),
-							}}
-						/>
-						{user.type !== "teacher" && (
-							<Button className="w-full max-w-[300px] h-fit" onClick={openFilePicker} isLoading={isLoading} variant="outline">
-								{filesContent.length === 0 ? "Upload participants Excel file" : filesContent[0].name}
-							</Button>
-						)}
-					</div>
-				</div>
-			</div>
-			<div className="mt-8 flex w-full items-center justify-end gap-8">
-				<Button variant="outline" color="red" className="w-full max-w-[200px]" isLoading={isLoading} onClick={onClose}>
-					Cancel
-				</Button>
-				<Button className="w-full max-w-[200px]" onClick={submit} isLoading={isLoading} disabled={!name}>
-					Submit
-				</Button>
-			</div>
-		</div>
-	);
+  return (
+    <div className="mt-4 flex w-full flex-col gap-12 px-4 py-2">
+      <div className="flex flex-col gap-8">
+        <Input name="name" type="text" label="Name" defaultValue={name} onChange={setName} required disabled={group?.disableEditing} />
+        <div className="flex w-full flex-col gap-3">
+          <div className="flex items-center gap-2">
+            <label className="text-mti-gray-dim text-base font-normal">Participants</label>
+            <div className="tooltip" data-tip="The Excel file should only include a column with the desired e-mails.">
+              <BsQuestionCircleFill />
+            </div>
+          </div>
+          <div className="flex w-full gap-8">
+            <Select
+              className="w-full"
+              value={participants.map((x) => ({
+                value: x,
+                label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
+              }))}
+              placeholder="Participants..."
+              defaultValue={participants.map((x) => ({
+                value: x,
+                label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
+              }))}
+              options={availableUsers.map((x) => ({ value: x.id, label: `${x.email} - ${x.name}` }))}
+              onChange={(value) => setParticipants(value.map((x) => x.value))}
+              isMulti
+              isSearchable
+              menuPortalTarget={document?.body}
+              styles={{
+                menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                control: (styles) => ({
+                  ...styles,
+                  backgroundColor: "white",
+                  padding: "1rem 1.5rem",
+                  zIndex: "40",
+                }),
+              }}
+            />
+            {user.type !== "teacher" && (
+              <Button className="w-full max-w-[300px] h-fit" onClick={openFilePicker} isLoading={isLoading} variant="outline">
+                {filesContent.length === 0 ? "Upload participants Excel file" : filesContent[0].name}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="mt-8 flex w-full items-center justify-end gap-8">
+        <Button variant="outline" color="red" className="w-full max-w-[200px]" isLoading={isLoading} onClick={onClose}>
+          Cancel
+        </Button>
+        <Button className="w-full max-w-[200px]" onClick={submit} isLoading={isLoading} disabled={!name}>
+          Submit
+        </Button>
+      </div>
+    </div>
+  );
 };
 
-const filterTypes = ["corporate", "teacher", "mastercorporate"];
+export default function GroupList({ user }: { user: User }) {
+  const [isCreating, setIsCreating] = useState(false);
+  const [editingGroup, setEditingGroup] = useState<Group>();
+  const [viewingAllParticipants, setViewingAllParticipants] = useState<string>();
 
-export default function GroupList({user}: {user: User}) {
-	const [isCreating, setIsCreating] = useState(false);
-	const [editingGroup, setEditingGroup] = useState<Group>();
-	const [viewingAllParticipants, setViewingAllParticipants] = useState<string>();
+  const { permissions } = usePermissions(user?.id || "");
 
-	const {permissions} = usePermissions(user?.id || "");
+  const { users } = useEntitiesUsers();
+  const { groups, reload } = useEntitiesGroups();
 
-	const {users} = useUsers();
-	const {groups, reload} = useGroups({
-		admin: user && filterTypes.includes(user?.type) ? user.id : undefined,
-		userType: user?.type,
-	});
+  const deleteGroup = (group: Group) => {
+    if (!confirm(`Are you sure you want to delete "${group.name}"?`)) return;
 
-	const {groups: corporateGroups} = useGroups({
-		admin: user && filterTypes.includes(user?.type) ? user.id : undefined,
-		userType: user?.type,
-		adminAdmins: user?.id,
-	});
+    axios
+      .delete<{ ok: boolean }>(`/api/groups/${group.id}`)
+      .then(() => toast.success(`Group "${group.name}" deleted successfully`))
+      .catch(() => toast.error("Something went wrong, please try again later!"))
+      .finally(reload);
+  };
 
-	const {rows: filteredRows, renderSearch} = useListSearch<Group>(searchFields, groups);
+  const defaultColumns = [
+    columnHelper.accessor("id", {
+      header: "ID",
+      cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor("name", {
+      header: "Name",
+      cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor("admin", {
+      header: "Admin",
+      cell: (info) => (
+        <div className="tooltip" data-tip={USER_TYPE_LABELS[users.find((x) => x.id === info.getValue())?.type || "student"]}>
+          {users.find((x) => x.id === info.getValue())?.name}
+        </div>
+      ),
+    }),
+    columnHelper.accessor("entity.label", {
+      header: "Entity",
+      cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor("participants", {
+      header: "Participants",
+      cell: (info) => (
+        <span>
+          {info
+            .getValue()
+            .slice(0, viewingAllParticipants === info.row.original.id ? undefined : 5)
+            .map((x) => users.find((y) => y.id === x)?.name)
+            .join(", ")}
+          {info.getValue().length > 5 && viewingAllParticipants !== info.row.original.id && (
+            <button
+              className="text-mti-purple-light font-bold hover:text-mti-purple-dark transition ease-in-out duration-300"
+              onClick={() => setViewingAllParticipants(info.row.original.id)}>
+              , View More
+            </button>
+          )}
+          {info.getValue().length > 5 && viewingAllParticipants === info.row.original.id && (
+            <button
+              className="text-mti-purple-light font-bold hover:text-mti-purple-dark transition ease-in-out duration-300"
+              onClick={() => setViewingAllParticipants(undefined)}>
+              , View Less
+            </button>
+          )}
+        </span>
+      ),
+    }),
+    {
+      header: "",
+      id: "actions",
+      cell: ({ row }: { row: { original: Group } }) => {
+        return (
+          <>
+            {user && (checkAccess(user, ["developer", "admin"]) || user.id === row.original.admin) && (
+              <div className="flex gap-2">
+                {(!row.original.disableEditing || checkAccess(user, ["developer", "admin"]), "editGroup") && (
+                  <div data-tip="Edit" className="tooltip cursor-pointer" onClick={() => setEditingGroup(row.original)}>
+                    <BsPencil className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
+                  </div>
+                )}
+                {(!row.original.disableEditing || checkAccess(user, ["developer", "admin"]), "deleteGroup") && (
+                  <div data-tip="Delete" className="tooltip cursor-pointer" onClick={() => deleteGroup(row.original)}>
+                    <BsTrash className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
+                  </div>
+                )}
+              </div>
+            )}
+          </>
+        );
+      },
+    },
+  ];
 
-	const deleteGroup = (group: Group) => {
-		if (!confirm(`Are you sure you want to delete "${group.name}"?`)) return;
+  const closeModal = () => {
+    setIsCreating(false);
+    setEditingGroup(undefined);
+    reload();
+  };
 
-		axios
-			.delete<{ok: boolean}>(`/api/groups/${group.id}`)
-			.then(() => toast.success(`Group "${group.name}" deleted successfully`))
-			.catch(() => toast.error("Something went wrong, please try again later!"))
-			.finally(reload);
-	};
+  return (
+    <div className="h-full w-full rounded-xl flex flex-col gap-4">
+      <Modal isOpen={isCreating || !!editingGroup} onClose={closeModal} title={editingGroup ? `Editing ${editingGroup.name}` : "New Group"}>
+        <CreatePanel
+          group={editingGroup}
+          user={user}
+          onClose={closeModal}
+          users={users}
+        />
+      </Modal>
+      <Table data={groups} columns={defaultColumns} searchFields={searchFields} />
 
-	const defaultColumns = [
-		columnHelper.accessor("id", {
-			header: "ID",
-			cell: (info) => info.getValue(),
-		}),
-		columnHelper.accessor("name", {
-			header: "Name",
-			cell: (info) => info.getValue(),
-		}),
-		columnHelper.accessor("admin", {
-			header: "Admin",
-			cell: (info) => (
-				<div className="tooltip" data-tip={USER_TYPE_LABELS[users.find((x) => x.id === info.getValue())?.type || "student"]}>
-					{users.find((x) => x.id === info.getValue())?.name}
-				</div>
-			),
-		}),
-		columnHelper.accessor("admin", {
-			header: "Linked Corporate",
-			cell: (info) => <LinkedCorporate userId={info.getValue()} users={users} groups={groups} />,
-		}),
-		columnHelper.accessor("participants", {
-			header: "Participants",
-			cell: (info) => (
-				<span>
-					{info
-						.getValue()
-						.slice(0, viewingAllParticipants === info.row.original.id ? undefined : 5)
-						.map((x) => users.find((y) => y.id === x)?.name)
-						.join(", ")}
-					{info.getValue().length > 5 && viewingAllParticipants !== info.row.original.id && (
-						<button
-							className="text-mti-purple-light font-bold hover:text-mti-purple-dark transition ease-in-out duration-300"
-							onClick={() => setViewingAllParticipants(info.row.original.id)}>
-							, View More
-						</button>
-					)}
-					{info.getValue().length > 5 && viewingAllParticipants === info.row.original.id && (
-						<button
-							className="text-mti-purple-light font-bold hover:text-mti-purple-dark transition ease-in-out duration-300"
-							onClick={() => setViewingAllParticipants(undefined)}>
-							, View Less
-						</button>
-					)}
-				</span>
-			),
-		}),
-		{
-			header: "",
-			id: "actions",
-			cell: ({row}: {row: {original: Group}}) => {
-				return (
-					<>
-						{user && (checkAccess(user, ["developer", "admin"]) || user.id === row.original.admin) && (
-							<div className="flex gap-2">
-								{(!row.original.disableEditing || checkAccess(user, ["developer", "admin"]), "editGroup") && (
-									<div data-tip="Edit" className="tooltip cursor-pointer" onClick={() => setEditingGroup(row.original)}>
-										<BsPencil className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
-									</div>
-								)}
-								{(!row.original.disableEditing || checkAccess(user, ["developer", "admin"]), "deleteGroup") && (
-									<div data-tip="Delete" className="tooltip cursor-pointer" onClick={() => deleteGroup(row.original)}>
-										<BsTrash className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
-									</div>
-								)}
-							</div>
-						)}
-					</>
-				);
-			},
-		},
-	];
-
-	const table = useReactTable({
-		data: filteredRows,
-		columns: defaultColumns,
-		getCoreRowModel: getCoreRowModel(),
-	});
-
-	const closeModal = () => {
-		setIsCreating(false);
-		setEditingGroup(undefined);
-		reload();
-	};
-
-	return (
-		<div className="h-full w-full rounded-xl flex flex-col gap-4">
-			<Modal isOpen={isCreating || !!editingGroup} onClose={closeModal} title={editingGroup ? `Editing ${editingGroup.name}` : "New Group"}>
-				<CreatePanel
-					group={editingGroup}
-					user={user}
-					onClose={closeModal}
-					users={
-						checkAccess(user, ["corporate", "teacher", "mastercorporate"])
-							? users.filter(
-									(u) =>
-										groups
-											.filter((g) => g.admin === user.id)
-											.flatMap((g) => g.participants)
-											.includes(u.id) ||
-										(user?.type === "teacher" ? corporateGroups : groups).flatMap((g) => g.participants).includes(u.id),
-							  )
-							: users
-					}
-				/>
-			</Modal>
-			{renderSearch()}
-			<table className="bg-mti-purple-ultralight/40 w-full rounded-xl">
-				<thead>
-					{table.getHeaderGroups().map((headerGroup) => (
-						<tr key={headerGroup.id}>
-							{headerGroup.headers.map((header) => (
-								<th className="py-4" key={header.id}>
-									{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-								</th>
-							))}
-						</tr>
-					))}
-				</thead>
-				<tbody className="px-2">
-					{table.getRowModel().rows.map((row) => (
-						<tr className="even:bg-mti-purple-ultralight/40 rounded-lg py-2 odd:bg-white" key={row.id}>
-							{row.getVisibleCells().map((cell) => (
-								<td className="px-4 py-2" key={cell.id}>
-									{flexRender(cell.column.columnDef.cell, cell.getContext())}
-								</td>
-							))}
-						</tr>
-					))}
-				</tbody>
-			</table>
-
-			{checkAccess(user, ["teacher", "corporate", "mastercorporate", "admin", "developer"], permissions, "createGroup") && (
-				<button
-					onClick={() => setIsCreating(true)}
-					className="bg-mti-purple-light hover:bg-mti-purple w-full py-2 text-white transition duration-300 ease-in-out">
-					New Group
-				</button>
-			)}
-		</div>
-	);
+      {checkAccess(user, ["teacher", "corporate", "mastercorporate", "admin", "developer"], permissions, "createGroup") && (
+        <button
+          onClick={() => setIsCreating(true)}
+          className="bg-mti-purple-light hover:bg-mti-purple w-full py-2 text-white transition duration-300 ease-in-out">
+          New Group
+        </button>
+      )}
+    </div>
+  );
 }

src/pages/(admin)/Lists/StudentPerformanceList.tsx

@@ -0,0 +1,111 @@
+/* eslint-disable @next/next/no-img-element */
+import {Stat, StudentUser, User} from "@/interfaces/user";
+import {useState} from "react";
+import {averageLevelCalculator} from "@/utils/score";
+import {groupByExam} from "@/utils/stats";
+import {createColumnHelper} from "@tanstack/react-table";
+import Checkbox from "@/components/Low/Checkbox";
+import List from "@/components/List";
+import Table from "@/components/High/Table";
+
+type StudentPerformanceItem = StudentUser & {entitiesLabel: string; group: string};
+
+const StudentPerformanceList = ({items = [], stats}: {items: StudentPerformanceItem[]; stats: Stat[]}) => {
+	const [isShowingAmount, setIsShowingAmount] = useState(false);
+
+	const columnHelper = createColumnHelper<StudentPerformanceItem>();
+
+	const columns = [
+		columnHelper.accessor("name", {
+			header: "Student Name",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("email", {
+			header: "E-mail",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("studentID", {
+			header: "ID",
+			cell: (info) => info.getValue() || "N/A",
+		}),
+		columnHelper.accessor("group", {
+			header: "Group",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("entitiesLabel", {
+			header: "Entities",
+			cell: (info) => info.getValue() || "N/A",
+		}),
+		columnHelper.accessor("levels.reading", {
+			header: "Reading",
+			cell: (info) =>
+				!isShowingAmount
+					? info.getValue() || 0
+					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "reading" && x.user === info.row.original.id))).length} exams`,
+		}),
+		columnHelper.accessor("levels.listening", {
+			header: "Listening",
+			cell: (info) =>
+				!isShowingAmount
+					? info.getValue() || 0
+					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "listening" && x.user === info.row.original.id))).length} exams`,
+		}),
+		columnHelper.accessor("levels.writing", {
+			header: "Writing",
+			cell: (info) =>
+				!isShowingAmount
+					? info.getValue() || 0
+					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "writing" && x.user === info.row.original.id))).length} exams`,
+		}),
+		columnHelper.accessor("levels.speaking", {
+			header: "Speaking",
+			cell: (info) =>
+				!isShowingAmount
+					? info.getValue() || 0
+					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "speaking" && x.user === info.row.original.id))).length} exams`,
+		}),
+		columnHelper.accessor("levels.level", {
+			header: "Level",
+			cell: (info) =>
+				!isShowingAmount
+					? info.getValue() || 0
+					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "level" && x.user === info.row.original.id))).length} exams`,
+		}),
+		columnHelper.accessor("levels", {
+			id: "overall_level",
+			header: "Overall",
+			cell: (info) =>
+				!isShowingAmount
+					? averageLevelCalculator(
+							items,
+							stats.filter((x) => x.user === info.row.original.id),
+					  ).toFixed(1)
+					: `${Object.keys(groupByExam(stats.filter((x) => x.user === info.row.original.id))).length} exams`,
+		}),
+	];
+
+	return (
+		<div className="flex flex-col gap-4 w-full h-full">
+			<Checkbox isChecked={isShowingAmount} onChange={setIsShowingAmount}>
+				Show Utilization
+			</Checkbox>
+			<Table<StudentPerformanceItem>
+				data={items.sort(
+					(a, b) =>
+						averageLevelCalculator(
+							items,
+							stats.filter((x) => x.user === b.id),
+						) -
+						averageLevelCalculator(
+							items,
+							stats.filter((x) => x.user === a.id),
+						),
+				)}
+				columns={columns}
+				searchFields={[["name"], ["email"], ["studentID"], ["entitiesLabel"], ["group"]]}
+			/>
+		</div>
+	);
+};
+
+export default StudentPerformanceList;

src/pages/(admin)/Lists/index.tsx

@@ -8,16 +8,24 @@ import GroupList from "./GroupList";
 import PackageList from "./PackageList";
 import UserList from "./UserList";
 import {checkAccess} from "@/utils/permissions";
-import usePermissions from "@/hooks/usePermissions";
 import {PermissionType} from "@/interfaces/permissions";
+import { EntityWithRoles } from "@/interfaces/entity";
+import { useAllowedEntitiesSomePermissions } from "@/hooks/useEntityPermissions";
+import { useMemo } from "react";
 
 interface Props {
 	user: User;
-	users: User[];
+	entities: EntityWithRoles[]
 	permissions: PermissionType[];
 }
 
-export default function Lists({user, users, permissions}: Props) {
+export default function Lists({user, entities = [], permissions}: Props) {
+	const entitiesViewExams = useAllowedEntitiesSomePermissions(user, entities, [
+		'view_reading', 'view_listening', 'view_writing', 'view_speaking', 'view_level'
+	])
+
+	const canViewExams = useMemo(() => entitiesViewExams.length > 0, [entitiesViewExams])
+
 	return (
 		<TabGroup>
 			<TabList className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
@@ -32,7 +40,7 @@ export default function Lists({user, users, permissions}: Props) {
 					}>
 					User List
 				</Tab>
-				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate", "teacher"]) && (
+				{canViewExams && (
 					<Tab
 						className={({selected}) =>
 							clsx(
@@ -45,17 +53,6 @@ export default function Lists({user, users, permissions}: Props) {
 						Exam List
 					</Tab>
 				)}
-				<Tab
-					className={({selected}) =>
-						clsx(
-							"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
-							"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
-							"transition duration-300 ease-in-out",
-							selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
-						)
-					}>
-					Group List
-				</Tab>
 				{checkAccess(user, ["developer", "admin", "corporate"]) && (
 					<Tab
 						className={({selected}) =>
@@ -100,14 +97,11 @@ export default function Lists({user, users, permissions}: Props) {
 				<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
 					<UserList user={user} />
 				</TabPanel>
-				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate", "teacher"]) && (
+				{canViewExams && (
 					<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
-						<ExamList user={user} />
+						<ExamList user={user} entities={entities} />
 					</TabPanel>
 				)}
-				<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
-					<GroupList user={user} />
-				</TabPanel>
 				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"], permissions, "viewCodes") && (
 					<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
 						<CodeList user={user} />

src/pages/(admin)/UserCreator.tsx

@@ -1,288 +1,273 @@
 import Button from "@/components/Low/Button";
 import Checkbox from "@/components/Low/Checkbox";
-import {PERMISSIONS} from "@/constants/userPermissions";
-import {CorporateUser, TeacherUser, Type, User} from "@/interfaces/user";
-import {USER_TYPE_LABELS} from "@/resources/user";
+import { PERMISSIONS } from "@/constants/userPermissions";
+import { CorporateUser, TeacherUser, Type, User } from "@/interfaces/user";
+import { USER_TYPE_LABELS } from "@/resources/user";
 import axios from "axios";
 import clsx from "clsx";
-import {capitalize, uniqBy} from "lodash";
+import { capitalize, uniqBy } from "lodash";
 import moment from "moment";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import ReactDatePicker from "react-datepicker";
-import {toast} from "react-toastify";
+import { toast } from "react-toastify";
 import ShortUniqueId from "short-unique-id";
-import {checkAccess, getTypesOfUser} from "@/utils/permissions";
-import {PermissionType} from "@/interfaces/permissions";
+import { checkAccess, getTypesOfUser } from "@/utils/permissions";
+import { PermissionType } from "@/interfaces/permissions";
 import usePermissions from "@/hooks/usePermissions";
 import Input from "@/components/Low/Input";
 import CountrySelect from "@/components/Low/CountrySelect";
 import useGroups from "@/hooks/useGroups";
 import useUsers from "@/hooks/useUsers";
-import {getUserName} from "@/utils/users";
+import { getUserName } from "@/utils/users";
 import Select from "@/components/Low/Select";
+import { EntityWithRoles } from "@/interfaces/entity";
+import useEntitiesGroups from "@/hooks/useEntitiesGroups";
 
 const USER_TYPE_PERMISSIONS: {
-	[key in Type]: {perm: PermissionType | undefined; list: Type[]};
+  [key in Type]: { perm: PermissionType | undefined; list: Type[] };
 } = {
-	student: {
-		perm: "createCodeStudent",
-		list: [],
-	},
-	teacher: {
-		perm: "createCodeTeacher",
-		list: [],
-	},
-	agent: {
-		perm: "createCodeCountryManager",
-		list: ["student", "teacher", "corporate", "mastercorporate"],
-	},
-	corporate: {
-		perm: "createCodeCorporate",
-		list: ["student", "teacher"],
-	},
-	mastercorporate: {
-		perm: undefined,
-		list: ["student", "teacher", "corporate"],
-	},
-	admin: {
-		perm: "createCodeAdmin",
-		list: ["student", "teacher", "agent", "corporate", "admin", "mastercorporate"],
-	},
-	developer: {
-		perm: undefined,
-		list: ["student", "teacher", "agent", "corporate", "admin", "developer", "mastercorporate"],
-	},
+  student: {
+    perm: "createCodeStudent",
+    list: [],
+  },
+  teacher: {
+    perm: "createCodeTeacher",
+    list: [],
+  },
+  agent: {
+    perm: "createCodeCountryManager",
+    list: ["student", "teacher", "corporate", "mastercorporate"],
+  },
+  corporate: {
+    perm: "createCodeCorporate",
+    list: ["student", "teacher"],
+  },
+  mastercorporate: {
+    perm: undefined,
+    list: ["student", "teacher", "corporate"],
+  },
+  admin: {
+    perm: "createCodeAdmin",
+    list: ["student", "teacher", "agent", "corporate", "admin", "mastercorporate"],
+  },
+  developer: {
+    perm: undefined,
+    list: ["student", "teacher", "agent", "corporate", "admin", "developer", "mastercorporate"],
+  },
 };
 
 interface Props {
-	user: User;
-	users: User[];
-	permissions: PermissionType[];
-	onFinish: () => void;
+  user: User;
+  users: User[];
+  entities: EntityWithRoles[]
+  permissions: PermissionType[];
+  onFinish: () => void;
 }
 
-export default function UserCreator({user, users, permissions, onFinish}: Props) {
-	const [name, setName] = useState<string>();
-	const [email, setEmail] = useState<string>();
-	const [phone, setPhone] = useState<string>();
-	const [passportID, setPassportID] = useState<string>();
-	const [studentID, setStudentID] = useState<string>();
-	const [country, setCountry] = useState(user?.demographicInformation?.country);
-	const [group, setGroup] = useState<string | null>();
-	const [availableCorporates, setAvailableCorporates] = useState<User[]>([]);
-	const [selectedCorporate, setSelectedCorporate] = useState<string | null>();
-	const [password, setPassword] = useState<string>();
-	const [confirmPassword, setConfirmPassword] = useState<string>();
-	const [expiryDate, setExpiryDate] = useState<Date | null>(
-		user?.subscriptionExpirationDate ? moment(user?.subscriptionExpirationDate).toDate() : null,
-	);
-	const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
-	const [isLoading, setIsLoading] = useState(false);
-	const [type, setType] = useState<Type>("student");
-	const [position, setPosition] = useState<string>();
+export default function UserCreator({ user, users, entities = [], permissions, onFinish }: Props) {
+  const [name, setName] = useState<string>();
+  const [email, setEmail] = useState<string>();
+  const [phone, setPhone] = useState<string>();
+  const [passportID, setPassportID] = useState<string>();
+  const [studentID, setStudentID] = useState<string>();
+  const [country, setCountry] = useState(user?.demographicInformation?.country);
+  const [group, setGroup] = useState<string | null>();
+  const [password, setPassword] = useState<string>();
+  const [confirmPassword, setConfirmPassword] = useState<string>();
+  const [expiryDate, setExpiryDate] = useState<Date | null>(
+    user?.subscriptionExpirationDate ? moment(user?.subscriptionExpirationDate).toDate() : null,
+  );
+  const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+  const [type, setType] = useState<Type>("student");
+  const [position, setPosition] = useState<string>();
+  const [entity, setEntity] = useState((entities || [])[0]?.id || undefined)
 
-	const {groups} = useGroups({admin: ["developer", "admin"].includes(user?.type) ? undefined : user?.id, userType: user?.type});
+  const { groups } = useEntitiesGroups();
 
-	useEffect(() => {
-		if (!isExpiryDateEnabled) setExpiryDate(null);
-	}, [isExpiryDateEnabled]);
+  useEffect(() => {
+    if (!isExpiryDateEnabled) setExpiryDate(null);
+  }, [isExpiryDateEnabled]);
 
-	useEffect(() => {
-		setAvailableCorporates(
-			uniqBy(
-				users.filter((u) => u.type === "corporate" && groups.flatMap((g) => g.participants).includes(u.id)),
-				"id",
-			),
-		);
-	}, [users, groups]);
+  const createUser = () => {
+    if (!name || name.trim().length === 0) return toast.error("Please enter a valid name!");
+    if (!email || email.trim().length === 0) return toast.error("Please enter a valid e-mail address!");
+    if (users.map((x) => x.email).includes(email.trim())) return toast.error("That e-mail is already in use!");
+    if (!password || password.trim().length < 6) return toast.error("Please enter a valid password!");
+    if (password !== confirmPassword) return toast.error("The passwords do not match!");
 
-	const createUser = () => {
-		if (!name || name.trim().length === 0) return toast.error("Please enter a valid name!");
-		if (!email || email.trim().length === 0) return toast.error("Please enter a valid e-mail address!");
-		if (users.map((x) => x.email).includes(email.trim())) return toast.error("That e-mail is already in use!");
-		if (!password || password.trim().length < 6) return toast.error("Please enter a valid password!");
-		if (password !== confirmPassword) return toast.error("The passwords do not match!");
+    setIsLoading(true);
 
-		setIsLoading(true);
+    const body = {
+      name,
+      email,
+      password,
+      groupID: group,
+      entity,
+      type,
+      studentID: type === "student" ? studentID : undefined,
+      expiryDate,
+      demographicInformation: {
+        passport_id: type === "student" ? passportID : undefined,
+        phone,
+        country,
+        position,
+      },
+    };
 
-		const body = {
-			name,
-			email,
-			password,
-			groupID: group,
-			corporate: selectedCorporate || user.id,
-			type,
-			studentID: type === "student" ? studentID : undefined,
-			expiryDate,
-			demographicInformation: {
-				passport_id: type === "student" ? passportID : undefined,
-				phone,
-				country,
-				position,
-			},
-		};
+    axios
+      .post("/api/make_user", body)
+      .then(() => {
+        toast.success("That user has been created!");
+        onFinish();
 
-		axios
-			.post("/api/make_user", body)
-			.then(() => {
-				toast.success("That user has been created!");
-				onFinish();
+        setName("");
+        setEmail("");
+        setPhone("");
+        setPassportID("");
+        setStudentID("");
+        setCountry(user?.demographicInformation?.country);
+        setGroup(null);
+        setEntity((entities || [])[0]?.id || undefined)
+        setExpiryDate(user?.subscriptionExpirationDate ? moment(user?.subscriptionExpirationDate).toDate() : null);
+        setIsExpiryDateEnabled(true);
+        setType("student");
+        setPosition(undefined);
+      })
+      .catch((error) => {
+        const data = error?.response?.data;
+        if (!!data?.message) return toast.error(data.message);
+        toast.error("Something went wrong! Please try again later!");
+      })
+      .finally(() => setIsLoading(false));
+  };
 
-				setName("");
-				setEmail("");
-				setPhone("");
-				setPassportID("");
-				setStudentID("");
-				setCountry(user?.demographicInformation?.country);
-				setGroup(null);
-				setSelectedCorporate(null);
-				setExpiryDate(user?.subscriptionExpirationDate ? moment(user?.subscriptionExpirationDate).toDate() : null);
-				setIsExpiryDateEnabled(true);
-				setType("student");
-				setPosition(undefined);
-			})
-			.catch((error) => {
-				const data = error?.response?.data;
-				if (!!data?.message) return toast.error(data.message);
-				toast.error("Something went wrong! Please try again later!");
-			})
-			.finally(() => setIsLoading(false));
-	};
+  return (
+    <div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
+      <div className="grid grid-cols-2 gap-4">
+        <Input required label="Name" value={name} onChange={setName} type="text" name="name" placeholder="Name" />
+        <Input label="E-mail" required value={email} onChange={setEmail} type="email" name="email" placeholder="E-mail" />
 
-	return (
-		<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
-			<div className="grid grid-cols-2 gap-4">
-				<Input required label="Name" value={name} onChange={setName} type="text" name="name" placeholder="Name" />
-				<Input label="E-mail" required value={email} onChange={setEmail} type="email" name="email" placeholder="E-mail" />
+        <Input type="password" name="password" label="Password" value={password} onChange={setPassword} placeholder="Password" required />
+        <Input
+          type="password"
+          name="confirmPassword"
+          label="Confirm Password"
+          value={confirmPassword}
+          onChange={setConfirmPassword}
+          placeholder="ConfirmPassword"
+          required
+        />
 
-				<Input type="password" name="password" label="Password" value={password} onChange={setPassword} placeholder="Password" required />
-				<Input
-					type="password"
-					name="confirmPassword"
-					label="Confirm Password"
-					value={confirmPassword}
-					onChange={setConfirmPassword}
-					placeholder="ConfirmPassword"
-					required
-				/>
+        <div className="flex flex-col gap-4">
+          <label className="font-normal text-base text-mti-gray-dim">Country *</label>
+          <CountrySelect value={country} onChange={setCountry} />
+        </div>
 
-				<div className="flex flex-col gap-4">
-					<label className="font-normal text-base text-mti-gray-dim">Country *</label>
-					<CountrySelect value={country} onChange={setCountry} />
-				</div>
+        <Input type="tel" name="phone" label="Phone number" value={phone} onChange={setPhone} placeholder="Phone number" required />
 
-				<Input type="tel" name="phone" label="Phone number" value={phone} onChange={setPhone} placeholder="Phone number" required />
+        {type === "student" && (
+          <>
+            <Input
+              type="text"
+              name="passport_id"
+              label="Passport/National ID"
+              onChange={setPassportID}
+              value={passportID}
+              placeholder="National ID or Passport number"
+              required
+            />
+            <Input type="text" name="studentID" label="Student ID" onChange={setStudentID} value={studentID} placeholder="Student ID" />
+          </>
+        )}
 
-				{type === "student" && (
-					<>
-						<Input
-							type="text"
-							name="passport_id"
-							label="Passport/National ID"
-							onChange={setPassportID}
-							value={passportID}
-							placeholder="National ID or Passport number"
-							required
-						/>
-						<Input type="text" name="studentID" label="Student ID" onChange={setStudentID} value={studentID} placeholder="Student ID" />
-					</>
-				)}
+        <div className={clsx("flex flex-col gap-4")}>
+          <label className="font-normal text-base text-mti-gray-dim">Entity</label>
+          <Select
+            defaultValue={{ value: (entities || [])[0]?.id, label: (entities || [])[0]?.label }}
+            options={entities.map((e) => ({ value: e.id, label: e.label }))}
+            onChange={(e) => setEntity(e?.value || undefined)}
+            isClearable={checkAccess(user, ["admin", "developer"])}
+          />
+        </div>
 
-				{["student", "teacher"].includes(type) && !["corporate", "teacher"].includes(user?.type) && (
-					<div className={clsx("flex flex-col gap-4")}>
-						<label className="font-normal text-base text-mti-gray-dim">Corporate</label>
-						<Select
-							options={availableCorporates.map((u) => ({value: u.id, label: getUserName(u)}))}
-							isClearable
-							onChange={(e) => setSelectedCorporate(e?.value || undefined)}
-						/>
-					</div>
-				)}
+        {["corporate", "mastercorporate"].includes(type) && (
+          <Input type="text" name="department" label="Department" onChange={setPosition} value={position} placeholder="Department" />
+        )}
 
-				{["corporate", "mastercorporate"].includes(type) && (
-					<Input type="text" name="department" label="Department" onChange={setPosition} value={position} placeholder="Department" />
-				)}
+        <div className={clsx("flex flex-col gap-4")}>
+          <label className="font-normal text-base text-mti-gray-dim">Classroom</label>
+          <Select
+            options={groups
+              .filter((x) => x.entity?.id === entity)
+              .map((g) => ({ value: g.id, label: g.name }))}
+            onChange={(e) => setGroup(e?.value || undefined)}
+            isClearable
+          />
+        </div>
 
-				{!(type === "corporate" && user.type === "corporate") && (
-					<div
-						className={clsx(
-							"flex flex-col gap-4",
-							(!["student", "teacher"].includes(type) || ["corporate", "teacher"].includes(user?.type)) &&
-								!["corporate", "mastercorporate"].includes(type) &&
-								"col-span-2",
-						)}>
-						<label className="font-normal text-base text-mti-gray-dim">Group</label>
-						<Select
-							options={groups
-								.filter((x) => (!selectedCorporate ? true : x.admin === selectedCorporate))
-								.map((g) => ({value: g.id, label: g.name}))}
-							onChange={(e) => setGroup(e?.value || undefined)}
-						/>
-					</div>
-				)}
+        <div
+          className={clsx(
+            "flex flex-col gap-4",
+            !checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && "col-span-2",
+          )}>
+          <label className="font-normal text-base text-mti-gray-dim">Type</label>
+          {user && (
+            <select
+              defaultValue="student"
+              value={type}
+              onChange={(e) => setType(e.target.value as Type)}
+              className="p-6 w-full min-w-[350px] min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
+              {Object.keys(USER_TYPE_LABELS)
+                .filter((x) => {
+                  const { list, perm } = USER_TYPE_PERMISSIONS[x as Type];
+                  return checkAccess(user, getTypesOfUser(list), permissions, perm);
+                })
+                .map((type) => (
+                  <option key={type} value={type}>
+                    {USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
+                  </option>
+                ))}
+            </select>
+          )}
+        </div>
 
-				<div
-					className={clsx(
-						"flex flex-col gap-4",
-						!checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && "col-span-2",
-					)}>
-					<label className="font-normal text-base text-mti-gray-dim">Type</label>
-					{user && (
-						<select
-							defaultValue="student"
-							value={type}
-							onChange={(e) => setType(e.target.value as Type)}
-							className="p-6 w-full min-w-[350px] min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
-							{Object.keys(USER_TYPE_LABELS)
-								.filter((x) => {
-									const {list, perm} = USER_TYPE_PERMISSIONS[x as Type];
-									return checkAccess(user, getTypesOfUser(list), permissions, perm);
-								})
-								.map((type) => (
-									<option key={type} value={type}>
-										{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
-									</option>
-								))}
-						</select>
-					)}
-				</div>
+        <div className="flex flex-col gap-4">
+          {user && checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
+            <>
+              <div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
+                <label className="text-mti-gray-dim text-base font-normal">Expiry Date</label>
+                <Checkbox
+                  isChecked={isExpiryDateEnabled}
+                  onChange={setIsExpiryDateEnabled}
+                  disabled={!!user?.subscriptionExpirationDate}>
+                  Enabled
+                </Checkbox>
+              </div>
+              {isExpiryDateEnabled && (
+                <ReactDatePicker
+                  className={clsx(
+                    "flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
+                    "hover:border-mti-purple tooltip",
+                    "transition duration-300 ease-in-out",
+                  )}
+                  filterDate={(date) =>
+                    moment(date).isAfter(new Date()) &&
+                    (user?.subscriptionExpirationDate ? moment(date).isBefore(user?.subscriptionExpirationDate) : true)
+                  }
+                  dateFormat="dd/MM/yyyy"
+                  selected={expiryDate}
+                  onChange={(date) => setExpiryDate(date)}
+                />
+              )}
+            </>
+          )}
+        </div>
+      </div>
 
-				<div className="flex flex-col gap-4">
-					{user && checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
-						<>
-							<div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
-								<label className="text-mti-gray-dim text-base font-normal">Expiry Date</label>
-								<Checkbox
-									isChecked={isExpiryDateEnabled}
-									onChange={setIsExpiryDateEnabled}
-									disabled={!!user?.subscriptionExpirationDate}>
-									Enabled
-								</Checkbox>
-							</div>
-							{isExpiryDateEnabled && (
-								<ReactDatePicker
-									className={clsx(
-										"flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
-										"hover:border-mti-purple tooltip",
-										"transition duration-300 ease-in-out",
-									)}
-									filterDate={(date) =>
-										moment(date).isAfter(new Date()) &&
-										(user?.subscriptionExpirationDate ? moment(date).isBefore(user?.subscriptionExpirationDate) : true)
-									}
-									dateFormat="dd/MM/yyyy"
-									selected={expiryDate}
-									onChange={(date) => setExpiryDate(date)}
-								/>
-							)}
-						</>
-					)}
-				</div>
-			</div>
-
-			<Button onClick={createUser} isLoading={isLoading} disabled={(isExpiryDateEnabled ? !expiryDate : false) || isLoading}>
-				Create User
-			</Button>
-		</div>
-	);
+      <Button onClick={createUser} isLoading={isLoading} disabled={(isExpiryDateEnabled ? !expiryDate : false) || isLoading}>
+        Create User
+      </Button>
+    </div>
+  );
 }

src/pages/(exam)/ExamPage.tsx

@@ -25,13 +25,16 @@ import useSessions from "@/hooks/useSessions";
 import ShortUniqueId from "short-unique-id";
 import clsx from "clsx";
 import useGradingSystem from "@/hooks/useGrading";
+import { Assignment } from "@/interfaces/results";
+import { mapBy } from "@/utils";
 
 interface Props {
 	page: "exams" | "exercises";
 	user: User;
+	hideSidebar?: boolean
 }
 
-export default function ExamPage({page, user}: Props) {
+export default function ExamPage({page, user, hideSidebar = false}: Props) {
 	const [variant, setVariant] = useState<Variant>("full");
 	const [avoidRepeated, setAvoidRepeated] = useState(false);
 	const [hasBeenUploaded, setHasBeenUploaded] = useState(false);
@@ -210,15 +213,14 @@ export default function ExamPage({page, user}: Props) {
 	}, [setModuleIndex, showSolutions]);
 
 	useEffect(() => {
-		(async () => {
-			if (selectedModules.length > 0 && exams.length > 0 && moduleIndex < selectedModules.length) {
-				const nextExam = exams[moduleIndex];
+		console.log(selectedModules)
+		if (selectedModules.length > 0 && exams.length > 0 && moduleIndex < selectedModules.length) {
+			const nextExam = exams[moduleIndex];
 
-				if (partIndex === -1 && nextExam?.module !== "listening") setPartIndex(0);
-				if (exerciseIndex === -1 && !["reading", "listening"].includes(nextExam?.module)) setExerciseIndex(0);
-				setExam(nextExam ? updateExamWithUserSolutions(nextExam) : undefined);
-			}
-		})();
+			if (partIndex === -1 && nextExam?.module !== "listening") setPartIndex(0);
+			if (exerciseIndex === -1 && !["reading", "listening"].includes(nextExam?.module)) setExerciseIndex(0);
+			setExam(nextExam ? updateExamWithUserSolutions(nextExam) : undefined);
+		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [selectedModules, moduleIndex, exams]);
 
@@ -441,7 +443,6 @@ export default function ExamPage({page, user}: Props) {
 				<Selection
 					page={page}
 					user={user!}
-					disableSelection={page === "exams"}
 					onStart={(modules: Module[], avoid: boolean, variant: Variant) => {
 						setModuleIndex(0);
 						setAvoidRepeated(avoid);
@@ -520,6 +521,7 @@ export default function ExamPage({page, user}: Props) {
 				<Layout
 					user={user}
 					bgColor={bgColor}
+					hideSidebar={hideSidebar}
 					className="justify-between"
 					focusMode={selectedModules.length !== 0 && !showSolutions && moduleIndex < selectedModules.length}
 					onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}>

src/pages/_app.tsx

@@ -19,7 +19,7 @@ export default function App({Component, pageProps}: AppProps) {
 	const router = useRouter();
 
 	useEffect(() => {
-		if (router.pathname !== "/exercises") reset();
+		if (router.pathname !== "/exam" && router.pathname !== "/exercises") reset();
 	}, [router.pathname, reset]);
 
 	useEffect(() => {

src/pages/api/assignments/[id]/index.ts

@@ -4,7 +4,6 @@ import client from "@/lib/mongodb";
 import {withIronSessionApiRoute} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
 
-
 const db = client.db(process.env.MONGODB_DB);
 
 export default withIronSessionApiRoute(handler, sessionOptions);
@@ -25,7 +24,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 async function GET(req: NextApiRequest, res: NextApiResponse) {
 	const {id} = req.query;
 
-	const snapshot = await db.collection("assignments").findOne({ id: id as string });
+	const snapshot = await db.collection("assignments").findOne({id: id as string});
 
 	if (snapshot) {
 		res.status(200).json({...snapshot, id: snapshot.id});
@@ -35,9 +34,7 @@ async function GET(req: NextApiRequest, res: NextApiResponse) {
 async function DELETE(req: NextApiRequest, res: NextApiResponse) {
 	const {id} = req.query;
 
-	await db.collection("assignments").deleteOne(
-		{ id: id as string }
-	);
+	await db.collection("assignments").deleteOne({id});
 
 	res.status(200).json({ok: true});
 }
@@ -45,10 +42,7 @@ async function DELETE(req: NextApiRequest, res: NextApiResponse) {
 async function PATCH(req: NextApiRequest, res: NextApiResponse) {
 	const {id} = req.query;
 
-	await db.collection("assignments").updateOne(
-		{ id: id as string },
-		{ $set: {assigner: req.session.user?.id, ...req.body} }
-	  );
+	await db.collection("assignments").updateOne({id: id as string}, {$set: {...req.body}});
 
 	res.status(200).json({ok: true});
 }

src/pages/api/assignments/index.ts

@@ -128,8 +128,10 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
 		return;
 	}
 
+	const id = uuidv4();
+
 	await db.collection("assignments").insertOne({
-		id: uuidv4(),
+		id,
 		assigner: req.session.user?.id,
 		assignees,
 		results: [],
@@ -138,11 +140,10 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
 		...body,
 	});
 
-	res.status(200).json({ok: true});
+	res.status(200).json({ok: true, id});
 
 	for (const assigneeID of assignees) {
-
-		const assignee = await db.collection("users").findOne<User>({ id: assigneeID });
+		const assignee = await db.collection("users").findOne<User>({id: assigneeID});
 		if (!assignee) continue;
 
 		const name = body.name;
@@ -163,6 +164,7 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
 					endDate,
 					modules: examModulesLabel,
 					assigner: teacher.name,
+					id
 				},
 				environment: process.env.ENVIRONMENT,
 			},

src/pages/api/batch_users.ts

@@ -1,61 +1,71 @@
-import type {NextApiRequest, NextApiResponse} from "next";
-import {withIronSessionApiRoute} from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
 import { FirebaseScrypt } from 'firebase-scrypt';
 import { firebaseAuthScryptParams } from "@/firebase";
 import crypto from 'crypto';
 import axios from "axios";
+import { getEntityWithRoles } from "@/utils/entities.be";
+import { findBy } from "@/utils";
 
 export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
-	if (req.method === "POST") return post(req, res);
+  if (req.method === "POST") return post(req, res);
 
-	return res.status(404).json({ok: false});
+  return res.status(404).json({ ok: false });
 }
 
 async function post(req: NextApiRequest, res: NextApiResponse) {
-	const maker = req.session.user;
-	if (!maker) {
-		return res.status(401).json({ok: false, reason: "You must be logged in to make user!"});
-	}
+  const maker = req.session.user;
+  if (!maker) {
+    return res.status(401).json({ ok: false, reason: "You must be logged in to make user!" });
+  }
 
-	const scrypt = new FirebaseScrypt(firebaseAuthScryptParams)
+  const scrypt = new FirebaseScrypt(firebaseAuthScryptParams)
 
-	const users = req.body.users as {
-		email: string;
-		name: string;
-		type: string;
-		passport_id: string;
-        groupName?: string;
-        corporate?: string;
-		studentID?: string;
-        expiryDate?: string;
-		demographicInformation: {
-			country?: string;
-			passport_id?: string;
-			phone: string;
-		};
-		passwordHash: string | undefined;
-		passwordSalt: string | undefined;
-	}[];
+  const users = req.body.users as {
+    email: string;
+    name: string;
+    type: string;
+    passport_id: string;
+    groupName?: string;
+    corporate?: string;
+    studentID?: string;
+    expiryDate?: string;
+    demographicInformation: {
+      country?: string;
+      passport_id?: string;
+      phone: string;
+    };
+    entity?: string
+    entities: { id: string, role: string }[]
+    passwordHash: string | undefined;
+    passwordSalt: string | undefined;
+  }[];
 
-	const usersWithPasswordHashes = await Promise.all(users.map(async (user) => {
-		const currentUser = { ...user };
-		const salt = crypto.randomBytes(16).toString('base64');
-		const hash = await scrypt.hash(user.passport_id, salt);
-		
-		currentUser.email = currentUser.email.toLowerCase();
-		currentUser.passwordHash = hash;
-		currentUser.passwordSalt = salt;
-		return currentUser;
-	}));
-	
-	const backendRequest = await axios.post(`${process.env.BACKEND_URL}/user/import`, { makerID: maker.id, users: usersWithPasswordHashes }, {
+  const usersWithPasswordHashes = await Promise.all(users.map(async (user) => {
+    const currentUser = { ...user };
+    const salt = crypto.randomBytes(16).toString('base64');
+    const hash = await scrypt.hash(user.passport_id, salt);
+
+    const entity = await getEntityWithRoles(currentUser.entity!)
+    const defaultRole = findBy(entity?.roles || [], "isDefault", true)
+
+    currentUser.entities = [{ id: entity?.id || "", role: defaultRole?.id || "" }]
+    delete currentUser.entity
+
+    currentUser.email = currentUser.email.toLowerCase();
+    currentUser.passwordHash = hash;
+    currentUser.passwordSalt = salt;
+    return currentUser;
+  }));
+
+  const backendRequest = await axios.post(`${process.env.BACKEND_URL}/user/import`, { makerID: maker.id, users: usersWithPasswordHashes }, {
 		headers: {
 			Authorization: `Bearer ${process.env.BACKEND_JWT}`,
 		},
 	});
 
-	return res.status(backendRequest.status).json(backendRequest.data)
+  return res.status(backendRequest.status).json(backendRequest.data)
 }

src/pages/api/entities/[id]/index.ts

@@ -0,0 +1,61 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type {NextApiRequest, NextApiResponse} from "next";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {deleteEntity, getEntity, getEntityWithRoles} from "@/utils/entities.be";
+import client from "@/lib/mongodb";
+import {Entity} from "@/interfaces/entity";
+import { doesEntityAllow } from "@/utils/permissions";
+import { getUser } from "@/utils/users.be";
+import { requestUser } from "@/utils/api";
+
+const db = client.db(process.env.MONGODB_DB);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (req.method === "GET") return await get(req, res);
+	if (req.method === "PATCH") return await patch(req, res);
+	if (req.method === "DELETE") return await del(req, res);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+	const user = await requestUser(req, res)
+	if (!user) return res.status(401).json({ ok: false });
+
+	const {id, showRoles} = req.query as {id: string; showRoles: string};
+
+	const entity = await (!!showRoles ? getEntityWithRoles : getEntity)(id);
+	res.status(200).json(entity);
+}
+
+async function del(req: NextApiRequest, res: NextApiResponse) {
+	const user = await requestUser(req, res)
+	if (!user) return res.status(401).json({ ok: false });
+
+	const { id } = req.query as { id: string };
+
+	const entity = await getEntityWithRoles(id)
+	if (!entity) return res.status(404).json({ ok: false })
+
+	if (!doesEntityAllow(user, entity, "delete_entity") && !["admin", "developer"].includes(user.type))
+		return res.status(403).json({ok: false})
+
+	await deleteEntity(entity)
+	return res.status(200).json({ok: true});
+}
+
+async function patch(req: NextApiRequest, res: NextApiResponse) {
+	const user = await requestUser(req, res)
+		if (!user) return res.status(401).json({ ok: false });
+
+	const {id} = req.query as {id: string};
+
+	if (!user.entities.map((x) => x.id).includes(id)) {
+		return res.status(403).json({ok: false});
+	}
+
+	const entity = await db.collection<Entity>("entities").updateOne({id}, {$set: {label: req.body.label}});
+
+	return res.status(200).json({ok: entity.acknowledged});
+}

src/pages/api/entities/[id]/users.ts

@@ -0,0 +1,65 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type {NextApiRequest, NextApiResponse} from "next";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {countEntityUsers, getEntityUsers} from "@/utils/users.be";
+import client from "@/lib/mongodb";
+
+const db = client.db(process.env.MONGODB_DB);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (req.method === "get") return await get(req, res);
+	if (req.method === "PATCH") return await patch(req, res);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	const {id, onlyCount} = req.query as {id: string; onlyCount: string};
+
+	if (onlyCount) return res.status(200).json(await countEntityUsers(id));
+
+	const users = await getEntityUsers(id);
+	res.status(200).json(users);
+}
+
+async function patch(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	const {id} = req.query as {id: string};
+	const {add, members, role} = req.body as {add: boolean; members: string[]; role?: string};
+
+	if (add) {
+		await db.collection("users").updateMany(
+			{id: {$in: members}},
+			{
+				// @ts-expect-error
+				$push: {
+					entities: {id, role},
+				},
+			},
+		);
+
+		return res.status(204).end();
+	}
+
+	await db.collection("users").updateMany(
+		{id: {$in: members}},
+		{
+			// @ts-expect-error
+			$pull: {
+				entities: {id},
+			},
+		},
+	);
+
+	return res.status(204).end();
+}

src/pages/api/entities/groups.ts

@@ -0,0 +1,29 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { getEntities, getEntitiesWithRoles } from "@/utils/entities.be";
+import { Entity, WithEntities, WithEntity, WithLabeledEntities } from "@/interfaces/entity";
+import { v4 } from "uuid";
+import { mapBy } from "@/utils";
+import { getEntitiesUsers, getUser, getUsers } from "@/utils/users.be";
+import { Group, User } from "@/interfaces/user";
+import { getGroups, getGroupsByEntities } from "@/utils/groups.be";
+import { requestUser } from "@/utils/api";
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "GET") return await get(req, res);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+	const user = await requestUser(req, res)
+	if (!user) return res.status(401).json({ ok: false });
+
+  const groups: WithEntity<Group>[] = ["admin", "developer"].includes(user.type)
+    ? await getGroups()
+    : await getGroupsByEntities(mapBy(user.entities || [], 'id'))
+
+  res.status(200).json(groups);
+}

src/pages/api/entities/index.ts

@@ -0,0 +1,52 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type {NextApiRequest, NextApiResponse} from "next";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {addUsersToEntity, addUserToEntity, createEntity, getEntities, getEntitiesWithRoles} from "@/utils/entities.be";
+import {Entity} from "@/interfaces/entity";
+import {v4} from "uuid";
+import { requestUser } from "@/utils/api";
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (req.method === "GET") return await get(req, res);
+	if (req.method === "POST") return await post(req, res);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+	const user = await requestUser(req, res)
+	if (!user) return res.status(401).json({ ok: false });
+
+	const {showRoles} = req.query as {showRoles: string};
+
+	const getFn = showRoles ? getEntitiesWithRoles : getEntities;
+
+	if (["admin", "developer"].includes(user.type)) return res.status(200).json(await getFn());
+	res.status(200).json(await getFn(user.entities.map((x) => x.id)));
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+	const user = await requestUser(req, res)
+	if (!user) return res.status(401).json({ ok: false });
+
+	if (!["admin", "developer"].includes(user.type)) {
+		return res.status(403).json({ok: false});
+	}
+
+	const entity: Entity = {
+		id: v4(),
+		label: req.body.label,
+	};
+
+	const members = req.body.members as string[] | undefined || []
+	console.log(members)
+
+	const roles = await createEntity(entity)
+	console.log(roles)
+
+	await addUserToEntity(user.id, entity.id, roles.admin.id)
+	if (members.length > 0) await addUsersToEntity(members, entity.id, roles.default.id)
+
+	return res.status(200).json(entity);
+}

src/pages/api/entities/users.ts

@@ -0,0 +1,63 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { getEntities, getEntitiesWithRoles } from "@/utils/entities.be";
+import { Entity, EntityWithRoles, WithEntities, WithLabeledEntities } from "@/interfaces/entity";
+import { v4 } from "uuid";
+import { mapBy } from "@/utils";
+import { getEntitiesUsers, getUser, getUsers } from "@/utils/users.be";
+import { User } from "@/interfaces/user";
+import { findAllowedEntities } from "@/utils/permissions";
+import { RolePermission } from "@/resources/entityPermissions";
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "GET") return await get(req, res);
+}
+
+const labelUserEntity = (u: User, entities: EntityWithRoles[]) => ({
+  ...u, entities: (u.entities || []).map((e) => {
+    const entity = entities.find((x) => x.id === e.id)
+    if (!entity) return e
+
+    const role = entity.roles.find((x) => x.id === e.role)
+    return { id: e.id, label: entity.label, role: e.role, roleLabel: role?.label }
+  })
+})
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) return res.status(401).json({ ok: false });
+
+  const user = await getUser(req.session.user.id)
+  if (!user) return res.status(401).json({ ok: false });
+
+  const { type } = req.query as { type: string }
+
+  const entityIDs = mapBy(user.entities || [], 'id')
+  const entities = await getEntitiesWithRoles(entityIDs)
+
+  const isAdmin = ["admin", "developer"].includes(user.type)
+
+  const filter = !type ? undefined : { type }
+  const users = isAdmin
+    ? await getUsers(filter)
+    : await getEntitiesUsers(mapBy(entities, 'id') as string[], filter)
+
+  const filteredUsers = users.map((u) => {
+  	if (isAdmin) return labelUserEntity(u, entities)
+  	if (!isAdmin && ["admin", "developer", "agent"].includes(user.type)) return undefined
+
+   	const userEntities = mapBy(u.entities || [], 'id')
+    const sameEntities = entities.filter(e => userEntities.includes(e.id))
+
+    const permission = `view_${u.type}s` as RolePermission
+    const allowedEntities = findAllowedEntities(user, sameEntities, permission)
+
+    if (allowedEntities.length === 0) return undefined
+    return labelUserEntity(u, allowedEntities)
+  }).filter(x => !!x) as WithLabeledEntities<User>[]
+
+  res.status(200).json(filteredUsers);
+}

src/pages/api/groups/[id].ts

@@ -5,6 +5,7 @@ import {withIronSessionApiRoute} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
 import {Group} from "@/interfaces/user";
 import {updateExpiryDateOnGroup} from "@/utils/groups.be";
+import { requestUser } from "@/utils/api";
 
 const db = client.db(process.env.MONGODB_DB);
 
@@ -19,10 +20,8 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 }
 
 async function get(req: NextApiRequest, res: NextApiResponse) {
-	if (!req.session.user) {
-		res.status(401).json({ok: false});
-		return;
-	}
+	const user = await requestUser(req, res)
+	if (!user) return res.status(401).json({ ok: false });
 
 	const {id} = req.query as {id: string};
 
@@ -36,10 +35,8 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 }
 
 async function del(req: NextApiRequest, res: NextApiResponse) {
-	if (!req.session.user) {
-		res.status(401).json({ok: false});
-		return;
-	}
+	const user = await requestUser(req, res)
+	if (!user) return res.status(401).json({ ok: false });
 
 	const {id} = req.query as {id: string};
 	const group = await db.collection("groups").findOne<Group>({id: id});
@@ -49,7 +46,6 @@ async function del(req: NextApiRequest, res: NextApiResponse) {
 		return;
 	}
 
-	const user = req.session.user;
 	if (user.type === "admin" || user.type === "developer" || user.id === group.admin) {
 		await db.collection("groups").deleteOne({id: id});
 
@@ -61,10 +57,8 @@ async function del(req: NextApiRequest, res: NextApiResponse) {
 }
 
 async function patch(req: NextApiRequest, res: NextApiResponse) {
-	if (!req.session.user) {
-		res.status(401).json({ok: false});
-		return;
-	}
+	const user = await requestUser(req, res)
+	if (!user) return res.status(401).json({ ok: false });
 
 	const {id} = req.query as {id: string};
 
@@ -74,14 +68,20 @@ async function patch(req: NextApiRequest, res: NextApiResponse) {
 		return;
 	}
 
-	const user = req.session.user;
-	if (user.type === "admin" || user.type === "developer" || user.id === group.admin) {
-		if ("participants" in req.body) {
+	if (
+		user.type === "admin" ||
+		user.type === "developer" ||
+		user.type === "mastercorporate" ||
+		user.type === "corporate" ||
+		user.id === group.admin
+	) {
+		if ("participants" in req.body && req.body.participants.length > 0) {
 			const newParticipants = (req.body.participants as string[]).filter((x) => !group.participants.includes(x));
 			await Promise.all(newParticipants.map(async (p) => await updateExpiryDateOnGroup(p, group.admin)));
 		}
 
-		await db.collection("groups").updateOne({id: req.session.user.id}, {$set: {id, ...req.body}}, {upsert: true});
+		console.log(req.body);
+		await db.collection("groups").updateOne({id}, {$set: {id, ...req.body}}, {upsert: true});
 
 		res.status(200).json({ok: true});
 		return;

src/pages/api/groups/index.ts

@@ -39,11 +39,13 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 
 	await Promise.all(body.participants.map(async (p) => await updateExpiryDateOnGroup(p, body.admin)));
 
-	await db.collection("groups").insertOne({
-			id: v4(),
-			name: body.name,
-			admin: body.admin,
-			participants: body.participants,
-	})
-	res.status(200).json({ok: true});
+	const id = v4();
+	await db.collection<Group>("groups").insertOne({
+		id,
+		name: body.name,
+		admin: body.admin,
+		participants: body.participants,
+		entity: body.entity,
+	});
+	res.status(200).json({ok: true, id});
 }

src/pages/api/hello.ts

@@ -1,13 +1,16 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
+import client from "@/lib/mongodb";
+import type {NextApiRequest, NextApiResponse} from "next";
+
+const db = client.db(process.env.MONGODB_DB);
 
 type Data = {
-  name: string
-}
+	name: string;
+};
 
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>
-) {
-  res.status(200).json({ name: 'John Doe' })
+export default async function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
+	// await db.collection("users").updateMany({}, {$set: {entities: []}});
+	await db.collection("invites").deleteMany({});
+
+	res.status(200).json({name: "John Doe"});
 }

src/pages/api/invites/[id].ts

@@ -4,6 +4,7 @@ import client from "@/lib/mongodb";
 import { withIronSessionApiRoute } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
 import { Invite } from "@/interfaces/invite";
+import { requestUser } from "@/utils/api";
 
 const db = client.db(process.env.MONGODB_DB);
 
@@ -18,10 +19,8 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 }
 
 async function get(req: NextApiRequest, res: NextApiResponse) {
-  if (!req.session.user) {
-    res.status(401).json({ ok: false });
-    return;
-  }
+	const user = await requestUser(req, res)
+	if (!user) return res.status(401).json({ ok: false });
 
   const { id } = req.query as { id: string };
 
@@ -35,10 +34,8 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 }
 
 async function del(req: NextApiRequest, res: NextApiResponse) {
-  if (!req.session.user) {
-    res.status(401).json({ ok: false });
-    return;
-  }
+	const user = await requestUser(req, res)
+	if (!user) return res.status(401).json({ ok: false });
 
   const { id } = req.query as { id: string };
 
@@ -48,7 +45,6 @@ async function del(req: NextApiRequest, res: NextApiResponse) {
     return;
   }
 
-  const user = req.session.user;
   if (user.type === "admin" || user.type === "developer") {
     await db.collection("invites").deleteOne({ id: id });
     res.status(200).json({ ok: true });
@@ -59,13 +55,10 @@ async function del(req: NextApiRequest, res: NextApiResponse) {
 }
 
 async function patch(req: NextApiRequest, res: NextApiResponse) {
-  if (!req.session.user) {
-    res.status(401).json({ ok: false });
-    return;
-  }
+	const user = await requestUser(req, res)
+	if (!user) return res.status(401).json({ ok: false });
 
   const { id } = req.query as { id: string };
-  const user = req.session.user;
 
   if (user.type === "admin" || user.type === "developer") {
     await db.collection("invites").updateOne(

src/pages/api/invites/accept/[id].ts

@@ -8,6 +8,8 @@ import { CorporateUser, Group, User } from "@/interfaces/user";
 import { v4 } from "uuid";
 import { sendEmail } from "@/email";
 import { updateExpiryDateOnGroup } from "@/utils/groups.be";
+import { addUserToEntity, getEntity, getEntityWithRoles } from "@/utils/entities.be";
+import { findBy } from "@/utils";
 
 const db = client.db(process.env.MONGODB_DB);
 
@@ -19,72 +21,6 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 	res.status(404).json(undefined);
 }
 
-async function addToInviterGroup(user: User, invitedBy: User) {
-	const invitedByGroups = await db.collection("groups").find<Group>({ admin: invitedBy.id }).toArray();
-	const typeGroupName = user.type === "student" ? "Students" : user.type === "teacher" ? "Teachers" : undefined;
-
-	if (typeGroupName) {
-		const typeGroup: Group = invitedByGroups.find((g) => g.name === typeGroupName) || {
-			id: v4(),
-			admin: invitedBy.id,
-			name: typeGroupName,
-			participants: [],
-			disableEditing: true,
-		};
-
-		await db.collection("groups").updateOne(
-			{ id: typeGroup.id },
-			{
-				$set: {
-					...typeGroup,
-					participants: [...typeGroup.participants.filter((x) => x !== user.id), user.id],
-				},
-			},
-			{ upsert: true }
-		);
-
-	}
-
-	const invitationsGroup: Group = invitedByGroups.find((g) => g.name === "Invited") || {
-		id: v4(),
-		admin: invitedBy.id,
-		name: "Invited",
-		participants: [],
-		disableEditing: true,
-	};
-
-	await db.collection("groups").updateOne(
-		{ id: invitationsGroup.id },
-		{
-			$set: {
-				...invitationsGroup,
-				participants: [...invitationsGroup.participants.filter((x) => x !== user.id), user.id],
-			}
-		},
-		{ upsert: true }
-	);
-}
-
-async function deleteFromPreviousCorporateGroups(user: User, invitedBy: User) {
-	const corporatesRef = await db.collection("users").find<CorporateUser>({ type: "corporate" }).toArray();
-	const corporates = corporatesRef.filter((x) => x.id !== invitedBy.id);
-
-	const userGroups = await db.collection("groups").find<Group>({
-		participants: user.id
-	}).toArray();
-
-	const corporateGroups = userGroups.filter((x) => corporates.map((c) => c.id).includes(x.admin));
-	await Promise.all(
-		corporateGroups.map(async (group) => {
-			await db.collection("groups").updateOne(
-				{ id: group.id },
-				{ $set: { participants: group.participants.filter((x) => x !== user.id) } },
-				{ upsert: true }
-			);
-		}),
-	);
-}
-
 async function get(req: NextApiRequest, res: NextApiResponse) {
 	if (!req.session.user) {
 		res.status(401).json({ ok: false });
@@ -102,10 +38,11 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 		const invitedBy = await db.collection("users").findOne<User>({ id: invite.from});
 		if (!invitedBy) return res.status(404).json({ ok: false });
 
-		await updateExpiryDateOnGroup(invite.to, invite.from);
+		const inviteEntity = await getEntityWithRoles(invite.entity)
+		if (!inviteEntity) return res.status(404).json({ ok: false });
 
-		if (invitedBy.type === "corporate") await deleteFromPreviousCorporateGroups(req.session.user, invitedBy);
-		await addToInviterGroup(req.session.user, invitedBy);
+		const defaultRole = findBy(inviteEntity.roles, 'isDefault', true)!
+		await addUserToEntity(invite.to, inviteEntity.id, defaultRole.id)
 
 		try {
 			await sendEmail(

src/pages/api/invites/index.ts

@@ -8,6 +8,8 @@ import client from "@/lib/mongodb";
 import {withIronSessionApiRoute} from "iron-session/next";
 import type {NextApiRequest, NextApiResponse} from "next";
 import ShortUniqueId from "short-unique-id";
+import { Entity } from "@/interfaces/entity";
+import { getEntity } from "@/utils/entities.be";
 
 const db = client.db(process.env.MONGODB_DB);
 
@@ -36,20 +38,19 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 	const invited = await db.collection("users").findOne<User>({ id: body.to});
 	if (!invited) return res.status(404).json({ok: false});
 
-	const invitedBy = await db.collection("users").findOne<User>({ id: body.from});
-	if (!invitedBy) return res.status(404).json({ok: false});
+	const entity = await getEntity(body.entity)
+	if (!entity) return res.status(404).json({ok: false});
 
 	try {
 		await sendEmail(
 			"receivedInvite",
 			{
 				name: invited.name,
-				corporateName:
-					invitedBy.type === "corporate" ? invitedBy.corporateInformation?.companyInformation?.name || invitedBy.name : invitedBy.name,
+				entity: entity.label,
 				environment: process.env.ENVIRONMENT,
 			},
 			[invited.email],
-			"You have been invited to a group!",
+			"You have been invited to an entity!",
 		);
 	} catch (e) {
 		console.log(e);

src/pages/api/make_user.ts

@@ -1,28 +1,30 @@
-import type {NextApiRequest, NextApiResponse} from "next";
-import {app} from "@/firebase";
-import {withIronSessionApiRoute} from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
-import {v4} from "uuid";
-import {CorporateUser, Group, Type, User} from "@/interfaces/user";
-import {createUserWithEmailAndPassword, getAuth} from "firebase/auth";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { app } from "@/firebase";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { v4 } from "uuid";
+import { CorporateUser, Group, Type, User } from "@/interfaces/user";
+import { createUserWithEmailAndPassword, getAuth } from "firebase/auth";
 import ShortUniqueId from "short-unique-id";
-import {getGroup, getGroups, getUserCorporate, getUserGroups, getUserNamedGroup} from "@/utils/groups.be";
-import {uniq} from "lodash";
-import {getSpecificUsers, getUser} from "@/utils/users.be";
+import { getGroup, getGroups, getUserCorporate, getUserGroups, getUserNamedGroup } from "@/utils/groups.be";
+import { uniq } from "lodash";
+import { getSpecificUsers, getUser } from "@/utils/users.be";
 import client from "@/lib/mongodb";
+import { getEntityWithRoles } from "@/utils/entities.be";
+import { findBy } from "@/utils";
 
 const DEFAULT_DESIRED_LEVELS = {
-	reading: 9,
-	listening: 9,
-	writing: 9,
-	speaking: 9,
+  reading: 9,
+  listening: 9,
+  writing: 9,
+  speaking: 9,
 };
 
 const DEFAULT_LEVELS = {
-	reading: 0,
-	listening: 0,
-	writing: 0,
-	speaking: 0,
+  reading: 0,
+  listening: 0,
+  writing: 0,
+  speaking: 0,
 };
 
 const auth = getAuth(app);
@@ -30,198 +32,100 @@ const db = client.db(process.env.MONGODB_DB);
 
 export default withIronSessionApiRoute(handler, sessionOptions);
 
-const getUsersOfType = async (admin: string, type: Type) => {
-	const groups = await getUserGroups(admin);
-	const participants = groups.flatMap((x) => x.participants);
-	const users = await getSpecificUsers(participants);
-
-	return users.filter((x) => x?.type === type).map((x) => x?.id);
-};
-
 async function handler(req: NextApiRequest, res: NextApiResponse) {
-	if (req.method === "POST") return post(req, res);
+  if (req.method === "POST") return post(req, res);
 
-	return res.status(404).json({ok: false});
+  return res.status(404).json({ ok: false });
 }
 
 async function post(req: NextApiRequest, res: NextApiResponse) {
-	const maker = req.session.user;
-	if (!maker) {
-		return res.status(401).json({ok: false, reason: "You must be logged in to make user!"});
-	}
+  const maker = req.session.user;
+  if (!maker) {
+    return res.status(401).json({ ok: false, reason: "You must be logged in to make user!" });
+  }
 
-	const corporateCorporate = await getUserCorporate(maker.id);
+  const { email, passport_id, password, type, groupID, entity, expiryDate, corporate } = req.body as {
+    email: string;
+    password?: string;
+    passport_id: string;
+    type: string;
+    entity: string;
+    groupID?: string;
+    corporate?: string;
+    expiryDate: null | Date;
+  };
 
-	const {email, passport_id, password, type, groupID, expiryDate, corporate} = req.body as {
-		email: string;
-		password?: string;
-		passport_id: string;
-		type: string;
-		groupID?: string;
-		corporate?: string;
-		expiryDate: null | Date;
-	};
-	// cleaning data
-	delete req.body.passport_id;
-	delete req.body.groupID;
-	delete req.body.expiryDate;
-	delete req.body.password;
-	delete req.body.corporate;
+  // cleaning data
+  delete req.body.passport_id;
+  delete req.body.groupID;
+  delete req.body.expiryDate;
+  delete req.body.password;
+  delete req.body.corporate;
+  delete req.body.entity
 
-	await createUserWithEmailAndPassword(auth, email.toLowerCase(), !!password ? password : passport_id)
-		.then(async (userCredentials) => {
-			const userId = userCredentials.user.uid;
+  await createUserWithEmailAndPassword(auth, email.toLowerCase(), !!password ? password : passport_id)
+    .then(async (userCredentials) => {
+      const userId = userCredentials.user.uid;
 
-			const profilePicture = !corporateCorporate ? "/defaultAvatar.png" : corporateCorporate.profilePicture;
+      const entityWithRole = await getEntityWithRoles(entity)
+      const defaultRole = findBy(entityWithRole?.roles || [], "isDefault", true)
 
-			const user = {
-				...req.body,
-				bio: "",
-				id: userId,
-				type: type,
-				focus: "academic",
-				status: "active",
-				desiredLevels: DEFAULT_DESIRED_LEVELS,
-				profilePicture,
-				levels: DEFAULT_LEVELS,
-				isFirstLogin: false,
-				isVerified: true,
-				registrationDate: new Date(),
-				subscriptionExpirationDate: expiryDate || null,
-				...((maker.type === "corporate" || maker.type === "mastercorporate") && type === "corporate"
-					? {
-							corporateInformation: {
-								companyInformation: {
-									name: maker.corporateInformation?.companyInformation?.name || "N/A",
-									userAmount: 0,
-								},
-							},
-					  }
-					: {}),
-			};
+      const user = {
+        ...req.body,
+        bio: "",
+        id: userId,
+        type: type,
+        focus: "academic",
+        status: "active",
+        desiredLevels: DEFAULT_DESIRED_LEVELS,
+        profilePicture: "/defaultAvatar.png",
+        levels: DEFAULT_LEVELS,
+        isFirstLogin: false,
+        isVerified: true,
+        registrationDate: new Date(),
+        entities: [{ id: entity, role: defaultRole?.id || "" }],
+        subscriptionExpirationDate: expiryDate || null,
+        ...((maker.type === "corporate" || maker.type === "mastercorporate") && type === "corporate"
+          ? {
+            corporateInformation: {
+              companyInformation: {
+                name: maker.corporateInformation?.companyInformation?.name || "N/A",
+                userAmount: 0,
+              },
+            },
+          }
+          : {}),
+      };
 
-			const uid = new ShortUniqueId();
-			const code = uid.randomUUID(6);
+      const uid = new ShortUniqueId();
+      const code = uid.randomUUID(6);
 
-			await db.collection("users").insertOne(user);
-			await db.collection("codes").insertOne({
-				code,
-				creator: maker.id,
-				expiryDate,
-				type,
-				creationDate: new Date(),
-				userId,
-				email: email.toLowerCase(),
-				name: req.body.name,
-				...(!!passport_id ? {passport_id} : {}),
-			});
+      await db.collection("users").insertOne(user);
+      await db.collection("codes").insertOne({
+        code,
+        creator: maker.id,
+        expiryDate,
+        type,
+        creationDate: new Date(),
+        userId,
+        email: email.toLowerCase(),
+        name: req.body.name,
+        ...(!!passport_id ? { passport_id } : {}),
+      });
 
-			if (type === "corporate") {
-				const students = maker.type === "corporate" ? await getUsersOfType(maker.id, "student") : [];
-				const teachers = maker.type === "corporate" ? await getUsersOfType(maker.id, "teacher") : [];
+      if (!!groupID) {
+        const group = await getGroup(groupID);
+        if (!!group) await db.collection("groups").updateOne({ id: group.id }, { $set: { participants: [...group.participants, userId] } });
+      }
 
-				const defaultTeachersGroup: Group = {
-					admin: userId,
-					id: v4(),
-					name: "Teachers",
-					participants: teachers,
-					disableEditing: true,
-				};
+      console.log(`Returning - ${email}`);
+      return res.status(200).json({ ok: true });
+    })
+    .catch((error) => {
+      if (error.code.includes("email-already-in-use")) return res.status(403).json({ error, message: "E-mail is already in the platform." });
 
-				const defaultStudentsGroup: Group = {
-					admin: userId,
-					id: v4(),
-					name: "Students",
-					participants: students,
-					disableEditing: true,
-				};
-
-				await db.collection("groups").insertMany([defaultStudentsGroup, defaultTeachersGroup]);
-			}
-
-			if (!!corporate) {
-				const corporateUser = await db.collection("users").findOne<CorporateUser>({email: corporate.trim().toLowerCase()});
-
-				if (!!corporateUser) {
-					await db.collection("codes").updateOne({code}, {$set: {creator: corporateUser.id}});
-					const typeGroup = await db
-						.collection("groups")
-						.findOne<Group>({creator: corporateUser.id, name: type === "student" ? "Students" : "Teachers"});
-
-					if (!!typeGroup) {
-						if (!typeGroup.participants.includes(userId)) {
-							await db.collection("groups").updateOne({id: typeGroup.id}, {$set: {participants: [...typeGroup.participants, userId]}});
-						}
-					} else {
-						const defaultGroup: Group = {
-							admin: corporateUser.id,
-							id: v4(),
-							name: type === "student" ? "Students" : "Teachers",
-							participants: [userId],
-							disableEditing: true,
-						};
-
-						await db.collection("groups").insertOne(defaultGroup);
-					}
-				}
-			}
-
-			if (maker.type === "corporate") {
-				await db.collection("codes").updateOne({code}, {$set: {creator: maker.id}});
-				const typeGroup = await getUserNamedGroup(maker.id, type === "student" ? "Students" : "Teachers");
-
-				if (!!typeGroup) {
-					if (!typeGroup.participants.includes(userId)) {
-						await db.collection("groups").updateOne({id: typeGroup.id}, {$set: {participants: [...typeGroup.participants, userId]}});
-					}
-				} else {
-					const defaultGroup: Group = {
-						admin: maker.id,
-						id: v4(),
-						name: type === "student" ? "Students" : "Teachers",
-						participants: [userId],
-						disableEditing: true,
-					};
-
-					await db.collection("groups").insertOne(defaultGroup);
-				}
-			}
-
-			if (!!corporateCorporate && corporateCorporate.type === "mastercorporate" && type === "corporate") {
-				const corporateGroup = await getUserNamedGroup(corporateCorporate.id, "Corporate");
-
-				if (!!corporateGroup) {
-					if (!corporateGroup.participants.includes(userId)) {
-						await db
-							.collection("groups")
-							.updateOne({id: corporateGroup.id}, {$set: {participants: [...corporateGroup.participants, userId]}});
-					}
-				} else {
-					const defaultGroup: Group = {
-						admin: corporateCorporate.id,
-						id: v4(),
-						name: "Corporate",
-						participants: [userId],
-						disableEditing: true,
-					};
-
-					await db.collection("groups").insertOne(defaultGroup);
-				}
-			}
-
-			if (!!groupID) {
-				const group = await getGroup(groupID);
-				if (!!group) await db.collection("groups").updateOne({id: group.id}, {$set: {participants: [...group.participants, userId]}});
-			}
-
-			console.log(`Returning - ${email}`);
-			return res.status(200).json({ok: true});
-		})
-		.catch((error) => {
-			if (error.code.includes("email-already-in-use")) return res.status(403).json({error, message: "E-mail is already in the platform."});
-
-			console.log(`Failing - ${email}`);
-			console.log(error);
-			return res.status(401).json({error});
-		});
+      console.log(`Failing - ${email}`);
+      console.log(error);
+      return res.status(401).json({ error });
+    });
 }

src/pages/api/payments/[id].ts

@@ -7,6 +7,7 @@ import {Group} from "@/interfaces/user";
 import {Payment} from "@/interfaces/paypal";
 import {deleteObject, ref} from "firebase/storage";
 import client from "@/lib/mongodb";
+import { requestUser } from "@/utils/api";
 
 const db = client.db(process.env.MONGODB_DB);
 
@@ -38,17 +39,14 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 }
 
 async function del(req: NextApiRequest, res: NextApiResponse) {
-	if (!req.session.user) {
-		res.status(401).json({ok: false});
-		return;
-	}
+	const user = await requestUser(req, res)
+	if (!user) return res.status(401).json({ ok: false });
 
 	const {id} = req.query as {id: string};
 
 	const payment = await db.collection("payments").findOne<Payment>({id});
 	if (!payment) return res.status(404).json({ok: false});
 
-	const user = req.session.user;
 	if (user.type === "admin" || user.type === "developer") {
 		if (payment.commissionTransfer) await deleteObject(ref(storage, payment.commissionTransfer));
 		if (payment.corporateTransfer) await deleteObject(ref(storage, payment.corporateTransfer));
@@ -62,17 +60,14 @@ async function del(req: NextApiRequest, res: NextApiResponse) {
 }
 
 async function patch(req: NextApiRequest, res: NextApiResponse) {
-	if (!req.session.user) {
-		res.status(401).json({ok: false});
-		return;
-	}
+	const user = await requestUser(req, res)
+	if (!user) return res.status(401).json({ ok: false });
 
 	const {id} = req.query as {id: string};
 
 	const payment = await db.collection("payments").findOne<Payment>({id});
 	if (!payment) return res.status(404).json({ok: false});
 
-	const user = req.session.user;
 	if (user.type === "admin" || user.type === "developer") {
 		await db.collection("payments").updateOne({id: payment.id}, {$set: req.body});
 

src/pages/api/paypal/approve.ts

@@ -11,6 +11,7 @@ import { OrderResponseBody } from "@paypal/paypal-js";
 import { getAccessToken } from "@/utils/paypal";
 import moment from "moment";
 import { Group } from "@/interfaces/user";
+import { requestUser } from "@/utils/api";
 
 const db = client.db(process.env.MONGODB_DB);
 
@@ -25,6 +26,9 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
   if (!accessToken)
     return res.status(401).json({ ok: false, reason: "Authorization failed!" });
 
+  const user = await requestUser(req, res)
+	if (!user) return res.status(401).json({ ok: false });
+
   const { id, duration, duration_unit, trackingId } = req.body as {
     id: string;
     duration: number;

src/pages/api/roles/[id]/index.ts

@@ -0,0 +1,79 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type {NextApiRequest, NextApiResponse} from "next";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {getEntityWithRoles} from "@/utils/entities.be";
+import client from "@/lib/mongodb";
+import {Entity} from "@/interfaces/entity";
+import { deleteRole, getRole, transferRole } from "@/utils/roles.be";
+import { doesEntityAllow } from "@/utils/permissions";
+import { findBy } from "@/utils";
+import { requestUser } from "@/utils/api";
+
+const db = client.db(process.env.MONGODB_DB);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (req.method === "GET") return await get(req, res);
+	if (req.method === "PATCH") return await patch(req, res);
+	if (req.method === "DELETE") return await del(req, res);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+	const user = await requestUser(req, res)
+	if (!user) return res.status(401).json({ ok: false });
+
+	const {id} = req.query as {id: string};
+
+	const role = await getRole(id)
+	if (!role) return res.status(404).json({ok: false})
+
+	res.status(200).json(role);
+}
+
+async function del(req: NextApiRequest, res: NextApiResponse) {
+	const user = await requestUser(req, res)
+	if (!user) return res.status(401).json({ ok: false });
+
+	const { id } = req.query as { id: string };
+
+	const role = await getRole(id)
+	if (!role) return res.status(404).json({ok: false})
+
+	if (role.isDefault) return res.status(403).json({ok: false})
+
+	const entity = await getEntityWithRoles(role.entityID)
+	if (!entity) return res.status(404).json({ok: false})
+
+	if (!doesEntityAllow(user, entity, "delete_entity_role")) return res.status(403).json({ok: false})
+
+	const defaultRole = findBy(entity.roles, 'isDefault', true)!
+
+	await transferRole(role.id, defaultRole.id)
+	await deleteRole(role.id)
+
+	return res.status(200).json({ok: true});
+}
+
+async function patch(req: NextApiRequest, res: NextApiResponse) {
+	const user = await requestUser(req, res)
+	if (!user) return res.status(401).json({ ok: false });
+
+	const { id } = req.query as { id: string };
+	const {label, permissions} = req.body as {label?: string, permissions?: string}
+
+	const role = await getRole(id)
+	if (!role) return res.status(404).json({ok: false})
+
+	const entity = await getEntityWithRoles(role.entityID)
+	if (!entity) return res.status(404).json({ok: false})
+
+	if (!doesEntityAllow(user, entity, "rename_entity_role") && !!label) return res.status(403).json({ok: false})
+	if (!doesEntityAllow(user, entity, "edit_role_permissions") && !!permissions) return res.status(403).json({ok: false})
+
+	if (!!label) await db.collection<Entity>("roles").updateOne({ id }, { $set: {label} });
+	if (!!permissions) await db.collection<Entity>("roles").updateOne({ id }, { $set: {permissions} });
+
+	return res.status(200).json({ok: true});
+}

src/pages/api/roles/[id]/users.ts

@@ -0,0 +1,40 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type {NextApiRequest, NextApiResponse} from "next";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {getEntityWithRoles} from "@/utils/entities.be";
+import client from "@/lib/mongodb";
+import {Entity} from "@/interfaces/entity";
+import { assignRoleToUsers, deleteRole, getRole, transferRole } from "@/utils/roles.be";
+import { doesEntityAllow } from "@/utils/permissions";
+import { findBy } from "@/utils";
+import { getUser } from "@/utils/users.be";
+
+const db = client.db(process.env.MONGODB_DB);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (req.method === "POST") return await post(req, res);
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) return res.status(401).json({ ok: false })
+
+	const user = await getUser(req.session.user.id);
+	if (!user) return res.status(401).json({ ok: false })
+
+	const { id } = req.query as { id: string };
+	const {users} = req.body as {users: string[]}
+
+	const role = await getRole(id)
+	if (!role) return res.status(404).json({ok: false})
+
+	const entity = await getEntityWithRoles(role.entityID)
+	if (!entity) return res.status(404).json({ok: false})
+
+	if (!doesEntityAllow(user, entity, "assign_to_role")) return res.status(403).json({ok: false})
+
+	const result = await assignRoleToUsers(users, entity.id, role.id)
+	return res.status(200).json({ok: result.acknowledged});
+}

src/pages/api/roles/index.ts

@@ -0,0 +1,50 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type {NextApiRequest, NextApiResponse} from "next";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {getEntities, getEntitiesWithRoles, getEntity, getEntityWithRoles} from "@/utils/entities.be";
+import {Entity} from "@/interfaces/entity";
+import {v4} from "uuid";
+import { createRole, getRoles, getRolesByEntity } from "@/utils/roles.be";
+import { mapBy } from "@/utils";
+import { RolePermission } from "@/resources/entityPermissions";
+import { doesEntityAllow } from "@/utils/permissions";
+import { User } from "@/interfaces/user";
+import { requestUser } from "@/utils/api";
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (req.method === "GET") return await get(req, res);
+	if (req.method === "POST") return await post(req, res);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+	const user = await requestUser(req, res)
+	if (!user) return res.status(401).json({ ok: false });
+
+	if (["admin", "developer"].includes(user.type)) return res.status(200).json(await getRoles());
+	res.status(200).json(await getRoles(mapBy(user.entities, 'role')));
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+	const user = await requestUser(req, res)
+	if (!user) return res.status(401).json({ ok: false });
+
+	const {entityID, label, permissions} = req.body as {entityID: string, label: string, permissions: RolePermission[]}
+
+	const entity = await getEntityWithRoles(entityID)
+	if (!entity) return res.status(404).json({ok: false})
+
+	if (!doesEntityAllow(user, entity, "create_entity_role")) return res.status(403).json({ok: false})
+
+	const role = {
+		id: v4(),
+		entityID,
+		label,
+		permissions
+	}
+
+	await createRole(role)
+	return res.status(200).json(role);
+}

src/pages/api/stats/index.ts

@@ -6,6 +6,7 @@ import { sessionOptions } from "@/lib/session";
 import { Stat } from "@/interfaces/user";
 import { Assignment } from "@/interfaces/results";
 import { groupBy } from "lodash";
+import { requestUser } from "@/utils/api";
 
 const db = client.db(process.env.MONGODB_DB);
 
@@ -17,20 +18,17 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 }
 
 async function get(req: NextApiRequest, res: NextApiResponse) {
-	if (!req.session.user) {
-		res.status(401).json({ ok: false });
-		return;
-	}
+	const user = await requestUser(req, res)
+	if (!user) return res.status(401).json({ ok: false });
+
 	const snapshot = await db.collection("stats").find<Stat>({}).toArray();
 
 	res.status(200).json(snapshot);
 }
 
 async function post(req: NextApiRequest, res: NextApiResponse) {
-	if (!req.session.user) {
-		res.status(401).json({ ok: false });
-		return;
-	}
+	const user = await requestUser(req, res)
+	if (!user) return res.status(401).json({ ok: false });
 
 	const stats = req.body as Stat[];
 	stats.forEach(async (stat) => await db.collection("stats").updateOne(
@@ -59,7 +57,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 					$set: {
 						results: [
 							...assignmentSnapshot ? assignmentSnapshot.results : [],
-							{ user: req.session.user?.id, type: req.session.user?.focus, stats: assignmentStats },
+							{ user: user.id, type: user.focus, stats: assignmentStats },
 						],
 					}
 				}

src/pages/api/stats/update.ts

@@ -10,21 +10,23 @@ import client from "@/lib/mongodb";
 import {withIronSessionApiRoute} from "iron-session/next";
 import {groupBy} from "lodash";
 import {NextApiRequest, NextApiResponse} from "next";
+import { requestUser } from "@/utils/api";
 
 const db = client.db(process.env.MONGODB_DB);
 
 export default withIronSessionApiRoute(update, sessionOptions);
 
 async function update(req: NextApiRequest, res: NextApiResponse) {
-	if (req.session.user) {
-		const docUser = await db.collection("users").findOne({ id: req.session.user.id });
+	const user = await requestUser(req, res)
+	if (user) {
+		const docUser = await db.collection("users").findOne({ id: user.id });
 
 		if (!docUser) {
 			res.status(401).json(undefined);
 			return;
 		}
 
-		const stats = await db.collection("stats").find<Stat>({ user: req.session.user.id }).toArray();
+		const stats = await db.collection("stats").find<Stat>({ user: user.id }).toArray();
 
 		const groupedStats = groupBySession(stats);
 		const sessionLevels: {[key in Module]: {correct: number; total: number}}[] = Object.keys(groupedStats).map((key) => {
@@ -91,18 +93,18 @@ async function update(req: NextApiRequest, res: NextApiResponse) {
 
 
 		const levels = {
-			reading: calculateBandScore(readingLevel.correct, readingLevel.total, "reading", req.session.user.focus),
-			listening: calculateBandScore(listeningLevel.correct, listeningLevel.total, "listening", req.session.user.focus),
-			writing: calculateBandScore(writingLevel.correct, writingLevel.total, "writing", req.session.user.focus),
-			speaking: calculateBandScore(speakingLevel.correct, speakingLevel.total, "speaking", req.session.user.focus),
-			level: calculateBandScore(levelLevel.correct, levelLevel.total, "level", req.session.user.focus),
+			reading: calculateBandScore(readingLevel.correct, readingLevel.total, "reading", user.focus),
+			listening: calculateBandScore(listeningLevel.correct, listeningLevel.total, "listening", user.focus),
+			writing: calculateBandScore(writingLevel.correct, writingLevel.total, "writing", user.focus),
+			speaking: calculateBandScore(speakingLevel.correct, speakingLevel.total, "speaking", user.focus),
+			level: calculateBandScore(levelLevel.correct, levelLevel.total, "level", user.focus),
 		};
 
 		await db.collection("users").updateOne(
-			{ id: req.session.user.id},
+			{ id: user.id},
 			{ $set: {levels} }
 		);
-		  
+
 		res.status(200).json({ok: true});
 	} else {
 		res.status(401).json(undefined);

src/pages/api/user.ts

@@ -7,7 +7,9 @@ import {withIronSessionApiRoute} from "iron-session/next";
 import {NextApiRequest, NextApiResponse} from "next";
 import {getPermissions, getPermissionDocs} from "@/utils/permissions.be";
 import client from "@/lib/mongodb";
-import {getGroupsForUser, getParticipantGroups} from "@/utils/groups.be";
+import {getGroupsForUser, getParticipantGroups, removeParticipantFromGroup} from "@/utils/groups.be";
+import { mapBy } from "@/utils";
+import { getUser } from "@/utils/users.be";
 
 const auth = getAuth(adminApp);
 const db = client.db(process.env.MONGODB_DB);
@@ -41,20 +43,6 @@ async function del(req: NextApiRequest, res: NextApiResponse) {
 		return;
 	}
 
-	if (user.type === "corporate" && (targetUser.type === "student" || targetUser.type === "teacher")) {
-		const groups = await getGroupsForUser(user.id, targetUser.id);
-		await Promise.all([
-			...groups
-				.filter((x) => x.admin === user.id)
-				.map(
-					async (x) =>
-						await db.collection("groups").updateOne({id: x.id}, {$set: {participants: x.participants.filter((y: string) => y !== id)}}),
-				),
-		]);
-
-		return;
-	}
-
 	await auth.deleteUser(id);
 	await db.collection("users").deleteOne({id: targetUser.id});
 	await db.collection("codes").deleteMany({userId: targetUser.id});
@@ -62,22 +50,18 @@ async function del(req: NextApiRequest, res: NextApiResponse) {
 	await db.collection("stats").deleteMany({user: targetUser.id});
 
 	const groups = await getParticipantGroups(targetUser.id);
-	await Promise.all(
-		groups.map(
-			async (x) => await db.collection("groups").updateOne({id: x.id}, {$set: {participants: x.participants.filter((y: string) => y !== id)}}),
-		),
-	);
+		await Promise.all(
+			groups
+				.map(async (g) => await removeParticipantFromGroup(g.id, targetUser.id)),
+		);
 
 	res.json({ok: true});
 }
 
 async function get(req: NextApiRequest, res: NextApiResponse) {
 	if (req.session.user) {
-		const user = await db.collection("users").findOne<User>({id: req.session.user.id});
-		if (!user) {
-			res.status(401).json(undefined);
-			return;
-		}
+		const user = await getUser(req.session.user.id)
+		if (!user) return res.status(401).json(undefined);
 
 		await db.collection("users").updateOne({id: user.id}, {$set: {lastLogin: new Date().toISOString()}});
 

src/pages/assignments/[id].tsx

@@ -0,0 +1,453 @@
+import Button from "@/components/Low/Button";
+import ProgressBar from "@/components/Low/ProgressBar";
+import Modal from "@/components/Modal";
+import useUsers from "@/hooks/useUsers";
+import {Module} from "@/interfaces";
+import {Assignment} from "@/interfaces/results";
+import {Group, Stat, User} from "@/interfaces/user";
+import useExamStore from "@/stores/examStore";
+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";
+import moment from "moment";
+import {useRouter} from "next/router";
+import {BsBook, BsBuilding, BsChevronLeft, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
+import {toast} from "react-toastify";
+import {futureAssignmentFilter} from "@/utils/assignments";
+import {withIronSessionSsr} from "iron-session/next";
+import {checkAccess, doesEntityAllow} from "@/utils/permissions";
+import {mapBy, redirect, serialize} from "@/utils";
+import {getAssignment} from "@/utils/assignments.be";
+import {getEntitiesUsers, getEntityUsers, getUsers} from "@/utils/users.be";
+import {getEntitiesWithRoles, getEntityWithRoles} from "@/utils/entities.be";
+import {getGroups, getGroupsByEntities, getGroupsByEntity} from "@/utils/groups.be";
+import {sessionOptions} from "@/lib/session";
+import {EntityWithRoles} from "@/interfaces/entity";
+import Head from "next/head";
+import Layout from "@/components/High/Layout";
+import Separator from "@/components/Low/Separator";
+import Link from "next/link";
+import { requestUser } from "@/utils/api";
+import { useEntityPermission } from "@/hooks/useEntityPermissions";
+
+export const getServerSideProps = withIronSessionSsr(async ({req, res, params}) => {
+	const user = await requestUser(req, res)
+	if (!user) return redirect("/login")
+
+	if (!checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"]))
+		return redirect("/assignments")
+
+	res.setHeader("Cache-Control", "public, s-maxage=10, stale-while-revalidate=59");
+
+	const {id} = params as {id: string};
+
+	const assignment = await getAssignment(id);
+	if (!assignment) return redirect("/assignments")
+
+	const entity = await getEntityWithRoles(assignment.entity || "")
+	if (!entity){
+		const users = await getUsers()
+		return {props: serialize({user, users, assignment})};
+	}
+
+	if (!doesEntityAllow(user, entity, 'view_assignments')) return redirect("/assignments")
+
+	const users = await (checkAccess(user, ["developer", "admin"]) ? getUsers() : getEntityUsers(entity.id));
+
+	return {props: serialize({user, users, entity, assignment})};
+}, sessionOptions);
+
+interface Props {
+	user: User;
+	users: User[];
+	assignment: Assignment;
+	entity?: EntityWithRoles
+}
+
+export default function AssignmentView({user, users, entity, assignment}: Props) {
+	const canDeleteAssignment = useEntityPermission(user, entity, 'delete_assignment')
+	const canStartAssignment = useEntityPermission(user, entity, 'start_assignment')
+
+	const setExams = useExamStore((state) => state.setExams);
+	const setShowSolutions = useExamStore((state) => state.setShowSolutions);
+	const setUserSolutions = useExamStore((state) => state.setUserSolutions);
+	const setSelectedModules = useExamStore((state) => state.setSelectedModules);
+
+	const router = useRouter();
+
+	const deleteAssignment = async () => {
+		if (!canDeleteAssignment) return
+		if (!confirm("Are you sure you want to delete this assignment?")) return;
+
+		axios
+			.delete(`/api/assignments/${assignment?.id}`)
+			.then(() => toast.success(`Successfully deleted the assignment "${assignment?.name}".`))
+			.catch(() => toast.error("Something went wrong, please try again later."))
+			.finally(() => router.push("/assignments"));
+	};
+
+	const startAssignment = () => {
+		if (!canStartAssignment) return
+		if (!confirm("Are you sure you want to start this assignment?")) return;
+
+		axios
+			.post(`/api/assignments/${assignment.id}/start`)
+			.then(() => {
+				toast.success(`The assignment "${assignment.name}" has been started successfully!`);
+				router.replace(router.asPath);
+			})
+			.catch((e) => {
+				console.log(e);
+				toast.error("Something went wrong, please try again later!");
+			});
+	};
+
+	const formatTimestamp = (timestamp: string) => {
+		const date = moment(parseInt(timestamp));
+		const formatter = "YYYY/MM/DD - HH:mm";
+
+		return date.format(formatter);
+	};
+
+	const calculateAverageModuleScore = (module: Module) => {
+		if (!assignment) return -1;
+
+		const resultModuleBandScores = assignment.results.map((r) => {
+			const moduleStats = r.stats.filter((s) => s.module === module);
+
+			const correct = moduleStats.reduce((acc, curr) => acc + curr.score.correct, 0);
+			const total = moduleStats.reduce((acc, curr) => acc + curr.score.total, 0);
+			return calculateBandScore(correct, total, module, r.type);
+		});
+
+		return resultModuleBandScores.length === 0 ? -1 : resultModuleBandScores.reduce((acc, curr) => acc + curr, 0) / assignment.results.length;
+	};
+
+	const aggregateScoresByModule = (stats: Stat[]): {module: Module; total: number; missing: number; correct: number}[] => {
+		const scores: {
+			[key in Module]: {total: number; missing: number; correct: number};
+		} = {
+			reading: {
+				total: 0,
+				correct: 0,
+				missing: 0,
+			},
+			listening: {
+				total: 0,
+				correct: 0,
+				missing: 0,
+			},
+			writing: {
+				total: 0,
+				correct: 0,
+				missing: 0,
+			},
+			speaking: {
+				total: 0,
+				correct: 0,
+				missing: 0,
+			},
+			level: {
+				total: 0,
+				correct: 0,
+				missing: 0,
+			},
+		};
+
+		stats.forEach((x) => {
+			scores[x.module!] = {
+				total: scores[x.module!].total + x.score.total,
+				correct: scores[x.module!].correct + x.score.correct,
+				missing: scores[x.module!].missing + x.score.missing,
+			};
+		});
+
+		return Object.keys(scores)
+			.filter((x) => scores[x as Module].total > 0)
+			.map((x) => ({module: x as Module, ...scores[x as Module]}));
+	};
+
+	const customContent = (stats: Stat[], user: string, focus: "academic" | "general") => {
+		const correct = stats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
+		const total = stats.reduce((accumulator, current) => accumulator + current.score.total, 0);
+		const aggregatedScores = aggregateScoresByModule(stats).filter((x) => x.total > 0);
+
+		const aggregatedLevels = aggregatedScores.map((x) => ({
+			module: x.module,
+			level: calculateBandScore(x.correct, x.total, x.module, focus),
+		}));
+
+		const timeSpent = stats[0].timeSpent;
+
+		const selectExam = () => {
+			const examPromises = uniqBy(stats, "exam").map((stat) => getExamById(stat.module, stat.exam));
+
+			Promise.all(examPromises).then((exams) => {
+				if (exams.every((x) => !!x)) {
+					setUserSolutions(convertToUserSolutions(stats));
+					setShowSolutions(true);
+					setExams(exams.map((x) => x!).sort(sortByModule));
+					setSelectedModules(
+						exams
+							.map((x) => x!)
+							.sort(sortByModule)
+							.map((x) => x!.module),
+					);
+					router.push("/exam");
+				}
+			});
+		};
+
+		const content = (
+			<>
+				<div className="-md:items-center flex w-full justify-between 2xl:items-center">
+					<div className="-md:gap-2 -md:items-center flex md:flex-col md:gap-1 2xl:flex-row 2xl:items-center 2xl:gap-2">
+						<span className="font-medium">{formatTimestamp(stats[0].date.toString())}</span>
+						{timeSpent && (
+							<>
+								<span className="md:hidden 2xl:flex">• </span>
+								<span className="text-sm">{Math.floor(timeSpent / 60)} minutes</span>
+							</>
+						)}
+					</div>
+					<span
+						className={clsx(
+							correct / total >= 0.7 && "text-mti-purple",
+							correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
+							correct / total < 0.3 && "text-mti-rose",
+						)}>
+						Level{" "}
+						{(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)}
+					</span>
+				</div>
+
+				<div className="flex w-full flex-col gap-1">
+					<div className="-md:mt-2 grid w-full grid-cols-4 place-items-start gap-2">
+						{aggregatedLevels.map(({module, level}) => (
+							<div
+								key={module}
+								className={clsx(
+									"-md:px-4 flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
+									module === "reading" && "bg-ielts-reading",
+									module === "listening" && "bg-ielts-listening",
+									module === "writing" && "bg-ielts-writing",
+									module === "speaking" && "bg-ielts-speaking",
+									module === "level" && "bg-ielts-level",
+								)}>
+								{module === "reading" && <BsBook className="h-4 w-4" />}
+								{module === "listening" && <BsHeadphones className="h-4 w-4" />}
+								{module === "writing" && <BsPen className="h-4 w-4" />}
+								{module === "speaking" && <BsMegaphone className="h-4 w-4" />}
+								{module === "level" && <BsClipboard className="h-4 w-4" />}
+								<span className="text-sm">{level.toFixed(1)}</span>
+							</div>
+						))}
+					</div>
+				</div>
+			</>
+		);
+
+		return (
+			<div className="flex flex-col gap-2">
+				<span>
+					{(() => {
+						const student = users.find((u) => u.id === user);
+						return `${student?.name} (${student?.email})`;
+					})()}
+				</span>
+				<div
+					key={user}
+					className={clsx(
+						"border-mti-gray-platinum -md:hidden flex cursor-pointer flex-col gap-4 rounded-xl border p-4 transition duration-300 ease-in-out",
+						correct / total >= 0.7 && "hover:border-mti-purple",
+						correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
+						correct / total < 0.3 && "hover:border-mti-rose",
+					)}
+					onClick={selectExam}
+					role="button">
+					{content}
+				</div>
+				<div
+					key={user}
+					className={clsx(
+						"border-mti-gray-platinum -md:tooltip flex cursor-pointer flex-col gap-4 rounded-xl border p-4 transition duration-300 ease-in-out md:hidden",
+						correct / total >= 0.7 && "hover:border-mti-purple",
+						correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
+						correct / total < 0.3 && "hover:border-mti-rose",
+					)}
+					data-tip="Your screen size is too small to view previous exams."
+					role="button">
+					{content}
+				</div>
+			</div>
+		);
+	};
+
+	const shouldRenderStart = () => {
+		if (assignment) {
+			if (futureAssignmentFilter(assignment)) {
+				return true;
+			}
+		}
+
+		return false;
+	};
+
+	const removeInactiveAssignees = () => {
+		const mappedResults = mapBy(assignment.results, 'user')
+		const inactiveAssignees = assignment.assignees.filter((a) => !mappedResults.includes(a))
+		const activeAssignees = assignment.assignees.filter((a) => mappedResults.includes(a))
+
+		if (!confirm(`Are you sure you want to remove ${inactiveAssignees.length} assignees?`)) return
+
+		axios
+			.patch(`/api/assignments/${assignment.id}`, {assignees: activeAssignees})
+			.then(() => {
+				toast.success(`The assignment "${assignment.name}" has been updated successfully!`);
+				router.replace(router.asPath);
+			})
+			.catch((e) => {
+				console.log(e);
+				toast.error("Something went wrong, please try again later!");
+			});
+	}
+
+	const copyLink = async () => {
+		const origin = window.location.origin
+		await navigator.clipboard.writeText(`${origin}/exam?assignment=${assignment.id}`)
+		toast.success("The URL to the assignment has been copied to your clipboard!")
+	}
+
+	return (
+		<>
+			<Head>
+				<title>{assignment.name} | EnCoach</title>
+				<meta
+					name="description"
+					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+				/>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<Layout user={user}>
+				<div className="flex flex-col gap-4">
+					<div className="w-full flex items-center justify-between">
+						<div className="flex items-center gap-2">
+							<Link href="/assignments" className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
+								<BsChevronLeft />
+							</Link>
+							<h2 className="font-bold text-2xl">{assignment.name}</h2>
+						</div>
+						{!!entity && (
+							<span className="flex items-center gap-2">
+								<BsBuilding className="text-xl" /> {entity.label}
+							</span>
+						)}
+					</div>
+					<Separator />
+				</div>
+				<div className="mt-4 flex w-full flex-col gap-4">
+					<ProgressBar
+						color="purple"
+						label={`${assignment?.results.length}/${assignment?.assignees.length} assignees completed`}
+						className="h-6"
+						textClassName={
+							(assignment?.results.length || 0) / (assignment?.assignees.length || 1) < 0.5
+								? "!text-mti-gray-dim font-light"
+								: "text-white"
+						}
+						percentage={((assignment?.results.length || 0) / (assignment?.assignees.length || 1)) * 100}
+					/>
+					<div className="flex items-start gap-8">
+						<div className="flex flex-col gap-2">
+							<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
+									.filter((u) => assignment?.assignees.includes(u.id))
+									.map((u) => `${u.name} (${u.email})`)
+									.join(", ")}
+							</span>
+							<span>Assigner: {getUserName(users.find((x) => x.id === assignment?.assigner))}</span>
+						</div>
+					</div>
+
+					{assignment.assignees.length !== 0 && assignment.results.length !== assignment.assignees.length && (
+						<Button onClick={removeInactiveAssignees} variant="outline">Remove Inactive Assignees</Button>
+					)}
+
+					<div className="flex flex-col gap-2">
+						<span className="text-xl font-bold">Average Scores</span>
+						<div className="-md:mt-2 flex w-full items-center gap-4">
+							{assignment &&
+								uniqBy(assignment.exams, (x) => x.module).map(({module}) => (
+									<div
+										data-tip={capitalize(module)}
+										key={module}
+										className={clsx(
+											"-md:px-4 tooltip flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
+											module === "reading" && "bg-ielts-reading",
+											module === "listening" && "bg-ielts-listening",
+											module === "writing" && "bg-ielts-writing",
+											module === "speaking" && "bg-ielts-speaking",
+											module === "level" && "bg-ielts-level",
+										)}>
+										{module === "reading" && <BsBook className="h-4 w-4" />}
+										{module === "listening" && <BsHeadphones className="h-4 w-4" />}
+										{module === "writing" && <BsPen className="h-4 w-4" />}
+										{module === "speaking" && <BsMegaphone className="h-4 w-4" />}
+										{module === "level" && <BsClipboard className="h-4 w-4" />}
+										{calculateAverageModuleScore(module) > -1 && (
+											<span className="text-sm">{calculateAverageModuleScore(module).toFixed(1)}</span>
+										)}
+									</div>
+								))}
+						</div>
+					</div>
+					<div className="flex flex-col gap-2">
+						<span className="text-xl font-bold">
+							Results ({assignment?.results.length}/{assignment?.assignees.length})
+						</span>
+						<div>
+							{assignment && assignment?.results.length > 0 && (
+								<div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 xl:gap-6">
+									{assignment.results.map((r) => customContent(r.stats, r.user, r.type))}
+								</div>
+							)}
+							{assignment && assignment?.results.length === 0 && <span className="ml-1 font-semibold">No results yet...</span>}
+						</div>
+					</div>
+
+					<div className="flex gap-4 w-full items-center justify-end">
+						<Button variant="outline" color="purple" className="w-full max-w-[200px]" onClick={copyLink}>
+							Copy Link
+						</Button>
+						{assignment &&
+							(assignment.results.length === assignment.assignees.length || moment().isAfter(moment(assignment.endDate))) && (
+								<Button variant="outline" color="red" className="w-full max-w-[200px]" onClick={deleteAssignment}>
+									Delete
+								</Button>
+							)}
+						{/** if the assignment is not deemed as active yet, display start */}
+						{shouldRenderStart() && (
+							<Button variant="outline" color="green" className="w-full max-w-[200px]" onClick={startAssignment}>
+								Start
+							</Button>
+						)}
+						<Button onClick={() => router.push("/assignments")} className="w-full max-w-[200px]">
+							Close
+						</Button>
+					</div>
+				</div>
+			</Layout>
+		</>
+	);
+}

src/pages/assignments/creator/[id].tsx

@@ -0,0 +1,615 @@
+import Layout from "@/components/High/Layout";
+import Button from "@/components/Low/Button";
+import Checkbox from "@/components/Low/Checkbox";
+import Input from "@/components/Low/Input";
+import ProgressBar from "@/components/Low/ProgressBar";
+import Select from "@/components/Low/Select";
+import Separator from "@/components/Low/Separator";
+import useExams from "@/hooks/useExams";
+import {useListSearch} from "@/hooks/useListSearch";
+import usePagination from "@/hooks/usePagination";
+import {Module} from "@/interfaces";
+import {EntityWithRoles} from "@/interfaces/entity";
+import {InstructorGender, Variant} from "@/interfaces/exam";
+import {Assignment} from "@/interfaces/results";
+import {Group, User} from "@/interfaces/user";
+import {sessionOptions} from "@/lib/session";
+import {mapBy, redirect, serialize} from "@/utils";
+import { requestUser } from "@/utils/api";
+import {getAssignment} from "@/utils/assignments.be";
+import {getEntitiesWithRoles} from "@/utils/entities.be";
+import {getGroups, getGroupsByEntities} from "@/utils/groups.be";
+import {checkAccess, doesEntityAllow, findAllowedEntities} from "@/utils/permissions";
+import {calculateAverageLevel} from "@/utils/score";
+import {getEntitiesUsers, getUsers} from "@/utils/users.be";
+import axios from "axios";
+import clsx from "clsx";
+import {withIronSessionSsr} from "iron-session/next";
+import {capitalize} from "lodash";
+import moment from "moment";
+import Head from "next/head";
+import Link from "next/link";
+import {useRouter} from "next/router";
+import {generate} from "random-words";
+import {useEffect, useMemo, useState} from "react";
+import ReactDatePicker from "react-datepicker";
+import {BsBook, BsCheckCircle, BsChevronLeft, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsXCircle} from "react-icons/bs";
+import {toast} from "react-toastify";
+
+export const getServerSideProps = withIronSessionSsr(async ({req, res, params}) => {
+	const user = await requestUser(req, res)
+	if (!user) return redirect("/login")
+
+	res.setHeader("Cache-Control", "public, s-maxage=10, stale-while-revalidate=59");
+
+	const {id} = params as {id: string};
+	const entityIDS = mapBy(user.entities, "id") || [];
+
+	const assignment = await getAssignment(id);
+	if (!assignment) return redirect("/assignments")
+
+	const entities = await (checkAccess(user, ["developer", "admin"]) ? getEntitiesWithRoles() : getEntitiesWithRoles(entityIDS));
+	const entity = entities.find((e) => e.id === assignment.entity)
+
+	if (!entity) return redirect("/assignments")
+	if (!doesEntityAllow(user, entity, 'edit_assignment')) return redirect("/assignments")
+
+	const allowedEntities = findAllowedEntities(user, entities, 'edit_assignment')
+
+	const users = await (checkAccess(user, ["developer", "admin"]) ? getUsers() : getEntitiesUsers(mapBy(allowedEntities, 'id')));
+	const groups = await (checkAccess(user, ["developer", "admin"]) ? getGroups() : getGroupsByEntities(mapBy(allowedEntities, 'id')));
+
+	return {props: serialize({user, users, entities: allowedEntities, assignment, groups})};
+}, sessionOptions);
+
+interface Props {
+	assignment: Assignment;
+	groups: Group[];
+	user: User;
+	users: User[];
+	entities: EntityWithRoles[];
+}
+
+const SIZE = 9;
+
+export default function AssignmentsPage({assignment, user, users, entities, groups}: Props) {
+	const [selectedModules, setSelectedModules] = useState<Module[]>(assignment.exams.map((e) => e.module));
+	const [assignees, setAssignees] = useState<string[]>(assignment.assignees);
+	const [teachers, setTeachers] = useState<string[]>(assignment.teachers || []);
+	const [entity, setEntity] = useState<string | undefined>(assignment.entity || entities[0]?.id);
+	const [name, setName] = useState(assignment.name);
+	const [isLoading, setIsLoading] = useState(false);
+
+	const [startDate, setStartDate] = useState<Date | null>(moment(assignment.startDate).toDate());
+	const [endDate, setEndDate] = useState<Date | null>(moment(assignment.endDate).toDate());
+
+	const [variant, setVariant] = useState<Variant>("full");
+	const [instructorGender, setInstructorGender] = useState<InstructorGender>(assignment?.instructorGender || "varied");
+
+	const [generateMultiple, setGenerateMultiple] = useState<boolean>(false);
+	const [released, setReleased] = useState<boolean>(assignment.released || false);
+
+	const [autoStart, setAutostart] = useState<boolean>(assignment.autoStart || false);
+	const [autoStartDate, setAutoStartDate] = useState<Date | null>(moment(assignment.autoStartDate).toDate());
+
+	const [useRandomExams, setUseRandomExams] = useState(true);
+	const [examIDs, setExamIDs] = useState<{id: string; module: Module}[]>([]);
+
+	const {exams} = useExams();
+	const router = useRouter();
+
+	const classrooms = useMemo(() => groups.filter((e) => e.entity === entity), [entity, groups]);
+
+	const userStudents = useMemo(() => users.filter((x) => x.type === "student"), [users]);
+	const userTeachers = useMemo(() => users.filter((x) => x.type === "teacher"), [users]);
+
+	const {rows: filteredStudentsRows, renderSearch: renderStudentSearch} = useListSearch([["name"], ["email"]], userStudents);
+	const {rows: filteredTeachersRows, renderSearch: renderTeacherSearch} = useListSearch([["name"], ["email"]], userTeachers);
+
+	const {items: studentRows, renderMinimal: renderStudentPagination} = usePagination(filteredStudentsRows, SIZE);
+	const {items: teacherRows, renderMinimal: renderTeacherPagination} = usePagination(filteredTeachersRows, SIZE);
+
+	useEffect(() => {
+		setExamIDs((prev) => prev.filter((x) => selectedModules.includes(x.module)));
+	}, [selectedModules]);
+
+	useEffect(() => {
+		setAssignees([]);
+		setTeachers([]);
+	}, [entity]);
+
+	const toggleModule = (module: Module) => {
+		const modules = selectedModules.filter((x) => x !== module);
+		setSelectedModules((prev) => (prev.includes(module) ? modules : [...modules, module]));
+	};
+
+	const toggleAssignee = (user: User) => {
+		setAssignees((prev) => (prev.includes(user.id) ? prev.filter((a) => a !== user.id) : [...prev, user.id]));
+	};
+
+	const toggleTeacher = (user: User) => {
+		setTeachers((prev) => (prev.includes(user.id) ? prev.filter((a) => a !== user.id) : [...prev, user.id]));
+	};
+
+	const createAssignment = () => {
+		setIsLoading(true);
+
+		(assignment ? axios.patch : axios.post)(`/api/assignments${assignment.id}`, {
+			assignees,
+			name,
+			startDate,
+			examIDs: !useRandomExams ? examIDs : undefined,
+			endDate,
+			selectedModules,
+			generateMultiple,
+			entity,
+			teachers,
+			variant,
+			instructorGender,
+			released,
+			autoStart,
+			autoStartDate,
+		})
+			.then(() => {
+				toast.success(`The assignment "${name}" has been updated successfully!`);
+				router.push(`/assignments/${assignment.id}`);
+			})
+			.catch((e) => {
+				console.log(e);
+				toast.error("Something went wrong, please try again later!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	const deleteAssignment = () => {
+		if (!confirm(`Are you sure you want to delete the "${assignment.name}" assignment?`)) return;
+		console.log("GOT HERE");
+		setIsLoading(true);
+
+		axios
+			.delete(`/api/assignments/${assignment.id}`)
+			.then(() => {
+				toast.success(`The assignment "${name}" has been deleted successfully!`);
+				router.push("/assignments");
+			})
+			.catch((e) => {
+				console.log(e);
+				toast.error("Something went wrong, please try again later!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	const startAssignment = () => {
+		if (assignment) {
+			setIsLoading(true);
+
+			axios
+				.post(`/api/assignments/${assignment.id}/start`)
+				.then(() => {
+					toast.success(`The assignment "${name}" has been started successfully!`);
+					router.push(`/assignments/${assignment.id}`);
+				})
+				.catch((e) => {
+					console.log(e);
+					toast.error("Something went wrong, please try again later!");
+				})
+				.finally(() => setIsLoading(false));
+		}
+	};
+
+	const copyLink = async () => {
+		const origin = window.location.origin
+		await navigator.clipboard.writeText(`${origin}/exam?assignment=${assignment.id}`)
+		toast.success("The URL to the assignment has been copied to your clipboard!")
+	}
+
+	return (
+		<>
+			<Head>
+				<title>Edit {assignment.name} | EnCoach</title>
+				<meta
+					name="description"
+					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+				/>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<Layout user={user}>
+				<div className="flex flex-col gap-4">
+					<div className="flex items-center gap-2">
+						<Link href="/assignments" className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
+							<BsChevronLeft />
+						</Link>
+						<h2 className="font-bold text-2xl">Edit {assignment.name}</h2>
+					</div>
+					<Separator />
+				</div>
+				<div className="w-full flex flex-col gap-4">
+					<section className="w-full grid -md:grid-cols-1 md:grid-cols-3 place-items-center -md:flex-col -md:items-center -md:gap-12 justify-between gap-8 mt-8 px-8">
+						<div
+							onClick={!selectedModules.includes("level") ? () => toggleModule("reading") : undefined}
+							className={clsx(
+								"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+								selectedModules.includes("reading") ? "border-mti-purple-light" : "border-mti-gray-platinum",
+							)}>
+							<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-reading top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+								<BsBook className="text-white w-7 h-7" />
+							</div>
+							<span className="ml-8 font-semibold">Reading</span>
+							{!selectedModules.includes("reading") && !selectedModules.includes("level") && (
+								<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+							)}
+							{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
+							{selectedModules.includes("reading") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
+						</div>
+						<div
+							onClick={!selectedModules.includes("level") ? () => toggleModule("listening") : undefined}
+							className={clsx(
+								"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+								selectedModules.includes("listening") ? "border-mti-purple-light" : "border-mti-gray-platinum",
+							)}>
+							<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-listening top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+								<BsHeadphones className="text-white w-7 h-7" />
+							</div>
+							<span className="ml-8 font-semibold">Listening</span>
+							{!selectedModules.includes("listening") && !selectedModules.includes("level") && (
+								<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+							)}
+							{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
+							{selectedModules.includes("listening") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
+						</div>
+						<div
+							onClick={
+								(!selectedModules.includes("level") && selectedModules.length === 0) || selectedModules.includes("level")
+									? () => toggleModule("level")
+									: undefined
+							}
+							className={clsx(
+								"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+								selectedModules.includes("level") ? "border-mti-purple-light" : "border-mti-gray-platinum",
+							)}>
+							<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-level top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+								<BsClipboard className="text-white w-7 h-7" />
+							</div>
+							<span className="ml-8 font-semibold">Level</span>
+							{!selectedModules.includes("level") && selectedModules.length === 0 && (
+								<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+							)}
+							{!selectedModules.includes("level") && selectedModules.length > 0 && <BsXCircle className="text-mti-red-light w-8 h-8" />}
+							{selectedModules.includes("level") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
+						</div>
+						<div
+							onClick={!selectedModules.includes("level") ? () => toggleModule("writing") : undefined}
+							className={clsx(
+								"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+								selectedModules.includes("writing") ? "border-mti-purple-light" : "border-mti-gray-platinum",
+							)}>
+							<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-writing top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+								<BsPen className="text-white w-7 h-7" />
+							</div>
+							<span className="ml-8 font-semibold">Writing</span>
+							{!selectedModules.includes("writing") && !selectedModules.includes("level") && (
+								<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+							)}
+							{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
+							{selectedModules.includes("writing") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
+						</div>
+						<div
+							onClick={!selectedModules.includes("level") ? () => toggleModule("speaking") : undefined}
+							className={clsx(
+								"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+								selectedModules.includes("speaking") ? "border-mti-purple-light" : "border-mti-gray-platinum",
+							)}>
+							<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-speaking top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+								<BsMegaphone className="text-white w-7 h-7" />
+							</div>
+							<span className="ml-8 font-semibold">Speaking</span>
+							{!selectedModules.includes("speaking") && !selectedModules.includes("level") && (
+								<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+							)}
+							{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
+							{selectedModules.includes("speaking") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
+						</div>
+					</section>
+
+					<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
+						<Input type="text" name="name" onChange={(e) => setName(e)} defaultValue={name} label="Assignment Name" required />
+						<Select
+							label="Entity"
+							options={entities.map((e) => ({value: e.id, label: e.label}))}
+							onChange={(v) => setEntity(v ? v.value! : undefined)}
+							defaultValue={{value: entities[0]?.id, label: entities[0]?.label}}
+						/>
+					</div>
+
+					<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
+						<div className="flex flex-col gap-2">
+							<label className="font-normal text-base text-mti-gray-dim">Limit Start Date *</label>
+							<ReactDatePicker
+								className={clsx(
+									"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+									"hover:border-mti-purple tooltip z-10",
+									"transition duration-300 ease-in-out",
+								)}
+								popperClassName="!z-20"
+								filterTime={(date) => moment(date).isSameOrAfter(new Date())}
+								dateFormat="dd/MM/yyyy HH:mm"
+								selected={startDate}
+								showTimeSelect
+								onChange={(date) => setStartDate(date)}
+							/>
+						</div>
+						<div className="flex flex-col gap-2">
+							<label className="font-normal text-base text-mti-gray-dim">End Date *</label>
+							<ReactDatePicker
+								className={clsx(
+									"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+									"hover:border-mti-purple tooltip z-10",
+									"transition duration-300 ease-in-out",
+								)}
+								popperClassName="!z-20"
+								filterTime={(date) => moment(date).isAfter(startDate)}
+								dateFormat="dd/MM/yyyy HH:mm"
+								selected={endDate}
+								showTimeSelect
+								onChange={(date) => setEndDate(date)}
+							/>
+						</div>
+						{autoStart && (
+							<div className="flex flex-col gap-2">
+								<label className="font-normal text-base text-mti-gray-dim">Automatic Start Date *</label>
+								<ReactDatePicker
+									className={clsx(
+										"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+										"hover:border-mti-purple tooltip z-10",
+										"transition duration-300 ease-in-out",
+									)}
+									popperClassName="!z-20"
+									filterTime={(date) => moment(date).isSameOrAfter(new Date())}
+									dateFormat="dd/MM/yyyy HH:mm"
+									selected={autoStartDate}
+									showTimeSelect
+									onChange={(date) => setAutoStartDate(date)}
+								/>
+							</div>
+						)}
+					</div>
+
+					{selectedModules.includes("speaking") && (
+						<div className="flex flex-col gap-3 w-full">
+							<label className="font-normal text-base text-mti-gray-dim">Speaking Instructor&apos;s Gender</label>
+							<Select
+								value={{
+									value: instructorGender,
+									label: capitalize(instructorGender),
+								}}
+								onChange={(value) => (value ? setInstructorGender(value.value as InstructorGender) : null)}
+								disabled={!selectedModules.includes("speaking") || !!assignment}
+								options={[
+									{value: "male", label: "Male"},
+									{value: "female", label: "Female"},
+									{value: "varied", label: "Varied"},
+								]}
+							/>
+						</div>
+					)}
+
+					{selectedModules.length > 0 && (
+						<div className="flex flex-col gap-3 w-full">
+							<Checkbox isChecked={useRandomExams} onChange={setUseRandomExams}>
+								Random Exams
+							</Checkbox>
+							{!useRandomExams && (
+								<div className="grid md:grid-cols-2 w-full gap-4">
+									{selectedModules.map((module) => (
+										<div key={module} className="flex flex-col gap-3 w-full">
+											<label className="font-normal text-base text-mti-gray-dim">{capitalize(module)} Exam</label>
+											<Select
+												value={{
+													value: examIDs.find((e) => e.module === module)?.id || null,
+													label: examIDs.find((e) => e.module === module)?.id || "",
+												}}
+												onChange={(value) =>
+													value
+														? setExamIDs((prev) => [
+																...prev.filter((x) => x.module !== module),
+																{id: value.value!, module},
+														  ])
+														: setExamIDs((prev) => prev.filter((x) => x.module !== module))
+												}
+												options={exams
+													.filter((x) => !x.isDiagnostic && x.module === module)
+													.map((x) => ({value: x.id, label: x.id}))}
+											/>
+										</div>
+									))}
+								</div>
+							)}
+						</div>
+					)}
+
+					<section className="w-full flex flex-col gap-4">
+						<span className="font-semibold">Assignees ({assignees.length} selected)</span>
+						<div className="grid grid-cols-5 gap-4">
+							{classrooms.map((g) => (
+								<button
+									key={g.id}
+									onClick={() => {
+										const groupStudentIds = users.filter((u) => g.participants.includes(u.id)).map((u) => u.id);
+										if (groupStudentIds.every((u) => assignees.includes(u))) {
+											setAssignees((prev) => prev.filter((a) => !groupStudentIds.includes(a)));
+										} else {
+											setAssignees((prev) => [...prev.filter((a) => !groupStudentIds.includes(a)), ...groupStudentIds]);
+										}
+									}}
+									className={clsx(
+										"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+										"transition duration-300 ease-in-out",
+										users.filter((u) => g.participants.includes(u.id)).every((u) => assignees.includes(u.id)) &&
+											"!bg-mti-purple-light !text-white",
+									)}>
+									{g.name}
+								</button>
+							))}
+						</div>
+
+						<div className="w-full flex items-center gap-4">
+							{renderStudentSearch()}
+							{renderStudentPagination()}
+						</div>
+
+						<div className="flex flex-wrap -md:justify-center gap-4">
+							{studentRows.map((user) => (
+								<div
+									onClick={() => toggleAssignee(user)}
+									className={clsx(
+										"p-4 flex flex-col gap-2 rounded-xl border cursor-pointer w-72",
+										"transition ease-in-out duration-300",
+										assignees.includes(user.id) ? "border-mti-purple" : "border-mti-gray-platinum",
+									)}
+									key={user.id}>
+									<span className="flex flex-col gap-0 justify-center">
+										<span className="font-semibold">{user.name}</span>
+										<span className="text-sm opacity-80">{user.email}</span>
+									</span>
+									<ProgressBar
+										color="purple"
+										textClassName="!text-mti-black/80"
+										label={`Level ${calculateAverageLevel(user.levels)}`}
+										percentage={(calculateAverageLevel(user.levels) / 9) * 100}
+										className="h-6"
+									/>
+									<span className="text-mti-black/80 text-sm whitespace-pre-wrap mt-2">
+										Groups:{" "}
+										{groups
+											.filter((g) => g.participants.includes(user.id))
+											.map((g) => g.name)
+											.join(", ")}
+									</span>
+								</div>
+							))}
+						</div>
+					</section>
+
+					{user.type !== "teacher" && (
+						<section className="w-full flex flex-col gap-3">
+							<span className="font-semibold">Teachers ({teachers.length} selected)</span>
+							<div className="grid grid-cols-5 gap-4">
+								{classrooms.map((g) => (
+									<button
+										key={g.id}
+										onClick={() => {
+											const groupStudentIds = users.filter((u) => g.participants.includes(u.id)).map((u) => u.id);
+											if (groupStudentIds.every((u) => teachers.includes(u))) {
+												setTeachers((prev) => prev.filter((a) => !groupStudentIds.includes(a)));
+											} else {
+												setTeachers((prev) => [...prev.filter((a) => !groupStudentIds.includes(a)), ...groupStudentIds]);
+											}
+										}}
+										className={clsx(
+											"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+											"transition duration-300 ease-in-out",
+											users.filter((u) => g.participants.includes(u.id)).every((u) => teachers.includes(u.id)) &&
+												"!bg-mti-purple-light !text-white",
+										)}>
+										{g.name}
+									</button>
+								))}
+							</div>
+
+							<div className="w-full flex items-center gap-4">
+								{renderTeacherSearch()}
+								{renderTeacherPagination()}
+							</div>
+
+							<div className="flex flex-wrap -md:justify-center gap-4">
+								{teacherRows.map((user) => (
+									<div
+										onClick={() => toggleTeacher(user)}
+										className={clsx(
+											"p-4 flex flex-col gap-2 rounded-xl border cursor-pointer w-72",
+											"transition ease-in-out duration-300",
+											teachers.includes(user.id) ? "border-mti-purple" : "border-mti-gray-platinum",
+										)}
+										key={user.id}>
+										<span className="flex flex-col gap-0 justify-center">
+											<span className="font-semibold">{user.name}</span>
+											<span className="text-sm opacity-80">{user.email}</span>
+										</span>
+										<span className="text-mti-black/80 text-sm whitespace-pre-wrap mt-2">
+											Groups:{" "}
+											{groups
+												.filter((g) => g.participants.includes(user.id))
+												.map((g) => g.name)
+												.join(", ")}
+										</span>
+									</div>
+								))}
+							</div>
+						</section>
+					)}
+
+					<div className="flex gap-4 w-full items-end">
+						<Checkbox isChecked={variant === "full"} onChange={() => setVariant((prev) => (prev === "full" ? "partial" : "full"))}>
+							Full length exams
+						</Checkbox>
+						<Checkbox isChecked={generateMultiple} onChange={() => setGenerateMultiple((d) => !d)}>
+							Generate different exams
+						</Checkbox>
+						<Checkbox isChecked={released} onChange={() => setReleased((d) => !d)}>
+							Auto release results
+						</Checkbox>
+						<Checkbox isChecked={autoStart} onChange={() => setAutostart((d) => !d)}>
+							Auto start exam
+						</Checkbox>
+					</div>
+					<div className="flex gap-4 w-full justify-end">
+						<Button variant="outline" color="purple" className="w-full max-w-[200px]" onClick={copyLink}>
+							Copy Link
+						</Button>
+						<Button
+							className="w-full max-w-[200px]"
+							variant="outline"
+							onClick={() => router.push("/assignments")}
+							disabled={isLoading}
+							isLoading={isLoading}>
+							Cancel
+						</Button>
+						<Button
+							className="w-full max-w-[200px]"
+							color="green"
+							variant="outline"
+							onClick={startAssignment}
+							disabled={isLoading || moment().isAfter(startDate)}
+							isLoading={isLoading}>
+							Start
+						</Button>
+						<Button
+							className="w-full max-w-[200px]"
+							color="red"
+							variant="outline"
+							onClick={deleteAssignment}
+							disabled={isLoading}
+							isLoading={isLoading}>
+							Delete
+						</Button>
+						<Button
+							disabled={
+								selectedModules.length === 0 ||
+								!name ||
+								!startDate ||
+								!endDate ||
+								assignees.length === 0 ||
+								(!useRandomExams && examIDs.length < selectedModules.length)
+							}
+							className="w-full max-w-[200px]"
+							onClick={createAssignment}
+							isLoading={isLoading}>
+							Update
+						</Button>
+					</div>
+				</div>
+			</Layout>
+		</>
+	);
+}

src/pages/assignments/creator/index.tsx

@@ -0,0 +1,554 @@
+import Layout from "@/components/High/Layout";
+import Button from "@/components/Low/Button";
+import Checkbox from "@/components/Low/Checkbox";
+import Input from "@/components/Low/Input";
+import ProgressBar from "@/components/Low/ProgressBar";
+import Select from "@/components/Low/Select";
+import Separator from "@/components/Low/Separator";
+import useExams from "@/hooks/useExams";
+import {useListSearch} from "@/hooks/useListSearch";
+import usePagination from "@/hooks/usePagination";
+import {Module} from "@/interfaces";
+import {EntityWithRoles, WithEntity} from "@/interfaces/entity";
+import {InstructorGender, Variant} from "@/interfaces/exam";
+import {Assignment} from "@/interfaces/results";
+import {Group, User} from "@/interfaces/user";
+import {sessionOptions} from "@/lib/session";
+import {mapBy, redirect, serialize} from "@/utils";
+import { requestUser } from "@/utils/api";
+import {getEntitiesWithRoles} from "@/utils/entities.be";
+import {getGroups, getGroupsByEntities} from "@/utils/groups.be";
+import {checkAccess, findAllowedEntities} from "@/utils/permissions";
+import {calculateAverageLevel} from "@/utils/score";
+import { isAdmin } from "@/utils/users";
+import {getEntitiesUsers, getUsers} from "@/utils/users.be";
+import axios from "axios";
+import clsx from "clsx";
+import {withIronSessionSsr} from "iron-session/next";
+import {capitalize} from "lodash";
+import moment from "moment";
+import Head from "next/head";
+import Link from "next/link";
+import {useRouter} from "next/router";
+import {generate} from "random-words";
+import {useEffect, useMemo, useState} from "react";
+import ReactDatePicker from "react-datepicker";
+import {BsBook, BsCheckCircle, BsChevronLeft, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsXCircle} from "react-icons/bs";
+import {toast} from "react-toastify";
+
+export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
+	const user = await requestUser(req, res)
+	if (!user) return redirect("/login")
+
+	const entityIDS = mapBy(user.entities, "id") || [];
+	const entities = await (checkAccess(user, ["developer", "admin"]) ? getEntitiesWithRoles() : getEntitiesWithRoles(entityIDS));
+
+	const allowedEntities = findAllowedEntities(user, entities, 'create_assignment')
+	if (allowedEntities.length === 0) return redirect("/assignments")
+
+	const users = await (isAdmin(user) ? getUsers() : getEntitiesUsers(mapBy(allowedEntities, 'id')));
+	const groups = await (isAdmin(user) ? getGroups() : getGroupsByEntities(mapBy(allowedEntities, 'id')));
+
+	return {props: serialize({user, users, entities, groups})};
+}, sessionOptions);
+
+interface Props {
+	assignment: Assignment;
+	groups: WithEntity<Group>[];
+	user: User;
+	users: User[];
+	entities: EntityWithRoles[];
+}
+
+const SIZE = 9;
+
+export default function AssignmentsPage({user, users, groups, entities}: Props) {
+	const [selectedModules, setSelectedModules] = useState<Module[]>([]);
+	const [assignees, setAssignees] = useState<string[]>([]);
+	const [teachers, setTeachers] = useState<string[]>([...(user.type === "teacher" ? [user.id] : [])]);
+	const [entity, setEntity] = useState<string | undefined>(entities[0]?.id);
+	const [name, setName] = useState(
+		generate({
+			minLength: 6,
+			maxLength: 8,
+			min: 2,
+			max: 3,
+			join: " ",
+			formatter: capitalize,
+		}),
+	);
+	const [isLoading, setIsLoading] = useState(false);
+	const [startDate, setStartDate] = useState<Date | null>(moment().add(1, "hour").toDate());
+
+	const [endDate, setEndDate] = useState<Date | null>(moment().hours(23).minutes(59).add(8, "day").toDate());
+	const [variant, setVariant] = useState<Variant>("full");
+	const [instructorGender, setInstructorGender] = useState<InstructorGender>("varied");
+
+	const [generateMultiple, setGenerateMultiple] = useState<boolean>(false);
+	const [released, setReleased] = useState<boolean>(false);
+
+	const [autoStart, setAutostart] = useState<boolean>(false);
+	const [autoStartDate, setAutoStartDate] = useState<Date | null>(new Date());
+
+	const [useRandomExams, setUseRandomExams] = useState(true);
+	const [examIDs, setExamIDs] = useState<{id: string; module: Module}[]>([]);
+
+	const {exams} = useExams();
+	const router = useRouter();
+
+	const classrooms = useMemo(() => groups.filter((e) => e.entity?.id === entity), [entity, groups]);
+	const allowedUsers = useMemo(() => users.filter((u) => mapBy(u.entities, 'id').includes(entity || "")), [users, entity])
+
+	const userStudents = useMemo(() => allowedUsers.filter((x) => x.type === "student"), [allowedUsers]);
+	const userTeachers = useMemo(() => allowedUsers.filter((x) => x.type === "teacher"), [allowedUsers]);
+
+	const {rows: filteredStudentsRows, renderSearch: renderStudentSearch} = useListSearch([["name"], ["email"]], userStudents);
+	const {rows: filteredTeachersRows, renderSearch: renderTeacherSearch} = useListSearch([["name"], ["email"]], userTeachers);
+
+	const {items: studentRows, renderMinimal: renderStudentPagination} = usePagination(filteredStudentsRows, SIZE);
+	const {items: teacherRows, renderMinimal: renderTeacherPagination} = usePagination(filteredTeachersRows, SIZE);
+
+	useEffect(() => {
+		setExamIDs((prev) => prev.filter((x) => selectedModules.includes(x.module)));
+	}, [selectedModules]);
+
+	useEffect(() => {
+		setAssignees([]);
+		setTeachers([]);
+	}, [entity]);
+
+	const toggleModule = (module: Module) => {
+		const modules = selectedModules.filter((x) => x !== module);
+		setSelectedModules((prev) => (prev.includes(module) ? modules : [...modules, module]));
+	};
+
+	const toggleAssignee = (user: User) => {
+		setAssignees((prev) => (prev.includes(user.id) ? prev.filter((a) => a !== user.id) : [...prev, user.id]));
+	};
+
+	const toggleTeacher = (user: User) => {
+		setTeachers((prev) => (prev.includes(user.id) ? prev.filter((a) => a !== user.id) : [...prev, user.id]));
+	};
+
+	const createAssignment = () => {
+		setIsLoading(true);
+
+		axios
+			.post(`/api/assignments`, {
+				assignees,
+				name,
+				startDate,
+				examIDs: !useRandomExams ? examIDs : undefined,
+				endDate,
+				selectedModules,
+				generateMultiple,
+				entity,
+				teachers,
+				variant,
+				instructorGender,
+				released,
+				autoStart,
+				autoStartDate,
+			})
+			.then((result) => {
+				toast.success(`The assignment "${name}" has been created successfully!`);
+				router.push(`/assignments/${result.data.id}`);
+			})
+			.catch((e) => {
+				console.log(e);
+				toast.error("Something went wrong, please try again later!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	return (
+		<>
+			<Head>
+				<title>Create Assignment | EnCoach</title>
+				<meta
+					name="description"
+					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+				/>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<Layout user={user}>
+				<div className="flex flex-col gap-4">
+					<div className="flex items-center gap-2">
+						<Link href="/assignments" className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
+							<BsChevronLeft />
+						</Link>
+						<h2 className="font-bold text-2xl">Create Assignment</h2>
+					</div>
+					<Separator />
+				</div>
+				<div className="w-full flex flex-col gap-4">
+					<section className="w-full grid -md:grid-cols-1 md:grid-cols-3 place-items-center -md:flex-col -md:items-center -md:gap-12 justify-between gap-8 mt-8 px-8">
+						<div
+							onClick={!selectedModules.includes("level") ? () => toggleModule("reading") : undefined}
+							className={clsx(
+								"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+								selectedModules.includes("reading") ? "border-mti-purple-light" : "border-mti-gray-platinum",
+							)}>
+							<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-reading top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+								<BsBook className="text-white w-7 h-7" />
+							</div>
+							<span className="ml-8 font-semibold">Reading</span>
+							{!selectedModules.includes("reading") && !selectedModules.includes("level") && (
+								<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+							)}
+							{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
+							{selectedModules.includes("reading") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
+						</div>
+						<div
+							onClick={!selectedModules.includes("level") ? () => toggleModule("listening") : undefined}
+							className={clsx(
+								"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+								selectedModules.includes("listening") ? "border-mti-purple-light" : "border-mti-gray-platinum",
+							)}>
+							<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-listening top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+								<BsHeadphones className="text-white w-7 h-7" />
+							</div>
+							<span className="ml-8 font-semibold">Listening</span>
+							{!selectedModules.includes("listening") && !selectedModules.includes("level") && (
+								<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+							)}
+							{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
+							{selectedModules.includes("listening") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
+						</div>
+						<div
+							onClick={
+								(!selectedModules.includes("level") && selectedModules.length === 0) || selectedModules.includes("level")
+									? () => toggleModule("level")
+									: undefined
+							}
+							className={clsx(
+								"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+								selectedModules.includes("level") ? "border-mti-purple-light" : "border-mti-gray-platinum",
+							)}>
+							<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-level top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+								<BsClipboard className="text-white w-7 h-7" />
+							</div>
+							<span className="ml-8 font-semibold">Level</span>
+							{!selectedModules.includes("level") && selectedModules.length === 0 && (
+								<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+							)}
+							{!selectedModules.includes("level") && selectedModules.length > 0 && <BsXCircle className="text-mti-red-light w-8 h-8" />}
+							{selectedModules.includes("level") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
+						</div>
+						<div
+							onClick={!selectedModules.includes("level") ? () => toggleModule("writing") : undefined}
+							className={clsx(
+								"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+								selectedModules.includes("writing") ? "border-mti-purple-light" : "border-mti-gray-platinum",
+							)}>
+							<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-writing top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+								<BsPen className="text-white w-7 h-7" />
+							</div>
+							<span className="ml-8 font-semibold">Writing</span>
+							{!selectedModules.includes("writing") && !selectedModules.includes("level") && (
+								<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+							)}
+							{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
+							{selectedModules.includes("writing") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
+						</div>
+						<div
+							onClick={!selectedModules.includes("level") ? () => toggleModule("speaking") : undefined}
+							className={clsx(
+								"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+								selectedModules.includes("speaking") ? "border-mti-purple-light" : "border-mti-gray-platinum",
+							)}>
+							<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-speaking top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+								<BsMegaphone className="text-white w-7 h-7" />
+							</div>
+							<span className="ml-8 font-semibold">Speaking</span>
+							{!selectedModules.includes("speaking") && !selectedModules.includes("level") && (
+								<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+							)}
+							{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
+							{selectedModules.includes("speaking") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
+						</div>
+					</section>
+
+					<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
+						<Input type="text" name="name" onChange={(e) => setName(e)} defaultValue={name} label="Assignment Name" required />
+						<Select
+							label="Entity"
+							options={entities.map((e) => ({value: e.id, label: e.label}))}
+							onChange={(v) => setEntity(v ? v.value! : undefined)}
+							defaultValue={{value: entities[0]?.id, label: entities[0]?.label}}
+						/>
+					</div>
+
+					<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
+						<div className="flex flex-col gap-2">
+							<label className="font-normal text-base text-mti-gray-dim">Limit Start Date *</label>
+							<ReactDatePicker
+								className={clsx(
+									"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+									"hover:border-mti-purple tooltip z-10",
+									"transition duration-300 ease-in-out",
+								)}
+								popperClassName="!z-20"
+								filterTime={(date) => moment(date).isSameOrAfter(new Date())}
+								dateFormat="dd/MM/yyyy HH:mm"
+								selected={startDate}
+								showTimeSelect
+								onChange={(date) => setStartDate(date)}
+							/>
+						</div>
+						<div className="flex flex-col gap-2">
+							<label className="font-normal text-base text-mti-gray-dim">End Date *</label>
+							<ReactDatePicker
+								className={clsx(
+									"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+									"hover:border-mti-purple tooltip z-10",
+									"transition duration-300 ease-in-out",
+								)}
+								popperClassName="!z-20"
+								filterTime={(date) => moment(date).isAfter(startDate)}
+								dateFormat="dd/MM/yyyy HH:mm"
+								selected={endDate}
+								showTimeSelect
+								onChange={(date) => setEndDate(date)}
+							/>
+						</div>
+						{autoStart && (
+							<div className="flex flex-col gap-2">
+								<label className="font-normal text-base text-mti-gray-dim">Automatic Start Date *</label>
+								<ReactDatePicker
+									className={clsx(
+										"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+										"hover:border-mti-purple tooltip z-10",
+										"transition duration-300 ease-in-out",
+									)}
+									popperClassName="!z-20"
+									filterTime={(date) => moment(date).isSameOrAfter(new Date())}
+									dateFormat="dd/MM/yyyy HH:mm"
+									selected={autoStartDate}
+									showTimeSelect
+									onChange={(date) => setAutoStartDate(date)}
+								/>
+							</div>
+						)}
+					</div>
+
+					{selectedModules.includes("speaking") && (
+						<div className="flex flex-col gap-3 w-full">
+							<label className="font-normal text-base text-mti-gray-dim">Speaking Instructor&apos;s Gender</label>
+							<Select
+								value={{
+									value: instructorGender,
+									label: capitalize(instructorGender),
+								}}
+								onChange={(value) => (value ? setInstructorGender(value.value as InstructorGender) : null)}
+								disabled={!selectedModules.includes("speaking")}
+								options={[
+									{value: "male", label: "Male"},
+									{value: "female", label: "Female"},
+									{value: "varied", label: "Varied"},
+								]}
+							/>
+						</div>
+					)}
+
+					{selectedModules.length > 0 && (
+						<div className="flex flex-col gap-3 w-full">
+							<Checkbox isChecked={useRandomExams} onChange={setUseRandomExams}>
+								Random Exams
+							</Checkbox>
+							{!useRandomExams && (
+								<div className="grid md:grid-cols-2 w-full gap-4">
+									{selectedModules.map((module) => (
+										<div key={module} className="flex flex-col gap-3 w-full">
+											<label className="font-normal text-base text-mti-gray-dim">{capitalize(module)} Exam</label>
+											<Select
+												value={{
+													value: examIDs.find((e) => e.module === module)?.id || null,
+													label: examIDs.find((e) => e.module === module)?.id || "",
+												}}
+												onChange={(value) =>
+													value
+														? setExamIDs((prev) => [
+																...prev.filter((x) => x.module !== module),
+																{id: value.value!, module},
+														  ])
+														: setExamIDs((prev) => prev.filter((x) => x.module !== module))
+												}
+												options={exams
+													.filter((x) => !x.isDiagnostic && x.module === module)
+													.map((x) => ({value: x.id, label: x.id}))}
+											/>
+										</div>
+									))}
+								</div>
+							)}
+						</div>
+					)}
+
+					<section className="w-full flex flex-col gap-4">
+						<span className="font-semibold">Assignees ({assignees.length} selected)</span>
+						<div className="grid grid-cols-5 gap-4">
+							{classrooms.map((g) => (
+								<button
+									key={g.id}
+									onClick={() => {
+										const groupStudentIds = users.filter((u) => g.participants.includes(u.id)).map((u) => u.id);
+										if (groupStudentIds.every((u) => assignees.includes(u))) {
+											setAssignees((prev) => prev.filter((a) => !groupStudentIds.includes(a)));
+										} else {
+											setAssignees((prev) => [...prev.filter((a) => !groupStudentIds.includes(a)), ...groupStudentIds]);
+										}
+									}}
+									className={clsx(
+										"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+										"transition duration-300 ease-in-out",
+										users.filter((u) => g.participants.includes(u.id)).every((u) => assignees.includes(u.id)) &&
+											"!bg-mti-purple-light !text-white",
+									)}>
+									{g.name}
+								</button>
+							))}
+						</div>
+
+						<div className="w-full flex items-center gap-4">
+							{renderStudentSearch()}
+							{renderStudentPagination()}
+						</div>
+
+						<div className="flex flex-wrap -md:justify-center gap-4">
+							{studentRows.map((user) => (
+								<div
+									onClick={() => toggleAssignee(user)}
+									className={clsx(
+										"p-4 flex flex-col gap-2 rounded-xl border cursor-pointer w-72",
+										"transition ease-in-out duration-300",
+										assignees.includes(user.id) ? "border-mti-purple" : "border-mti-gray-platinum",
+									)}
+									key={user.id}>
+									<span className="flex flex-col gap-0 justify-center">
+										<span className="font-semibold">{user.name}</span>
+										<span className="text-sm opacity-80">{user.email}</span>
+									</span>
+									<ProgressBar
+										color="purple"
+										textClassName="!text-mti-black/80"
+										label={`Level ${calculateAverageLevel(user.levels)}`}
+										percentage={(calculateAverageLevel(user.levels) / 9) * 100}
+										className="h-6"
+									/>
+									<span className="text-mti-black/80 text-sm whitespace-pre-wrap mt-2">
+										Groups:{" "}
+										{groups
+											.filter((g) => g.participants.includes(user.id))
+											.map((g) => g.name)
+											.join(", ")}
+									</span>
+								</div>
+							))}
+						</div>
+					</section>
+
+					{user.type !== "teacher" && (
+						<section className="w-full flex flex-col gap-3">
+							<span className="font-semibold">Teachers ({teachers.length} selected)</span>
+							<div className="grid grid-cols-5 gap-4">
+								{classrooms.map((g) => (
+									<button
+										key={g.id}
+										onClick={() => {
+											const groupStudentIds = users.filter((u) => g.participants.includes(u.id)).map((u) => u.id);
+											if (groupStudentIds.every((u) => teachers.includes(u))) {
+												setTeachers((prev) => prev.filter((a) => !groupStudentIds.includes(a)));
+											} else {
+												setTeachers((prev) => [...prev.filter((a) => !groupStudentIds.includes(a)), ...groupStudentIds]);
+											}
+										}}
+										className={clsx(
+											"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+											"transition duration-300 ease-in-out",
+											users.filter((u) => g.participants.includes(u.id)).every((u) => teachers.includes(u.id)) &&
+												"!bg-mti-purple-light !text-white",
+										)}>
+										{g.name}
+									</button>
+								))}
+							</div>
+
+							<div className="w-full flex items-center gap-4">
+								{renderTeacherSearch()}
+								{renderTeacherPagination()}
+							</div>
+
+							<div className="flex flex-wrap -md:justify-center gap-4">
+								{teacherRows.map((user) => (
+									<div
+										onClick={() => toggleTeacher(user)}
+										className={clsx(
+											"p-4 flex flex-col gap-2 rounded-xl border cursor-pointer w-72",
+											"transition ease-in-out duration-300",
+											teachers.includes(user.id) ? "border-mti-purple" : "border-mti-gray-platinum",
+										)}
+										key={user.id}>
+										<span className="flex flex-col gap-0 justify-center">
+											<span className="font-semibold">{user.name}</span>
+											<span className="text-sm opacity-80">{user.email}</span>
+										</span>
+										<span className="text-mti-black/80 text-sm whitespace-pre-wrap mt-2">
+											Groups:{" "}
+											{groups
+												.filter((g) => g.participants.includes(user.id))
+												.map((g) => g.name)
+												.join(", ")}
+										</span>
+									</div>
+								))}
+							</div>
+						</section>
+					)}
+
+					<div className="flex gap-4 w-full items-end">
+						<Checkbox isChecked={variant === "full"} onChange={() => setVariant((prev) => (prev === "full" ? "partial" : "full"))}>
+							Full length exams
+						</Checkbox>
+						<Checkbox isChecked={generateMultiple} onChange={() => setGenerateMultiple((d) => !d)}>
+							Generate different exams
+						</Checkbox>
+						<Checkbox isChecked={released} onChange={() => setReleased((d) => !d)}>
+							Auto release results
+						</Checkbox>
+						<Checkbox isChecked={autoStart} onChange={() => setAutostart((d) => !d)}>
+							Auto start exam
+						</Checkbox>
+					</div>
+					<div className="flex gap-4 w-full justify-end">
+						<Button
+							className="w-full max-w-[200px]"
+							variant="outline"
+							onClick={() => router.push("/assignments")}
+							disabled={isLoading}
+							isLoading={isLoading}>
+							Cancel
+						</Button>
+
+						<Button
+							disabled={
+								selectedModules.length === 0 ||
+								!name ||
+								!startDate ||
+								!endDate ||
+								!entity ||
+								assignees.length === 0 ||
+								(!useRandomExams && examIDs.length < selectedModules.length)
+							}
+							className="w-full max-w-[200px]"
+							onClick={createAssignment}
+							isLoading={isLoading}>
+							Create
+						</Button>
+					</div>
+				</div>
+			</Layout>
+		</>
+	);
+}

src/pages/assignments/index.tsx

@@ -0,0 +1,234 @@
+import Layout from "@/components/High/Layout";
+import Separator from "@/components/Low/Separator";
+import AssignmentCard from "@/dashboards/AssignmentCard";
+import AssignmentView from "@/dashboards/AssignmentView";
+import { useAllowedEntities } from "@/hooks/useEntityPermissions";
+import {useListSearch} from "@/hooks/useListSearch";
+import usePagination from "@/hooks/usePagination";
+import { EntityWithRoles } from "@/interfaces/entity";
+import {Assignment} from "@/interfaces/results";
+import {CorporateUser, Group, User} from "@/interfaces/user";
+import {sessionOptions} from "@/lib/session";
+import {getUserCompanyName} from "@/resources/user";
+import {findBy, mapBy, redirect, serialize} from "@/utils";
+import { requestUser } from "@/utils/api";
+import {
+	activeAssignmentFilter,
+	archivedAssignmentFilter,
+	futureAssignmentFilter,
+	pastAssignmentFilter,
+	startHasExpiredAssignmentFilter,
+} from "@/utils/assignments";
+import {getAssignments, getEntitiesAssignments} from "@/utils/assignments.be";
+import {getEntitiesWithRoles} from "@/utils/entities.be";
+import {getGroups, getGroupsByEntities} from "@/utils/groups.be";
+import {checkAccess, findAllowedEntities} from "@/utils/permissions";
+import {getEntitiesUsers, getUsers} from "@/utils/users.be";
+import {withIronSessionSsr} from "iron-session/next";
+import {groupBy} from "lodash";
+import Head from "next/head";
+import Link from "next/link";
+import {useRouter} from "next/router";
+import {useMemo, useState} from "react";
+import {BsChevronLeft, BsPlus} from "react-icons/bs";
+
+export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
+	const user = await requestUser(req, res)
+	if (!user) return redirect("/login")
+
+	if (!checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"]))
+		return redirect("/")
+
+	const entityIDS = mapBy(user.entities, "id") || [];
+	const entities = await (checkAccess(user, ["developer", "admin"]) ? getEntitiesWithRoles() : getEntitiesWithRoles(entityIDS));
+
+	const allowedEntities = findAllowedEntities(user, entities, "view_assignments")
+
+	const users =
+		await (checkAccess(user, ["developer", "admin"]) ? getUsers() : getEntitiesUsers(mapBy(allowedEntities, 'id')));
+
+	const assignments =
+		await (checkAccess(user, ["developer", "admin"]) ? getAssignments() : getEntitiesAssignments(mapBy(allowedEntities, 'id')));
+
+	const groups =
+		await (checkAccess(user, ["developer", "admin"]) ? getGroups() : getGroupsByEntities(mapBy(allowedEntities, 'id')));
+
+	return {props: serialize({user, users, entities: allowedEntities, assignments, groups})};
+}, sessionOptions);
+
+const SEARCH_FIELDS = [["name"]];
+
+interface Props {
+	assignments: Assignment[];
+	corporateAssignments?: ({corporate?: CorporateUser} & Assignment)[];
+	entities: EntityWithRoles[]
+	groups: Group[];
+	user: User;
+	users: User[];
+}
+
+export default function AssignmentsPage({assignments, corporateAssignments, entities, user, users, groups}: Props) {
+	const entitiesAllowCreate = useAllowedEntities(user, entities, 'create_assignment')
+	const entitiesAllowEdit = useAllowedEntities(user, entities, 'edit_assignment')
+	const entitiesAllowArchive = useAllowedEntities(user, entities, 'archive_assignment')
+
+	const activeAssignments = useMemo(() => assignments.filter(activeAssignmentFilter), [assignments]);
+	const plannedAssignments = useMemo(() => assignments.filter(futureAssignmentFilter), [assignments]);
+	const pastAssignments = useMemo(() => assignments.filter(pastAssignmentFilter), [assignments]);
+	const startExpiredAssignments = useMemo(() => assignments.filter(startHasExpiredAssignmentFilter), [assignments]);
+	const archivedAssignments = useMemo(() => assignments.filter(archivedAssignmentFilter), [assignments]);
+
+	const router = useRouter();
+
+	const {rows: activeRows, renderSearch: renderActive} = useListSearch(SEARCH_FIELDS, activeAssignments);
+	const {rows: plannedRows, renderSearch: renderPlanned} = useListSearch(SEARCH_FIELDS, plannedAssignments);
+	const {rows: pastRows, renderSearch: renderPast} = useListSearch(SEARCH_FIELDS, pastAssignments);
+	const {rows: expiredRows, renderSearch: renderExpired} = useListSearch(SEARCH_FIELDS, startExpiredAssignments);
+	const {rows: archivedRows, renderSearch: renderArchived} = useListSearch(SEARCH_FIELDS, archivedAssignments);
+
+	const {items: activeItems, renderMinimal: paginationActive} = usePagination(activeRows, 16);
+	const {items: plannedItems, renderMinimal: paginationPlanned} = usePagination(plannedRows, 16);
+	const {items: pastItems, renderMinimal: paginationPast} = usePagination(pastRows, 16);
+	const {items: expiredItems, renderMinimal: paginationExpired} = usePagination(expiredRows, 16);
+	const {items: archivedItems, renderMinimal: paginationArchived} = usePagination(archivedRows, 16);
+
+	return (
+		<>
+			<Head>
+				<title>Assignments | EnCoach</title>
+				<meta
+					name="description"
+					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+				/>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<Layout user={user}>
+				<div className="flex flex-col gap-4">
+					<div className="flex items-center gap-2">
+						<Link href="/dashboard" className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
+							<BsChevronLeft />
+						</Link>
+						<h2 className="font-bold text-2xl">Assignments</h2>
+					</div>
+					<Separator />
+				</div>
+				<div className="flex flex-col gap-2">
+					<span className="text-lg font-bold">Active Assignments Status</span>
+					<div className="flex items-center gap-4">
+						<span>
+							<b>Total:</b> {activeAssignments.reduce((acc, curr) => acc + curr.results.length, 0)}/
+							{activeAssignments.reduce((acc, curr) => curr.exams.length + acc, 0)}
+						</span>
+					</div>
+				</div>
+
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Active Assignments ({activeAssignments.length})</h2>
+					<div className="w-full flex items-center gap-4">
+						{renderActive()}
+						{paginationActive()}
+					</div>
+					<div className="flex flex-wrap gap-2">
+						{activeItems.map((a) => (
+							<AssignmentCard {...a} entityObj={findBy(entities, 'id', a.entity)} users={users} onClick={() => router.push(`/assignments/${a.id}`)} key={a.id} />
+						))}
+					</div>
+				</section>
+
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Planned Assignments ({plannedAssignments.length})</h2>
+					<div className="w-full flex items-center gap-4">
+						{renderPlanned()}
+						{paginationPlanned()}
+					</div>
+					<div className="flex flex-wrap gap-2">
+						<Link
+							href={entitiesAllowCreate.length > 0 ? "/assignments/creator" : ""}
+							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>
+						</Link>
+						{plannedItems.map((a) => (
+							<AssignmentCard
+								{...a}
+								users={users}
+								entityObj={findBy(entities, 'id', a.entity)}
+								onClick={
+									mapBy(entitiesAllowEdit, 'id').includes(a.entity || "")
+									? () => router.push(`/assignments/creator/${a.id}`)
+									: () => router.push(`/assignments/${a.id}`)
+								}
+								key={a.id}
+							/>
+						))}
+					</div>
+				</section>
+
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Past Assignments ({pastAssignments.length})</h2>
+					<div className="w-full flex items-center gap-4">
+						{renderPast()}
+						{paginationPast()}
+					</div>
+					<div className="flex flex-wrap gap-2">
+						{pastItems.map((a) => (
+							<AssignmentCard
+								{...a}
+								users={users}
+								entityObj={findBy(entities, 'id', a.entity)}
+								onClick={() => router.push(`/assignments/${a.id}`)}
+								key={a.id}
+								allowDownload
+								allowArchive={mapBy(entitiesAllowArchive, 'id').includes(a.entity || "")}
+								allowExcelDownload
+							/>
+						))}
+					</div>
+				</section>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Assignments start expired ({startExpiredAssignments.length})</h2>
+					<div className="w-full flex items-center gap-4">
+						{renderExpired()}
+						{paginationExpired()}
+					</div>
+					<div className="flex flex-wrap gap-2">
+						{expiredItems.map((a) => (
+							<AssignmentCard
+								{...a}
+								users={users}
+								entityObj={findBy(entities, 'id', a.entity)}
+								onClick={() => router.push(`/assignments/${a.id}`)}
+								key={a.id}
+								allowDownload
+								allowArchive={mapBy(entitiesAllowArchive, 'id').includes(a.entity || "")}
+								allowExcelDownload
+							/>
+						))}
+					</div>
+				</section>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Archived Assignments ({archivedAssignments.length})</h2>
+					<div className="w-full flex items-center gap-4">
+						{renderArchived()}
+						{paginationArchived()}
+					</div>
+					<div className="flex flex-wrap gap-2">
+						{archivedItems.map((a) => (
+							<AssignmentCard
+								{...a}
+								users={users}
+								onClick={() => router.push(`/assignments/${a.id}`)}
+								key={a.id}
+								entityObj={findBy(entities, 'id', a.entity)}
+								allowDownload
+								allowUnarchive
+								allowExcelDownload
+							/>
+						))}
+					</div>
+				</section>
+			</Layout>
+		</>
+	);
+}

src/pages/classrooms/[id].tsx

@@ -0,0 +1,346 @@
+/* eslint-disable @next/next/no-img-element */
+import Layout from "@/components/High/Layout";
+import Tooltip from "@/components/Low/Tooltip";
+import { useEntityPermission } from "@/hooks/useEntityPermissions";
+import {useListSearch} from "@/hooks/useListSearch";
+import usePagination from "@/hooks/usePagination";
+import { EntityWithRoles } from "@/interfaces/entity";
+import {GroupWithUsers, User} from "@/interfaces/user";
+import {sessionOptions} from "@/lib/session";
+import {USER_TYPE_LABELS} from "@/resources/user";
+import { filterBy, mapBy, redirect, serialize } from "@/utils";
+import { requestUser } from "@/utils/api";
+import { getEntitiesWithRoles, getEntityWithRoles } from "@/utils/entities.be";
+import {convertToUsers, getGroup} from "@/utils/groups.be";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import {checkAccess, doesEntityAllow, findAllowedEntities, getTypesOfUser} from "@/utils/permissions";
+import {getUserName} from "@/utils/users";
+import {getEntityUsers, getLinkedUsers, getSpecificUsers} from "@/utils/users.be";
+import axios from "axios";
+import clsx from "clsx";
+import {withIronSessionSsr} from "iron-session/next";
+import { capitalize } from "lodash";
+import moment from "moment";
+import Head from "next/head";
+import Link from "next/link";
+import {useRouter} from "next/router";
+import {Divider} from "primereact/divider";
+import {useEffect, useMemo, useState} from "react";
+import {BsBuilding, BsChevronLeft, BsClockFill, BsEnvelopeFill, BsFillPersonVcardFill, BsPlus, BsStopwatchFill, BsTag, BsTrash, BsX} from "react-icons/bs";
+import {toast, ToastContainer} from "react-toastify";
+
+export const getServerSideProps = withIronSessionSsr(async ({req, res, params}) => {
+	const user = await requestUser(req, res)
+	if (!user) return redirect("/login")
+
+	if (shouldRedirectHome(user)) return redirect("/")
+
+	const {id} = params as {id: string};
+
+	const group = await getGroup(id);
+	if (!group || !group.entity) return redirect("/classrooms")
+
+	const entity = await getEntityWithRoles(group.entity)
+	if (!entity) return redirect("/classrooms")
+
+	const canView = doesEntityAllow(user, entity, "view_classrooms")
+	if (!canView) return redirect("/")
+
+	const linkedUsers = await getEntityUsers(entity.id)
+	const users = await getSpecificUsers([...group.participants, group.admin]);
+	const groupWithUser = convertToUsers(group, users);
+
+	return {
+		props: serialize({user, group: groupWithUser, users: linkedUsers, entity}),
+	};
+}, sessionOptions);
+
+interface Props {
+	user: User;
+	group: GroupWithUsers;
+	users: User[];
+	entity: EntityWithRoles
+}
+
+export default function Home({user, group, users, entity}: Props) {
+	const [isAdding, setIsAdding] = useState(false);
+	const [isLoading, setIsLoading] = useState(false);
+	const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
+
+	const canAddParticipants = useEntityPermission(user, entity, "add_to_classroom")
+	const canRemoveParticipants = useEntityPermission(user, entity, "remove_from_classroom")
+	const canRenameClassroom = useEntityPermission(user, entity, "rename_classrooms")
+	const canDeleteClassroom = useEntityPermission(user, entity, "delete_classroom")
+
+	const nonParticipantUsers = useMemo(
+		() => users.filter((x) => ![...group.participants.map((g) => g.id), group.admin.id, user.id].includes(x.id)),
+		[users, group.participants, group.admin.id, user.id],
+	);
+
+	const {rows, renderSearch} = useListSearch<User>(
+		[["name"], ["corporateInformation", "companyInformation", "name"]],
+		isAdding ? nonParticipantUsers : group.participants,
+	);
+	const {items, renderMinimal} = usePagination<User>(rows, 20);
+
+	const router = useRouter();
+
+	const toggleUser = (u: User) => setSelectedUsers((prev) => (prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]));
+
+	const removeParticipants = () => {
+		if (selectedUsers.length === 0) return;
+		if (!canRemoveParticipants) return;
+		if (!confirm(`Are you sure you want to remove ${selectedUsers.length} participant${selectedUsers.length === 1 ? "" : "s"} from this group?`))
+			return;
+
+		setIsLoading(true);
+
+		axios
+			.patch(`/api/groups/${group.id}`, {participants: group.participants.map((x) => x.id).filter((x) => !selectedUsers.includes(x))})
+			.then(() => {
+				toast.success("The group has been updated successfully!");
+				router.replace(router.asPath);
+			})
+			.catch((e) => {
+				console.error(e);
+				toast.error("Something went wrong!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	const addParticipants = () => {
+		if (selectedUsers.length === 0) return;
+		if (!canAddParticipants || !isAdding) return;
+		if (!confirm(`Are you sure you want to add ${selectedUsers.length} participant${selectedUsers.length === 1 ? "" : "s"} to this group?`))
+			return;
+
+		setIsLoading(true);
+
+		axios
+			.patch(`/api/groups/${group.id}`, {participants: [...group.participants.map((x) => x.id), ...selectedUsers]})
+			.then(() => {
+				toast.success("The group has been updated successfully!");
+				router.replace(router.asPath);
+			})
+			.catch((e) => {
+				console.error(e);
+				toast.error("Something went wrong!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	const renameGroup = () => {
+		if (!canRenameClassroom) return;
+
+		const name = prompt("Rename this classroom:", group.name);
+		if (!name) return;
+
+		setIsLoading(true);
+		axios
+			.patch(`/api/groups/${group.id}`, {name})
+			.then(() => {
+				toast.success("The classroom has been updated successfully!");
+				router.replace(router.asPath);
+			})
+			.catch((e) => {
+				console.error(e);
+				toast.error("Something went wrong!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	const deleteGroup = () => {
+		if (!canDeleteClassroom) return;
+		if (!confirm("Are you sure you want to delete this classroom?")) return;
+
+		setIsLoading(true);
+
+		axios
+			.delete(`/api/groups/${group.id}`)
+			.then(() => {
+				toast.success("This classroom has been successfully deleted!");
+				router.replace("/classrooms");
+			})
+			.catch((e) => {
+				console.error(e);
+				toast.error("Something went wrong!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	useEffect(() => setSelectedUsers([]), [isAdding]);
+
+	return (
+		<>
+			<Head>
+				<title>{group.name} | EnCoach</title>
+				<meta
+					name="description"
+					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+				/>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<ToastContainer />
+			{user && (
+				<Layout user={user}>
+					<section className="flex flex-col gap-0">
+						<div className="flex items-center justify-between">
+							<div className="flex flex-col gap-3">
+									<div className="flex items-center gap-2">
+										<Link
+											href="/classrooms"
+											className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
+											<BsChevronLeft />
+										</Link>
+										<h2 className="font-bold text-2xl">{group.name}</h2>
+									</div>
+
+								{!isAdding && (
+									<div className="flex items-center gap-2">
+										<button
+											onClick={renameGroup}
+											disabled={isLoading || !canRenameClassroom}
+											className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+											<BsTag />
+											<span className="text-xs">Rename Classroom</span>
+										</button>
+										<button
+											onClick={deleteGroup}
+											disabled={isLoading || !canDeleteClassroom}
+											className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+											<BsTrash />
+											<span className="text-xs">Delete Classroom</span>
+										</button>
+									</div>
+								)}
+							</div>
+							<div className="flex flex-col gap-2">
+							<span className="flex items-center gap-2">
+								<BsBuilding className="text-xl" /> {entity.label}
+							</span>
+								<span className="flex items-center gap-2">
+									<BsFillPersonVcardFill className="text-xl" /> {getUserName(group.admin)}
+								</span>
+							</div>
+						</div>
+						<Divider />
+						<div className="flex items-center justify-between mb-4">
+							<span className="font-semibold text-xl">Participants</span>
+							{!isAdding && (
+								<div className="flex items-center gap-2">
+									<button
+										onClick={() => setIsAdding(true)}
+										disabled={isLoading || !canAddParticipants}
+										className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+										<BsPlus />
+										<span className="text-xs">Add Participants</span>
+									</button>
+									<button
+										onClick={removeParticipants}
+										disabled={selectedUsers.length === 0 || isLoading || !canRemoveParticipants}
+										className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+										<BsTrash />
+										<span className="text-xs">Remove Participants</span>
+									</button>
+								</div>
+							)}
+							{isAdding && (
+								<div className="flex items-center gap-2">
+									<button
+										onClick={() => setIsAdding(false)}
+										disabled={isLoading}
+										className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-rose bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+										<BsX />
+										<span className="text-xs">Discard Selection</span>
+									</button>
+									<button
+										onClick={addParticipants}
+										disabled={selectedUsers.length === 0 || isLoading || !canAddParticipants}
+										className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+										<BsPlus />
+										<span className="text-xs">Add Participants</span>
+									</button>
+								</div>
+							)}
+						</div>
+						<div className="w-full flex items-center gap-4">
+							{renderSearch()}
+							{renderMinimal()}
+						</div>
+						<div className="flex items-center gap-2 mt-4">
+							{['student', 'teacher', 'corporate'].map((type) => (
+								<button
+									key={type}
+									onClick={() => {
+										const typeUsers = mapBy(filterBy(isAdding ? nonParticipantUsers : group.participants, 'type', type), 'id')
+										if (typeUsers.every((u) => selectedUsers.includes(u))) {
+											setSelectedUsers((prev) => prev.filter((a) => !typeUsers.includes(a)));
+										} else {
+											setSelectedUsers((prev) => [...prev.filter((a) => !typeUsers.includes(a)), ...typeUsers]);
+										}
+									}}
+									disabled={filterBy(isAdding ? nonParticipantUsers : group.participants, 'type', type).length === 0}
+									className={clsx(
+										"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+										"transition duration-300 ease-in-out",
+										"disabled:grayscale disabled:hover:bg-mti-purple-ultralight disabled:hover:text-mti-purple disabled:cursor-not-allowed",
+										filterBy(isAdding ? nonParticipantUsers : group.participants, 'type', type).length > 0 &&
+										filterBy(isAdding ? nonParticipantUsers : group.participants, 'type', type).every((u) => selectedUsers.includes(u.id)) &&
+										"!bg-mti-purple-light !text-white",
+									)}>
+									{capitalize(type)}
+								</button>
+							))}
+						</div>
+					</section>
+
+					<section className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+						{items.map((u) => (
+							<button
+								onClick={() => toggleUser(u)}
+								disabled={isAdding ? !canAddParticipants : !canRemoveParticipants}
+								key={u.id}
+								className={clsx(
+									"p-4 pr-6 h-48 relative border rounded-xl flex flex-col gap-3 justify-between text-left cursor-pointer",
+									"hover:border-mti-purple transition ease-in-out duration-300",
+									selectedUsers.includes(u.id) && "border-mti-purple",
+								)}>
+								<div className="flex items-center gap-2">
+									<div className="min-w-[3rem] min-h-[3rem] w-12 h-12 border flex items-center justify-center overflow-hidden rounded-full">
+										<img src={u.profilePicture} alt={u.name} />
+									</div>
+									<div className="flex flex-col">
+										<span className="font-semibold">{getUserName(u)}</span>
+										<span className="opacity-80 text-sm">{USER_TYPE_LABELS[u.type]}</span>
+									</div>
+								</div>
+
+								<div className="flex flex-col gap-1">
+									<span className="flex items-center gap-2">
+										<Tooltip tooltip="E-mail address">
+											<BsEnvelopeFill />
+										</Tooltip>
+										{u.email}
+									</span>
+									<span className="flex items-center gap-2">
+										<Tooltip tooltip="Expiration Date">
+											<BsStopwatchFill />
+										</Tooltip>
+										{u.subscriptionExpirationDate ? moment(u.subscriptionExpirationDate).format("DD/MM/YYYY") : "Unlimited"}
+									</span>
+									<span className="flex items-center gap-2">
+										<Tooltip tooltip="Last Login">
+											<BsClockFill />
+										</Tooltip>
+										{u.lastLogin ? moment(u.lastLogin).format("DD/MM/YYYY - HH:mm") : "N/A"}
+									</span>
+								</div>
+							</button>
+						))}
+					</section>
+				</Layout>
+			)}
+		</>
+	);
+}

src/pages/classrooms/create.tsx

@@ -0,0 +1,223 @@
+/* eslint-disable @next/next/no-img-element */
+import Layout from "@/components/High/Layout";
+import Input from "@/components/Low/Input";
+import Select from "@/components/Low/Select";
+import Tooltip from "@/components/Low/Tooltip";
+import {useListSearch} from "@/hooks/useListSearch";
+import usePagination from "@/hooks/usePagination";
+import {Entity, EntityWithRoles} from "@/interfaces/entity";
+import {User} from "@/interfaces/user";
+import {sessionOptions} from "@/lib/session";
+import {USER_TYPE_LABELS} from "@/resources/user";
+import {filterBy, mapBy, redirect, serialize} from "@/utils";
+import {getEntities, getEntitiesWithRoles} from "@/utils/entities.be";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import {getUserName, isAdmin} from "@/utils/users";
+import {getEntitiesUsers, getLinkedUsers} from "@/utils/users.be";
+import axios from "axios";
+import clsx from "clsx";
+import {withIronSessionSsr} from "iron-session/next";
+import moment from "moment";
+import Head from "next/head";
+import Link from "next/link";
+import {useRouter} from "next/router";
+import {Divider} from "primereact/divider";
+import {useEffect, useMemo, useState} from "react";
+import {BsCheck, BsChevronLeft, BsClockFill, BsEnvelopeFill, BsStopwatchFill} from "react-icons/bs";
+import {toast, ToastContainer} from "react-toastify";
+import { requestUser } from "@/utils/api";
+import { findAllowedEntities } from "@/utils/permissions";
+import { capitalize } from "lodash";
+
+export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
+	const user = await requestUser(req, res)
+	if (!user) return redirect("/login")
+
+	if (shouldRedirectHome(user)) return redirect("/")
+
+	const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : mapBy(user.entities, "id"));
+	const users = await getEntitiesUsers(mapBy(entities, 'id'))
+	const allowedEntities = findAllowedEntities(user, entities, "create_classroom")
+
+	return {
+		props: serialize({user, entities: allowedEntities, users: users.filter((x) => x.id !== user.id)}),
+	};
+}, sessionOptions);
+
+interface Props {
+	user: User;
+	users: User[];
+	entities: EntityWithRoles[];
+}
+
+export default function Home({user, users, entities}: Props) {
+	const [isLoading, setIsLoading] = useState(false);
+	const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
+	const [name, setName] = useState("");
+	const [entity, setEntity] = useState<string | undefined>(entities[0]?.id);
+
+	const entityUsers = useMemo(() => !entity ? users : users.filter(u => mapBy(u.entities, 'id').includes(entity)), [entity, users])
+
+	const {rows, renderSearch} = useListSearch<User>(
+		[["name"], ["type"], ["corporateInformation", "companyInformation", "name"]], entityUsers
+	);
+
+	const {items, renderMinimal} = usePagination<User>(rows, 16);
+
+	const router = useRouter();
+
+	useEffect(() => setSelectedUsers([]), [entity])
+
+	const createGroup = () => {
+		if (!name.trim()) return;
+		if (!entity) return;
+		if (!confirm(`Are you sure you want to create this group with ${selectedUsers.length} participants?`)) return;
+
+		setIsLoading(true);
+
+		axios
+			.post<{id: string}>(`/api/groups`, {name, participants: selectedUsers, admin: user.id, entity})
+			.then((result) => {
+				toast.success("Your group has been created successfully!");
+				router.replace(`/classrooms/${result.data.id}`);
+			})
+			.catch((e) => {
+				console.error(e);
+				toast.error("Something went wrong!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	const toggleUser = (u: User) => setSelectedUsers((prev) => (prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]));
+
+	return (
+		<>
+			<Head>
+				<title>Create Group | EnCoach</title>
+				<meta
+					name="description"
+					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+				/>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<ToastContainer />
+			<Layout user={user}>
+				<section className="flex flex-col gap-0">
+					<div className="flex gap-3 justify-between">
+						<div className="flex items-center gap-2">
+							<Link
+								href="/classrooms"
+								className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
+								<BsChevronLeft />
+							</Link>
+							<h2 className="font-bold text-2xl">Create Classroom</h2>
+						</div>
+						<div className="flex items-center gap-4">
+							<button
+								onClick={createGroup}
+								disabled={!name.trim() || !entity || isLoading}
+								className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+								<BsCheck />
+								<span className="text-xs">Create Classroom</span>
+							</button>
+						</div>
+					</div>
+					<Divider />
+					<div className="grid grid-cols-2 gap-4 place-items-end">
+						<div className="flex flex-col gap-4 w-full">
+							<span className="font-semibold text-xl">Classroom Name:</span>
+							<Input name="name" onChange={setName} type="text" placeholder="Classroom A" />
+						</div>
+						<div className="flex flex-col gap-4 w-full">
+							<span className="font-semibold text-xl">Entity:</span>
+							<Select
+								options={entities.map((e) => ({value: e.id, label: e.label}))}
+								onChange={(v) => setEntity(v ? v.value! : undefined)}
+								defaultValue={{value: entities[0]?.id, label: entities[0]?.label}}
+							/>
+						</div>
+					</div>
+					<Divider />
+					<div className="flex items-center justify-between mb-4">
+						<span className="font-semibold text-xl">Participants ({selectedUsers.length} selected):</span>
+					</div>
+					<div className="w-full flex items-center gap-4">
+						{renderSearch()}
+						{renderMinimal()}
+					</div>
+					<div className="flex items-center gap-2 mt-4">
+						{['student', 'teacher', 'corporate'].map((type) => (
+							<button
+								key={type}
+								onClick={() => {
+									const typeUsers = mapBy(filterBy(entityUsers, 'type', type), 'id')
+									if (typeUsers.every((u) => selectedUsers.includes(u))) {
+										setSelectedUsers((prev) => prev.filter((a) => !typeUsers.includes(a)));
+									} else {
+										setSelectedUsers((prev) => [...prev.filter((a) => !typeUsers.includes(a)), ...typeUsers]);
+									}
+								}}
+								disabled={filterBy(entityUsers, 'type', type).length === 0}
+								className={clsx(
+									"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+									"transition duration-300 ease-in-out",
+									"disabled:grayscale disabled:hover:bg-mti-purple-ultralight disabled:hover:text-mti-purple disabled:cursor-not-allowed",
+									filterBy(entityUsers, 'type', type).length > 0 &&
+									filterBy(entityUsers, 'type', type).every((u) => selectedUsers.includes(u.id)) &&
+									"!bg-mti-purple-light !text-white",
+								)}>
+								{capitalize(type)}
+							</button>
+						))}
+					</div>
+				</section>
+
+				<section className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+					{items.map((u) => (
+						<button
+							onClick={() => toggleUser(u)}
+							disabled={isLoading}
+							key={u.id}
+							className={clsx(
+								"p-4 pr-6 h-48 relative border rounded-xl flex flex-col gap-3 justify-between text-left cursor-pointer",
+								"hover:border-mti-purple transition ease-in-out duration-300",
+								selectedUsers.includes(u.id) && "border-mti-purple",
+							)}>
+							<div className="flex items-center gap-2">
+								<div className="min-w-[3rem] min-h-[3rem] w-12 h-12 border flex items-center justify-center overflow-hidden rounded-full">
+									<img src={u.profilePicture} alt={u.name} />
+								</div>
+								<div className="flex flex-col">
+									<span className="font-semibold">{getUserName(u)}</span>
+									<span className="opacity-80 text-sm">{USER_TYPE_LABELS[u.type]}</span>
+								</div>
+							</div>
+
+							<div className="flex flex-col gap-1">
+								<span className="flex items-center gap-2">
+									<Tooltip tooltip="E-mail address">
+										<BsEnvelopeFill />
+									</Tooltip>
+									{u.email}
+								</span>
+								<span className="flex items-center gap-2">
+									<Tooltip tooltip="Expiration Date">
+										<BsStopwatchFill />
+									</Tooltip>
+									{u.subscriptionExpirationDate ? moment(u.subscriptionExpirationDate).format("DD/MM/YYYY") : "Unlimited"}
+								</span>
+								<span className="flex items-center gap-2">
+									<Tooltip tooltip="Last Login">
+										<BsClockFill />
+									</Tooltip>
+									{u.lastLogin ? moment(u.lastLogin).format("DD/MM/YYYY - HH:mm") : "N/A"}
+								</span>
+							</div>
+						</button>
+					))}
+				</section>
+			</Layout>
+		</>
+	);
+}

src/pages/classrooms/index.tsx

@@ -0,0 +1,121 @@
+/* eslint-disable @next/next/no-img-element */
+import Head from "next/head";
+import {withIronSessionSsr} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {ToastContainer} from "react-toastify";
+import Layout from "@/components/High/Layout";
+import {GroupWithUsers, User} from "@/interfaces/user";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import {getUserName, isAdmin} from "@/utils/users";
+import {convertToUsers, getGroupsForEntities} from "@/utils/groups.be";
+import {getSpecificUsers} from "@/utils/users.be";
+import Link from "next/link";
+import {uniq} from "lodash";
+import {BsPlus} from "react-icons/bs";
+import CardList from "@/components/High/CardList";
+import Separator from "@/components/Low/Separator";
+import {mapBy, redirect, serialize} from "@/utils";
+import { requestUser } from "@/utils/api";
+import { findAllowedEntities } from "@/utils/permissions";
+import { getEntities, getEntitiesWithRoles } from "@/utils/entities.be";
+import { useAllowedEntities } from "@/hooks/useEntityPermissions";
+import { EntityWithRoles } from "@/interfaces/entity";
+
+export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
+	const user = await requestUser(req, res)
+	if (!user) return redirect("/login")
+
+	if (shouldRedirectHome(user)) return redirect("/")
+
+	const entityIDS = mapBy(user.entities, "id");
+	const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS)
+	const allowedEntities = findAllowedEntities(user, entities, "view_classrooms")
+
+	const groups = await getGroupsForEntities(mapBy(allowedEntities, 'id'));
+
+	const users = await getSpecificUsers(uniq(groups.flatMap((g) => [...g.participants.slice(0, 5), g.admin])));
+	const groupsWithUsers: GroupWithUsers[] = groups.map((g) => convertToUsers(g, users));
+
+	return {
+		props: serialize({user, groups: groupsWithUsers, entities: allowedEntities}),
+	};
+}, sessionOptions);
+
+const SEARCH_FIELDS = [
+	["name"],
+	["admin", "name"],
+	["admin", "email"],
+	["admin", "corporateInformation", "companyInformation", "name"],
+	["participants", "name"],
+	["participants", "email"],
+	["participants", "corporateInformation", "companyInformation", "name"],
+];
+
+interface Props {
+	user: User;
+	groups: GroupWithUsers[];
+	entities: EntityWithRoles[]
+}
+export default function Home({user, groups, entities}: Props) {
+	const entitiesAllowCreate = useAllowedEntities(user, entities, 'create_classroom')
+
+	const renderCard = (group: GroupWithUsers) => (
+		<Link
+			href={`/classrooms/${group.id}`}
+			key={group.id}
+			className="p-4 border rounded-xl flex flex-col gap-2 hover:border-mti-purple transition ease-in-out duration-300 text-left cursor-pointer">
+			<span>
+				<b>Group: </b>
+				{group.name}
+			</span>
+			<span>
+				<b>Admin: </b>
+				{getUserName(group.admin)}
+			</span>
+			<b>Participants ({group.participants.length}): </b>
+			<span>
+				{group.participants.slice(0, 5).map(getUserName).join(", ")}
+				{group.participants.length > 5 ? <span className="opacity-60"> and {group.participants.length - 5} more</span> : ""}
+			</span>
+		</Link>
+	);
+
+	const firstCard = () => (
+		<Link
+			href={`/classrooms/create`}
+			className="p-4 border hover:text-mti-purple rounded-xl flex flex-col items-center justify-center gap-0 hover:border-mti-purple transition ease-in-out duration-300 text-left cursor-pointer">
+			<BsPlus size={40} />
+			<span className="font-semibold">Create Classroom</span>
+		</Link>
+	);
+
+	return (
+		<>
+			<Head>
+				<title>Classrooms | EnCoach</title>
+				<meta
+					name="description"
+					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+				/>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<ToastContainer />
+			<Layout user={user} className="!gap-4">
+				<section className="flex flex-col gap-4 w-full h-full">
+					<div className="flex flex-col gap-4">
+						<h2 className="font-bold text-2xl">Classrooms</h2>
+						<Separator />
+					</div>
+
+					<CardList<GroupWithUsers>
+						list={groups}
+						searchFields={SEARCH_FIELDS}
+						renderCard={renderCard}
+						firstCard={entitiesAllowCreate.length === 0 ? undefined : firstCard}
+					/>
+				</section>
+			</Layout>
+		</>
+	);
+}

src/pages/dashboard/admin.tsx

@@ -0,0 +1,198 @@
+/* eslint-disable @next/next/no-img-element */
+import Layout from "@/components/High/Layout";
+import UserDisplayList from "@/components/UserDisplayList";
+import IconCard from "@/dashboards/IconCard";
+import { Module } from "@/interfaces";
+import { EntityWithRoles } from "@/interfaces/entity";
+import { Assignment } from "@/interfaces/results";
+import { Group, Stat, User } from "@/interfaces/user";
+import { sessionOptions } from "@/lib/session";
+import { dateSorter, filterBy, mapBy, redirect, serialize } from "@/utils";
+import { requestUser } from "@/utils/api";
+import { getAssignments, getEntitiesAssignments } from "@/utils/assignments.be";
+import { getEntitiesWithRoles } from "@/utils/entities.be";
+import { getGroups, getGroupsByEntities } from "@/utils/groups.be";
+import { checkAccess } from "@/utils/permissions";
+import { calculateAverageLevel, calculateBandScore } from "@/utils/score";
+import { groupByExam } from "@/utils/stats";
+import { getStatsByUsers } from "@/utils/stats.be";
+import { getEntitiesUsers, getUsers } from "@/utils/users.be";
+import { withIronSessionSsr } from "iron-session/next";
+import { uniqBy } from "lodash";
+import moment from "moment";
+import Head from "next/head";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useMemo } from "react";
+import {
+  BsBank,
+  BsClipboard2Data,
+  BsClock,
+  BsEnvelopePaper,
+  BsPaperclip,
+  BsPencilSquare,
+  BsPeople,
+  BsPeopleFill,
+  BsPersonFill,
+  BsPersonFillGear,
+} from "react-icons/bs";
+import { ToastContainer } from "react-toastify";
+
+interface Props {
+  user: User;
+  users: User[];
+  entities: EntityWithRoles[];
+  assignments: Assignment[];
+  stats: Stat[];
+  groups: Group[];
+}
+
+export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
+	const user = await requestUser(req, res)
+	if (!user) return redirect("/login")
+
+  if (!checkAccess(user, ["admin", "developer"])) return redirect("/")
+
+  const users = await getUsers();
+  const entities = await getEntitiesWithRoles();
+  const assignments = await getAssignments();
+  const stats = await getStatsByUsers(users.map((u) => u.id));
+  const groups = await getGroups();
+
+  return { props: serialize({ user, users, entities, assignments, stats, groups }) };
+}, sessionOptions);
+
+export default function Dashboard({ user, users, entities, assignments, stats, groups }: Props) {
+  const students = useMemo(() => users.filter((u) => u.type === "student"), [users]);
+  const teachers = useMemo(() => users.filter((u) => u.type === "teacher"), [users]);
+  const corporates = useMemo(() => users.filter((u) => u.type === "corporate"), [users]);
+  const masterCorporates = useMemo(() => users.filter((u) => u.type === "mastercorporate"), [users]);
+
+  const router = useRouter();
+
+  const averageLevelCalculator = (studentStats: Stat[]) => {
+    const formattedStats = studentStats
+      .map((s) => ({
+        focus: students.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,
+      level: 0,
+    };
+    bandScores.forEach((b) => (levels[b.module] += b.level));
+
+    return calculateAverageLevel(levels);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>EnCoach</title>
+        <meta
+          name="description"
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <ToastContainer />
+      <Layout user={user}>
+        <section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
+          <IconCard
+            onClick={() => router.push("/users?type=student")}
+            Icon={BsPersonFill}
+            label="Students"
+            value={students.length}
+            color="purple"
+          />
+          <IconCard
+            onClick={() => router.push("/users?type=teacher")}
+            Icon={BsPencilSquare}
+            label="Teachers"
+            value={teachers.length}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsBank}
+            onClick={() => router.push("/users?type=corporate")}
+            label="Corporates"
+            value={corporates.length}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsBank}
+            onClick={() => router.push("/users?type=mastercorporate")}
+            label="Master Corporates"
+            value={masterCorporates.length}
+            color="purple"
+          />
+          <IconCard
+          	Icon={BsPeople}
+           	onClick={() => router.push("/classrooms")}
+            label="Classrooms"
+            value={groups.length}
+            color="purple"
+          />
+          <IconCard Icon={BsPeopleFill}
+          	onClick={() => router.push("/entities")}
+           	label="Entities"
+            value={entities.length}
+            color="purple"
+          />
+          <IconCard Icon={BsClipboard2Data} label="Exams Performed" value={uniqBy(stats, "exam").length} color="purple" />
+          <IconCard Icon={BsPaperclip} label="Average Level" value={averageLevelCalculator(stats).toFixed(1)} color="purple" />
+          <IconCard Icon={BsPersonFillGear}
+	          onClick={() => router.push("/users/performance")}
+	          label="Student Performance"
+						value={students.length}
+						color="purple"
+					/>
+          <IconCard
+            Icon={BsEnvelopePaper}
+            onClick={() => router.push("/assignments")}
+            label="Assignments"
+            value={assignments.filter((a) => !a.archived).length}
+            color="purple"
+          />
+        </section>
+
+        <section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
+          <UserDisplayList
+            users={students.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))}
+            title="Latest Students"
+          />
+          <UserDisplayList
+            users={teachers.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))}
+            title="Latest Teachers"
+          />
+          <UserDisplayList
+            users={students.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))}
+            title="Highest level students"
+          />
+          <UserDisplayList
+            users={
+              students
+                .sort(
+                  (a, b) =>
+                    Object.keys(groupByExam(filterBy(stats, "user", b))).length -
+                    Object.keys(groupByExam(filterBy(stats, "user", a))).length,
+                )
+            }
+            title="Highest exam count students"
+          />
+        </section>
+      </Layout>
+    </>
+  );
+}

src/pages/dashboard/corporate.tsx

@@ -0,0 +1,207 @@
+/* eslint-disable @next/next/no-img-element */
+import Layout from "@/components/High/Layout";
+import UserDisplayList from "@/components/UserDisplayList";
+import IconCard from "@/dashboards/IconCard";
+import { Module } from "@/interfaces";
+import { EntityWithRoles } from "@/interfaces/entity";
+import { Assignment } from "@/interfaces/results";
+import { Group, Stat, User } from "@/interfaces/user";
+import { sessionOptions } from "@/lib/session";
+import { dateSorter, filterBy, mapBy, redirect, serialize } from "@/utils";
+import { requestUser } from "@/utils/api";
+import { getEntitiesAssignments } from "@/utils/assignments.be";
+import { getEntitiesWithRoles } from "@/utils/entities.be";
+import { getGroupsByEntities } from "@/utils/groups.be";
+import { checkAccess } from "@/utils/permissions";
+import { calculateAverageLevel, calculateBandScore } from "@/utils/score";
+import { groupByExam } from "@/utils/stats";
+import { getStatsByUsers } from "@/utils/stats.be";
+import { filterAllowedUsers } from "@/utils/users.be";
+import { getEntitiesUsers } from "@/utils/users.be";
+import { withIronSessionSsr } from "iron-session/next";
+import { uniqBy } from "lodash";
+import moment from "moment";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { useMemo } from "react";
+import {
+  BsClipboard2Data,
+  BsClock,
+  BsEnvelopePaper,
+  BsPaperclip,
+  BsPencilSquare,
+  BsPeople,
+  BsPeopleFill,
+  BsPersonFill,
+  BsPersonFillGear,
+} from "react-icons/bs";
+import { ToastContainer } from "react-toastify";
+
+interface Props {
+  user: User;
+  users: User[];
+  entities: EntityWithRoles[];
+  assignments: Assignment[];
+  stats: Stat[];
+  groups: Group[];
+}
+
+export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
+	const user = await requestUser(req, res)
+	if (!user) return redirect("/login")
+
+  if (!checkAccess(user, ["admin", "developer", "corporate"])) return redirect("/")
+
+  const entityIDS = mapBy(user.entities, "id") || [];
+  const entities = await getEntitiesWithRoles(entityIDS);
+  const users = await filterAllowedUsers(user, entities)
+
+  const assignments = await getEntitiesAssignments(entityIDS);
+  const stats = await getStatsByUsers(users.map((u) => u.id));
+  const groups = await getGroupsByEntities(entityIDS);
+
+  return { props: serialize({ user, users, entities, assignments, stats, groups }) };
+}, sessionOptions);
+
+export default function Dashboard({ user, users, entities, assignments, stats, groups }: Props) {
+  const students = useMemo(() => users.filter((u) => u.type === "student"), [users]);
+  const teachers = useMemo(() => users.filter((u) => u.type === "teacher"), [users]);
+
+  const router = useRouter();
+
+  const averageLevelCalculator = (studentStats: Stat[]) => {
+    const formattedStats = studentStats
+      .map((s) => ({
+        focus: students.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,
+      level: 0,
+    };
+    bandScores.forEach((b) => (levels[b.module] += b.level));
+
+    return calculateAverageLevel(levels);
+  };
+
+  const UserDisplay = (displayUser: User) => (
+    <div 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>
+  );
+
+  return (
+    <>
+      <Head>
+        <title>EnCoach</title>
+        <meta
+          name="description"
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <ToastContainer />
+      <Layout user={user}>
+        <div className="w-full flex flex-col gap-4">
+          {entities.length > 0 && (
+            <div className="w-fit self-end bg-neutral-200 px-2 rounded-lg py-1">
+              <b>{mapBy(entities, "label")?.join(", ")}</b>
+            </div>
+          )}
+          <section className="grid grid-cols-5 -md:grid-cols-2 place-items-center gap-4 text-center">
+            <IconCard
+              onClick={() => router.push("/users?type=student")}
+              Icon={BsPersonFill}
+              label="Students"
+              value={students.length}
+              color="purple"
+            />
+            <IconCard
+              onClick={() => router.push("/users?type=teacher")}
+              Icon={BsPencilSquare}
+              label="Teachers"
+              value={teachers.length}
+              color="purple"
+            />
+            <IconCard
+              onClick={() => router.push("/classrooms")}
+              Icon={BsPeople}
+              label="Classrooms"
+              value={groups.length}
+              color="purple"
+            />
+            <IconCard Icon={BsPeopleFill}
+            	onClick={() => router.push("/entities")}
+             	label="Entities"
+              value={entities.length}
+              color="purple"
+            />
+            <IconCard Icon={BsClipboard2Data} label="Exams Performed" value={uniqBy(stats, "exam").length} color="purple" />
+            <IconCard Icon={BsPaperclip} label="Average Level" value={averageLevelCalculator(stats).toFixed(1)} color="purple" />
+            <IconCard Icon={BsPersonFillGear}
+		          onClick={() => router.push("/users/performance")}
+		          label="Student Performance"
+							value={students.length}
+							color="purple"
+						/>
+            <IconCard
+              Icon={BsClock}
+              label="Expiration Date"
+              value={user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy") : "Unlimited"}
+              color="rose"
+            />
+            <IconCard
+              Icon={BsEnvelopePaper}
+              className="col-span-2"
+              onClick={() => router.push("/assignments")}
+              label="Assignments"
+              value={assignments.filter((a) => !a.archived).length}
+              color="purple"
+            />
+          </section>
+        </div>
+
+        <section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
+          <UserDisplayList
+            users={students.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))}
+            title="Latest Students"
+          />
+          <UserDisplayList
+            users={teachers.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))}
+            title="Latest Teachers"
+          />
+          <UserDisplayList
+            users={students.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))}
+            title="Highest level students"
+          />
+          <UserDisplayList
+            users={
+              students
+                .sort(
+                  (a, b) =>
+                    Object.keys(groupByExam(filterBy(stats, "user", b))).length -
+                    Object.keys(groupByExam(filterBy(stats, "user", a))).length,
+                )
+            }
+            title="Highest exam count students"
+          />
+        </section>
+      </Layout>
+    </>
+  );
+}

src/pages/dashboard/developer.tsx

@@ -0,0 +1,198 @@
+/* eslint-disable @next/next/no-img-element */
+import Layout from "@/components/High/Layout";
+import UserDisplayList from "@/components/UserDisplayList";
+import IconCard from "@/dashboards/IconCard";
+import { Module } from "@/interfaces";
+import { EntityWithRoles } from "@/interfaces/entity";
+import { Assignment } from "@/interfaces/results";
+import { Group, Stat, User } from "@/interfaces/user";
+import { sessionOptions } from "@/lib/session";
+import { dateSorter, filterBy, mapBy, redirect, serialize } from "@/utils";
+import { requestUser } from "@/utils/api";
+import { getAssignments, getEntitiesAssignments } from "@/utils/assignments.be";
+import { getEntitiesWithRoles } from "@/utils/entities.be";
+import { getGroups, getGroupsByEntities } from "@/utils/groups.be";
+import { checkAccess } from "@/utils/permissions";
+import { calculateAverageLevel, calculateBandScore } from "@/utils/score";
+import { groupByExam } from "@/utils/stats";
+import { getStatsByUsers } from "@/utils/stats.be";
+import { getEntitiesUsers, getUsers } from "@/utils/users.be";
+import { withIronSessionSsr } from "iron-session/next";
+import { uniqBy } from "lodash";
+import moment from "moment";
+import Head from "next/head";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useMemo } from "react";
+import {
+  BsBank,
+  BsClipboard2Data,
+  BsClock,
+  BsEnvelopePaper,
+  BsPaperclip,
+  BsPencilSquare,
+  BsPeople,
+  BsPeopleFill,
+  BsPersonFill,
+  BsPersonFillGear,
+} from "react-icons/bs";
+import { ToastContainer } from "react-toastify";
+
+interface Props {
+  user: User;
+  users: User[];
+  entities: EntityWithRoles[];
+  assignments: Assignment[];
+  stats: Stat[];
+  groups: Group[];
+}
+
+export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
+	const user = await requestUser(req, res)
+	if (!user) return redirect("/login")
+
+  if (!checkAccess(user, ["admin", "developer"])) return redirect("/")
+
+  const users = await getUsers();
+  const entities = await getEntitiesWithRoles();
+  const assignments = await getAssignments();
+  const stats = await getStatsByUsers(users.map((u) => u.id));
+  const groups = await getGroups();
+
+  return { props: serialize({ user, users, entities, assignments, stats, groups }) };
+}, sessionOptions);
+
+export default function Dashboard({ user, users, entities, assignments, stats, groups }: Props) {
+  const students = useMemo(() => users.filter((u) => u.type === "student"), [users]);
+  const teachers = useMemo(() => users.filter((u) => u.type === "teacher"), [users]);
+  const corporates = useMemo(() => users.filter((u) => u.type === "corporate"), [users]);
+  const masterCorporates = useMemo(() => users.filter((u) => u.type === "mastercorporate"), [users]);
+
+  const router = useRouter();
+
+  const averageLevelCalculator = (studentStats: Stat[]) => {
+    const formattedStats = studentStats
+      .map((s) => ({
+        focus: students.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,
+      level: 0,
+    };
+    bandScores.forEach((b) => (levels[b.module] += b.level));
+
+    return calculateAverageLevel(levels);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>EnCoach</title>
+        <meta
+          name="description"
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <ToastContainer />
+      <Layout user={user}>
+        <section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
+          <IconCard
+            onClick={() => router.push("/users?type=student")}
+            Icon={BsPersonFill}
+            label="Students"
+            value={students.length}
+            color="purple"
+          />
+          <IconCard
+            onClick={() => router.push("/users?type=teacher")}
+            Icon={BsPencilSquare}
+            label="Teachers"
+            value={teachers.length}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsBank}
+            onClick={() => router.push("/users?type=corporate")}
+            label="Corporates"
+            value={corporates.length}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsBank}
+            onClick={() => router.push("/users?type=mastercorporate")}
+            label="Master Corporates"
+            value={masterCorporates.length}
+            color="purple"
+          />
+          <IconCard
+          	Icon={BsPeople}
+           	onClick={() => router.push("/classrooms")}
+            label="Classrooms"
+            value={groups.length}
+            color="purple"
+          />
+          <IconCard Icon={BsPeopleFill}
+          	onClick={() => router.push("/entities")}
+           	label="Entities"
+            value={entities.length}
+            color="purple"
+          />
+          <IconCard Icon={BsClipboard2Data} label="Exams Performed" value={uniqBy(stats, "exam").length} color="purple" />
+          <IconCard Icon={BsPaperclip} label="Average Level" value={averageLevelCalculator(stats).toFixed(1)} color="purple" />
+          <IconCard Icon={BsPersonFillGear}
+	          onClick={() => router.push("/users/performance")}
+	          label="Student Performance"
+						value={students.length}
+						color="purple"
+					/>
+          <IconCard
+            Icon={BsEnvelopePaper}
+            onClick={() => router.push("/assignments")}
+            label="Assignments"
+            value={assignments.filter((a) => !a.archived).length}
+            color="purple"
+          />
+        </section>
+
+        <section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
+          <UserDisplayList
+            users={students.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))}
+            title="Latest Students"
+          />
+          <UserDisplayList
+            users={teachers.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))}
+            title="Latest Teachers"
+          />
+          <UserDisplayList
+            users={students.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))}
+            title="Highest level students"
+          />
+          <UserDisplayList
+            users={
+              students
+                .sort(
+                  (a, b) =>
+                    Object.keys(groupByExam(filterBy(stats, "user", b))).length -
+                    Object.keys(groupByExam(filterBy(stats, "user", a))).length,
+                )
+            }
+            title="Highest exam count students"
+          />
+        </section>
+      </Layout>
+    </>
+  );
+}

src/pages/dashboard/index.tsx

@@ -0,0 +1,16 @@
+import {User} from "@/interfaces/user";
+import {sessionOptions} from "@/lib/session";
+import { redirect } from "@/utils";
+import { requestUser } from "@/utils/api";
+import {withIronSessionSsr} from "iron-session/next";
+
+export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
+	const user = await requestUser(req, res)
+	if (!user) return redirect("/login")
+
+	return redirect(`/dashboard/${user.type}`)
+}, sessionOptions);
+
+export default function Dashboard() {
+	return <div></div>;
+}

src/pages/dashboard/mastercorporate.tsx

@@ -0,0 +1,205 @@
+/* eslint-disable @next/next/no-img-element */
+import Layout from "@/components/High/Layout";
+import UserDisplayList from "@/components/UserDisplayList";
+import IconCard from "@/dashboards/IconCard";
+import { Module } from "@/interfaces";
+import { EntityWithRoles } from "@/interfaces/entity";
+import { Assignment } from "@/interfaces/results";
+import { Group, Stat, User } from "@/interfaces/user";
+import { sessionOptions } from "@/lib/session";
+import { dateSorter, filterBy, mapBy, redirect, serialize } from "@/utils";
+import { requestUser } from "@/utils/api";
+import { getEntitiesAssignments } from "@/utils/assignments.be";
+import { getEntitiesWithRoles } from "@/utils/entities.be";
+import { getGroupsByEntities } from "@/utils/groups.be";
+import { checkAccess, findAllowedEntities } from "@/utils/permissions";
+import { calculateAverageLevel, calculateBandScore } from "@/utils/score";
+import { groupByExam } from "@/utils/stats";
+import { getStatsByUsers } from "@/utils/stats.be";
+import { filterAllowedUsers } from "@/utils/users.be";
+import { getEntitiesUsers } from "@/utils/users.be";
+import { withIronSessionSsr } from "iron-session/next";
+import { uniqBy } from "lodash";
+import moment from "moment";
+import Head from "next/head";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useMemo } from "react";
+import {
+  BsBank,
+  BsClipboard2Data,
+  BsClock,
+  BsEnvelopePaper,
+  BsPaperclip,
+  BsPencilSquare,
+  BsPeople,
+  BsPeopleFill,
+  BsPersonFill,
+  BsPersonFillGear,
+} from "react-icons/bs";
+import { ToastContainer } from "react-toastify";
+
+interface Props {
+  user: User;
+  users: User[];
+  entities: EntityWithRoles[];
+  assignments: Assignment[];
+  stats: Stat[];
+  groups: Group[];
+}
+
+export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
+	const user = await requestUser(req, res)
+	if (!user) return redirect("/login")
+
+  if (!checkAccess(user, ["admin", "developer", "mastercorporate"]))
+    return redirect("/")
+
+  const entityIDS = mapBy(user.entities, "id") || [];
+  const entities = await getEntitiesWithRoles(entityIDS);
+  const users = await filterAllowedUsers(user, entities)
+
+  const assignments = await getEntitiesAssignments(entityIDS);
+  const stats = await getStatsByUsers(users.map((u) => u.id));
+  const groups = await getGroupsByEntities(entityIDS);
+
+  return { props: serialize({ user, users, entities, assignments, stats, groups }) };
+}, sessionOptions);
+
+export default function Dashboard({ user, users, entities, assignments, stats, groups }: Props) {
+  const students = useMemo(() => users.filter((u) => u.type === "student"), [users]);
+  const teachers = useMemo(() => users.filter((u) => u.type === "teacher"), [users]);
+  const corporates = useMemo(() => users.filter((u) => u.type === "corporate"), [users]);
+
+  const router = useRouter();
+
+  const averageLevelCalculator = (studentStats: Stat[]) => {
+    const formattedStats = studentStats
+      .map((s) => ({
+        focus: students.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,
+      level: 0,
+    };
+    bandScores.forEach((b) => (levels[b.module] += b.level));
+
+    return calculateAverageLevel(levels);
+  };
+
+  const UserDisplay = (displayUser: User) => (
+    <div 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>
+  );
+
+  return (
+    <>
+      <Head>
+        <title>EnCoach</title>
+        <meta
+          name="description"
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <ToastContainer />
+      <Layout user={user}>
+        <section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
+          <IconCard
+            onClick={() => router.push("/users?type=student")}
+            Icon={BsPersonFill}
+            label="Students"
+            value={students.length}
+            color="purple"
+          />
+          <IconCard
+            onClick={() => router.push("/users?type=teacher")}
+            Icon={BsPencilSquare}
+            label="Teachers"
+            value={teachers.length}
+            color="purple"
+          />
+          <IconCard
+            onClick={() => router.push("/users?type=corporate")} Icon={BsBank} label="Corporate Accounts" value={corporates.length} color="purple" />
+            <IconCard
+            	Icon={BsPeople}
+             	onClick={() => router.push("/classrooms")}
+              label="Classrooms"
+              value={groups.length}
+              color="purple"
+            />
+            <IconCard Icon={BsPeopleFill}
+            	onClick={() => router.push("/entities")}
+             	label="Entities"
+              value={entities.length}
+              color="purple"
+            />
+          <IconCard Icon={BsClipboard2Data} label="Exams Performed" value={uniqBy(stats, "exam").length} color="purple" />
+          <IconCard Icon={BsPaperclip} label="Average Level" value={averageLevelCalculator(stats).toFixed(1)} color="purple" />
+          <IconCard Icon={BsPersonFillGear}
+	          onClick={() => router.push("/users/performance")}
+	          label="Student Performance"
+						value={students.length}
+						color="purple"
+					/>
+          <IconCard
+            Icon={BsEnvelopePaper}
+            onClick={() => router.push("/assignments")}
+            label="Assignments"
+            value={assignments.filter((a) => !a.archived).length}
+            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">
+          <UserDisplayList
+            users={students.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))}
+            title="Latest Students"
+          />
+          <UserDisplayList
+            users={teachers.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))}
+            title="Latest Teachers"
+          />
+          <UserDisplayList
+            users={students.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))}
+            title="Highest level students"
+          />
+          <UserDisplayList
+            users={
+              students
+                .sort(
+                  (a, b) =>
+                    Object.keys(groupByExam(filterBy(stats, "user", b))).length -
+                    Object.keys(groupByExam(filterBy(stats, "user", a))).length,
+                )
+            }
+            title="Highest exam count students"
+          />
+        </section>
+      </Layout>
+    </>
+  );
+}

src/pages/dashboard/student.tsx

@@ -0,0 +1,278 @@
+/* eslint-disable @next/next/no-img-element */
+import Layout from "@/components/High/Layout";
+import Button from "@/components/Low/Button";
+import ProgressBar from "@/components/Low/ProgressBar";
+import InviteWithUserCard from "@/components/Medium/InviteWithUserCard";
+import ModuleBadge from "@/components/ModuleBadge";
+import ProfileSummary from "@/components/ProfileSummary";
+import {Session} from "@/hooks/useSessions";
+import {Grading} from "@/interfaces";
+import {EntityWithRoles} from "@/interfaces/entity";
+import {Exam} from "@/interfaces/exam";
+import { InviteWithEntity } from "@/interfaces/invite";
+import {Assignment} from "@/interfaces/results";
+import {Stat, User} from "@/interfaces/user";
+import {sessionOptions} from "@/lib/session";
+import useExamStore from "@/stores/examStore";
+import {findBy, mapBy, redirect, serialize} from "@/utils";
+import { requestUser } from "@/utils/api";
+import {activeAssignmentFilter} from "@/utils/assignments";
+import {getAssignmentsByAssignee} from "@/utils/assignments.be";
+import {getEntitiesWithRoles, getEntityWithRoles} from "@/utils/entities.be";
+import {getExamsByIds} from "@/utils/exams.be";
+import {getGradingSystemByEntity} from "@/utils/grading.be";
+import {convertInvitersToEntity, getInvitesByInvitee} from "@/utils/invites.be";
+import {countExamModules, countFullExams, MODULE_ARRAY, sortByModule, sortByModuleName} from "@/utils/moduleUtils";
+import {checkAccess} from "@/utils/permissions";
+import {getGradingLabel} from "@/utils/score";
+import {getSessionsByUser} from "@/utils/sessions.be";
+import {averageScore} from "@/utils/stats";
+import {getStatsByUser} from "@/utils/stats.be";
+import clsx from "clsx";
+import {withIronSessionSsr} from "iron-session/next";
+import {capitalize, uniqBy} from "lodash";
+import moment from "moment";
+import Head from "next/head";
+import {useRouter} from "next/router";
+import { useMemo } from "react";
+import {BsBook, BsClipboard, BsFileEarmarkText, BsHeadphones, BsMegaphone, BsPen, BsPencil, BsStar} from "react-icons/bs";
+import {ToastContainer} from "react-toastify";
+
+interface Props {
+	user: User;
+	entities: EntityWithRoles[];
+	assignments: Assignment[];
+	stats: Stat[];
+	exams: Exam[];
+	sessions: Session[];
+	invites: InviteWithEntity[];
+	grading: Grading;
+}
+
+export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
+	const user = await requestUser(req, res)
+	if (!user) return redirect("/login")
+
+	if (!checkAccess(user, ["admin", "developer", "student"]))
+		return redirect("/")
+
+	const entityIDS = mapBy(user.entities, "id") || [];
+
+	const entities = await getEntitiesWithRoles(entityIDS);
+	const assignments = await getAssignmentsByAssignee(user.id, {archived: {$ne: true}});
+	const stats = await getStatsByUser(user.id);
+	const sessions = await getSessionsByUser(user.id, 10);
+	const invites = await getInvitesByInvitee(user.id);
+	const grading = await getGradingSystemByEntity(entityIDS[0] || "");
+
+	const formattedInvites = await Promise.all(invites.map(convertInvitersToEntity));
+
+	const examIDs = uniqBy(
+		assignments.flatMap((a) =>
+			a.exams.filter((e) => e.assignee === user.id).map((e) => ({module: e.module, id: e.id, key: `${e.module}_${e.id}`})),
+		),
+		"key",
+	);
+	const exams = await getExamsByIds(examIDs);
+
+	return {props: serialize({user, entities, assignments, stats, exams, sessions, invites: formattedInvites, grading})};
+}, sessionOptions);
+
+export default function Dashboard({user, entities, assignments, stats, invites, grading, sessions, exams}: Props) {
+	const router = useRouter();
+
+	const setExams = useExamStore((state) => state.setExams);
+	const setShowSolutions = useExamStore((state) => state.setShowSolutions);
+	const setUserSolutions = useExamStore((state) => state.setUserSolutions);
+	const setSelectedModules = useExamStore((state) => state.setSelectedModules);
+	const setAssignment = useExamStore((state) => state.setAssignment);
+
+	const startAssignment = (assignment: Assignment) => {
+		const assignmentExams = exams.filter(e => {
+			const exam = findBy(assignment.exams, 'id', e.id)
+			return !!exam && exam.module === e.module
+		})
+
+		if (assignmentExams.every((x) => !!x)) {
+			setUserSolutions([]);
+			setShowSolutions(false);
+			setExams(assignmentExams.sort(sortByModule));
+			setSelectedModules(mapBy(assignmentExams.sort(sortByModule), 'module'));
+			setAssignment(assignment);
+
+			router.push("/exam");
+		}
+	};
+
+	const studentAssignments = useMemo(() => assignments.filter(activeAssignmentFilter), [assignments]);
+
+	return (
+		<>
+			<Head>
+				<title>EnCoach</title>
+				<meta
+					name="description"
+					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+				/>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<ToastContainer />
+			<Layout user={user}>
+				{entities.length > 0 && (
+					<div className="absolute right-4 top-4 rounded-lg bg-neutral-200 px-2 py-1">
+						<b>{mapBy(entities, "label")?.join(", ")}</b>
+					</div>
+				)}
+
+				<ProfileSummary
+					user={user}
+					items={[
+						{
+							icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+							value: countFullExams(stats),
+							label: "Exams",
+							tooltip: "Number of all conducted completed exams",
+						},
+						{
+							icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+							value: countExamModules(stats),
+							label: "Modules",
+							tooltip: "Number of all exam modules performed including Level Test",
+						},
+						{
+							icon: <BsStar className="text-mti-red-light h-6 w-6 md:h-8 md:w-8" />,
+							value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
+							label: "Average Score",
+							tooltip: "Average success rate for questions responded",
+						},
+					]}
+				/>
+
+				{/* Assignments */}
+				<section className="flex flex-col gap-1 md:gap-3">
+					<span className="text-mti-black text-lg font-bold">Assignments</span>
+					<span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
+						{studentAssignments.length === 0 && "Assignments will appear here. It seems that for now there are no assignments for you."}
+						{studentAssignments
+							.sort((a, b) => moment(a.startDate).diff(b.startDate))
+							.map((assignment) => (
+								<div
+									className={clsx(
+										"border-mti-gray-anti-flash flex min-w-[350px] flex-col gap-6 rounded-xl border p-4",
+										assignment.results.map((r) => r.user).includes(user.id) && "border-mti-green-light",
+									)}
+									key={assignment.id}>
+									<div className="flex flex-col gap-1">
+										<h3 className="text-mti-black/90 text-xl font-semibold">{assignment.name}</h3>
+										<span className="flex justify-between gap-1 text-lg">
+											<span>{moment(assignment.startDate).format("DD/MM/YY, HH:mm")}</span>
+											<span>-</span>
+											<span>{moment(assignment.endDate).format("DD/MM/YY, HH:mm")}</span>
+										</span>
+									</div>
+									<div className="flex w-full items-center justify-between">
+										<div className="-md:mt-2 grid w-fit min-w-[140px] grid-cols-2 grid-rows-2 place-items-center justify-between gap-4">
+											{assignment.exams
+												.filter((e) => e.assignee === user.id)
+												.map((e) => e.module)
+												.sort(sortByModuleName)
+												.map((module) => (
+													<ModuleBadge className="scale-110 w-full" key={module} module={module} />
+												))}
+										</div>
+										{!assignment.results.map((r) => r.user).includes(user.id) && (
+											<>
+												<div
+													className="tooltip flex h-full w-full items-center justify-end pl-8 md:hidden"
+													data-tip="Your screen size is too small to perform an assignment">
+													<Button className="h-full w-full !rounded-xl" variant="outline">
+														Start
+													</Button>
+												</div>
+												<div
+													data-tip="You have already started this assignment!"
+													className={clsx(
+														"-md:hidden h-full w-full max-w-[50%] cursor-pointer",
+														sessions.filter((x) => x.assignment?.id === assignment.id).length > 0 && "tooltip",
+													)}>
+													<Button
+														className={clsx("w-full h-full !rounded-xl")}
+														onClick={() => startAssignment(assignment)}
+														variant="outline"
+														disabled={sessions.filter((x) => x.assignment?.id === assignment.id).length > 0}>
+														Start
+													</Button>
+												</div>
+											</>
+										)}
+										{assignment.results.map((r) => r.user).includes(user.id) && (
+											<Button
+												onClick={() => router.push("/record")}
+												color="green"
+												className="-md:hidden h-full w-full max-w-[50%] !rounded-xl"
+												variant="outline">
+												Submitted
+											</Button>
+										)}
+									</div>
+								</div>
+							))}
+					</span>
+				</section>
+
+				{/* Invites */}
+				{invites.length > 0 && (
+					<section className="flex flex-col gap-1 md:gap-3">
+						<span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
+							{invites.map((invite) => (
+								<InviteWithUserCard key={invite.id} invite={invite} reload={() => router.replace(router.asPath)} />
+							))}
+						</span>
+					</section>
+				)}
+
+				{/* Score History */}
+				<section className="flex flex-col gap-3">
+					<span className="text-lg font-bold">Score History</span>
+					<div className="-md:grid-rows-4 grid gap-6 md:grid-cols-2">
+						{MODULE_ARRAY.map((module) => {
+							const desiredLevel = user.desiredLevels[module] || 9;
+							const level = user.levels[module] || 0;
+							return (
+								<div className="border-mti-gray-anti-flash flex flex-col gap-2 rounded-xl border p-4" key={module}>
+									<div className="flex items-center gap-2 md:gap-3">
+										<div className="bg-mti-gray-smoke flex h-8 w-8 items-center justify-center rounded-lg md:h-12 md:w-12 md:rounded-xl">
+											{module === "reading" && <BsBook className="text-ielts-reading h-4 w-4 md:h-5 md:w-5" />}
+											{module === "listening" && <BsHeadphones className="text-ielts-listening h-4 w-4 md:h-5 md:w-5" />}
+											{module === "writing" && <BsPen className="text-ielts-writing h-4 w-4 md:h-5 md:w-5" />}
+											{module === "speaking" && <BsMegaphone className="text-ielts-speaking h-4 w-4 md:h-5 md:w-5" />}
+											{module === "level" && <BsClipboard className="text-ielts-level h-4 w-4 md:h-5 md:w-5" />}
+										</div>
+										<div className="flex w-full justify-between">
+											<span className="text-sm font-bold md:font-extrabold">{capitalize(module)}</span>
+											<span className="text-mti-gray-dim text-sm font-normal">
+												{module === "level" && !!grading && `English Level: ${getGradingLabel(level, grading.steps)}`}
+												{module !== "level" && `Level ${level} / Level 9 (Desired Level: ${desiredLevel})`}
+											</span>
+										</div>
+									</div>
+									<div className="md:pl-14">
+										<ProgressBar
+											color={module}
+											label=""
+											mark={module === "level" ? undefined : Math.round((desiredLevel * 100) / 9)}
+											markLabel={`Desired Level: ${desiredLevel}`}
+											percentage={module === "level" ? level : Math.round((level * 100) / 9)}
+											className="h-2 w-full"
+										/>
+									</div>
+								</div>
+							);
+						})}
+					</div>
+				</section>
+			</Layout>
+		</>
+	);
+}

src/pages/dashboard/teacher.tsx

@@ -0,0 +1,166 @@
+/* eslint-disable @next/next/no-img-element */
+import Layout from "@/components/High/Layout";
+import UserDisplayList from "@/components/UserDisplayList";
+import IconCard from "@/dashboards/IconCard";
+import { Module } from "@/interfaces";
+import { EntityWithRoles } from "@/interfaces/entity";
+import { Assignment } from "@/interfaces/results";
+import { Group, Stat, User } from "@/interfaces/user";
+import { sessionOptions } from "@/lib/session";
+import { dateSorter, filterBy, mapBy, redirect, serialize } from "@/utils";
+import { getEntitiesAssignments } from "@/utils/assignments.be";
+import { getEntitiesWithRoles } from "@/utils/entities.be";
+import { getGroupsByEntities } from "@/utils/groups.be";
+import { checkAccess, findAllowedEntities } from "@/utils/permissions";
+import { calculateAverageLevel, calculateBandScore } from "@/utils/score";
+import { groupByExam } from "@/utils/stats";
+import { getStatsByUsers } from "@/utils/stats.be";
+import { getEntitiesUsers } from "@/utils/users.be";
+import { withIronSessionSsr } from "iron-session/next";
+import { uniqBy } from "lodash";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { useMemo } from "react";
+import { BsClipboard2Data, BsEnvelopePaper, BsPaperclip, BsPeople, BsPersonFill } from "react-icons/bs";
+import { ToastContainer } from "react-toastify";
+import { requestUser } from "@/utils/api";
+import { useAllowedEntities } from "@/hooks/useEntityPermissions";
+import { filterAllowedUsers } from "@/utils/users.be";
+
+interface Props {
+  user: User;
+  users: User[];
+  entities: EntityWithRoles[];
+  assignments: Assignment[];
+  stats: Stat[];
+  groups: Group[];
+}
+
+export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
+	const user = await requestUser(req, res)
+	if (!user) return redirect("/login")
+
+  if (!checkAccess(user, ["admin", "developer", "teacher"]))
+    return redirect("/")
+
+  const entityIDS = mapBy(user.entities, "id") || [];
+  const entities = await getEntitiesWithRoles(entityIDS);
+  const users = await filterAllowedUsers(user, entities)
+
+  const assignments = await getEntitiesAssignments(entityIDS);
+  const stats = await getStatsByUsers(users.map((u) => u.id));
+  const groups = await getGroupsByEntities(entityIDS);
+
+  return { props: serialize({ user, users, entities, assignments, stats, groups }) };
+}, sessionOptions);
+
+export default function Dashboard({ user, users, entities, assignments, stats, groups }: Props) {
+  const students = useMemo(() => users.filter((u) => u.type === "student"), [users]);
+  const router = useRouter();
+
+  const averageLevelCalculator = (studentStats: Stat[]) => {
+    const formattedStats = studentStats
+      .map((s) => ({
+        focus: students.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,
+      level: 0,
+    };
+    bandScores.forEach((b) => (levels[b.module] += b.level));
+
+    return calculateAverageLevel(levels);
+  };
+
+  const UserDisplay = (displayUser: User) => (
+    <div 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>
+  );
+
+  return (
+    <>
+      <Head>
+        <title>EnCoach</title>
+        <meta
+          name="description"
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <ToastContainer />
+      <Layout user={user}>
+        <div className="w-full flex flex-col gap-4">
+          {entities.length > 0 && (
+            <div className="w-fit self-end bg-neutral-200 px-2 rounded-lg py-1">
+              <b>{mapBy(entities, "label")?.join(", ")}</b>
+            </div>
+          )}
+          <section className="grid grid-cols-5 -md:grid-cols-2 place-items-center gap-4 text-center">
+            <IconCard
+            	Icon={BsPersonFill}
+             	onClick={() => router.push("/users?type=student")}
+             	label="Students"
+              value={students.length}
+              color="purple"
+            />
+            <IconCard
+              onClick={() => router.push("/classrooms")}
+              Icon={BsPeople}
+              label="Classrooms"
+              value={groups.length}
+              color="purple"
+            />
+            <IconCard Icon={BsClipboard2Data} label="Exams Performed" value={uniqBy(stats, "exam").length} color="purple" />
+            <IconCard Icon={BsPaperclip} label="Average Level" value={averageLevelCalculator(stats).toFixed(1)} color="purple" />
+            <IconCard
+              Icon={BsEnvelopePaper}
+              onClick={() => router.push("/assignments")}
+              label="Assignments"
+              value={assignments.filter((a) => !a.archived).length}
+              color="purple"
+            />
+          </section>
+        </div>
+
+        <section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
+          <UserDisplayList
+            users={students.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))}
+            title="Latest Students"
+          />
+          <UserDisplayList
+            users={students.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))}
+            title="Highest level students"
+          />
+          <UserDisplayList
+            users={
+              students
+                .sort(
+                  (a, b) =>
+                    Object.keys(groupByExam(filterBy(stats, "user", b))).length -
+                    Object.keys(groupByExam(filterBy(stats, "user", a))).length,
+                )
+            }
+            title="Highest exam count students"
+          />
+        </section>
+      </Layout>
+    </>
+  );
+}

src/pages/entities/[id]/index.tsx

@@ -0,0 +1,373 @@
+/* eslint-disable @next/next/no-img-element */
+import CardList from "@/components/High/CardList";
+import Layout from "@/components/High/Layout";
+import Select from "@/components/Low/Select";
+import Tooltip from "@/components/Low/Tooltip";
+import { useEntityPermission } from "@/hooks/useEntityPermissions";
+import {useListSearch} from "@/hooks/useListSearch";
+import usePagination from "@/hooks/usePagination";
+import {Entity, EntityWithRoles, Role} from "@/interfaces/entity";
+import {GroupWithUsers, User} from "@/interfaces/user";
+import {sessionOptions} from "@/lib/session";
+import {USER_TYPE_LABELS} from "@/resources/user";
+import { findBy, mapBy, redirect, serialize } from "@/utils";
+import {getEntityWithRoles} from "@/utils/entities.be";
+import {convertToUsers, getGroup} from "@/utils/groups.be";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import {checkAccess, doesEntityAllow, getTypesOfUser} from "@/utils/permissions";
+import {getUserName, isAdmin} from "@/utils/users";
+import {filterAllowedUsers, getEntitiesUsers, getEntityUsers, getLinkedUsers, getSpecificUsers, getUsers} from "@/utils/users.be";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
+import axios from "axios";
+import clsx from "clsx";
+import {withIronSessionSsr} from "iron-session/next";
+import moment from "moment";
+import Head from "next/head";
+import Link from "next/link";
+import {useRouter} from "next/router";
+import {Divider} from "primereact/divider";
+import {useEffect, useMemo, useState} from "react";
+import {
+	BsChevronLeft,
+	BsClockFill,
+	BsEnvelopeFill,
+	BsFillPersonVcardFill,
+	BsPerson,
+	BsPlus,
+	BsSquare,
+	BsStopwatchFill,
+	BsTag,
+	BsTrash,
+	BsX,
+} from "react-icons/bs";
+import {toast} from "react-toastify";
+
+export const getServerSideProps = withIronSessionSsr(async ({req, params}) => {
+	const user = req.session.user as User;
+
+	if (!user) return redirect("/login")
+	if (shouldRedirectHome(user)) return redirect("/")
+
+	const {id} = params as {id: string};
+
+	const entity = await getEntityWithRoles(id);
+	if (!entity) return redirect("/entities")
+
+	if (!doesEntityAllow(user, entity, "view_entities")) return redirect(`/entities`)
+
+	const linkedUsers = await (isAdmin(user) ? getUsers() : getEntitiesUsers(mapBy(user.entities, 'id'),
+		{$and: [{type: {$ne: "developer"}}, {type: {$ne: "admin"}}]}))
+	const entityUsers = await (isAdmin(user) ? getEntityUsers(id) : filterAllowedUsers(user, [entity]));
+
+	const usersWithRole = entityUsers.map((u) => {
+		const e = u.entities.find((e) => e.id === id);
+		return {...u, role: findBy(entity.roles, 'id', e?.role)};
+	});
+
+	return {
+		props: serialize({
+			user,
+			entity,
+			users: usersWithRole,
+			linkedUsers: linkedUsers.filter(x => x.id !== user.id && !mapBy(entityUsers, 'id').includes(x.id)),
+		}),
+	};
+}, sessionOptions);
+
+type UserWithRole = User & {role?: Role};
+
+interface Props {
+	user: User;
+	entity: EntityWithRoles;
+	users: UserWithRole[];
+	linkedUsers: User[];
+}
+
+export default function Home({user, entity, users, linkedUsers}: Props) {
+	const [isAdding, setIsAdding] = useState(false);
+	const [isLoading, setIsLoading] = useState(false);
+	const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
+
+	const router = useRouter();
+
+	const canRenameEntity = useEntityPermission(user, entity, "rename_entity")
+	const canViewRoles = useEntityPermission(user, entity, "view_entity_roles")
+	const canDeleteEntity = useEntityPermission(user, entity, "delete_entity")
+
+	const canAddMembers = useEntityPermission(user, entity, "add_to_entity")
+	const canRemoveMembers = useEntityPermission(user, entity, "remove_from_entity")
+
+	const canAssignRole = useEntityPermission(user, entity, "assign_to_role")
+
+	const toggleUser = (u: User) => setSelectedUsers((prev) => (prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]));
+
+	const removeParticipants = () => {
+		if (selectedUsers.length === 0) return;
+		if (!canRemoveMembers) return;
+		if (!confirm(`Are you sure you want to remove ${selectedUsers.length} member${selectedUsers.length === 1 ? "" : "s"} from this entity?`))
+			return;
+
+		setIsLoading(true);
+
+		axios
+			.patch(`/api/entities/${entity.id}/users`, {add: false, members: selectedUsers})
+			.then(() => {
+				toast.success("The entity has been updated successfully!");
+				router.replace(router.asPath);
+				setSelectedUsers([]);
+			})
+			.catch((e) => {
+				console.error(e);
+				toast.error("Something went wrong!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	const addParticipants = () => {
+		if (selectedUsers.length === 0) return;
+		if (!canAddMembers || !isAdding) return;
+		if (!confirm(`Are you sure you want to add ${selectedUsers.length} member${selectedUsers.length === 1 ? "" : "s"} to this entity?`)) return;
+
+		setIsLoading(true);
+		const defaultRole = findBy(entity.roles, 'isDefault', true)!
+
+		axios
+			.patch(`/api/entities/${entity.id}/users`, {add: true, members: selectedUsers, role: defaultRole.id})
+			.then(() => {
+				toast.success("The entity has been updated successfully!");
+				router.replace(router.asPath);
+				setIsAdding(false);
+			})
+			.catch((e) => {
+				console.error(e);
+				toast.error("Something went wrong!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	const renameGroup = () => {
+		if (!canRenameEntity) return;
+
+		const label = prompt("Rename this entity:", entity.label);
+		if (!label) return;
+
+		setIsLoading(true);
+		axios
+			.patch(`/api/entities/${entity.id}`, {label})
+			.then(() => {
+				toast.success("The entity has been updated successfully!");
+				router.replace(router.asPath);
+			})
+			.catch((e) => {
+				console.error(e);
+				toast.error("Something went wrong!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	const deleteGroup = () => {
+		if (!canDeleteEntity) return;
+		if (!confirm("Are you sure you want to delete this entity?")) return;
+
+		setIsLoading(true);
+
+		axios
+			.delete(`/api/entities/${entity.id}`)
+			.then(() => {
+				toast.success("This entity has been successfully deleted!");
+				router.replace("/entities");
+			})
+			.catch((e) => {
+				console.error(e);
+				toast.error("Something went wrong!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	const assignUsersToRole = (role: string) => {
+		if (!canAssignRole) return
+		if (selectedUsers.length === 0) return
+
+		setIsLoading(true);
+		axios
+			.post(`/api/roles/${role}/users`, {users: selectedUsers})
+			.then(() => {
+				toast.success("The role has been assigned successfully!");
+				router.replace(router.asPath);
+			})
+			.catch((e) => {
+				console.error(e);
+				toast.error("Something went wrong!");
+			})
+			.finally(() => setIsLoading(false));
+	}
+
+	const renderCard = (u: UserWithRole) => {
+		return (
+			<button
+				onClick={() => toggleUser(u)}
+				disabled={isAdding ? !canAddMembers : !canRemoveMembers}
+				key={u.id}
+				className={clsx(
+					"p-4 pr-6 h-48 relative border rounded-xl flex flex-col gap-3 justify-between text-left cursor-pointer",
+					"hover:border-mti-purple transition ease-in-out duration-300",
+					selectedUsers.includes(u.id) && "border-mti-purple",
+				)}>
+				<div className="flex items-center gap-2">
+					<div className="min-w-[3rem] min-h-[3rem] w-12 h-12 border flex items-center justify-center overflow-hidden rounded-full">
+						<img src={u.profilePicture} alt={u.name} />
+					</div>
+					<div className="flex flex-col">
+						<span className="font-semibold">{getUserName(u)}</span>
+
+						<span className="opacity-80 text-sm">
+							{USER_TYPE_LABELS[u.type]} {u.role && `- ${u.role.label}`}
+						</span>
+					</div>
+				</div>
+
+				<div className="flex flex-col gap-1">
+					<span className="flex items-center gap-2">
+						<Tooltip tooltip="E-mail address">
+							<BsEnvelopeFill />
+						</Tooltip>
+						{u.email}
+					</span>
+					<span className="flex items-center gap-2">
+						<Tooltip tooltip="Expiration Date">
+							<BsStopwatchFill />
+						</Tooltip>
+						{u.subscriptionExpirationDate ? moment(u.subscriptionExpirationDate).format("DD/MM/YYYY") : "Unlimited"}
+					</span>
+					<span className="flex items-center gap-2">
+						<Tooltip tooltip="Last Login">
+							<BsClockFill />
+						</Tooltip>
+						{u.lastLogin ? moment(u.lastLogin).format("DD/MM/YYYY - HH:mm") : "N/A"}
+					</span>
+				</div>
+			</button>
+		);
+	};
+
+	useEffect(() => setSelectedUsers([]), [isAdding]);
+
+	return (
+		<>
+			<Head>
+				<title>{entity.label} | EnCoach</title>
+				<meta
+					name="description"
+					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+				/>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+
+			<Layout user={user}>
+				<section className="flex flex-col gap-0">
+					<div className="flex flex-col gap-3">
+						<div className="flex items-end justify-between">
+							<div className="flex items-center gap-2">
+								<Link
+									href="/entities"
+									className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
+									<BsChevronLeft />
+								</Link>
+								<h2 className="font-bold text-2xl">{entity.label}</h2>
+							</div>
+						</div>
+						<div className="flex items-center gap-2">
+							<button
+								onClick={renameGroup}
+								disabled={isLoading || !canRenameEntity}
+								className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+								<BsTag />
+								<span className="text-xs">Rename Entity</span>
+							</button>
+							<button
+								onClick={() => router.push(`/entities/${entity.id}/roles`)}
+								disabled={isLoading || !canViewRoles}
+								className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+								<BsPerson />
+								<span className="text-xs">Edit Roles</span>
+							</button>
+							<button
+								onClick={deleteGroup}
+								disabled={isLoading || !canDeleteEntity}
+								className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+								<BsTrash />
+								<span className="text-xs">Delete Entity</span>
+							</button>
+						</div>
+					</div>
+					<Divider />
+					<div className="flex items-center justify-between mb-4">
+						<span className="font-semibold text-xl">Members ({users.length})</span>
+						{!isAdding && (
+							<div className="flex items-center gap-2">
+								<button
+									onClick={() => setIsAdding(true)}
+									disabled={isLoading || !canAddMembers}
+									className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+									<BsPlus />
+									<span className="text-xs">Add Members</span>
+								</button>
+
+								<Menu>
+									<MenuButton
+										disabled={isLoading || !canAssignRole || selectedUsers.length === 0}
+										className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+										<BsPerson />
+										<span className="text-xs">Assign Role</span>
+									</MenuButton>
+									<MenuItems anchor="bottom" className="bg-white rounded-xl shadow drop-shadow border mt-1 flex flex-col">
+										{entity.roles.map((role) => (
+											<MenuItem key={role.id}>
+												<button onClick={() => assignUsersToRole(role.id)} className="p-4 hover:bg-neutral-100 w-32">
+													{ role.label }
+												</button>
+											</MenuItem>
+										))}
+									</MenuItems>
+								</Menu>
+
+								<button
+									onClick={removeParticipants}
+									disabled={selectedUsers.length === 0 || isLoading || !canRemoveMembers}
+									className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+									<BsTrash />
+									<span className="text-xs">Remove Members</span>
+								</button>
+							</div>
+						)}
+						{isAdding && (
+							<div className="flex items-center gap-2">
+								<button
+									onClick={() => setIsAdding(false)}
+									disabled={isLoading}
+									className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-rose bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+									<BsX />
+									<span className="text-xs">Discard Selection</span>
+								</button>
+								<button
+									onClick={addParticipants}
+									disabled={selectedUsers.length === 0 || isLoading || !canAddMembers}
+									className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+									<BsPlus />
+									<span className="text-xs">Add Members ({selectedUsers.length})</span>
+								</button>
+							</div>
+						)}
+					</div>
+
+					<CardList<User | UserWithRole>
+						list={isAdding ? linkedUsers : users}
+						renderCard={renderCard}
+						searchFields={[["name"], ["email"], ["corporateInformation", "companyInformation", "name"], ["role", "label"], ["type"]]}
+					/>
+				</section>
+			</Layout>
+		</>
+	);
+}

src/pages/entities/[id]/roles/[role].tsx

@@ -0,0 +1,359 @@
+import Layout from "@/components/High/Layout";
+import Checkbox from "@/components/Low/Checkbox";
+import Separator from "@/components/Low/Separator";
+import { useEntityPermission } from "@/hooks/useEntityPermissions";
+import {EntityWithRoles, Role} from "@/interfaces/entity";
+import {User} from "@/interfaces/user";
+import {sessionOptions} from "@/lib/session";
+import { RolePermission } from "@/resources/entityPermissions";
+import { findBy, mapBy, redirect, serialize } from "@/utils";
+import { requestUser } from "@/utils/api";
+import {getEntityWithRoles} from "@/utils/entities.be";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import {doesEntityAllow} from "@/utils/permissions";
+import {countEntityUsers} from "@/utils/users.be";
+import axios from "axios";
+import {withIronSessionSsr} from "iron-session/next";
+import Head from "next/head";
+import Link from "next/link";
+import {useRouter} from "next/router";
+import {Divider} from "primereact/divider";
+import {useState} from "react";
+import {
+	BsCheck,
+	BsChevronLeft,
+	BsTag,
+	BsTrash,
+} from "react-icons/bs";
+import {toast} from "react-toastify";
+
+type PermissionLayout = {label: string, key: RolePermission}
+
+const USER_MANAGEMENT: PermissionLayout[] = [
+	{label: "View Students", key: "view_students"},
+	{label: "View Teachers", key: "view_teachers"},
+	{label: "View Corporate Accounts", key: "view_corporates"},
+	{label: "View Master Corporate Accounts", key: "view_mastercorporates"},
+	{label: "Edit Students", key: "edit_students"},
+	{label: "Edit Teachers", key: "edit_teachers"},
+	{label: "Edit Corporate Accounts", key: "edit_corporates"},
+	{label: "Edit Master Corporate Accounts", key: "edit_mastercorporates"},
+	{label: "Delete Students", key: "delete_students"},
+	{label: "Delete Teachers", key: "delete_teachers"},
+	{label: "Delete Corporate Accounts", key: "delete_corporates"},
+	{label: "Delete Master Corporate Accounts", key: "delete_mastercorporates"},
+]
+
+const EXAM_MANAGEMENT: PermissionLayout[] = [
+	{label: "View Reading", key: "view_reading"},
+	{label: "Generate Reading", key: "generate_reading"},
+	{label: "Delete Reading", key: "delete_reading"},
+	{label: "View Listening", key: "view_listening"},
+	{label: "Generate Listening", key: "generate_listening"},
+	{label: "Delete Listening", key: "delete_listening"},
+	{label: "View Writing", key: "view_writing"},
+	{label: "Generate Writing", key: "generate_writing"},
+	{label: "Delete Writing", key: "delete_writing"},
+	{label: "View Speaking", key: "view_speaking"},
+	{label: "Generate Speaking", key: "generate_speaking"},
+	{label: "Delete Speaking", key: "delete_speaking"},
+	{label: "View Level", key: "view_level"},
+	{label: "Generate Level", key: "generate_level"},
+	{label: "Delete Level", key: "delete_level"},
+]
+
+const CLASSROOM_MANAGEMENT: PermissionLayout[] = [
+	{label: "View Classrooms", key: "view_classrooms"},
+	{label: "Create Classrooms", key: "create_classroom"},
+	{label: "Rename Classrooms", key: "rename_classrooms"},
+	{label: "Add to Classroom", key: "add_to_classroom"},
+	{label: "Remove from Classroom", key: "remove_from_classroom"},
+	{label: "Delete Classroom", key: "delete_classroom"},
+]
+
+const ENTITY_MANAGEMENT: PermissionLayout[] = [
+	{label: "View Entities", key: "view_entities"},
+	{label: "Rename Entity", key: "rename_entity"},
+	{label: "Add to Entity", key: "add_to_entity"},
+	{label: "Remove from Entity", key: "remove_from_entity"},
+	{label: "Delete Entity", key: "delete_entity"},
+	{label: "View Entity Roles", key: "view_entity_roles"},
+	{label: "Create Entity Role", key: "create_entity_role"},
+	{label: "Rename Entity Role", key: "rename_entity_role"},
+	{label: "Edit Role Permissions", key: "edit_role_permissions"},
+	{label: "Assign Role to User", key: "assign_to_role"},
+	{label: "Delete Entity Role", key: "delete_entity_role"},
+]
+
+const ASSIGNMENT_MANAGEMENT: PermissionLayout[] = [
+	{label: "View Assignments", key: "view_assignments"},
+	{label: "Create Assignments", key: "create_assignment"},
+	{label: "Start Assignments", key: "start_assignment"},
+	{label: "Delete Assignments", key: "delete_assignment"},
+	{label: "Archive Assignments", key: "archive_assignment"},
+]
+
+export const getServerSideProps = withIronSessionSsr(async ({req, res, params}) => {
+	const user = await requestUser(req, res)
+	if (!user) return redirect("/login")
+
+	if (shouldRedirectHome(user)) return redirect("/")
+
+	const {id, role} = params as {id: string, role: string};
+
+	if (!mapBy(user.entities, 'id').includes(id) && !["admin", "developer"].includes(user.type)) return redirect("/entities")
+
+	const entity = await getEntityWithRoles(id);
+	if (!entity) return redirect("/entities")
+
+	const entityRole = findBy(entity.roles, 'id', role)
+	if (!entityRole) return redirect(`/entities/${id}/roles`)
+
+	if (!doesEntityAllow(user, entity, "view_entity_roles")) return redirect(`/entities/${id}`)
+
+	const userCount = await countEntityUsers(id, { "entities.role": role });
+
+	return {
+		props: serialize({
+			user,
+			entity,
+			role: entityRole,
+			userCount,
+		}),
+	};
+}, sessionOptions);
+
+interface Props {
+	user: User;
+	entity: EntityWithRoles;
+	role: Role;
+	userCount: number;
+}
+
+export default function Role({user, entity, role, userCount}: Props) {
+	const [permissions, setPermissions] = useState(role.permissions)
+	const [isLoading, setIsLoading] = useState(false);
+
+	const router = useRouter();
+
+	const canEditPermissions = useEntityPermission(user, entity, "edit_role_permissions")
+	const canRenameRole = useEntityPermission(user, entity, "rename_entity_role")
+	const canDeleteRole = useEntityPermission(user, entity, "delete_entity_role")
+
+	const renameRole = () => {
+		if (!canRenameRole) return;
+
+		const label = prompt("Rename this role:", role.label);
+		if (!label) return;
+
+		setIsLoading(true);
+		axios
+			.patch(`/api/roles/${role.id}`, {label})
+			.then(() => {
+				toast.success("The role has been updated successfully!");
+				router.replace(router.asPath);
+			})
+			.catch((e) => {
+				console.error(e);
+				toast.error("Something went wrong!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	const deleteRole = () => {
+		if (!canDeleteRole || role.isDefault) return;
+		if (!confirm("Are you sure you want to delete this role?")) return;
+
+		setIsLoading(true);
+
+		axios
+			.delete(`/api/roles/${role.id}`)
+			.then(() => {
+				toast.success("This role has been successfully deleted!");
+				router.replace(`/entities/${entity.id}/roles`);
+			})
+			.catch((e) => {
+				console.error(e);
+				toast.error("Something went wrong!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	const editPermissions = () => {
+		if (!canEditPermissions) return
+
+		setIsLoading(true);
+
+		axios
+			.patch(`/api/roles/${role.id}`, {permissions})
+			.then(() => {
+				toast.success("This role has been successfully updated!");
+				router.replace(router.asPath);
+			})
+			.catch((e) => {
+				console.error(e);
+				toast.error("Something went wrong!");
+			})
+			.finally(() => setIsLoading(false));
+	}
+
+	const togglePermissions = (p: RolePermission) => setPermissions(prev => prev.includes(p) ? prev.filter(x => x !== p) : [...prev, p])
+
+	return (
+		<>
+			<Head>
+				<title>{ role.label } | {entity.label} | EnCoach</title>
+				<meta
+					name="description"
+					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+				/>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<Layout user={user}>
+				<section className="flex flex-col gap-0">
+					<div className="flex flex-col gap-3">
+						<div className="flex items-end justify-between">
+							<div className="flex items-center gap-2">
+								<Link
+									href={`/entities/${entity.id}/roles`}
+									className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
+									<BsChevronLeft />
+								</Link>
+							<h2 className="font-bold text-2xl">{role.label} Role ({ userCount } users)</h2>
+							</div>
+						</div>
+						<div className="flex items-center justify-between w-full">
+							<div className="flex items-center gap-2">
+								<button
+									onClick={renameRole}
+									disabled={isLoading || !canRenameRole}
+									className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+									<BsTag />
+									<span className="text-xs">Rename Role</span>
+								</button>
+								<button
+									onClick={deleteRole}
+									disabled={isLoading || !canDeleteRole || role.isDefault}
+									className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+									<BsTrash />
+									<span className="text-xs">Delete Role</span>
+								</button>
+							</div>
+							<button
+								onClick={editPermissions}
+								disabled={isLoading || !canEditPermissions}
+								className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+								<BsCheck />
+								<span className="text-xs">Save Changes</span>
+							</button>
+						</div>
+					</div>
+					<Divider />
+
+					<section className="grid grid-cols-2 gap-16">
+						<div className="flex flex-col gap-4">
+							<div className="w-full flex items-center justify-between">
+								<b>User Management</b>
+								<Checkbox
+									isChecked={mapBy(USER_MANAGEMENT, 'key').every(k => permissions.includes(k))}
+									onChange={() => mapBy(USER_MANAGEMENT, 'key').forEach(togglePermissions)}
+								>
+									Select all
+								</Checkbox>
+							</div>
+							<Separator />
+							<div className="grid grid-cols-2 gap-4">
+							{USER_MANAGEMENT.map(({label, key}) => (
+								<Checkbox disabled={!canEditPermissions} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
+									{ label }
+								</Checkbox>
+							)) }
+							</div>
+						</div>
+
+						<div className="flex flex-col gap-4">
+							<div className="w-full flex items-center justify-between">
+								<b>Exam Management</b>
+								<Checkbox
+									isChecked={mapBy(EXAM_MANAGEMENT, 'key').every(k => permissions.includes(k))}
+									onChange={() => mapBy(EXAM_MANAGEMENT, 'key').forEach(togglePermissions)}
+								>
+									Select all
+								</Checkbox>
+							</div>
+							<Separator />
+							<div className="grid grid-cols-3 gap-4">
+							{EXAM_MANAGEMENT.map(({label, key}) => (
+								<Checkbox disabled={!canEditPermissions} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
+									{ label }
+								</Checkbox>
+							)) }
+							</div>
+						</div>
+
+						<div className="flex flex-col gap-4">
+							<div className="w-full flex items-center justify-between">
+								<b>Clasroom Management</b>
+								<Checkbox
+									isChecked={mapBy(CLASSROOM_MANAGEMENT, 'key').every(k => permissions.includes(k))}
+									onChange={() => mapBy(CLASSROOM_MANAGEMENT, 'key').forEach(togglePermissions)}
+								>
+									Select all
+								</Checkbox>
+							</div>
+							<Separator />
+							<div className="grid grid-cols-2 gap-4">
+							{CLASSROOM_MANAGEMENT.map(({label, key}) => (
+								<Checkbox disabled={!canEditPermissions} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
+									{ label }
+								</Checkbox>
+							)) }
+							</div>
+						</div>
+
+						<div className="flex flex-col gap-4">
+							<div className="w-full flex items-center justify-between">
+								<b>Entity Management</b>
+								<Checkbox
+									isChecked={mapBy(ENTITY_MANAGEMENT, 'key').every(k => permissions.includes(k))}
+									onChange={() => mapBy(ENTITY_MANAGEMENT, 'key').forEach(togglePermissions)}
+								>
+									Select all
+								</Checkbox>
+							</div>
+							<Separator />
+							<div className="grid grid-cols-2 gap-4">
+							{ENTITY_MANAGEMENT.map(({label, key}) => (
+								<Checkbox disabled={!canEditPermissions} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
+									{ label }
+								</Checkbox>
+							)) }
+							</div>
+						</div>
+
+						<div className="flex flex-col gap-4">
+							<div className="w-full flex items-center justify-between">
+								<b>Assignment Management</b>
+								<Checkbox
+									isChecked={mapBy(ASSIGNMENT_MANAGEMENT, 'key').every(k => permissions.includes(k))}
+									onChange={() => mapBy(ASSIGNMENT_MANAGEMENT, 'key').forEach(togglePermissions)}
+								>
+									Select all
+								</Checkbox>
+							</div>
+							<Separator />
+							<div className="grid grid-cols-2 gap-4">
+							{ASSIGNMENT_MANAGEMENT.map(({label, key}) => (
+								<Checkbox disabled={!canEditPermissions} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
+									{ label }
+								</Checkbox>
+							)) }
+							</div>
+						</div>
+					</section>
+				</section>
+			</Layout>
+		</>
+	);
+}

src/pages/entities/[id]/roles/index.tsx

@@ -0,0 +1,158 @@
+/* eslint-disable @next/next/no-img-element */
+import CardList from "@/components/High/CardList";
+import Layout from "@/components/High/Layout";
+import Tooltip from "@/components/Low/Tooltip";
+import { useEntityPermission } from "@/hooks/useEntityPermissions";
+import {useListSearch} from "@/hooks/useListSearch";
+import usePagination from "@/hooks/usePagination";
+import {Entity, EntityWithRoles, Role} from "@/interfaces/entity";
+import {GroupWithUsers, User} from "@/interfaces/user";
+import {sessionOptions} from "@/lib/session";
+import {USER_TYPE_LABELS} from "@/resources/user";
+import { redirect, serialize } from "@/utils";
+import { requestUser } from "@/utils/api";
+import {getEntityWithRoles} from "@/utils/entities.be";
+import {convertToUsers, getGroup} from "@/utils/groups.be";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import {checkAccess, doesEntityAllow, getTypesOfUser} from "@/utils/permissions";
+import {getUserName} from "@/utils/users";
+import {getEntityUsers, getLinkedUsers, getSpecificUsers} from "@/utils/users.be";
+import axios from "axios";
+import clsx from "clsx";
+import {withIronSessionSsr} from "iron-session/next";
+import moment from "moment";
+import Head from "next/head";
+import Link from "next/link";
+import {useRouter} from "next/router";
+import {Divider} from "primereact/divider";
+import {useEffect, useMemo, useState} from "react";
+import {
+	BsChevronLeft,
+	BsClockFill,
+	BsEnvelopeFill,
+	BsFillPersonVcardFill,
+	BsPlus,
+	BsSquare,
+	BsStopwatchFill,
+	BsTag,
+	BsTrash,
+	BsX,
+} from "react-icons/bs";
+import {toast, ToastContainer} from "react-toastify";
+
+export const getServerSideProps = withIronSessionSsr(async ({req, res, params}) => {
+	const user = await requestUser(req, res)
+	if (!user) return redirect("/login")
+
+	if (shouldRedirectHome(user)) return redirect("/")
+
+	const {id} = params as {id: string};
+
+	const entity = await getEntityWithRoles(id);
+	if (!entity) return redirect("/entities")
+	if (!doesEntityAllow(user, entity, "view_entity_roles")) return redirect(`/entities/${id}`)
+
+	const users = await getEntityUsers(id);
+
+	return {
+		props: serialize({
+			user,
+			entity,
+			roles: entity.roles,
+			users,
+		}),
+	};
+}, sessionOptions);
+
+interface Props {
+	user: User;
+	entity: EntityWithRoles;
+	roles: Role[];
+	users: User[];
+}
+
+export default function Home({user, entity, roles, users}: Props) {
+	const router = useRouter();
+
+	const canCreateRole = useEntityPermission(user, entity, "create_entity_role")
+
+	const createRole = () => {
+		if (!canCreateRole) return
+		const label = prompt("What is the name of this new role?")
+		if (!label) return
+
+		axios.post<Role>('/api/roles', {label, permissions: [], entityID: entity.id})
+			.then((result) => {
+				toast.success(`'${label}' role created successfully!`)
+				router.push(`/entities/${entity.id}/roles/${result.data.id}`)
+			})
+			.catch(() => {
+				toast.error("Something went wrong!")
+			})
+	}
+
+	const firstCard = () => (
+		<button
+			onClick={createRole}
+			className="p-4 border hover:text-mti-purple rounded-xl flex flex-col items-center justify-center gap-0 hover:border-mti-purple transition ease-in-out duration-300 text-left cursor-pointer">
+			<BsPlus size={40} />
+			<span className="font-semibold">Create Role</span>
+		</button>
+	);
+
+	const renderCard = (role: Role) => {
+		const usersWithRole = users.filter((x) => x.entities.map((x) => x.role).includes(role.id));
+
+		return (
+			<Link
+				href={`/entities/${entity.id}/roles/${role.id}`}
+				key={role.id}
+				className={clsx(
+					"p-4 pr-6 h-fit relative border rounded-xl flex flex-col gap-3  text-left cursor-pointer",
+					"hover:border-mti-purple transition ease-in-out duration-300",
+				)}>
+				<div className="flex flex-col">
+					<span className="font-semibold">{role.label}</span>
+					<span className="opacity-80 text-sm">{usersWithRole.length} members</span>
+				</div>
+
+				<b>{role.permissions.length} Permissions</b>
+			</Link>
+		);
+	};
+
+	return (
+		<>
+			<Head>
+				<title>{entity.label} | EnCoach</title>
+				<meta
+					name="description"
+					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+				/>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<ToastContainer />
+			<Layout user={user}>
+				<section className="flex flex-col gap-0">
+					<div className="flex flex-col gap-3">
+						<div className="flex items-end justify-between">
+							<div className="flex items-center gap-2">
+								<Link
+									href={`/entities/${entity.id}`}
+									className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
+									<BsChevronLeft />
+								</Link>
+								<h2 className="font-bold text-2xl">{entity.label}</h2>
+							</div>
+						</div>
+					</div>
+					<Divider />
+					<span className="font-semibold text-xl mb-4">Roles</span>
+
+					<CardList list={roles} searchFields={[["label"]]} renderCard={renderCard} firstCard={canCreateRole ? firstCard : undefined} />
+				</section>
+			</Layout>
+		</>
+	);
+}

src/pages/entities/create.tsx

@@ -0,0 +1,176 @@
+/* eslint-disable @next/next/no-img-element */
+import Layout from "@/components/High/Layout";
+import Input from "@/components/Low/Input";
+import Select from "@/components/Low/Select";
+import Tooltip from "@/components/Low/Tooltip";
+import {useListSearch} from "@/hooks/useListSearch";
+import usePagination from "@/hooks/usePagination";
+import {Entity, EntityWithRoles} from "@/interfaces/entity";
+import {User} from "@/interfaces/user";
+import {sessionOptions} from "@/lib/session";
+import {USER_TYPE_LABELS} from "@/resources/user";
+import {mapBy, redirect, serialize} from "@/utils";
+import {getEntities, getEntitiesWithRoles} from "@/utils/entities.be";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import {getUserName} from "@/utils/users";
+import {getLinkedUsers, getUsers} from "@/utils/users.be";
+import axios from "axios";
+import clsx from "clsx";
+import {withIronSessionSsr} from "iron-session/next";
+import moment from "moment";
+import Head from "next/head";
+import Link from "next/link";
+import {useRouter} from "next/router";
+import {Divider} from "primereact/divider";
+import {useState} from "react";
+import {BsCheck, BsChevronLeft, BsClockFill, BsEnvelopeFill, BsStopwatchFill} from "react-icons/bs";
+import {toast, ToastContainer} from "react-toastify";
+import { requestUser } from "@/utils/api";
+import { findAllowedEntities } from "@/utils/permissions";
+
+export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
+	const user = await requestUser(req, res)
+	if (!user) return redirect("/login")
+
+	if (shouldRedirectHome(user)) return redirect("/")
+	if (!["admin", "developer"].includes(user.type)) return redirect("/entities")
+
+	const users = await getUsers()
+
+	return {
+		props: serialize({user, users: users.filter((x) => x.id !== user.id)}),
+	};
+}, sessionOptions);
+
+interface Props {
+	user: User;
+	users: User[];
+}
+
+export default function Home({user, users}: Props) {
+	const [isLoading, setIsLoading] = useState(false);
+	const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
+	const [label, setLabel] = useState("");
+
+	const {rows, renderSearch} = useListSearch<User>([["name"], ["corporateInformation", "companyInformation", "name"]], users);
+	const {items, renderMinimal} = usePagination<User>(rows, 16);
+
+	const router = useRouter();
+
+	const createGroup = () => {
+		if (!label.trim()) return;
+		if (!confirm(`Are you sure you want to create this entity with ${selectedUsers.length} members?`)) return;
+
+		setIsLoading(true);
+
+		axios
+			.post<Entity>(`/api/entities`, {label, members: selectedUsers})
+			.then((result) => {
+				toast.success("Your entity has been created successfully!");
+				router.replace(`/entities/${result.data.id}`);
+			})
+			.catch((e) => {
+				console.error(e);
+				toast.error("Something went wrong!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	const toggleUser = (u: User) => setSelectedUsers((prev) => (prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]));
+
+	return (
+		<>
+			<Head>
+				<title>Create Entity | EnCoach</title>
+				<meta
+					name="description"
+					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+				/>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<ToastContainer />
+			<Layout user={user}>
+				<section className="flex flex-col gap-0">
+					<div className="flex gap-3 justify-between">
+						<div className="flex items-center gap-2">
+							<Link
+								href="/classrooms"
+								className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
+								<BsChevronLeft />
+							</Link>
+							<h2 className="font-bold text-2xl">Create Entity</h2>
+						</div>
+						<div className="flex items-center gap-4">
+							<button
+								onClick={createGroup}
+								disabled={!label.trim() || isLoading}
+								className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+								<BsCheck />
+								<span className="text-xs">Create Entity</span>
+							</button>
+						</div>
+					</div>
+					<Divider />
+					<div className="flex flex-col gap-4 w-full">
+						<span className="font-semibold text-xl">Entity Label:</span>
+						<Input name="name" onChange={setLabel} type="text" placeholder="Entity A" />
+					</div>
+					<Divider />
+					<div className="flex items-center justify-between mb-4">
+						<span className="font-semibold text-xl">Members ({selectedUsers.length} selected):</span>
+					</div>
+					<div className="w-full flex items-center gap-4">
+						{renderSearch()}
+						{renderMinimal()}
+					</div>
+				</section>
+
+				<section className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+					{items.map((u) => (
+						<button
+							onClick={() => toggleUser(u)}
+							disabled={isLoading}
+							key={u.id}
+							className={clsx(
+								"p-4 pr-6 h-48 relative border rounded-xl flex flex-col gap-3 justify-between text-left cursor-pointer",
+								"hover:border-mti-purple transition ease-in-out duration-300",
+								selectedUsers.includes(u.id) && "border-mti-purple",
+							)}>
+							<div className="flex items-center gap-2">
+								<div className="min-w-[3rem] min-h-[3rem] w-12 h-12 border flex items-center justify-center overflow-hidden rounded-full">
+									<img src={u.profilePicture} alt={u.name} />
+								</div>
+								<div className="flex flex-col">
+									<span className="font-semibold">{getUserName(u)}</span>
+									<span className="opacity-80 text-sm">{USER_TYPE_LABELS[u.type]}</span>
+								</div>
+							</div>
+
+							<div className="flex flex-col gap-1">
+								<span className="flex items-center gap-2">
+									<Tooltip tooltip="E-mail address">
+										<BsEnvelopeFill />
+									</Tooltip>
+									{u.email}
+								</span>
+								<span className="flex items-center gap-2">
+									<Tooltip tooltip="Expiration Date">
+										<BsStopwatchFill />
+									</Tooltip>
+									{u.subscriptionExpirationDate ? moment(u.subscriptionExpirationDate).format("DD/MM/YYYY") : "Unlimited"}
+								</span>
+								<span className="flex items-center gap-2">
+									<Tooltip tooltip="Last Login">
+										<BsClockFill />
+									</Tooltip>
+									{u.lastLogin ? moment(u.lastLogin).format("DD/MM/YYYY - HH:mm") : "N/A"}
+								</span>
+							</div>
+						</button>
+					))}
+				</section>
+			</Layout>
+		</>
+	);
+}

src/pages/entities/index.tsx

@@ -0,0 +1,106 @@
+/* eslint-disable @next/next/no-img-element */
+import Head from "next/head";
+import {withIronSessionSsr} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {ToastContainer} from "react-toastify";
+import Layout from "@/components/High/Layout";
+import {GroupWithUsers, User} from "@/interfaces/user";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import {getUserName} from "@/utils/users";
+import {convertToUsers, getGroupsForUser} from "@/utils/groups.be";
+import {countEntityUsers, getEntityUsers, getSpecificUsers} from "@/utils/users.be";
+import {checkAccess, findAllowedEntities, getTypesOfUser} from "@/utils/permissions";
+import Link from "next/link";
+import {uniq} from "lodash";
+import {BsPlus} from "react-icons/bs";
+import CardList from "@/components/High/CardList";
+import {getEntitiesWithRoles} from "@/utils/entities.be";
+import {EntityWithRoles} from "@/interfaces/entity";
+import Separator from "@/components/Low/Separator";
+import { requestUser } from "@/utils/api";
+import { mapBy, redirect, serialize } from "@/utils";
+
+type EntitiesWithCount = {entity: EntityWithRoles; users: User[]; count: number};
+
+export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
+	const user = await requestUser(req, res)
+	if (!user) return redirect("/login")
+
+	if (shouldRedirectHome(user)) return redirect("/")
+
+	const entityIDs = mapBy(user.entities, 'id')
+	const entities = await getEntitiesWithRoles(["admin", "developer"].includes(user.type) ? undefined : entityIDs);
+	const allowedEntities = findAllowedEntities(user, entities, 'view_entities')
+
+	const entitiesWithCount = await Promise.all(
+		allowedEntities.map(async (e) => ({entity: e, count: await countEntityUsers(e.id), users: await getEntityUsers(e.id, 5)})),
+	);
+
+	return {
+		props: serialize({user, entities: entitiesWithCount}),
+	};
+}, sessionOptions);
+
+const SEARCH_FIELDS: string[][] = [["entity", "label"]];
+
+interface Props {
+	user: User;
+	entities: EntitiesWithCount[];
+}
+export default function Home({user, entities}: Props) {
+	const renderCard = ({entity, users, count}: EntitiesWithCount) => (
+		<Link
+			href={`/entities/${entity.id}`}
+			key={entity.id}
+			className="p-4 border rounded-xl flex flex-col gap-2 hover:border-mti-purple transition ease-in-out duration-300 text-left cursor-pointer">
+			<span>
+				<b>Entity: </b>
+				{entity.label}
+			</span>
+			<b>Members ({count}): </b>
+			<span>
+				{users.map(getUserName).join(", ")}
+				{count > 5 ? <span className="opacity-60"> and {count - 5} more</span> : ""}
+			</span>
+		</Link>
+	);
+
+	const firstCard = () => (
+		<Link
+			href={`/entities/create`}
+			className="p-4 border hover:text-mti-purple rounded-xl flex flex-col items-center justify-center gap-0 hover:border-mti-purple transition ease-in-out duration-300 text-left cursor-pointer">
+			<BsPlus size={40} />
+			<span className="font-semibold">Create Entity</span>
+		</Link>
+	);
+
+	return (
+		<>
+			<Head>
+				<title>Entities | EnCoach</title>
+				<meta
+					name="description"
+					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+				/>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<ToastContainer />
+			<Layout user={user} className="!gap-4">
+				<section className="flex flex-col gap-4 w-full h-full">
+					<div className="flex flex-col gap-4">
+						<h2 className="font-bold text-2xl">Entities</h2>
+						<Separator />
+					</div>
+
+					<CardList<EntitiesWithCount>
+						list={entities}
+						searchFields={SEARCH_FIELDS}
+						renderCard={renderCard}
+						firstCard={["admin", "developer"].includes(user.type) ? firstCard : undefined}
+					/>
+				</section>
+			</Layout>
+		</>
+	);
+}

src/pages/exam.tsx

@@ -6,38 +6,106 @@ import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import ExamPage from "./(exam)/ExamPage";
 import Head from "next/head";
 import {User} from "@/interfaces/user";
+import { filterBy, findBy, redirect, serialize } from "@/utils";
+import { requestUser } from "@/utils/api";
+import { getAssignment, getAssignments, getAssignmentsByAssignee } from "@/utils/assignments.be";
+import { Assignment } from "@/interfaces/results";
+import useExamStore from "@/stores/examStore";
+import { useEffect } from "react";
+import { Exam } from "@/interfaces/exam";
+import { getExamsByIds } from "@/utils/exams.be";
+import { sortByModule } from "@/utils/moduleUtils";
+import { uniqBy } from "lodash";
+import { useRouter } from "next/router";
+import { getSessionByAssignment, getSessionsByUser } from "@/utils/sessions.be";
+import { Session } from "@/hooks/useSessions";
+import moment from "moment";
 
-export const getServerSideProps = withIronSessionSsr(({req, res}) => {
-	const user = req.session.user;
+export const getServerSideProps = withIronSessionSsr(async ({req, res, query}) => {
+	const user = await requestUser(req, res)
+	const destination = Buffer.from(req.url || "/").toString("base64")
+	if (!user) return redirect(`/login?destination=${destination}`)
+
+	if (shouldRedirectHome(user)) return redirect("/")
+
+	const {assignment: assignmentID} = query as {assignment?: string}
+
+	if (assignmentID) {
+		const assignment = await getAssignment(assignmentID)
+
+		if (!assignment) return redirect("/exam")
+		if (!assignment.assignees.includes(user.id) && !["admin", "developer"].includes(user.type))
+			return redirect("/exam")
+
+		if (filterBy(assignment.results, 'user', user.id).length > 0)
+			return redirect("/exam")
+
+		const exams = await getExamsByIds(uniqBy(assignment.exams, "id"))
+		const session = await getSessionByAssignment(assignmentID)
 
-	if (!user) {
 		return {
-			redirect: {
-				destination: "/login",
-				permanent: false,
-			},
-		};
-	}
-
-	if (shouldRedirectHome(user)) {
-		return {
-			redirect: {
-				destination: "/",
-				permanent: false,
-			},
-		};
+			props: serialize({user, assignment, exams, session: session ?? undefined})
+		}
 	}
 
 	return {
-		props: {user: req.session.user},
+		props: serialize({user}),
 	};
 }, sessionOptions);
 
 interface Props {
 	user: User;
+	assignment?: Assignment
+	exams?: Exam[]
+	session?: Session
 }
 
-export default function Page({user}: Props) {
+export default function Page({user, assignment, exams = [], session}: Props) {
+	const router = useRouter()
+
+	const state = useExamStore((state) => state)
+
+	useEffect(() => {
+		if (assignment && exams.length > 0 && !state.assignment && !session) {
+			if (moment(assignment.startDate).isAfter(moment()) || moment(assignment.endDate).isBefore(moment())) return
+
+			state.setUserSolutions([]);
+			state.setShowSolutions(false);
+			state.setAssignment(assignment);
+			state.setExams(exams.sort(sortByModule));
+			state.setSelectedModules(
+				exams
+					.map((x) => x!)
+					.sort(sortByModule)
+					.map((x) => x!.module),
+			);
+
+			router.replace(router.asPath)
+		}
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [assignment, exams, session])
+
+	useEffect(() => {
+		if (assignment && exams.length > 0 && !state.assignment && !!session) {
+			state.setShuffles(session.userSolutions.map((x) => ({exerciseID: x.exercise, shuffles: x.shuffleMaps ? x.shuffleMaps : []})));
+			state.setSelectedModules(session.selectedModules);
+			state.setExam(session.exam);
+			state.setExams(session.exams);
+			state.setSessionId(session.sessionId);
+			state.setAssignment(session.assignment);
+			state.setExerciseIndex(session.exerciseIndex);
+			state.setPartIndex(session.partIndex);
+			state.setModuleIndex(session.moduleIndex);
+			state.setTimeSpent(session.timeSpent);
+			state.setUserSolutions(session.userSolutions);
+			state.setShowSolutions(false);
+			state.setQuestionIndex(session.questionIndex);
+
+			router.replace(router.asPath)
+		}
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [assignment, exams, session])
+
 	return (
 		<>
 			<Head>
@@ -49,7 +117,7 @@ export default function Page({user}: Props) {
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-			<ExamPage page="exams" user={user} />
+			<ExamPage page="exams" user={user} hideSidebar={!!assignment} />
 		</>
 	);
 }

src/pages/exercises.tsx

@@ -6,42 +6,111 @@ import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import ExamPage from "./(exam)/ExamPage";
 import Head from "next/head";
 import {User} from "@/interfaces/user";
+import { filterBy, findBy, redirect, serialize } from "@/utils";
+import { requestUser } from "@/utils/api";
+import { getAssignment, getAssignments, getAssignmentsByAssignee } from "@/utils/assignments.be";
+import { Assignment } from "@/interfaces/results";
+import useExamStore from "@/stores/examStore";
+import { useEffect } from "react";
+import { Exam } from "@/interfaces/exam";
+import { getExamsByIds } from "@/utils/exams.be";
+import { sortByModule } from "@/utils/moduleUtils";
+import { uniqBy } from "lodash";
+import { useRouter } from "next/router";
+import { getSessionByAssignment, getSessionsByUser } from "@/utils/sessions.be";
+import { Session } from "@/hooks/useSessions";
+import moment from "moment";
 
-export const getServerSideProps = withIronSessionSsr(({req, res}) => {
-	const user = req.session.user;
+export const getServerSideProps = withIronSessionSsr(async ({req, res, query}) => {
+	const user = await requestUser(req, res)
+	const destination = Buffer.from(req.url || "/").toString("base64")
+	if (!user) return redirect(`/login?destination=${destination}`)
+
+	if (shouldRedirectHome(user)) return redirect("/")
+
+	const {assignment: assignmentID} = query as {assignment?: string}
+
+	if (assignmentID) {
+		const assignment = await getAssignment(assignmentID)
+
+		if (!assignment) return redirect("/exam")
+		if (!["admin", "developer"].includes(user.type) && !assignment.assignees.includes(user.id)) return redirect("/exercises")
+
+		const exams = await getExamsByIds(uniqBy(assignment.exams, "id"))
+		const session = await getSessionByAssignment(assignmentID)
+
+		if (
+			filterBy(assignment.results, 'user', user.id) ||
+			moment(assignment.startDate).isBefore(moment()) ||
+			moment(assignment.endDate).isAfter(moment())
+		)
+			return redirect("/exam")
 
-	if (!user) {
 		return {
-			redirect: {
-				destination: "/login",
-				permanent: false,
-			},
-		};
-	}
-
-	if (shouldRedirectHome(user)) {
-		return {
-			redirect: {
-				destination: "/",
-				permanent: false,
-			},
-		};
+			props: serialize({user, assignment, exams, session})
+		}
 	}
 
 	return {
-		props: {user: req.session.user},
+		props: serialize({user}),
 	};
 }, sessionOptions);
 
 interface Props {
 	user: User;
+	assignment?: Assignment
+	exams?: Exam[]
+	session?: Session
 }
 
-export default function Page({user}: Props) {
+export default function Page({user, assignment, exams = [], session}: Props) {
+	const router = useRouter()
+
+	const state = useExamStore((state) => state)
+
+	useEffect(() => {
+		if (assignment && exams.length > 0 && !state.assignment && !session) {
+			state.setUserSolutions([]);
+			state.setShowSolutions(false);
+			state.setAssignment(assignment);
+			state.setExams(exams.sort(sortByModule));
+			state.setSelectedModules(
+				exams
+					.map((x) => x!)
+					.sort(sortByModule)
+					.map((x) => x!.module),
+			);
+
+			router.replace(router.asPath)
+		}
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [assignment, exams, session])
+
+	useEffect(() => {
+		if (assignment && exams.length > 0 && !state.assignment && !!session) {
+			state.setShuffles(session.userSolutions.map((x) => ({exerciseID: x.exercise, shuffles: x.shuffleMaps ? x.shuffleMaps : []})));
+			state.setSelectedModules(session.selectedModules);
+			state.setExam(session.exam);
+			state.setExams(session.exams);
+			state.setSessionId(session.sessionId);
+			state.setAssignment(session.assignment);
+			state.setExerciseIndex(session.exerciseIndex);
+			state.setPartIndex(session.partIndex);
+			state.setModuleIndex(session.moduleIndex);
+			state.setTimeSpent(session.timeSpent);
+			state.setUserSolutions(session.userSolutions);
+			state.setShowSolutions(false);
+			state.setQuestionIndex(session.questionIndex);
+
+			router.replace(router.asPath)
+		}
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [assignment, exams, session])
+
 	return (
 		<>
 			<Head>
-				<title>Exercises | EnCoach</title>
+				<title>Exams | EnCoach</title>
 				<meta
 					name="description"
 					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
@@ -49,7 +118,7 @@ export default function Page({user}: Props) {
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-			<ExamPage page="exercises" user={user} />
+			<ExamPage page="exams" user={user} hideSidebar={!!assignment} />
 		</>
 	);
 }

src/pages/generation.tsx

@@ -16,30 +16,18 @@ import useExamEditorStore from "@/stores/examEditor";
 import ExamEditorStore from "@/stores/examEditor/types";
 import ExamEditor from "@/components/ExamEditor";
 import MultipleAudioUploader from "@/components/ExamEditor/Shared/AudioEdit";
+import { redirect, serialize } from "@/utils";
+import { requestUser } from "@/utils/api";
 
-export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
-	const user = req.session.user;
+export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
+	const user = await requestUser(req, res)
+	if (!user) return redirect("/login")
 
-	if (!user) {
-		return {
-			redirect: {
-				destination: "/login",
-				permanent: false,
-			},
-		};
-	}
-
-	if (shouldRedirectHome(user) || !checkAccess(user, ["admin", "mastercorporate", "developer", "corporate"])) {
-		return {
-			redirect: {
-				destination: "/",
-				permanent: false,
-			},
-		};
-	}
+	if (shouldRedirectHome(user) || !checkAccess(user, ["admin", "mastercorporate", "developer", "corporate"]))
+		return redirect("/")
 
 	return {
-		props: { user: req.session.user },
+		props: serialize({user}),
 	};
 }, sessionOptions);