2e:"/_next/static/immutable/chunks/02uj9wr740ifu.js" 2f:"AuditExplorerDemo" 30:I[55167,["$2","$8","$9","$a","$b","$c","$d","$e","$f","$10","$11","$12","$2e"],"$2f"] 31:I[48147,["$2","$8","$9","$a","$b","$c","$d","$e","$f","$10","$11","$12","$2e"],"SourcePanel"] 32:T35c8,"use client"; /** * PeachUI — AuditExplorer (block) * @tier block * @deps filter-table, timeline-feed, chip, button, motion * @requires app/globals.css * * One day's audit: filter by outcome, open an event, read the trail * that cannot change, then export that record. */ import { useId, useState, type KeyboardEvent, type ReactNode } from "react"; import { Download } from "reicon-react"; import { Button } from "@/components/atoms/button"; import { Chip } from "@/components/atoms/chip"; import { AnimatePresence, motion, motionInstantIfReduced, useReducedMotion, } from "@/components/lib/motion"; import { FilterTable, type AuditFilter, type AuditOutcome, type FilterTableRow, } from "@/components/primitives/filter-table"; import { TimelineFeed, type TimelineEntry } from "@/components/primitives/timeline-feed"; import { cx } from "@/lib/utils"; const TEXT_SWAP = { duration: 0.15, ease: "easeInOut" as const, }; const PILL_MOVE = { duration: 0.25, ease: [0.22, 1, 0.36, 1] as const, }; const FILTERS: { key: AuditFilter; label: string }[] = [ { key: "all", label: "All" }, { key: "denied", label: "Denied" }, { key: "allowed", label: "Allowed" }, { key: "flagged", label: "Flagged" }, ]; const OUTCOME_CHIP: Record = { denied: "rose", allowed: "lime", flagged: "yellow", }; const OUTCOME_LABEL: Record = { denied: "Denied", allowed: "Allowed", flagged: "Flagged", }; export type AuditEvent = FilterTableRow & { trail: TimelineEntry[]; }; const DEFAULT_EVENTS: AuditEvent[] = [ { id: "export", action: "Export audit bundle", time: "Oct 14 · 08:41", outcome: "allowed", actor: "Maya Chen", trail: [ { id: "export-1", title: "Export requested", detail: "studio.peach-ui.dev/audit", time: "08:41", actor: "human" }, { id: "export-2", title: "Bundle sealed", detail: "42 events", time: "08:41", actor: "system" }, { id: "export-3", title: "Download opened", detail: "Maya Chen", time: "08:42", actor: "human" }, ], }, { id: "deny", action: "Bulk role deny", time: "Oct 14 · 09:02", outcome: "denied", actor: "System policy", trail: [ { id: "deny-1", title: "Policy check started", detail: "Role: billing-admin", time: "09:02", actor: "system" }, { id: "deny-2", title: "12 principals denied", detail: "Rule still in force", time: "09:02", actor: "system" }, ], }, { id: "replay", action: "Session replay download", time: "Oct 14 · 09:11", outcome: "flagged", actor: "Alex Rivera", trail: [ { id: "replay-1", title: "Replay requested", detail: "3 sessions", time: "09:11", actor: "human" }, { id: "replay-2", title: "Flagged for off-hours access", detail: "Held before download", time: "09:12", actor: "agent" }, { id: "replay-3", title: "Held for review", detail: "Waiting on a person", time: "09:12", actor: "system" }, ], }, { id: "retention", action: "Retention window change", time: "Oct 14 · 09:22", outcome: "allowed", actor: "Jordan Lee", trail: [ { id: "retention-1", title: "Window proposed", detail: "90 → 180 days", time: "09:22", actor: "human" }, { id: "retention-2", title: "Policy allowed the change", detail: "Applied to the workspace", time: "09:22", actor: "system" }, ], }, { id: "rotation", action: "API key rotation", time: "Oct 14 · 09:35", outcome: "denied", actor: "Sam Okonkwo", trail: [ { id: "rotation-1", title: "Rotation requested", detail: "Key prod-3", time: "09:35", actor: "human" }, { id: "rotation-2", title: "Denied: key still in use", detail: "2 active clients", time: "09:35", actor: "system" }, ], }, ]; function visibleEvents(events: AuditEvent[], filter: AuditFilter) { if (filter === "all") return events; return events.filter((event) => event.outcome === filter); } function openingEventId(events: AuditEvent[]) { return events.find((event) => event.outcome === "flagged")?.id ?? events[0]?.id ?? ""; } function Swap({ swapKey, reduced, children, className, }: { swapKey: string; reduced: boolean | null; children: ReactNode; className?: string; }) { return ( {children} ); } export type AuditExplorerProps = { className?: string; events?: AuditEvent[]; dateLabel?: string; }; export function AuditExplorer({ className, events = DEFAULT_EVENTS, dateLabel = "Oct 14", }: AuditExplorerProps) { const reducedMotion = useReducedMotion(); const tabsId = useId(); const [filter, setFilter] = useState("all"); const [selectedId, setSelectedId] = useState(() => openingEventId(events)); const [exportedId, setExportedId] = useState(null); const [exportTick, setExportTick] = useState(0); const counts = { all: events.length, denied: events.filter((event) => event.outcome === "denied").length, allowed: events.filter((event) => event.outcome === "allowed").length, flagged: events.filter((event) => event.outcome === "flagged").length, }; const visible = visibleEvents(events, filter); const selected = events.find((event) => event.id === selectedId) ?? null; const exported = selected !== null && exportedId === selected.id; const selectFilter = (next: AuditFilter) => { setFilter(next); const nextVisible = visibleEvents(events, next); if (!nextVisible.some((event) => event.id === selectedId)) { setSelectedId(nextVisible[0]?.id ?? ""); setExportedId(null); } }; const selectEvent = (id: string) => { setSelectedId(id); setExportedId(null); }; const onTabsKeyDown = (event: KeyboardEvent) => { const keys = FILTERS.map((item) => item.key); const index = Math.max(0, keys.indexOf(filter)); let nextIndex = index; if (event.key === "ArrowRight") nextIndex = (index + 1) % keys.length; else if (event.key === "ArrowLeft") nextIndex = (index - 1 + keys.length) % keys.length; else if (event.key === "Home") nextIndex = 0; else if (event.key === "End") nextIndex = keys.length - 1; else return; event.preventDefault(); const next = keys[nextIndex] ?? "all"; selectFilter(next); event.currentTarget.querySelector(`[data-filter="${next}"]`)?.focus(); }; const exportRecord = () => { if (!selected) return; setExportedId(selected.id); setExportTick((tick) => tick + 1); }; const footerKey = !selected ? "empty" : exported ? `exported-${selected.id}-${exportTick}` : selected.id; const filterLabel = FILTERS.find((item) => item.key === filter)?.label ?? "All"; return (

Events

{dateLabel}

{FILTERS.map((item) => { const active = filter === item.key; return ( ); })}

{visible.length === 0 ? (

{filter === "all" ? `No events on ${dateLabel}` : `No ${filterLabel.toLowerCase()} events on ${dateLabel}`}

{filter === "all" ? "Events from this day show up here." : `Nothing was ${filterLabel.toLowerCase()} on this day.`}

{filter !== "all" ? ( ) : null}

) : ( )}

); } 2b:["$","article",null,{"className":"doc-article doc-article--wide","children":[["$","header",null,{"className":"doc-article-header","children":[["$","p",null,{"className":"doc-article-kicker","children":["Blocks"," · ","Data display"]}],["$","h1",null,{"className":"doc-article-title","children":"Audit explorer"}],["$","p",null,{"className":"doc-article-lead","children":"Filter a day's audit events, open one, and read the trail that cannot change."}]]}],["$","section",null,{"className":"doc-demo","aria-label":"Audit explorer demo","children":["$","div",null,{"className":"doc-demo-stage doc-demo-stage--wide","children":["$","$L30",null,{}]}]}],["$","section",null,{"className":"mt-10","aria-labelledby":"doc-composed-heading","children":[["$","h2",null,{"id":"doc-composed-heading","className":"text-body-strong text-ink","children":"Built from"}],["$","p",null,{"className":"mt-1 text-caption text-ink-3","children":"Paste the block file plus these modules; they are not separate catalog entries."}],["$","ul",null,{"className":"doc-composed-list","children":[["$","li","Filter table-components/primitives/filter-table.tsx",{"children":[["$","span",null,{"className":"text-ink-2","children":"Filter table"}]," · ",["$","span",null,{"className":"font-mono text-[13px] text-ink-3","children":"components/primitives/filter-table.tsx"}]]}],["$","li","Timeline-components/primitives/timeline-feed.tsx",{"children":[["$","span",null,{"className":"text-ink-2","children":"Timeline"}]," · ",["$","span",null,{"className":"font-mono text-[13px] text-ink-3","children":"components/primitives/timeline-feed.tsx"}]]}]]}]]}],["$","$L31",null,{"source":"$32","deps":"$undefined"}],"$L33"]}]