Add Header and Footer components for authenticated page layouts.

frontend/src/components/layout/Header.tsx

@@ -0,0 +1,159 @@
+/**
+ * Header Component
+ * Main navigation header for authenticated users
+ * Includes logo, navigation links, and user menu
+ */
+
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useAuthStore } from '@/stores/authStore';
+import { useLogout } from '@/lib/api/hooks/useAuth';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Settings, LogOut, User, Shield } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+/**
+ * Get user initials for avatar
+ */
+function getUserInitials(firstName?: string | null, lastName?: string | null): string {
+  if (!firstName) return 'U';
+
+  const first = firstName.charAt(0).toUpperCase();
+  const last = lastName?.charAt(0).toUpperCase() || '';
+
+  return `${first}${last}`;
+}
+
+/**
+ * Navigation link component
+ */
+function NavLink({
+  href,
+  children,
+  exact = false,
+}: {
+  href: string;
+  children: React.ReactNode;
+  exact?: boolean;
+}) {
+  const pathname = usePathname();
+  const isActive = exact ? pathname === href : pathname.startsWith(href);
+
+  return (
+    <Link
+      href={href}
+      className={cn(
+        'px-3 py-2 rounded-md text-sm font-medium transition-colors',
+        isActive
+          ? 'bg-gray-900 text-white dark:bg-gray-700'
+          : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'
+      )}
+    >
+      {children}
+    </Link>
+  );
+}
+
+export function Header() {
+  const { user } = useAuthStore();
+  const { mutate: logout, isPending: isLoggingOut } = useLogout();
+
+  const handleLogout = () => {
+    logout();
+  };
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-white dark:bg-gray-900">
+      <div className="container mx-auto flex h-16 items-center px-4">
+        {/* Logo */}
+        <div className="flex items-center space-x-8">
+          <Link href="/" className="flex items-center space-x-2">
+            <span className="text-xl font-bold text-gray-900 dark:text-white">
+              FastNext
+            </span>
+          </Link>
+
+          {/* Navigation Links */}
+          <nav className="hidden md:flex items-center space-x-1">
+            <NavLink href="/" exact>
+              Home
+            </NavLink>
+            {user?.is_superuser && (
+              <NavLink href="/admin">
+                Admin
+              </NavLink>
+            )}
+          </nav>
+        </div>
+
+        {/* Right side - User menu */}
+        <div className="ml-auto flex items-center space-x-4">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="relative h-10 w-10 rounded-full">
+                <Avatar>
+                  <AvatarFallback>
+                    {getUserInitials(user?.first_name, user?.last_name)}
+                  </AvatarFallback>
+                </Avatar>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56" align="end">
+              <DropdownMenuLabel>
+                <div className="flex flex-col space-y-1">
+                  <p className="text-sm font-medium">
+                    {user?.first_name} {user?.last_name}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {user?.email}
+                  </p>
+                </div>
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem asChild>
+                <Link href="/settings/profile" className="cursor-pointer">
+                  <User className="mr-2 h-4 w-4" />
+                  Profile
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuItem asChild>
+                <Link href="/settings/password" className="cursor-pointer">
+                  <Settings className="mr-2 h-4 w-4" />
+                  Settings
+                </Link>
+              </DropdownMenuItem>
+              {user?.is_superuser && (
+                <DropdownMenuItem asChild>
+                  <Link href="/admin" className="cursor-pointer">
+                    <Shield className="mr-2 h-4 w-4" />
+                    Admin Panel
+                  </Link>
+                </DropdownMenuItem>
+              )}
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                className="cursor-pointer text-red-600 dark:text-red-400"
+                onClick={handleLogout}
+                disabled={isLoggingOut}
+              >
+                <LogOut className="mr-2 h-4 w-4" />
+                {isLoggingOut ? 'Logging out...' : 'Log out'}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    </header>
+  );
+}