rl-core-front 0.3.0 → 0.4.0

package/src/features/audit/audit-screen.tsx

@@ -10,11 +10,10 @@ import { Eye } from "lucide-react";
 import type { JSX } from "react";
 import { useMemo, useState } from "react";
 
-import { formatDateTime, isIsoDateTime } from "#core/_utils/format";
+import { formatDateTime } from "#core/_utils/format";
 import {
   Badge,
   Button,
-  Checkbox,
   DataTable,
   DataTableFeatures,
   Dialog,
@@ -22,88 +21,21 @@ import {
   DialogHeader,
   DialogTitle,
   RowActions,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
 } from "#core/components/ui";
 import { useI18n } from "#core/contexts";
-import { useAuditTrail } from "#core/features/audit/hooks/use-audit-trail";
+import { AuditDiff } from "#core/features/audit/components/audit-diff";
 import {
-  AuditAction,
-  AuditDataChange,
-} from "#core/features/audit/services/audit.service";
-
-/**
- * Campos de controle interno: aparecem no diff porque a auditoria versiona a
- * linha inteira, mas não são informação de negócio. Ficam escondidos por padrão.
- */
-const TECHNICAL_FIELDS = new Set([
-  "failedLoginAttempts",
-  "createdAt",
-  "updatedAt",
-  "deletedAt",
-  "passwordChangedAt",
-  "password",
-  "twoFactorSecret",
-  "backupCodes",
-  "mustChangePassword",
-]);
-
-interface DiffRow {
-  field: string;
-  before: string;
-  after: string;
-  technical: boolean;
-}
-
-type Translate = (key: string) => string;
-
-function formatValue(
-  value: unknown,
-  locale: string,
-  t: Translate,
-): string {
-  if (value === null || value === undefined) {
-    return "—";
-  }
-  if (typeof value === "boolean") {
-    return value ? t("common.yes") : t("common.no");
-  }
-  if (isIsoDateTime(value)) {
-    return formatDateTime(value, locale);
-  }
-  if (typeof value === "object") {
-    // Indentado: objeto e array em uma linha só ficavam ilegíveis no modal.
-    return JSON.stringify(value, null, 2);
-  }
-  return String(value);
-}
-
-function diffRows(
-  item: AuditDataChange,
-  locale: string,
-  t: Translate,
-): DiffRow[] {
-  const keys = new Set([
-    ...Object.keys(item.oldData ?? {}),
-    ...Object.keys(item.newData ?? {}),
-  ]);
-  return Array.from(keys).map((field) => ({
-    field,
-    before: formatValue(item.oldData?.[field], locale, t),
-    after: formatValue(item.newData?.[field], locale, t),
-    technical: TECHNICAL_FIELDS.has(field),
-  }));
-}
+  AuditDataAction,
+  AuditDataActionLabelKey,
+} from "#core/features/audit/enums/audit-data-action.enum";
+import { useAuditTrail } from "#core/features/audit/hooks/use-audit-trail";
+import { AuditDataChange } from "#core/features/audit/services/audit.service";
 
 function actionVariant(
-  action: AuditAction,
+  action: AuditDataAction,
 ): "success" | "warning" | "destructive" {
-  if (action === "CREATE") {return "success";}
-  if (action === "DELETE") {return "destructive";}
+  if (action === AuditDataAction.CREATE) {return "success";}
+  if (action === AuditDataAction.DELETE) {return "destructive";}
   return "warning";
 }
 
