fix(web): update ui for super admin

Author: AlkenD

apps/api/src/lib/auth/auth.middleware.ts

@@ -392,14 +392,14 @@ export function requireRole(...roles: UserRole[]) {
 }
 
 /**
- * Require admin role
+ * Require admin role (includes SUPER_ADMIN)
  */
-export const requireAdmin = requireRole("ADMIN");
+export const requireAdmin = requireRole("SUPER_ADMIN", "ADMIN");
 
 /**
- * Require user or admin role
+ * Require user or admin role (includes SUPER_ADMIN)
  */
-export const requireUserOrAdmin = requireRole("USER", "ADMIN");
+export const requireUserOrAdmin = requireRole("SUPER_ADMIN", "ADMIN", "USER");
 
 // ────────────────────────────────────────────────────────────────────────────
 // Scope-Based Access Control (for API keys)

apps/web/src/components/ui/header/user-menu.tsx

@@ -8,8 +8,10 @@ import {
   ChevronDown,
   Shield,
   LogIn,
+  Star,
 } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
+import { Badge } from "@/components/ui/badge";
 
 function UserMenu() {
   const { user, isAuthenticated, logout } = useAuth();
@@ -43,8 +45,18 @@ function UserMenu() {
           className="h-10 px-1  rounded-[50px] flex items-center gap-2 justify-between hover:bg-white/10 transition-colors"
         >
           <div className="flex items-center gap-2">
-            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center">
-              {user?.role === "ADMIN" ? (
+            <div
+              className={`w-8 h-8 rounded-full flex items-center justify-center ${
+                user?.role === "SUPER_ADMIN"
+                  ? "bg-gradient-to-br from-amber-500 to-yellow-500"
+                  : user?.role === "ADMIN"
+                    ? "bg-gradient-to-br from-purple-500 to-blue-500"
+                    : "bg-gradient-to-br from-blue-500 to-cyan-500"
+              }`}
+            >
+              {user?.role === "SUPER_ADMIN" ? (
+                <Star className="w-4 h-4 text-white fill-white" />
+              ) : user?.role === "ADMIN" ? (
                 <Shield className="w-4 h-4 text-white" />
               ) : (
                 <User className="w-4 h-4 text-white" />
@@ -90,16 +102,34 @@ function UserMenu() {
                   <p className="text-xs text-white/60 mt-0.5">{user.email}</p>
                 )}
                 <div className="mt-2">
-                  <span
-                    className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${
-                      user?.role === "ADMIN"
-                        ? "bg-purple-500/20 text-purple-300"
-                        : "bg-blue-500/20 text-blue-300"
+                  <Badge
+                    variant={
+                      user?.role === "SUPER_ADMIN"
+                        ? "default"
+                        : user?.role === "ADMIN"
+                          ? "secondary"
+                          : "outline"
+                    }
+                    className={`inline-flex items-center gap-1 ${
+                      user?.role === "SUPER_ADMIN"
+                        ? "bg-amber-500/20 text-amber-300 border-amber-500/30"
+                        : user?.role === "ADMIN"
+                          ? "bg-purple-500/20 text-purple-300 border-purple-500/30"
+                          : "bg-blue-500/20 text-blue-300 border-blue-500/30"
                     }`}
                   >
+                    {user?.role === "SUPER_ADMIN" && (
+                      <Star className="w-3 h-3 fill-amber-300" />
+                    )}
                     {user?.role === "ADMIN" && <Shield className="w-3 h-3" />}
-                    {user?.role === "ADMIN" ? "Admin" : "User"}
-                  </span>
+                    {user?.role === "SUPER_ADMIN"
+                      ? "Super Admin"
+                      : user?.role === "ADMIN"
+                        ? "Admin"
+                        : user?.role === "GUEST"
+                          ? "Guest"
+                          : "User"}
+                  </Badge>
                 </div>
               </div>
 

apps/web/src/routes/settings/route.tsx

@@ -12,10 +12,13 @@ import {
   Edit,
   Menu,
   Users,
+  Star,
+  Shield,
 } from "lucide-react";
 import { useAuth } from "@/hooks/useAuth";
 import { useEffect } from "react";
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 
 export const Route = createFileRoute("/settings")({
   component: RouteComponent,
@@ -30,7 +33,7 @@ export const Route = createFileRoute("/settings")({
 function RouteComponent() {
   const { user, isAuthenticated, isLoading } = useAuth();
   const navigate = useNavigate();
-  const isAdmin = user?.role === "ADMIN";
+  const isAdmin = user?.role === "ADMIN" || user?.role === "SUPER_ADMIN";
 
   // Redirect unauthenticated users or guests
   useEffect(() => {
@@ -65,9 +68,37 @@ function RouteComponent() {
               </Button>
             </div>
           </div>
-          <p className="text-sm text-white/60">
-            {user?.role} • {user?.email}
-          </p>
+          <div className="flex items-center gap-2 mb-2">
+            <Badge
+              variant={
+                user?.role === "SUPER_ADMIN"
+                  ? "default"
+                  : user?.role === "ADMIN"
+                    ? "secondary"
+                    : "outline"
+              }
+              className={`inline-flex items-center gap-1 ${
+                user?.role === "SUPER_ADMIN"
+                  ? "bg-amber-500/20 text-amber-300 border-amber-500/30"
+                  : user?.role === "ADMIN"
+                    ? "bg-purple-500/20 text-purple-300 border-purple-500/30"
+                    : "bg-blue-500/20 text-blue-300 border-blue-500/30"
+              }`}
+            >
+              {user?.role === "SUPER_ADMIN" && (
+                <Star className="w-3 h-3 fill-amber-300" />
+              )}
+              {user?.role === "ADMIN" && <Shield className="w-3 h-3" />}
+              {user?.role === "SUPER_ADMIN"
+                ? "Super Admin"
+                : user?.role === "ADMIN"
+                  ? "Admin"
+                  : user?.role === "GUEST"
+                    ? "Guest"
+                    : "User"}
+            </Badge>
+          </div>
+          <p className="text-sm text-white/60">{user?.email}</p>
         </div>
 
         {/* Settings Section */}

apps/web/src/routes/settings/users.tsx

@@ -21,7 +21,8 @@ export const Route = createFileRoute("/settings/users")({
 
 function RouteComponent() {
   const { user: currentUser, isLoading: isAuthLoading } = useAuth();
-  const isAdmin = currentUser?.role === "ADMIN";
+  const isAdmin =
+    currentUser?.role === "ADMIN" || currentUser?.role === "SUPER_ADMIN";
   const {
     data: usersData,
     isLoading: isLoadingUsers,