Saltar a contenido

Pantalla: Dashboard de Adherencia

Identificador: SCR-ADH-001 Modulo: MTS-ADH-001 - Motor de Adherencia Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Estado: Especificado FASE: 2 - Value

1. Informacion General

Atributo Valor
Nombre Dashboard de Adherencia
Proposito Vista principal con porcentaje circular, racha actual y calendario semanal
Tipo Tab Screen (navegacion principal)
Acceso Bottom Navigation > Estadisticas
Prioridad Alta

2. Wireframe ASCII

2.1. Estado: Dashboard Completo (>= 14 dias de datos)

+------------------------------------------+
|  [<]    Mi Adherencia              [...]  |  <- Top App Bar
+------------------------------------------+
|                                           |
|  [General*] [Por Med] [Tendencias]        |  <- Tab Bar
|  ─────────────────────────────────────    |
|                                           |
|            ┌─────────────┐                |
|           ╱               ╲               |
|          │                 │              |
|          │      87%        │              |  <- Circulo Principal
|          │                 │              |
|           ╲               ╱               |
|            └─────────────┘                |
|                                           |
|         11 de 12 tomas hoy                |  <- Subtitulo
|         Adherencia BUENA                  |  <- Estado con color
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  🔥 Racha actual: 5 dias            │  |  <- Racha Card
|  │     Mejor racha: 23 dias            │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  Ultimos 7 dias                           |  <- Section Header
|  ┌───┬───┬───┬───┬───┬───┬───┐           |
|  │ L │ M │ M │ J │ V │ S │ D │           |
|  │███│███│▓▓▓│███│███│███│▓▓▓│           |  <- Calendario
|  │95 │98 │82 │100│95 │97 │88 │           |
|  └───┴───┴───┴───┴───┴───┴───┘           |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │ 💡 Insight                          │  |
|  │ "Tus tomas de mediodia son las      │  |  <- Insight Card
|  │  mas dificiles. Considera..."       │  |
|  │                      [Ver mas ->]   │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  [Ver logros]        [Generar reporte]    |  <- Action Buttons
|                                           |
+------------------------------------------+
| [Home] [Pills] [Calendar] [Stats*] [More] |  <- Bottom Nav
+------------------------------------------+

2.2. Estado: Datos Insuficientes (< 14 dias)

+------------------------------------------+
|  [<]    Mi Adherencia              [...]  |
+------------------------------------------+
|                                           |
|  [General*] [Por Med] [Tendencias]        |
|  ─────────────────────────────────────    |
|                                           |
|            ┌─────────────┐                |
|           ╱     - - -     ╲               |
|          │                 │              |
|          │      ---%       │              |  <- Circulo vacio
|          │                 │              |
|           ╲               ╱               |
|            └─────────────┘                |
|                                           |
|         Recopilando datos...              |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  📊 Necesitamos mas datos           │  |
|  │                                     │  |
|  │  Llevas 5 de 14 dias necesarios     │  |
|  │  ████████░░░░░░░░░░░░░░░░░░  36%    │  |
|  │                                     │  |
|  │  Sigue registrando tus tomas para   │  |
|  │  ver tus estadisticas completas.    │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  Tus tomas recientes                      |
|  ┌─────────────────────────────────────┐  |
|  │ ✓ Metformina - Hoy 08:00            │  |
|  │ ✓ Losartan - Hoy 08:00              │  |
|  │ ○ Metformina - Pendiente 14:00      │  |
|  └─────────────────────────────────────┘  |
|                                           |
+------------------------------------------+
| [Home] [Pills] [Calendar] [Stats*] [More] |
+------------------------------------------+

2.3. Estado: Cargando (Skeleton)

+------------------------------------------+
|  [<]    Mi Adherencia              [...]  |
+------------------------------------------+
|                                           |
|  [═══════] [═══════] [═══════════]        |
|                                           |
|            ┌─────────────┐                |
|           ╱               ╲               |
|          │   [░░░░░░░]    │              |
|          │   [░░░░░░░]    │              |
|           ╲               ╱               |
|            └─────────────┘                |
|                                           |
|         [════════════════]                |
|         [═══════════]                     |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  [░░]  [══════════════════]         │  |
|  │        [════════════]               │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  [══════════════]                         |
|  ┌───┬───┬───┬───┬───┬───┬───┐           |
|  │[░]│[░]│[░]│[░]│[░]│[░]│[░]│           |
|  │   │   │   │   │   │   │   │           |
|  └───┴───┴───┴───┴───┴───┴───┘           |
|                                           |
+------------------------------------------+
| [Home] [Pills] [Calendar] [Stats*] [More] |
+------------------------------------------+

