Propósito: Mostrar la próxima cita agendada con fecha, tipo y preparación requerida.
JTBD: “Quiero ver que estoy progresando”
Ruta: /inicio (componente dentro del dashboard)
Módulo: PAM-6
| # |
Feature |
Descripción |
Prioridad |
| 1 |
Tipo de cita |
Laboratorio Control, Consulta, etc. |
P0 |
| 2 |
Fecha y hora |
Formato legible: “15 Ene, 8:00 AM” |
P0 |
| 3 |
Preparación |
Indicador si requiere ayuno u otra preparación |
P1 |
| 4 |
Botón recordatorio |
Agregar al calendario nativo |
P1 |
| 5 |
Tiempo relativo |
“En 5 días” |
P1 |
- Visual: Skeleton shimmer en card con 3 líneas (300ms)
- Duración: <500ms
- Copy: ninguno
- Visual: Card col-span-3, icono de calendario, tipo + fecha + hora + preparación + botón
- Datos: Próxima cita confirmada o pendiente
- Trigger: No hay citas agendadas
- Visual: Card con estado vacio
- Copy: “No tienes citas agendadas.”
- CTA: [Agendar cita] --> /citas/nueva
- Trigger: La cita es hoy
- Visual: Card con borde azul (#0f2fc7), badge “Hoy”
- Copy: “Tu cita es hoy a las 8:00 AM”
- CTA: [Ver preparación]
- Trigger: Fallo cargando datos de citas
- Copy: “No pudimos cargar tu próxima cita.”
- CTA: [Reintentar]
| Dato |
Objeto OOUX |
Propiedad |
Ejemplo |
| Tipo |
Cita |
tipo |
Laboratorio Control |
| Fecha |
Cita |
fecha |
15 Ene |
| Hora |
Cita |
hora |
8:00 AM |
| Sede |
Cita |
sede |
Clínica ADEN Medellín |
| Preparación |
Cita |
preparación |
Ayuno 12 horas |
| Tiempo relativo |
Cita |
tiempo_relativo |
En 5 días |
| Acción |
Tipo |
Resultado |
| Tap card |
Tap |
Navega a /citas/:id (detalle de la cita) |
| Recordatorio |
Tap botón |
Abre sheet de calendario nativo |
| Agendar (vacio) |
Tap CTA |
Navega a /citas/nueva |
- Viene de: Carga del dashboard
- Va a: Detalle de cita, Solicitar cita nueva
- Back: Dashboard (es un componente inline)