Pantalla: Adherencia por Medicamento¶

Identificador: SCR-ADH-002 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	Adherencia por Medicamento
Proposito	Vista de adherencia desglosada por cada medicamento con barras horizontales
Tipo	Tab Content (dentro de Dashboard)
Acceso	SCR-ADH-001 > Tab "Por Medicamento"
Prioridad	Alta

2. Wireframe ASCII¶

2.1. Estado: Lista con Medicamentos¶

+------------------------------------------+
|  [<]    Mi Adherencia              [...]  |
+------------------------------------------+
|                                           |
|  [General] [Por Med*] [Tendencias]        |  <- Tab activa
|  ─────────────────────────────────────    |
|                                           |
|  Periodo: Ultimos 30 dias         [v]     |  <- Period Selector
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  [Pill] Metformina 850mg            │  |
|  │  ████████████████████████░░░░ 94%   │  |
|  │  47 de 50 tomas  |  ↗ Mejorando     │  |  <- Medication Row
|  └─────────────────────────────────────┘  |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  [Tab] Lisinopril 10mg              │  |
|  │  █████████████████████████████ 98%  │  |
|  │  49 de 50 tomas  |  → Estable       │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  [Cap] Atorvastatina 20mg           │  |
|  │  █████████████████████░░░░░░░ 85%   │  |
|  │  42 de 50 tomas  |  ↘ Bajando       │  |  <- Con tendencia negativa
|  └─────────────────────────────────────┘  |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  [Cap] Omeprazol 20mg        [!]    │  |
|  │  ██████████████████░░░░░░░░░░ 78%   │  |
|  │  39 de 50 tomas  |  → Estable       │  |  <- Con alerta
|  │  ⚠️ Horario matutino problematico   │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  Promedio general: 89%                    |
|                                           |
+------------------------------------------+
| [Home] [Pills] [Calendar] [Stats*] [More] |
+------------------------------------------+

2.2. Estado: Detalle de Medicamento (Expansion)¶

+------------------------------------------+
|  [<]    Mi Adherencia              [...]  |
+------------------------------------------+
|                                           |
|  [General] [Por Med*] [Tendencias]        |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  [Cap] Omeprazol 20mg        [^]    │  <- Expanded
|  │  ██████████████████░░░░░░░░░░ 78%   │  |
|  │  39 de 50 tomas  |  → Estable       │  |
|  │  ─────────────────────────────────  │  |
|  │                                     │  |
|  │  Horarios                           │  |
|  │  ┌─────────────────────────────┐    │  |
|  │  │ 07:00 AM     ████░░░░ 65%  │    │  <- Por horario
|  │  └─────────────────────────────┘    │  |
|  │  ┌─────────────────────────────┐    │  |
|  │  │ 09:00 PM     █████████ 92% │    │  |
|  │  └─────────────────────────────┘    │  |
|  │                                     │  |
|  │  Patron detectado                   │  |
|  │  "Las tomas matutinas tienen 27%    │  |
|  │   menos adherencia"                 │  |
|  │                                     │  |
|  │  [Reportar problema]  [Ver detalle] │  |
|  └─────────────────────────────────────┘  |
|                                           |
+------------------------------------------+

3. Componentes UI¶

3.1. Period Selector¶

Propiedad	Valor
Componente	CMP-INP-006 (Dropdown Select)
Opciones	7 dias, 30 dias, 90 dias, 1 ano, Personalizado
Default	30 dias
Posicion	Top right del contenido

3.2. Medication Adherence Row (Componente Nuevo)¶

Propiedad	Valor
Componente	CMP-ADH-005 (MedicationAdherenceRow) NUEVO
Layout	Card expandible
Padding	16dp
Border radius	12dp
Separador	8dp entre cards

Elementos de la Row:

Elemento	Descripcion	Componente
Icono	Forma farmaceutica	CMP-DAT-006
Nombre	Nombre + dosis	Text, lg, medium
Barra	Barra de progreso horizontal	CMP-ADH-006
Porcentaje	Numero con color	Text, lg, bold
Detalle	"X de Y tomas"	Text, sm, secondary
Tendencia	Icono + texto	Ver tabla
Badge alerta	Si hay patron negativo	CMP-DAT-002
Expand icon	Chevron up/down	Icon 24dp

