Sistema de disponibilidad

¿Qué es este sistema?

El botón "Disponibilidad" en el navbar indica mi carga de trabajo en tiempo real basado en el número de proyectos activos. Es un sistema inteligente que calcula automáticamente cuándo puedo aceptar nuevos proyectos.

Además, es completamente clickeable - al hacer click te lleva a la página de contacto con información personalizada según mi estado actual.

El sistema está conectado a data/projects.ts con toda la lógica centralizada en lib/workload.ts.

¿Cómo funciona?

• Se define un máximo de 10 proyectos activos simultáneos.
• Se filtran proyectos con fechas activas o marcados como ongoing: true.
• Según el porcentaje de carga se muestran diferentes estados:
• 🟢 0-74%: "Disponible" - Puedo aceptar proyectos inmediatamente
• 🟡 75-99%: "Casi al completo" - Últimas plazas disponibles
• 🔴 100%: "Agenda completa" - Lista de espera
• Si estoy al 100%, el sistema calcula automáticamente cuándo tendré disponibilidad.
• Contacto dinámico: Cada estado lleva a una página de contacto personalizada.

Código del sistema

export const MAX_PROJECTS = 8;

export function isProjectActive(start: string, end: string | null, ongoing: boolean | null): boolean {
  const today = new Date();
  const startDate = new Date(`${start}-01`);
  const endDate = end ? new Date(`${end}-01`) : null;

  const isOngoing = ongoing === true;
  const hasValidEndDate = endDate !== null && endDate >= today;
  
  return startDate <= today && (isOngoing || hasValidEndDate);
}

export function getWorkloadStatus() {
  const active = getActiveProjects();
  const porcentaje = (active.length / MAX_PROJECTS) * 100;
  const disponibilidad = getNextAvailabilityMonth();

  let color = 'bg-green-100 text-green-700 border-green-400';
  let texto = '🟢 Disponible';
  let estado = 'disponible';

  if (porcentaje >= 100) {
    color = 'bg-red-100 text-red-700 border-red-400';
    texto = disponibilidad ? `🔴 Ocupado hasta ${disponibilidad}` : '🔴 Agenda completa';
    estado = disponibilidad ? 'ocupado' : 'agenda-completa';
  } else if (porcentaje >= 75) {
    color = 'bg-yellow-100 text-yellow-800 border-yellow-400';
    texto = disponibilidad ? `🟡 Nuevos proyectos a partir de ${disponibilidad}` : '🟡 Casi al completo';
    estado = 'casi-completo';
  }

  return { active, porcentaje, disponibilidad, color, texto, estado };
}

Código completo en lib/workload.ts y components/WorkloadStatus.tsx.

Estado actual en tiempo real

Funcionalidades avanzadas

• Contacto inteligente: Cada estado redirige a una página de contacto personalizada
• URLs dinámicas: /contacto?estado=disponible, /contacto?estado=ocupado&hasta=marzo-2025
• Formularios adaptativos: Campos y mensajes cambian según la disponibilidad
• Cálculo automático: Fechas de disponibilidad calculadas en tiempo real
• Responsive design: Optimizado para todos los dispositivos
• UX mejorada: Hover effects, transiciones y feedback visual