Audit Log Notification Block for React

Edit ENTRIES: each has an id, a who, an action (created, updated, deleted, accessed, invited or exported), the resource and its target id, the before and after values in words, the ip and session, and an ISO at in UTC. The action menu and its counts are worked out from them, and the addresses in the file are from the ranges reserved for documentation, so none is real.

A header row and one row per event showing, in the order showing, with the time in ISO form, who, the action, the resource, its id, the IP address, the session and the before and after values. Any cell with a comma, a quote or a line break is quoted, and a cell that starts with =, +, - or @ is kept as text so a spreadsheet cannot read it as a formula. The file is built in the browser and saved by the download trigger; it is called auditmoor-audit-log.csv and nothing is sent anywhere.

Pressing a head sorts by that column in its first direction (newest first for When, A to Z for the others) and pressing it again turns it round; ties fall back to newest first. The head's aria-sort and an arrow say which way, and a polite line says "Sorted by when, newest first". On a phone the same choice is a select above the list.

Yes: the menu includes Exported, which has no events here, and choosing it shows a designed empty state in the same frame with a button that shows all actions. The export button then stays in place, quiet, and says there is nothing to export instead of saving an empty file.

Everything: the events are typed, sorting and filtering happen in the page and nothing is looked up or recorded. In your app pass your own rows, sort and filter on the server for long logs, and build the CSV from the same rows you show; keep the quoting and the formula guard, because audit text often comes from users.

It is a real table with a caption, column heads that are buttons with aria-sort, a row header and disclosure buttons that say whether the details are open and what they belong to. The frame scrolls and the keyboard can reach it, the details are removed from the tab order while closed, and each action is a glyph and a word.