Merge branch 'develop' of https://bitbucket.org/ecropdev/ielts-ui into feature/level-file-upload

2024-08-20 19:37:06 +01:00
parent a82a399d52 a4d8ba72af
commit 30da295c60
37 changed files with 5344 additions and 1817 deletions
--- a/2
+++ b/2
@@ -54,4 +54,4 @@ EXPOSE 3000
 ENV PORT 3000
 ENV HOSTNAME localhost

-CMD ["node", "server.js"]
+CMD HOSTNAME="0.0.0.0" node server.js
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -25,8 +25,8 @@
    "@react-spring/web": "^9.7.4",
    "@tanstack/react-table": "^8.10.1",
    "@types/node": "18.13.0",
-    "@types/react": "18.0.27",
-    "@types/react-dom": "18.0.10",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
    "@use-gesture/react": "^10.3.1",
    "axios": "^1.3.5",
    "bcrypt": "^5.1.1",
@@ -39,6 +39,7 @@
    "daisyui": "^3.1.5",
    "eslint": "8.33.0",
    "eslint-config-next": "13.1.6",
+    "exceljs": "^4.4.0",
    "express-handlebars": "^7.1.2",
    "firebase": "9.19.1",
    "firebase-admin": "^11.10.1",
--- a/src/components/Medium/ModuleTitle.tsx
+++ b/src/components/Medium/ModuleTitle.tsx
@@ -36,10 +36,24 @@ export default function ModuleTitle({
 		<>
 			{showTimer && <Timer minTimer={minTimer} disableTimer={disableTimer} />}
 			<div className="w-full">
-				{partLabel && <div className="text-3xl space-y-4">{partLabel.split('\n\n').map((line, index) => {
-					if(index == 0) return <p className="font-bold">{line}</p>
-					else return <p className="text-2xl font-semibold">{line}</p>
-				})}</div>}
+				{partLabel && (
+					<div className="text-3xl space-y-4">
+						{partLabel.split("\n\n").map((line, index) => {
+							if (index == 0)
+								return (
+									<p key={index} className="font-bold">
+										{line}
+									</p>
+								);
+							else
+								return (
+									<p key={index} className="text-2xl font-semibold">
+										{line}
+									</p>
+								);
+						})}
+					</div>
+				)}
 				<div className={clsx("flex gap-6 w-full h-fit items-center", partLabel ? "mt-10" : "mt-5")}>
 					<div className="w-12 h-12 bg-mti-gray-smoke flex items-center justify-center rounded-lg">{moduleIcon[module]}</div>
 					<div className="flex flex-col gap-3 w-full">
--- a/src/components/PermissionList.tsx
+++ b/src/components/PermissionList.tsx
@@ -1,12 +1,6 @@
 import React from "react";
 import {Permission} from "@/interfaces/permissions";
-import {
-  createColumnHelper,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-  Row,
-} from "@tanstack/react-table";
+import {createColumnHelper, flexRender, getCoreRowModel, useReactTable, Row} from "@tanstack/react-table";
 import Link from "next/link";
 import {convertCamelCaseToReadable} from "@/utils/string";

@@ -23,8 +17,7 @@ const defaultColumns = [
 			<Link
 				href={`/permissions/${row.original.id}`}
 				key={row.id}
-        className="underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
-      >
+				className="underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer">
 				{convertCamelCaseToReadable(getValue() as string)}
 			</Link>
 		),
@@ -38,9 +31,7 @@ export default function PermissionList({ permissions }: Props) {
 		getCoreRowModel: getCoreRowModel(),
 	});

-  const groupedData: { [key: string]: Row<Permission>[] } = table
-    .getRowModel()
-    .rows.reduce((groups: { [key: string]: Row<Permission>[] }, row) => {
+	const groupedData: {[key: string]: Row<Permission>[]} = table.getRowModel().rows.reduce((groups: {[key: string]: Row<Permission>[]}, row) => {
 		const parent = row.original.topic;
 		if (!groups[parent]) {
 			groups[parent] = [];
@@ -50,7 +41,7 @@ export default function PermissionList({ permissions }: Props) {
 	}, {});

 	return (
-    <div className="w-full">
+		<div className="w-full h-full">
 			<div className="w-full flex flex-col gap-2">
 				<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
 					<thead>
@@ -58,12 +49,7 @@ export default function PermissionList({ permissions }: Props) {
 							<tr key={headerGroup.id}>
 								{headerGroup.headers.map((header) => (
 									<th className="py-4 px-4 text-left" key={header.id}>
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
+										{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
 									</th>
 								))}
 							</tr>
@@ -78,19 +64,10 @@ export default function PermissionList({ permissions }: Props) {
 									</td>
 								</tr>
 								{groupedData[parent].map((row, i) => (
-                  <tr
-                    className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
-                    key={row.id}
-                  >
+									<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
 										{row.getVisibleCells().map((cell) => (
-                      <td
-                        className="px-4 py-2 items-center w-fit"
-                        key={cell.id}
-                      >
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
+											<td className="px-4 py-2 items-center w-fit" key={cell.id}>
+												{flexRender(cell.column.columnDef.cell, cell.getContext())}
 											</td>
 										))}
 									</tr>
--- a/src/components/Solutions/FillBlanks.tsx
+++ b/src/components/Solutions/FillBlanks.tsx
@@ -28,6 +28,7 @@ export default function FillBlanksSolutions({
 		const total = text.match(/({{\d+}})/g)?.length || 0;
 		const correct = correctUserSolutions!.filter((x) => {
 			const solution = solutions.find((y) => x.id.toString() === y.id.toString())?.solution;
+			console.log(solution);
 			if (!solution) return false;

 			const option = words.find((w) => {
@@ -36,7 +37,7 @@ export default function FillBlanksSolutions({
 				} else if ('letter' in w) {
 					return w.word.toLowerCase() === x.solution.toLowerCase();
 				} else {
-					return w.id === x.id;
+					return w.id.toString() === x.id.toString();
 				}
 			});
 			if (!option) return false;
--- a/src/components/Solutions/WriteBlanks.tsx
+++ b/src/components/Solutions/WriteBlanks.tsx
@@ -49,15 +49,11 @@ function Blank({
 			{userSolution && !isUserSolutionCorrect() && (
 				<div
 					className="py-2 px-3 rounded-2xl w-fit focus:outline-none my-2 bg-mti-rose-ultralight text-mti-rose-light"
-					placeholder={id}
 					contentEditable={disabled}>
 					{userSolution}
 				</div>
 			)}
-			<div
-				className={clsx("py-2 px-3 rounded-2xl w-fit focus:outline-none my-2", getSolutionStyling())}
-				placeholder={id}
-				contentEditable={disabled}>
+			<div className={clsx("py-2 px-3 rounded-2xl w-fit focus:outline-none my-2", getSolutionStyling())} contentEditable={disabled}>
 				{!solutions ? userInput : solutions.join(" / ")}
 			</div>
 		</span>
--- a/src/components/TrainingContent/ExerciseWalkthrough.tsx
+++ b/src/components/TrainingContent/ExerciseWalkthrough.tsx
@@ -1,14 +1,13 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { animated } from '@react-spring/web';
+import React, {useState, useEffect, useRef, useCallback} from "react";
+import {animated} from "@react-spring/web";
 import {FaRegCirclePlay, FaRegCircleStop} from "react-icons/fa6";
-import HighlightContent from '../HighlightContent';
-import { ITrainingTip, SegmentRef, TimelineEvent } from './TrainingInterfaces';
-
+import HighlightContent from "../HighlightContent";
+import {ITrainingTip, SegmentRef, TimelineEvent} from "./TrainingInterfaces";

 const ExerciseWalkthrough: React.FC<ITrainingTip> = (tip: ITrainingTip) => {
 	const [isAutoPlaying, setIsAutoPlaying] = useState<boolean>(false);
 	const [currentTime, setCurrentTime] = useState<number>(0);
-    const [walkthroughHtml, setWalkthroughHtml] = useState<string>('');
+	const [walkthroughHtml, setWalkthroughHtml] = useState<string>("");
 	const [highlightedPhrases, setHighlightedPhrases] = useState<string[]>([]);
 	const [isPlaying, setIsPlaying] = useState<boolean>(false);
 	const timelineRef = useRef<TimelineEvent[]>([]);
@@ -22,6 +21,7 @@ const ExerciseWalkthrough: React.FC<ITrainingTip> = (tip: ITrainingTip) => {
 			}
 			return !prev;
 		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [currentTime]);

 	const handleAnimationComplete = useCallback(() => {
@@ -33,9 +33,9 @@ const ExerciseWalkthrough: React.FC<ITrainingTip> = (tip: ITrainingTip) => {
 	}, []);

 	const getMaxTime = (): number => {
-        return tip.exercise?.segments.reduce((sum, segment) =>
-            sum + segment.wordDelay * segment.html.split(/\s+/).length + segment.holdDelay, 0
-        ) ?? 0;
+		return (
+			tip.exercise?.segments.reduce((sum, segment) => sum + segment.wordDelay * segment.html.split(/\s+/).length + segment.holdDelay, 0) ?? 0
+		);
 	};

 	useEffect(() => {
@@ -45,11 +45,11 @@ const ExerciseWalkthrough: React.FC<ITrainingTip> = (tip: ITrainingTip) => {

 		tip.exercise?.segments.forEach((segment, index) => {
 			const parser = new DOMParser();
-            const doc = parser.parseFromString(segment.html, 'text/html');
+			const doc = parser.parseFromString(segment.html, "text/html");
 			const words: string[] = [];
 			const walkTree = (node: Node) => {
 				if (node.nodeType === Node.TEXT_NODE) {
-                    words.push(...(node.textContent?.split(/\s+/).filter(word => word.length > 0) || []));
+					words.push(...(node.textContent?.split(/\s+/).filter((word) => word.length > 0) || []));
 				} else if (node.nodeType === Node.ELEMENT_NODE) {
 					Array.from(node.childNodes).forEach(walkTree);
 				}
@@ -62,24 +62,24 @@ const ExerciseWalkthrough: React.FC<ITrainingTip> = (tip: ITrainingTip) => {
 				...segment,
 				words: words,
 				startTime: currentTimePosition,
-                endTime: currentTimePosition + textDuration
+				endTime: currentTimePosition + textDuration,
 			});

 			timeline.push({
-                type: 'text',
+				type: "text",
 				start: currentTimePosition,
 				end: currentTimePosition + textDuration,
-                segmentIndex: index
+				segmentIndex: index,
 			});

 			currentTimePosition += textDuration;

 			timeline.push({
-                type: 'highlight',
+				type: "highlight",
 				start: currentTimePosition,
 				end: currentTimePosition + segment.holdDelay,
 				content: segment.highlight,
-                segmentIndex: index
+				segmentIndex: index,
 			});

 			currentTimePosition += segment.holdDelay;
@@ -89,33 +89,32 @@ const ExerciseWalkthrough: React.FC<ITrainingTip> = (tip: ITrainingTip) => {
 	}, [tip.exercise?.segments]);

 	const updateText = useCallback(() => {
-        const currentEvent = timelineRef.current.find(
-            event => currentTime >= event.start && currentTime < event.end
-        );
+		const currentEvent = timelineRef.current.find((event) => currentTime >= event.start && currentTime < event.end);

 		if (currentEvent) {
-            if (currentEvent.type === 'text') {
+			if (currentEvent.type === "text") {
 				const segment = segmentsRef.current[currentEvent.segmentIndex];
 				const elapsedTime = currentTime - currentEvent.start;
 				const wordsToShow = Math.min(Math.floor(elapsedTime / segment.wordDelay), segment.words.length);

 				const previousSegmentsHtml = segmentsRef.current
 					.slice(0, currentEvent.segmentIndex)
-                    .map(seg => seg.html)
-                    .join('');
+					.map((seg) => seg.html)
+					.join("");

 				const parser = new DOMParser();
-                const doc = parser.parseFromString(segment.html, 'text/html');
+				const doc = parser.parseFromString(segment.html, "text/html");
 				let wordCount = 0;
 				const walkTree = (node: Node, action: (node: Node) => void): boolean => {
 					if (node.nodeType === Node.TEXT_NODE && node.textContent) {
-                        const words = node.textContent.split(/(\s+)/).filter(word => word.length > 0);
-                        if (wordCount + words.filter(w => !/\s+/.test(w)).length <= wordsToShow) {
+						const words = node.textContent.split(/(\s+)/).filter((word) => word.length > 0);
+						if (wordCount + words.filter((w) => !/\s+/.test(w)).length <= wordsToShow) {
 							action(node.cloneNode(true));
-                            wordCount += words.filter(w => !/\s+/.test(w)).length;
+							wordCount += words.filter((w) => !/\s+/.test(w)).length;
 						} else {
 							const remainingWords = wordsToShow - wordCount;
-                            const newTextContent = words.reduce((acc, word) => {
+							const newTextContent = words.reduce(
+								(acc, word) => {
 									if (!/\s+/.test(word) && acc.nonSpaceWords < remainingWords) {
 										acc.text += word;
 										acc.nonSpaceWords++;
@@ -123,7 +122,9 @@ const ExerciseWalkthrough: React.FC<ITrainingTip> = (tip: ITrainingTip) => {
 										acc.text += word;
 									}
 									return acc;
-                            }, { text: '', nonSpaceWords: 0 }).text;
+								},
+								{text: "", nonSpaceWords: 0},
+							).text;
 							const newNode = node.cloneNode(false);
 							newNode.textContent = newTextContent;
 							action(newNode);
@@ -132,28 +133,28 @@ const ExerciseWalkthrough: React.FC<ITrainingTip> = (tip: ITrainingTip) => {
 					} else if (node.nodeType === Node.ELEMENT_NODE) {
 						const clone = node.cloneNode(false);
 						action(clone);
-                        Array.from(node.childNodes).some(child => {
-                            return walkTree(child, childNode => (clone as Node).appendChild(childNode));
+						Array.from(node.childNodes).some((child) => {
+							return walkTree(child, (childNode) => (clone as Node).appendChild(childNode));
 						});
 					}
 					return wordCount >= wordsToShow;
 				};
 				const fragment = document.createDocumentFragment();
-                walkTree(doc.body, node => fragment.appendChild(node));
+				walkTree(doc.body, (node) => fragment.appendChild(node));

 				const serializer = new XMLSerializer();
 				const currentSegmentHtml = Array.from(fragment.childNodes)
-                    .map(node => serializer.serializeToString(node))
-                    .join('');
+					.map((node) => serializer.serializeToString(node))
+					.join("");
 				const newHtml = previousSegmentsHtml + currentSegmentHtml;

 				setWalkthroughHtml(newHtml);
 				setHighlightedPhrases([]);
-            } else if (currentEvent.type === 'highlight') {
+			} else if (currentEvent.type === "highlight") {
 				const newHtml = segmentsRef.current
 					.slice(0, currentEvent.segmentIndex + 1)
-                    .map(seg => seg.html)
-                    .join('');
+					.map((seg) => seg.html)
+					.join("");
 				setWalkthroughHtml(newHtml);
 				setHighlightedPhrases(currentEvent.content || []);
 			}
@@ -221,7 +222,7 @@ const ExerciseWalkthrough: React.FC<ITrainingTip> = (tip: ITrainingTip) => {
 	if (tip.standalone || !tip.exercise) {
 		return (
 			<div className="container mx-auto">
-                <h1 className='text-xl font-bold text-red-600'>The exercise for this tip is not available yet!</h1>
+				<h1 className="text-xl font-bold text-red-600">The exercise for this tip is not available yet!</h1>
 				<div className="tip-container bg-blue-100 p-4 rounded-lg shadow-md mb-4 mt-10">
 					<h3 className="text-xl font-semibold text-blue-800 mb-2">{tip.tipCategory}</h3>
 					<div className="text-gray-700" dangerouslySetInnerHTML={{__html: tip.tipHtml}} />
@@ -230,25 +231,19 @@ const ExerciseWalkthrough: React.FC<ITrainingTip> = (tip: ITrainingTip) => {
 		);
 	}

-
 	return (
 		<div className="container mx-auto">
 			<div className="tip-container bg-blue-100 p-4 rounded-lg shadow-md mb-4">
 				<h3 className="text-xl font-semibold text-blue-800 mb-2">{tip.tipCategory}</h3>
 				<div className="text-gray-700" dangerouslySetInnerHTML={{__html: tip.tipHtml}} />
 			</div>
-            <div className='flex flex-col space-y-4'>
-                <div className='flex flex-row items-center space-x-4 py-4'>
+			<div className="flex flex-col space-y-4">
+				<div className="flex flex-row items-center space-x-4 py-4">
 					<button
 						onClick={toggleAutoPlay}
 						className="p-2 bg-blue-500 text-white rounded-full transition-colors duration-200 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
-                        aria-label={isAutoPlaying ? 'Pause' : 'Play'}
-                    >
-                        {isAutoPlaying ? (
-                            <FaRegCircleStop className="w-6 h-6" />
-                        ) : (
-                            <FaRegCirclePlay className="w-6 h-6" />
-                        )}
+						aria-label={isAutoPlaying ? "Pause" : "Play"}>
+						{isAutoPlaying ? <FaRegCircleStop className="w-6 h-6" /> : <FaRegCirclePlay className="w-6 h-6" />}
 					</button>
 					<input
 						type="range"
@@ -260,21 +255,19 @@ const ExerciseWalkthrough: React.FC<ITrainingTip> = (tip: ITrainingTip) => {
 						onMouseUp={handleSliderMouseUp}
 						onTouchStart={handleSliderMouseDown}
 						onTouchEnd={handleSliderMouseUp}
-                        className='flex-grow'
+						className="flex-grow"
 					/>
 				</div>
-                <div className='flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4'>
-                    <div className='flex-1 bg-white p-6 rounded-lg shadow'>
+				<div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
+					<div className="flex-1 bg-white p-6 rounded-lg shadow">
 						{/*<h2 className="text-xl font-bold mb-4">Question</h2>*/}
 						<div className="mb-4" dangerouslySetInnerHTML={{__html: tip.exercise.question}} />
 						<HighlightContent html={tip.exercise.highlightable} highlightPhrases={highlightedPhrases} />
 					</div>
-                    <div className='flex-1'>
-                        <div className='bg-gray-50 rounded-lg shadow'>
-                            <div className='p-6 space-y-4'>
-                                <animated.div
-                                    dangerouslySetInnerHTML={{ __html: walkthroughHtml }}
-                                />
+					<div className="flex-1">
+						<div className="bg-gray-50 rounded-lg shadow">
+							<div className="p-6 space-y-4">
+								<animated.div dangerouslySetInnerHTML={{__html: walkthroughHtml}} />
 							</div>
 						</div>
 					</div>
--- a/src/dashboards/AssignmentCard.tsx
+++ b/src/dashboards/AssignmentCard.tsx
@@ -20,6 +20,7 @@ interface Props {
 	reload?: Function;
 	allowArchive?: boolean;
 	allowUnarchive?: boolean;
+	allowExcelDownload?: boolean;
 }

 export default function AssignmentCard({
@@ -37,9 +38,11 @@ export default function AssignmentCard({
 	reload,
 	allowArchive,
 	allowUnarchive,
+	allowExcelDownload,
 	users,
 }: Assignment & Props) {
 	const renderPdfIcon = usePDFDownload("assignments");
+	const renderExcelIcon = usePDFDownload("assignments", "excel");
 	const renderArchiveIcon = useAssignmentArchive(id, reload);
 	const renderUnarchiveIcon = useAssignmentUnarchive(id, reload);

@@ -64,6 +67,7 @@ export default function AssignmentCard({
 					<h3 className="text-xl font-semibold">{name}</h3>
 					<div className="flex gap-2">
 						{allowDownload && renderPdfIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")}
+						{allowExcelDownload && renderExcelIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")}
 						{allowArchive && !archived && renderArchiveIcon("text-mti-gray-dim", "text-mti-gray-dim")}
 						{allowUnarchive && archived && renderUnarchiveIcon("text-mti-gray-dim", "text-mti-gray-dim")}
 					</div>
--- a/src/dashboards/Corporate.tsx
+++ b/src/dashboards/Corporate.tsx
@@ -377,6 +377,7 @@ export default function CorporateDashboard({user}: Props) {
 								allowDownload
 								reload={reloadAssignments}
 								allowArchive
+								allowExcelDownload
 							/>
 						))}
 					</div>
@@ -393,6 +394,7 @@ export default function CorporateDashboard({user}: Props) {
 								allowDownload
 								reload={reloadAssignments}
 								allowUnarchive
+								allowExcelDownload
 							/>
 						))}
 					</div>
--- a/src/dashboards/MasterCorporate.tsx
+++ b/src/dashboards/MasterCorporate.tsx
@@ -22,6 +22,7 @@ import {
 	BsPlus,
 	BsPersonFillGear,
 	BsFilter,
+	BsDatabase,
 } from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
@@ -50,6 +51,7 @@ import {groupBy, uniq, uniqBy} from "lodash";
 import Select from "@/components/Low/Select";
 import {Menu, MenuButton, MenuItem, MenuItems} from "@headlessui/react";
 import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
+import MasterStatistical from "./MasterStatistical";

 interface Props {
 	user: MasterCorporateUser;
@@ -308,6 +310,7 @@ export default function MasterCorporateDashboard({user}: Props) {
 	const {groups} = useGroups({admin: user.id, userType: user.type});

 	const masterCorporateUserGroups = [...new Set(groups.filter((u) => u.admin === user.id).flatMap((g) => g.participants))];
+
 	const corporateUserGroups = [...new Set(groups.flatMap((g) => g.participants))];

 	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({corporate: user.id});
@@ -332,7 +335,6 @@ export default function MasterCorporateDashboard({user}: Props) {

 	const studentFilter = (user: User) => user.type === "student" && corporateUserGroups.includes(user.id);
 	const teacherFilter = (user: User) => user.type === "teacher" && corporateUserGroups.includes(user.id);
-
 	const getStatsByStudent = (user: User) => stats.filter((s) => s.user === user.id);

 	const UserDisplay = (displayUser: User) => (
@@ -434,6 +436,19 @@ export default function MasterCorporateDashboard({user}: Props) {
 		);
 	};

+	// const AssignmentsPage = () => {
+	//   const activeFilter = (a: Assignment) =>
+	//     moment(a.endDate).isAfter(moment()) &&
+	//     moment(a.startDate).isBefore(moment()) &&
+	//     a.assignees.length > a.results.length;
+	//   const pastFilter = (a: Assignment) =>
+	//     (moment(a.endDate).isBefore(moment()) ||
+	//       a.assignees.length === a.results.length) &&
+	//     !a.archived;
+	//   const archivedFilter = (a: Assignment) => a.archived;
+	//   const futureFilter = (a: Assignment) =>
+	//     moment(a.startDate).isAfter(moment());
+
 	const StudentPerformancePage = () => {
 		const students = users
 			.filter((x) => x.type === "student" && groups.flatMap((g) => g.participants).includes(x.id))
@@ -571,6 +586,7 @@ export default function MasterCorporateDashboard({user}: Props) {
 								allowDownload
 								reload={reloadAssignments}
 								allowArchive
+								allowExcelDownload
 							/>
 						))}
 					</div>
@@ -587,6 +603,7 @@ export default function MasterCorporateDashboard({user}: Props) {
 								allowDownload
 								reload={reloadAssignments}
 								allowUnarchive
+								allowExcelDownload
 							/>
 						))}
 					</div>
@@ -595,6 +612,29 @@ export default function MasterCorporateDashboard({user}: Props) {
 		);
 	};

+	const MasterStatisticalPage = () => {
+		return (
+			<>
+				<div className="flex flex-col gap-4">
+					<div
+						onClick={() => setPage("")}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<h2 className="text-2xl font-semibold">Master Statistical</h2>
+				</div>
+				<MasterStatistical
+					users={masterCorporateUserGroups.reduce((accm: CorporateUser[], id) => {
+						const user = users.find((u) => u.id === id) as CorporateUser;
+						if (user) return [...accm, user];
+						return accm;
+					}, [])}
+				/>
+			</>
+		);
+	};
+
 	const DefaultDashboard = () => (
 		<>
 			<section className="flex flex-wrap gap-2 items-center -lg:justify-center lg:justify-between text-center">
@@ -654,6 +694,13 @@ export default function MasterCorporateDashboard({user}: Props) {
 					color="purple"
 					onClick={() => setPage("studentsPerformance")}
 				/>
+				{/* <IconCard
+					Icon={BsDatabase}
+					label="Master Statistical"
+					// value={masterCorporateUserGroups.length}
+					color="purple"
+					onClick={() => setPage("statistical")}
+				/> */}
 				<button
 					disabled={isAssignmentsLoading}
 					onClick={() => setPage("assignments")}
@@ -784,6 +831,7 @@ export default function MasterCorporateDashboard({user}: Props) {
 			{page === "corporate" && <CorporateList />}
 			{page === "assignments" && <AssignmentsPage />}
 			{page === "studentsPerformance" && <StudentPerformancePage />}
+			{page === "statistical" && <MasterStatisticalPage />}
 			{page === "" && <DefaultDashboard />}
 		</>
 	);
--- a/src/dashboards/MasterStatistical.tsx
+++ b/src/dashboards/MasterStatistical.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import {CorporateUser} from "@/interfaces/user";
+import {BsBank, BsPersonFill} from "react-icons/bs";
+import IconCard from "./IconCard";
+import useAssignmentsCorporates from "@/hooks/useAssignmentCorporates";
+interface Props {
+	users: CorporateUser[];
+}
+const MasterStatistical = (props: Props) => {
+	const {users} = props;
+
+	const usersList = React.useMemo(() => users.map((x) => x.id), [users]);
+
+	const {assignments} = useAssignmentsCorporates({corporates: usersList});
+
+	return (
+		<div className="flex flex-wrap gap-2 items-center text-center">
+			<IconCard Icon={BsBank} label="Consolidate" value={0} color="purple" onClick={() => console.log("clicked")} />
+			{users.map((group) => (
+				<IconCard
+					key={group.id}
+					Icon={BsBank}
+					label={group.corporateInformation?.companyInformation?.name}
+					value={0}
+					color="purple"
+					onClick={() => console.log("clicked", group)}
+				/>
+			))}
+			<IconCard onClick={() => console.log("clicked")} Icon={BsPersonFill} label="Consolidate Highest Student" color="purple" />
+		</div>
+	);
+};
+
+export default MasterStatistical;
--- a/src/dashboards/Teacher.tsx
+++ b/src/dashboards/Teacher.tsx
@@ -121,7 +121,7 @@ export default function TeacherDashboard({user}: Props) {
 	};

 	const GroupsList = () => {
-		const filter = (x: Group) => x.admin === user.id || x.participants.includes(user.id);
+		const filter = (x: Group) => x.admin === user.id;

 		return (
 			<>
@@ -260,6 +260,7 @@ export default function TeacherDashboard({user}: Props) {
 								allowDownload
 								reload={reloadAssignments}
 								allowArchive
+								allowExcelDownload
 							/>
 						))}
 					</div>
@@ -276,6 +277,7 @@ export default function TeacherDashboard({user}: Props) {
 								allowDownload
 								reload={reloadAssignments}
 								allowUnarchive
+								allowExcelDownload
 							/>
 						))}
 					</div>
@@ -316,7 +318,13 @@ export default function TeacherDashboard({user}: Props) {
 					color="purple"
 				/>
 				{checkAccess(user, ["teacher", "developer"], permissions, "viewGroup") && (
-					<IconCard Icon={BsPeople} label="Groups" value={groups.length} color="purple" onClick={() => setPage("groups")} />
+					<IconCard
+						Icon={BsPeople}
+						label="Groups"
+						value={groups.filter((x) => x.admin === user.id).length}
+						color="purple"
+						onClick={() => setPage("groups")}
+					/>
 				)}
 				<div
 					onClick={() => setPage("assignments")}
--- a/src/exams/Level/index.tsx
+++ b/src/exams/Level/index.tsx
@@ -12,6 +12,7 @@ import { use, useEffect, useState } from "react";
 import TextComponent from "./TextComponent";
 import PartDivider from "./PartDivider";
 import Timer from "@/components/Medium/Timer";
+import { Stat } from "@/interfaces/user";

 interface Props {
    exam: LevelExam;
--- a/src/exams/Selection.tsx
+++ b/src/exams/Selection.tsx
@@ -133,7 +133,7 @@ export default function Selection({user, page, onStart, disableSelection = false
 								<BsArrowRepeat className={clsx("text-xl", isLoading && "animate-spin")} />
 							</div>
 						</div>
-						<span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
+						<span className="text-mti-gray-taupe flex gap-8 overflow-x-auto pb-2">
 							{sessions
 								.sort((a, b) => moment(b.date).diff(moment(a.date)))
 								.map((session) => (
--- a/src/hooks/useAssignmentCorporates.tsx
+++ b/src/hooks/useAssignmentCorporates.tsx
@@ -0,0 +1,34 @@
+import { Assignment } from "@/interfaces/results";
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+export default function useAssignmentsCorporates({
+  corporates,
+}: {
+  corporates: string[];
+}) {
+  const [assignments, setAssignments] = useState<Assignment[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const getData = () => {
+    if (corporates.length === 0) {
+      setAssignments([]);
+      return;
+    }
+
+    setIsLoading(true);
+    axios
+      .get<Assignment[]>(
+        `/api/assignments/corporate?ids=${corporates.join(",")}`
+      )
+      .then(async (response) => {
+        setAssignments(response.data);
+      })
+      .finally(() => setIsLoading(false));
+  };
+
+  useEffect(getData, [corporates]);
+
+  return { assignments, isLoading, isError, reload: getData };
+}
--- a/src/hooks/useAssignments.tsx
+++ b/src/hooks/useAssignments.tsx
@@ -10,7 +10,7 @@ export default function useAssignments({assigner, assignees, corporate}: {assign
 	const getData = () => {
 		setIsLoading(true);
 		axios
-			.get<Assignment[]>(!corporate ? "/api/assignments" : `/api/assignments/corporate?id=${corporate}`)
+			.get<Assignment[]>(!corporate ? "/api/assignments" : `/api/assignments/corporate/${corporate}`)
 			.then(async (response) => {
 				if (assigner) {
 					setAssignments(response.data.filter((a) => a.assigner === assigner));
--- a/src/hooks/usePDFDownload.tsx
+++ b/src/hooks/usePDFDownload.tsx
@@ -1,15 +1,16 @@
 import React from "react";
 import axios from "axios";
 import { toast } from "react-toastify";
-import { BsFilePdf } from "react-icons/bs";
+import { BsFilePdf, BsFileExcel} from "react-icons/bs";

 type DownloadingPdf = {
  [key: string]: boolean;
 };

 type PdfEndpoint = "stats" | "assignments";
+type FileType = "pdf" | "excel";

-export const usePDFDownload = (endpoint: PdfEndpoint) => {
+export const usePDFDownload = (endpoint: PdfEndpoint, file: FileType = 'pdf') => {
  const [downloadingPdf, setDownloadingPdf] = React.useState<DownloadingPdf>(
    {}
  );
@@ -17,7 +18,7 @@ export const usePDFDownload = (endpoint: PdfEndpoint) => {
  const triggerDownload = async (id: string) => {
    try {
      setDownloadingPdf((prev) => ({ ...prev, [id]: true }));
-      const res = await axios.post(`/api/${endpoint}/${id}/export`);
+      const res = await axios.post(`/api/${endpoint}/${id}/export/${file}`);
      toast.success("Report ready!");
      const link = document.createElement("a");
      link.href = res.data;
@@ -45,8 +46,11 @@ export const usePDFDownload = (endpoint: PdfEndpoint) => {
        <span className={`${loadingClasses} loading loading-infinity w-6`} />
      );
    }
+    
+    const Icon = file === "excel" ? BsFileExcel : BsFilePdf;
+
    return (
-      <BsFilePdf
+      <Icon
        className={`${downloadClasses} text-2xl cursor-pointer`}
        onClick={(e) => {
          e.stopPropagation();
--- a/src/pages/(admin)/Lists/GroupList.tsx
+++ b/src/pages/(admin)/Lists/GroupList.tsx
@@ -14,7 +14,7 @@ import {toast} from "react-toastify";
 import readXlsxFile from "read-excel-file";
 import {useFilePicker} from "use-file-picker";
 import {getUserCorporate} from "@/utils/groups";
-import {isAgentUser, isCorporateUser} from "@/resources/user";
+import {isAgentUser, isCorporateUser, USER_TYPE_LABELS} from "@/resources/user";
 import {checkAccess} from "@/utils/permissions";
 import usePermissions from "@/hooks/usePermissions";

@@ -109,7 +109,7 @@ const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
 	const submit = () => {
 		setIsLoading(true);

-		if (name !== group?.name && (name === "Students" || name === "Teachers")) {
+		if (name !== group?.name && (name?.trim() === "Students" || name?.trim() === "Teachers" || name?.trim() === "Corporate")) {
 			toast.error("That group name is reserved and cannot be used, please enter another one.");
 			setIsLoading(false);
 			return;
@@ -202,7 +202,6 @@ const filterTypes = ["corporate", "teacher", "mastercorporate"];
 export default function GroupList({user}: {user: User}) {
 	const [isCreating, setIsCreating] = useState(false);
 	const [editingGroup, setEditingGroup] = useState<Group>();
-	const [filterByUser, setFilterByUser] = useState(false);

 	const {permissions} = usePermissions(user?.id || "");

@@ -210,14 +209,13 @@ export default function GroupList({user}: {user: User}) {
 	const {groups, reload} = useGroups({
 		admin: user && filterTypes.includes(user?.type) ? user.id : undefined,
 		userType: user?.type,
-		adminAdmins: user?.type === "teacher" ? user?.id : undefined,
 	});

-	useEffect(() => {
-		if (user && ["corporate", "teacher", "mastercorporate"].includes(user.type)) {
-			setFilterByUser(true);
-		}
-	}, [user]);
+	const {groups: corporateGroups} = useGroups({
+		admin: user && filterTypes.includes(user?.type) ? user.id : undefined,
+		userType: user?.type,
+		adminAdmins: user?.id,
+	});

 	const deleteGroup = (group: Group) => {
 		if (!confirm(`Are you sure you want to delete "${group.name}"?`)) return;
@@ -241,7 +239,7 @@ export default function GroupList({user}: {user: User}) {
 		columnHelper.accessor("admin", {
 			header: "Admin",
 			cell: (info) => (
-				<div className="tooltip" data-tip={capitalize(users.find((x) => x.id === info.getValue())?.type)}>
+				<div className="tooltip" data-tip={USER_TYPE_LABELS[users.find((x) => x.id === info.getValue())?.type || "student"]}>
 					{users.find((x) => x.id === info.getValue())?.name}
 				</div>
 			),
@@ -304,13 +302,14 @@ export default function GroupList({user}: {user: User}) {
 					user={user}
 					onClose={closeModal}
 					users={
-						user?.type === "corporate" || user?.type === "teacher"
+						checkAccess(user, ["corporate", "teacher", "mastercorporate"])
 							? users.filter(
 									(u) =>
 										groups
 											.filter((g) => g.admin === user.id)
 											.flatMap((g) => g.participants)
-											.includes(u.id) || groups.flatMap((g) => g.participants).includes(u.id),
+											.includes(u.id) ||
+										(user?.type === "teacher" ? corporateGroups : groups).flatMap((g) => g.participants).includes(u.id),
 							  )
 							: users
 					}
--- a/src/pages/(admin)/Lists/UserList.tsx
+++ b/src/pages/(admin)/Lists/UserList.tsx
@@ -58,7 +58,10 @@ export default function UserList({

 	const {users, reload} = useUsers();
 	const {permissions} = usePermissions(user?.id || "");
-	const {groups} = useGroups({admin: user && ["corporate", "teacher", "mastercorporate"].includes(user?.type) ? user.id : undefined});
+	const {groups} = useGroups({
+		admin: user && ["corporate", "teacher", "mastercorporate"].includes(user?.type) ? user.id : undefined,
+		userType: user?.type,
+	});

 	const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
 	const router = useRouter();
@@ -76,8 +79,7 @@ export default function UserList({
 	useEffect(() => {
 		(async () => {
 			if (user && users) {
-				const filterUsers =
-					user.type === "corporate" || user.type === "teacher"
+				const filterUsers = ["corporate", "teacher", "mastercorporate"].includes(user.type)
 					? users.filter((u) => groups.flatMap((g) => g.participants).includes(u.id))
 					: users;

--- a/src/pages/(admin)/Lists/index.tsx
+++ b/src/pages/(admin)/Lists/index.tsx
@@ -1,5 +1,5 @@
 import {User} from "@/interfaces/user";
-import {Tab} from "@headlessui/react";
+import {Tab, TabGroup, TabList, TabPanel, TabPanels} from "@headlessui/react";
 import clsx from "clsx";
 import CodeList from "./CodeList";
 import DiscountList from "./DiscountList";
@@ -14,8 +14,8 @@ export default function Lists({user}: {user: User}) {
 	const {permissions} = usePermissions(user?.id || "");

 	return (
-		<Tab.Group>
-			<Tab.List className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
+		<TabGroup>
+			<TabList className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
 				<Tab
 					className={({selected}) =>
 						clsx(
@@ -90,35 +90,35 @@ export default function Lists({user}: {user: User}) {
 						Discount List
 					</Tab>
 				)}
-			</Tab.List>
-			<Tab.Panels className="mt-2">
-				<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
+			</TabList>
+			<TabPanels className="mt-2">
+				<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
 					<UserList user={user} />
-				</Tab.Panel>
-				{checkAccess(user, ["developer"]) && (
-					<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
+				</TabPanel>
+				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate", "teacher"]) && (
+					<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
 						<ExamList user={user} />
-					</Tab.Panel>
+					</TabPanel>
 				)}
-				<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
+				<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
 					<GroupList user={user} />
-				</Tab.Panel>
+				</TabPanel>
 				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"], permissions, "viewCodes") && (
-					<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
+					<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
 						<CodeList user={user} />
-					</Tab.Panel>
+					</TabPanel>
 				)}
 				{checkAccess(user, ["developer", "admin"]) && (
-					<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
+					<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
 						<PackageList user={user} />
-					</Tab.Panel>
+					</TabPanel>
 				)}
 				{checkAccess(user, ["developer", "admin"]) && (
-					<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
+					<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
 						<DiscountList user={user} />
-					</Tab.Panel>
+					</TabPanel>
 				)}
-			</Tab.Panels>
-		</Tab.Group>
+			</TabPanels>
+		</TabGroup>
 	);
 }
--- a/src/pages/api/assignments/[id]/[export]/excel.ts
+++ b/src/pages/api/assignments/[id]/[export]/excel.ts
@@ -0,0 +1,442 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { app, storage } from "@/firebase";
+import {
+  getFirestore,
+  doc,
+  getDoc,
+  updateDoc,
+  getDocs,
+  query,
+  collection,
+  where,
+  documentId,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
+import { CorporateUser, MasterCorporateUser } from "@/interfaces/user";
+import { User } from "@/interfaces/user";
+import { Module } from "@/interfaces";
+import moment from "moment-timezone";
+import ExcelJS from "exceljs";
+import { getStudentGroupsForUsersWithoutAdmin } from "@/utils/groups.be";
+import { getSpecificUsers, getUser } from "@/utils/users.be";
+import { getUserName } from "@/utils/users";
+interface GroupScoreSummaryHelper {
+  score: [number, number];
+  label: string;
+  sessions: string[];
+}
+
+interface AssignmentData {
+  assigner: string;
+  assignees: string[];
+  results: any;
+  exams: { module: Module }[];
+  startDate: string;
+  excel: {
+    path: string;
+    version: string;
+  };
+  name: string;
+}
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  // if (req.method === "GET") return get(req, res);
+  if (req.method === "POST") return await post(req, res);
+}
+
+function logWorksheetData(worksheet: any) {
+  worksheet.eachRow((row: any, rowNumber: number) => {
+    console.log(`Row ${rowNumber}:`);
+    row.eachCell((cell: any, colNumber: number) => {
+      console.log(`  Cell ${colNumber}: ${cell.value}`);
+    });
+  });
+}
+
+function commonExcel({
+  data,
+  userName,
+  users,
+  sectionName,
+  customTable,
+  customTableHeaders,
+  renderCustomTableData,
+}: {
+  data: AssignmentData;
+  userName: string;
+  users: User[];
+  sectionName: string;
+  customTable: string[][];
+  customTableHeaders: string[];
+  renderCustomTableData: (data: any) => string[];
+}) {
+  const allStats = data.results.flatMap((r: any) => r.stats);
+
+  const uniqueExercises = [...new Set(allStats.map((s: any) => s.exercise))];
+
+  const assigneesData = data.assignees
+    .map((assignee: string) => {
+      const userStats = allStats.filter((s: any) => s.user === assignee);
+      const dates = userStats.map((s: any) => moment(s.date));
+      return {
+        userId: assignee,
+        user: users.find((u) => u.id === assignee),
+        ...userStats.reduce(
+          (acc: any, curr: any) => {
+            return {
+              ...acc,
+              correct: acc.correct + curr.score.correct,
+              missing: acc.missing + curr.score.missing,
+              total: acc.total + curr.score.total,
+            };
+          },
+          { correct: 0, missing: 0, total: 0 }
+        ),
+        firstDate: moment.min(...dates),
+        lastDate: moment.max(...dates),
+        stats: userStats,
+      };
+    })
+    .sort((a, b) => b.correct - a.correct);
+
+  const results = assigneesData.map((r: any) => r.correct);
+  const highestScore = Math.max(...results);
+  const lowestScore = Math.min(...results);
+  const averageScore = results.reduce((a, b) => a + b, 0) / results.length;
+  const firstDate = moment.min(assigneesData.map((r: any) => r.firstDate));
+  const lastDate = moment.max(assigneesData.map((r: any) => r.lastDate));
+
+  const firstSectionData = [
+    {
+      label: sectionName,
+      value: userName,
+    },
+    {
+      label: "Report Download date :",
+      value: moment().format("DD/MM/YYYY"),
+    },
+    { label: "Test Information :", value: data.name },
+    {
+      label: "Date of Test :",
+      value: moment(data.startDate).format("DD/MM/YYYY"),
+    },
+    { label: "Number of Candidates  :", value: data.assignees.length },
+    { label: "Highest score  :", value: highestScore },
+    { label: "Lowest score  :", value: lowestScore },
+    { label: "Average score  :", value: averageScore },
+    { label: "", value: "" },
+    {
+      label: "Date and time of First submission :",
+      value: firstDate.format("DD/MM/YYYY"),
+    },
+    {
+      label: "Date and time of Last submission :",
+      value: lastDate.format("DD/MM/YYYY"),
+    },
+  ];
+
+  // Create a new workbook and add a worksheet
+  const workbook = new ExcelJS.Workbook();
+  const worksheet = workbook.addWorksheet("Report Data");
+
+  // Populate the worksheet with the data
+  firstSectionData.forEach(({ label, value }, index) => {
+    worksheet.getCell(`A${index + 1}`).value = label; // First column (labels)
+    worksheet.getCell(`B${index + 1}`).value = value; // Second column (values)
+  });
+
+  // added empty arrays to force row spacings
+  const customTableAndLine = [[],...customTable, []];
+  customTableAndLine.forEach((row: string[], index) => {
+    worksheet.addRow(row);
+  });
+
+  // Define the static part of the headers (before "Test Sections")
+  const staticHeaders = [
+    "Sr N",
+    "Candidate ID",
+    "First and Last Name",
+    "Passport/ID",
+    "Email ID",
+    "Gender",
+    ...customTableHeaders,
+  ];
+
+  // Define additional headers after "Test Sections"
+  const additionalHeaders = ["Time Spent", "Date", "Score"];
+
+  // Calculate the dynamic columns based on the testSectionsArray
+  const testSectionHeaders = uniqueExercises.map(
+    (section, index) => `Part ${index + 1}`
+  );
+
+  const tableColumnHeadersFirstPart = [
+    ...staticHeaders,
+    ...uniqueExercises.map((a) => "Test Sections"),
+  ];
+  // Add the main header row, merging static columns and "Test Sections"
+  const tableColumnHeaders = [
+    ...tableColumnHeadersFirstPart,
+    ...additionalHeaders,
+  ];
+  worksheet.addRow(tableColumnHeaders);
+
+  // 1 headers rows
+  const startIndexTable = firstSectionData.length + customTableAndLine.length + 1;
+
+  // // Merge "Test Sections" over dynamic number of columns
+  // const tableColumns = staticHeaders.length + numberOfTestSections;
+
+  // K10:M12 = 10,11,12,13
+  // horizontally group Test Sections
+  worksheet.mergeCells(
+    startIndexTable,
+    staticHeaders.length + 1,
+    startIndexTable,
+    tableColumnHeadersFirstPart.length
+  );
+
+  // Add the dynamic second and third header rows for test sections and sub-columns
+  worksheet.addRow([
+    ...Array(staticHeaders.length).fill(""),
+    ...testSectionHeaders,
+    "",
+    "",
+    "",
+  ]);
+  worksheet.addRow([
+    ...Array(staticHeaders.length).fill(""),
+    ...uniqueExercises.map(() => "Grammar & Vocabulary"),
+    "",
+    "",
+    "",
+  ]);
+  worksheet.addRow([
+    ...Array(staticHeaders.length).fill(""),
+    ...uniqueExercises.map(
+      (exercise) => allStats.find((s: any) => s.exercise === exercise).type
+    ),
+    "",
+    "",
+    "",
+  ]);
+
+  // vertically group based on the part, exercise and type
+  staticHeaders.forEach((header, index) => {
+    worksheet.mergeCells(startIndexTable, index + 1, startIndexTable + 3, index + 1);
+  });
+
+  assigneesData.forEach((data, index) => {
+    worksheet.addRow([
+      index + 1,
+      data.userId,
+      data.user.name,
+      data.user.demographicInformation?.passportId,
+      data.user.email,
+      data.user.demographicInformation?.gender,
+      ...renderCustomTableData(data),
+      ...uniqueExercises.map((exercise) => {
+        const score = data.stats.find(
+          (s: any) => s.exercise === exercise && s.user === data.userId
+        ).score;
+        return `${score.correct}/${score.total}`;
+      }),
+      `${Math.ceil(
+        data.stats.reduce((acc: number, curr: any) => acc + curr.timeSpent, 0) /
+          60
+      )} minutes`,
+      data.lastDate.format("DD/MM/YYYY HH:mm"),
+      data.correct,
+    ]);
+  });
+
+  worksheet.addRow([""]);
+  worksheet.addRow([""]);
+
+  for (let i = 0; i < tableColumnHeaders.length; i++) {
+    worksheet.getColumn(i + 1).width = 30;
+  }
+
+  // Apply styles to the headers
+  [startIndexTable].forEach((rowNumber) => {
+    worksheet.getRow(rowNumber).eachCell((cell) => {
+      if (cell.value) {
+        cell.fill = {
+          type: "pattern",
+          pattern: "solid",
+          fgColor: { argb: "FFBFBFBF" }, // Grey color for headers
+        };
+        cell.font = { bold: true };
+        cell.alignment = { vertical: "middle", horizontal: "center" };
+      }
+    });
+  });
+
+  worksheet.addRow(["Printed by: Confidential Information"]);
+  worksheet.addRow(["info@encoach.com"]);
+
+  // Convert workbook to Buffer (Node.js) or Blob (Browser)
+  return workbook.xlsx.writeBuffer();
+}
+
+function corporateAssignment(
+  user: CorporateUser,
+  data: AssignmentData,
+  users: User[]
+) {
+  return commonExcel({
+    data,
+    userName: user.corporateInformation?.companyInformation?.name || "",
+    users,
+    sectionName: "Corporate Name :",
+    customTable: [],
+    customTableHeaders: [],
+    renderCustomTableData: () => [],
+  });
+}
+
+async function mastercorporateAssignment(
+  user: MasterCorporateUser,
+  data: AssignmentData,
+  users: User[]
+) {
+  const userGroups = await getStudentGroupsForUsersWithoutAdmin(
+    user.id,
+    data.assignees
+  );
+  const adminUsers = [...new Set(userGroups.map((g) => g.admin))];
+
+  const userGroupsParticipants = userGroups.flatMap((g) => g.participants);
+  const adminsData = await getSpecificUsers(adminUsers);
+  const companiesData = adminsData.map((user) => {
+    const name = getUserName(user);
+    const users = userGroupsParticipants
+      .filter((p) => data.assignees.includes(p));
+
+    const stats = data.results
+      .flatMap((r: any) => r.stats)
+      .filter((s: any) => users.includes(s.user));
+    const correct = stats.reduce((acc: number, s: any) => acc + s.score.correct, 0);
+    const total = stats.reduce(
+      (acc: number, curr: any) => acc + curr.score.total,
+      0
+    );
+
+    return {
+      name,
+      correct,
+      total,
+    };
+  });
+
+  const customTable = [
+    ...companiesData,
+    {
+      name: "Total",
+      correct: companiesData.reduce((acc, curr) => acc + curr.correct, 0),
+      total: companiesData.reduce((acc, curr) => acc + curr.total, 0),
+    },
+  ].map((c) => [c.name, `${c.correct}/${c.total}`])
+
+  const customTableHeaders = [{ name: "Corporate", helper: (data: any) => data.user.corporateName}];
+  return commonExcel({
+    data,
+    userName: user.corporateInformation?.companyInformation?.name || "",
+    users: users.map((u) => {
+      const userGroup = userGroups.find((g) => g.participants.includes(u.id));
+      const admin = adminsData.find((a) => a.id === userGroup?.admin);
+      return {
+        ...u,
+        corporateName: getUserName(admin),
+      }
+    }),
+    sectionName: "Master Corporate Name :",
+    customTable: [['Corporate Summary'], ...customTable],
+    customTableHeaders: customTableHeaders.map((h) => h.name),
+    renderCustomTableData: (data) => customTableHeaders.map((h) => h.helper(data)),
+  });
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+  // verify if it's a logged user that is trying to export
+  if (req.session.user) {
+    const { id } = req.query as { id: string };
+
+    const docSnap = await getDoc(doc(db, "assignments", id));
+    const data = docSnap.data() as AssignmentData;
+    if (!data) {
+      res.status(400).end();
+      return;
+    }
+
+    // if (
+    //   data.excel &&
+    //   data.excel.path &&
+    //   data.excel.version === process.env.EXCEL_VERSION
+    // ) {
+    //   // if it does, return the excel url
+    //   const fileRef = ref(storage, data.excel.path);
+    //   const url = await getDownloadURL(fileRef);
+    //   res.status(200).end(url);
+    //   return;
+    // }
+
+    const docsSnap = await getDocs(
+      query(collection(db, "users"), where(documentId(), "in", data.assignees))
+    );
+    const users = docsSnap.docs.map((d) => ({
+      ...d.data(),
+      id: d.id,
+    })) as User[];
+
+    const docUser = await getDoc(doc(db, "users", data.assigner));
+    if (docUser.exists()) {
+      // we'll need the user in order to get the user data (name, email, focus, etc);
+      const user = docUser.data() as User;
+
+      // generate the file ref for storage
+      const fileName = `${Date.now().toString()}.xlsx`;
+      const refName = `assignment_report/${fileName}`;
+      const fileRef = ref(storage, refName);
+
+      const getExcelFn = () => {
+        switch (user.type) {
+          case "teacher":
+          case "corporate":
+            return corporateAssignment(user as CorporateUser, data, users);
+          case "mastercorporate":
+            return mastercorporateAssignment(user as MasterCorporateUser, data, users);
+          default:
+            throw new Error("Invalid user type");
+        }
+      };
+      const buffer = await getExcelFn();
+
+      // upload the pdf to storage
+      const snapshot = await uploadBytes(fileRef, buffer, {
+        contentType:
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      });
+
+      // update the stats entries with the pdf url to prevent duplication
+      await updateDoc(docSnap.ref, {
+        excel: {
+          path: refName,
+          version: process.env.EXCEL_VERSION,
+        },
+      });
+      const url = await getDownloadURL(fileRef);
+      res.status(200).end(url);
+
+      return;
+    }
+  }
+
+  res.status(401).json({ message: "Unauthorized" });
+}
--- a/src/pages/api/assignments/[id]/[export]/pdf.tsx
+++ b/src/pages/api/assignments/[id]/[export]/pdf.tsx
--- a/src/pages/api/assignments/corporate/[id].ts
+++ b/src/pages/api/assignments/corporate/[id].ts
--- a/src/pages/api/assignments/corporate/index.ts
+++ b/src/pages/api/assignments/corporate/index.ts
@@ -0,0 +1,34 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { getAllAssignersByCorporate } from "@/utils/groups.be";
+import { getAssignmentsByAssigners } from "@/utils/assignments.be";
+
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res.status(401).json({ ok: false });
+    return;
+  }
+
+  if (req.method === "GET") return await GET(req, res);
+
+  res.status(404).json({ ok: false });
+}
+
+async function GET(req: NextApiRequest, res: NextApiResponse) {
+  const { ids } = req.query as { ids: string };
+  try {
+    const idsList = ids.split(",");
+
+    const assigners = await Promise.all(idsList.map(getAllAssignersByCorporate));
+    const assignmentList = [...assigners.flat(), ...idsList];
+    const assignments = await getAssignmentsByAssigners(assignmentList);
+    res.status(200).json(assignments);
+  } catch (err: any) {
+    res.status(500).json({ error: err.message });
+  }
+}
--- a/src/pages/api/groups/index.ts
+++ b/src/pages/api/groups/index.ts
@@ -1,20 +1,13 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 import type {NextApiRequest, NextApiResponse} from "next";
 import {app} from "@/firebase";
-import {
-  getFirestore,
-  collection,
-  getDocs,
-  setDoc,
-  doc,
-  query,
-  where,
-} from "firebase/firestore";
+import {getFirestore, collection, getDocs, setDoc, doc, query, where} from "firebase/firestore";
 import {withIronSessionApiRoute} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
 import {Group} from "@/interfaces/user";
 import {v4} from "uuid";
-import { updateExpiryDateOnGroup } from "@/utils/groups.be";
+import {updateExpiryDateOnGroup, getGroupsForUser} from "@/utils/groups.be";
+import {uniqBy} from "lodash";

 const db = getFirestore(app);

@@ -30,30 +23,6 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 	if (req.method === "POST") await post(req, res);
 }

-const getGroupsForUser = async (admin: string, participant: string) => {
-  try {
-    const queryConstraints = [
-      ...(admin ? [where("admin", "==", admin)] : []),
-      ...(participant
-        ? [where("participants", "array-contains", participant)]
-        : []),
-    ];
-    const snapshot = await getDocs(
-      queryConstraints.length > 0
-        ? query(collection(db, "groups"), ...queryConstraints)
-        : collection(db, "groups")
-    );
-    const groups = snapshot.docs.map((doc) => ({
-      id: doc.id,
-      ...doc.data(),
-    })) as Group[];
-
-    return groups;
-  } catch (e) {
-    console.error(e);
-    return [];
-  }
-};
 async function get(req: NextApiRequest, res: NextApiResponse) {
 	const {admin, participant} = req.query as {
 		admin: string;
@@ -63,32 +32,17 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 	if (req.session?.user?.type === "mastercorporate") {
 		try {
 			const masterCorporateGroups = await getGroupsForUser(admin, participant);
-      const corporatesFromMaster = masterCorporateGroups
-        .filter((g) => g.name === "Corporate")
-        .flatMap((g) => g.participants);
+			const corporatesFromMaster = masterCorporateGroups.filter((g) => g.name.trim() === "Corporate").flatMap((g) => g.participants);

-      if (corporatesFromMaster.length === 0) {
-        res.status(200).json([]);
-        return;
-      }
-      Promise.all(
-        corporatesFromMaster.map((c) => getGroupsForUser(c, participant))
-      )
-        .then((groups) => {
-          res.status(200).json([...masterCorporateGroups, ...groups.flat()]);
-          return;
-        })
-        .catch((e) => {
-          console.error(e);
-          res.status(500).json({ ok: false });
-          return;
-        });
+			if (corporatesFromMaster.length === 0) return res.status(200).json(masterCorporateGroups);
+
+			const groups = await Promise.all(corporatesFromMaster.map((c) => getGroupsForUser(c, participant)));
+			return res.status(200).json([...masterCorporateGroups, ...uniqBy(groups.flat(), "id")]);
 		} catch (e) {
 			console.error(e);
 			res.status(500).json({ok: false});
 			return;
 		}
-    return;
 	}

 	try {
@@ -103,11 +57,7 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 async function post(req: NextApiRequest, res: NextApiResponse) {
 	const body = req.body as Group;

-  await Promise.all(
-    body.participants.map(
-      async (p) => await updateExpiryDateOnGroup(p, body.admin)
-    )
-  );
+	await Promise.all(body.participants.map(async (p) => await updateExpiryDateOnGroup(p, body.admin)));

 	await setDoc(doc(db, "groups", v4()), {
 		name: body.name,
--- a/src/pages/api/stats/[id]/[export]/pdf.tsx
+++ b/src/pages/api/stats/[id]/[export]/pdf.tsx
--- a/src/pages/generation.tsx
+++ b/src/pages/generation.tsx
@@ -21,7 +21,7 @@ import ListeningGeneration from "./(generation)/ListeningGeneration";
 import WritingGeneration from "./(generation)/WritingGeneration";
 import LevelGeneration from "./(generation)/LevelGeneration";
 import SpeakingGeneration from "./(generation)/SpeakingGeneration";
-import { checkAccess, getTypesOfUser } from "@/utils/permissions";
+import {checkAccess} from "@/utils/permissions";

 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -35,10 +35,7 @@ export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
 		};
 	}

-  if (
-    shouldRedirectHome(user) ||
-    checkAccess(user, getTypesOfUser(["developer"]))
-  ) {
+	if (shouldRedirectHome(user) || !checkAccess(user, ["admin", "mastercorporate", "developer", "corporate"])) {
 		return {
 			redirect: {
 				destination: "/",
@@ -85,14 +82,11 @@ export default function Generation() {
 							required
 						/>

-            <label className="font-normal text-base text-mti-gray-dim">
-              Module
-            </label>
+						<label className="font-normal text-base text-mti-gray-dim">Module</label>
 						<RadioGroup
 							value={module}
 							onChange={setModule}
-              className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between"
-            >
+							className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
 							{[...MODULE_ARRAY].map((x) => (
 								<RadioGroup.Option value={x} key={x}>
 									{({checked}) => (
@@ -119,9 +113,8 @@ export default function Generation() {
 												x === "level" &&
 													(!checked
 														? "bg-white border-mti-gray-platinum"
-                            : "bg-ielts-level/70 border-ielts-level text-white")
-                      )}
-                    >
+														: "bg-ielts-level/70 border-ielts-level text-white"),
+											)}>
 											{capitalize(x)}
 										</span>
 									)}
--- a/src/pages/permissions/[id].tsx
+++ b/src/pages/permissions/[id].tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import Head from "next/head";
-import { useState } from "react";
+import {useEffect, useState} from "react";
 import {withIronSessionSsr} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
@@ -14,11 +14,12 @@ 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 {Type as UserType} from "@/interfaces/user";
+import {getGroups} from "@/utils/groups.be";
 interface BasicUser {
 	id: string;
 	name: string;
-  type: UserType
+	type: UserType;
 }

 interface PermissionWithBasicUsers {
@@ -62,26 +63,34 @@ export const getServerSideProps = withIronSessionSsr(async (context) => {
 	const permission: Permission = await getPermissionDoc(params.id as string);

 	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 users = allUserData.map((u) => ({
 		id: u.id,
 		name: u.name,
-    type: u.type
+		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 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 = users.find((u) => u.id === userId) as BasicUser;
-      if (user) {
-        acc.push(user);
-      }
+	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: {
@@ -92,7 +101,7 @@ export const getServerSideProps = withIronSessionSsr(async (context) => {
 				users: usersData,
 			},
 			user: req.session.user,
-      users,
+			users: filteredUsers,
 		},
 	};
 }, sessionOptions);
@@ -106,13 +115,9 @@ interface Props {
 export default function Page(props: 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];
@@ -125,7 +130,6 @@ export default function Page(props: Props) {
 	};

 	const update = async () => {
-    
 		try {
 			await axios.patch(`/api/permissions/${permission.id}`, {
 				users: selectedUsers,
@@ -149,9 +153,8 @@ export default function Page(props: Props) {
 			</Head>
 			<ToastContainer />
 			<Layout user={user} className="gap-6">
-        <h1 className="text-2xl font-semibold">
-          Permission: {permission.type as string}
-        </h1>
+				<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}
@@ -172,16 +175,11 @@ export default function Page(props: Props) {
 								{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 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>
 									);
 								})}
@@ -190,19 +188,21 @@ export default function Page(props: Props) {
 						<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) => {
+								{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 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>
 		</>
 	);
--- a/src/pages/permissions/index.tsx
+++ b/src/pages/permissions/index.tsx
@@ -7,7 +7,7 @@ import { Permission } from "@/interfaces/permissions";
 import {getPermissionDocs} from "@/utils/permissions.be";
 import {User} from "@/interfaces/user";
 import Layout from "@/components/High/Layout";
-import PermissionList from '@/components/PermissionList'
+import PermissionList from "@/components/PermissionList";

 export const getServerSideProps = withIronSessionSsr(async ({req}) => {
 	const user = req.session.user;
@@ -32,7 +32,14 @@ export const getServerSideProps = withIronSessionSsr(async ({ req }) => {

 	// 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");
+
+		return true;
+	});

 	// const res = await fetch("api/permissions");
 	// const permissions: Permission[] = await res.json();
@@ -40,7 +47,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req }) => {
 	return {
 		props: {
 			// permissions: permissions.map((p) => ({ id: p.id, type: p.type })),
-      permissions: permissions.map((p) => {
+			permissions: filteredPermissions.map((p) => {
 				const {users, ...rest} = p;
 				return rest;
 			}),
@@ -56,6 +63,7 @@ interface Props {

 export default function Page(props: Props) {
 	const {permissions, user} = props;
+
 	return (
 		<>
 			<Head>
@@ -69,7 +77,7 @@ export default function Page(props: Props) {
 			</Head>
 			<Layout user={user} className="gap-6">
 				<h1 className="text-2xl font-semibold">Permissions</h1>
-        <div className="flex gap-3 flex-wrap">
+				<div className="flex gap-3 flex-wrap overflow-y-scroll scrollbar-hide h-[80vh] rounded-xl">
 					<PermissionList permissions={permissions} />
 				</div>
 			</Layout>
--- a/src/pages/training/[id]/index.tsx
+++ b/src/pages/training/[id]/index.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
-import axios from 'axios';
+import {useEffect, useState} from "react";
+import {useRouter} from "next/router";
+import axios from "axios";
 import {Tab} from "@headlessui/react";
 import {AiOutlineFileSearch} from "react-icons/ai";
 import {MdOutlinePlaylistAddCheckCircle, MdOutlineSelfImprovement} from "react-icons/md";
@@ -10,26 +10,26 @@ import clsx from "clsx";
 import Exercise from "@/training/Exercise";
 import TrainingScore from "@/training/TrainingScore";
 import {ITrainingContent, ITrainingTip} from "@/training/TrainingInterfaces";
-import { Stat, User } from '@/interfaces/user';
+import {Stat, User} from "@/interfaces/user";
 import Head from "next/head";
 import Layout from "@/components/High/Layout";
-import { ToastContainer } from 'react-toastify';
+import {ToastContainer} from "react-toastify";
 import {withIronSessionSsr} from "iron-session/next";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import {sessionOptions} from "@/lib/session";
-import qs from 'qs';
-import StatsGridItem from '@/components/StatGridItem';
+import qs from "qs";
+import StatsGridItem from "@/components/StatGridItem";
 import useExamStore from "@/stores/examStore";
 import {usePDFDownload} from "@/hooks/usePDFDownload";
-import useAssignments from '@/hooks/useAssignments';
-import useUsers from '@/hooks/useUsers';
+import useAssignments from "@/hooks/useAssignments";
+import useUsers from "@/hooks/useUsers";
 import Dropdown from "@/components/Dropdown";
-import InfiniteCarousel from '@/components/InfiniteCarousel';
+import InfiniteCarousel from "@/components/InfiniteCarousel";
 import {LuExternalLink} from "react-icons/lu";
-import { uniqBy } from 'lodash';
-import { getExamById } from '@/utils/exams';
-import { convertToUserSolutions } from '@/utils/stats';
-import { sortByModule } from '@/utils/moduleUtils';
+import {uniqBy} from "lodash";
+import {getExamById} from "@/utils/exams";
+import {convertToUserSolutions} from "@/utils/stats";
+import {sortByModule} from "@/utils/moduleUtils";

 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -79,7 +79,7 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {

 	useEffect(() => {
 		const fetchTrainingContent = async () => {
-            if (!id || typeof id !== 'string') return;
+			if (!id || typeof id !== "string") return;

 			try {
 				setLoading(true);
@@ -88,37 +88,41 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {

 				const withExamsStats = {
 					...trainingContent,
-                    exams: await Promise.all(trainingContent.exams.map(async (exam) => {
-                        const stats = await Promise.all(exam.stat_ids.map(async (statId) => {
+					exams: await Promise.all(
+						trainingContent.exams.map(async (exam) => {
+							const stats = await Promise.all(
+								exam.stat_ids.map(async (statId) => {
 									const statResponse = await axios.get<Stat>(`/api/stats/${statId}`);
 									return statResponse.data;
-                        }));
+								}),
+							);
 							return {...exam, stats};
-                    }))
+						}),
+					),
 				};

-                const tips = await axios.get<ITrainingTip[]>('/api/training/walkthrough', {
+				const tips = await axios.get<ITrainingTip[]>("/api/training/walkthrough", {
 					params: {ids: trainingContent.tip_ids},
-                    paramsSerializer: params => qs.stringify(params, { arrayFormat: 'repeat' })
+					paramsSerializer: (params) => qs.stringify(params, {arrayFormat: "repeat"}),
 				});
 				setTrainingTips(tips.data);
 				setTrainingContent(withExamsStats);
 			} catch (error) {
-                router.push('/training');
+				router.push("/training");
 			} finally {
 				setLoading(false);
 			}
 		};

 		fetchTrainingContent();
-    }, [id]);
+	}, [id, router]);

 	const handleNext = () => {
-        setCurrentTipIndex((prevIndex) => (prevIndex + 1));
+		setCurrentTipIndex((prevIndex) => prevIndex + 1);
 	};

 	const handlePrevious = () => {
-        setCurrentTipIndex((prevIndex) => (prevIndex - 1));
+		setCurrentTipIndex((prevIndex) => prevIndex - 1);
 	};

 	const goToExam = (examNumber: number) => {
@@ -145,7 +149,7 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
 				router.push("/exercises");
 			}
 		});
-    }
+	};

 	return (
 		<>
@@ -165,25 +169,26 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
 					<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" />
 					</div>
-                ) : (trainingContent && (
+				) : (
+					trainingContent && (
 						<div className="flex flex-col gap-8">
 							<div className="flex flex-row items-center">
-                            <span className="bg-gray-200 text-gray-800 px-3 py-0.5 rounded-full font-semibold text-lg mr-2">{trainingContent.exams.length}</span>
+								<span className="bg-gray-200 text-gray-800 px-3 py-0.5 rounded-full font-semibold text-lg mr-2">
+									{trainingContent.exams.length}
+								</span>
 								<span>Exams Selected</span>
 							</div>
-                        <div className='h-[15vh] mb-4'>
-                            <InfiniteCarousel height="150px"
-                                overlay={
-                                    <LuExternalLink size={20} />
-                                }
+							<div className="h-[15vh] mb-4">
+								<InfiniteCarousel
+									height="150px"
+									overlay={<LuExternalLink size={20} />}
 									overlayFunc={goToExam}
-                                overlayClassName='bottom-6 right-5 cursor-pointer'
-                            >
+									overlayClassName="bottom-6 right-5 cursor-pointer">
 									{trainingContent.exams.map((exam, examIndex) => (
 										<StatsGridItem
 											key={`exam-${examIndex}`}
-                                        width='380px'
-                                        height='150px'
+											width="380px"
+											height="150px"
 											examNumber={examIndex + 1}
 											stats={exam.stats || []}
 											timestamp={exam.date}
@@ -201,17 +206,14 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
 									))}
 								</InfiniteCarousel>
 							</div>
-                        <div className='flex flex-col'>
-                            <div className='flex flex-row gap-10 -md:flex-col h-full'>
+							<div className="flex flex-col">
+								<div className="flex flex-row gap-10 -md:flex-col h-full">
 									<div className="flex flex-col rounded-3xl p-6 w-1/2 shadow-training-inset -md:w-full max-h-full">
 										<div className="flex flex-row items-center mb-6 gap-1">
 											<MdOutlinePlaylistAddCheckCircle color={"#40A1EA"} size={26} />
 											<h2 className={`text-xl font-semibold text-[#40A1EA]`}>General Evaluation</h2>
 										</div>
-                                    <TrainingScore
-                                        trainingContent={trainingContent}
-                                        gridView={false}
-                                    />
+										<TrainingScore trainingContent={trainingContent} gridView={false} />
 										<div className="w-full h-px bg-[#D9D9D929] my-6"></div>
 										<div className="flex flex-row gap-2 items-center mb-6">
 											<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -219,18 +221,23 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
 													<rect width="24" height="24" fill="#D9D9D9" />
 												</mask>
 												<g mask="url(#mask0_112_168)">
-                                                <path d="M4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V7H4V19H19V21H4ZM8 17C7.45 17 6.97917 16.8042 6.5875 16.4125C6.19583 16.0208 6 15.55 6 15V3H23V15C23 15.55 22.8042 16.0208 22.4125 16.4125C22.0208 16.8042 21.55 17 21 17H8ZM8 15H21V5H8V15ZM10 12H14V7H10V12ZM15 12H19V10H15V12ZM15 9H19V7H15V9Z" fill="#53B2F9" />
+													<path
+														d="M4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V7H4V19H19V21H4ZM8 17C7.45 17 6.97917 16.8042 6.5875 16.4125C6.19583 16.0208 6 15.55 6 15V3H23V15C23 15.55 22.8042 16.0208 22.4125 16.4125C22.0208 16.8042 21.55 17 21 17H8ZM8 15H21V5H8V15ZM10 12H14V7H10V12ZM15 12H19V10H15V12ZM15 9H19V7H15V9Z"
+														fill="#53B2F9"
+													/>
 												</g>
 											</svg>
 											<h3 className="text-xl font-semibold text-[#40A1EA]">Performance Breakdown by Exam:</h3>
 										</div>
-                                    <ul className='overflow-auto scrollbar-hide flex-grow'>
+										<ul className="overflow-auto scrollbar-hide flex-grow">
 											{trainingContent.exams.flatMap((exam, index) => (
 												<li key={index} className="flex flex-col mb-2 bg-[#22E1B30F] p-4 rounded-xl border">
 													<div className="flex flex-row font-semibold border-b-2 border-[#D9D9D929] text-[#22E1B3] mb-2">
-                                                    <div className='flex items-center border-r-2 border-[#D9D9D929] pr-2'>
-                                                        <span className='mr-1'>Exam</span>
-                                                        <span className="font-semibold bg-gray-200 text-gray-800 px-2 rounded-full text-sm">{index + 1}</span>
+														<div className="flex items-center border-r-2 border-[#D9D9D929] pr-2">
+															<span className="mr-1">Exam</span>
+															<span className="font-semibold bg-gray-200 text-gray-800 px-2 rounded-full text-sm">
+																{index + 1}
+															</span>
 														</div>
 														<span className="pl-2">{exam.score}%</span>
 													</div>
@@ -243,7 +250,7 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
 										</ul>
 									</div>
 									<div className="flex flex-col rounded-3xl p-6 w-1/2 shadow-training-inset -md:w-full">
-                                    <div className='flex flex-col'>
+										<div className="flex flex-col">
 											<div className="flex flex-row items-center mb-4 gap-1">
 												<AiOutlineFileSearch color="#40A1EA" size={24} />
 												<h3 className="text-xl font-semibold text-[#40A1EA]">Identified Weak Areas</h3>
@@ -257,12 +264,11 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
 																	key={index}
 																	className={({selected}) =>
 																		clsx(
-                                                                        'text-[#53B2F9] pb-2 border-b-2',
-                                                                        'focus:outline-none',
-                                                                        selected ? 'border-[#1B78BE]' : 'border-[#1B78BE0F]'
+																			"text-[#53B2F9] pb-2 border-b-2",
+																			"focus:outline-none",
+																			selected ? "border-[#1B78BE]" : "border-[#1B78BE0F]",
 																		)
-                                                                }
-                                                            >
+																	}>
 																	{x.area}
 																</Tab>
 															))}
@@ -270,10 +276,7 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
 													</Tab.List>
 													<Tab.Panels>
 														{trainingContent.weak_areas.map((x, index) => (
-                                                        <Tab.Panel
-                                                            key={index}
-                                                            className="p-3 bg-[#FBFBFB] rounded-lg border border-[#0000000F]"
-                                                        >
+															<Tab.Panel key={index} className="p-3 bg-[#FBFBFB] rounded-lg border border-[#0000000F]">
 																<p>{x.comment}</p>
 															</Tab.Panel>
 														))}
@@ -288,15 +291,23 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
 										</div>

 										<div className="flex flex-grow bg-[#FBFBFB] border rounded-xl p-4">
-                                        <div className='flex flex-col'>
+											<div className="flex flex-col">
 												<div className="flex flex-row items-center gap-1 mb-4">
 													<div className="flex items-center justify-center w-[48px] h-[48px]">
-                                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+														<svg
+															width="24"
+															height="24"
+															viewBox="0 0 24 24"
+															fill="none"
+															xmlns="http://www.w3.org/2000/svg">
 															<mask id="mask0_112_445" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
 																<rect width="24" height="24" fill="#D9D9D9" />
 															</mask>
 															<g mask="url(#mask0_112_445)">
-                                                            <path d="M6 17H11V15H6V17ZM16 17H18V15H16V17ZM6 13H11V11H6V13ZM16 13H18V7H16V13ZM6 9H11V7H6V9ZM4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V5C2 4.45 2.19583 3.97917 2.5875 3.5875C2.97917 3.19583 3.45 3 4 3H20C20.55 3 21.0208 3.19583 21.4125 3.5875C21.8042 3.97917 22 4.45 22 5V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H4ZM4 19H20V5H4V19Z" fill="#1C1B1F" />
+																<path
+																	d="M6 17H11V15H6V17ZM16 17H18V15H16V17ZM6 13H11V11H6V13ZM16 13H18V7H16V13ZM6 9H11V7H6V9ZM4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V5C2 4.45 2.19583 3.97917 2.5875 3.5875C2.97917 3.19583 3.45 3 4 3H20C20.55 3 21.0208 3.19583 21.4125 3.5875C21.8042 3.97917 22 4.45 22 5V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H4ZM4 19H20V5H4V19Z"
+																	fill="#1C1B1F"
+																/>
 															</g>
 														</svg>
 													</div>
@@ -305,12 +316,16 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
 												<ul className="flex flex-col flex-grow space-y-4 pb-2 overflow-y-auto scrollbar-hide">
 													{trainingContent.exams.map((exam, index) => (
 														<li key={index} className="border rounded-lg bg-white">
-                                                        <Dropdown title={
-                                                            <div className='flex flex-row items-center'>
+															<Dropdown
+																title={
+																	<div className="flex flex-row items-center">
 																		<span className="mr-1">Exam</span>
-                                                                <span className="font-semibold bg-gray-200 text-gray-800 px-2 rounded-full text-sm mt-0.5">{index + 1}</span>
+																		<span className="font-semibold bg-gray-200 text-gray-800 px-2 rounded-full text-sm mt-0.5">
+																			{index + 1}
+																		</span>
 																	</div>
-                                                        } open={index == 0}>
+																}
+																open={index == 0}>
 																<span>{exam.detailed_summary}</span>
 															</Dropdown>
 														</li>
@@ -337,21 +352,20 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
 										</Button>
 										<Button
 											color="purple"
-                                        disabled={currentTipIndex == (trainingTips.length - 1)}
+											disabled={currentTipIndex == trainingTips.length - 1}
 											onClick={handleNext}
 											className="max-w-[200px] self-end w-full">
 											Next
 										</Button>
 									</div>
 								</div>
-
 							</div>
 						</div>
-                ))}
+					)
+				)}
 			</Layout>
 		</>
 	);
-}
+};

 export default TrainingContent;
-
--- a/src/pages/training/index.tsx
+++ b/src/pages/training/index.tsx
@@ -84,6 +84,7 @@ const Training: React.FC<{user: User}> = ({user}) => {
 		return () => {
 			router.events.off("routeChangeStart", handleRouteChange);
 		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [router.events, setTrainingStats]);

 	useEffect(() => {
@@ -104,6 +105,7 @@ const Training: React.FC<{user: User}> = ({user}) => {
 				}
 			});
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [isNewContentLoading]);

 	useEffect(() => {
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2,3 +2,89 @@
@tailwind components;
@tailwind utilities;

+@layer utilities {
+	.scrollbar-hide {
+		-ms-overflow-style: none;
+		/* IE and Edge */
+		scrollbar-width: none;
+		/* Firefox */
+	}
+
+	.scrollbar-hide::-webkit-scrollbar {
+		display: none;
+		/* Chrome, Safari and Opera */
+	}
+}
+
+.training-scrollbar::-webkit-scrollbar {
+	@apply w-1.5;
+}
+
+.training-scrollbar::-webkit-scrollbar-track {
+	@apply bg-transparent;
+}
+
+.training-scrollbar::-webkit-scrollbar-thumb {
+	@apply bg-gray-400 hover:bg-gray-500 rounded-full transition-colors opacity-50 hover:opacity-75;
+}
+
+.training-scrollbar {
+	scrollbar-width: thin;
+	scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
+}
+
+:root {
+	--max-width: 1100px;
+	--border-radius: 12px;
+	--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
+		"Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+
+	--foreground-rgb: 53, 51, 56;
+	--background-start-rgb: 245, 245, 245;
+	--background-end-rgb: 245, 245, 245;
+
+	--primary-glow: conic-gradient(from 180deg at 50% 50%, #16abff33 0deg, #0885ff33 55deg, #54d6ff33 120deg, #0071ff33 160deg, transparent 360deg);
+	--secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+
+	--tile-start-rgb: 239, 245, 249;
+	--tile-end-rgb: 228, 232, 233;
+	--tile-border: conic-gradient(#00000080, #00000040, #00000030, #00000020, #00000010, #00000010, #00000080);
+
+	--callout-rgb: 238, 240, 241;
+	--callout-border-rgb: 172, 175, 176;
+	--card-rgb: 180, 185, 188;
+	--card-border-rgb: 131, 134, 135;
+}
+
+* {
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+}
+
+html {
+	min-height: 100vh !important;
+	height: 100%;
+	max-width: 100vw;
+	overflow-x: hidden;
+	overflow-y: auto;
+	font-family: "Open Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
+}
+
+body {
+	min-height: 100vh !important;
+	height: 100%;
+	max-width: 100vw;
+	overflow-x: hidden;
+	font-family: "Open Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
+}
+
+body {
+	color: rgb(var(--foreground-rgb));
+	background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
+}
+
+a {
+	color: inherit;
+	text-decoration: none;
+}
--- a/src/utils/assignments.be.ts
+++ b/src/utils/assignments.be.ts
@@ -9,6 +9,11 @@ export const getAssignmentsByAssigner = async (id: string) => {
 	return docs.map((x) => ({...x.data(), id: x.id})) as Assignment[];
 };

+export const getAssignmentsByAssignerBetweenDates = async (id: string, startDate: Date, endDate: Date) => {
+	const {docs} = await getDocs(query(collection(db, "assignments"), where("assigner", "==", id), ));
+	return docs.map((x) => ({...x.data(), id: x.id})) as Assignment[];
+};
+
 export const getAssignmentsByAssigners = async (ids: string[]) => {
 	return (await Promise.all(ids.map(getAssignmentsByAssigner))).flat();
 };
--- a/src/utils/groups.be.ts
+++ b/src/utils/groups.be.ts
@@ -33,6 +33,11 @@ export const updateExpiryDateOnGroup = async (participantID: string, corporateID
 	return;
 };

+export const getGroups = async () => {
+	const groupDocs = await getDocs(collection(db, "groups"));
+	return groupDocs.docs.map((x) => ({...x.data(), id: x.id})) as Group[];
+};
+
 export const getUserGroups = async (id: string): Promise<Group[]> => {
 	const groupDocs = await getDocs(query(collection(db, "groups"), where("admin", "==", id)));
 	return groupDocs.docs.map((x) => ({...x.data(), id})) as Group[];
@@ -49,3 +54,54 @@ export const getAllAssignersByCorporate = async (corporateID: string): Promise<s

 	return teacherPromises.filter((x) => !!x).flat() as string[];
 };
+
+export const getGroupsForUser = async (admin: string, participant: string) => {
+	try {
+	  const queryConstraints = [
+		...(admin ? [where("admin", "==", admin)] : []),
+		...(participant
+		  ? [where("participants", "array-contains", participant)]
+		  : []),
+	  ];
+	  const snapshot = await getDocs(
+		queryConstraints.length > 0
+		  ? query(collection(db, "groups"), ...queryConstraints)
+		  : collection(db, "groups")
+	  );
+	  const groups = snapshot.docs.map((doc) => ({
+		id: doc.id,
+		...doc.data(),
+	  })) as Group[];
+  
+	  return groups;
+	} catch (e) {
+	  console.error(e);
+	  return [];
+	}
+  };
+
+  export const getStudentGroupsForUsersWithoutAdmin = async (admin: string, participants: string[]) => {
+	try {
+	  const queryConstraints = [
+		...(admin ? [where("admin", "!=", admin)] : []),
+		...(participants
+		  ? [where("participants", "array-contains-any", participants)]
+		  : []),
+		  where("name", "==", "Students"),
+	  ];
+	  const snapshot = await getDocs(
+		queryConstraints.length > 0
+		  ? query(collection(db, "groups"), ...queryConstraints)
+		  : collection(db, "groups")
+	  );
+	  const groups = snapshot.docs.map((doc) => ({
+		id: doc.id,
+		...doc.data(),
+	  })) as Group[];
+  
+	  return groups;
+	} catch (e) {
+	  console.error(e);
+	  return [];
+	}
+  };
--- a/src/utils/users.be.ts
+++ b/src/utils/users.be.ts
@@ -1,6 +1,14 @@
 import { app } from "@/firebase";

-import {collection, doc, getDoc, getDocs, getFirestore} from "firebase/firestore";
+import {
+  collection,
+  doc,
+  getDoc,
+  getDocs,
+  getFirestore,
+  query,
+  where,
+} from "firebase/firestore";
 import { User } from "@/interfaces/user";
 const db = getFirestore(app);

@@ -18,3 +26,18 @@ export async function getUser(id: string) {

  return { ...userDoc.data(), id } as User;
 }
+
+export async function getSpecificUsers(ids: string[]) {
+  if (ids.length === 0) return [];
+
+  const snapshot = await getDocs(
+    query(collection(db, "users"), where("id", "in", ids))
+  );
+
+  const groups = snapshot.docs.map((doc) => ({
+    id: doc.id,
+    ...doc.data(),
+  })) as User[];
+
+  return groups;
+}
--- a/yarn.lock
+++ b/yarn.lock