# Pattern — Kanban Board ## When to use Pipeline / workflow visualization where entities move through a fixed set of STAGES (qualification → proposal → negotiation → won / lost). Drag-and-drop moves items between columns; columns with no OUTGOING transition in the BR Flow graph are TERMINAL (no drag out). > **The generated implementation is NOT a separate page.** scaffold-component > renders the board as the `kanban` viewMode of the entity's LIST page > (`?view=kanban`, Table ⇄ Kanban SegmentedControl) from the pagespec's > first-order `kanban` block (`lib/page-spec-kanban.ts`, folded by > `create-prd/cli/derive-kanban-spec`): the FilterBar, search, segments and > URL state are the list's own; the BR Flow matrix is inlined as > `ALLOWED_TRANSITIONS` (drops outside it are refused — the backend `move` > guard compiles the same edges); column order/visibility persist through > `useKanbanColumnPrefs` (header drag + ColumnPicker). This pattern file is > the STYLE reference for that branch and for bespoke `@customised` boards. ## Anatomy (the generated board branch) ``` ListPage (one route — the board is a branch of the list render) stats row / segments / FilterBar — SHARED with the table representation viewMode toggle — SegmentedControl (table | cards | kanban) board toolbar — ColumnPicker (hide/show columns) move-error banner — --error-bg, dismissable (failed move) truncated banner — --warning-bg (totalCount > fetched) columns flex — flex gap-3 overflow-x-auto (ONE line) column — w-64 shrink-0, border-t-2 tone token header — draggable (reorder), label + count card list — draggable cards (matrix + permission gated) unassigned bucket — dashed --warning border (schema drift) ``` ## Canonical example (compliant) ```tsx import { useState, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import { PermissionGuard, Slot } from '@atlashub/smartstack'; import { PageTemplate } from '@/components/ui/PageTemplate'; import { opportunitiesApi } from '@/services/api/prospectionApi'; import type { OpportunityListDto, OpportunityStatus, OpportunityFilters, OpportunityStageDto, } from '@/types/prospection'; const COLUMNS: OpportunityStatus[] = [ 'qualification', 'proposition', 'negociation', 'gagnee', 'perdue', 'abandonnee', ]; const TERMINAL: ReadonlySet = new Set(['gagnee', 'perdue', 'abandonnee']); export function PipelinePage() { const { t } = useTranslation('prospection'); const navigate = useNavigate(); const [items, setItems] = useState([]); const [stages, setStages] = useState([]); const [draggedId, setDraggedId] = useState(null); useEffect(() => { void opportunitiesApi.getStages().then(setStages); void opportunitiesApi.getAll().then(setItems); }, []); const handleDrop = async (target: OpportunityStatus) => { if (!draggedId) return; const opp = items.find((o) => o.id === draggedId); if (!opp || opp.status === target) return; const stage = stages.find((s) => s.name === target); if (!stage) return; await opportunitiesApi.moveStage(draggedId, { toStageId: stage.id }); setItems((prev) => prev.map((o) => o.id === draggedId ? { ...o, status: target, stageName: stage.name } : o)); setDraggedId(null); }; const byStatus = (s: OpportunityStatus) => items.filter((o) => o.status === s); return ( } >
{COLUMNS.map((status) => { const colItems = byStatus(status); const isTerminal = TERMINAL.has(status); return (
{ if (!isTerminal) e.preventDefault(); }} onDrop={() => { void handleDrop(status); }} >

{t(`pipeline.status.${status}`)}

{colItems.length}

{colItems.length === 0 ? (

{t('common.noResults')}

) : ( colItems.map((opp) => ( )) )}
); })}
); } ``` ## Rules this pattern enforces - **R1** — `` - **R3** — primary CTA accent (new opportunity button) - **R4** — `useTranslation('entity')` + `t('pipeline.status.')` - **R8** — NOT applicable (kanban is NOT a list — raw `` exception) - **R10** — permission format - **R11** — Slot `{entity}.header.actions` - **R16** — radius tokens on columns + cards - **R17** — cards use `