Feat: Reactivar página de Comparativa de Cosechas con integración Metabase

- Agregar configuración de queries comparativa en metabase-queries.ts
- Crear endpoint /api/metabase/comparativa-cosechas.post.ts
- Crear 4 queries en Metabase:
  * comparativa_datos_diarios_completos (ID: 56)
  * comparativa_totales_por_cosecha (ID: 57)
  * comparativa_datos_acumulados_por_dia (ID: 58)
  * comparativa_metadata_cosechas (ID: 59)
- Restaurar página comparativa-cosechas.vue con nueva arquitectura
- Remover badge de mantenimiento del sidebar
- Integrar con componentes CosechasHeatmap, CosechasEvolucion y CosechasTotales
- Usar vista_resumen_ingresos como fuente de datos

La página permite comparar métricas entre diferentes cosechas de café
con visualizaciones interactivas y filtros configurables.

nuxt4-app/app/pages/comparativa-cosechas.vue

@@ -1,15 +1,326 @@
 <template>
-  <MaintenanceMode
+  <div class="flex flex-col gap-8">
-    title="Comparativa de Cosechas"
+    <!-- Loading State -->
-    description="El análisis comparativo de cosechas está temporalmente deshabilitado."
+    <UCard v-if="loading && !data" class="brand-card border border-transparent">
-    icon="i-lucide-calendar-range"
+      <div class="flex flex-col items-center justify-center gap-4 py-10 text-[var(--brand-text-muted)]">
-    technical-info="Módulo de análisis agrícola en proceso de actualización con nuevos indicadores y métricas."
+        <div class="flex items-center gap-3">
-  />
+          <span class="inline-flex h-8 w-8 animate-spin rounded-full border-2 border-[var(--brand-primary-strong)] border-t-transparent align-middle" aria-hidden="true" />
+          <span class="text-sm uppercase tracking-[0.3em]">Cargando datos...</span>
+        </div>
+      </div>
+    </UCard>
+
+    <!-- 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" :loading="loading" :disabled="loading" @click="loadData" color="primary">
+        Reintentar
+      </UButton>
+    </div>
+
+    <!-- Main Content -->
+    <template v-else>
+      <!-- Card de Filtros -->
+      <UCard
+        :class="[
+          'brand-card border transition-all duration-300',
+          hasPendingChanges
+            ? 'border-yellow-500/60'
+            : 'border-transparent'
+        ]"
+      >
+        <template #header>
+          <div class="flex flex-col gap-3">
+            <div class="flex flex-wrap items-center justify-between gap-3">
+              <div>
+                <h2 class="text-xl font-bold brand-section-title">Comparativa de Cosechas</h2>
+                <p class="text-xs text-[var(--brand-text-muted)] mt-1">
+                  Compara métricas entre diferentes cosechas de café
+                </p>
+              </div>
+              <div class="flex items-center gap-2">
+                <UCheckbox v-model="incluirAnulados" label="Incluir anulados" @update:model-value="onToggleAnulados" />
+              </div>
+            </div>
+
+            <!-- Alerta de cambios pendientes -->
+            <UAlert
+              v-if="hasPendingChanges"
+              color="warning"
+              variant="soft"
+              class="py-2"
+            >
+              <template #title>
+                <div class="flex items-center justify-between gap-3 text-sm">
+                  <div class="flex items-center gap-2">
+                    <span class="inline-flex h-2 w-2 rounded-full bg-yellow-500 animate-pulse"></span>
+                    <span class="font-medium">Cambios pendientes - Haz clic en "Actualizar" para aplicar</span>
+                  </div>
+                </div>
+              </template>
+            </UAlert>
+
+            <!-- Alerta roja cuando incluye anulados -->
+            <UAlert
+              v-if="incluirAnulados"
+              color="error"
+              variant="solid"
+              icon="i-lucide-alert-triangle"
+              title="Incluir anulados activado"
+              description="Los cálculos incluyen registros anulados. Esto puede afectar los resultados."
+            />
+          </div>
+        </template>
+
+        <!-- Selector de Cosechas -->
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 mb-4">
+          <label
+            v-for="cosecha in cosechasDisponibles"
+            :key="cosecha.id"
+            class="flex items-center gap-2 p-3 rounded-lg border transition-all"
+            :class="[
+              cosechasSeleccionadas.includes(cosecha.id)
+                ? 'border-[var(--brand-primary-strong)] bg-[var(--brand-primary-strong)]/10 cursor-pointer'
+                : 'border-[var(--brand-border)] hover:border-[var(--brand-primary-strong)]/50 cursor-pointer'
+            ]"
+          >
+            <input
+              type="checkbox"
+              :value="cosecha.id"
+              v-model="cosechasSeleccionadas"
+              class="rounded border-[var(--brand-border)] text-[var(--brand-primary-strong)] focus:ring-[var(--brand-primary-strong)]"
+            />
+            <span class="text-sm text-[var(--brand-text)]">{{ cosecha.label }}</span>
+          </label>
+        </div>
+
+        <template #footer>
+          <div class="flex flex-col sm:flex-row items-center justify-between gap-3">
+            <div class="text-xs text-[var(--brand-text-muted)]">
+              Cosechas seleccionadas: {{ cosechasSeleccionadas.length }} de {{ cosechasDisponibles.length }}
+            </div>
+            <UButton
+              :loading="loading"
+              :disabled="loading || cosechasSeleccionadas.length === 0"
+              :ui="{
+                base: hasPendingChanges
+                  ? 'bg-yellow-500 text-black border border-yellow-600 hover:bg-yellow-400 hover:border-yellow-500 disabled:opacity-50 disabled:cursor-not-allowed'
+                  : 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)] border border-[var(--brand-primary)] hover:bg-[var(--brand-primary)] hover:border-[var(--brand-accent)] disabled:opacity-50 disabled:cursor-not-allowed'
+              }"
+              size="sm"
+              @click="loadData"
+            >
+              <template #leading>
+                <UIcon name="i-lucide-refresh-cw" :class="{ 'animate-spin': loading }" />
+              </template>
+              Actualizar
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+
+      <!-- Visualizaciones -->
+      <template v-if="data && data.datosDiariosCompletos.length > 0">
+        <CosechasHeatmap
+          :ingresos="resumenIngresosProcesados"
+          :cosechas-seleccionadas="cosechasSeleccionadas"
+        />
+
+        <CosechasEvolucion
+          :ingresos="resumenIngresosProcesados"
+          :cosechas-seleccionadas="cosechasSeleccionadas"
+        />
+
+        <CosechasTotales
+          :ingresos="resumenIngresosProcesados"
+          :cosechas-seleccionadas="cosechasSeleccionadas"
+        />
+      </template>
+
+      <!-- Estado vacío -->
+      <UCard v-else-if="data && data.datosDiariosCompletos.length === 0" class="brand-card border border-transparent">
+        <div class="flex flex-col items-center justify-center gap-4 py-16 text-center">
+          <div class="rounded-full bg-[var(--brand-primary-strong)]/10 p-6">
+            <UIcon name="i-lucide-calendar-x" class="w-12 h-12 text-[var(--brand-primary-strong)]" />
+          </div>
+          <div class="flex flex-col gap-2">
+            <h3 class="text-lg font-semibold text-[var(--brand-text)]">
+              No hay datos disponibles
+            </h3>
+            <p class="text-sm text-[var(--brand-text-muted)] max-w-md">
+              No se encontraron datos para las cosechas seleccionadas. Intenta seleccionar otras cosechas.
+            </p>
+          </div>
+        </div>
+      </UCard>
+
+      <!-- Mensaje de bienvenida (sin datos cargados) -->
+      <UCard v-else class="brand-card border border-transparent">
+        <div class="flex flex-col items-center justify-center gap-4 py-16 text-center">
+          <div class="rounded-full bg-[var(--brand-primary-strong)]/10 p-6">
+            <UIcon name="i-lucide-bar-chart-3" class="w-12 h-12 text-[var(--brand-primary-strong)]" />
+          </div>
+          <div class="flex flex-col gap-2">
+            <h3 class="text-lg font-semibold text-[var(--brand-text)]">
+              Comparativa de Cosechas
+            </h3>
+            <p class="text-sm text-[var(--brand-text-muted)] max-w-md">
+              Selecciona las cosechas que deseas comparar y haz clic en "Actualizar"
+            </p>
+          </div>
+        </div>
+      </UCard>
+    </template>
+  </div>
 </template>
 
 <script setup lang="ts">
