Merge branch 'develop' into features-21-08-24

2024-08-24 18:56:05 +01:00
parent 74a53f55fd 032d20b4b2
commit 8d37e60f5d
25 changed files with 1069 additions and 745 deletions
--- a/src/pages/(admin)/BatchCodeGenerator.tsx
+++ b/src/pages/(admin)/BatchCodeGenerator.tsx
@@ -19,6 +19,7 @@ import {BsFileEarmarkEaselFill, BsQuestionCircleFill} from "react-icons/bs";
 import {checkAccess, getTypesOfUser} from "@/utils/permissions";
 import {PermissionType} from "@/interfaces/permissions";
 import usePermissions from "@/hooks/usePermissions";
+
 const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);

 const USER_TYPE_PERMISSIONS: {
@@ -34,7 +35,7 @@ const USER_TYPE_PERMISSIONS: {
 	},
 	agent: {
 		perm: "createCodeCountryManager",
-		list: [],
+		list: ["student", "teacher", "corporate", "mastercorporate"],
 	},
 	corporate: {
 		perm: "createCodeCorporate",
@@ -85,7 +86,7 @@ export default function BatchCodeGenerator({user}: {user: User}) {
 					const information = uniqBy(
 						rows
 							.map((row) => {
-								const [firstName, lastName, country, passport_id, email, ...phone] = row as string[];
+								const [firstName, lastName, country, passport_id, email, phone] = row as string[];
 								return EMAIL_REGEX.test(email.toString().trim())
 									? {
 											email: email.toString().trim().toLowerCase(),
--- a/src/pages/(admin)/BatchCreateUser.tsx
+++ b/src/pages/(admin)/BatchCreateUser.tsx
@@ -11,10 +11,13 @@ import Modal from "@/components/Modal";
 import {BsQuestionCircleFill} from "react-icons/bs";
 import {PermissionType} from "@/interfaces/permissions";
 import moment from "moment";
-import {checkAccess} from "@/utils/permissions";
+import {checkAccess, getTypesOfUser} from "@/utils/permissions";
 import Checkbox from "@/components/Low/Checkbox";
 import ReactDatePicker from "react-datepicker";
 import clsx from "clsx";
+import usePermissions from "@/hooks/usePermissions";
+import countryCodes from "country-codes-list";
+
 const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);

 type Type = Exclude<UserType, "admin" | "developer" | "agent" | "mastercorporate">;
@@ -26,7 +29,7 @@ const USER_TYPE_LABELS: {[key in Type]: string} = {
 };

 const USER_TYPE_PERMISSIONS: {
-	[key in Type]: {perm: PermissionType | undefined; list: Type[]};
+	[key in UserType]: {perm: PermissionType | undefined; list: UserType[]};
 } = {
 	student: {
 		perm: "createCodeStudent",
@@ -36,10 +39,26 @@ const USER_TYPE_PERMISSIONS: {
 		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"],
+	},
 };

 export default function BatchCreateUser({user}: {user: User}) {
@@ -65,6 +84,7 @@ export default function BatchCreateUser({user}: {user: User}) {
 	const [showHelp, setShowHelp] = useState(false);

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

 	const {openFilePicker, filesContent, clear} = useFilePicker({
 		accept: ".xlsx",
@@ -84,7 +104,11 @@ export default function BatchCreateUser({user}: {user: User}) {
 					const information = uniqBy(
 						rows
 							.map((row) => {
-								const [firstName, lastName, country, passport_id, email, phone, group] = row as string[];
+								const [firstName, lastName, country, passport_id, email, phone, group, studentID, corporate] = row as string[];
+								const countryItem =
+									countryCodes.findOne("countryCode" as any, country.toUpperCase()) ||
+									countryCodes.all().find((x) => x.countryNameEn.toLowerCase() === country.toLowerCase());
+
 								return EMAIL_REGEX.test(email.toString().trim())
 									? {
 											email: email.toString().trim().toLowerCase(),
@@ -92,8 +116,10 @@ export default function BatchCreateUser({user}: {user: User}) {
 											type: type,
 											passport_id: passport_id?.toString().trim() || undefined,
 											groupName: group,
+											corporate,
+											studentID,
 											demographicInformation: {
-												country: country,
+												country: countryItem?.countryCode,
 												passport_id: passport_id?.toString().trim() || undefined,
 												phone,
 											},
@@ -158,6 +184,8 @@ export default function BatchCreateUser({user}: {user: User}) {
 								<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>
 								<th className="border border-neutral-200 px-2 py-1">Group Name</th>
+								<th className="border border-neutral-200 px-2 py-1">Student ID</th>
+								{user?.type !== "corporate" && <th className="border border-neutral-200 px-2 py-1">Corporate (e-mail)</th>}
 							</tr>
 						</thead>
 					</table>
@@ -214,11 +242,17 @@ export default function BatchCreateUser({user}: {user: User}) {
 						defaultValue="student"
 						onChange={(e) => setType(e.target.value as Type)}
 						className="flex min-h-[70px] w-full min-w-[350px] cursor-pointer justify-center rounded-full border bg-white p-6 text-sm font-normal focus:outline-none">
-						{Object.keys(USER_TYPE_LABELS).map((type) => (
-							<option key={type} value={type}>
-								{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
-							</option>
-						))}
+						{Object.keys(USER_TYPE_LABELS)
+							.filter((x) => {
+								const {list, perm} = USER_TYPE_PERMISSIONS[x as Type];
+								// if (x === "corporate") console.log(list, perm, checkAccess(user, list, permissions, perm));
+								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>
 				)}
 				<Button className="my-auto" onClick={makeUsers} disabled={infos.length === 0}>
--- a/src/pages/(admin)/CodeGenerator.tsx
+++ b/src/pages/(admin)/CodeGenerator.tsx
@@ -11,7 +11,7 @@ import {useEffect, useState} from "react";
 import ReactDatePicker from "react-datepicker";
 import {toast} from "react-toastify";
 import ShortUniqueId from "short-unique-id";
-import {checkAccess} from "@/utils/permissions";
+import {checkAccess, getTypesOfUser} from "@/utils/permissions";
 import {PermissionType} from "@/interfaces/permissions";
 import usePermissions from "@/hooks/usePermissions";

@@ -28,7 +28,7 @@ const USER_TYPE_PERMISSIONS: {
 	},
 	agent: {
 		perm: "createCodeCountryManager",
-		list: [],
+		list: ["student", "teacher", "corporate", "mastercorporate"],
 	},
 	corporate: {
 		perm: "createCodeCorporate",
@@ -103,7 +103,7 @@ export default function CodeGenerator({user}: {user: User}) {
 					{Object.keys(USER_TYPE_LABELS)
 						.filter((x) => {
 							const {list, perm} = USER_TYPE_PERMISSIONS[x as Type];
-							return checkAccess(user, list, permissions, perm);
+							return checkAccess(user, getTypesOfUser(list), permissions, perm);
 						})
 						.map((type) => (
 							<option key={type} value={type}>
--- a/src/pages/(admin)/Lists/UserList.tsx
+++ b/src/pages/(admin)/Lists/UserList.tsx
@@ -27,6 +27,7 @@ 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";
 const columnHelper = createColumnHelper<User>();
 const searchFields = [["name"], ["email"], ["corporateInformation", "companyInformation", "name"]];

@@ -58,6 +59,7 @@ export default function UserList({

 	const {users, reload} = useUsers();
 	const {permissions} = usePermissions(user?.id || "");
+	const {balance} = useUserBalance();
 	const {groups} = useGroups({
 		admin: user && ["corporate", "teacher", "mastercorporate"].includes(user?.type) ? user.id : undefined,
 		userType: user?.type,
@@ -181,52 +183,6 @@ export default function UserList({
 		};
 		return (
 			<div className="flex gap-4">
-				{checkAccess(user, updateUserPermission.list, permissions, updateUserPermission.perm) && (
-					<Popover className="relative">
-						<Popover.Button>
-							<div data-tip="Change Type" className="cursor-pointer tooltip">
-								<BsPerson className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-							</div>
-						</Popover.Button>
-						<Transition
-							as={Fragment}
-							enter="transition ease-out duration-200"
-							enterFrom="opacity-0 translate-y-1"
-							enterTo="opacity-100 translate-y-0"
-							leave="transition ease-in duration-150"
-							leaveFrom="opacity-100 translate-y-0"
-							leaveTo="opacity-0 translate-y-1">
-							<Popover.Panel className="absolute z-10 w-screen right-1/2 translate-x-1/3 max-w-sm">
-								<div className="bg-white p-4 rounded-lg grid grid-cols-2 gap-2 w-full drop-shadow-xl">
-									<Button
-										onClick={() => updateAccountType(row.original, "student")}
-										className="text-sm !py-2 !px-4"
-										disabled={row.original.type === "student" || !PERMISSIONS.generateCode["student"].includes(user.type)}>
-										Student
-									</Button>
-									<Button
-										onClick={() => updateAccountType(row.original, "teacher")}
-										className="text-sm !py-2 !px-4"
-										disabled={row.original.type === "teacher" || !PERMISSIONS.generateCode["teacher"].includes(user.type)}>
-										Teacher
-									</Button>
-									<Button
-										onClick={() => updateAccountType(row.original, "corporate")}
-										className="text-sm !py-2 !px-4"
-										disabled={row.original.type === "corporate" || !PERMISSIONS.generateCode["corporate"].includes(user.type)}>
-										Corporate
-									</Button>
-									<Button
-										onClick={() => updateAccountType(row.original, "admin")}
-										className="text-sm !py-2 !px-4"
-										disabled={row.original.type === "admin" || !PERMISSIONS.generateCode["admin"].includes(user.type)}>
-										Admin
-									</Button>
-								</div>
-							</Popover.Panel>
-						</Transition>
-					</Popover>
-				)}
 				{!row.original.isVerified && checkAccess(user, updateUserPermission.list, permissions, updateUserPermission.perm) && (
 					<div data-tip="Verify User" className="cursor-pointer tooltip" onClick={() => verifyAccount(row.original)}>
 						<BsCheck className="hover:text-mti-purple-light transition ease-in-out duration-300" />
@@ -391,6 +347,15 @@ export default function UserList({
 			) as any,
 			cell: (info) => USER_TYPE_LABELS[info.getValue()],
 		}),
+		columnHelper.accessor("studentID", {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "studentID"))}>
+					<span>Student ID</span>
+					<SorterArrow name="studentID" />
+				</button>
+			) as any,
+			cell: (info) => info.getValue() || "N/A",
+		}),
 		columnHelper.accessor("corporateInformation.companyInformation.name", {
 			header: (
 				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "companyName"))}>
@@ -465,6 +430,11 @@ export default function UserList({
 				? userTypes.findIndex((t) => a.type === t) - userTypes.findIndex((t) => b.type === t)
 				: userTypes.findIndex((t) => b.type === t) - userTypes.findIndex((t) => a.type === t);

+		if (sorter === "studentID" || sorter === reverseString("studentID"))
+			return sorter === "studentID"
+				? (a.type === "student" ? a.studentID || "N/A" : "N/A").localeCompare(b.type === "student" ? b.studentID || "N/A" : "N/A")
+				: (b.type === "student" ? b.studentID || "N/A" : "N/A").localeCompare(a.type === "student" ? a.studentID || "N/A" : "N/A");
+
 		if (sorter === "verification" || sorter === reverseString("verification"))
 			return sorter === "verification"
 				? a.isVerified.toString().localeCompare(b.isVerified.toString())
@@ -583,6 +553,9 @@ export default function UserList({
 		return (
 			<div className="w-full flex flex-col gap-8">
 				<UserCard
+					maxUserAmount={
+						user.type === "mastercorporate" ? (user.corporateInformation?.companyInformation?.userAmount || 0) - balance : undefined
+					}
 					loggedInUser={user}
 					onViewStudents={
 						(selectedUser.type === "corporate" || selectedUser.type === "teacher") && studentsFromAdmin.length > 0
--- a/src/pages/(admin)/UserCreator.tsx
+++ b/src/pages/(admin)/UserCreator.tsx
@@ -0,0 +1,266 @@
+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 axios from "axios";
+import clsx from "clsx";
+import {capitalize, uniqBy} from "lodash";
+import moment from "moment";
+import {useEffect, useState} from "react";
+import ReactDatePicker from "react-datepicker";
+import {toast} from "react-toastify";
+import ShortUniqueId from "short-unique-id";
+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 Select from "@/components/Low/Select";
+
+const USER_TYPE_PERMISSIONS: {
+	[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"],
+	},
+};
+
+export default function UserCreator({user}: {user: User}) {
+	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 {permissions} = usePermissions(user?.id || "");
+	const {groups} = useGroups({admin: ["developer", "admin"].includes(user?.type) ? undefined : user?.id, userType: user?.type});
+	const {users} = useUsers();
+
+	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 === 0) return toast.error("Please enter a valid password!");
+		if (password !== confirmPassword) return toast.error("The passwords do not match!");
+
+		setIsLoading(true);
+
+		const body = {
+			name,
+			email,
+			password,
+			groupID: group,
+			type,
+			studentID: type === "student" ? studentID : undefined,
+			expiryDate,
+			demographicInformation: {
+				passport_id: type === "student" ? passportID : undefined,
+				phone,
+				country,
+			},
+		};
+
+		axios
+			.post("/api/make_user", body)
+			.then(() => {
+				toast.success("That user has been created!");
+
+				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");
+			})
+			.catch(() => 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" />
+
+				<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>
+
+				<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" />
+					</>
+				)}
+
+				{["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>
+				)}
+
+				<div
+					className={clsx(
+						"flex flex-col gap-4",
+						(!["student", "teacher"].includes(type) || ["corporate", "teacher"].includes(user?.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="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>
+	);
+}
--- a/src/pages/api/make_user.ts
+++ b/src/pages/api/make_user.ts
@@ -4,7 +4,7 @@ import {getFirestore, setDoc, doc, query, collection, where, getDocs, getDoc, de
 import {withIronSessionApiRoute} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
 import {v4} from "uuid";
-import {Group} from "@/interfaces/user";
+import {CorporateUser, Group} from "@/interfaces/user";
 import {createUserWithEmailAndPassword, getAuth} from "firebase/auth";

 const DEFAULT_DESIRED_LEVELS = {
@@ -37,19 +37,25 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 	if (!maker) {
 		return res.status(401).json({ok: false, reason: "You must be logged in to make user!"});
 	}
-	const {email, passport_id, type, groupName, expiryDate} = req.body as {
+	const {email, passport_id, password, type, groupName, groupID, expiryDate, corporate} = req.body as {
 		email: string;
+		password?: string;
 		passport_id: string;
 		type: string;
-		groupName: string;
+		groupName?: string;
+		groupID?: string;
+		corporate?: string;
 		expiryDate: null | Date;
 	};
 	// cleaning data
 	delete req.body.passport_id;
 	delete req.body.groupName;
+	delete req.body.groupID;
 	delete req.body.expiryDate;
+	delete req.body.password;
+	delete req.body.corporate;

-	await createUserWithEmailAndPassword(auth, email.toLowerCase(), passport_id)
+	await createUserWithEmailAndPassword(auth, email.toLowerCase(), !!password ? password : passport_id)
 		.then(async (userCredentials) => {
 			const userId = userCredentials.user.uid;

@@ -66,6 +72,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 				registrationDate: new Date(),
 				subscriptionExpirationDate: expiryDate || null,
 			};
+
 			await setDoc(doc(db, "users", userId), user);
 			if (type === "corporate") {
 				const defaultTeachersGroup: Group = {
@@ -97,6 +104,34 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 				await setDoc(doc(db, "groups", defaultCorporateGroup.id), defaultCorporateGroup);
 			}

+			if (!!corporate) {
+				const corporateQ = query(collection(db, "users"), where("email", "==", corporate));
+				const corporateSnapshot = await getDocs(corporateQ);
+
+				if (!corporateSnapshot.empty) {
+					const corporateUser = corporateSnapshot.docs[0].data() as CorporateUser;
+
+					const q = query(
+						collection(db, "groups"),
+						where("admin", "==", corporateUser.id),
+						where("name", "==", type === "student" ? "Students" : "Teachers"),
+						limit(1),
+					);
+					const snapshot = await getDocs(q);
+
+					if (!snapshot.empty) {
+						const doc = snapshot.docs[0];
+						const participants: string[] = doc.get("participants");
+
+						if (!participants.includes(userId)) {
+							updateDoc(doc.ref, {
+								participants: [...participants, userId],
+							});
+						}
+					}
+				}
+			}
+
 			if (typeof groupName === "string" && groupName.trim().length > 0) {
 				const q = query(collection(db, "groups"), where("admin", "==", maker.id), where("name", "==", groupName.trim()), limit(1));
 				const snapshot = await getDocs(q);
@@ -123,6 +158,11 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 				}
 			}

+			if (!!groupID) {
+				const groupSnapshot = await getDoc(doc(db, "groups", groupID));
+				await setDoc(groupSnapshot.ref, {participants: [...groupSnapshot.data()!.participants, userId]}, {merge: true});
+			}
+
 			console.log(`Returning - ${email}`);
 			return res.status(200).json({ok: true});
 		})
--- a/src/pages/api/users/balance.ts
+++ b/src/pages/api/users/balance.ts
@@ -0,0 +1,17 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type {NextApiRequest, NextApiResponse} from "next";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {getUserBalance} from "@/utils/users.be";
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	const balance = await getUserBalance(req.session.user);
+	res.status(200).json({balance});
+}
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -1,229 +1,181 @@
 /* eslint-disable @next/next/no-img-element */
-import { User } from "@/interfaces/user";
-import { toast, ToastContainer } from "react-toastify";
+import {User} from "@/interfaces/user";
+import {toast, ToastContainer} from "react-toastify";
 import axios from "axios";
-import { FormEvent, useEffect, useState } from "react";
+import {FormEvent, useEffect, useState} from "react";
 import Head from "next/head";
 import useUser from "@/hooks/useUser";
-import { Divider } from "primereact/divider";
+import {Divider} from "primereact/divider";
 import Button from "@/components/Low/Button";
-import { BsArrowRepeat, BsCheck } from "react-icons/bs";
+import {BsArrowRepeat, BsCheck} from "react-icons/bs";
 import Link from "next/link";
 import Input from "@/components/Low/Input";
 import clsx from "clsx";
-import { useRouter } from "next/router";
+import {useRouter} from "next/router";
 import EmailVerification from "./(auth)/EmailVerification";
-import { withIronSessionSsr } from "iron-session/next";
-import { sessionOptions } from "@/lib/session";
+import {withIronSessionSsr} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";

-const EMAIL_REGEX = new RegExp(
-  /^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/g,
-);
+const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/g);

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

-  const envVariables: { [key: string]: string } = {};
-  Object.keys(process.env)
-    .filter((x) => x.startsWith("NEXT_PUBLIC"))
-    .forEach((x: string) => {
-      envVariables[x] = process.env[x]!;
-    });
+	const envVariables: {[key: string]: string} = {};
+	Object.keys(process.env)
+		.filter((x) => x.startsWith("NEXT_PUBLIC"))
+		.forEach((x: string) => {
+			envVariables[x] = process.env[x]!;
+		});

-  if (user && user.isVerified) {
-    return {
+	if (user && user.isVerified) {
+		return {
 			redirect: {
 				destination: "/",
 				permanent: false,
-			}
+			},
 		};
-  }
+	}

-  return {
-    props: { user: null, envVariables },
-  };
+	return {
+		props: {user: null, envVariables},
+	};
 }, sessionOptions);

 export default function Login() {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [rememberPassword, setRememberPassword] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [rememberPassword, setRememberPassword] = useState(false);
+	const [isLoading, setIsLoading] = useState(false);

-  const router = useRouter();
+	const router = useRouter();

-  const { user, mutateUser } = useUser({
-    redirectTo: "/",
-    redirectIfFound: true,
-  });
+	const {user, mutateUser} = useUser({
+		redirectTo: "/",
+		redirectIfFound: true,
+	});

-  useEffect(() => {
-    if (user && user.isVerified) router.push("/");
-  }, [router, user]);
+	useEffect(() => {
+		if (user && user.isVerified) router.push("/");
+	}, [router, user]);

-  const forgotPassword = () => {
-    if (!email || email.length < 0 || !EMAIL_REGEX.test(email)) {
-      toast.error("Please enter your e-mail to reset your password!", {
-        toastId: "forgot-invalid-email",
-      });
-      return;
-    }
+	const forgotPassword = () => {
+		if (!email || email.length < 0 || !EMAIL_REGEX.test(email)) {
+			toast.error("Please enter your e-mail to reset your password!", {
+				toastId: "forgot-invalid-email",
+			});
+			return;
+		}

-    axios
-      .post<{ ok: boolean }>("/api/reset", { email })
-      .then((response) => {
-        if (response.data.ok) {
-          toast.success(
-            "You should receive an e-mail to reset your password!",
-            { toastId: "forgot-success" },
-          );
-          return;
-        }
+		axios
+			.post<{ok: boolean}>("/api/reset", {email})
+			.then((response) => {
+				if (response.data.ok) {
+					toast.success("You should receive an e-mail to reset your password!", {toastId: "forgot-success"});
+					return;
+				}

-        toast.error("That e-mail address is not connected to an account!", {
-          toastId: "forgot-error",
-        });
-      })
-      .catch(() =>
-        toast.error("That e-mail address is not connected to an account!", {
-          toastId: "forgot-error",
-        }),
-      );
-  };
+				toast.error("That e-mail address is not connected to an account!", {
+					toastId: "forgot-error",
+				});
+			})
+			.catch(() =>
+				toast.error("That e-mail address is not connected to an account!", {
+					toastId: "forgot-error",
+				}),
+			);
+	};

-  const login = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+	const login = (e: FormEvent<HTMLFormElement>) => {
+		e.preventDefault();

-    setIsLoading(true);
-    axios
-      .post<User>("/api/login", { email, password })
-      .then((response) => {
-        toast.success("You have been logged in!", {
-          toastId: "login-successful",
-        });
-        mutateUser(response.data);
-      })
-      .catch((e) => {
-        if (e.response.status === 401) {
-          toast.error("Wrong login credentials!", {
-            toastId: "wrong-credentials",
-          });
-        } else {
-          toast.error("Something went wrong!", { toastId: "server-error" });
-        }
-        setIsLoading(false);
-      })
-      .finally(() => setIsLoading(false));
-  };
+		setIsLoading(true);
+		axios
+			.post<User>("/api/login", {email, password})
+			.then((response) => {
+				toast.success("You have been logged in!", {
+					toastId: "login-successful",
+				});
+				mutateUser(response.data);
+			})
+			.catch((e) => {
+				if (e.response.status === 401) {
+					toast.error("Wrong login credentials!", {
+						toastId: "wrong-credentials",
+					});
+				} else {
+					toast.error("Something went wrong!", {toastId: "server-error"});
+				}
+				setIsLoading(false);
+			})
+			.finally(() => setIsLoading(false));
+	};

-  return (
-    <>
-      <Head>
-        <title>Login | EnCoach</title>
-        <meta name="description" content="Generated by create next app" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <main className="flex h-[100vh] w-full bg-white text-black">
-        <ToastContainer />
-        <section className="relative hidden h-full w-fit min-w-fit lg:flex">
-          <div className="bg-mti-rose-light absolute z-10 h-full w-full bg-opacity-50" />
-          <img
-            src="/people-talking-tablet.png"
-            alt="People smiling looking at a tablet"
-            className="aspect-auto h-full"
-          />
-        </section>
-        <section className="flex h-full w-full flex-col items-center justify-center gap-2">
-          <div className={clsx("flex flex-col items-center", !user && "mb-4")}>
-            <img
-              src="/logo_title.png"
-              alt="EnCoach's Logo"
-              className="w-36 lg:w-56"
-            />
-            <h1 className="text-2xl font-bold lg:text-4xl">
-              Login to your account
-            </h1>
-            <p className="text-mti-gray-cool self-start text-sm font-normal lg:text-base">
-              with your registered Email Address
-            </p>
-          </div>
-          <Divider className="max-w-xs lg:max-w-md" />
-          {!user && (
-            <>
-              <form
-                className="-lg:px-8 flex w-full flex-col items-center gap-6 lg:w-1/2"
-                onSubmit={login}
-              >
-                <Input
-                  type="email"
-                  name="email"
-                  onChange={(e) => setEmail(e.toLowerCase())}
-                  placeholder="Enter email address"
-                />
-                <Input
-                  type="password"
-                  name="password"
-                  onChange={(e) => setPassword(e)}
-                  placeholder="Password"
-                />
-                <div className="flex w-full justify-between px-4">
-                  <div
-                    className="text-mti-gray-dim flex cursor-pointer gap-3 text-xs"
-                    onClick={() => setRememberPassword((prev) => !prev)}
-                  >
-                    <input type="checkbox" className="hidden" />
-                    <div
-                      className={clsx(
-                        "border-mti-purple-light flex h-4 w-4 items-center justify-center rounded-sm border bg-white",
-                        "transition duration-300 ease-in-out",
-                        rememberPassword && "!bg-mti-purple-light ",
-                      )}
-                    >
-                      <BsCheck color="white" className="h-full w-full" />
-                    </div>
-                    <span>Remember my password</span>
-                  </div>
-                  <span
-                    className="text-mti-purple-light cursor-pointer text-xs hover:underline"
-                    onClick={forgotPassword}
-                  >
-                    Forgot Password?
-                  </span>
-                </div>
-                <Button
-                  className="mt-8 w-full"
-                  color="purple"
-                  disabled={isLoading}
-                >
-                  {!isLoading && "Login"}
-                  {isLoading && (
-                    <div className="flex items-center justify-center">
-                      <BsArrowRepeat
-                        className="animate-spin text-white"
-                        size={25}
-                      />
-                    </div>
-                  )}
-                </Button>
-              </form>
-              <span className="text-mti-gray-cool mt-8 text-sm font-normal">
-                Don&apos;t have an account?{" "}
-                <Link className="text-mti-purple-light" href="/register">
-                  Sign up
-                </Link>
-              </span>
-            </>
-          )}
-          {user && !user.isVerified && (
-            <EmailVerification
-              user={user}
-              isLoading={isLoading}
-              setIsLoading={setIsLoading}
-            />
-          )}
-        </section>
-      </main>
-    </>
-  );
+	return (
+		<>
+			<Head>
+				<title>Login | EnCoach</title>
+				<meta name="description" content="Generated by create next app" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<main className="flex h-[100vh] w-full bg-white text-black">
+				<ToastContainer />
+				<section className="relative hidden h-full w-fit min-w-fit lg:flex">
+					{/* <div className="bg-mti-rose-light absolute z-10 h-full w-full bg-opacity-50" /> */}
+					<img src="/red-stock-photo.jpg" alt="People smiling looking at a tablet" className="aspect-auto h-full" />
+				</section>
+				<section className="flex h-full w-full flex-col items-center justify-center gap-2">
+					<div className={clsx("flex flex-col items-center", !user && "mb-4")}>
+						<img src="/logo_title.png" alt="EnCoach's Logo" className="w-36 lg:w-56" />
+						<h1 className="text-2xl font-bold lg:text-4xl">Login to your account</h1>
+						<p className="text-mti-gray-cool self-start text-sm font-normal lg:text-base">with your registered Email Address</p>
+					</div>
+					<Divider className="max-w-xs lg:max-w-md" />
+					{!user && (
+						<>
+							<form className="-lg:px-8 flex w-full flex-col items-center gap-6 lg:w-1/2" onSubmit={login}>
+								<Input type="email" name="email" onChange={(e) => setEmail(e.toLowerCase())} placeholder="Enter email address" />
+								<Input type="password" name="password" onChange={(e) => setPassword(e)} placeholder="Password" />
+								<div className="flex w-full justify-between px-4">
+									<div
+										className="text-mti-gray-dim flex cursor-pointer gap-3 text-xs"
+										onClick={() => setRememberPassword((prev) => !prev)}>
+										<input type="checkbox" className="hidden" />
+										<div
+											className={clsx(
+												"border-mti-purple-light flex h-4 w-4 items-center justify-center rounded-sm border bg-white",
+												"transition duration-300 ease-in-out",
+												rememberPassword && "!bg-mti-purple-light ",
+											)}>
+											<BsCheck color="white" className="h-full w-full" />
+										</div>
+										<span>Remember my password</span>
+									</div>
+									<span className="text-mti-purple-light cursor-pointer text-xs hover:underline" onClick={forgotPassword}>
+										Forgot Password?
+									</span>
+								</div>
+								<Button className="mt-8 w-full" color="purple" disabled={isLoading}>
+									{!isLoading && "Login"}
+									{isLoading && (
+										<div className="flex items-center justify-center">
+											<BsArrowRepeat className="animate-spin text-white" size={25} />
+										</div>
+									)}
+								</Button>
+							</form>
+							<span className="text-mti-gray-cool mt-8 text-sm font-normal">
+								Don&apos;t have an account?{" "}
+								<Link className="text-mti-purple-light" href="/register">
+									Sign up
+								</Link>
+							</span>
+						</>
+					)}
+					{user && !user.isVerified && <EmailVerification user={user} isLoading={isLoading} setIsLoading={setIsLoading} />}
+				</section>
+			</main>
+		</>
+	);
 }
--- a/src/pages/record.tsx
+++ b/src/pages/record.tsx
@@ -22,6 +22,7 @@ import {usePDFDownload} from "@/hooks/usePDFDownload";
 import useRecordStore from "@/stores/recordStore";
 import useTrainingContentStore from "@/stores/trainingContentStore";
 import StatsGridItem from "@/components/StatGridItem";
+import {checkAccess} from "@/utils/permissions";

 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -68,10 +69,9 @@ export default function History({user}: {user: User}) {
 	const {assignments} = useAssignments({});

 	const {users} = useUsers();
-	const {stats, isLoading: isStatsLoading} = useStats(user?.type === "student" ? user?.id : statsUserId);
+	const {stats, isLoading: isStatsLoading} = useStats(statsUserId || user?.id);
 	const {groups: allGroups} = useGroups({});
-
-	const groups = allGroups.filter((x) => x.admin === user.id);
+	const {groups} = useGroups({admin: user?.id, userType: user?.type});

 	const setExams = useExamStore((state) => state.setExams);
 	const setShowSolutions = useExamStore((state) => state.setShowSolutions);
@@ -82,6 +82,8 @@ export default function History({user}: {user: User}) {
 	const renderPdfIcon = usePDFDownload("stats");
 	const router = useRouter();

+	useEffect(() => setStatsUserId(user.id), [setStatsUserId, user]);
+
 	useEffect(() => {
 		if (stats && !isStatsLoading) {
 			setGroupedStats(
@@ -197,6 +199,7 @@ export default function History({user}: {user: User}) {
 	const selectableCorporates = [
 		defaultSelectableCorporate,
 		...users
+			.filter((x) => groups.flatMap((g) => [g.admin, ...g.participants]).includes(x.id))
 			.filter((x) => x.type === "corporate")
 			.map((x) => ({
 				value: x.id,
@@ -208,26 +211,14 @@ export default function History({user}: {user: User}) {

 	const getUsersList = (): User[] => {
 		if (selectedCorporate) {
-			// get groups for that corporate
 			const selectedCorporateGroups = allGroups.filter((x) => x.admin === selectedCorporate);
-
-			// get the teacher ids for that group
 			const selectedCorporateGroupsParticipants = selectedCorporateGroups.flatMap((x) => x.participants);

-			//   // search for groups for these teachers
-			//   const teacherGroups = allGroups.filter((x) => {
-			//     return selectedCorporateGroupsParticipants.includes(x.admin);
-			//   });
-
-			//   const usersList = [
-			//     ...selectedCorporateGroupsParticipants,
-			//     ...teacherGroups.flatMap((x) => x.participants),
-			//   ];
 			const userListWithUsers = selectedCorporateGroupsParticipants.map((x) => users.find((y) => y.id === x)) as User[];
 			return userListWithUsers.filter((x) => x);
 		}

-		return users || [];
+		return user.type !== "mastercorporate" ? users : users.filter((x) => groups.flatMap((g) => [g.admin, ...g.participants]).includes(x.id));
 	};

 	const corporateFilteredUserList = getUsersList();
@@ -267,7 +258,7 @@ export default function History({user}: {user: User}) {
 				<Layout user={user}>
 					<div className="w-full flex -xl:flex-col -xl:gap-4 justify-between items-center">
 						<div className="xl:w-3/4">
-							{(user.type === "developer" || user.type === "admin") && !training && (
+							{checkAccess(user, ["developer", "admin", "mastercorporate"]) && !training && (
 								<>
 									<label className="font-normal text-base text-mti-gray-dim">Corporate</label>

--- a/src/pages/register.tsx
+++ b/src/pages/register.tsx
@@ -55,8 +55,7 @@ export default function Register({code: queryCode}: {code: string}) {
 			<main className="w-full h-[100vh] flex bg-white text-black">
 				<ToastContainer />
 				<section className="h-full w-fit min-w-fit relative hidden lg:flex">
-					<div className="absolute h-full w-full bg-mti-rose-light z-10 bg-opacity-50" />
-					<img src="/people-talking-tablet.png" alt="People smiling looking at a tablet" className="h-full aspect-auto" />
+					<img src="/red-stock-photo.jpg" alt="People smiling looking at a tablet" className="aspect-auto h-full" />
 				</section>
 				<section className="h-full w-full flex flex-col items-center justify-center gap-4">
 					<div className={clsx("flex flex-col items-center", !user && "mb-4")}>
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -16,6 +16,11 @@ import ExamGenerator from "./(admin)/ExamGenerator";
 import BatchCreateUser from "./(admin)/BatchCreateUser";
 import {checkAccess, getTypesOfUser} from "@/utils/permissions";
 import usePermissions from "@/hooks/usePermissions";
+import {useState} from "react";
+import Modal from "@/components/Modal";
+import IconCard from "@/dashboards/IconCard";
+import {BsCode, BsCodeSquare, BsPeopleFill, BsPersonFill} from "react-icons/bs";
+import UserCreator from "./(admin)/UserCreator";

 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -46,6 +51,8 @@ export default function Admin() {
 	const {user} = useUser({redirectTo: "/login"});
 	const {permissions} = usePermissions(user?.id || "");

+	const [modalOpen, setModalOpen] = useState<string>();
+
 	return (
 		<>
 			<Head>
@@ -60,14 +67,52 @@ export default function Admin() {
 			<ToastContainer />
 			{user && (
 				<Layout user={user} className="gap-6">
+					<Modal isOpen={modalOpen === "batchCreateUser"} onClose={() => setModalOpen(undefined)}>
+						<BatchCreateUser user={user} />
+					</Modal>
+					<Modal isOpen={modalOpen === "batchCreateCode"} onClose={() => setModalOpen(undefined)}>
+						<CodeGenerator user={user} />
+					</Modal>
+					<Modal isOpen={modalOpen === "createCode"} onClose={() => setModalOpen(undefined)}>
+						<BatchCodeGenerator user={user} />
+					</Modal>
+					<Modal isOpen={modalOpen === "createUser"} onClose={() => setModalOpen(undefined)}>
+						<UserCreator user={user} />
+					</Modal>
+
 					<section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
 						<ExamLoader />
-						<BatchCreateUser user={user} />
 						{checkAccess(user, getTypesOfUser(["teacher"]), permissions, "viewCodes") && (
-							<>
-								<CodeGenerator user={user} />
-								<BatchCodeGenerator user={user} />
-							</>
+							<div className="w-full grid grid-cols-2 gap-4">
+								<IconCard
+									Icon={BsCode}
+									label="Generate Single Code"
+									color="purple"
+									className="w-full h-full"
+									onClick={() => setModalOpen("createCode")}
+								/>
+								<IconCard
+									Icon={BsCodeSquare}
+									label="Generate Codes in Batch"
+									color="purple"
+									className="w-full h-full"
+									onClick={() => setModalOpen("batchCreateCode")}
+								/>
+								<IconCard
+									Icon={BsPersonFill}
+									label="Create Single User"
+									color="purple"
+									className="w-full h-full"
+									onClick={() => setModalOpen("createUser")}
+								/>
+								<IconCard
+									Icon={BsPeopleFill}
+									label="Create Users in Batch"
+									color="purple"
+									className="w-full h-full"
+									onClick={() => setModalOpen("batchCreateUser")}
+								/>
+							</div>
 						)}
 					</section>
 					<section className="w-full">