@wakastellar/ui 2.0.0 → 2.1.0

package/src/components/waka-audit-log/index.tsx

@@ -0,0 +1,1475 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import {
+  Activity,
+  LogIn,
+  LogOut,
+  Edit,
+  Trash2,
+  Plus,
+  Filter,
+  Search,
+  ChevronDown,
+  ChevronUp,
+  Download,
+  Eye,
+  Settings,
+  Shield,
+  Key,
+  UserPlus,
+  UserMinus,
+  RefreshCw,
+  AlertTriangle,
+  Info,
+  AlertCircle,
+  X,
+  Calendar,
+  MapPin,
+  Globe,
+  Loader2,
+  FileText,
+  Lock,
+  Unlock,
+  Mail,
+  CreditCard,
+  Upload,
+  Database,
+  Server,
+} from "lucide-react"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type AuditEventType =
+  | "login"
+  | "logout"
+  | "create"
+  | "update"
+  | "delete"
+  | "view"
+  | "export"
+  | "import"
+  | "settings_change"
+  | "permission_change"
+  | "password_change"
+  | "user_invite"
+  | "user_remove"
+  | "api_key_create"
+  | "api_key_revoke"
+  | "mfa_enable"
+  | "mfa_disable"
+  | "session_revoke"
+  | "file_upload"
+  | "file_download"
+  | "payment"
+  | "subscription_change"
+  | "data_export"
+  | "backup"
+  | "restore"
+
+export type AuditSeverity = "info" | "warning" | "critical"
+
+export interface AuditUser {
+  /** Unique user identifier */
+  id: string
+  /** Display name */
+  name: string
+  /** Email address */
+  email?: string
+  /** Avatar URL */
+  avatar?: string
+  /** User role */
+  role?: string
+}
+
+export interface AuditLocation {
+  /** City name */
+  city?: string
+  /** Country name */
+  country?: string
+  /** Country code */
+  countryCode?: string
+}
+
+export interface AuditEvent {
+  /** Unique event identifier */
+  id: string
+  /** Event type */
+  type: AuditEventType
+  /** Severity level */
+  severity: AuditSeverity
+  /** User who performed the action */
+  user: AuditUser
+  /** Event description */
+  description: string
+  /** Detailed action information */
+  details?: Record<string, any>
+  /** IP address */
+  ipAddress?: string
+  /** User agent string */
+  userAgent?: string
+  /** Location information */
+  location?: AuditLocation
+  /** Resource affected (e.g., "User: john@example.com") */
+  resource?: string
+  /** When the event occurred */
+  timestamp: Date
+  /** Session ID */
+  sessionId?: string
+  /** Request ID for tracing */
+  requestId?: string
+}
+
+export interface AuditFilters {
+  /** Filter by event types */
+  eventTypes?: AuditEventType[]
+  /** Filter by severity levels */
+  severities?: AuditSeverity[]
+  /** Filter by user IDs */
+  userIds?: string[]
+  /** Search query */
+  search?: string
+  /** Start date */
+  startDate?: Date
+  /** End date */
+  endDate?: Date
+}
+
+export interface WakaAuditLogProps {
+  /** List of audit events */
+  events: AuditEvent[]
+  /** Callback when an event is clicked */
+  onEventClick?: (event: AuditEvent) => void
+  /** Callback when filters change */
+  onFilterChange?: (filters: AuditFilters) => void
+  /** Callback when load more is triggered (pagination/infinite scroll) */
+  onLoadMore?: () => void
+  /** Callback when export is requested */
+  onExport?: (format: "csv" | "json") => void
+  /** Whether more events can be loaded */
+  hasMore?: boolean
+  /** Whether events are currently loading */
+  loading?: boolean
+  /** Whether to show filter controls */
+  showFilters?: boolean
+  /** Whether to show search */
+  showSearch?: boolean
+  /** Whether to show export button */
+  showExport?: boolean
+  /** Whether to use infinite scroll instead of pagination */
+  infiniteScroll?: boolean
+  /** Maximum number of events to display */
+  maxItems?: number
+  /** Available users for filtering */
+  users?: AuditUser[]
+  /** Custom className */
+  className?: string
+}
+
+// ============================================================================
+// Event Type Configuration
+// ============================================================================
+
+const eventTypeConfig: Record<
+  AuditEventType,
+  { icon: React.ElementType; color: string; bgColor: string; label: string }
+> = {
+  login: {
+    icon: LogIn,
+    color: "text-green-600 dark:text-green-400",
+    bgColor: "bg-green-100 dark:bg-green-900/30",
+    label: "Login",
+  },
+  logout: {
+    icon: LogOut,
+    color: "text-gray-600 dark:text-gray-400",
+    bgColor: "bg-gray-100 dark:bg-gray-900/30",
+    label: "Logout",
+  },
+  create: {
+    icon: Plus,
+    color: "text-blue-600 dark:text-blue-400",
+    bgColor: "bg-blue-100 dark:bg-blue-900/30",
+    label: "Create",
+  },
+  update: {
+    icon: Edit,
+    color: "text-amber-600 dark:text-amber-400",
+    bgColor: "bg-amber-100 dark:bg-amber-900/30",
+    label: "Update",
+  },
+  delete: {
+    icon: Trash2,
+    color: "text-red-600 dark:text-red-400",
+    bgColor: "bg-red-100 dark:bg-red-900/30",
+    label: "Delete",
+  },
+  view: {
+    icon: Eye,
+    color: "text-purple-600 dark:text-purple-400",
+    bgColor: "bg-purple-100 dark:bg-purple-900/30",
+    label: "View",
+  },
+  export: {
+    icon: Download,
+    color: "text-indigo-600 dark:text-indigo-400",
+    bgColor: "bg-indigo-100 dark:bg-indigo-900/30",
+    label: "Export",
+  },
+  import: {
+    icon: Upload,
+    color: "text-indigo-600 dark:text-indigo-400",
+    bgColor: "bg-indigo-100 dark:bg-indigo-900/30",
+    label: "Import",
+  },
+  settings_change: {
+    icon: Settings,
+    color: "text-slate-600 dark:text-slate-400",
+    bgColor: "bg-slate-100 dark:bg-slate-900/30",
+    label: "Settings",
+  },
+  permission_change: {
+    icon: Shield,
+    color: "text-orange-600 dark:text-orange-400",
+    bgColor: "bg-orange-100 dark:bg-orange-900/30",
+    label: "Permission",
+  },
+  password_change: {
+    icon: Key,
+    color: "text-yellow-600 dark:text-yellow-400",
+    bgColor: "bg-yellow-100 dark:bg-yellow-900/30",
+    label: "Password",
+  },
+  user_invite: {
+    icon: UserPlus,
+    color: "text-teal-600 dark:text-teal-400",
+    bgColor: "bg-teal-100 dark:bg-teal-900/30",
+    label: "Invite",
+  },
+  user_remove: {
+    icon: UserMinus,
+    color: "text-rose-600 dark:text-rose-400",
+    bgColor: "bg-rose-100 dark:bg-rose-900/30",
+    label: "Remove",
+  },
+  api_key_create: {
+    icon: Key,
+    color: "text-cyan-600 dark:text-cyan-400",
+    bgColor: "bg-cyan-100 dark:bg-cyan-900/30",
+    label: "API Key Create",
+  },
+  api_key_revoke: {
+    icon: Key,
+    color: "text-red-600 dark:text-red-400",
+    bgColor: "bg-red-100 dark:bg-red-900/30",
+    label: "API Key Revoke",
+  },
+  mfa_enable: {
+    icon: Lock,
+    color: "text-emerald-600 dark:text-emerald-400",
+    bgColor: "bg-emerald-100 dark:bg-emerald-900/30",
+    label: "MFA Enable",
+  },
+  mfa_disable: {
+    icon: Unlock,
+    color: "text-orange-600 dark:text-orange-400",
+    bgColor: "bg-orange-100 dark:bg-orange-900/30",
+    label: "MFA Disable",
+  },
+  session_revoke: {
+    icon: RefreshCw,
+    color: "text-pink-600 dark:text-pink-400",
+    bgColor: "bg-pink-100 dark:bg-pink-900/30",
+    label: "Session Revoke",
+  },
+  file_upload: {
+    icon: Upload,
+    color: "text-violet-600 dark:text-violet-400",
+    bgColor: "bg-violet-100 dark:bg-violet-900/30",
+    label: "Upload",
+  },
+  file_download: {
+    icon: Download,
+    color: "text-violet-600 dark:text-violet-400",
+    bgColor: "bg-violet-100 dark:bg-violet-900/30",
+    label: "Download",
+  },
+  payment: {
+    icon: CreditCard,
+    color: "text-green-600 dark:text-green-400",
+    bgColor: "bg-green-100 dark:bg-green-900/30",
+    label: "Payment",
+  },
+  subscription_change: {
+    icon: CreditCard,
+    color: "text-blue-600 dark:text-blue-400",
+    bgColor: "bg-blue-100 dark:bg-blue-900/30",
+    label: "Subscription",
+  },
+  data_export: {
+    icon: Database,
+    color: "text-fuchsia-600 dark:text-fuchsia-400",
+    bgColor: "bg-fuchsia-100 dark:bg-fuchsia-900/30",
+    label: "Data Export",
+  },
+  backup: {
+    icon: Server,
+    color: "text-sky-600 dark:text-sky-400",
+    bgColor: "bg-sky-100 dark:bg-sky-900/30",
+    label: "Backup",
+  },
+  restore: {
+    icon: RefreshCw,
+    color: "text-sky-600 dark:text-sky-400",
+    bgColor: "bg-sky-100 dark:bg-sky-900/30",
+    label: "Restore",
+  },
+}
+
+// ============================================================================
+// Severity Configuration
+// ============================================================================
+
+const severityConfig: Record<
+  AuditSeverity,
+  { icon: React.ElementType; color: string; bgColor: string; borderColor: string; label: string }
+> = {
+  info: {
+    icon: Info,
+    color: "text-blue-600 dark:text-blue-400",
+    bgColor: "bg-blue-100 dark:bg-blue-900/30",
+    borderColor: "border-blue-200 dark:border-blue-800",
+    label: "Info",
+  },
+  warning: {
+    icon: AlertTriangle,
+    color: "text-amber-600 dark:text-amber-400",
+    bgColor: "bg-amber-100 dark:bg-amber-900/30",
+    borderColor: "border-amber-200 dark:border-amber-800",
+    label: "Warning",
+  },
+  critical: {
+    icon: AlertCircle,
+    color: "text-red-600 dark:text-red-400",
+    bgColor: "bg-red-100 dark:bg-red-900/30",
+    borderColor: "border-red-200 dark:border-red-800",
+    label: "Critical",
+  },
+}
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+function formatRelativeTime(date: Date): string {
+  const now = new Date()
+  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)
+
+  if (diffInSeconds < 60) {
+    return "just now"
+  }
+
+  const diffInMinutes = Math.floor(diffInSeconds / 60)
+  if (diffInMinutes < 60) {
+    return `${diffInMinutes}m ago`
+  }
+
+  const diffInHours = Math.floor(diffInMinutes / 60)
+  if (diffInHours < 24) {
+    return `${diffInHours}h ago`
+  }
+
+  const diffInDays = Math.floor(diffInHours / 24)
+  if (diffInDays < 7) {
+    return `${diffInDays}d ago`
+  }
+
+  const diffInWeeks = Math.floor(diffInDays / 7)
+  if (diffInWeeks < 4) {
+    return `${diffInWeeks}w ago`
+  }
+
+  return date.toLocaleDateString()
+}
+
+function formatFullTimestamp(date: Date): string {
+  return date.toLocaleString(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  })
+}
+
+function formatLocation(location?: AuditLocation): string | null {
+  if (!location) return null
+  const parts = []
+  if (location.city) parts.push(location.city)
+  if (location.country) parts.push(location.country)
+  return parts.length > 0 ? parts.join(", ") : null
+}
+
+// ============================================================================
+// Avatar Component
+// ============================================================================
+
+interface AvatarProps {
+  user: AuditUser
+  size?: "sm" | "md" | "lg"
+  className?: string
+}
+
+function Avatar({ user, size = "md", className }: AvatarProps) {
+  const sizeClasses = {
+    sm: "h-6 w-6 text-[10px]",
+    md: "h-10 w-10 text-sm",
+    lg: "h-12 w-12 text-base",
+  }
+
+  const getInitials = (name: string) => {
+    return name
+      .split(" ")
+      .map((n) => n[0])
+      .join("")
+      .toUpperCase()
+      .slice(0, 2)
+  }
+
+  return (
+    <div
+      className={cn(
+        "relative flex items-center justify-center rounded-full font-semibold flex-shrink-0",
+        sizeClasses[size],
+        user.avatar ? "" : "bg-muted text-muted-foreground",
+        className
+      )}
+    >
+      {user.avatar ? (
+        <img
+          src={user.avatar}
+          alt={user.name}
+          className="h-full w-full rounded-full object-cover"
+        />
+      ) : (
+        getInitials(user.name)
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Event Icon Component
+// ============================================================================
+
+interface EventIconProps {
+  type: AuditEventType
+  severity: AuditSeverity
+  className?: string
+}
+
+function EventIcon({ type, severity, className }: EventIconProps) {
+  const config = eventTypeConfig[type]
+  const Icon = config.icon
+
+  // Use severity color for warning/critical events
+  const colorClass = severity === "info" ? config.color : severityConfig[severity].color
+  const bgColorClass = severity === "info" ? config.bgColor : severityConfig[severity].bgColor
+
+  return (
+    <div
+      className={cn(
+        "flex h-9 w-9 items-center justify-center rounded-full flex-shrink-0",
+        bgColorClass,
+        className
+      )}
+    >
+      <Icon className={cn("h-4 w-4", colorClass)} />
+    </div>
+  )
+}
+
+// ============================================================================
+// Severity Badge Component
+// ============================================================================
+
+interface SeverityBadgeProps {
+  severity: AuditSeverity
+  className?: string
+}
+
+function SeverityBadge({ severity, className }: SeverityBadgeProps) {
+  const config = severityConfig[severity]
+
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium",
+        config.bgColor,
+        config.color,
+        className
+      )}
+    >
+      {config.label}
+    </span>
+  )
+}
+
+// ============================================================================
+// Event Details Component
+// ============================================================================
+
+interface EventDetailsProps {
+  event: AuditEvent
+}
+
+function EventDetails({ event }: EventDetailsProps) {
+  const locationText = formatLocation(event.location)
+
+  return (
+    <div className="mt-3 p-3 bg-muted/50 rounded-lg text-sm space-y-2 animate-in slide-in-from-top-2 fade-in duration-200">
+      {/* Full timestamp */}
+      <div className="flex items-center gap-2 text-muted-foreground">
+        <Calendar className="h-3.5 w-3.5" />
+        <span>{formatFullTimestamp(new Date(event.timestamp))}</span>
+      </div>
+
+      {/* IP Address */}
+      {event.ipAddress && (
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <Globe className="h-3.5 w-3.5" />
+          <span>IP: {event.ipAddress}</span>
+        </div>
+      )}
+
+      {/* Location */}
+      {locationText && (
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <MapPin className="h-3.5 w-3.5" />
+          <span>{locationText}</span>
+        </div>
+      )}
+
+      {/* Resource */}
+      {event.resource && (
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <FileText className="h-3.5 w-3.5" />
+          <span>Resource: {event.resource}</span>
+        </div>
+      )}
+
+      {/* Session ID */}
+      {event.sessionId && (
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <Key className="h-3.5 w-3.5" />
+          <span className="font-mono text-xs">Session: {event.sessionId}</span>
+        </div>
+      )}
+
+      {/* Request ID */}
+      {event.requestId && (
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <Activity className="h-3.5 w-3.5" />
+          <span className="font-mono text-xs">Request: {event.requestId}</span>
+        </div>
+      )}
+
+      {/* User Agent */}
+      {event.userAgent && (
+        <div className="text-muted-foreground">
+          <span className="text-xs break-all">{event.userAgent}</span>
+        </div>
+      )}
+
+      {/* Additional Details */}
+      {event.details && Object.keys(event.details).length > 0 && (
+        <div className="pt-2 border-t border-border">
+          <div className="text-xs font-medium text-muted-foreground mb-2">Details</div>
+          <div className="space-y-1">
+            {Object.entries(event.details).map(([key, value]) => (
+              <div key={key} className="flex items-start gap-2 text-xs">
+                <span className="text-muted-foreground font-medium min-w-[80px]">{key}:</span>
+                <span className="text-foreground break-all">
+                  {typeof value === "object" ? JSON.stringify(value) : String(value)}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Event Item Component
+// ============================================================================
+
+interface EventItemProps {
+  event: AuditEvent
+  onEventClick?: (event: AuditEvent) => void
+  isNew?: boolean
+}
+
+function EventItem({ event, onEventClick, isNew }: EventItemProps) {
+  const [isExpanded, setIsExpanded] = React.useState(false)
+  const config = eventTypeConfig[event.type]
+  const severityConf = severityConfig[event.severity]
+  const locationText = formatLocation(event.location)
+
+  const hasDetails =
+    event.details ||
+    event.ipAddress ||
+    event.userAgent ||
+    event.sessionId ||
+    event.requestId ||
+    event.location
+
+  return (
+    <div
+      className={cn(
+        "relative flex gap-3 p-4 rounded-lg border bg-card transition-all duration-300",
+        "hover:bg-accent/50 hover:shadow-sm",
+        event.severity === "critical" && "border-l-4 border-l-red-500",
+        event.severity === "warning" && "border-l-4 border-l-amber-500",
+        isNew && "animate-in slide-in-from-left-5 fade-in duration-500"
+      )}
+    >
+      {/* Timeline indicator */}
+      <div className="flex flex-col items-center gap-2">
+        <EventIcon type={event.type} severity={event.severity} />
+        <div className="flex-1 w-px bg-border" />
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        {/* Header */}
+        <div className="flex items-start justify-between gap-2 mb-1">
+          <div className="flex items-center gap-2 flex-wrap">
+            <span
+              className={cn(
+                "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium",
+                config.bgColor,
+                config.color
+              )}
+            >
+              {config.label}
+            </span>
+            {event.severity !== "info" && <SeverityBadge severity={event.severity} />}
+          </div>
+          <span className="flex-shrink-0 text-xs text-muted-foreground">
+            {formatRelativeTime(new Date(event.timestamp))}
+          </span>
+        </div>
+
+        {/* Description */}
+        <p className="text-sm text-foreground mb-2">{event.description}</p>
+
+        {/* User info */}
+        <div className="flex items-center gap-2 mb-2">
+          <Avatar user={event.user} size="sm" />
+          <div className="flex flex-col">
+            <span className="text-sm font-medium">{event.user.name}</span>
+            {event.user.email && (
+              <span className="text-xs text-muted-foreground">{event.user.email}</span>
+            )}
+          </div>
+          {event.user.role && (
+            <span className="ml-2 text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded">
+              {event.user.role}
+            </span>
+          )}
+        </div>
+
+        {/* Quick info row */}
+        <div className="flex items-center gap-3 text-xs text-muted-foreground flex-wrap">
+          {event.ipAddress && (
+            <span className="inline-flex items-center gap-1">
+              <Globe className="h-3 w-3" />
+              {event.ipAddress}
+            </span>
+          )}
+          {locationText && (
+            <span className="inline-flex items-center gap-1">
+              <MapPin className="h-3 w-3" />
+              {locationText}
+            </span>
+          )}
+          {event.resource && (
+            <span className="inline-flex items-center gap-1">
+              <FileText className="h-3 w-3" />
+              {event.resource}
+            </span>
+          )}
+        </div>
+
+        {/* Expandable details */}
+        {hasDetails && (
+          <div className="mt-2">
+            <button
+              className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+              onClick={(e) => {
+                e.stopPropagation()
+                setIsExpanded(!isExpanded)
+              }}
+            >
+              {isExpanded ? (
+                <ChevronUp className="h-3 w-3" />
+              ) : (
+                <ChevronDown className="h-3 w-3" />
+              )}
+              {isExpanded ? "Hide details" : "Show details"}
+            </button>
+
+            {isExpanded && <EventDetails event={event} />}
+          </div>
+        )}
+      </div>
+
+      {/* Click handler */}
+      {onEventClick && (
+        <button
+          className="absolute inset-0 opacity-0"
+          onClick={() => onEventClick(event)}
+          aria-label={`View details for ${event.description}`}
+        />
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Filter Bar Component
+// ============================================================================
+
+interface FilterBarProps {
+  filters: AuditFilters
+  onFilterChange: (filters: AuditFilters) => void
+  users?: AuditUser[]
+  showSearch?: boolean
+}
+
+function FilterBar({ filters, onFilterChange, users, showSearch }: FilterBarProps) {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [searchValue, setSearchValue] = React.useState(filters.search || "")
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    setSearchValue(value)
+    onFilterChange({ ...filters, search: value || undefined })
+  }
+
+  const toggleEventType = (type: AuditEventType) => {
+    const currentTypes = filters.eventTypes || []
+    const newTypes = currentTypes.includes(type)
+      ? currentTypes.filter((t) => t !== type)
+      : [...currentTypes, type]
+    onFilterChange({ ...filters, eventTypes: newTypes.length > 0 ? newTypes : undefined })
+  }
+
+  const toggleSeverity = (severity: AuditSeverity) => {
+    const currentSeverities = filters.severities || []
+    const newSeverities = currentSeverities.includes(severity)
+      ? currentSeverities.filter((s) => s !== severity)
+      : [...currentSeverities, severity]
+    onFilterChange({
+      ...filters,
+      severities: newSeverities.length > 0 ? newSeverities : undefined,
+    })
+  }
+
+  const toggleUser = (userId: string) => {
+    const currentUsers = filters.userIds || []
+    const newUsers = currentUsers.includes(userId)
+      ? currentUsers.filter((u) => u !== userId)
+      : [...currentUsers, userId]
+    onFilterChange({ ...filters, userIds: newUsers.length > 0 ? newUsers : undefined })
+  }
+
+  const clearFilters = () => {
+    setSearchValue("")
+    onFilterChange({})
+  }
+
+  const hasActiveFilters =
+    (filters.eventTypes && filters.eventTypes.length > 0) ||
+    (filters.severities && filters.severities.length > 0) ||
+    (filters.userIds && filters.userIds.length > 0) ||
+    filters.search ||
+    filters.startDate ||
+    filters.endDate
+
+  const eventTypeGroups = [
+    {
+      label: "Authentication",
+      types: ["login", "logout", "password_change", "mfa_enable", "mfa_disable", "session_revoke"] as AuditEventType[],
+    },
+    {
+      label: "Data",
+      types: ["create", "update", "delete", "view", "export", "import", "data_export"] as AuditEventType[],
+    },
+    {
+      label: "Users",
+      types: ["user_invite", "user_remove", "permission_change"] as AuditEventType[],
+    },
+    {
+      label: "System",
+      types: ["settings_change", "api_key_create", "api_key_revoke", "backup", "restore"] as AuditEventType[],
+    },
+    {
+      label: "Files",
+      types: ["file_upload", "file_download"] as AuditEventType[],
+    },
+    {
+      label: "Billing",
+      types: ["payment", "subscription_change"] as AuditEventType[],
+    },
+  ]
+
+  return (
+    <div className="space-y-3 mb-4">
+      {/* Search and filter toggle */}
+      <div className="flex items-center gap-2">
+        {showSearch && (
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <input
+              type="text"
+              placeholder="Search audit logs..."
+              value={searchValue}
+              onChange={handleSearchChange}
+              className="w-full pl-9 pr-4 py-2 text-sm rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-ring"
+            />
+          </div>
+        )}
+
+        <button
+          className={cn(
+            "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg border transition-colors",
+            isOpen || hasActiveFilters
+              ? "bg-primary text-primary-foreground"
+              : "bg-background hover:bg-muted"
+          )}
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          <Filter className="h-4 w-4" />
+          Filters
+          {hasActiveFilters && (
+            <span className="inline-flex items-center justify-center h-5 w-5 rounded-full bg-primary-foreground text-primary text-xs">
+              {(filters.eventTypes?.length || 0) +
+                (filters.severities?.length || 0) +
+                (filters.userIds?.length || 0)}
+            </span>
+          )}
+        </button>
+
+        {hasActiveFilters && (
+          <button
+            className="inline-flex items-center gap-1 px-3 py-2 text-sm font-medium rounded-lg border bg-background hover:bg-muted transition-colors"
+            onClick={clearFilters}
+          >
+            <X className="h-4 w-4" />
+            Clear
+          </button>
+        )}
+      </div>
+
+      {/* Filter panel */}
+      {isOpen && (
+        <div className="p-4 bg-muted/50 rounded-lg border space-y-4 animate-in slide-in-from-top-2 fade-in duration-200">
+          {/* Severity filters */}
+          <div>
+            <div className="text-xs font-medium text-muted-foreground mb-2">Severity</div>
+            <div className="flex flex-wrap gap-2">
+              {(Object.keys(severityConfig) as AuditSeverity[]).map((severity) => {
+                const config = severityConfig[severity]
+                const isActive = filters.severities?.includes(severity)
+
+                return (
+                  <button
+                    key={severity}
+                    className={cn(
+                      "px-3 py-1.5 rounded-lg text-xs font-medium transition-all",
+                      isActive
+                        ? cn(config.bgColor, config.color, "ring-2 ring-offset-1", config.borderColor)
+                        : "bg-background hover:bg-muted text-muted-foreground border"
+                    )}
+                    onClick={() => toggleSeverity(severity)}
+                  >
+                    {config.label}
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+
+          {/* Event type filters */}
+          <div>
+            <div className="text-xs font-medium text-muted-foreground mb-2">Event Types</div>
+            <div className="space-y-3">
+              {eventTypeGroups.map((group) => (
+                <div key={group.label}>
+                  <div className="text-xs text-muted-foreground mb-1.5">{group.label}</div>
+                  <div className="flex flex-wrap gap-1.5">
+                    {group.types.map((type) => {
+                      const config = eventTypeConfig[type]
+                      const isActive = filters.eventTypes?.includes(type)
+
+                      return (
+                        <button
+                          key={type}
+                          className={cn(
+                            "px-2 py-1 rounded text-xs font-medium transition-all",
+                            isActive
+                              ? cn(config.bgColor, config.color)
+                              : "bg-background hover:bg-muted text-muted-foreground border"
+                          )}
+                          onClick={() => toggleEventType(type)}
+                        >
+                          {config.label}
+                        </button>
+                      )
+                    })}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* User filters */}
+          {users && users.length > 0 && (
+            <div>
+              <div className="text-xs font-medium text-muted-foreground mb-2">Users</div>
+              <div className="flex flex-wrap gap-2">
+                {users.map((user) => {
+                  const isActive = filters.userIds?.includes(user.id)
+
+                  return (
+                    <button
+                      key={user.id}
+                      className={cn(
+                        "inline-flex items-center gap-2 px-2 py-1 rounded-lg text-xs font-medium transition-all",
+                        isActive
+                          ? "bg-primary text-primary-foreground"
+                          : "bg-background hover:bg-muted text-muted-foreground border"
+                      )}
+                      onClick={() => toggleUser(user.id)}
+                    >
+                      <Avatar user={user} size="sm" className="h-4 w-4 text-[8px]" />
+                      {user.name}
+                    </button>
+                  )
+                })}
+              </div>
+            </div>
+          )}
+
+          {/* Date range filters */}
+          <div>
+            <div className="text-xs font-medium text-muted-foreground mb-2">Date Range</div>
+            <div className="flex items-center gap-2">
+              <input
+                type="date"
+                value={filters.startDate?.toISOString().split("T")[0] || ""}
+                onChange={(e) =>
+                  onFilterChange({
+                    ...filters,
+                    startDate: e.target.value ? new Date(e.target.value) : undefined,
+                  })
+                }
+                className="px-3 py-1.5 text-xs rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-ring"
+              />
+              <span className="text-xs text-muted-foreground">to</span>
+              <input
+                type="date"
+                value={filters.endDate?.toISOString().split("T")[0] || ""}
+                onChange={(e) =>
+                  onFilterChange({
+                    ...filters,
+                    endDate: e.target.value ? new Date(e.target.value) : undefined,
+                  })
+                }
+                className="px-3 py-1.5 text-xs rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-ring"
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Export Menu Component
+// ============================================================================
+
+interface ExportMenuProps {
+  onExport: (format: "csv" | "json") => void
+}
+
+function ExportMenu({ onExport }: ExportMenuProps) {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <div className="relative">
+      <button
+        className="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg border bg-background hover:bg-muted transition-colors"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <Download className="h-4 w-4" />
+        Export
+        <ChevronDown className={cn("h-4 w-4 transition-transform", isOpen && "rotate-180")} />
+      </button>
+
+      {isOpen && (
+        <>
+          <div className="fixed inset-0 z-10" onClick={() => setIsOpen(false)} />
+          <div className="absolute right-0 top-full mt-1 z-20 w-40 bg-popover border rounded-lg shadow-lg overflow-hidden animate-in fade-in slide-in-from-top-2 duration-200">
+            <button
+              className="w-full px-3 py-2 text-sm text-left hover:bg-muted transition-colors flex items-center gap-2"
+              onClick={() => {
+                onExport("csv")
+                setIsOpen(false)
+              }}
+            >
+              <FileText className="h-4 w-4" />
+              Export as CSV
+            </button>
+            <button
+              className="w-full px-3 py-2 text-sm text-left hover:bg-muted transition-colors flex items-center gap-2"
+              onClick={() => {
+                onExport("json")
+                setIsOpen(false)
+              }}
+            >
+              <FileText className="h-4 w-4" />
+              Export as JSON
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function WakaAuditLog({
+  events,
+  onEventClick,
+  onFilterChange,
+  onLoadMore,
+  onExport,
+  hasMore = false,
+  loading = false,
+  showFilters = true,
+  showSearch = true,
+  showExport = true,
+  infiniteScroll = false,
+  maxItems,
+  users,
+  className,
+}: WakaAuditLogProps) {
+  const [filters, setFilters] = React.useState<AuditFilters>({})
+  const [newEventIds, setNewEventIds] = React.useState<Set<string>>(new Set())
+  const prevEventIdsRef = React.useRef<Set<string>>(new Set())
+  const observerRef = React.useRef<IntersectionObserver | null>(null)
+  const loadMoreRef = React.useRef<HTMLDivElement>(null)
+
+  // Track new events for animation
+  React.useEffect(() => {
+    const currentIds = new Set(events.map((e) => e.id))
+    const newIds = new Set<string>()
+
+    currentIds.forEach((id) => {
+      if (!prevEventIdsRef.current.has(id)) {
+        newIds.add(id)
+      }
+    })
+
+    if (newIds.size > 0 && prevEventIdsRef.current.size > 0) {
+      setNewEventIds(newIds)
+      const timer = setTimeout(() => setNewEventIds(new Set()), 500)
+      return () => clearTimeout(timer)
+    }
+
+    prevEventIdsRef.current = currentIds
+  }, [events])
+
+  // Handle filter changes
+  const handleFilterChange = React.useCallback(
+    (newFilters: AuditFilters) => {
+      setFilters(newFilters)
+      onFilterChange?.(newFilters)
+    },
+    [onFilterChange]
+  )
+
+  // Filter events
+  const filteredEvents = React.useMemo(() => {
+    let result = events
+
+    if (filters.eventTypes && filters.eventTypes.length > 0) {
+      result = result.filter((e) => filters.eventTypes!.includes(e.type))
+    }
+
+    if (filters.severities && filters.severities.length > 0) {
+      result = result.filter((e) => filters.severities!.includes(e.severity))
+    }
+
+    if (filters.userIds && filters.userIds.length > 0) {
+      result = result.filter((e) => filters.userIds!.includes(e.user.id))
+    }
+
+    if (filters.search) {
+      const searchLower = filters.search.toLowerCase()
+      result = result.filter(
+        (e) =>
+          e.description.toLowerCase().includes(searchLower) ||
+          e.user.name.toLowerCase().includes(searchLower) ||
+          e.user.email?.toLowerCase().includes(searchLower) ||
+          e.resource?.toLowerCase().includes(searchLower) ||
+          e.ipAddress?.includes(searchLower)
+      )
+    }
+
+    if (filters.startDate) {
+      result = result.filter((e) => new Date(e.timestamp) >= filters.startDate!)
+    }
+
+    if (filters.endDate) {
+      const endOfDay = new Date(filters.endDate)
+      endOfDay.setHours(23, 59, 59, 999)
+      result = result.filter((e) => new Date(e.timestamp) <= endOfDay)
+    }
+
+    if (maxItems && maxItems > 0) {
+      result = result.slice(0, maxItems)
+    }
+
+    return result
+  }, [events, filters, maxItems])
+
+  // Infinite scroll observer
+  React.useEffect(() => {
+    if (!infiniteScroll || !onLoadMore || !hasMore) return
+
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && !loading) {
+          onLoadMore()
+        }
+      },
+      { threshold: 0.1 }
+    )
+
+    if (loadMoreRef.current) {
+      observerRef.current.observe(loadMoreRef.current)
+    }
+
+    return () => {
+      observerRef.current?.disconnect()
+    }
+  }, [infiniteScroll, onLoadMore, hasMore, loading])
+
+  if (events.length === 0 && !loading) {
+    return (
+      <div
+        className={cn(
+          "flex flex-col items-center justify-center py-12 text-center",
+          className
+        )}
+      >
+        <Activity className="h-12 w-12 text-muted-foreground/50 mb-4" />
+        <h3 className="text-lg font-medium text-muted-foreground">No audit events</h3>
+        <p className="text-sm text-muted-foreground/70 mt-1">
+          Activity will appear here when events are logged.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn("w-full", className)}>
+      {/* Header with filters and export */}
+      <div className="flex items-start justify-between gap-4 mb-4">
+        <div className="flex-1">
+          {(showFilters || showSearch) && (
+            <FilterBar
+              filters={filters}
+              onFilterChange={handleFilterChange}
+              users={users}
+              showSearch={showSearch}
+            />
+          )}
+        </div>
+
+        {showExport && onExport && <ExportMenu onExport={onExport} />}
+      </div>
+
+      {/* Event List */}
+      <div className="space-y-3">
+        {filteredEvents.map((event) => (
+          <EventItem
+            key={event.id}
+            event={event}
+            onEventClick={onEventClick}
+            isNew={newEventIds.has(event.id)}
+          />
+        ))}
+      </div>
+
+      {/* Loading State */}
+      {loading && (
+        <div className="flex items-center justify-center py-6">
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      )}
+
+      {/* Load More / Infinite Scroll Target */}
+      {!loading && hasMore && (
+        <>
+          {infiniteScroll ? (
+            <div ref={loadMoreRef} className="h-1" />
+          ) : (
+            <div className="flex justify-center pt-4">
+              <button
+                className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg border bg-background hover:bg-muted transition-colors"
+                onClick={onLoadMore}
+              >
+                <ChevronDown className="h-4 w-4" />
+                Load more
+              </button>
+            </div>
+          )}
+        </>
+      )}
+
+      {/* No results after filtering */}
+      {filteredEvents.length === 0 && events.length > 0 && !loading && (
+        <div className="flex flex-col items-center justify-center py-12 text-center">
+          <Filter className="h-8 w-8 text-muted-foreground mb-3" />
+          <p className="text-sm text-muted-foreground">No events match the current filters</p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Hook for managing audit log state
+// ============================================================================
+
+export interface UseAuditLogOptions {
+  /** Initial events */
+  initialEvents?: AuditEvent[]
+  /** Maximum events to keep in memory */
+  maxEvents?: number
+  /** Initial filters */
+  initialFilters?: AuditFilters
+}
+
+export interface UseAuditLogReturn {
+  /** Current audit events */
+  events: AuditEvent[]
+  /** Current filters */
+  filters: AuditFilters
+  /** Loading state */
+  loading: boolean
+  /** Whether more events can be loaded */
+  hasMore: boolean
+  /** Add a new event */
+  addEvent: (event: AuditEvent) => void
+  /** Add multiple events */
+  addEvents: (events: AuditEvent[]) => void
+  /** Remove an event */
+  removeEvent: (eventId: string) => void
+  /** Set filters */
+  setFilters: (filters: AuditFilters) => void
+  /** Clear all filters */
+  clearFilters: () => void
+  /** Load more events */
+  loadMore: (fetcher: () => Promise<{ events: AuditEvent[]; hasMore: boolean }>) => Promise<void>
+  /** Refresh all events */
+  refresh: (events: AuditEvent[]) => void
+  /** Clear all events */
+  clear: () => void
+  /** Set loading state */
+  setLoading: (loading: boolean) => void
+  /** Set has more state */
+  setHasMore: (hasMore: boolean) => void
+  /** Export events to format */
+  exportEvents: (format: "csv" | "json") => string
+  /** Get filtered events */
+  getFilteredEvents: () => AuditEvent[]
+}
+
+export function useAuditLog({
+  initialEvents = [],
+  maxEvents = 1000,
+  initialFilters = {},
+}: UseAuditLogOptions = {}): UseAuditLogReturn {
+  const [events, setEvents] = React.useState<AuditEvent[]>(initialEvents)
+  const [filters, setFilters] = React.useState<AuditFilters>(initialFilters)
+  const [loading, setLoading] = React.useState(false)
+  const [hasMore, setHasMore] = React.useState(false)
+
+  const addEvent = React.useCallback(
+    (event: AuditEvent) => {
+      setEvents((prev) => {
+        const updated = [event, ...prev]
+        return updated.slice(0, maxEvents)
+      })
+    },
+    [maxEvents]
+  )
+
+  const addEvents = React.useCallback(
+    (newEvents: AuditEvent[]) => {
+      setEvents((prev) => {
+        const updated = [...newEvents, ...prev]
+        return updated.slice(0, maxEvents)
+      })
+    },
+    [maxEvents]
+  )
+
+  const removeEvent = React.useCallback((eventId: string) => {
+    setEvents((prev) => prev.filter((e) => e.id !== eventId))
+  }, [])
+
+  const clearFilters = React.useCallback(() => {
+    setFilters({})
+  }, [])
+
+  const loadMore = React.useCallback(
+    async (fetcher: () => Promise<{ events: AuditEvent[]; hasMore: boolean }>) => {
+      setLoading(true)
+      try {
+        const result = await fetcher()
+        setEvents((prev) => {
+          const existingIds = new Set(prev.map((e) => e.id))
+          const newEvents = result.events.filter((e) => !existingIds.has(e.id))
+          return [...prev, ...newEvents].slice(0, maxEvents)
+        })
+        setHasMore(result.hasMore)
+      } finally {
+        setLoading(false)
+      }
+    },
+    [maxEvents]
+  )
+
+  const refresh = React.useCallback((newEvents: AuditEvent[]) => {
+    setEvents(newEvents)
+  }, [])
+
+  const clear = React.useCallback(() => {
+    setEvents([])
+  }, [])
+
+  const getFilteredEvents = React.useCallback(() => {
+    let result = events
+
+    if (filters.eventTypes && filters.eventTypes.length > 0) {
+      result = result.filter((e) => filters.eventTypes!.includes(e.type))
+    }
+
+    if (filters.severities && filters.severities.length > 0) {
+      result = result.filter((e) => filters.severities!.includes(e.severity))
+    }
+
+    if (filters.userIds && filters.userIds.length > 0) {
+      result = result.filter((e) => filters.userIds!.includes(e.user.id))
+    }
+
+    if (filters.search) {
+      const searchLower = filters.search.toLowerCase()
+      result = result.filter(
+        (e) =>
+          e.description.toLowerCase().includes(searchLower) ||
+          e.user.name.toLowerCase().includes(searchLower) ||
+          e.user.email?.toLowerCase().includes(searchLower)
+      )
+    }
+
+    if (filters.startDate) {
+      result = result.filter((e) => new Date(e.timestamp) >= filters.startDate!)
+    }
+
+    if (filters.endDate) {
+      const endOfDay = new Date(filters.endDate)
+      endOfDay.setHours(23, 59, 59, 999)
+      result = result.filter((e) => new Date(e.timestamp) <= endOfDay)
+    }
+
+    return result
+  }, [events, filters])
+
+  const exportEvents = React.useCallback(
+    (format: "csv" | "json"): string => {
+      const eventsToExport = getFilteredEvents()
+
+      if (format === "json") {
+        return JSON.stringify(eventsToExport, null, 2)
+      }
+
+      // CSV format
+      const headers = [
+        "ID",
+        "Type",
+        "Severity",
+        "Description",
+        "User Name",
+        "User Email",
+        "IP Address",
+        "Location",
+        "Resource",
+        "Timestamp",
+      ]
+
+      const rows = eventsToExport.map((e) => [
+        e.id,
+        e.type,
+        e.severity,
+        `"${e.description.replace(/"/g, '""')}"`,
+        e.user.name,
+        e.user.email || "",
+        e.ipAddress || "",
+        formatLocation(e.location) || "",
+        e.resource || "",
+        new Date(e.timestamp).toISOString(),
+      ])
+
+      return [headers.join(","), ...rows.map((r) => r.join(","))].join("\n")
+    },
+    [getFilteredEvents]
+  )
+
+  return {
+    events,
+    filters,
+    loading,
+    hasMore,
+    addEvent,
+    addEvents,
+    removeEvent,
+    setFilters,
+    clearFilters,
+    loadMore,
+    refresh,
+    clear,
+    setLoading,
+    setHasMore,
+    exportEvents,
+    getFilteredEvents,
+  }
+}
+
+export default WakaAuditLog