Pantalla: Configurar Horarios
Identificador: SCR-MED-004
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 |
Configurar Horarios |
| Proposito |
Configuracion detallada de horarios y frecuencia de tomas |
| Tipo |
Full Screen |
| Acceso |
Agregar Medicamento > Paso 3 / Detalle > Editar horarios |
| Prioridad |
Alta |
2. Wireframe ASCII
2.1. Frecuencia Diaria - Horas Fijas
+------------------------------------------+
| [<] Configurar Horarios [Listo] |
+------------------------------------------+
| |
| Metformina 850mg | <- Context header
| |
| Tipo de frecuencia |
| +------------------+ +----------------+ |
| | [x] Horas fijas | | [ ] Intervalo | | <- Tabs/Segmented
| +------------------+ +----------------+ |
| |
| Horarios de toma |
| |
| +------------------------------------+ |
| | Toma 1 ||
| | +------------------------------+ ||
| | | [Clock] 08:00 AM [>] | || <- Tap = picker
| | +------------------------------+ ||
| | Etiqueta (opcional) ||
| | +------------------------------+ ||
| | | Desayuno | ||
| | +------------------------------+ ||
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | Toma 2 ||
| | +------------------------------+ ||
| | | [Clock] 02:00 PM [>] | ||
| | +------------------------------+ ||
| | Etiqueta (opcional) ||
| | +------------------------------+ ||
| | | Comida | ||
| | +------------------------------+ ||
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | Toma 3 ||
| | +------------------------------+ ||
| | | [Clock] 08:00 PM [>] | ||
| | +------------------------------+ ||
| | Etiqueta (opcional) ||
| | +------------------------------+ ||
| | | Cena | ||
| | +------------------------------+ ||
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [+] Agregar otra toma || <- Max segun frecuencia
| +------------------------------------+ |
| |
+------------------------------------------+
2.2. Frecuencia por Intervalo
+------------------------------------------+
| [<] Configurar Horarios [Listo] |
+------------------------------------------+
| |
| Ibuprofeno 400mg |
| |
| Tipo de frecuencia |
| +------------------+ +----------------+ |
| | [ ] Horas fijas | | [x] Intervalo | |
| +------------------+ +----------------+ |
| |
| Tomar cada |
| +--------+ +--------+ +--------+ |
| | 4 hr | | 6 hr | | 8 hr | | <- Quick options
| +--------+ +--------+ +--------+ |
| +--------+ +--------+ |
| | 12 hr | | Otro | |
| +--------+ +--------+ |
| |
| Intervalo seleccionado: 8 horas |
| |
| Primera toma del dia |
| +------------------------------------+ |
| | [Clock] 08:00 AM [>] | | <- Hora inicial
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [i] Tomas calculadas: ||
| | 08:00 AM, 04:00 PM, 12:00 AM || <- Preview
| +------------------------------------+ |
| |
| Maximo de tomas por dia (opcional) |
| +------+ +------+ +------+ +------+ |
| | Sin | | 2 | | 3 | | 4 | |
| | max | |
| +------+ +------+ +------+ +------+ |
| |
+------------------------------------------+
2.3. Frecuencia por Dias de la Semana
+------------------------------------------+
| [<] Configurar Horarios [Listo] |
+------------------------------------------+
| |
| Metotrexato 2.5mg |
| |
| Dias de la semana |
| +----+ +----+ +----+ +----+ |
| | L | | M | | Mi | | J | |
| |[x] | |[ ] | |[x] | |[ ] | | <- Day toggles
| +----+ +----+ +----+ +----+ |
| +----+ +----+ +----+ |
| | V | | S | | D | |
| |[x] | |[ ] | |[ ] | |
| +----+ +----+ +----+ |
| |
| Seleccionados: Lunes, Miercoles, Viernes |
| |
| Hora de toma |
| +------------------------------------+ |
| | [Clock] 09:00 AM [>] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [ ] Misma hora todos los dias ||
| | [x] Diferentes horas por dia || <- Radio options
| +------------------------------------+ |
| |
| Si "diferentes horas": |
| +------------------------------------+ |
| | Lunes: 08:00 AM [>] | |
| | Miercoles: 09:00 AM [>] | |
| | Viernes: 08:30 AM [>] | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.4. Frecuencia por Ciclos
+------------------------------------------+
| [<] Configurar Horarios [Listo] |
+------------------------------------------+
| |
| Anticonceptivo |
| |
| Configurar ciclo |
| |
| Dias activos (tomando) |
| +------------------------------------+ |
| | [-] 21 dias [+] | | <- Stepper
| +------------------------------------+ |
| |
| Dias de descanso |
| +------------------------------------+ |
| | [-] 7 dias [+] | |
| +------------------------------------+ |
| |
| Ciclo total: 28 dias |
| |
| Hora de toma (dias activos) |
| +------------------------------------+ |
| | [Clock] 10:00 PM [>] | |
| +------------------------------------+ |
| |
| Inicio del ciclo |
| +------------------------------------+ |
| | [Cal] 01/12/2025 [>] | | <- Date picker
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Calendar Preview] ||
| | Dic: [A][A][A]...[D][D][D]... || <- Visual del ciclo
| +------------------------------------+ |
| |
+------------------------------------------+
3. Componentes UI
3.1. Frequency Type Selector
| Propiedad |
Valor |
| Tipo |
Segmented control / Tabs |
| Opciones |
Horas fijas, Intervalo, Dias semana, Ciclos |
| Touch target |
44dp height por opcion |
3.2. Time Row
| Elemento |
Componente |
Especificacion |
| Container |
Card outline |
Tappable, 56dp min height |
| Icon |
Clock |
24x24dp, primary color |
| Time text |
Text |
lg, bold |
| Chevron |
Icon |
24x24dp, secondary |
| Label input |
TextField |
sm, optional |
3.3. Interval Quick Options
| Propiedad |
Valor |
| Tipo |
Chip group |
| Layout |
Flow wrap |
| Opciones |
4hr, 6hr, 8hr, 12hr, Otro |
| Selection |
Single |
3.4. Day Selector
| Propiedad |
Valor |
| Tipo |
Toggle button group |
| Layout |
Row wrap |
| Days |
L, M, Mi, J, V, S, D |
| Touch target |
44x44dp cada dia |
| Selection |
Multi |
3.5. Numeric Stepper
| Propiedad |
Valor |
| Componente |
CMP-INP-008 |
| Variante |
horizontal |
| Min |
1 |
| Max |
Contextual (dias: 31, tomas: 10) |
| Touch targets |
44x44dp buttons |
4. Logica de Negocio
4.1. Calculo de Tomas por Intervalo
function calculateIntervalDoses(
startTime: string,
intervalHours: number,
maxDoses?: number
): string[] {
const doses: string[] = [];
let currentTime = parseTime(startTime);
let count = 0;
while (count < (maxDoses || 24 / intervalHours)) {
doses.push(formatTime(currentTime));
currentTime = addHours(currentTime, intervalHours);
count++;
if (isNextDay(currentTime) && !maxDoses) break;
}
return doses;
}
4.2. Validaciones por Tipo
| Tipo |
Validacion |
| Horas fijas |
Min 1 horario, sin duplicados, > 1hr entre tomas |
| Intervalo |
Intervalo > 0, primera hora valida |
| Dias semana |
Min 1 dia seleccionado |
| Ciclos |
Dias activos >= 1, descanso >= 0 |
5. Estados
| Estado |
Visual |
| Empty |
Valores default sugeridos |
| Valid |
Boton "Listo" habilitado |
| Invalid |
Error inline, boton deshabilitado |
| Editing |
Indicador de campo activo |
5.2. Time Picker States
| Estado |
Comportamiento |
| Opening |
Slide up animation |
| Selecting |
Wheel/input activo |
| Confirming |
Validar, cerrar |
| Canceling |
Cerrar sin cambios |
6. Datos Requeridos
interface ScheduleConfigData {
medicationName: string;
medicationId: string;
currentSchedule?: ExistingSchedule;
suggestedTimes: string[];
userMealTimes: MealTimes;
}
interface MealTimes {
breakfast: string; // "08:00"
lunch: string; // "14:00"
dinner: string; // "20:00"
sleep: string; // "23:00"
}
6.2. Output Data
interface ScheduleConfig {
frequencyType: 'fixed' | 'interval' | 'weekly' | 'cycle';
// Para fixed
fixedTimes?: ScheduleTime[];
// Para interval
intervalHours?: number;
intervalStartTime?: string;
maxDosesPerDay?: number;
// Para weekly
weekDays?: number[];
sameTimeAllDays?: boolean;
dayTimes?: Record<number, string>;
// Para cycle
activeDays?: number;
restDays?: number;
cycleStartDate?: Date;
cycleTime?: string;
}
interface ScheduleTime {
time: string;
label?: string;
}
7. Accesibilidad
7.1. Labels por Componente
| Elemento |
accessibilityLabel |
| Frequency tab |
"Frecuencia {tipo}, {estado}" |
| Time row |
"Toma {n}: {hora}. Toca para cambiar" |
| Day toggle |
"{dia}, {seleccionado/no seleccionado}" |
| Interval option |
"Cada {n} horas, {estado}" |
| Stepper |
"{campo}: {valor}. Boton menos y boton mas disponibles" |
| Listo button |
"Guardar configuracion de horarios" |
7.2. Orden de Foco
- Back button
- Listo button
- Frequency selector (cada opcion)
- Primer campo de configuracion
- ... (campos segun tipo seleccionado)
- Agregar toma (si aplica)
7.3. Anuncios
| Evento |
Anuncio |
| Cambio de tipo |
"Frecuencia {tipo} seleccionada" |
| Hora cambiada |
"Toma {n} configurada para {hora}" |
| Dia toggle |
"{dia} {agregado/removido}" |
| Error |
"Error: {descripcion}" |
| Guardado |
"Horarios guardados" |
8. Interacciones Complejas
8.1. Time Picker Sheet
+----------------------------------+
| ==== | <- Drag handle
| |
| 08 : 00 AM |
| |
| Sugerencias |
| +--------+ +--------+ +-------+ |
| |Desayuno| | Comida | | Cena | |
| | 08:00 | | 14:00 | | 20:00 | |
| +--------+ +--------+ +-------+ |
| |
| [Cancelar] [Confirmar] |
| |
+----------------------------------+
8.2. Add Time Flow
- Tap "Agregar otra toma"
- Se agrega nueva row al final
- Time picker se abre automaticamente
- Usuario selecciona hora
- Row se completa
- Focus pasa a label (opcional)
8.3. Delete Time (Swipe)
- Swipe left en row revela boton "Eliminar"
- Tap elimina con animacion
- Min 1 toma requerida (ultima no eliminable)
9. Metricas
9.1. Analytics Events
| Evento |
Parametros |
| frequency_type_change |
from, to |
| time_configured |
schedule_index, time |
| interval_selected |
hours |
| day_toggled |
day, selected |
| schedule_saved |
frequency_type, doses_count |
| schedule_error |
error_type |
10. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)