Task board

A Jira-style issue board: status columns holding draggable, data-driven cards. Unlike the presentational Kanban primitive, this board is controlled — you own the cards array and it reports drops through onCardMove, so the source of truth stays outside the component. Drag-and-drop uses native HTML5 with a drop indicator that shows where a card will land; being native, it is pointer-only, so a production board would add a keyboard fallback. Each card renders only the sections its data provides (type, priority, labels, points, assignee), or supply renderCard to replace the body entirely. The live version is on the My board showcase.

To Do2

Scenario diff view for forecast versions

FCE-385

Deploy blocked on infra ticket INF-204

infra

FCE-602

Developing1/3

Fix timezone drift in the ETL loader

etl

FCE-423

Testing1

Cache warm-up on deploy

FCE-292

Done1

Ingestion pipeline skeleton

etl

FCE-125

const columns = [  { id: 'todo', title: 'To Do', tone: 'neutral' },  { id: 'developing', title: 'Developing', tone: 'info', wipLimit: 3 },  { id: 'testing', title: 'Testing', tone: 'alt' },  { id: 'done', title: 'Done', tone: 'success' },];
const [cards, setCards] = useState([  {    id: 'FCE-38',    columnId: 'todo',    title: 'Scenario diff view for forecast versions',    issueKey: 'FCE-38',    type: { icon: <Sparkles className="size-3" />, tone: 'success', label: 'Feature' },    priority: { tone: 'warning', label: 'Medium' },    labels: ['ui'],    points: 5,    assignee: { name: 'Marcus Lee' },  },  // ...more cards]);
function moveCard(cardId, toColumnId, toIndex) {  // remove the card, re-insert it at toIndex within toColumnId,  // then set state with the reordered array}
<TaskBoard columns={columns} cards={cards} onCardMove={moveCard} />

Board props

Prop	Type	Default	Notes
`columns`	`TaskColumnData[]`	—	Ordered status columns.
`cards`	`TaskCardData[]`	—	Flat list; each card names the column it currently sits in.
`onCardMove`	`(cardId, toColumnId, toIndex) => void`	—	Called on drop with the target column and insert index. You update state.
`renderCard`	`(card) => ReactNode`	—	Override the default card body.

Column props

Prop	Type	Default	Notes
`id`	`string`	—	Matches a card’s columnId.
`title`	`ReactNode`	—	Column heading.
`tone`	`BadgeTone`	—	Coloured dot beside the title.
`icon`	`ReactNode`	—	Icon shown before the title.
`wipLimit`	`number`	—	Work-in-progress limit; the count turns red once exceeded.

Card props

Prop	Type	Default	Notes
`id`	`string`	—	Unique card id.
`columnId`	`string`	—	Id of the column the card sits in.
`title`	`ReactNode`	—	Issue summary.
`tag`	`{ label; tone? }`	—	Category label with a coloured dot, e.g. a project name.
`description`	`ReactNode`	—	Short supporting line under the title.
`issueKey`	`ReactNode`	—	Issue key, e.g. “FCE-42”.
`type`	`{ icon?; tone?; label? }`	—	Issue type, shown as a small coloured tile.
`priority`	`{ tone; label }`	—	Shown as a coloured dot with an accessible label.
`labels`	`string[]`	—	Small pill labels.
`progress`	`number`	—	0–100 completion, shown as a thin bar.
`progressTone`	`BadgeTone`	`'info'`	Tone of the progress fill.
`points`	`ReactNode`	—	Story points or an estimate, shown as a chip.
`assignee`	`{ name; src? }`	—	A single assignee, at the trailing edge of the footer.
`assignees`	`{ name; src? }[]`	—	Several assignees, as an overlapping group at the leading edge.
`meta`	`ReactNode`	—	Trailing footer text, e.g. a due date.
`done`	`boolean`	—	Show a success check at the trailing edge.
`accent`	`BadgeTone`	—	Left accent stripe, e.g. danger for a blocked card.