Design
Pantallas
Para qué

Especificación detallada de cada pantalla: datos mostrados, estados, acciones disponibles y navegación.

Audiencia

Diseño e ingeniería.

Lista de Alertas

Alertas -> Pantalla Principal

Propósito: Mostrar alertas agrupadas por estado (nuevas con badge, resueltas en archivo)
JTBD: “Quiero saber si algo importante cambio en mi salud”
Ruta: /paciente/alertas
Módulo: PAM-5


Features

# Feature Descripción Prioridad
1 Sección nuevas Alertas sin resolver con badge de conteo P0
2 Sección resueltas Archivo de alertas marcadas como resueltas P1
3 Severidad visual Color/icono por nivel: LOW, MEDIUM, HIGH, CRITICAL P0
4 Preview de alerta Título + subtitulo + fecha + severidad en card P0
5 Marcar resuelta Swipe o botón para archivar P1

States

Sin Alertas

  • Trigger: No hay alertas nuevas ni resueltas
  • Copy: “Vas muy bien”
  • Subtitulo: “No tienes alertas pendientes. Sigue con tu plan.”
  • Visual: Ilustración minimalista positiva

Nuevas Alertas

  • Visual: Badge con conteo en tab + lista de cards con severidad
  • Ejemplo:
    • (MEDIUM) “Tu glucosa subió” - Hace 2 horas
    • (LOW) “Cita en 7 días” - Hace 1 dia
    • (HIGH) “Tu colesterol está alto” - Hoy

Todas Resueltas

  • Trigger: Todas las alertas marcadas como resueltas
  • Copy: “Todas tus alertas están al dia”
  • Visual: Sección “Resueltas” expandida, sección “Nuevas” vacia

Cargando

  • Visual: Skeleton shimmer en 3 cards
  • Copy: “Cargando alertas…”

Datos Mostrados

Dato Objeto Propiedad Ejemplo
Título Alerta título Tu glucosa subió
Subtitulo Alerta descripción 126 mg/dL, un poco alta
Severidad Alerta severidad MEDIUM
Fecha Alerta fecha Hace 2 horas
Estado Alerta estado nueva / resuelta
Conteo nuevas Alertas total_nuevas 3

Acciones

Acción Tipo Resultado
Tap alerta Navegación Abre detalle de la alerta
Swipe marcar resuelta Secundaria Mueve a sección resueltas
Tap tab “Resueltas” Filtro Muestra solo resueltas

  • Origen: Tab Alertas en navegación principal / Push notification
  • Destino tap alerta: Detalle Alerta (/paciente/alertas/:id)
  • Back: Dashboard