VisualFlowCRM Pipeline Board
Deals flow through pipeline stages — drag a deal node between stage columns to update it.
Drag nodes, pan and zoom — this is a live React Flow canvas.
How it works
Stage columns are group nodes; deal cards are child nodes constrained to their parent. Dropping a card into another column updates the deal's stage in your database.
Source code
tsx
const stageNodes = stages.map((s) => ({
id: s.id, type: "group", position: s.position, data: { label: s.name },
}));
const dealNodes = deals.map((d) => ({
id: d.id, parentId: d.stageId, extent: "parent",
position: d.offset, data: { label: d.name },
}));