Pantalla: Medicamento Personalizado
Identificador: SCR-MED-006
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 |
Medicamento Personalizado |
| Proposito |
Formulario para agregar medicamentos no encontrados en catalogo |
| Tipo |
Full Screen Form |
| Acceso |
Buscar Catalogo > "No encuentro mi medicamento" |
| Prioridad |
Media |
2. Wireframe ASCII
+------------------------------------------+
| [X] Agregar Medicamento |
+------------------------------------------+
| |
| +------------------------------------+ |
| | [i] Este medicamento no esta en ||
| | nuestro catalogo. Ingresa los || <- Info banner
| | datos manualmente. ||
| +------------------------------------+ |
| |
| Nombre del medicamento * |
| +------------------------------------+ |
| | Ej: Paracetamol | |
| +------------------------------------+ |
| |
| Forma farmaceutica * |
| +--------+ +--------+ +--------+ |
| | Tableta| |Capsula | |Jarabe | |
| +--------+ +--------+ +--------+ | <- Chips visuales
| +--------+ +--------+ +--------+ |
| | Gotas | |Inyect. | | Otro | |
| +--------+ +--------+ +--------+ |
| |
| Concentracion |
| +--------------------+ +--------------+ |
| | 500 | | mg [v] | | <- Input + dropdown
| +--------------------+ +--------------+ |
| |
| Via de administracion * |
| +--------+ +--------+ +--------+ |
| | Oral | | Topica | |Inyect. | | <- Chips
| +--------+ +--------+ +--------+ |
| |
| Nombre comercial (opcional) |
| +------------------------------------+ |
| | Ej: Tylenol | |
| +------------------------------------+ |
| |
| Foto del medicamento (opcional) |
| +------------------------------------+ |
| | +----------+ ||
| | | [Camera] | Tomar foto o || <- Image picker
| | | Agregar | seleccionar ||
| | +----------+ ||
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Continuar] | | <- Primary CTA
| +------------------------------------+ |
| |
+------------------------------------------+
2.2. Con Foto Agregada
+------------------------------------------+
| [X] Agregar Medicamento |
+------------------------------------------+
| |
| ... (campos anteriores) ... |
| |
| Foto del medicamento |
| +------------------------------------+ |
| | +----------------------+ [X] ||
| | | | ||
| | | [Foto tomada | || <- Preview
| | | del medicamento]| ||
| | | | ||
| | +----------------------+ ||
| | ||
| | [Cambiar foto] ||
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Continuar] | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.3. Estado de Validacion
+------------------------------------------+
| [X] Agregar Medicamento |
+------------------------------------------+
| |
| Nombre del medicamento * |
| +------------------------------------+ |
| | | | <- Campo vacio
| +------------------------------------+ |
| [!] Este campo es obligatorio | <- Error inline
| |
| Forma farmaceutica * |
| +--------+ +--------+ +--------+ |
| | Tableta| |Capsula | |Jarabe | | <- Ninguno seleccionado
| +--------+ +--------+ +--------+ |
| [!] Selecciona una forma | <- Error inline
| |
| ... (resto del formulario) ... |
| |
| +------------------------------------+ |
| | [Continuar] | | <- Deshabilitado
| +------------------------------------+ |
| |
+------------------------------------------+
3. Componentes UI
3.1. Info Banner
| Propiedad |
Valor |
| Componente |
Custom info card |
| Background |
info.light |
| Icono |
Info icon |
| Texto |
Explicativo, no alarmista |
3.2. Text Inputs
| Campo |
Tipo |
Validacion |
| Nombre |
CMP-INP-001 |
Requerido, 2-100 chars |
| Concentracion |
CMP-INP-001 + Dropdown |
Numerico positivo |
| Nombre comercial |
CMP-INP-001 |
Opcional, 2-100 chars |
| Propiedad |
Valor |
| Componente |
CMP-DAT-003 |
| Variante |
filter con iconos |
| Selection |
Single, required |
| Layout |
Flow wrap |
Opciones:
| Forma |
Icono |
| Tableta |
pill |
| Capsula |
capsule |
| Jarabe |
liquid |
| Gotas |
drops |
| Inyectable |
injection |
| Crema/Pomada |
cream |
| Parche |
patch |
| Inhalador |
inhaler |
| Otro |
generic |
3.4. Unit Dropdown
| Propiedad |
Valor |
| Componente |
CMP-INP-006 |
| Variante |
single |
| Opciones |
mg, g, ml, UI, %, mcg, otro |
3.5. Administration Route Chips
| Propiedad |
Valor |
| Componente |
CMP-DAT-003 |
| Selection |
Single, required |
Opciones:
| Via |
Descripcion |
| Oral |
Por boca |
| Topica |
Sobre la piel |
| Inyectable |
Subcutanea/intramuscular |
| Intravenosa |
Por via IV |
| Inhalada |
Por via respiratoria |
| Oftalmica |
En los ojos |
| Otica |
En los oidos |
| Rectal |
Por via rectal |
| Otra |
Especificar |
3.6. Image Picker
| Propiedad |
Valor |
| Tipo |
Custom component |
| Opciones |
Camara, Galeria |
| Preview |
Thumbnail con X para eliminar |
| Formatos |
JPEG, PNG |
| Max size |
5MB |
| Compresion |
Si (80% quality) |
4. Validaciones
4.1. Campos Obligatorios
| Campo |
Validacion |
Mensaje Error |
| Nombre |
No vacio, 2-100 chars |
"Ingresa el nombre del medicamento" |
| Forma |
Seleccion requerida |
"Selecciona una forma farmaceutica" |
| Via admin |
Seleccion requerida |
"Selecciona la via de administracion" |
4.2. Campos Opcionales
| Campo |
Validacion |
Comportamiento |
| Concentracion |
Numero positivo si existe |
Warning si vacio |
| Nombre comercial |
2-100 chars si existe |
Skip si vacio |
| Foto |
Formato valido |
Skip si no existe |
4.3. Validacion en Tiempo Real
function validateField(field: string, value: any): ValidationResult {
// Validar mientras usuario escribe
// Mostrar error solo despues de blur
// Habilitar boton solo si todo valido
}
5. Flujo de Datos
interface CustomMedicationFormData {
prefilledName?: string; // De busqueda fallida
suggestedForms: PharmaceuticalForm[];
suggestedRoutes: AdministrationRoute[];
}
interface CustomMedicationState {
name: string;
pharmaceuticalForm: PharmaceuticalForm | null;
concentration: string;
concentrationUnit: string;
administrationRoute: AdministrationRoute | null;
commercialName: string;
photo: ImageFile | null;
// Validation state
errors: Record<string, string>;
touched: Record<string, boolean>;
isValid: boolean;
}
5.3. Output Data
interface CustomMedication {
name: string;
pharmaceuticalForm: PharmaceuticalForm;
concentration?: string;
concentrationUnit?: string;
administrationRoute: AdministrationRoute;
commercialName?: string;
photoUri?: string;
isCustom: true;
needsReview: true; // Flag para matching posterior
}
6. Comportamientos
6.1. Foto del Medicamento
- Tap en area de foto
- Action sheet: [Tomar foto] [Elegir de galeria] [Cancelar]
- Si camara: abrir camara, capturar, confirmar
- Si galeria: abrir picker, seleccionar
- Mostrar preview con opcion de eliminar
- Comprimir imagen antes de guardar
6.2. Continuar al Siguiente Paso
- Validar todos los campos
- Si hay errores, mostrar y scroll al primero
- Si valido, crear objeto CustomMedication
- Navegar a SCR-MED-003 (paso 2) con datos
6.3. Cancelar
- Tap en X
- Si hay datos ingresados, mostrar confirmacion
- Si confirma, descartar y volver a SCR-MED-005
- Si cancela, permanecer en formulario
7. Accesibilidad
7.1. Labels
| Elemento |
accessibilityLabel |
| Info banner |
"Informacion: este medicamento no esta en el catalogo" |
| Form chip |
"{forma}, {estado seleccion}" |
| Photo area |
"Agregar foto del medicamento, opcional" |
| Photo preview |
"Foto del medicamento agregada. Boton para eliminar" |
| Error |
"Error: {mensaje}" |
7.2. Orden de Foco
- Close button (X)
- Info banner
- Campo nombre
- Chips forma farmaceutica
- Campo concentracion
- Dropdown unidad
- Chips via administracion
- Campo nombre comercial
- Area de foto
- Boton Continuar
7.3. Anuncios
| Evento |
Anuncio |
| Error mostrado |
"Error en {campo}: {mensaje}" |
| Foto agregada |
"Foto agregada" |
| Foto eliminada |
"Foto eliminada" |
| Validacion exitosa |
"Formulario valido, puedes continuar" |
8. Disclaimer y Advertencias
8.1. Texto de Disclaimer
"Al agregar un medicamento personalizado, MedTime no podra verificar automaticamente interacciones con otros medicamentos. Consulta siempre con tu medico o farmaceutico."
8.2. Ubicacion
- Mostrar al final del formulario, antes del boton Continuar
- Texto pequeno (sm), color secondary
- Icono de advertencia suave
9. Metricas
9.1. Analytics Events
| Evento |
Parametros |
| custom_form_start |
source: "search_no_results" |
| form_field_complete |
field_name |
| photo_added |
source: "camera" |
| photo_removed |
- |
| form_validation_error |
field_name, error_type |
| custom_form_complete |
has_photo, has_concentration |
| custom_form_abandon |
fields_completed, time_spent |
10. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)