KnightHacks · DGoel1602 · Jan 16, 2026 · Jan 16, 2026 · Jan 16, 2026
diff --git a/apps/blade/src/app/_components/bad-perms.tsx b/apps/blade/src/app/_components/bad-perms.tsx
@@ -0,0 +1,24 @@
+import { ShieldX } from "lucide-react";
+
+import { PERMISSION_DATA, PermissionKey } from "@forge/consts/knight-hacks";
+
+export function BadPerms({ perms }: { perms: PermissionKey[] }) {
+  const permNames: string[] = [];
+  perms.forEach((v) => {
+    const permissionData = PERMISSION_DATA[v];
+    if (permissionData) permNames.push(permissionData.name);
+  });
+
+  return (
+    <div className="mx-auto flex max-w-fit flex-col gap-2 rounded-lg border border-red-700 bg-red-700/10 p-8 text-center">
+      <div className="mx-auto flex size-12 rounded-full bg-red-700 shadow-sm">
+        <ShieldX className="mx-auto my-auto" />
+      </div>
+      <h2 className="text-xl font-bold sm:text-2xl">Access Denied</h2>
+      <div className="text-sm">
+        This action requires the following permissions:
+      </div>
+      <div className="font-semibold">{permNames.join(", ")}</div>
+    </div>
+  );
+}
diff --git a/apps/blade/src/app/_components/navigation/reusable-user-dropdown.tsx b/apps/blade/src/app/_components/navigation/reusable-user-dropdown.tsx
@@ -3,6 +3,7 @@ import {
   ChartPie,
   FormInput,
   Hotel,
+  Mail,
   Settings,
   ShieldCheck,
   Swords,
@@ -11,17 +12,26 @@ import {
   Users,
 } from "lucide-react";
 
+import type { PermissionKey } from "@forge/consts/knight-hacks";
+
 import { USER_DROPDOWN_ICON_COLOR, USER_DROPDOWN_ICON_SIZE } from "~/consts";
 
 /*
  * name = the text to be displayed
  * component = the corresponding icon for the name
  * route = the specific route you want the user to enter
+ * requiredPermissions = permissions needed to access this item
+ *   - or: user needs at least ONE of these permissions
+ *   - and: user needs ALL of these permissions
  */
 export interface roleItems {
   name: string;
   component: React.JSX.Element;
   route: string;
+  requiredPermissions?: {
+    or?: PermissionKey[];
+    and?: PermissionKey[];
+  };
 }
 
 // Use these as a reference for creating new items and remember to import them into ./user-dropdown
@@ -36,7 +46,13 @@ export const adminItems: roleItems[] = [
       />
     ),
     route: "/admin",
+    requiredPermissions: {
+      or: ["IS_OFFICER"],
+    },
   },
