Pantalla: Detalle de Dia Especifico¶

Identificador: SCR-ADH-006 Modulo: MTS-ADH-001 - Motor de Adherencia Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Estado: Especificado FASE: 2 - Value

1. Informacion General¶

Atributo	Valor
Nombre	Detalle de Dia Especifico
Proposito	Vista drill-down mostrando todas las tomas de un dia especifico
Tipo	Full Screen
Acceso	SCR-ADH-001 > Tap en dia del calendario
Prioridad	Media

2. Wireframe ASCII¶

2.1. Estado: Dia con Datos Completos¶

+------------------------------------------+
|  [<]    Martes, 3 Dic                     |
+------------------------------------------+
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │                                     │  |
|  │      ┌───────────────┐              │  |
|  │     ╱                 ╲             │  |
|  │    │       92%        │             │  |  <- Circulo del dia
|  │     ╲                 ╱             │  |
|  │      └───────────────┘              │  |
|  │                                     │  |
|  │    11 de 12 tomas completadas       │  |
|  │    Adherencia BUENA                 │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  Cronologia del dia                       |
|  ─────────────────────────────────────    |
|                                           |
|  07:00 ──●─────────────────────────────   |  <- Completada
|          │                                |
|  ┌───────┴─────────────────────────────┐  |
|  │  ✓ Metformina 850mg                 │  |
|  │    Tomada a las 07:05               │  |
|  │    5 min tarde                      │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  08:00 ──●─────────────────────────────   |
|          │                                |
|  ┌───────┴─────────────────────────────┐  |
|  │  ✓ Lisinopril 10mg                  │  |
|  │    Tomada a las 08:00               │  |
|  │    A tiempo                         │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  ┌───────┴─────────────────────────────┐  |
|  │  ✓ Omeprazol 20mg                   │  |
|  │    Tomada a las 08:02               │  |
|  │    A tiempo                         │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  14:00 ──○─────────────────────────────   |  <- Omitida
|          │                                |
|  ┌───────┴─────────────────────────────┐  |
|  │  ✗ Metformina 850mg                 │  |
|  │    Omitida                          │  |
|  │    Razon: No registrada             │  |
|  │            [Agregar razon]          │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  20:00 ──●─────────────────────────────   |
|          │                                |
|  ┌───────┴─────────────────────────────┐  |
|  │  ✓ Atorvastatina 20mg               │  |
|  │    Tomada a las 20:15               │  |
|  │    15 min tarde                     │  |
|  └─────────────────────────────────────┘  |
|                                           |
+------------------------------------------+

2.2. Estado: Dia Futuro (Sin Datos)¶

+------------------------------------------+
|  [<]    Jueves, 5 Dic                     |
+------------------------------------------+
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │                                     │  |
|  │      ┌───────────────┐              │  |
|  │     ╱     - - -       ╲             │  |
|  │    │       ---%       │             │  |
|  │     ╲                 ╱             │  |
|  │      └───────────────┘              │  |
|  │                                     │  |
|  │    Dia futuro - sin datos aun       │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  Tomas programadas                        |
|  ─────────────────────────────────────    |
|                                           |
|  07:00 ──○─────────────────────────────   |
|  ┌─────────────────────────────────────┐  |
|  │  ○ Metformina 850mg                 │  |
|  │    Programada                       │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  ... (resto de tomas programadas)         |
|                                           |
+------------------------------------------+

3. Componentes UI¶

3.1. Day Summary Card¶

Propiedad	Valor
Componente	CMP-ADH-012 (DaySummaryCard) NUEVO
Background	Segun nivel adherencia
Circulo	120x120dp
Texto principal	Porcentaje
Texto secundario	"X de Y tomas"
Badge	Nivel adherencia

3.2. Timeline¶

Propiedad	Valor
Componente	CMP-ADH-013 (DoseTimeline) NUEVO
Layout	Vertical con linea conectora
Linea	2dp, neutral.300
Punto completado	12dp, success.500, filled
Punto omitido	12dp, error.500, outline
Punto pendiente	12dp, neutral.400, outline

3.3. Dose Card¶

Propiedad	Valor
Background	neutral.50
Border left	4dp, color segun estado
Padding	12dp
Icono estado	Check, X, Clock

