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(() => {
+  const fetchDashboardData = useCallback(async () => {
-    async function fetchDashboardData() {
+    try {
-      try {
+      setIsLoading(true);
-        setIsLoading(true);
+      setError(null);
-        setError(null);
 
-        const response = await fetch("/api/dashboard/stats");
+      const url = selectedSiteId
+        ? `/api/dashboard/stats?siteId=${selectedSiteId}`
+        : "/api/dashboard/stats";
 
-        if (!response.ok) {
+      const response = await fetch(url);
-          throw new Error("Error al cargar los datos del dashboard");
-        }
 
-        const data = await response.json();
+      if (!response.ok) {
-        setDashboardData(data);
+        throw new Error("Error al cargar los datos del dashboard");
-      } catch (err) {
-        console.error("Dashboard fetch error:", err);
-        setError(err instanceof Error ? err.message : "Error desconocido");
-      } finally {
-        setIsLoading(false);
       }
-    }
 
+      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 && (
+        {selectedSite && (
-          <div className="flex items-center gap-2 px-4 py-2 bg-primary-50 rounded-lg">
+          <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">
+            <span className="text-sm font-medium text-accent-700">
-              {session.user.siteName}
+              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">
+      <SiteProvider>
-        <Sidebar />
+        <div className="min-h-screen bg-primary-50">
-        <div className="pl-64">
+          <Sidebar />
-          <Header />
+          <div className="pl-64">
-          <main className="p-6">{children}</main>
+            <Header />
+            <main className="p-6">{children}</main>
+          </div>
         </div>
-      </div>
+      </SiteProvider>
     </AuthProvider>
   );
 }

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

@@ -4,40 +4,16 @@ import { useState, useEffect, useRef } from 'react';
 import { useSession } from 'next-auth/react';
 import { MapPin, ChevronDown, Check } from 'lucide-react';
 import { cn } from '@/lib/utils';
-
+import { useSite } from '@/contexts/site-context';
-interface Site {
-  id: string;
-  name: string;
-}
 
 export function SiteSwitcher() {
   const { data: session } = useSession();
-  const [sites, setSites] = useState<Site[]>([]);
+  const { sites, selectedSiteId, selectedSite, setSelectedSiteId, isLoading } = useSite();
-  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)) {
@@ -49,7 +25,6 @@ export function SiteSwitcher() {
     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

apps/web/contexts/site-context.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { createContext, useContext, useState, useEffect, ReactNode } from "react";
+
+interface Site {
+  id: string;
+  name: string;
+}
+
+interface SiteContextType {
+  sites: Site[];
+  selectedSiteId: string | null;
+  selectedSite: Site | null;
+  setSelectedSiteId: (siteId: string | null) => void;
+  isLoading: boolean;
+}
+
+const SiteContext = createContext<SiteContextType | undefined>(undefined);
+
+export function SiteProvider({ children }: { children: ReactNode }) {
+  const [sites, setSites] = useState<Site[]>([]);
+  const [selectedSiteId, setSelectedSiteId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  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();
+  }, []);
+
+  const selectedSite = sites.find((site) => site.id === selectedSiteId) || null;
+
+  return (
+    <SiteContext.Provider
+      value={{
+        sites,
+        selectedSiteId,
+        selectedSite,
+        setSelectedSiteId,
+        isLoading,
+      }}
+    >
+      {children}
+    </SiteContext.Provider>
+  );
+}
+
+export function useSite() {
+  const context = useContext(SiteContext);
+  if (context === undefined) {
+    throw new Error("useSite must be used within a SiteProvider");
+  }
+  return context;
+}