Fix: eliminar carga automática de datos en panorama facturador
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 47s

Cambios implementados:
- Eliminada la llamada automática a loadData() en onMounted
- Añadido estado inicial con mensaje de bienvenida
- El usuario debe hacer clic explícito en 'Actualizar' para cargar datos
- Mejora la experiencia evitando queries automáticas pesadas a Metabase

Ahora la página muestra:
- Estado inicial: filtros + mensaje invitando a actualizar
- Estado con datos: filtros + todas las secciones de datos
This commit is contained in:
2025-10-29 15:28:23 -06:00
parent baf8f2ae0a
commit 4cbc944682

View File

@@ -18,6 +18,84 @@
</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 y rechazos
</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"
/>
<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-bar-chart-3" 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)]">
Panorama Facturador
</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 los datos financieros
</p>
</div>
</div>
</UCard>
</template>
<!-- Main Content -->
<template v-else-if="data">
<!-- Card de Filtros -->
@@ -240,10 +318,10 @@ function onUpdateFechaHasta(value: string | null) {
fechaHasta.value = value
}
// Load data on mount
// Inicializar preset por defecto sin cargar datos
onMounted(() => {
// Default preset: cosecha 25-26
selectedPreset.value = 'cosecha-25-26'
loadData()
// NO cargar datos automáticamente - el usuario debe hacer clic en "Actualizar"
})
</script>