project-management-integrations

What this skill does

# Project Management Integrations for MUI Apps

Gantt charts, Kanban boards, scheduling, and resource management libraries
that compose with MUI's theme, layout, and component slots.

MUI X does not ship a native Gantt component (roadmap item, not yet available).
Use these libraries for the timeline and MUI for everything around it.

---

## Gantt Chart Libraries

### SVAR React Gantt — Best Free Option (MIT)

```bash
npm install wx-react-gantt
```

**Free MIT core:**
- Interactive drag-and-drop task editing on timeline
- Task dependencies (FS, SS, EE, SE)
- Hierarchical/summary tasks with collapsible groups
- Customizable task bars, tooltips, grid columns, time scale
- Multiple zoom levels, keyboard navigation, light/dark themes
- Full TypeScript, React 19 compatible, Vite/Next.js
- 10,000+ task performance

**SVAR PRO (~$524/dev perpetual) adds:**
- Working-day calendars per project/task/resource
- Baselines (original plan vs current)
- Auto-scheduling (tasks shift when dependencies change)
- Split tasks, undo/redo, rollups, slack visualization
- Export to PDF, PNG, Excel
- Import/export MS Project files

**MUI integration:**
```tsx
import { Gantt } from 'wx-react-gantt';
import Paper from '@mui/material/Paper';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';

function ProjectGantt({ tasks, links }) {
  const [editTask, setEditTask] = useState(null);

  return (
    <Paper sx={{ height: 600, overflow: 'hidden' }}>
      {/* MUI toolbar above Gantt */}
      <Box sx={{ display: 'flex', gap: 1, p: 1, borderBottom: 1, borderColor: 'divider' }}>
        <Button size="small" onClick={handleZoomIn}>Zoom In</Button>
        <Button size="small" onClick={handleZoomOut}>Zoom Out</Button>
        <DateRangePicker slotProps={{ textField: { size: 'small' } }} />
      </Box>

      {/* Gantt handles timeline rendering */}
      <Gantt
        tasks={tasks}
        links={links}
        onTaskDblClick={(task) => setEditTask(task)}
      />

      {/* MUI Dialog for task editing */}
      <Dialog open={!!editTask} onClose={() => setEditTask(null)} maxWidth="sm" fullWidth>
        <TaskEditForm task={editTask} onSave={handleSave} />
      </Dialog>
    </Paper>
  );
}
```

### DHTMLX React Gantt — Enterprise (Paid)

```bash
npm install @dhx/react-gantt
```

- Renders 30,000+ tasks smoothly
- Auto-scheduling, critical path calculation
- Resource management with histogram (PRO)
- Working time calendars at project/task/resource levels
- Undo/redo with Valtio or Redux
- **Official MUI examples** in docs using MUI Button, Divider, ButtonGroup, icons
- Standard: free (limited); PRO: ~$699/dev; Team: ~$1,299

### Bryntum Gantt — MS Project Feature Parity (Paid)

- MS Project-equivalent scheduling engine (ChronoGraph)
- Critical path with early/late dates, free slack, total slack
- Baselines: any number of snapshots
- Progress line visualization
- Resource assignment column with multi-select picker
- CSS variables align to MUI theme tokens
- ~$680-940/dev perpetual
- **SaaS/OEM requires separate license** — contact before committing

### Syncfusion React Gantt — Free for Small Teams

- **Free Community License** for <$1M revenue, ≤5 devs, ≤10 employees
- Critical path with `enableCriticalPath` prop
- Resource view, filtering, split tasks, undo/redo
- Part of 1,900+ component suite
- Export PDF/CSV/Excel

### FullCalendar Premium — Resource Scheduling ($480/dev/yr)

- Free MIT: day/week/month calendar, drag-and-drop
- Premium: Resource Timeline (horizontal, Gantt-like), Vertical Resource view
- Best for contractor availability/booking views, not dependency Gantt

---

## Feature Comparison Matrix

