XFEServerManager

import { useState } from 'react';
import { Search, ShieldCheck } from 'lucide-react';
import { useApiResource, useServer } from '../context/server-context';
import { useI18n } from '../lib/i18n';
import { Badge, Input, PageHeader, Panel, ResourceState, TableShell, formatDate } from '../components/ui';

export function AuditPage() {
  const { t, locale } = useI18n();
  const { api } = useServer();
  const [searchInput, setSearchInput] = useState('');
  const [query, setQuery] = useState('');
  const resource = useApiResource(() => api.audit(undefined, query), [query], ['audit']);
  return (
    <div className="page">
      <PageHeader title={t('audit.title')} description={t('audit.description')} actions={<form className="search-box" onSubmit={(event) => { event.preventDefault(); setQuery(searchInput.trim()); }}><Search size={16} /><Input aria-label={t('common.search')} value={searchInput} onChange={(event) => setSearchInput(event.target.value)} placeholder={t('common.search')} /></form>} />
      <Panel>
        <ResourceState loading={resource.loading} error={resource.error} empty={resource.data?.items.length === 0} onRetry={resource.reload}>
          <TableShell><thead><tr><th>{t('audit.time')}</th><th>{t('audit.actor')}</th><th>{t('audit.action')}</th><th>{t('audit.target')}</th><th>{t('audit.result')}</th><th>{t('audit.request')}</th></tr></thead><tbody>{resource.data?.items.map((event) => <tr key={event.id}><td>{formatDate(event.at, locale)}</td><td><strong>{event.actor}</strong><small className="table-subline">{event.source}</small></td><td><span className="action-cell"><ShieldCheck size={14} />{event.action}</span>{event.reason && <small className="table-subline">{event.reason}</small>}</td><td><code>{event.target ?? '—'}</code></td><td><Badge tone={event.result === 'SUCCESS' ? 'good' : event.result === 'DENIED' ? 'warn' : 'danger'}>{event.result}</Badge>{event.durationMs !== undefined && <small className="table-subline">{event.durationMs} ms</small>}</td><td><code className="request-id">{event.requestId ?? '—'}</code></td></tr>)}</tbody></TableShell>
        </ResourceState>
      </Panel>
    </div>
  );
}