+];
+
+export const systemItems: roleItems[] = [
   {
     name: "Forms",
     component: (
@@ -46,16 +62,55 @@ export const adminItems: roleItems[] = [
       />
     ),
     route: "/admin/forms",
+    requiredPermissions: {
+      or: ["READ_FORMS", "EDIT_FORMS", "IS_OFFICER"],
+    },
+  },
+  {
+    name: "Email",
+    component: (
+      <Mail color={USER_DROPDOWN_ICON_COLOR} size={USER_DROPDOWN_ICON_SIZE} />
+    ),
+    route: "/admin/email",
+    requiredPermissions: {
+      or: ["EMAIL_PORTAL", "IS_OFFICER"],
+    },
+  },
+  {
+    name: "Assign Roles",
+    component: (
+      <Users color={USER_DROPDOWN_ICON_COLOR} size={USER_DROPDOWN_ICON_SIZE} />
+    ),
+    route: "/admin/roles/manage",
+    requiredPermissions: {
+      or: ["ASSIGN_ROLES", "IS_OFFICER"],
+    },
+  },
+  {
+    name: "Configure Roles",
+    component: (
+      <Settings
+        color={USER_DROPDOWN_ICON_COLOR}
+        size={USER_DROPDOWN_ICON_SIZE}
+      />
+    ),
+    route: "/admin/roles/configure",
+    requiredPermissions: {
+      or: ["CONFIGURE_ROLES", "IS_OFFICER"],
+    },
   },
 ];
 
-export const adminClubItems: roleItems[] = [
+export const clubItems: roleItems[] = [
   {
     name: "Members",
     component: (
       <User color={USER_DROPDOWN_ICON_COLOR} size={USER_DROPDOWN_ICON_SIZE} />
     ),
     route: "/admin/club/members",
+    requiredPermissions: {
+      or: ["READ_MEMBERS", "EDIT_MEMBERS", "IS_OFFICER"],
+    },
   },
   {
     name: "Events",
@@ -66,6 +121,9 @@ export const adminClubItems: roleItems[] = [
       />
     ),
     route: "/admin/club/events",
+    requiredPermissions: {
+      or: ["READ_CLUB_EVENT", "EDIT_CLUB_EVENT", "IS_OFFICER"],
+    },
   },
   {
     name: "Check-in",
@@ -76,6 +134,9 @@ export const adminClubItems: roleItems[] = [
       />
     ),
     route: "/admin/club/check-in",
+    requiredPermissions: {
+      or: ["CHECKIN_CLUB_EVENT", "IS_OFFICER"],
+    },
   },
   {
     name: "Data",
@@ -86,16 +147,22 @@ export const adminClubItems: roleItems[] = [
       />
     ),
     route: "/admin/club/data",
+    requiredPermissions: {
+      or: ["READ_CLUB_DATA", "IS_OFFICER"],
+    },
   },
 ];
 
-export const adminHackathonItems: roleItems[] = [
+export const hackathonItems: roleItems[] = [
   {
     name: "Hackers",
     component: (
       <Swords color={USER_DROPDOWN_ICON_COLOR} size={USER_DROPDOWN_ICON_SIZE} />
     ),
     route: "/admin/hackathon/hackers",
+    requiredPermissions: {
+      or: ["READ_HACKERS", "EDIT_HACKERS", "IS_OFFICER"],
+    },
   },
   {
     name: "Events",
@@ -106,6 +173,9 @@ export const adminHackathonItems: roleItems[] = [
       />
     ),
     route: "/admin/hackathon/events",
+    requiredPermissions: {
+      or: ["READ_HACK_EVENT", "EDIT_HACK_EVENT", "IS_OFFICER"],
+    },
   },
   {
     name: "Check-in",
@@ -116,6 +186,9 @@ export const adminHackathonItems: roleItems[] = [
       />
     ),
     route: "/admin/hackathon/check-in",
+    requiredPermissions: {
+      or: ["CHECKIN_HACK_EVENT", "IS_OFFICER"],
+    },
   },
   {
     name: "Data",
@@ -126,59 +199,29 @@ export const adminHackathonItems: roleItems[] = [
       />
     ),
     route: "/admin/hackathon/data",
+    requiredPermissions: {
+      or: ["READ_HACK_DATA", "IS_OFFICER"],
+    },
   },
   {
     name: "Room Assignment",
     component: (
       <Hotel color={USER_DROPDOWN_ICON_COLOR} size={USER_DROPDOWN_ICON_SIZE} />
     ),
     route: "/admin/hackathon/roomAssignment",
+    requiredPermissions: {
+      or: ["IS_OFFICER"],
+    },
   },
   {
     name: "Judge Assignment",
     component: (
       <Users color={USER_DROPDOWN_ICON_COLOR} size={USER_DROPDOWN_ICON_SIZE} />
     ),
     route: "/admin/hackathon/judge-assignment",
-  },
-];
-
-export const checkInOnlyItems: roleItems[] = [
-  {
-    name: "Events",
-    component: (
-      <CalendarDays
-        color={USER_DROPDOWN_ICON_COLOR}
-        size={USER_DROPDOWN_ICON_SIZE}
-      />
-    ),
-    route: "/admin/club/events",
-  },
-];
-
-export const scannerOnlyClubItems: roleItems[] = [
-  {
-    name: "Check-in",
-    component: (
-      <TicketCheck
-        color={USER_DROPDOWN_ICON_COLOR}
-        size={USER_DROPDOWN_ICON_SIZE}
-      />
-    ),
-    route: "/admin/club/check-in",
-  },
-];
-
-export const scannerOnlyHackathonItems: roleItems[] = [
-  {
-    name: "Check-in",
-    component: (
-      <TicketCheck
-        color={USER_DROPDOWN_ICON_COLOR}
-        size={USER_DROPDOWN_ICON_SIZE}
-      />
-    ),
-    route: "/admin/hackathon/check-in",
+    requiredPermissions: {
+      or: ["IS_JUDGE", "IS_OFFICER"],
+    },
   },
 ];
 

diff --git a/apps/blade/src/app/_components/navigation/session-navbar.tsx b/apps/blade/src/app/_components/navigation/session-navbar.tsx
@@ -1,19 +1,32 @@
 import Link from "next/link";
+import { ChevronDown, Shield } from "lucide-react";
 
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@forge/ui/dropdown-menu";
 import {
   NavigationMenu,
   NavigationMenuItem,
   NavigationMenuList,
 } from "@forge/ui/navigation-menu";
 import { Separator } from "@forge/ui/separator";
 
+import { getPermsAsList } from "~/lib/utils";
 import { api } from "~/trpc/server";
 import ClubLogo from "./club-logo";
 import { UserDropdown } from "./user-dropdown";
 
 export async function SessionNavbar() {
-  const hasCheckIn = await api.auth.hasCheckIn();
-  const hasFullAdmin = await api.auth.hasFullAdmin();
+  const perms = await api.roles.getPermissions();
+
+  let permString = "";
+  Object.values(perms).forEach((v) => {
+    permString += v ? "1" : "0";
+  });
+
+  const permList = getPermsAsList(permString);
 
   return (
     <div className="flex items-center justify-between px-3 py-3 sm:px-10 sm:py-5">
@@ -24,9 +37,40 @@ export async function SessionNavbar() {
       </Link>
       <Separator className="absolute left-0 top-16 sm:top-20" />
       <NavigationMenu className="h-[35px] w-[35px]">
-        <NavigationMenuList>
+        <NavigationMenuList className="gap-4">
+          {permList.length > 0 && (
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <div
+                  tabIndex={0}
+                  className="flex w-fit flex-row gap-1 rounded-lg border px-2 py-1 hover:bg-muted"
+                >
+                  <Shield className="my-auto mr-1 size-4" />
+                  <div className="my-auto">{permList.length}</div>
+                  <ChevronDown className="my-auto size-4" />
+                </div>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="p-2">
+                <h3 className="border-b p-1 pb-2 text-sm font-medium">
+                  You have the following permissions:
+                </h3>
+                <ul className="mt-1 max-h-48 list-disc overflow-y-auto px-4">
+                  {permList.map((p, index) => {
+                    return (
+                      <li
+                        key={index}
+                        className={`p-1 text-sm text-muted-foreground`}
+                      >
+                        {p}
+                      </li>
+                    );
+                  })}
+                </ul>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
           <NavigationMenuItem className="flex items-center justify-center">
-            <UserDropdown hasCheckIn={hasCheckIn} hasFullAdmin={hasFullAdmin} />
+            <UserDropdown permissions={perms} />
           </NavigationMenuItem>
         </NavigationMenuList>
       </NavigationMenu>