Security Review Account Block for React

Edit ITEMS at the top. Each has an id, the section it belongs to, an icon kind, a name, what it was done with as where, when it happened as when (an ISO day, or an ISO moment with a time for a sign-in) and the answer it starts with: pending, mine or removed. SECTIONS names the groups, and LAST_REVIEW is the day of the previous review. The counts, the bar, the band of removals and the header sentence are all worked out from the items. Nothing here shows a real address or device model: name devices the way the person would.

Yes, this is mine and Remove change the item's answer in the page and say so in the status line; Undo puts it back to pending, and moves focus to the control that took its place. Nothing is signed out and nothing is sent. In your app, call your server in answer: remove a device's sessions, revoke a sign-in's session, unlink a method, and let a person who answers Yes keep going. Treat a Removed device or sign-in as a reason to offer a password change.

When every item has an answer. Until then the button is marked aria-disabled rather than disabled, so it keeps its place and focus; pressing it says how many items still need an answer and moves focus to the first of them. Finishing writes the day into the header ("Reviewed 14 Oct 2026") and turns the button into a quiet Review finished; changing an answer afterwards reopens the review. In your app, save the day your server records.

The review is longer than a screen, and the one action that ends it should never be a scroll away, so the foot, with its status line and the Shine Button, stays at the bottom of the screen while the panel scrolls and settles at the panel's end. It's one element at every width, so there is only ever one primary button.

Each section is a real list named for it, each row says what it is in text, and every answer button names its item ("Remove Unrecognised laptop"; the Yes button keeps its visible words in its name). An answer is a word and an icon in a badge, never a colour. Times are in time elements. One polite status line, present from the start, reports each answer and each refusal, and the bar is decorative because its count is written beside it.

The icon and name keep their row and the answers drop under them as two equal buttons (or the badge and Undo once answered), so every row has the same height whatever its state. The foot stays pinned with its line over the button.