Files
motor-de-encuestas/sprints/sprint-2/ETAPA_2D_PROMPT.md

6.0 KiB
Raw Blame History

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 0100
🔥 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 (46px), 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.