3. Componentes UI

3.1. Top App Bar

Propiedad Valor
Componente CMP-NAV-002 (Top App Bar)
Variante regular
Titulo "Mi Adherencia"
Leading Back (si viene de otra pantalla)
Trailing Overflow menu (...)

Menu Overflow:

  • Cambiar periodo
  • Configurar metas
  • Exportar datos
  • Ayuda

3.2. Tab Bar

Propiedad Valor
Componente CMP-NAV-003 (Tab Bar)
Tabs General, Por Medicamento, Tendencias
Tab activa General
Indicador Underline primary

3.3. Circulo de Porcentaje (Componente Nuevo)

Propiedad Valor
Componente CMP-ADH-001 (AdherenceCircle) NUEVO
Tamano 180x180dp
Stroke width 12dp
Background neutral.200
Fill Color segun rango
Animacion Fill clockwise, 800ms
Centro Porcentaje (48sp, bold)

Colores por Rango:

Rango Color
>= 95% success.500 (#22C55E)
80-94% warning.500 (#EAB308)
60-79% warning.700 (#B45309)
< 60% error.500 (#EF4444)

3.4. Racha Card (Componente Nuevo)

Propiedad Valor
Componente CMP-ADH-002 (StreakCard) NUEVO
Background primary.50
Border 1dp primary.200
Border radius 12dp
Icono Fuego animado si >= 3 dias
Contenido Racha actual + mejor racha

3.5. Calendario Semanal (Componente Nuevo)

Propiedad Valor
Componente CMP-ADH-003 (WeeklyCalendar) NUEVO
Layout 7 columnas iguales
Dia Letra + barra + numero
Barra Fill vertical segun %
Touch target 44x60dp por dia
Accion Tap navega a SCR-ADH-006

Colores de Barra:

Rango Color
>= 95% success.500
80-94% warning.500
60-79% warning.700
< 60% error.500
Sin datos neutral.300

3.6. Insight Card (Componente Nuevo)

Propiedad Valor
Componente CMP-ADH-004 (InsightCard) NUEVO
Background info.50
Border left 4dp info.500
Icono Bombilla (💡)
Titulo "Insight"
Texto Max 3 lineas
CTA "Ver mas" link

3.7. Bottom Navigation

Propiedad Valor
Componente CMP-NAV-001 (Bottom Navigation)
Item activo Estadisticas (Stats)
Badge Si hay nuevo logro

4. Comportamientos

4.1. Gestos

Gesto Elemento Accion
Tap Dia en calendario Navegar a SCR-ADH-006
Tap Racha card Navegar a SCR-ADH-009
Tap Insight card Navegar a SCR-ADH-007
Tap "Ver logros" Navegar a SCR-ADH-009
Tap "Generar reporte" Navegar a SCR-ADH-010
Swipe left/right Tab content Cambiar tab
Pull down Pantalla Refresh datos

4.2. Animacion del Circulo

t=0ms     t=200ms    t=500ms    t=800ms
  0%        30%        70%        87%
 ┌──┐      ┌──┐       ┌──┐       ┌──┐
 │  │      │▓ │       │▓▓│       │▓▓│
 │  │  ->  │▓ │  ->   │▓▓│  ->   │▓▓│
 │  │      │  │       │▓ │       │▓▓│
 └──┘      └──┘       └──┘       └──┘

4.3. Pull to Refresh

  • Indicador circular standard
  • Recalcula metricas desde datos locales
  • Animacion de circulo replay

5. Estados y Transiciones

5.1. Diagrama de Estados

stateDiagram-v2
    [*] --> Loading: Abrir pantalla
    Loading --> Insufficient: < 14 dias
    Loading --> Loaded: >= 14 dias
    Loading --> Error: Fallo calculo

    Insufficient --> Loaded: Pasan dias
    Loaded --> Loaded: Refresh
    Error --> Loading: Reintentar

5.2. Condiciones de Estado

Estado Condicion Mensaje
Insufficient dias_con_datos < 14 "Necesitamos mas datos"
Loaded dias_con_datos >= 14 Dashboard completo
Error Excepcion en calculo "No pudimos calcular"

6. Datos Requeridos

6.1. Input Data

interface AdherenceDashboardData {
  // Periodo actual
  period: 'day' | 'week' | 'month' | 'quarter' | 'year';
  periodStart: Date;
  periodEnd: Date;

  // Metricas principales
  adherencePercentage: number;         // 0-100
  dosesConfirmed: number;
  dosesScheduled: number;
  adherenceLevel: 'EXCELLENT' | 'GOOD' | 'REGULAR' | 'LOW';

  // Racha
  currentStreak: number;               // dias
  bestStreak: number;                  // dias

  // Calendario semanal
  weeklyData: DayAdherence[];

  // Insights
  insights: Insight[];

  // Metadata
  daysWithData: number;
  hasEnoughData: boolean;              // >= 14 dias
}

interface DayAdherence {
  date: Date;
  dayOfWeek: string;
  percentage: number;
  dosesConfirmed: number;
  dosesScheduled: number;
}

interface Insight {
  id: string;
  type: 'pattern' | 'improvement' | 'alert' | 'motivation';
  title: string;
  message: string;
  actionable: boolean;
  action?: string;
}

6.2. Output Events

Evento Payload Destino
onDayTap date SCR-ADH-006
onStreakTap - SCR-ADH-009
onInsightTap insight_id SCR-ADH-007
onTabChange tab_index Interno
onRefresh - Recalcular
onReportTap - SCR-ADH-010
onAchievementsTap - SCR-ADH-009

7. Accesibilidad

7.1. Labels y Hints

Elemento accessibilityLabel accessibilityHint
Circulo "{X}%, adherencia {nivel}" "Tu porcentaje de adherencia del periodo"
Racha "Racha de {N} dias" "Toca para ver tus logros"
Dia calendario "{dia}, {X}% adherencia" "Toca para ver detalle"
Insight "Insight: {titulo}" "Toca para ver recomendacion completa"

7.2. Orden de Foco

  1. Top App Bar
  2. Tab Bar (General)
  3. Circulo de porcentaje
  4. Subtitulo de tomas
  5. Estado de adherencia
  6. Racha card
  7. Header calendario
  8. Dias del calendario (L-D)
  9. Insight card
  10. Boton logros
  11. Boton reporte
  12. Bottom Navigation

7.3. Screen Reader Announcements

Evento Anuncio
Pantalla cargada "Dashboard de adherencia. {X}% adherencia {nivel}"
Cambio de periodo "Mostrando {periodo}"
Refresh completado "Datos actualizados. {X}% adherencia"
Nuevo logro "Nuevo logro desbloqueado"

7.4. Contraste y Tamanos

Elemento Min Size Contraste
Porcentaje 48sp 4.5:1
Subtitulo 16sp 4.5:1
Racha texto 16sp 4.5:1
Dia calendario 12sp 4.5:1
Numero calendario 14sp 4.5:1
Touch target dia 44x60dp -

8. Responsive Design

8.1. Breakpoints

Ancho Layout
< 360dp Circulo 150dp, calendario compacto
360-600dp Layout default
> 600dp (tablet) Circulo mas grande, calendario expandido

8.2. Orientacion

Orientacion Adaptacion
Portrait Layout vertical default
Landscape Circulo a la izquierda, metricas a la derecha

9. Metricas

9.1. Performance

Metrica Objetivo
Time to Interactive < 1s
First Contentful Paint < 500ms
Animacion circulo 60fps
Calculo adherencia < 200ms

9.2. Analytics Events

Evento Parametros
screen_view screen_name: "adherence_dashboard"
adherence_calculated percentage, level, streak
day_tap date
insight_view insight_id, insight_type
tab_switch from_tab, to_tab

10. Referencias

Documento generado por MobileUxUiDrone (Eight of Eight)