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
-    title="Comparativa de Cosechas"
-    description="El análisis comparativo de cosechas está temporalmente deshabilitado."
-    icon="i-lucide-calendar-range"
-    technical-info="Módulo de análisis agrícola en proceso de actualización con nuevos indicadores y métricas."
-  />
+  <div class="flex flex-col gap-8">
+    <!-- Loading State -->
+    <UCard v-if="loading && !data" class="brand-card border border-transparent">
+      <div class="flex flex-col items-center justify-center gap-4 py-10 text-[var(--brand-text-muted)]">
+        <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>