nucleo000/analiticaNucleo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: reactivar página Informe de Ingresos con arquitectura Metabase
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 47s
Details

Browse Source 
- Reescribir informe-ingresos.vue siguiendo patrón de panorama.vue
- Implementar filosofía "Metabase calcula TODO, Vue solo renderiza"
- Agregar filtros avanzados: tipos de café, estados
- Integrar con endpoint /api/metabase/informe existente
- Usar componentes reutilizables: TotalesIngresoCompra, TotalesMonetarios, TotalesVerde
- Implementar detección de cambios pendientes con alertas visuales
- Agregar confirmación para incluir registros anulados
- Eliminar documentación redundante de queries (ya está en Metabase Debug)
- Layout informe con control de visibilidad de secciones
- Placeholders para tablas y gráficas futuras
This commit is contained in:
josedario87
2025-10-29 18:20:29 -06:00
parent f8ae9e44e7
commit 8caf8a5e10
3 changed files with 408 additions and 1595 deletions
Download Patch File Download Diff File Expand all files Collapse all files

686
METABASE_QUERIES_INFORME_INGRESOS.md
View File

@@ -1,686 +0,0 @@
# 📊 QUERIES DE METABASE PARA INFORME INGRESOS
## 🎯 FILOSOFÍA
**Metabase calcula TODO. Vue solo renderiza.**
Cada query devuelve exactamente los valores que un componente necesita mostrar, ya calculados y listos para usar.
---
## 📋 PARÁMETROS GLOBALES
Todas las queries aceptan estos parámetros (con soporte para múltiples valores):
| Parámetro | Tipo | Default | Descripción |
|-----------|------|---------|-------------|
| `fecha_desde` | Date | `null` | Fecha inicio (filtra por `created_at`) |
| `fecha_hasta` | Date | `null` | Fecha fin (filtra por `created_at`) |
| `incluir_anulados` | Boolean | `false` | Si `false`, excluye `estado='anulado'` o `fecha_anulado IS NOT NULL` |
| `cliente_ids` | Array[Number] | `[]` | Array de IDs de clientes. Si vacío, incluye todos |
| `tipos` | Array[String] | `[]` | Array de tipos: 'uva', 'mojado', 'oreado', 'verde'. Si vacío, todos |
| `estados` | Array[String] | `[]` | Array de estados: 'pagado', 'pendiente'. Si vacío, todos |
| `ubicaciones` | Array[String] | `[]` | Array de ubicaciones de clientes. Si vacío, todas |
| `calidades` | Array[String] | `[]` | Array de calidades de café. Si vacío, todas |
**Condición SQL estándar:**
```sql
WHERE
-- Filtro de anulados
({{incluir_anulados}} OR (i.estado != 'anulado' AND i.fecha_anulado IS NULL))
-- Filtro de fechas
AND ({{fecha_desde}} IS NULL OR i.created_at >= {{fecha_desde}})
AND ({{fecha_hasta}} IS NULL OR i.created_at <= {{fecha_hasta}})
-- Filtro de clientes (si se proporciona)
AND (CARDINALITY({{cliente_ids}}) = 0 OR i.cliente_id = ANY({{cliente_ids}}))
-- Filtro de tipos (si se proporciona)
AND (CARDINALITY({{tipos}}) = 0 OR i.tipo = ANY({{tipos}}))
-- Filtro de estados (si se proporciona)
AND (CARDINALITY({{estados}}) = 0 OR i.estado = ANY({{estados}}))
-- Filtro de ubicaciones vía join con clientes (si se proporciona)
AND (CARDINALITY({{ubicaciones}}) = 0 OR c.ubicacion = ANY({{ubicaciones}}))
-- Filtro de calidades (si se proporciona)
AND (CARDINALITY({{calidades}}) = 0 OR i.calidad = ANY({{calidades}}))
```
---
## 🔁 QUERIES REUTILIZADAS DE PANORAMA
Las siguientes queries son **idénticas** a las de panorama, solo cambia que aceptan más parámetros de filtrado:
### Query 1: `informe_totales_ingreso_compra`
**Reutiliza:** `panorama_totales_ingreso_compra`
**Componente:** `TotalesIngresoCompra.vue`
```sql
SELECT
-- === TOTALES GENERALES (Pagado + Pendiente) ===
COALESCE(SUM(CASE WHEN i.tipo = 'uva' THEN i.peso_neto ELSE 0 END), 0) as total_lb_uva_ingresada,
COALESCE(SUM(CASE WHEN i.tipo = 'uva' THEN i.peso_seco ELSE 0 END), 0) as total_qq_seco_uva_ingresado,
COALESCE(SUM(CASE WHEN i.tipo = 'mojado' THEN i.peso_seco ELSE 0 END), 0) as total_qq_seco_mojado_ingresado,
COALESCE(SUM(CASE WHEN i.tipo = 'oreado' THEN i.peso_seco ELSE 0 END), 0) as total_qq_seco_oreado_ingresado,
COALESCE(SUM(i.peso_seco), 0) as total_qq_seco_ingresado,
-- === SOLO PAGADOS ===
COALESCE(SUM(CASE WHEN i.tipo = 'uva' AND i.estado = 'pagado' THEN i.peso_neto ELSE 0 END), 0) as total_lb_uva_pagada,
COALESCE(SUM(CASE WHEN i.tipo = 'uva' AND i.estado = 'pagado' THEN i.peso_seco ELSE 0 END), 0) as total_qq_seco_uva_pagado,
COALESCE(SUM(CASE WHEN i.tipo = 'mojado' AND i.estado = 'pagado' THEN i.peso_seco ELSE 0 END), 0) as total_qq_seco_mojado_pagado,
COALESCE(SUM(CASE WHEN i.tipo = 'oreado' AND i.estado = 'pagado' THEN i.peso_seco ELSE 0 END), 0) as total_qq_seco_oreado_pagado,
COALESCE(SUM(CASE WHEN i.estado = 'pagado' THEN i.peso_seco ELSE 0 END), 0) as total_qq_seco_comprado,
-- === INVENTARIO EN DEPÓSITO (Pendiente) ===
COALESCE(SUM(CASE WHEN i.tipo = 'uva' AND i.estado = 'pendiente' THEN i.peso_neto ELSE 0 END), 0) as total_lb_uva_deposito,
COALESCE(SUM(CASE WHEN i.tipo = 'mojado' AND i.estado = 'pendiente' THEN i.peso_seco ELSE 0 END), 0) as total_qq_mojado_deposito,
COALESCE(SUM(CASE WHEN i.tipo = 'oreado' AND i.estado = 'pendiente' THEN i.peso_seco ELSE 0 END), 0) as total_qq_oreado_deposito,
COALESCE(SUM(CASE WHEN i.estado = 'pendiente' THEN i.peso_seco ELSE 0 END), 0) as total_qq_seco_deposito
FROM vista_detalle_ingresos i
LEFT JOIN clientes c ON i.cliente_id = c.id
WHERE
({{incluir_anulados}} OR (i.estado != 'anulado' AND i.fecha_anulado IS NULL))
AND ({{fecha_desde}} IS NULL OR i.created_at >= {{fecha_desde}})
AND ({{fecha_hasta}} IS NULL OR i.created_at <= {{fecha_hasta}})
AND (CARDINALITY({{cliente_ids}}) = 0 OR i.cliente_id = ANY({{cliente_ids}}))
AND (CARDINALITY({{tipos}}) = 0 OR i.tipo = ANY({{tipos}}))
AND (CARDINALITY({{estados}}) = 0 OR i.estado = ANY({{estados}}))
AND (CARDINALITY({{ubicaciones}}) = 0 OR c.ubicacion = ANY({{ubicaciones}}))
AND (CARDINALITY({{calidades}}) = 0 OR i.calidad = ANY({{calidades}}));
```
---
### Query 2: `informe_totales_monetarios`
**Reutiliza:** `panorama_totales_monetarios`
**Componente:** `TotalesMonetarios.vue`
*(SQL idéntico a Query 3 de panorama, pero con los filtros adicionales como en Query 1)*
---
### Query 3: `informe_totales_verde`
**Reutiliza:** `panorama_totales_verde`
**Componente:** `TotalesVerde.vue`
*(SQL idéntico a Query 4 de panorama, pero con los filtros adicionales)*
---
## 📊 QUERIES NUEVAS PARA INFORME INGRESOS
### Query 4: `informe_lista_ingresos`
**Componente:** `IngresosVistaTablaIngresos.vue`
**Devuelve:** Múltiples filas (todos los ingresos filtrados con info del cliente)
```sql
SELECT
i.id,
i.cliente_id,
i.created_at,
i.fecha,
i.tipo,
i.estado,
i.peso_neto,
i.peso_seco,
i.precio,
i.calidad,
i.observaciones,
i.fecha_anulado,
-- Calcular total a pagar
CASE
WHEN i.tipo IN ('verde', 'uva') THEN i.precio * i.peso_neto
WHEN i.tipo IN ('oreado', 'mojado') THEN (i.precio / 2) * i.peso_seco
ELSE 0
END as total_a_pagar,
-- Datos del cliente (para mostrar en la tabla)
c.name as cliente_nombre,
c.cedula as cliente_cedula,
c.ubicacion as cliente_ubicacion,
c.telefono as cliente_telefono
FROM vista_detalle_ingresos i
LEFT JOIN clientes c ON i.cliente_id = c.id
WHERE
({{incluir_anulados}} OR (i.estado != 'anulado' AND i.fecha_anulado IS NULL))
AND ({{fecha_desde}} IS NULL OR i.created_at >= {{fecha_desde}})
AND ({{fecha_hasta}} IS NULL OR i.created_at <= {{fecha_hasta}})
AND (CARDINALITY({{cliente_ids}}) = 0 OR i.cliente_id = ANY({{cliente_ids}}))
AND (CARDINALITY({{tipos}}) = 0 OR i.tipo = ANY({{tipos}}))
AND (CARDINALITY({{estados}}) = 0 OR i.estado = ANY({{estados}}))
AND (CARDINALITY({{ubicaciones}}) = 0 OR c.ubicacion = ANY({{ubicaciones}}))
AND (CARDINALITY({{calidades}}) = 0 OR i.calidad = ANY({{calidades}}))
ORDER BY i.created_at DESC, i.id DESC
LIMIT 1000;
```
**Respuesta esperada:**
```json
[
{
"id": 1234,
"cliente_id": 42,
"created_at": "2025-01-15T10:30:00Z",
"fecha": "2025-01-15",
"tipo": "uva",
"estado": "pagado",
"peso_neto": 2550.00,
"peso_seco": 25.50,
"precio": 4.50,
"calidad": "primera",
"observaciones": null,
"fecha_anulado": null,
"total_a_pagar": 11475.00,
"cliente_nombre": "Juan Pérez",
"cliente_cedula": "0801199012345",
"cliente_ubicacion": "El Rosario",
"cliente_telefono": "99887766"
}
]
```
---
### Query 5: `informe_lista_clientes_con_totales`
**Componente:** `ClientesVistaTablaClientes.vue`, `IngresosTopClientes.vue`
**Devuelve:** Múltiples filas (un cliente por fila con sus totales agregados)
```sql
SELECT
c.id as cliente_id,
c.name as cliente_nombre,
c.cedula as cliente_cedula,
c.ubicacion as cliente_ubicacion,
c.telefono as cliente_telefono,
c.avatar_url as cliente_avatar,
c.grupo_estudio as cliente_grupo_estudio,
-- === TOTALES POR CLIENTE ===
-- Contadores
COUNT(i.id) as num_ingresos,
-- Totales de peso
COALESCE(SUM(i.peso_seco), 0) as total_qq_seco,
COALESCE(SUM(i.peso_neto), 0) as total_lb_neto,
-- Totales por tipo
COALESCE(SUM(CASE WHEN i.tipo = 'uva' THEN i.peso_seco ELSE 0 END), 0) as total_qq_uva,
COALESCE(SUM(CASE WHEN i.tipo = 'mojado' THEN i.peso_seco ELSE 0 END), 0) as total_qq_mojado,
COALESCE(SUM(CASE WHEN i.tipo = 'oreado' THEN i.peso_seco ELSE 0 END), 0) as total_qq_oreado,
COALESCE(SUM(CASE WHEN i.tipo = 'verde' THEN i.peso_neto ELSE 0 END), 0) as total_lb_verde,
-- Total pagado (inversión)
COALESCE(SUM(
CASE
WHEN i.estado = 'pagado' AND i.tipo IN ('verde', 'uva') THEN i.precio * i.peso_neto
WHEN i.estado = 'pagado' AND i.tipo IN ('oreado', 'mojado') THEN (i.precio / 2) * i.peso_seco
ELSE 0
END
), 0) as total_pagado,
-- Total pendiente de pagar
COALESCE(SUM(
CASE
WHEN i.estado = 'pendiente' AND i.tipo IN ('verde', 'uva') THEN i.precio * i.peso_neto
WHEN i.estado = 'pendiente' AND i.tipo IN ('oreado', 'mojado') THEN (i.precio / 2) * i.peso_seco
ELSE 0
END
), 0) as total_pendiente,
-- Precio promedio ponderado por qq
CASE
WHEN SUM(CASE WHEN i.estado = 'pagado' THEN i.peso_seco ELSE 0 END) > 0
THEN SUM(
CASE
WHEN i.estado = 'pagado' AND i.tipo IN ('verde', 'uva') THEN i.precio * i.peso_neto
WHEN i.estado = 'pagado' AND i.tipo IN ('oreado', 'mojado') THEN (i.precio / 2) * i.peso_seco
ELSE 0
END
) / SUM(CASE WHEN i.estado = 'pagado' THEN i.peso_seco ELSE 0 END)
ELSE 0
END as precio_promedio_qq,
-- Fecha primer ingreso
MIN(i.created_at) as primer_ingreso,
-- Fecha último ingreso
MAX(i.created_at) as ultimo_ingreso
FROM clientes c
LEFT JOIN vista_detalle_ingresos i ON c.id = i.cliente_id
AND ({{incluir_anulados}} OR (i.estado != 'anulado' AND i.fecha_anulado IS NULL))
AND ({{fecha_desde}} IS NULL OR i.created_at >= {{fecha_desde}})
AND ({{fecha_hasta}} IS NULL OR i.created_at <= {{fecha_hasta}})
AND (CARDINALITY({{tipos}}) = 0 OR i.tipo = ANY({{tipos}}))
AND (CARDINALITY({{estados}}) = 0 OR i.estado = ANY({{estados}}))
AND (CARDINALITY({{calidades}}) = 0 OR i.calidad = ANY({{calidades}}))
WHERE
-- Filtro de clientes seleccionados
(CARDINALITY({{cliente_ids}}) = 0 OR c.id = ANY({{cliente_ids}}))
-- Filtro de ubicaciones de clientes
AND (CARDINALITY({{ubicaciones}}) = 0 OR c.ubicacion = ANY({{ubicaciones}}))
GROUP BY c.id, c.name, c.cedula, c.ubicacion, c.telefono, c.avatar_url, c.grupo_estudio
HAVING COUNT(i.id) > 0
ORDER BY total_pagado DESC;
```
**Respuesta esperada:**
```json
[
{
"cliente_id": 42,
"cliente_nombre": "Juan Pérez",
"cliente_cedula": "0801199012345",
"cliente_ubicacion": "El Rosario",
"cliente_telefono": "99887766",
"cliente_avatar": null,
"cliente_grupo_estudio": null,
"num_ingresos": 45,
"total_qq_seco": 450.00,
"total_lb_neto": 45000.00,
"total_qq_uva": 200.00,
"total_qq_mojado": 150.00,
"total_qq_oreado": 100.00,
"total_lb_verde": 5000.00,
"total_pagado": 1234567.89,
"total_pendiente": 50000.00,
"precio_promedio_qq": 2743.71,
"primer_ingreso": "2024-11-01T08:00:00Z",
"ultimo_ingreso": "2025-01-15T14:30:00Z"
}
]
```
---
### Query 6: `informe_serie_temporal_acumulada`
**Componente:** `GraficaAcumuladoresUva.vue`, `GraficaDinamicaPagadoDeposito.vue`
**Devuelve:** Múltiples filas (agrupadas por fecha y tipo, con acumulación)
**Parámetros adicionales:** `granularidad` (valores: 'dia', 'semana', 'mes')
```sql
WITH datos_agrupados AS (
SELECT
-- Agrupar por granularidad
CASE
WHEN {{granularidad}} = 'dia' THEN DATE(i.created_at)
WHEN {{granularidad}} = 'semana' THEN DATE_TRUNC('week', i.created_at)::date
WHEN {{granularidad}} = 'mes' THEN DATE_TRUNC('month', i.created_at)::date
ELSE DATE(i.created_at)
END as fecha_grupo,
i.tipo,
i.estado,
-- Totales del período
SUM(i.peso_seco) as peso_seco_periodo,
SUM(i.peso_neto) as peso_neto_periodo,
SUM(
CASE
WHEN i.tipo IN ('verde', 'uva') THEN i.precio * i.peso_neto
WHEN i.tipo IN ('oreado', 'mojado') THEN (i.precio / 2) * i.peso_seco
ELSE 0
END
) as inversion_periodo,
COUNT(*) as num_ingresos_periodo
FROM vista_detalle_ingresos i
LEFT JOIN clientes c ON i.cliente_id = c.id
WHERE
({{incluir_anulados}} OR (i.estado != 'anulado' AND i.fecha_anulado IS NULL))
AND ({{fecha_desde}} IS NULL OR i.created_at >= {{fecha_desde}})
AND ({{fecha_hasta}} IS NULL OR i.created_at <= {{fecha_hasta}})
AND (CARDINALITY({{cliente_ids}}) = 0 OR i.cliente_id = ANY({{cliente_ids}}))
AND (CARDINALITY({{tipos}}) = 0 OR i.tipo = ANY({{tipos}}))
AND (CARDINALITY({{estados}}) = 0 OR i.estado = ANY({{estados}}))
AND (CARDINALITY({{ubicaciones}}) = 0 OR c.ubicacion = ANY({{ubicaciones}}))
AND (CARDINALITY({{calidades}}) = 0 OR i.calidad = ANY({{calidades}}))
GROUP BY fecha_grupo, i.tipo, i.estado
)
SELECT
fecha_grupo,
tipo,
estado,
peso_seco_periodo,
peso_neto_periodo,
inversion_periodo,
num_ingresos_periodo,
-- Acumulados hasta esta fecha (por tipo y estado)
SUM(peso_seco_periodo) OVER (
PARTITION BY tipo, estado
ORDER BY fecha_grupo
ROWS BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW
) as peso_seco_acumulado,
SUM(peso_neto_periodo) OVER (
PARTITION BY tipo, estado
ORDER BY fecha_grupo
ROWS BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW
) as peso_neto_acumulado,
SUM(inversion_periodo) OVER (
PARTITION BY tipo, estado
ORDER BY fecha_grupo
ROWS BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW
) as inversion_acumulada
FROM datos_agrupados
ORDER BY fecha_grupo, tipo, estado;
```
**Respuesta esperada:**
```json
[
{
"fecha_grupo": "2025-01-15",
"tipo": "uva",
"estado": "pagado",
"peso_seco_periodo": 25.50,
"peso_neto_periodo": 2550.00,
"inversion_periodo": 11475.00,
"num_ingresos_periodo": 5,
"peso_seco_acumulado": 450.00,
"peso_neto_acumulado": 45000.00,
"inversion_acumulada": 202500.00
}
]
```
---
### Query 7: `informe_opciones_filtros`
**Propósito:** Obtener listas de valores únicos para los filtros dinámicos
**Devuelve:** 1 objeto con arrays de opciones
```sql
SELECT
-- Ubicaciones únicas de clientes que tienen ingresos
(
SELECT JSON_AGG(DISTINCT c.ubicacion ORDER BY c.ubicacion)
FROM clientes c
WHERE c.ubicacion IS NOT NULL
) as ubicaciones_disponibles,
-- Calidades únicas de ingresos
(
SELECT JSON_AGG(DISTINCT i.calidad ORDER BY i.calidad)
FROM vista_detalle_ingresos i
WHERE i.calidad IS NOT NULL
) as calidades_disponibles,
-- Tipos de café (hardcoded pero por consistencia)
ARRAY['uva', 'mojado', 'oreado', 'verde']::text[] as tipos_cafe,
-- Estados (hardcoded)
ARRAY['pagado', 'pendiente']::text[] as estados_disponibles;
```
**Respuesta esperada:**
```json
{
"ubicaciones_disponibles": ["El Rosario", "Las Flores", "Belén", "Santa Rosa"],
"calidades_disponibles": ["primera", "segunda", "tercera", "especial"],
"tipos_cafe": ["uva", "mojado", "oreado", "verde"],
"estados_disponibles": ["pagado", "pendiente"]
}
```
---
### Query 8: `informe_contadores_filtros`
**Propósito:** Para el footer que muestra "X ingresos filtrados de Y totales"
**Devuelve:** 1 fila con contadores
```sql
SELECT
-- Total ingresos (sin filtros)
(SELECT COUNT(*) FROM vista_detalle_ingresos) as total_ingresos,
-- Ingresos filtrados
(
SELECT COUNT(*)
FROM vista_detalle_ingresos i
LEFT JOIN clientes c ON i.cliente_id = c.id
WHERE
({{incluir_anulados}} OR (i.estado != 'anulado' AND i.fecha_anulado IS NULL))
AND ({{fecha_desde}} IS NULL OR i.created_at >= {{fecha_desde}})
AND ({{fecha_hasta}} IS NULL OR i.created_at <= {{fecha_hasta}})
AND (CARDINALITY({{cliente_ids}}) = 0 OR i.cliente_id = ANY({{cliente_ids}}))
AND (CARDINALITY({{tipos}}) = 0 OR i.tipo = ANY({{tipos}}))
AND (CARDINALITY({{estados}}) = 0 OR i.estado = ANY({{estados}}))
AND (CARDINALITY({{ubicaciones}}) = 0 OR c.ubicacion = ANY({{ubicaciones}}))
AND (CARDINALITY({{calidades}}) = 0 OR i.calidad = ANY({{calidades}}))
) as ingresos_filtrados,
-- Total clientes (sin filtros)
(SELECT COUNT(*) FROM clientes) as total_clientes,
-- Clientes con ingresos filtrados
(
SELECT COUNT(DISTINCT i.cliente_id)
FROM vista_detalle_ingresos i
LEFT JOIN clientes c ON i.cliente_id = c.id
WHERE
({{incluir_anulados}} OR (i.estado != 'anulado' AND i.fecha_anulado IS NULL))
AND ({{fecha_desde}} IS NULL OR i.created_at >= {{fecha_desde}})
AND ({{fecha_hasta}} IS NULL OR i.created_at <= {{fecha_hasta}})
AND (CARDINALITY({{cliente_ids}}) = 0 OR i.cliente_id = ANY({{cliente_ids}}))
AND (CARDINALITY({{tipos}}) = 0 OR i.tipo = ANY({{tipos}}))
AND (CARDINALITY({{estados}}) = 0 OR i.estado = ANY({{estados}}))
AND (CARDINALITY({{ubicaciones}}) = 0 OR c.ubicacion = ANY({{ubicaciones}}))
AND (CARDINALITY({{calidades}}) = 0 OR i.calidad = ANY({{calidades}}))
) as clientes_con_ingresos_filtrados;
```
**Respuesta esperada:**
```json
{
"total_ingresos": 1250,
"ingresos_filtrados": 230,
"total_clientes": 85,
"clientes_con_ingresos_filtrados": 42
}
```
---
## 📊 RESUMEN DE QUERIES
| # | Nombre | Componente | Tipo de respuesta | Reutiliza? |
|---|--------|------------|-------------------|------------|
| 1 | `informe_totales_ingreso_compra` | TotalesIngresoCompra | 1 fila | ✅ Panorama Q2 |
| 2 | `informe_totales_monetarios` | TotalesMonetarios | 1 fila | ✅ Panorama Q3 |
| 3 | `informe_totales_verde` | TotalesVerde | 1 fila | ✅ Panorama Q4 |
| 4 | `informe_lista_ingresos` | VistaTablaIngresos | Múltiples filas | ❌ Nueva |
| 5 | `informe_lista_clientes_con_totales` | VistaTablaClientes, TopClientes | Múltiples filas | ❌ Nueva |
| 6 | `informe_serie_temporal_acumulada` | Gráficas acumuladas | Múltiples filas | ❌ Nueva |
| 7 | `informe_opciones_filtros` | Selectores de filtros | 1 objeto JSON | ❌ Nueva |
| 8 | `informe_contadores_filtros` | Footer de filtros | 1 fila | ❌ Nueva |
**Total: 8 Queries (3 reutilizadas + 5 nuevas)**
---
## 🔧 CONFIGURACIÓN DE PARÁMETROS EN METABASE
### Parámetros Simples (igual que panorama):
- `fecha_desde`: Date, opcional
- `fecha_hasta`: Date, opcional
- `incluir_anulados`: Boolean, default `false`
### Parámetros de Array (NUEVO):
#### `cliente_ids`
- **Tipo:** Text (se parsea como array)
- **Widget Type:** Text
- **Default:** `[]`
- **Required:** No
- **Variable Name:** `cliente_ids`
- **SQL Type:** `INTEGER[]`
#### `tipos`
- **Tipo:** Text
- **Widget Type:** Text o Dropdown (multi-select)
- **Default:** `[]`
- **Required:** No
- **Options:** `['uva', 'mojado', 'oreado', 'verde']`
- **SQL Type:** `TEXT[]`
#### `estados`
- **Tipo:** Text
- **Widget Type:** Text o Dropdown (multi-select)
- **Default:** `[]`
- **Required:** No
- **Options:** `['pagado', 'pendiente']`
- **SQL Type:** `TEXT[]`
#### `ubicaciones`
- **Tipo:** Text
- **Widget Type:** Text
- **Default:** `[]`
- **Required:** No
- **SQL Type:** `TEXT[]`
#### `calidades`
- **Tipo:** Text
- **Widget Type:** Text
- **Default:** `[]`
- **Required:** No
- **SQL Type:** `TEXT[]`
#### `granularidad` (solo Query 6)
- **Tipo:** Text
- **Widget Type:** Dropdown
- **Default:** `'dia'`
- **Required:** Yes
- **Options:** `['dia', 'semana', 'mes']`
---
## 🚀 INTEGRACIÓN EN VUE
```typescript
// informe-ingresos.vue
const filters = ref({
fecha_desde: null,
fecha_hasta: null,
incluir_anulados: false,
cliente_ids: [], // Array de números
tipos: [], // Array de strings
estados: [], // Array de strings
ubicaciones: [], // Array de strings
calidades: [], // Array de strings
granularidad: 'dia' // Solo para Query 6
})
async function loadAllData() {
const [
totalesIngresoCompra,
totalesMonetarios,
totalesVerde,
listaIngresos,
listaClientes,
serieAcumulada,
opcionesFiltros,
contadores
] = await Promise.all([
$fetch('/api/metabase/question/101', { query: filters.value }),
$fetch('/api/metabase/question/102', { query: filters.value }),
$fetch('/api/metabase/question/103', { query: filters.value }),
$fetch('/api/metabase/question/104', { query: filters.value }),
$fetch('/api/metabase/question/105', { query: filters.value }),
$fetch('/api/metabase/question/106', { query: filters.value }),
$fetch('/api/metabase/question/107'), // Sin filtros, siempre trae todo
$fetch('/api/metabase/question/108', { query: filters.value })
])
// Asignar directamente
metrics.value = {
totalesIngresoCompra: totalesIngresoCompra.data.rows[0],
totalesMonetarios: totalesMonetarios.data.rows[0],
totalesVerde: totalesVerde.data.rows[0],
ingresos: listaIngresos.data.rows,
clientes: listaClientes.data.rows,
serieAcumulada: serieAcumulada.data.rows,
opcionesFiltros: opcionesFiltros.data.rows[0],
contadores: contadores.data.rows[0]
}
}
```
---
## ⚠️ NOTAS IMPORTANTES
### 1. Soporte de Arrays en Metabase
Metabase no tiene soporte nativo para arrays en parámetros. Hay dos opciones:
**Opción A: Usar PostgreSQL arrays con CARDINALITY**
```sql
WHERE (CARDINALITY({{cliente_ids}}) = 0 OR i.cliente_id = ANY({{cliente_ids}}))
```
El parámetro se pasa como: `{1,2,3}` o `ARRAY[1,2,3]`
**Opción B: Usar múltiples OR con unnest**
```sql
WHERE ({{cliente_ids}} = '' OR i.cliente_id IN (SELECT unnest(string_to_array({{cliente_ids}}, ','))))
```
El parámetro se pasa como string CSV: `"1,2,3"`
**Recomendación:** Usar Opción A si Metabase/PostgreSQL lo soporta, caso contrario usar Opción B.
### 2. Performance
- Query 4 (lista de ingresos) tiene LIMIT 1000 para evitar cargas masivas
- Query 5 (clientes con totales) puede ser lenta si hay muchos ingresos
- Query 6 (serie acumulada) usa window functions, puede requerir índices en `created_at`
### 3. Índices Recomendados
```sql
CREATE INDEX idx_ingresos_created_at ON vista_detalle_ingresos(created_at);
CREATE INDEX idx_ingresos_cliente_id ON vista_detalle_ingresos(cliente_id);
CREATE INDEX idx_ingresos_tipo ON vista_detalle_ingresos(tipo);
CREATE INDEX idx_ingresos_estado ON vista_detalle_ingresos(estado);
CREATE INDEX idx_clientes_ubicacion ON clientes(ubicacion);
```
### 4. Diferencias con Panorama
- Panorama usa filtros simples (un valor por parámetro)
- Informe usa filtros múltiples (arrays de valores)
- Informe tiene query de lista completa de ingresos (para tabla)
- Informe tiene agregación por cliente (para ranking y tabla de clientes)
---
## 📝 PRÓXIMOS PASOS
1. ✅ Crear estas 8 queries en Metabase
2. ✅ Configurar parámetros (especialmente los de tipo array)
3. ✅ Probar queries con diferentes combinaciones de filtros
4. ✅ Obtener los Question IDs
5. ✅ Adaptar `informe-ingresos.vue` para usar las nuevas queries
6. ✅ Eliminar composables de métricas (reutilizar estructura de panorama)
7. ✅ Adaptar componentes para recibir props directamente
8. ✅ Probar performance con datasets grandes
---
**Documento creado:** 2025-10-14
**Autor:** Claude Code
**Proyecto:** Analítica Núcleo - Informe Ingresos

