Resumen del día

Total
8
tareas hoy
Completadas
3
En progreso
2
en curso ahora
Pendientes
3
por completar

Mis tareas

  • Cita inicial — Carmen López
    09:00 · 45 min Completada
  • Seguimiento mensual — Javier Torres
    10:30 · 30 min Completada
  • Revisión plan — María Sánchez
    11:15 · 20 min Completada
  • Cita presencial — Pedro Gómez
    12:00 · 60 min En progreso
  • Informe trimestral — Grupo DM2
    Sin hora · 90 min est. En progreso
  • Seguimiento semanal — Ana Ruiz
    16:00 · 30 min Pendiente
  • Revisión plan keto — Luis Moreno
    17:30 · 45 min Pendiente
  • Llamada coordinación — Clínica NutriSalud
    18:00 · 15 min Pendiente

Verificación WCAG 2.1 AA + Production Quality

  • Todos los interactivos son navegables por teclado (Tab + Enter/Space)
  • Labels ARIA descriptivos en checkboxes, botones de icono y nav
  • Contraste de texto > 4.5:1 en todos los elementos (APCA)
  • Estado (pendiente/progreso/completada) indica con texto + color (no solo color)
  • Responsive 320px / 768px / 1024px / 1440px — mobile-first grid
  • Tokens semánticos propios de NutriFlow (sin purple/indigo genérico)
  • Skeleton loading + estado vacío + estado de error cubiertos
  • Sin estética genérica de IA (sin gradientes púrpura, sin cards uniformes)
TaskItem.tsx · Patrón: composición + accesibilidad
// Componente enfocado — una responsabilidad export function TaskItem({ task, onToggle, onDelete }: TaskItemProps) { return ( <li className="flex items-center gap-3 p-4 hover:bg-surface" aria-label={`Tarea ${task.status}: ${task.title}`} > <Checkbox checked={task.status === 'completada'} aria-label={`Marcar ${task.title} como completada`} onChange={() => onToggle(task.id)} /> <span className={task.done ? 'line-through text-muted' : ''}> {task.title} </span> <StatusPill status={task.status} /> // texto + color, no solo color <Button variant="ghost" aria-label={`Eliminar ${task.title}`} onClick={() => onDelete(task.id)}> <TrashIcon /> </Button> </li> ); }