Estados de Dosis:

Estado	Color	Icono	Border
A tiempo	success.500	✓	success.500
Tarde (<30min)	warning.500	✓	warning.500
Muy tarde (>30min)	warning.700	✓	warning.700
Omitida	error.500	✗	error.500
Pendiente	neutral.400	○	neutral.400

3.4. Add Reason Link¶

Propiedad	Valor
Visible	Solo en dosis omitidas sin razon
Texto	"Agregar razon"
Estilo	Link text, primary
Accion	Abrir modal razon

4. Comportamientos¶

4.1. Gestos¶

Gesto	Elemento	Accion
Tap	Dose card	Expandir detalles
Tap	"Agregar razon"	Modal de razon
Swipe left/right	Pantalla	Cambiar dia
Pull down	Pantalla	Refresh

+------------------------------------------+
|                                           |
|  Por que omitiste esta toma?              |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │ ○ Se me olvido                      │  |
|  │ ○ No tenia el medicamento           │  |
|  │ ○ Me senti mal                      │  |
|  │ ○ Estaba dormido/a                  │  |
|  │ ○ No estaba en casa                 │  |
|  │ ○ Otra razon                        │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  Nota adicional (opcional)                |
|  ┌─────────────────────────────────────┐  |
|  │                                     │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  [Cancelar]              [Guardar]        |
|                                           |
+------------------------------------------+

4.3. Navegacion entre Dias¶

Swipe left: Dia siguiente
Swipe right: Dia anterior
Limite: No navegar a futuro mas de 1 dia

5. Datos Requeridos¶

5.1. Input Data¶

interface DayDetailData {
  date: Date;
  dayOfWeek: string;
  formattedDate: string;  // "Martes, 3 Dic"

  // Summary
  adherencePercentage: number;
  adherenceLevel: 'EXCELLENT' | 'GOOD' | 'REGULAR' | 'LOW';
  dosesConfirmed: number;
  dosesScheduled: number;

  // Timeline
  doses: DoseRecord[];

  // Navigation
  hasPreviousDay: boolean;
  hasNextDay: boolean;
  isFutureDay: boolean;
}

interface DoseRecord {
  id: string;
  medicationId: string;
  medicationName: string;
  dosage: string;
  scheduledTime: string;      // "07:00"
  actualTime?: string;        // "07:05"
  status: 'ON_TIME' | 'LATE' | 'VERY_LATE' | 'SKIPPED' | 'PENDING';
  delayMinutes?: number;
  skipReason?: SkipReason;
  notes?: string;
}

interface SkipReason {
  code: string;
  label: string;
  notes?: string;
}

5.2. Output Events¶

Evento	Payload	Destino
onDoseTap	dose_id	Expandir
onAddReason	dose_id	Modal
onSaveReason	{dose_id, reason}	API
onDayChange	direction	Cambiar dia
onMedicationTap	medication_id	SCR-MED-002

6. Accesibilidad¶

6.1. Labels¶

Elemento	accessibilityLabel
Summary	"{fecha}, {X}% adherencia, {N} de {M} tomas"
Dose completada	"{medicamento}, tomada a las {hora}, {estado}"
Dose omitida	"{medicamento}, omitida, sin razon"
Timeline point	"Hora {time}, {estado}"

6.2. Orden de Foco¶

Back button
Summary card
Primera dosis (timeline)
Link agregar razon (si aplica)
... (resto de dosis)

Evento	Anuncio
Pantalla cargada	"{fecha}. {X}% adherencia. {N} tomas completadas de {M}"
Dia cambiado	"Mostrando {nueva_fecha}"
Razon guardada	"Razon guardada para {medicamento}"

7. Responsive Design¶

7.1. Breakpoints¶

Ancho	Layout
< 360dp	Timeline compacta
360-600dp	Layout default
> 600dp	Summary lado izquierdo, timeline lado derecho

8. Metricas¶

8.1. Analytics Events¶

Evento	Parametros
screen_view	screen_name: "day_detail", date
dose_tap	dose_id, status
reason_added	dose_id, reason_code
day_navigation	direction, from_date

9. Referencias¶

Documento generado por MobileUxUiDrone (Eight of Eight)