127 lines
6.0 KiB
Markdown
127 lines
6.0 KiB
Markdown
# ETAPA 2D — Dashboard: títulos limpios, subtítulos descriptivos y fix de KPI cards
|
||
|
||
## 1. Objetivo
|
||
Pulir el lenguaje visual del dashboard alineándolo al patrón del equipo (Fundación):
|
||
**título limpio sin emojis + subtítulo descriptivo con código de pregunta**.
|
||
Además, arreglar el bug de KPI cards que no muestran su label en estado suppressed.
|
||
|
||
**Esta etapa es 100% cosmética y reversible.** No toca lógica de datos, RPC, RLS,
|
||
filtros, ni esquema. Solo componentes de presentación.
|
||
|
||
---
|
||
|
||
## 2. Contexto previo
|
||
- Etapa 3 completada (dashboard funcional con k-anonimato estructural y 9 widgets).
|
||
- El director validó visualmente el estado suppressed y detectó tres hallazgos
|
||
(KPI sin label, emojis en títulos, falta de subtítulos).
|
||
- Referencia de lenguaje visual: dashboard del equipo de Fundación Solidaridad
|
||
("Mapeo de Vinculación") — patrón título + `card-sub` con código de pregunta.
|
||
|
||
---
|
||
|
||
## 3. DECISIONES YA TOMADAS (no consultar de nuevo)
|
||
- Cero emojis en títulos de widgets y de KPI cards.
|
||
- Subtítulos descriptivos en TODAS las cards (KPI y widgets), formato:
|
||
`"<código(s) de pregunta> · <descripción corta en lenguaje natural>"`
|
||
- En estado `suppressed`, las KPI cards muestran título + subtítulo + candado + "n < 5".
|
||
El título NUNCA se oculta — comunica qué se está suprimiendo.
|
||
- Paleta y tipografías existentes se mantienen.
|
||
- Layout y grid se mantienen.
|
||
|
||
---
|
||
|
||
## 4. Tareas
|
||
|
||
### 4.1 KPI cards — labels visibles en cualquier estado
|
||
Modificar `components/dashboard/kpi-cards.tsx` (o equivalente) para que el componente
|
||
KPICard renderice SIEMPRE el título y subtítulo, en los 3 estados:
|
||
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ CUIDADORES ACTIVOS │ ← título (siempre visible)
|
||
│ 1.1 + 1.6 + 1.13 · % … │ ← subtítulo (siempre visible)
|
||
│ │
|
||
│ [valor o 🔒] │ ← cambia según estado
|
||
│ 34,2% o n<5 │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
Los 4 KPI cards con sus textos definitivos:
|
||
|
||
| # | Título | Subtítulo |
|
||
|---|---|---|
|
||
| 1 | CUIDADORES ACTIVOS | 1.1 + 1.6 + 1.13 · % de la plantilla con responsabilidades de cuidado |
|
||
| 2 | AUSENCIA PROMEDIO | 3.1 · días por mes asociados al cuidado |
|
||
| 3 | BIENESTAR | 5.1 · autorreporte de productividad y energía |
|
||
| 4 | NPS CUIDADOR | 6.5 · recomendaría la empresa a otra persona cuidadora |
|
||
|
||
### 4.2 Widgets — limpiar títulos y agregar subtítulos
|
||
Para los 9 widgets (no-KPI), aplicar exactamente estos textos. Eliminar el emoji del
|
||
título. El subtítulo va inmediatamente debajo del título, con estilo secundario
|
||
(color tenue, una línea, peso regular).
|
||
|
||
| Widget actual | Título nuevo | Subtítulo |
|
||
|---|---|---|
|
||
| 🗺️ Prevalencia de cuidadores por departamento | Prevalencia de cuidadores por departamento | A1 · % con responsabilidades de cuidado, por departamento |
|
||
| 🍩 Tipo de cuidado | Tipo de cuidado | 1.1 / 1.6 / 1.13 · composición de la carga (no excluyentes) |
|
||
| 🎯 Madurez organizacional | Madurez organizacional | 6.1 + 6.3 + 6.5 · score combinado 0–100 |
|
||
| 🔥 Horas de cuidado × Ausencias laborales | Horas de cuidado × Ausencias laborales | 2.1 × 3.1 · correlación intensidad / ausentismo |
|
||
| 👥 Pirámide demográfica | Pirámide demográfica | A5 × A6 · rango etario por género (celdas con k≥5) |
|
||
| 📈 Políticas más demandadas | Políticas más demandadas | 6.4 vs 6.2 · brecha entre necesidad y oferta |
|
||
| 🦋 Intensidad de cuidado vs. Bienestar (bins N≥5) | Intensidad de cuidado vs. Bienestar | 2.1 × 5.1 · cruce agregado por bins (k≥5) |
|
||
| 📋 Tabla de riesgo de retención | Tabla de riesgo de retención | 5.2 + 6.3 · segmentos por riesgo de abandono laboral |
|
||
|
||
### 4.3 Estilos
|
||
- **Título de card:** tipografía actual, bold, sin cambios de tamaño.
|
||
- **Subtítulo:** una línea por debajo del título, separación visual mínima (4–6px),
|
||
color `#7A8FA0` (var --color-text-muted o equivalente), tamaño 0.85× del título,
|
||
peso regular. No usar itálica.
|
||
- Si el componente `widget-shell.tsx` ya existe, el subtítulo se agrega ahí una sola
|
||
vez y se hereda en todos los widgets.
|
||
|
||
### 4.4 Verificaciones
|
||
Antes de declarar terminado:
|
||
- `grep -rE '[🗺🍩🎯🔥👥📈🦋📋]' components/dashboard/ app/dashboard/` debe
|
||
retornar vacío.
|
||
- Inspección manual: las 4 KPI cards muestran título y subtítulo en estado
|
||
suppressed (no solo el candado).
|
||
- `git diff --name-only HEAD` solo en `components/dashboard/` y posiblemente
|
||
`app/dashboard/page.tsx` si el wrapper se modifica.
|
||
|
||
---
|
||
|
||
## 5. Entregables (DoD)
|
||
- [ ] Cero emojis en títulos de widgets ni KPI cards (`grep` verificado).
|
||
- [ ] 4 KPI cards muestran título + subtítulo en los 3 estados (loading/ok/suppressed).
|
||
- [ ] 9 widgets muestran título limpio + subtítulo descriptivo con código de pregunta.
|
||
- [ ] Build sin errores (`next build`).
|
||
- [ ] `git diff --name-only HEAD` — solo archivos de presentación del dashboard.
|
||
- [ ] Captura del resultado en estado suppressed compartida con el director.
|
||
|
||
## 6. Qué reportar
|
||
```
|
||
Verificado:
|
||
- archivos en diff: [lista]
|
||
- emojis residuales (grep): [0 o lista]
|
||
- 4 KPI cards con label visible en suppressed: confirmado
|
||
- 9 widgets con subtítulo aplicado: lista
|
||
- build exitoso
|
||
|
||
Asumido:
|
||
- los gráficos siguen siendo SVG inline (de Etapa 3); interacción no
|
||
evaluable hasta tener N≥5 en al menos un widget
|
||
|
||
Decisiones proactivas (Nivel 2):
|
||
- [si las hubo]
|
||
```
|
||
|
||
## 7. Qué NO hacer
|
||
- ❌ No tocar RPC, RLS, esquema ni migraciones.
|
||
- ❌ No modificar `lib/dashboard-queries.ts` ni `lib/dashboard-types.ts` salvo
|
||
para extender los tipos del componente KPI si fuera necesario.
|
||
- ❌ No cambiar la lógica de filtros del sidebar.
|
||
- ❌ No agregar widgets nuevos ni cambiar layout.
|
||
- ❌ No agregar dependencias npm.
|
||
- ❌ No reemplazar SVG inline por una librería (eso es Etapa 2E si hace falta,
|
||
decisión Nivel 3).
|
||
- ❌ No resolver ítems de TECH_DEBT.md. |