feat(layout): add admin panel layout with sidebar and header

- Add Sidebar component with navigation items (dashboard, bookings, tournaments, pos, clients, memberships, reports, settings)
- Add Header component with SiteSwitcher and user info/logout
- Add SiteSwitcher component for SUPER_ADMIN multi-site selection
- Add admin layout wrapper with AuthProvider
- Add placeholder Dashboard page

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/web/app/(admin)/dashboard/page.tsx

@@ -0,0 +1,10 @@
+export default function DashboardPage() {
+  return (
+    <div>
+      <h1 className="text-2xl font-bold text-primary-800">Dashboard</h1>
+      <p className="mt-2 text-primary-600">
+        Bienvenido al panel de administración de Padel Pro.
+      </p>
+    </div>
+  );
+}

apps/web/app/(admin)/layout.tsx

@@ -0,0 +1,21 @@
+import { AuthProvider } from '@/components/providers/auth-provider';
+import { Sidebar } from '@/components/layout/sidebar';
+import { Header } from '@/components/layout/header';
+
+export default function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <AuthProvider>
+      <div className="min-h-screen bg-primary-50">
+        <Sidebar />
+        <div className="pl-64">
+          <Header />
+          <main className="p-6">{children}</main>
+        </div>
+      </div>
+    </AuthProvider>
+  );
+}

apps/web/components/layout/header.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { useSession, signOut } from 'next-auth/react';
+import { LogOut } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { SiteSwitcher } from './site-switcher';
+
+export function Header() {
+  const { data: session } = useSession();
+
+  const handleLogout = () => {
+    signOut({ callbackUrl: '/login' });
+  };
+
+  const userRole = session?.user?.role || '';
+  const displayRole = userRole
+    .replace(/_/g, ' ')
+    .toLowerCase()
+    .replace(/\b\w/g, (l) => l.toUpperCase());
+
+  return (
+    <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-primary-200 bg-white px-6 pl-64">
+      <div className="ml-6">
+        <SiteSwitcher />
+      </div>
+
+      <div className="flex items-center gap-4">
+        <div className="text-right">
+          <p className="text-sm font-medium text-primary-800">{session?.user?.name || 'Usuario'}</p>
+          <p className="text-xs text-primary-500">{displayRole}</p>
+        </div>
+        <Button variant="ghost" size="icon" onClick={handleLogout} title="Cerrar sesión">
+          <LogOut className="h-5 w-5" />
+        </Button>
+      </div>
+    </header>
+  );
+}
+
+export default Header;

