shadcn.io is not affiliated with official shadcn/ui
Dispatch Dashboard Map Block for React Aria
A dispatch window with a queue of six waiting jobs beside a drawn street map; choosing a job ranks the three closest drivers by minutes in a card, and one button assigns the job and draws the line.
Installation
Overview
Give each job to the right driver in one move, with this dispatch dashboard map for React with React Aria. Hastegate, a courier company, shows a framed window with no sidebar: a queue pane lists six waiting jobs (code, place, what and the time it is due), and the stage fills the rest with an SVG street map of an invented town. Five lettered drivers carry routes drawn as solid lines, the waiting jobs are hollow diamonds and the chosen job is a filled one. Choosing a job ranks the three drivers who can reach it soonest in a card inside the map: minutes are the straight distance from the end of each driver's route at a typed speed plus three minutes for every job already carried, so a nearby driver with a full route can lose to a farther one with an empty one. The best driver is pre-chosen, a dashed line marks that driver and dotted lines the other two, and the radios change the choice. The one primary in the top bar assigns the job, draws it into that driver's route and moves to the next job; Undo gives the last assignment back. The queue is a list of buttons, the same facts are in the card, and a polite line in the foot says what changed. It's built from Badge, Button, Empty, ShineButton and Guides, with a CSS entrance only. For couriers, field service and delivery operations.
FAQ
How are the minutes worked out?
For each driver, the straight line in drawing units from the end of their route (their last carried job, or where they are) to the job, divided by UNITS_PER_KM, is the distance. The drive is that distance at SPEED km an hour, and LOAD_MINUTES more are added for each job the driver already carries. The top three by minutes are listed, fewest jobs first on a tie. It is not a road route: in your app use a routing service for the drive and keep the ranking.
How do I use my own jobs and drivers?
Edit JOBS (a code, place, description, due time and a position in the drawing's 480 by 360 units) and DRIVERS (a letter, a start and the stops already carried). The queue, pins, lines, ranking and counts all read these lists, and the street grid is the MINOR_X, MINOR_Y, MAJOR_X and MAJOR_Y arrays.
Can I dispatch without a mouse?
Yes. Tab reaches the Assign button first, then the queue (each job is a button marked as the current one), the three driver radios (arrow keys move and choose) and Undo. The diamonds on the map are a pointer shortcut and are skipped by the keyboard; everything they say is in the queue and the card.
What does Undo do?
It returns the most recent assignment to the queue, selects that job again and redraws the routes. You can undo every assignment in turn; with nothing to undo the button stays in place and says so in the status line.
What stays local in the demo, and how do I wire it up?
All of it. Assigning changes state in the page and nothing is sent to a driver, a phone or a server. In your app call your dispatch service from the assign handler, wait for the driver's acceptance before drawing the line as solid, and keep the status line for the result.