On-Call Shift Swap Success Block for React

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.

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.

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.

The primary is a Shine Button used as a link to your own route. It's a Shine Button with render set to an a element and nativeButton={false}.

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.

Yes, on purpose: a week is a time axis, so the table stays left to right in a right-to-left page, with the pinned name column at its start. Names and dates are isolated so they keep their order.