@startsimpli/ui 0.2.0 → 0.4.0

package/src/components/gantt/GanttChart.tsx

@@ -0,0 +1,1026 @@
+'use client'
+
+import { useMemo, useState, useRef, useEffect, useCallback } from 'react'
+import {
+  addDays,
+  differenceInDays,
+  format,
+  isWeekend,
+  isToday,
+  startOfDay,
+  endOfDay,
+  startOfMonth,
+  getMonth,
+  getWeek,
+  isAfter,
+  isBefore,
+} from 'date-fns'
+import type {
+  TimelineItem,
+  GanttTask,
+  GanttChartProps,
+  GanttFilterState,
+  GanttViewMode,
+} from './types'
+import { parseDateRangeFromTitle, getHierarchyLevel } from './lib/dates'
+import { calculateExpectedProgress, calculateHealthStatus, getHealthColor } from './lib/progress'
+
+const ROW_HEIGHT = 36
+const ZOOM_LEVELS = [8, 12, 16, 24, 32, 48]
+const DEFAULT_ZOOM_INDEX = 3
+const INDENT_WIDTH = 20
+
+const DEFAULT_CATEGORY_COLORS: Record<string, string> = {
+  financial: '#22c55e',
+  product: '#3b82f6',
+  team: '#a855f7',
+  market: '#f97316',
+  other: '#6b7280',
+}
+
+function defaultStatusToProgress(status: string): number {
+  if (status === 'completed') return 100
+  if (status === 'in_progress' || status === 'active' || status === 'on_track') return 50
+  return 0
+}
+
+const DEFAULT_FILTER_STATE: GanttFilterState = {
+  search: '',
+  statuses: [],
+  categories: [],
+  dateRange: { start: null, end: null },
+}
+
+interface DragState {
+  taskId: string
+  type: 'move' | 'resize-start' | 'resize-end'
+  startX: number
+  originalStart: Date
+  originalEnd: Date
+  currentStart: Date
+  currentEnd: Date
+}
+
+export function GanttChart({
+  items,
+  dependencies = [],
+  onItemClick,
+  onDateChange,
+  statusToProgress = defaultStatusToProgress,
+  categoryColors = DEFAULT_CATEGORY_COLORS,
+  hierarchical = true,
+  initialZoom = DEFAULT_ZOOM_INDEX,
+  className,
+  infoColumnLabel = 'Item',
+  infoColumnWidth = 320,
+  showCategory = true,
+  showStatus = true,
+  showFilterBar = false,
+  showFullscreen = false,
+  showViewSwitcher = false,
+  initialViewMode = 'timeline',
+  boardStatuses,
+  onItemEdit,
+  onStatusChange,
+  persistCollapseKey,
+}: GanttChartProps) {
+  const [zoomIndex, setZoomIndex] = useState(initialZoom)
+  const [collapsed, setCollapsed] = useState<Set<string>>(() => {
+    if (persistCollapseKey && typeof window !== 'undefined') {
+      try {
+        const saved = localStorage.getItem(`gantt-collapse-${persistCollapseKey}`)
+        if (saved) return new Set(JSON.parse(saved))
+      } catch { /* ignore */ }
+    }
+    return new Set()
+  })
+  const [mounted, setMounted] = useState(false)
+  const [dragState, setDragState] = useState<DragState | null>(null)
+  const [filters, setFilters] = useState<GanttFilterState>(DEFAULT_FILTER_STATE)
+  const [isFullscreen, setIsFullscreen] = useState(false)
+  const [viewMode, setViewMode] = useState<GanttViewMode>(initialViewMode)
+  const [detailItem, setDetailItem] = useState<TimelineItem | null>(null)
+  const [focusedRowIndex, setFocusedRowIndex] = useState(-1)
+  const [boardDragItem, setBoardDragItem] = useState<string | null>(null)
+
+  const dayWidth = ZOOM_LEVELS[zoomIndex]
+  const bodyScrollRef = useRef<HTMLDivElement>(null)
+  const headerTimelineRef = useRef<HTMLDivElement>(null)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  const infoColumnRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => { setMounted(true) }, [])
+
+  // Persist collapse state to localStorage
+  useEffect(() => {
+    if (persistCollapseKey && typeof window !== 'undefined') {
+      localStorage.setItem(`gantt-collapse-${persistCollapseKey}`, JSON.stringify([...collapsed]))
+    }
+  }, [collapsed, persistCollapseKey])
+
+  // Fullscreen change listener
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement)
+    }
+    document.addEventListener('fullscreenchange', handleFullscreenChange)
+    return () => document.removeEventListener('fullscreenchange', handleFullscreenChange)
+  }, [])
+
+  const toggleFullscreen = useCallback(() => {
+    if (!wrapperRef.current) return
+    if (document.fullscreenElement) {
+      document.exitFullscreen()
+    } else {
+      wrapperRef.current.requestFullscreen()
+    }
+  }, [])
+
+  // Handle item click — open detail modal if onItemEdit is provided, otherwise delegate to onItemClick
+  const handleItemClick = useCallback((item: TimelineItem) => {
+    if (onItemEdit) {
+      setDetailItem(item)
+    }
+    onItemClick?.(item)
+  }, [onItemEdit, onItemClick])
+
+  // Extract unique statuses and categories from items for filter dropdowns
+  const { uniqueStatuses, uniqueCategories } = useMemo(() => {
+    const statuses = new Set<string>()
+    const categories = new Set<string>()
+    const collect = (itemList: TimelineItem[]) => {
+      for (const item of itemList) {
+        statuses.add(item.status)
+        if (item.category) categories.add(item.category)
+        if (item.children) collect(item.children)
+      }
+    }
+    collect(items)
+    return { uniqueStatuses: [...statuses].sort(), uniqueCategories: [...categories].sort() }
+  }, [items])
+
+  // Filter items
+  const filteredItems = useMemo(() => {
+    if (!showFilterBar) return items
+    const { search, statuses, categories, dateRange } = filters
+    const hasFilters = search || statuses.length > 0 || categories.length > 0 || dateRange.start || dateRange.end
+    if (!hasFilters) return items
+
+    const searchLower = search.toLowerCase()
+
+    const matchesItem = (item: TimelineItem): boolean => {
+      if (search && !item.title.toLowerCase().includes(searchLower) && !item.description?.toLowerCase().includes(searchLower)) return false
+      if (statuses.length > 0 && !statuses.includes(item.status)) return false
+      if (categories.length > 0 && (!item.category || !categories.includes(item.category))) return false
+      if (dateRange.start || dateRange.end) {
+        const itemEnd = item.end_date ? new Date(item.end_date) : null
+        const itemStart = item.start_date ? new Date(item.start_date) : null
+        if (dateRange.start && itemEnd && isBefore(itemEnd, dateRange.start)) return false
+        if (dateRange.end && itemStart && isAfter(itemStart, dateRange.end)) return false
+      }
+      return true
+    }
+
+    const filterTree = (itemList: TimelineItem[]): TimelineItem[] => {
+      const result: TimelineItem[] = []
+      for (const item of itemList) {
+        const filteredChildren = item.children ? filterTree(item.children) : undefined
+        if (matchesItem(item) || (filteredChildren && filteredChildren.length > 0)) {
+          result.push({ ...item, children: filteredChildren })
+        }
+      }
+      return result
+    }
+
+    return filterTree(items)
+  }, [items, filters, showFilterBar])
+
+  const hasActiveFilters = filters.search || filters.statuses.length > 0 || filters.categories.length > 0 || filters.dateRange.start || filters.dateRange.end
+
+  const toggleCollapse = (id: string) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  // Build hierarchy from children[] arrays or dependencies
+  const { childrenMap, parentMap, itemMap } = useMemo(() => {
+    const childrenMap = new Map<string, string[]>()
+    const parentMap = new Map<string, string>()
+    const itemMap = new Map(filteredItems.map((item) => [item.id, item]))
+
+    if (hierarchical) {
+      for (const item of filteredItems) {
+        if (item.children && item.children.length > 0) {
+          const childIds = item.children
+            .filter((child) => itemMap.has(child.id))
+            .map((child) => child.id)
+          if (childIds.length > 0) {
+            childrenMap.set(item.id, childIds)
+            for (const childId of childIds) {
+              parentMap.set(childId, item.id)
+            }
+          }
+        }
+      }
+
+      for (const dep of dependencies) {
+        if (dep.type === 'blocks') {
+          const parentItem = itemMap.get(dep.from_id)
+          const childItem = itemMap.get(dep.to_id)
+          if (!parentItem || !childItem) continue
+          const parentLevel = getHierarchyLevel(parentItem.title)
+          const childLevel = getHierarchyLevel(childItem.title)
+          if (parentLevel > childLevel && !parentMap.has(dep.to_id)) {
+            const children = childrenMap.get(dep.from_id) || []
+            children.push(dep.to_id)
+            childrenMap.set(dep.from_id, children)
+            parentMap.set(dep.to_id, dep.from_id)
+          }
+        }
+      }
+    }
+
+    return { childrenMap, parentMap, itemMap }
+  }, [filteredItems, dependencies, hierarchical])
+
+  // Parse dates for all items
+  const itemDates = useMemo(() => {
+    const now = new Date()
+    const currentYear = now.getFullYear()
+    const dates = new Map<string, { start: Date; end: Date }>()
+
+    for (const item of filteredItems) {
+      const parsedRange = parseDateRangeFromTitle(item.title, currentYear)
+      if (parsedRange) { dates.set(item.id, parsedRange); continue }
+
+      const startStr = item.start_date
+      const endStr = item.end_date
+
+      if (startStr && endStr) {
+        const s = new Date(startStr)
+        const e = new Date(endStr)
+        if (!isNaN(s.getTime()) && !isNaN(e.getTime())) {
+          dates.set(item.id, { start: startOfDay(s), end: endOfDay(e) }); continue
+        }
+      }
+
+      if (endStr) {
+        const e = new Date(endStr)
+        if (!isNaN(e.getTime())) {
+          const s = item.start_date ? new Date(item.start_date) :
+                    item.created_at ? new Date(item.created_at) : addDays(e, -14)
+          dates.set(item.id, { start: startOfDay(s), end: endOfDay(e) }); continue
+        }
+      }
+
+      if (startStr) {
+        const s = new Date(startStr)
+        if (!isNaN(s.getTime())) {
+          dates.set(item.id, { start: startOfDay(s), end: endOfDay(addDays(s, 14)) }); continue
+        }
+      }
+
+      const fallbackStart = item.created_at ? new Date(item.created_at) : now
+      dates.set(item.id, { start: startOfDay(fallbackStart), end: endOfDay(addDays(fallbackStart, 14)) })
+    }
+
+    return dates
+  }, [filteredItems])
+
+  // Build flattened task tree
+  const tasks = useMemo(() => {
+    const roots: string[] = []
+    for (const item of filteredItems) {
+      const parentId = parentMap.get(item.id)
+      if (!parentId || !itemMap.has(parentId)) roots.push(item.id)
+    }
+
+    const sortByDate = (ids: string[]) => [...ids].sort((a, b) => {
+      const dateA = itemDates.get(a)?.start || new Date()
+      const dateB = itemDates.get(b)?.start || new Date()
+      return dateA.getTime() - dateB.getTime()
+    })
+
+    const taskList: GanttTask[] = []
+    const visited = new Set<string>()
+
+    const traverse = (id: string, depth: number) => {
+      if (visited.has(id)) return
+      visited.add(id)
+      const item = itemMap.get(id)
+      if (!item) return
+      const dates = itemDates.get(id)
+      if (!dates) return
+
+      const children = childrenMap.get(id) || []
+      const hasChildren = children.length > 0
+      const progress = item.progress ?? statusToProgress(item.status)
+
+      const now = new Date()
+      const taskStart = startOfDay(dates.start)
+      const taskEnd = endOfDay(dates.end)
+      const totalDuration = taskEnd.getTime() - taskStart.getTime()
+      const elapsed = now.getTime() - taskStart.getTime()
+      const timeProgress = totalDuration > 0
+        ? Math.max(0, Math.min(100, (elapsed / totalDuration) * 100))
+        : 0
+
+      const expectedProgress = calculateExpectedProgress(taskStart, taskEnd, now)
+      const healthResult = calculateHealthStatus(progress, expectedProgress, item.status === 'blocked')
+
+      taskList.push({
+        item, start: taskStart, end: taskEnd, progress, timeProgress,
+        depth, hasChildren, parentId: parentMap.get(id) || null,
+        healthStatus: healthResult.status,
+      })
+
+      if (hasChildren && !collapsed.has(id)) {
+        for (const childId of sortByDate(children)) traverse(childId, depth + 1)
+      }
+    }
+
+    for (const rootId of sortByDate(roots)) traverse(rootId, 0)
+    return taskList
+  }, [filteredItems, itemDates, itemMap, childrenMap, parentMap, collapsed, statusToProgress])
+
+  // Keyboard navigation
+  useEffect(() => {
+    const wrapper = wrapperRef.current
+    if (!wrapper) return
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!wrapper.contains(document.activeElement) && document.activeElement !== wrapper) return
+
+      if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        setFocusedRowIndex((prev) => Math.min(prev + 1, tasks.length - 1))
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        setFocusedRowIndex((prev) => Math.max(prev - 1, 0))
+      } else if ((e.key === 'Enter' || e.key === ' ') && focusedRowIndex >= 0 && focusedRowIndex < tasks.length) {
+        e.preventDefault()
+        handleItemClick(tasks[focusedRowIndex].item)
+      } else if (e.key === 'Escape') {
+        if (detailItem) {
+          setDetailItem(null)
+        } else {
+          setFocusedRowIndex(-1)
+          wrapper.blur()
+        }
+      } else if (e.key === 'ArrowRight' && focusedRowIndex >= 0) {
+        const task = tasks[focusedRowIndex]
+        if (task?.hasChildren && collapsed.has(task.item.id)) {
+          toggleCollapse(task.item.id)
+        }
+      } else if (e.key === 'ArrowLeft' && focusedRowIndex >= 0) {
+        const task = tasks[focusedRowIndex]
+        if (task?.hasChildren && !collapsed.has(task.item.id)) {
+          toggleCollapse(task.item.id)
+        }
+      }
+    }
+
+    wrapper.addEventListener('keydown', handleKeyDown)
+    return () => wrapper.removeEventListener('keydown', handleKeyDown)
+  }, [tasks, focusedRowIndex, collapsed, detailItem, handleItemClick, toggleCollapse])
+
+  // Scroll focused row into view
+  useEffect(() => {
+    if (focusedRowIndex >= 0 && infoColumnRef.current) {
+      const row = infoColumnRef.current.children[focusedRowIndex] as HTMLElement
+      row?.scrollIntoView({ block: 'nearest' })
+    }
+  }, [focusedRowIndex])
+
+  // Calculate date range
+  const { startDate, days } = useMemo(() => {
+    const now = new Date()
+    const currentYear = now.getFullYear()
+    let minDate = new Date(currentYear, 0, 1)
+    let maxDate = new Date(currentYear, 11, 31)
+
+    for (const task of tasks) {
+      if (task.start < minDate) minDate = startOfDay(task.start)
+      if (task.end > maxDate) maxDate = endOfDay(task.end)
+    }
+
+    minDate = startOfMonth(minDate)
+    maxDate = endOfDay(addDays(maxDate, 30))
+    const dayCount = differenceInDays(maxDate, minDate) + 1
+    const daysArr: Date[] = []
+    for (let i = 0; i < dayCount; i++) daysArr.push(addDays(minDate, i))
+    return { startDate: minDate, days: daysArr }
+  }, [tasks])
+
+  // Group days by month
+  const months = useMemo(() => {
+    const monthsArr: { month: Date; days: number; label: string }[] = []
+    let currentMonth = -1
+    let monthDays = 0
+
+    for (const day of days) {
+      const m = getMonth(day)
+      if (m !== currentMonth) {
+        if (currentMonth !== -1) {
+          monthsArr.push({ month: addDays(day, -1), days: monthDays, label: format(addDays(day, -1), 'MMM yyyy') })
+        }
+        currentMonth = m
+        monthDays = 1
+      } else { monthDays++ }
+    }
+    if (monthDays > 0 && days.length > 0) {
+      monthsArr.push({ month: days[days.length - 1], days: monthDays, label: format(days[days.length - 1], 'MMM yyyy') })
+    }
+    return monthsArr
+  }, [days])
+
+  // Time header units
+  const timeHeaderUnits = useMemo(() => {
+    if (dayWidth >= 16) {
+      return {
+        mode: 'days' as const,
+        units: days.map((day, i) => ({
+          date: day, width: dayWidth,
+          label: day.getDate() === 1 || i === 0 ? format(day, 'd') : String(day.getDate()),
+          isWeekend: isWeekend(day), isToday: mounted && isToday(day),
+        })),
+      }
+    } else if (dayWidth >= 12) {
+      return {
+        mode: 'sparse-days' as const,
+        units: days.map((day, i) => ({
+          date: day, width: dayWidth,
+          label: (day.getDay() === 1 || day.getDate() === 1 || i === 0) ? String(day.getDate()) : '',
+          isWeekend: isWeekend(day), isToday: mounted && isToday(day),
+        })),
+      }
+    } else {
+      const weeks: { startDate: Date; endDate: Date; days: number; label: string; hasToday: boolean }[] = []
+      let currentWeek = -1, weekDays = 0, weekStart: Date | null = null, weekHasToday = false
+
+      for (const day of days) {
+        const week = getWeek(day)
+        if (week !== currentWeek) {
+          if (currentWeek !== -1 && weekStart) {
+            weeks.push({ startDate: weekStart, endDate: addDays(day, -1), days: weekDays, label: format(weekStart, 'MMM d'), hasToday: mounted && weekHasToday })
+          }
+          currentWeek = week; weekDays = 1; weekStart = day; weekHasToday = mounted && isToday(day)
+        } else {
+          weekDays++
+          if (mounted && isToday(day)) weekHasToday = true
+        }
+      }
+      if (weekDays > 0 && weekStart) {
+        weeks.push({ startDate: weekStart, endDate: days[days.length - 1], days: weekDays, label: format(weekStart, 'MMM d'), hasToday: mounted && weekHasToday })
+      }
+      return { mode: 'weeks' as const, units: weeks.map((w) => ({ ...w, width: w.days * dayWidth })) }
+    }
+  }, [days, dayWidth, mounted])
+
+  // Scroll to today on mount
+  useEffect(() => {
+    if (bodyScrollRef.current) {
+      const today = new Date()
+      const daysFromStart = differenceInDays(today, startDate)
+      bodyScrollRef.current.scrollLeft = Math.max(0, daysFromStart * dayWidth - 200)
+    }
+  }, [startDate, dayWidth])
+
+  const handleBodyScroll = () => {
+    if (bodyScrollRef.current && headerTimelineRef.current) {
+      headerTimelineRef.current.scrollLeft = bodyScrollRef.current.scrollLeft
+    }
+  }
+
+  const getBarPosition = (task: GanttTask, rowIndex: number, useDragDates = false) => {
+    const dates = useDragDates && dragState?.taskId === task.item.id
+      ? { start: dragState.currentStart, end: dragState.currentEnd }
+      : { start: task.start, end: task.end }
+    const startOffset = differenceInDays(dates.start, startDate)
+    const duration = differenceInDays(dates.end, dates.start) + 1
+    const heights = [22, 20, 18, 16]
+    const barHeight = heights[Math.min(task.depth, 3)]
+    const topOffset = (ROW_HEIGHT - barHeight) / 2
+    return { left: startOffset * dayWidth, width: Math.max(duration * dayWidth - 2, 16), top: rowIndex * ROW_HEIGHT + topOffset, height: barHeight }
+  }
+
+  // Drag handlers
+  const handleDragStart = (e: React.MouseEvent, task: GanttTask, type: 'move' | 'resize-start' | 'resize-end') => {
+    if (!onDateChange) return
+    e.preventDefault(); e.stopPropagation()
+    setDragState({ taskId: task.item.id, type, startX: e.clientX, originalStart: task.start, originalEnd: task.end, currentStart: task.start, currentEnd: task.end })
+  }
+
+  useEffect(() => {
+    if (!dragState) return
+    const handleMouseMove = (e: MouseEvent) => {
+      const deltaDays = Math.round((e.clientX - dragState.startX) / dayWidth)
+      if (deltaDays === 0 && dragState.currentStart.getTime() === dragState.originalStart.getTime()) return
+      let newStart = dragState.originalStart, newEnd = dragState.originalEnd
+      if (dragState.type === 'move') { newStart = addDays(dragState.originalStart, deltaDays); newEnd = addDays(dragState.originalEnd, deltaDays) }
+      else if (dragState.type === 'resize-start') { newStart = addDays(dragState.originalStart, deltaDays); if (newStart >= newEnd) newStart = addDays(newEnd, -1) }
+      else if (dragState.type === 'resize-end') { newEnd = addDays(dragState.originalEnd, deltaDays); if (newEnd <= newStart) newEnd = addDays(newStart, 1) }
+      setDragState((prev) => prev ? { ...prev, currentStart: newStart, currentEnd: newEnd } : null)
+    }
+    const handleMouseUp = () => {
+      if (dragState && onDateChange) {
+        const startChanged = dragState.currentStart.getTime() !== dragState.originalStart.getTime()
+        const endChanged = dragState.currentEnd.getTime() !== dragState.originalEnd.getTime()
+        if (startChanged || endChanged) onDateChange(dragState.taskId, dragState.currentStart, dragState.currentEnd)
+      }
+      setDragState(null)
+    }
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+    return () => { document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp) }
+  }, [dragState, dayWidth, onDateChange])
+
+  // Dependency arrow paths
+  const dependencyPaths = useMemo(() => {
+    const paths: Array<{ path: string; fromId: string; toId: string }> = []
+    const taskIndexMap = new Map<string, number>()
+    tasks.forEach((task, index) => taskIndexMap.set(task.item.id, index))
+
+    for (const dep of dependencies) {
+      const fromIdx = taskIndexMap.get(dep.from_id)
+      const toIdx = taskIndexMap.get(dep.to_id)
+      if (fromIdx !== undefined && toIdx !== undefined) {
+        const fromPos = getBarPosition(tasks[fromIdx], fromIdx)
+        const toPos = getBarPosition(tasks[toIdx], toIdx)
+        const x1 = fromPos.left + fromPos.width, y1 = fromPos.top + fromPos.height / 2
+        const x2 = toPos.left, y2 = toPos.top + toPos.height / 2
+        const midX = (x1 + x2) / 2
+        paths.push({ path: `M ${x1} ${y1} C ${midX} ${y1}, ${midX} ${y2}, ${x2} ${y2}`, fromId: dep.from_id, toId: dep.to_id })
+      }
+    }
+    return paths
+  }, [tasks, dependencies, dayWidth, startDate])
+
+  const timelineWidth = days.length * dayWidth
+  const bodyHeight = tasks.length * ROW_HEIGHT
+
+  // Board view: group items by status
+  const boardColumns = useMemo(() => {
+    if (viewMode !== 'board') return []
+    const statuses = boardStatuses || uniqueStatuses
+    const columns: Array<{ status: string; items: TimelineItem[] }> = statuses.map((s) => ({ status: s, items: [] }))
+    const statusSet = new Set(statuses)
+
+    const flatItems = (itemList: TimelineItem[]): TimelineItem[] => {
+      const result: TimelineItem[] = []
+      for (const item of itemList) {
+        result.push(item)
+        if (item.children) result.push(...flatItems(item.children))
+      }
+      return result
+    }
+
+    for (const item of flatItems(filteredItems)) {
+      if (statusSet.has(item.status)) {
+        columns.find((c) => c.status === item.status)?.items.push(item)
+      }
+    }
+    return columns
+  }, [viewMode, filteredItems, boardStatuses, uniqueStatuses])
+
+  // List view: flatten all items
+  const listItems = useMemo(() => {
+    if (viewMode !== 'list') return []
+    return tasks.map((t) => t)
+  }, [viewMode, tasks])
+
+  if (tasks.length === 0 && filteredItems.length === 0) {
+    return (
+      <div className={`gantt-empty ${className || ''}`}>
+        <p>No items with dates to display</p>
+      </div>
+    )
+  }
+
+  return (
+    <div ref={wrapperRef} className={`gantt-wrapper ${isFullscreen ? 'gantt-fullscreen' : ''} ${className || ''}`} tabIndex={0}>
+      {/* Filter bar */}
+      {showFilterBar && (
+        <div className="gantt-filter-bar">
+          <input
+            type="text"
+            className="gantt-filter-search"
+            placeholder="Search items..."
+            value={filters.search}
+            onChange={(e) => setFilters((f) => ({ ...f, search: e.target.value }))}
+          />
+          {uniqueStatuses.length > 0 && (
+            <select
+              className="gantt-filter-select"
+              value=""
+              onChange={(e) => {
+                const val = e.target.value
+                if (!val) return
+                setFilters((f) => ({
+                  ...f,
+                  statuses: f.statuses.includes(val) ? f.statuses.filter((s) => s !== val) : [...f.statuses, val],
+                }))
+              }}
+            >
+              <option value="">Status{filters.statuses.length > 0 ? ` (${filters.statuses.length})` : ''}</option>
+              {uniqueStatuses.map((s) => (
+                <option key={s} value={s}>{filters.statuses.includes(s) ? '✓ ' : ''}{s.replace(/_/g, ' ')}</option>
+              ))}
+            </select>
+          )}
+          {uniqueCategories.length > 0 && (
+            <select
+              className="gantt-filter-select"
+              value=""
+              onChange={(e) => {
+                const val = e.target.value
+                if (!val) return
+                setFilters((f) => ({
+                  ...f,
+                  categories: f.categories.includes(val) ? f.categories.filter((c) => c !== val) : [...f.categories, val],
+                }))
+              }}
+            >
+              <option value="">Category{filters.categories.length > 0 ? ` (${filters.categories.length})` : ''}</option>
+              {uniqueCategories.map((c) => (
+                <option key={c} value={c}>{filters.categories.includes(c) ? '✓ ' : ''}{c}</option>
+              ))}
+            </select>
+          )}
+          <input
+            type="date"
+            className="gantt-filter-date"
+            value={filters.dateRange.start ? format(filters.dateRange.start, 'yyyy-MM-dd') : ''}
+            onChange={(e) => setFilters((f) => ({ ...f, dateRange: { ...f.dateRange, start: e.target.value ? new Date(e.target.value) : null } }))}
+            title="Filter from date"
+          />
+          <input
+            type="date"
+            className="gantt-filter-date"
+            value={filters.dateRange.end ? format(filters.dateRange.end, 'yyyy-MM-dd') : ''}
+            onChange={(e) => setFilters((f) => ({ ...f, dateRange: { ...f.dateRange, end: e.target.value ? new Date(e.target.value) : null } }))}
+            title="Filter to date"
+          />
+          {hasActiveFilters && (
+            <button className="gantt-filter-clear" onClick={() => setFilters(DEFAULT_FILTER_STATE)}>Clear</button>
+          )}
+          {/* Active filter pills */}
+          {filters.statuses.map((s) => (
+            <span key={`s-${s}`} className="gantt-filter-pill">
+              {s.replace(/_/g, ' ')}
+              <button onClick={() => setFilters((f) => ({ ...f, statuses: f.statuses.filter((x) => x !== s) }))}>×</button>
+            </span>
+          ))}
+          {filters.categories.map((c) => (
+            <span key={`c-${c}`} className="gantt-filter-pill">
+              {c}
+              <button onClick={() => setFilters((f) => ({ ...f, categories: f.categories.filter((x) => x !== c) }))}>×</button>
+            </span>
+          ))}
+        </div>
+      )}
+
+      {/* View switcher */}
+      {showViewSwitcher && (
+        <div className="gantt-view-switcher">
+          {(['timeline', 'board', 'list'] as const).map((mode) => (
+            <button
+              key={mode}
+              className={`gantt-view-tab ${viewMode === mode ? 'active' : ''}`}
+              onClick={() => setViewMode(mode)}
+            >
+              {mode === 'timeline' ? 'Timeline' : mode === 'board' ? 'Board' : 'List'}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Header row */}
+      <div className="gantt-header-row" style={{ display: viewMode === 'timeline' ? undefined : 'none' }}>
+        <div className="gantt-info-header" style={{ width: infoColumnWidth }}>
+          <span style={{ flex: 1 }}>{infoColumnLabel}</span>
+          <div className="gantt-zoom-controls">
+            <button onClick={() => setZoomIndex((i) => Math.max(i - 1, 0))} disabled={zoomIndex === 0} aria-label="Zoom out">−</button>
+            <input type="range" min="0" max={ZOOM_LEVELS.length - 1} value={zoomIndex} onChange={(e) => setZoomIndex(parseInt(e.target.value))} className="gantt-zoom-slider" aria-label={`Zoom level: ${dayWidth}px per day`} />
+            <button onClick={() => setZoomIndex((i) => Math.min(i + 1, ZOOM_LEVELS.length - 1))} disabled={zoomIndex === ZOOM_LEVELS.length - 1} aria-label="Zoom in">+</button>
+            {showFullscreen && (
+              <button onClick={toggleFullscreen} aria-label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'} title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}>
+                {isFullscreen ? '⊠' : '⊞'}
+              </button>
+            )}
+          </div>
+        </div>
+        <div className="gantt-timeline-header" ref={headerTimelineRef}>
+          <div style={{ width: timelineWidth }}>
+            <div className="gantt-month-header" style={{ width: timelineWidth }}>
+              {months.map((m, i) => (<div key={i} className="gantt-month" style={{ width: m.days * dayWidth }}>{m.label}</div>))}
+            </div>
+            <div className="gantt-day-header" style={{ width: timelineWidth }}>
+              {timeHeaderUnits.mode === 'weeks' ? (
+                timeHeaderUnits.units.map((unit, i) => (
+                  <div key={i} className={`gantt-week ${unit.hasToday ? 'has-today' : ''}`} style={{ width: unit.width }}>{unit.width > 40 ? unit.label : ''}</div>
+                ))
+              ) : (
+                timeHeaderUnits.units.map((unit, i) => (
+                  <div key={i} className={`gantt-day ${unit.isWeekend ? 'weekend' : ''} ${unit.isToday ? 'today' : ''}`} style={{ width: unit.width }}>{unit.label}</div>
+                ))
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Scrollable body (timeline view) */}
+      <div className="gantt-body-scroll" ref={bodyScrollRef} onScroll={handleBodyScroll} style={{ display: viewMode === 'timeline' ? undefined : 'none' }}>
+        <div className="gantt-info-column" ref={infoColumnRef} style={{ width: infoColumnWidth }}>
+          {tasks.map((task, rowIdx) => (
+            <div key={task.item.id} className={`gantt-info-row ${focusedRowIndex === rowIdx ? 'gantt-row-focused' : ''}`}>
+              <div className="gantt-row-indent" style={{ width: task.depth * INDENT_WIDTH }} />
+              {task.hasChildren ? (
+                <button className="gantt-collapse-btn" onClick={() => toggleCollapse(task.item.id)} aria-label={collapsed.has(task.item.id) ? 'Expand' : 'Collapse'}>
+                  {collapsed.has(task.item.id) ? '▶' : '▼'}
+                </button>
+              ) : (<span className="gantt-collapse-spacer" />)}
+              <span className="gantt-row-title" onClick={() => handleItemClick(task.item)} title={task.item.title} style={{ cursor: onItemClick || onItemEdit ? 'pointer' : 'default' }}>
+                {task.item.title}
+              </span>
+              {showCategory && task.item.category && (
+                <span className="gantt-category-badge" style={{ backgroundColor: categoryColors[task.item.category] || categoryColors.other || '#6b7280' }}>
+                  {task.item.category}
+                </span>
+              )}
+              {showStatus && (
+                <span className={`gantt-status-badge gantt-status-${task.item.status}`}>{task.item.status.replace(/_/g, ' ')}</span>
+              )}
+            </div>
+          ))}
+        </div>
+
+        <div className="gantt-timeline-body" style={{ width: timelineWidth, height: bodyHeight }}>
+          {days.map((day, i) => (
+            <div key={i} className={`gantt-grid-line ${isWeekend(day) ? 'weekend' : ''} ${mounted && isToday(day) ? 'today' : ''}`} style={{ left: i * dayWidth, width: dayWidth, height: bodyHeight }} />
+          ))}
+          {tasks.map((_, i) => (<div key={i} className="gantt-row-line" style={{ top: (i + 1) * ROW_HEIGHT - 1 }} />))}
+
+          {dependencyPaths.length > 0 && (
+            <svg className="gantt-deps-svg" style={{ width: timelineWidth, height: bodyHeight }} aria-hidden="true">
+              {dependencyPaths.map((dep, i) => (<path key={`${dep.fromId}-${dep.toId}-${i}`} d={dep.path} className="gantt-dep-line" />))}
+            </svg>
+          )}
+
+          {tasks.map((task, rowIndex) => {
+            const isDragging = dragState?.taskId === task.item.id
+            const pos = getBarPosition(task, rowIndex, true)
+            const barColor = getHealthColor(task.healthStatus)
+            const dates = isDragging ? { start: dragState!.currentStart, end: dragState!.currentEnd } : { start: task.start, end: task.end }
+
+            return (
+              <div
+                key={task.item.id}
+                className={`gantt-bar depth-${Math.min(task.depth, 3)} ${isDragging ? 'dragging' : ''}`}
+                style={{
+                  left: pos.left, width: pos.width, top: pos.top, height: pos.height,
+                  backgroundColor: barColor,
+                  cursor: onDateChange ? (dragState ? (dragState.type === 'move' ? 'grabbing' : 'ew-resize') : 'grab') : 'pointer',
+                  opacity: task.item.status === 'completed' || task.item.status === 'closed' ? 0.7 : 0.85,
+                }}
+                onClick={() => !dragState && handleItemClick(task.item)}
+                onMouseDown={(e) => handleDragStart(e, task, 'move')}
+                title={`${task.item.title}\n${format(dates.start, 'MMM d, yyyy')} – ${format(dates.end, 'MMM d, yyyy')}\nProgress: ${task.progress}%`}
+              >
+                {onDateChange && (
+                  <>
+                    <div className="gantt-bar-handle gantt-bar-handle-left" onMouseDown={(e) => { e.stopPropagation(); handleDragStart(e, task, 'resize-start') }} />
+                    <div className="gantt-bar-handle gantt-bar-handle-right" onMouseDown={(e) => { e.stopPropagation(); handleDragStart(e, task, 'resize-end') }} />
+                  </>
+                )}
+                {task.timeProgress > 0 && task.timeProgress < 100 && (
+                  <div className="gantt-bar-time-marker" style={{ left: `${task.timeProgress}%` }} />
+                )}
+                {task.progress > 0 && (
+                  <div className={`gantt-bar-progress ${task.progress < task.timeProgress - 10 ? 'behind' : task.progress > task.timeProgress + 10 ? 'ahead' : ''}`} style={{ width: `${task.progress}%` }} />
+                )}
+                <span className="gantt-bar-label">{pos.width > 80 ? task.item.title.replace(/^\[[^\]]+\]\s*/, '') : ''}</span>
+                {isDragging && (<div className="gantt-drag-tooltip">{format(dates.start, 'MMM d')} – {format(dates.end, 'MMM d')}</div>)}
+              </div>
+            )
+          })}
+
+          {mounted && (() => {
+            const todayOffset = differenceInDays(new Date(), startDate)
+            if (todayOffset >= 0 && todayOffset < days.length) return <div className="gantt-today-line" style={{ left: todayOffset * dayWidth + dayWidth / 2 }} />
+            return null
+          })()}
+        </div>
+      </div>
+
+      {/* Board view */}
+      {viewMode === 'board' && (
+        <div className="gantt-board">
+          {boardColumns.map((col) => (
+            <div
+              key={col.status}
+              className={`gantt-board-column ${boardDragItem ? 'gantt-board-drop-target' : ''}`}
+              onDragOver={(e) => { e.preventDefault(); e.currentTarget.classList.add('gantt-board-drag-over') }}
+              onDragLeave={(e) => { e.currentTarget.classList.remove('gantt-board-drag-over') }}
+              onDrop={(e) => {
+                e.preventDefault()
+                e.currentTarget.classList.remove('gantt-board-drag-over')
+                if (boardDragItem && onStatusChange) {
+                  onStatusChange(boardDragItem, col.status)
+                }
+                setBoardDragItem(null)
+              }}
+            >
+              <div className="gantt-board-column-header">
+                <span className={`gantt-status-badge gantt-status-${col.status}`}>{col.status.replace(/_/g, ' ')}</span>
+                <span className="gantt-board-count">{col.items.length}</span>
+              </div>
+              <div className="gantt-board-cards">
+                {col.items.map((item) => (
+                  <div
+                    key={item.id}
+                    className="gantt-board-card"
+                    draggable={!!onStatusChange}
+                    onDragStart={() => setBoardDragItem(item.id)}
+                    onDragEnd={() => setBoardDragItem(null)}
+                    onClick={() => handleItemClick(item)}
+                  >
+                    <div className="gantt-board-card-title">{item.title}</div>
+                    {item.category && (
+                      <span className="gantt-category-badge" style={{ backgroundColor: categoryColors[item.category] || categoryColors.other || '#6b7280' }}>
+                        {item.category}
+                      </span>
+                    )}
+                    {item.end_date && (
+                      <span className="gantt-board-card-date">{format(new Date(item.end_date), 'MMM d')}</span>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* List view */}
+      {viewMode === 'list' && (
+        <div className="gantt-list">
+          <div className="gantt-list-header">
+            <span className="gantt-list-col-title">Title</span>
+            <span className="gantt-list-col-status">Status</span>
+            <span className="gantt-list-col-category">Category</span>
+            <span className="gantt-list-col-dates">Dates</span>
+            <span className="gantt-list-col-progress">Progress</span>
+          </div>
+          {listItems.map((task, idx) => (
+            <div
+              key={task.item.id}
+              className={`gantt-list-row ${focusedRowIndex === idx ? 'gantt-row-focused' : ''}`}
+              onClick={() => handleItemClick(task.item)}
+            >
+              <span className="gantt-list-col-title">
+                {task.depth > 0 && <span style={{ width: task.depth * INDENT_WIDTH, display: 'inline-block' }} />}
+                {task.item.title}
+              </span>
+              <span className="gantt-list-col-status">
+                <span className={`gantt-status-badge gantt-status-${task.item.status}`}>{task.item.status.replace(/_/g, ' ')}</span>
+              </span>
+              <span className="gantt-list-col-category">
+                {task.item.category && (
+                  <span className="gantt-category-badge" style={{ backgroundColor: categoryColors[task.item.category] || categoryColors.other || '#6b7280' }}>
+                    {task.item.category}
+                  </span>
+                )}
+              </span>
+              <span className="gantt-list-col-dates">
+                {format(task.start, 'MMM d')} – {format(task.end, 'MMM d')}
+              </span>
+              <span className="gantt-list-col-progress">
+                <div className="gantt-list-progress-bar">
+                  <div className="gantt-list-progress-fill" style={{ width: `${task.progress}%`, backgroundColor: getHealthColor(task.healthStatus) }} />
+                </div>
+                <span>{task.progress}%</span>
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Detail modal */}
+      {detailItem && onItemEdit && (
+        <div className="gantt-detail-overlay" onClick={() => setDetailItem(null)}>
+          <div className="gantt-detail-modal" onClick={(e) => e.stopPropagation()}>
+            <div className="gantt-detail-header">
+              <h3>{detailItem.title}</h3>
+              <button className="gantt-detail-close" onClick={() => setDetailItem(null)} aria-label="Close">×</button>
+            </div>
+            <div className="gantt-detail-body">
+              {detailItem.description && (
+                <div className="gantt-detail-field">
+                  <label>Description</label>
+                  <p>{detailItem.description}</p>
+                </div>
+              )}
+              <div className="gantt-detail-row">
+                <div className="gantt-detail-field">
+                  <label>Status</label>
+                  <select
+                    value={detailItem.status}
+                    onChange={(e) => {
+                      const updated = { ...detailItem, status: e.target.value }
+                      setDetailItem(updated)
+                      onItemEdit(detailItem.id, { status: e.target.value })
+                    }}
+                    className="gantt-detail-select"
+                  >
+                    {uniqueStatuses.map((s) => (
+                      <option key={s} value={s}>{s.replace(/_/g, ' ')}</option>
+                    ))}
+                  </select>
+                </div>
+                {detailItem.category !== undefined && (
+                  <div className="gantt-detail-field">
+                    <label>Category</label>
+                    <select
+                      value={detailItem.category || ''}
+                      onChange={(e) => {
+                        const updated = { ...detailItem, category: e.target.value || undefined }
+                        setDetailItem(updated)
+                        onItemEdit(detailItem.id, { category: e.target.value || undefined })
+                      }}
+                      className="gantt-detail-select"
+                    >
+                      <option value="">None</option>
+                      {uniqueCategories.map((c) => (
+                        <option key={c} value={c}>{c}</option>
+                      ))}
+                    </select>
+                  </div>
+                )}
+              </div>
+              <div className="gantt-detail-row">
+                <div className="gantt-detail-field">
+                  <label>Start Date</label>
+                  <input
+                    type="date"
+                    className="gantt-detail-input"
+                    value={detailItem.start_date ? format(new Date(detailItem.start_date), 'yyyy-MM-dd') : ''}
+                    onChange={(e) => {
+                      const updated = { ...detailItem, start_date: e.target.value || null }
+                      setDetailItem(updated)
+                      onItemEdit(detailItem.id, { start_date: e.target.value || null })
+                    }}
+                  />
+                </div>
+                <div className="gantt-detail-field">
+                  <label>End Date</label>
+                  <input
+                    type="date"
+                    className="gantt-detail-input"
+                    value={detailItem.end_date ? format(new Date(detailItem.end_date), 'yyyy-MM-dd') : ''}
+                    onChange={(e) => {
+                      const updated = { ...detailItem, end_date: e.target.value || null }
+                      setDetailItem(updated)
+                      onItemEdit(detailItem.id, { end_date: e.target.value || null })
+                    }}
+                  />
+                </div>
+              </div>
+              {detailItem.progress !== undefined && (
+                <div className="gantt-detail-field">
+                  <label>Progress: {detailItem.progress}%</label>
+                  <input
+                    type="range"
+                    min="0"
+                    max="100"
+                    value={detailItem.progress}
+                    onChange={(e) => {
+                      const val = parseInt(e.target.value)
+                      const updated = { ...detailItem, progress: val }
+                      setDetailItem(updated)
+                      onItemEdit(detailItem.id, { progress: val })
+                    }}
+                    className="gantt-detail-slider"
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="gantt-legend" style={{ display: viewMode === 'timeline' ? undefined : 'none' }}>
+        <div className="gantt-legend-item"><div className="gantt-legend-color" style={{ background: '#22c55e' }} /><span>On Track</span></div>
+        <div className="gantt-legend-item"><div className="gantt-legend-color" style={{ background: '#eab308' }} /><span>At Risk</span></div>
+        <div className="gantt-legend-item"><div className="gantt-legend-color" style={{ background: '#ef4444' }} /><span>Blocked</span></div>
+        <div className="gantt-legend-item"><div className="gantt-legend-color" style={{ background: '#9ca3af' }} /><span>Not Started</span></div>
+        <div className="gantt-legend-item"><div className="gantt-legend-color" style={{ background: '#3b82f6', width: 2, height: 12 }} /><span>Today</span></div>
+      </div>
+    </div>
+  )
+}