Added new permission system

2024-07-24 18:52:02 +01:00
parent daa27e41b3
commit 19d16c9cef
14 changed files with 1071 additions and 263 deletions
--- a/src/components/High/Layout.tsx
+++ b/src/components/High/Layout.tsx
@@ -33,8 +33,7 @@ export default function Layout({user, children, className, navDisabled = false,
 					focusMode={focusMode}
 					onFocusLayerMouseEnter={onFocusLayerMouseEnter}
 					className="-md:hidden"
-					userType={user.type}
-					userId={user.id}
+					user={user}
 				/>
 				<div
 					className={clsx(
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -12,6 +12,7 @@ import {
  BsCloudFill,
  BsCurrencyDollar,
  BsClipboardData,
+  BsFileLock,
 } from "react-icons/bs";
 import { RiLogoutBoxFill } from "react-icons/ri";
 import { SlPencil } from "react-icons/sl";
@@ -23,16 +24,16 @@ import FocusLayer from "@/components/FocusLayer";
 import { preventNavigation } from "@/utils/navigation.disabled";
 import { useEffect, useState } from "react";
 import usePreferencesStore from "@/stores/preferencesStore";
-import {Type} from "@/interfaces/user";
+import { User } from "@/interfaces/user";
 import useTicketsListener from "@/hooks/useTicketsListener";
+import { checkAccess, getTypesOfUser } from "@/utils/permissions";
 interface Props {
  path: string;
  navDisabled?: boolean;
  focusMode?: boolean;
  onFocusLayerMouseEnter?: () => void;
  className?: string;
-	userType?: Type;
-	userId?: string;
+  user: User;
 }

 interface NavProps {
@@ -45,17 +46,28 @@ interface NavProps {
  badge?: number;
 }

-const Nav = ({Icon, label, path, keyPath, disabled = false, isMinimized = false, badge}: NavProps) => {
+const Nav = ({
+  Icon,
+  label,
+  path,
+  keyPath,
+  disabled = false,
+  isMinimized = false,
+  badge,
+}: NavProps) => {
  return (
    <Link
      href={!disabled ? keyPath : ""}
      className={clsx(
        "flex items-center gap-4 rounded-full p-4 text-gray-500 hover:text-white",
        "transition-all duration-300 ease-in-out relative",
-				disabled ? "hover:bg-mti-gray-dim cursor-not-allowed" : "hover:bg-mti-purple-light cursor-pointer",
+        disabled
+          ? "hover:bg-mti-gray-dim cursor-not-allowed"
+          : "hover:bg-mti-purple-light cursor-pointer",
        path === keyPath && "bg-mti-purple-light text-white",
-				isMinimized ? "w-fit" : "w-full min-w-[200px] px-8 2xl:min-w-[220px]",
-			)}>
+        isMinimized ? "w-fit" : "w-full min-w-[200px] px-8 2xl:min-w-[220px]"
+      )}
+    >
      <Icon size={24} />
      {!isMinimized && <span className="text-lg font-semibold">{label}</span>}
      {!!badge && badge > 0 && (
@@ -63,8 +75,9 @@ const Nav = ({Icon, label, path, keyPath, disabled = false, isMinimized = false,
          className={clsx(
            "bg-mti-purple-light h-5 w-5 text-xs rounded-full flex items-center justify-center text-white",
            "transition ease-in-out duration-300",
-						isMinimized && "absolute right-0 top-0",
-					)}>
+            isMinimized && "absolute right-0 top-0"
+          )}
+        >
          {badge}
        </div>
      )}
@@ -72,12 +85,22 @@ const Nav = ({Icon, label, path, keyPath, disabled = false, isMinimized = false,
  );
 };

-export default function Sidebar({path, navDisabled = false, focusMode = false, userType, onFocusLayerMouseEnter, className, userId}: Props) {
+export default function Sidebar({
+  path,
+  navDisabled = false,
+  focusMode = false,
+  user,
+  onFocusLayerMouseEnter,
+  className,
+}: Props) {
  const router = useRouter();

-	const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [state.isSidebarMinimized, state.toggleSidebarMinimized]);
+  const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [
+    state.isSidebarMinimized,
+    state.toggleSidebarMinimized,
+  ]);

-	const {totalAssignedTickets} = useTicketsListener(userId);
+  const { totalAssignedTickets } = useTicketsListener(user.id);

  const logout = async () => {
    axios.post("/api/logout").finally(() => {
@@ -92,12 +115,23 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
      className={clsx(
        "relative flex h-full flex-col justify-between bg-transparent px-4 py-4 pb-8",
        isMinimized ? "w-fit" : "-xl:w-fit w-1/6",
-				className,
-			)}>
+        className
+      )}
+    >
      <div className="-xl:hidden flex-col gap-3 xl:flex">
-				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={isMinimized} />
-				{(userType === "student" || userType === "teacher" || userType === "developer") && (
-					<>
+        <Nav
+          disabled={disableNavigation}
+          Icon={MdSpaceDashboard}
+          label="Dashboard"
+          path={path}
+          keyPath="/"
+          isMinimized={isMinimized}
+        />
+        {checkAccess(
+          user,
+          ["student", "teacher", "developer"],
+          "viewExams"
+        ) && (
          <Nav
            disabled={disableNavigation}
            Icon={BsFileEarmarkText}
@@ -106,6 +140,12 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
            keyPath="/exam"
            isMinimized={isMinimized}
          />
+        )}
+        {checkAccess(
+          user,
+          ["student", "teacher", "developer"],
+          "viewExercises"
+        ) && (
          <Nav
            disabled={disableNavigation}
            Icon={BsPencil}
@@ -114,15 +154,32 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
            keyPath="/exercises"
            isMinimized={isMinimized}
          />
-					</>
        )}
-				{(userType || "") !== 'agent' && (
-					<>
-						<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
-						<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />
-					</>
+        {checkAccess(user, getTypesOfUser(["agent"]), "viewStats") && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsGraphUp}
+            label="Stats"
+            path={path}
+            keyPath="/stats"
+            isMinimized={isMinimized}
+          />
        )}
-				{["admin", "developer", "agent", "corporate", "mastercorporate"].includes(userType || "") && (
+        {checkAccess(user, getTypesOfUser(["agent"]), "viewRecords") && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsClockHistory}
+            label="Record"
+            path={path}
+            keyPath="/record"
+            isMinimized={isMinimized}
+          />
+        )}
+        {checkAccess(
+          user,
+          ["admin", "developer", "agent", "corporate", "mastercorporate"],
+          "viewPaymentRecords"
+        ) && (
          <Nav
            disabled={disableNavigation}
            Icon={BsCurrencyDollar}
@@ -132,7 +189,13 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
            isMinimized={isMinimized}
          />
        )}
-				{["admin", "developer", "corporate", "teacher", "mastercorporate"].includes(userType || "") && (
+        {checkAccess(user, [
+          "admin",
+          "developer",
+          "corporate",
+          "teacher",
+          "mastercorporate",
+        ]) && (
          <Nav
            disabled={disableNavigation}
            Icon={BsShieldFill}
@@ -142,7 +205,23 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
            isMinimized={isMinimized}
          />
        )}
-				{["admin", "developer", "agent"].includes(userType || "") && (
+        {checkAccess(user, [
+          "admin",
+          "developer",
+          "corporate",
+          "teacher",
+          "mastercorporate",
+        ]) && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsShieldFill}
+            label="Permissions"
+            path={path}
+            keyPath="/permissions"
+            isMinimized={isMinimized}
+          />
+        )}
+        {checkAccess(user, ["admin", "developer", "agent"], "viewTickets") && (
          <Nav
            disabled={disableNavigation}
            Icon={BsClipboardData}
@@ -153,7 +232,8 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
            badge={totalAssignedTickets}
          />
        )}
-				{userType === "developer" && (
+        {checkAccess(user, ["developer"]) && (
+          <>
            <Nav
              disabled={disableNavigation}
              Icon={BsCloudFill}
@@ -162,24 +242,102 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
              keyPath="/generation"
              isMinimized={isMinimized}
            />
+            <Nav
+              disabled={disableNavigation}
+              Icon={BsFileLock}
+              label="Permissions"
+              path={path}
+              keyPath="/permissions"
+              isMinimized={isMinimized}
+            />
+          </>
        )}
      </div>
      <div className="-xl:flex flex-col gap-3 xl:hidden">
-				<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} />
-				{(userType || "") !== 'agent' && (
+        <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") && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsGraphUp}
+            label="Stats"
+            path={path}
+            keyPath="/stats"
+            isMinimized={true}
+          />
+        )}
+        {checkAccess(user, getTypesOfUser(["agent"]), "viewRecords") && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsClockHistory}
+            label="Record"
+            path={path}
+            keyPath="/record"
+            isMinimized={true}
+          />
+        )}
+        {checkAccess(user, getTypesOfUser(["student"])) && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsShieldFill}
+            label="Settings"
+            path={path}
+            keyPath="/settings"
+            isMinimized={true}
+          />
+        )}
+        {checkAccess(user, getTypesOfUser(["student"])) && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsShieldFill}
+            label="Permissions"
+            path={path}
+            keyPath="/permissions"
+            isMinimized={true}
+          />
+        )}
+        {checkAccess(user, ["developer"]) && (
          <>
-						<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={true} />
-						<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={true} />
+            <Nav
+              disabled={disableNavigation}
+              Icon={BsCloudFill}
+              label="Generation"
+              path={path}
+              keyPath="/generation"
+              isMinimized={true}
+            />
+            <Nav
+              disabled={disableNavigation}
+              Icon={BsFileLock}
+              label="Permissions"
+              path={path}
+              keyPath="/permissions"
+              isMinimized={true}
+            />
          </>
        )}
-				{userType !== "student" && (
-					<Nav disabled={disableNavigation} Icon={BsShieldFill} label="Settings" path={path} keyPath="/settings" isMinimized={true} />
-				)}
-				{userType === "developer" && (
-					<Nav disabled={disableNavigation} Icon={BsCloudFill} label="Generation" path={path} keyPath="/generation" isMinimized={true} />
-				)}
      </div>

      <div className="fixed bottom-12 flex flex-col gap-0">
@@ -189,10 +347,17 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
          onClick={toggleMinimize}
          className={clsx(
            "hover:text-mti-rose -xl:hidden flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
-						isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
-					)}>
-					{isMinimized ? <BsChevronBarRight size={24} /> : <BsChevronBarLeft size={24} />}
-					{!isMinimized && <span className="text-lg font-medium">Minimize</span>}
+            isMinimized ? "w-fit" : "w-full min-w-[250px] px-8"
+          )}
+        >
+          {isMinimized ? (
+            <BsChevronBarRight size={24} />
+          ) : (
+            <BsChevronBarLeft size={24} />
+          )}
+          {!isMinimized && (
+            <span className="text-lg font-medium">Minimize</span>
+          )}
        </div>
        <div
          role="button"
@@ -200,13 +365,18 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
          onClick={focusMode ? () => {} : logout}
          className={clsx(
            "hover:text-mti-rose flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
-						isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
-					)}>
+            isMinimized ? "w-fit" : "w-full min-w-[250px] px-8"
+          )}
+        >
          <RiLogoutBoxFill size={24} />
-					{!isMinimized && <span className="-xl:hidden text-lg font-medium">Log Out</span>}
+          {!isMinimized && (
+            <span className="-xl:hidden text-lg font-medium">Log Out</span>
+          )}
        </div>
      </div>
-			{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
+      {focusMode && (
+        <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
+      )}
    </section>
  );
 }
--- a/src/interfaces/permissions.ts
+++ b/src/interfaces/permissions.ts
@@ -0,0 +1,49 @@
+export const markets = ["au", "br", "de"] as const;
+
+export const permissions = [
+  // generate codes are basicly invites
+  "createCodeStudent",
+  "createCodeTeacher",
+  "createCodeCorporate",
+  "createCodeCountryManager",
+  "createCodeAdmin",
+  // exams
+  "createReadingExam",
+  "createListeningExam",
+  "createWritingExam",
+  "createSpeakingExam",
+  "createLevelExam",
+  // view pages
+  "viewExams",
+  "viewExercises",
+  "viewRecords",
+  "viewStats",
+  "viewTickets",
+  "viewPaymentRecords",
+  // view data
+  "viewStudent",
+  "viewTeacher",
+  "viewCorporate",
+  "viewCountryManager",
+  "viewAdmin",
+  // edit data
+  "editStudent",
+  "editTeacher",
+  "editCorporate",
+  "editCountryManager",
+  "editAdmin",
+  // delete data
+  "deleteStudent",
+  "deleteTeacher",
+  "deleteCorporate",
+  "deleteCountryManager",
+  "deleteAdmin",
+] as const;
+
+export type PermissionType = (typeof permissions)[keyof typeof permissions];
+
+export interface Permission {
+  id: string;
+  type: PermissionType;
+  users: string[];
+}
--- a/src/interfaces/user.ts
+++ b/src/interfaces/user.ts
@@ -1,5 +1,6 @@
 import { Module } from ".";
 import { InstructorGender } from "./exam";
+import { PermissionType } from "./permissions";

 export type User =
  | StudentUser
@@ -26,6 +27,7 @@ export interface BasicUser {
  subscriptionExpirationDate?: null | Date;
  registrationDate?: Date;
  status: UserStatus;
+  permissions: PermissionType[],
 }

 export interface StudentUser extends BasicUser {
--- a/src/pages/api/permissions/[id].ts
+++ b/src/pages/api/permissions/[id].ts
@@ -0,0 +1,30 @@
+// 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 { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "PATCH") return patch(req, res);
+}
+
+async function patch(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    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 });
+  } catch (err) {
+    console.error(err);
+    return res.status(500).json({ ok: false });
+  }
+}
--- a/src/pages/api/permissions/bootstrap.ts
+++ b/src/pages/api/permissions/bootstrap.ts
@@ -0,0 +1,43 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+import { app } from "@/firebase";
+import {
+  getFirestore,
+  collection,
+  getDocs,
+  query,
+  where,
+  doc,
+  setDoc,
+  addDoc,
+  getDoc,
+  deleteDoc,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { Permission } from "@/interfaces/permissions";
+import { bootstrap } from "@/utils/permissions.be";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  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;
+  }
+
+  console.log("Boostrap");
+  try {
+    await bootstrap();
+    return res.status(200).json({ ok: true });
+  } catch (err) {
+    console.error("Failed to update permissions", err);
+    return res.status(500).json({ ok: false });
+  }
+}
--- a/src/pages/api/permissions/index.ts
+++ b/src/pages/api/permissions/index.ts
@@ -0,0 +1,36 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+import { app } from "@/firebase";
+import {
+  getFirestore,
+  collection,
+  getDocs,
+  query,
+  where,
+  doc,
+  setDoc,
+  addDoc,
+  getDoc,
+  deleteDoc,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { Permission } from "@/interfaces/permissions";
+import { getPermissions, getPermissionDocs } from "@/utils/permissions.be";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  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 docs = await getPermissionDocs();
+  res.status(200).json(docs);
+}
--- a/src/pages/api/user.ts
+++ b/src/pages/api/user.ts
@@ -2,10 +2,21 @@ 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";
+import { getPermissions, getPermissionDocs } from "@/utils/permissions.be";

 const db = getFirestore(app);
 const auth = getAuth(adminApp);
