Gantt

import { Gantt, type GanttEvent, type GanttResource } from '$lib/components/ui/gantt/index.js';

<script lang="ts">
	import { Gantt, type GanttEvent, type GanttResource } from '$lib/components/ui/gantt/index.js';

	const resources: GanttResource[] = [
		{
			id: 'engineering',
			title: 'Engineering',
			children: [
				{ id: 'design', title: 'Detailed design' },
				{ id: 'approval', title: 'Client approval' }
			]
		},
		{ id: 'construction', title: 'Construction' }
	];

	const events: GanttEvent[] = [
		{
			end: new Date(2026, 8, 1),
			id: 'design',
			progress: 70,
			resourceId: 'design',
			start: new Date(2026, 7, 10),
			title: 'Detailed design'
		},
		{
			end: new Date(2026, 8, 8),
			id: 'approval',
			progress: 20,
			resourceId: 'approval',
			start: new Date(2026, 7, 28),
			title: 'Client approval',
			tone: 'accent'
		},
		{
			end: new Date(2026, 9, 20),
			id: 'construction',
			progress: 0,
			resourceId: 'construction',
			start: new Date(2026, 8, 10),
			title: 'Site construction',
			tone: 'secondary'
		}
	];
</script>

<Gantt
	defaultDate={new Date(2026, 7, 17)}
	defaultScale="month"
	{events}
	{resources}
	title="Project timeline"
	description="Planned work and reported completion."
/>