Pantalla: Detalle de Alerta Pendiente¶

Identificador: SCR-ALT-002 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	Detalle de Alerta Pendiente
Proposito	Mostrar informacion completa de una alerta activa con opciones de accion
Tipo	Full Screen / Bottom Sheet
Acceso	Desde notificacion, Centro de notificaciones, Deep link
Prioridad	Alta

2. Wireframe ASCII¶

2.1. Estado: Alerta Pendiente Normal¶

+------------------------------------------+
|  [<]    Recordatorio              [...]   |  <- Top App Bar
+------------------------------------------+
|                                           |
|  +------------------------------------+   |
|  |        MEDICINAS DEL DESAYUNO      |   |  <- Event Header
|  |                                    |   |
|  |    [Clock] 08:00                   |   |  <- Scheduled time
|  |    Estado: Pendiente               |   |  <- Status badge
|  +------------------------------------+   |
|                                           |
|  Medicamentos a tomar:                    |  <- Section
|  +------------------------------------+   |
|  | [Pill]  Metformina                    ||
|  |         850mg - 1 comprimido          ||
|  |         Con el desayuno               ||
|  +------------------------------------+   |
|                                           |
|  +------------------------------------+   |
|  | [Cap]   Lisinopril                    ||
|  |         10mg - 1 capsula              ||
|  |         Con agua                      ||
|  +------------------------------------+   |
|                                           |
|  +------------------------------------+   |
|  | [Drop]  Gotas Oftalmicas              ||
|  |         2 gotas - Cada ojo            ||
|  |         Antes de comer                ||
|  +------------------------------------+   |
|                                           |
|  Instruccion general:                     |
|  +------------------------------------+   |
|  | Tomar con el desayuno. No saltear  |   |
|  | aunque no tengas hambre.           |   |
|  +------------------------------------+   |
|                                           |
+------------------------------------------+
|                                           |
|  +------------------+ +----------------+  |
|  |   [X] Omitir    | | [v] Ya la tome |  |  <- Action buttons
|  +------------------+ +----------------+  |
|                                           |
|  +------------------------------------+   |
|  |      [Clock] Posponer 30 min       |   |  <- Secondary action
|  +------------------------------------+   |
|                                           |
+------------------------------------------+

2.2. Estado: Alerta Vencida (Overdue)¶

+------------------------------------------+
|  [<]    Recordatorio              [...]   |
+------------------------------------------+
|                                           |
|  +------------------------------------+   |
|  |  [!] MEDICINAS DEL DESAYUNO [!]   |   |  <- Warning style
|  |                                    |   |
|  |    [Clock] 08:00 (hace 45 min)    |   |  <- Overdue indicator
|  |    Estado: VENCIDA                 |   |  <- Red badge
|  +------------------------------------+   |
|                                           |
|  +------------------------------------+   |
|  |  Esta toma esta retrasada.         |   |  <- Warning card
|  |  Si la tomas ahora, registraremos  |   |
|  |  la hora real de toma.             |   |
|  +------------------------------------+   |
|                                           |
|  Medicamentos:                            |
|  +------------------------------------+   |
|  | [Pill]  Metformina 850mg              ||
|  +------------------------------------+   |
|  | [Cap]   Lisinopril 10mg               ||
|  +------------------------------------+   |
|                                           |
+------------------------------------------+
|                                           |
|  +------------------+ +----------------+  |
|  |   [X] Omitir    | |[v] Tomar ahora |  |
|  +------------------+ +----------------+  |
|                                           |
+------------------------------------------+

2.3. Estado: Con Nota Agregada¶

+------------------------------------------+
|  [<]    Recordatorio              [...]   |
+------------------------------------------+
|                                           |
|  [Event info...]                          |
|                                           |
|  Medicamentos:                            |
|  [Cards...]                               |
|                                           |
|  Nota:                                    |
|  +------------------------------------+   |
|  | [Edit] "Tome con jugo de naranja  |   |
|  |         porque no habia leche."   |   |
|  +------------------------------------+   |
|                                           |
+------------------------------------------+
|  [Actions...]                             |
+------------------------------------------+

2.4. Estado: Confirmada¶

