feat: admin navigation in header

src/app/components/nav/Header.tsx

@@ -187,15 +187,22 @@ export default function Header() {
   const isLoggedIn = !!user
   const userPresent = mounted && isLoggedIn
 
+  // NEW: detect admin role across common shapes
+  const isAdmin =
+    !!user &&
+    (
+      (user as any)?.role === 'admin' ||
+      (user as any)?.userType === 'admin' ||
+      (user as any)?.isAdmin === true ||
+      ((user as any)?.roles?.includes?.('admin'))
+    )
+
   return (
     <header
-      className="relative isolate z-10 border-b border-white/10 shadow-lg shadow-black/30 after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:bg-[radial-gradient(circle_at_20%_20%,rgba(56,124,255,0.18),transparent_55%),radial-gradient(circle_at_80%_35%,rgba(139,92,246,0.16),transparent_60%)]"
+      // Remove bottom border when admin subheader is present to avoid a blue line under the gold bar
+      className={`relative isolate z-10 shadow-lg shadow-black/30 after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:bg-[radial-gradient(circle_at_20%_20%,rgba(56,124,255,0.18),transparent_55%),radial-gradient(circle_at_80%_35%,rgba(139,92,246,0.16),transparent_60%)] ${isAdmin ? '' : 'border-b border-white/10'}`}
       style={{
-        // Opaque gradient so page background doesn't shine through
         background: 'linear-gradient(135deg, #0F1D37 0%, #0A162A 50%, #081224 100%)',
-        // Remove blur to avoid backdrop mixing effects
-        // backdropFilter: 'blur(18px) saturate(170%)',
-        // WebkitBackdropFilter: 'blur(18px) saturate(170%)'
       }}
     >
       <nav aria-label="Global" className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8">
@@ -375,11 +382,41 @@ export default function Header() {
         </div>
       </nav>
 
-      {/* REMOVE sub header bar */}
+      {/* Admin subheader (gold) - centered */}
-      {/* ...existing code... */}
+      {userPresent && isAdmin && (
-      {/* Deleted previous Sub header nav for Referral Management */}
+        <div
-      {/* ...existing code... */}
+          className="w-full border-t border-amber-700/40"
+          style={{ background: 'linear-gradient(90deg, #D4AF37 0%, #C99A2E 100%)' }}
+        >
+          <div className="mx-auto max-w-7xl px-6 lg:px-8">
+            <div className="flex flex-wrap items-center justify-center gap-5 py-2">
+              <span className="text-xs font-semibold uppercase tracking-wide text-[#3B2C04]/80">
+                Admin Navigation
+              </span>
+              <button
+                onClick={() => { console.log('🧭 Admin: navigate to /admin'); router.push('/admin') }}
+                className="text-sm font-semibold text-[#0F1D37] hover:text-[#7A5E1A]"
+              >
+                Dashboard
+              </button>
+              <button
+                onClick={() => { console.log('🧭 Admin: navigate to /admin/user-management'); router.push('/admin/user-management') }}
+                className="text-sm font-semibold text-[#0F1D37] hover:text-[#7A5E1A]"
+              >
+                User Management
+              </button>
+              <button
+                onClick={() => { console.log('🧭 Admin: navigate to /admin/user-verify'); router.push('/admin/user-verify') }}
+                className="text-sm font-semibold text-[#0F1D37] hover:text-[#7A5E1A]"
+              >
+                User Verify
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
 
+      {/* Mobile dialog and rest of header */}
       <Dialog open={mobileMenuOpen} onClose={setMobileMenuOpen} className="lg:hidden">
         <Transition
           appear