shadcn.io is not affiliated with official shadcn/ui
Pipeline Editor CRUD Block for Svelte
A sales pipeline's stages as a numbered list with deal counts and a win probability field, a line between every two stages to insert one, Move earlier and later, and a delete that asks where the deals go and leaves an Undo.
Installation
Overview
Shape a sales pipeline without losing a deal, with this stage editor for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds six stages in a frame of fixed height, numbered from the first, each with its name, "4 deals" and a Number Input for its win probability from 0 to 100. A stage's name is an Editable that opens where it sits, and Move earlier and Move later swap it with its neighbour. Between every two stages a thin "Insert a stage here" line opens a name field in place whose Add is the only Shine Button; the new stage starts halfway between its neighbours' probabilities. Delete is an Alert Dialog that says how many deals the stage holds and asks, in a select, which stage they move to; the last remaining stage cannot be deleted. Afterwards the foot says "Removed Proposal, 4 deals moved to Negotiation" beside an Undo. A stage that is less likely than the one before it gets a quiet note, since rising down the list is advised, not enforced. The band is ruled by Guides. For sales stages, support tiers, release trains and any ordered list whose items hold things.
FAQ
How do I use my own stages?
Edit START: a stage has an id, a name, a deals count and a prob string. The order of the array is the order of the pipeline, and the totals in the header are derived from it.
How does inserting a stage work?
Press "Insert a stage here" between two stages, type a name and press Enter or Add. The stage appears at that place with no deals and a probability halfway between its neighbours, and focus goes to it. A name that is empty or already used is refused with a line in the status. Cancel closes the field and returns focus to the line.
What happens to the deals when I delete a stage?
The dialog names the deals and asks where they go, with the next stage chosen for you (the previous one for the last). Confirming moves them, removes the stage and says so in the foot; Undo restores the stage with its deals and puts the other stage's count back. An empty stage deletes with nothing to move. When one stage is left its Delete answers "Keep at least one stage" and does nothing.
Why does it not enforce rising probabilities?
Teams reorder stages and sometimes a later stage really is less likely, so the block only notes it ("lower than Demo") and leaves the numbers alone. A value outside 0 to 100 is flagged in the same line.
What stays local, and how do I wire a real save?
Stages live in state in this tab and a reload restores the six; nothing is sent. In your app write each change to your API from addStage, rename, typeProb, move and remove; the delete is one call that takes the stage and the destination so the deals move in the same transaction. Keep Undo as a restore call.