shadcn.io is not affiliated with official shadcn/ui
Audit Trail Changelog Block for React
A tamper-evident audit trail: six events in a framed table, each with the hash of the event before it and its own, and a Verify chain Shine Button that recomputes every hash in the browser.
Installation
Overview
An audit trail for React with Base UI, written for Ledgerwatch, a fictional audit-log service. A start-aligned header carries a Verify chain Shine Button. Under it, an inset frame with overshooting corners holds one table of six events, newest first: the action and the resource it touched, who did it with a masked IP address, the fixed time in UTC and the chain, which is the short fingerprint of the event before it and its own. Each fingerprint is a real FNV-1a hash of the event's fields and the one before it, written into the data. Pressing Verify chain recomputes the six hashes in your browser, oldest first, marking each row Verified as it goes, and the foot reads Chain verified, 6 of 6 events. It's built from Shine Button, Guides and a native table. The events are example data, and the fingerprint is short and non-cryptographic: it shows the idea of a chain, not a production seal.
FAQ
What does Verify chain actually do?
It recomputes the FNV-1a fingerprint of every event from its fields and its prev, checks that each prev equals the hash of the event below it and that each stored hash still matches, then counts how many pass. The result is real, but only against the example data in the file: change one field and the chain fails from that event on.
How do I use my own events?
Replace EVENTS with your log, newest first, and give each a prev (the hash of the row below, or the genesis value for the oldest) and a hash. Compute the hashes once with the same fingerprint and inputOf helpers and write them into the data; do not compute them at render time, or the check would always pass.
How is the result announced?
A permanent polite status region starts empty and is filled once, when the check finishes, with Chain verified, 6 of 6 events. The row marks change as the check runs, but no ticking value is announced. The button keeps its place and is marked busy with aria-disabled while it runs, so a second press does nothing.
Related
- Pro
Cell Grid Security Updates Changelog
Security and auditsThree security advisories in cells on shared hairlines, each with its severity as an icon and a word, id, plain-language summary, affected and fixed versions as inline code and an upgrade command with a working Copy button.
- Pro
Permission Changes Changelog
Security and auditsAn audit of permission changes as diffs in an inset frame: each role with who changed it and when, inserted and struck-out permission rows with a sign and a word, how many people it reaches, and a toggle group that keeps only granted or revoked rows.
- Pro
Access Control Changes Changelog
Security and auditsA permission diff matrix in an inset frame: a row for each permission, a column for each role, each cell showing what a release granted or revoked, with a release Select at the header's end.
- Pro
Deployment Log Tabs Changelog
Deploys and rolloutsTabs by environment with counts over a framed table of deploys: environment, commit with Copy, message, deployer, a duration micro-bar and a status word.
- Pro
Vulnerability Disclosure Changelog
Security and auditsOne coordinated disclosure as a split: the severity score on a 0 to 10 ruler with its band named, the eight base metrics spelled out, a copyable vector string, a report-to-advisory timeline with elapsed days, the versions affected and a credit to the researcher.
- Pro
Release Band SLA Compliance
Incidents and uptimeA band of three release cells for a managed-service reporting product: uptime, p95 response and first reply with the target beside the actual, a check or a ring for each, and a breach count in each foot.