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/public/orange-stock-photo.jpg
+++ b/public/orange-stock-photo.jpg
--- a/public/red-stock-photo.jpg
+++ b/public/red-stock-photo.jpg
--- a/src/components/Low/Input.tsx
+++ b/src/components/Low/Input.tsx
@@ -11,6 +11,7 @@ interface Props {
 	value?: string | number;
 	className?: string;
 	disabled?: boolean;
+	max?: number;
 	name: string;
 	onChange: (value: string) => void;
 }
@@ -23,6 +24,7 @@ export default function Input({
 	required = false,
 	value,
 	defaultValue,
+	max,
 	className,
 	roundness = "full",
 	disabled = false,
@@ -72,6 +74,7 @@ export default function Input({
 				name={name}
 				disabled={disabled}
 				value={value}
+				max={max}
 				onChange={(e) => onChange(e.target.value)}
 				min={type === "number" ? 0 : undefined}
 				placeholder={placeholder}
--- a/src/components/UserCard.tsx
+++ b/src/components/UserCard.tsx
@@ -41,6 +41,7 @@ interface Props {
 	onViewStudents?: () => void;
 	onViewTeachers?: () => void;
 	onViewCorporate?: () => void;
+	maxUserAmount?: number;
 	disabled?: boolean;
 	disabledFields?: {
 		countryManager?: boolean;
@@ -72,17 +73,31 @@ const CURRENCIES_OPTIONS = CURRENCIES.map(({label, currency}) => ({
 	label,
 }));

-const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers, onViewCorporate, disabled = false, disabledFields = {}}: Props) => {
+const UserCard = ({
+	user,
+	loggedInUser,
+	maxUserAmount,
+	onClose,
+	onViewStudents,
+	onViewTeachers,
+	onViewCorporate,
+	disabled = false,
+	disabledFields = {},
+}: Props) => {
 	const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
 	const [type, setType] = useState(user.type);
 	const [status, setStatus] = useState(user.status);
 	const [referralAgentLabel, setReferralAgentLabel] = useState<string>();
-	const [position, setPosition] = useState<string | undefined>(user.type === "corporate" ? user.demographicInformation?.position : undefined);
-	const [passport_id, setPassportID] = useState<string | undefined>(user.type === "student" ? user.demographicInformation?.passport_id : undefined);
+	const [position, setPosition] = useState<string | undefined>(
+		user.type === "corporate" || user.type === "mastercorporate" ? user.demographicInformation?.position : undefined,
+	);
+	const [studentID, setStudentID] = useState<string | undefined>(user.type === "student" ? user.studentID : undefined);

-	const [referralAgent, setReferralAgent] = useState(user.type === "corporate" ? user.corporateInformation?.referralAgent : undefined);
+	const [referralAgent, setReferralAgent] = useState(
+		user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.referralAgent : undefined,
+	);
 	const [companyName, setCompanyName] = useState(
-		user.type === "corporate"
+		user.type === "corporate" || user.type === "mastercorporate"
 			? user.corporateInformation?.companyInformation.name
 			: user.type === "agent"
 			? user.agentInformation?.companyName
@@ -92,11 +107,21 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 	const [commercialRegistration, setCommercialRegistration] = useState(
 		user.type === "agent" ? user.agentInformation?.commercialRegistration : undefined,
 	);
-	const [userAmount, setUserAmount] = useState(user.type === "corporate" ? user.corporateInformation?.companyInformation.userAmount : undefined);
-	const [paymentValue, setPaymentValue] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.value : undefined);
-	const [paymentCurrency, setPaymentCurrency] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.currency : "EUR");
-	const [monthlyDuration, setMonthlyDuration] = useState(user.type === "corporate" ? user.corporateInformation?.monthlyDuration : undefined);
-	const [commissionValue, setCommission] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.commission : undefined);
+	const [userAmount, setUserAmount] = useState(
+		user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.companyInformation.userAmount : undefined,
+	);
+	const [paymentValue, setPaymentValue] = useState(
+		user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.payment?.value : undefined,
+	);
+	const [paymentCurrency, setPaymentCurrency] = useState(
+		user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.payment?.currency : "EUR",
+	);
+	const [monthlyDuration, setMonthlyDuration] = useState(
+		user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.monthlyDuration : undefined,
+	);
+	const [commissionValue, setCommission] = useState(
+		user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.payment?.commission : undefined,
+	);
 	const {stats} = useStats(user.id);
 	const {users} = useUsers();
 	const {codes} = useCodes(user.id);
@@ -115,7 +140,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 	}, [users, referralAgent]);

 	const updateUser = () => {
-		if (user.type === "corporate" && (!paymentValue || paymentValue < 0))
+		if (user.type === "corporate" || (user.type === "mastercorporate" && (!paymentValue || paymentValue < 0)))
 			return toast.error("Please set a price for the user's package before updating!");
 		if (!confirm(`Are you sure you want to update ${user.name}'s account?`)) return;

@@ -123,6 +148,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
 				...user,
 				subscriptionExpirationDate: expiryDate,
+				studentID,
 				type,
 				status,
 				agentInformation:
@@ -178,7 +204,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 	];

 	const corporateProfileItems =
-		user.type === "corporate"
+		user.type === "corporate" || user.type === "mastercorporate"
 			? [
 					{
 						icon: <BsPerson className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
@@ -199,7 +225,10 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 	};
 	return (
 		<>
-			<ProfileSummary user={user} items={user.type === "corporate" ? corporateProfileItems : generalProfileItems} />
+			<ProfileSummary
+				user={user}
+				items={user.type === "corporate" || user.type === "mastercorporate" ? corporateProfileItems : generalProfileItems}
+			/>

 			{user.type === "agent" && (
 				<>
@@ -238,7 +267,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 					<Divider className="w-full !m-0" />
 				</>
 			)}
-			{user.type === "corporate" && (
+			{(user.type === "corporate" || user.type === "mastercorporate") && (
 				<>
 					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
 						<Input
@@ -248,16 +277,23 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 							onChange={setCompanyName}
 							placeholder="Enter corporate name"
 							defaultValue={companyName}
-							disabled={disabled}
+							disabled={disabled || checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"]))}
 						/>
 						<Input
 							label="Number of Users"
 							type="number"
 							name="userAmount"
+							max={maxUserAmount}
 							onChange={(e) => setUserAmount(e ? parseInt(e) : undefined)}
 							placeholder="Enter number of users"
 							defaultValue={userAmount}
-							disabled={disabled}
+							disabled={
+								disabled ||
+								checkAccess(
+									loggedInUser,
+									getTypesOfUser(["developer", "admin", ...((user.type === "corporate" ? ["mastercorporate"] : []) as Type[])]),
+								)
+							}
 						/>
 						<Input
 							label="Monthly Duration"
@@ -266,7 +302,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 							onChange={(e) => setMonthlyDuration(e ? parseInt(e) : undefined)}
 							placeholder="Enter monthly duration"
 							defaultValue={monthlyDuration}
-							disabled={disabled}
+							disabled={disabled || checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"]))}
 						/>
 						<div className="flex flex-col gap-3 w-full lg:col-span-3">
 							<label className="font-normal text-base text-mti-gray-dim">Pricing</label>
@@ -277,7 +313,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 									type="number"
 									defaultValue={paymentValue || 0}
 									className="col-span-3"
-									disabled={disabled}
+									disabled={disabled || checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"]))}
 								/>
 								<Select
 									className={clsx(
@@ -305,7 +341,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 											color: state.isFocused ? "black" : styles.color,
 										}),
 									}}
-									isDisabled={disabled}
+									isDisabled={disabled || checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"]))}
 								/>
 							</div>
 						</div>
@@ -417,16 +453,27 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 				</div>

 				{user.type === "student" && (
-					<Input
-						type="text"
-						name="passport_id"
-						label="Passport/National ID"
-						onChange={() => null}
-						placeholder="Enter National ID or Passport number"
-						value={user.type === "student" ? user.demographicInformation?.passport_id : undefined}
-						disabled
-						required
-					/>
+					<div className="flex flex-col md:flex-row gap-8 w-full">
+						<Input
+							type="text"
+							name="passport_id"
+							label="Passport/National ID"
+							onChange={() => null}
+							placeholder="Enter National ID or Passport number"
+							value={user.type === "student" ? user.demographicInformation?.passport_id : undefined}
+							disabled
+							required
+						/>
+						<Input
+							type="text"
+							name="studentID"
+							label="Student ID"
+							onChange={setStudentID}
+							placeholder="Enter Student ID"
+							disabled={!checkAccess(loggedInUser, getTypesOfUser(["teacher", "agent", "student"]), permissions, "editStudent")}
+							value={studentID}
+						/>
+					</div>
 				)}

 				<div className="flex flex-col md:flex-row gap-8 w-full">
@@ -456,7 +503,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 							</RadioGroup>
 						</div>
 					)}
-					{user.type === "corporate" && (
+					{(user.type === "corporate" || user.type === "mastercorporate") && (
 						<Input
 							name="position"
 							onChange={setPosition}
--- a/src/constants/userPermissions.ts
+++ b/src/constants/userPermissions.ts
@@ -1,91 +1,91 @@
-import { Type } from "@/interfaces/user";
+import {Type} from "@/interfaces/user";

 export const PERMISSIONS = {
-  generateCode: {
-    student: ["corporate", "developer", "admin", "mastercorporate"],
-    teacher: ["corporate", "developer", "admin", "mastercorporate"],
-    corporate: ["admin", "developer"],
-    mastercorporate: ["admin", "developer"],
+	generateCode: {
+		student: ["corporate", "developer", "admin", "mastercorporate"],
+		teacher: ["corporate", "developer", "admin", "mastercorporate"],
+		corporate: ["admin", "developer"],
+		mastercorporate: ["admin", "developer"],

-    admin: ["developer", "admin"],
-    agent: ["developer", "admin"],
-    developer: ["developer"],
-  },
-  deleteUser: {
-    student: {
-      perm: "deleteStudent",
-      list: ["corporate", "developer", "admin", "mastercorporate"],
-    },
-    teacher: {
-      perm: "deleteTeacher",
-      list: ["corporate", "developer", "admin", "mastercorporate"],
-    },
-    corporate: {
-      perm: "deleteCorporate",
-      list: ["admin", "developer"],
-    },
-    mastercorporate: {
-      perm: undefined,
-      list: ["admin", "developer"],
-    },
+		admin: ["developer", "admin"],
+		agent: ["developer", "admin"],
+		developer: ["developer"],
+	},
+	deleteUser: {
+		student: {
+			perm: "deleteStudent",
+			list: ["corporate", "developer", "admin", "mastercorporate"],
+		},
+		teacher: {
+			perm: "deleteTeacher",
+			list: ["corporate", "developer", "admin", "mastercorporate"],
+		},
+		corporate: {
+			perm: "deleteCorporate",
+			list: ["admin", "developer"],
+		},
+		mastercorporate: {
+			perm: undefined,
+			list: ["admin", "developer"],
+		},

-    admin: {
-      perm: "deleteAdmin",
-      list: ["developer", "admin"],
-    },
-    agent: {
-      perm: "deleteCountryManager",
-      list: ["developer", "admin"],
-    },
-    developer: {
-      perm: undefined,
-      list: ["developer"],
-    },
-  },
-  updateUser: {
-    student: {
-      perm: "editStudent",
-      list: ["developer", "admin"],
-    },
-    teacher: {
-      perm: "editTeacher",
-      list: ["developer", "admin"],
-    },
+		admin: {
+			perm: "deleteAdmin",
+			list: ["developer", "admin"],
+		},
+		agent: {
+			perm: "deleteCountryManager",
+			list: ["developer", "admin"],
+		},
+		developer: {
+			perm: undefined,
+			list: ["developer"],
+		},
+	},
+	updateUser: {
+		student: {
+			perm: "editStudent",
+			list: ["developer", "admin", "corporate", "mastercorporate", "teacher"],
+		},
+		teacher: {
+			perm: "editTeacher",
+			list: ["developer", "admin", "corporate", "mastercorporate"],
+		},

-    corporate: {
-      perm: "editCorporate",
-      list: ["admin", "developer"],
-    },
-    mastercorporate: {
-      perm: undefined,
-      list: ["admin", "developer"],
-    },
+		corporate: {
+			perm: "editCorporate",
+			list: ["developer", "admin", "mastercorporate"],
+		},
+		mastercorporate: {
+			perm: undefined,
+			list: ["admin", "developer"],
+		},

-    admin: {
-      perm: "editAdmin",
-      list: ["developer", "admin"],
-    },
+		admin: {
+			perm: "editAdmin",
+			list: ["developer", "admin"],
+		},

-    agent: {
-      perm: "editCountryManager",
-      list: ["developer", "admin"],
-    },
-    developer: {
-      perm: undefined,
-      list: ["developer"],
-    },
-  },
-  updateExpiryDate: {
-    student: ["developer", "admin"],
-    teacher: ["developer", "admin"],
-    corporate: ["admin", "developer"],
-    mastercorporate: ["admin", "developer"],
+		agent: {
+			perm: "editCountryManager",
+			list: ["developer", "admin"],
+		},
+		developer: {
+			perm: undefined,
+			list: ["developer"],
+		},
+	},
+	updateExpiryDate: {
+		student: ["developer", "admin"],
+		teacher: ["developer", "admin"],
+		corporate: ["admin", "developer"],
+		mastercorporate: ["admin", "developer"],

-    admin: ["developer", "admin"],
-    agent: ["developer", "admin"],
-    developer: ["developer"],
-  },
-  examManagement: {
-    delete: ["developer", "admin"],
-  },
+		admin: ["developer", "admin"],
+		agent: ["developer", "admin"],
+		developer: ["developer"],
+	},
+	examManagement: {
+		delete: ["developer", "admin"],
+	},
 };
--- a/src/dashboards/Corporate.tsx
+++ b/src/dashboards/Corporate.tsx
@@ -54,11 +54,12 @@ import Checkbox from "@/components/Low/Checkbox";
 import List from "@/components/List";
 import { getUserCompanyName } from "@/resources/user";
 import {
-	futureAssignmentFilter,
-	pastAssignmentFilter,
-	archivedAssignmentFilter,
-	activeAssignmentFilter
-} from '@/utils/assignments';
+  futureAssignmentFilter,
+  pastAssignmentFilter,
+  archivedAssignmentFilter,
+  activeAssignmentFilter,
+} from "@/utils/assignments";
+import useUserBalance from "@/hooks/useUserBalance";

 interface Props {
  user: CorporateUser;
@@ -230,7 +231,6 @@ export default function CorporateDashboard({ user }: Props) {
    useState<CorporateUser>();
  const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
  const [isCreatingAssignment, setIsCreatingAssignment] = useState(false);
-  const [userBalance, setUserBalance] = useState(0);

  const { stats } = useStats();
  const { users, reload, isLoading } = useUsers();
@@ -241,6 +241,7 @@ export default function CorporateDashboard({ user }: Props) {
    isLoading: isAssignmentsLoading,
    reload: reloadAssignments,
  } = useAssignments({ corporate: user.id });
+  const { balance } = useUserBalance();

  const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
  const router = useRouter();
@@ -249,19 +250,6 @@ export default function CorporateDashboard({ user }: Props) {
    setShowModal(!!selectedUser && page === "");
  }, [selectedUser, page]);

-  useEffect(() => {
-    const relatedGroups = groups.filter(
-      (x) =>
-        x.name === "Students" || x.name === "Teachers" || x.name === "Corporate"
-    );
-    const usersInGroups = relatedGroups.map((x) => x.participants).flat();
-    const filteredCodes = codes.filter(
-      (x) => !x.userId || !usersInGroups.includes(x.userId)
-    );
-
-    setUserBalance(usersInGroups.length + filteredCodes.length);
-  }, [codes, groups]);
-
  useEffect(() => {
    // in this case it fetches the master corporate account
    getUserCorporate(user.id).then(setCorporateUserToShow);
@@ -436,7 +424,8 @@ export default function CorporateDashboard({ user }: Props) {
        </div>
        <section className="flex flex-col gap-4">
          <h2 className="text-2xl font-semibold">
-            Active Assignments ({assignments.filter(activeAssignmentFilter).length})
+            Active Assignments (
+            {assignments.filter(activeAssignmentFilter).length})
          </h2>
          <div className="flex flex-wrap gap-2">
            {assignments.filter(activeAssignmentFilter).map((a) => (
@@ -451,7 +440,8 @@ export default function CorporateDashboard({ user }: Props) {
        </section>
        <section className="flex flex-col gap-4">
          <h2 className="text-2xl font-semibold">
-            Planned Assignments ({assignments.filter(futureAssignmentFilter).length})
+            Planned Assignments (
+            {assignments.filter(futureAssignmentFilter).length})
          </h2>
          <div className="flex flex-wrap gap-2">
            <div
@@ -495,7 +485,8 @@ export default function CorporateDashboard({ user }: Props) {
        </section>
        <section className="flex flex-col gap-4">
          <h2 className="text-2xl font-semibold">
-            Archived Assignments ({assignments.filter(archivedAssignmentFilter).length})
+            Archived Assignments (
+            {assignments.filter(archivedAssignmentFilter).length})
          </h2>
          <div className="flex flex-wrap gap-2">
            {assignments.filter(archivedAssignmentFilter).map((a) => (
@@ -640,7 +631,7 @@ export default function CorporateDashboard({ user }: Props) {
        <IconCard
          Icon={BsPersonCheck}
          label="User Balance"
-          value={`${userBalance}/${
+          value={`${balance}/${
            user.corporateInformation?.companyInformation?.userAmount || 0
          }`}
          color="purple"
--- a/src/dashboards/IconCard.tsx
+++ b/src/dashboards/IconCard.tsx
@@ -9,6 +9,7 @@ interface Props {
  tooltip?: string;
  onClick?: () => void;
  isSelected?: boolean;
+  className?: string;
 }

 export default function IconCard({
@@ -18,6 +19,7 @@ export default function IconCard({
  color,
  tooltip,
  onClick,
+  className,
  isSelected,
 }: Props) {
  const colorClasses: { [key in typeof color]: string } = {
@@ -33,7 +35,8 @@ export default function IconCard({
      className={clsx(
        "bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300",
        tooltip && "tooltip tooltip-bottom",
-        isSelected && `border border-solid border-${colorClasses[color]}`
+        isSelected && `border border-solid border-${colorClasses[color]}`,
+		className,
      )}
      data-tip={tooltip}
    >
--- a/src/dashboards/MasterCorporate.tsx
+++ b/src/dashboards/MasterCorporate.tsx
@@ -67,17 +67,17 @@ import {
 } from "@/components/ui/popover";
 import MasterStatistical from "./MasterStatistical";
 import {
-	futureAssignmentFilter,
-	pastAssignmentFilter,
-	archivedAssignmentFilter,
-	activeAssignmentFilter
-} from '@/utils/assignments';
+  futureAssignmentFilter,
+  pastAssignmentFilter,
+  archivedAssignmentFilter,
+  activeAssignmentFilter,
+} from "@/utils/assignments";
+import useUserBalance from "@/hooks/useUserBalance";

 interface Props {
  user: MasterCorporateUser;
 }

-
 type StudentPerformanceItem = User & {
  corporate?: CorporateUser;
  group?: Group;
@@ -439,12 +439,13 @@ export default function MasterCorporateDashboard({ user }: Props) {
  const { users, reload } = useUsers();
  const { codes } = useCodes(user.id);
  const { groups } = useGroups({ admin: user.id, userType: user.type });
+  const { balance } = useUserBalance();

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

  const corporateUserGroups = [
    ...new Set(groups.flatMap((g) => g.participants)),
@@ -744,7 +745,8 @@ export default function MasterCorporateDashboard({ user }: Props) {
        </div>
        <section className="flex flex-col gap-4">
          <h2 className="text-2xl font-semibold">
-            Active Assignments ({assignments.filter(activeAssignmentFilter).length})
+            Active Assignments (
+            {assignments.filter(activeAssignmentFilter).length})
          </h2>
          <div className="flex flex-wrap gap-2">
            {assignments.filter(activeAssignmentFilter).map((a) => (
@@ -759,7 +761,8 @@ export default function MasterCorporateDashboard({ user }: Props) {
        </section>
        <section className="flex flex-col gap-4">
          <h2 className="text-2xl font-semibold">
-            Planned Assignments ({assignments.filter(futureAssignmentFilter).length})
+            Planned Assignments (
+            {assignments.filter(futureAssignmentFilter).length})
          </h2>
          <div className="flex flex-wrap gap-2">
            <div
@@ -803,7 +806,8 @@ export default function MasterCorporateDashboard({ user }: Props) {
        </section>
        <section className="flex flex-col gap-4">
          <h2 className="text-2xl font-semibold">
-            Archived Assignments ({assignments.filter(archivedAssignmentFilter).length})
+            Archived Assignments (
+            {assignments.filter(archivedAssignmentFilter).length})
          </h2>
          <div className="flex flex-wrap gap-2">
            {assignments.filter(archivedAssignmentFilter).map((a) => (
@@ -903,7 +907,7 @@ export default function MasterCorporateDashboard({ user }: Props) {
        <IconCard
          Icon={BsPersonCheck}
          label="User Balance"
-          value={`${codes.length}/${
+          value={`${balance}/${
            user.corporateInformation?.companyInformation?.userAmount || 0
          }`}
          color="purple"
@@ -1020,6 +1024,12 @@ export default function MasterCorporateDashboard({ user }: Props) {
          {selectedUser && (
            <div className="w-full flex flex-col gap-8">
              <UserCard
+                maxUserAmount={
+                  user.type === "mastercorporate"
+                    ? (user.corporateInformation?.companyInformation
+                        ?.userAmount || 0) - balance
+                    : undefined
+                }
                loggedInUser={user}
                onClose={(shouldReload) => {
                  setSelectedUser(undefined);
--- a/src/hooks/useUserBalance.tsx
+++ b/src/hooks/useUserBalance.tsx
@@ -0,0 +1,21 @@
+import {Code, Group, User} from "@/interfaces/user";
+import axios from "axios";
+import {useEffect, useState} from "react";
+
+export default function useUserBalance() {
+	const [balance, setBalance] = useState<number>(0);
+	const [isLoading, setIsLoading] = useState(false);
+	const [isError, setIsError] = useState(false);
+
+	const getData = () => {
+		setIsLoading(true);
+		axios
+			.get<{balance: number}>(`/api/users/balance`)
+			.then((response) => setBalance(response.data.balance))
+			.finally(() => setIsLoading(false));
+	};
+
+	useEffect(getData, []);
+
+	return {balance, isLoading, isError, reload: getData};
+}
--- a/src/interfaces/user.ts
+++ b/src/interfaces/user.ts
@@ -1,195 +1,167 @@
-import { Module } from ".";
-import { InstructorGender, ShuffleMap } from "./exam";
-import { PermissionType } from "./permissions";
+import {Module} from ".";
+import {InstructorGender, ShuffleMap} from "./exam";
+import {PermissionType} from "./permissions";

-export type User =
-  | StudentUser
-  | TeacherUser
-  | CorporateUser
-  | AgentUser
-  | AdminUser
-  | DeveloperUser
-  | MasterCorporateUser;
+export type User = StudentUser | TeacherUser | CorporateUser | AgentUser | AdminUser | DeveloperUser | MasterCorporateUser;
 export type UserStatus = "active" | "disabled" | "paymentDue";

 export interface BasicUser {
-  email: string;
-  name: string;
-  profilePicture: string;
-  id: string;
-  isFirstLogin: boolean;
-  focus: "academic" | "general";
-  levels: { [key in Module]: number };
-  desiredLevels: { [key in Module]: number };
-  type: Type;
-  bio: string;
-  isVerified: boolean;
-  subscriptionExpirationDate?: null | Date;
-  registrationDate?: Date;
-  status: UserStatus;
-  permissions: PermissionType[];
-  lastLogin?: Date;
+	email: string;
+	name: string;
+	profilePicture: string;
+	id: string;
+	isFirstLogin: boolean;
+	focus: "academic" | "general";
+	levels: {[key in Module]: number};
+	desiredLevels: {[key in Module]: number};
+	type: Type;
+	bio: string;
+	isVerified: boolean;
+	subscriptionExpirationDate?: null | Date;
+	registrationDate?: Date;
+	status: UserStatus;
+	permissions: PermissionType[];
+	lastLogin?: Date;
 }

 export interface StudentUser extends BasicUser {
-  type: "student";
-  preferredGender?: InstructorGender;
-  demographicInformation?: DemographicInformation;
-  preferredTopics?: string[];
+	type: "student";
+	studentID?: string;
+	preferredGender?: InstructorGender;
+	demographicInformation?: DemographicInformation;
+	preferredTopics?: string[];
 }

 export interface TeacherUser extends BasicUser {
-  type: "teacher";
-  demographicInformation?: DemographicInformation;
+	type: "teacher";
+	demographicInformation?: DemographicInformation;
 }

 export interface CorporateUser extends BasicUser {
-  type: "corporate";
-  corporateInformation: CorporateInformation;
-  demographicInformation?: DemographicCorporateInformation;
+	type: "corporate";
+	corporateInformation: CorporateInformation;
+	demographicInformation?: DemographicCorporateInformation;
 }

 export interface MasterCorporateUser extends BasicUser {
-  type: "mastercorporate";
-  corporateInformation: CorporateInformation;
-  demographicInformation?: DemographicCorporateInformation;
+	type: "mastercorporate";
+	corporateInformation: CorporateInformation;
+	demographicInformation?: DemographicCorporateInformation;
 }

 export interface AgentUser extends BasicUser {
-  type: "agent";
-  agentInformation: AgentInformation;
-  demographicInformation?: DemographicInformation;
+	type: "agent";
+	agentInformation: AgentInformation;
+	demographicInformation?: DemographicInformation;
 }

 export interface AdminUser extends BasicUser {
-  type: "admin";
-  demographicInformation?: DemographicInformation;
+	type: "admin";
+	demographicInformation?: DemographicInformation;
 }

 export interface DeveloperUser extends BasicUser {
-  type: "developer";
-  preferredGender?: InstructorGender;
-  demographicInformation?: DemographicInformation;
-  preferredTopics?: string[];
+	type: "developer";
+	preferredGender?: InstructorGender;
+	demographicInformation?: DemographicInformation;
+	preferredTopics?: string[];
 }

 export interface CorporateInformation {
-  companyInformation: CompanyInformation;
-  monthlyDuration: number;
-  payment?: {
-    value: number;
-    currency: string;
-    commission: number;
-  };
-  referralAgent?: string;
+	companyInformation: CompanyInformation;
+	monthlyDuration: number;
+	payment?: {
+		value: number;
+		currency: string;
+		commission: number;
+	};
+	referralAgent?: string;
 }

 export interface AgentInformation {
-  companyName: string;
-  commercialRegistration: string;
-  companyArabName?: string;
+	companyName: string;
+	commercialRegistration: string;
+	companyArabName?: string;
 }

 export interface CompanyInformation {
-  name: string;
-  userAmount: number;
+	name: string;
+	userAmount: number;
 }

 export interface DemographicInformation {
-  country: string;
-  phone: string;
-  gender: Gender;
-  employment: EmploymentStatus;
-  passport_id?: string;
-  timezone?: string;
+	country: string;
+	phone: string;
+	gender: Gender;
+	employment: EmploymentStatus;
+	passport_id?: string;
+	timezone?: string;
 }

 export interface DemographicCorporateInformation {
-  country: string;
-  phone: string;
-  gender: Gender;
-  position: string;
-  timezone?: string;
+	country: string;
+	phone: string;
+	gender: Gender;
+	position: string;
+	timezone?: string;
 }

 export type Gender = "male" | "female" | "other";
-export type EmploymentStatus =
-  | "employed"
-  | "student"
-  | "self-employed"
-  | "unemployed"
-  | "retired"
-  | "other";
-export const EMPLOYMENT_STATUS: { status: EmploymentStatus; label: string }[] =
-  [
-    { status: "student", label: "Student" },
-    { status: "employed", label: "Employed" },
-    { status: "unemployed", label: "Unemployed" },
-    { status: "self-employed", label: "Self-employed" },
-    { status: "retired", label: "Retired" },
-    { status: "other", label: "Other" },
-  ];
+export type EmploymentStatus = "employed" | "student" | "self-employed" | "unemployed" | "retired" | "other";
+export const EMPLOYMENT_STATUS: {status: EmploymentStatus; label: string}[] = [
+	{status: "student", label: "Student"},
+	{status: "employed", label: "Employed"},
+	{status: "unemployed", label: "Unemployed"},
+	{status: "self-employed", label: "Self-employed"},
+	{status: "retired", label: "Retired"},
+	{status: "other", label: "Other"},
+];

 export interface Stat {
-  id: string;
-  user: string;
-  exam: string;
-  exercise: string;
-  session: string;
-  date: number;
-  module: Module;
-  solutions: any[];
-  type: string;
-  timeSpent?: number;
-  inactivity?: number;
-  assignment?: string;
-  score: {
-    correct: number;
-    total: number;
-    missing: number;
-  };
-  isDisabled?: boolean;
-  shuffleMaps?: ShuffleMap[];
-  pdf?: {
-    path: string;
-    version: string;
-  };
+	id: string;
+	user: string;
+	exam: string;
+	exercise: string;
+	session: string;
+	date: number;
+	module: Module;
+	solutions: any[];
+	type: string;
+	timeSpent?: number;
+	inactivity?: number;
+	assignment?: string;
+	score: {
+		correct: number;
+		total: number;
+		missing: number;
+	};
+	isDisabled?: boolean;
+	shuffleMaps?: ShuffleMap[];
+	pdf?: {
+		path: string;
+		version: string;
+	};
 }

 export interface Group {
-  admin: string;
-  name: string;
-  participants: string[];
-  id: string;
-  disableEditing?: boolean;
+	admin: string;
+	name: string;
+	participants: string[];
+	id: string;
+	disableEditing?: boolean;
 }

 export interface Code {
-  code: string;
-  creator: string;
-  expiryDate: Date;
-  type: Type;
-  creationDate?: string;
-  userId?: string;
-  email?: string;
-  name?: string;
-  passport_id?: string;
+	code: string;
+	creator: string;
+	expiryDate: Date;
+	type: Type;
+	creationDate?: string;
+	userId?: string;
+	email?: string;
+	name?: string;
+	passport_id?: string;
 }

-export type Type =
-  | "student"
-  | "teacher"
-  | "corporate"
-  | "admin"
-  | "developer"
-  | "agent"
-  | "mastercorporate";
-export const userTypes: Type[] = [
-  "student",
-  "teacher",
-  "corporate",
-  "admin",
-  "developer",
-  "agent",
-  "mastercorporate",
-];
+export type Type = "student" | "teacher" | "corporate" | "admin" | "developer" | "agent" | "mastercorporate";
+export const userTypes: Type[] = ["student", "teacher", "corporate", "admin", "developer", "agent", "mastercorporate"];
--- 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">
--- a/src/utils/codes.be.ts
+++ b/src/utils/codes.be.ts
@@ -0,0 +1,10 @@
+import {app} from "@/firebase";
+import {Code} from "@/interfaces/user";
+import {collection, getDocs, getFirestore, query, where} from "firebase/firestore";
+
+const db = getFirestore(app);
+
+export const getUserCodes = async (id: string): Promise<Code[]> => {
+	const codeDocs = await getDocs(query(collection(db, "codes"), where("creator", "==", id)));
+	return codeDocs.docs.map((x) => ({...(x.data() as Code), id})) as Code[];
+};
--- a/src/utils/groups.be.ts
+++ b/src/utils/groups.be.ts
@@ -1,173 +1,112 @@
-import { app } from "@/firebase";
-import {
-  CorporateUser,
-  Group,
-  StudentUser,
-  TeacherUser,
-} from "@/interfaces/user";
-import {
-  collection,
-  doc,
-  getDoc,
-  getDocs,
-  getFirestore,
-  query,
-  setDoc,
-  where,
-} from "firebase/firestore";
+import {app} from "@/firebase";
+import {CorporateUser, Group, StudentUser, TeacherUser} from "@/interfaces/user";
+import {collection, doc, getDoc, getDocs, getFirestore, query, setDoc, where} from "firebase/firestore";
 import moment from "moment";
-import { getUser } from "./users.be";
-import { getSpecificUsers } from "./users.be";
+import {getUser} from "./users.be";
+import {getSpecificUsers} from "./users.be";
 const db = getFirestore(app);

-export const updateExpiryDateOnGroup = async (
-  participantID: string,
-  corporateID: string
-) => {
-  const corporateRef = await getDoc(doc(db, "users", corporateID));
-  const participantRef = await getDoc(doc(db, "users", participantID));
+export const updateExpiryDateOnGroup = async (participantID: string, corporateID: string) => {
+	const corporateRef = await getDoc(doc(db, "users", corporateID));
+	const participantRef = await getDoc(doc(db, "users", participantID));

-  if (!corporateRef.exists() || !participantRef.exists()) return;
+	if (!corporateRef.exists() || !participantRef.exists()) return;

-  const corporate = {
-    ...corporateRef.data(),
-    id: corporateRef.id,
-  } as CorporateUser;
-  const participant = { ...participantRef.data(), id: participantRef.id } as
-    | StudentUser
-    | TeacherUser;
+	const corporate = {
+		...corporateRef.data(),
+		id: corporateRef.id,
+	} as CorporateUser;
+	const participant = {...participantRef.data(), id: participantRef.id} as StudentUser | TeacherUser;

-  if (
-    corporate.type !== "corporate" ||
-    (participant.type !== "student" && participant.type !== "teacher")
-  )
-    return;
+	if (corporate.type !== "corporate" || (participant.type !== "student" && participant.type !== "teacher")) return;

-  if (
-    !corporate.subscriptionExpirationDate ||
-    !participant.subscriptionExpirationDate
-  ) {
-    return await setDoc(
-      doc(db, "users", participant.id),
-      { subscriptionExpirationDate: null },
-      { merge: true }
-    );
-  }
+	if (!corporate.subscriptionExpirationDate || !participant.subscriptionExpirationDate) {
+		return await setDoc(doc(db, "users", participant.id), {subscriptionExpirationDate: null}, {merge: true});
+	}

-  const corporateDate = moment(corporate.subscriptionExpirationDate);
-  const participantDate = moment(participant.subscriptionExpirationDate);
+	const corporateDate = moment(corporate.subscriptionExpirationDate);
+	const participantDate = moment(participant.subscriptionExpirationDate);

-  if (corporateDate.isAfter(participantDate))
-    return await setDoc(
-      doc(db, "users", participant.id),
-      { subscriptionExpirationDate: corporateDate.toISOString() },
-      { merge: true }
-    );
+	if (corporateDate.isAfter(participantDate))
+		return await setDoc(doc(db, "users", participant.id), {subscriptionExpirationDate: corporateDate.toISOString()}, {merge: true});

-  return;
+	return;
 };

 export const getGroups = async () => {
-  const groupDocs = await getDocs(collection(db, "groups"));
-  return groupDocs.docs.map((x) => ({ ...x.data(), id: x.id })) as Group[];
+	const groupDocs = await getDocs(collection(db, "groups"));
+	return groupDocs.docs.map((x) => ({...x.data(), id: x.id})) as Group[];
 };

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

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

-  return teacherPromises.filter((x) => !!x).flat() as string[];
+	return teacherPromises.filter((x) => !!x).flat() as string[];
 };

-export const getGroupsForUser = async (admin: string, participant: string) => {
-  try {
-    const queryConstraints = [
-      ...(admin ? [where("admin", "==", admin)] : []),
-      ...(participant
-        ? [where("participants", "array-contains", participant)]
-        : []),
-    ];
-    const snapshot = await getDocs(
-      queryConstraints.length > 0
-        ? query(collection(db, "groups"), ...queryConstraints)
-        : collection(db, "groups")
-    );
-    const groups = snapshot.docs.map((doc) => ({
-      id: doc.id,
-      ...doc.data(),
-    })) as Group[];
+export const getGroupsForUser = async (admin: string, participant?: string) => {
+	try {
+		const queryConstraints = [
+			...(admin ? [where("admin", "==", admin)] : []),
+			...(participant ? [where("participants", "array-contains", participant)] : []),
+		];
+		const snapshot = await getDocs(queryConstraints.length > 0 ? query(collection(db, "groups"), ...queryConstraints) : collection(db, "groups"));
+		const groups = snapshot.docs.map((doc) => ({
+			id: doc.id,
+			...doc.data(),
+		})) as Group[];

-    return groups;
-  } catch (e) {
-    console.error(e);
-    return [];
-  }
+		return groups;
+	} catch (e) {
+		console.error(e);
+		return [];
+	}
 };

-export const getStudentGroupsForUsersWithoutAdmin = async (
-  admin: string,
-  participants: string[]
-) => {
-  try {
-    const queryConstraints = [
-      ...(admin ? [where("admin", "!=", admin)] : []),
-      ...(participants
-        ? [where("participants", "array-contains-any", participants)]
-        : []),
-      where("name", "==", "Students"),
-    ];
-    const snapshot = await getDocs(
-      queryConstraints.length > 0
-        ? query(collection(db, "groups"), ...queryConstraints)
-        : collection(db, "groups")
-    );
-    const groups = snapshot.docs.map((doc) => ({
-      id: doc.id,
-      ...doc.data(),
-    })) as Group[];
+export const getStudentGroupsForUsersWithoutAdmin = async (admin: string, participants: string[]) => {
+	try {
+		const queryConstraints = [
+			...(admin ? [where("admin", "!=", admin)] : []),
+			...(participants ? [where("participants", "array-contains-any", participants)] : []),
+			where("name", "==", "Students"),
+		];
+		const snapshot = await getDocs(queryConstraints.length > 0 ? query(collection(db, "groups"), ...queryConstraints) : collection(db, "groups"));
+		const groups = snapshot.docs.map((doc) => ({
+			id: doc.id,
+			...doc.data(),
+		})) as Group[];

-    return groups;
-  } catch (e) {
-    console.error(e);
-    return [];
-  }
+		return groups;
+	} catch (e) {
+		console.error(e);
+		return [];
+	}
 };

 export const getCorporateNameForStudent = async (studentID: string) => {
-  const groups = await getStudentGroupsForUsersWithoutAdmin("", [studentID]);
-  if (groups.length === 0) return '';
+	const groups = await getStudentGroupsForUsersWithoutAdmin("", [studentID]);
+	if (groups.length === 0) return "";

-  const adminUserIds = [...new Set(groups.map((g) => g.admin))];
-  const adminUsersData = await getSpecificUsers(adminUserIds);
+	const adminUserIds = [...new Set(groups.map((g) => g.admin))];
+	const adminUsersData = await getSpecificUsers(adminUserIds);

-  if(adminUsersData.length === 0) return '';
-  const admins = adminUsersData.filter((x) => x.type === 'corporate');
+	if (adminUsersData.length === 0) return "";
+	const admins = adminUsersData.filter((x) => x.type === "corporate");

-  if(admins.length > 0) {
-	return (admins[0] as CorporateUser).corporateInformation.companyInformation.name;
-  }
+	if (admins.length > 0) {
+		return (admins[0] as CorporateUser).corporateInformation.companyInformation.name;
+	}

-  return '';
+	return "";
 };
--- a/src/utils/permissions.ts
+++ b/src/utils/permissions.ts
@@ -9,12 +9,10 @@ export function checkAccess(user: User, types: Type[], permissions?: PermissionT

 	// if(user.type === '') {
 	if (!user.type) {
-		console.warn("User type is empty");
 		return false;
 	}

 	if (types.length === 0) {
-		console.warn("No types provided");
 		return false;
 	}

--- a/src/utils/users.be.ts
+++ b/src/utils/users.be.ts
@@ -1,43 +1,55 @@
-import { app } from "@/firebase";
+import {app} from "@/firebase";

-import {
-  collection,
-  doc,
-  getDoc,
-  getDocs,
-  getFirestore,
-  query,
-  where,
-} from "firebase/firestore";
-import { User } from "@/interfaces/user";
+import {collection, doc, getDoc, getDocs, getFirestore, query, where} from "firebase/firestore";
+import {CorporateUser, Group, User} from "@/interfaces/user";
+import {getGroupsForUser} from "./groups.be";
+import {uniq, uniqBy} from "lodash";
+import {getUserCodes} from "./codes.be";
 const db = getFirestore(app);

 export async function getUsers() {
-  const snapshot = await getDocs(collection(db, "users"));
+	const snapshot = await getDocs(collection(db, "users"));

-  return snapshot.docs.map((doc) => ({
-    id: doc.id,
-    ...doc.data(),
-  })) as User[];
+	return snapshot.docs.map((doc) => ({
+		id: doc.id,
+		...doc.data(),
+	})) as User[];
 }

 export async function getUser(id: string) {
-  const userDoc = await getDoc(doc(db, "users", id));
+	const userDoc = await getDoc(doc(db, "users", id));

-  return { ...userDoc.data(), id } as User;
+	return {...userDoc.data(), id} as User;
 }

 export async function getSpecificUsers(ids: string[]) {
-  if (ids.length === 0) return [];
+	if (ids.length === 0) return [];

-  const snapshot = await getDocs(
-    query(collection(db, "users"), where("id", "in", ids))
-  );
+	const snapshot = await getDocs(query(collection(db, "users"), where("id", "in", ids)));

-  const groups = snapshot.docs.map((doc) => ({
-    id: doc.id,
-    ...doc.data(),
-  })) as User[];
+	const groups = snapshot.docs.map((doc) => ({
+		id: doc.id,
+		...doc.data(),
+	})) as User[];

-  return groups;
+	return groups;
+}
+
+export async function getUserBalance(user: User) {
+	const codes = await getUserCodes(user.id);
+	if (user.type !== "corporate" && user.type !== "mastercorporate") return codes.length;
+
+	const groups = await getGroupsForUser(user.id);
+	const participants = uniq(groups.flatMap((x) => x.participants));
+
+	if (user.type === "corporate") return participants.length + codes.length;
+
+	const participantUsers = await Promise.all(participants.map(getUser));
+	const corporateUsers = participantUsers.filter((x) => x.type === "corporate") as CorporateUser[];
+
+	return (
+		corporateUsers.reduce((acc, curr) => acc + curr.corporateInformation?.companyInformation?.userAmount || 0, 0) +
+		corporateUsers.length +
+		codes.length
+	);
 }