shadcn.io is not affiliated with official shadcn/ui
Invoice Lifecycle Manager CRUD Block for Svelte
A freelancer's invoices with Outstanding, Overdue and Paid totals worked out from the list, a draft you edit line by line, Send that locks it, Mark paid that is final, and Void with a reason instead of Delete.
Installation
Overview
Show the whole life of an invoice in one list, with this invoice manager for Svelte with Ark UI. Three hairline cells at the top read Outstanding, Overdue and Paid in dollars, each worked out from the invoices below, and a Native Select filters the list by state. Each invoice is a row in a frame of fixed height that opens in place with a Collapsible: its customer, number, due date, total and a status Badge. A draft is a form: customer, due date, tax percent and any number of lines, each with a description, a quantity and a price, with subtotal, tax and total worked out in whole cents as you type. New invoice, the only Shine Button, starts a draft with the next number. Send locks the draft, a sent invoice offers a Mark paid Toggle and Void, which asks for a reason in an Alert Dialog and keeps the row marked Void, and a paid invoice is final. Only a draft can be deleted, with an Undo in the foot. The panel is ruled by Guides. For freelancers, studios and any app where a document must stop changing once it is out.
FAQ
How do I fill it with my invoices?
Edit INVOICES: each has an id, a number, a customer, a due date, a state of draft, sent, paid or void, a tax percent, its lines and, when paid or voided, paidOn or a reason. Each line keeps its price as typed dollars and its quantity as typed text; every total is derived from them in whole cents (lineCents, subOf, taxOf), so the figures can never disagree with the lines.
What can I do in each state?
A draft can change everywhere, be deleted or be sent. A sent invoice is read-only and can be marked paid or voided. A paid invoice is final: it shows the date and offers nothing. A voided invoice stays in the list, struck through, with its reason. Overdue is not a state of its own: it is a sent invoice whose due date is before AS_OF.
What does Send check?
It needs a customer, a due date after 14 October, a tax from 0 to 30 percent and at least one line, each with a description, a quantity of 1 to 999 and a price. If something is wrong the row stays a draft, the status line names the first problem, the matching field shows its reason in a slot that is always there and takes focus. When it passes the invoice is marked Sent in this demo and nothing is emailed.
Why is there no Delete on a sent invoice?
An invoice that left your hands is a record, so it is voided, not erased. Void asks for one of three reasons before it can be confirmed and says what changes: the invoice stays, marked Void, and its total no longer counts as outstanding.
What stays local, and how do I wire a real save?
Everything lives in state in this tab and a reload restores the seven invoices; nothing is sent. In your app call your API from start, send, markPaid, voidIt and remove, take the next number from the server and let it refuse any change to a sent invoice as well.