Saltar a contenido

Pantalla: Primer Medicamento

Identificador: SCR-ONB-005 Modulo: MTS-ONB-001 - Onboarding Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Estado: Especificado

1. Informacion General

Atributo Valor
Nombre Primer Medicamento
Proposito Agregar el primer medicamento para demostrar valor inmediato
Tipo Full Screen (paso 5 de onboarding)
Acceso Desde SCR-ONB-004
Prioridad Alta

NOTA: Este paso es crucial para el "quick win" del usuario. Debe ser simple pero efectivo.

2. Wireframe ASCII

2.1. Estado: Inicial - Agregar Medicamento

+------------------------------------------+
| [<-]   Paso 5 de 8  ==========------     |
+------------------------------------------+
|                                          |
|         Tu primer medicamento            |
|                                          |
|   Agrega un medicamento para ver         |
|   MedTime en accion.                     |
|                                          |
|                                          |
|  Nombre del medicamento *                |
|  +------------------------------------+  |
|  |                                    |  |
|  +------------------------------------+  |
|                                          |
|  Dosis *                                 |
|  +---------------+  +------------------+ |
|  | 500           |  | mg           [v] | |
|  +---------------+  +------------------+ |
|                                          |
|  Frecuencia *                            |
|  +------------------------------------+  |
|  | Cada 8 horas                   [v] |  |
|  +------------------------------------+  |
|                                          |
|  Recordar a las:                         |
|  +----------+ +----------+ +----------+  |
|  | 08:00 AM | | 04:00 PM | | 12:00 AM |  |  <- Auto-calculado
|  +----------+ +----------+ +----------+  |
|                                          |
|  +------------------------------------+  |
|  |        Agregar medicamento         |  |
|  +------------------------------------+  |
|                                          |
|           Agregar despues                |
|                                          |
+------------------------------------------+

2.2. Estado: Busqueda de Medicamento

+------------------------------------------+
| [<-]   Paso 5 de 8  ==========------     |
+------------------------------------------+
|                                          |
|  Nombre del medicamento *                |
|  +------------------------------------+  |
|  | Metfor_                            |  |
|  +------------------------------------+  |
|                                          |
|  +------------------------------------+  |
|  | [Pill] Metformina 500mg            |  |
|  |        Tableta - Antidiabetico     |  |
|  +------------------------------------+  |
|  | [Pill] Metformina 850mg            |  |
|  |        Tableta - Antidiabetico     |  |
|  +------------------------------------+  |
|  | [Pill] Metformina 1000mg           |  |
|  |        Tableta - Antidiabetico     |  |
|  +------------------------------------+  |
|  | [+] Agregar "Metfor" manualmente   |  |
|  +------------------------------------+  |
|                                          |
+------------------------------------------+

2.3. Estado: Medicamento Agregado (Success)

+------------------------------------------+
| [<-]   Paso 5 de 8  ==========------     |
+------------------------------------------+
|                                          |
|          [Check animado]                 |
|                                          |
|         Excelente!                       |
|                                          |
|   Has agregado tu primer medicamento.    |
|                                          |
|  +------------------------------------+  |
|  | [Pill] Metformina 500mg            |  |
|  |                                    |  |
|  |  Cada 8 horas                      |  |
|  |  08:00 AM - 04:00 PM - 12:00 AM    |  |
|  |                                    |  |
|  |  [Editar]         [Eliminar]       |  |
|  +------------------------------------+  |
|                                          |
|  +------------------------------------+  |
|  |      Agregar otro medicamento      |  |  <- Secondary
|  +------------------------------------+  |
|                                          |
|  +------------------------------------+  |
|  |           Continuar                |  |  <- Primary
|  +------------------------------------+  |
|                                          |
+------------------------------------------+

2.4. Estado: CR - Para Dependiente

+------------------------------------------+
| [<-]   Paso 5 de 8  ==========------     |
+------------------------------------------+
|                                          |
|   Medicamento para Ana                   |  <- Nombre dependiente
|                                          |
|   Agrega el primer medicamento de        |
|   tu dependiente.                        |
|                                          |
|                                          |
|  Nombre del medicamento *                |
|  +------------------------------------+  |
|  | Losartan                           |  |
|  +------------------------------------+  |
|                                          |
|  ...                                     |
|                                          |
+------------------------------------------+

3. Componentes UI

3.1. Campo Nombre Medicamento

Propiedad Valor
Componente CMP-INP-004 (Search Input)
Label "Nombre del medicamento *"
Autocomplete Si - base de datos medicamentos
Min chars para buscar 3
Required Si

3.2. Campo Dosis

Propiedad Valor
Layout Row: numero + unidad
Input numero CMP-INP-001 (Number Input)
Dropdown unidad CMP-INP-006 (Dropdown)
Unidades mg, g, ml, UI, gotas, unidades
Required Si

3.3. Dropdown Frecuencia

Propiedad Valor
Componente CMP-INP-006 (Dropdown Select)
Label "Frecuencia *"
Options Cada 4h, Cada 6h, Cada 8h, Cada 12h, Cada 24h, Segun necesidad
Required Si

3.4. Time Pills

Propiedad Valor
Componente CMP-DAT-012 (Time Pill)
Layout Horizontal row, wrap
Auto-calculate Si, basado en frecuencia
Editable Tap para ajustar hora
Format HH:MM AM/PM

3.5. Resultado de Busqueda

Propiedad Valor
Componente CMP-CRD-009 (Search Result Card)
Icon Pill icon
Primary text Nombre + dosis sugerida
Secondary text Forma + categoria
Tap action Seleccionar y prellenar

