Saltar a contenido

Pantalla: Detalle de Medicamento

Identificador: SCR-CAT-003 Modulo: MTS-CAT-001 - Catalogo de Medicamentos Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Estado: Especificado FASE: 2 - Value

1. Informacion General

Atributo Valor
Nombre Detalle de Medicamento
Proposito Ficha tecnica completa del medicamento con opcion de agregar
Tipo Full Screen
Acceso SCR-CAT-002 > Tap medicamento
Prioridad Alta

2. Wireframe ASCII

2.1. Estado: Ficha Tecnica Completa

+------------------------------------------+
|  [<]    Metformina 850mg                  |
+------------------------------------------+
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │         ┌─────────────────┐         │  |
|  │         │                 │         │  |
|  │         │   💊            │         │  |
|  │         │                 │         │  |
|  │         └─────────────────┘         │  |
|  │                                     │  |
|  │  Metformina 850mg                   │  |
|  │  Tableta | Via oral                 │  |
|  │                                     │  |
|  │  [Generico]  [Requiere receta]      │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  INFORMACION GENERAL                      |
|  ─────────────────────────────────────    |
|                                           |
|  Principio activo                         |
|  Clorhidrato de metformina                |
|                                           |
|  Concentracion                            |
|  850 mg por tableta                       |
|                                           |
|  Clasificacion ATC                        |
|  A10BA02 - Antidiabeticos orales          |
|                                           |
|  Categoria terapeutica                    |
|  Biguanidas                               |
|                                           |
|  ─────────────────────────────────────    |
|                                           |
|  ADMINISTRACION                           |
|  ─────────────────────────────────────    |
|                                           |
|  Via de administracion                    |
|  Oral                                     |
|                                           |
|  Instrucciones generales                  |
|  Tomar con o despues de los alimentos     |
|  para reducir efectos gastrointestinales. |
|                                           |
|  ─────────────────────────────────────    |
|                                           |
|  INTERACCIONES                            |
|  ─────────────────────────────────────    |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  ⚠️ 3 interacciones conocidas      │  |
|  │     con tus medicamentos actuales  │  |
|  │                                     │  |
|  │  [Ver interacciones]               │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  ─────────────────────────────────────    |
|                                           |
|  REGULACION                               |
|  ─────────────────────────────────────    |
|                                           |
|  Paises disponible                        |
|  Mexico, USA, Brasil, +15 mas             |
|                                           |
|  Registro sanitario (Mexico)              |
|  SSA-I-1234-567-890                       |
|                                           |
|                                           |
|  +─────────────────────────────────────+  |
|  │     Agregar a mis medicamentos      │  |
|  +─────────────────────────────────────+  |
|                                           |
+------------------------------------------+

2.2. Estado: Con Alerta de Interaccion

+------------------------------------------+
|  [<]    Ibuprofeno 400mg                  |
+------------------------------------------+
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  🔴 ALERTA DE INTERACCION          │  |
|  │  ─────────────────────────────────  │  |
|  │                                     │  |
|  │  Este medicamento tiene una         │  |
|  │  interaccion SEVERA con:            │  |
|  │                                     │  |
|  │  • Lisinopril 10mg (tu lista)       │  |
|  │                                     │  |
|  │  Riesgo: Reduccion del efecto       │  |
|  │  antihipertensivo                   │  |
|  │                                     │  |
|  │  [Ver detalles de interaccion]      │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │         ┌─────────────────┐         │  |
|  │         │   💊            │         │  |
|  │         └─────────────────┘         │  |
|  │                                     │  |
|  │  Ibuprofeno 400mg                   │  |
|  │  Tableta | Via oral                 │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  [... resto de la ficha ...]              |
|                                           |
|  +─────────────────────────────────────+  |
|  │   ⚠️ Agregar de todos modos        │  |
|  +─────────────────────────────────────+  |
|                                           |
+------------------------------------------+

2.3. Estado: Ya En Tu Lista

+------------------------------------------+
|  [<]    Metformina 850mg                  |
+------------------------------------------+
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  ✓ Ya en tu lista de medicamentos  │  |
|  │    Agregado el 15 Nov 2025         │  |
|  │                                     │  |
|  │    [Ver en mis medicamentos]        │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │         ┌─────────────────┐         │  |
|  │         │   💊            │         │  |
|  │         └─────────────────┘         │  |
|  │                                     │  |
|  │  Metformina 850mg                   │  |
|  │  Tableta | Via oral                 │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  [... resto de la ficha ...]              |
|                                           |
+------------------------------------------+

3. Componentes UI

3.1. Medication Hero Card

Propiedad Valor
Componente CMP-CAT-009 (MedicationHeroCard) NUEVO
Icono Grande, centrado
Nombre Titulo principal
Subtitulo Forma + via
Badges Generico/marca, receta

