Merged main into feature/training-content

Search on user list with mongo search query
Pagination on UserList
2024-09-09 00:40:36 +00:00 · 2024-09-09 01:38:11 +01:00 · 2024-09-09 01:22:13 +01:00 · 2024-09-09 00:06:51 +01:00 · 2024-09-09 00:02:34 +01:00 · 2024-09-08 23:24:27 +01:00
20 changed files with 504 additions and 375 deletions
--- a/src/components/DemographicInformationInput.tsx
+++ b/src/components/DemographicInformationInput.tsx
@@ -17,7 +17,7 @@ import moment from "moment";

 interface Props {
 	user: User;
-	mutateUser: KeyedMutator<User>;
+	mutateUser: (user: User) => void;
 }

 export default function DemographicInformationInput({user, mutateUser}: Props) {
--- a/src/components/List.tsx
+++ b/src/components/List.tsx
@@ -1,51 +1,77 @@
 import {Column, flexRender, getCoreRowModel, getSortedRowModel, useReactTable} from "@tanstack/react-table";
+import {useMemo, useState} from "react";
+import Button from "./Low/Button";
+
+const SIZE = 25;

 export default function List<T>({data, columns}: {data: T[]; columns: any[]}) {
+	const [page, setPage] = useState(0);
+
+	const items = useMemo(() => data.slice(page * SIZE, (page + 1) * SIZE > data.length ? data.length : (page + 1) * SIZE), [data, page]);
+
 	const table = useReactTable({
-		data,
+		data: items,
 		columns: columns,
 		getCoreRowModel: getCoreRowModel(),
 		getSortedRowModel: getSortedRowModel(),
 	});

 	return (
-		<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
-			<thead>
-				{table.getHeaderGroups().map((headerGroup) => (
-					<tr key={headerGroup.id}>
-						{headerGroup.headers.map((header) => (
-							<th key={header.id} colSpan={header.colSpan}>
-								{header.isPlaceholder ? null : (
-									<>
-										<div
-											{...{
-												className: header.column.getCanSort() ? "cursor-pointer select-none py-4 text-left first:pl-4" : "",
-												onClick: header.column.getToggleSortingHandler(),
-											}}>
-											{flexRender(header.column.columnDef.header, header.getContext())}
-											{{
-												asc: " 🔼",
-												desc: " 🔽",
-											}[header.column.getIsSorted() as string] ?? null}
-										</div>
-									</>
-								)}
-							</th>
-						))}
-					</tr>
-				))}
-			</thead>
-			<tbody className="px-2">
-				{table.getRowModel().rows.map((row) => (
-					<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
-						{row.getVisibleCells().map((cell) => (
-							<td className="px-4 py-2" key={cell.id}>
-								{flexRender(cell.column.columnDef.cell, cell.getContext())}
-							</td>
-						))}
-					</tr>
-				))}
-			</tbody>
-		</table>
+		<div className="w-full h-full flex flex-col gap-2">
+			<div className="w-full flex gap-2 justify-between">
+				<Button className="w-full max-w-[200px]" disabled={page === 0} onClick={() => setPage((prev) => prev - 1)}>
+					Previous Page
+				</Button>
+				<div className="flex items-center gap-4 w-fit">
+					<span className="opacity-80">
+						{page * SIZE + 1} - {(page + 1) * SIZE > data.length ? data.length : (page + 1) * SIZE} / {data.length}
+					</span>
+					<Button className="w-[200px]" disabled={(page + 1) * SIZE >= data.length} onClick={() => setPage((prev) => prev + 1)}>
+						Next Page
+					</Button>
+				</div>
+			</div>
+
+			<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+				<thead>
+					{table.getHeaderGroups().map((headerGroup) => (
+						<tr key={headerGroup.id}>
+							{headerGroup.headers.map((header) => (
+								<th key={header.id} colSpan={header.colSpan}>
+									{header.isPlaceholder ? null : (
+										<>
+											<div
+												{...{
+													className: header.column.getCanSort()
+														? "cursor-pointer select-none py-4 text-left first:pl-4"
+														: "",
+													onClick: header.column.getToggleSortingHandler(),
+												}}>
+												{flexRender(header.column.columnDef.header, header.getContext())}
+												{{
+													asc: " 🔼",
+													desc: " 🔽",
+												}[header.column.getIsSorted() as string] ?? null}
+											</div>
+										</>
+									)}
+								</th>
+							))}
+						</tr>
+					))}
+				</thead>
+				<tbody className="px-2">
+					{table.getRowModel().rows.map((row) => (
+						<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
+							{row.getVisibleCells().map((cell) => (
+								<td className="px-4 py-2" key={cell.id}>
+									{flexRender(cell.column.columnDef.cell, cell.getContext())}
+								</td>
+							))}
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</div>
 	);
 }
--- a/src/dashboards/Admin.tsx
+++ b/src/dashboards/Admin.tsx
@@ -31,12 +31,40 @@ interface Props {
 	user: User;
 }

+const studentHash = {
+	type: "student",
+	size: 25,
+	orderBy: "registrationDate",
+};
+
+const teacherHash = {
+	type: "teacher",
+	size: 25,
+	orderBy: "registrationDate",
+};
+
+const corporateHash = {
+	type: "corporate",
+	size: 25,
+	orderBy: "registrationDate",
+};
+
+const agentsHash = {
+	type: "agent",
+	size: 25,
+	orderBy: "registrationDate",
+};
+
 export default function AdminDashboard({user}: Props) {
 	const [page, setPage] = useState("");
 	const [selectedUser, setSelectedUser] = useState<User>();
 	const [showModal, setShowModal] = useState(false);

-	const {users, reload, isLoading} = useUsers();
+	const {users: students, total: totalStudents, reload: reloadStudents, isLoading: isStudentsLoading} = useUsers(studentHash);
+	const {users: teachers, total: totalTeachers, reload: reloadTeachers, isLoading: isTeachersLoading} = useUsers(teacherHash);
+	const {users: corporates, total: totalCorporate, reload: reloadCorporates, isLoading: isCorporatesLoading} = useUsers(corporateHash);
+	const {users: agents, total: totalAgents, reload: reloadAgents, isLoading: isAgentsLoading} = useUsers(agentsHash);
+
 	const {groups} = useGroups({});
 	const {pending, done} = usePaymentStatusUsers();

@@ -47,9 +75,6 @@ export default function AdminDashboard({user}: Props) {
 		setShowModal(!!selectedUser && router.asPath === "/#");
 	}, [selectedUser, router.asPath]);

-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	useEffect(reload, [page]);
-
 	const inactiveCountryManagerFilter = (x: User) => x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate);

 	const UserDisplay = (displayUser: User) => (
@@ -279,50 +304,50 @@ export default function AdminDashboard({user}: Props) {
 			<section className="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 place-items-center items-center justify-between">
 				<IconCard
 					Icon={BsPersonFill}
-					isLoading={isLoading}
+					isLoading={isStudentsLoading}
 					label="Students"
-					value={users.filter((x) => x.type === "student").length}
+					value={totalStudents}
 					onClick={() => router.push("/#students")}
 					color="purple"
 				/>
 				<IconCard
 					Icon={BsPencilSquare}
-					isLoading={isLoading}
+					isLoading={isTeachersLoading}
 					label="Teachers"
-					value={users.filter((x) => x.type === "teacher").length}
+					value={totalTeachers}
 					onClick={() => router.push("/#teachers")}
 					color="purple"
 				/>
 				<IconCard
 					Icon={BsBank}
-					isLoading={isLoading}
+					isLoading={isCorporatesLoading}
 					label="Corporate"
-					value={users.filter((x) => x.type === "corporate").length}
+					value={totalCorporate}
 					onClick={() => router.push("/#corporate")}
 					color="purple"
 				/>
 				<IconCard
 					Icon={BsBriefcaseFill}
-					isLoading={isLoading}
+					isLoading={isAgentsLoading}
 					label="Country Managers"
-					value={users.filter((x) => x.type === "agent").length}
+					value={totalAgents}
 					onClick={() => router.push("/#agents")}
 					color="purple"
 				/>
 				<IconCard
 					Icon={BsGlobeCentralSouthAsia}
-					isLoading={isLoading}
+					isLoading={isAgentsLoading}
 					label="Countries"
-					value={[...new Set(users.filter((x) => x.demographicInformation).map((x) => x.demographicInformation?.country))].length}
+					value={[...new Set(agents.filter((x) => x.demographicInformation).map((x) => x.demographicInformation?.country))].length}
 					color="purple"
 				/>
 				<IconCard
 					onClick={() => router.push("/#inactiveStudents")}
 					Icon={BsPersonFill}
-					isLoading={isLoading}
+					isLoading={isStudentsLoading}
 					label="Inactive Students"
 					value={
-						users.filter((x) => x.type === "student" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)))
+						students.filter((x) => x.type === "student" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)))
 							.length
 					}
 					color="rose"
@@ -330,26 +355,26 @@ export default function AdminDashboard({user}: Props) {
 				<IconCard
 					onClick={() => router.push("/#inactiveCountryManagers")}
 					Icon={BsBriefcaseFill}
-					isLoading={isLoading}
+					isLoading={isAgentsLoading}
 					label="Inactive Country Managers"
-					value={users.filter(inactiveCountryManagerFilter).length}
+					value={agents.filter(inactiveCountryManagerFilter).length}
 					color="rose"
 				/>
 				<IconCard
 					onClick={() => router.push("/#inactiveCorporate")}
 					Icon={BsBank}
-					isLoading={isLoading}
+					isLoading={isCorporatesLoading}
 					label="Inactive Corporate"
 					value={
-						users.filter((x) => x.type === "corporate" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)))
-							.length
+						corporates.filter(
+							(x) => x.type === "corporate" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)),
+						).length
 					}
 					color="rose"
 				/>
 				<IconCard
 					onClick={() => router.push("/#paymentdone")}
 					Icon={BsCurrencyDollar}
