Gantt Chart

import { GanttChart } from 'fluxo-ui';
import type { GanttTask } from 'fluxo-ui';

const tasks: GanttTask[] = [
  {
    id: '1',
    name: 'Requirements Gathering',
    start: new Date('2025-01-01'),
    end: new Date('2025-01-07'),
    progress: 100,
    assignee: 'Alice',
  },
  {
    id: '2',
    name: 'UI Design',
    start: new Date('2025-01-06'),
    end: new Date('2025-01-14'),
    progress: 60,
    color: '#8b5cf6',
    assignee: 'Bob',
  },
  // ...
];

function MyPage() {
  return <GanttChart tasks={tasks} height={400} />;
}

const [viewMode, setViewMode] = useState<GanttViewMode>('day');

<GanttChart
  tasks={tasks}
  height={400}
  viewMode={viewMode}
  onViewModeChange={setViewMode}
/>

const tasks: GanttTask[] = [
  {
    id: 'phase-1',
    name: 'Phase 1 — Discovery',
    type: 'group',
    start: new Date('2025-01-01'),
    end: new Date('2025-01-14'),
    progress: 90,
    children: [
      { id: 'p1-t1', name: 'Stakeholder Interviews', start: '2025-01-01', end: '2025-01-05', progress: 100 },
      { id: 'p1-t2', name: 'Market Research',        start: '2025-01-03', end: '2025-01-10', progress: 80 },
    ],
  },
  {
    id: 'milestone-1',
    name: 'Design Review',
    type: 'milestone',
    start: new Date('2025-01-14'),
    end: new Date('2025-01-14'),
    color: '#f59e0b',
  },
];

<GanttChart tasks={tasks} height={400} />

const tasks: GanttTask[] = [
  {
    id: 'analysis',
    name: 'Analysis',
    start: '2025-01-01',
    end: '2025-01-07',
    progress: 100,
  },
  {
    id: 'design',
    name: 'Design',
    start: '2025-01-08',
    end: '2025-01-14',
    progress: 60,
    dependencies: [{ targetId: 'analysis', type: 'finish-to-start' }],
  },
  {
    id: 'dev',
    name: 'Development',
    start: '2025-01-15',
    end: '2025-01-28',
    progress: 0,
    dependencies: [{ targetId: 'design', type: 'finish-to-start' }],
  },
];

// Supported dependency types:
// 'finish-to-start' | 'start-to-start' | 'finish-to-finish' | 'start-to-finish'

import type { GanttMarker } from 'fluxo-ui';

const markers: GanttMarker[] = [
  { id: 'today',    date: new Date(),               label: 'Today',      color: '#3b82f6' },
  { id: 'sprint',   date: new Date('2025-02-07'),   label: 'Sprint End', color: '#f59e0b' },
  { id: 'release',  date: new Date('2025-02-28'),   label: 'Release',    color: '#10b981' },
];

<GanttChart tasks={tasks} markers={markers} height={400} />

const [tasks, setTasks] = useState<GanttTask[]>(initialTasks);

const handleTaskChange = (e: GanttTaskChangeEvent) => {
  setTasks(prev =>
    prev.map(t => t.id === e.task.id
      ? { ...t, start: e.start, end: e.end }
      : t
    )
  );
};

<GanttChart
  tasks={tasks}
  height={400}
  allowTaskDrag={true}     // default
  allowTaskResize={true}   // default
  onTaskChange={handleTaskChange}
  onTaskClick={({ task }) => console.log('clicked', task.name)}
  onTaskDoubleClick={({ task }) => openEditModal(task)}
/>

const [tasks, setTasks] = useState<GanttTask[]>(initialTasks);

const handleTaskCreate = (e: GanttTaskCreateEvent) => {
  const newTask: GanttTask = {
    id: `task-${Date.now()}`,
    name: 'New Task',
    start: e.start,
    end: e.end,
    progress: 0,
  };
  setTasks(prev => [...prev, newTask]);
};

<GanttChart
  tasks={tasks}
  height={400}
  allowTaskCreate={true}
  onTaskCreate={handleTaskCreate}
/>

import type { GanttColumn } from 'fluxo-ui';

const columns: GanttColumn[] = [
  { field: 'name', headerText: 'Task', width: 200 },
  {
    field: 'assignee',
    headerText: 'Owner',
    width: 90,
    align: 'center',
    template: ({ value }) => (
      <span style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: 26, height: 26, borderRadius: '50%',
        background: '#dbeafe', color: '#1d4ed8', fontWeight: 600, fontSize: 11,
      }}>
        {String(value ?? '?').charAt(0)}
      </span>
    ),
  },
  {
    field: 'progress',
    headerText: '%',
    width: 55,
    align: 'center',
    template: ({ value }) => (
      <span style={{ color: value === 100 ? '#10b981' : '#6b7280', fontWeight: 600 }}>
        {value}%
      </span>
    ),
  },
];

<GanttChart tasks={tasks} columns={columns} fieldsPanelWidth={360} height={400} />

const tasks: GanttTask[] = [
  {
    id: 'feature-auth',
    name: 'Feature: Auth',
    start: '2025-01-06',
    end: '2025-01-14',
    progress: 75,
    assignee: 'Alice',
    data: { priority: 'High', type: 'Dev' },
  },
  // ...
];

const columns: GanttColumn[] = [
  { field: 'name', headerText: 'Task', width: 180 },
  { field: 'assignee', headerText: 'Assignee', width: 80, align: 'center' },
  {
    field: 'data.priority',
    headerText: 'Priority',
    width: 75,
    align: 'center',
    template: ({ task }) => {
      const priority = (task.data as any)?.priority;
      const colors = { Critical: '#ef4444', High: '#f59e0b', Medium: '#3b82f6' };
      return (
        <span style={{
          padding: '1px 6px', borderRadius: 10, fontSize: 10, fontWeight: 600,
          background: `${colors[priority]}20`, color: colors[priority],
        }}>
          {priority}
        </span>
      );
    },
  },
];

// Mark weekends as holidays
const isHoliday = (date: Date) => date.getDay() === 0 || date.getDay() === 6;

<GanttChart
  tasks={tasks}
  columns={columns}
  fieldsPanelWidth={360}
  isHoliday={isHoliday}
  markers={[
    { date: sprintStart, label: 'Sprint Start', color: '#3b82f6' },
    { date: sprintEnd,   label: 'Sprint End',   color: '#f59e0b' },
  ]}
  height={420}
/>

<GanttChart
  tasks={roadmapTasks}
  viewMode="month"    // or "quarter" | "year" for wider ranges
  height={400}
  columns={[{ field: 'name', headerText: 'Initiative', width: 200 }]}
/>

<GanttChart
  tasks={tasks}
  height={400}
  readOnly={true}
/>

<GanttChart
  tasks={tasks}
  height={300}
  showFieldsPanel={false}
/>