shadcn.io is not affiliated with official shadcn/ui
Invoice Summary Dashboard Block for Svelte
A freelancer's receivables as an aging bar with days sales outstanding, invoices grouped by status in a list beside a table of the chosen group, and a reminder action on every overdue invoice.
Installation
Overview
See who owes you money and for how long, with this invoice summary for Svelte with Ark UI. A hairline frame with a plus mark on each corner opens with an aging bar of everything outstanding, split into not yet due and four stages of late (1 to 30, 31 to 60, 61 to 90 and over 90 days), with the days sales outstanding worked out from the invoices. Under it a list at the start groups the invoices by status (Draft, Sent, Overdue and Paid) with a count and a total each, and a table at the end lists the chosen group. Every overdue row has "Send reminder", and the Shine Button in the header, "Remind all overdue", does them all. On a phone the list becomes a Native Select. It's built from Badge, Button, Shine Button, Native Select and Guides. For invoicing tools and freelancer finances. For the customer's own list of invoices, see the billing invoice history.
FAQ
How do I fill it with my invoices?
Edit INVOICES: each has a client, an issue date, a due date, an amount and a status of draft, sent or paid. Overdue isn't stored: a sent invoice is overdue when its due date is before AS_OF, and its age and bucket come from that. Group counts, totals, the aging bar and the header sentence are all added up from the rows.
How is days sales outstanding worked out?
It divides what is still owed on sent invoices by what was billed in the last 90 days (without drafts) and multiplies by 90. It's the simple countback method, so a client who pays late shows up as a larger number. The bar's caption says the same thing for screen readers.
What do the reminders do?
Nothing leaves the page. A reminder turns the button into "Reminder noted" and says so in the status line, and Remind all overdue does the same for every row still waiting. The buttons stay in place, so focus and row heights don't move.
What stays local, and how do I wire it for real?
All of it: the invoices are typed and reminders are only noted. To make it real, load the invoices from your accounting data, send each reminder to the mailer or to your accounting tool's reminder endpoint, and store when it was sent so the row can say so.