first implementation

frontend/app/components/Header.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/navigation";
 import { useAuth } from "../auth-context";
 import { sharedStyles } from "../styles/shared";
 
-type PageId = "counter" | "sum" | "profile" | "audit";
+type PageId = "counter" | "sum" | "profile" | "invites" | "audit" | "admin-invites";
 
 interface HeaderProps {
   currentPage: PageId;
@@ -15,18 +15,26 @@ interface NavItem {
   label: string;
   href: string;
   regularOnly?: boolean;
+  adminOnly?: boolean;
 }
 
-const NAV_ITEMS: NavItem[] = [
+const REGULAR_NAV_ITEMS: NavItem[] = [
   { id: "counter", label: "Counter", href: "/" },
   { id: "sum", label: "Sum", href: "/sum" },
+  { id: "invites", label: "My Invites", href: "/invites", regularOnly: true },
   { id: "profile", label: "My Profile", href: "/profile", regularOnly: true },
 ];
 
+const ADMIN_NAV_ITEMS: NavItem[] = [
+  { id: "audit", label: "Audit", href: "/audit", adminOnly: true },
+  { id: "admin-invites", label: "Invites", href: "/admin/invites", adminOnly: true },
+];
+
 export function Header({ currentPage }: HeaderProps) {
   const { user, logout, hasRole } = useAuth();
   const router = useRouter();
   const isRegularUser = hasRole("regular");
+  const isAdminUser = hasRole("admin");
 
   const handleLogout = async () => {
     await logout();
@@ -35,12 +43,23 @@ export function Header({ currentPage }: HeaderProps) {
 
   if (!user) return null;
 
-  // For audit page (admin), show only the current page label
-  if (currentPage === "audit") {
+  // For admin pages, show admin navigation
+  if (isAdminUser && (currentPage === "audit" || currentPage === "admin-invites")) {
     return (
       <div style={sharedStyles.header}>
         <div style={sharedStyles.nav}>
-          <span style={sharedStyles.navCurrent}>Audit</span>
+          {ADMIN_NAV_ITEMS.map((item, index) => (
+            <span key={item.id}>
+              {index > 0 && <span style={sharedStyles.navDivider}>•</span>}
+              {item.id === currentPage ? (
+                <span style={sharedStyles.navCurrent}>{item.label}</span>
+              ) : (
+                <a href={item.href} style={sharedStyles.navLink}>
+                  {item.label}
+                </a>
+              )}
+            </span>
+          ))}
         </div>
         <div style={sharedStyles.userInfo}>
           <span style={sharedStyles.userEmail}>{user.email}</span>
@@ -53,7 +72,7 @@ export function Header({ currentPage }: HeaderProps) {
   }
 
   // For regular pages, build nav with links
-  const visibleItems = NAV_ITEMS.filter(
+  const visibleItems = REGULAR_NAV_ITEMS.filter(
     (item) => !item.regularOnly || isRegularUser
   );