734
METABASE_QUERIES_PANORAMA.md
View File

@@ -1,734 +0,0 @@
# 📊 QUERIES DE METABASE PARA PANORAMA FACTURADOR
## 🎯 FILOSOFÍA
**Metabase calcula TODO. Vue solo renderiza.**
Cada query devuelve **exactamente los valores que un componente necesita mostrar**, ya calculados y listos para usar. Sin composables de métricas, sin cálculos en el frontend.
---
## 📋 PARÁMETROS GLOBALES
Todas las queries aceptan estos parámetros:
| Parámetro | Tipo | Default | Descripción |
|-----------|------|---------|-------------|
| `fecha_desde` | Date | `null` | Fecha inicio (filtra por `created_at`) |
| `fecha_hasta` | Date | `null` | Fecha fin (filtra por `created_at`) |
| `incluir_anulados` | Boolean | `false` | Si `false`, excluye `estado='anulado'` o `fecha_anulado IS NOT NULL` |
**Condición SQL estándar:**
```sql
WHERE
({{incluir_anulados}} OR (estado != 'anulado' AND fecha_anulado IS NULL))
AND ({{fecha_desde}} IS NULL OR created_at >= {{fecha_desde}})
AND ({{fecha_hasta}} IS NULL OR created_at <= {{fecha_hasta}})
```
---
## 🎨 QUERIES POR COMPONENTE
### Query 1: `panorama_totales_financieros_principales`
**Componente:** Card principal de "Totales Financieros"
**Devuelve:** 1 fila con 3 valores
```sql
SELECT
-- Total Invertido en Café (pagado: uva + mojado + oreado)
COALESCE(SUM(
CASE
WHEN estado = 'pagado' AND tipo IN ('verde', 'uva')
THEN precio * peso_neto
WHEN estado = 'pagado' AND tipo IN ('oreado', 'mojado')
THEN (precio / 2) * peso_seco
ELSE 0
END
), 0) as total_invertido_cafe,
-- Total Rechazos (traer de otra tabla)
COALESCE((
SELECT SUM(total_cobrado)
FROM rechazos
WHERE
({{incluir_anulados}} OR (estado != 'anulado' AND fecha_anulado IS NULL))
AND ({{fecha_desde}} IS NULL OR created_at >= {{fecha_desde}})
AND ({{fecha_hasta}} IS NULL OR created_at <= {{fecha_hasta}})
), 0) as total_rechazos,
-- Balance Neto (invertido - rechazos)
COALESCE(SUM(
CASE
WHEN estado = 'pagado' AND tipo IN ('verde', 'uva')
THEN precio * peso_neto
WHEN estado = 'pagado' AND tipo IN ('oreado', 'mojado')
THEN (precio / 2) * peso_seco
ELSE 0
END
), 0) - COALESCE((
SELECT SUM(total_cobrado)
FROM rechazos
WHERE
({{incluir_anulados}} OR (estado != 'anulado' AND fecha_anulado IS NULL))
AND ({{fecha_desde}} IS NULL OR created_at >= {{fecha_desde}})
AND ({{fecha_hasta}} IS NULL OR created_at <= {{fecha_hasta}})
), 0) as balance_neto
FROM vista_detalle_ingresos
WHERE
({{incluir_anulados}} OR (estado != 'anulado' AND fecha_anulado IS NULL))
AND ({{fecha_desde}} IS NULL OR created_at >= {{fecha_desde}})
AND ({{fecha_hasta}} IS NULL OR created_at <= {{fecha_hasta}});
```
**Respuesta esperada:**
```json
{
"total_invertido_cafe": 4567890.12,
"total_rechazos": 44750.00,
"balance_neto": 4523140.12
}
```
---
### Query 2: `panorama_totales_ingreso_compra`
**Componente:** `TotalesIngresoCompra.vue`
**Devuelve:** 1 fila con TODOS los valores del componente
```sql
SELECT
-- === TOTALES GENERALES (Pagado + Pendiente) ===
-- Uva
COALESCE(SUM(CASE WHEN tipo = 'uva' THEN peso_neto ELSE 0 END), 0) as total_lb_uva_ingresada,
COALESCE(SUM(CASE WHEN tipo = 'uva' THEN peso_seco ELSE 0 END), 0) as total_qq_seco_uva_ingresado,
-- Mojado
COALESCE(SUM(CASE WHEN tipo = 'mojado' THEN peso_seco ELSE 0 END), 0) as total_qq_seco_mojado_ingresado,
-- Oreado
COALESCE(SUM(CASE WHEN tipo = 'oreado' THEN peso_seco ELSE 0 END), 0) as total_qq_seco_oreado_ingresado,
-- Total general
COALESCE(SUM(peso_seco), 0) as total_qq_seco_ingresado,
-- === SOLO PAGADOS ===
-- Uva pagada
COALESCE(SUM(CASE WHEN tipo = 'uva' AND estado = 'pagado' THEN peso_neto ELSE 0 END), 0) as total_lb_uva_pagada,
COALESCE(SUM(CASE WHEN tipo = 'uva' AND estado = 'pagado' THEN peso_seco ELSE 0 END), 0) as total_qq_seco_uva_pagado,
-- Mojado pagado
COALESCE(SUM(CASE WHEN tipo = 'mojado' AND estado = 'pagado' THEN peso_seco ELSE 0 END), 0) as total_qq_seco_mojado_pagado,
-- Oreado pagado
COALESCE(SUM(CASE WHEN tipo = 'oreado' AND estado = 'pagado' THEN peso_seco ELSE 0 END), 0) as total_qq_seco_oreado_pagado,
-- Total pagado
COALESCE(SUM(CASE WHEN estado = 'pagado' THEN peso_seco ELSE 0 END), 0) as total_qq_seco_comprado,
-- === INVENTARIO EN DEPÓSITO (Pendiente) ===
-- Uva en depósito
COALESCE(SUM(CASE WHEN tipo = 'uva' AND estado = 'pendiente' THEN peso_neto ELSE 0 END), 0) as total_lb_uva_deposito,
-- Mojado en depósito
COALESCE(SUM(CASE WHEN tipo = 'mojado' AND estado = 'pendiente' THEN peso_seco ELSE 0 END), 0) as total_qq_mojado_deposito,
-- Oreado en depósito
COALESCE(SUM(CASE WHEN tipo = 'oreado' AND estado = 'pendiente' THEN peso_seco ELSE 0 END), 0) as total_qq_oreado_deposito,
-- Total en depósito
COALESCE(SUM(CASE WHEN estado = 'pendiente' THEN peso_seco ELSE 0 END), 0) as total_qq_seco_deposito
FROM vista_detalle_ingresos
WHERE
({{incluir_anulados}} OR (estado != 'anulado' AND fecha_anulado IS NULL))
AND ({{fecha_desde}} IS NULL OR created_at >= {{fecha_desde}})
AND ({{fecha_hasta}} IS NULL OR created_at <= {{fecha_hasta}});
```
**Respuesta esperada:**
```json
{
"total_lb_uva_ingresada": 123456.78,
"total_qq_seco_uva_ingresado": 246.91,
"total_qq_seco_mojado_ingresado": 500.00,
"total_qq_seco_oreado_ingresado": 300.00,
"total_qq_seco_ingresado": 1046.91,
"total_lb_uva_pagada": 100000.00,
"total_qq_seco_uva_pagado": 200.00,
"total_qq_seco_mojado_pagado": 450.00,
"total_qq_seco_oreado_pagado": 250.00,
"total_qq_seco_comprado": 900.00,
"total_lb_uva_deposito": 23456.78,
"total_qq_mojado_deposito": 50.00,
"total_qq_oreado_deposito": 50.00,
"total_qq_seco_deposito": 146.91
}
```
---
### Query 3: `panorama_totales_monetarios`
**Componente:** `TotalesMonetarios.vue`
**Devuelve:** 1 fila con TODOS los valores
```sql
SELECT
-- === INVERSIÓN HASTA LA FECHA ===
COALESCE(SUM(
CASE
WHEN estado = 'pagado' AND tipo = 'uva'
THEN precio * peso_neto
ELSE 0
END
), 0) as inversion_uva,
COALESCE(SUM(
CASE
WHEN estado = 'pagado' AND tipo = 'mojado'
THEN (precio / 2) * peso_seco
ELSE 0
END
), 0) as inversion_mojado,
COALESCE(SUM(
CASE
WHEN estado = 'pagado' AND tipo = 'oreado'
THEN (precio / 2) * peso_seco
ELSE 0
END
), 0) as inversion_oreado,
COALESCE(SUM(
CASE
WHEN estado = 'pagado' AND tipo IN ('uva', 'mojado', 'oreado')
THEN
CASE
WHEN tipo = 'uva' THEN precio * peso_neto
ELSE (precio / 2) * peso_seco
END
ELSE 0
END
), 0) as total_invertido,
-- === PRECIOS PROMEDIO PONDERADOS ===
-- Precio promedio uva por lb
CASE
WHEN SUM(CASE WHEN tipo = 'uva' AND estado = 'pagado' THEN peso_neto ELSE 0 END) > 0
THEN SUM(CASE WHEN tipo = 'uva' AND estado = 'pagado' THEN precio * peso_neto ELSE 0 END) /
SUM(CASE WHEN tipo = 'uva' AND estado = 'pagado' THEN peso_neto ELSE 0 END)
ELSE 0
END as precio_promedio_uva_por_lb,
-- Precio promedio uva por qq (lb * 500)
CASE
WHEN SUM(CASE WHEN tipo = 'uva' AND estado = 'pagado' THEN peso_neto ELSE 0 END) > 0
THEN (SUM(CASE WHEN tipo = 'uva' AND estado = 'pagado' THEN precio * peso_neto ELSE 0 END) /
SUM(CASE WHEN tipo = 'uva' AND estado = 'pagado' THEN peso_neto ELSE 0 END)) * 500
ELSE 0
END as precio_promedio_uva_por_qq,
-- Precio promedio mojado por qq
CASE
WHEN SUM(CASE WHEN tipo = 'mojado' AND estado = 'pagado' THEN peso_seco ELSE 0 END) > 0
THEN SUM(CASE WHEN tipo = 'mojado' AND estado = 'pagado' THEN (precio / 2) * peso_seco ELSE 0 END) /
SUM(CASE WHEN tipo = 'mojado' AND estado = 'pagado' THEN peso_seco ELSE 0 END)
ELSE 0
END as precio_promedio_mojado_por_qq,
-- Precio promedio oreado por qq
CASE
WHEN SUM(CASE WHEN tipo = 'oreado' AND estado = 'pagado' THEN peso_seco ELSE 0 END) > 0
THEN SUM(CASE WHEN tipo = 'oreado' AND estado = 'pagado' THEN (precio / 2) * peso_seco ELSE 0 END) /
SUM(CASE WHEN tipo = 'oreado' AND estado = 'pagado' THEN peso_seco ELSE 0 END)
ELSE 0
END as precio_promedio_oreado_por_qq,
-- Precio promedio global qq seco
CASE
WHEN SUM(CASE WHEN estado = 'pagado' THEN peso_seco ELSE 0 END) > 0
THEN SUM(
CASE
WHEN estado = 'pagado' AND tipo IN ('verde', 'uva')
THEN precio * peso_neto
WHEN estado = 'pagado' AND tipo IN ('oreado', 'mojado')
THEN (precio / 2) * peso_seco
ELSE 0
END
) / SUM(CASE WHEN estado = 'pagado' THEN peso_seco ELSE 0 END)
ELSE 0
END as precio_promedio_qq_seco,
-- === INVERSIÓN RESTANTE A REALIZAR ===
-- Inversión restante uva (precio_promedio_uva_lb * lb_deposito)
(CASE
WHEN SUM(CASE WHEN tipo = 'uva' AND estado = 'pagado' THEN peso_neto ELSE 0 END) > 0
THEN SUM(CASE WHEN tipo = 'uva' AND estado = 'pagado' THEN precio * peso_neto ELSE 0 END) /
SUM(CASE WHEN tipo = 'uva' AND estado = 'pagado' THEN peso_neto ELSE 0 END)
ELSE 0
END) * COALESCE(SUM(CASE WHEN tipo = 'uva' AND estado = 'pendiente' THEN peso_neto ELSE 0 END), 0) as inversion_restante_uva,
-- Inversión restante mojado (precio_promedio_mojado_qq * qq_deposito)
(CASE
WHEN SUM(CASE WHEN tipo = 'mojado' AND estado = 'pagado' THEN peso_seco ELSE 0 END) > 0
THEN SUM(CASE WHEN tipo = 'mojado' AND estado = 'pagado' THEN (precio / 2) * peso_seco ELSE 0 END) /
SUM(CASE WHEN tipo = 'mojado' AND estado = 'pagado' THEN peso_seco ELSE 0 END)
ELSE 0
END) * COALESCE(SUM(CASE WHEN tipo = 'mojado' AND estado = 'pendiente' THEN peso_seco ELSE 0 END), 0) as inversion_restante_mojado,
-- Inversión restante oreado (precio_promedio_oreado_qq * qq_deposito)
(CASE
WHEN SUM(CASE WHEN tipo = 'oreado' AND estado = 'pagado' THEN peso_seco ELSE 0 END) > 0
THEN SUM(CASE WHEN tipo = 'oreado' AND estado = 'pagado' THEN (precio / 2) * peso_seco ELSE 0 END) /
SUM(CASE WHEN tipo = 'oreado' AND estado = 'pagado' THEN peso_seco ELSE 0 END)
ELSE 0
END) * COALESCE(SUM(CASE WHEN tipo = 'oreado' AND estado = 'pendiente' THEN peso_seco ELSE 0 END), 0) as inversion_restante_oreado,
-- Inversión restante esperada (suma de las 3 anteriores)
(CASE
WHEN SUM(CASE WHEN tipo = 'uva' AND estado = 'pagado' THEN peso_neto ELSE 0 END) > 0
THEN SUM(CASE WHEN tipo = 'uva' AND estado = 'pagado' THEN precio * peso_neto ELSE 0 END) /
SUM(CASE WHEN tipo = 'uva' AND estado = 'pagado' THEN peso_neto ELSE 0 END)
ELSE 0
END) * COALESCE(SUM(CASE WHEN tipo = 'uva' AND estado = 'pendiente' THEN peso_neto ELSE 0 END), 0) +
(CASE
WHEN SUM(CASE WHEN tipo = 'mojado' AND estado = 'pagado' THEN peso_seco ELSE 0 END) > 0
THEN SUM(CASE WHEN tipo = 'mojado' AND estado = 'pagado' THEN (precio / 2) * peso_seco ELSE 0 END) /
SUM(CASE WHEN tipo = 'mojado' AND estado = 'pagado' THEN peso_seco ELSE 0 END)
ELSE 0
END) * COALESCE(SUM(CASE WHEN tipo = 'mojado' AND estado = 'pendiente' THEN peso_seco ELSE 0 END), 0) +
(CASE
WHEN SUM(CASE WHEN tipo = 'oreado' AND estado = 'pagado' THEN peso_seco ELSE 0 END) > 0
THEN SUM(CASE WHEN tipo = 'oreado' AND estado = 'pagado' THEN (precio / 2) * peso_seco ELSE 0 END) /
SUM(CASE WHEN tipo = 'oreado' AND estado = 'pagado' THEN peso_seco ELSE 0 END)
ELSE 0
END) * COALESCE(SUM(CASE WHEN tipo = 'oreado' AND estado = 'pendiente' THEN peso_seco ELSE 0 END), 0) as inversion_restante_esperada
FROM vista_detalle_ingresos
WHERE
({{incluir_anulados}} OR (estado != 'anulado' AND fecha_anulado IS NULL))
AND ({{fecha_desde}} IS NULL OR created_at >= {{fecha_desde}})
AND ({{fecha_hasta}} IS NULL OR created_at <= {{fecha_hasta}});
```
**Respuesta esperada:**
```json
{
"inversion_uva": 1234567.89,
"inversion_mojado": 567890.12,
"inversion_oreado": 345678.90,
"total_invertido": 2148136.91,
"precio_promedio_uva_por_lb": 4.50,
"precio_promedio_uva_por_qq": 2250.00,
"precio_promedio_mojado_por_qq": 2500.00,
"precio_promedio_oreado_por_qq": 2300.00,
"precio_promedio_qq_seco": 2400.00,
"inversion_restante_uva": 105555.51,
"inversion_restante_mojado": 125000.00,
"inversion_restante_oreado": 115000.00,
"inversion_restante_esperada": 345555.51
}
```
---
### Query 4: `panorama_totales_verde`
**Componente:** `TotalesVerde.vue`
**Devuelve:** 1 fila con TODOS los valores
```sql
SELECT
-- Total lb neto de verde (pagado + pendiente)
COALESCE(SUM(CASE WHEN tipo = 'verde' THEN peso_neto ELSE 0 END), 0) as total_lb_neto_verde,
-- Precio promedio verde pagado (por lb)
CASE
WHEN SUM(CASE WHEN tipo = 'verde' AND estado = 'pagado' THEN peso_neto ELSE 0 END) > 0
THEN SUM(CASE WHEN tipo = 'verde' AND estado = 'pagado' THEN precio * peso_neto ELSE 0 END) /
SUM(CASE WHEN tipo = 'verde' AND estado = 'pagado' THEN peso_neto ELSE 0 END)
ELSE 0
END as precio_promedio_verde_pagado,
-- Total lb neto verde en depósito (pendiente)
COALESCE(SUM(CASE WHEN tipo = 'verde' AND estado = 'pendiente' THEN peso_neto ELSE 0 END), 0) as total_lb_neto_verde_deposito,
-- Inversión verde hasta la fecha (pagado)
COALESCE(SUM(
CASE
WHEN tipo = 'verde' AND estado = 'pagado'
THEN precio * peso_neto
ELSE 0
END
), 0) as inversion_verde_hasta_fecha,
-- Inversión restante verde (precio_promedio * lb_deposito)
(CASE
WHEN SUM(CASE WHEN tipo = 'verde' AND estado = 'pagado' THEN peso_neto ELSE 0 END) > 0
THEN SUM(CASE WHEN tipo = 'verde' AND estado = 'pagado' THEN precio * peso_neto ELSE 0 END) /
SUM(CASE WHEN tipo = 'verde' AND estado = 'pagado' THEN peso_neto ELSE 0 END)
ELSE 0
END) * COALESCE(SUM(CASE WHEN tipo = 'verde' AND estado = 'pendiente' THEN peso_neto ELSE 0 END), 0) as inversion_restante_verde,
-- Total lb neto comprado verde (solo pagado)
COALESCE(SUM(CASE WHEN tipo = 'verde' AND estado = 'pagado' THEN peso_neto ELSE 0 END), 0) as total_lb_neto_comprado_verde
FROM vista_detalle_ingresos
WHERE
({{incluir_anulados}} OR (estado != 'anulado' AND fecha_anulado IS NULL))
AND ({{fecha_desde}} IS NULL OR created_at >= {{fecha_desde}})
AND ({{fecha_hasta}} IS NULL OR created_at <= {{fecha_hasta}});
```
**Respuesta esperada:**
```json
{
"total_lb_neto_verde": 50000.00,
"precio_promedio_verde_pagado": 10.00,
"total_lb_neto_verde_deposito": 5000.00,
"inversion_verde_hasta_fecha": 450000.00,
"inversion_restante_verde": 50000.00,
"total_lb_neto_comprado_verde": 45000.00
}
```
---
### Query 5: `panorama_secos_vendidos`
**Componente:** `SecosVendidos.vue`
**Devuelve:** 1 fila con TODOS los valores
```sql
SELECT
-- Total qq seco por vender (en depósito)
COALESCE(SUM(CASE WHEN estado = 'pendiente' THEN peso_seco ELSE 0 END), 0) as total_qq_seco_por_vender,
-- Precio de venta promedio por qq (TODO: necesita tabla de ventas, por ahora 0)
0 as precio_venta_promedio_por_qq,
-- Precio de compra promedio por qq
CASE
WHEN SUM(CASE WHEN estado = 'pagado' THEN peso_seco ELSE 0 END) > 0
THEN SUM(
CASE
WHEN estado = 'pagado' AND tipo IN ('verde', 'uva')
THEN precio * peso_neto
WHEN estado = 'pagado' AND tipo IN ('oreado', 'mojado')
THEN (precio / 2) * peso_seco
ELSE 0
END
) / SUM(CASE WHEN estado = 'pagado' THEN peso_seco ELSE 0 END)
ELSE 0
END as precio_compra_promedio_por_qq,
-- Margen de ganancia por qq (venta - compra, por ahora será negativo)
0 - CASE
WHEN SUM(CASE WHEN estado = 'pagado' THEN peso_seco ELSE 0 END) > 0
THEN SUM(
CASE
WHEN estado = 'pagado' AND tipo IN ('verde', 'uva')
THEN precio * peso_neto
WHEN estado = 'pagado' AND tipo IN ('oreado', 'mojado')
THEN (precio / 2) * peso_seco
ELSE 0
END
) / SUM(CASE WHEN estado = 'pagado' THEN peso_seco ELSE 0 END)
ELSE 0
END as margen_ganancia_por_qq
FROM vista_detalle_ingresos
WHERE
({{incluir_anulados}} OR (estado != 'anulado' AND fecha_anulado IS NULL))
AND ({{fecha_desde}} IS NULL OR created_at >= {{fecha_desde}})
AND ({{fecha_hasta}} IS NULL OR created_at <= {{fecha_hasta}});
```
**Respuesta esperada:**
```json
{
"total_qq_seco_por_vender": 146.91,
"precio_venta_promedio_por_qq": 0,
"precio_compra_promedio_por_qq": 2400.00,
"margen_ganancia_por_qq": -2400.00
}
```
---
### Query 6: `panorama_rechazos_subproductos`
**Componente:** `RechazosSubproductos.vue`
**Devuelve:** 6 filas (una por cada tipo de rechazo)
```sql
SELECT
tipo,
COUNT(*) as num_registros,
COALESCE(SUM(cantidad), 0) as total_cantidad,
COALESCE(SUM(total_cobrado), 0) as total_cobrado,
-- Precio promedio
CASE
WHEN SUM(cantidad) > 0 THEN SUM(total_cobrado) / SUM(cantidad)
ELSE 0
END as precio_promedio
FROM rechazos
WHERE
({{incluir_anulados}} OR (estado != 'anulado' AND fecha_anulado IS NULL))
AND ({{fecha_desde}} IS NULL OR created_at >= {{fecha_desde}})
AND ({{fecha_hasta}} IS NULL OR created_at <= {{fecha_hasta}})
GROUP BY tipo
ORDER BY tipo;
```
**Respuesta esperada:**
```json
[
{ "tipo": "chibolita", "num_registros": 25, "total_cantidad": 1250.00, "total_cobrado": 12500.00, "precio_promedio": 10.00 },
{ "tipo": "magalla", "num_registros": 10, "total_cantidad": 50.00, "total_cobrado": 2500.00, "precio_promedio": 50.00 },
{ "tipo": "perico", "num_registros": 30, "total_cantidad": 1500.00, "total_cobrado": 15000.00, "precio_promedio": 10.00 },
{ "tipo": "picadillo", "num_registros": 15, "total_cantidad": 75.00, "total_cobrado": 3750.00, "precio_promedio": 50.00 },
{ "tipo": "pinta", "num_registros": 12, "total_cantidad": 600.00, "total_cobrado": 6000.00, "precio_promedio": 10.00 },
{ "tipo": "vano", "num_registros": 20, "total_cantidad": 100.00, "total_cobrado": 5000.00, "precio_promedio": 50.00 }
]
```
---
## 📈 QUERIES ADICIONALES (GRÁFICAS Y SERIES)
### Query 7: `panorama_serie_temporal_diaria`
**Componente:** `GraficaSerieIngresos.vue`, `GraficaSerieInversion.vue`
**Devuelve:** Múltiples filas (una por día/tipo/estado)
```sql
SELECT
DATE(created_at) as fecha,
tipo,
estado,
COUNT(*) as num_ingresos,
COALESCE(SUM(peso_seco), 0) as total_peso_seco_dia,
COALESCE(SUM(peso_neto), 0) as total_peso_neto_dia,
COALESCE(SUM(
CASE
WHEN tipo IN ('verde', 'uva') THEN precio * peso_neto
WHEN tipo IN ('oreado', 'mojado') THEN (precio / 2) * peso_seco
ELSE 0
END
), 0) as total_inversion_dia
FROM vista_detalle_ingresos
WHERE
({{incluir_anulados}} OR (estado != 'anulado' AND fecha_anulado IS NULL))
AND ({{fecha_desde}} IS NULL OR created_at >= {{fecha_desde}})
AND ({{fecha_hasta}} IS NULL OR created_at <= {{fecha_hasta}})
GROUP BY DATE(created_at), tipo, estado
ORDER BY fecha, tipo, estado;
```
---
### Query 8: `panorama_top_clientes`
**Componente:** `TopClientes.vue`
**Devuelve:** Múltiples filas (top 20 clientes por inversión)
```sql
SELECT
cliente_id,
COUNT(*) as num_ingresos,
COALESCE(SUM(peso_seco), 0) as total_qq_seco,
COALESCE(SUM(peso_neto), 0) as total_lb_neto,
COALESCE(SUM(
CASE
WHEN tipo IN ('verde', 'uva') THEN precio * peso_neto
WHEN tipo IN ('oreado', 'mojado') THEN (precio / 2) * peso_seco
ELSE 0
END
), 0) as total_pagado
FROM vista_detalle_ingresos
WHERE
estado = 'pagado'
AND ({{incluir_anulados}} OR (estado != 'anulado' AND fecha_anulado IS NULL))
AND ({{fecha_desde}} IS NULL OR created_at >= {{fecha_desde}})
AND ({{fecha_hasta}} IS NULL OR created_at <= {{fecha_hasta}})
GROUP BY cliente_id
ORDER BY total_pagado DESC
LIMIT 20;
```
---
### Query 9: `panorama_conteo_registros`
**Propósito:** Para el footer que dice "Registros considerados: Ingresos X/Y · Rechazos A/B"
**Devuelve:** 1 fila con conteos
```sql
SELECT
-- Ingresos filtrados
(SELECT COUNT(*)
FROM vista_detalle_ingresos
WHERE
({{incluir_anulados}} OR (estado != 'anulado' AND fecha_anulado IS NULL))
AND ({{fecha_desde}} IS NULL OR created_at >= {{fecha_desde}})
AND ({{fecha_hasta}} IS NULL OR created_at <= {{fecha_hasta}})
) as ingresos_filtrados,
-- Total ingresos (sin filtros de fecha/anulados)
(SELECT COUNT(*) FROM vista_detalle_ingresos) as ingresos_total,
-- Rechazos filtrados
(SELECT COUNT(*)
FROM rechazos
WHERE
({{incluir_anulados}} OR (estado != 'anulado' AND fecha_anulado IS NULL))
AND ({{fecha_desde}} IS NULL OR created_at >= {{fecha_desde}})
AND ({{fecha_hasta}} IS NULL OR created_at <= {{fecha_hasta}})
) as rechazos_filtrados,
-- Total rechazos
(SELECT COUNT(*) FROM rechazos) as rechazos_total;
```
**Respuesta esperada:**
```json
{
"ingresos_filtrados": 230,
"ingresos_total": 350,
"rechazos_filtrados": 112,
"rechazos_total": 150
}
```
---
## 📊 RESUMEN DE QUERIES
| # | Nombre | Componente | Tipo de respuesta |
|---|--------|------------|-------------------|
| 1 | `panorama_totales_financieros_principales` | Card principal | 1 fila, 3 campos |
| 2 | `panorama_totales_ingreso_compra` | TotalesIngresoCompra | 1 fila, 14 campos |
| 3 | `panorama_totales_monetarios` | TotalesMonetarios | 1 fila, 14 campos |
| 4 | `panorama_totales_verde` | TotalesVerde | 1 fila, 6 campos |
| 5 | `panorama_secos_vendidos` | SecosVendidos | 1 fila, 4 campos |
| 6 | `panorama_rechazos_subproductos` | RechazosSubproductos | 6 filas (por tipo) |
| 7 | `panorama_serie_temporal_diaria` | Gráficas | Múltiples filas |
| 8 | `panorama_top_clientes` | TopClientes | 20 filas max |
| 9 | `panorama_conteo_registros` | Footer de filtros | 1 fila, 4 campos |
**Total: 9 Queries**
---
## 🚀 INTEGRACIÓN EN VUE
```typescript
// panorama.vue
const metrics = ref({
financieros: null,
ingresoCompra: null,
monetarios: null,
verde: null,
secosVendidos: null,
rechazos: [],
serieTemporal: [],
topClientes: [],
conteos: null
})
async function loadAllData() {
const params = {
fecha_desde: fechaDesde.value,
fecha_hasta: fechaHasta.value,
incluir_anulados: includeAnulados.value
}
const [
financieros,
ingresoCompra,
monetarios,
verde,
secosVendidos,
rechazos,
serieTemporal,
topClientes,
conteos
] = await Promise.all([
$fetch('/api/metabase/question/1', { query: params }),
$fetch('/api/metabase/question/2', { query: params }),
$fetch('/api/metabase/question/3', { query: params }),
$fetch('/api/metabase/question/4', { query: params }),
$fetch('/api/metabase/question/5', { query: params }),
$fetch('/api/metabase/question/6', { query: params }),
$fetch('/api/metabase/question/7', { query: params }),
$fetch('/api/metabase/question/8', { query: params }),
$fetch('/api/metabase/question/9', { query: params })
])
// Asignar directamente, SIN procesamiento
metrics.value.financieros = financieros.data.rows[0]
metrics.value.ingresoCompra = ingresoCompra.data.rows[0]
metrics.value.monetarios = monetarios.data.rows[0]
metrics.value.verde = verde.data.rows[0]
metrics.value.secosVendidos = secosVendidos.data.rows[0]
metrics.value.rechazos = rechazos.data.rows
metrics.value.serieTemporal = serieTemporal.data.rows
metrics.value.topClientes = topClientes.data.rows
metrics.value.conteos = conteos.data.rows[0]
}
```
```vue
<!-- En el componente TotalesMonetarios.vue -->
<template>
<UCard>
<MetricCard
label="Inversión en Uva"
:value="formatCurrency(metrics.inversion_uva)"
/>
<!-- etc... -->
</UCard>
</template>
<script setup>
defineProps(['metrics']) // Recibe el objeto directamente de la query
</script>
```
---
## ⚠️ NOTAS IMPORTANTES
1. **Sin composables de métricas**: Los composables `useIngresosMetrics` y `useRechazosMetrics` se eliminan completamente.
2. **Metabase hace TODO**: Cálculos, agregaciones, promedios ponderados, todo en SQL.
3. **Vue solo renderiza**: Los componentes reciben props con los valores ya calculados.
4. **Estructura de respuesta de Metabase**:
```javascript
{
data: {
rows: [...], // Array de filas
cols: [...], // Metadata de columnas
rows_truncated: 1000
}
}
```
5. **Optimización**: Las 9 queries se ejecutan en **paralelo** con `Promise.all()`.
6. **Filtros reactivos**: Cuando cambian los filtros, se vuelven a ejecutar las queries.
---
**Documento creado:** 2025-10-14
**Autor:** Claude Code
**Proyecto:** Analítica Núcleo - Panorama Facturador

