shadcn.io is not affiliated with official shadcn/ui
Opportunity Board Kanban Block for Svelte
A four-lane new-business board of eleven opportunities where each lane has a closing probability and each card and lane shows its weighted value, summed into an expected total.
Installation
Overview
Forecast new business with this opportunity board for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds four lanes that share their lines, each with a probability in its head: Identified at 10%, Scoped at 30%, Proposed at 60% and Committed at 90%. Each of the eleven opportunities is a card with a title, a note, its value and, beside it, its weighted value in this lane, the value times the lane's probability. Every lane head counts its cards and shows its total value and its weighted value, and the header sentence gives the expected total against the whole pipeline, so moving an opportunity forward visibly changes what it is worth. All sums are in integer cents and rounded half up once per lane, so the lanes add up to the total. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu with "Move to". The frame is ruled by Guides. On a phone the lanes scroll sideways in one named region with the next lane showing. For forecast reviews and probability-weighted planning.
FAQ
How do I fill it with my own opportunities and probabilities?
Edit COLUMNS and START. Each lane has an odds field, a whole percentage, and each opportunity has an id, the column it starts in, a title, a note and its value in cents (the usd() helper turns dollars into cents). weightedOf and weightedTotal do the arithmetic; nothing else holds a probability.
How is the weighted value worked out?
A lane's weighted value is its total in cents times its probability, divided by one hundred and rounded half up once, and the board's weighted value is those rounded lane values added up. Rounding per lane, not per card, keeps the lanes and the total consistent whatever the amounts. A card's own weighted figure is the same sum for that card alone.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card's title. Space or Enter picks it up, ArrowUp and ArrowDown change its place in the lane, ArrowLeft and ArrowRight go to the neighbouring lane (they swap in right-to-left languages), Home and End jump to the top and bottom, Space drops it and Escape puts it back. Each step is announced in the status line.
Is there a way to move without dragging?
Yes: the menu at the end of each card lists the lanes with the current one ticked, so one click moves the card, focus lands on it in its new place and the status line says so. This is the route for a single pointer and for touch.
What stays in the demo?
Everything. The moves live in the component's state, nothing is saved or sent, and a reload or Reset brings back the starting board. The product, the deals and the figures are made up. The probabilities are the lane constants, not a prediction. To keep a board, call your API from put, the one function every finished move goes through, and update the cards from the response.
How does it look on a phone?
The lanes scroll sideways inside the board with the next lane showing, and each lane scrolls up and down within the board's fixed height, so the page does not jump when a card moves. Each lane head keeps two lines, so the heads stay level. Touch drags from the grip only, so the rest of a card still scrolls; the menu is the other way to move it.