shadcn.io is not affiliated with official shadcn/ui
Sales Rep Quota Dashboard Profile Block for React Aria
A sales rep profile as a what-if quota: a gauge of attainment against a 400k quota with ticks at 100 and 120 percent, commission worked out by tier, the gap to quota in words, and a Won checkbox on each of seven open deals.
Installation
Overview
Let a rep see where a quarter lands before it closes, with this sales rep profile for React with React Aria. A compact header holds the title and one sentence, and the hairline frame under it splits in two. The start cell holds the rep: initials, name and role, then a Circular Progress gauge of attainment against a $400k quota. The ring runs to 120% of quota, with a tick at 100% and one at 120% where the commission rate steps up, and the percentage sits in its middle. Under it a line says the gap in words ("$38k to quota", then "$22k over quota"), and a Data List gives what is closed, the commission worked out tier by tier (8% to quota, 12% up to 120%, 15% above) and the rate that pays on the next dollar. The main cell is the open pipeline: seven deals with stage, close date and amount, each with a Won Checkbox that spans its row. Ticking a deal adds it to what is closed, and the gauge, the gap, the commission and the count all move together. The foot, ruled by Guides, holds a polite status line and a ghost Button that clears the ticks. It's built from Circular Progress, Checkbox, Data List, Avatar, Button and Guides, with a CSS entrance only. For a sales workspace, a CRM profile or any rep page that answers "what if this one closes".
FAQ
How do I fill it with my own quota and deals?
Edit the constants at the top. QUOTA is the quarter's quota in dollars and CLOSED what is already closed won. DEALS lists the open pipeline: each deal has an id, a name, a stage, an ISO closes date and an amount. The plan is three rates, BASE_RATE up to quota, ACCEL_RATE from quota to ACCEL_TO times quota and CAP_RATE above that. The gauge, the gap, the commission, the rate and the counts are all worked out from those, so nothing is typed twice. In a real app read CLOSED and the deals from your CRM.
How is the commission worked out?
Tier by tier: each rate pays only on its own slice of attainment. The first 100% of quota earns 8%, the slice between 100% and 120% earns 12%, and anything above 120% earns 15%. With $362k closed that is 8% of $362k; tick a $38k deal and quota is reached, and the next dollar pays 12%. The line "Rate now" shows the rate that pays on the next dollar, not an average. The plan is a typed sample, so change the three rates to match yours.
Why does the ring run to 120%?
Because that is where the plan stops stepping up, so the ring shows both steps a rep cares about: reaching quota, at the first tick, and reaching the cap, at the second. The percentage in the middle is the real attainment and keeps counting past 120%, while the ring stays full. The gauge is drawn for the eye only; the same figures are in the gap line and the Data List, which are what a screen reader reads.
Does ticking a deal close it?
No. It is a what-if: the ticks live in the page, the status line says which deal you marked, and Reset what-if clears them. Nothing is saved, closed or sent. To make it real, write the stage change to your CRM in the checkbox handler and keep the what-if as a separate, clearly labelled mode.
Is it accessible?
Every Won checkbox is named "Won" followed by the deal and described by its stage and close date, and the hit area spans the whole row, so the deal's name ticks it too. The status line is a polite live region present from the start. Ticks, the gap and the rate are all in text, nothing depends on colour, and amounts keep their order in a right-to-left layout.
How does it look on a phone?
The rep and the gauge come first, then the pipeline under them, each deal on one line with its amount and checkbox; the "in 12 days" part of a deal's date is dropped below the small breakpoint. The foot stays pinned to the bottom of the screen while the panel scrolls, and settles at the panel's end from the medium breakpoint.