Element: #761 Money total per column (display/kanban) What it shows: A deals pipeline board that shows the money total of each column next to its count, keeping the stage colour rail, title and count that a custom header would replace. When to use: Sales pipelines, invoicing stages and any board where each column needs an aggregate (sum, weight, hours) beside the card count. Spec: - `.kb-totals { display: flex; height: 22rem; }` is the board-height parent, a scoped class - ` import { Kanban, type KanbanColumn } from '@codeatlasdev/ui'; type Deal = { id: string; name: string; value: number }; const deals = (prefix: string, values: number[]): Deal[] => values.map((value, i) => ({ id: `${prefix}${i}`, name: `${prefix.toUpperCase()} deal ${i + 1}`, value })); let columns = $state[]>([ { id: 'new', label: 'New', color: 'var(--ca-info-main)', items: deals('n', [1200, 3400, 800]) }, { id: 'talking', label: 'Talking', color: 'var(--ca-warning-main)', items: deals('t', [9800, 15000]) }, { id: 'won', label: 'Won', color: 'var(--ca-success-main)', items: deals('w', [22000]) }, ]); const money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }); const sum = (c: KanbanColumn) => money.format(c.items.reduce((acc, d) => acc + d.value, 0));

d.id} label="Deals pipeline" onmove={({ card, from, to }) => { const src = columns.find((c) => c.id === from.column); const dst = columns.find((c) => c.id === to.column); if (!src || !dst) return; src.items = src.items.filter((d) => d.id !== card.id); dst.items = [card, ...dst.items]; }} > {#snippet card(deal)} {deal.name} {money.format(deal.value)} {/snippet} {#snippet summary(column)} {sum(column)} {/snippet}