+------------------------------------------+
|  [<]    Recordatorio              [...]   |
+------------------------------------------+
|                                           |
|  +------------------------------------+   |
|  |   [Checkmark]                      |   |
|  |                                    |   |
|  |   TOMA COMPLETADA                  |   |  <- Success state
|  |                                    |   |
|  |   08:00 - Tomada a las 08:12       |   |
|  +------------------------------------+   |
|                                           |
|  Medicamentos tomados:                    |
|  +------------------------------------+   |
|  | [Pill]  Metformina 850mg     [v]      ||
|  +------------------------------------+   |
|  | [Cap]   Lisinopril 10mg      [v]      ||
|  +------------------------------------+   |
|                                           |
|  +------------------------------------+   |
|  | [+] Agregar nota                   |   |
|  +------------------------------------+   |
|                                           |
+------------------------------------------+
|                                           |
|  +------------------------------------+   |
|  |        [Undo] Deshacer toma        |   |  <- Undo available 5min
|  +------------------------------------+   |
|                                           |
+------------------------------------------+

3. Componentes UI¶

3.1. Top App Bar¶

Propiedad	Valor
Componente	CMP-NAV-002 (Top App Bar)
Variante	regular
Titulo	"Recordatorio"
Leading	Back arrow
Trailing	Overflow menu (...)

Menu Overflow:

Editar evento
Ver medicamento
Compartir (Pro+)
Configurar alertas

3.2. Event Header Card¶

Propiedad	Valor
Componente	CMP-CRD-003 (Info Card)
Variante	highlight
Background	primary.light (normal) / error.light (overdue)

Elementos:

Elemento	Descripcion
Titulo	Nombre del evento ("Medicinas del desayuno")
Hora	Hora programada con icono reloj
Overdue	"hace X min" si aplica
Badge	Estado (Pendiente/Vencida/Completada)

3.3. Medication Cards¶

Propiedad	Valor
Componente	CMP-CRD-001 (Medication Card)
Variante	detail
Touch target	No tappable (solo informativo)

Elementos por card:

Elemento	Descripcion
Icono	Forma farmaceutica 40x40dp
Nombre	Nombre del medicamento
Dosis	"850mg - 1 comprimido"
Instruccion	"Con el desayuno"
Checkbox	Solo en estado confirmado

3.4. Warning Card (Overdue)¶

Propiedad	Valor
Componente	CMP-CRD-004 (Alert Card)
Variante	warning
Background	warning.light
Icono	Warning triangle

3.5. Action Buttons¶

Propiedad	Valor
Layout	Row de 2 botones principales + 1 secundario
Boton Omitir	CMP-BTN-002 (Secondary)
Boton Tomar	CMP-BTN-001 (Primary)
Boton Posponer	CMP-BTN-003 (Text)

3.6. Note Field¶

Propiedad	Valor
Componente	CMP-INP-003 (Text Area)
Variante	expandable
Placeholder	"Agregar nota opcional..."
Max chars	500

4. Comportamientos¶

4.1. Gestos¶

Gesto	Elemento	Accion
Tap	Boton Tomar	Confirmar toma
Tap	Boton Omitir	Modal confirmacion
Tap	Boton Posponer	Menu de tiempos
Tap	Medication Card	Ver detalle medicamento
Tap	Agregar nota	Expandir campo texto
Swipe Down	Pantalla	Cerrar (si es bottom sheet)

4.2. Flujo de Confirmacion de Toma¶

flowchart TD
    A[Tap Tomar] --> B{Hay medicamentos criticos?}
    B -->|No| C[Confirmar inmediatamente]
    B -->|Si| D[Modal de confirmacion]

    D --> E{Usuario confirma?}
    E -->|Si| C
    E -->|No| F[Cancelar]

    C --> G[Animacion checkmark]
    G --> H[Actualizar UI a Confirmada]
    H --> I[Cancelar recordatorios pendientes]
    I --> J{Hay cuidadores?}

    J -->|Si| K[Notificar cuidadores]
    J -->|No| L[Fin]
    K --> L

4.3. Flujo de Omision¶

flowchart TD
    A[Tap Omitir] --> B[Modal: Estas seguro?]
    B --> C{Confirma?}

    C -->|Si| D{Pide razon?}
    C -->|No| E[Cancelar]

    D -->|Opcional| F[Selector de razon]
    D -->|Skip| G[Registrar omision]

    F --> G
    G --> H[Actualizar UI]
    H --> I{Es medicamento critico?}

    I -->|Si| J[Alerta cuidadores]
    I -->|No| K[Fin]
    J --> K

4.4. Razones de Omision¶

Razon	Valor
Se me olvido	FORGOT
Efectos secundarios	SIDE_EFFECTS
No tenia el medicamento	UNAVAILABLE
Indicacion medica	MEDICAL_ADVICE
Otra razon	OTHER (con texto)

5. Estados y Transiciones¶

5.1. Diagrama de Estados¶

