AuditLogViewer

import { useState } from 'react';
import { Badge, Select, SelectContent, SelectItem, SelectTrigger } from '@rookcom/monarch-react';
import { AuditLogViewer, auditLogToCsv, type AuditLogEvent } from '@rookcom/monarch-react/collaboration';

const NOW = '2026-03-02T12:00:00Z';

/** Built lazily: docs files cannot create JSX at module scope. */
const sampleEvents = (): (AuditLogEvent & { area: string })[] => [
  {
    id: 'a1',
    area: 'members',
    time: '2026-03-02T11:04:12Z',
    actor: { name: 'Ana Lopez', detail: '[email protected]' },
    action: 'Changed a member’s role',
    target: 'Ben Okafor',
    ip: '203.0.113.24',
    device: 'Firefox on macOS',
    reason: 'Moved to the platform team',
    changes: [
      { field: 'Role', before: 'Member', after: 'Admin' },
      { field: 'Team', before: 'Web', after: 'Platform' },
    ],
  },
  {
    id: 'a2',
    area: 'security',
    time: '2026-03-02T09:47:51Z',
    actor: { name: 'Chloé Martin', detail: '[email protected]' },
    action: 'Signed in',
    ip: '198.51.100.8',
    device: 'Safari on iPhone',
    location: 'Lisbon, Portugal (approximate)',
  },
  {
    id: 'a3',
    area: 'settings',
    time: '2026-03-02T03:00:00Z',
    actor: { name: 'Retention policy', kind: 'automation' },
    action: 'Deleted 14 expired exports',
    target: 'Exports',
    source: <Badge size="sm">Scheduled</Badge>,
    details: <pre>{JSON.stringify({ policy: 'exports-30d', deleted: 14 }, null, 2)}</pre>,
  },
  {
    id: 'a4',
    area: 'settings',
    time: '2026-03-01T15:22:09Z',
    actor: { name: 'Deploy key', kind: 'api', detail: 'Key ending 7f3a' },
    action: 'Updated a webhook',
    target: 'Billing events',
    ip: '192.0.2.44',
    device: 'API client',
    changes: [
      {
        field: 'URL',
        before: 'https://hooks.example.com/v1',
        after: 'https://hooks.example.com/v2',
      },
    ],
  },
];

function download(name: string, text: string) {
  const url = URL.createObjectURL(new Blob([text], { type: 'text/csv' }));
  const a = document.createElement('a');
  a.href = url;
  a.download = name;
  a.click();
  URL.revokeObjectURL(url);
}

function Demo() {
  const [area, setArea] = useState('all');
  const events = area === 'all' ? sampleEvents() : sampleEvents().filter((e) => e.area === area);
  return (
    <div style={{ width: '100%' }}>
      <AuditLogViewer
        events={events}
        filters={
          <Select value={area} onValueChange={setArea}>
            <SelectTrigger aria-label="Area" style={{ width: '12rem' }} />
            <SelectContent>
              <SelectItem value="all">All areas</SelectItem>
              <SelectItem value="members">Members</SelectItem>
              <SelectItem value="security">Security</SelectItem>
              <SelectItem value="settings">Settings</SelectItem>
            </SelectContent>
          </Select>
        }
        onExport={() =>
          download(
            'audit-log.csv',
            auditLogToCsv([
              ['time', 'actor', 'action', 'ip'],
              ...events.map((e) => [new Date(e.time), e.actor?.name, String(e.action), e.ip]),
            ]),
          )
        }
        hasMore
        onLoadMore={() => {}}
        now={NOW}
        timeZone="UTC"
        locale="en-GB"
      />
    </div>
  );
}

<Demo />