From f1f5b84af94aff6ad99321b2152f0c8e8fe93209 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Wed, 29 Oct 2025 15:22:35 -0600
Subject: [PATCH] Refactor: controlar peticiones a Metabase en panorama
 facturador
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cambios realizados:
- Mover botón "Actualizar" al footer del card de Filtros
- Implementar guard para prevenir peticiones simultáneas
- Eliminar watcher automático de fechas
- Deshabilitar recarga automática al cambiar "incluir anulados"
- Usuario debe hacer clic explícito en "Actualizar" para cargar datos

Esto garantiza que solo una petición a Metabase esté activa a la vez
y da control total al usuario sobre cuándo recargar los datos.
---
 nuxt4-app/app/pages/panorama.vue | 45 ++++++++++++++++----------------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/nuxt4-app/app/pages/panorama.vue b/nuxt4-app/app/pages/panorama.vue
index 27370a0..8004fb5 100644
--- a/nuxt4-app/app/pages/panorama.vue
+++ b/nuxt4-app/app/pages/panorama.vue
@@ -13,7 +13,7 @@
     <!-- Error State -->
     <div v-else-if="error" class="rounded-lg border border-red-500/40 bg-red-500/18 p-4 text-sm text-red-200">
       <p>Error al cargar datos: {{ error }}</p>
-      <UButton class="mt-4" @click="loadData" color="primary">
+      <UButton class="mt-4" :loading="loading" :disabled="loading" @click="loadData" color="primary">
         Reintentar
       </UButton>
     </div>
@@ -58,23 +58,14 @@
         />
 
         <template #footer>
-          <div class="text-xs text-[var(--brand-text-muted)]">
-            Rango activo: {{ rangoLegible }} · Registros considerados: Ingresos {{ data.conteos.ingresos_filtrados }}/{{ data.conteos.ingresos_total }} · Rechazos {{ data.conteos.rechazos_filtrados }}/{{ data.conteos.rechazos_total }}
-          </div>
-        </template>
-      </UCard>
-
-      <!-- Totales Financieros - Resumen Principal -->
-      <UCard class="brand-card border border-transparent">
-        <template #header>
-          <div class="flex items-center justify-between">
-            <div>
-              <h2 class="text-2xl font-bold brand-section-title">Totales Financieros</h2>
-              <p class="text-sm text-[var(--brand-text-muted)] mt-1">Vista general de ingresos, inversiones y rechazos</p>
+          <div class="flex flex-col sm:flex-row items-center justify-between gap-3">
+            <div class="text-xs text-[var(--brand-text-muted)]">
+              Rango activo: {{ rangoLegible }} · Registros considerados: Ingresos {{ data.conteos.ingresos_filtrados }}/{{ data.conteos.ingresos_total }} · Rechazos {{ data.conteos.rechazos_filtrados }}/{{ data.conteos.rechazos_total }}
             </div>
             <UButton
               :loading="loading"
-              :ui="{ base: 'bg-[#c08040] text-[#1b1209] border border-[#d99a56] hover:bg-[#d99a56] hover:border-[#f0c07c]' }"
+              :disabled="loading"
+              :ui="{ base: 'bg-[#c08040] text-[#1b1209] border border-[#d99a56] hover:bg-[#d99a56] hover:border-[#f0c07c] disabled:opacity-50 disabled:cursor-not-allowed' }"
               size="sm"
               @click="loadData"
             >
@@ -85,6 +76,16 @@
             </UButton>
           </div>
         </template>
+      </UCard>
+
+      <!-- Totales Financieros - Resumen Principal -->
+      <UCard class="brand-card border border-transparent">
+        <template #header>
+          <div>
+            <h2 class="text-2xl font-bold brand-section-title">Totales Financieros</h2>
+            <p class="text-sm text-[var(--brand-text-muted)] mt-1">Vista general de ingresos, inversiones y rechazos</p>
+          </div>
+        </template>
 
         <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
           <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-6 py-4">
@@ -172,6 +173,12 @@ const formatCurrency = (value: number) => {
 
 // Methods
 async function loadData() {
+  // Prevenir múltiples peticiones simultáneas
+  if (loading.value) {
+    console.warn('Ya hay una petición en proceso, ignorando nueva solicitud')
+    return
+  }
+
   loading.value = true
   error.value = null
 
@@ -218,8 +225,7 @@ async function onToggleAnulados(newValue: boolean | 'indeterminate') {
     }
   }
 
-  // Recargar datos con el nuevo valor
-  await loadData()
+  // NO recargar automáticamente - el usuario debe hacer clic en "Actualizar"
 }
 
 function onUpdatePreset(value: PresetValue) {
@@ -234,11 +240,6 @@ function onUpdateFechaHasta(value: string | null) {
   fechaHasta.value = value
 }
 
-// Watchers - reload data when filters change
-watch([fechaDesde, fechaHasta], () => {
-  loadData()
-})
-
 // Load data on mount
 onMounted(() => {
   // Default preset: cosecha 25-26