shadcn.io is not affiliated with official shadcn/ui
Overage Charges Billing Block for Vue
One billing period replayed as a single bar of 31 days, solid inside a 50,000 message allowance and hatched past it, with a slider for the day, four figures that follow it and a CSV download of the daily counts.
Installation
Overview
Show customers exactly when a plan ran out and what the rest cost, with this overage charges panel for Vue with Ark UI. Inside a hairline frame with a plus mark on each corner, one horizontal bar is the period's message allowance and the 31 days of the period lie along it in order as segments sized by how many messages each sent: solid inside the 50,000 message allowance, hatched once they pass it, with the day that crosses it split in two and a tick where the allowance ends. A Slider named "Day of the period" lights the days up to the one you pick, and a sentence under the bar says what that day did. Four figures on shared hairlines work themselves out again as you move: messages sent so far, messages past the allowance and the overage at $3.00 per 1,000, each in a rolling Sliding Number, and the invoice date. The action foot holds the only Shine Button, wrapped in a Download Trigger that saves the days up to the chosen one as a real CSV file. The days are also in a table for screen readers. It's built from Slider, Sliding Number, Download Trigger, Shine Button and Guides, with a CSS entrance only. For email, SMS and API products that bill per message past a plan.
FAQ
How do I fill it with my own period?
Edit DAYS, the messages sent on each day of the period in order, along with PERIOD_START, ALLOWANCE and CENTS_PER_THOUSAND. Everything else is worked out from them: the segments, the crossing day and its split, the running totals, the overage and the CSV. Each line of the overage rounds to whole cents, half up, so the figures always agree with the words.
What does the slider do?
It moves the day. The bar lights the days up to it and leaves the rest faint, the sentence under the bar says what that day did (inside the allowance, crossing it, or past it), and the four figures follow. The thumb moves with the arrow keys, Home and End jump to the first and last day, and its value is read as "Day 25, Oct 5" rather than a bare number.
Is the download real?
Yes. The button is wrapped in a Download Trigger and saves a CSV of day, date, messages, running total and messages past the allowance for the days up to the chosen one, built in the browser from the typed counts. The status line beside it says what was saved. Nothing else leaves the page.
What stays local, and how do I wire it for real?
The daily counts, the allowance and the rate are typed, and nothing is billed: it replays a period that already ended and was invoiced. To make it real, load the daily counts for the account's last closed period from your metering, take the allowance and rate from the plan, and link the invoice date to the invoice itself.
Is the bar accessible?
The bar is a drawing, hidden from screen readers, and the same facts are in text: the sentence under it, the four figures and a table of every day with its date, messages, running total and messages past the allowance. The slider is named and has a value text, and the status line is one polite live region that only speaks after you download.
How does it look on a phone?
The bar keeps its full width and one row, so the days get narrower but stay in order, the figures sit in two columns and the foot pins to the bottom of the screen with a full-width button. The sentence under the bar reserves three lines, so a longer one never moves the figures.