shadcn.io is not affiliated with official shadcn/ui
Overdue Account Warning Billing Block for Solid
Three overdue invoices with days late counted from a fixed date, each with a pay, ask for seven days or dispute choice limited by rules, and a summary of what you pay now and whether the account stays on hold.
Installation
Overview
Turn an overdue warning into a decision for each invoice, with this overdue account section for Solid with Ark UI. It shows the account of Kestrelhill, a project tracker for agencies, with three unpaid invoices, 31, 16 and 9 days late, counted from a fixed date. A hairline frame with a plus mark on each corner holds a list ruled by Guides: each invoice has its number, what it bills for, its due date and the amount in tabular figures, and a Segment Group with three choices, Pay now, Ask for 7 days and Dispute, and a line saying what the choice does. Rules limit the choices: one seven-day extension per invoice, none once an invoice is over 30 days late (its Ask option is off, with the reason beside it), and a dispute freezes the late fee. Below, a summary derives what you pay now, how many extensions and disputes, and whether access is restored. The Shine Button records the choices, the only colored control. On a phone each invoice is a block and its segment group runs the full width. For dunning pages, past-due banners and any subscription app.
FAQ
How do I fill it with the customer's invoices?
Edit INVOICES: each has an id, an item naming what it bills for, the amount in cents and an ISO dueOn date. The days late are counted between dueOn and AS_OF in UTC, so they read the same on the server and in every time zone. EXTEND_LIMIT (30 days) and EXTEND_DAYS (7) are the rules; the options and the hold line follow them. In your app read the overdue invoices from your billing system and your own dunning policy.
How do the rules work?
Ask for 7 days is off for an invoice more than 30 days late, and the line beside it says why. A dispute marks the invoice as under review and freezes its late fee, but it does not lift a hold: the account stays on hold while an invoice over 30 days late is unpaid, whether it is disputed or not. The hold line under the summary is derived from the choices, so changing INV-1041 from Pay now to Dispute changes it from "Access is restored once INV-1041 is paid" to "Access stays on hold while INV-1041 is unpaid".
What does Confirm choices do, and what stays local?
It records the choices in the page and says so in a polite status message. Nothing is charged, extended or disputed. Until a choice changes, the button stays focusable and answers "No changes to record." In your app send each choice to your server: take the payment, move the due date, or open a dispute, and refresh the list from the result.
Is it accessible?
Each segment group is named for its invoice ("What to do about INV-1041"), moves with the arrow keys and keeps its selected option in words. The option that is off is announced as unavailable and the line next to it says why. The days late are written out, never a color, and the hold line has a glyph as well as words.
How does it look on a phone?
The three columns of the list become one block per invoice: its name and due date, the amount, then the segment group on its own full-width row with the line that says what the choice does. The summary and the button follow, and the button rides a bar fixed to the foot of the panel.