3.2. Interaction Alert Banner

Propiedad Valor
Componente CMP-CAT-010 (InteractionAlertBanner) NUEVO
Background error.50 o warning.50
Icono Warning
Severidad SEVERA, MODERADA, LEVE
Medicamentos Lista de conflictos
Accion "Ver detalles"

3.3. Info Section

Propiedad Valor
Componente Seccion con header
Layout Label + valor vertical
Separadores Linea entre secciones

3.4. Already Added Banner

Propiedad Valor
Componente CMP-FBK-004 (Banner)
Variante success
Icono Check
Accion "Ver en mis medicamentos"

3.5. Add Button

Propiedad Valor
Componente CMP-BTN-001 (Primary Button)
Texto "Agregar a mis medicamentos"
Variante warning Si hay interaccion
Sticky Si (bottom)

4. Comportamientos

4.1. Verificacion de Interacciones

flowchart TD
    A[Abrir detalle] --> B[Obtener medicamentos usuario]
    B --> C[Verificar interacciones]

    C --> D{Hay interacciones?}
    D -->|No| E[Mostrar ficha normal]
    D -->|Si| F{Severidad?}

    F -->|Severa| G[Banner rojo prominente]
    F -->|Moderada| H[Banner naranja]
    F -->|Leve| I[Info en seccion]

    G --> J[Boton warning]
    H --> J
    I --> K[Boton normal]

4.2. Gestos

Gesto Elemento Accion
Scroll Pantalla Ver toda la ficha
Tap "Ver interacciones" MTS-INT-001 detalle
Tap "Agregar" Flujo MTS-MED-001
Tap "Ver en mis meds" Navegar a MTS-MED-001
Share Toolbar Compartir info

4.3. Flujo de Agregar

flowchart TD
    A[Tap Agregar] --> B{Tiene interaccion severa?}

    B -->|Si| C[Confirmacion adicional]
    C --> D{Usuario confirma?}
    D -->|No| E[Cancelar]
    D -->|Si| F[Continuar a agregar]

    B -->|No| F

    F --> G[SCR-MED-002 con datos prellenados]

5. Datos Requeridos

5.1. Input Data

interface MedicationDetailData {
  medication: MedicationCatalog;

  // Estado en lista del usuario
  isInUserList: boolean;
  addedDate?: Date;

  // Interacciones con meds actuales
  interactions: InteractionCheck[];

  // Regulacion por pais usuario
  localRegulation: {
    countryCode: string;
    registrationNumber: string;
    requiresPrescription: boolean;
    isControlled: boolean;
  };
}

interface MedicationCatalog {
  id: string;
  name: string;
  genericName: string;

  // Composicion
  activeIngredients: ActiveIngredient[];
  form: string;
  strength: string;
  strengthValue: number;
  strengthUnit: string;

  // Administracion
  route: string;
  defaultInstructions: string;

  // Clasificacion
  atcCode: string;
  atcDescription: string;
  therapeuticCategory: string;

  // Tipo
  type: 'generic' | 'brand';
  manufacturer?: string;

  // Regulacion
  countriesAvailable: string[];
  registrationNumbers: Map<string, string>;
  requiresPrescription: boolean;
  isControlled: boolean;

  // Interacciones
  knownInteractionsCount: number;
}

interface InteractionCheck {
  medicationId: string;
  medicationName: string;
  severity: 'SEVERE' | 'MODERATE' | 'MILD';
  description: string;
  recommendation: string;
}

5.2. Output Events

Evento Payload Destino
onAdd medication_id SCR-MED-002
onAddWithWarning medication_id, confirmed SCR-MED-002
onViewInteraction interaction_id MTS-INT-001
onViewInList medication_id SCR-MED-001
onShare - Share sheet

6. Accesibilidad

6.1. Labels

Elemento accessibilityLabel
Hero card "{nombre}, {forma}, via {via}"
Badge generico "Medicamento generico"
Badge receta "Requiere receta medica"
Interaction alert "Alerta: interaccion {severidad} con {medicamento}"
Add button "Agregar {nombre} a mis medicamentos"
Already added "Ya tienes {nombre} en tu lista"

6.2. Screen Reader

Evento Anuncio
Pantalla cargada "Detalle de {nombre}"
Interaccion detectada "Atencion: se detecto interaccion"
Agregado "{nombre} agregado a tu lista"

7. Metricas

7.1. Analytics Events

Evento Parametros
screen_view screen_name: "medication_detail", medication_id
interaction_detected medication_id, severity, count
interaction_view interaction_id
add_tap medication_id, has_interaction
add_confirm medication_id, confirmed
share medication_id

8. Referencias

Documento generado por MobileUxUiDrone (Eight of Eight)