shadcn.io is not affiliated with official shadcn/ui
Revenue by Product Kanban Block for Ark UI
A three-lane revenue board of ten lines grouped by product, where each line is recurring or one-off and each lane totals the monthly recurring money and the one-off money apart.
Installation
Overview
See where the money comes from with this revenue board for React with Ark UI. A hairline frame with a plus mark on each corner holds three lanes that share their lines, one per product: Hosting, Support and Workshops. Each of the ten revenue lines is a card with a title, a billing note and an amount, marked in an outline Badge as Recurring (billed every month, shown "/mo") or One-off (billed once), and every lane head totals the two kinds apart, the monthly recurring figure and the one-off figure, because adding them would mix two kinds of money. A line moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu with "Move to"; Workshops are sold once, so a recurring line is refused there and the status line says why. The frame is ruled by Guides. On a phone the lanes scroll sideways in one named region with the next lane showing. For finance reviews, pricing changes and any ledger split by product.
FAQ
How do I fill it with my own products and lines?
Edit COLUMNS and START. A line has an id, the product column it starts in, a title, a note, a kind of "Recurring" or "One-off" and its amount in cents (recurring amounts are per month). The lane totals and the header sentence come from monthlyOf and onceOf, so a new kind of revenue is a new branch in those two helpers and in the badge.
Why are recurring and one-off money never added together?
A monthly amount repeats and a one-off amount does not, so their sum answers no question. Each lane head and the header sentence give the two figures side by side, and the card shows "/mo" or "once" next to its amount. If you want an annual figure, multiply the recurring total by twelve in a new helper and say so in the label.
Why is a recurring line refused in Workshops?
It is a sample rule that shows a refusal in words. refusalOf returns a sentence when the destination is Workshops and the line is recurring; the card stays where it is, focus returns to it and the sentence appears in the status line. Delete the rule, or point it at your own lane, if every product in your ledger takes both kinds.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card's title. Space or Enter picks it up, ArrowUp and ArrowDown change its place in the lane, ArrowLeft and ArrowRight go to the neighbouring lane (they swap in right-to-left languages), Home and End jump to the top and bottom, Space drops it and Escape puts it back. Each step is announced in the status line.
Is there a way to move without dragging?
Yes: the menu at the end of each card lists the lanes with the current one ticked, so one click moves the card, focus lands on it in its new place and the status line says so. This is the route for a single pointer and for touch.
What stays in the demo?
Everything. The moves live in the component's state, nothing is saved or sent, and a reload or Reset brings back the starting board. The product, the deals and the figures are made up. To keep a board, call your API from put, the one function every finished move goes through, and update the cards from the response.
How does it look on a phone?
The lanes scroll sideways inside the board with the next lane showing, and each lane scrolls up and down within the board's fixed height, so the page does not jump when a card moves. Touch drags from the grip only, so the rest of a card still scrolls; the menu is the other way to move it.