Audit Log Library

AuditLog Component

A flexible and composable React component for displaying audit logs with filtering, sorting, and infinite scroll support. Designed for both API-driven and externally controlled use cases.

Overview

AuditLog is a reusable UI component that provides:

• Audit log table with infinite scroll
• Search, sort, and date filtering
• Sidebar-based advanced filters
• Configurable table, filters, and sidebar
• Internal API integration OR external data support

This component is built to be used inside scalable UI systems and libraries.

Features

• 🔍 Search & Filters – Keyword, date range, analyst filtering
• 📊 Infinite Scroll Pagination – Cursor-based API support
• 🔄 Dual Data Mode
  • API-driven (internal fetching)
  • External data (controlled by parent)
• 🎨 Customizable UI
  • Override filters, sidebar, table props
• 🧩 Extensible Table
  • Custom columns, chip config, scroll height
• 🛡️ Safe & Defensive
  • Handles undefined/null API data

Installation

npm install @e-llm-studio/audit-log

Basic Usage

import React from "react";
import { AuditLog } from "@e-llm-studio/audit-log";
import { useParams } from "react-router-dom";

export function AuditLogPage() {
  const { id: claimId } = useParams();

  const analystEmailLabelMap: Record<string, string> = {
    "[email protected]": "Teneka Williams",
    "[email protected]": "Janna Beckner",
    "[email protected]": "Renee Ramirez",
    "[email protected]": "ICE",
  };

  const analystOptions = Object.entries(analystEmailLabelMap).map(
    ([email, label]) =>({
      label,
      value: email,
    })
  );

  return (
    <AuditLog
      api={{
        baseUrl: import.meta.env.VITE_BASE_API_URL,
        endpoint: "/claims-management-mode/audits/",
      }}
      query={{ claimId }}
      sidebar={{ options: analystOptions }}
      table={{
        tableProps: { scrollHeight: "60vh" },
      }}
    />
  );
}