shadcn.io is not affiliated with official shadcn/ui
On-Call Shift Swap Success Block for React Aria
A confirmation panel for two people swapping on-call shifts: the week's rota as a native table of three people by seven days with the swapped cells marked, a row of your alerts, and a switch that mutes them during the swap.
Installation
Overview
Confirm a shift swap where everyone can check it with this confirmation panel for React with React Aria. It's the panel Vigilrota, an on-call scheduling app, shows when two people have swapped shifts: a header with one action, the Shine Button that opens the rotation, over one framed card in three bands ruled by Guides. The first is the week's rota as a native table, three people down the side and seven days across, with each person's part that day (primary, backup or off) and the two swapped shifts marked in both people's cells with a swap glyph and the words "was you" and "now Marcus", plus a last row for your alerts. The second is a Switch, "Mute my alerts during the swap", which changes the swapped day in that last row. The third says so in a polite status line. For on-call and shift scheduling, rotas and any hand-off between people over days.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was swapped and no alert was muted. The three people, the week, who is primary and backup each day and the two swaps are typed sample data, and the switch only changes this page. To wire it, build WEEK and SWAPS from your schedule, set AS_OF from the day you render and send the switch's change to your paging service.
How is the rota built, and is it accessible?
It's a native table on every base, with a caption for assistive technology, the days as column headings and each person's name as a row heading, inside a scrollable named region. The cells are computed from the typed week and swaps: a swapped shift is a dashed "Swapped" chip with "now Marcus" in the giver's cell and a solid "Primary" chip with "was you" in the taker's, so a swap shows in words and shapes, never only a shade. React Aria's own Table is a keyboard grid, which a read-only rota doesn't need, so this block keeps the native one.
What does the mute switch change?
In the last row, your alerts: "On" for every day you are primary or backup, and on the day you handed over, "Muted" while the switch is on or "On" when it is off, because until you mute it your phone would still be paged. The status line says which, in words, after each change. Nothing is sent to a paging service.
Where does View the rotation go?
The primary is a Shine Button used as a link to your own route. It's a Shine Button with href, which React Aria renders as a link.
How does it look on a phone?
The header's button drops under the sentence and the week scrolls sideways inside its named region, with each person's name pinned at the start so the cells keep their row. The region is a tab stop, so it also scrolls from the keyboard. The full names are left out and the first names stay.