shadcn.io is not affiliated with official shadcn/ui
Inactive Account Policy Billing Block for Svelte
A closure policy made visible: days since the last counted activity, the days it flags, warns and closes the account, a filterable list of recent events tagged Counts or Does not count, and an I am still here button that resets the clock.
Installation
Overview
Show what keeps an account open, with this inactive account policy section for Svelte with Ark UI. It shows the account of Driftwick, a cloud notebook, that closes accounts after 240 days with no counted activity. A hairline frame with a plus mark on each corner has a side cell with the clock: a large "63 days" since the last counted event, a bar with ticks at the three days the policy acts on, and the dates of each (flagged at day 180, a final email at day 210, closed at day 240). Beside it is a list of six recent events, each tagged "Counts" or "Does not count" with a filled or hollow dot: signing in, an API call and editing a notebook count; paying an invoice and opening an email do not. A Toggle Group in the header filters to counting events only. The one Shine Button, "I'm still here", adds a sign-in event and sets the days to 0, which moves all three dates. It's built from Badge, Toggle Group, Shine Button and Guides, with a CSS entrance only. For account settings, retention policies and any subscription app.
FAQ
How is the number of days worked out?
daysSince takes the latest event the policy counts (counts: true) and subtracts its date from AS_OF with UTC date arithmetic. The three dates are that same date plus 180, 210 and 240 days, and the bar's fill is the days divided by 240. Nothing reads the visitor's clock, so the page reads the same on the server and in every time zone.
How do I fill it with my events?
Edit EVENTS: each has an id, a name, an ISO date and whether the policy counts it. Keep newest first. Tell customers in the product which events count; the list is the proof, so type your real rules into the data.
Does the filter change the layout?
No. The visible list sits over an unseen copy of the full list (including the row the button adds), so the panel keeps its height whichever filter is on. The count above the list says how many events are shown out of all.
What does I am still here do, and what stays local?
It adds a counted sign-in event dated today at the top of the list and resets the clock to 0 days. Pressing it again says it was already counted. Nothing is recorded: in your app call your server, which records a real activity event, and render the list and the dates from its response.