Refactor: reactivar página Informe de Ingresos con arquitectura Metabase

- Reescribir informe-ingresos.vue siguiendo patrón de panorama.vue
- Implementar filosofía "Metabase calcula TODO, Vue solo renderiza"
- Agregar filtros avanzados: tipos de café, estados
- Integrar con endpoint /api/metabase/informe existente
- Usar componentes reutilizables: TotalesIngresoCompra, TotalesMonetarios, TotalesVerde
- Implementar detección de cambios pendientes con alertas visuales
- Agregar confirmación para incluir registros anulados
- Eliminar documentación redundante de queries (ya está en Metabase Debug)
- Layout informe con control de visibilidad de secciones
- Placeholders para tablas y gráficas futuras

nuxt4-app/app/pages/informe-ingresos.vue

@@ -1,256 +1,443 @@
 <template>
   <div class="flex flex-col gap-8">
-    <!-- Filtros -->
-    <UCard class="brand-card border 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">Filtros y Configuraciones</h2>
-              <p class="text-xs text-[var(--brand-text-muted)] mt-1">
-                Aplicados a ingresos de café
-              </p>
-            </div>
-            <div class="flex items-center gap-2">
-              <UCheckbox
-                v-model="filters.incluir_anulados"
-                label="Incluir anulados"
-              />
-            </div>
-          </div>
-        </div>
-      </template>
-
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        <!-- Fecha Desde -->
-        <div>
-          <label class="block text-sm font-medium mb-1 text-[var(--brand-text)]">Fecha Desde</label>
-          <input
-            v-model="filters.fecha_desde"
-            type="date"
-            class="w-full px-3 py-2 border rounded-md bg-[var(--brand-bg)] border-[var(--brand-border)] text-[var(--brand-text)]"
-          />
-        </div>
-
-        <!-- Fecha Hasta -->
-        <div>
-          <label class="block text-sm font-medium mb-1 text-[var(--brand-text)]">Fecha Hasta</label>
-          <input
-            v-model="filters.fecha_hasta"
-            type="date"
-            class="w-full px-3 py-2 border rounded-md bg-[var(--brand-bg)] border-[var(--brand-border)] text-[var(--brand-text)]"
-          />
-        </div>
-
-        <!-- Granularidad -->
-        <div>
-          <label class="block text-sm font-medium mb-1 text-[var(--brand-text)]">Granularidad</label>
-          <select
-            v-model="filters.granularidad"
-            class="w-full px-3 py-2 border rounded-md bg-[var(--brand-bg)] border-[var(--brand-border)] text-[var(--brand-text)]"
-          >
-            <option value="dia">Día</option>
-            <option value="semana">Semana</option>
-            <option value="mes">Mes</option>
-          </select>
+    <!-- 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-[#c08040] border-t-transparent align-middle" aria-hidden="true" />
+          <span class="text-sm uppercase tracking-[0.3em]">Cargando datos...</span>
         </div>
       </div>
+    </UCard>
 
-      <!-- Filtros Avanzados (colapsables) -->
-      <UAccordion :items="[{ label: 'Filtros Avanzados', icon: 'i-lucide-sliders-horizontal', defaultOpen: false, slot: 'advanced' }]" class="mt-4">
-        <template #advanced>
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
-            <!-- Tipos -->
+    <!-- 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>
+
+    <!-- Initial State - No data loaded yet -->
+    <template v-else-if="!data && !loading">
+      <!-- Card de Filtros -->
+      <UCard class="brand-card border 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">Filtros y Configuraciones</h2>
+                <p class="text-xs text-[var(--brand-text-muted)] mt-1">
+                  Aplicados a <code>created_at</code> de ingresos
+                </p>
+              </div>
+              <div class="flex items-center gap-2">
+                <UCheckbox v-model="includeAnulados" label="Incluir anulados" @update:model-value="onToggleAnulados" />
+              </div>
+            </div>
+
+            <!-- Alerta roja cuando incluye anulados -->
+            <UAlert
+              v-if="includeAnulados"
+              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 financieros."
+            />
+          </div>
+        </template>
+
+        <DateRangeSelector
+          :selected-preset="selectedPreset"
+          :fecha-desde="fechaDesde"
+          :fecha-hasta="fechaHasta"
+          @update:selected-preset="onUpdatePreset"
+          @update:fecha-desde="onUpdateFechaDesde"
+          @update:fecha-hasta="onUpdateFechaHasta"
+        />
+
+        <!-- Filtros Avanzados -->
+        <div class="mt-6 space-y-4">
+          <h3 class="text-sm font-semibold text-[var(--brand-text)]">Filtros Avanzados</h3>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <!-- Tipos de Café -->
             <div>
-              <label class="block text-sm font-medium mb-1">Tipos de Café</label>
+              <label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Tipos de Café</label>
               <div class="space-y-2">
-                <UCheckbox v-model="tiposSeleccionados.uva" label="Uva" />
-                <UCheckbox v-model="tiposSeleccionados.mojado" label="Mojado" />
-                <UCheckbox v-model="tiposSeleccionados.oreado" label="Oreado" />
-                <UCheckbox v-model="tiposSeleccionados.verde" label="Verde" />
+                <UCheckbox v-model="filterTipos.uva" label="Uva" />
+                <UCheckbox v-model="filterTipos.mojado" label="Mojado" />
+                <UCheckbox v-model="filterTipos.oreado" label="Oreado" />
+                <UCheckbox v-model="filterTipos.verde" label="Verde" />
               </div>
             </div>
 
             <!-- Estados -->
             <div>
-              <label class="block text-sm font-medium mb-1">Estados</label>
+              <label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Estados</label>
               <div class="space-y-2">
-                <UCheckbox v-model="estadosSeleccionados.pagado" label="Pagado" />
-                <UCheckbox v-model="estadosSeleccionados.pendiente" label="Pendiente" />
+                <UCheckbox v-model="filterEstados.pagado" label="Pagado" />
+                <UCheckbox v-model="filterEstados.pendiente" label="Pendiente" />
+              </div>
+            </div>
+          </div>
+        </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)]">
+              Rango activo: {{ rangoLegible }}
+            </div>
+            <UButton
+              :loading="loading"
+              :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"
+            >
+              <template #leading>
+                <UIcon name="i-lucide-refresh-cw" :class="{ 'animate-spin': loading }" />
+              </template>
+              Actualizar
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+
+      <!-- Mensaje de bienvenida -->
+      <UCard 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-[#c08040]/10 p-6">
+            <UIcon name="i-lucide-file-text" class="w-12 h-12 text-[#c08040]" />
+          </div>
+          <div class="flex flex-col gap-2">
+            <h3 class="text-lg font-semibold text-[var(--brand-text)]">
+              Informe de Ingresos
+            </h3>
+            <p class="text-sm text-[var(--brand-text-muted)] max-w-md">
+              Configura los filtros y haz clic en el botón "Actualizar" para cargar el informe detallado de ingresos
+            </p>
+          </div>
+        </div>
+      </UCard>
+    </template>
+
+    <!-- Main Content -->
+    <template v-else-if="data">
+      <!-- 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">Filtros y Configuraciones</h2>
+                <p class="text-xs text-[var(--brand-text-muted)] mt-1">
+                  Aplicados a <code>created_at</code> de ingresos
+                </p>
+              </div>
+              <div class="flex items-center gap-2">
+                <UCheckbox v-model="includeAnulados" label="Incluir anulados" @update:model-value="onToggleAnulados" />
               </div>
             </div>
 
-            <!-- Placeholder para filtros futuros -->
-            <div class="col-span-2 text-sm text-gray-500">
-              Filtros de ubicaciones, calidades y clientes se agregarán próximamente
+            <!-- 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="includeAnulados"
+              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 financieros."
+            />
+          </div>
+        </template>
+
+        <DateRangeSelector
+          :selected-preset="selectedPreset"
+          :fecha-desde="fechaDesde"
+          :fecha-hasta="fechaHasta"
+          @update:selected-preset="onUpdatePreset"
+          @update:fecha-desde="onUpdateFechaDesde"
+          @update:fecha-hasta="onUpdateFechaHasta"
+        />
+
+        <!-- Filtros Avanzados -->
+        <div class="mt-6 space-y-4">
+          <h3 class="text-sm font-semibold text-[var(--brand-text)]">Filtros Avanzados</h3>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <!-- Tipos de Café -->
+            <div>
+              <label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Tipos de Café</label>
+              <div class="space-y-2">
+                <UCheckbox v-model="filterTipos.uva" label="Uva" />
+                <UCheckbox v-model="filterTipos.mojado" label="Mojado" />
+                <UCheckbox v-model="filterTipos.oreado" label="Oreado" />
+                <UCheckbox v-model="filterTipos.verde" label="Verde" />
+              </div>
+            </div>
+
+            <!-- Estados -->
+            <div>
+              <label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Estados</label>
+              <div class="space-y-2">
+                <UCheckbox v-model="filterEstados.pagado" label="Pagado" />
+                <UCheckbox v-model="filterEstados.pendiente" label="Pendiente" />
+              </div>
             </div>
           </div>
-        </template>
-      </UAccordion>
 
-      <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)]">
-            Filtros aplicados al informe de ingresos
-          </div>
-          <UButton
-            :loading="loading"
-            :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="applyFilters"
-          >
-            <template #leading>
-              <UIcon name="i-lucide-refresh-cw" :class="{ 'animate-spin': loading }" />
-            </template>
-            Actualizar
-          </UButton>
+          <!-- Nota sobre filtros futuros -->
+          <p class="text-xs text-[var(--brand-text-muted)] italic">
+            Los filtros de clientes, ubicaciones y calidades se agregarán próximamente
+          </p>
         </div>
