shadcn.io is not affiliated with official shadcn/ui
Versioned Price List CRUD Block for Radix UI
A wholesaler's price list kept as versions: a live version you can only read, a draft copied from it with click-to-edit prices that show their change as a sign and a word, a Make live button that needs a date, and a Discard that only a draft allows.
Installation
Overview
Change prices without rewriting history, with this versioned price list for React with Radix UI. A strip of cells across the top names the versions: v1 and v2 in history and v3 live since the second of September, each a native radio, with a New draft cell that copies the live prices. The table under it lists eight items with their unit and price in a frame of fixed height; a live or old version is read-only, and in a draft every price is an Editable cell that opens on a click, saves on Enter and shows its change against the live version as a sign and a word ("Up +$1.20", "Down -$0.40", "Same"). The foot holds a date field, "Live from", and the only Shine Button, Make live, which needs at least one changed price and a date after the fourteenth of October: the draft becomes "v4, live from 20 Oct" and v3 turns into history. Only a draft can be discarded, in an Alert Dialog; on a live version the button explains "Live versions cannot be deleted". The panel is ruled by Guides and the status line offers Undo. For price lists, rate cards and any table whose past has to stay true.
FAQ
How do I fill it with my items and versions?
Edit ITEMS (a name and a unit) and the three version constants: each has an id, a number n, a phase of draft or published, the day it takes effect (from) and one price per item, in whole cents, in the order of ITEMS. The live version is the newest published one, and a version's "history" wording is worked out from the version after it, so there is nothing to keep in step.
How do I edit a price?
Open the draft, then click a price or press its pencil button. Enter or the check saves, Escape or the cross puts the old price back, and a value that isn't an amount like 28.50 keeps the check unavailable with the reason under the field in a line that is always there. Each save updates the change column and the count in the foot, and the status line offers Undo for it.
What does Make live do?
It checks that the draft differs from the live version and that the date is after 14 October, then publishes the draft as the new live version with that date, turns the old live version into history that ends the same day, and says so. A future date reads "Live from 20 Oct" and the old version "Ends 20 Oct". Undo puts it back to a draft.
Why can't I delete a live version?
A published price list is what past quotes and invoices were made from, so it is kept for good. Discard is for drafts only: it asks first, says how many changed prices go with it, and leaves the live prices untouched. On a live or old version the button is marked unavailable and pressing it explains why.
What stays local, and how do I wire a real save?
Everything lives in state in this tab and a reload restores the three versions; nothing is sent. In your app create, save and publish a draft from create, editPrice and makeLive on the server, schedule the switch on the chosen date there, and keep each published version immutable.