Etapa completada (local) — widgets de Mirada Empresa

sprints/sprint-4/ETAPA_WIDGETS_MIRADA_EMPRESA_PROMPT.md

@@ -0,0 +1,100 @@
+# 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.
+```