Pantalla: Centro de Notificaciones¶

Identificador: SCR-ALT-009 Modulo: MTS-ALT-001 - Alertas y Notificaciones Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Estado: Especificado

1. Informacion General¶

Atributo	Valor
Nombre	Centro de Notificaciones
Proposito	Hub central para ver y gestionar todas las alertas activas y recientes
Tipo	Full Screen (Tab)
Acceso	Bottom Navigation > Alertas, Badge en icono
Prioridad	Alta

2. Wireframe ASCII¶

2.1. Estado: Con Alertas Pendientes¶

+------------------------------------------+
|  [<]    Alertas                    [...]  |  <- Top App Bar
+------------------------------------------+
|                                           |
|  +====================================+   |
|  | [!] 2 ALERTAS REQUIEREN ATENCION   |   |  <- Critical banner
|  +====================================+   |
|                                           |
|  PENDIENTES                               |  <- Section
|  +------------------------------------+   |
|  | [!] 08:00  Medicinas del desayuno     ||
|  |     Metformina, Insulina              ||  <- Overdue
|  |     Hace 45 minutos                   ||
|  |     [Tomar] [Posponer] [Ver]          ||
|  +------------------------------------+   |
|                                           |
|  +------------------------------------+   |
|  | [Clock] 14:00  Medicinas almuerzo     ||
|  |     Metformina                        ||  <- Upcoming
|  |     En 2 horas                        ||
|  +------------------------------------+   |
|                                           |
|  HOY                                      |  <- Section
|  +------------------------------------+   |
|  | [v] 22:00  Medicinas noche            ||
|  |     Losartan - Tomada a las 22:05     ||  <- Completed
|  +------------------------------------+   |
|                                           |
|  +------------------------------------+   |
|  | [X] 20:00  Medicion glucosa           ||
|  |     Omitida                           ||  <- Omitted
|  +------------------------------------+   |
|                                           |
|  +------------------------------------+   |
|  | [i] Sistema                           ||
|  |     Tu suscripcion se renueva en 3d   ||  <- Info
|  +------------------------------------+   |
|                                           |
|  [Ver historial completo]                 |
|                                           |
+------------------------------------------+
| [Home] [Pills] [Alerts*] [Stats] [More]  |  <- Badge on Alerts
+------------------------------------------+

2.2. Estado: Sin Alertas Pendientes¶

+------------------------------------------+
|  [<]    Alertas                    [...]  |
+------------------------------------------+
|                                           |
|                                           |
|            +----------------+             |
|            |                |             |
|            |  [Ilustracion] |             |
|            |   Todo OK      |             |
|            |                |             |
|            +----------------+             |
|                                           |
|          Todo al dia!                     |
|                                           |
|     No tienes alertas pendientes.         |
|     Sigue asi!                            |
|                                           |
|  HOY                                      |
|  +------------------------------------+   |
|  | [v] 08:00  Medicinas desayuno         ||
|  |     Tomada a las 08:05                ||
|  +------------------------------------+   |
|  | [v] 14:00  Medicinas almuerzo         ||
|  |     Tomada a las 14:10                ||
|  +------------------------------------+   |
|                                           |
|  [Ver historial completo]                 |
|                                           |
+------------------------------------------+

2.3. Estado: Modo Cuidador¶

+------------------------------------------+
|  [<]    Alertas de Mama            [...]  |  <- Shows patient name
+------------------------------------------+
|                                           |
|  +====================================+   |
|  | [!] ALERTA DE TU DEPENDIENTE       |   |  <- Escalated alert
|  |     Mama no tomo sus medicinas     |   |
|  |     de las 08:00 (hace 45 min)     |   |
|  |                                    |   |
|  |     [Llamar] [Mensaje] [Ver]       |   |
|  +====================================+   |
|                                           |
|  PROXIMAS TOMAS DE MAMA                   |
|  +------------------------------------+   |
|  | [Clock] 14:00  Medicinas almuerzo     ||
|  |     Metformina, Insulina              ||
|  +------------------------------------+   |
|                                           |
|  HOY                                      |
|  +------------------------------------+   |
|  | [v] 22:00  Medicinas noche            ||
|  |     Tomada a las 22:05 (a tiempo)     ||
|  +------------------------------------+   |
|                                           |
|  +------------------------------------+   |
|  |     [Ver calendario completo]      |   |
|  +------------------------------------+   |
|                                           |
+------------------------------------------+

2.4. Estado: Offline¶