3.6. Card Medicamento Agregado

Propiedad Valor
Componente CMP-CRD-003 (Medication Card)
Show actions Editar, Eliminar
Expandable No (version compacta)

4. Comportamientos

4.1. Flujo Principal

flowchart TD
    A[Pantalla cargada] --> B[Usuario escribe nombre]
    B --> C{3+ caracteres?}
    C -->|No| D[Esperar mas input]
    C -->|Si| E[Buscar en DB]

    E --> F{Resultados?}
    F -->|Si| G[Mostrar sugerencias]
    F -->|No| H[Opcion agregar manual]

    G --> I{Tap sugerencia?}
    I -->|Si| J[Prellenar nombre y dosis]
    I -->|No| K[Continuar escribiendo]

    H --> L{Tap agregar manual?}
    L -->|Si| M[Usar texto como nombre]

    J --> N[Usuario completa dosis/frecuencia]
    M --> N

    N --> O[Auto-calcular horarios]
    O --> P{Form completo?}
    P -->|Si| Q[Enable boton Agregar]
    P -->|No| R[Boton disabled]

    Q --> S{Tap Agregar?}
    S -->|Si| T[Guardar medicamento]
    T --> U[Mostrar success]
    U --> V[Opciones: otro o continuar]

4.2. Auto-calculo de Horarios

function calculateTimes(frequency: string, startTime: string = "08:00"): string[] {
  const intervals = {
    "Cada 4h": 4,
    "Cada 6h": 6,
    "Cada 8h": 8,
    "Cada 12h": 12,
    "Cada 24h": 24
  };

  const hours = intervals[frequency];
  const times = [];
  let current = parseTime(startTime);

  for (let i = 0; i < 24 / hours; i++) {
    times.push(formatTime(current));
    current = addHours(current, hours);
  }

  return times;
}

4.3. Gestos

Gesto Elemento Accion
Tap Input nombre Focus + teclado
Tap Sugerencia Seleccionar medicamento
Tap Time pill Abrir time picker
Tap Agregar medicamento Guardar y mostrar success
Tap Agregar otro Limpiar form
Tap Continuar Navegar a ONB-006
Tap Agregar despues Skip sin medicamento

4.4. Validaciones

Campo Regla Mensaje Error
Nombre Required, min 2 chars "Ingresa el nombre del medicamento"
Dosis Required, > 0 "Ingresa una dosis valida"
Frecuencia Required "Selecciona la frecuencia"

5. Estados

5.1. Estados de la Pantalla

Estado Condicion Visual
Initial Sin datos Form vacio
Searching Escribiendo nombre Lista de sugerencias
Filling Medicamento seleccionado Form con datos
Valid Todos campos completos Boton enabled
Success Medicamento guardado Card + opciones

5.2. Estados del Input de Busqueda

Estado Visual
Empty Placeholder visible
Typing Texto + cursor
Searching Texto + loader
Results Dropdown con sugerencias
No results Opcion agregar manual

6. Accesibilidad

6.1. Labels y Hints

Elemento accessibilityLabel accessibilityHint
Input nombre "Nombre del medicamento, requerido" "Escribe para buscar o agregar"
Sugerencia "{nombre}, {dosis}, {tipo}" "Toca para seleccionar"
Input dosis "Dosis, requerido" "Ingresa la cantidad"
Dropdown unidad "Unidad de dosis" "Selecciona la unidad"
Time pill "Recordatorio a las {hora}" "Toca para cambiar hora"
Agregar "Agregar medicamento" "Guarda el medicamento"

6.2. Orden de Foco

  1. Back button
  2. Input nombre medicamento
  3. Sugerencias (si visibles)
  4. Input dosis numero
  5. Dropdown unidad
  6. Dropdown frecuencia
  7. Time pills (en orden)
  8. Boton Agregar medicamento
  9. Link Agregar despues

6.3. Screen Reader

Evento Anuncio
Resultados cargados "{n} medicamentos encontrados"
Medicamento seleccionado "Seleccionado: {nombre} {dosis}"
Horarios calculados "Horarios: {lista de horas}"
Medicamento agregado "Medicamento agregado exitosamente"

7. Datos Requeridos

7.1. Input Data

interface FirstMedInput {
  role: 'PI' | 'CR';
  dependent_name?: string;
  user_wake_time?: string;  // Para calcular horarios
}

7.2. Output Data

interface FirstMedOutput {
  medication?: {
    name: string;
    dose_amount: number;
    dose_unit: string;
    frequency: string;
    reminder_times: string[];
  };
  skipped: boolean;
}

8. Metricas

8.1. Analytics Events

Evento Parametros
screen_view screen_name: "onboarding_first_med"
med_search_started query_length
med_suggestion_selected med_id, position
med_manual_added -
time_adjusted original, new
first_med_added med_name, frequency
another_med_added count
step_completed step: 5, role, meds_count
step_skipped step: 5, role

9. Base de Datos de Medicamentos

9.1. Estructura de Sugerencia

interface MedicationSuggestion {
  id: string;
  name: string;
  common_doses: string[];  // ["500mg", "850mg", "1000mg"]
  form: string;            // "Tableta", "Capsula", "Jarabe"
  category: string;        // "Antidiabetico", "Antihipertensivo"
  requires_prescription: boolean;
}

9.2. Fuente de Datos

  • Base local con ~1000 medicamentos comunes
  • Sync con backend para actualizaciones (Pro/Perfect)
  • Permite entrada manual para medicamentos no listados

10. Referencias

Documento generado por MobileUxUiDrone (Eight of Eight)