Audit Visibility Account Block for React

Edit CATEGORIES and VIEWERS. Each category has an id, a name, a hint and the viewers it locks on (use the hint to say why); each viewer has an id, a name and a sentence. SAVED is what the account has saved when the page opens. The strip's counts, the sentence under the matrix and the unsaved count all read from the switches, so nothing else needs editing. Add a column by adding a viewer and its cells.

Save keeps the switches as this page's saved state and says "in this demo", so nothing reaches Wardmere. To make it real, send the changed cells to your settings service in save, mark them saved only when it answers and show a failure in the same status line. Enforce the locks on the server as well: a switch that is only disabled in the page is a request, not a rule.

Because the account is managed: administrators can always see sign-ins, and the row says so in words beside the lock, so the reason is never only in a tooltip. Your own column is locked on because you cannot hide your own history from yourself. A locked cell shows a lock and the words "Always on" instead of a switch that cannot move, so it reads the same to everyone and there is nothing to press.

Support staff start with none of the categories. Normally a person grants access for one ticket, which is a separate flow; turning a category on here lets support see it without asking. The sentence under the matrix says which of the two is true now, "Support staff see none of them unless you grant a ticket" or "Support staff can see 2 of 5 without asking".

The strip stacks, and each category becomes a block: its name and sentence, then three rows with the group's name and its switch, each switch named "Sign-ins: Your administrators". The table and the blocks read the same state, so a change in one shows in the other when the screen is resized. The action foot stays pinned to the bottom of the screen at every width.

The table has a caption, column heads and a row header per category; each switch is named for its group and category ("Your administrators for Sign-ins"). The foot's status line is a polite live region present from the start, counting what is unsaved and what was saved. Save and Discard are always there; when there is nothing to do they are marked unavailable and answer "No changes to save."