Refactor: reactivar página Informe de Ingresos con arquitectura Metabase

- 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
2025-10-29 18:20:29 -06:00
parent f8ae9e44e7
commit 8caf8a5e10
3 changed files with 408 additions and 1595 deletions
--- a/METABASE_QUERIES_INFORME_INGRESOS.md
+++ b/METABASE_QUERIES_INFORME_INGRESOS.md
@@ -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
--- a/METABASE_QUERIES_PANORAMA.md
+++ b/METABASE_QUERIES_PANORAMA.md
@@ -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
--- a/nuxt4-app/app/pages/informe-ingresos.vue
+++ b/nuxt4-app/app/pages/informe-ingresos.vue
@@ -1,6 +1,26 @@
 <template>
  <div class="flex flex-col gap-8">
-    <!-- Filtros -->
+    <!-- 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>
    <!-- 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">
@@ -8,97 +28,73 @@
              <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é
+                  Aplicados a <code>created_at</code> de ingresos
                </p>
              </div>
              <div class="flex items-center gap-2">
-              <UCheckbox
+                <UCheckbox v-model="includeAnulados" label="Incluir anulados" @update:model-value="onToggleAnulados" />
-                v-model="filters.incluir_anulados"
+              </div>
-                label="Incluir anulados"
+            </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>
          </div>
        </div>
        </template>
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <DateRangeSelector
-        <!-- Fecha Desde -->
+          :selected-preset="selectedPreset"
-        <div>
+          :fecha-desde="fechaDesde"
-          <label class="block text-sm font-medium mb-1 text-[var(--brand-text)]">Fecha Desde</label>
+          :fecha-hasta="fechaHasta"
-          <input
+          @update:selected-preset="onUpdatePreset"
-            v-model="filters.fecha_desde"
+          @update:fecha-desde="onUpdateFechaDesde"
-            type="date"
+          @update:fecha-hasta="onUpdateFechaHasta"
            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 -->
+        <!-- Filtros Avanzados -->
-        <div>
+        <div class="mt-6 space-y-4">
-          <label class="block text-sm font-medium mb-1 text-[var(--brand-text)]">Fecha Hasta</label>
+          <h3 class="text-sm font-semibold text-[var(--brand-text)]">Filtros Avanzados</h3>
          <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 class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- Tipos de Café -->
            <div>
-          <label class="block text-sm font-medium mb-1 text-[var(--brand-text)]">Granularidad</label>
+              <label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Tipos de Café</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>
        </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="filterTipos.uva" label="Uva" />
-                <UCheckbox v-model="tiposSeleccionados.mojado" label="Mojado" />
+                <UCheckbox v-model="filterTipos.mojado" label="Mojado" />
-                <UCheckbox v-model="tiposSeleccionados.oreado" label="Oreado" />
+                <UCheckbox v-model="filterTipos.oreado" label="Oreado" />
-                <UCheckbox v-model="tiposSeleccionados.verde" label="Verde" />
+                <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="filterEstados.pagado" label="Pagado" />
-                <UCheckbox v-model="estadosSeleccionados.pendiente" label="Pendiente" />
+                <UCheckbox v-model="filterEstados.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>
        <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
+              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="applyFilters"
+              @click="loadData"
            >
              <template #leading>
                <UIcon name="i-lucide-refresh-cw" :class="{ 'animate-spin': loading }" />
@@ -109,148 +105,339 @@
        </template>
      </UCard>
-    <!-- Error Display -->
+      <!-- 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>
            <!-- Alerta de cambios pendientes -->
            <UAlert
-      v-if="error"
+              v-if="hasPendingChanges"
-      color="error"
+              color="warning"
              variant="soft"
-      :title="error"
+              class="py-2"
-      :close-button="{ icon: 'i-heroicons-x-mark-20-solid', color: 'error', variant: 'link' }"
+            >
-      @close="error = null"
+              <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"
        />
-    <!-- Loading State -->
+        <!-- Filtros Avanzados -->
-    <div v-if="loading" class="flex justify-center py-12">
+        <div class="mt-6 space-y-4">
-      <UIcon name="i-lucide-loader-2" class="w-8 h-8 animate-spin" />
+          <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>
-    <!-- Content -->
+            <!-- Estados -->
-    <div v-else-if="data" class="flex flex-col gap-8">
+            <div>
-      <!-- Totales Monetarios -->
+              <label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Estados</label>
-      <TotalesMonetarios v-if="pageSections.totalesCafe" :data="data.totalesMonetarios" />
+              <div class="space-y-2">
                <UCheckbox v-model="filterEstados.pagado" label="Pagado" />
                <UCheckbox v-model="filterEstados.pendiente" label="Pendiente" />
              </div>
            </div>
          </div>
