ETAPA — Widgets de Mirada Empresa (frontend del dashboard v3)

1. Objetivo

Construir el frontend del dashboard de Mirada Empresa: la estructura de tres miradas (Empresa funcional, País/Humana como "próximamente") y los widgets que consumen las RPCs rpc_me_* ya implementadas y verificadas contra datos reales. El cliente ve las métricas.

2. Contexto previo

Las RPCs de Mirada Empresa están hechas y VERIFICADAS contra 50 respuestas reales (migración 20260625000002_dashboard_mirada_empresa.sql): E1-E10 + estrella "Talento en riesgo".
Contrato de cada RPC (shapes de retorno): docs/dashboard/SPEC_MIRADA_EMPRESA.md.
Aspecto objetivo: docs/dashboard/dashboard_tres_miradas_mockup.html.
Patrón de widget existente a REUTILIZAR (no reinventar):
- components/dashboard/widget-shell.tsx — estados loading/ok/suppressed/error.
- hooks useEffect + queries.X(surveyId, filters) (lib/dashboard-queries.ts).
- isSuppressed() type guard (lib/dashboard-types.ts).
- Gráficos en SVG/CSS a mano (db-bar-, db-donut-, db-kpi-*) — SIN librería de charts.
- Tema oscuro db-*, acento único teal #43BBC8 (--color-re-teal).
Tres archivos de plomería a extender (mapeos mecánicos): lib/dashboard-types.ts (tipos de retorno), lib/dashboard-queries.ts (entradas queries), app/api/dashboard/[widget]/route.ts (RPC_MAP con los rpc_me_*).

3. DECISIONES YA TOMADAS — no consultar de nuevo

Opción A: reemplazar el dashboard actual por la estructura de tres miradas. Los widgets v2 rotos (que consumen RPCs v2 inexistentes en v3) se RETIRAN. País y Humana = placeholder "Disponible próximamente".
Reutilizar WidgetShell, el patrón de hooks, isSuppressed, y los gráficos SVG/CSS a mano.
NO traer librería de charts nueva — replicar el patrón existente.
Mantener el tema db-* y el teal como acento.
NO tocar las RPCs (están verificadas). Solo el frontend + la plomería de tipos/queries/route.
Mirada Empresa NO muestra datos sensibles (ya garantizado en las RPCs; el frontend solo refleja lo que viene).

4. Tareas

4.1 Plomería (mecánica)

lib/dashboard-types.ts: tipos de retorno de cada rpc_me_* según los shapes de la SPEC.
lib/dashboard-queries.ts: una entrada por métrica (E1-E10 + estrella).
app/api/dashboard/[widget]/route.ts: agregar los rpc_me_* al RPC_MAP.

4.2 Estructura de tres miradas

Tabs/secciones Empresa | País | Humana (como el mockup).
Empresa: funcional. País/Humana: placeholder "Disponible próximamente" (no widgets vacíos).
El selector de survey/p_all y los filtros del sidebar siguen funcionando como hoy.

4.3 Widgets de Mirada Empresa

Implementar los widgets del NÚCLEO primero (los que el cliente necesita):

Talento en riesgo (estrella) — KPI destacado, métrica compuesta.
E1 Prevalencia de cuidadores — KPI.
E6 Punto ciego organizacional — el widget de contraste (carga real vs apoyo percibido), dos barras enfrentadas como en el mockup.
E2/E3/E4 Señales de impacto — barras (riesgo, ausentismo, presentismo).
E7 Apoyos demandados — barras horizontales (igual patrón que apoyos-bar viejo). Después, si el alcance lo permite, los [SEC]: E5, E8, E9 (segmentación), E10.

4.4 Manejo de estados

Cada widget usa WidgetShell. Estado suppressed (k<5) muestra el mensaje estándar 🔒.
Las métricas que segmentan (E7, E9) suprimen filas individuales con n<5 (las RPCs ya lo hacen; el widget solo no muestra lo que no viene).

5. Entregables (DoD)

Estructura de tres miradas; Empresa funcional, País/Humana placeholder.
Widgets del núcleo consumiendo las RPCs reales vía la plomería.
Widgets v2 rotos retirados.
WidgetShell y patrón existente reutilizados (no librería nueva, no reinvención).
Estados loading/ok/suppressed manejados.
Build sin errores.
Validación visual del director contra el mockup + datos reales sembrados.

6. Qué reportar

Verificado:
- Estructura 3 miradas ✓ — Empresa funcional, País/Humana placeholder
- Widgets implementados: [lista con qué RPC consume cada uno]
- Plomería: tipos + queries + RPC_MAP extendidos ✓
- Widgets v2 retirados: [lista]
- WidgetShell reutilizado ✓ / sin librería de charts nueva ✓
- Build: [resultado]
- Descripción visual: cómo se ve cada widget núcleo con datos
Asumido / decisiones de diseño:
- [lo que haya]

Reporte con datos concretos (C.4). Para validación visual necesito ver el dashboard con datos: indicá cómo levantarlo (el seed_prueba_50.sql siembra los datos).

7. Qué NO hacer

❌ No tocar las RPCs (verificadas).
❌ No traer librería de charts — SVG/CSS a mano como el resto.
❌ No mostrar datos sensibles (3.x, 4.2, 4.3).
❌ No implementar widgets de País/Humana (placeholder solo).
❌ No aplicar a producción sin validación visual.
❌ No tocar v2.1.0-stable, el motor, el seed del formulario.

8. Versionado

feat(dashboard): widgets de Mirada Empresa + estructura tres miradas [dashboard]

Reemplaza el dashboard v2 (widgets rotos contra v3) por la estructura de tres
miradas. Mirada Empresa funcional: talento en riesgo, prevalencia, punto ciego,
señales de impacto, apoyos demandados. País/Humana como placeholder. Reutiliza
WidgetShell y el patrón SVG/CSS existente. Consume las rpc_me_* verificadas.

5.3 KiB Raw Blame History