Fix: eliminar carga automática de datos en panorama facturador
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 47s
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user