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>
This commit is contained in:
Ivan
2026-02-01 08:41:02 +00:00
parent 51ecb1b231
commit 242b8bad3d
4 changed files with 107 additions and 57 deletions

View File

@@ -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>
)}