fix: dashboard updates when switching sites

- Added SiteContext for global site selection state
- Updated admin layout with SiteProvider
- Updated SiteSwitcher to use shared context
- Dashboard now refetches data when site changes

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

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

@@ -1,12 +1,13 @@
 "use client";
 
 import { useSession } from "next-auth/react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { formatCurrency, formatDate } from "@/lib/utils";
 import { StatCard, StatCardSkeleton } from "@/components/dashboard/stat-card";
 import { OccupancyChart, OccupancyChartSkeleton } from "@/components/dashboard/occupancy-chart";
 import { RecentBookings, RecentBookingsSkeleton } from "@/components/dashboard/recent-bookings";
 import { QuickActions } from "@/components/dashboard/quick-actions";
+import { useSite } from "@/contexts/site-context";
 
 interface DashboardStats {
   todayBookings: number;
@@ -49,34 +50,39 @@ interface DashboardData {
 
 export default function DashboardPage() {
   const { data: session } = useSession();
+  const { selectedSiteId, selectedSite } = useSite();
   const [dashboardData, setDashboardData] = useState<DashboardData | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  useEffect(() => {
-    async function fetchDashboardData() {
-      try {
-        setIsLoading(true);
-        setError(null);
+  const fetchDashboardData = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
 
-        const response = await fetch("/api/dashboard/stats");
+      const url = selectedSiteId
+        ? `/api/dashboard/stats?siteId=${selectedSiteId}`
+        : "/api/dashboard/stats";
 
-        if (!response.ok) {
-          throw new Error("Error al cargar los datos del dashboard");
-        }
+      const response = await fetch(url);
 
-        const data = await response.json();
-        setDashboardData(data);
-      } catch (err) {
-        console.error("Dashboard fetch error:", err);
-        setError(err instanceof Error ? err.message : "Error desconocido");
-      } finally {
-        setIsLoading(false);
+      if (!response.ok) {
+        throw new Error("Error al cargar los datos del dashboard");
       }
-    }
 
+      const data = await response.json();
+      setDashboardData(data);
+    } catch (err) {
+      console.error("Dashboard fetch error:", err);
+      setError(err instanceof Error ? err.message : "Error desconocido");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [selectedSiteId]);
+
+  useEffect(() => {
     fetchDashboardData();
-  }, []);
+  }, [fetchDashboardData]);
 
   const userName = session?.user?.name?.split(" ")[0] || "Usuario";
   const today = new Date();
@@ -93,10 +99,10 @@ export default function DashboardPage() {
             {formatDate(today)} - Panel de administracion
           </p>
         </div>
-        {session?.user?.siteName && (
-          <div className="flex items-center gap-2 px-4 py-2 bg-primary-50 rounded-lg">
+        {selectedSite && (
+          <div className="flex items-center gap-2 px-4 py-2 bg-accent/10 rounded-lg border border-accent/20">
             <svg
-              className="w-5 h-5 text-primary-500"
+              className="w-5 h-5 text-accent"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -114,8 +120,8 @@ export default function DashboardPage() {
                 d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
               />
             </svg>
-            <span className="text-sm font-medium text-primary-700">
-              {session.user.siteName}
+            <span className="text-sm font-medium text-accent-700">
+              Mostrando: {selectedSite.name}
             </span>
           </div>
         )}

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

@@ -1,4 +1,5 @@
 import { AuthProvider } from '@/components/providers/auth-provider';
+import { SiteProvider } from '@/contexts/site-context';
 import { Sidebar } from '@/components/layout/sidebar';
 import { Header } from '@/components/layout/header';
 
@@ -9,13 +10,15 @@ export default function AdminLayout({
 }) {
   return (
     <AuthProvider>
-      <div className="min-h-screen bg-primary-50">
-        <Sidebar />
-        <div className="pl-64">
-          <Header />
-          <main className="p-6">{children}</main>
+      <SiteProvider>
+        <div className="min-h-screen bg-primary-50">
+          <Sidebar />
+          <div className="pl-64">
+            <Header />
+            <main className="p-6">{children}</main>
+          </div>
         </div>
-      </div>
+      </SiteProvider>
     </AuthProvider>
   );
 }