Propósito: Notificar al usuario cuando hay alertas nuevas que requieren su atención.
JTBD: “Quiero ver que estoy progresando”
Ruta: /inicio (componente dentro del dashboard)
Módulo: PAM-6
| # |
Feature |
Descripción |
Prioridad |
| 1 |
Contador de alertas |
Badge con número de alertas sin leer |
P0 |
| 2 |
Mensaje principal |
Texto de la alerta más importante |
P0 |
| 3 |
Link a alertas |
“Ver alertas” para ir a la lista completa |
P0 |
| 4 |
Dismiss |
Cerrar el banner (marca como vista) |
P1 |
| 5 |
Icono de severidad |
Color del dot según prioridad |
P1 |
- Visual: Skeleton shimmer en banner (200ms)
- Duración: <300ms
- Copy: ninguno
- Visual: Banner horizontal (col-span-6) con bg-[#e8ebf8], dot de color, texto, link “Ver alertas”, botón dismiss
- Datos: Alerta más reciente sin leer
- Trigger: No hay alertas nuevas
- Visual: Banner no se renderiza (oculto)
- Copy: ninguno
- Trigger: Alerta con severidad alta (biomarcador fuera de rango)
- Visual: Banner con bg-[#e8ebf8], dot azul (#0f2fc7), texto prominente
- Copy: “Tienes un resultado que necesita tu atención. Tu glucosa está en 132 mg/dL.”
- CTA: [Ver detalle] --> /alertas/:id
- Trigger: Recordatorio o actualización sin urgencia
- Visual: Banner con bg-[#e8ebf8], texto normal
- Copy: “Tienes 2 alertas nuevas.”
- CTA: [Ver alertas] --> /alertas
- Trigger: Fallo cargando alertas
- Visual: Banner no se renderiza (falla silenciosa)
| Dato |
Objeto OOUX |
Propiedad |
Ejemplo |
| Mensaje |
Alerta |
mensaje |
Tu glucosa está en 132 mg/dL |
| Tipo |
Alerta |
tipo |
resultado_fuera_rango |
| Cantidad sin leer |
Alerta |
count(leida=false) |
2 |
| Severidad |
Alerta |
tipo |
crítica / informativa |
| Acción |
Tipo |
Resultado |
| Tap banner |
Tap |
Navega a /alertas/:id (alerta principal) |
| Ver alertas |
Tap link |
Navega a /alertas (lista completa) |
| Dismiss |
Tap botón X |
Oculta banner, marca alerta como vista |
- Viene de: Carga del dashboard (condicional: solo si hay alertas)
- Va a: Detalle de alerta, Lista de alertas
- Back: Dashboard (es un componente inline)