Pantalla: Agregar Medicamento
Identificador: SCR-MED-003
Modulo: MTS-MED-001 - Gestion de Medicamentos
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
Estado: Especificado
| Atributo |
Valor |
| Nombre |
Agregar Medicamento |
| Proposito |
Wizard para agregar un nuevo medicamento al tratamiento |
| Tipo |
Full Screen / Bottom Sheet |
| Acceso |
Lista > FAB + |
| Prioridad |
Alta |
2. Wireframe ASCII
2.1. Paso 1: Seleccionar Medicamento
+------------------------------------------+
| [X] Agregar Medicamento 1/3 | <- Top App Bar con paso
+------------------------------------------+
| |
| +------------------------------------+ |
| | [Q] Buscar medicamento... | | <- Search (auto-focus)
| +------------------------------------+ |
| |
| Recientes |
| +------------------------------------+ |
| | [Pill] Paracetamol 500mg | |
| | [Cap] Omeprazol 20mg | | <- Lista de recientes
| | [Pill] Aspirina 100mg | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [+] Agregar medicamento | | <- Opcion manual
| | personalizado | |
| +------------------------------------+ |
| |
| |
| |
| |
| |
| |
| |
+------------------------------------------+
2.2. Paso 1b: Resultados de Busqueda
+------------------------------------------+
| [X] Agregar Medicamento 1/3 |
+------------------------------------------+
| |
| +------------------------------------+ |
| | [Q] metfor [x] | | <- Busqueda activa
| +------------------------------------+ |
| |
| 3 resultados para "metfor" |
| +------------------------------------+ |
| | [Pill] Metformina 500mg | |
| | Generico | |
| +------------------------------------+ |
| +------------------------------------+ |
| | [Pill] Metformina 850mg | | <- Resultado
| | Generico | |
| +------------------------------------+ |
| +------------------------------------+ |
| | [Pill] Metformina 1000mg | |
| | Generico | |
| +------------------------------------+ |
| |
| No encuentras tu medicamento? |
| +------------------------------------+ |
| | [+] Agregar personalizado | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.3. Paso 2: Configurar Dosis
+------------------------------------------+
| [<] Agregar Medicamento 2/3 |
+------------------------------------------+
| |
| +------------------------------------+ |
| | [Pill] Metformina 850mg ||
| | Generico || <- Medicamento seleccionado
| +------------------------------------+ |
| |
| Dosis por toma * |
| +------------------------------------+ |
| | 850 | mg [v] | | <- Input + dropdown
| +------------------------------------+ |
| |
| Frecuencia * |
| +------------------+ +----------------+ |
| | [x] Diaria | | [ ] Intervalo | |
| +------------------+ +----------------+ | <- Chips seleccion
| +------------------+ +----------------+ |
| | [ ] Dias semana | | [ ] Ciclos | |
| +------------------+ +----------------+ |
| |
| Cuantas veces al dia? * |
| +------+ +------+ +------+ +------+ |
| | 1x | | 2x | | 3x | | 4x | | <- Quick select
| +------+ +------+ +------+ +------+ |
| |
| Instrucciones especiales |
| +------------------------------------+ |
| | Ej: Tomar con alimentos | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Siguiente] | | <- Primary CTA
| +------------------------------------+ |
| |
+------------------------------------------+
2.4. Paso 3: Configurar Horarios
+------------------------------------------+
| [<] Agregar Medicamento 3/3 |
+------------------------------------------+
| |
| Configura tus horarios |
| |
| Metformina 850mg - 2 veces al dia | <- Resumen
| |
| Toma 1 |
| +------------------------------------+ |
| | [Clock] 08:00 AM [>] | | <- Time picker trigger
| | Etiqueta: Desayuno | |
| +------------------------------------+ |
| |
| Toma 2 |
| +------------------------------------+ |
| | [Clock] 08:00 PM [>] | |
| | Etiqueta: Cena | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Bell] Activar recordatorios | | <- Toggle
| | para este medicamento | |
| +------------------------------------+ |
| |
| Fecha de inicio |
| +------------------------------------+ |
| | [Cal] Hoy (05/12/2025) [>] | |
| +------------------------------------+ |
| |
| Fecha de fin (opcional) |
| +------------------------------------+ |
| | [Cal] Sin fecha de fin [>] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Guardar] | | <- Primary CTA
| +------------------------------------+ |
| |
+------------------------------------------+
2.5. Estado: Verificando Interacciones
+------------------------------------------+
| [<] Agregar Medicamento 3/3 |
+------------------------------------------+
| |
| +------------------------------------+ |
| | ||
| | [Spinner] ||
| | ||
| | Verificando interacciones... || <- Loading overlay
| | ||
| | Esto solo toma un momento ||
| | ||
| +------------------------------------+ |
| |
+------------------------------------------+
2.6. Estado: Interaccion Detectada
+------------------------------------------+
| [X] Atencion |
+------------------------------------------+
| |
| +------------------------------------+ |
| | [!] INTERACCION DETECTADA ||
| | ||
| | Metformina + Losartan || <- Par de medicamentos
| | ||
| | Severidad: MODERADA ||
| +------------------------------------+ |
| |
| Que significa? |
| +------------------------------------+ |
| | Esta combinacion puede aumentar ||
| | el efecto hipoglucemiante. ||
| | Monitorea tus niveles de azucar. || <- Explicacion clara
| +------------------------------------+ |
| |
| Recomendacion |
| +------------------------------------+ |
| | Consulta con tu medico si notas ||
| | mareos o debilidad. ||
| +------------------------------------+ |
| |
| [i] Esta informacion es orientativa. |
| Consulta siempre con tu medico. |
| |
| +------------------------------------+ |
| | [Cancelar] [Agregar de todos | |
| | modos] | |
| +------------------------------------+ |
| |
+------------------------------------------+
3. Componentes UI
3.1. Progress Indicator
| Propiedad |
Valor |
| Tipo |
Step indicator (1/3, 2/3, 3/3) |
| Posicion |
Top App Bar trailing |
| Estilo |
"Paso X de Y" o dots |
3.2. Search Field
| Propiedad |
Valor |
| Componente |
CMP-INP-002 |
| Variante |
persistent |
| Auto-focus |
Si (en paso 1) |
| Debounce |
300ms |
| Min chars |
2 |
3.3. Medication Result Item
| Elemento |
Especificacion |
| Layout |
Row con icono, textos |
| Icono |
CMP-DAT-006 (32x32dp) |
| Nombre |
Text lg, primary |
| Subtitulo |
Text sm, secondary |
| Touch target |
Full row, 56dp height |
3.4. Frequency Chips
| Propiedad |
Valor |
| Componente |
CMP-DAT-003 (Chip) |
| Variante |
filter |
| Selection |
Single select |
| Opciones |
Diaria, Intervalo, Dias semana, Ciclos, Condicional |
3.5. Times Per Day Selector
| Propiedad |
Valor |
| Tipo |
Segmented button |
| Opciones |
1x, 2x, 3x, 4x, Otro |
| Touch target |
44x44dp cada opcion |
3.6. Time Picker Trigger
| Propiedad |
Valor |
| Componente |
Custom ListTile |
| Icono |
Clock |
| Texto |
Hora formateada (08:00 AM) |
| Accion |
Open CMP-INP-004 (Time Picker) |
3.7. Interaction Alert Modal
| Propiedad |
Valor |
| Componente |
CMP-FBK-002 (Dialog) |
| Variante |
alert |
| Severity colors |
Si (border segun severidad) |
| Actions |
Cancelar (secondary), Agregar (primary/warning) |
4. Flujo de Estados
stateDiagram-v2
[*] --> Step1_Search
Step1_Search --> Step1_Results: Buscar
Step1_Results --> Step2_Dose: Seleccionar
Step1_Search --> Step1_Custom: "Personalizado"
Step1_Custom --> Step2_Dose: Completar
Step2_Dose --> Step2_Dose: Validar campos
Step2_Dose --> Step3_Schedule: Siguiente (valido)
Step3_Schedule --> Verifying: Guardar
Verifying --> InteractionModal: Interaccion detectada
Verifying --> Success: Sin interacciones
InteractionModal --> Success: Aceptar riesgo
InteractionModal --> Step3_Schedule: Cancelar
Success --> [*]: Cerrar wizard
5. Validaciones
5.1. Paso 2 - Dosis
| Campo |
Regla |
Error |
| Dosis |
Requerido, > 0 |
"Ingresa una dosis valida" |
| Unidad |
Requerido |
"Selecciona una unidad" |
| Frecuencia |
Requerido |
"Selecciona una frecuencia" |
| Veces al dia |
Requerido si frecuencia=Diaria |
"Indica cuantas veces" |
5.2. Paso 3 - Horarios
| Campo |
Regla |
Error |
| Horarios |
Al menos 1 |
"Configura al menos un horario" |
| Fecha inicio |
Requerido, >= hoy |
"Fecha invalida" |
| Fecha fin |
> fecha inicio (si existe) |
"Fecha fin debe ser posterior" |
6. Datos Requeridos
interface AddMedicationWizardData {
recentMedications: CatalogMedication[];
existingMedications: string[]; // IDs para verificar interacciones
suggestedTimes: string[]; // Basado en habitos del usuario
defaultReminders: boolean;
}
interface AddMedicationFormState {
step: 1 | 2 | 3;
selectedMedication: CatalogMedication | null;
isCustom: boolean;
// Step 2
dosage: string;
dosageUnit: DosageUnit;
frequencyType: FrequencyType;
timesPerDay: number;
instructions: string;
// Step 3
schedules: ScheduleTime[];
remindersEnabled: boolean;
startDate: Date;
endDate: Date | null;
// State
isSearching: boolean;
isVerifying: boolean;
isSaving: boolean;
interactionWarning: InteractionWarning | null;
}
6.3. Output Events
| Evento |
Payload |
Destino |
| onSearch |
query |
API search |
| onSelectMedication |
medication_id |
Next step |
| onCustomMedication |
- |
Custom form |
| onSave |
MedicationConfig |
API + close |
| onCancel |
- |
Close wizard |
| onAcceptInteraction |
interaction_id |
Continue save |
7. Accesibilidad
7.1. Navegacion del Wizard
- Back button vuelve al paso anterior
- X cierra el wizard con confirmacion si hay datos
- Tab navega entre campos del paso actual
- Enter en ultimo campo avanza al siguiente paso
7.2. Labels
| Elemento |
accessibilityLabel |
| Step indicator |
"Paso {n} de 3: {nombre_paso}" |
| Search |
"Buscar medicamento en catalogo" |
| Result item |
"{nombre}, {concentracion}, {tipo}" |
| Frequency chip |
"{frecuencia}, {estado seleccion}" |
| Time picker |
"Hora de toma {n}: {hora actual}" |
| Save button |
"Guardar medicamento" |
7.3. Anuncios
| Evento |
Anuncio |
| Cambio de paso |
"Paso {n} de 3: {titulo}" |
| Resultados busqueda |
"{n} resultados encontrados" |
| Sin resultados |
"No se encontraron resultados" |
| Verificando |
"Verificando interacciones" |
| Interaccion |
"Atencion: interaccion {severidad} detectada" |
| Guardado |
"Medicamento agregado exitosamente" |
8. Time Picker Modal
8.1. Wireframe
+----------------------------------+
| |
| Seleccionar hora |
| |
| +----+ +----+ |
| | 08 | | 00 | |
| +----+ +----+ | <- Wheels/Input
| HH : MM |
| |
| [ ] AM [x] PM |
| |
| Sugerencias: |
| [Desayuno 8am] [Comida 2pm] | <- Quick picks
| [Cena 8pm] |
| |
| [Cancelar] [Aceptar] |
| |
+----------------------------------+
8.2. Especificaciones
| Propiedad |
Valor |
| Componente |
CMP-INP-004 |
| Variante |
dial o input (preferencia usuario) |
| Quick picks |
Basados en eventos del dia |
| Touch targets |
48x48dp minimo |
9. Metricas
9.1. Analytics Events
| Evento |
Parametros |
| wizard_start |
entry_point |
| search_query |
query_length, results_count |
| medication_select |
source: "search" |
| step_complete |
step_number, time_spent |
| interaction_shown |
severity, medication_pair |
| interaction_accepted |
severity, medication_pair |
| wizard_complete |
total_time, steps_back_count |
| wizard_abandon |
step_abandoned, time_spent |
9.2. Funnel
Step 1: Seleccionar (100%)
|
v
Step 2: Configurar (85%)
|
v
Step 3: Horarios (78%)
|
v
Completado (75%)
10. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)