Active Sessions Account Block for React

Edit SESSIONS. Each has an id, the browser as one phrase ("Chrome on macOS"), the city, an ip, a kind that picks the icon (desktop, laptop, phone or tablet), the method it signed in with, ISO started and active days and a current flag for the one the person is using. The end day isn't stored: it is the start plus LIFETIME days, so change that constant to your session length. Every date, the idle filter and "in 8 days" are worked out from the one AS_OF constant, never the clock, so replace it with today's date (or the server's) when you wire it up.

Everything: signing out removes the row from this page's state and says "ended in this demo", and Undo puts it back, which a real server can't do. To make it real, call your sign-out endpoint in end, remove the rows only when it answers and show a failure in the same status line; call a bulk endpoint in confirmMany for the header button. The address and place are typed with documentation addresses; use your own geolocation, and say it is approximate.

Pressing Sign out swaps that button, in place, for Confirm and Cancel, and focus moves to Confirm. Cancel is where Sign out was, so a double click can't confirm by accident. Escape cancels while focus is inside the panel and returns focus to Sign out; confirming moves focus to the next row's Sign out, or to Undo when no row is left. The status line says which session is being asked about. The header button asks in a real alert dialog instead, because it ends several sessions: focus starts on Cancel, Escape closes it and focus returns to the button.

It limits the list to the sessions that have been idle for at least 30 or 7 days, as of the AS_OF day, and the header button follows it: "Sign out 3 inactive sessions" instead of "Sign out 4 other sessions". This session always stays in the list because it can't be signed out. When nothing matches, a message in the list's own space offers "Show all sessions". The list sits over an unseen copy of the full list, so filtering, signing out and the empty state never change the panel's height.

Each session is a card: its tile, browser and place first, then its four facts two by two with their names visible, then Sign out at the foot. The foot with the status line and Undo stays pinned to the bottom of the screen while you scroll, so the result of a sign-out is always in view; from the medium breakpoint it is simply the last band. From the large breakpoint the facts become columns under their own heads.

The sessions are a real list; each fact has its name read out ("Ends on, 22 Oct") even where a column head shows it instead. Sign out, Confirm and Cancel are named for the session ("Sign out Safari on iOS, Lisbon, Portugal"), how it signed in is written out and never only a tile, and the badge says "This session". The status line is a polite live region present from the start. The addresses read start to end in any language and the dates keep their order in a right-to-left page.