From de546e00e031cb783de3440ed5ec6f7245288065 Mon Sep 17 00:00:00 2001
From: Marcos Fargas <mfargas@example.com>
Date: Thu, 15 Oct 2026 03:40:22 +0200
Subject: [PATCH] fix(context): recarga completa y refresco automatico al
 cambiar de cliente en Contexto

---
 src/components/CalendarPortfolioBoard.tsx |  5 +-
 src/components/TenantSwitcher.tsx         | 86 ++++++++++++++++-------
 2 files changed, 62 insertions(+), 29 deletions(-)

diff --git a/src/components/CalendarPortfolioBoard.tsx b/src/components/CalendarPortfolioBoard.tsx
index 393dcac..9e5b5b9 100644
--- a/src/components/CalendarPortfolioBoard.tsx
+++ b/src/components/CalendarPortfolioBoard.tsx
@@ -66,10 +66,7 @@ export default function CalendarPortfolioBoard({
     const href = latest
       ? `/dashboard/calendario?view=archive&month=${latest}`
       : '/dashboard/calendario?view=archive';
-    startTransition(() => {
-      router.push(href);
-      router.refresh();
-    });
+    window.location.href = href;
   }
 
   return (
diff --git a/src/components/TenantSwitcher.tsx b/src/components/TenantSwitcher.tsx
index d3a81a1..c77e51b 100644
--- a/src/components/TenantSwitcher.tsx
+++ b/src/components/TenantSwitcher.tsx
@@ -1,8 +1,7 @@
 'use client';
 
-import React, { useEffect, useState, useTransition } from 'react';
-import { useRouter } from 'next/navigation';
-import { ChevronDown, Eye, Building2 } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+import { ChevronDown, Eye, Building2, Loader2, Check } from 'lucide-react';
 
 type TenantOpt = { id: string; name: string; slug: string };
 
@@ -13,12 +12,11 @@ export default function TenantSwitcher({
   initialName: string;
   isAgency: boolean;
 }) {
-  const router = useRouter();
   const [open, setOpen] = useState(false);
   const [tenants, setTenants] = useState<TenantOpt[]>([]);
   const [activeName, setActiveName] = useState(initialName);
   const [activeId, setActiveId] = useState<string | null>(null);
-  const [pending, startTransition] = useTransition();
+  const [switching, setSwitching] = useState(false);
 
   useEffect(() => {
     if (!isAgency) return;
@@ -52,39 +50,74 @@ export default function TenantSwitcher({
 
   async function select(tenant: TenantOpt | null) {
     setOpen(false);
-    await fetch('/api/admin/active-tenant', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ tenantId: tenant?.id ?? null }),
-    });
-    setActiveId(tenant?.id ?? null);
-    setActiveName(tenant?.name ?? 'Vista global agencia');
-    startTransition(() => router.refresh());
+    setSwitching(true);
+    try {
+      await fetch('/api/admin/active-tenant', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ tenantId: tenant?.id ?? null }),
+      });
+      setActiveId(tenant?.id ?? null);
+      setActiveName(tenant?.name ?? 'Vista global agencia');
+
+      // Limpiar query params de tenant para que no haya conflicto
+      const currentUrl = new URL(window.location.href);
+      const hadTenantParam =
+        currentUrl.searchParams.has('tenant') ||
+        currentUrl.searchParams.has('tenant_id') ||
+        currentUrl.searchParams.has('tenantId');
+
+      currentUrl.searchParams.delete('tenant');
+      currentUrl.searchParams.delete('tenant_id');
+      currentUrl.searchParams.delete('tenantId');
+
+      if (hadTenantParam) {
+        window.location.href = currentUrl.toString();
+      } else {
+        window.location.reload();
+      }
+    } catch {
+      window.location.reload();
+    }
   }
 
   return (
     <div className="relative">
       <button
         type="button"
+        disabled={switching}
         onClick={() => setOpen((v) => !v)}
-        className="inline-flex items-center gap-2 bg-brand-50 text-brand-700 font-semibold px-2.5 py-1 rounded-md border border-brand-200 hover:bg-brand-100 transition-colors"
+        className="inline-flex items-center gap-2 bg-brand-50 text-brand-700 font-semibold px-2.5 py-1 rounded-md border border-brand-200 hover:bg-brand-100 transition-colors disabled:opacity-75 cursor-pointer"
+        title="Cambiar cliente en contexto"
       >
-        <Eye className="w-3.5 h-3.5" />
+        {switching ? (
+          <Loader2 className="w-3.5 h-3.5 animate-spin text-brand-600" />
+        ) : (
+          <Eye className="w-3.5 h-3.5" />
+        )}
         <span className="max-w-[200px] truncate">
-          {activeId ? activeName : 'Vista global agencia'}
+          {switching
+            ? 'Cargando cliente…'
+            : activeId
+              ? activeName
+              : 'Vista global agencia'}
         </span>
         <ChevronDown className="w-3.5 h-3.5 opacity-70" />
       </button>
+
       {open && (
         <div className="absolute left-0 top-full mt-2 z-50 w-72 rounded-xl border border-gray-200 bg-white shadow-xl py-1 max-h-80 overflow-y-auto">
           <button
             type="button"
-            disabled={pending}
+            disabled={switching}
             onClick={() => select(null)}
-            className="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
+            className="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center justify-between cursor-pointer"
           >
-            <Building2 className="w-3.5 h-3.5 text-amber-500" />
-            Vista global agencia
+            <div className="flex items-center gap-2">
+              <Building2 className="w-3.5 h-3.5 text-amber-500" />
+              <span>Vista global agencia</span>
+            </div>
+            {!activeId && <Check className="w-3.5 h-3.5 text-brand-600" />}
           </button>
           <div className="border-t border-gray-100 my-1" />
           {tenants.length === 0 ? (
@@ -96,14 +129,17 @@ export default function TenantSwitcher({
               <button
                 key={t.id}
                 type="button"
-                disabled={pending}
+                disabled={switching}
                 onClick={() => select(t)}
-                className={`w-full text-left px-3 py-2 text-sm hover:bg-gray-50 ${
-                  activeId === t.id ? 'text-brand-600' : 'text-gray-800'
+                className={`w-full text-left px-3 py-2 text-sm hover:bg-gray-50 flex items-center justify-between cursor-pointer ${
+                  activeId === t.id ? 'text-brand-600 font-semibold bg-brand-50/50' : 'text-gray-800'
                 }`}
               >
-                <span className="font-medium">{t.name}</span>
-                <span className="block text-[10px] text-gray-500">{t.slug}</span>
+                <div>
+                  <span className="font-medium block leading-snug">{t.name}</span>
+                  <span className="block text-[10px] text-gray-500 font-mono">{t.slug}</span>
+                </div>
+                {activeId === t.id && <Check className="w-3.5 h-3.5 text-brand-600 shrink-0 ml-2" />}
               </button>
             ))
           )}