@@ -43,14 +54,33 @@ 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)
-				.map(async (x) => await setDoc(x.ref, {participants: x.data().participants.filter((y: string) => y !== id)}, {merge: true})),
+        .map(
+          async (x) =>
+            await setDoc(
+              x.ref,
+              {
+                participants: x
+                  .data()
+                  .participants.filter((y: string) => y !== id),
+              },
+              { merge: true }
+            )
+        ),
    ]);

    return;
@@ -66,17 +96,32 @@ 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)),
    ...userGroupAdminDocs.docs.map(async (x) => await deleteDoc(x.ref)),
    ...userStatsDocs.docs.map(async (x) => await deleteDoc(x.ref)),
    ...userParticipantGroup.docs.map(
-			async (x) => await setDoc(x.ref, {participants: x.data().participants.filter((y: string) => y !== id)}, {merge: true}),
+      async (x) =>
+        await setDoc(
+          x.ref,
+          {
+            participants: x.data().participants.filter((y: string) => y !== id),
+          },
+          { merge: true }
+        )
    ),
  ]);
 }
@@ -91,10 +136,19 @@ async function get(req: NextApiRequest, res: NextApiResponse) {

    const user = docUser.data() as User;
 	
-		req.session.user = {...user, id: req.session.user.id};
+    const permissionDocs = await getPermissionDocs();
+
+	const userWithPermissions = {
+		...user,
+		permissions: getPermissions(req.session.user.id, permissionDocs),
+	};
+    req.session.user = {
+      ...userWithPermissions,
+      id: req.session.user.id,
+    };
    await req.session.save();

-		res.json({...user, id: req.session.user.id});
+    res.json({ ...userWithPermissions, id: req.session.user.id });
  } else {
    res.status(401).json(undefined);
  }
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -8,7 +8,6 @@ import {useEffect, useState} from "react";
 import useStats from "@/hooks/useStats";
 import {averageScore, groupBySession, totalExams} from "@/utils/stats";
 import useUser from "@/hooks/useUser";
