From 926c26b1ad8c730a840d11f02e2fe55f7a671e24 Mon Sep 17 00:00:00 2001
From: chan <b24028@hanmaceng.co.kr>
Date: Thu, 19 Mar 2026 13:15:50 +0900
Subject: [PATCH] feat: apply sticky header and inner scroll to audit logs page

---
 .../src/features/audit/AuditLogsPage.tsx      | 794 +++++++++---------
 1 file changed, 403 insertions(+), 391 deletions(-)

diff --git a/adminfront/src/features/audit/AuditLogsPage.tsx b/adminfront/src/features/audit/AuditLogsPage.tsx
index a10c5675..0e90b4b1 100644
--- a/adminfront/src/features/audit/AuditLogsPage.tsx
+++ b/adminfront/src/features/audit/AuditLogsPage.tsx
@@ -158,8 +158,8 @@ function AuditLogsPage() {
   }
 
   return (
-    <div className="space-y-8">
-      <header className="flex flex-wrap items-start justify-between gap-4">
+    <div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
+      <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0">
         <div>
           <div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
             <span>{t("ui.admin.audit.breadcrumb.section", "Audit")}</span>
@@ -194,409 +194,421 @@ function AuditLogsPage() {
         </div>
       </header>
 
-      <div className="space-y-4">
-        <Card className="glass-panel">
-          <CardHeader className="flex flex-row items-center justify-between">
-            <div>
-              <CardTitle>
-                {t("ui.admin.audit.registry.title", "Audit registry")}
-              </CardTitle>
-              <CardDescription>
-                {t(
-                  "msg.admin.audit.registry.count",
-                  "로드된 로그 {{count}}건",
-                  { count: logs.length },
+      <Card className="glass-panel flex-1 flex flex-col min-h-0 overflow-hidden">
+        <CardHeader className="flex flex-row items-center justify-between flex-shrink-0">
+          <div>
+            <CardTitle>
+              {t("ui.admin.audit.registry.title", "Audit registry")}
+            </CardTitle>
+            <CardDescription>
+              {t("msg.admin.audit.registry.count", "로드된 로그 {{count}}건", {
+                count: logs.length,
+              })}
+            </CardDescription>
+          </div>
+          <Badge variant="muted">
+            {t("ui.common.badge.command_only", "Command only")}
+          </Badge>
+        </CardHeader>
+        <CardContent className="flex-1 flex flex-col min-h-0 pt-0">
+          <div className="mb-4 flex flex-wrap items-center gap-2 flex-shrink-0">
+            <div className="flex flex-1 items-center gap-2 rounded-full border border-[var(--color-border)] bg-[rgba(255,255,255,0.02)] px-4 py-2 text-[var(--color-muted)]">
+              <Search size={14} />
+              <input
+                value={filterDraft}
+                onChange={(event) => setFilterDraft(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    handleAddFilter();
+                  }
+                }}
+                placeholder={t(
+                  "ui.admin.audit.filters.placeholder",
+                  "필터 추가 (예: status:failure)",
                 )}
-              </CardDescription>
+                className="w-full bg-transparent text-sm text-foreground outline-none"
+              />
+              <Button size="sm" variant="outline" onClick={handleAddFilter}>
+                {t("ui.common.add", "추가")}
+              </Button>
             </div>
-            <Badge variant="muted">
-              {t("ui.common.badge.command_only", "Command only")}
-            </Badge>
-          </CardHeader>
-          <CardContent>
-            <div className="mb-4 flex flex-wrap items-center gap-2">
-              <div className="flex flex-1 items-center gap-2 rounded-full border border-[var(--color-border)] bg-[rgba(255,255,255,0.02)] px-4 py-2 text-[var(--color-muted)]">
-                <Search size={14} />
-                <input
-                  value={filterDraft}
-                  onChange={(event) => setFilterDraft(event.target.value)}
-                  onKeyDown={(event) => {
-                    if (event.key === "Enter") {
-                      handleAddFilter();
+            {filters.length === 0 ? (
+              <span className="text-xs text-[var(--color-muted)]">
+                {t("msg.admin.audit.filters.empty", "필터 없음")}
+              </span>
+            ) : (
+              filters.map((filter) => (
+                <span
+                  key={filter}
+                  className="inline-flex items-center gap-2 rounded-full border border-[var(--color-border)] bg-[rgba(255,255,255,0.04)] px-3 py-1 text-xs text-[var(--color-muted)]"
+                >
+                  <Terminal size={12} />
+                  {filter}
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setFilters((prev) =>
+                        prev.filter((item) => item !== filter),
+                      )
                     }
-                  }}
-                  placeholder={t(
-                    "ui.admin.audit.filters.placeholder",
-                    "필터 추가 (예: status:failure)",
-                  )}
-                  className="w-full bg-transparent text-sm text-foreground outline-none"
-                />
-                <Button size="sm" variant="outline" onClick={handleAddFilter}>
-                  {t("ui.common.add", "추가")}
-                </Button>
-              </div>
-              {filters.length === 0 ? (
-                <span className="text-xs text-[var(--color-muted)]">
-                  {t("msg.admin.audit.filters.empty", "필터 없음")}
-                </span>
-              ) : (
-                filters.map((filter) => (
-                  <span
-                    key={filter}
-                    className="inline-flex items-center gap-2 rounded-full border border-[var(--color-border)] bg-[rgba(255,255,255,0.04)] px-3 py-1 text-xs text-[var(--color-muted)]"
+                    className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-[var(--color-border)] text-[10px] text-[var(--color-muted)]"
+                    aria-label={t(
+                      "ui.admin.audit.filters.remove",
+                      "{{filter}} 필터 제거",
+                      { filter },
+                    )}
                   >
-                    <Terminal size={12} />
-                    {filter}
-                    <button
-                      type="button"
-                      onClick={() =>
-                        setFilters((prev) =>
-                          prev.filter((item) => item !== filter),
-                        )
-                      }
-                      className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-[var(--color-border)] text-[10px] text-[var(--color-muted)]"
-                      aria-label={t(
-                        "ui.admin.audit.filters.remove",
-                        "{{filter}} 필터 제거",
-                        { filter },
-                      )}
-                    >
-                      ×
-                    </button>
-                  </span>
-                ))
-              )}
-            </div>
-            <Table className="table-fixed">
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="w-[140px]">
-                    {t("ui.admin.audit.table.time", "TIME")}
-                  </TableHead>
-                  <TableHead className="w-[160px]">
-                    {t("ui.admin.audit.table.actor", "ACTOR (ID)")}
-                  </TableHead>
-                  <TableHead>
-                    {t("ui.admin.audit.table.request", "REQUEST")}
-                  </TableHead>
-                  <TableHead>
-                    {t("ui.admin.audit.table.path", "PATH")}
-                  </TableHead>
-                  <TableHead className="w-[120px]">
-                    {t("ui.admin.audit.table.status", "STATUS")}
-                  </TableHead>
-                  <TableHead>
-                    {t("ui.admin.audit.table.action_target", "Action / Target")}
-                  </TableHead>
-                  <TableHead className="w-[80px]" />
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {isLoading && (
+                    ×
+                  </button>
+                </span>
+              ))
+            )}
+          </div>
+          <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
+            <div className="flex-1 overflow-auto relative custom-scrollbar">
+              <Table className="table-fixed">
+                <TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm">
                   <TableRow>
-                    <TableCell colSpan={7}>
-                      {t("msg.common.loading", "로딩 중...")}
-                    </TableCell>
-                  </TableRow>
-                )}
-                {!isLoading && logs.length === 0 && (
-                  <TableRow>
-                    <TableCell colSpan={7}>
+                    <TableHead className="w-[140px]">
+                      {t("ui.admin.audit.table.time", "TIME")}
+                    </TableHead>
+                    <TableHead className="w-[160px]">
+                      {t("ui.admin.audit.table.actor", "ACTOR (ID)")}
+                    </TableHead>
+                    <TableHead>
+                      {t("ui.admin.audit.table.request", "REQUEST")}
+                    </TableHead>
+                    <TableHead>
+                      {t("ui.admin.audit.table.path", "PATH")}
+                    </TableHead>
+                    <TableHead className="w-[120px]">
+                      {t("ui.admin.audit.table.status", "STATUS")}
+                    </TableHead>
+                    <TableHead>
                       {t(
-                        "msg.admin.audit.empty",
-                        "아직 수집된 감사 로그가 없습니다.",
+                        "ui.admin.audit.table.action_target",
+                        "Action / Target",
                       )}
-                    </TableCell>
+                    </TableHead>
+                    <TableHead className="w-[80px]" />
                   </TableRow>
-                )}
-                {logs.map((row, index) => {
-                  const details = parseDetails(row.details);
-                  const actionLabel =
-                    details.action ||
-                    (details.method && details.path
-                      ? `${details.method} ${details.path}`
-                      : row.event_type);
-                  const rowKey = `${row.event_id}-${row.timestamp}-${index}`;
-                  const isExpanded = Boolean(expandedRows[rowKey]);
-                  return (
-                    <React.Fragment key={rowKey}>
-                      <TableRow className="bg-card/40">
-                        <TableCell className="text-xs text-[var(--color-muted)]">
-                          {(() => {
-                            const { date, time } = formatIsoDateTime(
-                              row.timestamp,
-                            );
-                            return (
-                              <div className="space-y-1">
-                                <div>{date}</div>
-                                <div>{time}</div>
-                              </div>
-                            );
-                          })()}
-                        </TableCell>
-                        <TableCell>
-                          <div className="flex items-center gap-2">
-                            <code className="rounded-md bg-secondary/60 px-2 py-1 text-xs text-muted-foreground">
-                              {row.user_id || details.actor_id || "-"}
-                            </code>
-                            {(row.user_id || details.actor_id) && (
-                              <Button
-                                variant="ghost"
-                                size="icon"
-                                className="h-7 w-7 text-muted-foreground hover:text-primary"
-                                aria-label={t(
-                                  "ui.admin.audit.copy.actor_id",
-                                  "Copy actor id",
-                                )}
-                                onClick={() =>
-                                  handleCopy(
-                                    row.user_id || details.actor_id || "",
-                                  )
-                                }
-                              >
-                                <Copy className="h-3 w-3" />
-                              </Button>
-                            )}
-                          </div>
-                        </TableCell>
-                        <TableCell className="text-xs text-[var(--color-muted)]">
-                          <div className="flex items-start gap-2">
-                            <span className="break-all">
-                              {formatCellValue(details.request_id)}
-                            </span>
-                            {details.request_id && (
-                              <Button
-                                variant="ghost"
-                                size="icon"
-                                className="h-7 w-7 text-muted-foreground hover:text-primary"
-                                aria-label={t(
-                                  "ui.admin.audit.copy.request_id",
-                                  "Copy request id",
-                                )}
-                                onClick={() =>
-                                  handleCopy(details.request_id || "")
-                                }
-                              >
-                                <Copy className="h-3 w-3" />
-                              </Button>
-                            )}
-                          </div>
-                        </TableCell>
-                        <TableCell className="text-xs text-[var(--color-muted)]">
-                          <div className="font-semibold text-foreground">
-                            {formatCellValue(details.method)}
-                          </div>
-                          <div className="break-all">
-                            {formatCellValue(details.path)}
-                          </div>
-                        </TableCell>
-                        <TableCell>
-                          <Badge
-                            variant={
-                              row.status === "success" || row.status === "ok"
-                                ? "success"
-                                : "warning"
-                            }
-                          >
-                            {row.status}
-                          </Badge>
-                        </TableCell>
-                        <TableCell className="text-xs text-[var(--color-muted)]">
-                          <div className="font-semibold text-foreground">
-                            {actionLabel}
-                          </div>
-                          {details.target && (
+                </TableHeader>
+                <TableBody>
+                  {isLoading && (
+                    <TableRow>
+                      <TableCell colSpan={7}>
+                        {t("msg.common.loading", "로딩 중...")}
+                      </TableCell>
+                    </TableRow>
+                  )}
+                  {!isLoading && logs.length === 0 && (
+                    <TableRow>
+                      <TableCell colSpan={7}>
+                        {t(
+                          "msg.admin.audit.empty",
+                          "아직 수집된 감사 로그가 없습니다.",
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  )}
+                  {logs.map((row, index) => {
+                    const details = parseDetails(row.details);
+                    const actionLabel =
+                      details.action ||
+                      (details.method && details.path
+                        ? `${details.method} ${details.path}`
+                        : row.event_type);
+                    const rowKey = `${row.event_id}-${row.timestamp}-${index}`;
+                    const isExpanded = Boolean(expandedRows[rowKey]);
+                    return (
+                      <React.Fragment key={rowKey}>
+                        <TableRow className="bg-card/40">
+                          <TableCell className="text-xs text-[var(--color-muted)]">
+                            {(() => {
+                              const { date, time } = formatIsoDateTime(
+                                row.timestamp,
+                              );
+                              return (
+                                <div className="space-y-1">
+                                  <div>{date}</div>
+                                  <div>{time}</div>
+                                </div>
+                              );
+                            })()}
+                          </TableCell>
+                          <TableCell>
                             <div className="flex items-center gap-2">
-                              <span className="break-all">
-                                {t(
-                                  "ui.admin.audit.target",
-                                  "Target · {{target}}",
-                                  {
-                                    target: details.target,
-                                  },
-                                )}
-                              </span>
-                              <Button
-                                variant="ghost"
-                                size="icon"
-                                className="h-7 w-7 text-muted-foreground hover:text-primary"
-                                aria-label={t(
-                                  "ui.admin.audit.copy.target",
-                                  "Copy target",
-                                )}
-                                onClick={() => handleCopy(details.target || "")}
-                              >
-                                <Copy className="h-3 w-3" />
-                              </Button>
-                            </div>
-                          )}
-                        </TableCell>
-                        <TableCell className="text-right">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() =>
-                              setExpandedRows((prev) => ({
-                                ...prev,
-                                [rowKey]: !isExpanded,
-                              }))
-                            }
-                          >
-                            {isExpanded ? (
-                              <ChevronUp className="h-4 w-4" />
-                            ) : (
-                              <ChevronDown className="h-4 w-4" />
-                            )}
-                          </Button>
-                        </TableCell>
-                      </TableRow>
-                      {isExpanded && (
-                        <TableRow className="bg-card/20">
-                          <TableCell colSpan={7} className="text-xs">
-                            <div className="grid gap-4 text-[var(--color-muted)] md:grid-cols-3">
-                              <div className="space-y-1">
-                                <div className="uppercase tracking-[0.16em]">
-                                  {t(
-                                    "ui.admin.audit.details.request",
-                                    "Request",
+                              <code className="rounded-md bg-secondary/60 px-2 py-1 text-xs text-muted-foreground">
+                                {row.user_id || details.actor_id || "-"}
+                              </code>
+                              {(row.user_id || details.actor_id) && (
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-7 w-7 text-muted-foreground hover:text-primary"
+                                  aria-label={t(
+                                    "ui.admin.audit.copy.actor_id",
+                                    "Copy actor id",
                                   )}
-                                </div>
-                                <div className="break-all">
-                                  {t(
-                                    "ui.admin.audit.details.request_id",
-                                    "Request ID · {{value}}",
-                                    {
-                                      value: formatCellValue(
-                                        details.request_id,
-                                      ),
-                                    },
-                                  )}
-                                </div>
-                                <div className="break-all">
-                                  {t(
-                                    "ui.admin.audit.details.event_id",
-                                    "Event ID · {{value}}",
-                                    {
-                                      value: formatCellValue(row.event_id),
-                                    },
-                                  )}
-                                </div>
-                                <div>
-                                  {t(
-                                    "ui.admin.audit.details.ip",
-                                    "IP · {{value}}",
-                                    {
-                                      value: formatCellValue(row.ip_address),
-                                    },
-                                  )}
-                                </div>
-                                <div>
-                                  {t(
-                                    "ui.admin.audit.details.latency",
-                                    "Latency · {{value}}",
-                                    {
-                                      value:
-                                        details.latency_ms !== undefined
-                                          ? `${details.latency_ms}ms`
-                                          : "-",
-                                    },
-                                  )}
-                                </div>
-                              </div>
-                              <div className="space-y-1">
-                                <div className="uppercase tracking-[0.16em]">
-                                  {t("ui.admin.audit.details.actor", "Actor")}
-                                </div>
-                                <div>
-                                  {t(
-                                    "ui.admin.audit.details.actor_id",
-                                    "Actor ID · {{value}}",
-                                    {
-                                      value:
-                                        row.user_id || details.actor_id || "-",
-                                    },
-                                  )}
-                                </div>
-                                <div>
-                                  {t(
-                                    "ui.admin.audit.details.tenant",
-                                    "Tenant · {{value}}",
-                                    {
-                                      value: formatCellValue(details.tenant_id),
-                                    },
-                                  )}
-                                </div>
-                                <div>
-                                  {t(
-                                    "ui.admin.audit.details.device",
-                                    "Device · {{value}}",
-                                    {
-                                      value: formatCellValue(row.device_id),
-                                    },
-                                  )}
-                                </div>
-                              </div>
-                              <div className="space-y-1">
-                                <div className="uppercase tracking-[0.16em]">
-                                  {t("ui.admin.audit.details.result", "Result")}
-                                </div>
-                                <div className="break-all">
-                                  {t(
-                                    "ui.admin.audit.details.error",
-                                    "Error · {{value}}",
-                                    {
-                                      value: formatCellValue(details.error),
-                                    },
-                                  )}
-                                </div>
-                                <div className="break-all">
-                                  {t(
-                                    "ui.admin.audit.details.before",
-                                    "Before · {{value}}",
-                                    {
-                                      value: formatCellValue(details.before),
-                                    },
-                                  )}
-                                </div>
-                                <div className="break-all">
-                                  {t(
-                                    "ui.admin.audit.details.after",
-                                    "After · {{value}}",
-                                    {
-                                      value: formatCellValue(details.after),
-                                    },
-                                  )}
-                                </div>
-                              </div>
+                                  onClick={() =>
+                                    handleCopy(
+                                      row.user_id || details.actor_id || "",
+                                    )
+                                  }
+                                >
+                                  <Copy className="h-3 w-3" />
+                                </Button>
+                              )}
                             </div>
                           </TableCell>
+                          <TableCell className="text-xs text-[var(--color-muted)]">
+                            <div className="flex items-start gap-2">
+                              <span className="break-all">
+                                {formatCellValue(details.request_id)}
+                              </span>
+                              {details.request_id && (
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-7 w-7 text-muted-foreground hover:text-primary"
+                                  aria-label={t(
+                                    "ui.admin.audit.copy.request_id",
+                                    "Copy request id",
+                                  )}
+                                  onClick={() =>
+                                    handleCopy(details.request_id || "")
+                                  }
+                                >
+                                  <Copy className="h-3 w-3" />
+                                </Button>
+                              )}
+                            </div>
+                          </TableCell>
+                          <TableCell className="text-xs text-[var(--color-muted)]">
+                            <div className="font-semibold text-foreground">
+                              {formatCellValue(details.method)}
+                            </div>
+                            <div className="break-all">
+                              {formatCellValue(details.path)}
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <Badge
+                              variant={
+                                row.status === "success" || row.status === "ok"
+                                  ? "success"
+                                  : "warning"
+                              }
+                            >
+                              {row.status}
+                            </Badge>
+                          </TableCell>
+                          <TableCell className="text-xs text-[var(--color-muted)]">
+                            <div className="font-semibold text-foreground">
+                              {actionLabel}
+                            </div>
+                            {details.target && (
+                              <div className="flex items-center gap-2">
+                                <span className="break-all">
+                                  {t(
+                                    "ui.admin.audit.target",
+                                    "Target · {{target}}",
+                                    {
+                                      target: details.target,
+                                    },
+                                  )}
+                                </span>
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-7 w-7 text-muted-foreground hover:text-primary"
+                                  aria-label={t(
+                                    "ui.admin.audit.copy.target",
+                                    "Copy target",
+                                  )}
+                                  onClick={() =>
+                                    handleCopy(details.target || "")
+                                  }
+                                >
+                                  <Copy className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            )}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() =>
+                                setExpandedRows((prev) => ({
+                                  ...prev,
+                                  [rowKey]: !isExpanded,
+                                }))
+                              }
+                            >
+                              {isExpanded ? (
+                                <ChevronUp className="h-4 w-4" />
+                              ) : (
+                                <ChevronDown className="h-4 w-4" />
+                              )}
+                            </Button>
+                          </TableCell>
                         </TableRow>
-                      )}
-                    </React.Fragment>
-                  );
-                })}
-              </TableBody>
-            </Table>
-            <div className="pt-4 text-center">
-              {hasNextPage ? (
-                <Button
-                  variant="outline"
-                  onClick={() => fetchNextPage()}
-                  disabled={isFetchingNextPage}
-                >
-                  {isFetchingNextPage
-                    ? t("msg.common.loading", "Loading...")
-                    : t("ui.admin.audit.load_more", "Load more")}
-                </Button>
-              ) : (
-                <span className="text-xs text-[var(--color-muted)]">
-                  {t("msg.admin.audit.end", "End of audit feed")}
-                </span>
-              )}
+                        {isExpanded && (
+                          <TableRow className="bg-card/20">
+                            <TableCell colSpan={7} className="text-xs">
+                              <div className="grid gap-4 text-[var(--color-muted)] md:grid-cols-3">
+                                <div className="space-y-1">
+                                  <div className="uppercase tracking-[0.16em]">
+                                    {t(
+                                      "ui.admin.audit.details.request",
+                                      "Request",
+                                    )}
+                                  </div>
+                                  <div className="break-all">
+                                    {t(
+                                      "ui.admin.audit.details.request_id",
+                                      "Request ID · {{value}}",
+                                      {
+                                        value: formatCellValue(
+                                          details.request_id,
+                                        ),
+                                      },
+                                    )}
+                                  </div>
+                                  <div className="break-all">
+                                    {t(
+                                      "ui.admin.audit.details.event_id",
+                                      "Event ID · {{value}}",
+                                      {
+                                        value: formatCellValue(row.event_id),
+                                      },
+                                    )}
+                                  </div>
+                                  <div>
+                                    {t(
+                                      "ui.admin.audit.details.ip",
+                                      "IP · {{value}}",
+                                      {
+                                        value: formatCellValue(row.ip_address),
+                                      },
+                                    )}
+                                  </div>
+                                  <div>
+                                    {t(
+                                      "ui.admin.audit.details.latency",
+                                      "Latency · {{value}}",
+                                      {
+                                        value:
+                                          details.latency_ms !== undefined
+                                            ? `${details.latency_ms}ms`
+                                            : "-",
+                                      },
+                                    )}
+                                  </div>
+                                </div>
+                                <div className="space-y-1">
+                                  <div className="uppercase tracking-[0.16em]">
+                                    {t("ui.admin.audit.details.actor", "Actor")}
+                                  </div>
+                                  <div>
+                                    {t(
+                                      "ui.admin.audit.details.actor_id",
+                                      "Actor ID · {{value}}",
+                                      {
+                                        value:
+                                          row.user_id ||
+                                          details.actor_id ||
+                                          "-",
+                                      },
+                                    )}
+                                  </div>
+                                  <div>
+                                    {t(
+                                      "ui.admin.audit.details.tenant",
+                                      "Tenant · {{value}}",
+                                      {
+                                        value: formatCellValue(
+                                          details.tenant_id,
+                                        ),
+                                      },
+                                    )}
+                                  </div>
+                                  <div>
+                                    {t(
+                                      "ui.admin.audit.details.device",
+                                      "Device · {{value}}",
+                                      {
+                                        value: formatCellValue(row.device_id),
+                                      },
+                                    )}
+                                  </div>
+                                </div>
+                                <div className="space-y-1">
+                                  <div className="uppercase tracking-[0.16em]">
+                                    {t(
+                                      "ui.admin.audit.details.result",
+                                      "Result",
+                                    )}
+                                  </div>
+                                  <div className="break-all">
+                                    {t(
+                                      "ui.admin.audit.details.error",
+                                      "Error · {{value}}",
+                                      {
+                                        value: formatCellValue(details.error),
+                                      },
+                                    )}
+                                  </div>
+                                  <div className="break-all">
+                                    {t(
+                                      "ui.admin.audit.details.before",
+                                      "Before · {{value}}",
+                                      {
+                                        value: formatCellValue(details.before),
+                                      },
+                                    )}
+                                  </div>
+                                  <div className="break-all">
+                                    {t(
+                                      "ui.admin.audit.details.after",
+                                      "After · {{value}}",
+                                      {
+                                        value: formatCellValue(details.after),
+                                      },
+                                    )}
+                                  </div>
+                                </div>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        )}
+                      </React.Fragment>
+                    );
+                  })}
+                </TableBody>
+              </Table>
             </div>
-          </CardContent>
-        </Card>
-      </div>
+          </div>
+          <div className="pt-4 text-center flex-shrink-0">
+            {hasNextPage ? (
+              <Button
+                variant="outline"
+                onClick={() => fetchNextPage()}
+                disabled={isFetchingNextPage}
+              >
+                {isFetchingNextPage
+                  ? t("msg.common.loading", "Loading...")
+                  : t("ui.admin.audit.load_more", "Load more")}
+              </Button>
+            ) : (
+              <span className="text-xs text-[var(--color-muted)]">
+                {t("msg.admin.audit.end", "End of audit feed")}
+              </span>
+            )}
+          </div>
+        </CardContent>
+      </Card>
     </div>
   );
 }