"use client" import * as React from "react" import { ExternalLink, FileSearch, MoreHorizontal } from "lucide-react" import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, } from "@/components/ui/context-menu" import { cn } from "@/lib/utils" import { Filters, type Filter, type FilterFieldConfig, type FilterFieldsConfig, } from "./filters" export type AuditLogItem = { id: string title: string description?: string timestamp: string actor?: string type?: string status?: string icon?: React.ReactNode } const auditLogFilterFields: FilterFieldConfig[] = [ { key: "actor", label: "Actor", type: "select", options: [], }, { key: "type", label: "Type", type: "select", options: [], }, { key: "status", label: "Status", type: "select", options: [], }, { key: "search", label: "Search", type: "text", defaultOperator: "contains", placeholder: "Search events", }, ] function uniqueOptions( items: AuditLogItem[], key: "actor" | "type" | "status" ) { return Array.from( new Set(items.map((item) => item[key]).filter(Boolean) as string[]) ) .sort() .map((value) => ({ value, label: value })) } function matchesFilter(item: AuditLogItem, filter: Filter) { if (filter.operator === "empty") return true if (filter.operator === "not_empty") return true const expected = filter.values.filter(Boolean) if (expected.length === 0) return true if (filter.field === "search") { const haystack = [ item.title, item.description, item.actor, item.type, item.status, ] .filter(Boolean) .join(" ") .toLowerCase() const needle = expected[0]?.toLowerCase() ?? "" return filter.operator === "not_contains" ? !haystack.includes(needle) : haystack.includes(needle) } const value = String(item[filter.field as "actor" | "type" | "status"] ?? "") if (filter.operator === "is_not" || filter.operator === "is_not_any_of") { return !expected.includes(value) } return expected.includes(value) } export function AuditLog({ items, enableFilters = true, onOpenRecord, onReviewChange, className, }: { items: AuditLogItem[] enableFilters?: boolean onOpenRecord?: (item: AuditLogItem) => void onReviewChange?: (item: AuditLogItem) => void className?: string }) { const [filters, setFilters] = React.useState[]>([]) const fields = React.useMemo>( () => auditLogFilterFields.map((field) => { if (field.key === "actor") { return { ...field, options: uniqueOptions(items, "actor") } } if (field.key === "type") { return { ...field, options: uniqueOptions(items, "type") } } if (field.key === "status") { return { ...field, options: uniqueOptions(items, "status") } } return field }), [items] ) const visibleItems = React.useMemo( () => items.filter((item) => filters.every((filter) => matchesFilter(item, filter)) ), [filters, items] ) return (

{enableFilters ? ( ) : null}

{visibleItems.length > 0 ? ( visibleItems.map((item, index) => (

{index < visibleItems.length - 1 ? (

) : null}

{item.icon}

{item.title}

{item.timestamp}

{item.description ? (

{item.description}

) : null}

{item.actor ? ( {item.actor} ) : null} {item.type ? ( {item.type} ) : null} {item.status ? ( {item.status} ) : null}

onOpenRecord?.(item)}> Open record onReviewChange?.(item)}> Review change Copy record ID )) ) : (

No audit log items match these filters.

)}

) }