admin area

apps/website/components/profile/UserPill.tsx

@@ -2,7 +2,7 @@
 
 import { useAuth } from '@/lib/auth/AuthContext';
 import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
-import { BarChart3, Building2, ChevronDown, CreditCard, Handshake, LogOut, Megaphone, Paintbrush, Settings, TrendingUp, Trophy } from 'lucide-react';
+import { BarChart3, Building2, ChevronDown, CreditCard, Handshake, LogOut, Megaphone, Paintbrush, Settings, TrendingUp, Trophy, Shield } from 'lucide-react';
 import Link from 'next/link';
 import React, { useEffect, useMemo, useState } from 'react';
 
@@ -65,6 +65,31 @@ function useDemoUserMode(): { isDemo: boolean; demoRole: string | null } {
   return demoMode;
 }
 
+// Helper to check if user has admin access (Owner or Super Admin)
+function useHasAdminAccess(): boolean {
+  const { session } = useAuth();
+  const { isDemo, demoRole } = useDemoUserMode();
+  
+  // Demo users with system-owner or super-admin roles
+  if (isDemo && (demoRole === 'system-owner' || demoRole === 'super-admin')) {
+    return true;
+  }
+  
+  // Real users - would need role information from session
+  // For now, we'll check if the user has any admin-related capabilities
+  // This can be enhanced when the API includes role information
+  if (!session?.user) return false;
+  
+  // Check for admin-related email patterns as a temporary measure
+  const email = session.user.email?.toLowerCase() || '';
+  const displayName = session.user.displayName?.toLowerCase() || '';
+  
+  return email.includes('system-owner') ||
+         email.includes('super-admin') ||
+         displayName.includes('system owner') ||
+         displayName.includes('super admin');
+}
+
 // Sponsor Pill Component - matches the style of DriverSummaryPill
 function SponsorSummaryPill({ 
   onClick, 
@@ -320,6 +345,17 @@ export default function UserPill() {
 
               {/* Menu Items */}
               <div className="py-1 text-sm text-gray-200">
+                {/* Admin link for system-owner and super-admin demo users */}
+                {(demoRole === 'system-owner' || demoRole === 'super-admin') && (
+                  <Link
+                    href="/admin"
+                    className="flex items-center gap-3 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
+                    onClick={() => setIsMenuOpen(false)}
+                  >
+                    <Shield className="h-4 w-4 text-indigo-400" />
+                    <span>Admin Area</span>
+                  </Link>
+                )}
                 <div className="px-4 py-2 text-xs text-gray-500 italic">
                   Demo users have limited profile access
                 </div>
@@ -481,6 +517,8 @@ export default function UserPill() {
     return null;
   }
 
+  const hasAdminAccess = useHasAdminAccess();
+
   return (
     <div className="relative inline-flex items-center" data-user-pill>
       <DriverSummaryPill
@@ -493,7 +531,7 @@ export default function UserPill() {
 
       <AnimatePresence>
         {isMenuOpen && (
-          <motion.div 
+          <motion.div
             className="absolute right-0 top-full mt-2 w-48 rounded-lg bg-deep-graphite border border-charcoal-outline shadow-lg z-50"
             initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: -10 }}
             animate={{ opacity: 1, y: 0 }}
@@ -501,6 +539,17 @@ export default function UserPill() {
             transition={{ duration: 0.15 }}
           >
             <div className="py-1 text-sm text-gray-200">
+              {/* Admin link for Owner/Super Admin users */}
+              {hasAdminAccess && (
+                <Link
+                  href="/admin"
+                  className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
+                  onClick={() => setIsMenuOpen(false)}
+                >
+                  <Shield className="h-4 w-4 text-indigo-400" />
+                  <span>Admin Area</span>
+                </Link>
+              )}
               <Link
                 href="/profile"
                 className="block px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"