+// Define page metadata
 definePageMeta({
   layout: 'informe',
   title: 'Comparativa Cosechas'
 })
+
+// Definiciones de cosechas disponibles
+const cosechasDisponibles = ref([
+  { id: 'cosecha-20-21', label: 'Cosecha 20-21', fechaInicio: '2020-09-08', fechaFin: '2021-09-07' },
+  { id: 'cosecha-21-22', label: 'Cosecha 21-22', fechaInicio: '2021-09-08', fechaFin: '2022-09-07' },
+  { id: 'cosecha-22-23', label: 'Cosecha 22-23', fechaInicio: '2022-09-08', fechaFin: '2023-09-07' },
+  { id: 'cosecha-23-24', label: 'Cosecha 23-24', fechaInicio: '2023-09-08', fechaFin: '2024-09-07' },
+  { id: 'cosecha-24-25', label: 'Cosecha 24-25', fechaInicio: '2024-09-08', fechaFin: '2025-09-07' },
+  { id: 'cosecha-25-26', label: 'Cosecha 25-26', fechaInicio: '2025-09-08', fechaFin: '2026-09-07' }
+])
+
+// Configuración de estilos para las gráficas
+const estilosGraficas = ref({
+  coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', '#8b6f47', '#a0826e', '#b89968', 'var(--brand-accent)'],
+  anchoCelda: 80,
+  altoCelda: 6,
+  anchoMaxBarra: 300,
+  altoBarra: 8,
+  opacidadVacias: 0.05
+})
+
+// Provide para que los componentes puedan acceder a estas configuraciones
+provide('cosechasDisponibles', cosechasDisponibles.value)
+provide('estilosGraficas', estilosGraficas)
+
+// Reactive state
+const data = ref<any>(null)
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+// Filtros
+const incluirAnulados = ref(false)
+const cosechasSeleccionadas = ref<string[]>(['cosecha-24-25', 'cosecha-25-26'])
+
+// Filtros aplicados (los que se usaron en la última carga de datos)
+const appliedFilters = ref<{
+  cosechasSeleccionadas: string[]
+  incluirAnulados: boolean
+} | null>(null)
+
+// Computed
+// Detectar si hay cambios pendientes sin aplicar
+const hasPendingChanges = computed(() => {
+  // Si no hay datos cargados, no hay cambios pendientes
+  if (!appliedFilters.value) return false
+
+  // Comparar filtros actuales con los aplicados
+  const cosechasChanged = JSON.stringify(cosechasSeleccionadas.value.sort()) !== JSON.stringify(appliedFilters.value.cosechasSeleccionadas.sort())
+  const anuladosChanged = incluirAnulados.value !== appliedFilters.value.incluirAnulados
+
+  return cosechasChanged || anuladosChanged
+})
+
+// Procesar datos de resumen para los componentes
+// Los componentes esperan el formato de vista_resumen_ingresos (que es lo que devuelve la query)
+const resumenIngresosProcesados = computed(() => {
+  if (!data.value || !data.value.datosDiariosCompletos) return []
+
+  // La query ya devuelve los datos en el formato correcto con las métricas agregadas por día
+  // Solo necesitamos mapear los nombres de campos si es necesario
+  return data.value.datosDiariosCompletos.map((row: any) => ({
+    fecha: row.fecha,
+    created_at: row.fecha, // Algunos componentes esperan created_at
+    cosecha_id: row.cosecha_id,
+    dia_relativo: row.dia_relativo,
+    total_peso_seco: row.total_peso_seco || 0,
+    peso_neto_uva: row.peso_neto_uva || 0,
+    peso_neto_verde: row.peso_neto_verde || 0,
+    sacos_total_dia: row.sacos_total_dia || 0,
+    total_lempiras_uva: row.total_lempiras_uva || 0,
+    total_lempiras_verde: row.total_lempiras_verde || 0,
+    total_lempiras_mojado: row.total_lempiras_mojado || 0,
+    total_lempiras_oreado: row.total_lempiras_oreado || 0,
+    total_lempiras_mojado_oreado: row.total_lempiras_mojado_oreado || 0
+  }))
+})
+
+// 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
+  }
+
+  // Validar que haya cosechas seleccionadas
+  if (cosechasSeleccionadas.value.length === 0) {
+    error.value = 'Debes seleccionar al menos una cosecha'
+    return
+  }
+
+  loading.value = true
+  error.value = null
+
+  try {
+    const result = await $fetch('/api/metabase/comparativa-cosechas', {
+      method: 'POST',
+      body: {
+        cosechas_ids: cosechasSeleccionadas.value,
+        incluir_anulados: incluirAnulados.value
+      }
+    })
+
+    data.value = result
+
+    // Guardar los filtros aplicados
+    appliedFilters.value = {
+      cosechasSeleccionadas: [...cosechasSeleccionadas.value],
+      incluirAnulados: incluirAnulados.value
+    }
+  } catch (err: any) {
+    error.value = err.message || 'Error al cargar datos'
+    console.error('Error loading comparativa data:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function onToggleAnulados(newValue: boolean | 'indeterminate') {
+  if (newValue === true) {
+    // Pedir confirmación al activar
+    const confirmed = confirm(
+      '⚠️ ADVERTENCIA\n\n' +
+      'Está a punto de incluir registros ANULADOS en los cálculos.\n\n' +
+      'Esto puede afectar significativamente los resultados de la comparativa.\n\n' +
+      '¿Está seguro de que desea continuar?'
+    )
+
+    if (!confirmed) {
+      // Si cancela, revertir el cambio
+      incluirAnulados.value = false
+      return
+    }
+  }
+
+  // NO recargar automáticamente - el usuario debe hacer clic en "Actualizar"
+}
+
+// Inicialización
+onMounted(() => {
+  // Cargar datos automáticamente con las cosechas por defecto
+  loadData()
+})
 </script>

nuxt4-app/server/api/metabase/comparativa-cosechas.post.ts

@@ -0,0 +1,127 @@
+import { METABASE_QUERIES } from '../../config/metabase-queries'
+
+/**
+ * Execute all comparativa cosechas queries in parallel
+ * Returns data for the Comparativa de Cosechas page
+ */
+export default defineEventHandler(async (event) => {
+  const body = await readBody(event)
+
+  const { cosechas_ids = [], incluir_anulados = false } = body
+
+  try {
+    // First, get all cards to find our comparativa queries
+    const allCards = await getMetabaseCards('all')
+
+    // Find our comparativa queries by name using centralized config
+    const queryNames = METABASE_QUERIES.comparativa
+
+    const cards: Record<string, any> = {}
+
+    console.log('[Comparativa] Available cards:', allCards.map((c: any) => ({ id: c.id, name: c.name })))
+    console.log('[Comparativa] Looking for queries:', queryNames)
+
+    for (const [key, name] of Object.entries(queryNames)) {
+      const card = allCards.find((c: any) => c.name === name)
+      if (!card) {
+        console.warn(`[Comparativa] Query not found: ${name}`)
+      } else {
+        console.log(`[Comparativa] Found card ${key}: ${name} (ID: ${card.id})`)
+        cards[key] = card
+      }
+    }
+
+    console.log('[Comparativa] Cards to execute:', Object.keys(cards))
+
+    // Build parameters array for Metabase queries
+    // Las queries SQL nativas usan template-tags de tipo 'text' para arrays
+    const parameters = [
+      {
+        type: 'text',
+        target: ['variable', ['template-tag', 'cosechas_ids']],
+        value: cosechas_ids
+      },
+      {
+        type: 'boolean',
+        target: ['variable', ['template-tag', 'incluir_anulados']],
+        value: incluir_anulados
+      }
+    ]
+
+    // Execute all queries in parallel with error handling
+    const executeWithErrorHandling = async (name: string, cardId: number | undefined, defaultValue: any) => {
+      if (!cardId) {
+        console.warn(`[Comparativa] No card ID for ${name}`)
+        return defaultValue
+      }
+
+      try {
+        console.log(`[Comparativa] Executing query: ${name} (ID: ${cardId}) with params:`, JSON.stringify(parameters))
+        const result = await executeCardQuery(cardId, parameters)
+        console.log(`[Comparativa] Query ${name} result:`, {
+          hasData: !!result.data,
+          rowsLength: result.data?.rows?.length || 0,
+          colsLength: result.data?.cols?.length || 0,
+          firstRow: result.data?.rows?.[0] || null
+        })
+        return result
+      } catch (error: any) {
+        console.error(`[Comparativa] Error executing ${name}:`, error.message, error.stack)
+        return defaultValue
+      }
+    }
+
+    const [
+      datosDiariosCompletos,
+      totalesPorCosecha,
+      datosAcumuladosPorDia,
+      metadataCosechas
+    ] = await Promise.all([
+      executeWithErrorHandling('datosDiariosCompletos', cards.datos_diarios_completos?.id, { data: { rows: [], cols: [] } }),
+      executeWithErrorHandling('totalesPorCosecha', cards.totales_por_cosecha?.id, { data: { rows: [], cols: [] } }),
+      executeWithErrorHandling('datosAcumuladosPorDia', cards.datos_acumulados_por_dia?.id, { data: { rows: [], cols: [] } }),
+      executeWithErrorHandling('metadataCosechas', cards.metadata_cosechas?.id, { data: { rows: [], cols: [] } })
+    ])
+
+    // Transform Metabase responses to objects for easier frontend consumption
+    const transformMultipleRows = (result: any) => {
+      console.log('[Comparativa] transformMultipleRows input:', {
+        hasData: !!result.data,
+        hasRows: !!result.data?.rows,
+        hasCols: !!result.data?.cols,
+        rowsLength: result.data?.rows?.length
+      })
+
+      if (!result.data?.rows || !result.data?.cols) {
+        console.warn('[Comparativa] transformMultipleRows: Missing data, rows, or cols')
+        return []
+      }
+
+      const cols = result.data.cols
+      const transformed = result.data.rows.map((row: any[]) => {
+        const obj: any = {}
+        cols.forEach((col: any, index: number) => {
+          obj[col.name] = row[index]
+        })
+        return obj
+      })
+
+      console.log('[Comparativa] transformMultipleRows output:', transformed.length, 'rows')
+      return transformed
+    }
+
+    // Return all data in a structured format
+    return {
+      datosDiariosCompletos: transformMultipleRows(datosDiariosCompletos),
+      totalesPorCosecha: transformMultipleRows(totalesPorCosecha),
+      datosAcumuladosPorDia: transformMultipleRows(datosAcumuladosPorDia),
+      metadataCosechas: transformMultipleRows(metadataCosechas)
+    }
+  } catch (error: any) {
+    console.error('[API] Failed to execute comparativa queries:', error)
+    throw createError({
+      statusCode: error.statusCode || 500,
+      statusMessage: error.statusMessage || 'Failed to execute comparativa queries'
+    })
+  }
+})

nuxt4-app/server/config/metabase-queries.ts

@@ -33,6 +33,16 @@ export const METABASE_QUERIES = {
     serie_temporal: 'Informe Ingresos - Serie Temporal Acumulada',
     opciones_filtros: 'Informe Ingresos - Opciones de Filtros',
     contadores: 'Informe Ingresos - Contadores de Filtros'
+  },
+
+  /**
+   * Queries para Comparativa de Cosechas
+   */
+  comparativa: {
+    datos_diarios_completos: 'comparativa_datos_diarios_completos',
+    totales_por_cosecha: 'comparativa_totales_por_cosecha',
+    datos_acumulados_por_dia: 'comparativa_datos_acumulados_por_dia',
+    metadata_cosechas: 'comparativa_metadata_cosechas'
   }
 } as const
 
@@ -42,3 +52,4 @@ export const METABASE_QUERIES = {
 export type MetabaseQueryCategory = keyof typeof METABASE_QUERIES
 export type PanoramaQueryKey = keyof typeof METABASE_QUERIES.panorama
 export type InformeQueryKey = keyof typeof METABASE_QUERIES.informe
+export type ComparativaQueryKey = keyof typeof METABASE_QUERIES.comparativa