rl-core-front 0.2.0 → 0.4.0

package/src/contexts/brand-context.tsx

@@ -33,6 +33,18 @@ export interface Brand {
   logo?: ReactNode;
   /** Frase curta sob a logo na tela de login. Opcional. */
   tagline?: string;
+  /**
+   * Onde a marca fica na tela de login.
+   *
+   * - `"top"` (padrão): logo pequena acima do formulário, tudo num cartão só.
+   * - `"right"` / `"left"`: a marca ocupa metade da tela, com um divisor entre
+   *   ela e o formulário. É para logo grande — espremida no topo do cartão ela
+   *   sai ilegível, e aumentar o cartão para caber estragaria o formulário.
+   *
+   * Em tela estreita os dois lados viram empilhado com a marca em cima: meia
+   * tela de logo num celular não deixaria o formulário aparecer.
+   */
+  loginLayout?: "top" | "left" | "right";
 }
 
 /** O que os componentes do core consomem: sem opcionais, tudo já resolvido. */
@@ -41,6 +53,7 @@ export interface BrandContextType {
   mark: ReactNode;
   logo: ReactNode;
   tagline: string | null;
+  loginLayout: "top" | "left" | "right";
 }
 
 const BrandContext = createContext<BrandContextType | undefined>(undefined);
@@ -64,6 +77,7 @@ export function BrandProvider({
       mark,
       logo: brand?.logo ?? mark,
       tagline: brand?.tagline ?? null,
+      loginLayout: brand?.loginLayout ?? "top",
     };
   }, [brand, t]);
 
@@ -88,6 +102,7 @@ export function useBrand(): BrandContextType {
       mark: defaultMark,
       logo: defaultMark,
       tagline: null,
+      loginLayout: "top",
     }
   );
 }

package/src/contexts/i18n-context.tsx

@@ -14,9 +14,45 @@ import { en } from "#core/i18n/messages/en";
 import { pt } from "#core/i18n/messages/pt";
 
 export type Locale = "pt" | "en";
-const MESSAGES = { pt, en } as const;
 const STORAGE_KEY = "locale";
 
+/**
+ * Dicionário de um idioma: objeto aninhado de strings, como `i18n/messages`.
+ *
+ * O tipo é aberto de propósito — o projeto acrescenta as seções dele, e travar
+ * a forma aqui obrigaria o core a conhecer as chaves de quem o instala.
+ */
+export type Messages = Record<string, unknown>;
+
+/** Dicionário do projeto, por idioma. Cada um é opcional. */
+export type ProjectMessages = Partial<Record<Locale, Messages>>;
+
+/**
+ * Mescla o dicionário do projeto sobre o do core.
+ *
+ * É profundo porque as seções coincidem: um projeto que acrescenta
+ * `nav.tasks` não pode apagar o resto de `nav`, que é o que o shell usa. Em
+ * conflito, o projeto vence — é o que permite renomear "Logs" sem tocar no
+ * pacote.
+ */
+function deepMerge(base: Messages, override: Messages): Messages {
+  const result: Messages = { ...base };
+  for (const [key, value] of Object.entries(override)) {
+    const current = result[key];
+    const bothObjects =
+      current !== null &&
+      typeof current === "object" &&
+      !Array.isArray(current) &&
+      value !== null &&
+      typeof value === "object" &&
+      !Array.isArray(value);
+    result[key] = bothObjects
+      ? deepMerge(current as Messages, value as Messages)
+      : value;
+  }
+  return result;
+}
+
 export interface I18nContextType {
   locale: Locale;
   setLocale: (l: Locale) => void;
@@ -34,9 +70,35 @@ function resolve(obj: unknown, path: string): string | undefined {
   }, obj) as string | undefined;
 }
 
-export function I18nProvider({ children }: { children: React.ReactNode }): JSX.Element {
+export interface I18nProviderProps {
+  children: React.ReactNode;
+  /**
+   * Dicionário do projeto, mesclado sobre o do core (§14: o core não sabe os
+   * textos de quem o instala).
+   *
+   * ```tsx
+   * <I18nProvider messages={{ pt: { nav: { tasks: "Tarefas" } } }}>
+   * ```
+   */
+  messages?: ProjectMessages;
+}
+
+export function I18nProvider({
+  children,
+  messages,
+}: I18nProviderProps): JSX.Element {
   const [locale, setLocaleState] = useState<Locale>("pt");
 
+  // Mescla uma vez por dicionário, não a cada tradução: `t` roda em todo render
+  // de toda tela que usa texto.
+  const dictionary = useMemo(
+    () => ({
+      pt: messages?.pt ? deepMerge(pt, messages.pt) : (pt as Messages),
+      en: messages?.en ? deepMerge(en, messages.en) : (en as Messages),
+    }),
+    [messages],
+  );
+
   useEffect(() => {
     const saved = (localStorage.getItem(STORAGE_KEY) as Locale) || null;
     if (saved === "pt" || saved === "en") {setLocaleState(saved);}
@@ -50,15 +112,18 @@ export function I18nProvider({ children }: { children: React.ReactNode }): JSX.E
 
   const t = useCallback(
     (key: string, params?: Record<string, string | number>) => {
+      // Sem tradução no idioma corrente, cai no português; sem nenhuma, devolve
+      // a própria chave — é o que deixa `label: "Tarefas"` funcionar como texto
+      // cru em quem não quer cadastrar dicionário.
       const raw =
-        resolve(MESSAGES[locale], key) ?? resolve(MESSAGES.pt, key) ?? key;
+        resolve(dictionary[locale], key) ?? resolve(dictionary.pt, key) ?? key;
       if (!params) {return raw;}
       return Object.entries(params).reduce(
         (str, [k, v]) => str.replace(new RegExp(`\\{${k}\\}`, "g"), String(v)),
         raw,
       );
     },
-    [locale],
+    [locale, dictionary],
   );
 
   const value = useMemo(

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>
+    </>
+  );
+}