Pantalla: Vista Calendario Mes¶

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

1. Informacion General¶

Atributo	Valor
Nombre	Vista Calendario Mes
Proposito	Vista mensual con indicadores de adherencia y eventos
Tipo	Full Screen
Acceso	Bottom Nav > Calendario
Prioridad	Alta

2. Wireframe ASCII¶

2.1. Vista Principal¶

+------------------------------------------+
|  [=]    Diciembre 2025            [+]     |
+------------------------------------------+
| [Mes*] [Semana] [Dia] [Lista]             |  <- View Tabs
+------------------------------------------+
|                                           |
|  <  Diciembre 2025  >                     |  <- Nav mensual
|                                           |
|  Lu   Ma   Mi   Ju   Vi   Sa   Do         |
|  +----+----+----+----+----+----+----+     |
|  | 1  | 2  | 3  | 4  | 5  | 6  | 7  |     |
|  |[*] |[*] |[*] |[*] |[*] |[o] |[o] |     |  <- Indicadores
|  +----+----+----+----+----+----+----+     |
|  | 8  | 9  | 10 | 11 | 12 | 13 | 14 |     |
|  |[*] |[*] |[!] |[*] |[*] |[o] |[o] |     |
|  +----+----+----+----+----+----+----+     |
|  | 15 | 16 | 17 | 18 | 19 | 20 | 21 |     |
|  |[*] |[*] |[*] |[*] |[*] |[o] |[o] |     |
|  +----+----+----+----+----+----+----+     |
|  | 22 | 23 | 24 | 25 | 26 | 27 | 28 |     |
|  |[*] |[*] |[*] |[*] |[*] |[o] |[o] |     |
|  +----+----+----+----+----+----+----+     |
|  | 29 | 30 | 31 |    |    |    |    |     |
|  |[*] |[*] |[o] |    |    |    |    |     |
|  +----+----+----+----+----+----+----+     |
|                                           |
|  LEYENDA                                  |
|  [*] 100%  [o] Parcial  [!] Omitido       |
|                                           |
|  RESUMEN DICIEMBRE                        |
|  +------------------------------------+   |
|  | Adherencia general: 94%               |
|  | Tomas completadas: 186/198            |
|  | Dias perfectos: 25/31                 |
|  +------------------------------------+   |
|                                           |
+------------------------------------------+
| [Home] [Meds] [Events] [Calendar*] [More]|
+------------------------------------------+

2.2. Dia Seleccionado (Bottom Sheet)¶

+------------------------------------------+
|            10 de Diciembre                |
+------------------------------------------+
|                                           |
|  Adherencia del dia: 75%                  |
|                                           |
|  EVENTOS DEL DIA                          |
|  +------------------------------------+   |
|  | [Check] 07:30 - Al despertar          |
|  |         Omeprazol 20mg                |
|  +------------------------------------+   |
|  +------------------------------------+   |
|  | [Check] 08:00 - Desayuno              |
|  |         Metformina 850mg              |
|  |         Lisinopril 10mg               |
|  +------------------------------------+   |
|  +------------------------------------+   |
|  | [!] 14:00 - Almuerzo     OMITIDO      |
|  |     Metformina 850mg                  |
|  |     Motivo: No tenia el medicamento   |
|  +------------------------------------+   |
|  +------------------------------------+   |
|  | [Check] 20:00 - Cena                  |
|  |         Metformina 850mg              |
|  |         Atorvastatina 20mg            |
|  +------------------------------------+   |
|                                           |
|  [Ver detalle completo]                   |
|                                           |
+------------------------------------------+

3. Componentes UI¶

3.1. Calendar Grid¶

Propiedad	Valor
Componente	CMP-CAL-001 (Month Grid)
Celdas	7 columnas x 5-6 filas
Indicadores	Punto de color por estado
Seleccion	Tap para ver dia

3.2. Day Cell¶

Propiedad	Valor
Componente	CMP-CAL-002 (Day Cell)
Numero	Text md, primary
Indicador	Circulo 8dp debajo
Hoy	Borde destacado
Seleccionado	Background highlight

3.3. Month Navigator¶

Propiedad	Valor
Componente	CMP-NAV-011 (Month Nav)
Arrows	Izquierda/Derecha
Label	Mes + Ano
Gesture	Swipe horizontal

3.4. Summary Card¶

Propiedad	Valor
Componente	CMP-CRD-026 (Stats Summary)
Metricas	Adherencia, tomas, dias
Layout	List vertical

4. Indicadores de Estado¶

Estado	Color	Icono	Descripcion
Perfecto	Verde	Circulo lleno	100% tomas
Parcial	Amarillo	Circulo medio	50-99% tomas
Omitido	Rojo	Circulo con !	<50% tomas
Sin datos	Gris	Circulo vacio	Dia sin tomas
Futuro	Gris claro	-	Aun no llega

5. Comportamientos¶

5.1. Navegacion¶

Gesto	Accion
Swipe izquierda	Mes siguiente
Swipe derecha	Mes anterior
Tap dia	Abrir bottom sheet con detalle
Tap arrow	Cambiar mes
Long press	Ir a fecha especifica

5.2. Carga de Datos¶

Periodo	Estrategia
Mes actual	Cache local + sync
Meses pasados	Lazy load al navegar
Meses futuros	Solo eventos programados

6. Datos Requeridos¶

interface MonthViewData {
  month: number;
  year: number;
  days: DaySummary[];
  summary: {
    adherencePercent: number;
    completedDoses: number;
    totalDoses: number;
    perfectDays: number;
    totalDays: number;
  };
}

interface DaySummary {
  date: Date;
  status: 'PERFECT' | 'PARTIAL' | 'MISSED' | 'NO_DATA' | 'FUTURE';
  adherencePercent: number;
  events: EventSummary[];
}

7. Accesibilidad¶

7.1. Labels¶

Elemento	accessibilityLabel
Day cell	"{fecha}, {estado}, {porcentaje}% adherencia"
Nav arrow	"Ir a {mes}"
Summary	"Resumen de {mes}: {porcentaje}% adherencia"

7.2. Navegacion¶

Swipe funciona con VoiceOver/TalkBack
Anuncio al cambiar mes
Dias navegables individualmente

8. Referencias¶

Documento generado por MobileUxUiDrone (Eight of Eight)