Pantalla: Detalle de Medicamento
Identificador: SCR-MED-002
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 |
Detalle de Medicamento |
| Proposito |
Vista completa de un medicamento con todas sus configuraciones |
| Tipo |
Detail Screen |
| Acceso |
Lista Medicamentos > Tap Card |
| Prioridad |
Alta |
2. Wireframe ASCII
2.1. Estado: Vista Completa
+------------------------------------------+
| [<] Metformina [Edit] | <- Top App Bar
+------------------------------------------+
| |
| +------------------------------------+ |
| | +--------+ ||
| | | [Pill] | || <- Header con icono
| | +--------+ ||
| | Metformina ||
| | Nombre comercial: Glucophage ||
| | [Activo] || <- Status chip
| +------------------------------------+ |
| |
| DOSIS Y FRECUENCIA [>] | <- Section tappable
| +------------------------------------+ |
| | [Pill] 850 mg ||
| | [Clock] 2 veces al dia ||
| | [Calendar] Todos los dias ||
| +------------------------------------+ |
| |
| HORARIOS [>] |
| +------------------------------------+ |
| | 08:00 AM Con el desayuno ||
| | 08:00 PM Con la cena ||
| +------------------------------------+ |
| |
| INSTRUCCIONES |
| +------------------------------------+ |
| | Tomar con alimentos para evitar ||
| | molestias estomacales. ||
| +------------------------------------+ |
| |
| INVENTARIO [>] |
| +------------------------------------+ |
| | [Qty] 45 tabletas restantes ||
| | [Alert] Reabastecer en 22 dias ||
| | [Date] Caduca: 15/06/2026 ||
| +------------------------------------+ |
| |
| HISTORIAL DE TOMAS [>] |
| +------------------------------------+ |
| | Hoy: 1/2 tomas ||
| | Esta semana: 92% adherencia ||
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Pausar Medicamento] || <- Secondary action
| +------------------------------------+ |
| +------------------------------------+ |
| | [Eliminar Medicamento] || <- Danger action
| +------------------------------------+ |
| |
+------------------------------------------+
2.2. Estado: Con Alerta de Interaccion
+------------------------------------------+
| [<] Losartan [Edit] |
+------------------------------------------+
| |
| +------------------------------------+ |
| | [!] INTERACCION DETECTADA ||
| | || <- Alert Banner
| | Este medicamento tiene una ||
| | interaccion con Metformina ||
| | ||
| | [Ver detalles] ||
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | +--------+ ||
| | | [Cap] | ||
| | +--------+ ||
| | Losartan ||
| | [Activo] [!Interaccion] ||
| +------------------------------------+ |
| |
| ... (resto del contenido igual) ... |
| |
+------------------------------------------+
2.3. Estado: Medicamento Pausado
+------------------------------------------+
| [<] Ibuprofeno [Edit] |
+------------------------------------------+
| |
| +------------------------------------+ |
| | +--------+ ||
| | | [Pill] | (opacidad 0.6) ||
| | +--------+ ||
| | Ibuprofeno ||
| | [Pausado desde 01/12/2025] || <- Status diferente
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [i] Este medicamento esta pausado. ||
| | No recibiras recordatorios || <- Info banner
| | hasta que lo reactives. ||
| +------------------------------------+ |
| |
| ... (secciones sin horarios activos) |
| |
| +------------------------------------+ |
| | [Reactivar Medicamento] || <- Primary action
| +------------------------------------+ |
| |
+------------------------------------------+
3. Componentes UI
3.1. Top App Bar
| Propiedad |
Valor |
| Componente |
CMP-NAV-002 |
| Variante |
regular |
| Titulo |
Nombre del medicamento |
| Leading |
Back arrow |
| Trailing |
Edit icon button |
| Propiedad |
Valor |
| Layout |
Centered, con icono grande |
| Icono |
CMP-DAT-006 (64x64dp) |
| Nombre |
Typography 2xl, bold |
| Nombre comercial |
Typography md, secondary |
| Status |
Chip (CMP-DAT-003) |
3.3. Alert Banner (condicional)
| Propiedad |
Valor |
| Componente |
Custom Alert Card |
| Background |
warning.light o error.light |
| Icono |
Warning/Error icon |
| CTA |
"Ver detalles" link |
3.4. Section Cards
Cada seccion es tappable y navega a edicion:
| Seccion |
Destino |
Icono |
| Dosis y Frecuencia |
SCR-MED-003 (edit mode) |
Pill, Clock, Calendar |
| Horarios |
SCR-MED-004 |
Clock |
| Inventario |
SCR-MED-007 |
Package |
| Historial |
Sheet con detalle |
Chart |
| Boton |
Tipo |
Color |
Accion |
| Pausar/Reactivar |
Secondary |
Default |
Toggle estado |
| Eliminar |
Text |
Error |
Confirmation dialog |
4. Comportamientos
4.1. Secciones Expandibles
stateDiagram-v2
[*] --> Collapsed: Default
Collapsed --> Expanded: Tap section
Expanded --> Collapsed: Tap section
Expanded --> Navigation: Tap edit icon
4.2. Swipe to Navigate
- Swipe desde borde izquierdo: Back a lista
- No hay swipe entre medicamentos (evitar confusion)
4.3. Edit Mode
Tap en boton Edit activa modo edicion:
- Todas las secciones se vuelven editables
- Top bar cambia a "Guardar" / "Cancelar"
5. Dialogos
5.1. Confirmacion de Pausa
+----------------------------------+
| |
| Pausar Metformina? |
| |
| No recibiras recordatorios de |
| este medicamento hasta que lo |
| reactives. |
| |
| [Cancelar] [Pausar] |
| |
+----------------------------------+
5.2. Confirmacion de Eliminacion
+----------------------------------+
| |
| Eliminar Metformina? |
| |
| Esta accion no se puede |
| deshacer. El historial de |
| tomas se mantendra en tu |
| registro. |
| |
| [Cancelar] [Eliminar] |
| (rojo) |
+----------------------------------+
6. Datos Requeridos
interface MedicationDetailData {
medication: PatientMedication;
catalogInfo?: CatalogMedication;
inventory?: InventoryData;
interactions?: InteractionWarning[];
recentDoses: DoseRecord[];
adherenceStats: AdherenceStats;
}
interface PatientMedication {
id: string;
name: string;
customName?: string;
dosage: string;
dosageUnit: string;
frequency: FrequencyConfig;
schedules: Schedule[];
instructions?: string;
color?: string;
icon: MedicationIcon;
status: 'ACTIVE' | 'PAUSED' | 'COMPLETED';
pausedDate?: Date;
pauseReason?: string;
startDate: Date;
endDate?: Date;
prescribedBy?: string;
recipeId?: string;
}
6.2. Output Events
| Evento |
Payload |
Destino |
| onEdit |
medication_id |
SCR-MED-003 (edit) |
| onEditSchedule |
medication_id |
SCR-MED-004 |
| onViewInventory |
medication_id |
SCR-MED-007 |
| onViewInteraction |
interaction_id |
SCR-MED-009 |
| onPause |
medication_id, reason |
API |
| onResume |
medication_id |
API |
| onDelete |
medication_id |
API + back |
7. Accesibilidad
7.1. Estructura Semantica
<header role="banner">
<h1>Metformina</h1>
<p>Glucophage</p>
<span role="status">Activo</span>
</header>
<section aria-labelledby="dosage-heading">
<h2 id="dosage-heading">Dosis y Frecuencia</h2>
...
</section>
7.2. Anuncios
| Evento |
Anuncio |
| Pantalla cargada |
"Detalle de {nombre}, estado {status}" |
| Interaccion presente |
"Atencion: hay una interaccion con {medicamento}" |
| Pausado |
"{nombre} pausado" |
| Eliminado |
"{nombre} eliminado de tu lista" |
7.3. Orden de Foco
- Back button
- Edit button
- Alert banner (si existe)
- Status chip
- Seccion Dosis (header + contenido)
- Seccion Horarios
- Seccion Instrucciones
- Seccion Inventario
- Seccion Historial
- Boton Pausar/Reactivar
- Boton Eliminar
8. Animaciones
8.1. Entrada
- Shared element transition desde card de lista
- Hero animation del icono del medicamento
- Fade in del contenido (staggered)
8.2. Secciones
- Expand/collapse con animacion de altura
- Icono chevron rota 180 grados
8.3. Movimiento Reducido
- Sin hero animation
- Transiciones instantaneas
- Mantener feedback de estado
9. Metricas
9.1. Analytics Events
| Evento |
Parametros |
| screen_view |
screen_name: "medication_detail", medication_id |
| section_tap |
section_name, medication_id |
| edit_tap |
medication_id |
| pause_medication |
medication_id, from_status |
| delete_medication |
medication_id |
| interaction_banner_tap |
medication_id, interaction_id |
10. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)