shadcn.io is not affiliated with official shadcn/ui
Audit Trail Timeline Block for React Aria
An admin audit trail on a rail: nine access events with who, what, resource, masked address and a Succeeded or Failed result, a Person filter, role changes that open to a diff, and a Revert that opens an alert dialog and appends a new event.
Installation
Overview
Show who changed what in a workspace with this audit trail timeline for React with React Aria. It is written for Whoseen, a fictional workspace admin console. A hairline frame holds a column head (When, What happened, Result) over a rail of nine events, newest first, in a scrolling region of fixed height. Each row has the day and clock, a person's initials, name and role, an action in words, the resource, a masked address from the documentation range and a result as a glyph and a word, Succeeded or Failed. A Native Select in the header, Person, narrows the trail to one person. A role or setting change has Show change, which opens the change as a Diff Text, and Revert this change, which opens an Alert Dialog naming what comes back; confirming appends a new event at the top while the original stays and its button reads Reverted. A status line says nothing changed outside this page. The events are example data.
FAQ
How do I change the events?
Edit EVENTS at the top of the file, oldest first. Each has an id, an ISO time at in UTC, an actor (an id from PEOPLE), an action in words, a resource, a masked ip, and optionally failed and a change of { field, from, to }. Only events with a change get the diff and the revert.
What does Revert do?
It adds a new event, built by revertOf(), with the same resource and the change turned round, and marks the original as reverted. Nothing is deleted, so the trail stays a record. The dialog names what comes back before it happens.
What stays local in the demo, and how do I wire it for real?
The filter, the open rows and the appended events are state in the page; no request is made. In a real console, send the revert to your API and append the event the server returns, keeping the dialog as the confirmation step. Addresses are masked in the data, so mask them on the server too.