| Feature | SVAR Free | SVAR PRO | DHTMLX PRO | Bryntum | Syncfusion Community |
|---------|:---------:|:--------:|:----------:|:-------:|:--------------------:|
| **Cost** | Free MIT | ~$524/dev | ~$699/dev | ~$680/dev | Free (<$1M) |
| **React native** | ✓ | ✓ | ✓ | Wrapper | Wrapper |
| **Drag/drop** | ✓ | ✓ | ✓ | ✓ | ✓ |
| **Dependencies** | ✓ | ✓ | ✓ | ✓ | ✓ |
| **Critical path** | — | — | ✓ | ✓ | ✓ |
| **Baselines** | — | ✓ | ✓ | ✓ | ✓ |
| **Auto-scheduling** | — | ✓ | ✓ | ✓ | ✓ |
| **Resource mgmt** | — | — | ✓ | ✓ | ✓ |
| **Working calendars** | — | ✓ | ✓ | ✓ | ✓ |
| **MS Project import** | — | ✓ | — | — | — |
| **Export PDF/Excel** | — | ✓ | ✓ | ✓ | ✓ |
| **Undo/redo** | — | ✓ | ✓ | ✓ | ✓ |
| **MUI theming** | ✓ | ✓ | ✓ documented | ✓ | CSS vars |
| **SaaS/OEM allowed** | ✓ MIT | ✓ | ✓ | Need OEM | Needs paid |
| **Max tasks** | 10K+ | 10K+ | 30K+ | 30K+ | Large |

---

## Kanban Board Libraries

### dnd-kit — Modern Standard (MIT Free)

```bash
npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
```

The successor to `react-beautiful-dnd`. Community standard for React DnD.

```tsx
import {
  DndContext,
  DragOverlay,
  closestCorners,
  PointerSensor,
  KeyboardSensor,
  useSensor,
  useSensors,
} from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import Paper from '@mui/material/Paper';
import Card from '@mui/material/Card';
import Typography from '@mui/material/Typography';
import Avatar from '@mui/material/Avatar';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';

// Sortable card using MUI Card
function KanbanCard({ task }: { task: Task }) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: task.id,
  });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
  };

  return (
    <Card
      ref={setNodeRef}
      style={style}
      {...attributes}
      {...listeners}
      sx={{
        p: 1.5, mb: 1, cursor: 'grab',
        '&:hover': { borderColor: 'primary.main', boxShadow: 2 },
        border: '1px solid', borderColor: 'divider', borderRadius: 2,
      }}
    >
      <Typography variant="body2" fontWeight={600}>{task.title}</Typography>
      <Stack direction="row" spacing={1} sx={{ mt: 1 }} alignItems="center">
        <Chip label={task.priority} size="small" color={priorityColor(task.priority)} />
        <Avatar src={task.assignee.avatar} sx={{ width: 24, height: 24 }} />
      </Stack>
    </Card>
  );
}

// Kanban column
function KanbanColumn({ column, tasks }: { column: Column; tasks: Task[] }) {
  return (
    <Paper
      sx={{
        width: 280, minHeight: 400, p: 1, borderRadius: 2,
        bgcolor: 'action.hover',
      }}
    >
      <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 1, px: 1 }}>
        <Typography variant="subtitle2">{column.title}</Typography>
        <Chip label={tasks.length} size="small" />
      </Stack>

      <SortableContext items={tasks.map((t) => t.id)} strategy={verticalListSortingStrategy}>
        {tasks.map((task) => (
          <KanbanCard key={task.id} task={task} />
        ))}
      </SortableContext>
    </Paper>
  );
}

// Board with drag between columns
function KanbanBoard({ columns, tasks }: KanbanBoardProps) {
  const sensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
    useSensor(KeyboardSensor),
  );

  const [activeId, setActiveId] = useState<string | null>(null);

  return (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCorners}
      onDragStart={({ active }) => setActiveId(active.id as string)}
      onDragEnd={handleDragEnd}
      onDragOver={handleDragOver}
    >
      <Stack direction="row" spacing={2} sx={{ overflowX: 'auto', p: 2 }}>
        {columns.map((col) => (
          <KanbanColumn
            key={col.id}
            column={col}
            tasks={tasks.filter((t) => t.columnId === col.id)}
          />
        ))}
      </Stack>

      {/* Ghost clone while dragging */}
      <DragOverlay>
        {activeId && (
          <Card sx={{ p: 1