-					isLoading={isLoading}
 					label="Payment Done"
 					value={done.length}
 					color="purple"
@@ -357,7 +382,6 @@ export default function AdminDashboard({user}: Props) {
 				<IconCard
 					onClick={() => router.push("/#paymentpending")}
 					Icon={BsCurrencyDollar}
-					isLoading={isLoading}
 					label="Pending Payment"
 					value={pending.length}
 					color="rose"
@@ -365,14 +389,13 @@ export default function AdminDashboard({user}: Props) {
 				<IconCard
 					onClick={() => router.push("https://cms.encoach.com/admin")}
 					Icon={BsLayoutSidebar}
-					isLoading={isLoading}
 					label="Content Management System (CMS)"
 					color="green"
 				/>
 				<IconCard
 					onClick={() => router.push("/#corporatestudentslevels")}
 					Icon={BsPersonFill}
-					isLoading={isLoading}
+					isLoading={isStudentsLoading}
 					label="Corporate Students Levels"
 					color="purple"
 				/>
@@ -382,8 +405,7 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Latest students</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter((x) => x.type === "student")
+						{students
 							.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
@@ -393,8 +415,7 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Latest teachers</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter((x) => x.type === "teacher")
+						{teachers
 							.sort((a, b) => {
 								return dateSorter(a, b, "desc", "registrationDate");
 							})
@@ -406,8 +427,7 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Latest corporate</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter((x) => x.type === "corporate")
+						{corporates
 							.sort((a, b) => {
 								return dateSorter(a, b, "desc", "registrationDate");
 							})
@@ -419,8 +439,8 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Unpaid Corporate</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter((x) => x.type === "corporate" && x.status === "paymentDue")
+						{corporates
+							.filter((x) => x.status === "paymentDue")
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
 							))}
@@ -429,10 +449,9 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Students expiring in 1 month</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
+						{students
 							.filter(
 								(x) =>
-									x.type === "student" &&
 									x.subscriptionExpirationDate &&
 									moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
 									moment().isBefore(moment(x.subscriptionExpirationDate)),
@@ -445,10 +464,9 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Teachers expiring in 1 month</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
+						{teachers
 							.filter(
 								(x) =>
-									x.type === "teacher" &&
 									x.subscriptionExpirationDate &&
 									moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
 									moment().isBefore(moment(x.subscriptionExpirationDate)),
@@ -461,10 +479,9 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Country Manager expiring in 1 month</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
+						{agents
 							.filter(
 								(x) =>
-									x.type === "agent" &&
 									x.subscriptionExpirationDate &&
 									moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
 									moment().isBefore(moment(x.subscriptionExpirationDate)),
@@ -477,10 +494,9 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Corporate expiring in 1 month</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
+						{corporates
 							.filter(
 								(x) =>
-									x.type === "corporate" &&
 									x.subscriptionExpirationDate &&
 									moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
 									moment().isBefore(moment(x.subscriptionExpirationDate)),
@@ -493,10 +509,8 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Expired Students</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter(
-								(x) => x.type === "student" && x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)),
-							)
+						{students
+							.filter((x) => x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)))
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
 							))}
@@ -505,10 +519,8 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Expired Teachers</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter(
-								(x) => x.type === "teacher" && x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)),
-							)
+						{teachers
+							.filter((x) => x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)))
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
 							))}
@@ -517,10 +529,8 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Expired Country Manager</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter(
-								(x) => x.type === "agent" && x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)),
-							)
+						{agents
+							.filter((x) => x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)))
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
 							))}
@@ -529,11 +539,8 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Expired Corporate</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter(
-								(x) =>
-									x.type === "corporate" && x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)),
-							)
+						{corporates
+							.filter((x) => x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)))
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
 							))}
