Pantalla: Lista de Medicamentos

Identificador: SCR-MED-001 Modulo: MTS-MED-001 - Gestion de Medicamentos Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Estado: Especificado

---

1. Informacion General

Atributo	Valor
Nombre	Lista de Medicamentos
Proposito	Vista principal de todos los medicamentos activos del paciente
Tipo	Tab Screen (navegacion principal)
Acceso	Bottom Navigation > Medicamentos
Prioridad	Alta

---

2. Wireframe ASCII

2.1. Estado: Lista con Medicamentos

+------------------------------------------+
|  [<]    Mis Medicamentos           [...]  |  <- Top App Bar
+------------------------------------------+
|                                           |
|  +------------------------------------+   |
|  | [Q] Buscar medicamento...         |   |  <- Search Bar
|  +------------------------------------+   |
|                                           |
|  Activos (4)                         [^]  |  <- Section Header
|  +------------------------------------+   |
|  | [Pill]  Metformina                    ||
|  |         850mg - 2x dia                ||  <- MedicationCard
|  |         Proxima: 14:00      [Tomar]   ||
|  +------------------------------------+   |
|                                           |
|  +------------------------------------+   |
|  | [Cap]   Losartan           [!]        ||
|  |         50mg - 1x dia                 ||  <- Card con alerta
|  |         Proxima: 08:00      [Tomar]   ||
|  +------------------------------------+   |
|                                           |
|  +------------------------------------+   |
|  | [Drop]  Gotas Oftalmicas              ||
|  |         2 gotas - 3x dia              ||
|  |         Proxima: 20:00      [Tomar]   ||
|  +------------------------------------+   |
|                                           |
|  +------------------------------------+   |
|  | [Inj]   Insulina Glargina             ||
|  |         10 UI - 1x dia                ||
|  |         Proxima: 22:00      [Tomar]   ||
|  +------------------------------------+   |
|                                           |
|                                     (+)   |  <- FAB
+------------------------------------------+
| [Home] [Pills*] [Calendar] [Stats] [More]|  <- Bottom Nav
+------------------------------------------+

2.2. Estado: Lista Vacia (Empty State)

+------------------------------------------+
|  [<]    Mis Medicamentos           [...]  |
+------------------------------------------+
|                                           |
|                                           |
|                                           |
|            +----------------+             |
|            |                |             |
|            |   [Ilustracion |             |
|            |    Medicinas]  |             |
|            |                |             |
|            +----------------+             |
|                                           |
|         Aun no tienes medicamentos        |
|                                           |
|      Agrega tu primer medicamento para    |
|      comenzar a llevar el control de      |
|           tu tratamiento                  |
|                                           |
|      +----------------------------+       |
|      |   (+) Agregar Medicamento  |       |  <- Primary CTA
|      +----------------------------+       |
|                                           |
|                                           |
|                                           |
+------------------------------------------+
| [Home] [Pills*] [Calendar] [Stats] [More]|
+------------------------------------------+

2.3. Estado: Cargando (Skeleton)