@@ -111,21 +43,9 @@ export function AuditScreen(): JSX.Element {
   const { t, locale } = useI18n();
   const trail = useAuditTrail();
   const [detail, setDetail] = useState<AuditDataChange | null>(null);
-  const [showTechnical, setShowTechnical] = useState(false);
 
-  /** Rótulo do campo; sem tradução cadastrada, mostra o nome cru da coluna. */
-  const fieldLabel = (field: string): string => {
-    const key = `auditFields.${field}`;
-    const label = t(key);
-    return label === key ? field : label;
-  };
-
-  const actionLabel = (action: AuditAction): string =>
-    action === "CREATE"
-      ? t("auditTrail.actionCreate")
-      : action === "DELETE"
-        ? t("auditTrail.actionDelete")
-        : t("auditTrail.actionUpdate");
+  const actionLabel = (action: AuditDataAction): string =>
+    t(AuditDataActionLabelKey[action]);
 
   const columns = useMemo<
     ColumnDef<DataTableFeatures, AuditDataChange, unknown>[]
@@ -193,10 +113,6 @@ export function AuditScreen(): JSX.Element {
     [t, locale],
   );
 
-  const allRows = detail ? diffRows(detail, locale, t) : [];
-  const rows = showTechnical ? allRows : allRows.filter((r) => !r.technical);
-  const hiddenCount = allRows.length - rows.length;
-
   const pagination: PaginationState = {
     pageIndex: trail.page,
     pageSize: trail.pageSize,
@@ -248,50 +164,7 @@ export function AuditScreen(): JSX.Element {
               {detail && actionLabel(detail.action)})
             </DialogTitle>
           </DialogHeader>
-          {detail && (
-            <div className="max-h-[60vh] overflow-y-auto">
-              {rows.length === 0 ? (
-                <p className="text-sm text-muted-foreground">
-                  {t("auditTrail.noFields")}
-                </p>
-              ) : (
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>{t("auditTrail.field")}</TableHead>
-                      <TableHead>{t("auditTrail.before")}</TableHead>
-                      <TableHead>{t("auditTrail.after")}</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {rows.map((d) => (
-                      <TableRow key={d.field}>
-                        <TableCell className="font-medium">
-                          {fieldLabel(d.field)}
-                        </TableCell>
-                        <TableCell className="whitespace-pre-wrap text-destructive/90">
-                          {d.before}
-                        </TableCell>
-                        <TableCell className="whitespace-pre-wrap text-success">
-                          {d.after}
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              )}
-            </div>
-          )}
-          {detail && (hiddenCount > 0 || showTechnical) && (
-            <label className="flex cursor-pointer items-center gap-2 text-sm text-muted-foreground">
-              <Checkbox
-                checked={showTechnical}
-                onCheckedChange={(checked) => setShowTechnical(!!checked)}
-              />
-              {t("auditTrail.showTechnical")}
-              {hiddenCount > 0 && ` (${hiddenCount})`}
-            </label>
-          )}
+          {detail && <AuditDiff change={detail} />}
         </DialogContent>
       </Dialog>
     </div>

package/src/features/audit/components/audit-diff.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import type { JSX } from "react";
+import { useMemo, useState } from "react";
+
+import { formatDateTime, isIsoDateTime } from "#core/_utils/format";
+import {
+  Checkbox,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "#core/components/ui";
+import { useI18n } from "#core/contexts";
+import { AuditDataChange } from "#core/features/audit/services/audit.service";
+
+/**
+ * Campos de controle interno: aparecem no diff porque a auditoria versiona a
+ * linha inteira, mas não são informação de negócio. Ficam escondidos por padrão.
+ */
+const TECHNICAL_FIELDS = new Set([
+  "failedLoginAttempts",
+  "createdAt",
+  "updatedAt",
+  "deletedAt",
+  "passwordChangedAt",
+  "password",
+  "twoFactorSecret",
+  "backupCodes",
+  "mustChangePassword",
+]);
+
+interface DiffRow {
+  field: string;
+  before: string;
+  after: string;
+  technical: boolean;
+}
+
+type Translate = (key: string) => string;
+
+function formatValue(value: unknown, locale: string, t: Translate): string {
+  if (value === null || value === undefined) {
+    return "—";
+  }
+  if (typeof value === "boolean") {
+    return value ? t("common.yes") : t("common.no");
+  }
+  if (isIsoDateTime(value)) {
+    return formatDateTime(value, locale);
+  }
+  if (typeof value === "object") {
+    // Indentado: objeto e array em uma linha só ficavam ilegíveis no modal.
+    return JSON.stringify(value, null, 2);
+  }
+  return String(value);
+}
+
+function diffRows(
+  item: AuditDataChange,
+  locale: string,
+  t: Translate,
+): DiffRow[] {
+  const keys = new Set([
+    ...Object.keys(item.oldData ?? {}),
+    ...Object.keys(item.newData ?? {}),
+  ]);
+  return Array.from(keys).map((field) => ({
+    field,
+    before: formatValue(item.oldData?.[field], locale, t),
+    after: formatValue(item.newData?.[field], locale, t),
+    technical: TECHNICAL_FIELDS.has(field),
+  }));
+}
+
+export interface AuditDiffProps {
+  change: AuditDataChange;
+}
+
+/**
+ * Diff de uma alteração: campo, antes e depois.
+ *
+ * Mora aqui, e não na tela de auditoria, porque os dois lugares mostram o mesmo
+ * diff — a listagem geral e o histórico de um registro. Duas cópias divergiriam
+ * na primeira vez que alguém acrescentasse um campo técnico (§6).
+ */
+export function AuditDiff({ change }: AuditDiffProps): JSX.Element {
+  const { t, locale } = useI18n();
+  const [showTechnical, setShowTechnical] = useState(false);
+
+  const allRows = useMemo(
+    () => diffRows(change, locale, t),
+    [change, locale, t],
+  );
+  const rows = showTechnical
+    ? allRows
+    : allRows.filter((row) => !row.technical);
+  const hiddenCount = allRows.length - rows.length;
+
+  /** Rótulo do campo; sem tradução cadastrada, mostra o nome cru da coluna. */
+  const fieldLabel = (field: string): string => {
+    const key = `auditFields.${field}`;
+    const label = t(key);
+    return label === key ? field : label;
+  };
+
+  return (
+    <>
+      <div className="max-h-[60vh] overflow-y-auto">
+        {rows.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            {t("auditTrail.noFields")}
+          </p>
+        ) : (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t("auditTrail.field")}</TableHead>
+                <TableHead>{t("auditTrail.before")}</TableHead>
+                <TableHead>{t("auditTrail.after")}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {rows.map((row) => (
+                <TableRow key={row.field}>
+                  <TableCell className="font-medium">
+                    {fieldLabel(row.field)}
+                  </TableCell>
+                  <TableCell className="whitespace-pre-wrap text-destructive/90">
+                    {row.before}
+                  </TableCell>
+                  <TableCell className="whitespace-pre-wrap text-success">
+                    {row.after}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </div>
+
+      {(hiddenCount > 0 || showTechnical) && (
+        <label className="flex cursor-pointer items-center gap-2 text-sm text-muted-foreground">
+          <Checkbox
+            checked={showTechnical}
+            onCheckedChange={(checked) => setShowTechnical(!!checked)}
+          />
+          {t("auditTrail.showTechnical")}
+          {hiddenCount > 0 && ` (${hiddenCount})`}
+        </label>
+      )}
+    </>
+  );
+}

package/src/features/audit/components/index.ts

@@ -0,0 +1,3 @@
+// Barrel da pasta — importe daqui de fora; dentro da pasta use o caminho direto.
+export * from "./audit-diff";
+export * from "./record-audit-button";

package/src/features/audit/components/record-audit-button.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import { Eye, History } from "lucide-react";
+import type { JSX } from "react";
+import { useCallback, useEffect, useState } from "react";
+
+import { formatDateTime } from "#core/_utils/format";
+import {
+  Badge,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  Spinner,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "#core/components/ui";
+import { useAuth, useI18n } from "#core/contexts";
+import { AuditDiff } from "#core/features/audit/components/audit-diff";
+import {
+  AuditDataAction,
+  AuditDataActionLabelKey,
+} from "#core/features/audit/enums/audit-data-action.enum";
+import {
+  AuditDataChange,
+  auditService,
+} from "#core/features/audit/services/audit.service";
+import { useRequest } from "#core/hooks/use-request";
+
+/** Mesma permissão da tela de auditoria: ver a trilha é ler dado de todos. */
+const TRAIL_PERMISSION = "audit:read-trail:any";
+
+function actionVariant(
+  action: AuditDataAction,
+): "success" | "warning" | "destructive" {
+  if (action === AuditDataAction.CREATE) {return "success";}
+  if (action === AuditDataAction.DELETE) {return "destructive";}
+  return "warning";
+}
+
+export interface RecordAuditButtonProps {
+  /**
+   * Nome da **classe** da entidade, como o backend a grava: `"User"`, `"Role"`,
+   * `"Group"` — não o nome da tabela.
+   */
+  entity: string;
+  entityId: string;
+  /** Texto do botão. Ausente, usa "Histórico". */
+  label?: string;
+}
+
+/**
+ * Histórico de alterações de um registro, onde ele é editado.
+ *
+ * Consulta a mesma trilha da tela de auditoria, filtrada por `entity` +
+ * `entityId`. Some por completo para quem não tem permissão de ler a trilha —
+ * botão que só entrega 403 é pior que botão nenhum.
+ *
+ * ```tsx
+ * <RecordAuditButton entity="User" entityId={user.id} />
+ * ```
+ */
+export function RecordAuditButton({
+  entity,
+  entityId,
+  label,
+}: RecordAuditButtonProps): JSX.Element | null {
+  const { t, locale } = useI18n();
+  const { hasPermission } = useAuth();
+  const { run, loading } = useRequest();
+
+  const [open, setOpen] = useState(false);
+  const [items, setItems] = useState<AuditDataChange[]>([]);
+  const [detail, setDetail] = useState<AuditDataChange | null>(null);
+
+  const fetch = useCallback(async () => {
+    const res = await run(() => auditService.listByRecord(entity, entityId));
+    if (res) {
+      setItems(res.items);
+    }
+  }, [run, entity, entityId]);
+
+  // Busca só ao abrir: a tela de edição não paga a consulta de quem nunca
+  // clica no histórico.
+  useEffect(() => {
+    if (open) {
+      void fetch();
+    }
+  }, [open, fetch]);
+
+  if (!hasPermission(TRAIL_PERMISSION)) {
+    return null;
+  }
+
+  return (
+    <>
+      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
+        <History className="h-4 w-4" />
+        {label ?? t("auditTrail.recordHistory")}
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>{t("auditTrail.recordHistory")}</DialogTitle>
+          </DialogHeader>
+
+          {loading ? (
+            <div className="flex justify-center py-8">
+              <Spinner className="h-6 w-6" />
+            </div>
+          ) : items.length === 0 ? (
+            <p className="py-4 text-sm text-muted-foreground">
+              {t("auditTrail.noRecordHistory")}
+            </p>
+          ) : (
+            <div className="max-h-[60vh] overflow-y-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t("auditTrail.action")}</TableHead>
+                    <TableHead>{t("auditTrail.user")}</TableHead>
+                    <TableHead>{t("auditTrail.date")}</TableHead>
+                    <TableHead />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {items.map((item) => (
+                    <TableRow key={item.id}>
+                      <TableCell>
+                        <Badge variant={actionVariant(item.action)}>
+                          {t(AuditDataActionLabelKey[item.action])}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        {item.user?.name ?? t("auditTrail.systemUser")}
+                      </TableCell>
+                      <TableCell>{formatDateTime(item.createdAt, locale)}</TableCell>
+                      <TableCell className="text-right">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => setDetail(item)}
+                        >
+                          <Eye className="h-4 w-4" />
+                          {t("auditTrail.viewChanges")}
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={!!detail} onOpenChange={(o) => !o && setDetail(null)}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>
+              {t("auditTrail.changesTitle")} — {entity} (
+              {detail && t(AuditDataActionLabelKey[detail.action])})
+            </DialogTitle>
+          </DialogHeader>
+          {detail && <AuditDiff change={detail} />}
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/src/features/audit/enums/audit-data-action.enum.ts

@@ -0,0 +1,20 @@
+// O que aconteceu com o registro (espelha o AuditDataAction do backend:
+// audit_data_changes.action).
+export enum AuditDataAction {
+  CREATE = 0,
+  UPDATE = 1,
+  DELETE = 2,
+}
+
+/**
+ * Chave de i18n de cada valor.
+ *
+ * Aponta a chave e não o texto porque o core é bilíngue (§6): o rótulo mora em
+ * `i18n/messages`, e escrevê-lo aqui criaria uma segunda fonte do mesmo texto —
+ * que sairia em português também no inglês.
+ */
+export const AuditDataActionLabelKey: Record<AuditDataAction, string> = {
+  [AuditDataAction.CREATE]: "auditTrail.actionCreate",
+  [AuditDataAction.UPDATE]: "auditTrail.actionUpdate",
+  [AuditDataAction.DELETE]: "auditTrail.actionDelete",
+};

package/src/features/audit/hooks/use-audit-trail.ts

@@ -48,9 +48,14 @@ export function useAuditTrail(): UseAuditTrailResult {
     }
   }, [run, list.query]);
 
+  // Não busca antes da URL ser lida: a query sairia sem o filtro, e essa
+  // resposta pode chegar depois da certa e pintar a tela com tudo.
   useEffect(() => {
+    if (!list.ready) {
+      return;
+    }
     void fetch();
-  }, [fetch]);
+  }, [fetch, list.ready]);
 
   return {
     rows,
@@ -58,7 +63,9 @@ export function useAuditTrail(): UseAuditTrailResult {
     page: list.page,
     pageSize: list.pageSize,
     sorting: list.sorting,
-    loading,
+    // Esperar o catálogo também é carregar: sem isso a tabela pisca
+    // "Nenhum registro" antes da primeira busca sair.
+    loading: loading || !list.ready,
     setPage: list.setPage,
     setPageSize: list.setPageSize,
     setSorting: list.setSorting,

package/src/features/audit/services/audit.service.ts

@@ -4,16 +4,44 @@ import { toListParams } from "#core/_services/api/list-query";
 import type { components } from "#core/_services/api/schema";
 
 /** Tipos derivados do `openapi.json` (§5) — não redigitar a forma da resposta. */
-export type AuditAction = components["schemas"]["AuditDataChangeResponse"]["action"];
 export type AuditUserRef = components["schemas"]["AuditUserRefResponse"];
 export type AuditDataChange = components["schemas"]["AuditDataChangeResponse"];
+export type RequestLog = components["schemas"]["RequestLogResponse"];
 
 export interface Paginated<T> {
   items: T[];
   meta: components["schemas"]["PaginationMetaResponse"];
 }
 
+/**
+ * Teto do histórico de um registro.
+ *
+ * O modal não pagina: quem precisa de mais que isso está fazendo investigação,
+ * e aí a tela de auditoria com filtro é o lugar certo.
+ */
+const RECORD_HISTORY_LIMIT = 100;
+
 export const auditService = {
+  /**
+   * Histórico de um registro específico (`entity` + `entityId`).
+   *
+   * Usa o mesmo endpoint e o mesmo catálogo da listagem geral — a consulta cai
+   * no índice `(entity, entity_id, created_at)`, que existe exatamente por isso.
+   */
+  listByRecord(entity: string, entityId: string) {
+    return api
+      .get<Paginated<AuditDataChange>>("/audit/data-changes", {
+        params: {
+          page: 1,
+          limit: RECORD_HISTORY_LIMIT,
+          sortBy: "createdAt",
+          sortDir: "DESC",
+          filter: JSON.stringify({ entity, entityId }),
+        },
+      })
+      .then((r) => r.data);
+  },
+
   listDataChanges(query: ListQuery) {
     return api
       .get<Paginated<AuditDataChange>>("/audit/data-changes", {
@@ -21,4 +49,18 @@ export const auditService = {
       })
       .then((r) => r.data);
   },
+
+  /**
+   * Log de requisição: erro, requisição lenta e ação marcada com `@Auditable`.
+   *
+   * Uma rota só para o que antes eram `/audit/changes` e `/audit/errors` — a
+   * distinção agora é o filtro `outcome`.
+   */
+  listRequests(query: ListQuery) {
+    return api
+      .get<Paginated<RequestLog>>("/audit/requests", {
+        params: toListParams(query),
+      })
+      .then((r) => r.data);
+  },
 };