shadcn.io is not affiliated with official shadcn/ui
Seat Usage Bar Billing Block for Vue
Peak seats against paid seats over a contract year: a step chart of daily seats with the paid line and the days above it hatched, the true-up due at renewal, and a button that buys the seats now.
Installation
Overview
Show a team why a true-up is coming, with this seat usage section for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a step chart drawn from plain boxes: the number of seats in use on each day of the contract year so far, from 41 at the start to a peak of 53 on 2 Oct, a solid line for the 50 seats the account pays for, and the days above that line hatched. A legend, a caption and a table for screen readers say the same thing in words. Under it three figures (peak, paid for, over) sit on shared hairlines, and a band works out the true-up from them: the seats over the line at the yearly rate, due at renewal. A true-up follows the peak, so removing people later does not lower it. The Shine Button buys the missing seats now, which lifts the paid line to the peak, clears the hatching and brings the true-up to zero; it is the only colored control. On a phone the legend wraps and the button rides a bar at the foot of the panel. For per-seat plans with a yearly contract.
FAQ
How do I change the seat history, the price and the dates?
Edit STEPS (each entry is the day the seat count changed and the new count), YEAR_START, RENEWAL and AS_OF for the contract year and the sample date, PAID_START for the seats paid for, and YEARLY and MONTHLY for what a seat costs. The peak, the figures, the hatching and the true-up are all worked out from those, never typed twice.
How is the true-up worked out?
It is the highest seat count of the year minus the seats you pay for, times the yearly price of a seat. Here that is 3 seats at $144.00, which is $432.00 at renewal. If you pay for at least the peak, the true-up is zero. Match the rule to your own contract before you show it to customers.
What stays local, and how do I wire the button?
The button only changes state in this page: the paid line moves up, the true-up drops to nothing and a status line says "Seats added in this demo." Nothing is charged or sent. To make it real, call your billing provider in buy with the number of seats over, and update paid from its response.
Is the chart accessible?
The drawing is hidden from assistive technology. The same facts are in the legend, the caption, the three figures, a table with one row for each change in the seat count, and a polite status message that reads out the result of buying.