531 lines
20 KiB
Vue
531 lines
20 KiB
Vue
<template>
|
|
<div class="flex flex-col">
|
|
<!-- Toolbar con selector de cosechas -->
|
|
<UDashboardToolbar>
|
|
<template #left>
|
|
<div class="flex items-center gap-4">
|
|
<span class="text-sm text-[var(--brand-text-muted)]">Seleccionar cosechas a comparar:</span>
|
|
</div>
|
|
</template>
|
|
|
|
<template #right>
|
|
<div class="flex items-center gap-3">
|
|
<UButton
|
|
@click="mostrarConfiguracion = !mostrarConfiguracion"
|
|
size="xs"
|
|
color="neutral"
|
|
variant="ghost"
|
|
icon="i-lucide-palette"
|
|
:class="{ 'bg-[#c08040]/20 text-[#c08040]': mostrarConfiguracion }"
|
|
>
|
|
Configurar estilos
|
|
</UButton>
|
|
<div class="w-px h-4 bg-[var(--brand-border)]" />
|
|
<USwitch
|
|
v-model="pageSections.heatmap"
|
|
size="xs"
|
|
label="Heatmap"
|
|
/>
|
|
<USwitch
|
|
v-model="pageSections.totales"
|
|
size="xs"
|
|
label="Totales"
|
|
/>
|
|
<USwitch
|
|
v-model="pageSections.evolucion"
|
|
size="xs"
|
|
label="Evolución"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</UDashboardToolbar>
|
|
|
|
<div class="flex flex-col gap-8 p-6">
|
|
<!-- Loading State -->
|
|
<UCard v-if="loading && !ingresosStore.hasData" 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-[#c08040] 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>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<template v-else>
|
|
<!-- Metadatos de Resumen de Ingresos -->
|
|
<UCard class="brand-card border border-transparent">
|
|
<template #header>
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-lucide-database" class="size-5 text-[#c08040]" />
|
|
<h3 class="text-base font-semibold text-[var(--brand-text)]">Fuente de Datos: Resumen Diario de Ingresos</h3>
|
|
</div>
|
|
</template>
|
|
<MetadatosCard v-if="resumenIngresosMetadata" :metadata="resumenIngresosMetadata" :compact="true" />
|
|
</UCard>
|
|
|
|
<!-- Selector de Cosechas -->
|
|
<UCard class="brand-card border border-transparent">
|
|
<template #header>
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-lucide-calendar-range" class="size-5 text-[#c08040]" />
|
|
<h3 class="text-base font-semibold text-[var(--brand-text)]">Cosechas a Comparar</h3>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
|
|
<label
|
|
v-for="cosecha in cosechasDisponibles"
|
|
:key="cosecha.id"
|
|
class="flex items-center gap-2 p-3 rounded-lg border transition-all"
|
|
:class="[
|
|
cosecha.disabled
|
|
? 'border-gray-600/20 bg-gray-800/20 cursor-not-allowed opacity-50'
|
|
: cosechasSeleccionadas.includes(cosecha.id)
|
|
? 'border-[#c08040] bg-[#c08040]/10 cursor-pointer'
|
|
: 'border-[var(--brand-border)] hover:border-[#c08040]/50 cursor-pointer'
|
|
]"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
:value="cosecha.id"
|
|
v-model="cosechasSeleccionadas"
|
|
:disabled="cosecha.disabled"
|
|
class="rounded border-[var(--brand-border)] text-[#c08040] focus:ring-[#c08040] disabled:cursor-not-allowed"
|
|
/>
|
|
<div class="flex flex-col flex-1">
|
|
<div class="flex items-center justify-between gap-2">
|
|
<span class="text-sm font-medium text-[var(--brand-text)]">{{ cosecha.label }}</span>
|
|
<span
|
|
v-if="!cosecha.disabled"
|
|
class="text-[10px] px-1.5 py-0.5 rounded-full bg-[#c08040]/20 text-[#c08040] font-semibold"
|
|
>
|
|
{{ cosecha.registros }}
|
|
</span>
|
|
</div>
|
|
<span class="text-xs text-[var(--brand-text-muted)]">
|
|
{{ cosecha.disabled ? 'Sin datos' : cosecha.periodo }}
|
|
</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</UCard>
|
|
|
|
<!-- Vista Heatmap -->
|
|
<div v-if="cosechasSeleccionadas.length > 0 && pageSections.heatmap">
|
|
<ComparativaCosechasHeatmap :ingresos="resumenIngresos" :cosechas-seleccionadas="cosechasSeleccionadas" />
|
|
</div>
|
|
|
|
<!-- Resumen General por Cosecha -->
|
|
<div v-if="cosechasSeleccionadas.length > 0 && pageSections.totales">
|
|
<ComparativaCosechasTotales :ingresos="resumenIngresos" :cosechas-seleccionadas="cosechasSeleccionadas" />
|
|
</div>
|
|
|
|
<!-- Evolución Temporal Comparada -->
|
|
<div v-if="cosechasSeleccionadas.length > 0 && pageSections.evolucion">
|
|
<ComparativaCosechasEvolucion :ingresos="resumenIngresos" :cosechas-seleccionadas="cosechasSeleccionadas" />
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<UCard v-if="cosechasSeleccionadas.length === 0" class="brand-card border border-transparent">
|
|
<div class="flex flex-col items-center justify-center gap-4 py-16 text-[var(--brand-text-muted)]">
|
|
<UIcon name="i-lucide-bar-chart-2" class="size-16 opacity-50" />
|
|
<p class="text-sm">Selecciona al menos una cosecha para ver las comparativas</p>
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Modal de Configuración de Estilos -->
|
|
<UCard class="brand-card" v-if="mostrarConfiguracion">
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-lucide-palette" class="size-5 text-[#c08040]" />
|
|
<h3 id="modal-title" class="text-base font-semibold text-[var(--brand-text)]">Configuración de Estilos</h3>
|
|
</div>
|
|
<UButton
|
|
@click="resetearConfiguracion"
|
|
size="xs"
|
|
color="neutral"
|
|
variant="ghost"
|
|
icon="i-lucide-rotate-ccw"
|
|
>
|
|
Resetear
|
|
</UButton>
|
|
</div>
|
|
<p id="modal-description" class="sr-only">
|
|
Personaliza los colores, dimensiones y opacidad de las gráficas
|
|
</p>
|
|
</template>
|
|
|
|
<div class="flex flex-col gap-6">
|
|
<!-- Sección: Colores de Cosechas -->
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-[var(--brand-text)] mb-3 flex items-center gap-2">
|
|
<UIcon name="i-lucide-droplets" class="size-4" />
|
|
Colores de Cosechas (por año)
|
|
</h4>
|
|
<p class="text-xs text-[var(--brand-text-muted)] mb-3">
|
|
Los colores son fijos para cada cosecha, sin importar el orden en que se seleccionen
|
|
</p>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div
|
|
v-for="(cosecha, index) in cosechasDefiniciones"
|
|
:key="`color-${cosecha.id}`"
|
|
class="flex items-center gap-3 p-3 rounded-lg border border-[var(--brand-border)] bg-[var(--brand-bg-secondary)]"
|
|
>
|
|
<label class="text-xs text-[var(--brand-text-muted)] flex-1">
|
|
{{ cosecha.label }}
|
|
</label>
|
|
<input
|
|
type="color"
|
|
v-model="estilosGraficas.coloresCosechas[index]"
|
|
class="w-10 h-8 rounded cursor-pointer border border-[var(--brand-border)]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sección: Dimensiones -->
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-[var(--brand-text)] mb-3 flex items-center gap-2">
|
|
<UIcon name="i-lucide-ruler" class="size-4" />
|
|
Dimensiones
|
|
</h4>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<!-- Ancho de celda (Heatmap) -->
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-xs text-[var(--brand-text-muted)]">
|
|
Ancho de celda (Heatmap)
|
|
</label>
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
type="range"
|
|
v-model.number="estilosGraficas.anchoCelda"
|
|
min="40"
|
|
max="150"
|
|
step="10"
|
|
class="flex-1"
|
|
/>
|
|
<span class="text-xs text-[var(--brand-text)] w-12 text-right">
|
|
{{ estilosGraficas.anchoCelda }}px
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alto de celda (Heatmap) -->
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-xs text-[var(--brand-text-muted)]">
|
|
Alto de celda (Heatmap)
|
|
</label>
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
type="range"
|
|
v-model.number="estilosGraficas.altoCelda"
|
|
min="4"
|
|
max="20"
|
|
step="1"
|
|
class="flex-1"
|
|
/>
|
|
<span class="text-xs text-[var(--brand-text)] w-12 text-right">
|
|
{{ estilosGraficas.altoCelda }}px
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ancho máximo de barra -->
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-xs text-[var(--brand-text-muted)]">
|
|
Ancho máximo de barra
|
|
</label>
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
type="range"
|
|
v-model.number="estilosGraficas.anchoMaxBarra"
|
|
min="150"
|
|
max="500"
|
|
step="25"
|
|
class="flex-1"
|
|
/>
|
|
<span class="text-xs text-[var(--brand-text)] w-12 text-right">
|
|
{{ estilosGraficas.anchoMaxBarra }}px
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alto de barra -->
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-xs text-[var(--brand-text-muted)]">
|
|
Alto de barra
|
|
</label>
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
type="range"
|
|
v-model.number="estilosGraficas.altoBarra"
|
|
min="6"
|
|
max="24"
|
|
step="2"
|
|
class="flex-1"
|
|
/>
|
|
<span class="text-xs text-[var(--brand-text)] w-12 text-right">
|
|
{{ estilosGraficas.altoBarra }}px
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sección: Opacidad -->
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-[var(--brand-text)] mb-3 flex items-center gap-2">
|
|
<UIcon name="i-lucide-sun-dim" class="size-4" />
|
|
Opacidad
|
|
</h4>
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-xs text-[var(--brand-text-muted)]">
|
|
Opacidad de celdas vacías (Heatmap)
|
|
</label>
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
type="range"
|
|
v-model.number="estilosGraficas.opacidadVacias"
|
|
min="0"
|
|
max="0.3"
|
|
step="0.05"
|
|
class="flex-1"
|
|
/>
|
|
<span class="text-xs text-[var(--brand-text)] w-12 text-right">
|
|
{{ (estilosGraficas.opacidadVacias * 100).toFixed(0) }}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<div class="flex justify-end gap-2">
|
|
<UButton
|
|
@click="mostrarConfiguracion = false"
|
|
color="neutral"
|
|
variant="ghost"
|
|
>
|
|
Cerrar
|
|
</UButton>
|
|
</div>
|
|
</template>
|
|
</UCard>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useTableDataStore } from '~/stores/tableDataFactory'
|
|
import { useMetadataStore } from '~/stores/metadata'
|
|
import type { IngresoRecord } from '~/composables/useIngresosMetrics'
|
|
|
|
definePageMeta({
|
|
layout: 'informe',
|
|
title: 'Comparativa Cosechas'
|
|
})
|
|
|
|
// Definir secciones específicas de esta página
|
|
const pageSections = ref({
|
|
heatmap: true,
|
|
totales: false,
|
|
evolucion: false
|
|
})
|
|
|
|
// Estado del modal de configuración
|
|
const mostrarConfiguracion = ref(false)
|
|
|
|
// Configuración de estilos por defecto
|
|
const estilosGraficasDefault = {
|
|
coloresCosechas: [
|
|
'#c08040', // Cosecha 20-21
|
|
'#d99a56', // Cosecha 21-22
|
|
'#8b6f47', // Cosecha 22-23
|
|
'#a0826e', // Cosecha 23-24
|
|
'#b89968', // Cosecha 24-25
|
|
'#f0c07c' // Cosecha 25-26
|
|
],
|
|
anchoCelda: 80,
|
|
altoCelda: 6,
|
|
anchoMaxBarra: 300,
|
|
altoBarra: 8,
|
|
opacidadVacias: 0.05
|
|
}
|
|
|
|
// Cargar configuración desde cookies
|
|
function cargarConfiguracionDesdeCookies() {
|
|
const cookie = useCookie<typeof estilosGraficasDefault>('estilos-graficas', {
|
|
maxAge: 60 * 60 * 24 * 365, // 1 año
|
|
sameSite: 'lax'
|
|
})
|
|
|
|
if (cookie.value) {
|
|
try {
|
|
return { ...estilosGraficasDefault, ...cookie.value }
|
|
} catch (e) {
|
|
console.error('Error al cargar configuración desde cookies:', e)
|
|
return { ...estilosGraficasDefault }
|
|
}
|
|
}
|
|
|
|
return { ...estilosGraficasDefault }
|
|
}
|
|
|
|
// Configuración reactiva de estilos
|
|
const estilosGraficas = ref(cargarConfiguracionDesdeCookies())
|
|
|
|
// Guardar en cookies cuando cambie la configuración
|
|
watch(estilosGraficas, (newValue) => {
|
|
const cookie = useCookie<typeof estilosGraficasDefault>('estilos-graficas', {
|
|
maxAge: 60 * 60 * 24 * 365, // 1 año
|
|
sameSite: 'lax'
|
|
})
|
|
cookie.value = newValue
|
|
}, { deep: true })
|
|
|
|
// Función para resetear la configuración
|
|
function resetearConfiguracion() {
|
|
estilosGraficas.value = { ...estilosGraficasDefault }
|
|
}
|
|
|
|
// Store de resumen de ingresos (registros por día con métricas agregadas)
|
|
const resumenIngresosStore = useTableDataStore<any>('vista_resumen_ingresos')
|
|
|
|
// Datos de resumen desde el store
|
|
const resumenIngresos = computed(() => resumenIngresosStore.allRecords)
|
|
|
|
// Definición de cosechas disponibles (8 sep - 7 sep)
|
|
const cosechasDefiniciones = [
|
|
{ id: 'cosecha-20-21', label: 'Cosecha 20-21', periodo: '8 Sep 2020 - 7 Sep 2021', fechaInicio: '2020-09-08', fechaFin: '2021-09-07' },
|
|
{ id: 'cosecha-21-22', label: 'Cosecha 21-22', periodo: '8 Sep 2021 - 7 Sep 2022', fechaInicio: '2021-09-08', fechaFin: '2022-09-07' },
|
|
{ id: 'cosecha-22-23', label: 'Cosecha 22-23', periodo: '8 Sep 2022 - 7 Sep 2023', fechaInicio: '2022-09-08', fechaFin: '2023-09-07' },
|
|
{ id: 'cosecha-23-24', label: 'Cosecha 23-24', periodo: '8 Sep 2023 - 7 Sep 2024', fechaInicio: '2023-09-08', fechaFin: '2024-09-07' },
|
|
{ id: 'cosecha-24-25', label: 'Cosecha 24-25', periodo: '8 Sep 2024 - 7 Sep 2025', fechaInicio: '2024-09-08', fechaFin: '2025-09-07' },
|
|
{ id: 'cosecha-25-26', label: 'Cosecha 25-26', periodo: '8 Sep 2025 - Hoy', fechaInicio: '2025-09-08', fechaFin: new Date().toISOString().split('T')[0] }
|
|
] as const satisfies readonly { id: string; label: string; periodo: string; fechaInicio: string; fechaFin: string }[]
|
|
|
|
// Calcular cuántos registros tiene cada cosecha
|
|
const registrosPorCosecha = computed(() => {
|
|
const counts: Record<string, number> = {}
|
|
|
|
cosechasDefiniciones.forEach(cosecha => {
|
|
const registros = resumenIngresos.value.filter((record: any) => {
|
|
const fecha = new Date(record.fecha || record.created_at)
|
|
const inicio = new Date(cosecha.fechaInicio)
|
|
const fin = new Date(cosecha.fechaFin)
|
|
return fecha >= inicio && fecha <= fin
|
|
})
|
|
counts[cosecha.id] = registros.length
|
|
})
|
|
|
|
return counts
|
|
})
|
|
|
|
// Cosechas disponibles con información de registros
|
|
const cosechasDisponibles = computed(() => {
|
|
return cosechasDefiniciones.map(cosecha => ({
|
|
...cosecha,
|
|
registros: registrosPorCosecha.value[cosecha.id] || 0,
|
|
disabled: (registrosPorCosecha.value[cosecha.id] || 0) === 0
|
|
}))
|
|
})
|
|
|
|
// Cosechas seleccionadas (persistir en cookies)
|
|
const cosechasSeleccionadas = useCookie<string[]>('comparativa-cosechas-seleccionadas', {
|
|
default: () => [],
|
|
maxAge: 60 * 60 * 24 * 365, // 1 año
|
|
sameSite: 'lax'
|
|
})
|
|
|
|
// Watch para filtrar cosechas deshabilitadas y seleccionar las más recientes con datos
|
|
watch(cosechasDisponibles, (disponibles) => {
|
|
// Remover cosechas deshabilitadas de la selección
|
|
cosechasSeleccionadas.value = cosechasSeleccionadas.value.filter(id => {
|
|
const cosecha = disponibles.find(c => c.id === id)
|
|
return cosecha && !cosecha.disabled
|
|
})
|
|
|
|
// Si no hay ninguna seleccionada, seleccionar las 2 más recientes con datos
|
|
if (cosechasSeleccionadas.value.length === 0) {
|
|
const conDatos = disponibles.filter(c => !c.disabled)
|
|
cosechasSeleccionadas.value = conDatos.slice(-2).map(c => c.id)
|
|
}
|
|
}, { immediate: true })
|
|
|
|
// Loading and error states
|
|
const loading = computed(() => resumenIngresosStore.isLoading)
|
|
const error = computed(() => resumenIngresosStore.error)
|
|
|
|
// Metadatos desde el store de metadata
|
|
const metadataStore = useMetadataStore()
|
|
|
|
const resumenIngresosMetadata = computed(() => {
|
|
const meta = metadataStore.metadata.find((t: any) => t.table === 'vista_resumen_ingresos')
|
|
return meta ? { ...meta, name: 'vista_resumen_ingresos' } : null
|
|
})
|
|
|
|
// Definir las métricas disponibles para los componentes
|
|
const metricasDisponibles = {
|
|
pesoSeco: {
|
|
key: 'total_peso_seco',
|
|
label: 'Peso Seco Total',
|
|
unidad: 'qq',
|
|
descripcion: 'Peso seco total del día'
|
|
},
|
|
pesoNetoUva: {
|
|
key: 'peso_neto_uva',
|
|
label: 'Peso Neto Uva',
|
|
unidad: 'qq',
|
|
descripcion: 'Peso neto de café uva'
|
|
},
|
|
pesoNetoVerde: {
|
|
key: 'peso_neto_verde',
|
|
label: 'Peso Neto Verde',
|
|
unidad: 'qq',
|
|
descripcion: 'Peso neto de café verde'
|
|
},
|
|
sacos: {
|
|
key: 'sacos_total_dia',
|
|
label: 'Sacos Totales',
|
|
unidad: 'sacos',
|
|
descripcion: 'Total de sacos del día'
|
|
},
|
|
lempirasUva: {
|
|
key: 'total_lempiras_uva',
|
|
label: 'Lempiras Uva',
|
|
unidad: 'L',
|
|
descripcion: 'Total en lempiras de café uva'
|
|
},
|
|
lempirasVerde: {
|
|
key: 'total_lempiras_verde',
|
|
label: 'Lempiras Verde',
|
|
unidad: 'L',
|
|
descripcion: 'Total en lempiras de café verde'
|
|
},
|
|
lempirasMojadoOreado: {
|
|
key: 'total_lempiras_mojado_oreado',
|
|
label: 'Lempiras Mojado+Oreado',
|
|
unidad: 'L',
|
|
descripcion: 'Total en lempiras de café mojado y oreado (combinados)',
|
|
// Esta métrica se calcula combinando total_lempiras_mojado + total_lempiras_oreado
|
|
computed: true,
|
|
keys: ['total_lempiras_mojado', 'total_lempiras_oreado']
|
|
}
|
|
}
|
|
|
|
// Exportar definiciones de cosechas, métricas y configuración para los componentes
|
|
// Usamos cosechasDefiniciones (array estático) en lugar de cosechasDisponibles (computed)
|
|
// porque los componentes hijos no necesitan la info de disabled/registros
|
|
provide('cosechasDisponibles', cosechasDefiniciones)
|
|
provide('metricasDisponibles', metricasDisponibles)
|
|
provide('estilosGraficas', estilosGraficas)
|
|
</script>
|