Search blocks by description or jump to a page.
A cost by team panel with ruled rows of member count, a proportional meter, share percentage, and amount, reconciling to the invoice total.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Cost Allocation Panel splits the June 2026 invoice across teams for the Acme workspace, one ruled row per team with a seat count, a proportional meter, a share percentage, and a tabular amount sized for the widest value. Engineering carries 42% at $94.50, Product 24%, Design 19%, Marketing 9%, and an unassigned remainder row holds the one seat with no team at 6%. A total row reconciles the rows to the $223.00 invoice, and the footer explains that base plan and usage are split in proportion to seats so the rows always sum to the invoice.
The teams are a plain const array with name, member count, amount, and share, each meter driven by an inline width and a role of meter with its own aria label. The reconciling total is what makes the split trustworthy rather than a rough estimate.
Reach for this block on a billing or finance reporting page when one invoice is shared across teams, wired to your seat assignment and cost split endpoint. Recompute the shares on any seat move and keep the total pinned to the real invoice.
A natural flow around it on an Application Pro page:
Before
After
One strong use is invoice cost split by team. Other allocation surfaces:
Tip: always show a reconciling total; an allocation that does not sum to the invoice is the first thing finance will flag.