-      </template>
-    </UCard>
 
-    <!-- Error Display -->
-    <UAlert
-      v-if="error"
-      color="error"
-      variant="soft"
-      :title="error"
-      :close-button="{ icon: 'i-heroicons-x-mark-20-solid', color: 'error', variant: 'link' }"
-      @close="error = null"
-    />
-
-    <!-- Loading State -->
-    <div v-if="loading" class="flex justify-center py-12">
-      <UIcon name="i-lucide-loader-2" class="w-8 h-8 animate-spin" />
-    </div>
-
-    <!-- Content -->
-    <div v-else-if="data" class="flex flex-col gap-8">
-      <!-- Totales Monetarios -->
-      <TotalesMonetarios v-if="pageSections.totalesCafe" :data="data.totalesMonetarios" />
-
-      <!-- Totales Ingreso y Compra -->
-      <TotalesIngresoCompra v-if="pageSections.totalesCafe" :data="data.totalesIngresoCompra" />
-
-      <!-- Totales Verde -->
-      <TotalesVerde v-if="pageSections.totalesVerde" :data="data.totalesVerde" />
+        <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)]">
+              Rango activo: {{ rangoLegible }} · Registros filtrados: {{ data.contadores.ingresos_filtrados || 0 }}/{{ data.contadores.total_ingresos || 0 }}
+            </div>
+            <UButton
+              :loading="loading"
+              :disabled="loading"
+              :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-[#c08040] text-[#1b1209] border border-[#d99a56] hover:bg-[#d99a56] hover:border-[#f0c07c] 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>
 
       <!-- Contadores -->
-      <UCard v-if="data.contadores">
+      <UCard v-if="data.contadores" class="brand-card border border-transparent">
         <template #header>
-          <h3 class="text-lg font-semibold">Estadísticas</h3>
+          <h2 class="text-xl font-bold brand-section-title">Estadísticas del Filtro</h2>
         </template>
+
         <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <div class="text-center">
-            <div class="text-2xl font-bold text-primary">{{ data.contadores.ingresos_filtrados }}</div>
-            <div class="text-sm text-gray-600 dark:text-gray-400">Ingresos Filtrados</div>
+          <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
+            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Ingresos Filtrados</div>
+            <div class="text-2xl font-bold text-[var(--brand-primary)]">
+              {{ data.contadores.ingresos_filtrados || 0 }}
+            </div>
           </div>
-          <div class="text-center">
-            <div class="text-2xl font-bold text-gray-600">{{ data.contadores.total_ingresos }}</div>
-            <div class="text-sm text-gray-600 dark:text-gray-400">Total Ingresos</div>
+          <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
+            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Total Ingresos</div>
+            <div class="text-2xl font-bold text-[var(--brand-text)]">
+              {{ data.contadores.total_ingresos || 0 }}
+            </div>
           </div>
-          <div class="text-center">
-            <div class="text-2xl font-bold text-primary">{{ data.contadores.clientes_con_ingresos_filtrados }}</div>
-            <div class="text-sm text-gray-600 dark:text-gray-400">Clientes Activos</div>
+          <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
+            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Clientes Activos</div>
+            <div class="text-2xl font-bold text-[var(--brand-primary)]">
+              {{ data.contadores.clientes_con_ingresos_filtrados || 0 }}
+            </div>
           </div>
-          <div class="text-center">
-            <div class="text-2xl font-bold text-gray-600">{{ data.contadores.total_clientes }}</div>
-            <div class="text-sm text-gray-600 dark:text-gray-400">Total Clientes</div>
+          <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
+            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Total Clientes</div>
+            <div class="text-2xl font-bold text-[var(--brand-text)]">
+              {{ data.contadores.total_clientes || 0 }}
+            </div>
           </div>
         </div>
+
+        <template #footer>
+          <div class="text-xs text-[var(--brand-text-muted)]">
+            Última actualización: {{ lastUpdated }}
+          </div>
+        </template>
+      </UCard>
+
+      <!-- Secciones de Totales -->
+      <TotalesIngresoCompra v-if="pageSections.totalesCafe" :data="data.totalesIngresoCompra" />
+      <TotalesMonetarios v-if="pageSections.totalesCafe" :data="data.totalesMonetarios" />
+      <TotalesVerde v-if="pageSections.totalesVerde" :data="data.totalesVerde" />
+
+      <!-- Placeholder para tablas y gráficas futuras -->
+      <UCard v-if="pageSections.tablaIngresos" class="brand-card border border-transparent">
+        <template #header>
+          <h2 class="text-xl font-bold brand-section-title">Lista de Ingresos</h2>
+        </template>
+        <div class="py-8 text-center text-sm text-[var(--brand-text-muted)]">
+          <p>Tabla detallada de ingresos próximamente</p>
+          <p class="mt-2">{{ data.listaIngresos?.length || 0 }} registros disponibles</p>
+        </div>
       </UCard>
 
-      <!-- Tabla de Ingresos (placeholder) -->
-      <UCard v-if="pageSections.tablaIngresos && data.listaIngresos?.length > 0">
+      <UCard v-if="pageSections.top10Clientes" class="brand-card border border-transparent">
         <template #header>
-          <h3 class="text-lg font-semibold">Lista de Ingresos ({{ data.listaIngresos.length }})</h3>
+          <h2 class="text-xl font-bold brand-section-title">Top 10 Clientes</h2>
         </template>
-        <div class="text-sm text-gray-500">
-          Tabla de ingresos se implementará próximamente
+        <div class="py-8 text-center text-sm text-[var(--brand-text-muted)]">
+          <p>Ranking de clientes próximamente</p>
+          <p class="mt-2">{{ data.listaClientes?.length || 0 }} clientes disponibles</p>
         </div>
       </UCard>
 
-      <!-- Top 10 Clientes (placeholder) -->
-      <UCard v-if="pageSections.top10Clientes && data.listaClientes?.length > 0">
-        <template #header>
-          <h3 class="text-lg font-semibold">Top Clientes ({{ data.listaClientes.length }})</h3>
-        </template>
-        <div class="text-sm text-gray-500">
-          Ranking de clientes se implementará próximamente
-        </div>
-      </UCard>
-    </div>
+      <div v-if="pageSections.graficas" class="space-y-6">
+        <UCard class="brand-card border border-transparent">
+          <template #header>
+            <h2 class="text-xl font-bold brand-section-title">Gráficas y Análisis</h2>
+          </template>
+          <div class="py-8 text-center text-sm text-[var(--brand-text-muted)]">
+            <p>Gráficas de series temporales próximamente</p>
+            <p class="mt-2">{{ data.serieTemporal?.length || 0 }} puntos de datos disponibles</p>
+          </div>
+        </UCard>
+      </div>
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useInformeLayout } from '~/composables/useInformeLayout'
 
