panorama facturador terminado

nuxt4-app/app/pages/panorama.vue

@@ -37,6 +37,7 @@
       <!-- 🔻 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</h2>
@@ -45,10 +46,20 @@
                 </p>
               </div>
               <div class="flex items-center gap-2">
-              <UToggle v-model="includeAnulados" />
-              <span class="text-sm">Incluir anulados</span>
+                <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>
 
         <div class="flex flex-col md:flex-row gap-4">
@@ -61,12 +72,14 @@
                 variant="subtle"
                 :label="currentPresetLabel"
                 class="flex-1"
+                disabled
               />
-              <UDropdownMenu :items="dropdownItems">
+              <UDropdownMenu :items="dropdownItems" :popper="{ placement: 'bottom-end' }">
                 <UButton
                   color="neutral"
                   variant="outline"
                   icon="i-lucide-chevron-down"
+                  square
                 />
               </UDropdownMenu>
             </UFieldGroup>
@@ -218,32 +231,34 @@ const currentPresetLabel = computed(() => {
   }
 })
 
-const dropdownItems = computed(() => [
+const dropdownItems = [
   {
     label: 'Sin filtro',
-    click: () => selectPreset('')
+    onSelect: () => {
+      selectPreset('')
+    }
   },
   {
     label: 'Rápidos',
     children: [
-      { label: 'Hoy', click: () => selectPreset('hoy') },
-      { label: 'Esta Semana', click: () => selectPreset('semana') },
-      { label: 'Este Mes', click: () => selectPreset('mes') },
-      { label: 'YTD', click: () => selectPreset('ytd') }
+      { label: 'Hoy', onSelect: () => { selectPreset('hoy') } },
+      { label: 'Esta Semana', onSelect: () => { selectPreset('semana') } },
+      { label: 'Este Mes', onSelect: () => { selectPreset('mes') } },
+      { label: 'YTD', onSelect: () => { selectPreset('ytd') } }
     ]
   },
   {
     label: 'Cosechas',
     children: [
-      { label: 'Cosecha 20-21 (25 Sep 2020)', click: () => selectPreset('cosecha-20-21') },
-      { label: 'Cosecha 21-22 (25 Sep 2021)', click: () => selectPreset('cosecha-21-22') },
-      { label: 'Cosecha 22-23 (25 Sep 2022)', click: () => selectPreset('cosecha-22-23') },
-      { label: 'Cosecha 23-24 (25 Sep 2023)', click: () => selectPreset('cosecha-23-24') },
-      { label: 'Cosecha 24-25 (25 Sep 2024)', click: () => selectPreset('cosecha-24-25') },
-      { label: 'Cosecha 25-26 (10 Sep 2025 → hoy)', click: () => selectPreset('cosecha-25-26') }
+      { label: 'Cosecha 20-21 (25 Sep 2020)', onSelect: () => { selectPreset('cosecha-20-21') } },
+      { label: 'Cosecha 21-22 (25 Sep 2021)', onSelect: () => { selectPreset('cosecha-21-22') } },
+      { label: 'Cosecha 22-23 (25 Sep 2022)', onSelect: () => { selectPreset('cosecha-22-23') } },
+      { label: 'Cosecha 23-24 (25 Sep 2023)', onSelect: () => { selectPreset('cosecha-23-24') } },
+      { label: 'Cosecha 24-25 (25 Sep 2024)', onSelect: () => { selectPreset('cosecha-24-25') } },
+      { label: 'Cosecha 25-26 (10 Sep 2025 → hoy)', onSelect: () => { selectPreset('cosecha-25-26') } }
     ]
   }
-])
+]
 
 // Fechas (YYYY-MM-DD) — Honduras (UTC-6)
 const toLocalDateStr = (d: Date) => {
@@ -256,18 +271,21 @@ const fechaDesde = ref<string | null>(null)
 const fechaHasta = ref<string | null>(null)
 
 function selectPreset(preset: PresetValue) {
+  console.log('selectPreset called with:', preset)
   selectedPreset.value = preset
 
   if (preset === '' || preset === 'custom') {
     fechaDesde.value = null
     fechaHasta.value = null
+    console.log('Cleared dates')
     return
   }
 
   const now = new Date()
-  const set = (sd: string | null, ed: string | null) => {
+  const set = (sd: string, ed: string) => {
     fechaDesde.value = sd
     fechaHasta.value = ed
+    console.log('Set dates:', sd, ed)
   }
 
   switch (preset) {
@@ -293,12 +311,37 @@ function selectPreset(preset: PresetValue) {
 function onManualDateChange() {
   // Si el usuario modifica las fechas manualmente, cambiar a "Personalizado"
   selectedPreset.value = 'custom'
+  console.log('Manual date change, preset set to custom')
+}
+
+async function onToggleAnulados(newValue: boolean) {
+  if (newValue) {
+    // 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
+      console.log('User cancelled including anulados')
+    } else {
+      console.log('User confirmed including anulados')
+    }
+  } else {
+    // Al desactivar, no pedir confirmación
+    console.log('Anulados disabled')
+  }
 }
 
 function clearPreset() {
   selectedPreset.value = ''
   fechaDesde.value = null
   fechaHasta.value = null
+  console.log('Preset cleared')
 }
 
 const rangoLegible = computed(() => {