Gantt bars from task dates

export type Task = { id: string; name: string; start: string; end: string; color?: string };

const DAY = 864e5;
// Parse as UTC so daylight-saving changes never alter the day count.
const utc = (iso: string) => {
  const [y, m, d] = iso.split('-').map(Number) as [number, number, number];
  return Date.UTC(y, m - 1, d);
};

export function bars(tasks: Task[]) {
  if (!tasks.length) return { items: [], mondays: [] as number[], days: 0 };
  const starts = tasks.map((t) => utc(t.start));
  const ends = tasks.map((t) => utc(t.end));
  const min = Math.min(...starts);
  const days = Math.round((Math.max(...ends) - min) / DAY) + 1; // end date is inclusive

  const items = tasks.map((t, i) => {
    const len = Math.round((ends[i]! - starts[i]!) / DAY) + 1;
    if (len < 1) throw new Error(`Task "${t.name}" ends before it starts`);
    return { ...t, left: (Math.round((starts[i]! - min) / DAY) / days) * 100, width: (len / days) * 100 };
  });

  const mondays: number[] = [];
  for (let d = 0; d < days; d++) if (new Date(min + d * DAY).getUTCDay() === 1) mondays.push((d / days) * 100);
  return { items, mondays, days };
}

export function Gantt({ tasks }: { tasks: Task[] }) {
  const { items, mondays } = bars(tasks);
  return (
    <div className="text-sm" role="table" aria-label="Project timeline">
      {items.map((t) => (
        <div key={t.id} role="row" className="grid grid-cols-[8rem_1fr] items-center border-b">
          <div role="rowheader" className="truncate pr-2">{t.name}</div>
          <div role="cell" className="relative h-9">
            {mondays.map((m) => (
              <span key={m} className="absolute inset-y-0 w-px bg-slate-200" style={{ left: `${m}%` }} />
            ))}
            <span
              title={`${t.name}: ${t.start} to ${t.end}`}
              aria-label={`${t.start} to ${t.end}`}
              className="absolute top-2 h-5 rounded"
              style={{ left: `${t.left}%`, width: `${t.width}%`, background: t.color ?? '#2563eb' }}
            />
          </div>
        </div>
      ))}
    </div>
  );
}