josedario87
a5e54cc127
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 48s
- Actualizar Queries 56-59 en Metabase via API:
* Eliminar filtro de 'incluir_anulados' (columnas no existen en vista_resumen_ingresos)
* Usar 'total_lempiras_mojado_oreado' en lugar de columnas separadas
* Mantener cast ::text[] para parámetro cosechas_ids
- Actualizar backend (comparativa-cosechas.post.ts):
* Eliminar parámetro incluir_anulados del body
* Mantener conversión de array JS a formato PostgreSQL {elem1,elem2}
- Actualizar frontend (comparativa-cosechas.vue):
* Eliminar envío de parámetro incluir_anulados en fetch
Queries funcionando correctamente con vista_resumen_ingresos.
326 lines
12 KiB
Vue
326 lines
12 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-8">
|
|
<!-- 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-[var(--brand-primary-strong)] border-t-transparent align-middle" aria-hidden="true" />
|
|
<span class="text-sm uppercase tracking-[0.3em]">Cargando datos...</span>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- Main Content -->
|
|
<template v-else>
|
|
<!-- 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">Comparativa de Cosechas</h2>
|
|
<p class="text-xs text-[var(--brand-text-muted)] mt-1">
|
|
Compara métricas entre diferentes cosechas de café
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<UCheckbox v-model="incluirAnulados" label="Incluir anulados" @update:model-value="onToggleAnulados" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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="incluirAnulados"
|
|
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."
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Selector de Cosechas -->
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 mb-4">
|
|
<label
|
|
v-for="cosecha in cosechasDisponibles"
|
|
:key="cosecha.id"
|
|
class="flex items-center gap-2 p-3 rounded-lg border transition-all"
|
|
:class="[
|
|
cosechasSeleccionadas.includes(cosecha.id)
|
|
? 'border-[var(--brand-primary-strong)] bg-[var(--brand-primary-strong)]/10 cursor-pointer'
|
|
: 'border-[var(--brand-border)] hover:border-[var(--brand-primary-strong)]/50 cursor-pointer'
|
|
]"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
:value="cosecha.id"
|
|
v-model="cosechasSeleccionadas"
|
|
class="rounded border-[var(--brand-border)] text-[var(--brand-primary-strong)] focus:ring-[var(--brand-primary-strong)]"
|
|
/>
|
|
<span class="text-sm text-[var(--brand-text)]">{{ cosecha.label }}</span>
|
|
</label>
|
|
</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)]">
|
|
Cosechas seleccionadas: {{ cosechasSeleccionadas.length }} de {{ cosechasDisponibles.length }}
|
|
</div>
|
|
<UButton
|
|
:loading="loading"
|
|
:disabled="loading || cosechasSeleccionadas.length === 0"
|
|
: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-[var(--brand-primary-strong)] text-[var(--brand-bg)] border border-[var(--brand-primary)] hover:bg-[var(--brand-primary)] hover:border-[var(--brand-accent)] 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>
|
|
|
|
<!-- Visualizaciones -->
|
|
<template v-if="data && data.datosDiariosCompletos.length > 0">
|
|
<CosechasHeatmap
|
|
:ingresos="resumenIngresosProcesados"
|
|
:cosechas-seleccionadas="cosechasSeleccionadas"
|
|
/>
|
|
|
|
<CosechasEvolucion
|
|
:ingresos="resumenIngresosProcesados"
|
|
:cosechas-seleccionadas="cosechasSeleccionadas"
|
|
/>
|
|
|
|
<CosechasTotales
|
|
:ingresos="resumenIngresosProcesados"
|
|
:cosechas-seleccionadas="cosechasSeleccionadas"
|
|
/>
|
|
</template>
|
|
|
|
<!-- Estado vacío -->
|
|
<UCard v-else-if="data && data.datosDiariosCompletos.length === 0" 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-[var(--brand-primary-strong)]/10 p-6">
|
|
<UIcon name="i-lucide-calendar-x" class="w-12 h-12 text-[var(--brand-primary-strong)]" />
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<h3 class="text-lg font-semibold text-[var(--brand-text)]">
|
|
No hay datos disponibles
|
|
</h3>
|
|
<p class="text-sm text-[var(--brand-text-muted)] max-w-md">
|
|
No se encontraron datos para las cosechas seleccionadas. Intenta seleccionar otras cosechas.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<!-- Mensaje de bienvenida (sin datos cargados) -->
|
|
<UCard v-else 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-[var(--brand-primary-strong)]/10 p-6">
|
|
<UIcon name="i-lucide-bar-chart-3" class="w-12 h-12 text-[var(--brand-primary-strong)]" />
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<h3 class="text-lg font-semibold text-[var(--brand-text)]">
|
|
Comparativa de Cosechas
|
|
</h3>
|
|
<p class="text-sm text-[var(--brand-text-muted)] max-w-md">
|
|
Selecciona las cosechas que deseas comparar y haz clic en "Actualizar"
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// Define page metadata
|
|
definePageMeta({
|
|
layout: 'informe',
|
|
title: 'Comparativa Cosechas'
|
|
})
|
|
|
|
// Definiciones de cosechas disponibles
|
|
const cosechasDisponibles = ref([
|
|
{ id: 'cosecha-20-21', label: 'Cosecha 20-21', fechaInicio: '2020-09-08', fechaFin: '2021-09-07' },
|
|
{ id: 'cosecha-21-22', label: 'Cosecha 21-22', fechaInicio: '2021-09-08', fechaFin: '2022-09-07' },
|
|
{ id: 'cosecha-22-23', label: 'Cosecha 22-23', fechaInicio: '2022-09-08', fechaFin: '2023-09-07' },
|
|
{ id: 'cosecha-23-24', label: 'Cosecha 23-24', fechaInicio: '2023-09-08', fechaFin: '2024-09-07' },
|
|
{ id: 'cosecha-24-25', label: 'Cosecha 24-25', fechaInicio: '2024-09-08', fechaFin: '2025-09-07' },
|
|
{ id: 'cosecha-25-26', label: 'Cosecha 25-26', fechaInicio: '2025-09-08', fechaFin: '2026-09-07' }
|
|
])
|
|
|
|
// Configuración de estilos para las gráficas
|
|
const estilosGraficas = ref({
|
|
coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', '#8b6f47', '#a0826e', '#b89968', 'var(--brand-accent)'],
|
|
anchoCelda: 80,
|
|
altoCelda: 6,
|
|
anchoMaxBarra: 300,
|
|
altoBarra: 8,
|
|
opacidadVacias: 0.05
|
|
})
|
|
|
|
// Provide para que los componentes puedan acceder a estas configuraciones
|
|
provide('cosechasDisponibles', cosechasDisponibles.value)
|
|
provide('estilosGraficas', estilosGraficas)
|
|
|
|
// Reactive state
|
|
const data = ref<any>(null)
|
|
const loading = ref(false)
|
|
const error = ref<string | null>(null)
|
|
|
|
// Filtros
|
|
const incluirAnulados = ref(false)
|
|
const cosechasSeleccionadas = ref<string[]>(['cosecha-24-25', 'cosecha-25-26'])
|
|
|
|
// Filtros aplicados (los que se usaron en la última carga de datos)
|
|
const appliedFilters = ref<{
|
|
cosechasSeleccionadas: string[]
|
|
incluirAnulados: boolean
|
|
} | null>(null)
|
|
|
|
// Computed
|
|
// 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
|
|
const cosechasChanged = JSON.stringify(cosechasSeleccionadas.value.sort()) !== JSON.stringify(appliedFilters.value.cosechasSeleccionadas.sort())
|
|
const anuladosChanged = incluirAnulados.value !== appliedFilters.value.incluirAnulados
|
|
|
|
return cosechasChanged || anuladosChanged
|
|
})
|
|
|
|
// Procesar datos de resumen para los componentes
|
|
// Los componentes esperan el formato de vista_resumen_ingresos (que es lo que devuelve la query)
|
|
const resumenIngresosProcesados = computed(() => {
|
|
if (!data.value || !data.value.datosDiariosCompletos) return []
|
|
|
|
// La query ya devuelve los datos en el formato correcto con las métricas agregadas por día
|
|
// Solo necesitamos mapear los nombres de campos si es necesario
|
|
return data.value.datosDiariosCompletos.map((row: any) => ({
|
|
fecha: row.fecha,
|
|
created_at: row.fecha, // Algunos componentes esperan created_at
|
|
cosecha_id: row.cosecha_id,
|
|
dia_relativo: row.dia_relativo,
|
|
total_peso_seco: row.total_peso_seco || 0,
|
|
peso_neto_uva: row.peso_neto_uva || 0,
|
|
peso_neto_verde: row.peso_neto_verde || 0,
|
|
sacos_total_dia: row.sacos_total_dia || 0,
|
|
total_lempiras_uva: row.total_lempiras_uva || 0,
|
|
total_lempiras_verde: row.total_lempiras_verde || 0,
|
|
total_lempiras_mojado: row.total_lempiras_mojado || 0,
|
|
total_lempiras_oreado: row.total_lempiras_oreado || 0,
|
|
total_lempiras_mojado_oreado: row.total_lempiras_mojado_oreado || 0
|
|
}))
|
|
})
|
|
|
|
// Methods
|
|
async function loadData() {
|
|
// Prevenir múltiples peticiones simultáneas
|
|
if (loading.value) {
|
|
console.warn('Ya hay una petición en proceso, ignorando nueva solicitud')
|
|
return
|
|
}
|
|
|
|
// Validar que haya cosechas seleccionadas
|
|
if (cosechasSeleccionadas.value.length === 0) {
|
|
error.value = 'Debes seleccionar al menos una cosecha'
|
|
return
|
|
}
|
|
|
|
loading.value = true
|
|
error.value = null
|
|
|
|
try {
|
|
const result = await $fetch('/api/metabase/comparativa-cosechas', {
|
|
method: 'POST',
|
|
body: {
|
|
cosechas_ids: cosechasSeleccionadas.value
|
|
}
|
|
})
|
|
|
|
data.value = result
|
|
|
|
// Guardar los filtros aplicados
|
|
appliedFilters.value = {
|
|
cosechasSeleccionadas: [...cosechasSeleccionadas.value],
|
|
incluirAnulados: incluirAnulados.value
|
|
}
|
|
} catch (err: any) {
|
|
error.value = err.message || 'Error al cargar datos'
|
|
console.error('Error loading comparativa data:', err)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
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 de la comparativa.\n\n' +
|
|
'¿Está seguro de que desea continuar?'
|
|
)
|
|
|
|
if (!confirmed) {
|
|
// Si cancela, revertir el cambio
|
|
incluirAnulados.value = false
|
|
return
|
|
}
|
|
}
|
|
|
|
// NO recargar automáticamente - el usuario debe hacer clic en "Actualizar"
|
|
}
|
|
|
|
// Inicialización
|
|
onMounted(() => {
|
|
// Cargar datos automáticamente con las cosechas por defecto
|
|
loadData()
|
|
})
|
|
</script>
|