Design
Pantallas
Para qué

Especificación detallada de cada pantalla: datos mostrados, estados, acciones disponibles y navegación.

Audiencia

Diseño e ingeniería.

Plan del Dia Card

Dashboard --> Componente Support (Pantalla 3 de 5)

Propósito: Mostrar la checklist diaria de suplementos y hábitos, permitiendo marcar completados inline.
JTBD: “Quiero ver que estoy progresando”
Ruta: /inicio (componente dentro del dashboard)
Módulo: PAM-6


Features

# Feature Descripción Prioridad
1 Checklist items 4-6 items del dia con checkbox P0
2 Contador progreso “1 de 4 completados” P0
3 Marcar inline Checkbox funcional sin salir del dashboard P0
4 Horario Agrupado por mañana/noche P1
5 Link a plan completo “Ver plan” para detalle P1

States

Loading

  • Visual: Skeleton shimmer en 4 líneas con checkboxes (300ms)
  • Duración: <500ms
  • Copy: ninguno

Loaded (Normal)

  • Visual: Card col-span-3, lista de items con checkboxes, contador arriba, link “Ver plan” abajo
  • Datos: Items del plan del dia, estado de completitud

Todos Completados

  • Trigger: Todos los items del dia marcados
  • Visual: Checkboxes verdes, mensaje de felicitación
  • Copy: “Excelente, María. Completaste tu plan de hoy.”

Sin Plan

  • Trigger: Plan no asignado o ciclo sin plan activo
  • Visual: Card con estado vacio
  • Copy: “Aun no tienes un plan asignado.”
  • CTA: [Hablar con mi médico]

Error

  • Trigger: Fallo al cargar el plan
  • Copy: “No pudimos cargar tu plan.”
  • CTA: [Reintentar]

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Item 1 ItemPlan nombre Vitamina D3
Item 1 dosis ItemPlan dosis 2000 UI
Item 1 estado ItemPlan completado_hoy false
Item 2 ItemPlan nombre Omega-3
Item 3 ItemPlan nombre Magnesio
Item 4 ItemPlan nombre 30 min caminata
Completados Plan completados_hoy 1
Total Plan total_hoy 4

Acciones

Acción Tipo Resultado
Marcar item Tap checkbox Completa item, actualiza contador, animación check
Desmarcar item Tap checkbox Desmarca, actualiza contador
Ver plan Tap link Navega a /plan
Tap en item Tap texto Navega a /plan/suplemento/:id (detalle)

  • Viene de: Carga del dashboard
  • Va a: Plan completo, Detalle de suplemento
  • Back: Dashboard (es un componente inline)