@@ -553,7 +560,10 @@ export default function AdminDashboard({user}: Props) {
 								loggedInUser={user}
 								onClose={(shouldReload) => {
 									setSelectedUser(undefined);
-									if (shouldReload) reload();
+									if (shouldReload && selectedUser!.type === "student") reloadStudents();
+									if (shouldReload && selectedUser!.type === "teacher") reloadTeachers();
+									if (shouldReload && selectedUser!.type === "corporate") reloadCorporates();
+									if (shouldReload && selectedUser!.type === "agent") reloadAgents();
 								}}
 								onViewStudents={
 									selectedUser.type === "corporate" || selectedUser.type === "teacher"
--- a/src/dashboards/AssignmentCreator.tsx
+++ b/src/dashboards/AssignmentCreator.tsx
@@ -21,6 +21,7 @@ import Checkbox from "@/components/Low/Checkbox";
 import {InstructorGender, Variant} from "@/interfaces/exam";
 import Select from "@/components/Low/Select";
 import useExams from "@/hooks/useExams";
+import {useListSearch} from "@/hooks/useListSearch";

 interface Props {
 	isCreating: boolean;
@@ -31,7 +32,12 @@ interface Props {
 	cancelCreation: () => void;
 }

+const SIZE = 12;
+
 export default function AssignmentCreator({isCreating, assignment, user, groups, users, cancelCreation}: Props) {
+	const [studentsPage, setStudentsPage] = useState(0);
+	const [teachersPage, setTeachersPage] = useState(0);
+
 	const [selectedModules, setSelectedModules] = useState<Module[]>(assignment?.exams.map((e) => e.module) || []);
 	const [assignees, setAssignees] = useState<string[]>(assignment?.assignees || []);
 	const [teachers, setTeachers] = useState<string[]>(!!assignment ? assignment.teachers || [] : [...(user.type === "teacher" ? [user.id] : [])]);
@@ -69,6 +75,29 @@ export default function AssignmentCreator({isCreating, assignment, user, groups,
 	const userStudents = useMemo(() => users.filter((x) => x.type === "student"), [users]);
 	const userTeachers = useMemo(() => users.filter((x) => x.type === "teacher"), [users]);

+	const {rows: filteredStudentsRows, renderSearch: renderStudentSearch, text: studentText} = useListSearch([["name"], ["email"]], userStudents);
+	const {rows: filteredTeachersRows, renderSearch: renderTeacherSearch, text: teacherText} = useListSearch([["name"], ["email"]], userTeachers);
+
+	useEffect(() => setStudentsPage(0), [studentText]);
+	const studentRows = useMemo(
+		() =>
+			filteredStudentsRows.slice(
+				studentsPage * SIZE,
+				(studentsPage + 1) * SIZE > filteredStudentsRows.length ? filteredStudentsRows.length : (studentsPage + 1) * SIZE,
+			),
+		[filteredStudentsRows, studentsPage],
+	);
+
+	useEffect(() => setTeachersPage(0), [teacherText]);
+	const teacherRows = useMemo(
+		() =>
+			filteredTeachersRows.slice(
+				teachersPage * SIZE,
+				(teachersPage + 1) * SIZE > filteredTeachersRows.length ? filteredTeachersRows.length : (teachersPage + 1) * SIZE,
+			),
+		[filteredTeachersRows, teachersPage],
+	);
+
 	useEffect(() => {
 		setExamIDs((prev) => prev.filter((x) => selectedModules.includes(x.module)));
 	}, [selectedModules]);
@@ -347,9 +376,9 @@ export default function AssignmentCreator({isCreating, assignment, user, groups,
 					</div>
 				)}

-				<section className="w-full flex flex-col gap-3">
+				<section className="w-full flex flex-col gap-4">
 					<span className="font-semibold">Assignees ({assignees.length} selected)</span>
-					<div className="flex gap-4 overflow-x-scroll scrollbar-hide">
+					<div className="grid grid-cols-5 gap-4">
 						{groups.map((g) => (
 							<button
 								key={g.id}
@@ -371,8 +400,11 @@ export default function AssignmentCreator({isCreating, assignment, user, groups,
 							</button>
 						))}
 					</div>
+
+					{renderStudentSearch()}
+
 					<div className="flex flex-wrap -md:justify-center gap-4">
-						{userStudents.map((user) => (
+						{studentRows.map((user) => (
 							<div
 								onClick={() => toggleAssignee(user)}
 								className={clsx(
@@ -402,12 +434,32 @@ export default function AssignmentCreator({isCreating, assignment, user, groups,
 							</div>
 						))}
 					</div>
+					<div className="w-full flex gap-2 justify-between items-center">
+						<div className="flex items-center gap-4 w-fit">
+							<Button className="w-[200px] h-fit" disabled={studentsPage === 0} onClick={() => setStudentsPage((prev) => prev - 1)}>
+								Previous Page
+							</Button>
+						</div>
+						<div className="flex items-center gap-4 w-fit">
+							<span className="opacity-80">
+								{studentsPage * SIZE + 1} -{" "}
+								{(studentsPage + 1) * SIZE > filteredStudentsRows.length ? filteredStudentsRows.length : (studentsPage + 1) * SIZE} /{" "}
+								{filteredStudentsRows.length}
+							</span>
+							<Button
+								className="w-[200px]"
+								disabled={(studentsPage + 1) * SIZE >= filteredStudentsRows.length}
+								onClick={() => setStudentsPage((prev) => prev + 1)}>
+								Next Page
+							</Button>
+						</div>
+					</div>
 				</section>

 				{user.type !== "teacher" && (
 					<section className="w-full flex flex-col gap-3">
 						<span className="font-semibold">Teachers ({teachers.length} selected)</span>
-						<div className="flex gap-4 overflow-x-scroll scrollbar-hide">
+						<div className="grid grid-cols-5 gap-4">
 							{groups.map((g) => (
 								<button
 									key={g.id}
@@ -429,8 +481,11 @@ export default function AssignmentCreator({isCreating, assignment, user, groups,
 								</button>
 							))}
 						</div>
+
+						{renderTeacherSearch()}
+
 						<div className="flex flex-wrap -md:justify-center gap-4">
-							{userTeachers.map((user) => (
+							{teacherRows.map((user) => (
 								<div
 									onClick={() => toggleTeacher(user)}
 									className={clsx(
@@ -453,6 +508,29 @@ export default function AssignmentCreator({isCreating, assignment, user, groups,
 								</div>
 							))}
 						</div>
+
+						<div className="w-full flex gap-2 justify-between items-center">
+							<div className="flex items-center gap-4 w-fit">
+								<Button className="w-[200px] h-fit" disabled={teachersPage === 0} onClick={() => setTeachersPage((prev) => prev - 1)}>
+									Previous Page
+								</Button>
+							</div>
+							<div className="flex items-center gap-4 w-fit">
+								<span className="opacity-80">
+									{teachersPage * SIZE + 1} -{" "}
+									{(teachersPage + 1) * SIZE > filteredTeachersRows.length
+										? filteredTeachersRows.length
+										: (teachersPage + 1) * SIZE}{" "}
+									/ {filteredTeachersRows.length}
+								</span>
+								<Button
+									className="w-[200px]"
+									disabled={(teachersPage + 1) * SIZE >= filteredTeachersRows.length}
+									onClick={() => setTeachersPage((prev) => prev + 1)}>
+									Next Page
+								</Button>
+							</div>
+						</div>
 					</section>
 				)}

--- a/src/dashboards/MasterCorporate/MasterStatistical.tsx
+++ b/src/dashboards/MasterCorporate/MasterStatistical.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useEffect, useMemo, useState} from "react";
 import {CorporateUser, User} from "@/interfaces/user";
 import {BsFileExcel, BsBank, BsPersonFill} from "react-icons/bs";
 import IconCard from "../IconCard";
@@ -14,6 +14,7 @@ import {useListSearch} from "@/hooks/useListSearch";
 import axios from "axios";
 import {toast} from "react-toastify";
 import Button from "@/components/Low/Button";
+import {getUserName} from "@/utils/users";

 interface GroupedCorporateUsers {
 	// list of user Ids
@@ -42,10 +43,13 @@ interface UserCount {
 	maxUserCount: number;
 }

-const searchFilters = [["email"], ["user"], ["userId"]];
+const searchFilters = [["email"], ["user"], ["userId"], ["exams"], ["assignment"]];
+
+const SIZE = 16;

 const MasterStatistical = (props: Props) => {
 	const {users, corporateUsers, displaySelection = true} = props;
+	const [page, setPage] = useState(0);

 	// const corporateRelevantUsers = React.useMemo(
 	//   () => corporateUsers.filter((x) => x.type !== "student") as CorporateUser[],
@@ -59,7 +63,6 @@ const MasterStatistical = (props: Props) => {
 	const [endDate, setEndDate] = React.useState<Date | null>(moment().endOf("year").toDate());

 	const {assignments} = useAssignmentsCorporates({
-		// corporates: [...corporates, "tYU0HTiJdjMsS8SB7XJsUdMMP892"],
 		corporates: selectedCorporates,
 		startDate,
 		endDate,
@@ -73,12 +76,13 @@ const MasterStatistical = (props: Props) => {
 				const userResults = a.assignees.map((assignee) => {
 					const userStats = a.results.find((r) => r.user === assignee)?.stats || [];
 					const userData = users.find((u) => u.id === assignee);
-					const corporate = users.find((u) => u.id === a.assigner)?.name || "";
+					const corporate = getUserName(users.find((u) => u.id === a.assigner));
 					const commonData = {
-						user: userData?.name || "",
-						email: userData?.email || "",
+						user: userData?.name || "N/A",
+						email: userData?.email || "N/A",
 						userId: assignee,
 						corporateId: a.corporateId,
+						exams: a.exams.map((x) => x.id).join(", "),
 						corporate,
 						assignment: a.name,
 					};
@@ -87,7 +91,7 @@ const MasterStatistical = (props: Props) => {
 							...commonData,
 							correct: 0,
 							submitted: false,
-							// date: moment(),
+							date: null,
 						};
 					}

@@ -104,6 +108,8 @@ const MasterStatistical = (props: Props) => {
 		[assignments, users],
 	);

+	useEffect(() => console.log(assignments), [assignments]);
+
 	const getCorporateScores = (corporateId: string): UserCount => {
 		const corporateAssignmentsUsers = assignments.filter((a) => a.corporateId === corporateId).reduce((acc, a) => acc + a.assignees.length, 0);

@@ -166,13 +172,6 @@ const MasterStatistical = (props: Props) => {
 					}),
 			  ]
 			: []),
-		columnHelper.accessor("corporate", {
-			header: "Corporate",
-			id: "corporate",
-			cell: (info) => {
-				return <span>{info.getValue()}</span>;
-			},
-		}),
 		columnHelper.accessor("assignment", {
 			header: "Assignment",
 			id: "assignment",
@@ -192,7 +191,7 @@ const MasterStatistical = (props: Props) => {
 			},
 		}),
 		columnHelper.accessor("correct", {
-			header: "Correct",
+			header: "Score",
 			id: "correct",
 			cell: (info) => {
 				return <span>{info.getValue()}</span>;
@@ -204,7 +203,7 @@ const MasterStatistical = (props: Props) => {
 			cell: (info) => {
 				const date = info.getValue();
 				if (date) {
-					return <span>{date.format("DD/MM/YYYY")}</span>;
+					return <span>{!!date ? date.format("DD/MM/YYYY") : "N/A"}</span>;
 				}

 				return <span>{""}</span>;
@@ -214,8 +213,14 @@ const MasterStatistical = (props: Props) => {

 	const {rows: filteredRows, renderSearch, text: searchText} = useListSearch(searchFilters, tableResults);

+	useEffect(() => setPage(0), [searchText]);
+	const rows = useMemo(
+		() => filteredRows.slice(page * SIZE, (page + 1) * SIZE > filteredRows.length ? filteredRows.length : (page + 1) * SIZE),
+		[filteredRows, page],
+	);
+
 	const table = useReactTable({
-		data: filteredRows,
+		data: rows,
 		columns: defaultColumns,
 		getCoreRowModel: getCoreRowModel(),
 	});
@@ -344,7 +349,22 @@ const MasterStatistical = (props: Props) => {
 				</div>
 			</div>

-			<div>
+			<div className="w-full h-full flex flex-col gap-4">
+				<div className="w-full flex gap-2 justify-between">
+					<Button className="w-full max-w-[200px]" disabled={page === 0} onClick={() => setPage((prev) => prev - 1)}>
+						Previous Page
+					</Button>
+					<div className="flex items-center gap-4 w-fit">
+						<span className="opacity-80">
+							{page * SIZE + 1} - {(page + 1) * SIZE > filteredRows.length ? filteredRows.length : (page + 1) * SIZE} /{" "}
+							{filteredRows.length}
+						</span>
+						<Button className="w-[200px]" disabled={(page + 1) * SIZE >= rows.length} onClick={() => setPage((prev) => prev + 1)}>
+							Next Page
+						</Button>
+					</div>
+				</div>
+
 				<table className="rounded-xl h-full bg-mti-purple-ultralight/40 w-full">
 					<thead>
 						{table.getHeaderGroups().map((headerGroup) => (
--- a/src/dashboards/MasterCorporate/index.tsx
+++ b/src/dashboards/MasterCorporate/index.tsx
@@ -83,18 +83,6 @@ export default function MasterCorporateDashboard({user}: Props) {
 	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({corporate: user.id});

 	const assignmentsGroups = useMemo(() => groups.filter((x) => x.admin === user.id || x.participants.includes(user.id)), [groups, user.id]);
-	const assignmentsUsers = useMemo(
-		() =>
-			[...students, ...teachers].filter((x) =>
-				!!selectedUser
-					? groups
-							.filter((g) => g.admin === selectedUser.id)
-							.flatMap((g) => g.participants)
-							.includes(x.id) || false
-					: groups.flatMap((g) => g.participants).includes(x.id),
-			),
-		[groups, selectedUser, teachers, students],
-	);

 	const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
 	const router = useRouter();
@@ -131,7 +119,6 @@ export default function MasterCorporateDashboard({user}: Props) {

 	const {users} = useUsers();

-
 	const groupedByNameCorporates = useMemo(
 		() =>
 			groupBy(
@@ -374,12 +361,18 @@ export default function MasterCorporateDashboard({user}: Props) {
 						color="purple"
 						onClick={() => router.push("/#corporate")}
 					/>
-					<IconCard Icon={BsBank} label="Corporate" value={groupedByNameCorporatesKeys.length} isLoading={isCorporatesLoading} color="purple" />
+					<IconCard
+						Icon={BsBank}
+						label="Corporate"
+						value={groupedByNameCorporatesKeys.length}
+						isLoading={isCorporatesLoading}
+						color="purple"
+					/>
 					<IconCard
 						Icon={BsPersonFillGear}
 						isLoading={isStudentsLoading}
 						label="Student Performance"
-						value={students.length}
+						value={totalStudents}
 						color="purple"
 						onClick={() => router.push("/#studentsPerformance")}
 					/>
--- a/src/hooks/useSessions.tsx
+++ b/src/hooks/useSessions.tsx
@@ -1,12 +1,9 @@
 import {Exam} from "@/interfaces/exam";
 import {ExamState} from "@/stores/examStore";
-import Axios from "axios";
+import axios from "axios";
 import {setupCache} from "axios-cache-interceptor";
 import {useEffect, useState} from "react";

-const instance = Axios.create();
-const axios = setupCache(instance);
-
 export type Session = ExamState & {user: string; id: string; date: string};

 export default function useSessions(user?: string) {
--- a/src/hooks/useUsers.tsx
+++ b/src/hooks/useUsers.tsx
@@ -9,7 +9,7 @@ export const userHashStudent = {type: "student"} as {type: Type};
 export const userHashTeacher = {type: "teacher"} as {type: Type};
 export const userHashCorporate = {type: "corporate"} as {type: Type};

-export default function useUsers(props?: {type?: string; page?: number; size?: number; orderBy?: string; direction?: "asc" | "desc"}) {
+export default function useUsers(props?: {type?: string; page?: number; size?: number; orderBy?: string; direction?: "asc" | "desc", searchTerm?: string | undefined}) {
 	const [users, setUsers] = useState<User[]>([]);
 	const [total, setTotal] = useState(0);
 	const [isLoading, setIsLoading] = useState(false);
@@ -35,7 +35,7 @@ export default function useUsers(props?: {type?: string; page?: number; size?: n
 			.finally(() => setIsLoading(false));
 	};
 	// eslint-disable-next-line react-hooks/exhaustive-deps
-	useEffect(getData, [props?.page, props?.size, props?.type, props?.orderBy, props?.direction]);
+	useEffect(getData, [props?.page, props?.size, props?.type, props?.orderBy, props?.direction, props?.searchTerm]);

 	return {users, total, isLoading, isError, reload: getData};
 }
--- a/src/pages/(admin)/BatchCreateUser.tsx
+++ b/src/pages/(admin)/BatchCreateUser.tsx
@@ -53,7 +53,7 @@ const USER_TYPE_PERMISSIONS: {
 	},
 	admin: {
 		perm: "createCodeAdmin",
-		list: ["student", "teacher", "agent", "corporate", "admin", "mastercorporate"],
+		list: ["student", "teacher", "agent", "corporate", "mastercorporate"],
 	},
 	developer: {
 		perm: undefined,
@@ -161,7 +161,7 @@ export default function BatchCreateUser({user, users, permissions, onFinish}: Pr
 			setIsLoading(true);

 			try {
-				await axios.post("/api/batch_users", { users: newUsers.map(user => ({...user, type, expiryDate})) });
+				await axios.post("/api/batch_users", {users: newUsers.map((user) => ({...user, type, expiryDate}))});
 				toast.success(`Successfully added ${newUsers.length} user(s)!`);
 				onFinish();
 			} catch {
--- a/src/pages/(admin)/Lists/UserList.tsx
+++ b/src/pages/(admin)/Lists/UserList.tsx
@@ -1,36 +1,41 @@
 import Button from "@/components/Low/Button";
-import {PERMISSIONS} from "@/constants/userPermissions";
+import { PERMISSIONS } from "@/constants/userPermissions";
 import useGroups from "@/hooks/useGroups";
 import useUsers from "@/hooks/useUsers";
-import {Type, User, userTypes, CorporateUser, Group} from "@/interfaces/user";
-import {Popover, Transition} from "@headlessui/react";
-import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import { Type, User, userTypes, CorporateUser, Group } from "@/interfaces/user";
+import { Popover, Transition } from "@headlessui/react";
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import axios from "axios";
 import clsx from "clsx";
-import {capitalize, reverse} from "lodash";
+import { capitalize, reverse } from "lodash";
 import moment from "moment";
-import {Fragment, useEffect, useState, useMemo} from "react";
-import {BsArrowDown, BsArrowDownUp, BsArrowUp, BsCheck, BsCheckCircle, BsEye, BsFillExclamationOctagonFill, BsPerson, BsTrash} from "react-icons/bs";
-import {toast} from "react-toastify";
-import {countries, TCountries} from "countries-list";
+import { Fragment, useEffect, useState, useMemo } from "react";
+import { BsArrowDown, BsArrowDownUp, BsArrowUp, BsCheck, BsCheckCircle, BsEye, BsFillExclamationOctagonFill, BsPerson, BsTrash } from "react-icons/bs";
+import { toast } from "react-toastify";
+import { countries, TCountries } from "countries-list";
 import countryCodes from "country-codes-list";
 import Modal from "@/components/Modal";
 import UserCard from "@/components/UserCard";
-import {getUserCompanyName, isAgentUser, USER_TYPE_LABELS} from "@/resources/user";
+import { getUserCompanyName, isAgentUser, USER_TYPE_LABELS } from "@/resources/user";
 import useFilterStore from "@/stores/listFilterStore";
-import {useRouter} from "next/router";
-import {isCorporateUser} from "@/resources/user";
-import {useListSearch} from "@/hooks/useListSearch";
-import {getUserCorporate} from "@/utils/groups";
-import {asyncSorter} from "@/utils";
-import {exportListToExcel, UserListRow} from "@/utils/users";
-import {checkAccess} from "@/utils/permissions";
-import {PermissionType} from "@/interfaces/permissions";
+import { useRouter } from "next/router";
+import { isCorporateUser } from "@/resources/user";
+import { useListSearch } from "@/hooks/useListSearch";
+import { getUserCorporate } from "@/utils/groups";
+import { asyncSorter } from "@/utils";
+import { exportListToExcel, UserListRow } from "@/utils/users";
+import { checkAccess } from "@/utils/permissions";
+import { PermissionType } from "@/interfaces/permissions";
 import usePermissions from "@/hooks/usePermissions";
 import useUserBalance from "@/hooks/useUserBalance";
+import Input from "@/components/Low/Input";
 const columnHelper = createColumnHelper<User>();
 const searchFields = [["name"], ["email"], ["corporateInformation", "companyInformation", "name"]];

+const corporatesHash = {
+	type: "corporate",
+};
+
 const CompanyNameCell = ({users, user, groups}: {user: User; users: User[]; groups: Group[]}) => {
 	const [companyName, setCompanyName] = useState("");
 	const [isLoading, setIsLoading] = useState(false);
@@ -59,17 +64,14 @@ export default function UserList({
 	const [displayUsers, setDisplayUsers] = useState<User[]>([]);
 	const [selectedUser, setSelectedUser] = useState<User>();
 	const [page, setPage] = useState(0);
+	const [searchTerm, setSearchTerm] = useState<string | undefined>(undefined);

-	const userHash = useMemo(
-		() => ({
-			type,
-			size: 16,
-			page,
-		}),
-		[type, page],
-	);
+	const { users, total, isLoading, reload } = useUsers({type: type, size: 16, page: page, searchTerm: searchTerm});
+
+	const {users: corporates} = useUsers(corporatesHash);
+
+	const totalUsers = useMemo(() => [...users, ...corporates], [users, corporates]);

-	const {users, total, isLoading, reload} = useUsers(userHash);
 	const {permissions} = usePermissions(user?.id || "");
 	const {balance} = useUserBalance();
 	const {groups} = useGroups({
@@ -106,20 +108,20 @@ export default function UserList({
 		if (!confirm(`Are you sure you want to delete ${user.name}'s account?`)) return;

 		axios
-			.delete<{ok: boolean}>(`/api/user?id=${user.id}`)
+			.delete<{ ok: boolean }>(`/api/user?id=${user.id}`)
 			.then(() => {
 				toast.success("User deleted successfully!");
 				reload();
 			})
 			.catch(() => {
-				toast.error("Something went wrong!", {toastId: "delete-error"});
+				toast.error("Something went wrong!", { toastId: "delete-error" });
 			})
 			.finally(reload);
 	};

 	const verifyAccount = (user: User) => {
 		axios
-			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
+			.post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
 				...user,
 				isVerified: true,
 			})
@@ -128,22 +130,21 @@ export default function UserList({
 				reload();
 			})
 			.catch(() => {
-				toast.error("Something went wrong!", {toastId: "update-error"});
+				toast.error("Something went wrong!", { toastId: "update-error" });
 			});
 	};

 	const toggleDisableAccount = (user: User) => {
 		if (
 			!confirm(
-				`Are you sure you want to ${user.status === "disabled" ? "enable" : "disable"} ${
-					user.name
+				`Are you sure you want to ${user.status === "disabled" ? "enable" : "disable"} ${user.name
 				}'s account? This change is usually related to their payment state.`,
 			)
 		)
 			return;

 		axios
-			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
+			.post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
 				...user,
 				status: user.status === "disabled" ? "active" : "disabled",
 			})
@@ -152,18 +153,18 @@ export default function UserList({
 				reload();
 			})
 			.catch(() => {
-				toast.error("Something went wrong!", {toastId: "update-error"});
+				toast.error("Something went wrong!", { toastId: "update-error" });
 			});
 	};

-	const SorterArrow = ({name}: {name: string}) => {
+	const SorterArrow = ({ name }: { name: string }) => {
 		if (sorter === name) return <BsArrowUp />;
 		if (sorter === reverseString(name)) return <BsArrowDown />;

 		return <BsArrowDownUp />;
 	};

-	const actionColumn = ({row}: {row: {original: User}}) => {
+	const actionColumn = ({ row }: { row: { original: User } }) => {
 		const updateUserPermission = PERMISSIONS.updateUser[row.original.type] as {
 			list: Type[];
 			perm: PermissionType;
@@ -208,11 +209,11 @@ export default function UserList({
 					<SorterArrow name="name" />
 				</button>
 			) as any,
-			cell: ({row, getValue}) => (
+			cell: ({ row, getValue }) => (
 				<div
 					className={clsx(
 						checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) &&
-							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
+						"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
 					)}
 					onClick={() =>
 						checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) ? setSelectedUser(row.original) : null
@@ -230,9 +231,8 @@ export default function UserList({
 			) as any,
 			cell: (info) =>
 				info.getValue()
-					? `${countryCodes.findOne("countryCode" as any, info.getValue())?.flag} ${
-							countries[info.getValue() as unknown as keyof TCountries]?.name
-					  } (+${countryCodes.findOne("countryCode" as any, info.getValue())?.countryCallingCode})`
+					? `${countryCodes.findOne("countryCode" as any, info.getValue())?.flag} ${countries[info.getValue() as unknown as keyof TCountries]?.name
+					} (+${countryCodes.findOne("countryCode" as any, info.getValue())?.countryCallingCode})`
 					: "N/A",
 		}),
 		columnHelper.accessor("demographicInformation.phone", {
@@ -298,11 +298,11 @@ export default function UserList({
 					<SorterArrow name="name" />
 				</button>
 			) as any,
-			cell: ({row, getValue}) => (
+			cell: ({ row, getValue }) => (
 				<div
 					className={clsx(
 						checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) &&
-							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
+						"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
 					)}
 					onClick={() =>
 						checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) ? setSelectedUser(row.original) : null
@@ -318,11 +318,11 @@ export default function UserList({
 					<SorterArrow name="email" />
 				</button>
 			) as any,
-			cell: ({row, getValue}) => (
+			cell: ({ row, getValue }) => (
 				<div
 					className={clsx(
 						PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) &&
-							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
+						"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
 					)}
 					onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}>
 					{getValue()}
@@ -354,7 +354,7 @@ export default function UserList({
 					<SorterArrow name="companyName" />
 				</button>
 			) as any,
-			cell: (info) => <CompanyNameCell user={info.row.original} users={users} groups={groups} />,
+			cell: (info) => <CompanyNameCell user={info.row.original} users={totalUsers} groups={groups} />,
 		}),
 		columnHelper.accessor("subscriptionExpirationDate", {
 			header: (
@@ -505,19 +505,17 @@ export default function UserList({
 		return a.id.localeCompare(b.id);
 	};

-	const {rows: filteredRows, renderSearch} = useListSearch<User>(searchFields, displayUsers);
-
 	const table = useReactTable({
-		data: filteredRows,
+		data: displayUsers,
 		columns: (!showDemographicInformation ? defaultColumns : demographicColumns) as any,
 		getCoreRowModel: getCoreRowModel(),
 	});

 	const downloadExcel = () => {
-		const csv = exportListToExcel(filteredRows, users, groups);
+		const csv = exportListToExcel(displayUsers, users, groups);

 		const element = document.createElement("a");
-		const file = new Blob([csv], {type: "text/csv"});
+		const file = new Blob([csv], { type: "text/csv" });
 		element.href = URL.createObjectURL(file);
 		element.download = "users.csv";
 		document.body.appendChild(element);
@@ -551,53 +549,53 @@ export default function UserList({
 					onViewStudents={
 						(selectedUser.type === "corporate" || selectedUser.type === "teacher") && studentsFromAdmin.length > 0
 							? () => {
-									appendUserFilters({
-										id: "view-students",
-										filter: viewStudentFilter,
-									});
-									appendUserFilters({
-										id: "belongs-to-admin",
-										filter: belongsToAdminFilter,
-									});
+								appendUserFilters({
+									id: "view-students",
+									filter: viewStudentFilter,
+								});
+								appendUserFilters({
+									id: "belongs-to-admin",
+									filter: belongsToAdminFilter,
+								});

-									router.push("/list/users");
-							  }
+								router.push("/list/users");
+							}
 							: undefined
 					}
 					onViewTeachers={
 						(selectedUser.type === "corporate" || selectedUser.type === "student") && teachersFromAdmin.length > 0
 							? () => {
-									appendUserFilters({
-										id: "view-teachers",
-										filter: viewTeacherFilter,
-									});
-									appendUserFilters({
-										id: "belongs-to-admin",
-										filter: belongsToAdminFilter,
-									});
+								appendUserFilters({
+									id: "view-teachers",
+									filter: viewTeacherFilter,
+								});
+								appendUserFilters({
+									id: "belongs-to-admin",
+									filter: belongsToAdminFilter,
+								});

-									router.push("/list/users");
-							  }
+								router.push("/list/users");
+							}
 							: undefined
 					}
 					onViewCorporate={
 						selectedUser.type === "teacher" || selectedUser.type === "student"
 							? () => {
-									appendUserFilters({
-										id: "view-corporate",
-										filter: (x: User) => x.type === "corporate",
-									});
-									appendUserFilters({
-										id: "belongs-to-admin",
-										filter: (x: User) =>
-											groups
-												.filter((g) => g.participants.includes(selectedUser.id))
-												.flatMap((g) => [g.admin, ...g.participants])
-												.includes(x.id),
-									});
+								appendUserFilters({
+									id: "view-corporate",
+									filter: (x: User) => x.type === "corporate",
+								});
+								appendUserFilters({
+									id: "belongs-to-admin",
+									filter: (x: User) =>
+										groups
+											.filter((g) => g.participants.includes(selectedUser.id))
+											.flatMap((g) => [g.admin, ...g.participants])
+											.includes(x.id),
+								});

-									router.push("/list/users");
-							  }
+								router.push("/list/users");
+							}
 							: undefined
 					}
 					onClose={(shouldReload) => {
@@ -619,7 +617,7 @@ export default function UserList({
 				</Modal>
 				<div className="w-full flex flex-col gap-2">
 					<div className="w-full flex gap-2 items-end">
-						{renderSearch()}
+						<Input label="Search" type="text" name="search" onChange={setSearchTerm} placeholder="Enter search text" value={searchTerm} />
 						<Button className="w-full max-w-[200px] mb-1" variant="outline" onClick={downloadExcel}>
 							Download List
 						</Button>
@@ -634,12 +632,12 @@ export default function UserList({
 						</Button>
 						<div className="flex items-center gap-4 w-fit">
 							<span className="opacity-80">
-								{page * 16 + 1} - {(page + 1) * 16 > total ? total : (page + 1) * 16} / {total}
+								{page * userHash.size + 1} - {(page + 1) * userHash.size > total ? total : (page + 1) * userHash.size} / {total}
 							</span>
 							<Button
 								isLoading={isLoading}
 								className="w-[200px]"
-								disabled={page * 16 >= total}
+								disabled={(page + 1) * userHash.size >= total}
 								onClick={() => setPage((prev) => prev + 1)}>
 								Next Page
 							</Button>
--- a/src/pages/(admin)/UserCreator.tsx
+++ b/src/pages/(admin)/UserCreator.tsx
@@ -141,7 +141,11 @@ export default function UserCreator({user, users, permissions, onFinish}: Props)
 				setType("student");
 				setPosition(undefined);
 			})
-			.catch(() => toast.error("Something went wrong! Please try again later!"))
+			.catch((error) => {
+				const data = error?.response?.data;
+				if (!!data?.message) return toast.error(data.message);
+				toast.error("Something went wrong! Please try again later!");
+			})
 			.finally(() => setIsLoading(false));
 	};

--- a/src/pages/api/groups/[id].ts
+++ b/src/pages/api/groups/[id].ts
@@ -1,109 +1,91 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from "next";
+import type {NextApiRequest, NextApiResponse} from "next";
 import client from "@/lib/mongodb";
-import { withIronSessionApiRoute } from "iron-session/next";
-import { sessionOptions } from "@/lib/session";
-import { Group } from "@/interfaces/user";
-import { updateExpiryDateOnGroup } from "@/utils/groups.be";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {Group} from "@/interfaces/user";
+import {updateExpiryDateOnGroup} from "@/utils/groups.be";

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

 export default withIronSessionApiRoute(handler, sessionOptions);

 async function handler(req: NextApiRequest, res: NextApiResponse) {
-  if (req.method === "GET") return await get(req, res);
-  if (req.method === "DELETE") return await del(req, res);
-  if (req.method === "PATCH") return await patch(req, res);
+	if (req.method === "GET") return await get(req, res);
+	if (req.method === "DELETE") return await del(req, res);
+	if (req.method === "PATCH") return await patch(req, res);

-  res.status(404).json(undefined);
+	res.status(404).json(undefined);
 }

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

-  const { id } = req.query as { id: string };
+	const {id} = req.query as {id: string};

-  const snapshot = await db.collection("groups").findOne({ id: id});
+	const snapshot = await db.collection("groups").findOne({id: id});

-  if (snapshot) {
-    res.status(200).json({ ...snapshot });
-  } else {
-    res.status(404).json(undefined);
-  }
+	if (snapshot) {
+		res.status(200).json({...snapshot});
+	} else {
+		res.status(404).json(undefined);
+	}
 }

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

-  const { id } = req.query as { id: string };
-  const group = await db.collection("groups").findOne<Group>({id: id});
+	const {id} = req.query as {id: string};
+	const group = await db.collection("groups").findOne<Group>({id: id});

-  if (!group) {
-    res.status(404);
-    return;
-  }
+	if (!group) {
+		res.status(404);
+		return;
+	}

-  const user = req.session.user;
-  if (
-    user.type === "admin" ||
-    user.type === "developer" ||
-    user.id === group.admin
-  ) {
-    await db.collection("groups").deleteOne({ id: id });
+	const user = req.session.user;
+	if (user.type === "admin" || user.type === "developer" || user.id === group.admin) {
+		await db.collection("groups").deleteOne({id: id});

-    res.status(200).json({ ok: true });
-    return;
-  }
+		res.status(200).json({ok: true});
+		return;
+	}

-  res.status(403).json({ ok: false });
+	res.status(403).json({ok: false});
 }

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

-  const { id } = req.query as { id: string };
+	const {id} = req.query as {id: string};

-  const group = await db.collection("groups").findOne<Group>({id: id});
-  if (!group) {
-    res.status(404);
-    return;
-  }
+	const group = await db.collection("groups").findOne<Group>({id: id});
+	if (!group) {
+		res.status(404);
+		return;
+	}

-  const user = req.session.user;
-  if (
-    user.type === "admin" ||
-    user.type === "developer" ||
-    user.id === group.admin
-  ) {
-    if ("participants" in req.body) {
-      const newParticipants = (req.body.participants as string[]).filter(
-        (x) => !group.participants.includes(x),
-      );
-      await Promise.all(
-        newParticipants.map(
-          async (p) => await updateExpiryDateOnGroup(p, group.admin),
-        ),
-      );
-    }
+	const user = req.session.user;
+	if (user.type === "admin" || user.type === "developer" || user.id === group.admin) {
+		if ("participants" in req.body) {
+			const newParticipants = (req.body.participants as string[]).filter((x) => !group.participants.includes(x));
+			await Promise.all(newParticipants.map(async (p) => await updateExpiryDateOnGroup(p, group.admin)));
+		}

-    await db.collection("grading").updateOne(
-      { id: req.session.user.id },
-      { $set: {id: id, ...req.body} },
-      { upsert: true }
-    );
+		await db.collection("groups").updateOne({id: req.session.user.id}, {$set: {id, ...req.body}}, {upsert: true});

-    res.status(200).json({ ok: true });
-    return;
-  }
+		res.status(200).json({ok: true});
+		return;
+	}

-  res.status(403).json({ ok: false });
+	res.status(403).json({ok: false});
 }
--- a/src/pages/api/make_user.ts
+++ b/src/pages/api/make_user.ts
@@ -218,6 +218,8 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 			return res.status(200).json({ok: true});
 		})
 		.catch((error) => {
+			if (error.code.includes("email-already-in-use")) return res.status(403).json({error, message: "E-mail is already in the platform."});
+
 			console.log(`Failing - ${email}`);
 			console.log(error);
 			return res.status(401).json({error});
--- a/src/pages/api/sessions/index.ts
+++ b/src/pages/api/sessions/index.ts
@@ -24,7 +24,7 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 	const {user} = req.query as {user?: string};

 	const q = user ? {user: user} : {};
-	const sessions = await db.collection("sessions").find<Session>(q).toArray();
+	const sessions = await db.collection("sessions").find<Session>(q).limit(10).toArray();

 	res.status(200).json(
 		sessions.filter((x) => {
@@ -41,12 +41,8 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 		return;
 	}
 	const session = req.body;
-	
-	await db.collection("sessions").updateOne(
-		{ id: session.id},
-		{ $set: session },
-		{ upsert: true }
-	);
+
+	await db.collection("sessions").updateOne({id: session.id}, {$set: session}, {upsert: true});

 	res.status(200).json({ok: true});
 }
--- a/src/pages/api/users/list.ts
+++ b/src/pages/api/users/list.ts
@@ -19,7 +19,8 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 		page,
 		orderBy,
 		direction = "desc",
-	} = req.query as {size?: string; type?: Type; page?: string; orderBy?: string; direction?: "asc" | "desc"};
+		searchTerm
+	} = req.query as {size?: string; type?: Type; page?: string; orderBy?: string; direction?: "asc" | "desc"; searchTerm?: string | undefined};

 	const {users, total} = await getLinkedUsers(
 		req.session.user?.id,
@@ -29,6 +30,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 		size !== undefined ? parseInt(size) : undefined,
 		orderBy,
 		direction,
+		searchTerm
 	);

 	res.status(200).json({users, total});
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -68,18 +68,18 @@ interface Props {
 	linkedCorporate?: CorporateUser | MasterCorporateUser;
 }

-export default function Home({linkedCorporate}: Props) {
+export default function Home({user: propsUser, linkedCorporate}: Props) {
+	const [user, setUser] = useState(propsUser);
 	const [showDiagnostics, setShowDiagnostics] = useState(false);
 	const [showDemographicInput, setShowDemographicInput] = useState(false);
 	const [selectedScreen, setSelectedScreen] = useState<Type>("admin");

-	const {user, mutateUser} = useUser({redirectTo: "/login"});
+	const {mutateUser} = useUser({redirectTo: "/login"});
 	const router = useRouter();

 	useEffect(() => {
 		if (user) {
-			console.log(user.demographicInformation);
-			setShowDemographicInput(!user.demographicInformation || !user.demographicInformation.country || !user.demographicInformation.phone);
+			// setShowDemographicInput(!user.demographicInformation || !user.demographicInformation.country || !user.demographicInformation.phone);
 			setShowDiagnostics(user.isFirstLogin && user.type === "student");
 		}
 	}, [user]);
@@ -131,7 +131,13 @@ export default function Home({linkedCorporate}: Props) {
 					<link rel="icon" href="/favicon.ico" />
 				</Head>
 				<Layout user={user} navDisabled>
-					<DemographicInformationInput mutateUser={mutateUser} user={user} />
+					<DemographicInformationInput
+						mutateUser={(user) => {
+							setUser(user);
+							mutateUser(user);
+						}}
+						user={user}
+					/>
 				</Layout>
 			</>
 		);
--- a/src/utils/assignments.be.ts
+++ b/src/utils/assignments.be.ts
@@ -1,18 +1,18 @@
 import client from "@/lib/mongodb";
-import { Assignment } from "@/interfaces/results";
-import { getAllAssignersByCorporate } from "@/utils/groups.be";
+import {Assignment} from "@/interfaces/results";
+import {getAllAssignersByCorporate} from "@/utils/groups.be";

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

 export const getAssignmentsByAssigner = async (id: string, startDate?: Date, endDate?: Date) => {
-	let query: any = { assigner: id };
+	let query: any = {assigner: id};

 	if (startDate) {
-		query.startDate = { $gte: startDate.toISOString() };
+		query.startDate = {$gte: startDate.toISOString()};
 	}

 	if (endDate) {
-		query.endDate = { $lte: endDate.toISOString() };
+		query.endDate = {$lte: endDate.toISOString()};
 	}

 	return await db.collection("assignments").find<Assignment>(query).toArray();
@@ -26,7 +26,14 @@ export const getAssignmentsByAssignerBetweenDates = async (id: string, startDate
 };

 export const getAssignmentsByAssigners = async (ids: string[], startDate?: Date, endDate?: Date) => {
-	return (await Promise.all(ids.map((id) => getAssignmentsByAssigner(id, startDate, endDate)))).flat();
+	return await db
+		.collection("assignments")
+		.find<Assignment>({
+			assigner: {$in: ids},
+			...(!!startDate ? {startDate: {$gte: startDate.toISOString()}} : {}),
+			...(!!endDate ? {endDate: {$lte: endDate.toISOString()}} : {}),
+		})
+		.toArray();
 };

 export const getAssignmentsForCorporates = async (idsList: string[], startDate?: Date, endDate?: Date) => {
@@ -57,4 +64,4 @@ export const getAssignmentsForCorporates = async (idsList: string[], startDate?:
 	);

 	return assignments.flat();
-}
+};
--- a/src/utils/exams.be.ts
+++ b/src/utils/exams.be.ts
@@ -5,7 +5,7 @@ import {DeveloperUser, Stat, StudentUser, User} from "@/interfaces/user";
 import {Module} from "@/interfaces";
 import {getCorporateUser} from "@/resources/user";
 import {getUserCorporate} from "./groups.be";
-import { Db, ObjectId } from "mongodb";
+import {Db, ObjectId} from "mongodb";

 export const getExams = async (
 	db: Db,
@@ -18,18 +18,18 @@ export const getExams = async (
 	variant?: Variant,
 	instructorGender?: InstructorGender,
 ): Promise<Exam[]> => {
+	const allExams = await db
+		.collection(module)
+		.find<Exam>({
+			isDiagnostic: false,
+		})
+		.toArray();

-	const allExams = await db.collection(module).find<Exam>({
-		isDiagnostic: false
-	  }).toArray();
-
-	const shuffledPublicExams = (
-		shuffle(
-			allExams.map((doc) => ({
-				...doc,
-				module,
-			})) as Exam[],
-		)
+	const shuffledPublicExams = shuffle(
+		allExams.map((doc) => ({
+			...doc,
+			module,
+		})) as Exam[],
 	).filter((x) => !x.private);

 	let exams: Exam[] = await filterByOwners(shuffledPublicExams, userId);
@@ -39,9 +39,12 @@ export const getExams = async (
 	exams = await filterByPreference(db, exams, module, userId);

 	if (avoidRepeated === "true") {
-		const stats = await db.collection("stats").find<Stat>({
-			user: userId
-		}).toArray();
+		const stats = await db
+			.collection("stats")
+			.find<Stat>({
+				user: userId,
+			})
+			.toArray();

 		const filteredExams = exams.filter((x) => !stats.map((s) => s.exam).includes(x.id));

@@ -78,7 +81,7 @@ const filterByOwners = async (exams: Exam[], userID?: string) => {

 const filterByDifficulty = async (db: Db, exams: Exam[], module: Module, userID?: string) => {
 	if (!userID) return exams;
-	const user = await db.collection("users").findOne<User>({ _id: new ObjectId(userID) });
+	const user = await db.collection("users").findOne<User>({id: userID});
 	if (!user) return exams;

 	const difficulty = user.levels[module] <= 3 ? "easy" : user.levels[module] <= 6 ? "medium" : "hard";
@@ -92,7 +95,7 @@ const filterByPreference = async (db: Db, exams: Exam[], module: Module, userID?

 	if (!userID) return exams;

-	const user = await db.collection("users").findOne<StudentUser | DeveloperUser>({ _id: new ObjectId(userID) });
+	const user = await db.collection("users").findOne<StudentUser | DeveloperUser>({id: userID});
 	if (!user) return exams;

 	if (!["developer", "student"].includes(user.type)) return exams;
--- a/src/utils/groups.be.ts
+++ b/src/utils/groups.be.ts
@@ -1,8 +1,9 @@
 import {app} from "@/firebase";
+import {Assignment} from "@/interfaces/results";
 import {CorporateUser, Group, MasterCorporateUser, StudentUser, TeacherUser, User} from "@/interfaces/user";
 import client from "@/lib/mongodb";
 import moment from "moment";
-import {getUser} from "./users.be";
+import {getLinkedUsers, getUser} from "./users.be";
 import {getSpecificUsers} from "./users.be";

 const db = client.db(process.env.MONGODB_DB);
@@ -71,17 +72,10 @@ export const getUsersGroups = async (ids: string[]) => {
 };

 export const getAllAssignersByCorporate = async (corporateID: string): Promise<string[]> => {
-	const groups = await getUserGroups(corporateID);
-	const groupUsers = (await Promise.all(groups.map(async (g) => await Promise.all(g.participants.map(getUser)))))
-		.flat()
-		.filter((x) => !!x) as User[];
-	const teacherPromises = await Promise.all(
-		groupUsers.map(async (u) =>
-			u.type === "teacher" ? u.id : u.type === "corporate" ? [...(await getAllAssignersByCorporate(u.id)), u.id] : undefined,
-		),
-	);
+	const linkedTeachers = await getLinkedUsers(corporateID, "mastercorporate", "teacher");
+	const linkedCorporates = await getLinkedUsers(corporateID, "mastercorporate", "corporate");

-	return teacherPromises.filter((x) => !!x).flat() as string[];
+	return [...linkedTeachers.users.map((x) => x.id), ...linkedCorporates.users.map((x) => x.id)];
 };

 export const getGroupsForUser = async (admin?: string, participant?: string) => {
--- a/src/utils/users.be.ts
+++ b/src/utils/users.be.ts
@@ -1,7 +1,7 @@
-import {CorporateUser, Group, Type, User} from "@/interfaces/user";
-import {getGroupsForUser, getParticipantGroups, getUserGroups, getUsersGroups} from "./groups.be";
-import {last, uniq, uniqBy} from "lodash";
-import {getUserCodes} from "./codes.be";
+import { CorporateUser, Group, Type, User } from "@/interfaces/user";
+import { getGroupsForUser, getParticipantGroups, getUserGroups, getUsersGroups } from "./groups.be";
+import { last, uniq, uniqBy } from "lodash";
+import { getUserCodes } from "./codes.be";
 import moment from "moment";
 import client from "@/lib/mongodb";

@@ -12,7 +12,7 @@ export async function getUsers() {
 }

 export async function getUser(id: string): Promise<User | undefined> {
-	const user = await db.collection("users").findOne<User>({id});
+	const user = await db.collection("users").findOne<User>({ id });
 	return !!user ? user : undefined;
 }

@@ -21,7 +21,7 @@ export async function getSpecificUsers(ids: string[]) {

 	return await db
 		.collection("users")
-		.find<User>({id: {$in: ids}})
+		.find<User>({ id: { $in: ids } })
 		.toArray();
 }

@@ -33,21 +33,32 @@ export async function getLinkedUsers(
 	size?: number,
 	sort?: string,
 	direction?: "asc" | "desc",
+	searchTerm?: string | undefined,
 ) {
-	const filters = {
-		...(!!type ? {type} : {}),
-	};
+	const filters: any = {};
+
+	if (type) {
+		filters.type = type;
+	}
+
+	if (searchTerm) {
+		filters.$or = [
+			{ name: { $regex: searchTerm, $options: 'i' } },
+			{ email: { $regex: searchTerm, $options: 'i' } },
+			{ company: { $regex: searchTerm, $options: 'i' } },
+		];
+	}

 	if (!userID || userType === "admin" || userType === "developer") {
 		const users = await db
 			.collection("users")
 			.find<User>(filters)
-			.sort(sort ? {[sort]: direction === "desc" ? -1 : 1} : {})
+			.sort(sort ? { [sort]: direction === "desc" ? -1 : 1 } : {})
 			.skip(page && size ? page * size : 0)
 			.limit(size || 0)
 			.toArray();
 		const total = await db.collection("users").countDocuments(filters);
-		return {users, total};
+		return { users, total };
 	}

 	const adminGroups = await getUserGroups(userID);
@@ -56,22 +67,22 @@ export async function getLinkedUsers(

 	const participants = uniq([
 		...adminGroups.flatMap((x) => x.participants),
-		...groups.flat().flatMap((x) => x.participants),
+		...(userType === "mastercorporate" ? groups.flat().flatMap((x) => x.participants) : []),
 		...(userType === "teacher" ? belongingGroups.flatMap((x) => x.participants) : []),
 	]);

 	//  ⨯ [FirebaseError: Invalid Query. A non-empty array is required for 'in' filters.] {
-	if (participants.length === 0) return {users: [], total: 0};
+	if (participants.length === 0) return { users: [], total: 0 };

 	const users = await db
 		.collection("users")
-		.find<User>({...filters, id: {$in: participants}})
+		.find<User>({ ...filters, id: { $in: participants } })
 		.skip(page && size ? page * size : 0)
 		.limit(size || 0)
 		.toArray();
-	const total = await db.collection("users").countDocuments({...filters, id: {$in: participants}});
+	const total = await db.collection("users").countDocuments({ ...filters, id: { $in: participants } });

-	return {users, total};
+	return { users, total };
 }

 export async function getUserBalance(user: User) {
Author	SHA1	Message	Date
carlos.mesquita	22209ee1c1	Merged main into feature/training-content	2024-09-09 00:40:36 +00:00
Carlos Mesquita	0e2f53db0a	Search on user list with mongo search query	2024-09-09 01:38:11 +01:00
Carlos Mesquita	9177a6b2ac	Pagination on UserList	2024-09-09 01:22:13 +01:00
Tiago Ribeiro	6d1e8a9788	Had some errors on updating groups	2024-09-09 00:06:51 +01:00
Tiago Ribeiro	1c61d50a5c	Improved some of the querying for the assignments	2024-09-09 00:02:34 +01:00
Tiago Ribeiro	9f0ba418e5	Added filtering and pagination for the assignment creator	2024-09-08 23:24:27 +01:00
Tiago Ribeiro	6fd2e64e04	Merge branch 'main' of bitbucket.org:ecropdev/ielts-ui	2024-09-08 23:09:25 +01:00
carlos.mesquita	2c01e6b460	Merged in feature/training-content (pull request #101 ) Feature/training content Approved-by: Tiago Ribeiro	2024-09-08 22:08:32 +00:00
Tiago Ribeiro	6e0c4d4361	Added search per exam	2024-09-08 23:07:47 +01:00
Tiago Ribeiro	745eef981f	Added some more pagination	2024-09-08 23:02:48 +01:00
carlos.mesquita	7a33f42bcd	Merged main into feature/training-content	2024-09-08 21:49:22 +00:00
Tiago Ribeiro	eab6ab03b7	Not shown when not completed	2024-09-08 22:46:09 +01:00
Tiago Ribeiro	fbc7abdabb	Solved a bug	2024-09-08 22:35:14 +01:00
Tiago Ribeiro	b7349b5df8	Tried to solve some more issues with counts	2024-09-08 19:56:44 +01:00
Tiago Ribeiro	298901a642	Updated the UserList to show the corporates	2024-09-08 19:50:59 +01:00
Tiago Ribeiro	88eafafe12	Stopped sessions from being cached	2024-09-08 19:36:04 +01:00
Tiago Ribeiro	31a01a3157	Allow admins create other admins	2024-09-08 19:27:12 +01:00
Tiago Ribeiro	a5b3a7e94d	Solved a problem with the _id	2024-09-08 19:25:14 +01:00
Tiago Ribeiro	49e8237e99	A bit of error handling I guess	2024-09-08 18:54:44 +01:00
Tiago Ribeiro	d5769c2cb9	Updated more of the page	2024-09-08 18:39:52 +01:00
Tiago Ribeiro	e49a325074	Had a small error on the groups	2024-09-08 18:00:47 +01:00
Tiago Ribeiro	e6528392a2	Changed the totals of the admin pretty much	2024-09-08 16:06:54 +01:00