@startsimpli/ui 0.4.6 → 0.4.8

package/src/components/gantt/GanttChart.tsx

@@ -1,597 +1,81 @@
 '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])
+import { format } from 'date-fns'
+import type { GanttChartProps } from './types'
+import { useGanttState } from './hooks/useGanttState'
+import { GanttFilterBar } from './GanttFilterBar'
+import { GanttTimelineView } from './GanttTimelineView'
+import { GanttBoardView } from './GanttBoardView'
+import { GanttListView } from './GanttListView'
+
+export function GanttChart(props: GanttChartProps) {
+  const {
+    className,
+    infoColumnLabel = 'Item',
+    infoColumnWidth = 320,
+    showCategory = true,
+    showStatus = true,
+    showFilterBar = false,
+    showFullscreen = false,
+    showViewSwitcher = false,
+    onItemEdit,
+  } = props
+
+  const {
+    isFullscreen,
+    viewMode,
+    setViewMode,
+    detailItem,
+    setDetailItem,
+
+    uniqueStatuses,
+    uniqueCategories,
+    filteredItems,
+    tasks,
+
+    filters,
+    setFilters,
+
+    wrapperRef,
+
+    handleItemClick,
+
+    categoryColors,
+    onStatusChange,
+
+    // Timeline view props
+    zoomIndex,
+    setZoomIndex,
+    collapsed,
+    mounted,
+    dragState,
+    focusedRowIndex,
+    dayWidth,
+    startDate,
+    days,
+    months,
+    timeHeaderUnits,
+    dependencyPaths,
+    timelineWidth,
+    bodyHeight,
+    bodyScrollRef,
+    headerTimelineRef,
+    infoColumnRef,
+    toggleFullscreen,
+    toggleCollapse,
+    handleBodyScroll,
+    getBarPosition,
+    handleDragStart,
+    onDateChange,
+
+    // Board view props
+    boardColumns,
+    boardDragItem,
+    setBoardDragItem,
+
+    // List view props
+    listItems,
+  } = useGanttState(props)
 
   if (tasks.length === 0 && filteredItems.length === 0) {
     return (
@@ -605,83 +89,12 @@ export function GanttChart({
     <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>
+        <GanttFilterBar
+          filters={filters}
+          onFilterChange={(f) => setFilters(f)}
+          uniqueStatuses={uniqueStatuses}
+          uniqueCategories={uniqueCategories}
+        />
       )}
 
       {/* View switcher */}
@@ -699,216 +112,64 @@ export function GanttChart({
         </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>
+      {/* Timeline view */}
+      {viewMode === 'timeline' && (
+        <GanttTimelineView
+          infoColumnWidth={infoColumnWidth}
+          infoColumnLabel={infoColumnLabel}
+          showCategory={showCategory}
+          showStatus={showStatus}
+          showFullscreen={showFullscreen}
+          zoomIndex={zoomIndex}
+          setZoomIndex={setZoomIndex}
+          collapsed={collapsed}
+          mounted={mounted}
+          dragState={dragState}
+          focusedRowIndex={focusedRowIndex}
+          dayWidth={dayWidth}
+          tasks={tasks}
+          startDate={startDate}
+          days={days}
+          months={months}
+          timeHeaderUnits={timeHeaderUnits}
+          dependencyPaths={dependencyPaths}
+          timelineWidth={timelineWidth}
+          bodyHeight={bodyHeight}
+          isFullscreen={isFullscreen}
+          categoryColors={categoryColors}
+          onDateChange={onDateChange}
+          bodyScrollRef={bodyScrollRef}
+          headerTimelineRef={headerTimelineRef}
+          infoColumnRef={infoColumnRef}
+          toggleFullscreen={toggleFullscreen}
+          handleItemClick={handleItemClick}
+          toggleCollapse={toggleCollapse}
+          handleBodyScroll={handleBodyScroll}
+          getBarPosition={getBarPosition}
+          handleDragStart={handleDragStart}
+        />
+      )}
 
       {/* 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>
+        <GanttBoardView
+          boardColumns={boardColumns}
+          boardDragItem={boardDragItem}
+          setBoardDragItem={setBoardDragItem}
+          onStatusChange={onStatusChange}
+          categoryColors={categoryColors}
+          handleItemClick={handleItemClick}
+        />
       )}
 
       {/* 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>
+        <GanttListView
+          listItems={listItems}
+          focusedRowIndex={focusedRowIndex}
+          categoryColors={categoryColors}
+          handleItemClick={handleItemClick}
+        />
       )}
 
       {/* Detail modal */}
@@ -917,7 +178,7 @@ export function GanttChart({
           <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>
+              <button className="gantt-detail-close" onClick={() => setDetailItem(null)} aria-label="Close">x</button>
             </div>
             <div className="gantt-detail-body">
               {detailItem.description && (
@@ -969,11 +230,11 @@ export function GanttChart({
                   <input
                     type="date"
                     className="gantt-detail-input"
-                    value={detailItem.start_date ? format(new Date(detailItem.start_date), 'yyyy-MM-dd') : ''}
+                    value={detailItem.startDate ? format(new Date(detailItem.startDate), 'yyyy-MM-dd') : ''}
                     onChange={(e) => {
-                      const updated = { ...detailItem, start_date: e.target.value || null }
+                      const updated = { ...detailItem, startDate: e.target.value || null }
                       setDetailItem(updated)
-                      onItemEdit(detailItem.id, { start_date: e.target.value || null })
+                      onItemEdit(detailItem.id, { startDate: e.target.value || null })
                     }}
                   />
                 </div>
@@ -982,11 +243,11 @@ export function GanttChart({
                   <input
                     type="date"
                     className="gantt-detail-input"
-                    value={detailItem.end_date ? format(new Date(detailItem.end_date), 'yyyy-MM-dd') : ''}
+                    value={detailItem.endDate ? format(new Date(detailItem.endDate), 'yyyy-MM-dd') : ''}
                     onChange={(e) => {
-                      const updated = { ...detailItem, end_date: e.target.value || null }
+                      const updated = { ...detailItem, endDate: e.target.value || null }
                       setDetailItem(updated)
-                      onItemEdit(detailItem.id, { end_date: e.target.value || null })
+                      onItemEdit(detailItem.id, { endDate: e.target.value || null })
                     }}
                   />
                 </div>
@@ -1013,14 +274,6 @@ export function GanttChart({
           </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>
   )
 }