+------------------------------------------+
|  [Offline]  Alertas                [...]  |  <- Offline indicator
+------------------------------------------+
|                                           |
|  +------------------------------------+   |
|  | [Wifi-off] Sin conexion            |   |
|  | Mostrando alertas locales.         |   |
|  | Los cambios se sincronizaran.      |   |
|  +------------------------------------+   |
|                                           |
|  PENDIENTES                               |
|  [Alertas locales...]                     |
|                                           |
+------------------------------------------+

3. Componentes UI¶

3.1. Top App Bar¶

Propiedad	Valor
Componente	CMP-NAV-002 (Top App Bar)
Variante	regular
Titulo	"Alertas" / "Alertas de [Nombre]" (cuidador)
Leading	Back arrow (si no es tab)
Trailing	Overflow menu

Menu Overflow:

Marcar todas como leidas
Ir a historial
Configuracion de alertas
Modo cuidador (si aplica)

Propiedad	Valor
Componente	CMP-CRD-010 (Alert Banner)
Variante	critical
Background	error.main
Icono	Warning
Sticky	Si (siempre visible)

3.3. Section Headers¶

Propiedad	Valor
Componente	CMP-TYP-003 (Section Header)
Variantes	"PENDIENTES", "HOY", "AYER", fecha
Tipografia	sm, uppercase, medium
Sticky	Si

3.4. Alert Card¶

Propiedad	Valor
Componente	CMP-CRD-011 (Alert Card)
Variante	actionable
Height	Variable (min 72dp)
Swipeable	Si (descartar)

Elementos:

Elemento	Descripcion
Status icon	Segun estado (pending, overdue, done, omitted)
Hora	Hora programada
Titulo	Nombre del evento
Subtitulo	Medicamentos o detalle
Time info	"Hace X min" / "En X horas"
Actions	Botones inline (si pendiente)

Iconos de estado:

Estado	Icono	Color
Pendiente	Clock	primary.main
Vencida	Warning	error.main
Completada	Checkmark	success.main
Omitida	X	error.light
Info	Info	neutral.400

Propiedad	Valor
Componente	CMP-NAV-001 (Bottom Navigation)
Badge	Numero de pendientes
Color badge	error.main si > 0

3.6. Carer Alert Card¶

Propiedad	Valor
Componente	CMP-CRD-012 (Escalated Alert Card)
Background	error.light
Actions	Llamar, Mensaje, Ver
Prioridad visual	Alta (arriba de todo)

4. Comportamientos¶

4.1. Gestos¶

Gesto	Elemento	Accion
Tap	Alert card	Abrir SCR-ALT-002
Tap	Action button	Ejecutar accion
Swipe Left	Card completada/info	Descartar
Pull Down	Lista	Refresh
Tap	Ver historial	Navegar a SCR-ALT-003

4.2. Agrupacion de Alertas¶

Grupo	Contenido	Orden
Critico banner	Alertas vencidas + escaladas	Siempre arriba
Pendientes	Alertas activas	Por hora (proximas primero)
Hoy	Completadas/Omitidas de hoy	Por hora (recientes primero)
Ayer	Alertas de ayer	Por hora
[Fecha]	Alertas anteriores	Por hora

4.3. Real-time Updates¶

WebSocket para alertas nuevas (Pro+)
Pull-to-refresh para Free
Badge se actualiza automaticamente
Animacion de entrada para nuevas alertas

5. Datos Requeridos¶

5.1. Input Data¶

interface AlertCenterData {
  pending_alerts: AlertItem[];
  recent_alerts: AlertItem[]; // Grouped by date
  escalated_alerts?: CarerAlertItem[]; // For carers
  pending_count: number;
  is_offline: boolean;
  viewing_as_carer: boolean;
  patient_name?: string;
}

interface AlertItem {
  id: string;
  type: 'MEDICATION' | 'MEASUREMENT' | 'APPOINTMENT' | 'SYSTEM' | 'INTERACTION';
  status: 'PENDING' | 'OVERDUE' | 'COMPLETED' | 'OMITTED' | 'SNOOZED';
  scheduled_time: Date;
  title: string;
  subtitle?: string;
  time_info: string; // "Hace 45 min" / "En 2 horas"
  is_critical: boolean;
  has_actions: boolean;
  actions?: AlertAction[];
}

interface AlertAction {
  id: string;
  label: string;
  type: 'primary' | 'secondary' | 'text';
  action: 'TAKE' | 'SNOOZE' | 'VIEW' | 'CALL' | 'MESSAGE';
}

5.2. Output Events¶

