shadcn.io is not affiliated with official shadcn/ui
Safety Inspection Walk-Round Kanban Block for React Aria
A four-column walk-round of ten site areas with a risk signal and word, an inspector, and a checklist count you tick through, where no area can be Passed with checks still open.
Installation
Overview
Run a site safety walk-round with this inspection board for React with React Aria. A hairline frame with a plus mark on each corner holds four columns that share their lines (To inspect, Inspecting, Needs fixes and Passed) and ten areas. Each card shows the area, its risk as a three-bar signal and a word (Low, Medium or High), the inspector's initials in an Avatar, and its checklist: a strip of small squares filled as checks are ticked, with the count in words ("4 of 6 checks"). An area whose list isn't complete has a "Tick next" Button; a complete one says all are ticked. Each column head counts its open checks, and the sentence under the heading is worked out from the cards. A card moves three ways: drag it by its grip, press Space on the grip and use the arrow keys, or open its Dropdown Menu and choose a column under "Move to". One rule guards the board: an area can't be Passed until every check is ticked, and the refusal says how many are open. A polite status line in the foot reports each change, and Reset puts the walk-round back. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region with the next column showing. For warehouses, sites, kitchens and any inspection that ends in a pass.
FAQ
How do I fill it with my own areas and checks?
Edit COLUMNS and START. A card has an id, the column it starts in, a title, the inspector's name (the initials are drawn from it), a risk of 1, 2 or 3, the total checks on its list and how many are checked. The strip draws up to six squares; extend TICKS for longer lists. The counts and the header are calculated from the cards.
How is risk shown without colour?
As three bars of rising height, filled up to the level, and the word beside them. The bars are hidden from assistive technology and the word is read ("Risk High"), so the signal never depends on a hue, and the bars are drawn left to right in every language.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with its title. Press Space or Enter to pick it up, then ArrowUp and ArrowDown to change its place, ArrowLeft and ArrowRight to go to the neighbouring column (the arrows swap in right-to-left languages), Home and End for the first and last place, Space or Enter to drop it and Escape to put it back. Every step is announced in the status line.
Why is there a menu as well as the grip?
Dragging needs a held pointer and a path, which not everyone has, so each card also has a "More actions" menu with a "Move to" choice for every column and the current one ticked. Choosing one moves the card, puts focus on the card in its new place and says so in the status line. React Aria's menu is a group of selectable items, so the column is chosen by selection rather than by a radio item.
How does the Passed rule work, and how do I change it?
The rule is the function refusalOf, which gets the cards, the area, the column it comes from and the column it is going to, and returns a reason or an empty string. The grip's drop, the keyboard steps and the menu all ask it, so no route gets around it. A refused move leaves the area where it was and the status line says how many checks are open. Replace the body with your own gate, such as a sign-off by a second inspector.
What stays in the demo, and how do I save the changes?
Everything: the moves and the ticks live in the component's state, nothing is sent anywhere, and a reload or Reset brings back the starting walk-round. Ticks only go forward in the demo; Reset is the way back. To save for real, call your API from put (every finished move goes through it) and from act (the tick button), and update the cards from the response. The areas and inspectors are made up.
How does it work on a phone?
The board is a sideways scroll region with the next column showing, and each column scrolls up and down inside the board's fixed height, so the page never jumps. Touch drags from the grip only, so the rest of a card still scrolls the board; the menu is the other way to move a card. The status line is still read out to screen readers.