Delegate Access Account Block for React

Edit GRANTS. Each has the contact it belongs to (an id from CONTACTS), the first day as an ISO from, a number of days, and the scopes it holds from SCOPES. The end day, the "20 days left" count and the bar are worked out from from, days and the one AS_OF constant, never the clock, so replace AS_OF with today's date when you wire it up. Access ends at the last minute of the last day in UTC, and the copy says so.

Everything. Granting, replacing and ending change this page's state and say so in the foot; nothing is sent and nobody gains access. To make it real, post the grant in grant and end, change the list only when your server answers, and let your server remove a grant when its end passes: the panel only draws it. Undo exists so the demo is easy to explore; a real one might offer to grant again instead.

The button opens a real side sheet with a focus trap, Escape to close it and focus back on the button. It slides in from the end side whichever way the page reads. Cancel, Escape or the close button leave without changing anything; Grant access adds the row, closes the sheet and moves focus to that row's End now button. Picking a person who already has access warns "Has access until 3 Nov, and this replaces it". Granting with nothing ticked says so under the boxes and moves focus to the first one.

The slider runs from 1 to 90 days in one-day steps, and the arrow keys move it by a day. Its name is "Days of access" and its value is read out as "14 days". Under it, the end is written from the as-of day ("Ends 28 Oct, 23:59 UTC") so the person sees the real last day, not only a count. A new grant counts its first day as the as-of day.

It removes that grant at once, with no dialog, because it only takes access away and Undo is always in the foot. Focus moves to the next row's End now button, or to Undo when it was the last grant. The list keeps its height as grants leave, and an empty list shows a message in its own space.

Each grant is a card: the person and the End now button first, then the end and the bar under them. The sheet is full width and its form scrolls while Cancel and Grant access stay at the foot; the foot of the panel with the status and Undo stays pinned. The list is a real list with named buttons ("End Dario Quist's access now"), the contacts are native radios in a group, the end day is a time element, and the bar is decoration beside the same fact in words. The status line is a polite live region present from the start.