-      <!-- Totales Ingreso y Compra -->
+          <!-- Nota sobre filtros futuros -->
-      <TotalesIngresoCompra v-if="pageSections.totalesCafe" :data="data.totalesIngresoCompra" />
+          <p class="text-xs text-[var(--brand-text-muted)] italic">
            Los filtros de clientes, ubicaciones y calidades se agregarán próximamente
          </p>
        </div>
-      <!-- Totales Verde -->
+        <template #footer>
-      <TotalesVerde v-if="pageSections.totalesVerde" :data="data.totalesVerde" />
+          <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="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
-            <div class="text-2xl font-bold text-primary">{{ data.contadores.ingresos_filtrados }}</div>
+            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Ingresos Filtrados</div>
-            <div class="text-sm text-gray-600 dark:text-gray-400">Ingresos Filtrados</div>
+            <div class="text-2xl font-bold text-[var(--brand-primary)]">
              {{ data.contadores.ingresos_filtrados || 0 }}
            </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="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
-            <div class="text-2xl font-bold text-primary">{{ data.contadores.clientes_con_ingresos_filtrados }}</div>
+            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Total Ingresos</div>
-            <div class="text-sm text-gray-600 dark:text-gray-400">Clientes Activos</div>
+            <div class="text-2xl font-bold text-[var(--brand-text)]">
              {{ data.contadores.total_ingresos || 0 }}
            </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 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="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.top10Clientes" class="brand-card border border-transparent">
      <UCard v-if="pageSections.tablaIngresos && data.listaIngresos?.length > 0">
        <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">
+        <div class="py-8 text-center text-sm text-[var(--brand-text-muted)]">
-          Tabla de ingresos se implementará próximamente
+          <p>Ranking de clientes próximamente</p>
          <p class="mt-2">{{ data.listaClientes?.length || 0 }} clientes disponibles</p>
        </div>
      </UCard>
-      <!-- Top 10 Clientes (placeholder) -->
+      <div v-if="pageSections.graficas" class="space-y-6">
-      <UCard v-if="pageSections.top10Clientes && data.listaClientes?.length > 0">
+        <UCard class="brand-card border border-transparent">
          <template #header>
-          <h3 class="text-lg font-semibold">Top Clientes ({{ data.listaClientes.length }})</h3>
+            <h2 class="text-xl font-bold brand-section-title">Gráficas y Análisis</h2>
          </template>
-        <div class="text-sm text-gray-500">
+          <div class="py-8 text-center text-sm text-[var(--brand-text-muted)]">
-          Ranking de clientes se implementará próximamente
+            <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
+// Filtros básicos
-const filters = ref({
+const includeAnulados = ref(false)
  fecha_desde: null as string | null,
  fecha_hasta: null as string | null,
  incluir_anulados: false,
  granularidad: 'dia'
 })
-// Filtros avanzados con checkboxes
+type PresetValue =
-const tiposSeleccionados = ref({
+  | '' | '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 (filterTipos.value.uva) tipos.push('uva')
-  if (tiposSeleccionados.value.mojado) tipos.push('mojado')
+  if (filterTipos.value.mojado) tipos.push('mojado')
-  if (tiposSeleccionados.value.oreado) tipos.push('oreado')
+  if (filterTipos.value.oreado) tipos.push('oreado')
-  if (tiposSeleccionados.value.verde) tipos.push('verde')
+  if (filterTipos.value.verde) tipos.push('verde')
  return tipos
 })
 const estadosArray = computed(() => {
  const estados: string[] = []
-  if (estadosSeleccionados.value.pagado) estados.push('pagado')
+  if (filterEstados.value.pagado) estados.push('pagado')
-  if (estadosSeleccionados.value.pendiente) estados.push('pendiente')
+  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_desde: fechaDesde.value,
-      fecha_hasta: filters.value.fecha_hasta,
+      fecha_hasta: fechaHasta.value,
-      incluir_anulados: filters.value.incluir_anulados,
+      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) {
+  } catch (err: any) {
-    error.value = e.message || 'Error al cargar datos del informe'
+    error.value = err.message || 'Error al cargar datos del informe'
-    console.error('[Informe] Error:', e)
+    console.error('[Informe] Error loading data:', err)
  } finally {
    loading.value = false
  }
 }
-// Función para aplicar filtros
+async function onToggleAnulados(newValue: boolean | 'indeterminate') {
-function applyFilters() {
+  if (newValue === true) {
-  loadData()
+    // 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>