shadcn.io is not affiliated with official shadcn/ui
Compliance Board Kanban Block for React Aria
A three-column compliance board (Not started, In progress, Compliant) of ten controls with a control id and a due word such as Overdue by 6 days, worked out from a fixed as-of date.
Installation
Overview
Keep a compliance programme on track with this controls board for React with React Aria. A hairline frame with a plus mark on each corner holds three columns, Not started, In progress and Compliant, and ten controls. Each card shows the control id in a mono Badge, the requirement in words and a due word worked out from its date and a fixed as-of day: "Overdue by 6 days", "Due today" or "Due in 12 days", and "Met" once the control is Compliant. Overdue cards add an alert glyph, so the word never relies on colour. Column heads count their cards and their overdue controls, and the sentence under the heading counts the compliant and overdue ones from the same dates. One rule guards the board: a control can't skip the work, so nothing goes from Not started straight to Compliant, and the refusal names the control. Cards move by dragging the grip, by Space, the arrow keys and Space again (Escape cancels), or from the Dropdown Menu with "Move to"; a polite status line reports each change and Reset restores the board. On a phone the columns scroll sideways in one named region. For security, privacy and quality programmes that track controls against deadlines.
FAQ
How do I fill it with my own controls?
Edit COLUMNS and START. A control has an id, the column it starts in, a control id, a due ISO date and a title. The due words, the overdue counts and the header sentence are calculated from the cards and AS_OF.
How is the due word worked out?
dueWord subtracts the as-of day from the due day with Date.UTC, so there are no time zones and no clock. Negative days read as overdue, zero as due today and positive as due in some days. Change AS_OF to read the board at another day, or set it from the real date when your page loads.
How does the rule work, and how do I change it?
refusalOf gets the cards, the control, where it comes from and where it is going, and returns a reason or an empty string. Drag, keys and menu all ask it. Replace the body with your own rule, such as needing an approver before Compliant.
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, the arrow keys to move it (left and right change column, and swap in right-to-left languages), 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. Choosing one moves the card, puts focus on it in its new place and says so in the status line, and it obeys the same rule as a drag. React Aria's menu is a group of selectable items, so the column is chosen by selection rather than by a radio item.