shadcn.io is not affiliated with official shadcn/ui
Task Budget Projection Integration Block for Svelte
An integration stats section for an intake forms tool connected to Zapier: a tasks-used bar, a billing cycle bar with a hatched stretch to a projected last day, rolling tasks remaining, and seven daily columns with the halted part hatched.
Installation
Overview
An integration stats section for Svelte with Ark UI, written for Formsill, a fictional intake forms tool for service businesses whose submissions can start a Zap, and its Zapier connection. The copy is at the start: a title, a sentence naming the day the budget runs out at this pace, and the mark pair. Under it, a Progress bar of the tasks used so far, a window bar for the billing cycle whose solid part is today, whose hatched stretch runs ahead to a solid tick at the projected last day, and a list of figures (tasks remaining on a rolling number, the daily pace, the day it runs out, the days of the cycle left uncovered). At the end, behind a divider, a framed drawing of the last seven days as columns: each column is that day's tasks, with the part that came from halted runs hatched on top. Every figure is worked out from the typed budget, the tasks used and the seven daily counts. It's built from Guides, Progress and SlidingNumber, with your theme's tokens for every colour. Zapier is named in text only: no Zapier logo, colour or wordmark ships with the block. The counts are example data; nothing is read from Zapier.
FAQ
How is the projected day worked out?
The tasks remaining are the budget minus the tasks used. The pace is the average of the seven daily counts. The days to go are the tasks remaining divided by that pace, rounded up, and the day it runs out is that many days after the last day shown. Change DAYS, USED or BUDGET and the bars, the tick, the weekday and every figure follow.
What counts as a task?
That is Zapier's rule, set by your plan, and this block does not decide it: it draws the numbers you give it. Check Zapier's own documentation for what spends a task before you wire real counts in.
What is the hatched part of a column?
The tasks that came from runs that halted that day, drawn as hatching with a foreground outline so it reads without colour. The solid part is everything else. The caption gives the week's total and the halted total in text.
How do screen reader users get the figures?
The columns are a drawing, so each one carries a hidden sentence ("Tuesday: 213 tasks, 8 from halted runs.") and the figure's caption repeats the totals. The two bars are hidden from assistive technology, because the figures list and the title already give the same numbers.