baron-sso/adminfront/src/features/audit/AuditLogsPage.tsx

import { useInfiniteQuery } from "@tanstack/react-query";
import type { AxiosError } from "axios";
import { Download, NotebookTabs, RefreshCw, Search } from "lucide-react";
import * as React from "react";
import {
  formatAuditValue,
  parseAuditDetails,
  resolveAuditAction,
  resolveAuditActor,
} from "../../../../common/core/audit";
import { AuditLogTable } from "../../../../common/core/components/audit";
import { PageHeader } from "../../../../common/core/components/page";
import { SearchFilterBar } from "../../../../common/ui/search-filter-bar";
import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "../../components/ui/card";
import { Input } from "../../components/ui/input";
import type { AuditLog } from "../../lib/adminApi";
import { fetchAuditLogs } from "../../lib/adminApi";
import { t } from "../../lib/i18n";

function AuditLogsPage() {
  const [searchActorId, setSearchActorId] = React.useState("");
  const [searchAction, setSearchAction] = React.useState("");
  const [statusFilter, setStatusFilter] = React.useState("all");
  const deferredSearchActorId = React.useDeferredValue(searchActorId.trim());
  const deferredSearchAction = React.useDeferredValue(searchAction.trim());
  const {
    data,
    isLoading,
    error,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    isFetching,
    refetch,
  } = useInfiniteQuery({
    queryKey: ["audit-logs"],
    queryFn: ({ pageParam }) => fetchAuditLogs(50, pageParam),
    initialPageParam: undefined as string | undefined,
    getNextPageParam: (lastPage) => lastPage.next_cursor || undefined,
  });

  const logs =
    data?.pages?.flatMap(
      (page) =>
        page?.items?.filter((item): item is AuditLog => Boolean(item)) ?? [],
    ) ?? [];
  const filteredLogs = React.useMemo(
    () =>
      logs.filter((row) => {
        const details = parseAuditDetails(row.details);
        const actorLabel = resolveAuditActor(row, details).toLowerCase();
        const actionLabel = resolveAuditAction(row, details).toLowerCase();
        const matchesActor =
          deferredSearchActorId === "" ||
          actorLabel.includes(deferredSearchActorId.toLowerCase());
        const matchesAction =
          deferredSearchAction === "" ||
          actionLabel.includes(deferredSearchAction.toLowerCase());
        const matchesStatus =
          statusFilter === "all" || row.status === statusFilter;
        return matchesActor && matchesAction && matchesStatus;
      }),
    [logs, deferredSearchActorId, deferredSearchAction, statusFilter],
  );

  if (isLoading) {
    return (
      <div className="p-8 text-center">
        {t("msg.common.audit.loading", "Loading audit logs...")}
      </div>
    );
  }

  if (error) {
    const errMsg =
      (error as AxiosError<{ error?: string }>).response?.data?.error ??
      (error as Error).message;
    return (
      <div className="p-8 text-center text-red-500">
        {t("msg.common.audit.load_error", "Error loading logs: {{error}}", {
          error: errMsg,
        })}
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <PageHeader
        title={t("ui.common.audit.title", "감사 로그")}
        description={t(
          "msg.admin.audit.subtitle",
          "관리자 작업 이력을 조회합니다.",
        )}
        icon={<NotebookTabs size={20} />}
        actions={
          <>
            <Badge variant="muted">
              {t("msg.common.audit.registry.count", "총 {{count}}개 로그", {
                count: filteredLogs.length,
              })}
            </Badge>
            <Button
              variant="outline"
              onClick={() => refetch()}
              disabled={isFetching}
            >
              <RefreshCw size={16} />
              {t("ui.common.refresh", "새로고침")}
            </Button>
            <Button>
              <Download size={16} />
              {t("ui.common.export_csv", "CSV 내보내기")}
            </Button>
          </>
        }
      />

      <Card className="glass-panel">
        <CardHeader className="flex flex-row items-center justify-between">
          <div>
            <CardTitle className="text-lg font-bold flex items-center gap-2">
              {t("ui.common.audit.registry.title", "Audit registry")}
            </CardTitle>
            <CardDescription>
              {t(
                "msg.admin.audit.registry.description",
                "최근 감사 로그를 검색 조건에 맞춰 필터링하고, 작업 이력을 빠르게 확인합니다.",
              )}
            </CardDescription>
          </div>
        </CardHeader>
        <CardContent className="space-y-4 pt-0">
          <SearchFilterBar
            primary={
              <form
                onSubmit={(e) => {
                  e.preventDefault();
                  refetch();
                }}
                className="grid flex-1 gap-2 md:grid-cols-[1fr,1fr,180px]"
              >
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                  <Input
                    className="pl-10"
                    value={searchActorId}
                    onChange={(event) => setSearchActorId(event.target.value)}
                    placeholder={t(
                      "ui.common.audit.filters.user_id",
                      "Filter by User ID",
                    )}
                  />
                </div>
                <Input
                  value={searchAction}
                  onChange={(event) =>
                    setSearchAction(event.target.value.toUpperCase())
                  }
                  placeholder={t(
                    "ui.common.audit.filters.action",
                    "Filter by Action (e.g. ROTATE_SECRET)",
                  )}
                />
                <select
                  className="h-10 rounded-md border border-input bg-background px-3 text-sm"
                  value={statusFilter}
                  onChange={(event) => setStatusFilter(event.target.value)}
                >
                  <option value="all">
                    {t("ui.common.audit.filters.status_all", "All Status")}
                  </option>
                  <option value="success">
                    {t("ui.common.status.success", "Success")}
                  </option>
                  <option value="failure">
                    {t("ui.common.status.failure", "Failure")}
                  </option>
                </select>
              </form>
            }
          />
          <AuditLogTable
            logs={filteredLogs}
            t={t}
            loading={isLoading}
            hasNextPage={Boolean(hasNextPage)}
            isFetchingNextPage={isFetchingNextPage}
            onLoadMore={() => fetchNextPage()}
          />
        </CardContent>
      </Card>
    </div>
  );
}

export default AuditLogsPage;