Add Gantt chart view with card dependencies and start dates

Adds a new Gantt chart board view with custom SVG timeline rendering, card-to-card dependency tracking with cycle detection, and a startDate field on cards. Includes zoom controls (day/week/month), dependency arrows, column-grouped task list, today marker, and real-time updates. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 10:03:11 -05:00
parent 85bda718cc
commit 2fbd3bc93d
13 changed files with 1239 additions and 0 deletions
@@ -0,0 +1,107 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { joinBoard, leaveBoard, onBoardEvent, offBoardEvent } from '$lib/stores/socket.js';
+	import GanttChart from '$lib/components/GanttChart.svelte';
+
+	let { data } = $props();
+
+	let cards = $state(data.cards);
+	let dependencies = $state(data.dependencies);
+
+	onMount(() => {
+		joinBoard(data.board.id);
+
+		function onCardUpdated(payload: any) {
+			if (payload.card) {
+				const c = payload.card;
+				const existing = cards.findIndex((card: any) => card.id === c.id);
+				if (existing >= 0) {
+					if (c.startDate || c.dueDate) {
+						cards[existing] = { ...cards[existing], ...c };
+					} else {
+						cards = cards.filter((_: any, i: number) => i !== existing);
+					}
+				} else if (c.startDate || c.dueDate) {
+					cards = [...cards, c];
+				}
+			}
+		}
+
+		function onCardCreated(payload: any) {
+			if (payload.card && (payload.card.startDate || payload.card.dueDate)) {
+				cards = [...cards, payload.card];
+			}
+		}
+
+		function onCardDeleted(payload: any) {
+			cards = cards.filter((c: any) => c.id !== payload.cardId);
+			dependencies = dependencies.filter(
+				(d: any) => d.blockingCardId !== payload.cardId && d.blockedCardId !== payload.cardId
+			);
+		}
+
+		onBoardEvent('card:updated', onCardUpdated);
+		onBoardEvent('card:created', onCardCreated);
+		onBoardEvent('card:deleted', onCardDeleted);
+
+		return () => {
+			offBoardEvent('card:updated', onCardUpdated);
+			offBoardEvent('card:created', onCardCreated);
+			offBoardEvent('card:deleted', onCardDeleted);
+			leaveBoard(data.board.id);
+		};
+	});
+</script>
+
+<svelte:head>
+	<title>{data.board.title} - Gantt</title>
+</svelte:head>
+
+<div class="flex flex-col h-[calc(100vh-3.5rem)]">
+	<!-- Header -->
+	<div class="flex items-center gap-3 px-4 py-3 bg-white/80 border-b border-gray-200 dark:bg-gray-900/80 dark:border-gray-700 flex-wrap">
+		<a href="/boards/{data.board.id}" class="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition" aria-label="Back to board">
+			<svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+				<path fill-rule="evenodd" d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z" clip-rule="evenodd" />
+			</svg>
+		</a>
+		<h1 class="text-lg font-bold text-gray-900 dark:text-gray-100">{data.board.title}</h1>
+
+		<div class="flex gap-1 bg-gray-100 dark:bg-gray-800 rounded-lg p-0.5">
+			<a
+				href="/boards/{data.board.id}"
+				class="px-3 py-1 text-sm rounded-md text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+			>
+				Board
+			</a>
+			<a
+				href="/boards/{data.board.id}/calendar"
+				class="px-3 py-1 text-sm rounded-md text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+			>
+				Calendar
+			</a>
+			<span class="px-3 py-1 text-sm rounded-md bg-white dark:bg-gray-700 shadow-sm font-medium text-gray-900 dark:text-gray-100">
+				Gantt
+			</span>
+		</div>
+	</div>
+
+	<!-- Gantt Chart -->
+	<div class="flex-1 overflow-hidden">
+		{#if cards.length === 0}
+			<div class="text-center py-12">
+				<p class="text-gray-400 dark:text-gray-500">No cards with dates to display.</p>
+				<p class="text-sm text-gray-400 dark:text-gray-500 mt-1">Set start dates or due dates on cards to see them here.</p>
+				<a href="/boards/{data.board.id}" class="text-sm text-[var(--color-primary)] hover:underline mt-2 inline-block">Back to board</a>
+			</div>
+		{:else}
+			<GanttChart
+				{cards}
+				columns={data.columns}
+				{dependencies}
+				boardId={data.board.id}
+				cardPrefix={data.board.cardPrefix}
+			/>
+		{/if}
+	</div>
+</div>