Merge with develop

src/pages/(admin)/BatchCreateUser/IUserImport.ts

@@ -3,12 +3,13 @@ import { Type as UserType} from "@/interfaces/user";
 export type Type = Exclude<UserType, "admin" | "developer" | "agent" | "mastercorporate">;
 
 export interface UserImport {
+	id: string;
 	email: string;
 	name: string;
 	passport_id: string;
 	type: Type;
 	groupName: string;
-	corporate: string;
+	entity: string;
 	studentID: string;
 	demographicInformation: {
 		country: string;

src/pages/(admin)/BatchCreateUser/UserTable.tsx

@@ -40,13 +40,9 @@ const columns = [
     cell: info => info.getValue(),
     header: () => 'Phone Number',
   }),
-  columnHelper.accessor('corporate', {
-    cell: info => info.getValue(),
-    header: () => 'Corporate (e-mail)',
-  }),
   columnHelper.accessor('groupName', {
     cell: info => info.getValue(),
-    header: () => 'Group Name',
+    header: () => 'Classroom Name',
   }),
   columnHelper.accessor('demographicInformation.country', {
     cell: info => info.getValue(),

src/pages/(admin)/BatchCreateUser/index.tsx

@@ -17,6 +17,8 @@ import countryCodes from "country-codes-list";
 import { User, Type as UserType } from "@/interfaces/user";
 import { Type, UserImport } from "./IUserImport";
 import UserTable from "./UserTable";
+import { EntityWithRoles } from "@/interfaces/entity";
+import Select from "@/components/Low/Select";
 
 const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
 
@@ -62,10 +64,11 @@ const USER_TYPE_PERMISSIONS: {
 interface Props {
 	user: User;
 	permissions: PermissionType[];
+	entities: EntityWithRoles[]
 	onFinish: () => void;
 }
 
-export default function BatchCreateUser({ user, permissions, onFinish }: Props) {
+export default function BatchCreateUser({ user, entities, permissions, onFinish }: Props) {
 	const [infos, setInfos] = useState<UserImport[]>([]);
 
 	const [duplicatedUsers, setDuplicatedUsers] = useState<UserImport[]>([]);
@@ -78,6 +81,7 @@ export default function BatchCreateUser({ user, permissions, onFinish }: Props)
 	const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
 	const [type, setType] = useState<Type>("student");
 	const [showHelp, setShowHelp] = useState(false);
+	const [entity, setEntity] = useState((entities || [])[0]?.id || undefined)
 
 	const { openFilePicker, filesContent, clear } = useFilePicker({
 		accept: ".xlsx",
@@ -97,7 +101,7 @@ export default function BatchCreateUser({ user, permissions, onFinish }: Props)
 					const information = uniqBy(
 						rows
 							.map((row) => {
-								const [firstName, lastName, studentID, passport_id, email, phone, corporate, group, country] = row as string[];
+								const [firstName, lastName, studentID, passport_id, email, phone, group, country] = row as string[];
 								const countryItem =
 									countryCodes.findOne("countryCode" as any, country.toUpperCase()) ||
 									countryCodes.all().find((x) => x.countryNameEn.toLowerCase() === country.toLowerCase());
@@ -109,8 +113,8 @@ export default function BatchCreateUser({ user, permissions, onFinish }: Props)
 										type: type,
 										passport_id: passport_id?.toString().trim() || undefined,
 										groupName: group,
-										corporate,
 										studentID,
+										entity,
 										demographicInformation: {
 											country: countryItem?.countryCode,
 											passport_id: passport_id?.toString().trim() || undefined,
@@ -131,7 +135,9 @@ export default function BatchCreateUser({ user, permissions, onFinish }: Props)
 					}
 
 					setInfos(information);
-				} catch {
+				} catch(e) {
+					console.log(e)
+
 					toast.error(
 						"Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!",
 					);
@@ -170,22 +176,37 @@ export default function BatchCreateUser({ user, permissions, onFinish }: Props)
 	}, [infos]);
 
 	const makeUsers = async () => {
-		if (!confirm(`You are about to add ${newUsers.length} user${newUsers.length !== 1 ? 's' : ''}, are you sure you want to continue?`)) return;
+		const newUsersSentence = newUsers.length > 0 ? `create ${newUsers.length} user(s)` : undefined;
+		const existingUsersSentence = duplicatedUsers.length > 0 ? `invite ${duplicatedUsers.length} registered student(s)` : undefined;
 
+		if (!confirm(`You are about to ${[newUsersSentence, existingUsersSentence].filter((x) => !!x).join(" and ")}, are you sure you want to continue?`))
+			return;
+
+		/*Promise.all(duplicatedUsers.map(async (u) => await axios.post(`/api/invites`, {to: u.id, entity, from: user.id})))
+			.then(() => toast.success(`Successfully invited ${duplicatedUsers.length} registered student(s)!`))
+			.finally(() => {
+				if (newUsers.length === 0) setIsLoading(false);
+			});
+		*/
 		if (newUsers.length > 0) {
 			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 {
+			} catch(e) {
+				console.error(e)
 				toast.error("Something went wrong, please try again later!");
 			} finally {
 				setIsLoading(false);
 				setInfos([]);
 				clear();
 			}
+		} else {
+			setIsLoading(false);
+			setInfos([]);
+			clear();
 		}
 	};
 
@@ -203,8 +224,7 @@ export default function BatchCreateUser({ user, permissions, onFinish }: Props)
 								<th className="border border-neutral-200 px-2 py-1">Passport/National ID</th>
 								<th className="border border-neutral-200 px-2 py-1">E-mail</th>
 								<th className="border border-neutral-200 px-2 py-1">Phone Number</th>
-								{user?.type !== "corporate" && <th className="border border-neutral-200 px-2 py-1">Corporate (e-mail)</th>}
-								<th className="border border-neutral-200 px-2 py-1">Group Name</th>
+								<th className="border border-neutral-200 px-2 py-1">Classroom Name</th>
 								<th className="border border-neutral-200 px-2 py-1">Country</th>
 							</tr>
 						</thead>
@@ -221,15 +241,28 @@ export default function BatchCreateUser({ user, permissions, onFinish }: Props)
 				</div>
 			</Modal>
 			<div className="border-mti-gray-platinum flex flex-col gap-4 rounded-xl border p-4">
-				<div className="flex items-end justify-between">
-					<label className="text-mti-gray-dim text-base font-normal">Choose an Excel file</label>
-					<div className="tooltip cursor-pointer" data-tip="Excel File Format" onClick={() => setShowHelp(true)}>
-						<BsQuestionCircleFill />
+				<div className="grid grid-cols-2 -md:grid-cols-1 gap-4">
+					<div className="flex flex-col gap-4">
+						<div className="flex items-end justify-between">
+							<label className="text-mti-gray-dim text-base font-normal">Choose an Excel file</label>
+							<div className="tooltip cursor-pointer" data-tip="Excel File Format" onClick={() => setShowHelp(true)}>
+								<BsQuestionCircleFill />
+							</div>
+						</div>
+						<Button onClick={openFilePicker} isLoading={isLoading} disabled={isLoading}>
+							{filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
+						</Button>
+					</div>
+					<div className={clsx("flex flex-col gap-4")}>
+          	<label className="font-normal text-base text-mti-gray-dim">Entity</label>
+	          <Select
+	            defaultValue={{ value: (entities || [])[0]?.id, label: (entities || [])[0]?.label }}
+	            options={entities.map((e) => ({ value: e.id, label: e.label }))}
+	            onChange={(e) => setEntity(e?.value || undefined)}
+	            isClearable={checkAccess(user, ["admin", "developer"])}
+	          />
 					</div>
 				</div>
-				<Button onClick={openFilePicker} isLoading={isLoading} disabled={isLoading}>
-					{filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
-				</Button>
 				{user && checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
 					<>
 						<div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">

src/pages/(admin)/ExamLoader.tsx

@@ -39,7 +39,7 @@ export default function ExamLoader() {
 			setExams([exam]);
 			setSelectedModules([selectedModule]);
 
-			router.push("/exercises");
+			router.push("/exam");
 		}
 
 		setIsLoading(false);

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

@@ -29,7 +29,7 @@ const CreatorCell = ({id, users}: {id: string; users: User[]}) => {
 	return (
 		<>
 			{(creatorUser?.type === "corporate" ? creatorUser?.corporateInformation?.companyInformation?.name : creatorUser?.name || "N/A") || "N/A"}{" "}
-			{creatorUser && `(${USER_TYPE_LABELS[creatorUser.type]})`}
+			{creatorUser && `(${USER_TYPE_LABELS[creatorUser?.type]})`}
 		</>
 	);
 };
@@ -216,10 +216,10 @@ export default function CodeList({user}: {user: User}) {
 							filteredCorporate
 								? {
 										label: `${
-											filteredCorporate.type === "corporate"
+											filteredCorporate?.type === "corporate"
 												? filteredCorporate.corporateInformation?.companyInformation?.name || filteredCorporate.name
 												: filteredCorporate.name
-										} (${USER_TYPE_LABELS[filteredCorporate.type]})`,
+										} (${USER_TYPE_LABELS[filteredCorporate?.type]})`,
 										value: filteredCorporate.id,
 								  }
 								: null

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

@@ -303,4 +303,4 @@ export default function ExamList({user}: {user: User}) {
 			</table>
 		</div>
 	);
-}
+}

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

@@ -3,373 +3,300 @@ import Input from "@/components/Low/Input";
 import Modal from "@/components/Modal";
 import useGroups from "@/hooks/useGroups";
 import useUsers from "@/hooks/useUsers";
-import {CorporateUser, Group, User} from "@/interfaces/user";
-import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import { CorporateUser, Group, User } from "@/interfaces/user";
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import axios from "axios";
-import {capitalize, uniq} from "lodash";
-import {useEffect, useMemo, useState} from "react";
-import {BsPencil, BsQuestionCircleFill, BsTrash} from "react-icons/bs";
+import { capitalize, uniq } from "lodash";
+import { useEffect, useMemo, useState } from "react";
+import { BsPencil, BsQuestionCircleFill, BsTrash } from "react-icons/bs";
 import Select from "react-select";
-import {toast} from "react-toastify";
+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, USER_TYPE_LABELS} from "@/resources/user";
-import {checkAccess} from "@/utils/permissions";
+import { useFilePicker } from "use-file-picker";
+import { getUserCorporate } from "@/utils/groups";
+import { isAgentUser, isCorporateUser, USER_TYPE_LABELS } from "@/resources/user";
+import { checkAccess } from "@/utils/permissions";
 import usePermissions from "@/hooks/usePermissions";
-import {useListSearch} from "@/hooks/useListSearch";
+import { useListSearch } from "@/hooks/useListSearch";
+import Table from "@/components/High/Table";
+import useEntitiesGroups from "@/hooks/useEntitiesGroups";
+import useEntitiesUsers from "@/hooks/useEntitiesUsers";
+import { WithEntity } from "@/interfaces/entity";
 const searchFields = [["name"]];
 
-const columnHelper = createColumnHelper<Group>();
+const columnHelper = createColumnHelper<WithEntity<Group>>();
 const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
 
-const LinkedCorporate = ({userId, users, groups}: {userId: string; users: User[]; groups: Group[]}) => {
-	const [companyName, setCompanyName] = useState("");
-	const [isLoading, setIsLoading] = useState(false);
-
-	useEffect(() => {
-		const user = users.find((u) => u.id === userId);
-		if (!user) return setCompanyName("");
-
-		if (isCorporateUser(user)) return setCompanyName(user.corporateInformation?.companyInformation?.name || user.name);
-		if (isAgentUser(user)) return setCompanyName(user.agentInformation?.companyName || user.name);
-
-		const belongingGroups = groups.filter((x) => x.participants.includes(userId));
-		const belongingGroupsAdmins = belongingGroups.map((x) => users.find((u) => u.id === x.admin)).filter((x) => !!x && isCorporateUser(x));
-
-		if (belongingGroupsAdmins.length === 0) return setCompanyName("");
-
-		const admin = belongingGroupsAdmins[0] as CorporateUser;
-		setCompanyName(admin.corporateInformation?.companyInformation.name || admin.name);
-	}, [userId, users, groups]);
-
-	return isLoading ? <span className="animate-pulse">Loading...</span> : <>{companyName}</>;
-};
-
 interface CreateDialogProps {
-	user: User;
-	users: User[];
-	group?: Group;
-	onClose: () => void;
+  user: User;
+  users: User[];
+  group?: Group;
+  onClose: () => void;
 }
 
-const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
-	const [name, setName] = useState<string | undefined>(group?.name || undefined);
-	const [admin, setAdmin] = useState<string>(group?.admin || user.id);
-	const [participants, setParticipants] = useState<string[]>(group?.participants || []);
-	const [isLoading, setIsLoading] = useState(false);
+const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
+  const [name, setName] = useState<string | undefined>(group?.name || undefined);
+  const [admin, setAdmin] = useState<string>(group?.admin || user.id);
+  const [participants, setParticipants] = useState<string[]>(group?.participants || []);
+  const [isLoading, setIsLoading] = useState(false);
 
-	const {openFilePicker, filesContent, clear} = useFilePicker({
-		accept: ".xlsx",
-		multiple: false,
-		readAs: "ArrayBuffer",
-	});
+  const { openFilePicker, filesContent, clear } = useFilePicker({
+    accept: ".xlsx",
+    multiple: false,
+    readAs: "ArrayBuffer",
+  });
 
-	const availableUsers = useMemo(() => {
-		if (user.type === "teacher") return users.filter((x) => ["student"].includes(x.type));
-		if (user.type === "corporate") return users.filter((x) => ["teacher", "student"].includes(x.type));
-		if (user.type === "mastercorporate") return users.filter((x) => ["corporate", "teacher", "student"].includes(x.type));
+  const availableUsers = useMemo(() => {
+    if (user?.type === "teacher") return users.filter((x) => ["student"].includes(x.type));
+    if (user?.type === "corporate") return users.filter((x) => ["teacher", "student"].includes(x.type));
+    if (user?.type === "mastercorporate") return users.filter((x) => ["corporate", "teacher", "student"].includes(x.type));
 
-		return users;
-	}, [user, users]);
+    return users;
+  }, [user, users]);
 
-	useEffect(() => {
-		if (filesContent.length > 0) {
-			setIsLoading(true);
+  useEffect(() => {
+    if (filesContent.length > 0) {
+      setIsLoading(true);
 
-			const file = filesContent[0];
-			readXlsxFile(file.content).then((rows) => {
-				const emails = uniq(
-					rows
-						.map((row) => {
-							const [email] = row as string[];
-							return EMAIL_REGEX.test(email) && !users.map((u) => u.email).includes(email) ? email.toString().trim() : undefined;
-						})
-						.filter((x) => !!x),
-				);
+      const file = filesContent[0];
+      readXlsxFile(file.content).then((rows) => {
+        const emails = uniq(
+          rows
+            .map((row) => {
+              const [email] = row as string[];
+              return EMAIL_REGEX.test(email) && !users.map((u) => u.email).includes(email) ? email.toString().trim() : undefined;
+            })
+            .filter((x) => !!x),
+        );
 
-				if (emails.length === 0) {
-					toast.error("Please upload an Excel file containing e-mails!");
-					clear();
-					setIsLoading(false);
-					return;
-				}
+        if (emails.length === 0) {
+          toast.error("Please upload an Excel file containing e-mails!");
+          clear();
+          setIsLoading(false);
+          return;
+        }
 
-				const emailUsers = [...new Set(emails)].map((x) => users.find((y) => y.email.toLowerCase() === x)).filter((x) => x !== undefined);
-				const filteredUsers = emailUsers.filter(
-					(x) =>
-						((user.type === "developer" || user.type === "admin" || user.type === "corporate" || user.type === "mastercorporate") &&
-							(x?.type === "student" || x?.type === "teacher")) ||
-						(user.type === "teacher" && x?.type === "student"),
-				);
+        const emailUsers = [...new Set(emails)].map((x) => users.find((y) => y.email.toLowerCase() === x)).filter((x) => x !== undefined);
+        const filteredUsers = emailUsers.filter(
+          (x) =>
+            ((user.type === "developer" || user.type === "admin" || user.type === "corporate" || user.type === "mastercorporate") &&
+              (x?.type === "student" || x?.type === "teacher")) ||
+            (user.type === "teacher" && x?.type === "student"),
+        );
 
-				setParticipants(filteredUsers.filter((x) => !!x).map((x) => x!.id));
-				toast.success(
-					user.type !== "teacher"
-						? "Added all teachers and students found in the file you've provided!"
-						: "Added all students found in the file you've provided!",
-					{toastId: "upload-success"},
-				);
-				setIsLoading(false);
-			});
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [filesContent, user.type, users]);
+        setParticipants(filteredUsers.filter((x) => !!x).map((x) => x!.id));
+        toast.success(
+          user.type !== "teacher"
+            ? "Added all teachers and students found in the file you've provided!"
+            : "Added all students found in the file you've provided!",
+          { toastId: "upload-success" },
+        );
+        setIsLoading(false);
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filesContent, user.type, users]);
 
-	const submit = () => {
-		setIsLoading(true);
+  const submit = () => {
+    setIsLoading(true);
 
-		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;
-		}
+    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;
+    }
 
-		(group ? axios.patch : axios.post)(group ? `/api/groups/${group.id}` : "/api/groups", {name, admin, participants})
-			.then(() => {
-				toast.success(`Group "${name}" ${group ? "edited" : "created"} successfully`);
-				return true;
-			})
-			.catch(() => {
-				toast.error("Something went wrong, please try again later!");
-				return false;
-			})
-			.finally(() => {
-				setIsLoading(false);
-				onClose();
-			});
-	};
+    (group ? axios.patch : axios.post)(group ? `/api/groups/${group.id}` : "/api/groups", { name, admin, participants })
+      .then(() => {
+        toast.success(`Group "${name}" ${group ? "edited" : "created"} successfully`);
+        return true;
+      })
+      .catch(() => {
+        toast.error("Something went wrong, please try again later!");
+        return false;
+      })
+      .finally(() => {
+        setIsLoading(false);
+        onClose();
+      });
+  };
 
-	return (
-		<div className="mt-4 flex w-full flex-col gap-12 px-4 py-2">
-			<div className="flex flex-col gap-8">
-				<Input name="name" type="text" label="Name" defaultValue={name} onChange={setName} required disabled={group?.disableEditing} />
-				<div className="flex w-full flex-col gap-3">
-					<div className="flex items-center gap-2">
-						<label className="text-mti-gray-dim text-base font-normal">Participants</label>
-						<div className="tooltip" data-tip="The Excel file should only include a column with the desired e-mails.">
-							<BsQuestionCircleFill />
-						</div>
-					</div>
-					<div className="flex w-full gap-8">
-						<Select
-							className="w-full"
-							value={participants.map((x) => ({
-								value: x,
-								label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
-							}))}
-							placeholder="Participants..."
-							defaultValue={participants.map((x) => ({
-								value: x,
-								label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
-							}))}
-							options={availableUsers.map((x) => ({value: x.id, label: `${x.email} - ${x.name}`}))}
-							onChange={(value) => setParticipants(value.map((x) => x.value))}
-							isMulti
-							isSearchable
-							menuPortalTarget={document?.body}
-							styles={{
-								menuPortal: (base) => ({...base, zIndex: 9999}),
-								control: (styles) => ({
-									...styles,
-									backgroundColor: "white",
-									padding: "1rem 1.5rem",
-									zIndex: "40",
-								}),
-							}}
-						/>
-						{user.type !== "teacher" && (
-							<Button className="w-full max-w-[300px] h-fit" onClick={openFilePicker} isLoading={isLoading} variant="outline">
-								{filesContent.length === 0 ? "Upload participants Excel file" : filesContent[0].name}
-							</Button>
-						)}
-					</div>
-				</div>
-			</div>
-			<div className="mt-8 flex w-full items-center justify-end gap-8">
-				<Button variant="outline" color="red" className="w-full max-w-[200px]" isLoading={isLoading} onClick={onClose}>
-					Cancel
-				</Button>
-				<Button className="w-full max-w-[200px]" onClick={submit} isLoading={isLoading} disabled={!name}>
-					Submit
-				</Button>
-			</div>
-		</div>
-	);
+  return (
+    <div className="mt-4 flex w-full flex-col gap-12 px-4 py-2">
+      <div className="flex flex-col gap-8">
+        <Input name="name" type="text" label="Name" defaultValue={name} onChange={setName} required disabled={group?.disableEditing} />
+        <div className="flex w-full flex-col gap-3">
+          <div className="flex items-center gap-2">
+            <label className="text-mti-gray-dim text-base font-normal">Participants</label>
+            <div className="tooltip" data-tip="The Excel file should only include a column with the desired e-mails.">
+              <BsQuestionCircleFill />
+            </div>
+          </div>
+          <div className="flex w-full gap-8">
+            <Select
+              className="w-full"
+              value={participants.map((x) => ({
+                value: x,
+                label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
+              }))}
+              placeholder="Participants..."
+              defaultValue={participants.map((x) => ({
+                value: x,
+                label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
+              }))}
+              options={availableUsers.map((x) => ({ value: x.id, label: `${x.email} - ${x.name}` }))}
+              onChange={(value) => setParticipants(value.map((x) => x.value))}
+              isMulti
+              isSearchable
+              menuPortalTarget={document?.body}
+              styles={{
+                menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                control: (styles) => ({
+                  ...styles,
+                  backgroundColor: "white",
+                  padding: "1rem 1.5rem",
+                  zIndex: "40",
+                }),
+              }}
+            />
+            {user.type !== "teacher" && (
+              <Button className="w-full max-w-[300px] h-fit" onClick={openFilePicker} isLoading={isLoading} variant="outline">
+                {filesContent.length === 0 ? "Upload participants Excel file" : filesContent[0].name}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="mt-8 flex w-full items-center justify-end gap-8">
+        <Button variant="outline" color="red" className="w-full max-w-[200px]" isLoading={isLoading} onClick={onClose}>
+          Cancel
+        </Button>
+        <Button className="w-full max-w-[200px]" onClick={submit} isLoading={isLoading} disabled={!name}>
+          Submit
+        </Button>
+      </div>
+    </div>
+  );
 };
 
-const filterTypes = ["corporate", "teacher", "mastercorporate"];
+export default function GroupList({ user }: { user: User }) {
+  const [isCreating, setIsCreating] = useState(false);
+  const [editingGroup, setEditingGroup] = useState<Group>();
+  const [viewingAllParticipants, setViewingAllParticipants] = useState<string>();
 
-export default function GroupList({user}: {user: User}) {
-	const [isCreating, setIsCreating] = useState(false);
-	const [editingGroup, setEditingGroup] = useState<Group>();
-	const [viewingAllParticipants, setViewingAllParticipants] = useState<string>();
+  const { permissions } = usePermissions(user?.id || "");
 
-	const {permissions} = usePermissions(user?.id || "");
+  const { users } = useEntitiesUsers();
+  const { groups, reload } = useEntitiesGroups();
 
-	const {users} = useUsers();
-	const {groups, reload} = useGroups({
-		admin: user && filterTypes.includes(user?.type) ? user.id : undefined,
-		userType: user?.type,
-	});
+  const deleteGroup = (group: Group) => {
+    if (!confirm(`Are you sure you want to delete "${group.name}"?`)) return;
 
-	const {groups: corporateGroups} = useGroups({
-		admin: user && filterTypes.includes(user?.type) ? user.id : undefined,
-		userType: user?.type,
-		adminAdmins: user?.id,
-	});
+    axios
+      .delete<{ ok: boolean }>(`/api/groups/${group.id}`)
+      .then(() => toast.success(`Group "${group.name}" deleted successfully`))
+      .catch(() => toast.error("Something went wrong, please try again later!"))
+      .finally(reload);
+  };
 
-	const {rows: filteredRows, renderSearch} = useListSearch<Group>(searchFields, groups);
+  const defaultColumns = [
+    columnHelper.accessor("id", {
+      header: "ID",
+      cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor("name", {
+      header: "Name",
+      cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor("admin", {
+      header: "Admin",
+      cell: (info) => (
+        <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>
+      ),
+    }),
+    columnHelper.accessor("entity.label", {
+      header: "Entity",
+      cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor("participants", {
+      header: "Participants",
+      cell: (info) => (
+        <span>
+          {info
+            .getValue()
+            .slice(0, viewingAllParticipants === info.row.original.id ? undefined : 5)
+            .map((x) => users.find((y) => y.id === x)?.name)
+            .join(", ")}
+          {info.getValue().length > 5 && viewingAllParticipants !== info.row.original.id && (
+            <button
+              className="text-mti-purple-light font-bold hover:text-mti-purple-dark transition ease-in-out duration-300"
+              onClick={() => setViewingAllParticipants(info.row.original.id)}>
+              , View More
+            </button>
+          )}
+          {info.getValue().length > 5 && viewingAllParticipants === info.row.original.id && (
+            <button
+              className="text-mti-purple-light font-bold hover:text-mti-purple-dark transition ease-in-out duration-300"
+              onClick={() => setViewingAllParticipants(undefined)}>
+              , View Less
+            </button>
+          )}
+        </span>
+      ),
+    }),
+    {
+      header: "",
+      id: "actions",
+      cell: ({ row }: { row: { original: Group } }) => {
+        return (
+          <>
+            {user && (checkAccess(user, ["developer", "admin"]) || user.id === row.original.admin) && (
+              <div className="flex gap-2">
+                {(!row.original.disableEditing || checkAccess(user, ["developer", "admin"]), "editGroup") && (
+                  <div data-tip="Edit" className="tooltip cursor-pointer" onClick={() => setEditingGroup(row.original)}>
+                    <BsPencil className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
+                  </div>
+                )}
+                {(!row.original.disableEditing || checkAccess(user, ["developer", "admin"]), "deleteGroup") && (
+                  <div data-tip="Delete" className="tooltip cursor-pointer" onClick={() => deleteGroup(row.original)}>
+                    <BsTrash className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
+                  </div>
+                )}
+              </div>
+            )}
+          </>
+        );
+      },
+    },
+  ];
 
-	const deleteGroup = (group: Group) => {
-		if (!confirm(`Are you sure you want to delete "${group.name}"?`)) return;
+  const closeModal = () => {
+    setIsCreating(false);
+    setEditingGroup(undefined);
+    reload();
+  };
 
-		axios
-			.delete<{ok: boolean}>(`/api/groups/${group.id}`)
-			.then(() => toast.success(`Group "${group.name}" deleted successfully`))
-			.catch(() => toast.error("Something went wrong, please try again later!"))
-			.finally(reload);
-	};
+  return (
+    <div className="h-full w-full rounded-xl flex flex-col gap-4">
+      <Modal isOpen={isCreating || !!editingGroup} onClose={closeModal} title={editingGroup ? `Editing ${editingGroup.name}` : "New Group"}>
+        <CreatePanel
+          group={editingGroup}
+          user={user}
+          onClose={closeModal}
+          users={users}
+        />
+      </Modal>
+      <Table data={groups} columns={defaultColumns} searchFields={searchFields} />
 
-	const defaultColumns = [
-		columnHelper.accessor("id", {
-			header: "ID",
-			cell: (info) => info.getValue(),
-		}),
-		columnHelper.accessor("name", {
-			header: "Name",
-			cell: (info) => info.getValue(),
-		}),
-		columnHelper.accessor("admin", {
-			header: "Admin",
-			cell: (info) => (
-				<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>
-			),
-		}),
-		columnHelper.accessor("admin", {
-			header: "Linked Corporate",
-			cell: (info) => <LinkedCorporate userId={info.getValue()} users={users} groups={groups} />,
-		}),
-		columnHelper.accessor("participants", {
-			header: "Participants",
-			cell: (info) => (
-				<span>
-					{info
-						.getValue()
-						.slice(0, viewingAllParticipants === info.row.original.id ? undefined : 5)
-						.map((x) => users.find((y) => y.id === x)?.name)
-						.join(", ")}
-					{info.getValue().length > 5 && viewingAllParticipants !== info.row.original.id && (
-						<button
-							className="text-mti-purple-light font-bold hover:text-mti-purple-dark transition ease-in-out duration-300"
-							onClick={() => setViewingAllParticipants(info.row.original.id)}>
-							, View More
-						</button>
-					)}
-					{info.getValue().length > 5 && viewingAllParticipants === info.row.original.id && (
-						<button
-							className="text-mti-purple-light font-bold hover:text-mti-purple-dark transition ease-in-out duration-300"
-							onClick={() => setViewingAllParticipants(undefined)}>
-							, View Less
-						</button>
-					)}
-				</span>
-			),
-		}),
-		{
-			header: "",
-			id: "actions",
-			cell: ({row}: {row: {original: Group}}) => {
-				return (
-					<>
-						{user && (checkAccess(user, ["developer", "admin"]) || user.id === row.original.admin) && (
-							<div className="flex gap-2">
-								{(!row.original.disableEditing || checkAccess(user, ["developer", "admin"]), "editGroup") && (
-									<div data-tip="Edit" className="tooltip cursor-pointer" onClick={() => setEditingGroup(row.original)}>
-										<BsPencil className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
-									</div>
-								)}
-								{(!row.original.disableEditing || checkAccess(user, ["developer", "admin"]), "deleteGroup") && (
-									<div data-tip="Delete" className="tooltip cursor-pointer" onClick={() => deleteGroup(row.original)}>
-										<BsTrash className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
-									</div>
-								)}
-							</div>
-						)}
-					</>
-				);
-			},
-		},
-	];
-
-	const table = useReactTable({
-		data: filteredRows,
-		columns: defaultColumns,
-		getCoreRowModel: getCoreRowModel(),
-	});
-
-	const closeModal = () => {
-		setIsCreating(false);
-		setEditingGroup(undefined);
-		reload();
-	};
-
-	return (
-		<div className="h-full w-full rounded-xl flex flex-col gap-4">
-			<Modal isOpen={isCreating || !!editingGroup} onClose={closeModal} title={editingGroup ? `Editing ${editingGroup.name}` : "New Group"}>
-				<CreatePanel
-					group={editingGroup}
-					user={user}
-					onClose={closeModal}
-					users={
-						checkAccess(user, ["corporate", "teacher", "mastercorporate"])
-							? users.filter(
-									(u) =>
-										groups
-											.filter((g) => g.admin === user.id)
-											.flatMap((g) => g.participants)
-											.includes(u.id) ||
-										(user?.type === "teacher" ? corporateGroups : groups).flatMap((g) => g.participants).includes(u.id),
-							  )
-							: users
-					}
-				/>
-			</Modal>
-			{renderSearch()}
-			<table className="bg-mti-purple-ultralight/40 w-full rounded-xl">
-				<thead>
-					{table.getHeaderGroups().map((headerGroup) => (
-						<tr key={headerGroup.id}>
-							{headerGroup.headers.map((header) => (
-								<th className="py-4" key={header.id}>
-									{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-								</th>
-							))}
-						</tr>
-					))}
-				</thead>
-				<tbody className="px-2">
-					{table.getRowModel().rows.map((row) => (
-						<tr className="even:bg-mti-purple-ultralight/40 rounded-lg py-2 odd:bg-white" 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>
-
-			{checkAccess(user, ["teacher", "corporate", "mastercorporate", "admin", "developer"], permissions, "createGroup") && (
-				<button
-					onClick={() => setIsCreating(true)}
-					className="bg-mti-purple-light hover:bg-mti-purple w-full py-2 text-white transition duration-300 ease-in-out">
-					New Group
-				</button>
-			)}
-		</div>
-	);
+      {checkAccess(user, ["teacher", "corporate", "mastercorporate", "admin", "developer"], permissions, "createGroup") && (
+        <button
+          onClick={() => setIsCreating(true)}
+          className="bg-mti-purple-light hover:bg-mti-purple w-full py-2 text-white transition duration-300 ease-in-out">
+          New Group
+        </button>
+      )}
+    </div>
+  );
 }

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

@@ -0,0 +1,111 @@
+/* eslint-disable @next/next/no-img-element */
+import {Stat, StudentUser, User} from "@/interfaces/user";
+import {useState} from "react";
+import {averageLevelCalculator} from "@/utils/score";
+import {groupByExam} from "@/utils/stats";
+import {createColumnHelper} from "@tanstack/react-table";
+import Checkbox from "@/components/Low/Checkbox";
+import List from "@/components/List";
+import Table from "@/components/High/Table";
+
+type StudentPerformanceItem = StudentUser & {entitiesLabel: string; group: string};
+
+const StudentPerformanceList = ({items = [], stats}: {items: StudentPerformanceItem[]; stats: Stat[]}) => {
+	const [isShowingAmount, setIsShowingAmount] = useState(false);
+
+	const columnHelper = createColumnHelper<StudentPerformanceItem>();
+
+	const columns = [
+		columnHelper.accessor("name", {
+			header: "Student Name",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("email", {
+			header: "E-mail",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("studentID", {
+			header: "ID",
+			cell: (info) => info.getValue() || "N/A",
+		}),
+		columnHelper.accessor("group", {
+			header: "Group",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("entitiesLabel", {
+			header: "Entities",
+			cell: (info) => info.getValue() || "N/A",
+		}),
+		columnHelper.accessor("levels.reading", {
+			header: "Reading",
+			cell: (info) =>
+				!isShowingAmount
+					? info.getValue() || 0
+					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "reading" && x.user === info.row.original.id))).length} exams`,
+		}),
+		columnHelper.accessor("levels.listening", {
+			header: "Listening",
+			cell: (info) =>
+				!isShowingAmount
+					? info.getValue() || 0
+					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "listening" && x.user === info.row.original.id))).length} exams`,
+		}),
+		columnHelper.accessor("levels.writing", {
+			header: "Writing",
+			cell: (info) =>
+				!isShowingAmount
+					? info.getValue() || 0
+					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "writing" && x.user === info.row.original.id))).length} exams`,
+		}),
+		columnHelper.accessor("levels.speaking", {
+			header: "Speaking",
+			cell: (info) =>
+				!isShowingAmount
+					? info.getValue() || 0
+					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "speaking" && x.user === info.row.original.id))).length} exams`,
+		}),
+		columnHelper.accessor("levels.level", {
+			header: "Level",
+			cell: (info) =>
+				!isShowingAmount
+					? info.getValue() || 0
+					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "level" && x.user === info.row.original.id))).length} exams`,
+		}),
+		columnHelper.accessor("levels", {
+			id: "overall_level",
+			header: "Overall",
+			cell: (info) =>
+				!isShowingAmount
+					? averageLevelCalculator(
+							items,
+							stats.filter((x) => x.user === info.row.original.id),
+					  ).toFixed(1)
+					: `${Object.keys(groupByExam(stats.filter((x) => x.user === info.row.original.id))).length} exams`,
+		}),
+	];
+
+	return (
+		<div className="flex flex-col gap-4 w-full h-full">
+			<Checkbox isChecked={isShowingAmount} onChange={setIsShowingAmount}>
+				Show Utilization
+			</Checkbox>
+			<Table<StudentPerformanceItem>
+				data={items.sort(
+					(a, b) =>
+						averageLevelCalculator(
+							items,
+							stats.filter((x) => x.user === b.id),
+						) -
+						averageLevelCalculator(
+							items,
+							stats.filter((x) => x.user === a.id),
+						),
+				)}
+				columns={columns}
+				searchFields={[["name"], ["email"], ["studentID"], ["entitiesLabel"], ["group"]]}
+			/>
+		</div>
+	);
+};
+
+export default StudentPerformanceList;

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

@@ -8,16 +8,24 @@ import GroupList from "./GroupList";
 import PackageList from "./PackageList";
 import UserList from "./UserList";
 import {checkAccess} from "@/utils/permissions";
-import usePermissions from "@/hooks/usePermissions";
 import {PermissionType} from "@/interfaces/permissions";
+import { EntityWithRoles } from "@/interfaces/entity";
+import { useAllowedEntitiesSomePermissions } from "@/hooks/useEntityPermissions";
+import { useMemo } from "react";
 
 interface Props {
 	user: User;
-	users: User[];
+	entities: EntityWithRoles[]
 	permissions: PermissionType[];
 }
 
-export default function Lists({user, users, permissions}: Props) {
+export default function Lists({user, entities = [], permissions}: Props) {
+	const entitiesViewExams = useAllowedEntitiesSomePermissions(user, entities, [
+		'view_reading', 'view_listening', 'view_writing', 'view_speaking', 'view_level'
+	])
+
+	const canViewExams = useMemo(() => entitiesViewExams.length > 0, [entitiesViewExams])
+
 	return (
 		<TabGroup>
 			<TabList className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
@@ -32,7 +40,7 @@ export default function Lists({user, users, permissions}: Props) {
 					}>
 					User List
 				</Tab>
-				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate", "teacher"]) && (
+				{canViewExams && (
 					<Tab
 						className={({selected}) =>
 							clsx(
@@ -45,17 +53,6 @@ export default function Lists({user, users, permissions}: Props) {
 						Exam List
 					</Tab>
 				)}
-				<Tab
-					className={({selected}) =>
-						clsx(
-							"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
-							"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
-							"transition duration-300 ease-in-out",
-							selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
-						)
-					}>
-					Group List
-				</Tab>
 				{checkAccess(user, ["developer", "admin", "corporate"]) && (
 					<Tab
 						className={({selected}) =>
@@ -100,14 +97,11 @@ export default function Lists({user, users, permissions}: Props) {
 				<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
 					<UserList user={user} />
 				</TabPanel>
-				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate", "teacher"]) && (
+				{canViewExams && (
 					<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
-						<ExamList user={user} />
+						<ExamList user={user} entities={entities} />
 					</TabPanel>
 				)}
-				<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
-					<GroupList user={user} />
-				</TabPanel>
 				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"], permissions, "viewCodes") && (
 					<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
 						<CodeList user={user} />

src/pages/(admin)/UserCreator.tsx

@@ -1,288 +1,273 @@
 import Button from "@/components/Low/Button";
 import Checkbox from "@/components/Low/Checkbox";
-import {PERMISSIONS} from "@/constants/userPermissions";
-import {CorporateUser, TeacherUser, Type, User} from "@/interfaces/user";
-import {USER_TYPE_LABELS} from "@/resources/user";
+import { PERMISSIONS } from "@/constants/userPermissions";
+import { CorporateUser, TeacherUser, Type, User } from "@/interfaces/user";
+import { USER_TYPE_LABELS } from "@/resources/user";
 import axios from "axios";
 import clsx from "clsx";
-import {capitalize, uniqBy} from "lodash";
+import { capitalize, uniqBy } from "lodash";
 import moment from "moment";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import ReactDatePicker from "react-datepicker";
-import {toast} from "react-toastify";
+import { toast } from "react-toastify";
 import ShortUniqueId from "short-unique-id";
-import {checkAccess, getTypesOfUser} from "@/utils/permissions";
-import {PermissionType} from "@/interfaces/permissions";
+import { checkAccess, getTypesOfUser } from "@/utils/permissions";
+import { PermissionType } from "@/interfaces/permissions";
 import usePermissions from "@/hooks/usePermissions";
 import Input from "@/components/Low/Input";
 import CountrySelect from "@/components/Low/CountrySelect";
 import useGroups from "@/hooks/useGroups";
 import useUsers from "@/hooks/useUsers";
-import {getUserName} from "@/utils/users";
+import { getUserName } from "@/utils/users";
 import Select from "@/components/Low/Select";
+import { EntityWithRoles } from "@/interfaces/entity";
+import useEntitiesGroups from "@/hooks/useEntitiesGroups";
 
 const USER_TYPE_PERMISSIONS: {
-	[key in Type]: {perm: PermissionType | undefined; list: Type[]};
+  [key in Type]: { perm: PermissionType | undefined; list: Type[] };
 } = {
-	student: {
-		perm: "createCodeStudent",
-		list: [],
-	},
-	teacher: {
-		perm: "createCodeTeacher",
-		list: [],
-	},
-	agent: {
-		perm: "createCodeCountryManager",
-		list: ["student", "teacher", "corporate", "mastercorporate"],
-	},
-	corporate: {
-		perm: "createCodeCorporate",
-		list: ["student", "teacher"],
-	},
-	mastercorporate: {
-		perm: undefined,
-		list: ["student", "teacher", "corporate"],
-	},
-	admin: {
-		perm: "createCodeAdmin",
-		list: ["student", "teacher", "agent", "corporate", "admin", "mastercorporate"],
-	},
-	developer: {
-		perm: undefined,
-		list: ["student", "teacher", "agent", "corporate", "admin", "developer", "mastercorporate"],
-	},
+  student: {
+    perm: "createCodeStudent",
+    list: [],
+  },
+  teacher: {
+    perm: "createCodeTeacher",
+    list: [],
+  },
+  agent: {
+    perm: "createCodeCountryManager",
+    list: ["student", "teacher", "corporate", "mastercorporate"],
+  },
+  corporate: {
+    perm: "createCodeCorporate",
+    list: ["student", "teacher"],
+  },
+  mastercorporate: {
+    perm: undefined,
+    list: ["student", "teacher", "corporate"],
+  },
+  admin: {
+    perm: "createCodeAdmin",
+    list: ["student", "teacher", "agent", "corporate", "admin", "mastercorporate"],
+  },
+  developer: {
+    perm: undefined,
+    list: ["student", "teacher", "agent", "corporate", "admin", "developer", "mastercorporate"],
+  },
 };
 
 interface Props {
-	user: User;
-	users: User[];
-	permissions: PermissionType[];
-	onFinish: () => void;
+  user: User;
+  users: User[];
+  entities: EntityWithRoles[]
+  permissions: PermissionType[];
+  onFinish: () => void;
 }
 
-export default function UserCreator({user, users, permissions, onFinish}: Props) {
-	const [name, setName] = useState<string>();
-	const [email, setEmail] = useState<string>();
-	const [phone, setPhone] = useState<string>();
-	const [passportID, setPassportID] = useState<string>();
-	const [studentID, setStudentID] = useState<string>();
-	const [country, setCountry] = useState(user?.demographicInformation?.country);
-	const [group, setGroup] = useState<string | null>();
-	const [availableCorporates, setAvailableCorporates] = useState<User[]>([]);
-	const [selectedCorporate, setSelectedCorporate] = useState<string | null>();
-	const [password, setPassword] = useState<string>();
-	const [confirmPassword, setConfirmPassword] = useState<string>();
-	const [expiryDate, setExpiryDate] = useState<Date | null>(
-		user?.subscriptionExpirationDate ? moment(user?.subscriptionExpirationDate).toDate() : null,
-	);
-	const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
-	const [isLoading, setIsLoading] = useState(false);
-	const [type, setType] = useState<Type>("student");
-	const [position, setPosition] = useState<string>();
+export default function UserCreator({ user, users, entities = [], permissions, onFinish }: Props) {
+  const [name, setName] = useState<string>();
+  const [email, setEmail] = useState<string>();
+  const [phone, setPhone] = useState<string>();
+  const [passportID, setPassportID] = useState<string>();
+  const [studentID, setStudentID] = useState<string>();
+  const [country, setCountry] = useState(user?.demographicInformation?.country);
+  const [group, setGroup] = useState<string | null>();
+  const [password, setPassword] = useState<string>();
+  const [confirmPassword, setConfirmPassword] = useState<string>();
+  const [expiryDate, setExpiryDate] = useState<Date | null>(
+    user?.subscriptionExpirationDate ? moment(user?.subscriptionExpirationDate).toDate() : null,
+  );
+  const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+  const [type, setType] = useState<Type>("student");
+  const [position, setPosition] = useState<string>();
+  const [entity, setEntity] = useState((entities || [])[0]?.id || undefined)
 
-	const {groups} = useGroups({admin: ["developer", "admin"].includes(user?.type) ? undefined : user?.id, userType: user?.type});
+  const { groups } = useEntitiesGroups();
 
-	useEffect(() => {
-		if (!isExpiryDateEnabled) setExpiryDate(null);
-	}, [isExpiryDateEnabled]);
+  useEffect(() => {
+    if (!isExpiryDateEnabled) setExpiryDate(null);
+  }, [isExpiryDateEnabled]);
 
-	useEffect(() => {
-		setAvailableCorporates(
-			uniqBy(
-				users.filter((u) => u.type === "corporate" && groups.flatMap((g) => g.participants).includes(u.id)),
-				"id",
-			),
-		);
-	}, [users, groups]);
+  const createUser = () => {
+    if (!name || name.trim().length === 0) return toast.error("Please enter a valid name!");
+    if (!email || email.trim().length === 0) return toast.error("Please enter a valid e-mail address!");
+    if (users.map((x) => x.email).includes(email.trim())) return toast.error("That e-mail is already in use!");
+    if (!password || password.trim().length < 6) return toast.error("Please enter a valid password!");
+    if (password !== confirmPassword) return toast.error("The passwords do not match!");
 
-	const createUser = () => {
-		if (!name || name.trim().length === 0) return toast.error("Please enter a valid name!");
-		if (!email || email.trim().length === 0) return toast.error("Please enter a valid e-mail address!");
-		if (users.map((x) => x.email).includes(email.trim())) return toast.error("That e-mail is already in use!");
-		if (!password || password.trim().length < 6) return toast.error("Please enter a valid password!");
-		if (password !== confirmPassword) return toast.error("The passwords do not match!");
+    setIsLoading(true);
 
-		setIsLoading(true);
+    const body = {
+      name,
+      email,
+      password,
+      groupID: group,
+      entity,
+      type,
+      studentID: type === "student" ? studentID : undefined,
+      expiryDate,
+      demographicInformation: {
+        passport_id: type === "student" ? passportID : undefined,
+        phone,
+        country,
+        position,
+      },
+    };
 
-		const body = {
-			name,
-			email,
-			password,
-			groupID: group,
-			corporate: selectedCorporate || user.id,
-			type,
-			studentID: type === "student" ? studentID : undefined,
-			expiryDate,
-			demographicInformation: {
-				passport_id: type === "student" ? passportID : undefined,
-				phone,
-				country,
-				position,
-			},
-		};
+    axios
+      .post("/api/make_user", body)
+      .then(() => {
+        toast.success("That user has been created!");
+        onFinish();
 
-		axios
-			.post("/api/make_user", body)
-			.then(() => {
-				toast.success("That user has been created!");
-				onFinish();
+        setName("");
+        setEmail("");
+        setPhone("");
+        setPassportID("");
+        setStudentID("");
+        setCountry(user?.demographicInformation?.country);
+        setGroup(null);
+        setEntity((entities || [])[0]?.id || undefined)
+        setExpiryDate(user?.subscriptionExpirationDate ? moment(user?.subscriptionExpirationDate).toDate() : null);
+        setIsExpiryDateEnabled(true);
+        setType("student");
+        setPosition(undefined);
+      })
+      .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));
+  };
 
-				setName("");
-				setEmail("");
-				setPhone("");
-				setPassportID("");
-				setStudentID("");
-				setCountry(user?.demographicInformation?.country);
-				setGroup(null);
-				setSelectedCorporate(null);
-				setExpiryDate(user?.subscriptionExpirationDate ? moment(user?.subscriptionExpirationDate).toDate() : null);
-				setIsExpiryDateEnabled(true);
-				setType("student");
-				setPosition(undefined);
-			})
-			.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));
-	};
+  return (
+    <div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
+      <div className="grid grid-cols-2 gap-4">
+        <Input required label="Name" value={name} onChange={setName} type="text" name="name" placeholder="Name" />
+        <Input label="E-mail" required value={email} onChange={setEmail} type="email" name="email" placeholder="E-mail" />
 
-	return (
-		<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
-			<div className="grid grid-cols-2 gap-4">
-				<Input required label="Name" value={name} onChange={setName} type="text" name="name" placeholder="Name" />
-				<Input label="E-mail" required value={email} onChange={setEmail} type="email" name="email" placeholder="E-mail" />
+        <Input type="password" name="password" label="Password" value={password} onChange={setPassword} placeholder="Password" required />
+        <Input
+          type="password"
+          name="confirmPassword"
+          label="Confirm Password"
+          value={confirmPassword}
+          onChange={setConfirmPassword}
+          placeholder="ConfirmPassword"
+          required
+        />
 
-				<Input type="password" name="password" label="Password" value={password} onChange={setPassword} placeholder="Password" required />
-				<Input
-					type="password"
-					name="confirmPassword"
-					label="Confirm Password"
-					value={confirmPassword}
-					onChange={setConfirmPassword}
-					placeholder="ConfirmPassword"
-					required
-				/>
+        <div className="flex flex-col gap-4">
+          <label className="font-normal text-base text-mti-gray-dim">Country *</label>
+          <CountrySelect value={country} onChange={setCountry} />
+        </div>
 
-				<div className="flex flex-col gap-4">
-					<label className="font-normal text-base text-mti-gray-dim">Country *</label>
-					<CountrySelect value={country} onChange={setCountry} />
-				</div>
+        <Input type="tel" name="phone" label="Phone number" value={phone} onChange={setPhone} placeholder="Phone number" required />
 
-				<Input type="tel" name="phone" label="Phone number" value={phone} onChange={setPhone} placeholder="Phone number" required />
+        {type === "student" && (
+          <>
+            <Input
+              type="text"
+              name="passport_id"
+              label="Passport/National ID"
+              onChange={setPassportID}
+              value={passportID}
+              placeholder="National ID or Passport number"
+              required
+            />
+            <Input type="text" name="studentID" label="Student ID" onChange={setStudentID} value={studentID} placeholder="Student ID" />
+          </>
+        )}
 
-				{type === "student" && (
-					<>
-						<Input
-							type="text"
-							name="passport_id"
-							label="Passport/National ID"
-							onChange={setPassportID}
-							value={passportID}
-							placeholder="National ID or Passport number"
-							required
-						/>
-						<Input type="text" name="studentID" label="Student ID" onChange={setStudentID} value={studentID} placeholder="Student ID" />
-					</>
-				)}
+        <div className={clsx("flex flex-col gap-4")}>
+          <label className="font-normal text-base text-mti-gray-dim">Entity</label>
+          <Select
+            defaultValue={{ value: (entities || [])[0]?.id, label: (entities || [])[0]?.label }}
+            options={entities.map((e) => ({ value: e.id, label: e.label }))}
+            onChange={(e) => setEntity(e?.value || undefined)}
+            isClearable={checkAccess(user, ["admin", "developer"])}
+          />
+        </div>
 
-				{["student", "teacher"].includes(type) && !["corporate", "teacher"].includes(user?.type) && (
-					<div className={clsx("flex flex-col gap-4")}>
-						<label className="font-normal text-base text-mti-gray-dim">Corporate</label>
-						<Select
-							options={availableCorporates.map((u) => ({value: u.id, label: getUserName(u)}))}
-							isClearable
-							onChange={(e) => setSelectedCorporate(e?.value || undefined)}
-						/>
-					</div>
-				)}
+        {["corporate", "mastercorporate"].includes(type) && (
+          <Input type="text" name="department" label="Department" onChange={setPosition} value={position} placeholder="Department" />
+        )}
 
-				{["corporate", "mastercorporate"].includes(type) && (
-					<Input type="text" name="department" label="Department" onChange={setPosition} value={position} placeholder="Department" />
-				)}
+        <div className={clsx("flex flex-col gap-4")}>
+          <label className="font-normal text-base text-mti-gray-dim">Classroom</label>
+          <Select
+            options={groups
+              .filter((x) => x.entity?.id === entity)
+              .map((g) => ({ value: g.id, label: g.name }))}
+            onChange={(e) => setGroup(e?.value || undefined)}
+            isClearable
+          />
+        </div>
 
-				{!(type === "corporate" && user.type === "corporate") && (
-					<div
-						className={clsx(
-							"flex flex-col gap-4",
-							(!["student", "teacher"].includes(type) || ["corporate", "teacher"].includes(user?.type)) &&
-								!["corporate", "mastercorporate"].includes(type) &&
-								"col-span-2",
-						)}>
-						<label className="font-normal text-base text-mti-gray-dim">Group</label>
-						<Select
-							options={groups
-								.filter((x) => (!selectedCorporate ? true : x.admin === selectedCorporate))
-								.map((g) => ({value: g.id, label: g.name}))}
-							onChange={(e) => setGroup(e?.value || undefined)}
-						/>
-					</div>
-				)}
+        <div
+          className={clsx(
+            "flex flex-col gap-4",
+            !checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && "col-span-2",
+          )}>
+          <label className="font-normal text-base text-mti-gray-dim">Type</label>
+          {user && (
+            <select
+              defaultValue="student"
+              value={type}
+              onChange={(e) => setType(e.target.value as Type)}
+              className="p-6 w-full min-w-[350px] min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
+              {Object.keys(USER_TYPE_LABELS)
+                .filter((x) => {
+                  const { list, perm } = USER_TYPE_PERMISSIONS[x as Type];
+                  return checkAccess(user, getTypesOfUser(list), permissions, perm);
+                })
+                .map((type) => (
+                  <option key={type} value={type}>
+                    {USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
+                  </option>
+                ))}
+            </select>
+          )}
+        </div>
 
-				<div
-					className={clsx(
-						"flex flex-col gap-4",
-						!checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && "col-span-2",
-					)}>
-					<label className="font-normal text-base text-mti-gray-dim">Type</label>
-					{user && (
-						<select
-							defaultValue="student"
-							value={type}
-							onChange={(e) => setType(e.target.value as Type)}
-							className="p-6 w-full min-w-[350px] min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
-							{Object.keys(USER_TYPE_LABELS)
-								.filter((x) => {
-									const {list, perm} = USER_TYPE_PERMISSIONS[x as Type];
-									return checkAccess(user, getTypesOfUser(list), permissions, perm);
-								})
-								.map((type) => (
-									<option key={type} value={type}>
-										{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
-									</option>
-								))}
-						</select>
-					)}
-				</div>
+        <div className="flex flex-col gap-4">
+          {user && checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
+            <>
+              <div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
+                <label className="text-mti-gray-dim text-base font-normal">Expiry Date</label>
+                <Checkbox
+                  isChecked={isExpiryDateEnabled}
+                  onChange={setIsExpiryDateEnabled}
+                  disabled={!!user?.subscriptionExpirationDate}>
+                  Enabled
+                </Checkbox>
+              </div>
+              {isExpiryDateEnabled && (
+                <ReactDatePicker
+                  className={clsx(
+                    "flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
+                    "hover:border-mti-purple tooltip",
+                    "transition duration-300 ease-in-out",
+                  )}
+                  filterDate={(date) =>
+                    moment(date).isAfter(new Date()) &&
+                    (user?.subscriptionExpirationDate ? moment(date).isBefore(user?.subscriptionExpirationDate) : true)
+                  }
+                  dateFormat="dd/MM/yyyy"
+                  selected={expiryDate}
+                  onChange={(date) => setExpiryDate(date)}
+                />
+              )}
+            </>
+          )}
+        </div>
+      </div>
 
-				<div className="flex flex-col gap-4">
-					{user && checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
-						<>
-							<div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
-								<label className="text-mti-gray-dim text-base font-normal">Expiry Date</label>
-								<Checkbox
-									isChecked={isExpiryDateEnabled}
-									onChange={setIsExpiryDateEnabled}
-									disabled={!!user?.subscriptionExpirationDate}>
-									Enabled
-								</Checkbox>
-							</div>
-							{isExpiryDateEnabled && (
-								<ReactDatePicker
-									className={clsx(
-										"flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
-										"hover:border-mti-purple tooltip",
-										"transition duration-300 ease-in-out",
-									)}
-									filterDate={(date) =>
-										moment(date).isAfter(new Date()) &&
-										(user?.subscriptionExpirationDate ? moment(date).isBefore(user?.subscriptionExpirationDate) : true)
-									}
-									dateFormat="dd/MM/yyyy"
-									selected={expiryDate}
-									onChange={(date) => setExpiryDate(date)}
-								/>
-							)}
-						</>
-					)}
-				</div>
-			</div>
-
-			<Button onClick={createUser} isLoading={isLoading} disabled={(isExpiryDateEnabled ? !expiryDate : false) || isLoading}>
-				Create User
-			</Button>
-		</div>
-	);
+      <Button onClick={createUser} isLoading={isLoading} disabled={(isExpiryDateEnabled ? !expiryDate : false) || isLoading}>
+        Create User
+      </Button>
+    </div>
+  );
 }