shadcn.io is not affiliated with official shadcn/ui
Audit Trail Dashboard Block for React Aria
Twelve admin events under day headings with an actor menu and a risk toggle, a before and after diff of the chosen event, and a real CSV download of the visible rows.
Installation
Overview
See exactly what an admin changed, with this audit trail panel for React with React Aria. A hairline frame with a plus mark on each corner holds twelve Paperwick events under day headings, each with who did it (initials and name), what they did, the resource path in mono, an address kept to its first three groups, the time and a risk word beside a three-bar mark. A Select narrows the trail to one actor and a Toggle Group to one risk level. Choosing an event fills the side cell with the fields it changed as a before and after diff, played in by Diff Text with a sign and a hidden word on every changed line. The header's Shine Button saves a real CSV of exactly the rows on screen with a Download Trigger. There are no hashes, only the log. It's built from Select, Toggle Group, Diff Text, Download Trigger, Shine Button, Empty and Guides. For admin consoles, security reviews and compliance exports.
FAQ
What does the export contain?
Exactly the rows showing, in the order shown, with six columns: when (UTC), actor, action, resource, the masked address and risk. Every cell is quoted where it needs to be, and one that starts with a formula character is kept as text so a spreadsheet never runs it. With nothing showing, the button answers in the status line instead of saving an empty file.
How is the diff made, and how do I change it?
Each event in EVENTS carries its diff as lines of a unified diff: a minus for a removed line, a plus for an added one and a space for context. Diff Text plays them in each time you choose an event, and under reduced motion they appear at once. Produce the lines from your own before and after records.
Why are the addresses cut short?
Only the first three groups are stored, and the last is shown as an x. If your admins may see the whole address, keep it in the event and print it in the row and in the CSV.
What stays local, and how do I wire it for real?
The events are typed and nothing is recorded; the CSV is the only real effect. Replace EVENTS with a page from your audit store, and build each diff from the stored before and after values of the fields that changed.