Access Log Account Block for React

Edit ACCESSES. Each visit has an id, an ISO at instant in UTC, the staff member's name, initials and role, the reason, the ticket it was for, what was opened and the minutes it was open. The reason filter is built from the reasons in the list, and the count line reads "every one with a ticket" only while every visit has one. Every date comes from the data and the one AS_OF constant, never the clock, and the staff names here are made up. Show only what the person may know: a real log should not name staff if your policy keeps them private, in which case show a role and a number.

A header row, then one row for each visit shown, so searching or choosing a reason first gives a smaller file. The columns are When (UTC), Who, Role, Reason, Ticket, Opened and Minutes. Every cell with a comma, a quote or a line break is quoted, and a cell that starts with an equals sign, a plus, a minus or an at sign is kept as text by a leading apostrophe, so a spreadsheet never runs it as a formula. With nothing shown the button is marked unavailable and says there are no rows. The file is made in the browser and nothing is uploaded.

The switch: it changes this page's state and the status line says so; nothing reaches Tallowton. To make it real, save the choice in your account settings from the switch's handler, show a failure in the same status line, and enforce it on the server, since support tooling must check it before opening an account. The log itself should come from an append-only store that the person cannot edit.

No. The table sits in a frame as tall as the full log, so searching, choosing a reason or reaching the empty state ("No access matches", with a button that clears both) leaves everything below in place. The rows have fixed heights and the cards on a phone are four fixed lines, which is what lets the frame's height be worked out from the number of visits.

The switch's sentence comes first, then the search and the reason filter full width, then a card per visit: when and how long at the top, the person under it, the reason with its ticket and the page that was opened. The foot with the status line stays pinned to the bottom of the screen, so the result of a filter or a save is in view. The table and the cards are one list in the markup that the large breakpoint swaps.

The table has a caption, column heads and a real time element in each row; the switch is named and its consequence is a sentence, not a tooltip. Times and ticket numbers read start to end in a right-to-left page, and names and reasons stay in their own isolated runs. The status line is a polite live region present from the start and says how many visits match and when a file was saved.