Merged in ENCOA-316-ENCOA-317 (pull request #141)

Fix login page having a Card

Approved-by: Tiago Ribeiro

src/components/High/Layout.tsx

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

src/components/Low/AsyncSelect.tsx

@@ -48,6 +48,15 @@ export default function AsyncSelect({
   flat,
 }: Props & (MultiProps | SingleProps)) {
   const [target, setTarget] = useState<HTMLElement>();
+  const [inputValue, setInputValue] = useState("");
+  
+  //Implemented a debounce to prevent the API from being called too frequently
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      loadOptions(inputValue);
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [inputValue, loadOptions]);
 
   useEffect(() => {
     if (document) setTarget(document.body);
@@ -77,7 +86,7 @@ export default function AsyncSelect({
         filterOption={null}
         loadingMessage={() => "Loading..."}
         onInputChange={(inputValue) => {
-          loadOptions(inputValue);
+          setInputValue(inputValue);
         }}
         options={options}
         value={value}

src/components/Medium/UserProfileSkeleton.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+
+export default function UserProfileSkeleton() {
+  return (
+    <div className="bg-white min-h-screen p-6">
+      <div className="mt-6 bg-white p-6  rounded-lg flex gap-4 items-center">
+        <div className="h-64 w-60 bg-gray-300 animate-pulse rounded"></div>
+        <div className="flex-1">
+          <div className="h-12 w-64 bg-gray-300 animate-pulse rounded"></div>
+          <div className="flex justify-between items-center mt-1">
+            <div className="h-4 w-60 bg-gray-300 animate-pulse mt-2 rounded"></div>
+            <div className="h-8 w-32 bg-gray-300 animate-pulse mt-2 rounded"></div>
+          </div>
+          <div className="h-4 w-100 bg-gray-300 animate-pulse mt-2 rounded"></div>
+          <div className="mt-6 grid grid-cols-4 justify-item-start gap-4">
+          <div className="bg-white p-4 rounded-lg text-center flex flex-row items-center justify-center">
+              <div className="h-12 w-12 mx-2  bg-gray-300 animate-pulse rounded"></div>
+              <div className="flex flex-col">
+                <div className="h-4 w-4 bg-gray-300 animate-pulse mt-2 rounded"></div>
+                <div className="h-4 w-16 bg-gray-300 animate-pulse mt-2 rounded"></div>
+              </div>
+            </div>
+            <div className="bg-white p-4 rounded-lg text-center flex flex-row items-center justify-center">
+              <div className="h-12 w-12 mx-2  bg-gray-300 animate-pulse rounded"></div>
+              <div className="flex flex-col">
+                <div className="h-4 w-4 bg-gray-300 animate-pulse mt-2 rounded"></div>
+                <div className="h-4 w-16 bg-gray-300 animate-pulse mt-2 rounded"></div>
+              </div>
+            </div>
+            <div className="bg-white p-4 rounded-lg text-center flex flex-row items-center justify-center">
+              <div className="h-12 w-12 mx-2  bg-gray-300 animate-pulse rounded"></div>
+              <div className="flex flex-col">
+                <div className="h-4 w-4 bg-gray-300 animate-pulse mt-2 rounded"></div>
+                <div className="h-4 w-16 bg-gray-300 animate-pulse mt-2 rounded"></div>
+              </div>
+            </div>
+            <div className="bg-white p-4 rounded-lg text-center flex flex-row items-center justify-center">
+              <div className="h-12 w-12 mx-2  bg-gray-300 animate-pulse rounded"></div>
+              <div className="flex flex-col">
+                <div className="h-4 w-4 bg-gray-300 animate-pulse mt-2 rounded"></div>
+                <div className="h-4 w-16 bg-gray-300 animate-pulse mt-2 rounded"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="mt-6 bg-white p-6 rounded-lg">
+        <div className="h-6 w-40 bg-gray-300 animate-pulse rounded mb-4"></div>
+        <div className="space-y-4">
+          {[...Array(4)].map((_, i) => (
+            <div key={i} className="flex justify-between items-center">
+              <div className="h-4 w-24 bg-gray-300 animate-pulse rounded"></div>
+              <div className="h-2 w-3/4 bg-gray-300 animate-pulse rounded"></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Sidebar.tsx

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

src/exams/Selection.tsx

@@ -14,8 +14,6 @@ import {
   BsPen,
   BsXCircle,
 } from "react-icons/bs";
-import { totalExamsByModule } from "@/utils/stats";
-import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
 import Button from "@/components/Low/Button";
 import { sortByModuleName } from "@/utils/moduleUtils";
 import { capitalize } from "lodash";
@@ -24,7 +22,7 @@ import { Variant } from "@/interfaces/exam";
 import useSessions, { Session } from "@/hooks/useSessions";
 import SessionCard from "@/components/Medium/SessionCard";
 import useExamStore from "@/stores/exam";
-import moment from "moment";
+import useStats from "../hooks/useStats";
 
 interface Props {
   user: User;
@@ -41,7 +39,21 @@ export default function Selection({ user, page, onStart }: Props) {
   const [avoidRepeatedExams, setAvoidRepeatedExams] = useState(true);
   const [variant, setVariant] = useState<Variant>("full");
 
-  const { data: stats } = useFilterRecordsByUser<Stat[]>(user?.id);
+  const {
+    data: {
+      allStats = [],
+      moduleCount: { reading, listening, writing, speaking, level } = {
+        reading: 0,
+        listening: 0,
+        writing: 0,
+        speaking: 0,
+        level: 0,
+      },
+    },
+  } = useStats<{
+    allStats: Stat[];
+    moduleCount: Record<Module, number>;
+  }>(user?.id, !user?.id, "byModule");
   const { sessions, isLoading, reload } = useSessions(user.id);
 
   const dispatch = useExamStore((state) => state.dispatch);
@@ -77,7 +89,7 @@ export default function Selection({ user, page, onStart }: Props) {
                   <BsBook className="text-ielts-reading h-6 w-6 md:h-8 md:w-8" />
                 ),
                 label: "Reading",
-                value: totalExamsByModule(stats, "reading"),
+                value: reading,
                 tooltip: "The amount of reading exams performed.",
               },
               {
@@ -85,7 +97,7 @@ export default function Selection({ user, page, onStart }: Props) {
                   <BsHeadphones className="text-ielts-listening h-6 w-6 md:h-8 md:w-8" />
                 ),
                 label: "Listening",
-                value: totalExamsByModule(stats, "listening"),
+                value: listening,
                 tooltip: "The amount of listening exams performed.",
               },
               {
@@ -93,7 +105,7 @@ export default function Selection({ user, page, onStart }: Props) {
                   <BsPen className="text-ielts-writing h-6 w-6 md:h-8 md:w-8" />
                 ),
                 label: "Writing",
-                value: totalExamsByModule(stats, "writing"),
+                value: writing,
                 tooltip: "The amount of writing exams performed.",
               },
               {
@@ -101,7 +113,7 @@ export default function Selection({ user, page, onStart }: Props) {
                   <BsMegaphone className="text-ielts-speaking h-6 w-6 md:h-8 md:w-8" />
                 ),
                 label: "Speaking",
-                value: totalExamsByModule(stats, "speaking"),
+                value: speaking,
                 tooltip: "The amount of speaking exams performed.",
               },
               {
@@ -109,7 +121,7 @@ export default function Selection({ user, page, onStart }: Props) {
                   <BsClipboard className="text-ielts-level h-6 w-6 md:h-8 md:w-8" />
                 ),
                 label: "Level",
-                value: totalExamsByModule(stats, "level"),
+                value: level,
                 tooltip: "The amount of level exams performed.",
               },
             ]}

src/hooks/useEntities.tsx

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

src/hooks/useEvaluationPolling.tsx

@@ -1,95 +1,114 @@
-import { UserSolution } from '@/interfaces/exam';
-import useExamStore from '@/stores/exam';
-import { StateFlags } from '@/stores/exam/types';
-import axios from 'axios';
-import { SetStateAction, useEffect, useRef } from 'react';
+import { UserSolution } from "@/interfaces/exam";
+import useExamStore from "@/stores/exam";
+import axios from "axios";
+import { useEffect, useRef } from "react";
+import { useRouter } from "next/router";
 
-type UseEvaluationPolling = (props: {
-    pendingExercises: string[],
-    setPendingExercises: React.Dispatch<SetStateAction<string[]>>,
-}) => void;
+const useEvaluationPolling = (sessionIds: string[], mode: "exam" | "records", userId: string) => {
+  const { setUserSolutions, userSolutions } = useExamStore();
+  const pollingTimeoutsRef = useRef<Map<string, NodeJS.Timeout>>(new Map());
+  const router = useRouter();
 
-const useEvaluationPolling: UseEvaluationPolling = ({
-    pendingExercises,
-    setPendingExercises,
-}) => {
-    const {
-        flags, sessionId, user, 
-        userSolutions, evaluated, 
-        setEvaluated, setFlags
-    } = useExamStore();
+  const poll = async (sessionId: string) => {
+    try {
+      const { data: statusData } = await axios.get('/api/evaluate/status', {
+        params: { op: 'pending', userId, sessionId }
+      });
 
-    const pollingTimeoutRef = useRef<NodeJS.Timeout>();
+      if (!statusData.hasPendingEvaluation) {
 
-    useEffect(() => {
-        return () => {
-            if (pollingTimeoutRef.current) {
-                clearTimeout(pollingTimeoutRef.current);
-            }
-        };
-    }, []);
+        let solutionsOrStats = userSolutions;
 
-    useEffect(() => {
-        if (!flags.pendingEvaluation || pendingExercises.length === 0) {
-
-            if (pollingTimeoutRef.current) {
-                clearTimeout(pollingTimeoutRef.current);
-            }
-            return;
+        if (mode === "records") {
+          const res = await axios.get(`/api/stats/session/${sessionId}`)
+          solutionsOrStats = res.data;
         }
+        const { data: completedSolutions } = await axios.post('/api/evaluate/fetchSolutions?op=session', {
+          sessionId,
+          userId,
+          stats: solutionsOrStats,
+        });
 
-        const pollStatus = async () => {
-            try {
-                const { data } = await axios.get('/api/evaluate/status', {
-                    params: {
-                        sessionId,
-                        userId: user,
-                        exerciseIds: pendingExercises.join(',')
-                    }
-                });
+        await axios.post('/api/stats/disabled', {
+          sessionId,
+          userId,
+          solutions: completedSolutions,
+        });
 
-                if (data.finishedExerciseIds.length > 0) {
-                    const remainingExercises = pendingExercises.filter(
-                        id => !data.finishedExerciseIds.includes(id)
-                    );
+        const timeout = pollingTimeoutsRef.current.get(sessionId);
+        if (timeout) clearTimeout(timeout);
+        pollingTimeoutsRef.current.delete(sessionId);
 
-                    setPendingExercises(remainingExercises);
+        if (mode === "exam") {
+          const updatedSolutions = userSolutions.map(solution => {
+            const completed = completedSolutions.find(
+              (c: UserSolution) => c.exercise === solution.exercise
+            );
+            return completed || solution;
+          });
 
-                    if (remainingExercises.length === 0) {
-                        const evaluatedData = await axios.post('/api/evaluate/fetchSolutions', {
-                            sessionId,
-                            userId: user,
-                            userSolutions
-                        });
+          setUserSolutions(updatedSolutions);
+        } else {
+          router.reload();
+        }
+      } else {
+        if (pollingTimeoutsRef.current.has(sessionId)) {
+          clearTimeout(pollingTimeoutsRef.current.get(sessionId));
+        }
+        pollingTimeoutsRef.current.set(
+          sessionId,
+          setTimeout(() => poll(sessionId), 5000)
+        );
+      }
+    } catch (error) {
+      if (pollingTimeoutsRef.current.has(sessionId)) {
+        clearTimeout(pollingTimeoutsRef.current.get(sessionId));
+      }
+      pollingTimeoutsRef.current.set(
+        sessionId,
+        setTimeout(() => poll(sessionId), 5000)
+      );
+    }
+  };
 
-                        const newEvaluations = evaluatedData.data.filter(
-                            (newEval: UserSolution) =>
-                                !evaluated.some(existingEval => existingEval.exercise === newEval.exercise)
-                        );
+  useEffect(() => {
+    if (mode === "exam") {
+      const hasDisabledSolutions = userSolutions.some(s => s.isDisabled);
 
-                        setEvaluated([...evaluated, ...newEvaluations]);
-                        setFlags({ pendingEvaluation: false });
-                        return;
-                    }
-                }
+      if (hasDisabledSolutions && sessionIds.length > 0) {
+        poll(sessionIds[0]);
+      } else {
+        pollingTimeoutsRef.current.forEach((timeout) => {
+          clearTimeout(timeout);
+        });
+        pollingTimeoutsRef.current.clear();
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mode, sessionIds, userSolutions]);
 
-                if (pendingExercises.length > 0) {
-                    pollingTimeoutRef.current = setTimeout(pollStatus, 5000);
-                }
-            } catch (error) {
-                console.error('Evaluation polling error:', error);
-                pollingTimeoutRef.current = setTimeout(pollStatus, 5000);
-            }
-        };
+  useEffect(() => {
+    if (mode === "records" && sessionIds.length > 0) {
+      sessionIds.forEach(sessionId => {
+        poll(sessionId);
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mode, sessionIds]);
 
-        pollStatus();
+  useEffect(() => {
+    const timeouts = pollingTimeoutsRef.current;
+    return () => {
+      timeouts.forEach((timeout) => {
+        clearTimeout(timeout);
+      });
+      timeouts.clear();
+    };
+  }, []);
 
-        return () => {
-            if (pollingTimeoutRef.current) {
-                clearTimeout(pollingTimeoutRef.current);
-            }
-        };
-    });
+  return {
+    isPolling: pollingTimeoutsRef.current.size > 0
+  };
 };
 
 export default useEvaluationPolling;

src/hooks/useStats.tsx

@@ -0,0 +1,42 @@
+import axios from "axios";
+import { useCallback, useEffect, useState } from "react";
+
+export default function useStats<T extends any>(
+  id?: string,
+  shouldNotQuery: boolean = !id,
+  queryType: string = "stats"
+) {
+  type ElementType = T extends (infer U)[] ? U : never;
+
+  const [data, setData] = useState<T>({} as unknown as T);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const getData = useCallback(() => {
+    if (shouldNotQuery) return;
+
+    setIsLoading(true);
+    setIsError(false);
+    let endpoint = `/api/stats/user/${id}`;
+    if (queryType) endpoint += `?query=${queryType}`;
+    axios
+      .get<T>(endpoint)
+      .then((response) => {
+        console.log(response.data);
+        setData(response.data);
+      })
+      .catch(() => setIsError(true))
+      .finally(() => setIsLoading(false));
+  }, [id, shouldNotQuery, queryType]);
+
+  useEffect(() => {
+    getData();
+  }, [getData]);
+
+  return {
+    data,
+    reload: getData,
+    isLoading,
+    isError,
+  };
+}

src/hooks/useTicketsListener.tsx

@@ -1,26 +1,28 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import axios from "axios";
 
-const useTicketsListener = (userId?: string) => {
+const useTicketsListener = (userId?: string, canFetch?: boolean) => {
   const [assignedTickets, setAssignedTickets] = useState([]);
 
-  const getData = () => {
+  const getData = useCallback(() => {
     axios
       .get("/api/tickets/assignedToUser")
       .then((response) => setAssignedTickets(response.data));
-  };
-
-  useEffect(() => {
-    getData();
   }, []);
 
   useEffect(() => {
+    if (!canFetch) return;
+    getData();
+  }, [canFetch, getData]);
+
+  useEffect(() => {
+    if (!canFetch) return;
     const intervalId = setInterval(() => {
       getData();
     }, 60 * 1000);
 
     return () => clearInterval(intervalId);
-  }, [assignedTickets]);
+  }, [assignedTickets, canFetch, getData]);
 
   if (userId) {
     return {

src/interfaces/results.ts

@@ -37,3 +37,5 @@ export interface Assignment {
 }
 
 export type AssignmentWithCorporateId = Assignment & { corporateId: string };
+
+export type AssignmentWithHasResults = Assignment & { hasResults: boolean };

src/pages/(exam)/ExamPage.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable @next/next/no-img-element */
 import { Module } from "@/interfaces";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 
 import AbandonPopup from "@/components/AbandonPopup";
-import Layout from "@/components/High/Layout";
+import { LayoutContext } from "@/components/High/Layout";
 import Finish from "@/exams/Finish";
 import Level from "@/exams/Level";
 import Listening from "@/exams/Listening";
@@ -11,9 +11,12 @@ import Reading from "@/exams/Reading";
 import Selection from "@/exams/Selection";
 import Speaking from "@/exams/Speaking";
 import Writing from "@/exams/Writing";
-import { Exam, LevelExam, UserSolution, Variant, WritingExam } from "@/interfaces/exam";
+import { Exam, LevelExam, Variant } from "@/interfaces/exam";
 import { User } from "@/interfaces/user";
-import { evaluateSpeakingAnswer, evaluateWritingAnswer } from "@/utils/evaluation";
+import {
+  evaluateSpeakingAnswer,
+  evaluateWritingAnswer,
+} from "@/utils/evaluation";
 import { getExam } from "@/utils/exams";
 import axios from "axios";
 import { useRouter } from "next/router";
@@ -24,317 +27,436 @@ import useExamStore from "@/stores/exam";
 import useEvaluationPolling from "@/hooks/useEvaluationPolling";
 
 interface Props {
-	page: "exams" | "exercises";
-	user: User;
-	destination?: string
-	hideSidebar?: boolean
+  page: "exams" | "exercises";
+  user: User;
+  destination?: string;
+  hideSidebar?: boolean;
 }
 
-export default function ExamPage({ page, user, destination = "/", hideSidebar = false }: Props) {
-	const router = useRouter();
-	const [variant, setVariant] = useState<Variant>("full");
-	const [avoidRepeated, setAvoidRepeated] = useState(false);
-	const [showAbandonPopup, setShowAbandonPopup] = useState(false);
-	const [pendingExercises, setPendingExercises] = useState<string[]>([]);
+export default function ExamPage({
+  page,
+  user,
+  destination = "/",
+  hideSidebar = false,
+}: Props) {
+  const router = useRouter();
+  const [variant, setVariant] = useState<Variant>("full");
+  const [avoidRepeated, setAvoidRepeated] = useState(false);
+  const [showAbandonPopup, setShowAbandonPopup] = useState(false);
+  const [moduleLock, setModuleLock] = useState(false);
 
-	const {
-		exam, setExam,
-		exams,
-		sessionId, setSessionId, setPartIndex,
-		moduleIndex, setModuleIndex,
-		setQuestionIndex, setExerciseIndex,
-		userSolutions, setUserSolutions,
-		showSolutions, setShowSolutions,
-		selectedModules, setSelectedModules,
-		setUser,
-		inactivity,
-		timeSpent,
-		assignment,
-		bgColor,
-		flags,
-		dispatch,
-		reset: resetStore,
-		saveStats,
-		saveSession,
-		setFlags,
-		setShuffles,
-		evaluated,
-	} = useExamStore();
+  const {
+    exam,
+    setExam,
+    exams,
+    sessionId,
+    setSessionId,
+    setPartIndex,
+    moduleIndex,
+    setModuleIndex,
+    setQuestionIndex,
+    setExerciseIndex,
+    userSolutions,
+    setUserSolutions,
+    showSolutions,
+    setShowSolutions,
+    selectedModules,
+    setSelectedModules,
+    setUser,
+    inactivity,
+    timeSpent,
+    assignment,
+    bgColor,
+    flags,
+    dispatch,
+    reset: resetStore,
+    saveStats,
+    saveSession,
+    setFlags,
+    setShuffles,
+  } = useExamStore();
 
-	const [isFetchingExams, setIsFetchingExams] = useState(false);
-	const [isExamLoaded, setIsExamLoaded] = useState(moduleIndex < selectedModules.length);
+  const [isFetchingExams, setIsFetchingExams] = useState(false);
+  const [isExamLoaded, setIsExamLoaded] = useState(
+    moduleIndex < selectedModules.length
+  );
 
-	useEffect(() => {
-		setIsExamLoaded(moduleIndex < selectedModules.length);
-	}, [showSolutions, moduleIndex, selectedModules]);
+  useEffect(() => {
+    setIsExamLoaded(moduleIndex < selectedModules.length);
+  }, [showSolutions, moduleIndex, selectedModules]);
 
-	useEffect(() => {
-		if (!showSolutions && sessionId.length === 0 && user?.id) {
-			const shortUID = new ShortUniqueId();
-			setUser(user.id);
-			setSessionId(shortUID.randomUUID(8));
-		}
-	}, [setSessionId, isExamLoaded, sessionId, showSolutions, setUser, user?.id]);
+  useEffect(() => {
+    if (!showSolutions && sessionId.length === 0 && user?.id) {
+      const shortUID = new ShortUniqueId();
+      setUser(user.id);
+      setSessionId(shortUID.randomUUID(8));
+    }
+  }, [setSessionId, isExamLoaded, sessionId, showSolutions, setUser, user?.id]);
 
-	useEffect(() => {
-		if (user?.type === "developer") console.log(exam);
-	}, [exam, user]);
+  useEffect(() => {
+    if (user?.type === "developer") console.log(exam);
+  }, [exam, user]);
 
-	useEffect(() => {
-		(async () => {
-			if (selectedModules.length > 0 && exams.length === 0) {
-				setIsFetchingExams(true);
-				const examPromises = selectedModules.map((module) =>
-					getExam(
-						module,
-						avoidRepeated,
-						variant,
-						user?.type === "student" || user?.type === "developer" ? user.preferredGender : undefined,
-					),
-				);
-				Promise.all(examPromises).then((values) => {
-					setIsFetchingExams(false);
-					if (values.every((x) => !!x)) {
-						dispatch({ type: 'INIT_EXAM', payload: { exams: values.map((x) => x!), modules: selectedModules } })
-					} else {
-						toast.error("Something went wrong, please try again");
-						setTimeout(router.reload, 500);
-					}
-				});
-			}
-		})();
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [selectedModules, exams]);
+  useEffect(() => {
+    (async () => {
+      if (selectedModules.length > 0 && exams.length === 0) {
+        setIsFetchingExams(true);
+        const examPromises = selectedModules.map((module) =>
+          getExam(
+            module,
+            avoidRepeated,
+            variant,
+            user?.type === "student" || user?.type === "developer"
+              ? user.preferredGender
+              : undefined
+          )
+        );
+        Promise.all(examPromises).then((values) => {
+          setIsFetchingExams(false);
+          if (values.every((x) => !!x)) {
+            dispatch({
+              type: "INIT_EXAM",
+              payload: {
+                exams: values.map((x) => x!),
+                modules: selectedModules,
+              },
+            });
+          } else {
+            toast.error("Something went wrong, please try again");
+            setTimeout(router.reload, 500);
+          }
+        });
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedModules, exams]);
 
+  const reset = () => {
+    resetStore();
+    setVariant("full");
+    setAvoidRepeated(false);
+    setShowAbandonPopup(false);
+  };
 
-	const reset = () => {
-		resetStore();
-		setVariant("full");
-		setAvoidRepeated(false);
-		setShowAbandonPopup(false);
-	};
+  useEvaluationPolling(sessionId ? [sessionId] : [], "exam", user?.id);
 
-	useEffect(() => {
-		if (flags.finalizeModule && !showSolutions && flags.pendingEvaluation) {
-			if (exam && (exam.module === "writing" || exam.module === "speaking") && userSolutions.length > 0 && !showSolutions) {
-				const exercisesToEvaluate = exam.exercises
-					.map(exercise => exercise.id);
+  useEffect(() => {
+    setModuleLock(true);
+  }, [flags.finalizeModule]);
 
-				setPendingExercises(exercisesToEvaluate);
-				(async () => {
-					await Promise.all(
-						exam.exercises.map(async (exercise, index) => {
-							if (exercise.type === "writing")
-								await evaluateWritingAnswer(user.id, sessionId, exercise, index + 1, userSolutions.find((x) => x.exercise === exercise.id)!, exercise.attachment?.url);
+  useEffect(() => {
+    if (flags.finalizeModule && !showSolutions) {
+      if (
+        exam &&
+        (exam.module === "writing" || exam.module === "speaking") &&
+        userSolutions.length > 0
+      ) {
+        (async () => {
+          try {
+            const results = await Promise.all(
+              exam.exercises.map(async (exercise, index) => {
+                if (exercise.type === "writing") {
+                  const sol = await evaluateWritingAnswer(
+                    user.id,
+                    sessionId,
+                    exercise,
+                    index + 1,
+                    userSolutions.find((x) => x.exercise === exercise.id)!,
+                    exercise.attachment?.url
+                  );
+                  return sol;
+                }
+                if (
+                  exercise.type === "interactiveSpeaking" ||
+                  exercise.type === "speaking"
+                ) {
+                  const sol = await evaluateSpeakingAnswer(
+                    user.id,
+                    sessionId,
+                    exercise,
+                    userSolutions.find((x) => x.exercise === exercise.id)!,
+                    index + 1
+                  );
+                  return sol;
+                }
+                return null;
+              })
+            );
+            const updatedSolutions = userSolutions.map((solution) => {
+              const completed = results
+                .filter((r) => r !== null)
+                .find((c: any) => c.exercise === solution.exercise);
+              return completed || solution;
+            });
+            setUserSolutions(updatedSolutions);
+          } catch (error) {
+            console.error("Error during module evaluation:", error);
+          } finally {
+            setModuleLock(false);
+          }
+        })();
+      } else {
+        setModuleLock(false);
+      }
+    }
+  }, [
+    exam,
+    showSolutions,
+    userSolutions,
+    sessionId,
+    user.id,
+    flags.finalizeModule,
+    setUserSolutions,
+  ]);
 
-							if (exercise.type === "interactiveSpeaking" || exercise.type === "speaking") {
-								await evaluateSpeakingAnswer(
-									user.id,
-									sessionId,
-									exercise,
-									userSolutions.find((x) => x.exercise === exercise.id)!,
-									index + 1,
-								);
-							}
-						}),
-					)
-				})();
-			}
-		}
-	}, [exam, showSolutions, userSolutions, sessionId, user?.id, flags]);
+  useEffect(() => {
+    if (flags.finalizeExam && moduleIndex !== -1 && !moduleLock) {
+      (async () => {
+        setModuleIndex(-1);
+        await saveStats();
+        await axios.get("/api/stats/update");
+      })();
+    }
+  }, [
+    flags.finalizeExam,
+    moduleIndex,
+    saveStats,
+    setModuleIndex,
+    userSolutions,
+    moduleLock,
+    flags.finalizeModule,
+  ]);
 
-	useEvaluationPolling({ pendingExercises, setPendingExercises });
+  useEffect(() => {
+    if (
+      flags.finalizeExam &&
+      !userSolutions.some((s) => s.isDisabled) &&
+      !moduleLock
+    ) {
+      setShowSolutions(true);
+      setFlags({ finalizeExam: false });
+      dispatch({ type: "UPDATE_EXAMS" });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [flags.finalizeExam, userSolutions, showSolutions, moduleLock]);
 
-	useEffect(() => {
-		if (flags.finalizeExam && moduleIndex !== -1) {
-			setModuleIndex(-1);
+  const aggregateScoresByModule = (
+    isPractice?: boolean
+  ): {
+    module: Module;
+    total: number;
+    missing: number;
+    correct: number;
+  }[] => {
+    const scores: {
+      [key in Module]: { total: number; missing: number; correct: number };
+    } = {
+      reading: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+      listening: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+      writing: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+      speaking: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+      level: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+    };
 
+    userSolutions.forEach((x) => {
+      if (x.isPractice === isPractice) {
+        const examModule =
+          x.module ||
+          (x.type === "writing"
+            ? "writing"
+            : x.type === "speaking" || x.type === "interactiveSpeaking"
+            ? "speaking"
+            : undefined);
 
-		}
-	}, [flags.finalizeExam, moduleIndex, setModuleIndex]);
+        scores[examModule!] = {
+          total: scores[examModule!].total + x.score.total,
+          correct: scores[examModule!].correct + x.score.correct,
+          missing: scores[examModule!].missing + x.score.missing,
+        };
+      }
+    });
 
-	useEffect(() => {
-		if (flags.finalizeExam && !flags.pendingEvaluation && pendingExercises.length === 0) {
-			(async () => {
-				if (evaluated.length !== 0) {
-					setUserSolutions(
-						userSolutions.map(solution => {
-							const evaluatedSolution = evaluated.find(e => e.exercise === solution.exercise);
-							if (evaluatedSolution) {
-								return { ...solution, ...evaluatedSolution };
-							}
-							return solution;
-						})
-					);
-				}
-				await saveStats();
-				await axios.get("/api/stats/update");
-				setShowSolutions(true);
-				setFlags({ finalizeExam: false });
-				dispatch({ type: "UPDATE_EXAMS" })
-			})();
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [saveStats, setFlags, setModuleIndex, evaluated, pendingExercises, setUserSolutions, flags]);
+    return Object.keys(scores).reduce<
+      { module: Module; total: number; missing: number; correct: number }[]
+    >((accm, x) => {
+      if (scores[x as Module].total > 0)
+        accm.push({ module: x as Module, ...scores[x as Module] });
+      return accm;
+    }, []);
+  };
 
+  const ModuleExamMap: Record<Module, React.ComponentType<ExamProps<Exam>>> = {
+    reading: Reading as React.ComponentType<ExamProps<Exam>>,
+    listening: Listening as React.ComponentType<ExamProps<Exam>>,
+    writing: Writing as React.ComponentType<ExamProps<Exam>>,
+    speaking: Speaking as React.ComponentType<ExamProps<Exam>>,
+    level: Level as React.ComponentType<ExamProps<Exam>>,
+  };
 
-	const aggregateScoresByModule = (isPractice?: boolean): {
-		module: Module;
-		total: number;
-		missing: number;
-		correct: number;
-	}[] => {
-		const scores: {
-			[key in Module]: { total: number; missing: number; correct: number };
-		} = {
-			reading: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-			listening: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-			writing: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-			speaking: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-			level: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-		};
+  const CurrentExam = exam?.module ? ModuleExamMap[exam.module] : undefined;
 
-		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);
+  const onAbandon = async () => {
+    await saveSession();
+    reset();
+  };
 
-			scores[examModule!] = {
-				total: scores[examModule!].total + x.score.total,
-				correct: scores[examModule!].correct + x.score.correct,
-				missing: scores[examModule!].missing + x.score.missing,
-			};
-		});
+  const {
+    setBgColor,
+    setHideSidebar,
+    setFocusMode,
+    setOnFocusLayerMouseEnter,
+  } = React.useContext(LayoutContext);
 
-		return Object.keys(scores)
-			.filter((x) => scores[x as Module].total > 0)
-			.map((x) => ({ module: x as Module, ...scores[x as Module] }));
-	};
+  useEffect(() => {
+    setOnFocusLayerMouseEnter(() => () => setShowAbandonPopup(true));
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-	const ModuleExamMap: Record<Module, React.ComponentType<ExamProps<Exam>>> = {
-		"reading": Reading as React.ComponentType<ExamProps<Exam>>,
-		"listening": Listening as React.ComponentType<ExamProps<Exam>>,
-		"writing": Writing as React.ComponentType<ExamProps<Exam>>,
-		"speaking": Speaking as React.ComponentType<ExamProps<Exam>>,
-		"level": Level as React.ComponentType<ExamProps<Exam>>,
-	}
+  useEffect(() => {
+    setBgColor(bgColor);
+    setHideSidebar(hideSidebar);
+    setFocusMode(
+      selectedModules.length !== 0 &&
+        !showSolutions &&
+        moduleIndex < selectedModules.length
+    );
+  }, [
+    bgColor,
+    hideSidebar,
+    moduleIndex,
+    selectedModules.length,
+    setBgColor,
+    setFocusMode,
+    setHideSidebar,
+    showSolutions,
+  ]);
 
-	const CurrentExam = exam?.module ? ModuleExamMap[exam.module] : undefined;
-
-	const onAbandon = async () => {
-		await saveSession();
-		reset();
-	};
-
-	return (
-		<>
-			<ToastContainer />
-			{user && (
-				<Layout
-					user={user}
-					bgColor={bgColor}
-					hideSidebar={hideSidebar}
-					className="justify-between"
-					focusMode={selectedModules.length !== 0 && !showSolutions && moduleIndex < selectedModules.length}
-					onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}>
-					<>
-						{/* Modules weren't yet set by an INIT_EXAM or INIT_SOLUTIONS dispatch, show Selection component*/}
-						{selectedModules.length === 0 && <Selection
-							page={page}
-							user={user!}
-							onStart={(modules: Module[], avoid: boolean, variant: Variant) => {
-								setModuleIndex(0);
-								setAvoidRepeated(avoid);
-								setSelectedModules(modules);
-								setVariant(variant);
-							}}
-						/>}
-						{isFetchingExams && (
-							<div className="flex flex-grow flex-col items-center justify-center animate-pulse">
-								<span className={`loading loading-infinity w-32 bg-ielts-${selectedModules[0]}`} />
-								<span className={`font-bold text-2xl text-ielts-${selectedModules[0]}`}>Loading Exam ...</span>
-							</div>
-						)}
-						{(moduleIndex === -1 && selectedModules.length !== 0) &&
-							<Finish
-								isLoading={flags.pendingEvaluation}
-								user={user!}
-								modules={selectedModules}
-								solutions={userSolutions}
-								assignment={assignment}
-								information={{
-									timeSpent,
-									inactivity,
-								}}
-								destination={destination}
-								onViewResults={(index?: number) => {
-									if (exams[0].module === "level") {
-										const levelExam = exams[0] as LevelExam;
-										const allExercises = levelExam.parts.flatMap((part) => part.exercises);
-										const exerciseOrderMap = new Map(allExercises.map((ex, index) => [ex.id, index]));
-										const orderedSolutions = userSolutions.slice().sort((a, b) => {
-											const indexA = exerciseOrderMap.get(a.exercise) ?? Infinity;
-											const indexB = exerciseOrderMap.get(b.exercise) ?? Infinity;
-											return indexA - indexB;
-										});
-										setUserSolutions(orderedSolutions);
-									} else {
-										setUserSolutions(userSolutions);
-									}
-									setShuffles([]);
-									if (index === undefined) {
-										setFlags({ reviewAll: true });
-										setModuleIndex(0);
-										setExam(exams[0]);
-									} else {
-										setModuleIndex(index);
-										setExam(exams[index]);
-									}
-									setShowSolutions(true);
-									setQuestionIndex(0);
-									setExerciseIndex(0);
-									setPartIndex(0);
-								}}
-								scores={aggregateScoresByModule()}
-								practiceScores={aggregateScoresByModule(true)}
-							/>}
-						{/* Exam is on going, display it and the abandon modal */}
-						{isExamLoaded && moduleIndex !== -1 && (
-							<>
-								{exam && CurrentExam && <CurrentExam exam={exam} showSolutions={showSolutions} />}
-								{!showSolutions && <AbandonPopup
-									isOpen={showAbandonPopup}
-									abandonPopupTitle="Leave Exercise"
-									abandonPopupDescription="Are you sure you want to leave the exercise? Your progress will be saved and this exam can be resumed on the Dashboard."
-									abandonConfirmButtonText="Confirm"
-									onAbandon={onAbandon}
-									onCancel={() => setShowAbandonPopup(false)}
-								/>
-								}
-							</>
-						)}
-					</>
-				</Layout>
-			)}
-		</>
-	);
+  return (
+    <>
+      <ToastContainer />
+      {user && (
+          <>
+            {/* Modules weren't yet set by an INIT_EXAM or INIT_SOLUTIONS dispatch, show Selection component*/}
+            {selectedModules.length === 0 && (
+              <Selection
+                page={page}
+                user={user!}
+                onStart={(
+                  modules: Module[],
+                  avoid: boolean,
+                  variant: Variant
+                ) => {
+                  setModuleIndex(0);
+                  setAvoidRepeated(avoid);
+                  setSelectedModules(modules);
+                  setVariant(variant);
+                }}
+              />
+            )}
+            {isFetchingExams && (
+              <div className="flex flex-grow flex-col items-center justify-center animate-pulse">
+                <span
+                  className={`loading loading-infinity w-32 bg-ielts-${selectedModules[0]}`}
+                />
+                <span
+                  className={`font-bold text-2xl text-ielts-${selectedModules[0]}`}
+                >
+                  Loading Exam ...
+                </span>
+              </div>
+            )}
+            {moduleIndex === -1 && selectedModules.length !== 0 && (
+              <Finish
+                isLoading={userSolutions.some((s) => s.isDisabled)}
+                user={user!}
+                modules={selectedModules}
+                solutions={userSolutions}
+                assignment={assignment}
+                information={{
+                  timeSpent,
+                  inactivity,
+                }}
+                destination={destination}
+                onViewResults={(index?: number) => {
+                  if (exams[0].module === "level") {
+                    const levelExam = exams[0] as LevelExam;
+                    const allExercises = levelExam.parts.flatMap(
+                      (part) => part.exercises
+                    );
+                    const exerciseOrderMap = new Map(
+                      allExercises.map((ex, index) => [ex.id, index])
+                    );
+                    const orderedSolutions = userSolutions
+                      .slice()
+                      .sort((a, b) => {
+                        const indexA =
+                          exerciseOrderMap.get(a.exercise) ?? Infinity;
+                        const indexB =
+                          exerciseOrderMap.get(b.exercise) ?? Infinity;
+                        return indexA - indexB;
+                      });
+                    setUserSolutions(orderedSolutions);
+                  } else {
+                    setUserSolutions(userSolutions);
+                  }
+                  setShuffles([]);
+                  if (index === undefined) {
+                    setFlags({ reviewAll: true });
+                    setModuleIndex(0);
+                    setExam(exams[0]);
+                  } else {
+                    setModuleIndex(index);
+                    setExam(exams[index]);
+                  }
+                  setShowSolutions(true);
+                  setQuestionIndex(0);
+                  setExerciseIndex(0);
+                  setPartIndex(0);
+                }}
+                scores={aggregateScoresByModule()}
+                practiceScores={aggregateScoresByModule(true)}
+              />
+            )}
+            {/* Exam is on going, display it and the abandon modal */}
+            {isExamLoaded && moduleIndex !== -1 && (
+              <>
+                {exam && CurrentExam && (
+                  <CurrentExam exam={exam} showSolutions={showSolutions} />
+                )}
+                {!showSolutions && (
+                  <AbandonPopup
+                    isOpen={showAbandonPopup}
+                    abandonPopupTitle="Leave Exercise"
+                    abandonPopupDescription="Are you sure you want to leave the exercise? Your progress will be saved and this exam can be resumed on the Dashboard."
+                    abandonConfirmButtonText="Confirm"
+                    onAbandon={onAbandon}
+                    onCancel={() => setShowAbandonPopup(false)}
+                  />
+                )}
+              </>
+            )}
+          </>
+      )}
+    </>
+  );
 }

src/pages/(status)/PaymentDue.tsx

@@ -1,18 +1,14 @@
 /* eslint-disable @next/next/no-img-element */
-import Layout from "@/components/High/Layout";
-import useGroups from "@/hooks/useGroups";
-import usePackages from "@/hooks/usePackages";
 import useUsers from "@/hooks/useUsers";
 import { User } from "@/interfaces/user";
 import clsx from "clsx";
-import { capitalize, sortBy } from "lodash";
+import { capitalize } from "lodash";
 import { useEffect, useMemo, useState } from "react";
 import useInvites from "@/hooks/useInvites";
 import { BsArrowRepeat } from "react-icons/bs";
 import InviteCard from "@/components/Medium/InviteCard";
 import { useRouter } from "next/router";
 import { ToastContainer } from "react-toastify";
-import useDiscounts from "@/hooks/useDiscounts";
 import PaymobPayment from "@/components/PaymobPayment";
 import moment from "moment";
 import { EntityWithRoles } from "@/interfaces/entity";
@@ -22,241 +18,345 @@ import { useAllowedEntities } from "@/hooks/useEntityPermissions";
 import Select from "@/components/Low/Select";
 
 interface Props {
-	user: User
-	discounts: Discount[]
-	packages: Package[]
-	entities: EntityWithRoles[]
-	hasExpired?: boolean;
-	reload: () => void;
+  user: User;
+  discounts: Discount[];
+  packages: Package[];
+  entities: EntityWithRoles[];
+  hasExpired?: boolean;
+  reload: () => void;
 }
 
-export default function PaymentDue({ user, discounts = [], entities = [], packages = [], hasExpired = false, reload }: Props) {
-	const [isLoading, setIsLoading] = useState(false);
-	const [entity, setEntity] = useState<EntityWithRoles>()
+export default function PaymentDue({
+  user,
+  discounts = [],
+  entities = [],
+  packages = [],
+  hasExpired = false,
+  reload,
+}: Props) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [entity, setEntity] = useState<EntityWithRoles>();
 
-	const router = useRouter();
+  const router = useRouter();
 
-	const { users } = useUsers();
-	const { invites, isLoading: isInvitesLoading, reload: reloadInvites } = useInvites({ to: user?.id });
+  const { users } = useUsers();
+  const {
+    invites,
+    isLoading: isInvitesLoading,
+    reload: reloadInvites,
+  } = useInvites({ to: user?.id });
 
-	const isIndividual = useMemo(() => {
-		if (isAdmin(user)) return false;
-		if (user?.type !== "student") return false;
+  const isIndividual = useMemo(() => {
+    if (isAdmin(user)) return false;
+    if (user?.type !== "student") return false;
 
-		return user.entities.length === 0
-	}, [user])
+    return user.entities.length === 0;
+  }, [user]);
 
-	const appliedDiscount = useMemo(() => {
-		const biggestDiscount = [...discounts].sort((a, b) => b.percentage - a.percentage).shift();
+  const appliedDiscount = useMemo(() => {
+    const biggestDiscount = [...discounts]
+      .sort((a, b) => b.percentage - a.percentage)
+      .shift();
 
-		if (!biggestDiscount || (biggestDiscount.validUntil && moment(biggestDiscount.validUntil).isBefore(moment())))
-			return 0;
+    if (
+      !biggestDiscount ||
+      (biggestDiscount.validUntil &&
+        moment(biggestDiscount.validUntil).isBefore(moment()))
+    )
+      return 0;
 
-		return biggestDiscount.percentage
-	}, [discounts])
+    return biggestDiscount.percentage;
+  }, [discounts]);
 
-	const entitiesThatCanBePaid = useAllowedEntities(user, entities, 'pay_entity')
+  const entitiesThatCanBePaid = useAllowedEntities(
+    user,
+    entities,
+    "pay_entity"
+  );
 
-	useEffect(() => {
-		if (entitiesThatCanBePaid.length > 0) setEntity(entitiesThatCanBePaid[0])
-	}, [entitiesThatCanBePaid])
+  useEffect(() => {
+    if (entitiesThatCanBePaid.length > 0) setEntity(entitiesThatCanBePaid[0]);
+  }, [entitiesThatCanBePaid]);
 
-	return (
-		<>
-			<ToastContainer />
-			{isLoading && (
-				<div className="absolute left-0 top-0 z-[999] h-screen w-screen overflow-hidden bg-black/60">
-					<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-8 text-white">
-						<span className={clsx("loading loading-infinity w-48 animate-pulse")} />
-						<span className={clsx("text-2xl font-bold animate-pulse")}>Completing your payment...</span>
-						<span>If you canceled your payment or it failed, please click the button below to restart</span>
-						<button
-							onClick={() => setIsLoading(false)}
-							className="border border-white rounded-full px-4 py-2 hover:bg-white/80 hover:text-black cursor-pointer transition ease-in-out duration-300">
-							Cancel Payment
-						</button>
-					</div>
-				</div>
-			)}
-			<Layout user={user} navDisabled={hasExpired}>
-				{invites.length > 0 && (
-					<section className="flex flex-col gap-1 md:gap-3">
-						<div className="flex items-center gap-4">
-							<div
-								onClick={reloadInvites}
-								className="text-mti-purple-light hover:text-mti-purple-dark flex cursor-pointer items-center gap-2 transition duration-300 ease-in-out">
-								<span className="text-mti-black text-lg font-bold">Invites</span>
-								<BsArrowRepeat className={clsx("text-xl", isInvitesLoading && "animate-spin")} />
-							</div>
-						</div>
-						<span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
-							{invites.map((invite) => (
-								<InviteCard
-									key={invite.id}
-									invite={invite}
-									users={users}
-									reload={() => {
-										reloadInvites();
-										router.reload();
-									}}
-								/>
-							))}
-						</span>
-					</section>
-				)}
+  return (
+    <>
+      <ToastContainer />
+      {isLoading && (
+        <div className="absolute left-0 top-0 z-[999] h-screen w-screen overflow-hidden bg-black/60">
+          <div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-8 text-white">
+            <span
+              className={clsx("loading loading-infinity w-48 animate-pulse")}
+            />
+            <span className={clsx("text-2xl font-bold animate-pulse")}>
+              Completing your payment...
+            </span>
+            <span>
+              If you canceled your payment or it failed, please click the button
+              below to restart
+            </span>
+            <button
+              onClick={() => setIsLoading(false)}
+              className="border border-white rounded-full px-4 py-2 hover:bg-white/80 hover:text-black cursor-pointer transition ease-in-out duration-300"
+            >
+              Cancel Payment
+            </button>
+          </div>
+        </div>
+      )}
+      <>
+        {invites.length > 0 && (
+          <section className="flex flex-col gap-1 md:gap-3">
+            <div className="flex items-center gap-4">
+              <div
+                onClick={reloadInvites}
+                className="text-mti-purple-light hover:text-mti-purple-dark flex cursor-pointer items-center gap-2 transition duration-300 ease-in-out"
+              >
+                <span className="text-mti-black text-lg font-bold">
+                  Invites
+                </span>
+                <BsArrowRepeat
+                  className={clsx(
+                    "text-xl",
+                    isInvitesLoading && "animate-spin"
+                  )}
+                />
+              </div>
+            </div>
+            <span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
+              {invites.map((invite) => (
+                <InviteCard
+                  key={invite.id}
+                  invite={invite}
+                  users={users}
+                  reload={() => {
+                    reloadInvites();
+                    router.reload();
+                  }}
+                />
+              ))}
+            </span>
+          </section>
+        )}
 
-				<div className="flex w-full flex-col items-center justify-center gap-4 text-center">
-					{hasExpired && <span className="text-lg font-bold">You do not have time credits for your account type!</span>}
-					{isIndividual && (
-						<div className="scrollbar-hide flex w-full flex-col items-center gap-12 overflow-x-scroll">
-							<span className="max-w-lg">
-								To add to your use of EnCoach, please purchase one of the time packages available below:
-							</span>
-							<div className="flex w-full flex-wrap justify-center gap-8">
-								{packages.map((p) => (
-									<div key={p.id} className={clsx("flex flex-col items-start gap-6 rounded-xl bg-white p-4")}>
-										<div className="mb-2 flex flex-col items-start">
-											<img src="/logo_title.png" alt="EnCoach's Logo" className="w-32" />
-											<span className="text-xl font-semibold">
-												EnCoach - {p.duration}{" "}
-												{capitalize(
-													p.duration === 1 ? p.duration_unit.slice(0, p.duration_unit.length - 1) : p.duration_unit,
-												)}
-											</span>
-										</div>
-										<div className="flex w-full flex-col items-start gap-2">
-											{appliedDiscount === 0 && (
-												<span className="text-2xl">
-													{p.price} {p.currency}
-												</span>
-											)}
-											{appliedDiscount > 0 && (
-												<div className="flex items-center gap-2">
-													<span className="text-2xl line-through">
-														{p.price} {p.currency}
-													</span>
-													<span className="text-2xl text-mti-red-light">
-														{(p.price - p.price * (appliedDiscount / 100)).toFixed(2)} {p.currency}
-													</span>
-												</div>
-											)}
-											<PaymobPayment
-												user={user}
-												setIsPaymentLoading={setIsLoading}
-												onSuccess={() => {
-													setTimeout(reload, 500);
-												}}
-												currency={p.currency}
-												duration={p.duration}
-												duration_unit={p.duration_unit}
-												price={+(p.price - p.price * (appliedDiscount / 100)).toFixed(2)}
-											/>
-										</div>
-										<div className="flex flex-col items-start gap-1">
-											<span>This includes:</span>
-											<ul className="flex flex-col items-start text-sm">
-												<li>- Train your abilities for the IELTS exam</li>
-												<li>- Gain insights into your weaknesses and strengths</li>
-												<li>- Allow yourself to correctly prepare for the exam</li>
-											</ul>
-										</div>
-									</div>
-								))}
-							</div>
-						</div>
-					)}
+        <div className="flex w-full flex-col items-center justify-center gap-4 text-center">
+          {hasExpired && (
+            <span className="text-lg font-bold">
+              You do not have time credits for your account type!
+            </span>
+          )}
+          {isIndividual && (
+            <div className="scrollbar-hide flex w-full flex-col items-center gap-12 overflow-x-scroll">
+              <span className="max-w-lg">
+                To add to your use of EnCoach, please purchase one of the time
+                packages available below:
+              </span>
+              <div className="flex w-full flex-wrap justify-center gap-8">
+                {packages.map((p) => (
+                  <div
+                    key={p.id}
+                    className={clsx(
+                      "flex flex-col items-start gap-6 rounded-xl bg-white p-4"
+                    )}
+                  >
+                    <div className="mb-2 flex flex-col items-start">
+                      <img
+                        src="/logo_title.png"
+                        alt="EnCoach's Logo"
+                        className="w-32"
+                      />
+                      <span className="text-xl font-semibold">
+                        EnCoach - {p.duration}{" "}
+                        {capitalize(
+                          p.duration === 1
+                            ? p.duration_unit.slice(
+                                0,
+                                p.duration_unit.length - 1
+                              )
+                            : p.duration_unit
+                        )}
+                      </span>
+                    </div>
+                    <div className="flex w-full flex-col items-start gap-2">
+                      {appliedDiscount === 0 && (
+                        <span className="text-2xl">
+                          {p.price} {p.currency}
+                        </span>
+                      )}
+                      {appliedDiscount > 0 && (
+                        <div className="flex items-center gap-2">
+                          <span className="text-2xl line-through">
+                            {p.price} {p.currency}
+                          </span>
+                          <span className="text-2xl text-mti-red-light">
+                            {(
+                              p.price -
+                              p.price * (appliedDiscount / 100)
+                            ).toFixed(2)}{" "}
+                            {p.currency}
+                          </span>
+                        </div>
+                      )}
+                      <PaymobPayment
+                        user={user}
+                        setIsPaymentLoading={setIsLoading}
+                        onSuccess={() => {
+                          setTimeout(reload, 500);
+                        }}
+                        currency={p.currency}
+                        duration={p.duration}
+                        duration_unit={p.duration_unit}
+                        price={
+                          +(
+                            p.price -
+                            p.price * (appliedDiscount / 100)
+                          ).toFixed(2)
+                        }
+                      />
+                    </div>
+                    <div className="flex flex-col items-start gap-1">
+                      <span>This includes:</span>
+                      <ul className="flex flex-col items-start text-sm">
+                        <li>- Train your abilities for the IELTS exam</li>
+                        <li>
+                          - Gain insights into your weaknesses and strengths
+                        </li>
+                        <li>
+                          - Allow yourself to correctly prepare for the exam
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
 
-					{!isIndividual && entitiesThatCanBePaid.length > 0 &&
-						entity?.payment && (
-							<div className="flex flex-col items-center gap-8">
-								<div className={clsx("flex flex-col items-center gap-4 w-full")}>
-									<label className="font-normal text-base text-mti-gray-dim">Entity</label>
-									<Select
-										defaultValue={{ value: entity?.id, label: entity?.label }}
-										options={entitiesThatCanBePaid.map((e) => ({ value: e.id, label: e.label, entity: e }))}
-										onChange={(e) => e?.value ? setEntity(e?.entity) : null}
-										className="!w-full max-w-[400px] self-center"
-									/>
-								</div>
+          {!isIndividual &&
+            entitiesThatCanBePaid.length > 0 &&
+            entity?.payment && (
+              <div className="flex flex-col items-center gap-8">
+                <div
+                  className={clsx("flex flex-col items-center gap-4 w-full")}
+                >
+                  <label className="font-normal text-base text-mti-gray-dim">
+                    Entity
+                  </label>
+                  <Select
+                    defaultValue={{ value: entity?.id, label: entity?.label }}
+                    options={entitiesThatCanBePaid.map((e) => ({
+                      value: e.id,
+                      label: e.label,
+                      entity: e,
+                    }))}
+                    onChange={(e) => (e?.value ? setEntity(e?.entity) : null)}
+                    className="!w-full max-w-[400px] self-center"
+                  />
+                </div>
 
-								<span className="max-w-lg">
-									To add to your use of EnCoach and that of your students and teachers, please pay your designated package
-									below:
-								</span>
-								<div className={clsx("flex flex-col items-start gap-6 rounded-xl bg-white p-4")}>
-									<div className="mb-2 flex flex-col items-start">
-										<img src="/logo_title.png" alt="EnCoach's Logo" className="w-32" />
-										<span className="text-xl font-semibold">
-											EnCoach - {12} Months
-										</span>
-									</div>
-									<div className="flex w-full flex-col items-start gap-2">
-										<span className="text-2xl">
-											{entity.payment.price} {entity.payment.currency}
-										</span>
-										<PaymobPayment
-											user={user}
-											setIsPaymentLoading={setIsLoading}
-											entity={entity}
-											currency={entity.payment.currency}
-											price={entity.payment.price}
-											duration={12}
-											duration_unit="months"
-											onSuccess={() => {
-												setIsLoading(false);
-												setTimeout(reload, 500);
-											}}
-										/>
-									</div>
-									<div className="flex flex-col items-start gap-1">
-										<span>This includes:</span>
-										<ul className="flex flex-col items-start text-sm">
-											<li>
-												- Allow a total of {entity.licenses} students and teachers to use EnCoach
-											</li>
-											<li>- Train their abilities for the IELTS exam</li>
-											<li>- Gain insights into your students&apos; weaknesses and strengths</li>
-											<li>- Allow them to correctly prepare for the exam</li>
-										</ul>
-									</div>
-								</div>
-							</div>
-						)}
-					{!isIndividual && entitiesThatCanBePaid.length === 0 && (
-						<div className="flex flex-col items-center">
-							<span className="max-w-lg">
-								You are not the person in charge of your time credits, please contact your administrator about this situation.
-							</span>
-							<span className="max-w-lg">
-								If you believe this to be a mistake, please contact the platform&apos;s administration, thank you for your
-								patience.
-							</span>
-						</div>
-					)}
-					{!isIndividual &&
-						entitiesThatCanBePaid.length > 0 &&
-						!entity?.payment && (
-							<div className="flex flex-col items-center gap-8">
-								<div className={clsx("flex flex-col items-center gap-4 w-full")}>
-									<label className="font-normal text-base text-mti-gray-dim">Entity</label>
-									<Select
-										defaultValue={{ value: entity?.id || "", label: entity?.label || "" }}
-										options={entitiesThatCanBePaid.map((e) => ({ value: e.id, label: e.label, entity: e }))}
-										onChange={(e) => e?.value ? setEntity(e?.entity) : null}
-										className="!w-full max-w-[400px] self-center"
-									/>
-								</div>
-								<span className="max-w-lg">
-									An admin nor your agent have yet set the price intended to your requirements in terms of the amount of users
-									you desire and your expected monthly duration.
-								</span>
-								<span className="max-w-lg">
-									Please try again later or contact your agent or an admin, thank you for your patience.
-								</span>
-							</div>
-						)}
-				</div>
-			</Layout>
-		</>
-	);
+                <span className="max-w-lg">
+                  To add to your use of EnCoach and that of your students and
+                  teachers, please pay your designated package below:
+                </span>
+                <div
+                  className={clsx(
+                    "flex flex-col items-start gap-6 rounded-xl bg-white p-4"
+                  )}
+                >
+                  <div className="mb-2 flex flex-col items-start">
+                    <img
+                      src="/logo_title.png"
+                      alt="EnCoach's Logo"
+                      className="w-32"
+                    />
+                    <span className="text-xl font-semibold">
+                      EnCoach - {12} Months
+                    </span>
+                  </div>
+                  <div className="flex w-full flex-col items-start gap-2">
+                    <span className="text-2xl">
+                      {entity.payment.price} {entity.payment.currency}
+                    </span>
+                    <PaymobPayment
+                      user={user}
+                      setIsPaymentLoading={setIsLoading}
+                      entity={entity}
+                      currency={entity.payment.currency}
+                      price={entity.payment.price}
+                      duration={12}
+                      duration_unit="months"
+                      onSuccess={() => {
+                        setIsLoading(false);
+                        setTimeout(reload, 500);
+                      }}
+                    />
+                  </div>
+                  <div className="flex flex-col items-start gap-1">
+                    <span>This includes:</span>
+                    <ul className="flex flex-col items-start text-sm">
+                      <li>
+                        - Allow a total of {entity.licenses} students and
+                        teachers to use EnCoach
+                      </li>
+                      <li>- Train their abilities for the IELTS exam</li>
+                      <li>
+                        - Gain insights into your students&apos; weaknesses and
+                        strengths
+                      </li>
+                      <li>- Allow them to correctly prepare for the exam</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            )}
+          {!isIndividual && entitiesThatCanBePaid.length === 0 && (
+            <div className="flex flex-col items-center">
+              <span className="max-w-lg">
+                You are not the person in charge of your time credits, please
+                contact your administrator about this situation.
+              </span>
+              <span className="max-w-lg">
+                If you believe this to be a mistake, please contact the
+                platform&apos;s administration, thank you for your patience.
+              </span>
+            </div>
+          )}
+          {!isIndividual &&
+            entitiesThatCanBePaid.length > 0 &&
+            !entity?.payment && (
+              <div className="flex flex-col items-center gap-8">
+                <div
+                  className={clsx("flex flex-col items-center gap-4 w-full")}
+                >
+                  <label className="font-normal text-base text-mti-gray-dim">
+                    Entity
+                  </label>
+                  <Select
+                    defaultValue={{
+                      value: entity?.id || "",
+                      label: entity?.label || "",
+                    }}
+                    options={entitiesThatCanBePaid.map((e) => ({
+                      value: e.id,
+                      label: e.label,
+                      entity: e,
+                    }))}
+                    onChange={(e) => (e?.value ? setEntity(e?.entity) : null)}
+                    className="!w-full max-w-[400px] self-center"
+                  />
+                </div>
+                <span className="max-w-lg">
+                  An admin nor your agent have yet set the price intended to
+                  your requirements in terms of the amount of users you desire
+                  and your expected monthly duration.
+                </span>
+                <span className="max-w-lg">
+                  Please try again later or contact your agent or an admin,
+                  thank you for your patience.
+                </span>
+              </div>
+            )}
+        </div>
+      </>
+    </>
+  );
 }

src/pages/_app.tsx

@@ -1,35 +1,69 @@
 import "@/styles/globals.css";
 import "react-toastify/dist/ReactToastify.css";
-import type {AppProps} from "next/app";
+import type { AppProps } from "next/app";
 
 import "primereact/resources/themes/lara-light-indigo/theme.css";
 import "primereact/resources/primereact.min.css";
 import "primeicons/primeicons.css";
 import "react-datepicker/dist/react-datepicker.css";
-import {useRouter} from "next/router";
-import {useEffect} from "react";
+import { Router, useRouter } from "next/router";
+import { useEffect, useState } from "react";
 import useExamStore from "@/stores/exam";
 import usePreferencesStore from "@/stores/preferencesStore";
+import Layout from "../components/High/Layout";
+import useEntities from "../hooks/useEntities";
+import UserProfileSkeleton from "../components/Medium/UserProfileSkeleton";
 
-export default function App({Component, pageProps}: AppProps) {
-	const {reset} = useExamStore();
-	const setIsSidebarMinimized = usePreferencesStore((state) => state.setSidebarMinimized);
+export default function App({ Component, pageProps }: AppProps) {
+  const [loading, setLoading] = useState(false);
 
-	const router = useRouter();
+  const { reset } = useExamStore();
 
-	useEffect(() => {
-		if (router.pathname !== "/exam" && router.pathname !== "/exercises") reset();
-	}, [router.pathname, reset]);
+  const setIsSidebarMinimized = usePreferencesStore(
+    (state) => state.setSidebarMinimized
+  );
 
-	useEffect(() => {
-		if (localStorage.getItem("isSidebarMinimized")) {
-			if (localStorage.getItem("isSidebarMinimized") === "true") {
-				setIsSidebarMinimized(true);
-			} else {
-				setIsSidebarMinimized(false);
-			}
-		}
-	}, [setIsSidebarMinimized]);
+  const router = useRouter();
 
-	return <Component {...pageProps} />;
+  const { entities } = useEntities(!pageProps?.user?.id);
+
+  useEffect(() => {
+    const start = () => {
+      setLoading(true);
+    };
+    const end = () => {
+      setLoading(false);
+    };
+    Router.events.on("routeChangeStart", start);
+    Router.events.on("routeChangeComplete", end);
+    Router.events.on("routeChangeError", end);
+    return () => {
+      Router.events.off("routeChangeStart", start);
+      Router.events.off("routeChangeComplete", end);
+      Router.events.off("routeChangeError", end);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (router.pathname !== "/exam" && router.pathname !== "/exercises")
+      reset();
+  }, [router.pathname, reset]);
+
+  useEffect(() => {
+    if (localStorage.getItem("isSidebarMinimized")) {
+      if (localStorage.getItem("isSidebarMinimized") === "true") {
+        setIsSidebarMinimized(true);
+      } else {
+        setIsSidebarMinimized(false);
+      }
+    }
+  }, [setIsSidebarMinimized]);
+
+  return pageProps?.user ? (
+    <Layout user={pageProps.user} entities={entities} refreshPage={loading}>
+      {loading ? <UserProfileSkeleton /> : <Component {...pageProps} />}
+    </Layout>
+  ) : (
+    <Component {...pageProps} />
+  );
 }

src/pages/api/evaluate/fetchSolutions.ts

@@ -4,21 +4,71 @@ import { withIronSessionApiRoute } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
 import { UserSolution } from "@/interfaces/exam";
 import { speakingReverseMarking, writingReverseMarking } from "@/utils/score";
+import { Stat } from "@/interfaces/user";
 
 const db = client.db(process.env.MONGODB_DB);
 
 export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
-    if (req.method === "POST") return post(req, res);
-}
-
-async function post(req: NextApiRequest, res: NextApiResponse) {
     if (!req.session.user) {
         res.status(401).json({ ok: false });
         return;
     }
-    const { sessionId, userId, userSolutions } = req.body;
+    try {
+        return await getSessionEvals(req, res);
+    } catch (error) {
+        console.error(error);
+        res.status(500).json({ ok: false });
+    }
+}
+
+function formatSolutionWithEval(userSolution: UserSolution | Stat, evaluation: any) {
+    if (userSolution.type === 'writing') {
+        return {
+            ...userSolution,
+            solutions: [{
+                ...userSolution.solutions[0],
+                evaluation: evaluation.result
+            }],
+            score: {
+                correct: writingReverseMarking[evaluation.result.overall],
+                total: 100,
+                missing: 0
+            },
+            isDisabled: false
+        };
+    }
+
+    if (userSolution.type === 'speaking' || userSolution.type === 'interactiveSpeaking') {
+        return {
+            ...userSolution,
+            solutions: [{
+                ...userSolution.solutions[0],
+                ...(
+                    userSolution.type === 'speaking'
+                        ? { fullPath: evaluation.result.fullPath }
+                        : { answer: evaluation.result.answer }
+                ),
+                evaluation: evaluation.result
+            }],
+            score: {
+                correct: speakingReverseMarking[evaluation.result.overall || 0] || 0,
+                total: 100,
+                missing: 0
+            },
+            isDisabled: false
+        };
+    }
+
+    return {
+        solution: userSolution,
+        evaluation
+    };
+}
+
+async function getSessionEvals(req: NextApiRequest, res: NextApiResponse) {
+    const { sessionId, userId, stats } = req.body;
     const completedEvals = await db.collection("evaluation").find({
         session_id: sessionId,
         user: userId,
@@ -29,52 +79,11 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
         completedEvals.map(e => [e.exercise_id, e])
     );
 
-    const solutionsWithEvals = userSolutions.filter((solution: UserSolution) =>
-        evalsByExercise.has(solution.exercise)
-    ).map((solution: any) => {
-        const evaluation = evalsByExercise.get(solution.exercise)!;
+    const statsWithEvals = stats
+        .filter((solution: UserSolution | Stat) => evalsByExercise.has(solution.exercise))
+        .map((solution: UserSolution | Stat) =>
+            formatSolutionWithEval(solution, evalsByExercise.get(solution.exercise)!)
+        );
 
-        if (solution.type === 'writing') {
-            return {
-                ...solution,
-                solutions: [{
-                    ...solution.solutions[0],
-                    evaluation: evaluation.result
-                }],
-                score: {
-                    correct: writingReverseMarking[evaluation.result.overall],
-                    total: 100,
-                    missing: 0
-                },
-                isDisabled: false
-            };
-        }
-
-        if (solution.type === 'speaking' || solution.type === 'interactiveSpeaking') {
-            return {
-                ...solution,
-                solutions: [{
-                    ...solution.solutions[0],
-                    ...(
-                        solution.type === 'speaking'
-                            ? { fullPath: evaluation.result.fullPath }
-                            : { answer: evaluation.result.answer }
-                    ),
-                    evaluation: evaluation.result
-                }],
-                score: {
-                    correct: speakingReverseMarking[evaluation.result.overall || 0] || 0,
-                    total: 100,
-                    missing: 0
-                },
-                isDisabled: false
-            };
-        }
-        return {
-            solution,
-            evaluation
-        };
-    });
-
-    res.status(200).json(solutionsWithEvals)
+    res.status(200).json(statsWithEvals);
 }

src/pages/api/evaluate/status.ts

@@ -11,19 +11,100 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
     if (req.method === "GET") return get(req, res);
 }
 
+type Query = {
+    op: string;
+    sessionId: string;
+    userId: string;
+}
+
 async function get(req: NextApiRequest, res: NextApiResponse) {
     if (!req.session.user) {
-        res.status(401).json({ ok: false });
-        return;
+        return res.status(401).json({ ok: false });
     }
 
-    const { sessionId, userId } = req.query;
+    const { sessionId, userId, op } = req.query as Query;
 
+    switch (op) {
+        case 'pending':
+            return getPendingEvaluation(userId, sessionId, res);
+        case 'disabled':
+            return getSessionsWIthDisabledWithPending(userId, res);
+        default:
+            return res.status(400).json({
+                ok: false,
+            });
+    }
+}
+
+async function getPendingEvaluation(
+    userId: string,
+    sessionId: string,
+    res: NextApiResponse
+) {
     const singleEval = await db.collection("evaluation").findOne({
         session_id: sessionId,
         user: userId,
         status: "pending",
     });
-
-    res.status(200).json({ hasPendingEvaluation: singleEval !== null});
+    return res.status(200).json({ hasPendingEvaluation: singleEval !== null });
+}
+
+async function getSessionsWIthDisabledWithPending(
+    userId: string,
+    res: NextApiResponse
+) {
+    const sessions = await db.collection("stats")
+        .aggregate([
+            {
+                $match: {
+                    user: userId,
+                    disabled: true
+                }
+            },
+            {
+                $project: {
+                    _id: 0,
+                    session: 1
+                }
+            },
+            {
+                $lookup: {
+                    from: "evaluation",
+                    let: { sessionId: "$session" },
+                    pipeline: [
+                        {
+                            $match: {
+                                $expr: {
+                                    $and: [
+                                        { $eq: ["$session", "$$sessionId"] },
+                                        { $eq: ["$user", userId] },
+                                        { $eq: ["$status", "pending"] }
+                                    ]
+                                }
+                            }
+                        },
+                        {
+                            $project: {
+                                _id: 1
+                            }
+                        }
+                    ],
+                    as: "pendingEvals"
+                }
+            },
+            {
+                $match: {
+                    "pendingEvals.0": { $exists: true }
+                }
+            },
+            {
+                $group: {
+                    id: "$session"
+                }
+            }
+        ]).toArray();
+
+    return res.status(200).json({
+        sessions: sessions.map(s => s.id)
+    });
 }

src/pages/api/stats/disabled.ts

@@ -3,37 +3,41 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import client from "@/lib/mongodb";
 import { withIronSessionApiRoute } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
-import { Stat } from "@/interfaces/user";
 import { requestUser } from "@/utils/api";
 import { UserSolution } from "@/interfaces/exam";
+import { WithId } from "mongodb";
 
 const db = client.db(process.env.MONGODB_DB);
 
 export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
-    if (req.method === "POST") return post(req, res);
-}
-
-interface Body {
-    solutions: UserSolution[];
-    sessionID: string;
-}
-
-async function post(req: NextApiRequest, res: NextApiResponse) {
     const user = await requestUser(req, res)
     if (!user) return res.status(401).json({ ok: false });
 
-    const { solutions, sessionID } = req.body as Body;
+    if (req.method === "POST") return post(req, res);
+}
 
-    const disabledStats = await db.collection("stats").find({ user: user.id, session: sessionID, disabled: true }).toArray();
+
+interface Body {
+    solutions: UserSolution[];
+    sessionId: string;
+    userId: string;
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+    const { userId, solutions, sessionId } = req.body as Body;
+    const disabledStats = await db.collection("stats").find(
+        { user: userId, session: sessionId, isDisabled: true }
+    ).toArray();
 
     await Promise.all(disabledStats.map(async (stat) => {
         const matchingSolution = solutions.find(s => s.exercise === stat.exercise);
         if (matchingSolution) {
+            const { _id, ...updateFields } = matchingSolution as WithId<UserSolution>;
             await db.collection("stats").updateOne(
                 { id: stat.id },
-                { $set: { ...matchingSolution } }
+                { $set: { ...updateFields } }
             );
         }
     }));

src/pages/api/stats/session/[session].ts

@@ -0,0 +1,21 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type {NextApiRequest, NextApiResponse} from "next";
+import client from "@/lib/mongodb";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+
+const db = client.db(process.env.MONGODB_DB);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	const {session} = req.query;
+	const snapshot = await db.collection("stats").find({ user: req.session.user.id, session }).toArray();
+
+	res.status(200).json(snapshot);
+}

src/pages/api/stats/user/[user].ts

@@ -1,24 +1,20 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type {NextApiRequest, NextApiResponse} from "next";
-import client from "@/lib/mongodb";
-import {withIronSessionApiRoute} from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { getDetailedStatsByUser } from "../../../../utils/stats.be";
 
-const db = client.db(process.env.MONGODB_DB);
 
 export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
 	if (!req.session.user) {
-		res.status(401).json({ok: false});
+		res.status(401).json({ ok: false });
 		return;
 	}
 
-	const {user} = req.query;
-	const snapshot = await db.collection("stats").aggregate([
-		{ $match: { user: user } },
-		{ $sort: { "date": 1 } }
-	  ]).toArray();
+	const { user, query } = req.query as { user: string, query?: string };
 
+	const snapshot = await getDetailedStatsByUser(user, query);
 	res.status(200).json(snapshot);
 }

src/pages/assignments/[id].tsx

@@ -1,15 +1,12 @@
 import Button from "@/components/Low/Button";
 import ProgressBar from "@/components/Low/ProgressBar";
-import Modal from "@/components/Modal";
-import useUsers from "@/hooks/useUsers";
 import { Grading, Module } from "@/interfaces";
 import { Assignment } from "@/interfaces/results";
-import { Group, Stat, User } from "@/interfaces/user";
+import { Stat, User } from "@/interfaces/user";
 import useExamStore from "@/stores/exam";
 import { getExamById } from "@/utils/exams";
 import { sortByModule } from "@/utils/moduleUtils";
 import { calculateBandScore, getGradingLabel } from "@/utils/score";
-import { convertToUserSolutions } from "@/utils/stats";
 import { getUserName } from "@/utils/users";
 import axios from "axios";
 import clsx from "clsx";
@@ -23,13 +20,11 @@ import { withIronSessionSsr } from "iron-session/next";
 import { checkAccess, doesEntityAllow } from "@/utils/permissions";
 import { mapBy, redirect, serialize } from "@/utils";
 import { getAssignment } from "@/utils/assignments.be";
-import { getEntitiesUsers, getEntityUsers, getUsers } from "@/utils/users.be";
-import { getEntitiesWithRoles, getEntityWithRoles } from "@/utils/entities.be";
-import { getGroups, getGroupsByEntities, getGroupsByEntity } from "@/utils/groups.be";
+import {  getEntityUsers, getUsers } from "@/utils/users.be";
+import {  getEntityWithRoles } from "@/utils/entities.be";
 import { sessionOptions } from "@/lib/session";
 import { EntityWithRoles } from "@/interfaces/entity";
 import Head from "next/head";
-import Layout from "@/components/High/Layout";
 import Separator from "@/components/Low/Separator";
 import Link from "next/link";
 import { requestUser } from "@/utils/api";
@@ -353,7 +348,7 @@ export default function AssignmentView({ user, users, entity, assignment, gradin
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-			<Layout user={user}>
+			<>
 				<div className="flex flex-col gap-4">
 					<div className="w-full flex items-center justify-between">
 						<div className="flex items-center gap-2">
@@ -466,7 +461,7 @@ export default function AssignmentView({ user, users, entity, assignment, gradin
 						</Button>
 					</div>
 				</div>
-			</Layout>
+			</>
 		</>
 	);
 }

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

@@ -1,4 +1,3 @@
-import Layout from "@/components/High/Layout";
 import Button from "@/components/Low/Button";
 import Checkbox from "@/components/Low/Checkbox";
 import Input from "@/components/Low/Input";
@@ -212,7 +211,7 @@ export default function AssignmentsPage({ assignment, user, users, entities, gro
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-			<Layout user={user}>
+			<>
 				<div className="flex flex-col gap-4">
 					<div className="flex items-center gap-2">
 						<Link href="/assignments" className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
@@ -589,7 +588,7 @@ export default function AssignmentsPage({ assignment, user, users, entities, gro
 						</Button>
 					</div>
 				</div>
-			</Layout>
+			</>
 		</>
 	);
 }

src/pages/assignments/creator/index.tsx

@@ -1,4 +1,3 @@
-import Layout from "@/components/High/Layout";
 import Button from "@/components/Low/Button";
 import Checkbox from "@/components/Low/Checkbox";
 import Input from "@/components/Low/Input";
@@ -170,7 +169,7 @@ export default function AssignmentsPage({ user, users, groups, entities }: Props
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-			<Layout user={user}>
+			<>
 				<div className="flex flex-col gap-4">
 					<div className="flex items-center gap-2">
 						<Link href="/assignments" className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
@@ -528,7 +527,7 @@ export default function AssignmentsPage({ user, users, groups, entities }: Props
 						</Button>
 					</div>
 				</div>
-			</Layout>
+			</>
 		</>
 	);
 }

src/pages/assignments/index.tsx

@@ -1,15 +1,12 @@
-import Layout from "@/components/High/Layout";
 import Separator from "@/components/Low/Separator";
 import AssignmentCard from "@/components/AssignmentCard";
-import AssignmentView from "@/components/AssignmentView";
 import { useAllowedEntities } from "@/hooks/useEntityPermissions";
 import { useListSearch } from "@/hooks/useListSearch";
 import usePagination from "@/hooks/usePagination";
 import { EntityWithRoles } from "@/interfaces/entity";
 import { Assignment } from "@/interfaces/results";
-import { CorporateUser, Group, User } from "@/interfaces/user";
+import {  User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
-import { getUserCompanyName } from "@/resources/user";
 import { findBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import {
@@ -21,15 +18,13 @@ import {
 } from "@/utils/assignments";
 import { getAssignments, getEntitiesAssignments } from "@/utils/assignments.be";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
-import { getGroups, getGroupsByEntities } from "@/utils/groups.be";
 import { checkAccess, findAllowedEntities } from "@/utils/permissions";
 import { getEntitiesUsers, getUsers } from "@/utils/users.be";
 import { withIronSessionSsr } from "iron-session/next";
-import { groupBy } from "lodash";
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import { BsChevronLeft, BsPlus } from "react-icons/bs";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
@@ -98,7 +93,7 @@ export default function AssignmentsPage({ assignments, entities, user, users }:
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-			<Layout user={user}>
+			<>
 				<div className="flex flex-col gap-4">
 					<div className="flex items-center gap-2">
 						<Link href="/dashboard" className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
@@ -223,7 +218,7 @@ export default function AssignmentsPage({ assignments, entities, user, users }:
 						))}
 					</div>
 				</section>
-			</Layout>
+			</>
 		</>
 	);
 }

src/pages/classrooms/[id].tsx

@@ -1,5 +1,4 @@
 /* eslint-disable @next/next/no-img-element */
-import Layout from "@/components/High/Layout";
 import Tooltip from "@/components/Low/Tooltip";
 import { useEntityPermission } from "@/hooks/useEntityPermissions";
 import { useListSearch } from "@/hooks/useListSearch";
@@ -183,7 +182,7 @@ export default function Home({ user, group, users, entity }: Props) {
 			</Head>
 			<ToastContainer />
 			{user && (
-				<Layout user={user}>
+				<>
 					<section className="flex flex-col gap-0">
 						<div className="flex items-center justify-between">
 							<div className="flex flex-col gap-3">
@@ -339,7 +338,7 @@ export default function Home({ user, group, users, entity }: Props) {
 							</button>
 						))}
 					</section>
-				</Layout>
+				</>
 			)}
 		</>
 	);

src/pages/classrooms/create.tsx

@@ -1,19 +1,18 @@
 /* eslint-disable @next/next/no-img-element */
-import Layout from "@/components/High/Layout";
 import Input from "@/components/Low/Input";
 import Select from "@/components/Low/Select";
 import Tooltip from "@/components/Low/Tooltip";
 import {useListSearch} from "@/hooks/useListSearch";
 import usePagination from "@/hooks/usePagination";
-import {Entity, EntityWithRoles} from "@/interfaces/entity";
+import {EntityWithRoles} from "@/interfaces/entity";
 import {User} from "@/interfaces/user";
 import {sessionOptions} from "@/lib/session";
 import {USER_TYPE_LABELS} from "@/resources/user";
 import {filterBy, mapBy, redirect, serialize} from "@/utils";
-import {getEntities, getEntitiesWithRoles} from "@/utils/entities.be";
+import { getEntitiesWithRoles} from "@/utils/entities.be";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import {getUserName, isAdmin} from "@/utils/users";
-import {getEntitiesUsers, getLinkedUsers} from "@/utils/users.be";
+import {getEntitiesUsers} from "@/utils/users.be";
 import axios from "axios";
 import clsx from "clsx";
 import {withIronSessionSsr} from "iron-session/next";
@@ -102,7 +101,7 @@ export default function Home({user, users, entities}: Props) {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<ToastContainer />
-			<Layout user={user}>
+			<>
 				<section className="flex flex-col gap-0">
 					<div className="flex gap-3 justify-between">
 						<div className="flex items-center gap-2">
@@ -217,7 +216,7 @@ export default function Home({user, users, entities}: Props) {
 						</button>
 					))}
 				</section>
-			</Layout>
+			</>
 		</>
 	);
 }

src/pages/classrooms/index.tsx

@@ -3,7 +3,6 @@ import Head from "next/head";
 import { withIronSessionSsr } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
 import { ToastContainer } from "react-toastify";
-import Layout from "@/components/High/Layout";
 import { GroupWithUsers, User } from "@/interfaces/user";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getUserName, isAdmin } from "@/utils/users";
@@ -11,13 +10,13 @@ import { convertToUsers, getGroupsForEntities } from "@/utils/groups.be";
 import { getSpecificUsers } from "@/utils/users.be";
 import Link from "next/link";
 import { uniq } from "lodash";
-import { BsFillMortarboardFill, BsPlus } from "react-icons/bs";
+import { BsPlus } from "react-icons/bs";
 import CardList from "@/components/High/CardList";
 import Separator from "@/components/Low/Separator";
 import { findBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { findAllowedEntities } from "@/utils/permissions";
-import { getEntities, getEntitiesWithRoles } from "@/utils/entities.be";
+import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { useAllowedEntities } from "@/hooks/useEntityPermissions";
 import { EntityWithRoles } from "@/interfaces/entity";
 import { FaPersonChalkboard } from "react-icons/fa6";
@@ -122,7 +121,7 @@ export default function Home({ user, groups, entities }: Props) {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<ToastContainer />
-			<Layout user={user} className="!gap-4">
+			<>
 				<section className="flex flex-col gap-4 w-full h-full">
 					<Modal isOpen={showImport} onClose={() => setShowImport(false)} maxWidth="max-w-[85%]">
 						<StudentClassroomTransfer user={user} entities={entities} onFinish={() => setShowImport(false)} />
@@ -153,7 +152,7 @@ export default function Home({ user, groups, entities }: Props) {
 						firstCard={entitiesAllowCreate.length === 0 ? undefined : firstCard}
 					/>
 				</section>
-			</Layout>
+			</>
 		</>
 	);
 }

src/pages/dashboard/admin.tsx

@@ -1,191 +1,220 @@
 /* eslint-disable @next/next/no-img-element */
-import Layout from "@/components/High/Layout";
 import UserDisplayList from "@/components/UserDisplayList";
 import IconCard from "@/components/IconCard";
 import { EntityWithRoles } from "@/interfaces/entity";
-import { Assignment } from "@/interfaces/results";
-import { Group, Stat, Type, User } from "@/interfaces/user";
+import { Stat, Type, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
-import { dateSorter, filterBy, mapBy, redirect, serialize } from "@/utils";
+import {  filterBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
-import { countEntitiesAssignments, getAssignments } from "@/utils/assignments.be";
-import { getEntitiesWithRoles } from "@/utils/entities.be";
-import { countGroups, getGroups } from "@/utils/groups.be";
+import {
+  countEntitiesAssignments,
+} from "@/utils/assignments.be";
+import { getEntities } from "@/utils/entities.be";
+import { countGroups } from "@/utils/groups.be";
 import { checkAccess } from "@/utils/permissions";
-import { calculateAverageLevel, calculateBandScore } from "@/utils/score";
 import { groupByExam } from "@/utils/stats";
 import { getStatsByUsers } from "@/utils/stats.be";
-import { countUsers, getUser, getUsers } from "@/utils/users.be";
+import {
+  countUsersByTypes,
+  getUsers,
+} from "@/utils/users.be";
 import { withIronSessionSsr } from "iron-session/next";
-import { uniqBy } from "lodash";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { useMemo } from "react";
 import {
-	BsBank,
-	BsClipboard2Data,
-	BsEnvelopePaper,
-	BsPencilSquare,
-	BsPeople,
-	BsPeopleFill,
-	BsPersonFill,
-	BsPersonFillGear,
+  BsBank,
+  BsEnvelopePaper,
+  BsPencilSquare,
+  BsPeople,
+  BsPeopleFill,
+  BsPersonFill,
+  BsPersonFillGear,
 } from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 
 interface Props {
-	user: User;
-	students: User[];
-	latestStudents: User[]
-	latestTeachers: User[]
-	entities: EntityWithRoles[];
-	usersCount: { [key in Type]: number }
-	assignmentsCount: number;
-	stats: Stat[];
-	groupsCount: number;
+  user: User;
+  students: User[];
+  latestStudents: User[];
+  latestTeachers: User[];
+  entities: EntityWithRoles[];
+  usersCount: { [key in Type]: number };
+  assignmentsCount: number;
+  stats: Stat[];
+  groupsCount: number;
 }
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user || !user.isVerified) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user || !user.isVerified) return redirect("/login");
 
-	if (!checkAccess(user, ["admin", "developer"])) return redirect("/")
+  if (!checkAccess(user, ["admin", "developer"])) return redirect("/");
 
-	const students = await getUsers({ type: 'student' });
-	const usersCount = {
-		student: await countUsers({ type: "student" }),
-		teacher: await countUsers({ type: "teacher" }),
-		corporate: await countUsers({ type: "corporate" }),
-		mastercorporate: await countUsers({ type: "mastercorporate" }),
-	}
+  const students = await getUsers(
+    { type: "student" },
+    10,
+    {
+      averageLevel: -1,
+    },
+    { id: 1, name: 1, email: 1, profilePicture: 1 }
+  );
 
-	const latestStudents = await getUsers({ type: 'student' }, 10, { registrationDate: -1 })
-	const latestTeachers = await getUsers({ type: 'teacher' }, 10, { registrationDate: -1 })
+  const usersCount = await countUsersByTypes([
+    "student",
+    "teacher",
+    "corporate",
+    "mastercorporate",
+  ]);
 
-	const entities = await getEntitiesWithRoles();
-	const assignmentsCount = await countEntitiesAssignments(mapBy(entities, 'id'), { archived: { $ne: true } });
-	const groupsCount = await countGroups();
+  const latestStudents = await getUsers(
+    { type: "student" },
+    10,
+    {
+      registrationDate: -1,
+    },
+    { id: 1, name: 1, email: 1, profilePicture: 1 }
+  );
+  const latestTeachers = await getUsers(
+    { type: "teacher" },
+    10,
+    {
+      registrationDate: -1,
+    },
+    { id: 1, name: 1, email: 1, profilePicture: 1 }
+  );
 
-	const stats = await getStatsByUsers(mapBy(students, 'id'));
+  const entities = await getEntities(undefined, { _id: 0, id: 1, label: 1 });
 
-	return { props: serialize({ user, students, latestStudents, latestTeachers, usersCount, entities, assignmentsCount, stats, groupsCount }) };
+  const assignmentsCount = await countEntitiesAssignments(
+    mapBy(entities, "id"),
+    { archived: { $ne: true } }
+  );
+
+  const groupsCount = await countGroups();
+
+  const stats = await getStatsByUsers(mapBy(students, "id"));
+
+  return {
+    props: serialize({
+      user,
+      students,
+      latestStudents,
+      latestTeachers,
+      usersCount,
+      entities,
+      assignmentsCount,
+      stats,
+      groupsCount,
+    }),
+  };
 }, sessionOptions);
 
 export default function Dashboard({
-	user,
-	students,
-	latestStudents,
-	latestTeachers,
-	usersCount,
-	entities,
-	assignmentsCount,
-	stats,
-	groupsCount
+  user,
+  students,
+  latestStudents,
+  latestTeachers,
+  usersCount,
+  entities,
+  assignmentsCount,
+  stats,
+  groupsCount,
 }: Props) {
-	const router = useRouter();
+  const router = useRouter();
 
-	return (
-		<>
-			<Head>
-				<title>EnCoach</title>
-				<meta
-					name="description"
-					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
-				/>
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
-				<link rel="icon" href="/favicon.ico" />
-			</Head>
-			<ToastContainer />
-			<Layout user={user}>
-				<section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
-					<IconCard
-						onClick={() => router.push("/users?type=student")}
-						Icon={BsPersonFill}
-						label="Students"
-						value={usersCount.student}
-						color="purple"
-					/>
-					<IconCard
-						onClick={() => router.push("/users?type=teacher")}
-						Icon={BsPencilSquare}
-						label="Teachers"
-						value={usersCount.teacher}
-						color="purple"
-					/>
-					<IconCard
-						Icon={BsBank}
-						onClick={() => router.push("/users?type=corporate")}
-						label="Corporates"
-						value={usersCount.corporate}
-						color="purple"
-					/>
-					<IconCard
-						Icon={BsBank}
-						onClick={() => router.push("/users?type=mastercorporate")}
-						label="Master Corporates"
-						value={usersCount.mastercorporate}
-						color="purple"
-					/>
-					<IconCard
-						Icon={BsPeople}
-						onClick={() => router.push("/classrooms")}
-						label="Classrooms"
-						value={groupsCount}
-						color="purple"
-					/>
-					<IconCard Icon={BsPeopleFill}
-						onClick={() => router.push("/entities")}
-						label="Entities"
-						value={entities.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={usersCount.student}
-						color="purple"
-					/>
-					<IconCard
-						Icon={BsEnvelopePaper}
-						onClick={() => router.push("/assignments")}
-						label="Assignments"
-						value={assignmentsCount}
-						color="purple"
-					/>
-				</section>
+  return (
+    <>
+      <Head>
+        <title>EnCoach</title>
+        <meta
+          name="description"
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <ToastContainer />
+      <>
+        <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={usersCount.student}
+            color="purple"
+          />
+          <IconCard
+            onClick={() => router.push("/users?type=teacher")}
+            Icon={BsPencilSquare}
+            label="Teachers"
+            value={usersCount.teacher}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsBank}
+            onClick={() => router.push("/users?type=corporate")}
+            label="Corporates"
+            value={usersCount.corporate}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsBank}
+            onClick={() => router.push("/users?type=mastercorporate")}
+            label="Master Corporates"
+            value={usersCount.mastercorporate}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsPeople}
+            onClick={() => router.push("/classrooms")}
+            label="Classrooms"
+            value={groupsCount}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsPeopleFill}
+            onClick={() => router.push("/entities")}
+            label="Entities"
+            value={entities.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={usersCount.student}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsEnvelopePaper}
+            onClick={() => router.push("/assignments")}
+            label="Assignments"
+            value={assignmentsCount}
+            color="purple"
+          />
+        </section>
 
-				<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
-					<UserDisplayList
-						users={latestStudents}
-						title="Latest Students"
-					/>
-					<UserDisplayList
-						users={latestTeachers}
-						title="Latest Teachers"
-					/>
-					<UserDisplayList
-						users={students.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))}
-						title="Highest level students"
-					/>
-					<UserDisplayList
-						users={
-							students
-								.sort(
-									(a, b) =>
-										Object.keys(groupByExam(filterBy(stats, "user", b))).length -
-										Object.keys(groupByExam(filterBy(stats, "user", a))).length,
-								)
-						}
-						title="Highest exam count students"
-					/>
-				</section>
-			</Layout>
-		</>
-	);
+        <section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
+          <UserDisplayList users={latestStudents} title="Latest Students" />
+          <UserDisplayList users={latestTeachers} title="Latest Teachers" />
+          <UserDisplayList users={students} title="Highest level students" />
+          <UserDisplayList
+            users={students.sort(
+              (a, b) =>
+                Object.keys(groupByExam(filterBy(stats, "user", b))).length -
+                Object.keys(groupByExam(filterBy(stats, "user", a))).length
+            )}
+            title="Highest exam count students"
+          />
+        </section>
+      </>
+    </>
+  );
 }

src/pages/dashboard/corporate.tsx

@@ -1,194 +1,265 @@
 /* eslint-disable @next/next/no-img-element */
-import Layout from "@/components/High/Layout";
 import UserDisplayList from "@/components/UserDisplayList";
 import IconCard from "@/components/IconCard";
 import { EntityWithRoles } from "@/interfaces/entity";
 import { Stat, StudentUser, Type, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
-import { dateSorter, filterBy, mapBy, redirect, serialize } from "@/utils";
+import { filterBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { countEntitiesAssignments } from "@/utils/assignments.be";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { countGroupsByEntities } from "@/utils/groups.be";
-import { checkAccess, findAllowedEntities } from "@/utils/permissions";
-import { calculateAverageLevel } from "@/utils/score";
+import {
+  checkAccess,
+  groupAllowedEntitiesByPermissions,
+} from "@/utils/permissions";
 import { groupByExam } from "@/utils/stats";
-import { getStatsByUsers } from "@/utils/stats.be";
-import { countAllowedUsers, filterAllowedUsers, getUsers } from "@/utils/users.be";
+import {
+  countAllowedUsers,
+  getUsers,
+} from "@/utils/users.be";
 import { withIronSessionSsr } from "iron-session/next";
-import { uniqBy } from "lodash";
 import moment from "moment";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useMemo } from "react";
 import {
-	BsClipboard2Data,
-	BsClock,
-	BsEnvelopePaper,
-	BsPencilSquare,
-	BsPeople,
-	BsPeopleFill,
-	BsPersonFill,
-	BsPersonFillGear,
+  BsClock,
+  BsEnvelopePaper,
+  BsPencilSquare,
+  BsPeople,
+  BsPeopleFill,
+  BsPersonFill,
+  BsPersonFillGear,
 } from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 import { useAllowedEntities } from "@/hooks/useEntityPermissions";
 import { isAdmin } from "@/utils/users";
 
 interface Props {
-	user: User;
-	students: StudentUser[]
-	latestStudents: User[]
-	latestTeachers: User[]
-	userCounts: { [key in Type]: number }
-	entities: EntityWithRoles[];
-	assignmentsCount: number;
-	stats: Stat[];
-	groupsCount: number;
+  user: User;
+  students: StudentUser[];
+  latestStudents: User[];
+  latestTeachers: User[];
+  userCounts: { [key in Type]: number };
+  entities: EntityWithRoles[];
+  assignmentsCount: number;
+  stats: Stat[];
+  groupsCount: number;
 }
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user || !user.isVerified) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user || !user.isVerified) return redirect("/login");
 
-	if (!checkAccess(user, ["admin", "developer", "corporate"])) return redirect("/")
+  if (!checkAccess(user, ["admin", "developer", "corporate"]))
+    return redirect("/");
 
-	const entityIDS = mapBy(user.entities, "id") || [];
-	const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS);
+  const entityIDS = mapBy(user.entities, "id") || [];
+  const entities = await getEntitiesWithRoles(
+    isAdmin(user) ? undefined : entityIDS
+  );
 
-	const allowedStudentEntities = findAllowedEntities(user, entities, "view_students")
-	const allowedTeacherEntities = findAllowedEntities(user, entities, "view_teachers")
+  const {
+    ["view_students"]: allowedStudentEntities,
+    ["view_teachers"]: allowedTeacherEntities,
+  } = groupAllowedEntitiesByPermissions(user, entities, [
+    "view_students",
+    "view_teachers",
+  ]);
 
-	const students =
-		await getUsers({ type: 'student', "entities.id": { $in: mapBy(allowedStudentEntities, 'id') } }, 10, { averageLevel: -1 });
-	const latestStudents =
-		await getUsers({ type: 'student', "entities.id": { $in: mapBy(allowedStudentEntities, 'id') } }, 10, { registrationDate: -1 })
-	const latestTeachers =
-		await getUsers({ type: 'teacher', "entities.id": { $in: mapBy(allowedTeacherEntities, 'id') } }, 10, { registrationDate: -1 })
+	const allowedStudentEntitiesIDS = mapBy(allowedStudentEntities, "id");
+	const entitiesIDS = mapBy(entities, "id") || [];
 
-	const userCounts = await countAllowedUsers(user, entities)
-	const assignmentsCount = await countEntitiesAssignments(mapBy(entities, "id"), { archived: { $ne: true } });
-	const groupsCount = await countGroupsByEntities(mapBy(entities, "id"));
 
-	return { props: serialize({ user, students, latestStudents, latestTeachers, userCounts, entities, assignmentsCount, groupsCount }) };
+  const students = await getUsers(
+    { type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
+    10,
+    { averageLevel: -1 },
+    { id: 1, name: 1, email: 1, profilePicture: 1 }
+  );
+  const latestStudents = await getUsers(
+    { type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
+    10,
+    { registrationDate: -1 },
+    { id: 1, name: 1, email: 1, profilePicture: 1 }
+  );
+  const latestTeachers = await getUsers(
+    {
+      type: "teacher",
+      "entities.id": { $in: mapBy(allowedTeacherEntities, "id") },
+    },
+    10,
+    { registrationDate: -1 },
+    { id: 1, name: 1, email: 1, profilePicture: 1 }
+  );
+	
+	const userCounts = await countAllowedUsers(user, entities);
+	
+  const assignmentsCount = await countEntitiesAssignments(
+	entitiesIDS,
+    { archived: { $ne: true } }
+	);
+	
+  const groupsCount = await countGroupsByEntities(entitiesIDS);
+
+  return {
+    props: serialize({
+      user,
+      students,
+      latestStudents,
+      latestTeachers,
+      userCounts,
+      entities,
+      assignmentsCount,
+      groupsCount,
+    }),
+  };
 }, sessionOptions);
 
-export default function Dashboard({ user, students, latestStudents, latestTeachers, userCounts, entities, assignmentsCount, stats = [], groupsCount }: Props) {
-	const totalCount = useMemo(() =>
-		userCounts.corporate + userCounts.mastercorporate + userCounts.student + userCounts.teacher, [userCounts])
-	const totalLicenses = useMemo(() => entities.reduce((acc, curr) => acc + parseInt(curr.licenses.toString()), 0), [entities])
-
-	const allowedEntityStatistics = useAllowedEntities(user, entities, 'view_entity_statistics')
-	const allowedStudentPerformance = useAllowedEntities(user, entities, 'view_student_performance')
-
-	const router = useRouter();
-
-	return (
-		<>
-			<Head>
-				<title>EnCoach</title>
-				<meta
-					name="description"
-					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
-				/>
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
-				<link rel="icon" href="/favicon.ico" />
-			</Head>
-			<ToastContainer />
-			<Layout user={user}>
-				<div className="w-full flex flex-col gap-4">
-					{entities.length > 0 && (
-						<div className="w-fit self-end bg-neutral-200 px-2 rounded-lg py-1">
-							<b>{mapBy(entities, "label")?.join(", ")}</b>
-						</div>
-					)}
-					<section className="grid grid-cols-5 -md:grid-cols-2 place-items-center gap-4 text-center">
-						<IconCard
-							onClick={() => router.push("/users?type=student")}
-							Icon={BsPersonFill}
-							label="Students"
-							value={userCounts.student}
-							color="purple"
-						/>
-						<IconCard
-							onClick={() => router.push("/users?type=teacher")}
-							Icon={BsPencilSquare}
-							label="Teachers"
-							value={userCounts.teacher}
-							color="purple"
-						/>
-						<IconCard
-							onClick={() => router.push("/classrooms")}
-							Icon={BsPeople}
-							label="Classrooms"
-							value={groupsCount}
-							color="purple"
-						/>
-						<IconCard Icon={BsPeopleFill}
-							onClick={() => router.push("/entities")}
-							label="Entities"
-							value={`${entities.length} - ${totalCount}/${totalLicenses}`}
-							color="purple"
-						/>
-						{allowedEntityStatistics.length > 0 && (
-							<IconCard Icon={BsPersonFillGear}
-								onClick={() => router.push("/statistical")}
-								label="Entity Statistics"
-								value={allowedEntityStatistics.length}
-								color="purple"
-							/>
-						)}
-						{allowedStudentPerformance.length > 0 && (
-							<IconCard Icon={BsPersonFillGear}
-								onClick={() => router.push("/users/performance")}
-								label="Student Performance"
-								value={userCounts.student}
-								color="purple"
-							/>
-						)}
-						<IconCard
-							Icon={BsClock}
-							label="Expiration Date"
-							value={user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy") : "Unlimited"}
-							color="rose"
-						/>
-						<IconCard
-							Icon={BsEnvelopePaper}
-							className="col-span-2"
-							onClick={() => router.push("/assignments")}
-							label="Assignments"
-							value={assignmentsCount}
-							color="purple"
-						/>
-					</section>
-				</div>
-
-				<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
-					<UserDisplayList
-						users={latestStudents}
-						title="Latest Students"
-					/>
-					<UserDisplayList
-						users={latestTeachers}
-						title="Latest Teachers"
-					/>
-					<UserDisplayList
-						users={students}
-						title="Highest level students"
-					/>
-					<UserDisplayList
-						users={
-							students
-								.sort(
-									(a, b) =>
-										Object.keys(groupByExam(filterBy(stats, "user", b))).length -
-										Object.keys(groupByExam(filterBy(stats, "user", a))).length,
-								)
-						}
-						title="Highest exam count students"
-					/>
-				</section>
-			</Layout>
-		</>
+export default function Dashboard({
+  user,
+  students,
+  latestStudents,
+  latestTeachers,
+  userCounts,
+  entities,
+  assignmentsCount,
+  stats = [],
+  groupsCount,
+}: Props) {
+  const totalCount = useMemo(
+    () =>
+      userCounts.corporate +
+      userCounts.mastercorporate +
+      userCounts.student +
+      userCounts.teacher,
+    [userCounts]
 	);
+	
+  const totalLicenses = useMemo(
+    () =>
+      entities.reduce(
+        (acc, curr) => acc + parseInt(curr.licenses.toString()),
+        0
+      ),
+    [entities]
+  );
+
+  const allowedEntityStatistics = useAllowedEntities(
+    user,
+    entities,
+    "view_entity_statistics"
+  );
+  const allowedStudentPerformance = useAllowedEntities(
+    user,
+    entities,
+    "view_student_performance"
+  );
+
+  const router = useRouter();
+
+  return (
+    <>
+      <Head>
+        <title>EnCoach</title>
+        <meta
+          name="description"
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <ToastContainer />
+      <>
+        <div className="w-full flex flex-col gap-4">
+          {entities.length > 0 && (
+            <div className="w-fit self-end bg-neutral-200 px-2 rounded-lg py-1">
+              <b>{mapBy(entities, "label")?.join(", ")}</b>
+            </div>
+          )}
+          <section className="grid grid-cols-5 -md:grid-cols-2 place-items-center gap-4 text-center">
+            <IconCard
+              onClick={() => router.push("/users?type=student")}
+              Icon={BsPersonFill}
+              label="Students"
+              value={userCounts.student}
+              color="purple"
+            />
+            <IconCard
+              onClick={() => router.push("/users?type=teacher")}
+              Icon={BsPencilSquare}
+              label="Teachers"
+              value={userCounts.teacher}
+              color="purple"
+            />
+            <IconCard
+              onClick={() => router.push("/classrooms")}
+              Icon={BsPeople}
+              label="Classrooms"
+              value={groupsCount}
+              color="purple"
+            />
+            <IconCard
+              Icon={BsPeopleFill}
+              onClick={() => router.push("/entities")}
+              label="Entities"
+              value={`${entities.length} - ${totalCount}/${totalLicenses}`}
+              color="purple"
+            />
+            {allowedEntityStatistics.length > 0 && (
+              <IconCard
+                Icon={BsPersonFillGear}
+                onClick={() => router.push("/statistical")}
+                label="Entity Statistics"
+                value={allowedEntityStatistics.length}
+                color="purple"
+              />
+            )}
+            {allowedStudentPerformance.length > 0 && (
+              <IconCard
+                Icon={BsPersonFillGear}
+                onClick={() => router.push("/users/performance")}
+                label="Student Performance"
+                value={userCounts.student}
+                color="purple"
+              />
+            )}
+            <IconCard
+              Icon={BsClock}
+              label="Expiration Date"
+              value={
+                user.subscriptionExpirationDate
+                  ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy")
+                  : "Unlimited"
+              }
+              color="rose"
+            />
+            <IconCard
+              Icon={BsEnvelopePaper}
+              className="col-span-2"
+              onClick={() => router.push("/assignments")}
+              label="Assignments"
+              value={assignmentsCount}
+              color="purple"
+            />
+          </section>
+        </div>
+
+        <section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
+          <UserDisplayList users={latestStudents} title="Latest Students" />
+          <UserDisplayList users={latestTeachers} title="Latest Teachers" />
+          <UserDisplayList users={students} title="Highest level students" />
+          <UserDisplayList
+            users={students.sort(
+              (a, b) =>
+                Object.keys(groupByExam(filterBy(stats, "user", b))).length -
+                Object.keys(groupByExam(filterBy(stats, "user", a))).length
+            )}
+            title="Highest exam count students"
+          />
+        </section>
+      </>
+    </>
+  );
 }

src/pages/dashboard/developer.tsx

@@ -1,189 +1,214 @@
 /* eslint-disable @next/next/no-img-element */
-import Layout from "@/components/High/Layout";
 import UserDisplayList from "@/components/UserDisplayList";
 import IconCard from "@/components/IconCard";
 import { EntityWithRoles } from "@/interfaces/entity";
-import { Assignment } from "@/interfaces/results";
-import { Group, Stat, StudentUser, Type, User } from "@/interfaces/user";
+import { Stat,  Type, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
-import { dateSorter, filterBy, mapBy, redirect, serialize } from "@/utils";
+import { filterBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
-import { countEntitiesAssignments, getAssignments } from "@/utils/assignments.be";
-import { getEntitiesWithRoles } from "@/utils/entities.be";
-import { countGroups, getGroups } from "@/utils/groups.be";
+import {
+  countEntitiesAssignments,
+} from "@/utils/assignments.be";
+import { getEntities } from "@/utils/entities.be";
+import { countGroups } from "@/utils/groups.be";
 import { checkAccess } from "@/utils/permissions";
-import { calculateAverageLevel, calculateBandScore } from "@/utils/score";
 import { groupByExam } from "@/utils/stats";
-import { getStatsByUsers } from "@/utils/stats.be";
-import { countUsers, getUser, getUsers } from "@/utils/users.be";
+import {
+  countUsersByTypes,
+  getUsers,
+} from "@/utils/users.be";
 import { withIronSessionSsr } from "iron-session/next";
-import { uniqBy } from "lodash";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { useMemo } from "react";
 import {
-	BsBank,
-	BsClipboard2Data,
-	BsEnvelopePaper,
-	BsPencilSquare,
-	BsPeople,
-	BsPeopleFill,
-	BsPersonFill,
-	BsPersonFillGear,
+  BsBank,
+  BsEnvelopePaper,
+  BsPencilSquare,
+  BsPeople,
+  BsPeopleFill,
+  BsPersonFill,
+  BsPersonFillGear,
 } from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 
 interface Props {
-	user: User;
-	students: User[];
-	latestStudents: User[]
-	latestTeachers: User[]
-	entities: EntityWithRoles[];
-	usersCount: { [key in Type]: number }
-	assignmentsCount: number;
-	stats: Stat[];
-	groupsCount: number;
+  user: User;
+  students: User[];
+  latestStudents: User[];
+  latestTeachers: User[];
+  entities: EntityWithRoles[];
+  usersCount: { [key in Type]: number };
+  assignmentsCount: number;
+  stats: Stat[];
+  groupsCount: number;
 }
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user || !user.isVerified) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user || !user.isVerified) return redirect("/login");
 
-	if (!checkAccess(user, ["admin", "developer"])) return redirect("/")
+  if (!checkAccess(user, ["admin", "developer"])) return redirect("/");
 
-	const students = await getUsers({ type: 'student' }, 10, { averageLevel: -1 });
-	const usersCount = {
-		student: await countUsers({ type: "student" }),
-		teacher: await countUsers({ type: "teacher" }),
-		corporate: await countUsers({ type: "corporate" }),
-		mastercorporate: await countUsers({ type: "mastercorporate" }),
-	}
+  const students = await getUsers(
+    { type: "student" },
+    10,
+    {
+      averageLevel: -1,
+    },
+    { id: 1, name: 1, email: 1, profilePicture: 1 }
+  );
 
-	const latestStudents = await getUsers({ type: 'student' }, 10, { registrationDate: -1 })
-	const latestTeachers = await getUsers({ type: 'teacher' }, 10, { registrationDate: -1 })
+  const usersCount = await countUsersByTypes([
+    "student",
+    "teacher",
+    "corporate",
+    "mastercorporate",
+  ]);
 
-	const entities = await getEntitiesWithRoles();
-	const assignmentsCount = await countEntitiesAssignments(mapBy(entities, 'id'), { archived: { $ne: true } });
-	const groupsCount = await countGroups();
+  const latestStudents = await getUsers(
+    { type: "student" },
+    10,
+    {
+      registrationDate: -1,
+    },
+    {id:1, name: 1, email: 1, profilePicture: 1 }
+  );
+  const latestTeachers = await getUsers(
+    { type: "teacher" },
+    10,
+    {
+      registrationDate: -1,
+    },
+    { id:1,name: 1, email: 1, profilePicture: 1 }
+  );
 
-	return { props: serialize({ user, students, latestStudents, latestTeachers, usersCount, entities, assignmentsCount, groupsCount }) };
+  const entities = await getEntities(undefined, { _id: 0, id: 1, label: 1 });
+  const assignmentsCount = await countEntitiesAssignments(
+    mapBy(entities, "id"),
+    { archived: { $ne: true } }
+  );
+  const groupsCount = await countGroups();
+
+  return {
+    props: serialize({
+      user,
+      students,
+      latestStudents,
+      latestTeachers,
+      usersCount,
+      entities,
+      assignmentsCount,
+      groupsCount,
+    }),
+  };
 }, sessionOptions);
 
 export default function Dashboard({
-	user,
-	students = [],
-	latestStudents,
-	latestTeachers,
-	usersCount,
-	entities,
-	assignmentsCount,
-	stats = [],
-	groupsCount
+  user,
+  students = [],
+  latestStudents,
+  latestTeachers,
+  usersCount,
+  entities,
+  assignmentsCount,
+  stats = [],
+  groupsCount,
 }: Props) {
-	const router = useRouter();
+  const router = useRouter();
 
-	return (
-		<>
-			<Head>
-				<title>EnCoach</title>
-				<meta
-					name="description"
-					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
-				/>
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
-				<link rel="icon" href="/favicon.ico" />
-			</Head>
-			<ToastContainer />
-			<Layout user={user}>
-				<section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
-					<IconCard
-						onClick={() => router.push("/users?type=student")}
-						Icon={BsPersonFill}
-						label="Students"
-						value={usersCount.student}
-						color="purple"
-					/>
-					<IconCard
-						onClick={() => router.push("/users?type=teacher")}
-						Icon={BsPencilSquare}
-						label="Teachers"
-						value={usersCount.teacher}
-						color="purple"
-					/>
-					<IconCard
-						Icon={BsBank}
-						onClick={() => router.push("/users?type=corporate")}
-						label="Corporates"
-						value={usersCount.corporate}
-						color="purple"
-					/>
-					<IconCard
-						Icon={BsBank}
-						onClick={() => router.push("/users?type=mastercorporate")}
-						label="Master Corporates"
-						value={usersCount.mastercorporate}
-						color="purple"
-					/>
-					<IconCard
-						Icon={BsPeople}
-						onClick={() => router.push("/classrooms")}
-						label="Classrooms"
-						value={groupsCount}
-						color="purple"
-					/>
-					<IconCard Icon={BsPeopleFill}
-						onClick={() => router.push("/entities")}
-						label="Entities"
-						value={entities.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={usersCount.student}
-						color="purple"
-					/>
-					<IconCard
-						Icon={BsEnvelopePaper}
-						onClick={() => router.push("/assignments")}
-						label="Assignments"
-						value={assignmentsCount}
-						color="purple"
-					/>
-				</section>
+  return (
+    <>
+      <Head>
+        <title>EnCoach</title>
+        <meta
+          name="description"
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <ToastContainer />
+      <>
+        <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={usersCount.student}
+            color="purple"
+          />
+          <IconCard
+            onClick={() => router.push("/users?type=teacher")}
+            Icon={BsPencilSquare}
+            label="Teachers"
+            value={usersCount.teacher}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsBank}
+            onClick={() => router.push("/users?type=corporate")}
+            label="Corporates"
+            value={usersCount.corporate}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsBank}
+            onClick={() => router.push("/users?type=mastercorporate")}
+            label="Master Corporates"
+            value={usersCount.mastercorporate}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsPeople}
+            onClick={() => router.push("/classrooms")}
+            label="Classrooms"
+            value={groupsCount}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsPeopleFill}
+            onClick={() => router.push("/entities")}
+            label="Entities"
+            value={entities.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={usersCount.student}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsEnvelopePaper}
+            onClick={() => router.push("/assignments")}
+            label="Assignments"
+            value={assignmentsCount}
+            color="purple"
+          />
+        </section>
 
-				<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
-					<UserDisplayList
-						users={latestStudents}
-						title="Latest Students"
-					/>
-					<UserDisplayList
-						users={latestTeachers}
-						title="Latest Teachers"
-					/>
-					<UserDisplayList
-						users={students}
-						title="Highest level students"
-					/>
-					<UserDisplayList
-						users={
-							students
-								.sort(
-									(a, b) =>
-										Object.keys(groupByExam(filterBy(stats, "user", b))).length -
-										Object.keys(groupByExam(filterBy(stats, "user", a))).length,
-								)
-						}
-						title="Highest exam count students"
-					/>
-				</section>
-			</Layout>
-		</>
-	);
+        <section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
+          <UserDisplayList users={latestStudents} title="Latest Students" />
+          <UserDisplayList users={latestTeachers} title="Latest Teachers" />
+          <UserDisplayList users={students} title="Highest level students" />
+          <UserDisplayList
+            users={students.sort(
+              (a, b) =>
+                Object.keys(groupByExam(filterBy(stats, "user", b.id))).length -
+                Object.keys(groupByExam(filterBy(stats, "user", a.id))).length
+            )}
+            title="Highest exam count students"
+          />
+        </section>
+      </>
+    </>
+  );
 }

src/pages/dashboard/mastercorporate.tsx

@@ -1,203 +1,266 @@
 /* eslint-disable @next/next/no-img-element */
-import Layout from "@/components/High/Layout";
 import UserDisplayList from "@/components/UserDisplayList";
 import IconCard from "@/components/IconCard";
 import { useAllowedEntities } from "@/hooks/useEntityPermissions";
-import { Module } from "@/interfaces";
 import { EntityWithRoles } from "@/interfaces/entity";
-import { Assignment } from "@/interfaces/results";
-import { Group, Stat, StudentUser, Type, User } from "@/interfaces/user";
+import { Stat, StudentUser, Type, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
-import { dateSorter, filterBy, mapBy, redirect, serialize } from "@/utils";
+import { filterBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
-import { countEntitiesAssignments, getEntitiesAssignments } from "@/utils/assignments.be";
+import { countEntitiesAssignments } from "@/utils/assignments.be";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
-import { countGroupsByEntities, getGroupsByEntities } from "@/utils/groups.be";
-import { checkAccess, findAllowedEntities } from "@/utils/permissions";
-import { calculateAverageLevel, calculateBandScore } from "@/utils/score";
+import { countGroupsByEntities } from "@/utils/groups.be";
+import {
+  checkAccess,
+  groupAllowedEntitiesByPermissions,
+} from "@/utils/permissions";
 import { groupByExam } from "@/utils/stats";
-import { getStatsByUsers } from "@/utils/stats.be";
-import { countAllowedUsers, filterAllowedUsers, getUsers } from "@/utils/users.be";
-import { getEntitiesUsers } from "@/utils/users.be";
+import { countAllowedUsers, getUsers } from "@/utils/users.be";
 import { clsx } from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
-import { uniqBy } from "lodash";
 import moment from "moment";
 import Head from "next/head";
-import Link from "next/link";
 import { useRouter } from "next/router";
 import { useMemo } from "react";
 import {
-	BsBank,
-	BsClipboard2Data,
-	BsClock,
-	BsEnvelopePaper,
-	BsPaperclip,
-	BsPencilSquare,
-	BsPeople,
-	BsPeopleFill,
-	BsPersonFill,
-	BsPersonFillGear,
+  BsBank,
+  BsClock,
+  BsEnvelopePaper,
+  BsPencilSquare,
+  BsPeople,
+  BsPeopleFill,
+  BsPersonFill,
+  BsPersonFillGear,
 } from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 import { isAdmin } from "@/utils/users";
 
 interface Props {
-	user: User;
-	students: StudentUser[]
-	latestStudents: User[]
-	latestTeachers: User[]
-	userCounts: { [key in Type]: number }
-	entities: EntityWithRoles[];
-	assignmentsCount: number;
-	stats: Stat[];
-	groupsCount: number;
+  user: User;
+  students: StudentUser[];
+  latestStudents: User[];
+  latestTeachers: User[];
+  userCounts: { [key in Type]: number };
+  entities: EntityWithRoles[];
+  assignmentsCount: number;
+  stats: Stat[];
+  groupsCount: number;
 }
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user || !user.isVerified) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user || !user.isVerified) return redirect("/login");
 
-	if (!checkAccess(user, ["admin", "developer", "mastercorporate"])) return redirect("/")
+  if (!checkAccess(user, ["admin", "developer", "mastercorporate"]))
+    return redirect("/");
 
-	const entityIDS = mapBy(user.entities, "id") || [];
-	const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS);
+  const entityIDS = mapBy(user.entities, "id") || [];
+  const entities = await getEntitiesWithRoles(
+    isAdmin(user) ? undefined : entityIDS
+  );
+  const {
+    ["view_students"]: allowedStudentEntities,
+    ["view_teachers"]: allowedTeacherEntities,
+  } = groupAllowedEntitiesByPermissions(user, entities, [
+    "view_students",
+    "view_teachers",
+  ]);
 
-	const allowedStudentEntities = findAllowedEntities(user, entities, "view_students")
-	const allowedTeacherEntities = findAllowedEntities(user, entities, "view_teachers")
+  const allowedStudentEntitiesIDS = mapBy(allowedStudentEntities, "id");
 
-	const students =
-		await getUsers({ type: 'student', "entities.id": { $in: mapBy(allowedStudentEntities, 'id') } }, 10, { averageLevel: -1 });
-	const latestStudents =
-		await getUsers({ type: 'student', "entities.id": { $in: mapBy(allowedStudentEntities, 'id') } }, 10, { registrationDate: -1 })
-	const latestTeachers =
-		await getUsers({ type: 'teacher', "entities.id": { $in: mapBy(allowedTeacherEntities, 'id') } }, 10, { registrationDate: -1 })
+  const entitiesIDS = mapBy(entities, "id") || [];
 
-	const userCounts = await countAllowedUsers(user, entities)
-	const assignmentsCount = await countEntitiesAssignments(mapBy(entities, "id"), { archived: { $ne: true } });
-	const groupsCount = await countGroupsByEntities(mapBy(entities, "id"));
+  const students = await getUsers(
+    { type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
+    10,
+    { averageLevel: -1 },
+    { id: 1, name: 1, email: 1, profilePicture: 1 }
+  );
 
-	return { props: serialize({ user, students, latestStudents, latestTeachers, userCounts, entities, assignmentsCount, groupsCount }) };
+  const latestStudents = await getUsers(
+    { type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
+    10,
+    { registrationDate: -1 },
+    { id: 1, name: 1, email: 1, profilePicture: 1 }
+  );
+
+  const latestTeachers = await getUsers(
+    {
+      type: "teacher",
+      "entities.id": { $in: mapBy(allowedTeacherEntities, "id") },
+    },
+    10,
+    { registrationDate: -1 },
+    { id: 1, name: 1, email: 1, profilePicture: 1 }
+  );
+
+  const userCounts = await countAllowedUsers(user, entities);
+
+  const assignmentsCount = await countEntitiesAssignments(entitiesIDS, {
+    archived: { $ne: true },
+  });
+
+  const groupsCount = await countGroupsByEntities(entitiesIDS);
+
+  return {
+    props: serialize({
+      user,
+      students,
+      latestStudents,
+      latestTeachers,
+      userCounts,
+      entities,
+      assignmentsCount,
+      groupsCount,
+    }),
+  };
 }, sessionOptions);
 
-export default function Dashboard({ user, students, latestStudents, latestTeachers, userCounts, entities, assignmentsCount, stats = [], groupsCount }: Props) {
+export default function Dashboard({
+  user,
+  students,
+  latestStudents,
+  latestTeachers,
+  userCounts,
+  entities,
+  assignmentsCount,
+  stats = [],
+  groupsCount,
+}: Props) {
+  const totalCount = useMemo(
+    () =>
+      userCounts.corporate +
+      userCounts.mastercorporate +
+      userCounts.student +
+      userCounts.teacher,
+    [userCounts]
+  );
 
-	const totalCount = useMemo(() =>
-		userCounts.corporate + userCounts.mastercorporate + userCounts.student + userCounts.teacher, [userCounts])
+  const totalLicenses = useMemo(
+    () =>
+      entities.reduce(
+        (acc, curr) => acc + parseInt(curr.licenses.toString()),
+        0
+      ),
+    [entities]
+  );
 
-	const totalLicenses = useMemo(() => entities.reduce((acc, curr) => acc + parseInt(curr.licenses.toString()), 0), [entities])
+  const router = useRouter();
 
-	const router = useRouter();
+  const allowedEntityStatistics = useAllowedEntities(
+    user,
+    entities,
+    "view_entity_statistics"
+  );
+  const allowedStudentPerformance = useAllowedEntities(
+    user,
+    entities,
+    "view_student_performance"
+  );
 
-	const allowedEntityStatistics = useAllowedEntities(user, entities, 'view_entity_statistics')
-	const allowedStudentPerformance = useAllowedEntities(user, entities, 'view_student_performance')
+  return (
+    <>
+      <Head>
+        <title>EnCoach</title>
+        <meta
+          name="description"
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <ToastContainer />
+      <>
+        <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={userCounts.student}
+            color="purple"
+          />
+          <IconCard
+            onClick={() => router.push("/users?type=teacher")}
+            Icon={BsPencilSquare}
+            label="Teachers"
+            value={userCounts.teacher}
+            color="purple"
+          />
+          <IconCard
+            onClick={() => router.push("/users?type=corporate")}
+            Icon={BsBank}
+            label="Corporate Accounts"
+            value={userCounts.corporate}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsPeople}
+            onClick={() => router.push("/classrooms")}
+            label="Classrooms"
+            value={groupsCount}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsPeopleFill}
+            onClick={() => router.push("/entities")}
+            label="Entities"
+            value={`${entities.length} - ${totalCount}/${totalLicenses}`}
+            color="purple"
+          />
+          {allowedStudentPerformance.length > 0 && (
+            <IconCard
+              Icon={BsPersonFillGear}
+              onClick={() => router.push("/users/performance")}
+              label="Student Performance"
+              value={userCounts.student}
+              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={assignmentsCount}
+            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>
 
-	return (
-		<>
-			<Head>
-				<title>EnCoach</title>
-				<meta
-					name="description"
-					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
-				/>
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
-				<link rel="icon" href="/favicon.ico" />
-			</Head>
-			<ToastContainer />
-			<Layout user={user}>
-				<section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
-					<IconCard
-						onClick={() => router.push("/users?type=student")}
-						Icon={BsPersonFill}
-						label="Students"
-						value={userCounts.student}
-						color="purple"
-					/>
-					<IconCard
-						onClick={() => router.push("/users?type=teacher")}
-						Icon={BsPencilSquare}
-						label="Teachers"
-						value={userCounts.teacher}
-						color="purple"
-					/>
-					<IconCard
-						onClick={() => router.push("/users?type=corporate")}
-						Icon={BsBank}
-						label="Corporate Accounts"
-						value={userCounts.corporate}
-						color="purple"
-					/>
-					<IconCard
-						Icon={BsPeople}
-						onClick={() => router.push("/classrooms")}
-						label="Classrooms"
-						value={groupsCount}
-						color="purple"
-					/>
-					<IconCard Icon={BsPeopleFill}
-						onClick={() => router.push("/entities")}
-						label="Entities"
-						value={`${entities.length} - ${totalCount}/${totalLicenses}`}
-						color="purple"
-					/>
-					{allowedStudentPerformance.length > 0 && (
-						<IconCard Icon={BsPersonFillGear}
-							onClick={() => router.push("/users/performance")}
-							label="Student Performance"
-							value={userCounts.student}
-							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={assignmentsCount}
-						className={clsx(allowedEntityStatistics.length === 0 && "col-span-2")}
-						color="purple"
-					/>
-					<IconCard
-						Icon={BsClock}
-						label="Expiration Date"
-						value={user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy") : "Unlimited"}
-						color="rose"
-					/>
-				</section>
-
-				<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
-					<UserDisplayList
-						users={latestStudents}
-						title="Latest Students"
-					/>
-					<UserDisplayList
-						users={latestTeachers}
-						title="Latest Teachers"
-					/>
-					<UserDisplayList
-						users={students}
-						title="Highest level students"
-					/>
-					<UserDisplayList
-						users={
-							students
-								.sort(
-									(a, b) =>
-										Object.keys(groupByExam(filterBy(stats, "user", b))).length -
-										Object.keys(groupByExam(filterBy(stats, "user", a))).length,
-								)
-						}
-						title="Highest exam count students"
-					/>
-				</section>
-			</Layout>
-		</>
-	);
+        <section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
+          <UserDisplayList users={latestStudents} title="Latest Students" />
+          <UserDisplayList users={latestTeachers} title="Latest Teachers" />
+          <UserDisplayList users={students} title="Highest level students" />
+          <UserDisplayList
+            users={students.sort(
+              (a, b) =>
+                Object.keys(groupByExam(filterBy(stats, "user", b))).length -
+                Object.keys(groupByExam(filterBy(stats, "user", a))).length
+            )}
+            title="Highest exam count students"
+          />
+        </section>
+      </>
+    </>
+  );
 }

src/pages/dashboard/student.tsx

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

src/pages/dashboard/teacher.tsx

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

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

@@ -1,24 +1,20 @@
 /* eslint-disable @next/next/no-img-element */
 import CardList from "@/components/High/CardList";
-import Layout from "@/components/High/Layout";
 import Select from "@/components/Low/Select";
 import Input from "@/components/Low/Input";
 import Checkbox from "@/components/Low/Checkbox";
 import Tooltip from "@/components/Low/Tooltip";
 import { useEntityPermission } from "@/hooks/useEntityPermissions";
-import { useListSearch } from "@/hooks/useListSearch";
-import usePagination from "@/hooks/usePagination";
-import { Entity, EntityWithRoles, Role } from "@/interfaces/entity";
-import { GroupWithUsers, User } from "@/interfaces/user";
+import { EntityWithRoles, Role } from "@/interfaces/entity";
+import {  User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { USER_TYPE_LABELS } from "@/resources/user";
 import { findBy, mapBy, redirect, serialize } from "@/utils";
 import { getEntityWithRoles } from "@/utils/entities.be";
-import { convertToUsers, getGroup } from "@/utils/groups.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
-import { checkAccess, doesEntityAllow, getTypesOfUser } from "@/utils/permissions";
+import { doesEntityAllow  } from "@/utils/permissions";
 import { getUserName, isAdmin } from "@/utils/users";
-import { filterAllowedUsers, getEntitiesUsers, getEntityUsers, getLinkedUsers, getSpecificUsers, getUsers } from "@/utils/users.be";
+import { filterAllowedUsers, getEntitiesUsers, getEntityUsers,  getUsers } from "@/utils/users.be";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import axios from "axios";
 import clsx from "clsx";
@@ -28,7 +24,7 @@ import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { Divider } from "primereact/divider";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect,  useState } from "react";
 import ReactDatePicker from "react-datepicker";
 import { CURRENCIES } from "@/resources/paypal";
 
@@ -37,11 +33,9 @@ import {
 	BsChevronLeft,
 	BsClockFill,
 	BsEnvelopeFill,
-	BsFillPersonVcardFill,
 	BsHash,
 	BsPerson,
 	BsPlus,
-	BsSquare,
 	BsStopwatchFill,
 	BsTag,
 	BsTrash,
@@ -344,7 +338,7 @@ export default function Home({ user, entity, users, linkedUsers }: Props) {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 
-			<Layout user={user}>
+			<>
 				<section className="flex flex-col gap-0">
 					<div className="flex flex-col gap-3">
 						<div className="flex items-start justify-between">
@@ -555,7 +549,7 @@ export default function Home({ user, entity, users, linkedUsers }: Props) {
 						searchFields={[["name"], ["email"], ["corporateInformation", "companyInformation", "name"], ["role", "label"], ["type"]]}
 					/>
 				</section>
-			</Layout>
+			</>
 		</>
 	);
 }

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

@@ -1,4 +1,3 @@
-import Layout from "@/components/High/Layout";
 import Checkbox from "@/components/Low/Checkbox";
 import Separator from "@/components/Low/Separator";
 import { useEntityPermission } from "@/hooks/useEntityPermissions";
@@ -152,7 +151,7 @@ interface Props {
 	disableEdit?: boolean
 }
 
-export default function Role({ user, entity, role, userCount, disableEdit }: Props) {
+export default function EntityRole({ user, entity, role, userCount, disableEdit }: Props) {
 	const [permissions, setPermissions] = useState(role.permissions)
 	const [isLoading, setIsLoading] = useState(false);
 
@@ -240,7 +239,7 @@ export default function Role({ user, entity, role, userCount, disableEdit }: Pro
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-			<Layout user={user}>
+			<>
 				<section className="flex flex-col gap-0">
 					<div className="flex flex-col gap-3">
 						<div className="flex items-end justify-between">
@@ -388,7 +387,7 @@ export default function Role({ user, entity, role, userCount, disableEdit }: Pro
 						</div>
 					</section>
 				</section>
-			</Layout>
+			</>
 		</>
 	);
 }

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

@@ -1,42 +1,25 @@
 /* eslint-disable @next/next/no-img-element */
 import CardList from "@/components/High/CardList";
-import Layout from "@/components/High/Layout";
-import Tooltip from "@/components/Low/Tooltip";
 import { useEntityPermission } from "@/hooks/useEntityPermissions";
-import {useListSearch} from "@/hooks/useListSearch";
-import usePagination from "@/hooks/usePagination";
-import {Entity, EntityWithRoles, Role} from "@/interfaces/entity";
-import {GroupWithUsers, User} from "@/interfaces/user";
+import { EntityWithRoles, Role} from "@/interfaces/entity";
+import { User} from "@/interfaces/user";
 import {sessionOptions} from "@/lib/session";
-import {USER_TYPE_LABELS} from "@/resources/user";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import {getEntityWithRoles} from "@/utils/entities.be";
-import {convertToUsers, getGroup} from "@/utils/groups.be";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
-import {checkAccess, doesEntityAllow, getTypesOfUser} from "@/utils/permissions";
-import {getUserName} from "@/utils/users";
-import {getEntityUsers, getLinkedUsers, getSpecificUsers} from "@/utils/users.be";
+import { doesEntityAllow} from "@/utils/permissions";
+import {getEntityUsers} from "@/utils/users.be";
 import axios from "axios";
 import clsx from "clsx";
 import {withIronSessionSsr} from "iron-session/next";
-import moment from "moment";
 import Head from "next/head";
 import Link from "next/link";
 import {useRouter} from "next/router";
 import {Divider} from "primereact/divider";
-import {useEffect, useMemo, useState} from "react";
 import {
 	BsChevronLeft,
-	BsClockFill,
-	BsEnvelopeFill,
-	BsFillPersonVcardFill,
 	BsPlus,
-	BsSquare,
-	BsStopwatchFill,
-	BsTag,
-	BsTrash,
-	BsX,
 } from "react-icons/bs";
 import {toast, ToastContainer} from "react-toastify";
 
@@ -133,7 +116,7 @@ export default function Home({user, entity, roles, users}: Props) {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<ToastContainer />
-			<Layout user={user}>
+			<>
 				<section className="flex flex-col gap-0">
 					<div className="flex flex-col gap-3">
 						<div className="flex items-end justify-between">
@@ -152,7 +135,7 @@ export default function Home({user, entity, roles, users}: Props) {
 
 					<CardList list={roles} searchFields={[["label"]]} renderCard={renderCard} firstCard={canCreateRole ? firstCard : undefined} />
 				</section>
-			</Layout>
+			</>
 		</>
 	);
 }

src/pages/entities/create.tsx

@@ -1,19 +1,16 @@
 /* eslint-disable @next/next/no-img-element */
-import Layout from "@/components/High/Layout";
 import Input from "@/components/Low/Input";
-import Select from "@/components/Low/Select";
 import Tooltip from "@/components/Low/Tooltip";
 import { useListSearch } from "@/hooks/useListSearch";
 import usePagination from "@/hooks/usePagination";
-import { Entity, EntityWithRoles } from "@/interfaces/entity";
+import { Entity } from "@/interfaces/entity";
 import { User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { USER_TYPE_LABELS } from "@/resources/user";
-import { mapBy, redirect, serialize } from "@/utils";
-import { getEntities, getEntitiesWithRoles } from "@/utils/entities.be";
+import { redirect, serialize } from "@/utils";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getUserName } from "@/utils/users";
-import { getLinkedUsers, getUsers } from "@/utils/users.be";
+import {  getUsers } from "@/utils/users.be";
 import axios from "axios";
 import clsx from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
@@ -26,7 +23,6 @@ import { useState } from "react";
 import { BsCheck, BsChevronLeft, BsClockFill, BsEnvelopeFill, BsStopwatchFill } from "react-icons/bs";
 import { toast, ToastContainer } from "react-toastify";
 import { requestUser } from "@/utils/api";
-import { findAllowedEntities } from "@/utils/permissions";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 	const user = await requestUser(req, res)
@@ -91,7 +87,7 @@ export default function Home({ user, users }: Props) {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<ToastContainer />
-			<Layout user={user}>
+			<>
 				<section className="flex flex-col gap-0">
 					<div className="flex gap-3 justify-between">
 						<div className="flex items-center gap-2">
@@ -178,7 +174,7 @@ export default function Home({ user, users }: Props) {
 						</button>
 					))}
 				</section>
-			</Layout>
+			</>
 		</>
 	);
 }

src/pages/entities/index.tsx

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

src/pages/exam.tsx

@@ -20,7 +20,6 @@ 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/generation.tsx

@@ -2,24 +2,22 @@
 import Head from "next/head";
 import { withIronSessionSsr } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
-import { toast, ToastContainer } from "react-toastify";
-import Layout from "@/components/High/Layout";
+import { ToastContainer } from "react-toastify";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { Radio, RadioGroup } from "@headlessui/react";
 import clsx from "clsx";
 import { MODULE_ARRAY } from "@/utils/moduleUtils";
 import { capitalize } from "lodash";
 import Input from "@/components/Low/Input";
-import { checkAccess, findAllowedEntities } from "@/utils/permissions";
+import {  findAllowedEntities } from "@/utils/permissions";
 import { User } from "@/interfaces/user";
 import useExamEditorStore from "@/stores/examEditor";
 import ExamEditorStore from "@/stores/examEditor/types";
 import ExamEditor from "@/components/ExamEditor";
-import MultipleAudioUploader from "@/components/ExamEditor/Shared/AudioEdit";
 import { mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { Module } from "@/interfaces";
-import { getExam, getExams } from "@/utils/exams.be";
+import { getExam, } from "@/utils/exams.be";
 import { Exam, Exercise, InteractiveSpeakingExercise, ListeningPart, SpeakingExercise } from "@/interfaces/exam";
 import { useEffect, useState } from "react";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
@@ -157,7 +155,7 @@ export default function Generation({ id, user, exam, examModule, permissions }:
 			</Head>
 			<ToastContainer />
 			{user && (
-				<Layout user={user} className="gap-6">
+				<>
 					<h1 className="text-2xl font-semibold">Exam Editor</h1>
 					<div className="flex flex-col gap-3">
 						<Input
@@ -212,7 +210,7 @@ export default function Generation({ id, user, exam, examModule, permissions }:
 						</RadioGroup>
 					</div>
 					<ExamEditor levelParts={examLevelParts} />
-				</Layout>
+				</>
 			)}
 		</>
 	);

src/pages/official-exam.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
 import AssignmentCard from "@/components/High/AssignmentCard";
-import Layout from "@/components/High/Layout";
 import Button from "@/components/Low/Button";
 import Separator from "@/components/Low/Separator";
 import ProfileSummary from "@/components/ProfileSummary";
@@ -15,7 +14,10 @@ import { sessionOptions } from "@/lib/session";
 import useExamStore from "@/stores/exam";
 import { filterBy, findBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
-import { activeAssignmentFilter, futureAssignmentFilter } from "@/utils/assignments";
+import {
+  activeAssignmentFilter,
+  futureAssignmentFilter,
+} from "@/utils/assignments";
 import { getAssignmentsByAssignee } from "@/utils/assignments.be";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { getExamsByIds } from "@/utils/exams.be";
@@ -34,142 +36,187 @@ import { BsArrowRepeat } from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 
 interface Props {
-	user: User;
-	entities: EntityWithRoles[];
-	assignments: Assignment[];
-	stats: Stat[];
-	exams: Exam[];
-	sessions: Session[];
-	invites: InviteWithEntity[];
-	grading: Grading;
+  user: User;
+  entities: EntityWithRoles[];
+  assignments: Assignment[];
+  stats: Stat[];
+  exams: Exam[];
+  sessions: Session[];
+  invites: InviteWithEntity[];
+  grading: Grading;
 }
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	const destination = Buffer.from(req.url || "/").toString("base64")
-	if (!user) return redirect(`/login?destination=${destination}`)
+  const user = await requestUser(req, res);
+  const destination = Buffer.from(req.url || "/").toString("base64");
+  if (!user) return redirect(`/login?destination=${destination}`);
 
-	if (!checkAccess(user, ["admin", "developer", "student"]))
-		return redirect("/")
+  if (!checkAccess(user, ["admin", "developer", "student"]))
+    return redirect("/");
 
-	const entityIDS = mapBy(user.entities, "id") || [];
+  const entityIDS = mapBy(user.entities, "id") || [];
 
-	const entities = await getEntitiesWithRoles(entityIDS);
-	const assignments = await getAssignmentsByAssignee(user.id, { archived: { $ne: true } });
-	const sessions = await getSessionsByUser(user.id, 0, { "assignment.id": { $in: mapBy(assignments, 'id') } });
+  const entities = await getEntitiesWithRoles(entityIDS);
+  const assignments = await getAssignmentsByAssignee(user.id, {
+    archived: { $ne: true },
+  });
+  const sessions = await getSessionsByUser(user.id, 0, {
+    "assignment.id": { $in: mapBy(assignments, "id") },
+  });
 
-	const examIDs = uniqBy(
-		assignments.flatMap((a) =>
-			filterBy(a.exams, 'assignee', user.id).map((e) => ({ module: e.module, id: e.id, key: `${e.module}_${e.id}` })),
-		),
-		"key",
-	);
-	const exams = await getExamsByIds(examIDs);
+  const examIDs = uniqBy(
+    assignments.flatMap((a) =>
+      filterBy(a.exams, "assignee", user.id).map(
+        (e: any) => ({
+          module: e.module,
+          id: e.id,
+          key: `${e.module}_${e.id}`,
+        })
+      )
+    ),
+    "key"
+  );
+  const exams = await getExamsByIds(examIDs);
 
-	return { props: serialize({ user, entities, assignments, exams, sessions }) };
+  return { props: serialize({ user, entities, assignments, exams, sessions }) };
 }, sessionOptions);
 
-const destination = Buffer.from("/official-exam").toString("base64")
+const destination = Buffer.from("/official-exam").toString("base64");
 
-export default function OfficialExam({ user, entities, assignments, sessions, exams }: Props) {
-	const [isLoading, setIsLoading] = useState(false)
+export default function OfficialExam({
+  user,
+  entities,
+  assignments,
+  sessions,
+  exams,
+}: Props) {
+  const [isLoading, setIsLoading] = useState(false);
 
-	const router = useRouter();
+  const router = useRouter();
 
-	const dispatch = useExamStore((state) => state.dispatch);
+  const dispatch = useExamStore((state) => state.dispatch);
 
-	const reload = () => {
-		setIsLoading(true)
-		router.replace(router.asPath)
-		setTimeout(() => setIsLoading(false), 500)
-	}
+  const reload = () => {
+    setIsLoading(true);
+    router.replace(router.asPath);
+    setTimeout(() => setIsLoading(false), 500);
+  };
 
-	const startAssignment = (assignment: Assignment) => {
-		const assignmentExams = exams.filter(e => {
-			const exam = findBy(assignment.exams, 'id', e.id)
-			return !!exam && exam.module === e.module
-		})
+  const startAssignment = (assignment: Assignment) => {
+    const assignmentExams = exams.filter((e) => {
+      const exam = findBy(assignment.exams, "id", e.id);
+      return !!exam && exam.module === e.module;
+    });
 
-		if (assignmentExams.every((x) => !!x)) {
-			dispatch({
-				type: "INIT_EXAM", payload: {
-					exams: assignmentExams.sort(sortByModule),
-					modules: mapBy(assignmentExams.sort(sortByModule), 'module'),
-					assignment
-				}
-			})
-			router.push(`/exam?assignment=${assignment.id}&destination=${destination}`);
-		}
-	};
+    if (assignmentExams.every((x) => !!x)) {
+      dispatch({
+        type: "INIT_EXAM",
+        payload: {
+          exams: assignmentExams.sort(sortByModule),
+          modules: mapBy(assignmentExams.sort(sortByModule), "module"),
+          assignment,
+        },
+      });
+      router.push(
+        `/exam?assignment=${assignment.id}&destination=${destination}`
+      );
+    }
+  };
 
-	const loadSession = async (session: Session) => {
-		dispatch({type: "SET_SESSION", payload: {session}});
-		router.push(`/exam?assignment=${session.assignment?.id}&destination=${destination}`);
-	};
+  const loadSession = async (session: Session) => {
+    dispatch({ type: "SET_SESSION", payload: { session } });
+    router.push(
+      `/exam?assignment=${session.assignment?.id}&destination=${destination}`
+    );
+  };
 
-	const logout = async () => {
-		axios.post("/api/logout").finally(() => {
-			setTimeout(() => router.reload(), 500);
-		});
-	};
+  const logout = async () => {
+    axios.post("/api/logout").finally(() => {
+      setTimeout(() => router.reload(), 500);
+    });
+  };
 
-	const studentAssignments = useMemo(() => [
-		...assignments.filter(activeAssignmentFilter), ...assignments.filter(futureAssignmentFilter)],
-		[assignments]
-	);
+  const studentAssignments = useMemo(
+    () => [
+      ...assignments.filter(activeAssignmentFilter),
+      ...assignments.filter(futureAssignmentFilter),
+    ],
+    [assignments]
+  );
 
-	const assignmentSessions = useMemo(() => sessions.filter(s => mapBy(studentAssignments, 'id').includes(s.assignment?.id || "")), [sessions, studentAssignments])
+  const assignmentSessions = useMemo(
+    () =>
+      sessions.filter((s) =>
+        mapBy(studentAssignments, "id").includes(s.assignment?.id || "")
+      ),
+    [sessions, studentAssignments]
+  );
 
-	return (
-		<>
-			<Head>
-				<title>EnCoach</title>
-				<meta
-					name="description"
-					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
-				/>
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
-				<link rel="icon" href="/favicon.ico" />
-			</Head>
-			<ToastContainer />
-			<Layout user={user} hideSidebar>
-				{entities.length > 0 && (
-					<div className="absolute right-4 top-4 rounded-lg bg-neutral-200 px-2 py-1">
-						<b>{mapBy(entities, "label")?.join(", ")}</b>
-					</div>
-				)}
+  return (
+    <>
+      <Head>
+        <title>EnCoach</title>
+        <meta
+          name="description"
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <ToastContainer />
+      <>
+        {entities.length > 0 && (
+          <div className="absolute right-4 top-4 rounded-lg bg-neutral-200 px-2 py-1">
+            <b>{mapBy(entities, "label")?.join(", ")}</b>
+          </div>
+        )}
 
-				<ProfileSummary user={user} items={[]} removeLevel />
+        <ProfileSummary user={user} items={[]} removeLevel />
 
-				<Separator />
+        <Separator />
 
-				{/* Assignments */}
-				<section className="flex flex-col gap-1 md:gap-3">
-					<div
-						onClick={reload}
-						className="text-mti-purple-light hover:text-mti-purple-dark flex cursor-pointer items-center gap-2 transition duration-300 ease-in-out">
-						<span className="text-mti-black text-lg font-bold">Assignments</span>
-						<BsArrowRepeat className={clsx("text-xl", isLoading && "animate-spin")} />
-					</div>
-					<span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
-						{studentAssignments.length === 0 && "Assignments will appear here. It seems that for now there are no assignments for you."}
-						{studentAssignments
-							.sort((a, b) => moment(a.startDate).diff(b.startDate))
-							.map((a) =>
-								<AssignmentCard
-									key={a.id}
-									assignment={a}
-									user={user}
-									session={assignmentSessions.find(s => s.assignment?.id === a.id)}
-									startAssignment={startAssignment}
-									resumeAssignment={loadSession}
-								/>
-							)}
-					</span>
-				</section>
+        {/* Assignments */}
+        <section className="flex flex-col gap-1 md:gap-3">
+          <div
+            onClick={reload}
+            className="text-mti-purple-light hover:text-mti-purple-dark flex cursor-pointer items-center gap-2 transition duration-300 ease-in-out"
+          >
+            <span className="text-mti-black text-lg font-bold">
+              Assignments
+            </span>
+            <BsArrowRepeat
+              className={clsx("text-xl", isLoading && "animate-spin")}
+            />
+          </div>
+          <span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
+            {studentAssignments.length === 0 &&
+              "Assignments will appear here. It seems that for now there are no assignments for you."}
+            {studentAssignments
+              .sort((a, b) => moment(a.startDate).diff(b.startDate))
+              .map((a) => (
+                <AssignmentCard
+                  key={a.id}
+                  assignment={a}
+                  user={user}
+                  session={assignmentSessions.find(
+                    (s) => s.assignment?.id === a.id
+                  )}
+                  startAssignment={startAssignment}
+                  resumeAssignment={loadSession}
+                />
+              ))}
+          </span>
+        </section>
 
-				<Button onClick={logout} variant="outline" color="red" className="max-w-[200px] w-full absolute bottom-8 left-8">Sign out</Button>
-			</Layout>
-		</>
-	);
+        <Button
+          onClick={logout}
+          variant="outline"
+          color="red"
+          className="max-w-[200px] w-full absolute bottom-8 left-8"
+        >
+          Sign out
+        </Button>
+      </>
+    </>
+  );
 }

src/pages/payment-record.tsx

@@ -2,14 +2,12 @@
 import Head from "next/head";
 import { withIronSessionSsr } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
-import useUser from "@/hooks/useUser";
 import { toast, ToastContainer } from "react-toastify";
-import Layout from "@/components/High/Layout";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import usePayments from "@/hooks/usePayments";
 import usePaypalPayments from "@/hooks/usePaypalPayments";
 import { Payment, PaypalPayment } from "@/interfaces/paypal";
-import { CellContext, createColumnHelper, flexRender, getCoreRowModel, HeaderGroup, Table, useReactTable } from "@tanstack/react-table";
+import { createColumnHelper, flexRender, getCoreRowModel, HeaderGroup, Table, useReactTable } from "@tanstack/react-table";
 import { CURRENCIES } from "@/resources/paypal";
 import { BsTrash } from "react-icons/bs";
 import axios from "axios";
@@ -943,7 +941,7 @@ export default function PaymentRecord({ user, entities }: Props) {
 			</Head>
 			<ToastContainer />
 			{user && (
-				<Layout user={user} className="gap-6">
+				<>
 					{getUserModal()}
 					<Modal isOpen={isCreatingPayment} onClose={() => setIsCreatingPayment(false)}>
 						<PaymentCreator
@@ -1248,7 +1246,7 @@ export default function PaymentRecord({ user, entities }: Props) {
 							</Tab.Panel>
 						</Tab.Panels>
 					</Tab.Group>
-				</Layout>
+				</>
 			)}
 		</>
 	);

src/pages/permissions/[id].tsx

@@ -1,188 +1,219 @@
 /* eslint-disable @next/next/no-img-element */
 import Head from "next/head";
-import {useEffect, useState} from "react";
-import {withIronSessionSsr} from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
-import {shouldRedirectHome} from "@/utils/navigation.disabled";
-import {Permission, PermissionType} from "@/interfaces/permissions";
-import {getPermissionDoc} from "@/utils/permissions.be";
-import {User} from "@/interfaces/user";
-import Layout from "@/components/High/Layout";
-import {getUsers} from "@/utils/users.be";
-import {BsTrash} from "react-icons/bs";
+import React, { useEffect, useState } from "react";
+import { withIronSessionSsr } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { Permission, PermissionType } from "@/interfaces/permissions";
+import { getPermissionDoc } from "@/utils/permissions.be";
+import { User } from "@/interfaces/user";
+import  { LayoutContext } from "@/components/High/Layout";
+import { getUsers } from "@/utils/users.be";
+import { BsTrash } from "react-icons/bs";
 import Select from "@/components/Low/Select";
 import Button from "@/components/Low/Button";
 import axios from "axios";
-import {toast, ToastContainer} from "react-toastify";
-import {Type as UserType} from "@/interfaces/user";
-import {getGroups} from "@/utils/groups.be";
+import { toast, ToastContainer } from "react-toastify";
+import { Type as UserType } from "@/interfaces/user";
+import { getGroups } from "@/utils/groups.be";
 import { requestUser } from "@/utils/api";
 import { redirect } from "@/utils";
 interface BasicUser {
-	id: string;
-	name: string;
-	type: UserType;
+  id: string;
+  name: string;
+  type: UserType;
 }
 
 interface PermissionWithBasicUsers {
-	id: string;
-	type: PermissionType;
-	users: BasicUser[];
+  id: string;
+  type: PermissionType;
+  users: BasicUser[];
 }
 
-export const getServerSideProps = withIronSessionSsr(async ({req, res, params}) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+export const getServerSideProps = withIronSessionSsr(
+  async ({ req, res, params }) => {
+    const user = await requestUser(req, res);
+    if (!user) return redirect("/login");
 
-	if (shouldRedirectHome(user)) return redirect("/")
+    if (shouldRedirectHome(user)) return redirect("/");
 
-	if (!params?.id) return redirect("/permissions")
+    if (!params?.id) return redirect("/permissions");
 
-	// Fetch data from external API
-	const permission: Permission = await getPermissionDoc(params.id as string);
+    // Fetch data from external API
+    const permission: Permission = await getPermissionDoc(params.id as string);
 
-	const allUserData: User[] = await getUsers();
-	const groups = await getGroups();
+    const allUserData: User[] = await getUsers();
+    const groups = await getGroups();
 
-	const userGroups = groups.filter((x) => x.admin === user.id);
-	const filteredGroups =
-		user.type === "corporate"
-			? userGroups
-			: user.type === "mastercorporate"
-			? groups.filter((x) => userGroups.flatMap((y) => y.participants).includes(x.admin))
-			: groups;
+    const userGroups = groups.filter((x) => x.admin === user.id);
+    const filteredGroups =
+      user.type === "corporate"
+        ? userGroups
+        : user.type === "mastercorporate"
+        ? groups.filter((x) =>
+            userGroups.flatMap((y) => y.participants).includes(x.admin)
+          )
+        : groups;
 
-	const users = allUserData.map((u) => ({
-		id: u.id,
-		name: u.name,
-		type: u.type,
-	})) as BasicUser[];
+    const users = allUserData.map((u) => ({
+      id: u.id,
+      name: u.name,
+      type: u.type,
+    })) as BasicUser[];
 
-	const filteredUsers = ["mastercorporate", "corporate"].includes(user.type)
-		? users.filter((u) => filteredGroups.flatMap((g) => g.participants).includes(u.id))
-		: users;
+    const filteredUsers = ["mastercorporate", "corporate"].includes(user.type)
+      ? users.filter((u) =>
+          filteredGroups.flatMap((g) => g.participants).includes(u.id)
+        )
+      : users;
 
-	// const res = await fetch("api/permissions");
-	// const permissions: Permission[] = await res.json();
-	// Pass data to the page via props
-	const usersData: BasicUser[] = permission.users.reduce((acc: BasicUser[], userId) => {
-		const user = filteredUsers.find((u) => u.id === userId) as BasicUser;
-		if (!!user) acc.push(user);
-		return acc;
-	}, []);
+    // const res = await fetch("api/permissions");
+    // const permissions: Permission[] = await res.json();
+    // Pass data to the page via props
+    const usersData: BasicUser[] = permission.users.reduce(
+      (acc: BasicUser[], userId) => {
+        const user = filteredUsers.find((u) => u.id === userId) as BasicUser;
+        if (!!user) acc.push(user);
+        return acc;
+      },
+      []
+    );
 
-	return {
-		props: {
-			// permissions: permissions.map((p) => ({ id: p.id, type: p.type })),
-			permission: {
-				...permission,
-				id: params.id,
-				users: usersData,
-			},
-			user,
-			users: filteredUsers,
-		},
-	};
-}, sessionOptions);
+    return {
+      props: {
+        // permissions: permissions.map((p) => ({ id: p.id, type: p.type })),
+        permission: {
+          ...permission,
+          id: params.id,
+          users: usersData,
+        },
+        user,
+        users: filteredUsers,
+      },
+    };
+  },
+  sessionOptions
+);
 
 interface Props {
-	permission: PermissionWithBasicUsers;
-	user: User;
-	users: BasicUser[];
+  permission: PermissionWithBasicUsers;
+  user: User;
+  users: BasicUser[];
 }
 
 export default function Page(props: Props) {
-	const {permission, user, users} = props;
+  const { permission, user, users } = props;
 
-	const [selectedUsers, setSelectedUsers] = useState<string[]>(() => permission.users.map((u) => u.id));
+  const [selectedUsers, setSelectedUsers] = useState<string[]>(() =>
+    permission.users.map((u) => u.id)
+  );
 
-	const onChange = (value: any) => {
-		setSelectedUsers((prev) => {
-			if (value?.value) {
-				return [...prev, value?.value];
-			}
-			return prev;
-		});
-	};
-	const removeUser = (id: string) => {
-		setSelectedUsers((prev) => prev.filter((u) => u !== id));
-	};
+  const onChange = (value: any) => {
+    setSelectedUsers((prev) => {
+      if (value?.value) {
+        return [...prev, value?.value];
+      }
+      return prev;
+    });
+  };
+  const removeUser = (id: string) => {
+    setSelectedUsers((prev) => prev.filter((u) => u !== id));
+  };
 
-	const update = async () => {
-		try {
-			await axios.patch(`/api/permissions/${permission.id}`, {
-				users: selectedUsers,
-			});
-			toast.success("Permission updated");
-		} catch (err) {
-			toast.error("Failed to update permission");
-		}
-	};
+  const update = async () => {
+    try {
+      await axios.patch(`/api/permissions/${permission.id}`, {
+        users: selectedUsers,
+      });
+      toast.success("Permission updated");
+    } catch (err) {
+      toast.error("Failed to update permission");
+    }
+  };
 
-	return (
-		<>
-			<Head>
-				<title>EnCoach</title>
-				<meta
-					name="description"
-					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
-				/>
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
-				<link rel="icon" href="/favicon.ico" />
-			</Head>
-			<ToastContainer />
-			<Layout user={user} className="gap-6">
-				<div className="flex flex-col gap-6 w-full h-[88vh] overflow-y-scroll scrollbar-hide rounded-xl">
-					<h1 className="text-2xl font-semibold">Permission: {permission.type as string}</h1>
-					<div className="flex gap-3">
-						<Select
-							value={null}
-							options={users
-								.filter((u) => !selectedUsers.includes(u.id))
-								.map((u) => ({
-									label: `${u?.type}-${u?.name}`,
-									value: u.id,
-								}))}
-							onChange={onChange}
-						/>
-						<Button onClick={update}>Update</Button>
-					</div>
-					<div className="flex flex-row justify-between">
-						<div className="flex flex-col gap-3">
-							<h2>Blacklisted Users</h2>
-							<div className="flex gap-3 flex-wrap">
-								{selectedUsers.map((userId) => {
-									const user = users.find((u) => u.id === userId);
-									return (
-										<div className="flex p-4 rounded-xl w-auto bg-mti-purple-light text-white gap-4" key={userId}>
-											<span className="text-base first-letter:uppercase">
-												{user?.type}-{user?.name}
-											</span>
-											<BsTrash style={{cursor: "pointer"}} onClick={() => removeUser(userId)} size={20} />
-										</div>
-									);
-								})}
-							</div>
-						</div>
-						<div className="flex flex-col gap-3">
-							<h2>Whitelisted Users</h2>
-							<div className="flex flex-col gap-3 flex-wrap">
-								{users
-									.filter((user) => !selectedUsers.includes(user.id))
-									.map((user) => {
-										return (
-											<div className="flex p-4 rounded-xl w-auto bg-mti-purple-light text-white gap-4" key={user.id}>
-												<span className="text-base first-letter:uppercase">
-													{user?.type}-{user?.name}
-												</span>
-											</div>
-										);
-									})}
-							</div>
-						</div>
-					</div>
-				</div>
-			</Layout>
-		</>
-	);
+  const { setClassName } = React.useContext(LayoutContext);
+
+  useEffect(() => {
+    setClassName("gap-6");
+    return () => setClassName("");
+  }, [setClassName]);
+
+  return (
+    <>
+      <Head>
+        <title>EnCoach</title>
+        <meta
+          name="description"
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <ToastContainer />
+      <>
+        <div className="flex flex-col gap-6 w-full h-[88vh] overflow-y-scroll scrollbar-hide rounded-xl">
+          <h1 className="text-2xl font-semibold">
+            Permission: {permission.type as string}
+          </h1>
+          <div className="flex gap-3">
+            <Select
+              value={null}
+              options={users
+                .filter((u) => !selectedUsers.includes(u.id))
+                .map((u) => ({
+                  label: `${u?.type}-${u?.name}`,
+                  value: u.id,
+                }))}
+              onChange={onChange}
+            />
+            <Button onClick={update}>Update</Button>
+          </div>
+          <div className="flex flex-row justify-between">
+            <div className="flex flex-col gap-3">
+              <h2>Blacklisted Users</h2>
+              <div className="flex gap-3 flex-wrap">
+                {selectedUsers.map((userId) => {
+                  const user = users.find((u) => u.id === userId);
+                  return (
+                    <div
+                      className="flex p-4 rounded-xl w-auto bg-mti-purple-light text-white gap-4"
+                      key={userId}
+                    >
+                      <span className="text-base first-letter:uppercase">
+                        {user?.type}-{user?.name}
+                      </span>
+                      <BsTrash
+                        style={{ cursor: "pointer" }}
+                        onClick={() => removeUser(userId)}
+                        size={20}
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            <div className="flex flex-col gap-3">
+              <h2>Whitelisted Users</h2>
+              <div className="flex flex-col gap-3 flex-wrap">
+                {users
+                  .filter((user) => !selectedUsers.includes(user.id))
+                  .map((user) => {
+                    return (
+                      <div
+                        className="flex p-4 rounded-xl w-auto bg-mti-purple-light text-white gap-4"
+                        key={user.id}
+                      >
+                        <span className="text-base first-letter:uppercase">
+                          {user?.type}-{user?.name}
+                        </span>
+                      </div>
+                    );
+                  })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    </>
+  );
 }

src/pages/permissions/index.tsx

@@ -1,73 +1,85 @@
 /* eslint-disable @next/next/no-img-element */
 import Head from "next/head";
-import {withIronSessionSsr} from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
-import {shouldRedirectHome} from "@/utils/navigation.disabled";
-import {Permission} from "@/interfaces/permissions";
-import {getPermissionDocs} from "@/utils/permissions.be";
-import {User} from "@/interfaces/user";
-import Layout from "@/components/High/Layout";
+import { withIronSessionSsr } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { Permission } from "@/interfaces/permissions";
+import { getPermissionDocs } from "@/utils/permissions.be";
+import { User } from "@/interfaces/user";
+import  { LayoutContext } from "@/components/High/Layout";
 import PermissionList from "@/components/PermissionList";
 import { requestUser } from "@/utils/api";
 import { redirect } from "@/utils";
+import React from "react";
 
-export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
+  const user = await requestUser(req, res);
+  if (!user) return redirect("/login");
 
-	if (shouldRedirectHome(user)) return redirect("/")
+  if (shouldRedirectHome(user)) return redirect("/");
 
-	// Fetch data from external API
-	const permissions: Permission[] = await getPermissionDocs();
-	const filteredPermissions = permissions.filter((p) => {
-		const permissionType = p.type.toString().toLowerCase();
+  // Fetch data from external API
+  const permissions: Permission[] = await getPermissionDocs();
+  const filteredPermissions = permissions.filter((p) => {
+    const permissionType = p.type.toString().toLowerCase();
 
-		if (user.type === "corporate") return !permissionType.includes("corporate") && !permissionType.includes("admin");
-		if (user.type === "mastercorporate") return !permissionType.includes("mastercorporate") && !permissionType.includes("admin");
+    if (user.type === "corporate")
+      return (
+        !permissionType.includes("corporate") &&
+        !permissionType.includes("admin")
+      );
+    if (user.type === "mastercorporate")
+      return (
+        !permissionType.includes("mastercorporate") &&
+        !permissionType.includes("admin")
+      );
 
-		return true;
-	});
+    return true;
+  });
 
-	// const res = await fetch("api/permissions");
-	// const permissions: Permission[] = await res.json();
-	// Pass data to the page via props
-	return {
-		props: {
-			// permissions: permissions.map((p) => ({ id: p.id, type: p.type })),
-			permissions: filteredPermissions.map((p) => {
-				const {users, ...rest} = p;
-				return rest;
-			}),
-			user,
-		},
-	};
+  // const res = await fetch("api/permissions");
+  // const permissions: Permission[] = await res.json();
+  // Pass data to the page via props
+  return {
+    props: {
+      // permissions: permissions.map((p) => ({ id: p.id, type: p.type })),
+      permissions: filteredPermissions.map((p) => {
+        const { users, ...rest } = p;
+        return rest;
+      }),
+      user,
+    },
+  };
 }, sessionOptions);
 
 interface Props {
-	permissions: Permission[];
-	user: User;
+  permissions: Permission[];
+  user: User;
 }
 
 export default function Page(props: Props) {
-	const {permissions, user} = props;
+  const { permissions, user } = props;
 
-	return (
-		<>
-			<Head>
-				<title>EnCoach</title>
-				<meta
-					name="description"
-					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
-				/>
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
-				<link rel="icon" href="/favicon.ico" />
-			</Head>
-			<Layout user={user} className="gap-6">
-				<h1 className="text-2xl font-semibold">Permissions</h1>
-				<div className="flex gap-3 flex-wrap overflow-y-scroll scrollbar-hide h-[80vh] rounded-xl">
-					<PermissionList permissions={permissions} />
-				</div>
-			</Layout>
-		</>
-	);
+  const { setClassName } = React.useContext(LayoutContext);
+  React.useEffect(() => setClassName("gap-6"), [setClassName]);
+
+  return (
+    <>
+      <Head>
+        <title>EnCoach</title>
+        <meta
+          name="description"
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <>
+        <h1 className="text-2xl font-semibold">Permissions</h1>
+        <div className="flex gap-3 flex-wrap overflow-y-scroll scrollbar-hide h-[80vh] rounded-xl">
+          <PermissionList permissions={permissions} />
+        </div>
+      </>
+    </>
+  );
 }

src/pages/record.tsx

@@ -8,7 +8,6 @@ import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
 import { groupByDate } from "@/utils/stats";
 import moment from "moment";
 import { ToastContainer } from "react-toastify";
-import Layout from "@/components/High/Layout";
 import clsx from "clsx";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { uuidv4 } from "@firebase/util";
@@ -30,6 +29,8 @@ import { EntityWithRoles } from "@/interfaces/entity";
 import CardList from "@/components/High/CardList";
 import { requestUser } from "@/utils/api";
 import { useAllowedEntities } from "@/hooks/useEntityPermissions";
+import getPendingEvals from "@/utils/disabled.be";
+import useEvaluationPolling from "@/hooks/useEvaluationPolling";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 	const user = await requestUser(req, res)
@@ -45,9 +46,10 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 	const users = await (isAdmin ? getUsers() : getEntitiesUsers(entitiesIds))
 	const assignments = await (isAdmin ? getAssignments() : getEntitiesAssignments(entitiesIds))
 	const gradingSystems = await getGradingSystemByEntities(entitiesIds)
+	const pendingSessionIds = await getPendingEvals(user.id);
 
 	return {
-		props: serialize({ user, users, assignments, entities, gradingSystems,isAdmin }),
+		props: serialize({ user, users, assignments, entities, gradingSystems, isAdmin, pendingSessionIds }),
 	};
 }, sessionOptions);
 
@@ -59,12 +61,13 @@ interface Props {
 	assignments: Assignment[];
 	entities: EntityWithRoles[]
 	gradingSystems: Grading[]
+	pendingSessionIds: string[];
 	isAdmin:boolean
 }
 
 const MAX_TRAINING_EXAMS = 10;
 
-export default function History({ user, users, assignments, entities, gradingSystems,isAdmin }: Props) {
+export default function History({ user, users, assignments, entities, gradingSystems, isAdmin, pendingSessionIds }: Props) {
 	const router = useRouter();
 	const [statsUserId, setStatsUserId, training, setTraining] = useRecordStore((state) => [
 		state.selectedUser,
@@ -86,9 +89,11 @@ export default function History({ user, users, assignments, entities, gradingSys
 	const groupedStats = useMemo(() => groupByDate(
 		stats.filter((x) => {
 			if (
-				(x.module === "writing" || x.module === "speaking") &&
-				!x.isDisabled &&
-				!x.solutions.every((y) => Object.keys(y).includes("evaluation"))
+				(
+					x.module === "writing" || x.module === "speaking") &&
+					!x.isDisabled && Array.isArray(x.solutions) && 
+					!x.solutions.every((y) => Object.keys(y).includes("evaluation")
+				)
 			)
 				return false;
 			return true;
@@ -180,6 +185,8 @@ export default function History({ user, users, assignments, entities, gradingSys
 		);
 	};
 
+	useEvaluationPolling(pendingSessionIds ? pendingSessionIds : [], "records", user.id);
+
 	return (
 		<>
 			<Head>
@@ -193,7 +200,7 @@ export default function History({ user, users, assignments, entities, gradingSys
 			</Head>
 			<ToastContainer />
 			{user && (
-				<Layout user={user}>
+				<>
 					<RecordFilter user={user} isAdmin={isAdmin} entities={entities} filterState={{ filter: filter, setFilter: setFilter }}>
 						{training && (
 							<div className="flex flex-row">
@@ -226,7 +233,7 @@ export default function History({ user, users, assignments, entities, gradingSys
 							<span className="loading loading-infinity w-32 bg-mti-green-light" />
 						</div>
 					)}
-				</Layout>
+				</>
 			)}
 		</>
 	);

src/pages/register.tsx

@@ -8,9 +8,7 @@ import clsx from "clsx";
 import {Tab} from "@headlessui/react";
 import RegisterIndividual from "./(register)/RegisterIndividual";
 import RegisterCorporate from "./(register)/RegisterCorporate";
-import EmailVerification from "./(auth)/EmailVerification";
 import {sendEmailVerification} from "@/utils/email";
-import useUsers from "@/hooks/useUsers";
 import axios from "axios";
 
 export const getServerSideProps = (context: any) => {

src/pages/settings.tsx

@@ -3,17 +3,13 @@ import Head from "next/head";
 import { withIronSessionSsr } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
 import { ToastContainer } from "react-toastify";
-import Layout from "@/components/High/Layout";
 import CodeGenerator from "./(admin)/CodeGenerator";
 import ExamLoader from "./(admin)/ExamLoader";
-import { Tab } from "@headlessui/react";
-import clsx from "clsx";
 import Lists from "./(admin)/Lists";
 import BatchCodeGenerator from "./(admin)/BatchCodeGenerator";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import BatchCreateUser from "./(admin)/Lists/BatchCreateUser";
 import { checkAccess, getTypesOfUser } from "@/utils/permissions";
-import usePermissions from "@/hooks/usePermissions";
 import { useState } from "react";
 import Modal from "@/components/Modal";
 import IconCard from "@/components/IconCard";
@@ -23,10 +19,9 @@ import CorporateGradingSystem from "./(admin)/CorporateGradingSystem";
 import { CEFR_STEPS } from "@/resources/grading";
 import { User } from "@/interfaces/user";
 import { getUserPermissions } from "@/utils/permissions.be";
-import { Permission, PermissionType } from "@/interfaces/permissions";
+import {  PermissionType } from "@/interfaces/permissions";
 import { getUsers } from "@/utils/users.be";
-import useUsers from "@/hooks/useUsers";
-import { getEntitiesWithRoles, getEntityWithRoles } from "@/utils/entities.be";
+import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { mapBy, serialize, redirect } from "@/utils";
 import { EntityWithRoles } from "@/interfaces/entity";
 import { requestUser } from "@/utils/api";
@@ -84,7 +79,7 @@ export default function Admin({ user, entities, permissions, allUsers, entitiesG
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<ToastContainer />
-			<Layout user={user} className="gap-6">
+			<>
 				<Modal isOpen={modalOpen === "batchCreateUser"} onClose={() => setModalOpen(undefined)} maxWidth="max-w-[85%]">
 					<BatchCreateUser
 						user={user}
@@ -180,7 +175,7 @@ export default function Admin({ user, entities, permissions, allUsers, entitiesG
 				<section className="w-full">
 					<Lists user={user} entities={entities} permissions={permissions} />
 				</section>
-			</Layout>
+			</>
 		</>
 	);
 }

src/pages/statistical.tsx

@@ -1,5 +1,4 @@
 /* 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";
@@ -8,16 +7,15 @@ 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 {  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 {  findAllowedEntities } from "@/utils/permissions";
+import { getSessionsByAssignments } from "@/utils/sessions.be";
 import { isAdmin } from "@/utils/users";
 import { getEntitiesUsers } from "@/utils/users.be";
 import { createColumnHelper } from "@tanstack/react-table";
@@ -222,7 +220,7 @@ export default function Statistical({ user, students, entities, assignments, ses
 				<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">
@@ -301,7 +299,7 @@ export default function Statistical({ user, students, entities, assignments, ses
 						isDownloadLoading={isDownloading}
 					/>
 				)}
-			</Layout>
+			</>
 		</>
 	)
 }

src/pages/stats.tsx

@@ -21,9 +21,8 @@ import {
 import { withIronSessionSsr } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
 import { useEffect, useMemo, useState } from "react";
-import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
+import useStats from "@/hooks/useStats";
 import {
-  averageScore,
   groupBySession,
   groupByModule,
   timestampToMoment,
@@ -32,11 +31,8 @@ import { ToastContainer } from "react-toastify";
 import { capitalize } from "lodash";
 import { Module } from "@/interfaces";
 import ProgressBar from "@/components/Low/ProgressBar";
-import Layout from "@/components/High/Layout";
 import { calculateBandScore } from "@/utils/score";
 import {
-  countExamModules,
-  countFullExams,
   MODULE_ARRAY,
   sortByModule,
 } from "@/utils/moduleUtils";
@@ -109,7 +105,7 @@ export default function Stats({ user, entities, isAdmin }: Props) {
   const [selectedEntity, setSelectedEntity] = useState<string>();
 
   const entitiesToSearch = useMemo(() => {
-    if(selectedEntity) return [selectedEntity]
+    if (selectedEntity) return [selectedEntity];
     if (isAdmin) return undefined;
     return mapBy(entities, "id");
   }, [entities, isAdmin, selectedEntity]);
@@ -137,10 +133,19 @@ export default function Stats({ user, entities, isAdmin }: Props) {
 
   const [intervalDates, setIntervalDates] = useState<Date[]>([]);
 
-  const { data: stats } = useFilterRecordsByUser<Stat[]>(
-    statsUserId,
-    !statsUserId
-  );
+  const {
+    data: {
+      allStats: stats = [],
+      fullExams: exams = 0,
+      uniqueModules: modules = 0,
+      averageScore = 0,
+    },
+  } = useStats<{
+    allStats: Stat[];
+    fullExams: number;
+    uniqueModules: number;
+    averageScore: number;
+  }>(statsUserId, !statsUserId, "stats");
 
   const initialStatDate = useMemo(
     () => (stats[0] ? timestampToMoment(stats[0]).toDate() : null),
@@ -239,7 +244,7 @@ export default function Stats({ user, entities, isAdmin }: Props) {
       </Head>
       <ToastContainer />
       {user && (
-        <Layout user={user} className="gap-8">
+        <>
           <ProfileSummary
             user={userData || user}
             items={[
@@ -247,7 +252,7 @@ export default function Stats({ user, entities, isAdmin }: Props) {
                 icon: (
                   <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
                 ),
-                value: countFullExams(stats),
+                value: exams,
                 label: "Exams",
                 tooltip: "Number of all conducted completed exams",
               },
@@ -255,7 +260,7 @@ export default function Stats({ user, entities, isAdmin }: Props) {
                 icon: (
                   <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
                 ),
-                value: countExamModules(stats),
+                value: modules,
                 label: "Modules",
                 tooltip:
                   "Number of all exam modules performed including Level Test",
@@ -264,7 +269,7 @@ export default function Stats({ user, entities, isAdmin }: Props) {
                 icon: (
                   <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
                 ),
-                value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
+                value: `${averageScore.toFixed(2) || 0}%`,
                 label: "Average Score",
                 tooltip: "Average success rate for questions responded",
               },
@@ -888,7 +893,7 @@ export default function Stats({ user, entities, isAdmin }: Props) {
               <span className="font-semibold ml-1">No stats to display...</span>
             </section>
           )}
-        </Layout>
+        </>
       )}
     </>
   );

src/pages/tickets.tsx

@@ -1,4 +1,3 @@
-import Layout from "@/components/High/Layout";
 import TicketDisplay from "@/components/High/TicketDisplay";
 import Select from "@/components/Low/Select";
 import Modal from "@/components/Modal";
@@ -228,7 +227,7 @@ export default function Tickets() {
 			</Head>
 			<ToastContainer />
 			{user && (
-				<Layout user={user} className="gap-6">
+				<>
 					<h1 className="text-2xl font-semibold">Tickets</h1>
 
 					<div className="flex w-full items-center gap-4">
@@ -317,7 +316,7 @@ export default function Tickets() {
 							))}
 						</tbody>
 					</table>
-				</Layout>
+				</>
 			)}
 		</>
 	);

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

@@ -13,7 +13,6 @@ import { ITrainingContent, ITrainingTip } from "@/training/TrainingInterfaces";
 import formatTip from "@/training/FormatTip";
 import { Stat, User } from "@/interfaces/user";
 import Head from "next/head";
-import Layout from "@/components/High/Layout";
 import { ToastContainer } from "react-toastify";
 import { withIronSessionSsr } from "iron-session/next";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
@@ -149,7 +148,7 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
 			</Head>
 			<ToastContainer />
 
-			<Layout user={user}>
+			<>
 				{loading ? (
 					<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
 						<span className="loading loading-infinity w-32 bg-mti-green-light" />
@@ -343,7 +342,7 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
 						</div>
 					)
 				)}
-			</Layout>
+			</>
 		</>
 	);
 };

src/pages/training/index.tsx

@@ -4,7 +4,6 @@ import {withIronSessionSsr} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
 import {User} from "@/interfaces/user";
 import {ToastContainer} from "react-toastify";
-import Layout from "@/components/High/Layout";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import {useEffect, useState} from "react";
 import clsx from "clsx";
@@ -22,10 +21,8 @@ import RecordFilter from "@/components/Medium/RecordFilter";
 import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
 import { mapBy, redirect, serialize } from "@/utils";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
-import { getAssignmentsByAssignee } from "@/utils/assignments.be";
 import { getEntitiesUsers } from "@/utils/users.be";
 import { EntityWithRoles } from "@/interfaces/entity";
-import { Assignment } from "@/interfaces/results";
 import { requestUser } from "@/utils/api";
 
 export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
@@ -179,7 +176,7 @@ const Training: React.FC<{user: User, entities: EntityWithRoles[], users: User[]
 			</Head>
 			<ToastContainer />
 
-			<Layout user={user}>
+			<>
 				{isNewContentLoading || areRecordsLoading ? (
 					<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
 						<span className="loading loading-infinity w-32 bg-mti-green-light" />
@@ -220,7 +217,7 @@ const Training: React.FC<{user: User, entities: EntityWithRoles[], users: User[]
 						)}
 					</>
 				)}
-			</Layout>
+			</>
 		</>
 	);
 };

src/pages/users/index.tsx

@@ -1,6 +1,4 @@
-import Layout from "@/components/High/Layout";
-import useUser from "@/hooks/useUser";
-import useUsers from "@/hooks/useUsers";
+
 import { Type, User } from "@/interfaces/user";
 import {sessionOptions} from "@/lib/session";
 import useFilterStore from "@/stores/listFilterStore";
@@ -10,8 +8,7 @@ import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import {withIronSessionSsr} from "iron-session/next";
 import Head from "next/head";
 import {useRouter} from "next/router";
-import {useEffect} from "react";
-import {BsArrowLeft, BsChevronLeft} from "react-icons/bs";
+import { BsChevronLeft} from "react-icons/bs";
 import {ToastContainer} from "react-toastify";
 import UserList from "../(admin)/Lists/UserList";
 
@@ -51,7 +48,7 @@ export default function UsersListPage({ user, type }: Props) {
 			</Head>
 			<ToastContainer />
 
-				<Layout user={user}>
+				<>
 					<UserList
 						user={user}
 						type={type}
@@ -70,7 +67,7 @@ export default function UsersListPage({ user, type }: Props) {
 							</div>
 						)}
 					/>
-				</Layout>
+				</>
 		</>
 	);
 }

src/pages/users/performance.tsx

@@ -1,27 +1,22 @@
 import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
-import useGroups from "@/hooks/useGroups";
-import useUsers, { userHashStudent } from "@/hooks/useUsers";
 import { Group, Stat, StudentUser, User } from "@/interfaces/user";
-import { getUserCompanyName } from "@/resources/user";
-import clsx from "clsx";
 import { useRouter } from "next/router";
-import { BsArrowLeft, BsArrowRepeat, BsChevronLeft } from "react-icons/bs";
+import {  BsChevronLeft } from "react-icons/bs";
 import { mapBy, serialize } from "@/utils";
 import { withIronSessionSsr } from "iron-session/next";
 import { getEntitiesUsers, getUsers } from "@/utils/users.be";
 import { sessionOptions } from "@/lib/session";
 import { checkAccess, findAllowedEntities } from "@/utils/permissions";
-import { getEntities, getEntitiesWithRoles } from "@/utils/entities.be";
+import {  getEntitiesWithRoles } from "@/utils/entities.be";
 import { Entity } from "@/interfaces/entity";
-import { getParticipantGroups, getParticipantsGroups } from "@/utils/groups.be";
+import {  getParticipantsGroups } from "@/utils/groups.be";
 import StudentPerformanceList from "../(admin)/Lists/StudentPerformanceList";
 import Head from "next/head";
 import { ToastContainer } from "react-toastify";
-import Layout from "@/components/High/Layout";
 import { requestUser } from "@/utils/api";
 import { redirect } from "@/utils";
 
-export const getServerSideProps = withIronSessionSsr(async ({ req, res, query }) => {
+export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 	const user = await requestUser(req, res)
 	if (!user) return redirect("/login")
 
@@ -74,7 +69,7 @@ const StudentPerformance = ({ user, students, entities, groups }: Props) => {
 			</Head>
 			<ToastContainer />
 
-			<Layout user={user}>
+			<>
 				<div className="flex items-center gap-2">
 					<button
 						onClick={() => {
@@ -86,7 +81,7 @@ const StudentPerformance = ({ user, students, entities, groups }: Props) => {
 					<h2 className="font-bold text-2xl">Student Performance ({students.length})</h2>
 				</div>
 				<StudentPerformanceList items={performanceStudents} stats={stats} />
-			</Layout>
+			</>
 		</>
 	);
 };

src/stores/exam/index.ts

@@ -26,7 +26,6 @@ export const initialState: ExamState = {
     inactivity: 0,
     shuffles: [],
     bgColor: "bg-white",
-    evaluated: [],
     user: undefined,
     navigation: {
         previousDisabled: false,
@@ -39,7 +38,6 @@ export const initialState: ExamState = {
         reviewAll: false,
         finalizeModule: false,
         finalizeExam: false,
-        pendingEvaluation: false,
     },
 };
 
@@ -62,8 +60,6 @@ const useExamStore = create<ExamState & ExamFunctions>((set, get) => ({
     setQuestionIndex: (questionIndex: number) => set(() => ({ questionIndex })),
     setBgColor: (bgColor: string) => set(() => ({ bgColor })),
 
-    setEvaluated: (evaluated: UserSolution[]) => set(() => ({ evaluated })),
-
     setNavigation: (updates: Partial<Navigation>) => set((state) => ({
         navigation: {
             ...state.navigation,
@@ -166,7 +162,7 @@ export const usePersistentExamStore = create<ExamState & ExamFunctions>()(
 
             saveStats: async () => { },
             saveSession: async () => { },
-            setEvaluated: (evaluated: UserSolution[]) => {},
+            setEvalSolutions: (evaluated: UserSolution[]) => {},
             reset: () => set(() => initialState),
             dispatch: (action) => set((state) => rootReducer(state, action))
 

src/stores/exam/reducers/index.ts

@@ -93,20 +93,11 @@ export const rootReducer = (
         };
         case 'FINALIZE_MODULE': {
             const { updateTimers } = action.payload;
-            const solutions = state.userSolutions;
-            const evaluated = state.evaluated;
-
-            const hasUnevaluatedSolutions = solutions.some(solution =>
-                (solution.type === 'speaking' ||
-                    solution.type === 'writing' ||
-                    solution.type === 'interactiveSpeaking') &&
-                !evaluated.some(evaluation => evaluation.exercise === solution.exercise)
-            );
 
             // To finalize a module first flag the timers to be updated
             if (updateTimers) {
                 return {
-                    flags: { ...state.flags, finalizeModule: true, pendingEvaluation: hasUnevaluatedSolutions }
+                    flags: { ...state.flags, finalizeModule: true }
                 }
             } else {
                 // then check whether there are more modules in the exam, if there are
@@ -118,7 +109,6 @@ export const rootReducer = (
                             ...state.flags,
                             finalizeModule: false,
                             finalizeExam: true,
-                            pendingEvaluation: hasUnevaluatedSolutions,
                         }
                     }
                 } else if (state.moduleIndex < state.selectedModules.length - 1) {

src/stores/exam/types.ts

@@ -16,7 +16,6 @@ export interface StateFlags {
 	reviewAll: boolean;
 	finalizeModule: boolean;
 	finalizeExam: boolean;
-	pendingEvaluation: boolean;
 }
 
 export interface ExamState {
@@ -39,8 +38,7 @@ export interface ExamState {
 	user: undefined | string;
 	currentSolution?: UserSolution | undefined;
 	navigation: Navigation;
-	flags: StateFlags,
-	evaluated: UserSolution[];
+	flags: StateFlags;
 }
 
 
@@ -65,8 +63,6 @@ export interface ExamFunctions {
 
 	setTimeIsUp: (timeIsUp: boolean) => void;
 
-	setEvaluated: (evaluated: UserSolution[]) => void,
-
 	saveSession: () => Promise<void>;
 
 	saveStats: () => Promise<void>;

src/utils/api.ts

@@ -1,6 +1,5 @@
 import { User } from "@/interfaces/user";
 import { IncomingMessage, ServerResponse } from "http";
-import { IronSession } from "iron-session";
 import { NextApiRequest, NextApiResponse } from "next";
 import { getUser } from "./users.be";
 

src/utils/assignments.be.ts

@@ -27,13 +27,72 @@ export const getAssignment = async (id: string) => {
 	return await db.collection("assignments").findOne<Assignment>({ id });
 };
 
-export const getAssignmentsByAssignee = async (id: string, filter?: { [key in keyof Partial<Assignment>]: any }) => {
-	return await db
-		.collection("assignments")
-		.find<Assignment>({ assignees: id, ...(!filter ? {} : filter) })
+export const getAssignmentsByAssignee = async (id: string, filter?: {}, projection?: {}, sort?: {}) => {
+	return await db.collection("assignments")
+		.aggregate([
+			{ $match: { assignees: id, ...(!filter ? {} : filter) } },
+			...(sort ? [{ $sort: sort }] : []),
+			...(projection ? [{ $project: projection }] : []),
+		])
 		.toArray();
 };
 
+export const getAssignmentsForStudent = async (id: string, currentDate: string) => {
+	return await db.collection("assignments")
+		.aggregate([{
+			$match: {
+				assignees: id, archived: { $ne: true },
+				endDate: { $gte: currentDate },
+				$or: [
+					{ autoStart: true, startDate: { $lt: currentDate } },
+					{ start: true },
+				],
+			}
+		},
+		{ $sort: { startDate: 1 } },
+		{
+			$project: {
+				id: 1,
+				name: 1,
+				startDate: 1,
+				endDate: 1,
+				exams: {
+					$sortArray: {
+						input: {
+							$filter: {
+								input: "$exams",
+								as: "exam",
+								cond: { $eq: ["$$exam.assignee", id] },
+							},
+						},
+						sortBy: { module: 1 },
+					},
+				},
+				hasResults: {
+					$cond: {
+						if: {
+							$gt: [
+								{
+									$size: {
+										$filter: {
+											input: "$results",
+											as: "result",
+											cond: { $eq: ["$$result.userId", id] },
+										},
+									},
+								},
+								0,
+							],
+						},
+						then: true,
+						else: false,
+					},
+				}
+			}
+		}
+		]).toArray()
+};
+
 export const getAssignmentsByAssignerBetweenDates = async (id: string, startDate: Date, endDate: Date) => {
 	return await db.collection("assignments").find<Assignment>({ assigner: id }).toArray();
 };

src/utils/disabled.be.ts

@@ -0,0 +1,27 @@
+import client from "@/lib/mongodb";
+
+const db = client.db(process.env.MONGODB_DB);
+
+async function getPendingEvals(userId: string): Promise<string[]> {
+  try {
+    const disabledStatsSessions = await db.collection("stats")
+      .distinct("session", {
+        "isDisabled": true,
+        "user": userId
+      });
+
+    const sessionsWithEvals = await db.collection("evaluation")
+      .distinct("session_id", {
+        "session_id": { $in: disabledStatsSessions },
+        "user": userId
+      });
+
+
+    return sessionsWithEvals;
+  } catch (error) {
+    console.error('Error fetching session IDs:', error);
+    throw error;
+  }
+}
+
+export default getPendingEvals;

src/utils/entities.be.ts

@@ -32,7 +32,7 @@ export const getEntitiesWithRoles = async (ids?: string[]): Promise<EntityWithRo
 export const getEntities = async (ids?: string[], projection = {}) => {
 	return await db
 		.collection("entities")
-		.find<Entity>(ids ? { id: { $in: ids } } : {}, projection)
+		.find<Entity>(ids ? { id: { $in: ids } } : {}, { projection })
 		.toArray();
 };
 

src/utils/evaluation.ts

@@ -5,6 +5,7 @@ import {
 	WritingExercise,
 } from "@/interfaces/exam";
 import axios from "axios";
+import { v4 } from "uuid";
 
 export const evaluateWritingAnswer = async (
 	userId: string,
@@ -13,7 +14,7 @@ export const evaluateWritingAnswer = async (
 	task: number,
 	solution: UserSolution,
 	attachment?: string,
-): Promise<void> => {
+): Promise<UserSolution> => {
 	await axios.post("/api/evaluate/writing", {
 		question: `${exercise.prompt}`.replaceAll("\n", ""),
 		answer: solution.solutions[0].solution.trim().replaceAll("\n", " "),
@@ -23,6 +24,18 @@ export const evaluateWritingAnswer = async (
 		exerciseId: exercise.id,
 		attachment,
 	});
+
+	return {
+		...solution,
+		id: v4(),
+		score: {
+			correct: 0,
+			missing: 0,
+			total: 100,
+		},
+		solutions: [{id: exercise.id, solution: solution.solutions[0].solution}],
+		isDisabled: true,
+	};
 };
 
 export const evaluateSpeakingAnswer = async (
@@ -31,12 +44,12 @@ export const evaluateSpeakingAnswer = async (
 	exercise: SpeakingExercise | InteractiveSpeakingExercise,
 	solution: UserSolution,
 	task: number,
-): Promise<void> => {
+): Promise<UserSolution> => {
 	switch (exercise?.type) {
 		case "speaking":
-			await evaluateSpeakingExercise(userId, sessionId, exercise, solution);
+			return await evaluateSpeakingExercise(userId, sessionId, exercise, solution);
 		case "interactiveSpeaking":
-			await evaluateInteractiveSpeakingExercise(userId, sessionId, exercise.id, solution, task);
+			return await evaluateInteractiveSpeakingExercise(userId, sessionId, exercise.id, solution, task);
 	}
 };
 
@@ -50,7 +63,7 @@ const evaluateSpeakingExercise = async (
 	sessionId: string,
 	exercise: SpeakingExercise,
 	solution: UserSolution,
-): Promise<void> => {
+): Promise<UserSolution> => {
 	const formData = new FormData();
 
 	const url = solution.solutions[0].solution.trim() as string;
@@ -76,6 +89,17 @@ const evaluateSpeakingExercise = async (
 	};
 
 	await axios.post(`/api/evaluate/speaking`, formData, config);
+	return {
+		...solution,
+		id: v4(),
+		score: {
+			correct: 0,
+			missing: 0,
+			total: 100,
+		},
+		solutions: [{id: exercise.id, solution: null}],
+		isDisabled: true,
+	};
 };
 
 const evaluateInteractiveSpeakingExercise = async (
@@ -84,7 +108,7 @@ const evaluateInteractiveSpeakingExercise = async (
 	exerciseId: string,
 	solution: UserSolution,
 	task: number,
-): Promise<void> => {
+): Promise<UserSolution> => {
 	const formData = new FormData();
 	formData.append("userId", userId);
 	formData.append("sessionId", sessionId);
@@ -111,4 +135,15 @@ const evaluateInteractiveSpeakingExercise = async (
 	};
 
 	await axios.post(`/api/evaluate/interactiveSpeaking`, formData, config);
+	return {
+		...solution,
+		id: v4(),
+		score: {
+			correct: 0,
+			missing: 0,
+			total: 100,
+		},
+		solutions: [{id: exerciseId, solution: null}],
+		isDisabled: true,
+	};
 };

src/utils/grading.be.ts

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

src/utils/groups.be.ts

@@ -82,8 +82,8 @@ export const getGroups = async (): Promise<WithEntity<Group>[]> => {
 		.aggregate<WithEntity<Group>>(addEntityToGroupPipeline).toArray()
 };
 
-export const getParticipantGroups = async (id: string) => {
-	return await db.collection("groups").find<Group>({ participants: id }).toArray();
+export const getParticipantGroups = async (id: string, projection?: {}) => {
+	return await db.collection("groups").find<Group>({ participants: id }, { projection: projection }).toArray();
 };
 
 export const getParticipantsGroups = async (ids: string[]) => {

src/utils/permissions.ts

@@ -36,6 +36,43 @@ export function checkAccess(user: User, types: Type[], permissions?: PermissionT
 	return true;
 }
 
+export function groupAllowedEntitiesByPermissions(
+	user: User,
+	entities: EntityWithRoles[],
+	permissions: RolePermission[]
+): { [key: string]: EntityWithRoles[] } {
+	if (["admin", "developer"].includes(user?.type)) {
+		return permissions.reduce((acc, permission) => {
+			acc[permission] = entities;
+			return acc;
+		}, {} as { [key: string]: EntityWithRoles[] });
+	}
+
+	const userEntityMap = new Map(user.entities.map(e => [e.id, e]));
+	const roleCache = new Map<string, Role | null>();
+
+	return entities.reduce((acc, entity) => {
+		const userEntity = userEntityMap.get(entity.id);
+		const role = userEntity
+			? roleCache.get(userEntity.role) ??
+			  (() => {
+				  const foundRole = entity.roles.find(r => r.id === userEntity.role) || null;
+				  roleCache.set(userEntity.role, foundRole);
+				  return foundRole;
+			  })()
+			: null;
+
+		permissions.forEach(permission => {
+			if (!acc[permission]) acc[permission] = [];
+			if (role && role.permissions.includes(permission)) {
+				acc[permission].push(entity);
+			}
+		});
+
+		return acc;
+	}, {} as { [key: string]: EntityWithRoles[] });
+}
+
 export function findAllowedEntities(user: User, entities: EntityWithRoles[], permission: RolePermission) {
 	if (["admin", "developer"].includes(user?.type)) return entities
 
@@ -52,7 +89,6 @@ export function findAllowedEntitiesSomePermissions(user: User, entities: EntityW
 
 export function doesEntityAllow(user: User, entity: EntityWithRoles, permission: RolePermission) {
 	if (isAdmin(user)) return true
-
 	const userEntity = findBy(user.entities, 'id', entity?.id)
 	if (!userEntity) return false
 

src/utils/stats.be.ts

@@ -1,12 +1,140 @@
-import {Stat} from "@/interfaces/user";
+import { Stat } from "@/interfaces/user";
 import client from "@/lib/mongodb";
 
 const db = client.db(process.env.MONGODB_DB);
 
-export const getStatsByUser = async (id: string) => await db.collection("stats").find<Stat>({user: id}).toArray();
+export const getStatsByUser = async (id: string) => await db.collection("stats").find<Stat>({ user: id }).toArray();
 
 export const getStatsByUsers = async (ids: string[]) =>
 	await db
 		.collection("stats")
-		.find<Stat>({user: {$in: ids}})
+		.find<Stat>({ user: { $in: ids } })
 		.toArray();
+
+export const getDetailedStatsByUser = async (id: string, query?: string) => {
+	let aggregateArray: any[] = [
+		{ $match: { user: id } },
+		{ $sort: { "date": 1 } },
+	]
+	switch (query) {
+		case "stats":
+			{
+				aggregateArray = aggregateArray.concat([{
+					$group: {
+						_id: "$session",
+						modules: { $addToSet: "$module" },
+						documents: { $push: "$$ROOT" },
+						totalCorrect: { $sum: "$score.correct" },
+						totalQuestions: { $sum: "$score.total" }
+					}
+				},
+				{
+					$project: {
+						_id: 0,
+						hasAllModules: {
+							$eq: [
+								{ $size: { $setIntersection: ["$modules", ["reading", "listening", "writing", "speaking"]] } },
+								4
+							]
+						},
+						uniqueModulesCount: { $size: "$modules" },
+						averageScore: {
+							$cond: [
+								{ $gt: ["$totalQuestions", 0] },
+								{ $multiply: [{ $divide: ["$totalCorrect", "$totalQuestions"] }, 100] },
+								0
+							]
+						},
+						documents: 1
+					}
+				},
+				{
+					$group: {
+						_id: null,
+						fullExams: { $sum: { $cond: ["$hasAllModules", 1, 0] } },
+						uniqueModules: { $sum: "$uniqueModulesCount" },
+						averageScore: {
+							$avg: "$averageScore"
+						},
+						allStats: { $push: "$documents" }
+					}
+				},
+				{
+					$project: {
+						_id: 0,
+						fullExams: 1,
+						uniqueModules: 1,
+						averageScore: 1,
+						allStats: {
+							$reduce: {
+								input: "$allStats",
+								initialValue: [],
+								in: { $concatArrays: ["$$value", "$$this"] }
+							}
+						}
+					}
+				}])
+			}
+			break;
+		case "byModule": {
+			aggregateArray = aggregateArray.concat([{
+				$facet: {
+					moduleCounts: [
+						{
+							$group: {
+								_id: {
+									module: "$module",
+									session: "$session"
+								}
+							}
+						},
+						{
+							$group: {
+								_id: "$_id.module",
+								count: {
+									$count: {}
+								}
+							}
+						},
+						{
+							$project: {
+								_id: 0,
+								module: "$_id",
+								count: "$count"
+							}
+						}
+					],
+					allDocuments: [
+						{
+							$project: {
+								_id: 0
+							}
+						}
+					]
+				}
+			},
+			{
+				$project: {
+					moduleCount: {
+						$arrayToObject: {
+							$map: {
+								input: "$moduleCounts",
+								as: "module",
+								in: {
+									k: "$$module.module",
+									v: "$$module.count"
+								}
+							}
+						}
+					},
+					allDocs: "$allDocuments"
+				}
+			}])
+
+		}
+		default:
+	}
+
+	return await db.collection("stats").aggregate(aggregateArray).toArray().then((result) => query ? result[0] : result
+	);
+}

src/utils/users.be.ts

@@ -6,7 +6,7 @@ import client from "@/lib/mongodb";
 import { EntityWithRoles, WithEntities } from "@/interfaces/entity";
 import { getEntity } from "./entities.be";
 import { getRole } from "./roles.be";
-import { findAllowedEntities } from "./permissions";
+import { findAllowedEntities, groupAllowedEntitiesByPermissions } from "./permissions";
 import { mapBy } from ".";
 
 const db = client.db(process.env.MONGODB_DB);
@@ -38,7 +38,7 @@ export async function searchUsers(searchInput?: string, limit = 50, page = 0, so
 
 		}
 	}
-	
+
 	const [{ users, totalUsers }] = await db
 		.collection("users").aggregate([
 			{
@@ -75,6 +75,39 @@ export async function countUsers(filter?: object) {
 		.countDocuments(filter || {})
 }
 
+export async function countUsersByTypes(types: Type[]) {
+	return await db
+		.collection("users")
+		.aggregate([
+			{
+				$match: {
+					type: { $in: types } // Filter only specified types
+				}
+			},
+			{
+				$group: {
+					_id: "$type",
+					count: { $sum: 1 } // Count documents in each group
+				}
+			},
+			{
+				$group: {
+					_id: null,
+					counts: {
+						$push: { k: "$_id", v: "$count" } // Convert to key-value pairs
+					}
+				}
+			},
+			{
+				$project: {
+					_id: 0,
+					result: { $arrayToObject: "$counts" } // Convert key-value pairs to an object
+				}
+			}
+		]).toArray().then(([{ result }]) => result);
+
+}
+
 export async function getUserWithEntity(id: string): Promise<WithEntities<User> | undefined> {
 	const user = await db.collection("users").findOne<User>({ id: id }, { projection: { _id: 0 } });
 	if (!user) return undefined;
@@ -91,8 +124,8 @@ export async function getUserWithEntity(id: string): Promise<WithEntities<User>
 	return { ...user, entities };
 }
 
-export async function getUser(id: string): Promise<User | undefined> {
-	const user = await db.collection("users").findOne<User>({ id: id }, { projection: { _id: 0 } });
+export async function getUser(id: string, projection = {}): Promise<User | undefined> {
+	const user = await db.collection("users").findOne<User>({ id: id }, { projection: { _id: 0, ...projection } });
 	return !!user ? user : undefined;
 }
 
@@ -120,7 +153,7 @@ export async function countEntityUsers(id: string, filter?: object) {
 export async function getEntitiesUsers(ids: string[], filter?: object, limit?: number, projection = {}) {
 	return await db
 		.collection("users")
-		.find<User>({ "entities.id": { $in: ids }, ...(filter || {}) }, projection)
+		.find<User>({ "entities.id": { $in: ids }, ...(filter || {}) }, { projection })
 		.limit(limit || 0)
 		.toArray();
 }
@@ -199,29 +232,45 @@ export async function getUserBalance(user: User) {
 }
 
 export const filterAllowedUsers = async (user: User, entities: EntityWithRoles[]) => {
-	const studentsAllowedEntities = findAllowedEntities(user, entities, 'view_students')
-	const teachersAllowedEntities = findAllowedEntities(user, entities, 'view_teachers')
-	const corporateAllowedEntities = findAllowedEntities(user, entities, 'view_corporates')
-	const masterCorporateAllowedEntities = findAllowedEntities(user, entities, 'view_mastercorporates')
+	
+	const {
+		["view_students"]: allowedStudentEntities,
+		["view_teachers"]: allowedTeacherEntities,
+		["view_corporates"]: allowedCorporateEntities,
+		["view_mastercorporates"]: allowedMasterCorporateEntities,
+	} = groupAllowedEntitiesByPermissions(user, entities, [
+		"view_students",
+		"view_teachers",
+		'view_corporates',
+		'view_mastercorporates',
+	]);
 
-	const students = await getEntitiesUsers(mapBy(studentsAllowedEntities, 'id'), { type: "student" })
-	const teachers = await getEntitiesUsers(mapBy(teachersAllowedEntities, 'id'), { type: "teacher" })
-	const corporates = await getEntitiesUsers(mapBy(corporateAllowedEntities, 'id'), { type: "corporate" })
-	const masterCorporates = await getEntitiesUsers(mapBy(masterCorporateAllowedEntities, 'id'), { type: "mastercorporate" })
+
+	const students = await getEntitiesUsers(mapBy(allowedStudentEntities, 'id'), { type: "student" })
+	const teachers = await getEntitiesUsers(mapBy(allowedTeacherEntities, 'id'), { type: "teacher" })
+	const corporates = await getEntitiesUsers(mapBy(allowedCorporateEntities, 'id'), { type: "corporate" })
+	const masterCorporates = await getEntitiesUsers(mapBy(allowedMasterCorporateEntities, 'id'), { type: "mastercorporate" })
 
 	return [...students, ...teachers, ...corporates, ...masterCorporates]
 }
 
 export const countAllowedUsers = async (user: User, entities: EntityWithRoles[]) => {
-	const studentsAllowedEntities = findAllowedEntities(user, entities, 'view_students')
-	const teachersAllowedEntities = findAllowedEntities(user, entities, 'view_teachers')
-	const corporateAllowedEntities = findAllowedEntities(user, entities, 'view_corporates')
-	const masterCorporateAllowedEntities = findAllowedEntities(user, entities, 'view_mastercorporates')
+	const {
+		["view_students"]: allowedStudentEntities,
+		["view_teachers"]: allowedTeacherEntities,
+		["view_corporates"]: allowedCorporateEntities,
+		["view_mastercorporates"]: allowedMasterCorporateEntities,
+	} = groupAllowedEntitiesByPermissions(user, entities, [
+		"view_students",
+		"view_teachers",
+		'view_corporates',
+		'view_mastercorporates',
+	]);
 
-	const student = await countEntitiesUsers(mapBy(studentsAllowedEntities, 'id'), { type: "student" })
-	const teacher = await countEntitiesUsers(mapBy(teachersAllowedEntities, 'id'), { type: "teacher" })
-	const corporate = await countEntitiesUsers(mapBy(corporateAllowedEntities, 'id'), { type: "corporate" })
-	const mastercorporate = await countEntitiesUsers(mapBy(masterCorporateAllowedEntities, 'id'), { type: "mastercorporate" })
+	const student = await countEntitiesUsers(mapBy(allowedStudentEntities, 'id'), { type: "student" })
+	const teacher = await countEntitiesUsers(mapBy(allowedTeacherEntities, 'id'), { type: "teacher" })
+	const corporate = await countEntitiesUsers(mapBy(allowedCorporateEntities, 'id'), { type: "corporate" })
+	const mastercorporate = await countEntitiesUsers(mapBy(allowedMasterCorporateEntities, 'id'), { type: "mastercorporate" })
 
 	return { student, teacher, corporate, mastercorporate }
 }