apps/web/components/layout/sidebar.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import {
+  LayoutDashboard,
+  Calendar,
+  Trophy,
+  ShoppingCart,
+  Users,
+  CreditCard,
+  BarChart3,
+  Settings,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface NavItem {
+  label: string;
+  href: string;
+  icon: React.ComponentType<{ className?: string }>;
+}
+
+const navItems: NavItem[] = [
+  { label: 'Dashboard', href: '/admin/dashboard', icon: LayoutDashboard },
+  { label: 'Reservas', href: '/admin/bookings', icon: Calendar },
+  { label: 'Torneos', href: '/admin/tournaments', icon: Trophy },
+  { label: 'Ventas', href: '/admin/pos', icon: ShoppingCart },
+  { label: 'Clientes', href: '/admin/clients', icon: Users },
+  { label: 'Membresías', href: '/admin/memberships', icon: CreditCard },
+  { label: 'Reportes', href: '/admin/reports', icon: BarChart3 },
+  { label: 'Configuración', href: '/admin/settings', icon: Settings },
+];
+
+export function Sidebar() {
+  const pathname = usePathname();
+
+  return (
+    <aside className="fixed left-0 top-0 z-40 h-screen w-64 border-r border-primary-200 bg-white">
+      {/* Logo Section */}
+      <div className="flex h-16 items-center gap-3 border-b border-primary-200 px-6">
+        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary text-white font-bold text-lg">
+          P
+        </div>
+        <span className="text-xl font-semibold text-primary-800">Padel Pro</span>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex flex-col gap-1 p-4">
+        {navItems.map((item) => {
+          const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`);
+          const Icon = item.icon;
+
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors',
+                isActive
+                  ? 'bg-primary text-white'
+                  : 'text-primary-600 hover:bg-primary-50 hover:text-primary-800'
+              )}
+            >
+              <Icon className="h-5 w-5" />
+              {item.label}
+            </Link>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+}
+
+export default Sidebar;

apps/web/components/layout/site-switcher.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { useSession } from 'next-auth/react';
+import { MapPin, ChevronDown, Check } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface Site {
+  id: string;
+  name: string;
+}
+
+export function SiteSwitcher() {
+  const { data: session } = useSession();
+  const [sites, setSites] = useState<Site[]>([]);
+  const [selectedSiteId, setSelectedSiteId] = useState<string | null>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const isSuperAdmin = session?.user?.role === 'SUPER_ADMIN';
+
+  useEffect(() => {
+    async function fetchSites() {
+      try {
+        const response = await fetch('/api/sites');
+        if (response.ok) {
+          const data = await response.json();
+          setSites(data.data || []);
+        }
+      } catch (error) {
+        console.error('Failed to fetch sites:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    fetchSites();
+  }, []);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const selectedSite = sites.find((site) => site.id === selectedSiteId);
+  const displayName = selectedSiteId ? selectedSite?.name : 'Todas las sedes';
+
+  // For non-SUPER_ADMIN users, just show their assigned site
+  if (!isSuperAdmin) {
+    const userSiteName = sites.length > 0 ? sites[0]?.name : 'Cargando...';
+    return (
+      <div className="flex items-center gap-2 text-sm text-primary-700">
+        <MapPin className="h-4 w-4 text-primary-500" />
+        <span>{isLoading ? 'Cargando...' : userSiteName}</span>
+      </div>
+    );
+  }
+
+  // For SUPER_ADMIN, show dropdown to select site
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={cn(
+          'flex items-center gap-2 rounded-lg border border-primary-200 bg-white px-3 py-2 text-sm font-medium text-primary-700 transition-colors hover:bg-primary-50',
+          isOpen && 'ring-2 ring-primary-500 ring-offset-1'
+        )}
+      >
+        <MapPin className="h-4 w-4 text-primary-500" />
+        <span>{isLoading ? 'Cargando...' : displayName}</span>
+        <ChevronDown className={cn('h-4 w-4 transition-transform', isOpen && 'rotate-180')} />
+      </button>
+
+      {isOpen && (
+        <div className="absolute left-0 top-full z-50 mt-1 w-56 rounded-lg border border-primary-200 bg-white py-1 shadow-lg">
+          <button
+            onClick={() => {
+              setSelectedSiteId(null);
+              setIsOpen(false);
+            }}
+            className={cn(
+              'flex w-full items-center justify-between px-3 py-2 text-sm text-primary-700 hover:bg-primary-50',
+              !selectedSiteId && 'bg-primary-50 font-medium'
+            )}
+          >
+            <span>Todas las sedes</span>
+            {!selectedSiteId && <Check className="h-4 w-4 text-primary" />}
+          </button>
+          <div className="my-1 border-t border-primary-100" />
+          {sites.map((site) => (
+            <button
+              key={site.id}
+              onClick={() => {
+                setSelectedSiteId(site.id);
+                setIsOpen(false);
+              }}
+              className={cn(
+                'flex w-full items-center justify-between px-3 py-2 text-sm text-primary-700 hover:bg-primary-50',
+                selectedSiteId === site.id && 'bg-primary-50 font-medium'
+              )}
+            >
+              <span>{site.name}</span>
+              {selectedSiteId === site.id && <Check className="h-4 w-4 text-primary" />}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default SiteSwitcher;