+------------------------------------------+
|  [<]    Mis Medicamentos           [...]  |
+------------------------------------------+
|                                           |
|  +------------------------------------+   |
|  | [============================]    |   |
|  +------------------------------------+   |
|                                           |
|  [===========]                            |
|  +------------------------------------+   |
|  | [##]  [==================]            ||
|  |       [============]                  ||
|  |       [========]           [=====]    ||
|  +------------------------------------+   |
|                                           |
|  +------------------------------------+   |
|  | [##]  [==================]            ||
|  |       [============]                  ||
|  |       [========]           [=====]    ||
|  +------------------------------------+   |
|                                           |
|  +------------------------------------+   |
|  | [##]  [==================]            ||
|  |       [============]                  ||
|  |       [========]           [=====]    ||
|  +------------------------------------+   |
|                                           |
|                                           |
+------------------------------------------+
| [Home] [Pills*] [Calendar] [Stats] [More]|
+------------------------------------------+

---

3. Componentes UI

3.1. Top App Bar

Propiedad	Valor
Componente	CMP-NAV-002 (Top App Bar)
Variante	regular
Titulo	"Mis Medicamentos"
Leading	Back arrow (solo si viene de otra pantalla)
Trailing	Overflow menu (...)

Menu Overflow:

• Ver historial
• Ver interacciones
• Ordenar por...
• Configuracion

3.2. Search Bar

Propiedad	Valor
Componente	CMP-INP-002 (Search Field)
Variante	persistent
Placeholder	"Buscar medicamento..."
Icono	Magnifying glass
Accion	Filtrado local en lista

3.3. Section Header

Propiedad	Valor
Texto	"Activos (N)" donde N = count
Accion derecha	Expand/collapse
Tipografia	lg, medium weight

3.4. Medication Card

Propiedad	Valor
Componente	CMP-CRD-001 (Medication Card)
Variante	with_actions
Touch target	Full card tappable (56dp height min)

Contenido de la Card:

Elemento	Descripcion	Componente
Icono izquierdo	Forma farmaceutica	CMP-DAT-006
Nombre	Nombre del medicamento	Text, lg
Dosis	"850mg - 2x dia"	Text, sm, secondary
Proxima toma	"Proxima: 14:00"	Text, sm, primary
Badge alerta	Si hay interaccion	CMP-DAT-002
Boton Tomar	Quick action	CMP-BTN-005

Estados de la Card:

Estado	Visual
Normal	Background neutral.50
Pressed	Background neutral.200
Con alerta	Badge rojo + borde warning
Pausado	Opacity 0.6 + label "Pausado"
Proxima toma cercana	Highlight primary.light

3.5. Floating Action Button

Propiedad	Valor
Componente	CMP-BTN-004 (FAB)
Variante	regular
Icono	Plus (+)
Posicion	Bottom right, 16dp margin
Accion	Navegar a SCR-MED-003

3.6. Bottom Navigation

Propiedad	Valor
Componente	CMP-NAV-001 (Bottom Navigation)
Item activo	Medicamentos (Pills)
Badge	Si hay alertas pendientes

---

4. Comportamientos

4.1. Gestos

Gesto	Elemento	Accion
Tap	Medication Card	Navegar a SCR-MED-002
Swipe Left	Medication Card	Revelar acciones (Editar, Eliminar)
Long Press	Medication Card	Mostrar context menu
Pull Down	Lista	Refresh datos
Tap	FAB	Navegar a SCR-MED-003

4.2. Acciones de Swipe

+------------------------------------+
| [Edit]  |  Card Content   | [Del] |
+------------------------------------+
     ^                           ^
   Azul                        Rojo

4.3. Scroll Behavior

• Lista scrolleable verticalmente
• FAB se oculta al scroll down, aparece al scroll up
• Top App Bar permanece fija
• Search bar se puede colapsar al scroll (opcional)

---

5. Estados y Transiciones

5.1. Diagrama de Estados

stateDiagram-v2
    [*] --> Loading: Abrir pantalla
    Loading --> Empty: 0 medicamentos
    Loading --> Loaded: >= 1 medicamento
    Loading --> Error: Fallo carga

    Empty --> Loaded: Agregar medicamento
    Loaded --> Empty: Eliminar ultimo
    Loaded --> Loaded: Agregar/editar
    Error --> Loading: Reintentar

    Loaded --> Offline: Perder conexion
    Offline --> Loaded: Recuperar conexion

5.2. Transiciones

De	A	Trigger	Animacion
Loading	Loaded	Datos listos	Fade in cards
Lista	Detalle	Tap card	Shared element transition
Lista	Agregar	Tap FAB	Bottom sheet slide up
Card	Swipe actions	Swipe left	Reveal animation

---

6. Datos Requeridos

6.1. Input Data

interface MedicationListData {
  medications: PatientMedication[];
  hasInteractions: boolean;
  pendingRefills: number;
}

interface PatientMedication {
  id: string;
  name: string;
  customName?: string;
  dosage: string;
  frequency: string;
  nextDose: Date;
  icon: MedicationIcon;
  color?: string;
  status: 'ACTIVE' | 'PAUSED' | 'COMPLETED';
  hasAlert: boolean;
  alertType?: 'interaction' | 'refill' | 'expiry';
}

6.2. Output Events

Evento	Payload	Destino
onMedicationTap	medication_id	SCR-MED-002
onAddTap	-	SCR-MED-003
onQuickTake	medication_id	API + Refresh
onSwipeEdit	medication_id	SCR-MED-002 (edit mode)
onSwipeDelete	medication_id	Confirmation dialog
onRefresh	-	Reload data

---

7. Accesibilidad

7.1. Labels y Hints

Elemento	accessibilityLabel	accessibilityHint
Search	"Buscar medicamento"	"Escribe para filtrar tu lista"
Card	"{nombre}, {dosis}, proxima toma {hora}"	"Toca para ver detalles"
Badge alerta	"Alerta de {tipo}"	"Toca la tarjeta para ver detalles"
FAB	"Agregar medicamento"	"Abre formulario de nuevo medicamento"
Boton Tomar	"Registrar toma de {nombre}"	"Marca esta dosis como tomada"

7.2. Orden de Foco

1. Top App Bar (back si existe)
2. Search bar
3. Section header
4. Primera medication card
5. Boton tomar de primera card
6. Segunda medication card
7. ... (continua)
8. FAB (ultimo)

7.3. Screen Reader Announcements

Evento	Anuncio
Lista cargada	"{N} medicamentos activos"
Toma registrada	"Toma de {nombre} registrada"
Medicamento eliminado	"{nombre} eliminado de tu lista"
Error	"Error al cargar. Toca para reintentar"

7.4. Contraste y Tamanos

Elemento	Min Size	Contraste
Card text (nombre)	16sp	4.5:1
Card text (dosis)	14sp	4.5:1
Iconos	24x24dp	3:1
Touch target cards	56dp height	-
FAB	56x56dp	-
Boton Tomar	44x44dp	4.5:1

---

8. Responsive Design

8.1. Breakpoints

Ancho	Layout
< 360dp	Cards full width, texto compacto
360-600dp	Cards con padding normal
> 600dp (tablet)	Grid 2 columnas

8.2. Orientacion

Orientacion	Adaptacion
Portrait	Layout default
Landscape	FAB a la derecha, mas items visibles

---

9. Metricas

9.1. Performance

Metrica	Objetivo
Time to Interactive	< 1.5s
First Contentful Paint	< 1s
Scroll FPS	60fps
Memory (lista 50 items)	< 50MB

9.2. Analytics Events

Evento	Parametros
screen_view	screen_name: "medication_list"
medication_tap	medication_id
quick_take	medication_id, time_to_action
search_use	query_length
fab_tap	-

---

10. Referencias

• UIF-MED-001 - Flujo de Navegacion
• MTS-MED-001 - Especificacion Funcional
• CMP-CRD-001 - Medication Card
• 03-accessibility-guidelines.md

---

Documento generado por MobileUxUiDrone (Eight of Eight)