Activity Log Account Block for React

Edit ENTRIES, newest first. Each has an id, a title, a note of what it was about, a category (signin, security or data), a glyph that picks the icon, an ISO when in UTC and the browser, city and documentation ip it came from. The day groups, their weekday names, the "Yesterday" and "6 days before" wording (worked out from the typed AS_OF day, never the clock) and every count are derived, so nothing is typed twice. Add a glyph to GlyphIcon for a new kind of event.

Choosing a category shows only its events and drops the days that have none left, and the count line says "3 of 8 events". The timeline sits over an unseen copy of the whole log, so the panel never changes height. A change that is both a sign-in and a security event belongs to one category: put it where a person would look for it. Choosing a filter closes any open details.

It is read-only typed data, so there is nothing to save or undo. To make it real, build ENTRIES from your audit log on the server (the person's own changes, not staff access), group by the person's own day if you prefer to show their zone, and load older days in pages or with a Show more button of your own. A log that can be empty needs an empty state: add the catalog Empty in place of the timeline.

Details is a real button, named for its event ("Details of Password changed, 07:13"), that opens the device, place and address in a list. Opening one closes the last. Escape isn't bound: the button toggles, so pressing it again closes. Closed details are not in the tab order or read out.

The rail stays at the start and the events keep their nodes; the title and note wrap beside the time and category. The filter is one row that scrolls sideways when it doesn't fit, with its focus ring kept inside. Details open under the event as on a wide screen.

The timeline is an ordered list of days, each with a heading, and each day an ordered list of events, so a screen reader announces the position of an event in its day. The nodes are decorative: every event has its title, its category as a word and its time as text. The filter is a labelled group of toggles with their counts in their names, and the line that says how many events show is a polite status present from the start. Times and addresses read start to end in any language.