Solved an issue where, for developers, because of the amount of permissions, the cookie was too big, so I separated the permissions logic into a hook

src/components/High/TicketDisplay.tsx

@@ -1,11 +1,5 @@
 import useUsers from "@/hooks/useUsers";
-import {
-  Ticket,
-  TicketStatus,
-  TicketStatusLabel,
-  TicketType,
-  TicketTypeLabel,
-} from "@/interfaces/ticket";
+import {Ticket, TicketStatus, TicketStatusLabel, TicketType, TicketTypeLabel} from "@/interfaces/ticket";
 import {User} from "@/interfaces/user";
 import {USER_TYPE_LABELS} from "@/resources/user";
 import axios from "axios";
@@ -31,16 +25,13 @@ export default function TicketDisplay({ user, ticket, onClose }: Props) {
 	const [reporter] = useState(ticket.reporter);
 	const [reportedFrom] = useState(ticket.reportedFrom);
 	const [status, setStatus] = useState(ticket.status);
-  const [assignedTo, setAssignedTo] = useState<string | null>(
-    ticket.assignedTo || null,
-  );
+	const [assignedTo, setAssignedTo] = useState<string | null>(ticket.assignedTo || null);
 	const [isLoading, setIsLoading] = useState(false);
 
 	const {users} = useUsers();
 
 	const submit = () => {
-    if (!type)
-      return toast.error("Please choose a type!", { toastId: "missing-type" });
+		if (!type) return toast.error("Please choose a type!", {toastId: "missing-type"});
 
 		setIsLoading(true);
 		axios
@@ -87,37 +78,23 @@ export default function TicketDisplay({ user, ticket, onClose }: Props) {
 
 	return (
 		<form className="flex flex-col gap-4 pt-8">
-      <Input
-        label="Subject"
-        type="text"
-        name="subject"
-        placeholder="Subject..."
-        value={subject}
-        onChange={(e) => null}
-        disabled
-      />
+			<Input label="Subject" type="text" name="subject" placeholder="Subject..." value={subject} onChange={(e) => null} disabled />
 
 			<div className="-md:flex-col flex w-full items-center gap-4">
 				<div className="flex w-full flex-col gap-3">
-          <label className="text-mti-gray-dim text-base font-normal">
-            Status
-          </label>
+					<label className="text-mti-gray-dim text-base font-normal">Status</label>
 					<Select
 						options={Object.keys(TicketStatusLabel).map((x) => ({
 							value: x,
 							label: TicketStatusLabel[x as keyof typeof TicketStatusLabel],
 						}))}
 						value={{value: status, label: TicketStatusLabel[status]}}
-            onChange={(value) =>
-              setStatus((value?.value as TicketStatus) ?? undefined)
-            }
+						onChange={(value) => setStatus((value?.value as TicketStatus) ?? undefined)}
 						placeholder="Status..."
 					/>
 				</div>
 				<div className="flex w-full flex-col gap-3">
-          <label className="text-mti-gray-dim text-base font-normal">
-            Type
-          </label>
+					<label className="text-mti-gray-dim text-base font-normal">Type</label>
 					<Select
 						options={Object.keys(TicketTypeLabel).map((x) => ({
 							value: x,
@@ -131,9 +108,7 @@ export default function TicketDisplay({ user, ticket, onClose }: Props) {
 			</div>
 
 			<div className="flex w-full flex-col gap-3">
-        <label className="text-mti-gray-dim text-base font-normal">
-          Assignee
-        </label>
+				<label className="text-mti-gray-dim text-base font-normal">Assignee</label>
 				<Select
 					options={[
 						{value: "me", label: "Assign to me"},
@@ -153,52 +128,20 @@ export default function TicketDisplay({ user, ticket, onClose }: Props) {
 							  }
 							: null
 					}
-          onChange={(value) =>
-            value
-              ? setAssignedTo(value.value === "me" ? user.id : value.value)
-              : setAssignedTo(null)
-          }
+					onChange={(value) => (value ? setAssignedTo(value.value === "me" ? user.id : value.value) : setAssignedTo(null))}
 					placeholder="Assignee..."
 					isClearable
 				/>
 			</div>
 
 			<div className="-md:flex-col flex w-full items-center gap-4">
-        <Input
-          label="Reported From"
-          type="text"
-          name="reportedFrom"
-          onChange={() => null}
-          value={reportedFrom}
-          disabled
-        />
-        <Input
-          label="Date"
-          type="text"
-          name="date"
-          onChange={() => null}
-          value={moment(ticket.date).format("DD/MM/YYYY - HH:mm")}
-          disabled
-        />
+				<Input label="Reported From" type="text" name="reportedFrom" onChange={() => null} value={reportedFrom} disabled />
+				<Input label="Date" type="text" name="date" onChange={() => null} value={moment(ticket.date).format("DD/MM/YYYY - HH:mm")} disabled />
 			</div>
 
 			<div className="-md:flex-col flex w-full items-center gap-4">
-        <Input
-          label="Reporter's Name"
-          type="text"
-          name="reporter"
-          onChange={() => null}
-          value={reporter.name}
-          disabled
-        />
-        <Input
-          label="Reporter's E-mail"
-          type="text"
-          name="reporter"
-          onChange={() => null}
-          value={reporter.email}
-          disabled
-        />
+				<Input label="Reporter's Name" type="text" name="reporter" onChange={() => null} value={reporter.name} disabled />
+				<Input label="Reporter's E-mail" type="text" name="reporter" onChange={() => null} value={reporter.email} disabled />
 				<Input
 					label="Reporter's Type"
 					type="text"
@@ -218,34 +161,15 @@ export default function TicketDisplay({ user, ticket, onClose }: Props) {
 			/>
 
 			<div className="-md:flex-col-reverse mt-2 flex w-full items-center justify-between gap-4">
-        <Button
-          type="button"
-          color="red"
-          className="w-full md:max-w-[200px]"
-          variant="outline"
-          onClick={del}
-          isLoading={isLoading}
-        >
+				<Button type="button" color="red" className="w-full md:max-w-[200px]" variant="outline" onClick={del} isLoading={isLoading}>
 					Delete
 				</Button>
 
 				<div className="-md:flex-col-reverse flex w-full items-center justify-end gap-4">
-          <Button
-            type="button"
-            color="red"
-            className="w-full md:max-w-[200px]"
-            variant="outline"
-            onClick={onClose}
-            isLoading={isLoading}
-          >
+					<Button type="button" color="red" className="w-full md:max-w-[200px]" variant="outline" onClick={onClose} isLoading={isLoading}>
 						Cancel
 					</Button>
-          <Button
-            type="button"
-            className="w-full md:max-w-[200px]"
-            isLoading={isLoading}
-            onClick={submit}
-          >
+					<Button type="button" className="w-full md:max-w-[200px]" isLoading={isLoading} onClick={submit}>
 						Update
 					</Button>
 				</div>

src/components/Sidebar.tsx

@@ -28,6 +28,7 @@ import usePreferencesStore from "@/stores/preferencesStore";
 import {User} from "@/interfaces/user";
 import useTicketsListener from "@/hooks/useTicketsListener";
 import {checkAccess, getTypesOfUser} from "@/utils/permissions";
+import usePermissions from "@/hooks/usePermissions";
 interface Props {
 	path: string;
 	navDisabled?: boolean;
@@ -80,6 +81,7 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 	const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [state.isSidebarMinimized, state.toggleSidebarMinimized]);
 
 	const {totalAssignedTickets} = useTicketsListener(user.id);
+	const {permissions} = usePermissions(user.id);
 
 	const logout = async () => {
 		axios.post("/api/logout").finally(() => {
@@ -98,22 +100,22 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 			)}>
 			<div className="-xl:hidden flex-col gap-3 xl:flex">
 				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={isMinimized} />
-				{checkAccess(user, ["student", "teacher", "developer"], "viewExams") && (
+				{checkAccess(user, ["student", "teacher", "developer"], permissions, "viewExams") && (
 					<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized={isMinimized} />
 				)}
-				{checkAccess(user, ["student", "teacher", "developer"], "viewExercises") && (
+				{checkAccess(user, ["student", "teacher", "developer"], permissions, "viewExercises") && (
 					<Nav disabled={disableNavigation} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" isMinimized={isMinimized} />
 				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), "viewStats") && (
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewStats") && (
 					<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
 				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), "viewRecords") && (
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
 					<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />
 				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), "viewRecords") && (
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
 					<Nav disabled={disableNavigation} Icon={CiDumbbell} label="Training" path={path} keyPath="/training" isMinimized={isMinimized} />
 				)}
-				{checkAccess(user, ["admin", "developer", "agent", "corporate", "mastercorporate"], "viewPaymentRecords") && (
+				{checkAccess(user, ["admin", "developer", "agent", "corporate", "mastercorporate"], permissions, "viewPaymentRecords") && (
 					<Nav
 						disabled={disableNavigation}
 						Icon={BsCurrencyDollar}
@@ -133,7 +135,7 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 						isMinimized={isMinimized}
 					/>
 				)}
-				{checkAccess(user, ["admin", "developer", "agent"], "viewTickets") && (
+				{checkAccess(user, ["admin", "developer", "agent"], permissions, "viewTickets") && (
 					<Nav
 						disabled={disableNavigation}
 						Icon={BsClipboardData}
@@ -169,13 +171,13 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={true} />
 				<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized={true} />
 				<Nav disabled={disableNavigation} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" isMinimized={true} />
-				{checkAccess(user, getTypesOfUser(["agent"]), "viewStats") && (
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewStats") && (
 					<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={true} />
 				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), "viewRecords") && (
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
 					<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={true} />
 				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), "viewRecords") && (
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
 					<Nav disabled={disableNavigation} Icon={CiDumbbell} label="Training" path={path} keyPath="/training" isMinimized={true} />
 				)}
 				{checkAccess(user, getTypesOfUser(["student"])) && (

src/components/UserCard.tsx

@@ -1,11 +1,5 @@
 import useStats from "@/hooks/useStats";
-import {
-  CorporateInformation,
-  CorporateUser,
-  EMPLOYMENT_STATUS,
-  User,
-  Type,
-} from "@/interfaces/user";
+import {CorporateInformation, CorporateUser, EMPLOYMENT_STATUS, User, Type} from "@/interfaces/user";
 import {groupBySession, averageScore} from "@/utils/stats";
 import {RadioGroup} from "@headlessui/react";
 import axios from "axios";
@@ -14,13 +8,7 @@ import moment from "moment";
 import {Divider} from "primereact/divider";
 import {useEffect, useState} from "react";
 import ReactDatePicker from "react-datepicker";
-import {
-  BsFileEarmarkText,
-  BsPencil,
-  BsPerson,
-  BsPersonAdd,
-  BsStar,
-} from "react-icons/bs";
+import {BsFileEarmarkText, BsPencil, BsPerson, BsPersonAdd, BsStar} from "react-icons/bs";
 import {toast} from "react-toastify";
 import Button from "./Low/Button";
 import Checkbox from "./Low/Checkbox";
@@ -35,17 +23,15 @@ import useCodes from "@/hooks/useCodes";
 import {checkAccess, getTypesOfUser} from "@/utils/permissions";
 import {PERMISSIONS} from "@/constants/userPermissions";
 import {PermissionType} from "@/interfaces/permissions";
+import usePermissions from "@/hooks/usePermissions";
 
 const expirationDateColor = (date: Date) => {
 	const momentDate = moment(date);
 	const today = moment(new Date());
 
-  if (today.add(1, "days").isAfter(momentDate))
-    return "!bg-mti-red-ultralight border-mti-red-light";
-  if (today.add(3, "days").isAfter(momentDate))
-    return "!bg-mti-rose-ultralight border-mti-rose-light";
-  if (today.add(7, "days").isAfter(momentDate))
-    return "!bg-mti-orange-ultralight border-mti-orange-light";
+	if (today.add(1, "days").isAfter(momentDate)) return "!bg-mti-red-ultralight border-mti-red-light";
+	if (today.add(3, "days").isAfter(momentDate)) return "!bg-mti-rose-ultralight border-mti-rose-light";
+	if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
 };
 
 interface Props {
@@ -86,81 +72,35 @@ const CURRENCIES_OPTIONS = CURRENCIES.map(({ label, currency }) => ({
 	label,
 }));
 
-const UserCard = ({
-  user,
-  loggedInUser,
-  onClose,
-  onViewStudents,
-  onViewTeachers,
-  onViewCorporate,
-  disabled = false,
-  disabledFields = {},
-}: Props) => {
-  const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(
-    user.subscriptionExpirationDate
-  );
+const UserCard = ({user, loggedInUser, 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.demographicInformation?.position : undefined);
+	const [passport_id, setPassportID] = useState<string | undefined>(user.type === "student" ? user.demographicInformation?.passport_id : undefined);
 
-  const [referralAgent, setReferralAgent] = useState(
-    user.type === "corporate"
-      ? user.corporateInformation?.referralAgent
-      : undefined
-  );
+	const [referralAgent, setReferralAgent] = useState(user.type === "corporate" ? user.corporateInformation?.referralAgent : undefined);
 	const [companyName, setCompanyName] = useState(
 		user.type === "corporate"
 			? user.corporateInformation?.companyInformation.name
 			: user.type === "agent"
 			? user.agentInformation?.companyName
-      : undefined
-  );
-  const [arabName, setArabName] = useState(
-    user.type === "agent" ? user.agentInformation?.companyArabName : undefined
+			: undefined,
 	);
+	const [arabName, setArabName] = useState(user.type === "agent" ? user.agentInformation?.companyArabName : undefined);
 	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
+		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 {stats} = useStats(user.id);
 	const {users} = useUsers();
 	const {codes} = useCodes(user.id);
+	const {permissions} = usePermissions(loggedInUser.id);
 
 	useEffect(() => {
 		if (users && users.length > 0) {
@@ -176,11 +116,8 @@ const UserCard = ({
 
 	const updateUser = () => {
 		if (user.type === "corporate" && (!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;
+			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;
 
 		axios
 			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
@@ -208,9 +145,7 @@ const UserCard = ({
 								payment: {
 									value: paymentValue,
 									currency: paymentCurrency,
-                  ...(referralAgent === ""
-                    ? {}
-                    : { commission: commissionValue }),
+									...(referralAgent === "" ? {} : {commission: commissionValue}),
 								},
 						  }
 						: undefined,
@@ -226,9 +161,7 @@ const UserCard = ({
 
 	const generalProfileItems = [
 		{
-      icon: (
-        <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
-      ),
+			icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
 			value: Object.keys(groupBySession(stats)).length,
 			label: "Exams",
 		},
@@ -248,16 +181,12 @@ const UserCard = ({
 		user.type === "corporate"
 			? [
 					{
-            icon: (
-              <BsPerson className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
-            ),
+						icon: <BsPerson className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
 						value: codes.length,
 						label: "Users Used",
 					},
 					{
-            icon: (
-              <BsPersonAdd className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
-            ),
+						icon: <BsPersonAdd className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
 						value: user.corporateInformation.companyInformation.userAmount,
 						label: "Number of Users",
 					},
@@ -270,14 +199,7 @@ const UserCard = ({
 	};
 	return (
 		<>
-      <ProfileSummary
-        user={user}
-        items={
-          user.type === "corporate"
-            ? corporateProfileItems
-            : generalProfileItems
-        }
-      />
+			<ProfileSummary user={user} items={user.type === "corporate" ? corporateProfileItems : generalProfileItems} />
 
 			{user.type === "agent" && (
 				<>
@@ -347,9 +269,7 @@ const UserCard = ({
 							disabled={disabled}
 						/>
 						<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>
+							<label className="font-normal text-base text-mti-gray-dim">Pricing</label>
 							<div className="w-full grid grid-cols-6 gap-2">
 								<Input
 									name="paymentValue"
@@ -362,13 +282,10 @@ const UserCard = ({
 								<Select
 									className={clsx(
 										"px-4 py-4 col-span-3 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
-                    disabled &&
-                      "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed"
+										disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
 									)}
 									options={CURRENCIES_OPTIONS}
-                  value={CURRENCIES_OPTIONS.find(
-                    (c) => c.value === paymentCurrency
-                  )}
+									value={CURRENCIES_OPTIONS.find((c) => c.value === paymentCurrency)}
 									onChange={(value) => setPaymentCurrency(value?.value)}
 									menuPortalTarget={document?.body}
 									styles={{
@@ -384,11 +301,7 @@ const UserCard = ({
 										}),
 										option: (styles, state) => ({
 											...styles,
-                      backgroundColor: state.isFocused
-                        ? "#D5D9F0"
-                        : state.isSelected
-                        ? "#7872BF"
-                        : "white",
+											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
 											color: state.isFocused ? "black" : styles.color,
 										}),
 									}}
@@ -399,19 +312,13 @@ const UserCard = ({
 					</div>
 					<div className="flex gap-3 w-full">
 						<div className="flex flex-col gap-3 w-8/12">
-              <label className="font-normal text-base text-mti-gray-dim">
-                Country Manager
-              </label>
+							<label className="font-normal text-base text-mti-gray-dim">Country Manager</label>
 							{referralAgentLabel && (
 								<Select
 									className={clsx(
 										"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
-                    (checkAccess(
-                      loggedInUser,
-                      getTypesOfUser(["developer", "admin"])
-                    ) ||
-                      disabledFields.countryManager) &&
-                      "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed"
+										(checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"])) || disabledFields.countryManager) &&
+											"!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
 									)}
 									options={[
 										{value: "", label: "No referral"},
@@ -441,30 +348,19 @@ const UserCard = ({
 										}),
 										option: (styles, state) => ({
 											...styles,
-                      backgroundColor: state.isFocused
-                        ? "#D5D9F0"
-                        : state.isSelected
-                        ? "#7872BF"
-                        : "white",
+											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
 											color: state.isFocused ? "black" : styles.color,
 										}),
 									}}
 									// editing country manager should only be available for dev/admin
-                  isDisabled={
-                    checkAccess(
-                      loggedInUser,
-                      getTypesOfUser(["developer", "admin"])
-                    ) || disabledFields.countryManager
-                  }
+									isDisabled={checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"])) || disabledFields.countryManager}
 								/>
 							)}
 						</div>
 						<div className="flex flex-col gap-3 w-4/12">
 							{referralAgent !== "" && loggedInUser.type !== "corporate" ? (
 								<>
-                  <label className="font-normal text-base text-mti-gray-dim">
-                    Commission
-                  </label>
+									<label className="font-normal text-base text-mti-gray-dim">Commission</label>
 									<Input
 										name="commissionValue"
 										onChange={(e) => setCommission(e ? parseInt(e) : undefined)}
@@ -506,13 +402,8 @@ const UserCard = ({
 
 				<div className="flex flex-col md:flex-row gap-8 w-full">
 					<div className="flex flex-col gap-3 w-full">
-            <label className="font-normal text-base text-mti-gray-dim">
-              Country
-            </label>
-            <CountrySelect
-              disabled
-              value={user.demographicInformation?.country}
-            />
+						<label className="font-normal text-base text-mti-gray-dim">Country</label>
+						<CountrySelect disabled value={user.demographicInformation?.country} />
 					</div>
 					<Input
 						type="tel"
@@ -532,11 +423,7 @@ const UserCard = ({
 						label="Passport/National ID"
 						onChange={() => null}
 						placeholder="Enter National ID or Passport number"
-            value={
-              user.type === "student"
-                ? user.demographicInformation?.passport_id
-                : undefined
-            }
+						value={user.type === "student" ? user.demographicInformation?.passport_id : undefined}
 						disabled
 						required
 					/>
@@ -545,14 +432,11 @@ const UserCard = ({
 				<div className="flex flex-col md:flex-row gap-8 w-full">
 					{user.type !== "corporate" && user.type !== "mastercorporate" && (
 						<div className="relative flex flex-col gap-3 w-full">
-              <label className="font-normal text-base text-mti-gray-dim">
-                Employment Status
-              </label>
+							<label className="font-normal text-base text-mti-gray-dim">Employment Status</label>
 							<RadioGroup
 								value={user.demographicInformation?.employment}
 								className="grid grid-cols-2 items-center gap-4 place-items-center"
-                disabled={disabled}
-              >
+								disabled={disabled}>
 								{EMPLOYMENT_STATUS.map(({status, label}) => (
 									<RadioGroup.Option value={status} key={status}>
 										{({checked}) => (
@@ -562,9 +446,8 @@ const UserCard = ({
 													"transition duration-300 ease-in-out",
 													!checked
 														? "bg-white border-mti-gray-platinum"
-                            : "bg-mti-purple-light border-mti-purple-dark text-white"
-                        )}
-                      >
+														: "bg-mti-purple-light border-mti-purple-dark text-white",
+												)}>
 												{label}
 											</span>
 										)}
@@ -587,14 +470,11 @@ const UserCard = ({
 					)}
 					<div className="flex flex-col gap-8 w-full">
 						<div className="relative flex flex-col gap-3 w-full">
-              <label className="font-normal text-base text-mti-gray-dim">
-                Gender
-              </label>
+							<label className="font-normal text-base text-mti-gray-dim">Gender</label>
 							<RadioGroup
 								value={user.demographicInformation?.gender}
 								className="flex flex-row gap-4 justify-between"
-                disabled={disabled}
-              >
+								disabled={disabled}>
 								<RadioGroup.Option value="male">
 									{({checked}) => (
 										<span
@@ -603,9 +483,8 @@ const UserCard = ({
 												"transition duration-300 ease-in-out",
 												!checked
 													? "bg-white border-mti-gray-platinum"
-                          : "bg-mti-purple-light border-mti-purple-dark text-white"
-                      )}
-                    >
+													: "bg-mti-purple-light border-mti-purple-dark text-white",
+											)}>
 											Male
 										</span>
 									)}
@@ -618,9 +497,8 @@ const UserCard = ({
 												"transition duration-300 ease-in-out",
 												!checked
 													? "bg-white border-mti-gray-platinum"
-                          : "bg-mti-purple-light border-mti-purple-dark text-white"
-                      )}
-                    >
+													: "bg-mti-purple-light border-mti-purple-dark text-white",
+											)}>
 											Female
 										</span>
 									)}
@@ -633,9 +511,8 @@ const UserCard = ({
 												"transition duration-300 ease-in-out",
 												!checked
 													? "bg-white border-mti-gray-platinum"
-                          : "bg-mti-purple-light border-mti-purple-dark text-white"
-                      )}
-                    >
+													: "bg-mti-purple-light border-mti-purple-dark text-white",
+											)}>
 											Other
 										</span>
 									)}
@@ -644,20 +521,11 @@ const UserCard = ({
 						</div>
 						<div className="flex flex-col gap-3">
 							<div className="flex justify-between items-center">
-                <label className="font-normal text-base text-mti-gray-dim">
-                  Expiry Date
-                </label>
+								<label className="font-normal text-base text-mti-gray-dim">Expiry Date</label>
 								<Checkbox
 									isChecked={!!expiryDate}
-                  onChange={(checked) =>
-                    setExpiryDate(
-                      checked
-                        ? user.subscriptionExpirationDate || new Date()
-                        : null
-                    )
-                  }
-                  disabled={disabled}
-                >
+									onChange={(checked) => setExpiryDate(checked ? user.subscriptionExpirationDate || new Date() : null)}
+									disabled={disabled}>
 									Enabled
 								</Checkbox>
 							</div>
@@ -666,12 +534,9 @@ const UserCard = ({
 									className={clsx(
 										"p-6 w-full flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
 										"transition duration-300 ease-in-out",
-                    !expiryDate
-                      ? "!bg-mti-green-ultralight !border-mti-green-light"
-                      : expirationDateColor(expiryDate),
-                    "bg-white border-mti-gray-platinum"
-                  )}
-                >
+										!expiryDate ? "!bg-mti-green-ultralight !border-mti-green-light" : expirationDateColor(expiryDate),
+										"bg-white border-mti-gray-platinum",
+									)}>
 									{!expiryDate && "Unlimited"}
 									{expiryDate && moment(expiryDate).format("DD/MM/YYYY")}
 								</div>
@@ -682,14 +547,12 @@ const UserCard = ({
 										"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
 										"hover:border-mti-purple tooltip",
 										expirationDateColor(expiryDate),
-                    "transition duration-300 ease-in-out"
+										"transition duration-300 ease-in-out",
 									)}
 									filterDate={(date) =>
 										moment(date).isAfter(new Date()) &&
 										(loggedInUser.subscriptionExpirationDate
-                      ? moment(date).isBefore(
-                          moment(loggedInUser.subscriptionExpirationDate)
-                        )
+											? moment(date).isBefore(moment(loggedInUser.subscriptionExpirationDate))
 											: true)
 									}
 									dateFormat="dd/MM/yyyy"
@@ -706,17 +569,13 @@ const UserCard = ({
 						<Divider className="w-full !m-0" />
 						<div className="flex flex-col md:flex-row gap-8 w-full">
 							<div className="flex flex-col gap-3 w-full">
-                <label className="font-normal text-base text-mti-gray-dim">
-                  Status
-                </label>
+								<label className="font-normal text-base text-mti-gray-dim">Status</label>
 								<Select
 									className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
 									options={USER_STATUS_OPTIONS}
 									menuPortalTarget={document?.body}
 									value={USER_STATUS_OPTIONS.find((o) => o.value === status)}
-                  onChange={(value) =>
-                    setStatus(value?.value as typeof user.status)
-                  }
+									onChange={(value) => setStatus(value?.value as typeof user.status)}
 									styles={{
 										control: (styles) => ({
 											...styles,
@@ -730,11 +589,7 @@ const UserCard = ({
 										menuPortal: (base) => ({...base, zIndex: 9999}),
 										option: (styles, state) => ({
 											...styles,
-                      backgroundColor: state.isFocused
-                        ? "#D5D9F0"
-                        : state.isSelected
-                        ? "#7872BF"
-                        : "white",
+											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
 											color: state.isFocused ? "black" : styles.color,
 										}),
 									}}
@@ -742,17 +597,13 @@ const UserCard = ({
 								/>
 							</div>
 							<div className="flex flex-col gap-3 w-full">
-                <label className="font-normal text-base text-mti-gray-dim">
-                  Type
-                </label>
+								<label className="font-normal text-base text-mti-gray-dim">Type</label>
 								<Select
 									className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
 									options={USER_TYPE_OPTIONS}
 									menuPortalTarget={document?.body}
 									value={USER_TYPE_OPTIONS.find((o) => o.value === type)}
-                  onChange={(value) =>
-                    setType(value?.value as typeof user.type)
-                  }
+									onChange={(value) => setType(value?.value as typeof user.type)}
 									styles={{
 										control: (styles) => ({
 											...styles,
@@ -766,11 +617,7 @@ const UserCard = ({
 										menuPortal: (base) => ({...base, zIndex: 9999}),
 										option: (styles, state) => ({
 											...styles,
-                      backgroundColor: state.isFocused
-                        ? "#D5D9F0"
-                        : state.isSelected
-                        ? "#7872BF"
-                        : "white",
+											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
 											color: state.isFocused ? "black" : styles.color,
 										}),
 									}}
@@ -785,56 +632,29 @@ const UserCard = ({
 			<div className="flex gap-4 justify-between mt-4 w-full">
 				<div className="self-start flex gap-4 justify-start items-center w-full">
 					{onViewCorporate && ["student", "teacher"].includes(user.type) && (
-            <Button
-              className="w-full max-w-[200px]"
-              variant="outline"
-              color="rose"
-              onClick={onViewCorporate}
-            >
+						<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewCorporate}>
 							View Corporate
 						</Button>
 					)}
 					{onViewStudents && ["corporate", "teacher"].includes(user.type) && (
-            <Button
-              className="w-full max-w-[200px]"
-              variant="outline"
-              color="rose"
-              onClick={onViewStudents}
-            >
+						<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewStudents}>
 							View Students
 						</Button>
 					)}
 					{onViewTeachers && ["student", "corporate"].includes(user.type) && (
-            <Button
-              className="w-full max-w-[200px]"
-              variant="outline"
-              color="rose"
-              onClick={onViewTeachers}
-            >
+						<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewTeachers}>
 							View Teachers
 						</Button>
 					)}
 				</div>
 				<div className="self-end flex gap-4 w-full justify-end">
-          <Button
-            className="w-full max-w-[200px]"
-            variant="outline"
-            onClick={onClose}
-          >
+					<Button className="w-full max-w-[200px]" variant="outline" onClick={onClose}>
 						Close
 					</Button>
 					<Button
-            disabled={
-              disabled ||
-              !checkAccess(
-                loggedInUser,
-                updateUserPermission.list,
-                updateUserPermission.perm
-              )
-            }
+						disabled={disabled || !checkAccess(loggedInUser, updateUserPermission.list, permissions, updateUserPermission.perm)}
 						onClick={updateUser}
-            className="w-full max-w-[200px]"
-          >
+						className="w-full max-w-[200px]">
 						Update
 					</Button>
 				</div>

src/dashboards/Teacher.tsx

@@ -47,6 +47,7 @@ import AssignmentCreator from "./AssignmentCreator";
 import AssignmentView from "./AssignmentView";
 import {getUserCorporate} from "@/utils/groups";
 import {checkAccess} from "@/utils/permissions";
+import usePermissions from "@/hooks/usePermissions";
 
 interface Props {
 	user: User;
@@ -58,17 +59,13 @@ export default function TeacherDashboard({ user }: Props) {
 	const [showModal, setShowModal] = useState(false);
 	const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
 	const [isCreatingAssignment, setIsCreatingAssignment] = useState(false);
-  const [corporateUserToShow, setCorporateUserToShow] =
-    useState<CorporateUser>();
+	const [corporateUserToShow, setCorporateUserToShow] = useState<CorporateUser>();
 
 	const {stats} = useStats();
 	const {users, reload} = useUsers();
 	const {groups} = useGroups(user.id);
-  const {
-    assignments,
-    isLoading: isAssignmentsLoading,
-    reload: reloadAssignments,
-  } = useAssignments({ assigner: user.id });
+	const {permissions} = usePermissions(user.id);
+	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({assigner: user.id});
 
 	useEffect(() => {
 		setShowModal(!!selectedUser && page === "");
@@ -78,23 +75,15 @@ export default function TeacherDashboard({ user }: Props) {
 		getUserCorporate(user.id).then(setCorporateUserToShow);
 	}, [user]);
 
-  const studentFilter = (user: User) =>
-    user.type === "student" &&
-    groups.flatMap((g) => g.participants).includes(user.id);
+	const studentFilter = (user: User) => user.type === "student" && groups.flatMap((g) => g.participants).includes(user.id);
 
-  const getStatsByStudent = (user: User) =>
-    stats.filter((s) => s.user === user.id);
+	const getStatsByStudent = (user: User) => stats.filter((s) => s.user === user.id);
 
 	const UserDisplay = (displayUser: User) => (
 		<div
 			onClick={() => setSelectedUser(displayUser)}
-      className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300"
-    >
-      <img
-        src={displayUser.profilePicture}
-        alt={displayUser.name}
-        className="rounded-full w-10 h-10"
-      />
+			className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300">
+			<img src={displayUser.profilePicture} alt={displayUser.name} className="rounded-full w-10 h-10" />
 			<div className="flex flex-col gap-1 items-start">
 				<span>{displayUser.name}</span>
 				<span className="text-sm opacity-75">{displayUser.email}</span>
@@ -120,8 +109,7 @@ export default function TeacherDashboard({ user }: Props) {
 					<div className="flex flex-col gap-4">
 						<div
 							onClick={() => setPage("")}
-              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
-            >
+							className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
 							<BsArrowLeft className="text-xl" />
 							<span>Back</span>
 						</div>
@@ -133,22 +121,18 @@ export default function TeacherDashboard({ user }: Props) {
 	};
 
 	const GroupsList = () => {
-    const filter = (x: Group) =>
-      x.admin === user.id || x.participants.includes(user.id);
+		const filter = (x: Group) => x.admin === user.id || x.participants.includes(user.id);
 
 		return (
 			<>
 				<div className="flex flex-col gap-4">
 					<div
 						onClick={() => setPage("")}
-            className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
-          >
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
 						<BsArrowLeft className="text-xl" />
 						<span>Back</span>
 					</div>
-          <h2 className="text-2xl font-semibold">
-            Groups ({groups.filter(filter).length})
-          </h2>
+					<h2 className="text-2xl font-semibold">Groups ({groups.filter(filter).length})</h2>
 				</div>
 
 				<GroupList user={user} />
@@ -166,12 +150,7 @@ export default function TeacherDashboard({ user }: Props) {
 			.filter((f) => !!f.focus);
 		const bandScores = formattedStats.map((s) => ({
 			module: s.module,
-      level: calculateBandScore(
-        s.score.correct,
-        s.score.total,
-        s.module,
-        s.focus!
-      ),
+			level: calculateBandScore(s.score.correct, s.score.total, s.module, s.focus!),
 		}));
 
 		const levels: {[key in Module]: number} = {
@@ -188,16 +167,10 @@ export default function TeacherDashboard({ user }: Props) {
 
 	const AssignmentsPage = () => {
 		const activeFilter = (a: Assignment) =>
-      moment(a.endDate).isAfter(moment()) &&
-      moment(a.startDate).isBefore(moment()) &&
-      a.assignees.length > a.results.length;
-    const pastFilter = (a: Assignment) =>
-      (moment(a.endDate).isBefore(moment()) ||
-        a.assignees.length === a.results.length) &&
-      !a.archived;
+			moment(a.endDate).isAfter(moment()) && moment(a.startDate).isBefore(moment()) && a.assignees.length > a.results.length;
+		const pastFilter = (a: Assignment) => (moment(a.endDate).isBefore(moment()) || a.assignees.length === a.results.length) && !a.archived;
 		const archivedFilter = (a: Assignment) => a.archived;
-    const futureFilter = (a: Assignment) =>
-      moment(a.startDate).isAfter(moment());
+		const futureFilter = (a: Assignment) => moment(a.startDate).isAfter(moment());
 
 		return (
 			<>
@@ -212,9 +185,7 @@ export default function TeacherDashboard({ user }: Props) {
 				/>
 				<AssignmentCreator
 					assignment={selectedAssignment}
-          groups={groups.filter(
-            (x) => x.admin === user.id || x.participants.includes(user.id)
-          )}
+					groups={groups.filter((x) => x.admin === user.id || x.participants.includes(user.id))}
 					users={users.filter(
 						(x) =>
 							x.type === "student" &&
@@ -223,7 +194,7 @@ export default function TeacherDashboard({ user }: Props) {
 										.filter((g) => g.admin === selectedUser.id)
 										.flatMap((g) => g.participants)
 										.includes(x.id) || false
-                : groups.flatMap((g) => g.participants).includes(x.id))
+								: groups.flatMap((g) => g.participants).includes(x.id)),
 					)}
 					assigner={user.id}
 					isCreating={isCreatingAssignment}
@@ -236,47 +207,31 @@ export default function TeacherDashboard({ user }: Props) {
 				<div className="w-full flex justify-between items-center">
 					<div
 						onClick={() => setPage("")}
-            className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
-          >
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
 						<BsArrowLeft className="text-xl" />
 						<span>Back</span>
 					</div>
 					<div
 						onClick={reloadAssignments}
-            className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
-          >
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
 						<span>Reload</span>
-            <BsArrowRepeat
-              className={clsx(
-                "text-xl",
-                isAssignmentsLoading && "animate-spin"
-              )}
-            />
+						<BsArrowRepeat className={clsx("text-xl", isAssignmentsLoading && "animate-spin")} />
 					</div>
 				</div>
 				<section className="flex flex-col gap-4">
-          <h2 className="text-2xl font-semibold">
-            Active Assignments ({assignments.filter(activeFilter).length})
-          </h2>
+					<h2 className="text-2xl font-semibold">Active Assignments ({assignments.filter(activeFilter).length})</h2>
 					<div className="flex flex-wrap gap-2">
 						{assignments.filter(activeFilter).map((a) => (
-              <AssignmentCard
-                {...a}
-                onClick={() => setSelectedAssignment(a)}
-                key={a.id}
-              />
+							<AssignmentCard {...a} onClick={() => setSelectedAssignment(a)} key={a.id} />
 						))}
 					</div>
 				</section>
 				<section className="flex flex-col gap-4">
-          <h2 className="text-2xl font-semibold">
-            Planned Assignments ({assignments.filter(futureFilter).length})
-          </h2>
+					<h2 className="text-2xl font-semibold">Planned Assignments ({assignments.filter(futureFilter).length})</h2>
 					<div className="flex flex-wrap gap-2">
 						<div
 							onClick={() => setIsCreatingAssignment(true)}
-              className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300"
-            >
+							className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300">
 							<BsPlus className="text-6xl" />
 							<span className="text-lg">New Assignment</span>
 						</div>
@@ -293,9 +248,7 @@ export default function TeacherDashboard({ user }: Props) {
 					</div>
 				</section>
 				<section className="flex flex-col gap-4">
-          <h2 className="text-2xl font-semibold">
-            Past Assignments ({assignments.filter(pastFilter).length})
-          </h2>
+					<h2 className="text-2xl font-semibold">Past Assignments ({assignments.filter(pastFilter).length})</h2>
 					<div className="flex flex-wrap gap-2">
 						{assignments.filter(pastFilter).map((a) => (
 							<AssignmentCard
@@ -310,9 +263,7 @@ export default function TeacherDashboard({ user }: Props) {
 					</div>
 				</section>
 				<section className="flex flex-col gap-4">
-          <h2 className="text-2xl font-semibold">
-            Archived Assignments ({assignments.filter(archivedFilter).length})
-          </h2>
+					<h2 className="text-2xl font-semibold">Archived Assignments ({assignments.filter(archivedFilter).length})</h2>
 					<div className="flex flex-wrap gap-2">
 						{assignments.filter(archivedFilter).map((a) => (
 							<AssignmentCard
@@ -334,19 +285,14 @@ export default function TeacherDashboard({ user }: Props) {
 		<>
 			{corporateUserToShow && (
 				<div className="absolute top-4 right-4 bg-neutral-200 px-2 rounded-lg py-1">
-          Linked to:{" "}
-          <b>
-            {corporateUserToShow?.corporateInformation?.companyInformation
-              .name || corporateUserToShow.name}
-          </b>
+					Linked to: <b>{corporateUserToShow?.corporateInformation?.companyInformation.name || corporateUserToShow.name}</b>
 				</div>
 			)}
 			<section
 				className={clsx(
 					"flex -lg:flex-wrap gap-4 items-center -lg:justify-center lg:justify-start text-center",
-          !!corporateUserToShow && "mt-12 xl:mt-6"
-        )}
-      >
+					!!corporateUserToShow && "mt-12 xl:mt-6",
+				)}>
 				<IconCard
 					onClick={() => setPage("students")}
 					Icon={BsPersonFill}
@@ -357,42 +303,25 @@ export default function TeacherDashboard({ user }: Props) {
 				<IconCard
 					Icon={BsClipboard2Data}
 					label="Exams Performed"
-          value={
-            stats.filter((s) =>
-              groups.flatMap((g) => g.participants).includes(s.user)
-            ).length
-          }
+					value={stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user)).length}
 					color="purple"
 				/>
 				<IconCard
 					Icon={BsPaperclip}
 					label="Average Level"
-          value={averageLevelCalculator(
-            stats.filter((s) =>
-              groups.flatMap((g) => g.participants).includes(s.user)
-            )
-          ).toFixed(1)}
+					value={averageLevelCalculator(stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user))).toFixed(1)}
 					color="purple"
 				/>
-        {checkAccess(user, ["teacher", "developer"], "viewGroup") && (
-          <IconCard
-            Icon={BsPeople}
-            label="Groups"
-            value={groups.length}
-            color="purple"
-            onClick={() => setPage("groups")}
-          />
+				{checkAccess(user, ["teacher", "developer"], permissions, "viewGroup") && (
+					<IconCard Icon={BsPeople} label="Groups" value={groups.length} color="purple" onClick={() => setPage("groups")} />
 				)}
 				<div
 					onClick={() => setPage("assignments")}
-          className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-96 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300"
-        >
+					className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-96 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
 					<BsEnvelopePaper className="text-6xl text-mti-purple-light" />
 					<span className="flex flex-col gap-1 items-center text-xl">
 						<span className="text-lg">Assignments</span>
-            <span className="font-semibold text-mti-purple-light">
-              {assignments.filter((a) => !a.archived).length}
-            </span>
+						<span className="font-semibold text-mti-purple-light">{assignments.filter((a) => !a.archived).length}</span>
 					</span>
 				</div>
 			</section>
@@ -414,11 +343,7 @@ export default function TeacherDashboard({ user }: Props) {
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
 						{users
 							.filter(studentFilter)
-              .sort(
-                (a, b) =>
-                  calculateAverageLevel(b.levels) -
-                  calculateAverageLevel(a.levels)
-              )
+							.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
 							))}
@@ -431,8 +356,7 @@ export default function TeacherDashboard({ user }: Props) {
 							.filter(studentFilter)
 							.sort(
 								(a, b) =>
-                  Object.keys(groupByExam(getStatsByStudent(b))).length -
-                  Object.keys(groupByExam(getStatsByStudent(a))).length
+									Object.keys(groupByExam(getStatsByStudent(b))).length - Object.keys(groupByExam(getStatsByStudent(a))).length,
 							)
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
@@ -456,16 +380,9 @@ export default function TeacherDashboard({ user }: Props) {
 									if (shouldReload) reload();
 								}}
 								onViewStudents={
-                  selectedUser.type === "corporate" ||
-                  selectedUser.type === "teacher"
-                    ? () => setPage("students")
-                    : undefined
-                }
-                onViewTeachers={
-                  selectedUser.type === "corporate"
-                    ? () => setPage("teachers")
-                    : undefined
+									selectedUser.type === "corporate" || selectedUser.type === "teacher" ? () => setPage("students") : undefined
 								}
+								onViewTeachers={selectedUser.type === "corporate" ? () => setPage("teachers") : undefined}
 								user={selectedUser}
 							/>
 						</div>

src/hooks/usePermissions.tsx

@@ -0,0 +1,29 @@
+import {Exam} from "@/interfaces/exam";
+import {Permission, PermissionType} from "@/interfaces/permissions";
+import {ExamState} from "@/stores/examStore";
+import axios from "axios";
+import {useEffect, useState} from "react";
+
+export default function usePermissions(user: string) {
+	const [permissions, setPermissions] = useState<PermissionType[]>([]);
+	const [isLoading, setIsLoading] = useState(false);
+	const [isError, setIsError] = useState(false);
+
+	const getData = () => {
+		setIsLoading(true);
+		axios
+			.get<Permission[]>(`/api/permissions`)
+			.then((response) => {
+				const permissionTypes = response.data
+					.filter((x) => !x.users.includes(user))
+					.reduce((acc, curr) => [...acc, curr.type], [] as PermissionType[]);
+				console.log(response.data, permissionTypes);
+				setPermissions(permissionTypes);
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	useEffect(getData, [user]);
+
+	return {permissions, isLoading, isError, reload: getData};
+}

src/interfaces/permissions.ts

@@ -45,7 +45,8 @@ export const permissions = [
 	"deleteCodes",
 	// create options
 	"createGroup",
-  "createCodes"
+	"createCodes",
+	"all",
 ] as const;
 
 export type PermissionType = (typeof permissions)[keyof typeof permissions];

src/pages/(admin)/BatchCodeGenerator.tsx

@@ -18,9 +18,8 @@ import Modal from "@/components/Modal";
 import {BsFileEarmarkEaselFill, BsQuestionCircleFill} from "react-icons/bs";
 import {checkAccess, getTypesOfUser} from "@/utils/permissions";
 import {PermissionType} from "@/interfaces/permissions";
-const EMAIL_REGEX = new RegExp(
-  /^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/
-);
+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: {
 	[key in Type]: {perm: PermissionType | undefined; list: Type[]};
@@ -47,44 +46,26 @@ const USER_TYPE_PERMISSIONS: {
 	},
 	admin: {
 		perm: "createCodeAdmin",
-    list: [
-      "student",
-      "teacher",
-      "agent",
-      "corporate",
-      "admin",
-      "mastercorporate",
-    ],
+		list: ["student", "teacher", "agent", "corporate", "admin", "mastercorporate"],
 	},
 	developer: {
 		perm: undefined,
-    list: [
-      "student",
-      "teacher",
-      "agent",
-      "corporate",
-      "admin",
-      "developer",
-      "mastercorporate",
-    ],
+		list: ["student", "teacher", "agent", "corporate", "admin", "developer", "mastercorporate"],
 	},
 };
 
 export default function BatchCodeGenerator({user}: {user: User}) {
-  const [infos, setInfos] = useState<
-    { email: string; name: string; passport_id: string }[]
-  >([]);
+	const [infos, setInfos] = useState<{email: string; name: string; passport_id: string}[]>([]);
 	const [isLoading, setIsLoading] = useState(false);
 	const [expiryDate, setExpiryDate] = useState<Date | null>(
-    user?.subscriptionExpirationDate
-      ? moment(user.subscriptionExpirationDate).toDate()
-      : null
+		user?.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).toDate() : null,
 	);
 	const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
 	const [type, setType] = useState<Type>("student");
 	const [showHelp, setShowHelp] = useState(false);
 
 	const {users} = useUsers();
+	const {permissions} = usePermissions(user?.id || "");
 
 	const {openFilePicker, filesContent, clear} = useFilePicker({
 		accept: ".xlsx",
@@ -104,14 +85,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(),
@@ -121,12 +95,12 @@ export default function BatchCodeGenerator({ user }: { user: User }) {
 									: undefined;
 							})
 							.filter((x) => !!x) as typeof infos,
-            (x) => x.email
+						(x) => x.email,
 					);
 
 					if (information.length === 0) {
 						toast.error(
-              "Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!"
+							"Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!",
 						);
 						return clear();
 					}
@@ -134,7 +108,7 @@ export default function BatchCodeGenerator({ user }: { user: User }) {
 					setInfos(information);
 				} catch {
 					toast.error(
-            "Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!"
+						"Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!",
 					);
 					return clear();
 				}
@@ -144,41 +118,24 @@ export default function BatchCodeGenerator({ user }: { user: User }) {
 	}, [filesContent]);
 
 	const generateAndInvite = async () => {
-    const newUsers = infos.filter(
-      (x) => !users.map((u) => u.email).includes(x.email)
-    );
+		const newUsers = infos.filter((x) => !users.map((u) => u.email).includes(x.email));
 		const existingUsers = infos
 			.filter((x) => users.map((u) => u.email).includes(x.email))
 			.map((i) => users.find((u) => u.email === i.email))
 			.filter((x) => !!x && x.type === "student") as User[];
 
-    const newUsersSentence =
-      newUsers.length > 0 ? `generate ${newUsers.length} code(s)` : undefined;
-    const existingUsersSentence =
-      existingUsers.length > 0
-        ? `invite ${existingUsers.length} registered student(s)`
-        : undefined;
+		const newUsersSentence = newUsers.length > 0 ? `generate ${newUsers.length} code(s)` : undefined;
+		const existingUsersSentence = existingUsers.length > 0 ? `invite ${existingUsers.length} registered student(s)` : undefined;
 		if (
 			!confirm(
-        `You are about to ${[newUsersSentence, existingUsersSentence]
-          .filter((x) => !!x)
-          .join(" and ")}, are you sure you want to continue?`
+				`You are about to ${[newUsersSentence, existingUsersSentence].filter((x) => !!x).join(" and ")}, are you sure you want to continue?`,
 			)
 		)
 			return;
 
 		setIsLoading(true);
-    Promise.all(
-      existingUsers.map(
-        async (u) =>
-          await axios.post(`/api/invites`, { to: u.id, from: user.id })
-      )
-    )
-      .then(() =>
-        toast.success(
-          `Successfully invited ${existingUsers.length} registered student(s)!`
-        )
-      )
+		Promise.all(existingUsers.map(async (u) => await axios.post(`/api/invites`, {to: u.id, from: user.id})))
+			.then(() => toast.success(`Successfully invited ${existingUsers.length} registered student(s)!`))
 			.finally(() => {
 				if (newUsers.length === 0) setIsLoading(false);
 			});
@@ -202,10 +159,10 @@ export default function BatchCodeGenerator({ user }: { user: User }) {
 			.then(({data, status}) => {
 				if (data.ok) {
 					toast.success(
-            `Successfully generated${
-              data.valid ? ` ${data.valid}/${informations.length}` : ""
-            } ${capitalize(type)} codes and they have been notified by e-mail!`,
-            { toastId: "success" }
+						`Successfully generated${data.valid ? ` ${data.valid}/${informations.length}` : ""} ${capitalize(
+							type,
+						)} codes and they have been notified by e-mail!`,
+						{toastId: "success"},
 					);
 					return;
 				}
@@ -232,30 +189,18 @@ export default function BatchCodeGenerator({ user }: { user: User }) {
 
 	return (
 		<>
-      <Modal
-        isOpen={showHelp}
-        onClose={() => setShowHelp(false)}
-        title="Excel File Format"
-      >
+			<Modal isOpen={showHelp} onClose={() => setShowHelp(false)} title="Excel File Format">
 				<div className="mt-4 flex flex-col gap-2">
 					<span>Please upload an Excel file with the following format:</span>
 					<table className="w-full">
 						<thead>
 							<tr>
-                <th className="border border-neutral-200 px-2 py-1">
-                  First Name
-                </th>
-                <th className="border border-neutral-200 px-2 py-1">
-                  Last Name
-                </th>
+								<th className="border border-neutral-200 px-2 py-1">First Name</th>
+								<th className="border border-neutral-200 px-2 py-1">Last Name</th>
 								<th className="border border-neutral-200 px-2 py-1">Country</th>
-                <th className="border border-neutral-200 px-2 py-1">
-                  Passport/National ID
-                </th>
+								<th className="border border-neutral-200 px-2 py-1">Passport/National ID</th>
 								<th className="border border-neutral-200 px-2 py-1">E-mail</th>
-                <th className="border border-neutral-200 px-2 py-1">
-                  Phone Number
-                </th>
+								<th className="border border-neutral-200 px-2 py-1">Phone Number</th>
 							</tr>
 						</thead>
 					</table>
@@ -264,55 +209,27 @@ export default function BatchCodeGenerator({ user }: { user: User }) {
 						<ul>
 							<li>- All incorrect e-mails will be ignored;</li>
 							<li>- All already registered e-mails will be ignored;</li>
-              <li>
-                - You may have a header row with the format above, however, it
-                is not necessary;
-              </li>
-              <li>
-                - All of the e-mails in the file will receive an e-mail to join
-                EnCoach with the role selected below.
-              </li>
+							<li>- You may have a header row with the format above, however, it is not necessary;</li>
+							<li>- All of the e-mails in the file will receive an e-mail to join EnCoach with the role selected below.</li>
 						</ul>
 					</span>
 				</div>
 			</Modal>
 			<div className="border-mti-gray-platinum flex flex-col gap-4 rounded-xl border p-4">
 				<div className="flex items-end justify-between">
-          <label className="text-mti-gray-dim text-base font-normal">
-            Choose an Excel file
-          </label>
-          <div
-            className="tooltip cursor-pointer"
-            data-tip="Excel File Format"
-            onClick={() => setShowHelp(true)}
-          >
+					<label className="text-mti-gray-dim text-base font-normal">Choose an Excel file</label>
+					<div className="tooltip cursor-pointer" data-tip="Excel File Format" onClick={() => setShowHelp(true)}>
 						<BsQuestionCircleFill />
 					</div>
 				</div>
-        <Button
-          onClick={openFilePicker}
-          isLoading={isLoading}
-          disabled={isLoading}
-        >
+				<Button onClick={openFilePicker} isLoading={isLoading} disabled={isLoading}>
 					{filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
 				</Button>
-        {user &&
-          checkAccess(user, [
-            "developer",
-            "admin",
-            "corporate",
-            "mastercorporate",
-          ]) && (
+				{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}
-                >
+							<label className="text-mti-gray-dim text-base font-normal">Expiry Date</label>
+							<Checkbox isChecked={isExpiryDateEnabled} onChange={setIsExpiryDateEnabled} disabled={!!user.subscriptionExpirationDate}>
 								Enabled
 							</Checkbox>
 						</div>
@@ -321,13 +238,11 @@ export default function BatchCodeGenerator({ user }: { user: User }) {
 								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"
+									"transition duration-300 ease-in-out",
 								)}
 								filterDate={(date) =>
 									moment(date).isAfter(new Date()) &&
-                    (user.subscriptionExpirationDate
-                      ? moment(date).isBefore(user.subscriptionExpirationDate)
-                      : true)
+									(user.subscriptionExpirationDate ? moment(date).isBefore(user.subscriptionExpirationDate) : true)
 								}
 								dateFormat="dd/MM/yyyy"
 								selected={expiryDate}
@@ -336,19 +251,16 @@ export default function BatchCodeGenerator({ user }: { user: User }) {
 						)}
 					</>
 				)}
-        <label className="text-mti-gray-dim text-base font-normal">
-          Select the type of user they should be
-        </label>
+				<label className="text-mti-gray-dim text-base font-normal">Select the type of user they should be</label>
 				{user && (
 					<select
 						defaultValue="student"
 						onChange={(e) => setType(e.target.value as typeof user.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"
-          >
+						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)
 							.filter((x) => {
 								const {list, perm} = USER_TYPE_PERMISSIONS[x as Type];
-                return checkAccess(user, getTypesOfUser(list), perm);
+								return checkAccess(user, getTypesOfUser(list), permissions, perm);
 							})
 							.map((type) => (
 								<option key={type} value={type}>
@@ -357,17 +269,8 @@ export default function BatchCodeGenerator({ user }: { user: User }) {
 							))}
 					</select>
 				)}
-        {checkAccess(
-          user,
-          ["developer", "admin", "corporate", "mastercorporate"],
-          "createCodes"
-        ) && (
-          <Button
-            onClick={generateAndInvite}
-            disabled={
-              infos.length === 0 || (isExpiryDateEnabled ? !expiryDate : false)
-            }
-          >
+				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"], permissions, "createCodes") && (
+					<Button onClick={generateAndInvite} disabled={infos.length === 0 || (isExpiryDateEnabled ? !expiryDate : false)}>
 						Generate & Send
 					</Button>
 				)}

src/pages/(admin)/CodeGenerator.tsx

@@ -13,6 +13,7 @@ import { toast } from "react-toastify";
 import ShortUniqueId from "short-unique-id";
 import {checkAccess} from "@/utils/permissions";
 import {PermissionType} from "@/interfaces/permissions";
+import usePermissions from "@/hooks/usePermissions";
 
 const USER_TYPE_PERMISSIONS: {
 	[key in Type]: {perm: PermissionType | undefined; list: Type[]};
@@ -39,38 +40,22 @@ const USER_TYPE_PERMISSIONS: {
 	},
 	admin: {
 		perm: "createCodeAdmin",
-    list: [
-      "student",
-      "teacher",
-      "agent",
-      "corporate",
-      "admin",
-      "mastercorporate",
-    ],
+		list: ["student", "teacher", "agent", "corporate", "admin", "mastercorporate"],
 	},
 	developer: {
 		perm: undefined,
-    list: [
-      "student",
-      "teacher",
-      "agent",
-      "corporate",
-      "admin",
-      "developer",
-      "mastercorporate",
-    ],
+		list: ["student", "teacher", "agent", "corporate", "admin", "developer", "mastercorporate"],
 	},
 };
 
 export default function CodeGenerator({user}: {user: User}) {
 	const [generatedCode, setGeneratedCode] = useState<string>();
 	const [expiryDate, setExpiryDate] = useState<Date | null>(
-    user?.subscriptionExpirationDate
-      ? moment(user.subscriptionExpirationDate).toDate()
-      : null
+		user?.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).toDate() : null,
 	);
 	const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
 	const [type, setType] = useState<Type>("student");
+	const {permissions} = usePermissions(user?.id || "");
 
 	useEffect(() => {
 		if (!isExpiryDateEnabled) setExpiryDate(null);
@@ -109,19 +94,16 @@ export default function CodeGenerator({ user }: { user: User }) {
 
 	return (
 		<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
-      <label className="font-normal text-base text-mti-gray-dim">
-        User Code Generator
-      </label>
+			<label className="font-normal text-base text-mti-gray-dim">User Code Generator</label>
 			{user && (
 				<select
 					defaultValue="student"
 					onChange={(e) => setType(e.target.value as typeof user.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"
-        >
+					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, list, perm);
+							return checkAccess(user, list, permissions, perm);
 						})
 						.map((type) => (
 							<option key={type} value={type}>
@@ -133,14 +115,8 @@ export default function CodeGenerator({ user }: { user: User }) {
 			{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}
-            >
+						<label className="text-mti-gray-dim text-base font-normal">Expiry Date</label>
+						<Checkbox isChecked={isExpiryDateEnabled} onChange={setIsExpiryDateEnabled} disabled={!!user.subscriptionExpirationDate}>
 							Enabled
 						</Checkbox>
 					</div>
@@ -149,13 +125,11 @@ export default function CodeGenerator({ user }: { user: User }) {
 							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"
+								"transition duration-300 ease-in-out",
 							)}
 							filterDate={(date) =>
 								moment(date).isAfter(new Date()) &&
-                (user.subscriptionExpirationDate
-                  ? moment(date).isBefore(user.subscriptionExpirationDate)
-                  : true)
+								(user.subscriptionExpirationDate ? moment(date).isBefore(user.subscriptionExpirationDate) : true)
 							}
 							dateFormat="dd/MM/yyyy"
 							selected={expiryDate}
@@ -164,35 +138,25 @@ export default function CodeGenerator({ user }: { user: User }) {
 					)}
 				</>
 			)}
-      {checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"], 'createCodes') && (
-        <Button
-          onClick={() => generateCode(type)}
-          disabled={isExpiryDateEnabled ? !expiryDate : false}
-        >
+			{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"], permissions, "createCodes") && (
+				<Button onClick={() => generateCode(type)} disabled={isExpiryDateEnabled ? !expiryDate : false}>
 					Generate
 				</Button>
 			)}
-      <label className="font-normal text-base text-mti-gray-dim">
-        Generated Code:
-      </label>
+			<label className="font-normal text-base text-mti-gray-dim">Generated Code:</label>
 			<div
 				className={clsx(
 					"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
 					"hover:border-mti-purple tooltip",
-          "transition duration-300 ease-in-out"
+					"transition duration-300 ease-in-out",
 				)}
 				data-tip="Click to copy"
 				onClick={() => {
 					if (generatedCode) navigator.clipboard.writeText(generatedCode);
-        }}
-      >
+				}}>
 				{generatedCode}
 			</div>
-      {generatedCode && (
-        <span className="text-sm text-mti-gray-dim font-light">
-          Give this code to the user to complete their registration
-        </span>
-      )}
+			{generatedCode && <span className="text-sm text-mti-gray-dim font-light">Give this code to the user to complete their registration</span>}
 		</div>
 	);
 }

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

@@ -6,12 +6,7 @@ import useUser from "@/hooks/useUser";
 import useUsers from "@/hooks/useUsers";
 import {Code, User} from "@/interfaces/user";
 import {USER_TYPE_LABELS} from "@/resources/user";
-import {
-  createColumnHelper,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
+import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
 import axios from "axios";
 import moment from "moment";
 import {useEffect, useState, useMemo} from "react";
@@ -20,6 +15,7 @@ import { toast } from "react-toastify";
 import ReactDatePicker from "react-datepicker";
 import clsx from "clsx";
 import {checkAccess} from "@/utils/permissions";
+import usePermissions from "@/hooks/usePermissions";
 
 const columnHelper = createColumnHelper<Code>();
 
@@ -32,9 +28,7 @@ const CreatorCell = ({ id, users }: { id: string; users: User[] }) => {
 
 	return (
 		<>
-      {(creatorUser?.type === "corporate"
-        ? creatorUser?.corporateInformation?.companyInformation?.name
-        : creatorUser?.name || "N/A") || "N/A"}{" "}
+			{(creatorUser?.type === "corporate" ? creatorUser?.corporateInformation?.companyInformation?.name : creatorUser?.name || "N/A") || "N/A"}{" "}
 			{creatorUser && `(${USER_TYPE_LABELS[creatorUser.type]})`}
 		</>
 	);
@@ -43,19 +37,15 @@ const CreatorCell = ({ id, users }: { id: string; users: User[] }) => {
 export default function CodeList({user}: {user: User}) {
 	const [selectedCodes, setSelectedCodes] = useState<string[]>([]);
 
-  const [filteredCorporate, setFilteredCorporate] = useState<User | undefined>(
-    user?.type === "corporate" ? user : undefined
-  );
-  const [filterAvailability, setFilterAvailability] = useState<
-    "in-use" | "unused"
-  >();
+	const [filteredCorporate, setFilteredCorporate] = useState<User | undefined>(user?.type === "corporate" ? user : undefined);
+	const [filterAvailability, setFilterAvailability] = useState<"in-use" | "unused">();
+
+	const {permissions} = usePermissions(user?.id || "");
 
 	// const [filteredCodes, setFilteredCodes] = useState<Code[]>([]);
 
 	const {users} = useUsers();
-  const { codes, reload } = useCodes(
-    user?.type === "corporate" ? user?.id : undefined
-  );
+	const {codes, reload} = useCodes(user?.type === "corporate" ? user?.id : undefined);
 
 	const [startDate, setStartDate] = useState<Date | null>(moment("01/01/2023").toDate());
 	const [endDate, setEndDate] = useState<Date | null>(moment().endOf("day").toDate());
@@ -80,25 +70,17 @@ export default function CodeList({ user }: { user: User }) {
 	}, [codes, startDate, endDate, filteredCorporate, filterAvailability]);
 
 	const toggleCode = (id: string) => {
-    setSelectedCodes((prev) =>
-      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
-    );
+		setSelectedCodes((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
 	};
 
 	const toggleAllCodes = (checked: boolean) => {
-    if (checked)
-      return setSelectedCodes(
-        filteredCodes.filter((x) => !x.userId).map((x) => x.code)
-      );
+		if (checked) return setSelectedCodes(filteredCodes.filter((x) => !x.userId).map((x) => x.code));
 
 		return setSelectedCodes([]);
 	};
 
 	const deleteCodes = async (codes: string[]) => {
-    if (
-      !confirm(`Are you sure you want to delete these ${codes.length} code(s)?`)
-    )
-      return;
+		if (!confirm(`Are you sure you want to delete these ${codes.length} code(s)?`)) return;
 
 		const params = new URLSearchParams();
 		codes.forEach((code) => params.append("code", code));
@@ -126,8 +108,7 @@ export default function CodeList({ user }: { user: User }) {
 	};
 
 	const deleteCode = async (code: Code) => {
-    if (!confirm(`Are you sure you want to delete this "${code.code}" code?`))
-      return;
+		if (!confirm(`Are you sure you want to delete this "${code.code}" code?`)) return;
 
 		axios
 			.delete(`/api/code/${code.code}`)
@@ -148,11 +129,7 @@ export default function CodeList({ user }: { user: User }) {
 			.finally(reload);
 	};
 
-  const allowedToDelete = checkAccess(
-    user,
-    ["developer", "admin", "corporate", "mastercorporate"],
-    "deleteCodes"
-  );
+	const allowedToDelete = checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"], permissions, "deleteCodes");
 
 	const defaultColumns = [
 		columnHelper.accessor("code", {
@@ -161,21 +138,15 @@ export default function CodeList({ user }: { user: User }) {
 				<Checkbox
 					disabled={filteredCodes.filter((x) => !x.userId).length === 0}
 					isChecked={
-            selectedCodes.length ===
-              filteredCodes.filter((x) => !x.userId).length &&
-            filteredCodes.filter((x) => !x.userId).length > 0
+						selectedCodes.length === filteredCodes.filter((x) => !x.userId).length && filteredCodes.filter((x) => !x.userId).length > 0
 					}
-          onChange={(checked) => toggleAllCodes(checked)}
-        >
+					onChange={(checked) => toggleAllCodes(checked)}>
 					{""}
 				</Checkbox>
 			),
 			cell: (info) =>
 				!info.row.original.userId ? (
-          <Checkbox
-            isChecked={selectedCodes.includes(info.getValue())}
-            onChange={() => toggleCode(info.getValue())}
-          >
+					<Checkbox isChecked={selectedCodes.includes(info.getValue())} onChange={() => toggleCode(info.getValue())}>
 						{""}
 					</Checkbox>
 				) : null,
@@ -186,8 +157,7 @@ export default function CodeList({ user }: { user: User }) {
 		}),
 		columnHelper.accessor("creationDate", {
 			header: "Creation Date",
-      cell: (info) =>
-        info.getValue() ? moment(info.getValue()).format("DD/MM/YYYY") : "N/A",
+			cell: (info) => (info.getValue() ? moment(info.getValue()).format("DD/MM/YYYY") : "N/A"),
 		}),
 		columnHelper.accessor("email", {
 			header: "Invited E-mail",
@@ -217,11 +187,7 @@ export default function CodeList({ user }: { user: User }) {
 				return (
 					<div className="flex gap-4">
 						{allowedToDelete && !row.original.userId && (
-              <div
-                data-tip="Delete"
-                className="cursor-pointer tooltip"
-                onClick={() => deleteCode(row.original)}
-              >
+							<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteCode(row.original)}>
 								<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
 							</div>
 						)}
@@ -251,8 +217,7 @@ export default function CodeList({ user }: { user: User }) {
 								? {
 										label: `${
 											filteredCorporate.type === "corporate"
-                        ? filteredCorporate.corporateInformation
-                            ?.companyInformation?.name || filteredCorporate.name
+												? filteredCorporate.corporateInformation?.companyInformation?.name || filteredCorporate.name
 												: filteredCorporate.name
 										} (${USER_TYPE_LABELS[filteredCorporate.type]})`,
 										value: filteredCorporate.id,
@@ -260,23 +225,15 @@ export default function CodeList({ user }: { user: User }) {
 								: null
 						}
 						options={users
-              .filter((x) =>
-                ["admin", "developer", "corporate"].includes(x.type)
-              )
+							.filter((x) => ["admin", "developer", "corporate"].includes(x.type))
 							.map((x) => ({
-                label: `${
-                  x.type === "corporate"
-                    ? x.corporateInformation?.companyInformation?.name || x.name
-                    : x.name
-                } (${USER_TYPE_LABELS[x.type]})`,
+								label: `${x.type === "corporate" ? x.corporateInformation?.companyInformation?.name || x.name : x.name} (${
+									USER_TYPE_LABELS[x.type]
+								})`,
 								value: x.id,
 								user: x,
 							}))}
-            onChange={(value) =>
-              setFilteredCorporate(
-                value ? users.find((x) => x.id === value?.value) : undefined
-              )
-            }
+						onChange={(value) => setFilteredCorporate(value ? users.find((x) => x.id === value?.value) : undefined)}
 					/>
 					<Select
 						className="!w-96 !py-1"
@@ -286,11 +243,7 @@ export default function CodeList({ user }: { user: User }) {
 							{label: "In Use", value: "in-use"},
 							{label: "Unused", value: "unused"},
 						]}
-            onChange={(value) =>
-              setFilterAvailability(
-                value ? (value.value as typeof filterAvailability) : undefined
-              )
-            }
+						onChange={(value) => setFilterAvailability(value ? (value.value as typeof filterAvailability) : undefined)}
 					/>
 					<ReactDatePicker
 						dateFormat="dd/MM/yyyy"
@@ -300,9 +253,7 @@ export default function CodeList({ user }: { user: User }) {
 						endDate={endDate}
 						selectsRange
 						showMonthDropdown
-            filterDate={(date: Date) =>
-              moment(date).isSameOrBefore(moment(new Date()))
-            }
+						filterDate={(date: Date) => moment(date).isSameOrBefore(moment(new Date()))}
 						onChange={([initialDate, finalDate]: [Date, Date]) => {
 							setStartDate(initialDate ?? moment("01/01/2023").toDate());
 							if (finalDate) {
@@ -323,8 +274,7 @@ export default function CodeList({ user }: { user: User }) {
 							variant="outline"
 							color="red"
 							className="!py-1 px-10"
-            onClick={() => deleteCodes(selectedCodes)}
-          >
+							onClick={() => deleteCodes(selectedCodes)}>
 							Delete
 						</Button>
 					</div>
@@ -336,12 +286,7 @@ export default function CodeList({ user }: { user: User }) {
 						<tr key={headerGroup.id}>
 							{headerGroup.headers.map((header) => (
 								<th className="p-4 text-left" key={header.id}>
-                  {header.isPlaceholder
-                    ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+									{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
 								</th>
 							))}
 						</tr>
@@ -349,10 +294,7 @@ export default function CodeList({ user }: { user: User }) {
 				</thead>
 				<tbody className="px-2">
 					{table.getRowModel().rows.map((row) => (
-            <tr
-              className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
-              key={row.id}
-            >
+						<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
 							{row.getVisibleCells().map((cell) => (
 								<td className="px-4 py-2" key={cell.id}>
 									{flexRender(cell.column.columnDef.cell, cell.getContext())}

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

@@ -4,12 +4,7 @@ import Modal from "@/components/Modal";
 import useGroups from "@/hooks/useGroups";
 import useUsers from "@/hooks/useUsers";
 import {CorporateUser, Group, User} from "@/interfaces/user";
-import {
-  createColumnHelper,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
+import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
 import axios from "axios";
 import {capitalize, uniq} from "lodash";
 import {useEffect, useState} from "react";
@@ -21,21 +16,12 @@ import { useFilePicker } from "use-file-picker";
 import {getUserCorporate} from "@/utils/groups";
 import {isAgentUser, isCorporateUser} from "@/resources/user";
 import {checkAccess} from "@/utils/permissions";
+import usePermissions from "@/hooks/usePermissions";
 
 const columnHelper = createColumnHelper<Group>();
-const EMAIL_REGEX = new RegExp(
-  /^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/
-);
+const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
 
-const LinkedCorporate = ({
-  userId,
-  users,
-  groups,
-}: {
-  userId: string;
-  users: User[];
-  groups: Group[];
-}) => {
+const LinkedCorporate = ({userId, users, groups}: {userId: string; users: User[]; groups: Group[]}) => {
 	const [companyName, setCompanyName] = useState("");
 	const [isLoading, setIsLoading] = useState(false);
 
@@ -43,33 +29,19 @@ const LinkedCorporate = ({
 		const user = users.find((u) => u.id === userId);
 		if (!user) return setCompanyName("");
 
-    if (isCorporateUser(user))
-      return setCompanyName(
-        user.corporateInformation?.companyInformation?.name || user.name
-      );
-    if (isAgentUser(user))
-      return setCompanyName(user.agentInformation?.companyName || user.name);
+		if (isCorporateUser(user)) return setCompanyName(user.corporateInformation?.companyInformation?.name || user.name);
+		if (isAgentUser(user)) return setCompanyName(user.agentInformation?.companyName || user.name);
 
-    const belongingGroups = groups.filter((x) =>
-      x.participants.includes(userId)
-    );
-    const belongingGroupsAdmins = belongingGroups
-      .map((x) => users.find((u) => u.id === x.admin))
-      .filter((x) => !!x && isCorporateUser(x));
+		const belongingGroups = groups.filter((x) => x.participants.includes(userId));
+		const belongingGroupsAdmins = belongingGroups.map((x) => users.find((u) => u.id === x.admin)).filter((x) => !!x && isCorporateUser(x));
 
 		if (belongingGroupsAdmins.length === 0) return setCompanyName("");
 
 		const admin = belongingGroupsAdmins[0] as CorporateUser;
-    setCompanyName(
-      admin.corporateInformation?.companyInformation.name || admin.name
-    );
+		setCompanyName(admin.corporateInformation?.companyInformation.name || admin.name);
 	}, [userId, users, groups]);
 
-  return isLoading ? (
-    <span className="animate-pulse">Loading...</span>
-  ) : (
-    <>{companyName}</>
-  );
+	return isLoading ? <span className="animate-pulse">Loading...</span> : <>{companyName}</>;
 };
 
 interface CreateDialogProps {
@@ -80,13 +52,9 @@ interface CreateDialogProps {
 }
 
 const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
-  const [name, setName] = useState<string | undefined>(
-    group?.name || undefined
-  );
+	const [name, setName] = useState<string | undefined>(group?.name || undefined);
 	const [admin, setAdmin] = useState<string>(group?.admin || user.id);
-  const [participants, setParticipants] = useState<string[]>(
-    group?.participants || []
-  );
+	const [participants, setParticipants] = useState<string[]>(group?.participants || []);
 	const [isLoading, setIsLoading] = useState(false);
 
 	const {openFilePicker, filesContent, clear} = useFilePicker({
@@ -105,12 +73,9 @@ const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
 					rows
 						.map((row) => {
 							const [email] = row as string[];
-              return EMAIL_REGEX.test(email) &&
-                !users.map((u) => u.email).includes(email)
-                ? email.toString().trim()
-                : undefined;
+							return EMAIL_REGEX.test(email) && !users.map((u) => u.email).includes(email) ? email.toString().trim() : undefined;
 						})
-            .filter((x) => !!x)
+						.filter((x) => !!x),
 				);
 
 				if (emails.length === 0) {
@@ -120,17 +85,12 @@ const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
 					return;
 				}
 
-        const emailUsers = [...new Set(emails)]
-          .map((x) => users.find((y) => y.email.toLowerCase() === x))
-          .filter((x) => x !== undefined);
+				const emailUsers = [...new Set(emails)].map((x) => users.find((y) => y.email.toLowerCase() === x)).filter((x) => x !== undefined);
 				const filteredUsers = emailUsers.filter(
 					(x) =>
-            ((user.type === "developer" ||
-              user.type === "admin" ||
-              user.type === "corporate" ||
-              user.type === "mastercorporate") &&
+						((user.type === "developer" || user.type === "admin" || user.type === "corporate" || user.type === "mastercorporate") &&
 							(x?.type === "student" || x?.type === "teacher")) ||
-            (user.type === "teacher" && x?.type === "student")
+						(user.type === "teacher" && x?.type === "student"),
 				);
 
 				setParticipants(filteredUsers.filter((x) => !!x).map((x) => x!.id));
@@ -138,7 +98,7 @@ const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
 					user.type !== "teacher"
 						? "Added all teachers and students found in the file you've provided!"
 						: "Added all students found in the file you've provided!",
-          { toastId: "upload-success" }
+					{toastId: "upload-success"},
 				);
 				setIsLoading(false);
 			});
@@ -150,21 +110,14 @@ const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
 		setIsLoading(true);
 
 		if (name !== group?.name && (name === "Students" || name === "Teachers")) {
-      toast.error(
-        "That group name is reserved and cannot be used, please enter another one."
-      );
+			toast.error("That group name is reserved and cannot be used, please enter another one.");
 			setIsLoading(false);
 			return;
 		}
 
-    (group ? axios.patch : axios.post)(
-      group ? `/api/groups/${group.id}` : "/api/groups",
-      { name, admin, participants }
-    )
+		(group ? axios.patch : axios.post)(group ? `/api/groups/${group.id}` : "/api/groups", {name, admin, participants})
 			.then(() => {
-        toast.success(
-          `Group "${name}" ${group ? "edited" : "created"} successfully`
-        );
+				toast.success(`Group "${name}" ${group ? "edited" : "created"} successfully`);
 				return true;
 			})
 			.catch(() => {
@@ -180,24 +133,11 @@ const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
 	return (
 		<div className="mt-4 flex w-full flex-col gap-12 px-4 py-2">
 			<div className="flex flex-col gap-8">
-        <Input
-          name="name"
-          type="text"
-          label="Name"
-          defaultValue={name}
-          onChange={setName}
-          required
-          disabled={group?.disableEditing}
-        />
+				<Input name="name" type="text" label="Name" defaultValue={name} onChange={setName} required disabled={group?.disableEditing} />
 				<div className="flex w-full flex-col gap-3">
 					<div className="flex items-center gap-2">
-            <label className="text-mti-gray-dim text-base font-normal">
-              Participants
-            </label>
-            <div
-              className="tooltip"
-              data-tip="The Excel file should only include a column with the desired e-mails."
-            >
+						<label className="text-mti-gray-dim text-base font-normal">Participants</label>
+						<div className="tooltip" data-tip="The Excel file should only include a column with the desired e-mails.">
 							<BsQuestionCircleFill />
 						</div>
 					</div>
@@ -206,23 +146,15 @@ const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
 							className="w-full"
 							value={participants.map((x) => ({
 								value: x,
-                label: `${users.find((y) => y.id === x)?.email} - ${
-                  users.find((y) => y.id === x)?.name
-                }`,
+								label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
 							}))}
 							placeholder="Participants..."
 							defaultValue={participants.map((x) => ({
 								value: x,
-                label: `${users.find((y) => y.id === x)?.email} - ${
-                  users.find((y) => y.id === x)?.name
-                }`,
+								label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
 							}))}
 							options={users
-                .filter((x) =>
-                  user.type === "teacher"
-                    ? x.type === "student"
-                    : x.type === "student" || x.type === "teacher"
-                )
+								.filter((x) => (user.type === "teacher" ? x.type === "student" : x.type === "student" || x.type === "teacher"))
 								.map((x) => ({value: x.id, label: `${x.email} - ${x.name}`}))}
 							onChange={(value) => setParticipants(value.map((x) => x.value))}
 							isMulti
@@ -240,36 +172,18 @@ const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
 							}}
 						/>
 						{user.type !== "teacher" && (
-              <Button
-                className="w-full max-w-[300px]"
-                onClick={openFilePicker}
-                isLoading={isLoading}
-                variant="outline"
-              >
-                {filesContent.length === 0
-                  ? "Upload participants Excel file"
-                  : filesContent[0].name}
+							<Button className="w-full max-w-[300px]" onClick={openFilePicker} isLoading={isLoading} variant="outline">
+								{filesContent.length === 0 ? "Upload participants Excel file" : filesContent[0].name}
 							</Button>
 						)}
 					</div>
 				</div>
 			</div>
 			<div className="mt-8 flex w-full items-center justify-end gap-8">
-        <Button
-          variant="outline"
-          color="red"
-          className="w-full max-w-[200px]"
-          isLoading={isLoading}
-          onClick={onClose}
-        >
+				<Button variant="outline" color="red" className="w-full max-w-[200px]" isLoading={isLoading} onClick={onClose}>
 					Cancel
 				</Button>
-        <Button
-          className="w-full max-w-[200px]"
-          onClick={submit}
-          isLoading={isLoading}
-          disabled={!name}
-        >
+				<Button className="w-full max-w-[200px]" onClick={submit} isLoading={isLoading} disabled={!name}>
 					Submit
 				</Button>
 			</div>
@@ -284,17 +198,13 @@ export default function GroupList({ user }: { user: User }) {
 	const [editingGroup, setEditingGroup] = useState<Group>();
 	const [filterByUser, setFilterByUser] = useState(false);
 
+	const {permissions} = usePermissions(user?.id || "");
+
 	const {users} = useUsers();
-  const { groups, reload } = useGroups(
-    user && filterTypes.includes(user?.type) ? user.id : undefined,
-    user?.type
-  );
+	const {groups, reload} = useGroups(user && filterTypes.includes(user?.type) ? user.id : undefined, user?.type);
 
 	useEffect(() => {
-    if (
-      user &&
-      ["corporate", "teacher", "mastercorporate"].includes(user.type)
-    ) {
+		if (user && ["corporate", "teacher", "mastercorporate"].includes(user.type)) {
 			setFilterByUser(true);
 		}
 	}, [user]);
@@ -321,25 +231,14 @@ export default function GroupList({ user }: { user: User }) {
 		columnHelper.accessor("admin", {
 			header: "Admin",
 			cell: (info) => (
-        <div
-          className="tooltip"
-          data-tip={capitalize(
-            users.find((x) => x.id === info.getValue())?.type
-          )}
-        >
+				<div className="tooltip" data-tip={capitalize(users.find((x) => x.id === info.getValue())?.type)}>
 					{users.find((x) => x.id === info.getValue())?.name}
 				</div>
 			),
 		}),
 		columnHelper.accessor("admin", {
 			header: "Linked Corporate",
-      cell: (info) => (
-        <LinkedCorporate
-          userId={info.getValue()}
-          users={users}
-          groups={groups}
-        />
-      ),
+			cell: (info) => <LinkedCorporate userId={info.getValue()} users={users} groups={groups} />,
 		}),
 		columnHelper.accessor("participants", {
 			header: "Participants",
@@ -355,29 +254,15 @@ export default function GroupList({ user }: { user: User }) {
 			cell: ({row}: {row: {original: Group}}) => {
 				return (
 					<>
-            {user &&
-              (checkAccess(user, ["developer", "admin"]) ||
-                user.id === row.original.admin) && (
+						{user && (checkAccess(user, ["developer", "admin"]) || user.id === row.original.admin) && (
 							<div className="flex gap-2">
-                  {(!row.original.disableEditing ||
-                    checkAccess(user, ["developer", "admin"]),
-                  "editGroup") && (
-                    <div
-                      data-tip="Edit"
-                      className="tooltip cursor-pointer"
-                      onClick={() => setEditingGroup(row.original)}
-                    >
+								{(!row.original.disableEditing || checkAccess(user, ["developer", "admin"]), "editGroup") && (
+									<div data-tip="Edit" className="tooltip cursor-pointer" onClick={() => setEditingGroup(row.original)}>
 										<BsPencil className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
 									</div>
 								)}
-                  {(!row.original.disableEditing ||
-                    checkAccess(user, ["developer", "admin"]),
-                  "deleteGroup") && (
-                    <div
-                      data-tip="Delete"
-                      className="tooltip cursor-pointer"
-                      onClick={() => deleteGroup(row.original)}
-                    >
+								{(!row.original.disableEditing || checkAccess(user, ["developer", "admin"]), "deleteGroup") && (
+									<div data-tip="Delete" className="tooltip cursor-pointer" onClick={() => deleteGroup(row.original)}>
 										<BsTrash className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
 									</div>
 								)}
@@ -403,11 +288,7 @@ export default function GroupList({ user }: { user: User }) {
 
 	return (
 		<div className="h-full w-full rounded-xl">
-      <Modal
-        isOpen={isCreating || !!editingGroup}
-        onClose={closeModal}
-        title={editingGroup ? `Editing ${editingGroup.name}` : "New Group"}
-      >
+			<Modal isOpen={isCreating || !!editingGroup} onClose={closeModal} title={editingGroup ? `Editing ${editingGroup.name}` : "New Group"}>
 				<CreatePanel
 					group={editingGroup}
 					user={user}
@@ -419,8 +300,7 @@ export default function GroupList({ user }: { user: User }) {
 										groups
 											.filter((g) => g.admin === user.id)
 											.flatMap((g) => g.participants)
-                      .includes(u.id) ||
-                    groups.flatMap((g) => g.participants).includes(u.id)
+											.includes(u.id) || groups.flatMap((g) => g.participants).includes(u.id),
 							  )
 							: users
 					}
@@ -432,12 +312,7 @@ export default function GroupList({ user }: { user: User }) {
 						<tr key={headerGroup.id}>
 							{headerGroup.headers.map((header) => (
 								<th className="py-4" key={header.id}>
-                  {header.isPlaceholder
-                    ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+									{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
 								</th>
 							))}
 						</tr>
@@ -445,10 +320,7 @@ export default function GroupList({ user }: { user: User }) {
 				</thead>
 				<tbody className="px-2">
 					{table.getRowModel().rows.map((row) => (
-            <tr
-              className="even:bg-mti-purple-ultralight/40 rounded-lg py-2 odd:bg-white"
-              key={row.id}
-            >
+						<tr className="even:bg-mti-purple-ultralight/40 rounded-lg py-2 odd:bg-white" key={row.id}>
 							{row.getVisibleCells().map((cell) => (
 								<td className="px-4 py-2" key={cell.id}>
 									{flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -459,15 +331,10 @@ export default function GroupList({ user }: { user: User }) {
 				</tbody>
 			</table>
 
-      {checkAccess(
-        user,
-        ["teacher", "corporate", "mastercorporate", "admin", "developer"],
-        "createGroup"
-      ) && (
+			{checkAccess(user, ["teacher", "corporate", "mastercorporate", "admin", "developer"], permissions, "createGroup") && (
 				<button
 					onClick={() => setIsCreating(true)}
-          className="bg-mti-purple-light hover:bg-mti-purple w-full py-2 text-white transition duration-300 ease-in-out"
-        >
+					className="bg-mti-purple-light hover:bg-mti-purple w-full py-2 text-white transition duration-300 ease-in-out">
 					New Group
 				</button>
 			)}

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

@@ -4,38 +4,19 @@ import useGroups from "@/hooks/useGroups";
 import useUsers from "@/hooks/useUsers";
 import {Type, User, userTypes, CorporateUser, Group} from "@/interfaces/user";
 import {Popover, Transition} from "@headlessui/react";
-import {
-  createColumnHelper,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
+import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
 import axios from "axios";
 import clsx from "clsx";
 import {capitalize, reverse} from "lodash";
 import moment from "moment";
 import {Fragment, useEffect, useState} from "react";
-import {
-  BsArrowDown,
-  BsArrowDownUp,
-  BsArrowUp,
-  BsCheck,
-  BsCheckCircle,
-  BsEye,
-  BsFillExclamationOctagonFill,
-  BsPerson,
-  BsTrash,
-} from "react-icons/bs";
+import {BsArrowDown, BsArrowDownUp, BsArrowUp, BsCheck, BsCheckCircle, BsEye, BsFillExclamationOctagonFill, BsPerson, BsTrash} from "react-icons/bs";
 import {toast} from "react-toastify";
 import {countries, TCountries} from "countries-list";
 import countryCodes from "country-codes-list";
 import Modal from "@/components/Modal";
 import UserCard from "@/components/UserCard";
-import {
-  getUserCompanyName,
-  isAgentUser,
-  USER_TYPE_LABELS,
-} from "@/resources/user";
+import {getUserCompanyName, isAgentUser, USER_TYPE_LABELS} from "@/resources/user";
 import useFilterStore from "@/stores/listFilterStore";
 import {useRouter} from "next/router";
 import {isCorporateUser} from "@/resources/user";
@@ -45,22 +26,11 @@ import { asyncSorter } from "@/utils";
 import {exportListToExcel, UserListRow} from "@/utils/users";
 import {checkAccess} from "@/utils/permissions";
 import {PermissionType} from "@/interfaces/permissions";
+import usePermissions from "@/hooks/usePermissions";
 const columnHelper = createColumnHelper<User>();
-const searchFields = [
-  ["name"],
-  ["email"],
-  ["corporateInformation", "companyInformation", "name"],
-];
+const searchFields = [["name"], ["email"], ["corporateInformation", "companyInformation", "name"]];
 
-const CompanyNameCell = ({
-  users,
-  user,
-  groups,
-}: {
-  user: User;
-  users: User[];
-  groups: Group[];
-}) => {
+const CompanyNameCell = ({users, user, groups}: {user: User; users: User[]; groups: Group[]}) => {
 	const [companyName, setCompanyName] = useState("");
 	const [isLoading, setIsLoading] = useState(false);
 
@@ -69,11 +39,7 @@ const CompanyNameCell = ({
 		setCompanyName(name);
 	}, [user, users, groups]);
 
-  return isLoading ? (
-    <span className="animate-pulse">Loading...</span>
-  ) : (
-    <>{companyName}</>
-  );
+	return isLoading ? <span className="animate-pulse">Loading...</span> : <>{companyName}</>;
 };
 
 export default function UserList({
@@ -85,18 +51,14 @@ export default function UserList({
 	filters?: ((user: User) => boolean)[];
 	renderHeader?: (total: number) => JSX.Element;
 }) {
-  const [showDemographicInformation, setShowDemographicInformation] =
-    useState(false);
+	const [showDemographicInformation, setShowDemographicInformation] = useState(false);
 	const [sorter, setSorter] = useState<string>();
 	const [displayUsers, setDisplayUsers] = useState<User[]>([]);
 	const [selectedUser, setSelectedUser] = useState<User>();
 
 	const {users, reload} = useUsers();
-  const { groups } = useGroups(
-    user && ["corporate", "teacher", "mastercorporate"].includes(user?.type)
-      ? user.id
-      : undefined
-  );
+	const {permissions} = usePermissions(user?.id || "");
+	const {groups} = useGroups(user && ["corporate", "teacher", "mastercorporate"].includes(user?.type) ? user.id : undefined);
 
 	const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
 	const router = useRouter();
@@ -105,13 +67,10 @@ export default function UserList({
 		const momentDate = moment(date);
 		const today = moment(new Date());
 
-    if (today.isAfter(momentDate))
-      return "!text-mti-red-light  font-bold line-through";
+		if (today.isAfter(momentDate)) return "!text-mti-red-light  font-bold line-through";
 		if (today.add(1, "weeks").isAfter(momentDate)) return "!text-mti-red-light";
-    if (today.add(2, "weeks").isAfter(momentDate))
-      return "!text-mti-rose-light";
-    if (today.add(1, "months").isAfter(momentDate))
-      return "!text-mti-orange-light";
+		if (today.add(2, "weeks").isAfter(momentDate)) return "!text-mti-rose-light";
+		if (today.add(1, "months").isAfter(momentDate)) return "!text-mti-orange-light";
 	};
 
 	useEffect(() => {
@@ -119,19 +78,11 @@ export default function UserList({
 			if (user && users) {
 				const filterUsers =
 					user.type === "corporate" || user.type === "teacher"
-            ? users.filter((u) =>
-                groups.flatMap((g) => g.participants).includes(u.id)
-              )
+						? users.filter((u) => groups.flatMap((g) => g.participants).includes(u.id))
 						: users;
 
-        const filteredUsers = filters.reduce(
-          (d, f) => d.filter(f),
-          filterUsers
-        );
-        const sortedUsers = await asyncSorter<User>(
-          filteredUsers,
-          sortFunction
-        );
+				const filteredUsers = filters.reduce((d, f) => d.filter(f), filterUsers);
+				const sortedUsers = await asyncSorter<User>(filteredUsers, sortFunction);
 
 				setDisplayUsers([...sortedUsers]);
 			}
@@ -140,8 +91,7 @@ export default function UserList({
 	}, [user, users, sorter, groups]);
 
 	const deleteAccount = (user: User) => {
-    if (!confirm(`Are you sure you want to delete ${user.name}'s account?`))
-      return;
+		if (!confirm(`Are you sure you want to delete ${user.name}'s account?`)) return;
 
 		axios
 			.delete<{ok: boolean}>(`/api/user?id=${user.id}`)
@@ -156,14 +106,7 @@ export default function UserList({
 	};
 
 	const updateAccountType = (user: User, type: Type) => {
-    if (
-      !confirm(
-        `Are you sure you want to update ${
-          user.name
-        }'s account from ${capitalize(user.type)} to ${capitalize(type)}?`
-      )
-    )
-      return;
+		if (!confirm(`Are you sure you want to update ${user.name}'s account from ${capitalize(user.type)} to ${capitalize(type)}?`)) return;
 
 		axios
 			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
@@ -197,11 +140,9 @@ export default function UserList({
 	const toggleDisableAccount = (user: User) => {
 		if (
 			!confirm(
-        `Are you sure you want to ${
-          user.status === "disabled" ? "enable" : "disable"
-        } ${
+				`Are you sure you want to ${user.status === "disabled" ? "enable" : "disable"} ${
 					user.name
-        }'s account? This change is usually related to their payment state.`
+				}'s account? This change is usually related to their payment state.`,
 			)
 		)
 			return;
@@ -212,11 +153,7 @@ export default function UserList({
 				status: user.status === "disabled" ? "active" : "disabled",
 			})
 			.then(() => {
-        toast.success(
-          `User ${
-            user.status === "disabled" ? "enabled" : "disabled"
-          } successfully!`
-        );
+				toast.success(`User ${user.status === "disabled" ? "enabled" : "disabled"} successfully!`);
 				reload();
 			})
 			.catch(() => {
@@ -242,11 +179,7 @@ export default function UserList({
 		};
 		return (
 			<div className="flex gap-4">
-        {checkAccess(
-          user,
-          updateUserPermission.list,
-          updateUserPermission.perm
-        ) && (
+				{checkAccess(user, updateUserPermission.list, permissions, updateUserPermission.perm) && (
 					<Popover className="relative">
 						<Popover.Button>
 							<div data-tip="Change Type" className="cursor-pointer tooltip">
@@ -260,48 +193,31 @@ export default function UserList({
 							enterTo="opacity-100 translate-y-0"
 							leave="transition ease-in duration-150"
 							leaveFrom="opacity-100 translate-y-0"
-              leaveTo="opacity-0 translate-y-1"
-            >
+							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)
-                    }
-                  >
+										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)
-                    }
-                  >
+										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)
-                    }
-                  >
+										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)
-                    }
-                  >
+										disabled={row.original.type === "admin" || !PERMISSIONS.generateCode["admin"].includes(user.type)}>
 										Admin
 									</Button>
 								</div>
@@ -309,34 +225,16 @@ export default function UserList({
 						</Transition>
 					</Popover>
 				)}
-        {!row.original.isVerified &&
-          checkAccess(
-            user,
-            updateUserPermission.list,
-            updateUserPermission.perm
-          ) && (
-            <div
-              data-tip="Verify User"
-              className="cursor-pointer tooltip"
-              onClick={() => verifyAccount(row.original)}
-            >
+				{!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" />
 					</div>
 				)}
-        {checkAccess(
-          user,
-          updateUserPermission.list,
-          updateUserPermission.perm
-        ) && (
+				{checkAccess(user, updateUserPermission.list, permissions, updateUserPermission.perm) && (
 					<div
-            data-tip={
-              row.original.status === "disabled"
-                ? "Enable User"
-                : "Disable User"
-            }
+						data-tip={row.original.status === "disabled" ? "Enable User" : "Disable User"}
 						className="cursor-pointer tooltip"
-            onClick={() => toggleDisableAccount(row.original)}
-          >
+						onClick={() => toggleDisableAccount(row.original)}>
 						{row.original.status === "disabled" ? (
 							<BsCheckCircle className="hover:text-mti-purple-light transition ease-in-out duration-300" />
 						) : (
@@ -344,16 +242,8 @@ export default function UserList({
 						)}
 					</div>
 				)}
-        {checkAccess(
-          user,
-          deleteUserPermission.list,
-          deleteUserPermission.perm
-        ) && (
-          <div
-            data-tip="Delete"
-            className="cursor-pointer tooltip"
-            onClick={() => deleteAccount(row.original)}
-          >
+				{checkAccess(user, deleteUserPermission.list, permissions, deleteUserPermission.perm) && (
+					<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteAccount(row.original)}>
 						<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
 					</div>
 				)}
@@ -364,10 +254,7 @@ export default function UserList({
 	const demographicColumns = [
 		columnHelper.accessor("name", {
 			header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "name"))}
-        >
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "name"))}>
 					<span>Name</span>
 					<SorterArrow name="name" />
 				</button>
@@ -375,49 +262,31 @@ export default function UserList({
 			cell: ({row, getValue}) => (
 				<div
 					className={clsx(
-            PERMISSIONS.updateExpiryDate[row.original.type]?.includes(
-              user.type
-            ) &&
-              "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
+						PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) &&
+							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
 					)}
-          onClick={() =>
-            PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type)
-              ? setSelectedUser(row.original)
-              : null
-          }
-        >
+					onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}>
 					{getValue()}
 				</div>
 			),
 		}),
 		columnHelper.accessor("demographicInformation.country", {
 			header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "country"))}
-        >
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "country"))}>
 					<span>Country</span>
 					<SorterArrow name="country" />
 				</button>
 			) as any,
 			cell: (info) =>
 				info.getValue()
-          ? `${
-              countryCodes.findOne("countryCode" as any, info.getValue()).flag
-            } ${
+					? `${countryCodes.findOne("countryCode" as any, info.getValue()).flag} ${
 							countries[info.getValue() as unknown as keyof TCountries].name
-            } (+${
-              countryCodes.findOne("countryCode" as any, info.getValue())
-                .countryCallingCode
-            })`
+					  } (+${countryCodes.findOne("countryCode" as any, info.getValue()).countryCallingCode})`
 					: "Not available",
 		}),
 		columnHelper.accessor("demographicInformation.phone", {
 			header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "phone"))}
-        >
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "phone"))}>
 					<span>Phone</span>
 					<SorterArrow name="phone" />
 				</button>
@@ -427,35 +296,22 @@ export default function UserList({
 		}),
 		columnHelper.accessor(
 			(x) =>
-        x.type === "corporate" || x.type === "mastercorporate"
-          ? x.demographicInformation?.position
-          : x.demographicInformation?.employment,
+				x.type === "corporate" || x.type === "mastercorporate" ? x.demographicInformation?.position : x.demographicInformation?.employment,
 			{
 				id: "employment",
 				header: (
-          <button
-            className="flex gap-2 items-center"
-            onClick={() =>
-              setSorter((prev) => selectSorter(prev, "employment"))
-            }
-          >
+					<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "employment"))}>
 						<span>Employment/Position</span>
 						<SorterArrow name="employment" />
 					</button>
 				) as any,
-        cell: (info) =>
-          (info.row.original.type === "corporate"
-            ? info.getValue()
-            : capitalize(info.getValue())) || "Not available",
+				cell: (info) => (info.row.original.type === "corporate" ? info.getValue() : capitalize(info.getValue())) || "Not available",
 				enableSorting: true,
-      }
+			},
 		),
 		columnHelper.accessor("demographicInformation.gender", {
 			header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "gender"))}
-        >
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "gender"))}>
 					<span>Gender</span>
 					<SorterArrow name="gender" />
 				</button>
@@ -465,10 +321,7 @@ export default function UserList({
 		}),
 		{
 			header: (
-        <span
-          className="cursor-pointer"
-          onClick={() => setShowDemographicInformation((prev) => !prev)}
-        >
+				<span className="cursor-pointer" onClick={() => setShowDemographicInformation((prev) => !prev)}>
 					Switch
 				</span>
 			),
@@ -480,10 +333,7 @@ export default function UserList({
 	const defaultColumns = [
 		columnHelper.accessor("name", {
 			header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "name"))}
-        >
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "name"))}>
 					<span>Name</span>
 					<SorterArrow name="name" />
 				</button>
@@ -491,30 +341,17 @@ export default function UserList({
 			cell: ({row, getValue}) => (
 				<div
 					className={clsx(
-            PERMISSIONS.updateExpiryDate[row.original.type]?.includes(
-              user.type
-            ) &&
-              "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
+						PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) &&
+							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
 					)}
-          onClick={() =>
-            PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type)
-              ? setSelectedUser(row.original)
-              : null
-          }
-        >
-          {row.original.type === "corporate"
-            ? row.original.corporateInformation?.companyInformation?.name ||
-              getValue()
-            : getValue()}
+					onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}>
+					{row.original.type === "corporate" ? row.original.corporateInformation?.companyInformation?.name || getValue() : getValue()}
 				</div>
 			),
 		}),
 		columnHelper.accessor("email", {
 			header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "email"))}
-        >
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "email"))}>
 					<span>E-mail</span>
 					<SorterArrow name="email" />
 				</button>
@@ -522,27 +359,17 @@ export default function UserList({
 			cell: ({row, getValue}) => (
 				<div
 					className={clsx(
-            PERMISSIONS.updateExpiryDate[row.original.type]?.includes(
-              user.type
-            ) &&
-              "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
+						PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) &&
+							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
 					)}
-          onClick={() =>
-            PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type)
-              ? setSelectedUser(row.original)
-              : null
-          }
-        >
+					onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}>
 					{getValue()}
 				</div>
 			),
 		}),
 		columnHelper.accessor("type", {
 			header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "type"))}
-        >
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "type"))}>
 					<span>Type</span>
 					<SorterArrow name="type" />
 				</button>
@@ -551,54 +378,29 @@ export default function UserList({
 		}),
 		columnHelper.accessor("corporateInformation.companyInformation.name", {
 			header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "companyName"))}
-        >
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "companyName"))}>
 					<span>Company Name</span>
 					<SorterArrow name="companyName" />
 				</button>
 			) as any,
-      cell: (info) => (
-        <CompanyNameCell
-          user={info.row.original}
-          users={users}
-          groups={groups}
-        />
-      ),
+			cell: (info) => <CompanyNameCell user={info.row.original} users={users} groups={groups} />,
 		}),
 		columnHelper.accessor("subscriptionExpirationDate", {
 			header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => setSorter((prev) => selectSorter(prev, "expiryDate"))}
-        >
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "expiryDate"))}>
 					<span>Expiry Date</span>
 					<SorterArrow name="expiryDate" />
 				</button>
 			) as any,
 			cell: (info) => (
-        <span
-          className={clsx(
-            info.getValue()
-              ? expirationDateColor(moment(info.getValue()).toDate())
-              : ""
-          )}
-        >
-          {!info.getValue()
-            ? "No expiry date"
-            : moment(info.getValue()).format("DD/MM/YYYY")}
+				<span className={clsx(info.getValue() ? expirationDateColor(moment(info.getValue()).toDate()) : "")}>
+					{!info.getValue() ? "No expiry date" : moment(info.getValue()).format("DD/MM/YYYY")}
 				</span>
 			),
 		}),
 		columnHelper.accessor("isVerified", {
 			header: (
-        <button
-          className="flex gap-2 items-center"
-          onClick={() =>
-            setSorter((prev) => selectSorter(prev, "verification"))
-          }
-        >
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "verification"))}>
 					<span>Verification</span>
 					<SorterArrow name="verification" />
 				</button>
@@ -609,9 +411,8 @@ export default function UserList({
 						className={clsx(
 							"w-6 h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white",
 							"transition duration-300 ease-in-out",
-              info.getValue() && "!bg-mti-purple-light "
-            )}
-          >
+							info.getValue() && "!bg-mti-purple-light ",
+						)}>
 						<BsCheck color="white" className="w-full h-full" />
 					</div>
 				</div>
@@ -619,10 +420,7 @@ export default function UserList({
 		}),
 		{
 			header: (
-        <span
-          className="cursor-pointer"
-          onClick={() => setShowDemographicInformation((prev) => !prev)}
-        >
+				<span className="cursor-pointer" onClick={() => setShowDemographicInformation((prev) => !prev)}>
 					Switch
 				</span>
 			),
@@ -642,21 +440,15 @@ export default function UserList({
 
 	const sortFunction = async (a: User, b: User) => {
 		if (sorter === "name" || sorter === reverseString("name"))
-      return sorter === "name"
-        ? a.name.localeCompare(b.name)
-        : b.name.localeCompare(a.name);
+			return sorter === "name" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
 
 		if (sorter === "email" || sorter === reverseString("email"))
-      return sorter === "email"
-        ? a.email.localeCompare(b.email)
-        : b.email.localeCompare(a.email);
+			return sorter === "email" ? a.email.localeCompare(b.email) : b.email.localeCompare(a.email);
 
 		if (sorter === "type" || sorter === reverseString("type"))
 			return sorter === "type"
-        ? userTypes.findIndex((t) => a.type === t) -
-            userTypes.findIndex((t) => b.type === t)
-        : userTypes.findIndex((t) => b.type === t) -
-            userTypes.findIndex((t) => a.type === t);
+				? 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 === "verification" || sorter === reverseString("verification"))
 			return sorter === "verification"
@@ -664,138 +456,75 @@ export default function UserList({
 				: b.isVerified.toString().localeCompare(a.isVerified.toString());
 
 		if (sorter === "expiryDate" || sorter === reverseString("expiryDate")) {
-      if (!a.subscriptionExpirationDate && b.subscriptionExpirationDate)
-        return sorter === "expiryDate" ? -1 : 1;
-      if (a.subscriptionExpirationDate && !b.subscriptionExpirationDate)
-        return sorter === "expiryDate" ? 1 : -1;
-      if (!a.subscriptionExpirationDate && !b.subscriptionExpirationDate)
-        return 0;
-      if (
-        moment(a.subscriptionExpirationDate).isAfter(
-          b.subscriptionExpirationDate
-        )
-      )
-        return sorter === "expiryDate" ? -1 : 1;
-      if (
-        moment(b.subscriptionExpirationDate).isAfter(
-          a.subscriptionExpirationDate
-        )
-      )
-        return sorter === "expiryDate" ? 1 : -1;
+			if (!a.subscriptionExpirationDate && b.subscriptionExpirationDate) return sorter === "expiryDate" ? -1 : 1;
+			if (a.subscriptionExpirationDate && !b.subscriptionExpirationDate) return sorter === "expiryDate" ? 1 : -1;
+			if (!a.subscriptionExpirationDate && !b.subscriptionExpirationDate) return 0;
+			if (moment(a.subscriptionExpirationDate).isAfter(b.subscriptionExpirationDate)) return sorter === "expiryDate" ? -1 : 1;
+			if (moment(b.subscriptionExpirationDate).isAfter(a.subscriptionExpirationDate)) return sorter === "expiryDate" ? 1 : -1;
 			return 0;
 		}
 
 		if (sorter === "country" || sorter === reverseString("country")) {
-      if (
-        !a.demographicInformation?.country &&
-        b.demographicInformation?.country
-      )
-        return sorter === "country" ? -1 : 1;
-      if (
-        a.demographicInformation?.country &&
-        !b.demographicInformation?.country
-      )
-        return sorter === "country" ? 1 : -1;
-      if (
-        !a.demographicInformation?.country &&
-        !b.demographicInformation?.country
-      )
-        return 0;
+			if (!a.demographicInformation?.country && b.demographicInformation?.country) return sorter === "country" ? -1 : 1;
+			if (a.demographicInformation?.country && !b.demographicInformation?.country) return sorter === "country" ? 1 : -1;
+			if (!a.demographicInformation?.country && !b.demographicInformation?.country) return 0;
 
 			return sorter === "country"
-        ? a.demographicInformation!.country.localeCompare(
-            b.demographicInformation!.country
-          )
-        : b.demographicInformation!.country.localeCompare(
-            a.demographicInformation!.country
-          );
+				? a.demographicInformation!.country.localeCompare(b.demographicInformation!.country)
+				: b.demographicInformation!.country.localeCompare(a.demographicInformation!.country);
 		}
 
 		if (sorter === "phone" || sorter === reverseString("phone")) {
-      if (!a.demographicInformation?.phone && b.demographicInformation?.phone)
-        return sorter === "phone" ? -1 : 1;
-      if (a.demographicInformation?.phone && !b.demographicInformation?.phone)
-        return sorter === "phone" ? 1 : -1;
-      if (!a.demographicInformation?.phone && !b.demographicInformation?.phone)
-        return 0;
+			if (!a.demographicInformation?.phone && b.demographicInformation?.phone) return sorter === "phone" ? -1 : 1;
+			if (a.demographicInformation?.phone && !b.demographicInformation?.phone) return sorter === "phone" ? 1 : -1;
+			if (!a.demographicInformation?.phone && !b.demographicInformation?.phone) return 0;
 
 			return sorter === "phone"
-        ? a.demographicInformation!.phone.localeCompare(
-            b.demographicInformation!.phone
-          )
-        : b.demographicInformation!.phone.localeCompare(
-            a.demographicInformation!.phone
-          );
+				? a.demographicInformation!.phone.localeCompare(b.demographicInformation!.phone)
+				: b.demographicInformation!.phone.localeCompare(a.demographicInformation!.phone);
 		}
 
 		if (sorter === "employment" || sorter === reverseString("employment")) {
 			const aSortingItem =
-        a.type === "corporate" || a.type === "mastercorporate"
-          ? a.demographicInformation?.position
-          : a.demographicInformation?.employment;
+				a.type === "corporate" || a.type === "mastercorporate" ? a.demographicInformation?.position : a.demographicInformation?.employment;
 			const bSortingItem =
-        b.type === "corporate" || b.type === "mastercorporate"
-          ? b.demographicInformation?.position
-          : b.demographicInformation?.employment;
+				b.type === "corporate" || b.type === "mastercorporate" ? b.demographicInformation?.position : b.demographicInformation?.employment;
 
-      if (!aSortingItem && bSortingItem)
-        return sorter === "employment" ? -1 : 1;
-      if (aSortingItem && !bSortingItem)
-        return sorter === "employment" ? 1 : -1;
+			if (!aSortingItem && bSortingItem) return sorter === "employment" ? -1 : 1;
+			if (aSortingItem && !bSortingItem) return sorter === "employment" ? 1 : -1;
 			if (!aSortingItem && !bSortingItem) return 0;
 
-      return sorter === "employment"
-        ? aSortingItem!.localeCompare(bSortingItem!)
-        : bSortingItem!.localeCompare(aSortingItem!);
+			return sorter === "employment" ? aSortingItem!.localeCompare(bSortingItem!) : bSortingItem!.localeCompare(aSortingItem!);
 		}
 
 		if (sorter === "gender" || sorter === reverseString("gender")) {
-      if (!a.demographicInformation?.gender && b.demographicInformation?.gender)
-        return sorter === "employment" ? -1 : 1;
-      if (a.demographicInformation?.gender && !b.demographicInformation?.gender)
-        return sorter === "employment" ? 1 : -1;
-      if (
-        !a.demographicInformation?.gender &&
-        !b.demographicInformation?.gender
-      )
-        return 0;
+			if (!a.demographicInformation?.gender && b.demographicInformation?.gender) return sorter === "employment" ? -1 : 1;
+			if (a.demographicInformation?.gender && !b.demographicInformation?.gender) return sorter === "employment" ? 1 : -1;
+			if (!a.demographicInformation?.gender && !b.demographicInformation?.gender) return 0;
 
 			return sorter === "gender"
-        ? a.demographicInformation!.gender.localeCompare(
-            b.demographicInformation!.gender
-          )
-        : b.demographicInformation!.gender.localeCompare(
-            a.demographicInformation!.gender
-          );
+				? a.demographicInformation!.gender.localeCompare(b.demographicInformation!.gender)
+				: b.demographicInformation!.gender.localeCompare(a.demographicInformation!.gender);
 		}
 
 		if (sorter === "companyName" || sorter === reverseString("companyName")) {
 			const aCorporateName = getUserCompanyName(a, users, groups);
 			const bCorporateName = getUserCompanyName(b, users, groups);
-      if (!aCorporateName && bCorporateName)
-        return sorter === "companyName" ? -1 : 1;
-      if (aCorporateName && !bCorporateName)
-        return sorter === "companyName" ? 1 : -1;
+			if (!aCorporateName && bCorporateName) return sorter === "companyName" ? -1 : 1;
+			if (aCorporateName && !bCorporateName) return sorter === "companyName" ? 1 : -1;
 			if (!aCorporateName && !bCorporateName) return 0;
 
-      return sorter === "companyName"
-        ? aCorporateName.localeCompare(bCorporateName)
-        : bCorporateName.localeCompare(aCorporateName);
+			return sorter === "companyName" ? aCorporateName.localeCompare(bCorporateName) : bCorporateName.localeCompare(aCorporateName);
 		}
 
 		return a.id.localeCompare(b.id);
 	};
 
-  const { rows: filteredRows, renderSearch } = useListSearch<User>(
-    searchFields,
-    displayUsers
-  );
+	const {rows: filteredRows, renderSearch} = useListSearch<User>(searchFields, displayUsers);
 
 	const table = useReactTable({
 		data: filteredRows,
-    columns: (!showDemographicInformation
-      ? defaultColumns
-      : demographicColumns) as any,
+		columns: (!showDemographicInformation ? defaultColumns : demographicColumns) as any,
 		getCoreRowModel: getCoreRowModel(),
 	});
 
@@ -816,19 +545,13 @@ export default function UserList({
 	const belongsToAdminFilter = (x: User) => {
 		if (!selectedUser) return false;
 		return groups
-      .filter(
-        (g) =>
-          g.admin === selectedUser.id ||
-          g.participants.includes(selectedUser.id)
-      )
+			.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
 			.flatMap((g) => g.participants)
 			.includes(x.id);
 	};
 
-  const viewStudentFilterBelongsToAdmin = (x: User) =>
-    x.type === "student" && belongsToAdminFilter(x);
-  const viewTeacherFilterBelongsToAdmin = (x: User) =>
-    x.type === "teacher" && belongsToAdminFilter(x);
+	const viewStudentFilterBelongsToAdmin = (x: User) => x.type === "student" && belongsToAdminFilter(x);
+	const viewTeacherFilterBelongsToAdmin = (x: User) => x.type === "teacher" && belongsToAdminFilter(x);
 
 	const renderUserCard = (selectedUser: User) => {
 		const studentsFromAdmin = users.filter(viewStudentFilterBelongsToAdmin);
@@ -838,9 +561,7 @@ export default function UserList({
 				<UserCard
 					loggedInUser={user}
 					onViewStudents={
-            (selectedUser.type === "corporate" ||
-              selectedUser.type === "teacher") &&
-            studentsFromAdmin.length > 0
+						(selectedUser.type === "corporate" || selectedUser.type === "teacher") && studentsFromAdmin.length > 0
 							? () => {
 									appendUserFilters({
 										id: "view-students",
@@ -856,9 +577,7 @@ export default function UserList({
 							: undefined
 					}
 					onViewTeachers={
-            (selectedUser.type === "corporate" ||
-              selectedUser.type === "student") &&
-            teachersFromAdmin.length > 0
+						(selectedUser.type === "corporate" || selectedUser.type === "student") && teachersFromAdmin.length > 0
 							? () => {
 									appendUserFilters({
 										id: "view-teachers",
@@ -907,20 +626,13 @@ export default function UserList({
 		<>
 			{renderHeader && renderHeader(displayUsers.length)}
 			<div className="w-full">
-        <Modal
-          isOpen={!!selectedUser}
-          onClose={() => setSelectedUser(undefined)}
-        >
+				<Modal isOpen={!!selectedUser} onClose={() => setSelectedUser(undefined)}>
 					{selectedUser && renderUserCard(selectedUser)}
 				</Modal>
 				<div className="w-full flex flex-col gap-2">
 					<div className="w-full flex gap-2 items-end">
 						{renderSearch()}
-            <Button
-              className="w-full max-w-[200px] mb-1"
-              variant="outline"
-              onClick={downloadExcel}
-            >
+						<Button className="w-full max-w-[200px] mb-1" variant="outline" onClick={downloadExcel}>
 							Download List
 						</Button>
 					</div>
@@ -930,12 +642,7 @@ export default function UserList({
 								<tr key={headerGroup.id}>
 									{headerGroup.headers.map((header) => (
 										<th className="py-4 px-4 text-left" key={header.id}>
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
+											{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
 										</th>
 									))}
 								</tr>
@@ -943,16 +650,10 @@ export default function UserList({
 						</thead>
 						<tbody className="px-2">
 							{table.getRowModel().rows.map((row) => (
-                <tr
-                  className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
-                  key={row.id}
-                >
+								<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
 									{row.getVisibleCells().map((cell) => (
 										<td className="px-4 py-2 items-center w-fit" key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
+											{flexRender(cell.column.columnDef.cell, cell.getContext())}
 										</td>
 									))}
 								</tr>

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

@@ -8,8 +8,11 @@ import GroupList from "./GroupList";
 import PackageList from "./PackageList";
 import UserList from "./UserList";
 import {checkAccess} from "@/utils/permissions";
+import usePermissions from "@/hooks/usePermissions";
 
 export default function Lists({user}: {user: User}) {
+	const {permissions} = usePermissions(user?.id || "");
+
 	return (
 		<Tab.Group>
 			<Tab.List className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
@@ -19,12 +22,9 @@ export default function Lists({ user }: { user: User }) {
 							"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
 							"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
 							"transition duration-300 ease-in-out",
-              selected
-                ? "bg-white shadow"
-                : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
+							selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
 						)
-          }
-        >
+					}>
 					User List
 				</Tab>
 				{checkAccess(user, ["developer"]) && (
@@ -34,12 +34,9 @@ export default function Lists({ user }: { user: User }) {
 								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
 								"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
 								"transition duration-300 ease-in-out",
-                selected
-                  ? "bg-white shadow"
-                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
+								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
 							)
-            }
-          >
+						}>
 						Exam List
 					</Tab>
 				)}
@@ -49,12 +46,9 @@ export default function Lists({ user }: { user: User }) {
 							"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
 							"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
 							"transition duration-300 ease-in-out",
-              selected
-                ? "bg-white shadow"
-                : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
+							selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
 						)
-          }
-        >
+					}>
 					Group List
 				</Tab>
 				{checkAccess(user, ["developer", "admin", "corporate"]) && (
@@ -64,12 +58,9 @@ export default function Lists({ user }: { user: User }) {
 								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
 								"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
 								"transition duration-300 ease-in-out",
-                selected
-                  ? "bg-white shadow"
-                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
+								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
 							)
-            }
-          >
+						}>
 						Code List
 					</Tab>
 				)}
@@ -80,12 +71,9 @@ export default function Lists({ user }: { user: User }) {
 								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
 								"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
 								"transition duration-300 ease-in-out",
-                selected
-                  ? "bg-white shadow"
-                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
+								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
 							)
-            }
-          >
+						}>
 						Package List
 					</Tab>
 				)}
@@ -96,12 +84,9 @@ export default function Lists({ user }: { user: User }) {
 								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
 								"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
 								"transition duration-300 ease-in-out",
-                selected
-                  ? "bg-white shadow"
-                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
+								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
 							)
-            }
-          >
+						}>
 						Discount List
 					</Tab>
 				)}
@@ -118,11 +103,7 @@ export default function Lists({ user }: { user: User }) {
 				<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
 					<GroupList user={user} />
 				</Tab.Panel>
-        {checkAccess(
-          user,
-          ["developer", "admin", "corporate", "mastercorporate"],
-          "viewCodes"
-        ) && (
+				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"], permissions, "viewCodes") && (
 					<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
 						<CodeList user={user} />
 					</Tab.Panel>

src/pages/api/permissions/[id].ts

@@ -1,9 +1,10 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 import type {NextApiRequest, NextApiResponse} from "next";
 import {app} from "@/firebase";
-import { getFirestore, doc, setDoc } from "firebase/firestore";
+import {getFirestore, doc, setDoc, getDoc} from "firebase/firestore";
 import {withIronSessionApiRoute} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
+import {getPermissionDoc} from "@/utils/permissions.be";
 
 const db = getFirestore(app);
 
@@ -11,6 +12,19 @@ export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
 	if (req.method === "PATCH") return patch(req, res);
+	if (req.method === "GET") return get(req, res);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	const {id} = req.query as {id: string};
+
+	const permissionDoc = await getPermissionDoc(id);
+	return res.status(200).json({allowed: permissionDoc.users.includes(req.session.user.id)});
 }
 
 async function patch(req: NextApiRequest, res: NextApiResponse) {
@@ -18,8 +32,10 @@ async function patch(req: NextApiRequest, res: NextApiResponse) {
 		res.status(401).json({ok: false});
 		return;
 	}
+
 	const {id} = req.query as {id: string};
 	const {users} = req.body;
+
 	try {
 		await setDoc(doc(db, "permissions", id), {users}, {merge: true});
 		return res.status(200).json({ok: true});

src/pages/api/tickets/index.ts

@@ -53,7 +53,10 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 
 	// based on the admin of each group, verify if it exists and it's of type corporate
 	const groupsAdmins = [...new Set(groups.map((g) => g.admin).filter((id) => id))];
-	const adminsSnapshot = await getDocs(query(collection(db, "users"), where("id", "in", groupsAdmins), where("type", "==", "corporate")));
+	const adminsSnapshot =
+		groupsAdmins.length > 0
+			? await getDocs(query(collection(db, "users"), where("id", "in", groupsAdmins), where("type", "==", "corporate")))
+			: {docs: []};
 	const admins = adminsSnapshot.docs.map((doc) => doc.data());
 
 	const docsWithAdmins = docs.map((d) => {

src/pages/api/user.ts

@@ -2,17 +2,7 @@ import { PERMISSIONS } from "@/constants/userPermissions";
 import {app, adminApp} from "@/firebase";
 import {Group, User} from "@/interfaces/user";
 import {sessionOptions} from "@/lib/session";
-import {
-  collection,
-  deleteDoc,
-  doc,
-  getDoc,
-  getDocs,
-  getFirestore,
-  query,
-  setDoc,
-  where,
-} from "firebase/firestore";
+import {collection, deleteDoc, doc, getDoc, getDocs, getFirestore, query, setDoc, where} from "firebase/firestore";
 import {getAuth} from "firebase-admin/auth";
 import {withIronSessionApiRoute} from "iron-session/next";
 import {NextApiRequest, NextApiResponse} from "next";
@@ -54,18 +44,10 @@ async function del(req: NextApiRequest, res: NextApiResponse) {
 
 	const targetUser = {...docTargetUser.data(), id: docTargetUser.id} as User;
 
-  if (
-    user.type === "corporate" &&
-    (targetUser.type === "student" || targetUser.type === "teacher")
-  ) {
+	if (user.type === "corporate" && (targetUser.type === "student" || targetUser.type === "teacher")) {
 		res.json({ok: true});
 
-    const userParticipantGroup = await getDocs(
-      query(
-        collection(db, "groups"),
-        where("participants", "array-contains", id)
-      )
-    );
+		const userParticipantGroup = await getDocs(query(collection(db, "groups"), where("participants", "array-contains", id)));
 		await Promise.all([
 			...userParticipantGroup.docs
 				.filter((x) => (x.data() as Group).admin === user.id)
@@ -74,12 +56,10 @@ async function del(req: NextApiRequest, res: NextApiResponse) {
 						await setDoc(
 							x.ref,
 							{
-                participants: x
-                  .data()
-                  .participants.filter((y: string) => y !== id),
+								participants: x.data().participants.filter((y: string) => y !== id),
 							},
-              { merge: true }
-            )
+							{merge: true},
+						),
 				),
 		]);
 
@@ -96,18 +76,10 @@ async function del(req: NextApiRequest, res: NextApiResponse) {
 
 	await auth.deleteUser(id);
 	await deleteDoc(doc(db, "users", id));
-  const userCodeDocs = await getDocs(
-    query(collection(db, "codes"), where("userId", "==", id))
-  );
-  const userParticipantGroup = await getDocs(
-    query(collection(db, "groups"), where("participants", "array-contains", id))
-  );
-  const userGroupAdminDocs = await getDocs(
-    query(collection(db, "groups"), where("admin", "==", id))
-  );
-  const userStatsDocs = await getDocs(
-    query(collection(db, "stats"), where("user", "==", id))
-  );
+	const userCodeDocs = await getDocs(query(collection(db, "codes"), where("userId", "==", id)));
+	const userParticipantGroup = await getDocs(query(collection(db, "groups"), where("participants", "array-contains", id)));
+	const userGroupAdminDocs = await getDocs(query(collection(db, "groups"), where("admin", "==", id)));
+	const userStatsDocs = await getDocs(query(collection(db, "stats"), where("user", "==", id)));
 
 	await Promise.all([
 		...userCodeDocs.docs.map(async (x) => await deleteDoc(x.ref)),
@@ -120,8 +92,8 @@ async function del(req: NextApiRequest, res: NextApiResponse) {
 					{
 						participants: x.data().participants.filter((y: string) => y !== id),
 					},
-          { merge: true }
-        )
+					{merge: true},
+				),
 		),
 	]);
 }
@@ -136,19 +108,13 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 
 		const user = docUser.data() as User;
 
-    const permissionDocs = await getPermissionDocs();
-
-	const userWithPermissions = {
-		...user,
-		permissions: getPermissions(req.session.user.id, permissionDocs),
-	};
 		req.session.user = {
-      ...userWithPermissions,
+			...user,
 			id: req.session.user.id,
 		};
 		await req.session.save();
 
-    res.json({ ...userWithPermissions, id: req.session.user.id });
+		res.json({...user, id: req.session.user.id});
 	} else {
 		res.status(401).json(undefined);
 	}

src/pages/settings.tsx

@@ -15,6 +15,7 @@ import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import ExamGenerator from "./(admin)/ExamGenerator";
 import BatchCreateUser from "./(admin)/BatchCreateUser";
 import {checkAccess, getTypesOfUser} from "@/utils/permissions";
+import usePermissions from "@/hooks/usePermissions";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -43,6 +44,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 
 export default function Admin() {
 	const {user} = useUser({redirectTo: "/login"});
+	const {permissions} = usePermissions(user?.id || "");
 
 	return (
 		<>
@@ -61,7 +63,7 @@ export default function Admin() {
 					<section className="w-full flex -md:flex-col -xl:gap-2 gap-8 justify-between">
 						<ExamLoader />
 						<BatchCreateUser user={user} />
-						{checkAccess(user, getTypesOfUser(["teacher"]), 'viewCodes') && (
+						{checkAccess(user, getTypesOfUser(["teacher"]), permissions, "viewCodes") && (
 							<>
 								<CodeGenerator user={user} />
 								<BatchCodeGenerator user={user} />

src/utils/permissions.ts

@@ -1,11 +1,8 @@
 import {PermissionType} from "@/interfaces/permissions";
 import {User, Type, userTypes} from "@/interfaces/user";
+import axios from "axios";
 
-export function checkAccess(
-  user: User,
-  types: Type[],
-  permission?: PermissionType
-) {
+export function checkAccess(user: User, types: Type[], permissions?: PermissionType[], permission?: PermissionType) {
 	if (!user) {
 		return false;
 	}
@@ -29,7 +26,7 @@ export function checkAccess(
 	if (permission) {
 		// this works more like a blacklist
 		// therefore if we don't find the permission here, he can't do it
-    if (!(user.permissions || []).includes(permission)) {
+		if (!(permissions || []).includes(permission)) {
 			return false;
 		}
 	}
@@ -41,5 +38,5 @@ export function getTypesOfUser(types: Type[]) {
 	// basicly generate a list of all types except the excluded ones
 	return userTypes.filter((userType) => {
 		return !types.includes(userType);
-    })
+	});
 }