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

src/components/Exercises/FillBlanks/index.tsx

@@ -8,6 +8,7 @@ import { CommonProps } from "../types";
 import { v4 } from "uuid";
 import MCDropdown from "./MCDropdown";
 import useExamStore, { usePersistentExamStore } from "@/stores/exam";
+import PracticeBadge from "@/components/Low/PracticeBadge";
 
 const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
 	id,
@@ -166,7 +167,7 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
 	return (
 		<div className="flex flex-col gap-4">
 			{headerButtons}
-			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", (!headerButtons && !footerButtons) && "mb-20")}>
+			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full relative", (!headerButtons && !footerButtons) && "mb-20")}>
 				{variant !== "mc" && (
 					<span className="text-sm w-full leading-6">
 						{prompt.split("\\n").map((line, index) => (
@@ -177,6 +178,7 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
 						))}
 					</span>
 				)}
+				{isPractice && <PracticeBadge className="w-fit self-end" />}
 				<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">{memoizedLines}</span>
 				{variant !== "mc" && (
 					<div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-4">

src/components/Exercises/InteractiveSpeaking/old.tsx

@@ -1,220 +0,0 @@
-import { InteractiveSpeakingExercise } from "@/interfaces/exam";
-import { CommonProps } from "../types";
-import { useEffect, useState } from "react";
-import { BsCheckCircleFill, BsMicFill, BsPauseCircle, BsPlayCircle, BsTrashFill } from "react-icons/bs";
-import dynamic from "next/dynamic";
-import useExamStore, { usePersistentExamStore } from "@/stores/exam";
-
-const Waveform = dynamic(() => import("../../Waveform"), { ssr: false });
-const ReactMediaRecorder = dynamic(() => import("react-media-recorder").then((mod) => mod.ReactMediaRecorder), {
-	ssr: false,
-});
-
-const InteractiveSpeaking: React.FC<InteractiveSpeakingExercise & CommonProps> = ({
-	id,
-	title,
-	first_title,
-	second_title,
-	examID,
-	type,
-	prompts,
-	userSolutions,
-	isPractice = false,
-	registerSolution,
-	headerButtons,
-	footerButtons,
-	preview,
-}) => {
-	const [recordingDuration, setRecordingDuration] = useState(0);
-	const [isRecording, setIsRecording] = useState(false);
-	const [mediaBlob, setMediaBlob] = useState<string>();
-	const [answers, setAnswers] = useState<{ prompt: string; blob: string; questionIndex: number }[]>([]);
-
-	const examState = useExamStore((state) => state);
-	const persistentExamState = usePersistentExamStore((state) => state);
-
-	const { questionIndex } = !preview ? examState : persistentExamState;
-
-	useEffect(() => {
-		setAnswers((prev) => [...prev.filter(x => x.questionIndex !== questionIndex), {
-			questionIndex: questionIndex,
-			prompt: prompts[questionIndex].text,
-			blob: mediaBlob!,
-		}]);
-		setMediaBlob(undefined);
-	}, [answers, mediaBlob, prompts, questionIndex]);
-
-	useEffect(() => {
-		registerSolution(() => ({
-			exercise: id,
-			solutions: answers,
-			score: { correct: 100, total: 100, missing: 0 },
-			type,
-			isPractice
-		}));
-	}, [id, answers, mediaBlob, type, isPractice, prompts, registerSolution]);
-
-	useEffect(() => {
-		if (userSolutions.length > 0 && answers.length === 0) {
-			const solutions = userSolutions as unknown as typeof answers;
-			setAnswers(solutions);
-
-			if (!mediaBlob) setMediaBlob(solutions.find((x) => x.questionIndex === questionIndex)?.blob);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [userSolutions, mediaBlob, answers]);
-
-	useEffect(() => {
-		let recordingInterval: NodeJS.Timer | undefined = undefined;
-		if (isRecording) {
-			recordingInterval = setInterval(() => setRecordingDuration((prev) => prev + 1), 1000);
-		} else if (recordingInterval) {
-			clearInterval(recordingInterval);
-		}
-
-		return () => {
-			if (recordingInterval) clearInterval(recordingInterval);
-		};
-	}, [isRecording]);
-
-	return (
-		<div className="flex flex-col gap-4 mt-4 w-full">
-			{headerButtons}
-			<div className="flex flex-col h-full w-full gap-9">
-				<div className="flex flex-col w-full gap-8 bg-mti-gray-smoke rounded-xl py-8 pb-12 px-16">
-					<div className="flex flex-col gap-3">
-						<span className="font-semibold">{!!first_title && !!second_title ? `${first_title} & ${second_title}` : title}</span>
-					</div>
-					{prompts && prompts.length > 0 && (
-						<div className="flex flex-col gap-4 w-full items-center">
-							<video key={questionIndex} autoPlay controls className="max-w-3xl rounded-xl">
-								<source src={prompts[questionIndex].video_url} />
-							</video>
-						</div>
-					)}
-				</div>
-
-				<ReactMediaRecorder
-					audio
-					key={questionIndex}
-					onStop={(blob) => setMediaBlob(blob)}
-					render={({ status, startRecording, stopRecording, pauseRecording, resumeRecording, clearBlobUrl, mediaBlobUrl }) => (
-						<div className="w-full p-4 px-8 bg-transparent border-2 border-mti-gray-platinum rounded-2xl flex-col gap-8 items-center">
-							<p className="text-base font-normal">Record your answer:</p>
-							<div className="flex gap-8 items-center justify-center py-8">
-								{status === "idle" && (
-									<>
-										<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
-										{status === "idle" && (
-											<BsMicFill
-												onClick={() => {
-													setRecordingDuration(0);
-													startRecording();
-													setIsRecording(true);
-												}}
-												className="h-5 w-5 text-mti-gray-cool cursor-pointer"
-											/>
-										)}
-									</>
-								)}
-								{status === "recording" && (
-									<>
-										<div className="flex gap-4 items-center">
-											<span className="text-xs w-9">
-												{Math.floor(recordingDuration / 60)
-													.toString(10)
-													.padStart(2, "0")}
-												:
-												{Math.floor(recordingDuration % 60)
-													.toString(10)
-													.padStart(2, "0")}
-											</span>
-										</div>
-										<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
-										<div className="flex gap-4 items-center">
-											<BsPauseCircle
-												onClick={() => {
-													setIsRecording(false);
-													pauseRecording();
-												}}
-												className="text-red-500 w-8 h-8 cursor-pointer"
-											/>
-											<BsCheckCircleFill
-												onClick={() => {
-													setIsRecording(false);
-													stopRecording();
-												}}
-												className="text-mti-purple-light w-8 h-8 cursor-pointer"
-											/>
-										</div>
-									</>
-								)}
-								{status === "paused" && (
-									<>
-										<div className="flex gap-4 items-center">
-											<span className="text-xs w-9">
-												{Math.floor(recordingDuration / 60)
-													.toString(10)
-													.padStart(2, "0")}
-												:
-												{Math.floor(recordingDuration % 60)
-													.toString(10)
-													.padStart(2, "0")}
-											</span>
-										</div>
-										<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
-										<div className="flex gap-4 items-center">
-											<BsPlayCircle
-												onClick={() => {
-													setIsRecording(true);
-													resumeRecording();
-												}}
-												className="text-mti-purple-light w-8 h-8 cursor-pointer"
-											/>
-											<BsCheckCircleFill
-												onClick={() => {
-													setIsRecording(false);
-													stopRecording();
-												}}
-												className="text-mti-purple-light w-8 h-8 cursor-pointer"
-											/>
-										</div>
-									</>
-								)}
-								{status === "stopped" && mediaBlobUrl && (
-									<>
-										<Waveform audio={mediaBlobUrl} waveColor="#FCDDEC" progressColor="#EF5DA8" />
-										<div className="flex gap-4 items-center">
-											<BsTrashFill
-												className="text-mti-gray-cool cursor-pointer w-5 h-5"
-												onClick={() => {
-													setRecordingDuration(0);
-													clearBlobUrl();
-													setMediaBlob(undefined);
-												}}
-											/>
-
-											<BsMicFill
-												onClick={() => {
-													clearBlobUrl();
-													setRecordingDuration(0);
-													startRecording();
-													setIsRecording(true);
-													setMediaBlob(undefined);
-												}}
-												className="h-5 w-5 text-mti-gray-cool cursor-pointer"
-											/>
-										</div>
-									</>
-								)}
-							</div>
-						</div>
-					)}
-				/>
-			</div>
-			{footerButtons}
-		</div>
-	);
-}
-
-export default InteractiveSpeaking;

src/components/Exercises/MatchSentences/index.tsx

@@ -4,6 +4,7 @@ import { Fragment, useCallback, useEffect, useState } from "react";
 import { CommonProps } from "../types";
 import { DndContext, DragEndEvent } from "@dnd-kit/core";
 import { DraggableOptionArea, DroppableQuestionArea } from "./DragNDrop";
+import PracticeBadge from "../../Low/PracticeBadge";
 
 const MatchSentences: React.FC<MatchSentencesExercise & CommonProps> = ({
 	id,
@@ -61,7 +62,7 @@ const MatchSentences: React.FC<MatchSentencesExercise & CommonProps> = ({
 						</Fragment>
 					))}
 				</span>
-
+				{isPractice && <PracticeBadge className="w-fit self-end" />}
 				<DndContext onDragEnd={handleDragEnd}>
 					<div className="flex flex-col gap-8 w-full items-center justify-between bg-mti-gray-smoke rounded-xl px-24 py-6">
 						<div className="flex flex-col gap-4">

src/components/Exercises/MultipleChoice/Question.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
+import PracticeBadge from "@/components/Low/PracticeBadge";
 import { MultipleChoiceQuestion } from "@/interfaces/exam";
 import clsx from "clsx";
 import reactStringReplace from "react-string-replace";
@@ -8,6 +9,7 @@ interface Props {
     userSolution: string | undefined;
 	onSelectOption?: (option: string) => void;
 	showSolution?: boolean;
+	isPractice?: boolean
 }
 
 const Question: React.FC<MultipleChoiceQuestion & Props> = ({
@@ -17,6 +19,7 @@ const Question: React.FC<MultipleChoiceQuestion & Props> = ({
 	options,
 	userSolution,
 	onSelectOption,
+	isPractice,
 }) => {
 	const renderPrompt = (prompt: string) => {
 		return reactStringReplace(prompt, /(<u>.*?<\/u>)/g, (match) => {
@@ -26,11 +29,12 @@ const Question: React.FC<MultipleChoiceQuestion & Props> = ({
 	};
 
 	return (
-		<div className="flex flex-col gap-8">
+		<div className="flex flex-col gap-8 relative">
+			{isPractice && <PracticeBadge className="absolute -top-4 -right-12" />}
 			{isNaN(Number(id)) ? (
-				<span className="text-lg">{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")}</span>
+				<span className={clsx("text-lg", isPractice && "text-mti-red")}>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")}</span>
 			) : (
-				<span className="text-lg">
+				<span className={clsx("text-lg", isPractice && "text-mti-red")}>
 					<>
 						{id} - <span>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")}</span>
 					</>

src/components/Exercises/MultipleChoice/index.tsx

@@ -4,6 +4,7 @@ import clsx from "clsx";
 import { useCallback, useEffect, useState } from "react";
 import { CommonProps } from "../types";
 import Question from "./Question";
+import PracticeBadge from "../../Low/PracticeBadge";
 
 
 const MultipleChoice: React.FC<MultipleChoiceExercise & CommonProps> = ({
@@ -81,6 +82,7 @@ const MultipleChoice: React.FC<MultipleChoiceExercise & CommonProps> = ({
 				key={question.id} className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
 				<Question
 					{...question}
+					isPractice={isPractice}
 					userSolution={answers.find((x) => question.id === x.question)?.option}
 					onSelectOption={(option) => onSelectOption(option, question)}
 				/>
@@ -93,6 +95,7 @@ const MultipleChoice: React.FC<MultipleChoiceExercise & CommonProps> = ({
 				{questionIndex < questions.length && (
 					<Question
 						{...questions[questionIndex]}
+						isPractice={isPractice}
 						userSolution={answers.find((x) => questions[questionIndex].id === x.question)?.option}
 						onSelectOption={(option) => onSelectOption(option, questions[questionIndex])}
 					/>
@@ -103,6 +106,7 @@ const MultipleChoice: React.FC<MultipleChoiceExercise & CommonProps> = ({
 				<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
 					<Question
 						{...questions[questionIndex + 1]}
+						isPractice={isPractice}
 						userSolution={answers.find((x) => questions[questionIndex + 1].id === x.question)?.option}
 						onSelectOption={(option) => onSelectOption(option, questions[questionIndex + 1])}
 					/>

src/components/Exercises/Speaking.tsx

@@ -6,6 +6,7 @@ import dynamic from "next/dynamic";
 import Button from "../Low/Button";
 import Modal from "../Modal";
 import useExamStore, { usePersistentExamStore } from "@/stores/exam";
+import PracticeBadge from "../Low/PracticeBadge";
 
 const Waveform = dynamic(() => import("../Waveform"), { ssr: false });
 const ReactMediaRecorder = dynamic(() => import("react-media-recorder").then((mod) => mod.ReactMediaRecorder), {
@@ -133,6 +134,8 @@ const Speaking: React.FC<SpeakingExercise & CommonProps> = ({
 					</div>
 				</div>
 
+				{isPractice && <PracticeBadge className="w-fit self-end" />}
+
 				{prompts && prompts.length > 0 && (
 					<div className="w-full h-full flex flex-col gap-4">
 						<textarea

src/components/Exercises/TrueFalse.tsx

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import { Fragment, useCallback, useEffect, useState } from "react";
 import { CommonProps } from "./types";
 import Button from "../Low/Button";
+import PracticeBadge from "../Low/PracticeBadge";
 
 const TrueFalse: React.FC<TrueFalseExercise & CommonProps> = ({
 	id,
@@ -80,6 +81,7 @@ const TrueFalse: React.FC<TrueFalseExercise & CommonProps> = ({
 					</div>
 				</div>
 				<span className="text-sm w-full leading-6">You can click a selected option again to deselect it.</span>
+				{isPractice && <PracticeBadge className="w-fit self-end" />}
 				<div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-8">
 					{questions.map((question, index) => {
 						const id = question.id.toString();

src/components/Exercises/WriteBlanks/index.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from "react";
 import reactStringReplace from "react-string-replace";
 import { CommonProps } from "../types";
 import Blank from "./Blank";
+import PracticeBadge from "../../Low/PracticeBadge";
 
 const WriteBlanks: React.FC<WriteBlanksExercise & CommonProps> = ({
 	id,
@@ -63,7 +64,7 @@ const WriteBlanks: React.FC<WriteBlanksExercise & CommonProps> = ({
 	};
 
 	return (
-		<div className="flex flex-col gap-4">
+		<div className="flex flex-col gap-4 relative">
 			{headerButtons}
 			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", (!headerButtons && !footerButtons) && "mb-20")}>
 				<span className="text-sm w-full leading-6">
@@ -74,6 +75,7 @@ const WriteBlanks: React.FC<WriteBlanksExercise & CommonProps> = ({
 						</span>
 					))}
 				</span>
+				{isPractice && <PracticeBadge className="w-fit self-end" />}
 				<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">
 					{text.split("\\n").map((line, index) => (
 						<p key={index}>

src/components/Exercises/Writing.tsx

@@ -5,6 +5,7 @@ import { Dialog, DialogPanel, Transition, TransitionChild } from "@headlessui/re
 import useExamStore, { usePersistentExamStore } from "@/stores/exam";
 import { CommonProps } from "./types";
 import { toast } from "react-toastify";
+import PracticeBadge from "../Low/PracticeBadge";
 
 const Writing: React.FC<WritingExercise & CommonProps> = ({
 	id,
@@ -145,6 +146,8 @@ const Writing: React.FC<WritingExercise & CommonProps> = ({
 					)}
 				</div>
 
+				{isPractice && <PracticeBadge className="w-fit self-end" />}
+
 				<div className="w-full h-full flex flex-col gap-4">
 					<span className="whitespace-pre-wrap">{suffix}</span>
 					<textarea

src/components/High/Table.tsx

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

src/components/Low/PracticeBadge.tsx

@@ -0,0 +1,11 @@
+import { clsx } from "clsx"
+
+interface Props {
+	className?: string
+}
+
+export default function PracticeBadge({ className }: Props) {
+	return (
+		<div className={clsx("bg-mti-rose/50 text-white px-2 py-1 rounded-full ring-1 ring-mti-red", className)}>Practice Exercise (Question Ungraded)</div>
+	)
+}

src/components/Medium/StatGridItem.tsx

@@ -77,7 +77,6 @@ interface StatsGridItemProps {
 	assignments: Assignment[];
 	users: User[];
 	training?: boolean;
-	gradingSystem?: Step[];
 	selectedTrainingExams?: string[];
 	maxTrainingExams?: number;
 	setSelectedTrainingExams?: React.Dispatch<React.SetStateAction<string[]>>;
@@ -92,7 +91,6 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 	users,
 	training,
 	selectedTrainingExams,
-	gradingSystem,
 	setSelectedTrainingExams,
 	renderPdfIcon,
 	width = undefined,

src/components/Medium/Timer.tsx

@@ -3,7 +3,7 @@ import {useEffect, useState} from "react";
 import {motion} from "framer-motion";
 import TimerEndedModal from "../TimerEndedModal";
 import clsx from "clsx";
-import {BsStopwatch} from "react-icons/bs";
+import { BsStopwatch } from "react-icons/bs";
 
 interface Props {
 	minTimer: number;
@@ -11,7 +11,7 @@ interface Props {
 	standalone?: boolean;
 }
 
-const Timer: React.FC<Props> = ({minTimer, disableTimer, standalone = false}) => {
+const Timer: React.FC<Props> = ({ minTimer, disableTimer, standalone = false }) => {
 	const [timer, setTimer] = useState(minTimer * 60);
 	const [showModal, setShowModal] = useState(false);
 	const [warningMode, setWarningMode] = useState(false);
@@ -51,9 +51,9 @@ const Timer: React.FC<Props> = ({minTimer, disableTimer, standalone = false}) =>
 					standalone ? "top-10" : "top-4",
 					warningMode && !disableTimer && "bg-mti-red-light text-mti-gray-seasalt",
 				)}
-				initial={{scale: warningMode && !disableTimer ? 0.8 : 1}}
+				initial={{ scale: warningMode && !disableTimer ? 0.8 : 1 }}
-				animate={{scale: warningMode && !disableTimer ? 1.1 : 1}}
+				animate={{ scale: warningMode && !disableTimer ? 1.1 : 1 }}
-				transition={{repeat: Infinity, repeatType: "reverse", duration: 0.5, ease: "easeInOut"}}>
+				transition={{ repeat: Infinity, repeatType: "reverse", duration: 0.5, ease: "easeInOut" }}>
 				<BsStopwatch className="w-6 h-6" />
 				<span className="text-lg font-bold w-12">
 					{timer > 0 && (

src/components/Solutions/MultipleChoice.tsx

@@ -6,6 +6,7 @@ import reactStringReplace from "react-string-replace";
 import { CommonProps } from ".";
 import Button from "../Low/Button";
 import { v4 } from "uuid";
+import PracticeBadge from "../Low/PracticeBadge";
 
 function Question({
 	id,
@@ -14,7 +15,8 @@ function Question({
 	solution,
 	options,
 	userSolution,
-}: MultipleChoiceQuestion & { userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean }) {
+	isPractice = false
+}: MultipleChoiceQuestion & { userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean, isPractice?: boolean }) {
 	const { userSolutions } = useExamStore((state) => state);
 
 	const questionShuffleMap = userSolutions.reduce((foundMap, userSolution) => {
@@ -44,7 +46,8 @@ function Question({
 	};
 
 	return (
-		<div className="flex flex-col gap-4">
+		<div className="flex flex-col gap-4 relative">
+			{isPractice && <PracticeBadge className="absolute -top-4 -right-12" />}
 			{isNaN(Number(id)) ? (
 				<span>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")} </span>
 			) : (
@@ -89,7 +92,7 @@ function Question({
 	);
 }
 
-export default function MultipleChoice({ id, type, prompt, questions, userSolutions, headerButtons, footerButtons}: MultipleChoiceExercise & CommonProps) {
+export default function MultipleChoice({ id, type, prompt, questions, userSolutions, headerButtons, footerButtons, isPractice = false}: MultipleChoiceExercise & CommonProps) {
 	const { questionIndex, setQuestionIndex, partIndex, exam } = useExamStore((state) => state);
 
 	const stats = useExamStore((state) => state.userSolutions);
@@ -116,6 +119,7 @@ export default function MultipleChoice({ id, type, prompt, questions, userSoluti
 				key={question.id} className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
 				<Question
 					{...question}
+					isPractice={isPractice}
 					userSolution={userSolutions.find((x) => question.id === x.question)?.option}
 				/>
 			</div>
@@ -127,6 +131,7 @@ export default function MultipleChoice({ id, type, prompt, questions, userSoluti
 				{questionIndex < questions.length && (
 					<Question
 						{...questions[questionIndex]}
+						isPractice={isPractice}
 						userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option}
 					/>
 				)}
@@ -136,6 +141,7 @@ export default function MultipleChoice({ id, type, prompt, questions, userSoluti
 				<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
 					<Question
 						{...questions[questionIndex + 1]}
+						isPractice={isPractice}
 						userSolution={userSolutions.find((x) => questions[questionIndex + 1].id === x.question)?.option}
 					/>
 				</div>

src/dashboards/AssignmentView.tsx

@@ -107,7 +107,7 @@ export default function AssignmentView({ isOpen, users, assignment, onClose }: P
 			},
 		};
 
-		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,

src/dashboards/IconCard.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import {IconType} from "react-icons";
+import { IconType } from "react-icons";
 
 interface Props {
 	Icon: IconType;
@@ -10,11 +10,12 @@ interface Props {
 	onClick?: () => void;
 	isSelected?: boolean;
 	isLoading?: boolean;
+	disabled?: boolean
 	className?: string;
 }
 
-export default function IconCard({Icon, label, value, color, tooltip, onClick, className, isLoading, isSelected}: Props) {
+export default function IconCard({ Icon, label, value, color, tooltip, onClick, className, isLoading, disabled, isSelected }: Props) {
-	const colorClasses: {[key in typeof color]: string} = {
+	const colorClasses: { [key in typeof color]: string } = {
 		purple: "mti-purple-light",
 		red: "mti-red-light",
 		rose: "mti-rose-light",
@@ -24,8 +25,9 @@ export default function IconCard({Icon, label, value, color, tooltip, onClick, c
 	return (
 		<button
 			onClick={onClick}
+			disabled={disabled}
 			className={clsx(
-				"bg-white border rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-full h-52 justify-center cursor-pointer hover:shadow-lg hover:border-mti-purple-dark transition ease-in-out duration-300",
+				"bg-white border rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-full h-52 justify-center cursor-pointer hover:shadow-lg hover:border-mti-purple-dark transition ease-in-out duration-300 disabled:grayscale-0",
 				tooltip && "tooltip tooltip-bottom",
 				isSelected && `border border-solid border-${colorClasses[color]}`,
 				className,

src/dashboards/Student.tsx

@@ -37,7 +37,6 @@ interface Props {
 }
 
 export default function StudentDashboard({ user, linkedCorporate }: Props) {
-	const { gradingSystem } = useGradingSystem();
 	const { sessions } = useSessions(user.id);
 	const { data: stats } = useFilterRecordsByUser<Stat[]>(user.id, !user?.id);
 	const { assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments } = useAssignments({ assignees: user?.id });
@@ -230,7 +229,6 @@ export default function StudentDashboard({ user, linkedCorporate }: Props) {
 									<div className="flex w-full justify-between">
 										<span className="text-sm font-bold md:font-extrabold">{capitalize(module)}</span>
 										<span className="text-mti-gray-dim text-sm font-normal">
-											{module === "level" && !!gradingSystem && `English Level: ${getGradingLabel(level, gradingSystem.steps)}`}
 											{module !== "level" && `Level ${level} / Level 9 (Desired Level: ${desiredLevel})`}
 										</span>
 									</div>

src/exams/Finish.tsx

@@ -7,7 +7,7 @@ import useExamStore from "@/stores/exam";
 import { calculateBandScore, getGradingLabel } from "@/utils/score";
 import clsx from "clsx";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
 	BsArrowCounterclockwise,
 	BsBan,
@@ -40,6 +40,7 @@ interface Props {
 	user: User;
 	modules: Module[];
 	scores: Score[];
+	practiceScores: Score[]
 	information: {
 		timeSpent?: number;
 		inactivity?: number;
@@ -51,14 +52,17 @@ interface Props {
 	destination?: string
 }
 
-export default function Finish({ user, scores, modules, information, solutions, isLoading, assignment, onViewResults, destination }: Props) {
+export default function Finish({ user, practiceScores, scores, modules, information, solutions, isLoading, assignment, onViewResults, destination }: Props) {
 	const [selectedModule, setSelectedModule] = useState(modules[0]);
 	const [selectedScore, setSelectedScore] = useState<Score>(scores.find((x) => x.module === modules[0])!);
+	const [selectedPracticeScore, setSelectedPracticeScore] = useState<Score | undefined>(practiceScores.find((x) => x.module === modules[0]));
 	const [isExtraInformationOpen, setIsExtraInformationOpen] = useState(false);
 	const {selectedModules, exams, dispatch} = useExamStore((s) => s);
 
 	const aiUsage = Math.round(ai_usage(solutions) * 100);
-	const { gradingSystem } = useGradingSystem();
+
+	const entity = useMemo(() => assignment?.entity || user.entities[0]?.id || "", [assignment?.entity, user.entities])
+	const { gradingSystem } = useGradingSystem(entity);
 
 	const router = useRouter()
 
@@ -234,7 +238,7 @@ export default function Finish({ user, scores, modules, information, solutions,
 				{!isLoading && !(assignment && !assignment.released) && (
 					<div className="mb-20 mt-32 flex w-full items-center justify-between gap-9">
 						<span className="max-w-3xl">{moduleResultText(selectedModule, bandScore)}</span>
-						<div className="flex gap-9 px-16">
+						<div className="flex items-center gap-9 px-16">
 							<div
 								className={clsx("radial-progress overflow-hidden", moduleColors[selectedModule].progress)}
 								style={
@@ -265,21 +269,32 @@ export default function Finish({ user, scores, modules, information, solutions,
 										</div>
 									</div>
 									<div className="flex gap-2">
-										<div className="bg-mti-purple-light mt-1 h-3 w-3 rounded-full" />
+										<div className="bg-mti-purple-light mt-1 h-3 min-h-[0.75rem] w-3 min-w-[0.75rem] rounded-full" />
 										<div className="flex flex-col">
 											<span className="text-mti-purple-light">{selectedScore.correct.toString().padStart(2, "0")}</span>
-											<span className="text-lg">Correct</span>
+											<span className="text-lg whitespace-nowrap">Correct (Graded)</span>
 										</div>
 									</div>
 									<div className="flex gap-2">
-										<div className="bg-mti-rose-light mt-1 h-3 w-3 rounded-full" />
+										<div className="bg-mti-rose-light mt-1 h-3 min-h-[0.75rem] w-3 min-w-[0.75rem] rounded-full" />
 										<div className="flex flex-col">
 											<span className="text-mti-rose-light">
 												{(selectedScore.total - selectedScore.correct).toString().padStart(2, "0")}
 											</span>
-											<span className="text-lg">Wrong</span>
+											<span className="text-lg whitespace-nowrap">Wrong (Graded)</span>
 										</div>
 									</div>
+									{selectedPracticeScore && (
+										<div className="flex gap-2">
+											<div className="bg-mti-green mt-1 h-3 min-h-[0.75rem] w-3 min-w-[0.75rem] rounded-full" />
+											<div className="flex flex-col">
+												<span className="text-mti-green">
+													{selectedPracticeScore.correct} / {selectedScore.total}
+												</span>
+												<span className="text-lg whitespace-nowrap">Practice Questions</span>
+											</div>
+										</div>
+									)}
 								</div>
 							) : (
 								<div className="w-28 h-full" />

src/exams/Listening.tsx.bak

@@ -0,0 +1,372 @@
+import { ListeningExam, MultipleChoiceExercise, Script, UserSolution } from "@/interfaces/exam";
+import { Fragment, useEffect, useState } from "react";
+import { renderExercise } from "@/components/Exercises";
+import { renderSolution } from "@/components/Solutions";
+import ModuleTitle from "@/components/Medium/ModuleTitle";
+import AudioPlayer from "@/components/Low/AudioPlayer";
+import Button from "@/components/Low/Button";
+import BlankQuestionsModal from "@/components/QuestionsModal";
+import useExamStore, { usePersistentExamStore } from "@/stores/examStore";
+import PartDivider from "./Navigation/SectionDivider";
+import { Dialog, Transition } from "@headlessui/react";
+import { capitalize } from "lodash";
+import { mapBy } from "@/utils";
+
+interface Props {
+	exam: ListeningExam;
+	showSolutions?: boolean;
+	preview?: boolean;
+	onFinish: (userSolutions: UserSolution[]) => void;
+}
+
+function ScriptModal({ isOpen, script, onClose }: { isOpen: boolean; script: Script; onClose: () => void }) {
+	return (
+		<Transition appear show={isOpen} as={Fragment}>
+			<Dialog as="div" className="relative z-10" onClose={onClose}>
+				<Transition.Child
+					as={Fragment}
+					enter="ease-out duration-300"
+					enterFrom="opacity-0"
+					enterTo="opacity-100"
+					leave="ease-in duration-200"
+					leaveFrom="opacity-100"
+					leaveTo="opacity-0">
+					<div className="fixed inset-0 bg-black bg-opacity-25" />
+				</Transition.Child>
+
+				<div className="fixed inset-0 overflow-y-auto">
+					<div className="flex min-h-full items-center justify-center p-4 text-center">
+						<Transition.Child
+							as={Fragment}
+							enter="ease-out duration-300"
+							enterFrom="opacity-0 scale-95"
+							enterTo="opacity-100 scale-100"
+							leave="ease-in duration-200"
+							leaveFrom="opacity-100 scale-100"
+							leaveTo="opacity-0 scale-95">
+							<Dialog.Panel className="w-full relative max-w-4xl transform rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+								<div className="mt-2 overflow-auto mb-28">
+									<p className="text-sm">
+										{typeof script === "string" && script.split("\\n").map((line, index) => (
+											<Fragment key={index}>
+												{line}
+												<br />
+											</Fragment>
+										))}
+
+										{typeof script === "object" && script.map((line, index) => (
+											<span key={index}>
+												<b>{line.name} ({capitalize(line.gender)})</b>: {line.text}
+												<br />
+												<br />
+											</span>
+										))}
+									</p>
+								</div>
+
+								<div className="absolute bottom-8 right-8 max-w-[200px] self-end w-full">
+									<Button color="purple" variant="outline" className="max-w-[200px] self-end w-full" onClick={onClose}>
+										Close
+									</Button>
+								</div>
+							</Dialog.Panel>
+						</Transition.Child>
+					</div>
+				</div>
+			</Dialog>
+		</Transition>
+	);
+}
+
+const INSTRUCTIONS_AUDIO_SRC =
+	"https://firebasestorage.googleapis.com/v0/b/storied-phalanx-349916.appspot.com/o/generic_listening_intro_v2.mp3?alt=media&token=16769f5f-1e9b-4a72-86a9-45a6f0fa9f82";
+
+export default function Listening({ exam, showSolutions = false, preview = false, onFinish }: Props) {
+	const listeningBgColor = "bg-ielts-listening-light";
+
+	const [showTextModal, setShowTextModal] = useState(false);
+	const [timesListened, setTimesListened] = useState(0);
+	const [showBlankModal, setShowBlankModal] = useState(false);
+	const [multipleChoicesDone, setMultipleChoicesDone] = useState<{ id: string; amount: number }[]>([]);
+
+	const [seenParts, setSeenParts] = useState<Set<number>>(new Set(showSolutions ? exam.parts.map((_, index) => index) : []));
+	const [showPartDivider, setShowPartDivider] = useState<boolean>(typeof exam.parts[0].intro === "string" && exam.parts[0].intro !== "");
+
+	const examState = useExamStore((state) => state);
+	const persistentExamState = usePersistentExamStore((state) => state);
+
+	const {
+		hasExamEnded,
+		userSolutions,
+		exerciseIndex,
+		partIndex,
+		questionIndex: storeQuestionIndex,
+		setBgColor,
+		setUserSolutions,
+		setHasExamEnded,
+		setExerciseIndex,
+		setPartIndex,
+		setQuestionIndex: setStoreQuestionIndex
+	} = !preview ? examState : persistentExamState;
+
+	const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));
+
+	useEffect(() => {
+		if (!showSolutions && exam.parts[partIndex]?.intro !== undefined && exam.parts[partIndex]?.intro !== "" && !seenParts.has(exerciseIndex)) {
+			setShowPartDivider(true);
+			setBgColor(listeningBgColor);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [partIndex]);
+
+	useEffect(() => {
+		if (showSolutions) return setExerciseIndex(0);
+	}, [setExerciseIndex, showSolutions]);
+
+	useEffect(() => {
+		if (partIndex === -1 && exam.variant === "partial") {
+			setPartIndex(0);
+		}
+	}, [partIndex, exam, setPartIndex]);
+
+	useEffect(() => {
+		const previousParts = exam.parts.filter((_, index) => index < partIndex);
+		let previousMultipleChoice = previousParts.flatMap((x) => x.exercises).filter((x) => x.type === "multipleChoice") as MultipleChoiceExercise[];
+
+		if (partIndex > -1 && exerciseIndex > -1) {
+			const previousPartExercises = exam.parts[partIndex].exercises.filter((_, index) => index < exerciseIndex);
+			const partMultipleChoice = previousPartExercises.filter((x) => x.type === "multipleChoice") as MultipleChoiceExercise[];
+
+			previousMultipleChoice = [...previousMultipleChoice, ...partMultipleChoice];
+		}
+
+		setMultipleChoicesDone(previousMultipleChoice.map((x) => ({ id: x.id, amount: x.questions.length - 1 })));
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	useEffect(() => {
+		if (hasExamEnded) onFinish(userSolutions)
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [hasExamEnded]);
+
+	const confirmFinishModule = (keepGoing?: boolean) => {
+		if (!keepGoing) {
+			setShowBlankModal(false);
+			return;
+		}
+
+		onFinish(userSolutions);
+	};
+
+	const nextExercise = (solution?: UserSolution) => {
+		if (solution)
+			setUserSolutions([
+				...userSolutions.filter((x) => x.exercise !== solution.exercise),
+				{ ...solution, module: "listening", exam: exam.id }
+			]);
+	};
+
+	const previousExercise = (solution?: UserSolution) => {
+		scrollToTop();
+		if (solution)
+			setUserSolutions([
+				...userSolutions.filter((x) => x.exercise !== solution.exercise),
+				{ ...solution, module: "listening", exam: exam.id }
+			]);
+
+		setPartIndex(partIndex - 1)
+	};
+
+	const nextPart = () => {
+		scrollToTop()
+		if (partIndex + 1 < exam.parts.length && !hasExamEnded) {
+			setPartIndex(partIndex + 1);
+			setExerciseIndex(0);
+			return;
+		}
+
+		if (!showSolutions && !hasExamEnded) {
+			const exercises = partIndex < exam.parts.length ? exam.parts[partIndex].exercises : []
+			const exerciseIDs = mapBy(exercises, 'id')
+
+			const hasMissing = userSolutions.filter(x => exerciseIDs.includes(x.exercise)).map(x => x.score.missing).some(x => x > 0)
+
+			if (hasMissing) return setShowBlankModal(true);
+
+		}
+
+		setHasExamEnded(false);
+		onFinish(userSolutions);
+	}
+
+	const renderPartExercises = () => {
+		const exercises = partIndex > -1 ? exam.parts[partIndex].exercises : []
+		const formattedExercises = exercises.map(exercise => ({
+			...exercise,
+			userSolutions: userSolutions.find((x) => x.exercise === exercise.id)?.solutions || [],
+		}))
+
+		return (
+			<div className="flex flex-col gap-4">
+				{formattedExercises.map(e => showSolutions
+					? renderSolution(e, nextExercise, previousExercise, undefined, true)
+					: renderExercise(e, exam.id, nextExercise, previousExercise, undefined, true))}
+			</div>
+		)
+	}
+
+	const renderAudioInstructionsPlayer = () => (
+		<div className="flex flex-col gap-8 w-full bg-mti-gray-seasalt rounded-xl py-8 px-16">
+			<div className="flex flex-col w-full gap-2">
+				<h4 className="text-xl font-semibold">Please listen to the instructions audio attentively.</h4>
+			</div>
+			<div className="rounded-xl flex flex-col gap-4 items-center w-full h-fit">
+				<AudioPlayer key={partIndex} src={INSTRUCTIONS_AUDIO_SRC} color="listening" />
+			</div>
+		</div>
+	);
+
+	const renderAudioPlayer = () => (
+		<div className="flex flex-col gap-8 w-full bg-mti-gray-seasalt rounded-xl py-8 px-16">
+			{exam?.parts[partIndex]?.audio?.source ? (
+				<>
+					<div className="w-full items-start flex justify-between">
+						<div className="flex flex-col w-full gap-2">
+							<h4 className="text-xl font-semibold">Please listen to the following audio attentively.</h4>
+							<span className="text-base">
+								{(() => {
+									const audioRepeatTimes = exam?.parts[partIndex]?.audio?.repeatableTimes;
+									return audioRepeatTimes && audioRepeatTimes > 0
+										? `You will only be allowed to listen to the audio ${audioRepeatTimes - timesListened} time(s).`
+										: "You may listen to the audio as many times as you would like.";
+								})()}
+							</span>
+						</div>
+						{partIndex > -1 && !examState.assignment && !!exam.parts[partIndex].script && (
+							<Button
+								onClick={() => setShowTextModal(true)}
+								variant="outline"
+								color="gray"
+								className="w-full max-w-[200px]"
+							>
+								View Transcript
+							</Button>
+						)}
+					</div>
+					<div className="rounded-xl flex flex-col gap-4 items-center w-full h-fit">
+						<AudioPlayer
+							key={partIndex}
+							src={exam?.parts[partIndex]?.audio?.source ?? ''}
+							color="listening"
+							onEnd={() => setTimesListened((prev) => prev + 1)}
+							disabled={exam?.parts[partIndex]?.audio?.repeatableTimes != null &&
+								timesListened === exam.parts[partIndex]?.audio?.repeatableTimes}
+							disablePause
+						/>
+					</div>
+				</>
+			) : (
+				<span>This section will be displayed the audio once it has been generated.</span>
+			)}
+
+		</div>
+	);
+
+	const progressButtons = () => (
+		<div className="flex justify-between w-full gap-8">
+			<Button
+				color="purple"
+				variant="outline"
+				onClick={previousExercise}
+				className="max-w-[200px] w-full">
+				Back
+			</Button>
+
+			<Button
+				color="purple"
+				onClick={nextPart}
+				className="max-w-[200px] self-end w-full">
+				Next
+			</Button>
+		</div>
+	)
+
+	return (
+		<>
+			{showPartDivider ?
+				<PartDivider
+					module="listening"
+					sectionLabel="Section"
+					defaultTitle="Listening exam"
+					section={exam.parts[partIndex]}
+					sectionIndex={partIndex}
+					onNext={() => { setShowPartDivider(false); setBgColor("bg-white"); setSeenParts((prev) => new Set(prev).add(exerciseIndex)) }}
+				/> : (
+					<>
+						<BlankQuestionsModal isOpen={showBlankModal} onClose={confirmFinishModule} />
+						{partIndex > -1 && exam.parts[partIndex].script &&
+							<ScriptModal script={exam.parts[partIndex].script!} isOpen={showTextModal} onClose={() => setShowTextModal(false)} />
+						}
+						<div className="flex flex-col h-full w-full gap-8 justify-between">
+							<ModuleTitle
+								exerciseIndex={partIndex + 1}
+								minTimer={exam.minTimer}
+								module="listening"
+								totalExercises={exam.parts.length}
+								disableTimer={showSolutions || preview}
+								indexLabel="Part"
+							/>
+
+							{/* Audio Player for the Instructions */}
+							{partIndex === -1 && renderAudioInstructionsPlayer()}
+
+							{/* Part's audio player */}
+							{partIndex > -1 && renderAudioPlayer()}
+
+							{/* Exercise renderer */}
+
+							{exerciseIndex > -1 && partIndex > -1 && (
+								<>
+									{progressButtons()}
+									{renderPartExercises()}
+									{progressButtons()}
+								</>
+							)}
+						</div>
+
+						{exerciseIndex === -1 && partIndex > -1 && exam.variant !== "partial" && (
+							<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
+								<Button
+									color="purple"
+									variant="outline"
+									onClick={() => {
+										if (partIndex === 0) return setPartIndex(-1);
+
+										setExerciseIndex(exam.parts[partIndex - 1].exercises.length - 1);
+										setPartIndex(partIndex - 1);
+									}}
+									className="max-w-[200px] w-full">
+									Back
+								</Button>
+
+								<Button color="purple" onClick={() => setExerciseIndex(0)} className="max-w-[200px] self-end w-full">
+									Next
+								</Button>
+							</div>
+						)}
+
+						{partIndex === -1 && exam.variant !== "partial" && (
+							<Button color="purple" onClick={() => setPartIndex(0)} className="max-w-[200px] self-end w-full justify-self-end">
+								Start now
+							</Button>
+						)}
+						{exerciseIndex === -1 && partIndex === 0 && exam.variant === "partial" && (
+							<Button color="purple" onClick={() => setExerciseIndex(0)} className="max-w-[200px] self-end w-full justify-self-end">
+								Start now
+							</Button>
+						)}
+					</>)
+			}
+		</>
+	);
+}

src/hooks/useGrading.tsx

@@ -1,9 +1,9 @@
-import {Grading} from "@/interfaces";
+import { Grading } from "@/interfaces";
-import {Code, Group, User} from "@/interfaces/user";
+import { Code, Group, User } from "@/interfaces/user";
 import axios from "axios";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 
-export default function useGradingSystem() {
+export default function useGradingSystem(entity: string) {
 	const [gradingSystem, setGradingSystem] = useState<Grading>();
 	const [isLoading, setIsLoading] = useState(false);
 	const [isError, setIsError] = useState(false);
@@ -11,12 +11,12 @@ export default function useGradingSystem() {
 	const getData = () => {
 		setIsLoading(true);
 		axios
-			.get<Grading>(`/api/grading`)
+			.get<Grading>(`/api/grading?entity=${entity}`)
 			.then((response) => setGradingSystem(response.data))
 			.finally(() => setIsLoading(false));
 	};
 
-	useEffect(getData, []);
+	useEffect(getData, [entity]);
 
-	return {gradingSystem, isLoading, isError, reload: getData, mutate: setGradingSystem};
+	return { gradingSystem, isLoading, isError, reload: getData, mutate: setGradingSystem };
 }

src/hooks/useListSearch.tsx

@@ -1,11 +1,12 @@
-import {useState, useMemo} from "react";
+import { useState, useMemo } from "react";
 import Input from "@/components/Low/Input";
-import {search} from "@/utils/search";
+import { search } from "@/utils/search";
 
-export function useListSearch<T>(fields: string[][], rows: T[]) {
+export function useListSearch<T>(fields: string[][], rows: T[], placeholder?: string) {
 	const [text, setText] = useState("");
 
-	const renderSearch = () => <Input type="text" name="search" onChange={setText} placeholder="Enter search text" value={text} />;
+	const renderSearch = () =>
+		<Input type="text" name="search" onChange={setText} placeholder={placeholder || "Enter search text"} value={text} />;
 
 	const updatedRows = useMemo(() => {
 		if (text.length > 0) return search(text, fields, rows);

src/interfaces/index.ts

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

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 Select from "@/components/Low/Select";
-import {User} from "@/interfaces/user";
+import { Grading, Step } from "@/interfaces";
-import {CEFR_STEPS, GENERAL_STEPS, IELTS_STEPS, TOFEL_STEPS} from "@/resources/grading";
+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 clsx from "clsx";
-import {BsPlusCircle, BsTrash} from "react-icons/bs";
+import { useEffect, useState } from "react";
-import {toast} from "react-toastify";
+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 />

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

@@ -1,30 +1,30 @@
-import {useMemo, useState} from "react";
+import { useMemo, useState } from "react";
-import {PERMISSIONS} from "@/constants/userPermissions";
+import { PERMISSIONS } from "@/constants/userPermissions";
 import useExams from "@/hooks/useExams";
 import useUsers from "@/hooks/useUsers";
-import {Module} from "@/interfaces";
+import { Module } from "@/interfaces";
-import {Exam} from "@/interfaces/exam";
+import { Exam } from "@/interfaces/exam";
-import {Type, User} from "@/interfaces/user";
+import { Type, User } from "@/interfaces/user";
 import useExamStore from "@/stores/exam";
-import {getExamById} from "@/utils/exams";
+import { getExamById } from "@/utils/exams";
-import {countExercises} from "@/utils/moduleUtils";
+import { countExercises } from "@/utils/moduleUtils";
-import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import axios from "axios";
 import clsx from "clsx";
-import {capitalize, uniq} from "lodash";
+import { capitalize, uniq } from "lodash";
-import {useRouter} from "next/router";
+import { useRouter } from "next/router";
-import {BsBan, BsBanFill, BsCheck, BsCircle, BsPencil, BsStop, BsTrash, BsUpload, BsX} from "react-icons/bs";
+import { BsBan, BsBanFill, BsCheck, BsCircle, BsPencil, BsStop, BsTrash, BsUpload, BsX } from "react-icons/bs";
-import {toast} from "react-toastify";
+import { toast } from "react-toastify";
-import {useListSearch} from "@/hooks/useListSearch";
+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 { exams, reload } = useExams();
-	const {users} = useUsers();
+	const { users } = useUsers();
-	const {groups} = useGroups({admin: user?.id, userType: user?.type});
+	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>
 	);
-}
+}

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 && (

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"});
-}

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 type { NextApiRequest, NextApiResponse } from "next";
-import {app} from "@/firebase";
+import { app } from "@/firebase";
-import {withIronSessionApiRoute} from "iron-session/next";
+import { withIronSessionApiRoute } from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
+import { sessionOptions } from "@/lib/session";
-import {CorporateUser, Group} from "@/interfaces/user";
+import { CorporateUser, Group } from "@/interfaces/user";
-import {Discount, Package} from "@/interfaces/paypal";
+import { Discount, Package } from "@/interfaces/paypal";
-import {v4} from "uuid";
+import { v4 } from "uuid";
-import {checkAccess} from "@/utils/permissions";
+import { checkAccess } from "@/utils/permissions";
-import {CEFR_STEPS} from "@/resources/grading";
+import { CEFR_STEPS } from "@/resources/grading";
-import {getCorporateUser} from "@/resources/user";
+import { getCorporateUser } from "@/resources/user";
-import {getUserCorporate} from "@/utils/groups.be";
+import { getUserCorporate } from "@/utils/groups.be";
-import {Grading} from "@/interfaces";
+import { Grading } from "@/interfaces";
-import {getGroupsForUser} from "@/utils/groups.be";
+import { getGroupsForUser } from "@/utils/groups.be";
-import {uniq} from "lodash";
+import { uniq } from "lodash";
-import {getSpecificUsers, getUser} from "@/utils/users.be";
+import { getSpecificUsers, getUser } from "@/utils/users.be";
-import {getGradingSystem} from "@/utils/grading.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") {
+	res.status(200).json({ ok: true });
-		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});
 }

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',
+		},
+	},
+};

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 { getEntitiesUsers, getEntityUsers, getUsers } from "@/utils/users.be";
-import { getEntityWithRoles } from "@/utils/entities.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,

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 { withIronSessionSsr } from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
+import { sessionOptions } from "@/lib/session";
-import {ToastContainer} from "react-toastify";
+import { ToastContainer } from "react-toastify";
 import Layout from "@/components/High/Layout";
-import {GroupWithUsers, User} from "@/interfaces/user";
+import { GroupWithUsers, User } from "@/interfaces/user";
-import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
-import {getUserName, isAdmin} from "@/utils/users";
+import { getUserName, isAdmin } from "@/utils/users";
-import {convertToUsers, getGroupsForEntities} from "@/utils/groups.be";
+import { convertToUsers, getGroupsForEntities } from "@/utils/groups.be";
-import {getSpecificUsers} from "@/utils/users.be";
+import { getSpecificUsers } from "@/utils/users.be";
 import Link from "next/link";
-import {uniq} from "lodash";
+import { uniq } from "lodash";
-import {BsPlus} from "react-icons/bs";
+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">
+			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">
-			<span>
+			<div className="flex flex-col gap-2 w-full">
-				<b>Group: </b>
+				<span className="flex items-center gap-1">
-				{group.name}
+					<span className="bg-mti-purple text-white font-semibold px-2">Classroom</span>
-			</span>
+					{group.name}
-			<span>
+				</span>
-				<b>Admin: </b>
+				<span className="flex items-center gap-1">
-				{getUserName(group.admin)}
+					<span className="bg-mti-purple text-white font-semibold px-2">Admin</span>
-			</span>
+					{getUserName(group.admin)}
-			<b>Participants ({group.participants.length}): </b>
+				</span>
-			<span>
+				<span className="flex items-center gap-1">
-				{group.participants.slice(0, 5).map(getUserName).join(", ")}
+					<span className="bg-mti-purple text-white font-semibold px-2">Participants</span>
-				{group.participants.length > 5 ? <span className="opacity-60"> and {group.participants.length - 5} more</span> : ""}
+					<span className="bg-mti-purple-light/50 px-2">{group.participants.length}</span>
-			</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>

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,
+	BsBank,
-  BsClipboard2Data,
+	BsClipboard2Data,
-  BsClock,
+	BsClock,
-  BsEnvelopePaper,
+	BsEnvelopePaper,
-  BsPaperclip,
+	BsPaperclip,
-  BsPencilSquare,
+	BsPencilSquare,
-  BsPeople,
+	BsPeople,
-  BsPeopleFill,
+	BsPeopleFill,
-  BsPersonFill,
+	BsPersonFill,
-  BsPersonFillGear,
+	BsPersonFillGear,
 } from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 
 interface Props {
-  user: User;
+	user: User;
-  users: User[];
+	users: User[];
-  entities: EntityWithRoles[];
+	entities: EntityWithRoles[];
-  assignments: Assignment[];
+	assignments: Assignment[];
-  stats: Stat[];
+	stats: Stat[];
-  groups: Group[];
+	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 users = await getUsers();
-  const entities = await getEntitiesWithRoles();
+	const entities = await getEntitiesWithRoles();
-  const assignments = await getAssignments();
+	const assignments = await getAssignments();
-  const stats = await getStatsByUsers(users.map((u) => u.id));
+	const stats = await getStatsByUsers(users.map((u) => u.id));
-  const groups = await getGroups();
+	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 students = useMemo(() => users.filter((u) => u.type === "student"), [users]);
-  const teachers = useMemo(() => users.filter((u) => u.type === "teacher"), [users]);
+	const teachers = useMemo(() => users.filter((u) => u.type === "teacher"), [users]);
-  const corporates = useMemo(() => users.filter((u) => u.type === "corporate"), [users]);
+	const corporates = useMemo(() => users.filter((u) => u.type === "corporate"), [users]);
-  const masterCorporates = useMemo(() => users.filter((u) => u.type === "mastercorporate"), [users]);
+	const masterCorporates = useMemo(() => users.filter((u) => u.type === "mastercorporate"), [users]);
 
-  const router = useRouter();
+	const router = useRouter();
 
-  const averageLevelCalculator = (studentStats: Stat[]) => {
+	const averageLevelCalculator = (studentStats: Stat[]) => {
-    const formattedStats = studentStats
+		const formattedStats = studentStats
-      .map((s) => ({
+			.map((s) => ({
-        focus: students.find((u) => u.id === s.user)?.focus,
+				focus: students.find((u) => u.id === s.user)?.focus,
-        score: s.score,
+				score: s.score,
-        module: s.module,
+				module: s.module,
-      }))
+			}))
-      .filter((f) => !!f.focus);
+			.filter((f) => !!f.focus);
-    const bandScores = formattedStats.map((s) => ({
+		const bandScores = formattedStats.map((s) => ({
-      module: s.module,
+			module: s.module,
-      level: calculateBandScore(s.score.correct, s.score.total, s.module, s.focus!),
+			level: calculateBandScore(s.score.correct, s.score.total, s.module, s.focus!),
-    }));
+		}));
 
-    const levels: { [key in Module]: number } = {
+		const levels: { [key in Module]: number } = {
-      reading: 0,
+			reading: 0,
-      listening: 0,
+			listening: 0,
-      writing: 0,
+			writing: 0,
-      speaking: 0,
+			speaking: 0,
-      level: 0,
+			level: 0,
-    };
+		};
-    bandScores.forEach((b) => (levels[b.module] += b.level));
+		bandScores.forEach((b) => (levels[b.module] += b.level));
 
-    return calculateAverageLevel(levels);
+		return calculateAverageLevel(levels);
-  };
+	};
 
-  return (
+	return (
-    <>
+		<>
-      <Head>
+			<Head>
-        <title>EnCoach</title>
+				<title>EnCoach</title>
-        <meta
+				<meta
-          name="description"
+					name="description"
-          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+					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" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
+				<link rel="icon" href="/favicon.ico" />
-      </Head>
+			</Head>
-      <ToastContainer />
+			<ToastContainer />
-      <Layout user={user}>
+			<Layout user={user}>
-        <section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
+				<section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
-          <IconCard
+					<IconCard
-            onClick={() => router.push("/users?type=student")}
+						onClick={() => router.push("/users?type=student")}
-            Icon={BsPersonFill}
+						Icon={BsPersonFill}
-            label="Students"
+						label="Students"
-            value={students.length}
-            color="purple"
-          />
-          <IconCard
-            onClick={() => router.push("/users?type=teacher")}
-            Icon={BsPencilSquare}
-            label="Teachers"
-            value={teachers.length}
-            color="purple"
-          />
-          <IconCard
-            Icon={BsBank}
-            onClick={() => router.push("/users?type=corporate")}
-            label="Corporates"
-            value={corporates.length}
-            color="purple"
-          />
-          <IconCard
-            Icon={BsBank}
-            onClick={() => router.push("/users?type=mastercorporate")}
-            label="Master Corporates"
-            value={masterCorporates.length}
-            color="purple"
-          />
-          <IconCard
-          	Icon={BsPeople}
-           	onClick={() => router.push("/classrooms")}
-            label="Classrooms"
-            value={groups.length}
-            color="purple"
-          />
-          <IconCard Icon={BsPeopleFill}
-          	onClick={() => router.push("/entities")}
-           	label="Entities"
-            value={entities.length}
-            color="purple"
-          />
-          <IconCard Icon={BsClipboard2Data} label="Exams Performed" value={uniqBy(stats, "exam").length} color="purple" />
-          <IconCard Icon={BsPaperclip} label="Average Level" value={averageLevelCalculator(stats).toFixed(1)} color="purple" />
-          <IconCard Icon={BsPersonFillGear}
-	          onClick={() => router.push("/users/performance")}
-	          label="Student Performance"
 						value={students.length}
 						color="purple"
 					/>
-          <IconCard
+					<IconCard
-            Icon={BsEnvelopePaper}
+						onClick={() => router.push("/users?type=teacher")}
-            onClick={() => router.push("/assignments")}
+						Icon={BsPencilSquare}
-            label="Assignments"
+						label="Teachers"
-            value={assignments.filter((a) => !a.archived).length}
+						value={teachers.length}
-            color="purple"
+						color="purple"
-          />
+					/>
-        </section>
+					<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">
+				<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
-          <UserDisplayList
+					<UserDisplayList
-            users={students.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))}
+						users={students.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))}
-            title="Latest Students"
+						title="Latest Students"
-          />
+					/>
-          <UserDisplayList
+					<UserDisplayList
-            users={teachers.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))}
+						users={teachers.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))}
-            title="Latest Teachers"
+						title="Latest Teachers"
-          />
+					/>
-          <UserDisplayList
+					<UserDisplayList
-            users={students.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))}
+						users={students.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))}
-            title="Highest level students"
+						title="Highest level students"
-          />
+					/>
-          <UserDisplayList
+					<UserDisplayList
-            users={
+						users={
-              students
+							students
-                .sort(
+								.sort(
-                  (a, b) =>
+									(a, b) =>
-                    Object.keys(groupByExam(filterBy(stats, "user", b))).length -
+										Object.keys(groupByExam(filterBy(stats, "user", b))).length -
-                    Object.keys(groupByExam(filterBy(stats, "user", a))).length,
+										Object.keys(groupByExam(filterBy(stats, "user", a))).length,
-                )
+								)
-            }
+						}
-            title="Highest exam count students"
+						title="Highest exam count students"
-          />
+					/>
-        </section>
+				</section>
-      </Layout>
+			</Layout>
-    </>
+		</>
-  );
+	);
 }

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,
+	BsBank,
-  BsClipboard2Data,
+	BsClipboard2Data,
-  BsClock,
+	BsClock,
-  BsEnvelopePaper,
+	BsEnvelopePaper,
-  BsPaperclip,
+	BsPaperclip,
-  BsPencilSquare,
+	BsPencilSquare,
-  BsPeople,
+	BsPeople,
-  BsPeopleFill,
+	BsPeopleFill,
-  BsPersonFill,
+	BsPersonFill,
-  BsPersonFillGear,
+	BsPersonFillGear,
 } from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 
 interface Props {
-  user: User;
+	user: User;
-  users: User[];
+	users: User[];
-  entities: EntityWithRoles[];
+	entities: EntityWithRoles[];
-  assignments: Assignment[];
+	assignments: Assignment[];
-  stats: Stat[];
+	stats: Stat[];
-  groups: Group[];
+	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 users = await getUsers();
-  const entities = await getEntitiesWithRoles();
+	const entities = await getEntitiesWithRoles();
-  const assignments = await getAssignments();
+	const assignments = await getAssignments();
-  const stats = await getStatsByUsers(users.map((u) => u.id));
+	const stats = await getStatsByUsers(users.map((u) => u.id));
-  const groups = await getGroups();
+	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 students = useMemo(() => users.filter((u) => u.type === "student"), [users]);
-  const teachers = useMemo(() => users.filter((u) => u.type === "teacher"), [users]);
+	const teachers = useMemo(() => users.filter((u) => u.type === "teacher"), [users]);
-  const corporates = useMemo(() => users.filter((u) => u.type === "corporate"), [users]);
+	const corporates = useMemo(() => users.filter((u) => u.type === "corporate"), [users]);
-  const masterCorporates = useMemo(() => users.filter((u) => u.type === "mastercorporate"), [users]);
+	const masterCorporates = useMemo(() => users.filter((u) => u.type === "mastercorporate"), [users]);
 
-  const router = useRouter();
+	const router = useRouter();
 
-  const averageLevelCalculator = (studentStats: Stat[]) => {
+	const averageLevelCalculator = (studentStats: Stat[]) => {
-    const formattedStats = studentStats
+		const formattedStats = studentStats
-      .map((s) => ({
+			.map((s) => ({
-        focus: students.find((u) => u.id === s.user)?.focus,
+				focus: students.find((u) => u.id === s.user)?.focus,
-        score: s.score,
+				score: s.score,
-        module: s.module,
+				module: s.module,
-      }))
+			}))
-      .filter((f) => !!f.focus);
+			.filter((f) => !!f.focus);
-    const bandScores = formattedStats.map((s) => ({
+		const bandScores = formattedStats.map((s) => ({
-      module: s.module,
+			module: s.module,
-      level: calculateBandScore(s.score.correct, s.score.total, s.module, s.focus!),
+			level: calculateBandScore(s.score.correct, s.score.total, s.module, s.focus!),
-    }));
+		}));
 
-    const levels: { [key in Module]: number } = {
+		const levels: { [key in Module]: number } = {
-      reading: 0,
+			reading: 0,
-      listening: 0,
+			listening: 0,
-      writing: 0,
+			writing: 0,
-      speaking: 0,
+			speaking: 0,
-      level: 0,
+			level: 0,
-    };
+		};
-    bandScores.forEach((b) => (levels[b.module] += b.level));
+		bandScores.forEach((b) => (levels[b.module] += b.level));
 
-    return calculateAverageLevel(levels);
+		return calculateAverageLevel(levels);
-  };
+	};
 
-  return (
+	return (
-    <>
+		<>
-      <Head>
+			<Head>
-        <title>EnCoach</title>
+				<title>EnCoach</title>
-        <meta
+				<meta
-          name="description"
+					name="description"
-          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+					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" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
+				<link rel="icon" href="/favicon.ico" />
-      </Head>
+			</Head>
-      <ToastContainer />
+			<ToastContainer />
-      <Layout user={user}>
+			<Layout user={user}>
-        <section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
+				<section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
-          <IconCard
+					<IconCard
-            onClick={() => router.push("/users?type=student")}
+						onClick={() => router.push("/users?type=student")}
-            Icon={BsPersonFill}
+						Icon={BsPersonFill}
-            label="Students"
+						label="Students"
-            value={students.length}
-            color="purple"
-          />
-          <IconCard
-            onClick={() => router.push("/users?type=teacher")}
-            Icon={BsPencilSquare}
-            label="Teachers"
-            value={teachers.length}
-            color="purple"
-          />
-          <IconCard
-            Icon={BsBank}
-            onClick={() => router.push("/users?type=corporate")}
-            label="Corporates"
-            value={corporates.length}
-            color="purple"
-          />
-          <IconCard
-            Icon={BsBank}
-            onClick={() => router.push("/users?type=mastercorporate")}
-            label="Master Corporates"
-            value={masterCorporates.length}
-            color="purple"
-          />
-          <IconCard
-          	Icon={BsPeople}
-           	onClick={() => router.push("/classrooms")}
-            label="Classrooms"
-            value={groups.length}
-            color="purple"
-          />
-          <IconCard Icon={BsPeopleFill}
-          	onClick={() => router.push("/entities")}
-           	label="Entities"
-            value={entities.length}
-            color="purple"
-          />
-          <IconCard Icon={BsClipboard2Data} label="Exams Performed" value={uniqBy(stats, "exam").length} color="purple" />
-          <IconCard Icon={BsPaperclip} label="Average Level" value={averageLevelCalculator(stats).toFixed(1)} color="purple" />
-          <IconCard Icon={BsPersonFillGear}
-	          onClick={() => router.push("/users/performance")}
-	          label="Student Performance"
 						value={students.length}
 						color="purple"
 					/>
-          <IconCard
+					<IconCard
-            Icon={BsEnvelopePaper}
+						onClick={() => router.push("/users?type=teacher")}
-            onClick={() => router.push("/assignments")}
+						Icon={BsPencilSquare}
-            label="Assignments"
+						label="Teachers"
-            value={assignments.filter((a) => !a.archived).length}
+						value={teachers.length}
-            color="purple"
+						color="purple"
-          />
+					/>
-        </section>
+					<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">
+				<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
-          <UserDisplayList
+					<UserDisplayList
-            users={students.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))}
+						users={students.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))}
-            title="Latest Students"
+						title="Latest Students"
-          />
+					/>
-          <UserDisplayList
+					<UserDisplayList
-            users={teachers.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))}
+						users={teachers.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))}
-            title="Latest Teachers"
+						title="Latest Teachers"
-          />
+					/>
-          <UserDisplayList
+					<UserDisplayList
-            users={students.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))}
+						users={students.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))}
-            title="Highest level students"
+						title="Highest level students"
-          />
+					/>
-          <UserDisplayList
+					<UserDisplayList
-            users={
+						users={
-              students
+							students
-                .sort(
+								.sort(
-                  (a, b) =>
+									(a, b) =>
-                    Object.keys(groupByExam(filterBy(stats, "user", b))).length -
+										Object.keys(groupByExam(filterBy(stats, "user", b))).length -
-                    Object.keys(groupByExam(filterBy(stats, "user", a))).length,
+										Object.keys(groupByExam(filterBy(stats, "user", a))).length,
-                )
+								)
-            }
+						}
-            title="Highest exam count students"
+						title="Highest exam count students"
-          />
+					/>
-        </section>
+				</section>
-      </Layout>
+			</Layout>
-    </>
+		</>
-  );
+	);
 }

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,
+	BsBank,
-  BsClipboard2Data,
+	BsClipboard2Data,
-  BsClock,
+	BsClock,
-  BsEnvelopePaper,
+	BsEnvelopePaper,
-  BsPaperclip,
+	BsPaperclip,
-  BsPencilSquare,
+	BsPencilSquare,
-  BsPeople,
+	BsPeople,
-  BsPeopleFill,
+	BsPeopleFill,
-  BsPersonFill,
+	BsPersonFill,
-  BsPersonFillGear,
+	BsPersonFillGear,
 } from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 
 interface Props {
-  user: User;
+	user: User;
-  users: User[];
+	users: User[];
-  entities: EntityWithRoles[];
+	entities: EntityWithRoles[];
-  assignments: Assignment[];
+	assignments: Assignment[];
-  stats: Stat[];
+	stats: Stat[];
-  groups: Group[];
+	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"]))
+	if (!checkAccess(user, ["admin", "developer", "mastercorporate"]))
-    return redirect("/")
+		return redirect("/")
 
-  const entityIDS = mapBy(user.entities, "id") || [];
+	const entityIDS = mapBy(user.entities, "id") || [];
-  const entities = await getEntitiesWithRoles(entityIDS);
+	const entities = await getEntitiesWithRoles(entityIDS);
-  const users = await filterAllowedUsers(user, entities)
+	const users = await filterAllowedUsers(user, entities)
 
-  const assignments = await getEntitiesAssignments(entityIDS);
+	const assignments = await getEntitiesAssignments(entityIDS);
-  const stats = await getStatsByUsers(users.map((u) => u.id));
+	const stats = await getStatsByUsers(users.map((u) => u.id));
-  const groups = await getGroupsByEntities(entityIDS);
+	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 students = useMemo(() => users.filter((u) => u.type === "student"), [users]);
-  const teachers = useMemo(() => users.filter((u) => u.type === "teacher"), [users]);
+	const teachers = useMemo(() => users.filter((u) => u.type === "teacher"), [users]);
-  const corporates = useMemo(() => users.filter((u) => u.type === "corporate"), [users]);
+	const corporates = useMemo(() => users.filter((u) => u.type === "corporate"), [users]);
 
-  const router = useRouter();
+	const router = useRouter();
 
-  const averageLevelCalculator = (studentStats: Stat[]) => {
+	const allowedEntityStatistics = useAllowedEntities(user, entities, 'view_entity_statistics')
-    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 } = {
+	const UserDisplay = (displayUser: User) => (
-      reading: 0,
+		<div className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300">
-      listening: 0,
+			<img src={displayUser.profilePicture} alt={displayUser.name} className="rounded-full w-10 h-10" />
-      writing: 0,
+			<div className="flex flex-col gap-1 items-start">
-      speaking: 0,
+				<span>{displayUser.name}</span>
-      level: 0,
+				<span className="text-sm opacity-75">{displayUser.email}</span>
-    };
+			</div>
-    bandScores.forEach((b) => (levels[b.module] += b.level));
+		</div>
+	);
 
-    return calculateAverageLevel(levels);
+	return (
-  };
+		<>
-
+			<Head>
-  const UserDisplay = (displayUser: User) => (
+				<title>EnCoach</title>
-    <div className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300">
+				<meta
-      <img src={displayUser.profilePicture} alt={displayUser.name} className="rounded-full w-10 h-10" />
+					name="description"
-      <div className="flex flex-col gap-1 items-start">
+					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
-        <span>{displayUser.name}</span>
+				/>
-        <span className="text-sm opacity-75">{displayUser.email}</span>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
-      </div>
+				<link rel="icon" href="/favicon.ico" />
-    </div>
+			</Head>
-  );
+			<ToastContainer />
-
+			<Layout user={user}>
-  return (
+				<section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
-    <>
+					<IconCard
-      <Head>
+						onClick={() => router.push("/users?type=student")}
-        <title>EnCoach</title>
+						Icon={BsPersonFill}
-        <meta
+						label="Students"
-          name="description"
-          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
-        />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <ToastContainer />
-      <Layout user={user}>
-        <section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
-          <IconCard
-            onClick={() => router.push("/users?type=student")}
-            Icon={BsPersonFill}
-            label="Students"
-            value={students.length}
-            color="purple"
-          />
-          <IconCard
-            onClick={() => router.push("/users?type=teacher")}
-            Icon={BsPencilSquare}
-            label="Teachers"
-            value={teachers.length}
-            color="purple"
-          />
-          <IconCard
-            onClick={() => router.push("/users?type=corporate")} Icon={BsBank} label="Corporate Accounts" value={corporates.length} color="purple" />
-            <IconCard
-            	Icon={BsPeople}
-             	onClick={() => router.push("/classrooms")}
-              label="Classrooms"
-              value={groups.length}
-              color="purple"
-            />
-            <IconCard Icon={BsPeopleFill}
-            	onClick={() => router.push("/entities")}
-             	label="Entities"
-              value={entities.length}
-              color="purple"
-            />
-          <IconCard Icon={BsClipboard2Data} label="Exams Performed" value={uniqBy(stats, "exam").length} color="purple" />
-          <IconCard Icon={BsPaperclip} label="Average Level" value={averageLevelCalculator(stats).toFixed(1)} color="purple" />
-          <IconCard Icon={BsPersonFillGear}
-	          onClick={() => router.push("/users/performance")}
-	          label="Student Performance"
 						value={students.length}
 						color="purple"
 					/>
-          <IconCard
+					<IconCard
-            Icon={BsEnvelopePaper}
+						onClick={() => router.push("/users?type=teacher")}
-            onClick={() => router.push("/assignments")}
+						Icon={BsPencilSquare}
-            label="Assignments"
+						label="Teachers"
-            value={assignments.filter((a) => !a.archived).length}
+						value={teachers.length}
-            color="purple"
+						color="purple"
-          />
+					/>
-          <IconCard
+					<IconCard
-            Icon={BsClock}
+						onClick={() => router.push("/users?type=corporate")} Icon={BsBank} label="Corporate Accounts" value={corporates.length} color="purple" />
-            label="Expiration Date"
+					<IconCard
-            value={user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy") : "Unlimited"}
+						Icon={BsPeople}
-            color="rose"
+						onClick={() => router.push("/classrooms")}
-          />
+						label="Classrooms"
-        </section>
+						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">
+				<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
-          <UserDisplayList
+					<UserDisplayList
-            users={students.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))}
+						users={students.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))}
-            title="Latest Students"
+						title="Latest Students"
-          />
+					/>
-          <UserDisplayList
+					<UserDisplayList
-            users={teachers.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))}
+						users={teachers.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))}
-            title="Latest Teachers"
+						title="Latest Teachers"
-          />
+					/>
-          <UserDisplayList
+					<UserDisplayList
-            users={students.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))}
+						users={students.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))}
-            title="Highest level students"
+						title="Highest level students"
-          />
+					/>
-          <UserDisplayList
+					<UserDisplayList
-            users={
+						users={
-              students
+							students
-                .sort(
+								.sort(
-                  (a, b) =>
+									(a, b) =>
-                    Object.keys(groupByExam(filterBy(stats, "user", b))).length -
+										Object.keys(groupByExam(filterBy(stats, "user", b))).length -
-                    Object.keys(groupByExam(filterBy(stats, "user", a))).length,
+										Object.keys(groupByExam(filterBy(stats, "user", a))).length,
-                )
+								)
-            }
+						}
-            title="Highest exam count students"
+						title="Highest exam count students"
-          />
+					/>
-        </section>
+				</section>
-      </Layout>
+			</Layout>
-    </>
+		</>
-  );
+	);
 }

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 { EntityWithRoles, Role } from "@/interfaces/entity";
-import {User} from "@/interfaces/user";
+import { User } from "@/interfaces/user";
-import {sessionOptions} from "@/lib/session";
+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 { getEntityWithRoles } from "@/utils/entities.be";
-import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
-import {doesEntityAllow} from "@/utils/permissions";
+import { doesEntityAllow } from "@/utils/permissions";
-import {countEntityUsers} from "@/utils/users.be";
+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 { useRouter } from "next/router";
-import {Divider} from "primereact/divider";
+import { Divider } from "primereact/divider";
-import {useState} from "react";
+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 Students", key: "view_students" },
-	{label: "View Teachers", key: "view_teachers"},
+	{ label: "View Teachers", key: "view_teachers" },
-	{label: "View Corporate Accounts", key: "view_corporates"},
+	{ label: "View Corporate Accounts", key: "view_corporates" },
-	{label: "View Master Corporate Accounts", key: "view_mastercorporates"},
+	{ label: "View Master Corporate Accounts", key: "view_mastercorporates" },
-	{label: "Edit Students", key: "edit_students"},
+	{ label: "Edit Students", key: "edit_students" },
-	{label: "Edit Teachers", key: "edit_teachers"},
+	{ label: "Edit Teachers", key: "edit_teachers" },
-	{label: "Edit Corporate Accounts", key: "edit_corporates"},
+	{ label: "Edit Corporate Accounts", key: "edit_corporates" },
-	{label: "Edit Master Corporate Accounts", key: "edit_mastercorporates"},
+	{ label: "Edit Master Corporate Accounts", key: "edit_mastercorporates" },
-	{label: "Delete Students", key: "delete_students"},
+	{ label: "Delete Students", key: "delete_students" },
-	{label: "Delete Teachers", key: "delete_teachers"},
+	{ label: "Delete Teachers", key: "delete_teachers" },
-	{label: "Delete Corporate Accounts", key: "delete_corporates"},
+	{ label: "Delete Corporate Accounts", key: "delete_corporates" },
-	{label: "Delete Master Corporate Accounts", key: "delete_mastercorporates"},
+	{ 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: "View Reading", key: "view_reading" },
-	{label: "Generate Reading", key: "generate_reading"},
+	{ label: "Generate Reading", key: "generate_reading" },
-	{label: "Delete Reading", key: "delete_reading"},
+	{ label: "Delete Reading", key: "delete_reading" },
-	{label: "View Listening", key: "view_listening"},
+	{ label: "View Listening", key: "view_listening" },
-	{label: "Generate Listening", key: "generate_listening"},
+	{ label: "Generate Listening", key: "generate_listening" },
-	{label: "Delete Listening", key: "delete_listening"},
+	{ label: "Delete Listening", key: "delete_listening" },
-	{label: "View Writing", key: "view_writing"},
+	{ label: "View Writing", key: "view_writing" },
-	{label: "Generate Writing", key: "generate_writing"},
+	{ label: "Generate Writing", key: "generate_writing" },
-	{label: "Delete Writing", key: "delete_writing"},
+	{ label: "Delete Writing", key: "delete_writing" },
-	{label: "View Speaking", key: "view_speaking"},
+	{ label: "View Speaking", key: "view_speaking" },
-	{label: "Generate Speaking", key: "generate_speaking"},
+	{ label: "Generate Speaking", key: "generate_speaking" },
-	{label: "Delete Speaking", key: "delete_speaking"},
+	{ label: "Delete Speaking", key: "delete_speaking" },
-	{label: "View Level", key: "view_level"},
+	{ label: "View Level", key: "view_level" },
-	{label: "Generate Level", key: "generate_level"},
+	{ label: "Generate Level", key: "generate_level" },
-	{label: "Delete Level", key: "delete_level"},
+	{ label: "Delete Level", key: "delete_level" },
 ]
 
 const CLASSROOM_MANAGEMENT: PermissionLayout[] = [
-	{label: "View Classrooms", key: "view_classrooms"},
+	{ label: "View Classrooms", key: "view_classrooms" },
-	{label: "Create Classrooms", key: "create_classroom"},
+	{ label: "Create Classrooms", key: "create_classroom" },
-	{label: "Rename Classrooms", key: "rename_classrooms"},
+	{ label: "Rename Classrooms", key: "rename_classrooms" },
-	{label: "Add to Classroom", key: "add_to_classroom"},
+	{ label: "Add to Classroom", key: "add_to_classroom" },
-	{label: "Remove from Classroom", key: "remove_from_classroom"},
+	{ label: "Remove from Classroom", key: "remove_from_classroom" },
-	{label: "Delete Classroom", key: "delete_classroom"},
+	{ label: "Delete Classroom", key: "delete_classroom" },
 ]
 
 const ENTITY_MANAGEMENT: PermissionLayout[] = [
-	{label: "View Entities", key: "view_entities"},
+	{ label: "View Entities", key: "view_entities" },
-	{label: "Rename Entity", key: "rename_entity"},
+	{ label: "View Entity Statistics", key: "view_entity_statistics" },
-	{label: "Add to Entity", key: "add_to_entity"},
+	{ label: "Rename Entity", key: "rename_entity" },
-	{label: "Remove from Entity", key: "remove_from_entity"},
+	{ label: "Add to Entity", key: "add_to_entity" },
-	{label: "Delete Entity", key: "delete_entity"},
+	{ label: "Remove from Entity", key: "remove_from_entity" },
-	{label: "View Entity Roles", key: "view_entity_roles"},
+	{ label: "Delete Entity", key: "delete_entity" },
-	{label: "Create Entity Role", key: "create_entity_role"},
+	{ label: "View Entity Roles", key: "view_entity_roles" },
-	{label: "Rename Entity Role", key: "rename_entity_role"},
+	{ label: "Create Entity Role", key: "create_entity_role" },
-	{label: "Edit Role Permissions", key: "edit_role_permissions"},
+	{ label: "Rename Entity Role", key: "rename_entity_role" },
-	{label: "Assign Role to User", key: "assign_to_role"},
+	{ label: "Edit Role Permissions", key: "edit_role_permissions" },
-	{label: "Delete Entity Role", key: "delete_entity_role"},
+	{ 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: "View Assignments", key: "view_assignments" },
-	{label: "Create Assignments", key: "create_assignment"},
+	{ label: "Create Assignments", key: "create_assignment" },
-	{label: "Start Assignments", key: "start_assignment"},
+	{ label: "Start Assignments", key: "start_assignment" },
-	{label: "Delete Assignments", key: "delete_assignment"},
+	{ label: "Delete Assignments", key: "delete_assignment" },
-	{label: "Archive Assignments", key: "archive_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}) => (
+								{USER_MANAGEMENT.map(({ label, key }) => (
-								<Checkbox disabled={!canEditPermissions} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
+									<Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
-									{ label }
+										{label}
-								</Checkbox>
+									</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}) => (
+								{EXAM_MANAGEMENT.map(({ label, key }) => (
-								<Checkbox disabled={!canEditPermissions} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
+									<Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
-									{ label }
+										{label}
-								</Checkbox>
+									</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}) => (
+								{CLASSROOM_MANAGEMENT.map(({ label, key }) => (
-								<Checkbox disabled={!canEditPermissions} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
+									<Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
-									{ label }
+										{label}
-								</Checkbox>
+									</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}) => (
+								{ENTITY_MANAGEMENT.map(({ label, key }) => (
-								<Checkbox disabled={!canEditPermissions} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
+									<Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
-									{ label }
+										{label}
-								</Checkbox>
+									</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}) => (
+								{ASSIGNMENT_MANAGEMENT.map(({ label, key }) => (
-								<Checkbox disabled={!canEditPermissions} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
+									<Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
-									{ label }
+										{label}
-								</Checkbox>
+									</Checkbox>
-							)) }
+								))}
 							</div>
 						</div>
 					</section>

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 { withIronSessionSsr } from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
+import { sessionOptions } from "@/lib/session";
-import {ToastContainer} from "react-toastify";
+import { ToastContainer } from "react-toastify";
 import Layout from "@/components/High/Layout";
-import {GroupWithUsers, User} from "@/interfaces/user";
+import { GroupWithUsers, User } from "@/interfaces/user";
-import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
-import {getUserName} from "@/utils/users";
+import { getUserName } from "@/utils/users";
-import {convertToUsers, getGroupsForUser} from "@/utils/groups.be";
+import { convertToUsers, getGroupsForUser } from "@/utils/groups.be";
-import {countEntityUsers, getEntityUsers, getSpecificUsers} from "@/utils/users.be";
+import { countEntityUsers, getEntityUsers, getSpecificUsers } from "@/utils/users.be";
-import {checkAccess, findAllowedEntities, getTypesOfUser} from "@/utils/permissions";
+import { checkAccess, findAllowedEntities, getTypesOfUser } from "@/utils/permissions";
 import Link from "next/link";
-import {uniq} from "lodash";
+import { uniq } from "lodash";
-import {BsPlus} from "react-icons/bs";
+import { BsBank, BsPlus } from "react-icons/bs";
 import CardList from "@/components/High/CardList";
-import {getEntitiesWithRoles} from "@/utils/entities.be";
+import { getEntitiesWithRoles } from "@/utils/entities.be";
-import {EntityWithRoles} from "@/interfaces/entity";
+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) {
+export default function Home({ user, entities }: Props) {
-	const renderCard = ({entity, users, count}: EntitiesWithCount) => (
+	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">
+			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">
-			<span>
+			<div className="flex flex-col gap-2 w-full">
-				<b>Entity: </b>
+				<span className="flex items-center gap-1">
-				{entity.label}
+					<span className="bg-mti-purple text-white font-semibold px-2">Entity</span>
-			</span>
+					{entity.label}
-			<b>Members ({count}): </b>
+				</span>
-			<span>
+				<span className="flex items-center gap-1">
-				{users.map(getUserName).join(", ")}
+					<span className="bg-mti-purple text-white font-semibold px-2">Members</span>
-				{count > 5 ? <span className="opacity-60"> and {count - 5} more</span> : ""}
+					<span className="bg-mti-purple-light/50 px-2">{count}</span>
-			</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>

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)

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}
 			/>
 		);

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"]))
+	if (shouldRedirectHome(user) || !checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"]))
-    return redirect("/")
+		return redirect("/")
 
-  const permissions = await getUserPermissions(user.id);
+	const permissions = await getUserPermissions(user.id);
-  const entities = isAdmin(user) ? await getEntitiesWithRoles() : await getEntitiesWithRoles(mapBy(user.entities, 'id'))
+	const entities = isAdmin(user) ? await getEntitiesWithRoles() : await getEntitiesWithRoles(mapBy(user.entities, 'id'))
-  const allUsers = await getUsers()
+	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 {
+	return {
-    props: serialize({ user, permissions, entities, allUsers }),
+		props: serialize({ user, permissions, entities, allUsers, entitiesGrading }),
-  };
+	};
 }, sessionOptions);
 
 interface Props {
-  user: User;
+	user: User;
-  permissions: PermissionType[];
+	permissions: PermissionType[];
 	entities: EntityWithRoles[];
 	allUsers: User[]
+	entitiesGrading: Grading[]
 }
 
-export default function Admin({ user, entities, permissions, allUsers }: Props) {
+export default function Admin({ user, entities, permissions, allUsers, entitiesGrading }: Props) {
-  const { gradingSystem, mutate } = useGradingSystem();
+	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 (
+	return (
-    <>
+		<>
-      <Head>
+			<Head>
-        <title>Settings Panel | EnCoach</title>
+				<title>Settings Panel | EnCoach</title>
-        <meta
+				<meta
-          name="description"
+					name="description"
-          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+					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" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
+				<link rel="icon" href="/favicon.ico" />
-      </Head>
+			</Head>
-      <ToastContainer />
+			<ToastContainer />
-      <Layout user={user} className="gap-6">
+			<Layout user={user} className="gap-6">
-        <Modal isOpen={modalOpen === "batchCreateUser"} onClose={() => setModalOpen(undefined)} maxWidth="max-w-[85%]">
+				<Modal isOpen={modalOpen === "batchCreateUser"} onClose={() => setModalOpen(undefined)} maxWidth="max-w-[85%]">
-          <BatchCreateUser user={user} entities={entities} permissions={permissions} onFinish={() => setModalOpen(undefined)} />
+					<BatchCreateUser
-        </Modal>
+						user={user}
-        <Modal isOpen={modalOpen === "batchCreateCode"} onClose={() => setModalOpen(undefined)}>
+						entities={entitiesAllowCreateUser}
-          <BatchCodeGenerator user={user} users={allUsers} permissions={permissions} onFinish={() => setModalOpen(undefined)} />
+						permissions={permissions}
-        </Modal>
+						onFinish={() => setModalOpen(undefined)}
-        <Modal isOpen={modalOpen === "createCode"} onClose={() => setModalOpen(undefined)}>
+					/>
-          <CodeGenerator user={user} permissions={permissions} onFinish={() => setModalOpen(undefined)} />
+				</Modal>
-        </Modal>
+				<Modal isOpen={modalOpen === "batchCreateCode"} onClose={() => setModalOpen(undefined)}>
-        <Modal isOpen={modalOpen === "createUser"} onClose={() => setModalOpen(undefined)}>
+					<BatchCodeGenerator user={user} users={allUsers} permissions={permissions} onFinish={() => setModalOpen(undefined)} />
-          <UserCreator user={user} entities={entities} users={allUsers} permissions={permissions} onFinish={() => setModalOpen(undefined)} />
+				</Modal>
-        </Modal>
+				<Modal isOpen={modalOpen === "createCode"} onClose={() => setModalOpen(undefined)}>
-        <Modal isOpen={modalOpen === "gradingSystem"} onClose={() => setModalOpen(undefined)}>
+					<CodeGenerator user={user} permissions={permissions} onFinish={() => setModalOpen(undefined)} />
-          <CorporateGradingSystem
+				</Modal>
-            user={user}
+				<Modal isOpen={modalOpen === "createUser"} onClose={() => setModalOpen(undefined)}>
-            defaultSteps={gradingSystem?.steps || CEFR_STEPS}
+					<UserCreator
-            mutate={(steps) => {
+						user={user}
-              mutate({ user: user.id, steps });
+						entities={entitiesAllowCreateUsers}
-              setModalOpen(undefined);
+						users={allUsers}
-            }}
+						permissions={permissions}
-          />
+						onFinish={() => setModalOpen(undefined)}
-        </Modal>
+					/>
+				</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">
+				<section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
-          <ExamLoader />
+					<ExamLoader />
-          {checkAccess(user, getTypesOfUser(["teacher"]), permissions, "viewCodes") && (
+					{checkAccess(user, getTypesOfUser(["teacher"]), permissions, "viewCodes") && (
-            <div className="w-full grid grid-cols-2 gap-4">
+						<div className="w-full grid grid-cols-2 gap-4">
-              <IconCard
+							<IconCard
-                Icon={BsCode}
+								Icon={BsCode}
-                label="Generate Single Code"
+								label="Generate Single Code"
-                color="purple"
+								color="purple"
-                className="w-full h-full"
+								className="w-full h-full"
-                onClick={() => setModalOpen("createCode")}
+								onClick={() => setModalOpen("createCode")}
-              />
+								disabled={entitiesAllowCreateCode.length > 0}
-              <IconCard
+							/>
-                Icon={BsCodeSquare}
+							<IconCard
-                label="Generate Codes in Batch"
+								Icon={BsCodeSquare}
-                color="purple"
+								label="Generate Codes in Batch"
-                className="w-full h-full"
+								color="purple"
-                onClick={() => setModalOpen("batchCreateCode")}
+								className="w-full h-full"
-              />
+								onClick={() => setModalOpen("batchCreateCode")}
-              <IconCard
+								disabled={entitiesAllowCreateCodes.length > 0}
-                Icon={BsPersonFill}
+							/>
-                label="Create Single User"
+							<IconCard
-                color="purple"
+								Icon={BsPersonFill}
-                className="w-full h-full"
+								label="Create Single User"
-                onClick={() => setModalOpen("createUser")}
+								color="purple"
-              />
+								className="w-full h-full"
-              <IconCard
+								onClick={() => setModalOpen("createUser")}
-                Icon={BsPeopleFill}
+								disabled={entitiesAllowCreateUser.length > 0}
-                label="Create Users in Batch"
+							/>
-                color="purple"
+							<IconCard
-                className="w-full h-full"
+								Icon={BsPeopleFill}
-                onClick={() => setModalOpen("batchCreateUser")}
+								label="Create Users in Batch"
-              />
+								color="purple"
-              {checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) && (
+								className="w-full h-full"
-                <IconCard
+								onClick={() => setModalOpen("batchCreateUser")}
-                  Icon={BsGearFill}
+								disabled={entitiesAllowCreateUsers.length > 0}
-                  label="Grading System"
+							/>
-                  color="purple"
+							{checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) && (
-                  className="w-full h-full col-span-2"
+								<IconCard
-                  onClick={() => setModalOpen("gradingSystem")}
+									Icon={BsGearFill}
-                />
+									label="Grading System"
-              )}
+									color="purple"
-            </div>
+									className="w-full h-full col-span-2"
-          )}
+									onClick={() => setModalOpen("gradingSystem")}
-        </section>
+								/>
-        <section className="w-full">
+							)}
-          <Lists user={user} entities={entities} permissions={permissions} />
+						</div>
-        </section>
+					)}
-      </Layout>
+				</section>
-    </>
+				<section className="w-full">
-  );
+					<Lists user={user} entities={entities} permissions={permissions} />
+				</section>
+			</Layout>
+		</>
+	);
 }

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>
+		</>
+	)
+}

src/resources/entityPermissions.ts

@@ -48,7 +48,12 @@ export type RolePermission =
 	"edit_assignment" |
 	"delete_assignment" |
 	"start_assignment" |
-	"archive_assignment"
+	"archive_assignment" |
+	"view_entity_statistics" |
+	"create_user" |
+	"create_user_batch" |
+	"create_code" |
+	"create_code_batch"
 
 export const DEFAULT_PERMISSIONS: RolePermission[] = [
 	"view_students",
@@ -109,4 +114,9 @@ export const ADMIN_PERMISSIONS: RolePermission[] = [
 	"delete_assignment",
 	"start_assignment",
 	"archive_assignment",
+	"view_entity_statistics",
+	"create_user",
+	"create_user_batch",
+	"create_code",
+	"create_code_batch"
 ]

src/resources/speakingAvatars.ts

@@ -1,37 +1,37 @@
 export const AVATARS = [
 	{
-		name: "Gia",
+		name: "Matthew Noah",
-		id: "gia.business",
+		id: "5912afa7c77c47d3883af3d874047aaf",
-		gender: "female",
-	},
-	{
-		name: "Vadim",
-		id: "vadim.business",
 		gender: "male",
 	},
 	{
-		name: "Orhan",
+		name: "Vera Cerise",
-		id: "orhan.business",
+		id: "9e58d96a383e4568a7f1e49df549e0e4",
-		gender: "male",
-	},
-	{
-		name: "Flora",
-		id: "flora.business",
 		gender: "female",
 	},
 	{
-		name: "Scarlett",
+		name: "Edward Tony",
-		id: "scarlett.business",
+		id: "d2cdd9c0379a4d06ae2afb6e5039bd0c",
-		gender: "female",
-	},
-	{
-		name: "Parker",
-		id: "parker.casual",
 		gender: "male",
 	},
 	{
-		name: "Ethan",
+		name: "Tanya Molly",
-		id: "ethan.business",
+		id: "045cb5dcd00042b3a1e4f3bc1c12176b",
+		gender: "female",
+	},
+	{
+		name: "Kayla Abbi",
+		id: "1ae1e5396cc444bfad332155fdb7a934",
+		gender: "female",
+	},
+	{
+		name: "Jerome Ryan",
+		id: "0ee6aa7cc1084063a630ae514fccaa31",
+		gender: "male",
+	},
+	{
+		name: "Tyler Christopher",
+		id: "5772cff935844516ad7eeff21f839e43",
 		gender: "male",
 	},
 ];

src/utils/grading.be.ts

@@ -1,25 +1,13 @@
-import {CEFR_STEPS} from "@/resources/grading";
+import { CEFR_STEPS } from "@/resources/grading";
-import {getUserCorporate} from "@/utils/groups.be";
+import { getUserCorporate } from "@/utils/groups.be";
-import {User} from "@/interfaces/user";
+import { User } from "@/interfaces/user";
-import {Grading} from "@/interfaces";
+import { Grading } from "@/interfaces";
 import client from "@/lib/mongodb";
 
 const db = client.db(process.env.MONGODB_DB);
 
-export const getGradingSystem = async (user: User): Promise<Grading> => {
-	const grading = await db.collection("grading").findOne<Grading>({id: user.id});
-	if (!!grading) return grading;
-
-	if (user.type !== "teacher" && user.type !== "student") return {steps: CEFR_STEPS, user: user.id};
-
-	const corporate = await getUserCorporate(user.id);
-	if (!corporate) return {steps: CEFR_STEPS, user: user.id};
-
-	const corporateSnapshot = await db.collection("grading").findOne<Grading>({id: corporate.id});
-	if (!!corporateSnapshot) return corporateSnapshot;
-
-	return {steps: CEFR_STEPS, user: user.id};
-};
-
 export const getGradingSystemByEntity = async (id: string) =>
-	(await db.collection("grading").findOne<Grading>({entity: id})) || {steps: CEFR_STEPS, user: ""};
+	(await db.collection("grading").findOne<Grading>({ entity: id })) || { steps: CEFR_STEPS, entity: "" };
+
+export const getGradingSystemByEntities = async (ids: string[]) =>
+	await db.collection("grading").find<Grading>({ entity: { $in: ids } }).toArray();

src/utils/permissions.ts

@@ -1,9 +1,10 @@
 import { EntityWithRoles, Role } from "@/interfaces/entity";
-import {PermissionType} from "@/interfaces/permissions";
+import { PermissionType } from "@/interfaces/permissions";
-import {User, Type, userTypes} from "@/interfaces/user";
+import { User, Type, userTypes } from "@/interfaces/user";
 import { RolePermission } from "@/resources/entityPermissions";
 import axios from "axios";
 import { findBy, mapBy } from ".";
+import { isAdmin } from "./users";
 
 export function checkAccess(user: User, types: Type[], permissions?: PermissionType[], permission?: PermissionType) {
 	if (!user) {
@@ -50,7 +51,7 @@ export function findAllowedEntitiesSomePermissions(user: User, entities: EntityW
 }
 
 export function doesEntityAllow(user: User, entity: EntityWithRoles, permission: RolePermission) {
-	if (["admin", "developer"].includes(user?.type)) return true
+	if (isAdmin(user)) return true
 
 	const userEntity = findBy(user.entities, 'id', entity?.id)
 	if (!userEntity) return false

src/utils/sessions.be.ts

@@ -1,4 +1,4 @@
-import {Session} from "@/hooks/useSessions";
+import { Session } from "@/hooks/useSessions";
 import client from "@/lib/mongodb";
 
 const db = client.db(process.env.MONGODB_DB);
@@ -6,11 +6,16 @@ const db = client.db(process.env.MONGODB_DB);
 export const getSessionsByUser = async (id: string, limit = 0, filter = {}) =>
 	await db
 		.collection("sessions")
-		.find<Session>({user: id, ...filter})
+		.find<Session>({ user: id, ...filter })
 		.limit(limit || 0)
 		.toArray();
 
 export const getSessionByAssignment = async (assignmentID: string) =>
 	await db
-			.collection("sessions")
+		.collection("sessions")
-			.findOne<Session>({"assignment.id": assignmentID})
+		.findOne<Session>({ "assignment.id": assignmentID })
+
+export const getSessionsByAssignments = async (assignmentIDs: string[]) =>
+	await db
+		.collection("sessions")
+		.find<Session>({ "assignment.id": { $in: assignmentIDs } }).toArray()