stateDiagram-v2
    [*] --> Loading: Abrir pantalla

    Loading --> Pending: Alerta pendiente
    Loading --> Overdue: Alerta vencida
    Loading --> Confirmed: Ya confirmada
    Loading --> Error: Fallo carga

    Pending --> Confirming: Tap Tomar
    Pending --> Snoozing: Tap Posponer
    Pending --> Omitting: Tap Omitir

    Overdue --> Confirming: Tap Tomar ahora
    Overdue --> Omitting: Tap Omitir

    Confirming --> Confirmed: Exito
    Confirming --> Error: Fallo
    Snoozing --> [*]: Nueva hora programada
    Omitting --> Omitted: Confirmado

    Confirmed --> [*]: Cerrar
    Omitted --> [*]: Cerrar
    Error --> Pending: Reintentar

6. Datos Requeridos¶

6.1. Input Data¶

interface AlertDetailData {
  alert_id: string;
  event_id: string;
  event_name: string;
  scheduled_time: Date;
  status: 'PENDING' | 'OVERDUE' | 'CONFIRMED' | 'OMITTED' | 'SNOOZED';
  overdue_minutes?: number;
  medications: AlertMedication[];
  general_instruction?: string;
  note?: string;
  confirmed_at?: Date;
  confirmed_by?: 'PATIENT' | 'CARER';
  can_undo: boolean;
  undo_deadline?: Date;
}

interface AlertMedication {
  id: string;
  name: string;
  dosage: string;
  quantity: string;
  form_icon: MedicationFormIcon;
  instruction?: string;
  is_critical: boolean;
  taken: boolean;
}

6.2. Output Events¶

Evento	Payload	Destino
onTake	event_id, taken_at, note?	API + Cancel reminders
onOmit	event_id, reason?, note?	API + Log
onSnooze	event_id, snooze_minutes	Reschedule
onUndo	event_id	API + Restore reminders
onAddNote	event_id, note_text	API
onClose	-	Navigation back

7. Accesibilidad¶

7.1. Labels y Hints¶

Elemento	accessibilityLabel	accessibilityHint
Pantalla	"Detalle de recordatorio de {hora}"	-
Event header	"{nombre}, programado para {hora}, estado {status}"	-
Medication card	"{nombre}, {dosis}, {instruccion}"	"Toca para ver detalles del medicamento"
Boton Tomar	"Marcar como tomado"	"Registra que tomaste todos los medicamentos"
Boton Omitir	"Marcar como omitido"	"Registra que no tomaste los medicamentos"
Boton Posponer	"Posponer {tiempo}"	"Recibiras otro recordatorio en {tiempo}"
Campo nota	"Agregar nota"	"Escribe una nota opcional sobre esta toma"

7.2. Orden de Foco¶

Back button
Event header (informativo)
Warning card (si overdue)
Primera medication card
Segunda medication card
... (continua medicamentos)
Instruccion general
Campo nota (si visible)
Boton Omitir
Boton Tomar (ultimo para facil acceso)

Evento	Anuncio
Pantalla abierta	"Detalle de recordatorio. {N} medicamentos. Estado {status}"
Toma confirmada	"Toma registrada correctamente"
Toma omitida	"Toma marcada como omitida"
Pospuesta	"Recordatorio pospuesto {X} minutos"
Error	"Error al registrar. Intenta de nuevo"

7.4. Contraste y Tamanos¶

Elemento	Min Size	Contraste
Event title	20sp	4.5:1
Medication name	16sp	4.5:1
Medication details	14sp	4.5:1
Status badge	12sp	4.5:1
Warning text	14sp	4.5:1 (sobre warning.light)
Action buttons	56dp height	4.5:1
Touch targets	48x48dp min	-

8. Responsive Design¶

8.1. Breakpoints¶

Ancho	Layout
< 360dp	Botones stacked verticalmente
360-600dp	Layout normal
> 600dp (tablet)	Contenido centrado max-width 600dp

8.2. Bottom Sheet vs Full Screen¶

Condicion	Presentacion
Desde notificacion	Bottom sheet (85% altura)
Desde Centro notif	Push navigation (full screen)
Desde deep link	Full screen

9. Metricas¶

9.1. Performance¶

Metrica	Objetivo
Time to Interactive	< 500ms
Action response time	< 200ms
Animation frame rate	60fps

9.2. Analytics Events¶

Evento	Parametros
alert_detail_view	alert_id, status, is_overdue
alert_action	alert_id, action, response_time_ms
alert_note_added	alert_id, note_length
alert_undo	alert_id

10. Referencias¶

Documento generado por MobileUxUiDrone (Eight of Eight)