-import Sidebar from "@/components/Sidebar";
 import Diagnostic from "@/components/Diagnostic";
 import {ToastContainer} from "react-toastify";
 import {capitalize} from "lodash";
--- a/src/pages/permissions/[id].tsx
+++ b/src/pages/permissions/[id].tsx
@@ -0,0 +1,190 @@
+/* eslint-disable @next/next/no-img-element */
+import Head from "next/head";
+import { useState } from "react";
+import { withIronSessionSsr } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { Permission, PermissionType } from "@/interfaces/permissions";
+import { getPermissionDoc } from "@/utils/permissions.be";
+import { User } from "@/interfaces/user";
+import Layout from "@/components/High/Layout";
+import { getUsers } from "@/utils/users.be";
+import { BsTrash } from "react-icons/bs";
+import Select from "@/components/Low/Select";
+import Button from "@/components/Low/Button";
+import axios from "axios";
+import { toast, ToastContainer } from "react-toastify";
+
+interface BasicUser {
+  id: string;
+  name: string;
+}
+
+interface PermissionWithBasicUsers {
+  id: string;
+  type: PermissionType;
+  users: BasicUser[];
+}
+
+export const getServerSideProps = withIronSessionSsr(async (context) => {
+  const { req, params } = context;
+  const user = req.session.user;
+
+  if (!user || !user.isVerified) {
+    return {
+      redirect: {
+        destination: "/login",
+        permanent: false,
+      },
+    };
+  }
+
+  if (shouldRedirectHome(user)) {
+    return {
+      redirect: {
+        destination: "/",
+        permanent: false,
+      },
+    };
+  }
+
+  if (!params?.id) {
+    return {
+      redirect: {
+        destination: "/permissions",
+        permanent: false,
+      },
+    };
+  }
+
+  // Fetch data from external API
+  const permission: Permission = await getPermissionDoc(params.id as string);
+
+  const allUserData: User[] = await getUsers();
+  const users = allUserData.map((u) => ({
+    id: u.id,
+    name: u.name,
+  })) as BasicUser[];
+
+  // const res = await fetch("api/permissions");
+  // const permissions: Permission[] = await res.json();
+  // Pass data to the page via props
+  const usersData: BasicUser[] = permission.users.reduce(
+    (acc: BasicUser[], userId) => {
+      const user = users.find((u) => u.id === userId) as BasicUser;
+      if (user) {
+        acc.push(user);
+      }
+      return acc;
+    },
+    []
+  );
+
+  return {
+    props: {
+      // permissions: permissions.map((p) => ({ id: p.id, type: p.type })),
+      permission: {
+        ...permission,
+        id: params.id,
+        users: usersData,
+      },
+      user: req.session.user,
+      users,
+    },
+  };
+}, sessionOptions);
+
+interface Props {
+  permission: PermissionWithBasicUsers;
+  user: User;
+  users: BasicUser[];
+}
+
+export default function Page(props: Props) {
+  console.log("Props", props);
+
+  const { permission, user, users } = props;
+
+  const [selectedUsers, setSelectedUsers] = useState<string[]>(() =>
+    permission.users.map((u) => u.id)
+  );
+
+  const onChange = (value: any) => {
+    console.log("value", value);
+    setSelectedUsers((prev) => {
+      if (value?.value) {
+        return [...prev, value?.value];
+      }
+      return prev;
+    });
+  };
+  const removeUser = (id: string) => {
+    setSelectedUsers((prev) => prev.filter((u) => u !== id));
+  };
+
+  const update = async () => {
+    console.log("update", selectedUsers);
+    try {
+      await axios.patch(`/api/permissions/${permission.id}`, {
+        users: selectedUsers,
+      });
+      toast.success("Permission updated");
+    } catch (err) {
+      toast.error("Failed to update permission");
+    }
+  };
+
+  return (
+    <>
+      <Head>
+        <title>EnCoach</title>
+        <meta
+          name="description"
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <ToastContainer />
+      <Layout user={user} className="gap-6">
+        <h1 className="text-2xl font-semibold">
+          Permission: {permission.type as string}
+        </h1>
+        <div className="flex gap-3">
+          <Select
+            value={null}
+            options={users
+              .filter((u) => !selectedUsers.includes(u.id))
+              .map((u) => ({
+                label: u.name,
+                value: u.id,
+              }))}
+            onChange={onChange}
+          />
+          <Button onClick={update}>Update</Button>
+        </div>
+        <div className="flex flex-col gap-3">
+          <h2>Blacklisted Users</h2>
+          <div className="flex gap-3 flex-wrap">
+            {selectedUsers.map((userId) => {
+              const name = users.find((u) => u.id === userId)?.name;
+              return (
+                <div
+                  className="flex p-4 rounded-xl w-auto bg-mti-purple-light text-white gap-4"
+                  key={userId}
+                >
+                  <span className="text-base">{name}</span>
+                  <BsTrash
+                    style={{ cursor: "pointer" }}
+                    onClick={() => removeUser(userId)}
+                    size={20}
+                  />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </Layout>
+    </>
+  );
+}
--- a/src/pages/permissions/index.tsx
+++ b/src/pages/permissions/index.tsx
@@ -0,0 +1,94 @@
+/* eslint-disable @next/next/no-img-element */
+import Head from "next/head";
+import { withIronSessionSsr } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { Permission } from "@/interfaces/permissions";
+import { getPermissionDocs } from "@/utils/permissions.be";
+import { User } from "@/interfaces/user";
+import Layout from "@/components/High/Layout";
+import Link from "next/link";
+
+export const getServerSideProps = withIronSessionSsr(async ({ req }) => {
+  const user = req.session.user;
+
+  if (!user || !user.isVerified) {
+    return {
+      redirect: {
+        destination: "/login",
+        permanent: false,
+      },
+    };
+  }
+
+  if (shouldRedirectHome(user)) {
+    return {
+      redirect: {
+        destination: "/",
+        permanent: false,
+      },
+    };
+  }
+
+  // Fetch data from external API
+  const permissions: Permission[] = await getPermissionDocs();
+
+  console.log("Permissions", permissions);
+
+  // const res = await fetch("api/permissions");
+  // const permissions: Permission[] = await res.json();
+  // Pass data to the page via props
+  return {
+    props: {
+      // permissions: permissions.map((p) => ({ id: p.id, type: p.type })),
+      permissions: permissions.map((p) => {
+        const { users, ...rest } = p;
+        return rest;
+      }),
+      user: req.session.user,
+    },
+  };
+}, sessionOptions);
+
+interface Props {
+  permissions: Permission[];
+  user: User;
+}
+
+export default function Page(props: Props) {
+  console.log("Props", props);
+
+  const { permissions, user } = props;
+
+  return (
+    <>
+      <Head>
+        <title>EnCoach</title>
+        <meta
+          name="description"
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Layout user={user} className="gap-6">
+        <h1 className="text-2xl font-semibold">Permissions</h1>
+        <div className="flex gap-3 flex-wrap">
+          {permissions.map((permission: Permission) => {
+            const id = permission.id as string;
+            const type = permission.type as string;
+            return (
+              <Link href={`/permissions/${id}`} key={id}>
+                <div className="card bg-primary text-primary-content">
+                  <div className="card-body">
+                    <h1 className="card-title">{type}</h1>
+                  </div>
+                </div>
+              </Link>
+            );
+          })}
+        </div>
+      </Layout>
+    </>
+  );
+}
--- a/src/utils/permissions.be.ts
+++ b/src/utils/permissions.be.ts
@@ -0,0 +1,83 @@
+import { app, adminApp } from "@/firebase";
+import { getAuth } from "firebase-admin/auth";
+
+import {
+  collection,
+  deleteDoc,
+  doc,
+  getDoc,
+  getDocs,
+  getFirestore,
+  query,
+  setDoc,
+  where,
+} from "firebase/firestore";
+import {
+  Permission,
+  PermissionType,
+  permissions,
+} from "@/interfaces/permissions";
+import {v4} from "uuid";
+
+const db = getFirestore(app);
+
+async function createPermission(type: string) {
+  const permData = doc(db, "permissions", v4());
+  const permDoc = await getDoc(permData);
+  if (permDoc.exists()) {
+    return true;
+  }
+
+  await setDoc(permData, {
+    type,
+    users: [],
+  });
+}
+export function getPermissions(userId: string | undefined, docs: Permission[]) {
+  if (!userId) {
+    return [];
+  }
+  // the concept is like a blacklist
+  // if the user exists in the list, he can't access this permission
+  // even if his profile allows
+  const permissions = docs.reduce((acc: PermissionType[], doc: Permission) => {
+    //  typescript was complaining even with the validation on the top
+    if (doc.users.includes(userId)) {
+      return acc;
+    }
+
+    return [...acc, doc.type];
+  }, []) as PermissionType[];
+  return permissions;
+}
+
+export async function bootstrap() {
+  await permissions.forEach(async (type) => {
+    await createPermission(type);
+  });
+}
+
+export async function getPermissionDoc(id: string) {
+  const docRef = doc(db, "permissions", id);
+  const docSnap = await getDoc(docRef);
+
+  if (docSnap.exists()) {
+    return docSnap.data() as Permission;
+  }
+
+  throw new Error("Permission not found");
+}
+
+export async function getPermissionDocs() {
+  const q = query(collection(db, "permissions"));
+  // firebase is missing something like array-not-contains
+
+  const snapshot = await getDocs(q);
+
+  const docs = snapshot.docs.map((doc) => ({
+    id: doc.id,
+    ...doc.data(),
+  })) as Permission[];
+
+  return docs;
+}
--- a/src/utils/permissions.ts
+++ b/src/utils/permissions.ts
@@ -0,0 +1,45 @@
+import { PermissionType } from "@/interfaces/permissions";
+import { User, Type, userTypes } from "@/interfaces/user";
+
+export function checkAccess(
+  user: User,
+  types: Type[],
+  permission?: PermissionType
+) {
+  if (!user) {
+    return false;
+  }
+
+  // if(user.type === '') {
+  if (!user.type) {
+    console.warn("User type is empty");
+    return false;
+  }
+
+  if (types.length === 0) {
+    console.warn("No types provided");
+    return false;
+  }
+
+  if (!types.includes(user.type)) {
+    return false;
+  }
+
+  // we may not want a permission check as most screens dont even havr a specific permission
+  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)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export function getTypesOfUser(types: Type[]) {
+    // basicly generate a list of all types except the excluded ones
+    return userTypes.filter((userType) => {
+        return !types.includes(userType);
+    })
+}
--- a/src/utils/users.be.ts
+++ b/src/utils/users.be.ts
@@ -0,0 +1,14 @@
+import { app } from "@/firebase";
+
+import { collection, getDocs, getFirestore } from "firebase/firestore";
+import { User } from "@/interfaces/user";
+const db = getFirestore(app);
+
+export async function getUsers() {
+  const snapshot = await getDocs(collection(db, "users"));
+
+  return snapshot.docs.map((doc) => ({
+    id: doc.id,
+    ...doc.data(),
+  })) as User[];
+}