josedario87
ab0e3479f5
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 46s
284 lines
9.1 KiB
Vue
284 lines
9.1 KiB
Vue
<template>
|
|
<div class="space-y-6">
|
|
<!-- Filtros -->
|
|
<UCard>
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-lucide-filter" class="w-5 h-5" />
|
|
<h3 class="text-lg font-semibold">Filtros</h3>
|
|
</div>
|
|
<UButton
|
|
@click="applyFilters"
|
|
:loading="loading"
|
|
icon="i-lucide-search"
|
|
color="primary"
|
|
size="sm"
|
|
>
|
|
Aplicar Filtros
|
|
</UButton>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<!-- Fecha Desde -->
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Fecha Desde</label>
|
|
<input
|
|
v-model="filters.fecha_desde"
|
|
type="date"
|
|
class="w-full px-3 py-2 border rounded-md dark:bg-gray-800 dark:border-gray-700"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Fecha Hasta -->
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Fecha Hasta</label>
|
|
<input
|
|
v-model="filters.fecha_hasta"
|
|
type="date"
|
|
class="w-full px-3 py-2 border rounded-md dark:bg-gray-800 dark:border-gray-700"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Incluir Anulados -->
|
|
<div class="flex items-center pt-6">
|
|
<UCheckbox
|
|
v-model="filters.incluir_anulados"
|
|
label="Incluir Anulados"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Granularidad -->
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Granularidad</label>
|
|
<select
|
|
v-model="filters.granularidad"
|
|
class="w-full px-3 py-2 border rounded-md dark:bg-gray-800 dark:border-gray-700"
|
|
>
|
|
<option value="dia">Día</option>
|
|
<option value="semana">Semana</option>
|
|
<option value="mes">Mes</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filtros Avanzados (colapsables) -->
|
|
<UAccordion :items="[{ label: 'Filtros Avanzados', icon: 'i-lucide-sliders-horizontal', defaultOpen: false, slot: 'advanced' }]" class="mt-4">
|
|
<template #advanced>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
|
|
<!-- Tipos -->
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Tipos de Café</label>
|
|
<div class="space-y-2">
|
|
<UCheckbox v-model="tiposSeleccionados.uva" label="Uva" />
|
|
<UCheckbox v-model="tiposSeleccionados.mojado" label="Mojado" />
|
|
<UCheckbox v-model="tiposSeleccionados.oreado" label="Oreado" />
|
|
<UCheckbox v-model="tiposSeleccionados.verde" label="Verde" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Estados -->
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Estados</label>
|
|
<div class="space-y-2">
|
|
<UCheckbox v-model="estadosSeleccionados.pagado" label="Pagado" />
|
|
<UCheckbox v-model="estadosSeleccionados.pendiente" label="Pendiente" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Placeholder para filtros futuros -->
|
|
<div class="col-span-2 text-sm text-gray-500">
|
|
Filtros de ubicaciones, calidades y clientes se agregarán próximamente
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UAccordion>
|
|
</UCard>
|
|
|
|
<!-- Error Display -->
|
|
<UAlert
|
|
v-if="error"
|
|
color="error"
|
|
variant="soft"
|
|
:title="error"
|
|
:close-button="{ icon: 'i-heroicons-x-mark-20-solid', color: 'error', variant: 'link' }"
|
|
@close="error = null"
|
|
/>
|
|
|
|
<!-- Loading State -->
|
|
<div v-if="loading" class="flex justify-center py-12">
|
|
<UIcon name="i-lucide-loader-2" class="w-8 h-8 animate-spin" />
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div v-else-if="data" class="space-y-6">
|
|
<!-- Totales Monetarios -->
|
|
<UCard v-if="pageSections.totalesCafe">
|
|
<template #header>
|
|
<h3 class="text-lg font-semibold">Totales Monetarios</h3>
|
|
</template>
|
|
<TotalesMonetarios :data="data.totalesMonetarios" />
|
|
</UCard>
|
|
|
|
<!-- Totales Ingreso y Compra -->
|
|
<UCard v-if="pageSections.totalesCafe">
|
|
<template #header>
|
|
<h3 class="text-lg font-semibold">Totales de Ingreso y Compra</h3>
|
|
</template>
|
|
<TotalesIngresoCompra :data="data.totalesIngresoCompra" />
|
|
</UCard>
|
|
|
|
<!-- Totales Verde -->
|
|
<UCard v-if="pageSections.totalesVerde">
|
|
<template #header>
|
|
<h3 class="text-lg font-semibold">Totales de Café Verde</h3>
|
|
</template>
|
|
<TotalesVerde :data="data.totalesVerde" />
|
|
</UCard>
|
|
|
|
<!-- Contadores -->
|
|
<UCard v-if="data.contadores">
|
|
<template #header>
|
|
<h3 class="text-lg font-semibold">Estadísticas</h3>
|
|
</template>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold text-primary">{{ data.contadores.ingresos_filtrados }}</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">Ingresos Filtrados</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold text-gray-600">{{ data.contadores.total_ingresos }}</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">Total Ingresos</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold text-primary">{{ data.contadores.clientes_con_ingresos_filtrados }}</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">Clientes Activos</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold text-gray-600">{{ data.contadores.total_clientes }}</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">Total Clientes</div>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<!-- Tabla de Ingresos (placeholder) -->
|
|
<UCard v-if="pageSections.tablaIngresos && data.listaIngresos?.length > 0">
|
|
<template #header>
|
|
<h3 class="text-lg font-semibold">Lista de Ingresos ({{ data.listaIngresos.length }})</h3>
|
|
</template>
|
|
<div class="text-sm text-gray-500">
|
|
Tabla de ingresos se implementará próximamente
|
|
</div>
|
|
</UCard>
|
|
|
|
<!-- Top 10 Clientes (placeholder) -->
|
|
<UCard v-if="pageSections.top10Clientes && data.listaClientes?.length > 0">
|
|
<template #header>
|
|
<h3 class="text-lg font-semibold">Top Clientes ({{ data.listaClientes.length }})</h3>
|
|
</template>
|
|
<div class="text-sm text-gray-500">
|
|
Ranking de clientes se implementará próximamente
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useInformeLayout } from '~/composables/useInformeLayout'
|
|
|
|
definePageMeta({
|
|
layout: 'informe',
|
|
title: 'Informe Ingresos'
|
|
})
|
|
|
|
const { pageSections } = useInformeLayout()
|
|
|
|
const loading = ref(false)
|
|
const error = ref<string | null>(null)
|
|
const data = ref<any>(null)
|
|
|
|
// Filtros
|
|
const filters = ref({
|
|
fecha_desde: null as string | null,
|
|
fecha_hasta: null as string | null,
|
|
incluir_anulados: false,
|
|
granularidad: 'dia'
|
|
})
|
|
|
|
// Filtros avanzados con checkboxes
|
|
const tiposSeleccionados = ref({
|
|
uva: false,
|
|
mojado: false,
|
|
oreado: false,
|
|
verde: false
|
|
})
|
|
|
|
const estadosSeleccionados = ref({
|
|
pagado: false,
|
|
pendiente: false
|
|
})
|
|
|
|
// Computed para convertir checkboxes a arrays
|
|
const tiposArray = computed(() => {
|
|
const tipos: string[] = []
|
|
if (tiposSeleccionados.value.uva) tipos.push('uva')
|
|
if (tiposSeleccionados.value.mojado) tipos.push('mojado')
|
|
if (tiposSeleccionados.value.oreado) tipos.push('oreado')
|
|
if (tiposSeleccionados.value.verde) tipos.push('verde')
|
|
return tipos
|
|
})
|
|
|
|
const estadosArray = computed(() => {
|
|
const estados: string[] = []
|
|
if (estadosSeleccionados.value.pagado) estados.push('pagado')
|
|
if (estadosSeleccionados.value.pendiente) estados.push('pendiente')
|
|
return estados
|
|
})
|
|
|
|
// Función para cargar datos
|
|
async function loadData() {
|
|
loading.value = true
|
|
error.value = null
|
|
|
|
try {
|
|
const payload = {
|
|
fecha_desde: filters.value.fecha_desde,
|
|
fecha_hasta: filters.value.fecha_hasta,
|
|
incluir_anulados: filters.value.incluir_anulados,
|
|
cliente_ids: [], // TODO: implementar selector de clientes
|
|
tipos: tiposArray.value,
|
|
estados: estadosArray.value,
|
|
ubicaciones: [], // TODO: implementar selector de ubicaciones
|
|
calidades: [], // TODO: implementar selector de calidades
|
|
granularidad: filters.value.granularidad
|
|
}
|
|
|
|
console.log('[Informe] Cargando datos con filtros:', payload)
|
|
const result = await $fetch('/api/metabase/informe', {
|
|
method: 'POST',
|
|
body: payload
|
|
})
|
|
|
|
data.value = result
|
|
console.log('[Informe] Datos cargados:', result)
|
|
} catch (e: any) {
|
|
error.value = e.message || 'Error al cargar datos del informe'
|
|
console.error('[Informe] Error:', e)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// Función para aplicar filtros
|
|
function applyFilters() {
|
|
loadData()
|
|
}
|
|
|
|
// Cargar datos al montar
|
|
onMounted(() => {
|
|
loadData()
|
|
})
|
|
</script>
|