Merge, do not push to develop yet, Listening.tsx is not updated

2024-11-26 10:33:02 +00:00
parent 2ed4e6509e 39ff336af5
commit de08164dd8
44 changed files with 1989 additions and 1452 deletions
--- a/src/pages/(admin)/CorporateGradingSystem.tsx
+++ b/src/pages/(admin)/CorporateGradingSystem.tsx
@@ -1,12 +1,16 @@
 import Button from "@/components/Low/Button";
 import Input from "@/components/Low/Input";
-import {Grading, Step} from "@/interfaces";
-import {User} from "@/interfaces/user";
-import {CEFR_STEPS, GENERAL_STEPS, IELTS_STEPS, TOFEL_STEPS} from "@/resources/grading";
+import Select from "@/components/Low/Select";
+import { Grading, Step } from "@/interfaces";
+import { Entity } from "@/interfaces/entity";
+import { User } from "@/interfaces/user";
+import { CEFR_STEPS, GENERAL_STEPS, IELTS_STEPS, TOFEL_STEPS } from "@/resources/grading";
+import { checkAccess } from "@/utils/permissions";
 import axios from "axios";
-import {useEffect, useState} from "react";
-import {BsPlusCircle, BsTrash} from "react-icons/bs";
-import {toast} from "react-toastify";
+import clsx from "clsx";
+import { useEffect, useState } from "react";
+import { BsPlusCircle, BsTrash } from "react-icons/bs";
+import { toast } from "react-toastify";

 const areStepsOverlapped = (steps: Step[]) => {
 	for (let i = 0; i < steps.length; i++) {
@@ -21,9 +25,24 @@ const areStepsOverlapped = (steps: Step[]) => {
 	return false;
 };

-export default function CorporateGradingSystem({user, defaultSteps, mutate}: {user: User; defaultSteps: Step[]; mutate: (steps: Step[]) => void}) {
+interface Props {
+	user: User;
+	entitiesGrading: Grading[];
+	entities: Entity[]
+	mutate: () => void
+}
+
+export default function CorporateGradingSystem({ user, entitiesGrading = [], entities = [], mutate }: Props) {
+	const [entity, setEntity] = useState(entitiesGrading[0]?.entity || undefined)
 	const [isLoading, setIsLoading] = useState(false);
-	const [steps, setSteps] = useState<Step[]>(defaultSteps || []);
+	const [steps, setSteps] = useState<Step[]>([]);
+
+	useEffect(() => {
+		if (entity) {
+			const entitySteps = entitiesGrading.find(e => e.entity === entity)!.steps
+			setSteps(entitySteps || [])
+		}
+	}, [entitiesGrading, entity])

 	const saveGradingSystem = () => {
 		if (!steps.every((x) => x.min < x.max)) return toast.error("One of your steps has a minimum threshold inferior to its superior threshold.");
@@ -37,9 +56,9 @@ export default function CorporateGradingSystem({user, defaultSteps, mutate}: {us

 		setIsLoading(true);
 		axios
-			.post("/api/grading", {user: user.id, steps})
+			.post("/api/grading", { user: user.id, entity, steps })
 			.then(() => toast.success("Your grading system has been saved!"))
-			.then(() => mutate(steps))
+			.then(mutate)
 			.catch(() => toast.error("Something went wrong, please try again later"))
 			.finally(() => setIsLoading(false));
 	};
@@ -47,6 +66,15 @@ export default function CorporateGradingSystem({user, defaultSteps, mutate}: {us
 	return (
 		<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
 			<label className="font-normal text-base text-mti-gray-dim">Grading System</label>
+			<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>

 			<label className="font-normal text-base text-mti-gray-dim">Preset Systems</label>
 			<div className="grid grid-cols-4 gap-4">
@@ -73,7 +101,7 @@ export default function CorporateGradingSystem({user, defaultSteps, mutate}: {us
 								value={step.min}
 								type="number"
 								disabled={index === 0 || isLoading}
-								onChange={(e) => setSteps((prev) => prev.map((x, i) => (i === index ? {...x, min: parseInt(e)} : x)))}
+								onChange={(e) => setSteps((prev) => prev.map((x, i) => (i === index ? { ...x, min: parseInt(e) } : x)))}
 								name="min"
 							/>
 							<Input
@@ -81,7 +109,7 @@ export default function CorporateGradingSystem({user, defaultSteps, mutate}: {us
 								value={step.label}
 								type="text"
 								disabled={isLoading}
-								onChange={(e) => setSteps((prev) => prev.map((x, i) => (i === index ? {...x, label: e} : x)))}
+								onChange={(e) => setSteps((prev) => prev.map((x, i) => (i === index ? { ...x, label: e } : x)))}
 								name="min"
 							/>
 							<Input
@@ -89,7 +117,7 @@ export default function CorporateGradingSystem({user, defaultSteps, mutate}: {us
 								value={step.max}
 								type="number"
 								disabled={index === steps.length - 1 || isLoading}
-								onChange={(e) => setSteps((prev) => prev.map((x, i) => (i === index ? {...x, max: parseInt(e)} : x)))}
+								onChange={(e) => setSteps((prev) => prev.map((x, i) => (i === index ? { ...x, max: parseInt(e) } : x)))}
 								name="max"
 							/>
 						</div>
@@ -110,7 +138,7 @@ export default function CorporateGradingSystem({user, defaultSteps, mutate}: {us
 							className="w-full flex items-center justify-center"
 							disabled={isLoading}
 							onClick={() => {
-								const item = {min: steps[index === 0 ? 0 : index - 1].max + 1, max: steps[index + 1].min - 1, label: ""};
+								const item = { min: steps[index === 0 ? 0 : index - 1].max + 1, max: steps[index + 1].min - 1, label: "" };
 								setSteps((prev) => [...prev.slice(0, index + 1), item, ...prev.slice(index + 1, steps.length)]);
 							}}>
 							<BsPlusCircle />
--- a/src/pages/(admin)/Lists/ExamList.tsx
+++ b/src/pages/(admin)/Lists/ExamList.tsx
@@ -1,30 +1,30 @@
-import {useMemo, useState} from "react";
-import {PERMISSIONS} from "@/constants/userPermissions";
+import { useMemo, useState } from "react";
+import { PERMISSIONS } from "@/constants/userPermissions";
 import useExams from "@/hooks/useExams";
 import useUsers from "@/hooks/useUsers";
-import {Module} from "@/interfaces";
-import {Exam} from "@/interfaces/exam";
-import {Type, User} from "@/interfaces/user";
+import { Module } from "@/interfaces";
+import { Exam } from "@/interfaces/exam";
+import { Type, User } from "@/interfaces/user";
 import useExamStore from "@/stores/exam";
-import {getExamById} from "@/utils/exams";
-import {countExercises} from "@/utils/moduleUtils";
-import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import { getExamById } from "@/utils/exams";
+import { countExercises } from "@/utils/moduleUtils";
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import axios from "axios";
 import clsx from "clsx";
-import {capitalize, uniq} from "lodash";
-import {useRouter} from "next/router";
-import {BsBan, BsBanFill, BsCheck, BsCircle, BsPencil, BsStop, BsTrash, BsUpload, BsX} from "react-icons/bs";
-import {toast} from "react-toastify";
-import {useListSearch} from "@/hooks/useListSearch";
+import { capitalize, uniq } from "lodash";
+import { useRouter } from "next/router";
+import { BsBan, BsBanFill, BsCheck, BsCircle, BsPencil, BsStop, BsTrash, BsUpload, BsX } from "react-icons/bs";
+import { toast } from "react-toastify";
+import { useListSearch } from "@/hooks/useListSearch";
 import Modal from "@/components/Modal";
-import {checkAccess} from "@/utils/permissions";
+import { checkAccess } from "@/utils/permissions";
 import useGroups from "@/hooks/useGroups";
 import Button from "@/components/Low/Button";
 import { EntityWithRoles } from "@/interfaces/entity";

 const searchFields = [["module"], ["id"], ["createdBy"]];

-const CLASSES: {[key in Module]: string} = {
+const CLASSES: { [key in Module]: string } = {
 	reading: "text-ielts-reading",
 	listening: "text-ielts-listening",
 	speaking: "text-ielts-speaking",
@@ -34,7 +34,7 @@ const CLASSES: {[key in Module]: string} = {

 const columnHelper = createColumnHelper<Exam>();

-const ExamOwnerSelector = ({options, exam, onSave}: {options: User[]; exam: Exam; onSave: (owners: string[]) => void}) => {
+const ExamOwnerSelector = ({ options, exam, onSave }: { options: User[]; exam: Exam; onSave: (owners: string[]) => void }) => {
 	const [owners, setOwners] = useState(exam.owners || []);

 	return (
@@ -57,12 +57,12 @@ const ExamOwnerSelector = ({options, exam, onSave}: {options: User[]; exam: Exam
 	);
 };

-export default function ExamList({user, entities}: {user: User; entities: EntityWithRoles[];}) {
+export default function ExamList({ user, entities }: { user: User; entities: EntityWithRoles[]; }) {
 	const [selectedExam, setSelectedExam] = useState<Exam>();

-	const {exams, reload} = useExams();
-	const {users} = useUsers();
-	const {groups} = useGroups({admin: user?.id, userType: user?.type});
+	const { exams, reload } = useExams();
+	const { users } = useUsers();
+	const { groups } = useGroups({ admin: user?.id, userType: user?.type });

 	const filteredExams = useMemo(() => exams.filter((e) => {
 		if (!e.private) return true
@@ -90,7 +90,7 @@ export default function ExamList({user, entities}: {user: User; entities: Entity
 		});
 	}, [filteredExams, users]);

-	const {rows: filteredRows, renderSearch} = useListSearch<Exam>(searchFields, parsedExams);
+	const { rows: filteredRows, renderSearch } = useListSearch<Exam>(searchFields, parsedExams);

 	const dispatch = useExamStore((state) => state.dispatch);

@@ -107,14 +107,14 @@ export default function ExamList({user, entities}: {user: User; entities: Entity
 		}
 		dispatch({type: "INIT_EXAM", payload: {exams: [exam], modules: [module]}})

-		router.push("/exercises");
+		router.push("/exam");
 	};

 	const privatizeExam = async (exam: Exam) => {
 		if (!confirm(`Are you sure you want to make this ${capitalize(exam.module)} exam ${exam.private ? "public" : "private"}?`)) return;

 		axios
-			.patch(`/api/exam/${exam.module}/${exam.id}`, {private: !exam.private})
+			.patch(`/api/exam/${exam.module}/${exam.id}`, { private: !exam.private })
 			.then(() => toast.success(`Updated the "${exam.id}" exam`))
 			.catch((reason) => {
 				if (reason.response.status === 404) {
@@ -224,7 +224,7 @@ export default function ExamList({user, entities}: {user: User; entities: Entity
 		{
 			header: "",
 			id: "actions",
-			cell: ({row}: {row: {original: Exam}}) => {
+			cell: ({ row }: { row: { original: Exam } }) => {
 				return (
 					<div className="flex gap-4">
 						{(row.original.owners?.includes(user.id) || checkAccess(user, ["admin", "developer"])) && (
@@ -270,7 +270,7 @@ export default function ExamList({user, entities}: {user: User; entities: Entity
 			{renderSearch()}
 			<Modal isOpen={!!selectedExam} title={`Edit Exam Owners - ${selectedExam?.id}`} onClose={() => setSelectedExam(undefined)}>
 				{!!selectedExam ? (
-					<ExamOwnerSelector options={filteredCorporates} exam={selectedExam} onSave={(owners) => updateExam(selectedExam, {owners})} />
+					<ExamOwnerSelector options={filteredCorporates} exam={selectedExam} onSave={(owners) => updateExam(selectedExam, { owners })} />
 				) : (
 					<div />
 				)}
@@ -301,4 +301,4 @@ export default function ExamList({user, entities}: {user: User; entities: Entity
 			</table>
 		</div>
 	);
-}
+}
--- a/src/pages/(exam)/ExamPage.tsx
+++ b/src/pages/(exam)/ExamPage.tsx
@@ -222,7 +222,7 @@ export default function ExamPage({ page, user, destination = "/", hideSidebar =
 	}, [saveStats, setFlags, setModuleIndex, evaluated, pendingExercises, setUserSolutions]);


-	const aggregateScoresByModule = (): {
+	const aggregateScoresByModule = (isPractice?: boolean): {
 		module: Module;
 		total: number;
 		missing: number;
@@ -258,7 +258,7 @@ export default function ExamPage({ page, user, destination = "/", hideSidebar =
 			},
 		};

-		userSolutions.filter(x => !x.isPractice).forEach((x) => {
+		userSolutions.filter(x => isPractice ? x.isPractice : !x.isPractice).forEach((x) => {
 			const examModule =
 				x.module || (x.type === "writing" ? "writing" : x.type === "speaking" || x.type === "interactiveSpeaking" ? "speaking" : undefined);

@@ -360,6 +360,7 @@ export default function ExamPage({ page, user, destination = "/", hideSidebar =
 									setPartIndex(0);
 								}}
 								scores={aggregateScoresByModule()}
+								practiceScores={aggregateScoresByModule(true)}
 							/>}
 						{/* Exam is on going, display it and the abandon modal */}
 						{isExamLoaded && moduleIndex !== -1 && (
--- a/src/pages/api/assignments/statistical/excel.ts
+++ b/src/pages/api/assignments/statistical/excel.ts
@@ -1,255 +0,0 @@
-import type {NextApiRequest, NextApiResponse} from "next";
-import {storage} from "@/firebase";
-import {withIronSessionApiRoute} from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
-import {ref, uploadBytes, getDownloadURL} from "firebase/storage";
-import {AssignmentWithCorporateId} from "@/interfaces/results";
-import moment from "moment-timezone";
-import ExcelJS from "exceljs";
-import {getSpecificUsers} from "@/utils/users.be";
-import {checkAccess} from "@/utils/permissions";
-import {getAssignmentsForCorporates} from "@/utils/assignments.be";
-import {search} from "@/utils/search";
-import {getGradingSystem} from "@/utils/grading.be";
-import {StudentUser, User} from "@/interfaces/user";
-import {calculateBandScore, getGradingLabel} from "@/utils/score";
-import {Module} from "@/interfaces";
-import {uniq} from "lodash";
-import {getUserName} from "@/utils/users";
-import {LevelExam} from "@/interfaces/exam";
-import {getSpecificExams} from "@/utils/exams.be";
-
-export default withIronSessionApiRoute(handler, sessionOptions);
-
-interface TableData {
-	user: string;
-	studentID: string;
-	passportID: string;
-	exams: string;
-	email: string;
-	correct: number;
-	corporate: string;
-	submitted: boolean;
-	date: moment.Moment;
-	assignment: string;
-	corporateId: string;
-	score: number;
-	level: string;
-	part1?: string;
-	part2?: string;
-	part3?: string;
-	part4?: string;
-	part5?: string;
-}
-
-async function handler(req: NextApiRequest, res: NextApiResponse) {
-	// if (req.method === "GET") return get(req, res);
-	if (req.method === "POST") return await post(req, res);
-}
-
-const searchFilters = [["email"], ["user"], ["userId"], ["assignment"], ["exams"]];
-
-async function post(req: NextApiRequest, res: NextApiResponse) {
-	// verify if it's a logged user that is trying to export
-	if (req.session.user) {
-		if (!checkAccess(req.session.user, ["mastercorporate", "corporate", "developer", "admin"])) {
-			return res.status(403).json({error: "Unauthorized"});
-		}
-		const {
-			ids,
-			startDate,
-			endDate,
-			searchText,
-			displaySelection = true,
-		} = req.body as {
-			ids: string[];
-			startDate?: string;
-			endDate?: string;
-			searchText: string;
-			displaySelection?: boolean;
-		};
-		const startDateParsed = startDate ? new Date(startDate) : undefined;
-		const endDateParsed = endDate ? new Date(endDate) : undefined;
-		const assignments = await getAssignmentsForCorporates(req.session.user.type, ids, startDateParsed, endDateParsed);
-
-		const assignmentUsers = uniq([...assignments.flatMap((x) => x.assignees), ...assignments.flatMap((x) => x.assigner)]);
-		const assigners = [...new Set(assignments.map((a) => a.assigner))];
-		const users = await getSpecificUsers(assignmentUsers);
-		const assignerUsers = await getSpecificUsers(assigners);
-		const exams = await getSpecificExams(uniq(assignments.flatMap((x) => x.exams.map((x) => x.id))));
-
-		const assignerUsersGradingSystems = await Promise.all(
-			assignerUsers.map(async (user: User) => {
-				const data = await getGradingSystem(user);
-				// in this context I need to override as I'll have to match to the assigner
-				return {...data, user: user.id};
-			}),
-		);
-
-		const getGradingSystemHelper = (
-			exams: {id: string; module: Module; assignee: string}[],
-			assigner: string,
-			user: User,
-			correct: number,
-			total: number,
-		) => {
-			if (exams.some((e) => e.module === "level")) {
-				const gradingSystem = assignerUsersGradingSystems.find((gs) => gs.user === assigner);
-				if (gradingSystem) {
-					const bandScore = calculateBandScore(correct, total, "level", user?.focus || "academic");
-					return {
-						label: getGradingLabel(bandScore, gradingSystem.steps || []),
-						score: bandScore,
-					};
-				}
-			}
-
-			return {score: -1, label: "N/A"};
-		};
-
-		const tableResults = assignments
-			.reduce((accmA: TableData[], a: AssignmentWithCorporateId) => {
-				const userResults = a.assignees.map((assignee) => {
-					const userStats = a.results.find((r) => r.user === assignee)?.stats || [];
-					const userData = users.find((u) => u.id === assignee);
-					const corporateUser = users.find((u) => u.id === a.assigner);
-					const correct = userStats.reduce((n, e) => n + e.score.correct, 0);
-					const total = userStats.reduce((n, e) => n + e.score.total, 0);
-					const {label: level, score} = getGradingSystemHelper(a.exams, a.assigner, userData!, correct, total);
-
-					const commonData = {
-						user: userData?.name || "",
-						email: userData?.email || "",
-						studentID: (userData as StudentUser)?.studentID || "",
-						passportID: (userData as StudentUser)?.demographicInformation?.passport_id || "",
-						userId: assignee,
-						exams: a.exams.map((x) => x.id).join(", "),
-						corporateId: a.corporateId,
-						corporate: !corporateUser ? "" : getUserName(corporateUser),
-						assignment: a.name,
-						level,
-						score,
-					};
-					if (userStats.length === 0) {
-						return {
-							...commonData,
-							correct: 0,
-							submitted: false,
-							// date: moment(),
-						};
-					}
-
-					let data: {total: number; correct: number}[] = [];
-					if (a.exams.every((x) => x.module === "level")) {
-						const exam = exams.find((x) => x.id === a.exams.find((x) => x.assignee === assignee)?.id) as LevelExam;
-						data = exam.parts.map((x) => {
-							const exerciseIDs = x.exercises.map((x) => x.id);
-							const stats = userStats.filter((x) => exerciseIDs.includes(x.exercise));
-
-							const total = stats.reduce((acc, curr) => acc + curr.score.total, 0);
-							const correct = stats.reduce((acc, curr) => acc + curr.score.correct, 0);
-
-							return {total, correct};
-						});
-					}
-
-					const partsData =
-						data.length > 0 ? data.reduce((acc, e, index) => ({...acc, [`part${index}`]: `${e.correct}/${e.total}`}), {}) : {};
-
-					return {
-						...commonData,
-						correct,
-						submitted: true,
-						date: moment.max(userStats.map((e) => moment(e.date))),
-						...partsData,
-					};
-				}) as TableData[];
-
-				return [...accmA, ...userResults];
-			}, [])
-			.sort((a, b) => b.score - a.score);
-
-		// Create a new workbook and add a worksheet
-		const workbook = new ExcelJS.Workbook();
-		const worksheet = workbook.addWorksheet("Master Statistical");
-
-		const headers = [
-			{
-				label: "User",
-				value: (entry: TableData) => entry.user,
-			},
-			{
-				label: "Email",
-				value: (entry: TableData) => entry.email,
-			},
-			{
-				label: "Student ID",
-				value: (entry: TableData) => entry.studentID,
-			},
-			{
-				label: "Passport ID",
-				value: (entry: TableData) => entry.passportID,
-			},
-			...(displaySelection
-				? [
-						{
-							label: "Corporate",
-							value: (entry: TableData) => entry.corporate,
-						},
-				  ]
-				: []),
-			{
-				label: "Assignment",
-				value: (entry: TableData) => entry.assignment,
-			},
-			{
-				label: "Submitted",
-				value: (entry: TableData) => (entry.submitted ? "Yes" : "No"),
-			},
-			{
-				label: "Score",
-				value: (entry: TableData) => entry.correct,
-			},
-			{
-				label: "Date",
-				value: (entry: TableData) => entry.date?.format("YYYY/MM/DD") || "",
-			},
-			{
-				label: "Level",
-				value: (entry: TableData) => entry.level,
-			},
-			...new Array(5).fill(0).map((_, index) => ({
-				label: `Part ${index + 1}`,
-				value: (entry: TableData) => {
-					const key = `part${index}` as keyof TableData;
-					return entry[key] || "";
-				},
-			})),
-		];
-
-		const filteredSearch = !!searchText ? search(searchText, searchFilters, tableResults) : tableResults;
-
-		worksheet.addRow(headers.map((h) => h.label));
-		(filteredSearch as TableData[]).forEach((entry) => {
-			worksheet.addRow(headers.map((h) => h.value(entry)));
-		});
-
-		// Convert workbook to Buffer (Node.js) or Blob (Browser)
-		const buffer = await workbook.xlsx.writeBuffer();
-
-		// generate the file ref for storage
-		const fileName = `${Date.now().toString()}.xlsx`;
-		const refName = `statistical/${fileName}`;
-		const fileRef = ref(storage, refName);
-		// upload the pdf to storage
-		await uploadBytes(fileRef, buffer, {
-			contentType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-		});
-
-		const url = await getDownloadURL(fileRef);
-		res.status(200).end(url);
-		return;
-	}
-
-	return res.status(401).json({error: "Unauthorized"});
-}
--- a/src/pages/api/grading/index.ts
+++ b/src/pages/api/grading/index.ts
@@ -1,21 +1,21 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type {NextApiRequest, NextApiResponse} from "next";
-import {app} from "@/firebase";
-import {withIronSessionApiRoute} from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
-import {CorporateUser, Group} from "@/interfaces/user";
-import {Discount, Package} from "@/interfaces/paypal";
-import {v4} from "uuid";
-import {checkAccess} from "@/utils/permissions";
-import {CEFR_STEPS} from "@/resources/grading";
-import {getCorporateUser} from "@/resources/user";
-import {getUserCorporate} from "@/utils/groups.be";
-import {Grading} from "@/interfaces";
-import {getGroupsForUser} from "@/utils/groups.be";
-import {uniq} from "lodash";
-import {getSpecificUsers, getUser} from "@/utils/users.be";
-import {getGradingSystem} from "@/utils/grading.be";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { app } from "@/firebase";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { CorporateUser, Group } from "@/interfaces/user";
+import { Discount, Package } from "@/interfaces/paypal";
+import { v4 } from "uuid";
+import { checkAccess } from "@/utils/permissions";
+import { CEFR_STEPS } from "@/resources/grading";
+import { getCorporateUser } from "@/resources/user";
+import { getUserCorporate } from "@/utils/groups.be";
+import { Grading } from "@/interfaces";
+import { getGroupsForUser } from "@/utils/groups.be";
+import { uniq } from "lodash";
+import { getSpecificUsers, getUser } from "@/utils/users.be";
 import client from "@/lib/mongodb";
+import { getGradingSystemByEntity } from "@/utils/grading.be";

 const db = client.db(process.env.MONGODB_DB);

@@ -28,25 +28,18 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {

 async function get(req: NextApiRequest, res: NextApiResponse) {
 	if (!req.session.user) {
-		res.status(401).json({ok: false});
+		res.status(401).json({ ok: false });
 		return;
 	}

-	const gradingSystem = await getGradingSystem(req.session.user);
+	const entity = req.query.entity as string
+	const gradingSystem = await getGradingSystemByEntity(entity);
 	return res.status(200).json(gradingSystem);
 }

-async function updateGrading(id: string, body: Grading) {
-	if (await db.collection("grading").findOne({id})) {
-		await db.collection("grading").updateOne({id}, {$set: body});
-	} else {
-		await db.collection("grading").insertOne({id, ...body});
-	}
-}
-
 async function post(req: NextApiRequest, res: NextApiResponse) {
 	if (!req.session.user) {
-		res.status(401).json({ok: false});
+		res.status(401).json({ ok: false });
 		return;
 	}

@@ -57,17 +50,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 		});

 	const body = req.body as Grading;
-	await updateGrading(req.session.user.id, body);
+	await db.collection("grading").updateOne({ entity: body.entity }, { $set: body }, { upsert: true });

-	if (req.session.user.type === "mastercorporate") {
-		const groups = await getGroupsForUser(req.session.user.id);
-		const participants = uniq(groups.flatMap((x) => x.participants));
-
-		const participantUsers = await getSpecificUsers(participants);
-		const corporateUsers = participantUsers.filter((x) => x?.type === "corporate") as CorporateUser[];
-
-		await Promise.all(corporateUsers.map(async (g) => await updateGrading(g.id, body)));
-	}
-
-	res.status(200).json({ok: true});
+	res.status(200).json({ ok: true });
 }
--- a/src/pages/api/statistical.ts
+++ b/src/pages/api/statistical.ts
@@ -0,0 +1,205 @@
+// 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 { getDownloadURL, getStorage, ref } from "firebase/storage";
+import { app, storage } from "@/firebase";
+import axios from "axios";
+import { requestUser } from "@/utils/api";
+import { checkAccess } from "@/utils/permissions";
+import { EntityWithRoles } from "@/interfaces/entity";
+import { Stat, StudentUser } from "@/interfaces/user";
+import { Assignment, AssignmentResult } from "@/interfaces/results";
+import { Exam } from "@/interfaces/exam";
+import { capitalize, groupBy, uniqBy } from "lodash";
+import { findBy, mapBy } from "@/utils";
+import ExcelJS from "exceljs";
+import moment from "moment";
+import { Session } from "@/hooks/useSessions";
+import { getGradingSystemByEntity } from "@/utils/grading.be";
+import { getGradingLabel } from "@/utils/score";
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+interface Item {
+	student: StudentUser
+	result: AssignmentResult
+	assignment: Assignment
+	exams: Exam[]
+	session?: Session
+}
+
+interface Body {
+	entities: EntityWithRoles[]
+	items: Item[]
+	assignments: Assignment[]
+	startDate: Date
+	endDate: Date
+}
+
+interface EntityInformation {
+	entity: EntityWithRoles
+	exams: Exam[]
+	numberOfAssignees: number
+	numberOfSubmissions: number
+	numberOfAbsentees: number
+	assignment: Assignment
+	items: Item[]
+}
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (req.method !== "POST") return res.status(404).json({ ok: false })
+
+	const user = await requestUser(req, res)
+	if (!user) return res.status(401).json({ ok: false });
+	if (!checkAccess(user, ['admin', 'developer', 'mastercorporate', 'corporate'])) return res.status(403).json({ ok: false });
+
+	const { entities, items, assignments } = req.body as Body
+	const entityInformations: EntityInformation[] = []
+
+	for (const entity of entities) {
+		const entityItems = items.filter(i => i.assignment.entity === entity.id)
+		const groupedByAssignments = groupBy(entityItems, (a) => a.assignment.id)
+		for (const assignmentID of Object.keys(groupedByAssignments)) {
+			const assignmentItems = groupedByAssignments[assignmentID]
+			const assignment = findBy(assignments, 'id', assignmentID)!
+			const assignmentExams =
+				uniqBy(assignmentItems.flatMap(a => a.exams.map(e => ({ ...e, moduleID: `${e.id}_${e.module}` }))), 'moduleID')
+
+			const assignmentEntityInformation: EntityInformation = {
+				entity,
+				exams: assignmentExams,
+				numberOfAssignees: assignmentItems.length,
+				numberOfSubmissions: assignmentItems.filter(x => !!x.result).length,
+				numberOfAbsentees: assignmentItems.filter(x => !x.result).length,
+				assignment,
+				items: assignmentItems
+			}
+
+			entityInformations.push(assignmentEntityInformation)
+		}
+	}
+
+	const workbook = new ExcelJS.Workbook();
+	const worksheet = workbook.addWorksheet("Statistical");
+
+	for (const e of entityInformations) {
+		await addEntityInformationToWorksheet(worksheet, e)
+	}
+
+	const buffer = await workbook.xlsx.writeBuffer()
+	res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
+	res.status(200).send(buffer);
+}
+
+const addEntityInformationToWorksheet = async (worksheet: ExcelJS.Worksheet, entityInformation: EntityInformation) => {
+	const data = [
+		['Entity', undefined, undefined, entityInformation.entity.label],
+		['Assignment', undefined, undefined, entityInformation.assignment.name],
+		['Date of the Assignment', undefined, undefined, moment(entityInformation.assignment.startDate).format("DD/MM/YYYY")],
+		['Exams', undefined, undefined, mapBy(entityInformation.exams, 'id').join(', ')],
+		['Modules', undefined, undefined, entityInformation.exams.map(e => capitalize(e.module)).join(', ')],
+		['Number of Assignees', undefined, undefined, entityInformation.numberOfAssignees],
+		['Number of Submissions', undefined, undefined, entityInformation.numberOfSubmissions],
+		['Number of Absentees', undefined, undefined, entityInformation.numberOfAbsentees]
+	]
+
+	const dataRows = worksheet.addRows(data);
+	dataRows.forEach(row => row.getCell(1).font = { bold: true, color: { argb: "ffffffff" } })
+	dataRows.forEach(row => row.getCell(1).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: "ff674ea7" } })
+	dataRows.forEach(row => worksheet.mergeCells(`${row.getCell(1).address}:${row.getCell(3).address}`))
+	dataRows.forEach(row => row.getCell(4).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: "FFD9D2E9" } })
+	dataRows.forEach(row => worksheet.mergeCells(`${row.getCell(4).address}:${row.getCell(7).address}`))
+
+	worksheet.addRows([[], []]);
+	const gradingSystem = await getGradingSystemByEntity(entityInformation.entity.id)
+
+	for (const exam of entityInformation.exams) {
+		const examRow = worksheet.addRow([`${capitalize(exam.module)} Exam`, undefined, exam.id])
+		examRow.getCell(1).font = { bold: true, color: { argb: "ffffffff" } }
+		examRow.getCell(1).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: "ff674ea7" } }
+		examRow.getCell(3).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: "FFD9D2E9" } }
+
+		worksheet.mergeCells(`${examRow.getCell(1).address}:${examRow.getCell(2).address}`)
+		worksheet.mergeCells(`${examRow.getCell(3).address}:${examRow.getCell(6).address}`)
+
+		const parts = exam.module === "level" || exam.module === "listening" || exam.module === "reading" ? exam.parts : []
+
+		const header = worksheet.addRow([
+			"#",
+			"Name",
+			"E-mail",
+			"Student ID",
+			"Passport/ID",
+			"Gender",
+			"Finished at",
+			"Score",
+			...(exam.module === "level" ? ["Grade"] : []),
+			...parts.map((_, i) => `Part ${i + 1}`)
+		])
+		header.font = { bold: true, color: { argb: "FFFFFFFF" } }
+		header.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: "FFD9D2E9" } }
+
+		const examItems =
+			entityInformation.items
+				.filter(i => !!i.result)
+				.map(i => ({
+					...i,
+					result: { ...i.result, stats: i.result.stats.filter(x => x.exam === exam.id) },
+				}))
+
+		const orderedItems = examItems.sort((a, b) => {
+			const aTotalScore = a.result.stats.filter(x => !x.isPractice).reduce((acc, curr) => acc + curr.score.correct, 0)
+			const bTotalScore = b.result.stats.filter(x => !x.isPractice).reduce((acc, curr) => acc + curr.score.correct, 0)
+
+			return bTotalScore - aTotalScore
+		})
+
+		const itemRows = orderedItems.map((item, index) => {
+			const { total, correct } = calculateScore(item.result.stats)
+			const score = `${correct} / ${total}`
+
+			const finishTimestamp = [...item.result.stats].sort((a, b) => b.date - a.date).shift()?.date || -1
+			const finishDate = finishTimestamp === -1 ? "N/A" : moment(new Date(finishTimestamp)).format("DD/MM/YYYY HH:mm")
+
+			const grade = getGradingLabel(correct, gradingSystem.steps)
+
+			return [
+				index + 1,
+				item.student.name,
+				item.student.email,
+				item.student.studentID || "N/A",
+				item.student.demographicInformation?.passport_id || "N/A",
+				item.student.demographicInformation?.gender || "N/A",
+				finishDate,
+				score,
+				...(exam.module === "level" ? [grade] : []),
+				...parts.map((part) => {
+					const exerciseIDs = mapBy(part.exercises, 'id')
+					const { total, correct } = calculateScore(item.result.stats.filter(s => exerciseIDs.includes(s.exercise)))
+
+					return `${correct} / ${total}`
+				})
+			]
+		})
+
+		worksheet.addRows(itemRows)
+		worksheet.addRows([[]]);
+	}
+	worksheet.addRows([[], []]);
+}
+
+const calculateScore = (stats: Stat[]) => {
+	const total = stats.filter(x => !x.isPractice).reduce((acc, curr) => acc + curr.score.total, 0)
+	const correct = stats.filter(x => !x.isPractice).reduce((acc, curr) => acc + curr.score.correct, 0)
+
+	return { total, correct }
+}
+
+export const config = {
+	api: {
+		bodyParser: {
+			sizeLimit: '20mb',
+		},
+	},
+};
--- a/src/pages/assignments/[id].tsx
+++ b/src/pages/assignments/[id].tsx
@@ -23,8 +23,9 @@ 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 { getEntityUsers, getUsers } from "@/utils/users.be";
-import { getEntityWithRoles } from "@/utils/entities.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";
@@ -155,7 +156,7 @@ export default function AssignmentView({ user, users, entity, assignment }: Prop
 			},
 		};

-		stats.forEach((x) => {
+		stats.filter(x => !x.isPractice).forEach((x) => {
 			scores[x.module!] = {
 				total: scores[x.module!].total + x.score.total,
 				correct: scores[x.module!].correct + x.score.correct,
--- a/src/pages/classrooms/index.tsx
+++ b/src/pages/classrooms/index.tsx
@@ -1,27 +1,28 @@
 /* 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 { 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 { 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 { uniq } from "lodash";
+import { BsFillMortarboardFill, BsPlus } from "react-icons/bs";
 import CardList from "@/components/High/CardList";
 import Separator from "@/components/Low/Separator";
-import {mapBy, redirect, serialize} from "@/utils";
+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";
+import { FaPersonChalkboard } from "react-icons/fa6";

-export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
+export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 	const user = await requestUser(req, res)
 	if (!user) return redirect("/login")

@@ -33,11 +34,11 @@ export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {

 	const groups = await getGroupsForEntities(mapBy(allowedEntities, 'id'));

-	const users = await getSpecificUsers(uniq(groups.flatMap((g) => [...g.participants.slice(0, 5), g.admin])));
+	const users = await getSpecificUsers(uniq(groups.flatMap((g) => [...g.participants, g.admin])));
 	const groupsWithUsers: GroupWithUsers[] = groups.map((g) => convertToUsers(g, users));

 	return {
-		props: serialize({user, groups: groupsWithUsers, entities: allowedEntities}),
+		props: serialize({ user, groups: groupsWithUsers, entities: allowedEntities }),
 	};
 }, sessionOptions);

@@ -56,34 +57,42 @@ interface Props {
 	groups: GroupWithUsers[];
 	entities: EntityWithRoles[]
 }
-export default function Home({user, groups, entities}: Props) {
+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>
+			className="p-4 border-2 border-mti-purple-light/20 rounded-xl flex gap-2 justify-between hover:border-mti-purple group transition ease-in-out duration-300 text-left cursor-pointer">
+			<div className="flex flex-col gap-2 w-full">
+				<span className="flex items-center gap-1">
+					<span className="bg-mti-purple text-white font-semibold px-2">Classroom</span>
+					{group.name}
+				</span>
+				<span className="flex items-center gap-1">
+					<span className="bg-mti-purple text-white font-semibold px-2">Admin</span>
+					{getUserName(group.admin)}
+				</span>
+				<span className="flex items-center gap-1">
+					<span className="bg-mti-purple text-white font-semibold px-2">Participants</span>
+					<span className="bg-mti-purple-light/50 px-2">{group.participants.length}</span>
+				</span>
+				<span>
+					{group.participants.slice(0, 3).map(getUserName).join(", ")}{' '}
+					{group.participants.length > 3 ? <span className="opacity-50 bg-mti-purple-light/50 px-1 text-sm">and {group.participants.length - 3} more</span> : ""}
+				</span>
+			</div>
+			<div className="w-fit">
+				<FaPersonChalkboard className="w-full h-20 -translate-y-[15%] group-hover:text-mti-purple transition ease-in-out duration-300" />
+			</div>
 		</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">
+			className="p-4 border-2 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>
--- a/src/pages/dashboard/admin.tsx
+++ b/src/pages/dashboard/admin.tsx
@@ -25,174 +25,179 @@ 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,
+	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[];
+	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("/")
+	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();
+	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 }) };
+	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 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 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 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));
+		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 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"
+	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
-            Icon={BsEnvelopePaper}
-            onClick={() => router.push("/assignments")}
-            label="Assignments"
-            value={assignments.filter((a) => !a.archived).length}
-            color="purple"
-          />
-        </section>
+					<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={BsPersonFillGear}
+						onClick={() => router.push("/statistical")}
+						label="Entity Statistics"
+						value={entities.length}
+						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>
-    </>
-  );
+				<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>
+		</>
+	);
 }
--- a/src/pages/dashboard/developer.tsx
+++ b/src/pages/dashboard/developer.tsx
@@ -25,174 +25,179 @@ 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,
+	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[];
+	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("/")
+	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();
+	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 }) };
+	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 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 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 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));
+		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 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"
+	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
-            Icon={BsEnvelopePaper}
-            onClick={() => router.push("/assignments")}
-            label="Assignments"
-            value={assignments.filter((a) => !a.archived).length}
-            color="purple"
-          />
-        </section>
+					<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={BsPersonFillGear}
+						onClick={() => router.push("/statistical")}
+						label="Entity Statistics"
+						value={entities.length}
+						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>
-    </>
-  );
+				<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>
+		</>
+	);
 }
--- a/src/pages/dashboard/mastercorporate.tsx
+++ b/src/pages/dashboard/mastercorporate.tsx
@@ -2,6 +2,7 @@
 import Layout from "@/components/High/Layout";
 import UserDisplayList from "@/components/UserDisplayList";
 import IconCard from "@/dashboards/IconCard";
+import { useAllowedEntities } from "@/hooks/useEntityPermissions";
 import { Module } from "@/interfaces";
 import { EntityWithRoles } from "@/interfaces/entity";
 import { Assignment } from "@/interfaces/results";
@@ -18,6 +19,7 @@ import { groupByExam } from "@/utils/stats";
 import { getStatsByUsers } from "@/utils/stats.be";
 import { filterAllowedUsers } from "@/utils/users.be";
 import { getEntitiesUsers } from "@/utils/users.be";
+import { clsx } from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
 import { uniqBy } from "lodash";
 import moment from "moment";
@@ -26,180 +28,165 @@ 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,
+	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[];
+	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("/")
+	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 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);
+	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 }) };
+	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 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 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 allowedEntityStatistics = useAllowedEntities(user, entities, 'view_entity_statistics')

-    const levels: { [key in Module]: number } = {
-      reading: 0,
-      listening: 0,
-      writing: 0,
-      speaking: 0,
-      level: 0,
-    };
-    bandScores.forEach((b) => (levels[b.module] += b.level));
+	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 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"
+	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
-            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>
+					<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={BsPersonFillGear}
+						onClick={() => router.push("/users/performance")}
+						label="Student Performance"
+						value={students.length}
+						color="purple"
+					/>
+					{allowedEntityStatistics.length > 0 && (
+						<IconCard Icon={BsPersonFillGear}
+							onClick={() => router.push("/statistical")}
+							label="Entity Statistics"
+							value={allowedEntityStatistics.length}
+							color="purple"
+						/>
+					)}
+					<IconCard
+						Icon={BsEnvelopePaper}
+						onClick={() => router.push("/assignments")}
+						label="Assignments"
+						value={assignments.filter((a) => !a.archived).length}
+						className={clsx(allowedEntityStatistics.length === 0 && "col-span-2")}
+						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>
-    </>
-  );
+				<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>
+		</>
+	);
 }
--- a/src/pages/entities/[id]/roles/[role].tsx
+++ b/src/pages/entities/[id]/roles/[role].tsx
@@ -2,104 +2,110 @@ 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 { 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 { getEntityWithRoles } from "@/utils/entities.be";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { doesEntityAllow } from "@/utils/permissions";
+import { isAdmin } from "@/utils/users";
+import { countEntityUsers } from "@/utils/users.be";
 import axios from "axios";
-import {withIronSessionSsr} from "iron-session/next";
+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 { 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";
+import { toast } from "react-toastify";

-type PermissionLayout = {label: string, key: RolePermission}
+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"},
+	{ 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" },
+	{ label: "Create a Single User", key: "create_user" },
+	{ label: "Create Users in Batch", key: "create_user_batch" },
+	{ label: "Create a Single Code", key: "create_code" },
+	{ label: "Create Codes in Batch", key: "create_code_batch" },
 ]

 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"},
+	{ 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"},
+	{ 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"},
+	{ label: "View Entities", key: "view_entities" },
+	{ label: "View Entity Statistics", key: "view_entity_statistics" },
+	{ 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"},
+	{ 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}) => {
+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};
+	const { id, role } = params as { id: string, role: string };

 	if (!mapBy(user.entities, 'id').includes(id) && !["admin", "developer"].includes(user.type)) return redirect("/entities")

@@ -110,6 +116,7 @@ export const getServerSideProps = withIronSessionSsr(async ({req, res, params})
 	if (!entityRole) return redirect(`/entities/${id}/roles`)

 	if (!doesEntityAllow(user, entity, "view_entity_roles")) return redirect(`/entities/${id}`)
+	const disableEdit = !isAdmin(user) && findBy(user.entities, 'id', entity.id)?.role === entityRole.id

 	const userCount = await countEntityUsers(id, { "entities.role": role });

@@ -119,6 +126,7 @@ export const getServerSideProps = withIronSessionSsr(async ({req, res, params})
 			entity,
 			role: entityRole,
 			userCount,
+			disableEdit
 		}),
 	};
 }, sessionOptions);
@@ -128,9 +136,10 @@ interface Props {
 	entity: EntityWithRoles;
 	role: Role;
 	userCount: number;
+	disableEdit?: boolean
 }

-export default function Role({user, entity, role, userCount}: Props) {
+export default function Role({ user, entity, role, userCount, disableEdit }: Props) {
 	const [permissions, setPermissions] = useState(role.permissions)
 	const [isLoading, setIsLoading] = useState(false);

@@ -140,15 +149,16 @@ export default function Role({user, entity, role, userCount}: Props) {
 	const canRenameRole = useEntityPermission(user, entity, "rename_entity_role")
 	const canDeleteRole = useEntityPermission(user, entity, "delete_entity_role")

+
 	const renameRole = () => {
-		if (!canRenameRole) return;
+		if (!canRenameRole || disableEdit) return;

 		const label = prompt("Rename this role:", role.label);
 		if (!label) return;

 		setIsLoading(true);
 		axios
-			.patch(`/api/roles/${role.id}`, {label})
+			.patch(`/api/roles/${role.id}`, { label })
 			.then(() => {
 				toast.success("The role has been updated successfully!");
 				router.replace(router.asPath);
@@ -161,7 +171,7 @@ export default function Role({user, entity, role, userCount}: Props) {
 	};

 	const deleteRole = () => {
-		if (!canDeleteRole || role.isDefault) return;
+		if (!canDeleteRole || role.isDefault || disableEdit) return;
 		if (!confirm("Are you sure you want to delete this role?")) return;

 		setIsLoading(true);
@@ -180,12 +190,12 @@ export default function Role({user, entity, role, userCount}: Props) {
 	};

 	const editPermissions = () => {
-		if (!canEditPermissions) return
+		if (!canEditPermissions || disableEdit) return

 		setIsLoading(true);

 		axios
-			.patch(`/api/roles/${role.id}`, {permissions})
+			.patch(`/api/roles/${role.id}`, { permissions })
 			.then(() => {
 				toast.success("This role has been successfully updated!");
 				router.replace(router.asPath);
@@ -197,12 +207,19 @@ export default function Role({user, entity, role, userCount}: Props) {
 			.finally(() => setIsLoading(false));
 	}

+	const enableCheckbox = (permission: RolePermission) => {
+		if (!canEditPermissions || disableEdit) return false
+		return doesEntityAllow(user, entity, permission)
+	}
+
 	const togglePermissions = (p: RolePermission) => setPermissions(prev => prev.includes(p) ? prev.filter(x => x !== p) : [...prev, p])
+	const toggleMultiplePermissions = (p: RolePermission[]) =>
+		setPermissions(prev => [...prev.filter(x => !p.includes(x)), ...(p.every(x => prev.includes(x)) ? [] : p)])

 	return (
 		<>
 			<Head>
-				<title>{ role.label } | {entity.label} | EnCoach</title>
+				<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."
@@ -220,7 +237,7 @@ export default function Role({user, entity, role, userCount}: Props) {
 									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>
+								<h2 className="font-bold text-2xl">{role.label} Role ({userCount} users)</h2>
 							</div>
 						</div>
 						<div className="flex items-center justify-between w-full">
@@ -256,19 +273,20 @@ export default function Role({user, entity, role, userCount}: Props) {
 							<div className="w-full flex items-center justify-between">
 								<b>User Management</b>
 								<Checkbox
+									disabled={!canEditPermissions || disableEdit}
 									isChecked={mapBy(USER_MANAGEMENT, 'key').every(k => permissions.includes(k))}
-									onChange={() => mapBy(USER_MANAGEMENT, 'key').forEach(togglePermissions)}
+									onChange={() => toggleMultiplePermissions(mapBy(USER_MANAGEMENT, 'key').filter(enableCheckbox))}
 								>
 									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>
-							)) }
+								{USER_MANAGEMENT.map(({ label, key }) => (
+									<Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
+										{label}
+									</Checkbox>
+								))}
 							</div>
 						</div>

@@ -276,19 +294,20 @@ export default function Role({user, entity, role, userCount}: Props) {
 							<div className="w-full flex items-center justify-between">
 								<b>Exam Management</b>
 								<Checkbox
+									disabled={!canEditPermissions || disableEdit}
 									isChecked={mapBy(EXAM_MANAGEMENT, 'key').every(k => permissions.includes(k))}
-									onChange={() => mapBy(EXAM_MANAGEMENT, 'key').forEach(togglePermissions)}
+									onChange={() => toggleMultiplePermissions(mapBy(EXAM_MANAGEMENT, 'key').filter(enableCheckbox))}
 								>
 									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>
-							)) }
+								{EXAM_MANAGEMENT.map(({ label, key }) => (
+									<Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
+										{label}
+									</Checkbox>
+								))}
 							</div>
 						</div>

@@ -296,19 +315,20 @@ export default function Role({user, entity, role, userCount}: Props) {
 							<div className="w-full flex items-center justify-between">
 								<b>Clasroom Management</b>
 								<Checkbox
+									disabled={!canEditPermissions || disableEdit}
 									isChecked={mapBy(CLASSROOM_MANAGEMENT, 'key').every(k => permissions.includes(k))}
-									onChange={() => mapBy(CLASSROOM_MANAGEMENT, 'key').forEach(togglePermissions)}
+									onChange={() => toggleMultiplePermissions(mapBy(CLASSROOM_MANAGEMENT, 'key').filter(enableCheckbox))}
 								>
 									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>
-							)) }
+								{CLASSROOM_MANAGEMENT.map(({ label, key }) => (
+									<Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
+										{label}
+									</Checkbox>
+								))}
 							</div>
 						</div>

@@ -316,19 +336,20 @@ export default function Role({user, entity, role, userCount}: Props) {
 							<div className="w-full flex items-center justify-between">
 								<b>Entity Management</b>
 								<Checkbox
+									disabled={!canEditPermissions || disableEdit}
 									isChecked={mapBy(ENTITY_MANAGEMENT, 'key').every(k => permissions.includes(k))}
-									onChange={() => mapBy(ENTITY_MANAGEMENT, 'key').forEach(togglePermissions)}
+									onChange={() => toggleMultiplePermissions(mapBy(ENTITY_MANAGEMENT, 'key').filter(enableCheckbox))}
 								>
 									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>
-							)) }
+								{ENTITY_MANAGEMENT.map(({ label, key }) => (
+									<Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
+										{label}
+									</Checkbox>
+								))}
 							</div>
 						</div>

@@ -336,19 +357,20 @@ export default function Role({user, entity, role, userCount}: Props) {
 							<div className="w-full flex items-center justify-between">
 								<b>Assignment Management</b>
 								<Checkbox
+									disabled={!canEditPermissions || disableEdit}
 									isChecked={mapBy(ASSIGNMENT_MANAGEMENT, 'key').every(k => permissions.includes(k))}
-									onChange={() => mapBy(ASSIGNMENT_MANAGEMENT, 'key').forEach(togglePermissions)}
+									onChange={() => toggleMultiplePermissions(mapBy(ASSIGNMENT_MANAGEMENT, 'key').filter(enableCheckbox))}
 								>
 									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>
-							)) }
+								{ASSIGNMENT_MANAGEMENT.map(({ label, key }) => (
+									<Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
+										{label}
+									</Checkbox>
+								))}
 							</div>
 						</div>
 					</section>
--- a/src/pages/entities/index.tsx
+++ b/src/pages/entities/index.tsx
@@ -1,28 +1,28 @@
 /* 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 { 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 { 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 { uniq } from "lodash";
+import { BsBank, BsPlus } from "react-icons/bs";
 import CardList from "@/components/High/CardList";
-import {getEntitiesWithRoles} from "@/utils/entities.be";
-import {EntityWithRoles} from "@/interfaces/entity";
+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};
+type EntitiesWithCount = { entity: EntityWithRoles; users: User[]; count: number };

-export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
+export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 	const user = await requestUser(req, res)
 	if (!user) return redirect("/login")

@@ -33,11 +33,11 @@ export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
 	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)})),
+		allowedEntities.map(async (e) => ({ entity: e, count: await countEntityUsers(e.id), users: await getEntityUsers(e.id, 5) })),
 	);

 	return {
-		props: serialize({user, entities: entitiesWithCount}),
+		props: serialize({ user, entities: entitiesWithCount }),
 	};
 }, sessionOptions);

@@ -47,28 +47,36 @@ interface Props {
 	user: User;
 	entities: EntitiesWithCount[];
 }
-export default function Home({user, entities}: Props) {
-	const renderCard = ({entity, users, count}: 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>
+			className="p-4 border-2 border-mti-purple-light/20 rounded-xl flex gap-2 justify-between hover:border-mti-purple group transition ease-in-out duration-300 text-left cursor-pointer">
+			<div className="flex flex-col gap-2 w-full">
+				<span className="flex items-center gap-1">
+					<span className="bg-mti-purple text-white font-semibold px-2">Entity</span>
+					{entity.label}
+				</span>
+				<span className="flex items-center gap-1">
+					<span className="bg-mti-purple text-white font-semibold px-2">Members</span>
+					<span className="bg-mti-purple-light/50 px-2">{count}</span>
+				</span>
+				<span>
+					{users.map(getUserName).join(", ")}{' '}
+					{count > 5 ? <span className="opacity-50 bg-mti-purple-light/50 px-1 text-sm">and {count - 5} more</span> : ""}
+				</span>
+			</div>
+			<div className="w-fit">
+				<BsBank className="w-full h-20 -translate-y-[15%] group-hover:text-mti-purple transition ease-in-out duration-300" />
+			</div>
 		</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">
+			className="p-4 border-2 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>
--- a/src/pages/exam.tsx
+++ b/src/pages/exam.tsx
@@ -21,6 +21,7 @@ import { useRouter } from "next/router";
 import { getSessionByAssignment } from "@/utils/sessions.be";
 import { Session } from "@/hooks/useSessions";
 import { activeAssignmentFilter } from "@/utils/assignments";
+import { checkAccess } from "@/utils/permissions";

 export const getServerSideProps = withIronSessionSsr(async ({ req, res, query }) => {
 	const user = await requestUser(req, res)
--- a/src/pages/record.tsx
+++ b/src/pages/record.tsx
@@ -72,7 +72,6 @@ export default function History({ user, users, assignments, entities }: Props) {
 	const [filter, setFilter] = useState<Filter>();

 	const { data: stats, isLoading: isStatsLoading } = useFilterRecordsByUser<Stat[]>(statsUserId || user?.id);
-	const { gradingSystem } = useGradingSystem();

 	const renderPdfIcon = usePDFDownload("stats");

@@ -167,7 +166,6 @@ export default function History({ user, users, assignments, entities }: Props) {
 				selectedTrainingExams={selectedTrainingExams}
 				setSelectedTrainingExams={setSelectedTrainingExams}
 				maxTrainingExams={MAX_TRAINING_EXAMS}
-				gradingSystem={gradingSystem?.steps}
 				renderPdfIcon={renderPdfIcon}
 			/>
 		);
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -20,7 +20,6 @@ import IconCard from "@/dashboards/IconCard";
 import { BsCode, BsCodeSquare, BsGearFill, BsPeopleFill, BsPersonFill } from "react-icons/bs";
 import UserCreator from "./(admin)/UserCreator";
 import CorporateGradingSystem from "./(admin)/CorporateGradingSystem";
-import useGradingSystem from "@/hooks/useGrading";
 import { CEFR_STEPS } from "@/resources/grading";
 import { User } from "@/interfaces/user";
 import { getUserPermissions } from "@/utils/permissions.be";
@@ -32,119 +31,143 @@ import { mapBy, serialize, redirect } from "@/utils";
 import { EntityWithRoles } from "@/interfaces/entity";
 import { requestUser } from "@/utils/api";
 import { isAdmin } from "@/utils/users";
+import { getGradingSystemByEntities, getGradingSystemByEntity } from "@/utils/grading.be";
+import { Grading } from "@/interfaces";
+import { useRouter } from "next/router";
+import { useAllowedEntities } from "@/hooks/useEntityPermissions";

 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 	const user = await requestUser(req, res)
 	if (!user) return redirect("/login")

-  if (shouldRedirectHome(user) || !checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"]))
-    return redirect("/")
+	if (shouldRedirectHome(user) || !checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"]))
+		return redirect("/")

-  const permissions = await getUserPermissions(user.id);
-  const entities = isAdmin(user) ? await getEntitiesWithRoles() : await getEntitiesWithRoles(mapBy(user.entities, 'id'))
-  const allUsers = await getUsers()
+	const permissions = await getUserPermissions(user.id);
+	const entities = isAdmin(user) ? await getEntitiesWithRoles() : await getEntitiesWithRoles(mapBy(user.entities, 'id'))
+	const allUsers = await getUsers()
+	const gradingSystems = await getGradingSystemByEntities(mapBy(entities, 'id'))
+	const entitiesGrading = entities.map(e => gradingSystems.find(g => g.entity === e.id) || { entity: e.id, steps: CEFR_STEPS })

-  return {
-    props: serialize({ user, permissions, entities, allUsers }),
-  };
+	return {
+		props: serialize({ user, permissions, entities, allUsers, entitiesGrading }),
+	};
 }, sessionOptions);

 interface Props {
-  user: User;
-  permissions: PermissionType[];
+	user: User;
+	permissions: PermissionType[];
 	entities: EntityWithRoles[];
 	allUsers: User[]
+	entitiesGrading: Grading[]
 }

-export default function Admin({ user, entities, permissions, allUsers }: Props) {
-  const { gradingSystem, mutate } = useGradingSystem();
+export default function Admin({ user, entities, permissions, allUsers, entitiesGrading }: Props) {
+	const [modalOpen, setModalOpen] = useState<string>();
+	const router = useRouter()

-  const [modalOpen, setModalOpen] = useState<string>();
+	const entitiesAllowCreateUser = useAllowedEntities(user, entities, 'create_user')
+	const entitiesAllowCreateUsers = useAllowedEntities(user, entities, 'create_user_batch')
+	const entitiesAllowCreateCode = useAllowedEntities(user, entities, 'create_code')
+	const entitiesAllowCreateCodes = useAllowedEntities(user, entities, 'create_code_batch')

-  return (
-    <>
-      <Head>
-        <title>Settings Panel | 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-6">
-        <Modal isOpen={modalOpen === "batchCreateUser"} onClose={() => setModalOpen(undefined)} maxWidth="max-w-[85%]">
-          <BatchCreateUser user={user} entities={entities} permissions={permissions} onFinish={() => setModalOpen(undefined)} />
-        </Modal>
-        <Modal isOpen={modalOpen === "batchCreateCode"} onClose={() => setModalOpen(undefined)}>
-          <BatchCodeGenerator user={user} users={allUsers} permissions={permissions} onFinish={() => setModalOpen(undefined)} />
-        </Modal>
-        <Modal isOpen={modalOpen === "createCode"} onClose={() => setModalOpen(undefined)}>
-          <CodeGenerator user={user} permissions={permissions} onFinish={() => setModalOpen(undefined)} />
-        </Modal>
-        <Modal isOpen={modalOpen === "createUser"} onClose={() => setModalOpen(undefined)}>
-          <UserCreator user={user} entities={entities} users={allUsers} permissions={permissions} onFinish={() => setModalOpen(undefined)} />
-        </Modal>
-        <Modal isOpen={modalOpen === "gradingSystem"} onClose={() => setModalOpen(undefined)}>
-          <CorporateGradingSystem
-            user={user}
-            defaultSteps={gradingSystem?.steps || CEFR_STEPS}
-            mutate={(steps) => {
-              mutate({ user: user.id, steps });
-              setModalOpen(undefined);
-            }}
-          />
-        </Modal>
+	return (
+		<>
+			<Head>
+				<title>Settings Panel | 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-6">
+				<Modal isOpen={modalOpen === "batchCreateUser"} onClose={() => setModalOpen(undefined)} maxWidth="max-w-[85%]">
+					<BatchCreateUser
+						user={user}
+						entities={entitiesAllowCreateUser}
+						permissions={permissions}
+						onFinish={() => setModalOpen(undefined)}
+					/>
+				</Modal>
+				<Modal isOpen={modalOpen === "batchCreateCode"} onClose={() => setModalOpen(undefined)}>
+					<BatchCodeGenerator user={user} users={allUsers} permissions={permissions} onFinish={() => setModalOpen(undefined)} />
+				</Modal>
+				<Modal isOpen={modalOpen === "createCode"} onClose={() => setModalOpen(undefined)}>
+					<CodeGenerator user={user} permissions={permissions} onFinish={() => setModalOpen(undefined)} />
+				</Modal>
+				<Modal isOpen={modalOpen === "createUser"} onClose={() => setModalOpen(undefined)}>
+					<UserCreator
+						user={user}
+						entities={entitiesAllowCreateUsers}
+						users={allUsers}
+						permissions={permissions}
+						onFinish={() => setModalOpen(undefined)}
+					/>
+				</Modal>
+				<Modal isOpen={modalOpen === "gradingSystem"} onClose={() => setModalOpen(undefined)}>
+					<CorporateGradingSystem
+						user={user}
+						entitiesGrading={entitiesGrading}
+						entities={entities}
+						mutate={() => router.replace(router.asPath)}
+					/>
+				</Modal>

-        <section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
-          <ExamLoader />
-          {checkAccess(user, getTypesOfUser(["teacher"]), permissions, "viewCodes") && (
-            <div className="w-full grid grid-cols-2 gap-4">
-              <IconCard
-                Icon={BsCode}
-                label="Generate Single Code"
-                color="purple"
-                className="w-full h-full"
-                onClick={() => setModalOpen("createCode")}
-              />
-              <IconCard
-                Icon={BsCodeSquare}
-                label="Generate Codes in Batch"
-                color="purple"
-                className="w-full h-full"
-                onClick={() => setModalOpen("batchCreateCode")}
-              />
-              <IconCard
-                Icon={BsPersonFill}
-                label="Create Single User"
-                color="purple"
-                className="w-full h-full"
-                onClick={() => setModalOpen("createUser")}
-              />
-              <IconCard
-                Icon={BsPeopleFill}
-                label="Create Users in Batch"
-                color="purple"
-                className="w-full h-full"
-                onClick={() => setModalOpen("batchCreateUser")}
-              />
-              {checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) && (
-                <IconCard
-                  Icon={BsGearFill}
-                  label="Grading System"
-                  color="purple"
-                  className="w-full h-full col-span-2"
-                  onClick={() => setModalOpen("gradingSystem")}
-                />
-              )}
-            </div>
-          )}
-        </section>
-        <section className="w-full">
-          <Lists user={user} entities={entities} permissions={permissions} />
-        </section>
-      </Layout>
-    </>
-  );
+				<section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
+					<ExamLoader />
+					{checkAccess(user, getTypesOfUser(["teacher"]), permissions, "viewCodes") && (
+						<div className="w-full grid grid-cols-2 gap-4">
+							<IconCard
+								Icon={BsCode}
+								label="Generate Single Code"
+								color="purple"
+								className="w-full h-full"
+								onClick={() => setModalOpen("createCode")}
+								disabled={entitiesAllowCreateCode.length > 0}
+							/>
+							<IconCard
+								Icon={BsCodeSquare}
+								label="Generate Codes in Batch"
+								color="purple"
+								className="w-full h-full"
+								onClick={() => setModalOpen("batchCreateCode")}
+								disabled={entitiesAllowCreateCodes.length > 0}
+							/>
+							<IconCard
+								Icon={BsPersonFill}
+								label="Create Single User"
+								color="purple"
+								className="w-full h-full"
+								onClick={() => setModalOpen("createUser")}
+								disabled={entitiesAllowCreateUser.length > 0}
+							/>
+							<IconCard
+								Icon={BsPeopleFill}
+								label="Create Users in Batch"
+								color="purple"
+								className="w-full h-full"
+								onClick={() => setModalOpen("batchCreateUser")}
+								disabled={entitiesAllowCreateUsers.length > 0}
+							/>
+							{checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) && (
+								<IconCard
+									Icon={BsGearFill}
+									label="Grading System"
+									color="purple"
+									className="w-full h-full col-span-2"
+									onClick={() => setModalOpen("gradingSystem")}
+								/>
+							)}
+						</div>
+					)}
+				</section>
+				<section className="w-full">
+					<Lists user={user} entities={entities} permissions={permissions} />
+				</section>
+			</Layout>
+		</>
+	);
 }
--- a/src/pages/statistical.tsx
+++ b/src/pages/statistical.tsx
@@ -0,0 +1,307 @@
+/* eslint-disable @next/next/no-img-element */
+import Layout from "@/components/High/Layout";
+import Table from "@/components/High/Table";
+import Checkbox from "@/components/Low/Checkbox";
+import Separator from "@/components/Low/Separator";
+import { Session } from "@/hooks/useSessions";
+import { Entity, EntityWithRoles } from "@/interfaces/entity";
+import { Exam } from "@/interfaces/exam";
+import { Assignment, AssignmentResult } from "@/interfaces/results";
+import { Group, Stat, StudentUser, User } from "@/interfaces/user";
+import { sessionOptions } from "@/lib/session";
+import { filterBy, findBy, mapBy, redirect, serialize } from "@/utils";
+import { requestUser } from "@/utils/api";
+import { getEntitiesAssignments } from "@/utils/assignments.be";
+import { getEntitiesWithRoles } from "@/utils/entities.be";
+import { getExamsByIds } from "@/utils/exams.be";
+import { checkAccess, findAllowedEntities } from "@/utils/permissions";
+import { getSessionsByAssignments, getSessionsByUser } from "@/utils/sessions.be";
+import { getStatsByUsers } from "@/utils/stats.be";
+import { isAdmin } from "@/utils/users";
+import { getEntitiesUsers } from "@/utils/users.be";
+import { createColumnHelper } from "@tanstack/react-table";
+import axios from "axios";
+import { clsx } from "clsx";
+import { withIronSessionSsr } from "iron-session/next";
+import { capitalize, orderBy } from "lodash";
+import moment from "moment";
+import Head from "next/head";
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+import ReactDatePicker from "react-datepicker";
+import {
+	BsBank,
+	BsChevronLeft,
+	BsX,
+} from "react-icons/bs";
+
+interface Props {
+	user: User;
+	students: StudentUser[];
+	entities: EntityWithRoles[];
+	assignments: Assignment[];
+	sessions: Session[]
+	exams: Exam[]
+}
+
+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(isAdmin(user) ? undefined : entityIDS);
+	const allowedEntities = findAllowedEntities(user, entities, 'view_entity_statistics')
+
+	if (allowedEntities.length === 0) return redirect("/")
+
+	const studentsAllowedEntities = findAllowedEntities(user, entities, 'view_students')
+	const students = await getEntitiesUsers(mapBy(studentsAllowedEntities, 'id'), { type: "student" })
+
+	const assignments = await getEntitiesAssignments(mapBy(entities, "id"));
+	const sessions = await getSessionsByAssignments(mapBy(assignments, 'id'))
+	const exams = await getExamsByIds(assignments.flatMap(a => a.exams))
+
+	return { props: serialize({ user, students, entities: allowedEntities, assignments, sessions, exams }) };
+}, sessionOptions);
+
+interface Item {
+	student: StudentUser
+	result?: AssignmentResult
+	assignment: Assignment
+	exams: Exam[]
+	entity: Entity
+	session?: Session
+}
+
+const columnHelper = createColumnHelper<Item>();
+
+export default function Statistical({ user, students, entities, assignments, sessions, exams }: Props) {
+	const [startDate, setStartDate] = useState<Date>(new Date());
+	const [endDate, setEndDate] = useState<Date | null>(moment().add(1, 'month').toDate());
+	const [selectedEntities, setSelectedEntities] = useState<string[]>([])
+	const [isDownloading, setIsDownloading] = useState(false)
+
+	const resetDateRange = () => {
+		const orderedAssignments = orderBy(assignments, ['startDate'], ['asc'])
+		setStartDate(moment(orderedAssignments.shift()?.startDate || "2024-01-01T00:00:01.986Z").toDate())
+		setEndDate(moment().add(1, 'month').toDate())
+	}
+
+	useEffect(resetDateRange, [assignments])
+
+	const updateDateRange = (dates: [Date, Date | null]) => {
+		const [start, end] = dates;
+		setStartDate(start!);
+		setEndDate(end);
+	};
+
+	const toggleEntity = (id: string) => setSelectedEntities(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id])
+
+	const renderAssignmentResolution = (entityID: string) => {
+		const entityAssignments = filterBy(assignments, 'entity', entityID)
+		const total = entityAssignments.reduce((acc, curr) => acc + curr.assignees.length, 0)
+		const results = entityAssignments.reduce((acc, curr) => acc + curr.results.length, 0)
+
+		return `${results}/${total}`
+	}
+
+	const totalAssignmentResolution = useMemo(() => {
+		const total = assignments.reduce((acc, curr) => acc + curr.assignees.length, 0)
+		const results = assignments.reduce((acc, curr) => acc + curr.results.length, 0)
+
+		return { results, total }
+	}, [assignments])
+
+	const filteredAssignments = useMemo(() => {
+		if (!startDate && !endDate) return assignments
+		const startDateFiltered = startDate ? assignments.filter(a => moment(a.startDate).isSameOrAfter(moment(startDate))) : assignments
+		return endDate ? startDateFiltered.filter(a => moment(a.endDate).isSameOrBefore(moment(endDate))) : startDateFiltered
+	}, [startDate, endDate, assignments])
+
+	const data: Item[] = useMemo(() =>
+		filteredAssignments.filter(a => selectedEntities.includes(a.entity || "")).flatMap(a => a.assignees.map(x => {
+			const result = findBy(a.results, 'user', x)
+			const student = findBy(students, 'id', x)
+			const entity = findBy(entities, 'id', a.entity)
+			const assignmentExams = exams.filter(e => a.exams.map(x => `${x.id}_${x.module}`).includes(`${e.id}_${e.module}`))
+			const session = sessions.find(s => s.assignment?.id === a.id && s.user === x)
+
+			if (!student) return undefined
+			return { student, result, assignment: a, exams: assignmentExams, session, entity }
+		})).filter(x => !!x) as Item[],
+		[students, selectedEntities, filteredAssignments, exams, sessions, entities]
+	)
+
+	const sortedData: Item[] = useMemo(() => data.sort((a, b) => {
+		const aTotalScore = a.result?.stats.filter(x => !x.isPractice).reduce((acc, curr) => acc + curr.score.correct, 0) || 0
+		const bTotalScore = b.result?.stats.filter(x => !x.isPractice).reduce((acc, curr) => acc + curr.score.correct, 0) || 0
+
+		return bTotalScore - aTotalScore
+	}), [data])
+
+	const downloadExcel = async () => {
+		setIsDownloading(true)
+
+		const request = await axios.post("/api/statistical", {
+			entities: entities.filter(e => selectedEntities.includes(e.id)),
+			items: data,
+			assignments: filteredAssignments,
+			startDate,
+			endDate
+		}, {
+			responseType: 'blob'
+		})
+
+		const href = URL.createObjectURL(request.data)
+		const link = document.createElement('a');
+		link.href = href;
+		link.setAttribute('download', `statistical_${new Date().toISOString()}.xlsx`);
+		document.body.appendChild(link);
+		link.click();
+
+		document.body.removeChild(link);
+		URL.revokeObjectURL(href);
+
+		setIsDownloading(false)
+	}
+
+	const columns = [
+		columnHelper.accessor("student.name", {
+			header: "Student",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("student.studentID", {
+			header: "Student ID",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("student.email", {
+			header: "E-mail",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("entity.label", {
+			header: "Entity",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("assignment.name", {
+			header: "Assignment",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("assignment.startDate", {
+			header: "Date",
+			cell: (info) => moment(info.getValue()).format("DD/MM/YYYY"),
+		}),
+		columnHelper.accessor("result", {
+			header: "Progress",
+			cell: (info) => {
+				const student = info.row.original.student
+				const session = info.row.original.session
+
+				if (!student.lastLogin) return <span className="text-mti-red-dark">Never logged in</span>
+				if (info.getValue()) return <span className="text-mti-green font-semibold">Submitted</span>
+				if (!session) return <span className="text-mti-rose">Not started</span>
+
+				return <span className="font-semibold">
+					{capitalize(session.exam?.module || "")} Module, Part {session.partIndex + 1}, Exercise {session.exerciseIndex + 1}
+				</span>
+			},
+		})
+	]
+
+	return (
+		<>
+			<Head>
+				<title>Statistical | 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 justify-between w-full">
+						<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">Statistical</h2>
+						</div>
+						<Checkbox
+							onChange={value => setSelectedEntities(value ? mapBy(entities, 'id') : [])}
+							isChecked={selectedEntities.length === entities.length}
+						>
+							Select All
+						</Checkbox>
+					</div>
+					<Separator />
+				</div>
+
+				<section className="flex flex-col gap-3">
+					<div className="w-full flex items-center justify-between gap-4 flex-wrap">
+						{entities.map(entity => (
+							<button
+								onClick={() => toggleEntity(entity.id)}
+								className={clsx(
+									"flex flex-col items-center justify-between gap-3 border-2 drop-shadow rounded-xl bg-white p-8 px-2 w-48 h-52",
+									"transition ease-in-out duration-300 hover:shadow-xl hover:border-mti-purple",
+									selectedEntities.includes(entity.id) && "border-mti-purple text-mti-purple"
+								)}
+								key={entity.id}
+							>
+								<BsBank size={48} />
+								<div className="flex flex-col gap-1">
+									<span>{entity.label}</span>
+									<span className={clsx("font-semibold")}>
+										{renderAssignmentResolution(entity.id)}
+									</span>
+								</div>
+							</button>
+						))}
+					</div>
+
+					<div className="flex items-center justify-between">
+						<div className="flex items-center gap-2">
+							<ReactDatePicker
+								className={clsx(
+									"p-6 px-12 w-full flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+									"hover:border-mti-purple tooltip",
+									"transition duration-300 ease-in-out",
+								)}
+								dateFormat="dd/MM/yyyy"
+								selectsRange
+								selected={startDate}
+								onChange={updateDateRange}
+								startDate={startDate}
+								endDate={endDate}
+							/>
+							{startDate !== null && endDate !== null && (
+								<button onClick={resetDateRange} className="transition ease-in-out duration-300 rounded-full p-2 hover:bg-mti-gray-cool/10">
+									<BsX size={24} />
+								</button>
+							)}
+						</div>
+						<span className="font-semibold text-lg pr-1">
+							Total: {totalAssignmentResolution.results} / {totalAssignmentResolution.total}
+						</span>
+					</div>
+				</section>
+
+				{selectedEntities.length > 0 && (
+					<Table
+						columns={columns}
+						data={sortedData}
+						searchFields={[["student", "name"], ["student", "email"], ["student", "studentID"], ["exams", "id"], ["assignment", "name"]]}
+						searchPlaceholder="Search by student, assignment or exam..."
+						onDownload={downloadExcel}
+						isDownloadLoading={isDownloading}
+					/>
+				)}
+			</Layout>
+		</>
+	)
+}