shadcn.io is not affiliated with official shadcn/ui
Auto Recharge Billing Block for Solid
An auto-recharge rule (a threshold, an amount and a monthly cap) tried on the last 30 days of a voice-agent API: a balance line that jumps where the rule would have fired, and a sentence saying how many recharges, how much, and whether the balance ever ran out.
Installation
Overview
Let people test a recharge rule before they trust it, with this auto-recharge section for Solid with Ark UI. A hairline frame with a plus mark on each corner holds the rule: a Switch to turn it on, a Number Input for the balance that triggers it, a Segment Group for the amount ($25, $50 or $100) and a second number input for a monthly cap. Under it a hand-built line shows the balance on each of the last 30 days, with a dashed line at the threshold and a dot where the rule would have recharged; the caption says what that meant, such as "Would have recharged 4 times, $400, and never fell below $47", or, with a low cap, that the balance ran out for ten days after the cap. Any change runs the 30 days again. The Shine Button at the foot saves the rule and Discard returns to the last saved one; a status line says when the rule has changed and has not been saved. It's built from Switch, Number Input, Segment Group, Button, Shine Button and Guides, with a CSS entrance only. For prepaid APIs, wallets and any account that tops itself up.
FAQ
How is the simulation worked out?
It replays the 30 typed daily spends in BURN from a starting balance. After each day it checks whether the balance is below the threshold and whether another recharge fits inside the monthly cap; if so it adds the amount once that day. A day the balance would have gone below zero counts as a day it ran out, and the balance is held at zero. One recharge a day at most keeps the line easy to read; a real provider may fire more often.
How do I use my own spend history?
Replace BURN with your account's daily spend for the last 30 days (dollars, oldest first), set START to the balance on the first day and FIRST_DAY to its date. The chart, the dates in the caption and the recharge dots all follow, so nothing else needs editing. The limits of each field are in clamp: a threshold from $10 to $200, a cap from $25 to $1,000.
What stays local, and how do I make it real?
The rule is not stored. Save copies the draft over the saved rule in this page's state and says "Rule saved in this demo. Nothing was stored." To make it real, send the rule to your billing provider in save, charge the saved card only from your server when the threshold is crossed, and keep the same cap check there: the page only draws what the rule would have done.
What does the chart show when the rule is off?
The same 30 days with no recharges: the line runs down to zero, and the caption says when it first ran out and for how many days. It makes the case for the rule without asking you to trust it.
Is the chart accessible?
The line is decoration: the same facts are in the caption beneath it, the result in a sentence and the recharge dates in a list sentence, and the figure carries the chart's title. The two number fields and the amount segments are named, and the status line says when the rule has unsaved changes.