From 033cfcf5fca86a7631d04092e335f65d63e5954c Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Tue, 17 Mar 2026 19:39:55 +0100
Subject: [PATCH] refactor: rework audit log to full-width table with filter
 bar

Replace split-pane layout with a table-based design: horizontal filter
bar, full-width data table with sticky headers, expandable detail rows
showing IP/user-agent/JSON payload, and bottom pagination.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/admin/AuditLogPage.module.css | 257 ++++++++++---
 ui/src/pages/admin/AuditLogPage.tsx        | 404 ++++++++++-----------
 2 files changed, 387 insertions(+), 274 deletions(-)

diff --git a/ui/src/pages/admin/AuditLogPage.module.css b/ui/src/pages/admin/AuditLogPage.module.css
index cc2a5efd..1e1d8dd4 100644
--- a/ui/src/pages/admin/AuditLogPage.module.css
+++ b/ui/src/pages/admin/AuditLogPage.module.css
@@ -1,40 +1,24 @@
-/* ─── Filter Toggle ─── */
-.filterToggle {
-  width: 100%;
-  padding: 8px 20px;
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--text-muted);
-  background: transparent;
-  border: none;
-  border-bottom: 1px solid var(--border);
-  cursor: pointer;
-  text-align: left;
-  font-family: var(--font-body);
-}
-
-.filterToggle:hover {
-  color: var(--text-primary);
-  background: var(--bg-hover);
-}
-
-/* ─── Filters ─── */
-.filters {
+/* ─── Filter Bar ─── */
+.filterBar {
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  align-items: flex-end;
+  gap: 10px;
   padding: 10px 20px;
   border-bottom: 1px solid var(--border);
-}
-
-.filtersCollapsed {
-  display: none;
+  flex-shrink: 0;
+  flex-wrap: wrap;
 }
 
 .filterGroup {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 3px;
+  min-width: 0;
+}
+
+.filterGroupGrow {
+  flex: 1;
+  min-width: 140px;
 }
 
 .filterLabel {
@@ -49,12 +33,12 @@
   background: var(--bg-base);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
-  padding: 5px 8px;
+  padding: 6px 10px;
   color: var(--text-primary);
-  font-size: 11px;
-  outline: none;
-  transition: border-color 0.2s;
+  font-size: 12px;
   font-family: var(--font-body);
+  outline: none;
+  transition: border-color 0.15s;
 }
 
 .filterInput:focus {
@@ -69,41 +53,98 @@
   background: var(--bg-base);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
-  padding: 5px 8px;
+  padding: 6px 10px;
   color: var(--text-primary);
-  font-size: 11px;
+  font-size: 12px;
+  font-family: var(--font-body);
   outline: none;
   cursor: pointer;
-  font-family: var(--font-body);
 }
 
-/* ─── Event Row Styles ─── */
-.eventTimestamp {
-  font-family: var(--font-mono);
+/* ─── Table Area ─── */
+.tableArea {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.table th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  text-align: left;
+  padding: 10px 14px;
   font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
   color: var(--text-muted);
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border);
   white-space: nowrap;
 }
 
-.eventAction {
-  color: var(--text-muted);
-  font-size: 11px;
+.thTimestamp {
+  width: 170px;
 }
 
-.eventCompact {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
+.thResult {
+  width: 90px;
+}
+
+.table td {
+  padding: 8px 14px;
   color: var(--text-secondary);
-  margin-top: 1px;
+  border-bottom: 1px solid var(--border-subtle);
+  vertical-align: middle;
+}
+
+/* ─── Event Rows ─── */
+.eventRow {
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.eventRow:hover {
+  background: var(--bg-hover);
+}
+
+.eventRowExpanded {
+  background: var(--bg-hover);
+}
+
+.cellTimestamp {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  white-space: nowrap;
+  color: var(--text-muted);
+}
+
+.cellUser {
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.cellTarget {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* ─── Badges ─── */
 .categoryBadge {
   display: inline-block;
   padding: 2px 8px;
-  border-radius: 99px;
+  border-radius: 4px;
   font-size: 10px;
   font-weight: 600;
   text-transform: uppercase;
@@ -116,23 +157,64 @@
 .resultBadge {
   display: inline-block;
   padding: 2px 8px;
-  border-radius: 99px;
+  border-radius: 4px;
   font-size: 10px;
   font-weight: 600;
   text-transform: uppercase;
+  letter-spacing: 0.3px;
 }
 
 .resultSuccess {
-  background: rgba(34, 197, 94, 0.1);
-  color: #22c55e;
+  background: rgba(16, 185, 129, 0.12);
+  color: var(--green);
 }
 
 .resultFailure {
-  background: rgba(239, 68, 68, 0.1);
-  color: #ef4444;
+  background: rgba(244, 63, 94, 0.12);
+  color: var(--rose);
+}
+
+/* ─── Expanded Detail Row ─── */
+.detailRow td {
+  padding: 0 14px 14px;
+  background: var(--bg-hover);
+  border-bottom: 1px solid var(--border);
+}
+
+.detailContent {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.detailMeta {
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+
+.detailField {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.detailLabel {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.detailValue {
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  word-break: break-all;
 }
 
-/* ─── Detail JSON ─── */
 .detailJson {
   margin: 0;
   padding: 12px;
@@ -147,9 +229,64 @@
   word-break: break-word;
 }
 
-/* ─── Mono ─── */
-.mono {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  white-space: nowrap;
+/* ─── Pagination ─── */
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 10px 20px;
+  border-top: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.pageBtn {
+  padding: 5px 12px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--bg-raised);
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-family: var(--font-body);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.pageBtn:hover:not(:disabled) {
+  border-color: var(--amber-dim);
+  color: var(--text-primary);
+}
+
+.pageBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.pageInfo {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+}
+
+/* ─── Empty State ─── */
+.emptyState {
+  text-align: center;
+  padding: 48px 16px;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+@media (max-width: 768px) {
+  .filterBar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .filterGroupGrow {
+    min-width: unset;
+  }
+
+  .cellTarget {
+    max-width: 120px;
+  }
 }
diff --git a/ui/src/pages/admin/AuditLogPage.tsx b/ui/src/pages/admin/AuditLogPage.tsx
index d704f73a..6a27c999 100644
--- a/ui/src/pages/admin/AuditLogPage.tsx
+++ b/ui/src/pages/admin/AuditLogPage.tsx
@@ -37,8 +37,7 @@ function AuditLogContent() {
   const [category, setCategory] = useState('');
   const [search, setSearch] = useState('');
   const [page, setPage] = useState(0);
-  const [selectedEventId, setSelectedEventId] = useState<number | null>(null);
-  const [filtersVisible, setFiltersVisible] = useState(true);
+  const [expandedRow, setExpandedRow] = useState<number | null>(null);
   const pageSize = 25;
 
   const params: AuditLogParams = {
@@ -57,233 +56,210 @@ function AuditLogContent() {
   const showingFrom = data && data.totalCount > 0 ? page * pageSize + 1 : 0;
   const showingTo = data ? Math.min((page + 1) * pageSize, data.totalCount) : 0;
 
-  const selectedEvent = data?.items.find((e) => e.id === selectedEventId) ?? null;
-
   return (
     <div className={layout.page}>
+      {/* Header */}
       <div className={layout.panelHeader}>
         <div>
           <div className={layout.panelTitle}>Audit Log</div>
-          {data && (
-            <div className={layout.panelSubtitle}>
-              {data.totalCount.toLocaleString()} events
-            </div>
-          )}
+          <div className={layout.panelSubtitle}>
+            {data
+              ? `${data.totalCount.toLocaleString()} events`
+              : 'Loading...'}
+          </div>
         </div>
       </div>
 
-      <div className={layout.split}>
-        {/* Left pane — event list */}
-        <div className={layout.listPane}>
-          {/* Collapsible filter bar */}
-          <div style={{ flexShrink: 0 }}>
-            <button
-              type="button"
-              className={styles.filterToggle}
-              onClick={() => setFiltersVisible((v) => !v)}
-            >
-              {filtersVisible ? 'Hide Filters' : 'Show Filters'}
-            </button>
-            <div
-              className={`${styles.filters} ${!filtersVisible ? styles.filtersCollapsed : ''}`}
-            >
-              <div className={styles.filterGroup}>
-                <label className={styles.filterLabel}>From</label>
-                <input
-                  type="date"
-                  className={styles.filterInput}
-                  value={from}
-                  onChange={(e) => { setFrom(e.target.value); setPage(0); }}
-                />
-              </div>
-              <div className={styles.filterGroup}>
-                <label className={styles.filterLabel}>To</label>
-                <input
-                  type="date"
-                  className={styles.filterInput}
-                  value={to}
-                  onChange={(e) => { setTo(e.target.value); setPage(0); }}
-                />
-              </div>
-              <div className={styles.filterGroup}>
-                <label className={styles.filterLabel}>User</label>
-                <input
-                  type="text"
-                  className={styles.filterInput}
-                  placeholder="Username..."
-                  value={username}
-                  onChange={(e) => { setUsername(e.target.value); setPage(0); }}
-                />
-              </div>
-              <div className={styles.filterGroup}>
-                <label className={styles.filterLabel}>Category</label>
-                <select
-                  className={styles.filterSelect}
-                  value={category}
-                  onChange={(e) => { setCategory(e.target.value); setPage(0); }}
-                >
-                  <option value="">All</option>
-                  <option value="INFRA">INFRA</option>
-                  <option value="AUTH">AUTH</option>
-                  <option value="USER_MGMT">USER_MGMT</option>
-                  <option value="CONFIG">CONFIG</option>
-                </select>
-              </div>
-              <div className={styles.filterGroup}>
-                <label className={styles.filterLabel}>Search</label>
-                <input
-                  type="text"
-                  className={styles.filterInput}
-                  placeholder="Search..."
-                  value={search}
-                  onChange={(e) => { setSearch(e.target.value); setPage(0); }}
-                />
-              </div>
-            </div>
-          </div>
+      {/* Filter bar */}
+      <div className={styles.filterBar}>
+        <div className={styles.filterGroup}>
+          <label className={styles.filterLabel}>From</label>
+          <input
+            type="date"
+            className={styles.filterInput}
+            value={from}
+            onChange={(e) => { setFrom(e.target.value); setPage(0); }}
+          />
+        </div>
+        <div className={styles.filterGroup}>
+          <label className={styles.filterLabel}>To</label>
+          <input
+            type="date"
+            className={styles.filterInput}
+            value={to}
+            onChange={(e) => { setTo(e.target.value); setPage(0); }}
+          />
+        </div>
+        <div className={styles.filterGroup}>
+          <label className={styles.filterLabel}>User</label>
+          <input
+            type="text"
+            className={styles.filterInput}
+            placeholder="Username..."
+            value={username}
+            onChange={(e) => { setUsername(e.target.value); setPage(0); }}
+          />
+        </div>
+        <div className={styles.filterGroup}>
+          <label className={styles.filterLabel}>Category</label>
+          <select
+            className={styles.filterSelect}
+            value={category}
+            onChange={(e) => { setCategory(e.target.value); setPage(0); }}
+          >
+            <option value="">All</option>
+            <option value="INFRA">INFRA</option>
+            <option value="AUTH">AUTH</option>
+            <option value="USER_MGMT">USER_MGMT</option>
+            <option value="CONFIG">CONFIG</option>
+          </select>
+        </div>
+        <div className={`${styles.filterGroup} ${styles.filterGroupGrow}`}>
+          <label className={styles.filterLabel}>Search</label>
+          <input
+            type="text"
+            className={styles.filterInput}
+            placeholder="Search actions, targets..."
+            value={search}
+            onChange={(e) => { setSearch(e.target.value); setPage(0); }}
+          />
+        </div>
+      </div>
 
-          {/* Event list */}
-          <div className={layout.entityList}>
-            {audit.isLoading ? (
-              <div className={layout.loading}>Loading...</div>
-            ) : !data || data.items.length === 0 ? (
-              <div className={layout.loading}>No events found.</div>
-            ) : (
-              data.items.map((event) => (
-                <div
+      {/* Table area */}
+      <div className={styles.tableArea}>
+        {audit.isLoading ? (
+          <div className={layout.loading}>Loading...</div>
+        ) : !data || data.items.length === 0 ? (
+          <div className={styles.emptyState}>
+            No audit events found for the selected filters.
+          </div>
+        ) : (
+          <table className={styles.table}>
+            <thead>
+              <tr>
+                <th className={styles.thTimestamp}>Timestamp</th>
+                <th>User</th>
+                <th>Category</th>
+                <th>Action</th>
+                <th>Target</th>
+                <th className={styles.thResult}>Result</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.items.map((event) => (
+                <EventRow
                   key={event.id}
-                  className={`${layout.entityItem} ${
-                    selectedEventId === event.id ? layout.entityItemSelected : ''
-                  }`}
-                  onClick={() => setSelectedEventId(event.id)}
-                >
-                  <div className={layout.entityInfo}>
-                    <div className={styles.eventTimestamp}>
-                      {formatTimestamp(event.timestamp)}
-                    </div>
-                    <div className={styles.eventCompact}>
-                      <span>{event.username}</span>
-                      <span className={styles.eventAction}>{event.action}</span>
-                    </div>
-                    <div className={styles.eventCompact}>
-                      <span
-                        className={`${styles.resultBadge} ${
-                          event.result === 'SUCCESS'
-                            ? styles.resultSuccess
-                            : styles.resultFailure
-                        }`}
-                      >
-                        {event.result}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              ))
-            )}
-          </div>
-
-          {/* Pagination */}
-          {data && data.totalCount > 0 && (
-            <div className={layout.pagination}>
-              <button
-                type="button"
-                className={layout.pageBtn}
-                disabled={page === 0}
-                onClick={() => setPage((p) => p - 1)}
-              >
-                Previous
-              </button>
-              <span className={layout.pageInfo}>
-                {showingFrom}-{showingTo} of {data.totalCount.toLocaleString()}
-              </span>
-              <button
-                type="button"
-                className={layout.pageBtn}
-                disabled={page >= totalPages - 1}
-                onClick={() => setPage((p) => p + 1)}
-              >
-                Next
-              </button>
-            </div>
-          )}
-        </div>
-
-        {/* Right pane — detail view */}
-        <div className={layout.detailPane}>
-          {!selectedEvent ? (
-            <div className={layout.detailEmpty}>
-              Select an event to view details
-            </div>
-          ) : (
-            <>
-              <div className={layout.detailSection}>
-                <div className={layout.detailSectionTitle}>Event Info</div>
-                <div className={layout.fieldRow}>
-                  <span className={layout.fieldLabel}>Timestamp</span>
-                  <span className={`${layout.fieldVal} ${styles.mono}`}>
-                    {formatTimestamp(selectedEvent.timestamp)}
-                  </span>
-                </div>
-                <div className={layout.fieldRow}>
-                  <span className={layout.fieldLabel}>User</span>
-                  <span className={layout.fieldVal}>{selectedEvent.username}</span>
-                </div>
-                <div className={layout.fieldRow}>
-                  <span className={layout.fieldLabel}>Category</span>
-                  <span className={layout.fieldVal}>
-                    <span className={styles.categoryBadge}>{selectedEvent.category}</span>
-                  </span>
-                </div>
-                <div className={layout.fieldRow}>
-                  <span className={layout.fieldLabel}>Action</span>
-                  <span className={layout.fieldVal}>{selectedEvent.action}</span>
-                </div>
-                <div className={layout.fieldRow}>
-                  <span className={layout.fieldLabel}>Target</span>
-                  <span className={`${layout.fieldVal} ${styles.mono}`}>
-                    {selectedEvent.target}
-                  </span>
-                </div>
-                <div className={layout.fieldRow}>
-                  <span className={layout.fieldLabel}>Result</span>
-                  <span className={layout.fieldVal}>
-                    <span
-                      className={`${styles.resultBadge} ${
-                        selectedEvent.result === 'SUCCESS'
-                          ? styles.resultSuccess
-                          : styles.resultFailure
-                      }`}
-                    >
-                      {selectedEvent.result}
-                    </span>
-                  </span>
-                </div>
-                <div className={layout.fieldRow}>
-                  <span className={layout.fieldLabel}>IP Address</span>
-                  <span className={`${layout.fieldVal} ${styles.mono}`}>
-                    {selectedEvent.ipAddress}
-                  </span>
-                </div>
-                <div className={layout.fieldRow}>
-                  <span className={layout.fieldLabel}>User Agent</span>
-                  <span className={layout.fieldVal}>{selectedEvent.userAgent}</span>
-                </div>
-              </div>
-
-              <div className={layout.detailSection}>
-                <div className={layout.detailSectionTitle}>Detail Payload</div>
-                <pre className={styles.detailJson}>
-                  {JSON.stringify(selectedEvent.detail, null, 2)}
-                </pre>
-              </div>
-            </>
-          )}
-        </div>
+                  event={event}
+                  isExpanded={expandedRow === event.id}
+                  onToggle={() =>
+                    setExpandedRow((prev) => (prev === event.id ? null : event.id))
+                  }
+                />
+              ))}
+            </tbody>
+          </table>
+        )}
       </div>
+
+      {/* Pagination */}
+      {data && data.totalCount > 0 && (
+        <div className={styles.pagination}>
+          <button
+            type="button"
+            className={styles.pageBtn}
+            disabled={page === 0}
+            onClick={() => setPage((p) => p - 1)}
+          >
+            Previous
+          </button>
+          <span className={styles.pageInfo}>
+            {showingFrom}--{showingTo} of {data.totalCount.toLocaleString()}
+          </span>
+          <button
+            type="button"
+            className={styles.pageBtn}
+            disabled={page >= totalPages - 1}
+            onClick={() => setPage((p) => p + 1)}
+          >
+            Next
+          </button>
+        </div>
+      )}
     </div>
   );
 }
 
+function EventRow({
+  event,
+  isExpanded,
+  onToggle,
+}: {
+  event: {
+    id: number;
+    timestamp: string;
+    username: string;
+    category: string;
+    action: string;
+    target: string;
+    result: string;
+    detail: Record<string, unknown>;
+    ipAddress: string;
+    userAgent: string;
+  };
+  isExpanded: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <>
+      <tr
+        className={`${styles.eventRow} ${isExpanded ? styles.eventRowExpanded : ''}`}
+        onClick={onToggle}
+      >
+        <td className={styles.cellTimestamp}>{formatTimestamp(event.timestamp)}</td>
+        <td className={styles.cellUser}>{event.username}</td>
+        <td>
+          <span className={styles.categoryBadge}>{event.category}</span>
+        </td>
+        <td>{event.action}</td>
+        <td className={styles.cellTarget}>{event.target}</td>
+        <td>
+          <span
+            className={`${styles.resultBadge} ${
+              event.result === 'SUCCESS' ? styles.resultSuccess : styles.resultFailure
+            }`}
+          >
+            {event.result}
+          </span>
+        </td>
+      </tr>
+      {isExpanded && (
+        <tr className={styles.detailRow}>
+          <td colSpan={6}>
+            <div className={styles.detailContent}>
+              <div className={styles.detailMeta}>
+                <div className={styles.detailField}>
+                  <span className={styles.detailLabel}>IP Address</span>
+                  <span className={styles.detailValue}>{event.ipAddress}</span>
+                </div>
+                <div className={styles.detailField}>
+                  <span className={styles.detailLabel}>User Agent</span>
+                  <span className={styles.detailValue}>{event.userAgent}</span>
+                </div>
+              </div>
+              {event.detail && Object.keys(event.detail).length > 0 && (
+                <pre className={styles.detailJson}>
+                  {JSON.stringify(event.detail, null, 2)}
+                </pre>
+              )}
+            </div>
+          </td>
+        </tr>
+      )}
+    </>
+  );
+}
+
 function formatTimestamp(iso: string): string {
   try {
     const d = new Date(iso);