shadcn.io is not affiliated with official shadcn/ui
Promo Code Manager CRUD Block for Svelte
An event platform's promo codes in a table with usage and expiry, a New coupon dialog with a code generator and a live sentence of what the customer gets, an Active switch per code, and Delete with Undo.
Installation
Overview
Create, switch and retire promo codes without leaving the list, with this coupon manager for Svelte with Ark UI. A native table in a frame of fixed height has a row per code: the code in a monospace face, its discount, "Used 41 of 100", the expiry date and an Active Switch, with a trash button that deletes it. A toolbar above it holds a search Input and an Active only Toggle. New coupon, an outline Button in the header, opens a Dialog with a code field and a Generate button, a Segment Group for percent or amount off, the value, the uses allowed and an expiry date, and a sentence that reads back what the customer gets while you type ("SPRING-4KQ2 gives 20% off until 31 Oct, 100 uses"). Create is the only Shine Button; the new coupon lands at the head of the list marked New. A coupon that is expired or used up cannot be switched on and says why in its row. The panel is ruled by Guides and the foot says what happened with an Undo. For promotions, voucher lists and any table of codes with a limit.
FAQ
How do I fill it with my coupons?
Edit COUPONS: each has an id, a code, a kind of percent or amount, a value (a whole percent, or cents for an amount), a limit, how many times it was used, an ISO expires date and whether it is active. Amounts are whole cents and every date is written in UTC against AS_OF, so the block reads the same on the server and in every time zone.
What does the dialog check?
A code is 4 to 16 capitals, digits or hyphens (typing lower case turns to capitals) and no other coupon may hold it. A percent is a whole number from 1 to 100 and an amount a price like 25 or 12.50. Uses allowed is a whole number of 1 or more and the expiry must be after 14 October. Each reason appears under its field in a line that is always there, and a failed press moves focus to the first field with a problem.
What does Generate do?
It fills the code with a word and four characters made from a counter, for example SPRING-4KQ2. The same counter gives the same code every time, so the example is repeatable, and nothing reads a random number or the clock. In your app ask the server for a code that is free and show it the same way.
Why can't I switch some codes on?
A code whose date has passed or whose uses are all taken cannot start again, so its switch is marked unavailable with the reason in the row ("Expired 12 Oct", "Used up"), and pressing it says the same in the status line. Change the expiry or the limit in your own edit screen to bring such a code back.
What stays local, and how do I wire a real save?
Everything lives in state in this tab and a reload restores the eight coupons; nothing is sent. Delete removes a coupon at once and the foot offers Undo, which also undoes the last switch. In your app send the create, switch and delete from their handlers, keep the previous list for Undo, and ask for confirmation when a coupon has already been used.