583
nuxt4-app/app/pages/informe-ingresos.vue
View File

@@ -1,256 +1,443 @@
<template>
<div class="flex flex-col gap-8">
<!-- 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 ingresos de café
</p>
</div>
<div class="flex items-center gap-2">
<UCheckbox
v-model="filters.incluir_anulados"
label="Incluir anulados"
/>
</div>
</div>
</div>
</template>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Fecha Desde -->
<div>
<label class="block text-sm font-medium mb-1 text-[var(--brand-text)]">Fecha Desde</label>
<input
v-model="filters.fecha_desde"
type="date"
class="w-full px-3 py-2 border rounded-md bg-[var(--brand-bg)] border-[var(--brand-border)] text-[var(--brand-text)]"
/>
</div>
<!-- Fecha Hasta -->
<div>
<label class="block text-sm font-medium mb-1 text-[var(--brand-text)]">Fecha Hasta</label>
<input
v-model="filters.fecha_hasta"
type="date"
class="w-full px-3 py-2 border rounded-md bg-[var(--brand-bg)] border-[var(--brand-border)] text-[var(--brand-text)]"
/>
</div>
<!-- Granularidad -->
<div>
<label class="block text-sm font-medium mb-1 text-[var(--brand-text)]">Granularidad</label>
<select
v-model="filters.granularidad"
class="w-full px-3 py-2 border rounded-md bg-[var(--brand-bg)] border-[var(--brand-border)] text-[var(--brand-text)]"
>
<option value="dia">Día</option>
<option value="semana">Semana</option>
<option value="mes">Mes</option>
</select>
<!-- 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-[#c08040] border-t-transparent align-middle" aria-hidden="true" />
<span class="text-sm uppercase tracking-[0.3em]">Cargando datos...</span>
</div>
</div>
</UCard>
<!-- 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 -->
<!-- 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>
<!-- 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
</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"
/>
<!-- Filtros Avanzados -->
<div class="mt-6 space-y-4">
<h3 class="text-sm font-semibold text-[var(--brand-text)]">Filtros Avanzados</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Tipos de Café -->
<div>
<label class="block text-sm font-medium mb-1">Tipos de Café</label>
<label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">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" />
<UCheckbox v-model="filterTipos.uva" label="Uva" />
<UCheckbox v-model="filterTipos.mojado" label="Mojado" />
<UCheckbox v-model="filterTipos.oreado" label="Oreado" />
<UCheckbox v-model="filterTipos.verde" label="Verde" />
</div>
</div>
<!-- Estados -->
<div>
<label class="block text-sm font-medium mb-1">Estados</label>
<label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Estados</label>
<div class="space-y-2">
<UCheckbox v-model="estadosSeleccionados.pagado" label="Pagado" />
<UCheckbox v-model="estadosSeleccionados.pendiente" label="Pendiente" />
<UCheckbox v-model="filterEstados.pagado" label="Pagado" />
<UCheckbox v-model="filterEstados.pendiente" label="Pendiente" />
</div>
</div>
</div>
</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)]">
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-file-text" 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)]">
Informe de Ingresos
</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 el informe detallado de ingresos
</p>
</div>
</div>
</UCard>
</template>
<!-- Main Content -->
<template v-else-if="data">
<!-- 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">Filtros y Configuraciones</h2>
<p class="text-xs text-[var(--brand-text-muted)] mt-1">
Aplicados a <code>created_at</code> de ingresos
</p>
</div>
<div class="flex items-center gap-2">
<UCheckbox v-model="includeAnulados" label="Incluir anulados" @update:model-value="onToggleAnulados" />
</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
<!-- 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="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"
/>
<!-- Filtros Avanzados -->
<div class="mt-6 space-y-4">
<h3 class="text-sm font-semibold text-[var(--brand-text)]">Filtros Avanzados</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Tipos de Café -->
<div>
<label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Tipos de Café</label>
<div class="space-y-2">
<UCheckbox v-model="filterTipos.uva" label="Uva" />
<UCheckbox v-model="filterTipos.mojado" label="Mojado" />
<UCheckbox v-model="filterTipos.oreado" label="Oreado" />
<UCheckbox v-model="filterTipos.verde" label="Verde" />
</div>
</div>
<!-- Estados -->
<div>
<label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Estados</label>
<div class="space-y-2">
<UCheckbox v-model="filterEstados.pagado" label="Pagado" />
<UCheckbox v-model="filterEstados.pendiente" label="Pendiente" />
</div>
</div>
</div>
</template>
</UAccordion>
<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)]">
Filtros aplicados al informe de ingresos
</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="applyFilters"
>
<template #leading>
<UIcon name="i-lucide-refresh-cw" :class="{ 'animate-spin': loading }" />
</template>
Actualizar
</UButton>
<!-- Nota sobre filtros futuros -->
<p class="text-xs text-[var(--brand-text-muted)] italic">
Los filtros de clientes, ubicaciones y calidades se agregarán próximamente
</p>
</div>
</template>
</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="flex flex-col gap-8">
<!-- Totales Monetarios -->
<TotalesMonetarios v-if="pageSections.totalesCafe" :data="data.totalesMonetarios" />
<!-- Totales Ingreso y Compra -->
<TotalesIngresoCompra v-if="pageSections.totalesCafe" :data="data.totalesIngresoCompra" />
<!-- Totales Verde -->
<TotalesVerde v-if="pageSections.totalesVerde" :data="data.totalesVerde" />
<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 }} · Registros filtrados: {{ data.contadores.ingresos_filtrados || 0 }}/{{ data.contadores.total_ingresos || 0 }}
</div>
<UButton
:loading="loading"
:disabled="loading"
: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-[#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>
<!-- Contadores -->
<UCard v-if="data.contadores">
<UCard v-if="data.contadores" class="brand-card border border-transparent">
<template #header>
<h3 class="text-lg font-semibold">Estadísticas</h3>
<h2 class="text-xl font-bold brand-section-title">Estadísticas del Filtro</h2>
</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 class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
<div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Ingresos Filtrados</div>
<div class="text-2xl font-bold text-[var(--brand-primary)]">
{{ data.contadores.ingresos_filtrados || 0 }}
</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 class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
<div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Total Ingresos</div>
<div class="text-2xl font-bold text-[var(--brand-text)]">
{{ data.contadores.total_ingresos || 0 }}
</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 class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
<div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Clientes Activos</div>
<div class="text-2xl font-bold text-[var(--brand-primary)]">
{{ data.contadores.clientes_con_ingresos_filtrados || 0 }}
</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 class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
<div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Total Clientes</div>
<div class="text-2xl font-bold text-[var(--brand-text)]">
{{ data.contadores.total_clientes || 0 }}
</div>
</div>
</div>
<template #footer>
<div class="text-xs text-[var(--brand-text-muted)]">
Última actualización: {{ lastUpdated }}
</div>
</template>
</UCard>
<!-- Secciones de Totales -->
<TotalesIngresoCompra v-if="pageSections.totalesCafe" :data="data.totalesIngresoCompra" />
<TotalesMonetarios v-if="pageSections.totalesCafe" :data="data.totalesMonetarios" />
<TotalesVerde v-if="pageSections.totalesVerde" :data="data.totalesVerde" />
<!-- Placeholder para tablas y gráficas futuras -->
<UCard v-if="pageSections.tablaIngresos" class="brand-card border border-transparent">
<template #header>
<h2 class="text-xl font-bold brand-section-title">Lista de Ingresos</h2>
</template>
<div class="py-8 text-center text-sm text-[var(--brand-text-muted)]">
<p>Tabla detallada de ingresos próximamente</p>
<p class="mt-2">{{ data.listaIngresos?.length || 0 }} registros disponibles</p>
</div>
</UCard>
<!-- Tabla de Ingresos (placeholder) -->
<UCard v-if="pageSections.tablaIngresos && data.listaIngresos?.length > 0">
<UCard v-if="pageSections.top10Clientes" class="brand-card border border-transparent">
<template #header>
<h3 class="text-lg font-semibold">Lista de Ingresos ({{ data.listaIngresos.length }})</h3>
<h2 class="text-xl font-bold brand-section-title">Top 10 Clientes</h2>
</template>
<div class="text-sm text-gray-500">
Tabla de ingresos se implementará próximamente
<div class="py-8 text-center text-sm text-[var(--brand-text-muted)]">
<p>Ranking de clientes próximamente</p>
<p class="mt-2">{{ data.listaClientes?.length || 0 }} clientes disponibles</p>
</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 v-if="pageSections.graficas" class="space-y-6">
<UCard class="brand-card border border-transparent">
<template #header>
<h2 class="text-xl font-bold brand-section-title">Gráficas y Análisis</h2>
</template>
<div class="py-8 text-center text-sm text-[var(--brand-text-muted)]">
<p>Gráficas de series temporales próximamente</p>
<p class="mt-2">{{ data.serieTemporal?.length || 0 }} puntos de datos disponibles</p>
</div>
</UCard>
</div>
</template>
</div>
</template>
<script setup lang="ts">
import { useInformeLayout } from '~/composables/useInformeLayout'
// Define page metadata
definePageMeta({
layout: 'informe',
title: 'Informe Ingresos'
})
// Get page sections from layout
const { pageSections } = useInformeLayout()
// Reactive state
const data = ref<any>(null)
const loading = ref(false)
const error = ref<string | null>(null)
const data = ref<any>(null)
const lastUpdated = ref<string>('')
// Filtros
const filters = ref({
fecha_desde: null as string | null,
fecha_hasta: null as string | null,
incluir_anulados: false,
granularidad: 'dia'
})
// Filtros básicos
const includeAnulados = ref(false)
// Filtros avanzados con checkboxes
const tiposSeleccionados = ref({
type PresetValue =
| '' | 'custom' | 'hoy' | 'semana' | 'mes' | 'ytd'
| 'cosecha-20-21' | 'cosecha-21-22' | 'cosecha-22-23'
| 'cosecha-23-24' | 'cosecha-24-25' | 'cosecha-25-26'
const selectedPreset = ref<PresetValue>('cosecha-25-26')
const fechaDesde = ref<string | null>(null)
const fechaHasta = ref<string | null>(null)
// Filtros avanzados - usando checkboxes separados
const filterTipos = ref({
uva: false,
mojado: false,
oreado: false,
verde: false
})
const estadosSeleccionados = ref({
const filterEstados = ref({
pagado: false,
pendiente: false
})
// Computed para convertir checkboxes a arrays
// Convertir checkboxes a arrays para el API
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')
if (filterTipos.value.uva) tipos.push('uva')
if (filterTipos.value.mojado) tipos.push('mojado')
if (filterTipos.value.oreado) tipos.push('oreado')
if (filterTipos.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')
if (filterEstados.value.pagado) estados.push('pagado')
if (filterEstados.value.pendiente) estados.push('pendiente')
return estados
})
// Función para cargar datos
// Filtros aplicados (los que se usaron en la última carga de datos)
const appliedFilters = ref<{
fechaDesde: string | null
fechaHasta: string | null
includeAnulados: boolean
tipos: string[]
estados: string[]
} | null>(null)
// Computed
const rangoLegible = computed(() => {
if (!fechaDesde.value && !fechaHasta.value) return 'Sin filtro de fecha'
const f = fechaDesde.value ?? '—'
const t = fechaHasta.value ?? '—'
return `${f} → ${t}`
})
// 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
return (
fechaDesde.value !== appliedFilters.value.fechaDesde ||
fechaHasta.value !== appliedFilters.value.fechaHasta ||
includeAnulados.value !== appliedFilters.value.includeAnulados ||
JSON.stringify(tiposArray.value) !== JSON.stringify(appliedFilters.value.tipos) ||
JSON.stringify(estadosArray.value) !== JSON.stringify(appliedFilters.value.estados)
)
})
// Methods
async function loadData() {
// Prevenir múltiples peticiones simultáneas
if (loading.value) {
console.warn('[Informe] Ya hay una petición en proceso, ignorando nueva solicitud')
return
}
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,
fecha_desde: fechaDesde.value,
fecha_hasta: fechaHasta.value,
incluir_anulados: includeAnulados.value,
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
granularidad: 'dia' // Default granularity
}
console.log('[Informe] Cargando datos con filtros:', payload)
@@ -260,22 +447,68 @@ async function loadData() {
})
data.value = result
lastUpdated.value = new Date().toLocaleString('es-ES', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
})
// Guardar los filtros aplicados
appliedFilters.value = {
fechaDesde: fechaDesde.value,
fechaHasta: fechaHasta.value,
includeAnulados: includeAnulados.value,
tipos: [...tiposArray.value],
estados: [...estadosArray.value]
}
console.log('[Informe] Datos cargados:', result)
} catch (e: any) {
error.value = e.message || 'Error al cargar datos del informe'
console.error('[Informe] Error:', e)
} catch (err: any) {
error.value = err.message || 'Error al cargar datos del informe'
console.error('[Informe] Error loading data:', err)
} finally {
loading.value = false
}
}
// Función para aplicar filtros
function applyFilters() {
loadData()
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 financieros y métricas.\n\n' +
'¿Está seguro de que desea continuar?'
)
if (!confirmed) {
// Si cancela, revertir el cambio
includeAnulados.value = false
return
}
}
// NO recargar automáticamente - el usuario debe hacer clic en "Actualizar"
}
// Cargar datos al montar
function onUpdatePreset(value: PresetValue) {
selectedPreset.value = value
}
function onUpdateFechaDesde(value: string | null) {
fechaDesde.value = value
}
function onUpdateFechaHasta(value: string | null) {
fechaHasta.value = value
}
// Inicializar preset por defecto sin cargar datos
onMounted(() => {
loadData()
// Default preset: cosecha 25-26
selectedPreset.value = 'cosecha-25-26'
// NO cargar datos automáticamente - el usuario debe hacer clic en "Actualizar"
})
</script>