Indicadores de Tendencia:

Tendencia	Icono	Color	Texto
Mejorando	↗	success.500	"Mejorando"
Estable	→	neutral.500	"Estable"
Bajando	↘	error.500	"Bajando"

3.3. Horizontal Progress Bar (Componente Nuevo)¶

Propiedad	Valor
Componente	CMP-ADH-006 (HorizontalProgressBar) NUEVO
Height	8dp
Border radius	4dp
Background	neutral.200
Fill	Color segun porcentaje
Animacion	Fill de izquierda a derecha, 500ms

3.4. Expanded Detail Section¶

Propiedad	Valor
Animacion	Expand height, 200ms
Contenido	Horarios + patron + acciones
Separador	Linea 1dp neutral.200

4. Comportamientos¶

4.1. Gestos¶

Gesto	Elemento	Accion
Tap	Row (colapsada)	Expandir detalles
Tap	Row (expandida)	Colapsar
Tap	"Ver detalle"	Navegar a SCR-ADH-006 filtrado
Tap	"Reportar problema"	Navegar a SCR-ADH-005
Tap	Period selector	Abrir dropdown
Swipe left/right	Tab content	Cambiar tab

4.2. Ordenamiento¶

Lista ordenada por:

Adherencia menor primero (priorizar problematicos)
Opcion de ordenar por nombre alfabetico

4.3. Cambio de Periodo¶

Al cambiar periodo:

Mostrar loading state en barras
Recalcular porcentajes
Animar barras a nuevos valores

5. Datos Requeridos¶

5.1. Input Data¶

interface MedicationAdherenceData {
  period: {
    type: 'week' | 'month' | 'quarter' | 'year' | 'custom';
    start: Date;
    end: Date;
  };
  medications: MedicationAdherence[];
  averageAdherence: number;
}

interface MedicationAdherence {
  medicationId: string;
  name: string;
  dosage: string;
  icon: MedicationIcon;

  // Metricas
  adherencePercentage: number;
  dosesConfirmed: number;
  dosesScheduled: number;

  // Tendencia
  trend: 'IMPROVING' | 'STABLE' | 'DECLINING';
  trendPercentage: number;  // +5%, -3%, etc

  // Detalles por horario
  scheduleAdherence: ScheduleAdherence[];

  // Alertas
  hasAlert: boolean;
  alertMessage?: string;

  // Patron detectado
  patternDetected?: string;
}

interface ScheduleAdherence {
  time: string;           // "07:00"
  label?: string;         // "Desayuno"
  adherencePercentage: number;
  isProblematic: boolean; // < 80%
}

5.2. Output Events¶

Evento	Payload	Destino
onMedicationExpand	medication_id	Interno
onMedicationCollapse	medication_id	Interno
onViewDetail	medication_id	SCR-ADH-006
onReportProblem	medication_id	SCR-ADH-005
onPeriodChange	period	Recalcular

6. Accesibilidad¶

6.1. Labels y Hints¶

Elemento	accessibilityLabel	accessibilityHint
Row	"{nombre}, {X}% adherencia, {tendencia}"	"Toca para expandir detalles"
Barra	"{X}% completado"	-
Tendencia	"Tendencia {direccion}"	-
Alerta	"Alerta: {mensaje}"	"Toca para mas informacion"

6.2. Orden de Foco¶

Period selector
Primera medication row
(Si expandida) Horarios
(Si expandida) Botones de accion
Segunda medication row
... (continua)

Evento	Anuncio
Row expandida	"Detalles expandidos para {nombre}"
Row colapsada	"Detalles colapsados"
Periodo cambiado	"Mostrando ultimos {N} dias"

7. Responsive Design¶

7.1. Breakpoints¶

Ancho	Layout
< 360dp	Barra mas delgada, texto compacto
360-600dp	Layout default
> 600dp	Cards en grid 2 columnas

8. Metricas¶

8.1. Analytics Events¶

Evento	Parametros
tab_view	tab: "by_medication"
medication_expand	medication_id, percentage
report_problem_tap	medication_id
period_change	from_period, to_period

9. Referencias¶

Documento generado por MobileUxUiDrone (Eight of Eight)