Audit Activity Log

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its avatar, avatar-initials dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/devtools/devtools11.tsx instead.

Usage

The file also exports devtools11Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Devtools11, devtools11Demo } from "@/components/blocks/devtools/devtools11";

export default function Page() {
  return <Devtools11 {...devtools11Demo} />;
}

Props

Types

type AuditAction = "create" | "update" | "delete" | "access";

type AuditEntry = {
  id: string;
  actor: { name: string; avatar?: string };
  action: AuditAction;
  resource: string;
  timestamp: string;
};

Behavior notes

• The action-type filter row is genuinely functional ("use client" with real useState): clicking a filter narrows the visible entries to that action, or shows all of them for the "All" pill. There is no server round-trip; filtering happens against the entries already passed in.
• Action colors and icons are fixed by action name (create=emerald plus, update=sky pencil, delete=red trash, access=violet eye) and are not configurable per-entry beyond changing the action value.
• actor.avatar is optional; when omitted, the avatar falls back to initials built from the first letter of up to two space-separated words in actor.name, exactly like the About category's team grid.
• timestamp is a plain display string (e.g. "2 min ago", "Yesterday, 4:12 PM"); it is not computed from a real Date and will not update on its own.
• When a filter has no matching entries, the list renders a single centered "No activity matches this filter" message instead of an empty list.