Evento	Payload	Destino
onAlertTap	alert_id	SCR-ALT-002
onAction	alert_id, action	API
onDismiss	alert_id	API (mark read)
onRefresh	-	Reload data
onHistoryTap	-	SCR-ALT-003
onCarerCall	patient_phone	Phone dialer
onCarerMessage	patient_id	Messaging

6. Accesibilidad¶

6.1. Labels y Hints¶

Elemento	accessibilityLabel
Critical banner	"Atencion: {N} alertas requieren atencion. {primera alerta}"
Alert card	"{tipo}: {titulo}, {hora}, {estado}"
Action button	"{accion} para {titulo}"
Badge	"{N} alertas pendientes"
Swipe	"Desliza para descartar"

6.2. Orden de Foco¶

Critical banner (si existe)
Primera alerta pendiente
Siguientes alertas por orden
Link a historial
Bottom navigation

Evento	Anuncio
Pantalla abierta	"{N} alertas pendientes. {primera alerta urgente si existe}"
Nueva alerta	"Nueva alerta: {titulo}"
Alerta completada	"{titulo} marcada como completada"
Alerta descartada	"Alerta descartada"

7. Estados Especiales¶

7.1. Primer Uso (Onboarding)¶

+------------------------------------------+
|  [<]    Alertas                    [...]  |
+------------------------------------------+
|                                           |
|  +------------------------------------+   |
|  |  [Tip] Aqui veras tus alertas      |   |
|  |                                    |   |
|  |  Configura tus medicamentos para   |   |
|  |  recibir recordatorios.            |   |
|  |                                    |   |
|  |  [Agregar medicamento]             |   |
|  +------------------------------------+   |
|                                           |
+------------------------------------------+

7.2. Error de Carga¶

+------------------------------------------+
|  [<]    Alertas                    [...]  |
+------------------------------------------+
|                                           |
|            [Error icon]                   |
|                                           |
|     No pudimos cargar tus alertas         |
|                                           |
|     [Reintentar]                          |
|                                           |
+------------------------------------------+

8. Metricas¶

8.1. Analytics Events¶

Evento	Parametros
alerts_view	pending_count, view_type (own/carer)
alert_tap	alert_id, alert_type
alert_action	alert_id, action
alert_dismiss	alert_id
history_tap	-
carer_action	action (call/message)

9. Referencias¶

Documento generado por MobileUxUiDrone (Eight of Eight)

Pantalla: Centro de Notificaciones¶

1. Informacion General¶

2. Wireframe ASCII¶

2.1. Estado: Con Alertas Pendientes¶

2.2. Estado: Sin Alertas Pendientes¶

2.3. Estado: Modo Cuidador¶

2.4. Estado: Offline¶

3. Componentes UI¶

3.1. Top App Bar¶

3.2. Critical Banner¶

3.3. Section Headers¶

3.4. Alert Card¶

3.5. Bottom Navigation Badge¶

3.6. Carer Alert Card¶

4. Comportamientos¶

4.1. Gestos¶

4.2. Agrupacion de Alertas¶

4.3. Real-time Updates¶

5. Datos Requeridos¶

5.1. Input Data¶

5.2. Output Events¶

6. Accesibilidad¶

6.1. Labels y Hints¶

6.2. Orden de Foco¶

7. Estados Especiales¶

7.1. Primer Uso (Onboarding)¶

7.2. Error de Carga¶

8. Metricas¶

8.1. Analytics Events¶

9. Referencias¶

Pantalla: Centro de Notificaciones¶

1. Informacion General¶

2. Wireframe ASCII¶

2.1. Estado: Con Alertas Pendientes¶

2.2. Estado: Sin Alertas Pendientes¶

2.3. Estado: Modo Cuidador¶

2.4. Estado: Offline¶

3. Componentes UI¶

3.1. Top App Bar¶

3.2. Critical Banner¶

3.3. Section Headers¶

3.4. Alert Card¶

3.5. Bottom Navigation Badge¶

3.6. Carer Alert Card¶

4. Comportamientos¶

4.1. Gestos¶

4.2. Agrupacion de Alertas¶

4.3. Real-time Updates¶

5. Datos Requeridos¶

5.1. Input Data¶

5.2. Output Events¶

6. Accesibilidad¶

6.1. Labels y Hints¶

6.2. Orden de Foco¶

6.3. Screen Reader Announcements¶

7. Estados Especiales¶

7.1. Primer Uso (Onboarding)¶

7.2. Error de Carga¶

8. Metricas¶

8.1. Analytics Events¶

9. Referencias¶