shadcn.io is not affiliated with official shadcn/ui
Cost Center Assignment Billing Block for Svelte
An ordered list of tag and name rules beside twelve cloud resources, each filed under the first rule that matches, with move up and down, add rule, hand assignment and a live count of what is still unassigned.
Installation
Overview
Let finance decide who pays for what, with this cost-centre assignment for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds two cells divided by a hairline. At the start, an ordered list of rules (If tag team is platform files to Engineering-01, If tag env is prod to Operations-02, If name starts with mkt- to Marketing-Global), each with ghost buttons to move it up, move it down or remove it, and under it an "Add a rule" row of three Native Selects for the tag, its value and the cost centre. At the end, twelve resources in a native table with their tags and monthly cost, each with the cost centre the FIRST matching rule files it under and a Badge naming the rule, or "Unassigned" with a select to assign it by hand. Reordering the rules moves resources at once: the marketing CDN is a prod resource, so it lands in Operations until the marketing rule is moved above the prod rule. The heading counts "11 of 12 assigned" and the monthly spend still unassigned. The action foot holds the only Shine Button, "Save rules", beside Discard. For cloud, project and department cost allocation.
FAQ
Why does only the first matching rule count?
Because rules overlap, and a list needs one answer per resource. resolve() walks the rules in order and stops at the first that matches, so the order is the policy. A resource no rule reaches can be assigned by hand; a rule that matches it later wins over the hand assignment, which is shown as "By hand" only while no rule applies.
How do I use my own resources, tags and centres?
Edit RESOURCES (name, kind, team, env and monthly cents), CENTRES, TAG_VALUES for the choices of the Add a rule row, and START_RULES. A rule reads one field, team, env or name; tag rules compare for equality and a name rule checks the start of the name. Everything shown is derived from those lists: the cost centre in each row, the badge, the count and the unassigned spend.
How do I reorder with the keyboard?
Every rule has Move up, Move down and Remove buttons named with its position ("Move rule 2 up"). The buttons at the ends of the list stay focusable but do nothing, and after a move focus stays on the same rule's button so you can press it again. Adding a rule puts focus on the new rule's button, and removing one returns it to the Add rule button. There is no drag, so there is nothing a keyboard cannot do.
What stays local, and how do I wire it for real?
The rules and hand assignments live in this page's state; Save and Discard only change what the page treats as saved, and reloading starts over. To make it real, persist the ordered rule list and the hand assignments to your cost-allocation service, and run the same first-match resolution on the server so a report and this screen can never disagree.
How does it look on a phone?
The rules come first and the resources follow in one scrolling region with a sticky header. The tags column hides and the team and environment move under the resource name, and the monthly cost hides, so each row keeps the resource and its cost centre side by side.
Is it accessible?
The rules are an ordered list, the table has a caption and row headers, every select and button has a name that includes the resource or the rule, and the scrolling region is reachable with Tab. One polite status line reports each move, add, removal and save, with how many resources will move before you save.