shadcn.io is not affiliated with official shadcn/ui
Disaster Response Map Block for Vue
A storm response window: five incidents on a drawn town that need medics, engines and crews, a command-centre pool, number fields that send units from it with Covered or Short by in words, and two layer switches.
Installation
Overview
Coordinate a response from one screen, with this disaster response map for Vue with Ark UI. Cordonfield, an emergency coordination desk, shows a "Storm response" window over an SVG street map of an invented town (Ravensby). Five numbered diamonds are incidents, solid for severe, dashed for moderate and dotted for minor, and each needs a typed count of medics, engines and crews. The command centre holds a pool of each (6, 4 and 6), and a rail of incidents, a row of chips on a phone, picks one. Its three Number Input fields send units from the pool: a type that is used up cannot go higher, the pool line shows what is left, and the incident says "Covered" or "Short by 1 medic and 1 crew" in words. A Toggle Group in the top bar filters the incidents by severity, two Switch controls draw the resource lines from the command centre and the evacuation routes, and the one primary, "Send units", commits the plan locally and says so in the status line. The window is a fixed-height pane with a plain rail and no catalog sidebar. It's built from Number Input, Toggle Group, Switch, Shine Button and Guides, with a CSS entrance only. For emergency coordination, utilities and campus operations tools.
FAQ
How do I use my own incidents and pool?
Edit INCIDENTS (a name, a position, a severity from 1 to 3 and the counts it needs in UNITS order), UNITS and POOL (how many of each the centre holds), and PLAN for the starting allocation. The shortfalls, the pool line and the status are all worked out from those lists and the counts you type.
How does the pool work?
Every unit you give an incident leaves the pool, so each field's top is what is already there plus what the pool still has. That is why a used-up type stops at its limit, and why you can move units from one incident to another by lowering one field first.
What does Send units do?
It marks the current plan as sent in the demo and says how many units it covers; pressing it again with nothing changed says there is nothing new to send. Nothing is dispatched or saved. In your app the button would call your dispatch system and the pool would come from live unit status.
Can I use it without a mouse?
Yes. The incidents are buttons in a list, the number fields take typed numbers and the arrow keys, the switches and the toggle group are real controls, and the pane is a keyboard-scrollable region. The status line says what changed.
What stays local in the demo, and how do I wire it up?
All of it. The town, the incidents and the pool are invented samples, the caption says they are not for real emergencies, and no unit is sent anywhere. In your app wire it to your computer-aided dispatch system and never use a demo like this to run a real incident.