Calendario

Vista de calendario interactivo que muestra tareas, hitos y eventos del proyecto en timeline.

Ubicación

• Componente: ProjectCalendarView.tsx
• Acceso: Tab “Calendario” en detalle del proyecto
• Librería: date-fns para manejo de fechas

Características

Vista Principal

Calendario Mensual:

• Grid de 7 columnas (Dom-Sáb)
• Navegación por mes (anterior/siguiente/hoy)
• Días del mes actual y padding de días adyacentes
• Indicador visual del día actual (borde azul)
• Selección de día (fondo azul claro)

Tipos de Eventos

El calendario muestra 4 tipos de eventos:

1. Tareas con Vencimiento (📋 task_due)

   • Rojo: Tareas pendientes
   • Mostradas en fecha de vencimiento
   • Click lleva a detalle de tarea

2. Inicio de Tarea (🚀 task_start)

   • Verde: Tareas que inician
   • Fecha de inicio de tarea

3. Inicio de Proyecto (🚀 project_start)

   • Azul: Fecha de inicio del proyecto
   • Click lleva a detalle de proyecto

4. Fin de Proyecto (🏁 project_end)

   • Morado: Fecha de fin del proyecto
   • Click lleva a detalle de proyecto

Panel de Detalles

Layout de 2 columnas:

• Izquierda (2/3): Calendario principal
• Derecha (1/3): Paneles de información

Panel 1: Fecha Seleccionada

• Lista todos los eventos de la fecha
• Badges con tipo y estado
• Links a los recursos correspondientes

Panel 2: Eventos de Hoy

• Resumen de eventos del día actual
• Lista compacta con indicadores de color
• Actualización automática al cambiar día

Visualización de Eventos en Días

• Máximo 2 eventos mostrados por día
• “+N más” si hay eventos adicionales
• Truncamiento de texto largo
• Tooltip con texto completo al hover
• Código de color por tipo/prioridad

Colores por Tipo

const typeColors = {
  task_due: 'bg-red-100 text-red-800 border-red-200',
  task_start: 'bg-green-100 text-green-800 border-green-200',
  project_start: 'bg-blue-100 text-blue-800 border-blue-200',
  project_end: 'bg-purple-100 text-purple-800 border-purple-200',
  milestone: 'bg-yellow-100 text-yellow-800 border-yellow-200'
};

const priorityColors = {
  low: 'bg-blue-100 text-blue-800 border-blue-200',
  medium: 'bg-yellow-100 text-yellow-800 border-yellow-200',
  high: 'bg-orange-100 text-orange-800 border-orange-200',
  urgent: 'bg-red-100 text-red-800 border-red-200'
};

Navegación

• Botón “Anterior”: Mes previo
• Botón “Hoy”: Vuelve a mes actual
• Botón “Siguiente”: Próximo mes
• Click en día: Selecciona día y muestra detalles

Responsive

• Desktop: Vista completa con 2 paneles
• Tablet: Calendario + panel colapsable
• Móvil: Vista apilada, calendario primero

Generación de eventos del calendario

// ProjectCalendarView.tsx - Generación de eventos
const events: CalendarEvent[] = [
  // Eventos de tareas
  ...tasks.flatMap(task => {
    const events: CalendarEvent[] = [];

    if (task.due_date) {
      events.push({
        id: `task-due-${task.id}`,
        title: `📋 ${task.title}`,
        date: parseISO(task.due_date),
        type: 'task_due',
        priority: task.priority,
        status: task.status,
        href: `/tasks/${task.id}`
      });
    }

    return events;
  }),

  // Eventos de proyectos
  ...projects.flatMap(project => {
    const events: CalendarEvent[] = [];

    if (project.start_date) {
      events.push({
        id: `project-start-${project.id}`,
        title: `🚀 Inicio: ${project.name}`,
        date: parseISO(project.start_date),
        type: 'project_start',
        href: `/projects/${project.id}`
      });
    }

    if (project.end_date) {
      events.push({
        id: `project-end-${project.id}`,
        title: `🏁 Fin: ${project.name}`,
        date: parseISO(project.end_date),
        type: 'project_end',
        href: `/projects/${project.id}`
      });
    }

    return events;
  })
];

// Obtener eventos para un día específico
const getEventsForDate = (date: Date) => {
  return events.filter(event => isSameDay(event.date, date));
};

---