mejoras ui/Ux y refactorizacion del selector rapido de dateRange

nuxt4-app/app/pages/panorama.vue

@@ -40,7 +40,7 @@
           <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>
+                <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 y rechazos
                 </p>
@@ -62,51 +62,14 @@
           </div>
         </template>
 
-        <div class="flex flex-col md:flex-row gap-4">
-          <!-- Presets -->
-          <div class="flex-1">
-            <label class="text-xs text-[var(--brand-text-muted)] block mb-1">Rango rápido</label>
-            <UFieldGroup>
-              <UButton
-                color="neutral"
-                variant="subtle"
-                :label="currentPresetLabel"
-                class="flex-1"
-                disabled
-              />
-              <UDropdownMenu :items="dropdownItems" :popper="{ placement: 'bottom-end' }">
-                <UButton
-                  color="neutral"
-                  variant="outline"
-                  icon="i-lucide-chevron-down"
-                  square
-                />
-              </UDropdownMenu>
-            </UFieldGroup>
-          </div>
-
-          <!-- Fechas manuales -->
-          <div class="grid grid-cols-2 gap-4 flex-1">
-            <div>
-              <label class="text-xs text-[var(--brand-text-muted)]">Fecha desde</label>
-              <UInput v-model="fechaDesde" type="date" @input="onManualDateChange" />
-            </div>
-            <div>
-              <label class="text-xs text-[var(--brand-text-muted)]">Fecha hasta</label>
-              <UInput v-model="fechaHasta" type="date" @input="onManualDateChange" />
-            </div>
-          </div>
-
-          <div class="flex items-end">
-            <UButton
-              :ui="{ base: 'bg-[#c08040] text-[#1b1209] border border-[#d99a56] hover:bg-[#d99a56] hover:border-[#f0c07c]' }"
-              @click="clearPreset"
-              size="sm"
-            >
-              Limpiar
-            </UButton>
-          </div>
-        </div>
+        <DateRangeSelector
+          :selected-preset="selectedPreset"
+          :fecha-desde="fechaDesde"
+          :fecha-hasta="fechaHasta"
+          @update:selected-preset="selectedPreset = $event"
+          @update:fecha-desde="fechaDesde = $event"
+          @update:fecha-hasta="fechaHasta = $event"
+        />
 
         <template #footer>
           <div class="text-xs text-[var(--brand-text-muted)]">
@@ -210,108 +173,9 @@ type PresetValue =
   | 'cosecha-23-24' | 'cosecha-24-25' | 'cosecha-25-26';
 
 const selectedPreset = ref<PresetValue>('cosecha-25-26')
-
-const currentPresetLabel = computed(() => {
-  switch (selectedPreset.value) {
-    case '': return 'Sin filtro'
-    case 'custom': return 'Personalizado'
-    case 'hoy': return 'Hoy'
-    case 'semana': return 'Esta Semana'
-    case 'mes': return 'Este Mes'
-    case 'ytd': return 'YTD'
-    case 'cosecha-20-21': return 'Cosecha 20-21'
-    case 'cosecha-21-22': return 'Cosecha 21-22'
-    case 'cosecha-22-23': return 'Cosecha 22-23'
-    case 'cosecha-23-24': return 'Cosecha 23-24'
-    case 'cosecha-24-25': return 'Cosecha 24-25'
-    case 'cosecha-25-26': return 'Cosecha 25-26'
-    default: return 'Seleccionar rango'
-  }
-})
-
-const dropdownItems = [
-  {
-    label: 'Sin filtro',
-    onSelect: () => {
-      selectPreset('')
-    }
-  },
-  {
-    label: 'Rápidos',
-    children: [
-      { 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)', 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) => {
-  const y = d.getFullYear()
-  const m = String(d.getMonth() + 1).padStart(2,'0')
-  const day = String(d.getDate()).padStart(2,'0')
-  return `${y}-${m}-${day}`
-}
 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, ed: string) => {
-    fechaDesde.value = sd
-    fechaHasta.value = ed
-    console.log('Set dates:', sd, ed)
-  }
-
-  switch (preset) {
-    case 'hoy': set(toLocalDateStr(now), toLocalDateStr(now)); break
-    case 'semana': {
-      const d = new Date(now)
-      const day = d.getDay() || 7
-      d.setDate(d.getDate() - (day - 1)) // lunes
-      set(toLocalDateStr(d), toLocalDateStr(now))
-      break
-    }
-    case 'mes': set(toLocalDateStr(new Date(now.getFullYear(), now.getMonth(), 1)), toLocalDateStr(now)); break
-    case 'ytd': set(toLocalDateStr(new Date(now.getFullYear(), 0, 1)), toLocalDateStr(now)); break
-    case 'cosecha-20-21': set('2020-09-25', '2021-09-24'); break
-    case 'cosecha-21-22': set('2021-09-25', '2022-09-24'); break
-    case 'cosecha-22-23': set('2022-09-25', '2023-09-24'); break
-    case 'cosecha-23-24': set('2023-09-25', '2024-09-24'); break
-    case 'cosecha-24-25': set('2024-09-25', '2025-09-09'); break
-    case 'cosecha-25-26': set('2025-09-10', toLocalDateStr(now)); break
-  }
-}
-
-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 | 'indeterminate') {
   if (newValue === true) {
     // Pedir confirmación al activar
@@ -335,12 +199,6 @@ async function onToggleAnulados(newValue: boolean | 'indeterminate') {
   }
 }
 
-function clearPreset() {
-  selectedPreset.value = ''
-  fechaDesde.value = null
-  fechaHasta.value = null
-  console.log('Preset cleared')
-}
 
 const rangoLegible = computed(() => {
   if (!fechaDesde.value && !fechaHasta.value) return 'Sin filtro de fecha'
@@ -494,7 +352,7 @@ onMounted(async () => {
     console.error('Error loading data:', err)
   } finally {
     // Default preset: cosecha 25-26
-    selectPreset('cosecha-25-26')
+    selectedPreset.value = 'cosecha-25-26'
     includeAnulados.value = false
   }
 })