+// Define page metadata
 definePageMeta({
   layout: 'informe',
   title: 'Informe Ingresos'
 })
 
+// Get page sections from layout
 const { pageSections } = useInformeLayout()
 
+// Reactive state
+const data = ref<any>(null)
 const loading = ref(false)
 const error = ref<string | null>(null)
-const data = ref<any>(null)
+const lastUpdated = ref<string>('')
 
-// Filtros
-const filters = ref({
-  fecha_desde: null as string | null,
-  fecha_hasta: null as string | null,
-  incluir_anulados: false,
-  granularidad: 'dia'
-})
+// Filtros básicos
+const includeAnulados = ref(false)
 
-// Filtros avanzados con checkboxes
-const tiposSeleccionados = ref({
+type PresetValue =
+  | '' | 'custom' | 'hoy' | 'semana' | 'mes' | 'ytd'
+  | 'cosecha-20-21' | 'cosecha-21-22' | 'cosecha-22-23'
+  | 'cosecha-23-24' | 'cosecha-24-25' | 'cosecha-25-26'
+
+const selectedPreset = ref<PresetValue>('cosecha-25-26')
+const fechaDesde = ref<string | null>(null)
+const fechaHasta = ref<string | null>(null)
+
+// Filtros avanzados - usando checkboxes separados
+const filterTipos = ref({
   uva: false,
   mojado: false,
   oreado: false,
   verde: false
 })
 
-const estadosSeleccionados = ref({
+const filterEstados = ref({
   pagado: false,
   pendiente: false
 })
 
-// Computed para convertir checkboxes a arrays
+// Convertir checkboxes a arrays para el API
 const tiposArray = computed(() => {
   const tipos: string[] = []
-  if (tiposSeleccionados.value.uva) tipos.push('uva')
-  if (tiposSeleccionados.value.mojado) tipos.push('mojado')
-  if (tiposSeleccionados.value.oreado) tipos.push('oreado')
-  if (tiposSeleccionados.value.verde) tipos.push('verde')
+  if (filterTipos.value.uva) tipos.push('uva')
+  if (filterTipos.value.mojado) tipos.push('mojado')
+  if (filterTipos.value.oreado) tipos.push('oreado')
+  if (filterTipos.value.verde) tipos.push('verde')
   return tipos
 })
 
 const estadosArray = computed(() => {
   const estados: string[] = []
-  if (estadosSeleccionados.value.pagado) estados.push('pagado')
-  if (estadosSeleccionados.value.pendiente) estados.push('pendiente')
+  if (filterEstados.value.pagado) estados.push('pagado')
+  if (filterEstados.value.pendiente) estados.push('pendiente')
   return estados
 })
 
-// Función para cargar datos
+// Filtros aplicados (los que se usaron en la última carga de datos)
+const appliedFilters = ref<{
+  fechaDesde: string | null
+  fechaHasta: string | null
+  includeAnulados: boolean
+  tipos: string[]
+  estados: string[]
+} | null>(null)
+
+// Computed
+const rangoLegible = computed(() => {
+  if (!fechaDesde.value && !fechaHasta.value) return 'Sin filtro de fecha'
+  const f = fechaDesde.value ?? '—'
+  const t = fechaHasta.value ?? '—'
+  return `${f} → ${t}`
+})
+
+// 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
+  return (
+    fechaDesde.value !== appliedFilters.value.fechaDesde ||
+    fechaHasta.value !== appliedFilters.value.fechaHasta ||
+    includeAnulados.value !== appliedFilters.value.includeAnulados ||
+    JSON.stringify(tiposArray.value) !== JSON.stringify(appliedFilters.value.tipos) ||
+    JSON.stringify(estadosArray.value) !== JSON.stringify(appliedFilters.value.estados)
+  )
+})
+
+// Methods
 async function loadData() {
+  // Prevenir múltiples peticiones simultáneas
+  if (loading.value) {
+    console.warn('[Informe] Ya hay una petición en proceso, ignorando nueva solicitud')
+    return
+  }
+
   loading.value = true
   error.value = null
 
   try {
     const payload = {
-      fecha_desde: filters.value.fecha_desde,
-      fecha_hasta: filters.value.fecha_hasta,
-      incluir_anulados: filters.value.incluir_anulados,
+      fecha_desde: fechaDesde.value,
+      fecha_hasta: fechaHasta.value,
+      incluir_anulados: includeAnulados.value,
       cliente_ids: [], // TODO: implementar selector de clientes
       tipos: tiposArray.value,
       estados: estadosArray.value,
       ubicaciones: [], // TODO: implementar selector de ubicaciones
       calidades: [], // TODO: implementar selector de calidades
-      granularidad: filters.value.granularidad
+      granularidad: 'dia' // Default granularity
     }
 
     console.log('[Informe] Cargando datos con filtros:', payload)
@@ -260,22 +447,68 @@ async function loadData() {
     })
 
     data.value = result
+    lastUpdated.value = new Date().toLocaleString('es-ES', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+
+    // Guardar los filtros aplicados
+    appliedFilters.value = {
+      fechaDesde: fechaDesde.value,
+      fechaHasta: fechaHasta.value,
+      includeAnulados: includeAnulados.value,
+      tipos: [...tiposArray.value],
+      estados: [...estadosArray.value]
+    }
+
     console.log('[Informe] Datos cargados:', result)
-  } catch (e: any) {
-    error.value = e.message || 'Error al cargar datos del informe'
-    console.error('[Informe] Error:', e)
+  } catch (err: any) {
+    error.value = err.message || 'Error al cargar datos del informe'
+    console.error('[Informe] Error loading data:', err)
   } finally {
     loading.value = false
   }
 }
 
-// Función para aplicar filtros
-function applyFilters() {
-  loadData()
+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 financieros y métricas.\n\n' +
+      '¿Está seguro de que desea continuar?'
+    )
+
+    if (!confirmed) {
+      // Si cancela, revertir el cambio
+      includeAnulados.value = false
+      return
+    }
+  }
+
+  // NO recargar automáticamente - el usuario debe hacer clic en "Actualizar"
 }
 
-// Cargar datos al montar
+function onUpdatePreset(value: PresetValue) {
+  selectedPreset.value = value
+}
+
+function onUpdateFechaDesde(value: string | null) {
+  fechaDesde.value = value
+}
+
+function onUpdateFechaHasta(value: string | null) {
+  fechaHasta.value = value
+}
+
+// Inicializar preset por defecto sin cargar datos
 onMounted(() => {
-  loadData()
+  // Default preset: cosecha 25-26
+  selectedPreset.value = 'cosecha-25-26'
+  // NO cargar datos automáticamente - el usuario debe hacer clic en "Actualizar"
 })
 </script>