shadcn.io is not affiliated with official shadcn/ui
Audit Log Notification Block for Ark UI
An admin console's audit log as a sortable table of twelve events with an action filter, rows that open to their IP address, session and before and after values, and a real CSV download of exactly the rows showing.
Installation
Overview
Keep the record and hand it over, with this audit log for React with Ark UI. It is Auditmoor, an admin console, in a framed panel with a plus mark on each corner: a table of twelve events with when, who, which action (a glyph and a word) and on what, in a scroll frame with a sticky head. Pressing a head sorts by it and aria-sort says which way, a Native Select narrows the log to one action with how many events each action has, and every row opens, as a disclosure and not a link, to the resource id, the IP address, the session and the value before and after in a Data List. The block ends in a real file: "Export these rows" is a Download Trigger that saves a CSV of exactly the rows showing, in the order showing. On a phone the sort is a select and each event is a card with its action and time under the name. Lines come from Guides. For admin consoles, compliance reviews and any trail someone has to export.
FAQ
How do I fill it with my own events?
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.
What exactly does the CSV contain?
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.
How does sorting work?
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.
Can the log be empty?
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.
What stays local, and how do I make it real?
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.
Is it accessible?
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.