# 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.
```