shadcn.io is not affiliated with official shadcn/ui
Sales Territories Map Block for Ark UI
Eight territories of an invented region filled by their team's letter and weight, with a select on every row to reassign a team, hatched when unassigned, quota bars for five teams and a Save plan button that stores the plan in the page.
Installation
Overview
Balance a sales plan on the map, with this sales territories block for React with Ark UI. Quotabridge, a sales-ops tool, draws eight territories of the invented region of Lorrimoor on a ring-shaped lattice around a lake. Each territory is filled by the weight and the letter of the team that covers it, and hatched with a dashed pill when nobody does. A Native Select on every row of the Table assigns one of five teams; each team's Progress bar shows booked value against its quota and says in words when a team is over or how far it is from quota. Pressing a territory on the map or its name in the table marks it. "Save plan" in the header is the one primary: it stores the assignment in the page and says that nothing was sent to the teams. The table is the way in for the keyboard; the map is a pointer shortcut. It's built from Native Select, Table, Progress, Shine Button and Guides, with a CSS entrance only. For sales operations, field service and any team that carves a region.
FAQ
How is a team's progress worked out?
bookedOf adds the booked value of every territory assigned to a team, and percentOf divides it by the team's quota. The bar is capped at full width, while the percentage and the sentence keep the true figure ("Over quota by $45k"). Everything is derived from the assignment array, so changing a select updates the map, the bars and the unassigned count together.
How do I use my own territories and teams?
Edit LINES (a lattice cell, a name, the booked value in thousands of dollars and the starting team) and TEAMS (a letter, a name, a quota and a weight). In your app swap the lattice for your boundary geometry, read booked value from your CRM and write the saved assignment back through your own endpoint.
What does Save plan do?
It copies the current assignment into a saved copy in the page and reports how many changes it saved. With no changes it says so instead. Nothing is stored outside the tab and nothing reaches a team, and the status line says as much.
Can I use it without a mouse?
Yes. Every territory has a named button and a select in the table, labelled with the territory's name, and the quota bars are described in the text beside them. The territories on the map are skipped by the Tab key and hidden from assistive technology. A polite message gives each move and the team's new share of quota.