rl-core-front 0.3.0 → 0.4.0

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

@@ -3,9 +3,14 @@
 import type { JSX } from "react";
 import { useEffect } from "react";
 
-import { BrandHeader, LanguageSelector, ThemeToggle } from "#core/components";
-import { Card } from "#core/components/ui";
-import { useI18n } from "#core/contexts";
+import {
+  BrandHeader,
+  BrandPanel,
+  LanguageSelector,
+  ThemeToggle,
+} from "#core/components";
+import { Card, Separator } from "#core/components/ui";
+import { useBrand, useI18n } from "#core/contexts";
 import {
   BackupCodesDialog,
   LoginForm,
@@ -13,6 +18,7 @@ import {
   TwoFactorVerify,
 } from "#core/features/login/components";
 import { useLoginFlow } from "#core/features/login/hooks/use-login-flow";
+import { cn } from "#core/lib/utils";
 
 export function LoginScreen(): JSX.Element {
   const flow = useLoginFlow();
@@ -30,50 +36,90 @@ export function LoginScreen(): JSX.Element {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [flow.step]);
 
-  return (
-    <div className="relative flex min-h-screen items-center justify-center bg-background p-4">
-      <div className="absolute right-3 top-3 flex gap-1">
-        <LanguageSelector />
-        <ThemeToggle />
-      </div>
+  const { loginLayout } = useBrand();
+  const aoLado = loginLayout !== "top";
 
-      <Card className="w-full max-w-md p-8">
-        {/* A marca vem antes do título do passo: é a primeira tela do sistema,
-            e quem chega aqui precisa reconhecer onde está antes de logar. */}
-        <BrandHeader title={titles[flow.step]} />
+  const conteudo = (
+    <>
+      {/* A marca vem antes do título do passo: é a primeira tela do sistema, e
+          quem chega aqui precisa reconhecer onde está antes de logar. Com a
+          marca ao lado, só o título — repeti-la aqui seria dizer duas vezes. */}
+      <BrandHeader title={titles[flow.step]} showBrand={!aoLado} />
 
-        {flow.error && (
-          <div className="mb-4 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
-            {flow.error}
-          </div>
-        )}
+      {flow.error && (
+        <div className="mb-4 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+          {flow.error}
+        </div>
+      )}
 
-        {flow.step === "credentials" && (
-          <LoginForm loading={flow.loading} onSubmit={flow.submitCredentials} />
-        )}
+      {flow.step === "credentials" && (
+        <LoginForm loading={flow.loading} onSubmit={flow.submitCredentials} />
+      )}
 
-        {flow.step === "setup" && flow.setup && (
-          <TwoFactorSetup
-            setup={flow.setup}
-            loading={flow.loading}
-            onConfirm={(code) => flow.submitCode(code, "totp")}
-          />
-        )}
+      {flow.step === "setup" && flow.setup && (
+        <TwoFactorSetup
+          setup={flow.setup}
+          loading={flow.loading}
+          onConfirm={(code) => flow.submitCode(code, "totp")}
+        />
+      )}
+
+      {flow.step === "verify" && (
+        <TwoFactorVerify
+          loading={flow.loading}
+          onVerify={flow.submitCode}
+          onRequestEmail={flow.requestEmailCode}
+        />
+      )}
+
+      <BackupCodesDialog
+        open={flow.step === "backup"}
+        codes={flow.backupCodes}
+        onClose={flow.finishBackup}
+      />
+    </>
+  );
 
-        {flow.step === "verify" && (
-          <TwoFactorVerify
-            loading={flow.loading}
-            onVerify={flow.submitCode}
-            onRequestEmail={flow.requestEmailCode}
+  const seletores = (
+    <div className="absolute right-3 top-3 z-10 flex gap-1">
+      <LanguageSelector />
+      <ThemeToggle />
+    </div>
+  );
+
+  if (aoLado) {
+    return (
+      <div className="relative min-h-screen bg-background">
+        {seletores}
+        {/* Empilhado em tela estreita, lado a lado a partir do `lg`. No DOM a
+            marca vem primeiro — no celular é ela que deve abrir a tela, nos
+            dois casos. Quem troca os lados no desktop é o `order`, e o divisor
+            precisa do dele para não sobrar na ponta. */}
+        <div className="flex min-h-screen flex-col lg:flex-row">
+          <BrandPanel
+            className={loginLayout === "right" ? "lg:order-3" : "lg:order-1"}
+          />
+          <Separator
+            orientation="horizontal"
+            className="lg:order-2 lg:h-auto lg:w-px lg:self-stretch"
           />
-        )}
+          <div
+            className={cn(
+              "flex flex-1 items-center justify-center p-4",
+              loginLayout === "right" ? "lg:order-1" : "lg:order-3",
+            )}
+          >
+            <Card className="w-full max-w-md p-8">{conteudo}</Card>
+          </div>
+        </div>
+      </div>
+    );
+  }
 
-        <BackupCodesDialog
-          open={flow.step === "backup"}
-          codes={flow.backupCodes}
-          onClose={flow.finishBackup}
-        />
-      </Card>
+  return (
+    <div className="relative flex min-h-screen items-center justify-center bg-background p-4">
+      {seletores}
+      <Card className="w-full max-w-md p-8">{conteudo}</Card>
     </div>
   );
 }

package/src/features/logs/enums/error-type.enum.ts

@@ -0,0 +1,21 @@
+// Categoria do erro (espelha o ErrorType do backend: request_logs.error_type).
+export enum ErrorType {
+  VALIDATION = 0,
+  AUTH = 1,
+  NOT_FOUND = 2,
+  RATE_LIMIT = 3,
+  DATABASE = 4,
+  INTEGRATION = 5,
+  INTERNAL = 6,
+}
+
+/** Chave de i18n de cada valor — o texto mora em `i18n/messages` (§6). */
+export const ErrorTypeLabelKey: Record<ErrorType, string> = {
+  [ErrorType.VALIDATION]: "logs.errorValidation",
+  [ErrorType.AUTH]: "logs.errorAuth",
+  [ErrorType.NOT_FOUND]: "logs.errorNotFound",
+  [ErrorType.RATE_LIMIT]: "logs.errorRateLimit",
+  [ErrorType.DATABASE]: "logs.errorDatabase",
+  [ErrorType.INTEGRATION]: "logs.errorIntegration",
+  [ErrorType.INTERNAL]: "logs.errorInternal",
+};

package/src/features/logs/enums/request-outcome.enum.ts

@@ -0,0 +1,14 @@
+// Desfecho da requisição (espelha o RequestOutcome do backend:
+// request_logs.outcome).
+export enum RequestOutcome {
+  SUCCESS = 0,
+  ERROR = 1,
+  ABORTED = 2,
+}
+
+/** Chave de i18n de cada valor — o texto mora em `i18n/messages` (§6). */
+export const RequestOutcomeLabelKey: Record<RequestOutcome, string> = {
+  [RequestOutcome.SUCCESS]: "logs.outcomeSuccess",
+  [RequestOutcome.ERROR]: "logs.outcomeError",
+  [RequestOutcome.ABORTED]: "logs.outcomeAborted",
+};

package/src/features/logs/hooks/use-request-logs.ts

@@ -9,11 +9,23 @@ import {
   useState,
 } from "react";
 
+import type { FilterValues } from "#core/_utils/filter";
+import { RequestOutcome } from "#core/features/logs/enums/request-outcome.enum";
 import { logsService, RequestLog } from "#core/features/logs/services/logs.service";
 import type { FiltersState } from "#core/hooks/use-filters";
 import { useListQuery } from "#core/hooks/use-list-query";
 import { useRequest } from "#core/hooks/use-request";
 
+/**
+ * A tela abre no sucesso, não em tudo.
+ *
+ * Fora do módulo para não recriar o objeto a cada render: ele é dependência do
+ * efeito de hidratação, e um literal novo por render o refaria sem parar.
+ */
+const DEFAULT_FILTER: FilterValues = {
+  outcome: { values: [String(RequestOutcome.SUCCESS)] },
+};
+
 export interface UseRequestLogsResult {
   rows: RequestLog[];
   total: number;
@@ -32,7 +44,11 @@ export interface UseRequestLogsResult {
 export function useRequestLogs(): UseRequestLogsResult {
   const { run, loading } = useRequest();
 
-  const list = useListQuery("/audit/changes/filter-schema", 20);
+  const list = useListQuery(
+    "/audit/requests/filter-schema",
+    20,
+    DEFAULT_FILTER,
+  );
 
   const [rows, setRows] = useState<RequestLog[]>([]);
   const [total, setTotal] = useState(0);
@@ -45,9 +61,14 @@ export function useRequestLogs(): UseRequestLogsResult {
     }
   }, [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,
@@ -55,7 +76,9 @@ export function useRequestLogs(): UseRequestLogsResult {
     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/logs/logs-screen.tsx

@@ -2,9 +2,8 @@
 
 import type { JSX } from "react";
 
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "#core/components/ui";
 import { useI18n } from "#core/contexts";
-import { ErrorLogsPanel, RequestLogsPanel } from "#core/features/logs/panels";
+import { RequestLogsPanel } from "#core/features/logs/panels";
 
 export function LogsScreen(): JSX.Element {
   const { t } = useI18n();
@@ -14,18 +13,7 @@ export function LogsScreen(): JSX.Element {
       <h1 className="mb-1 text-3xl font-bold">{t("logs.title")}</h1>
       <p className="mb-4 text-sm text-muted-foreground">{t("logs.subtitle")}</p>
 
-      <Tabs defaultValue="requests">
-        <TabsList>
-          <TabsTrigger value="requests">{t("logs.tabRequests")}</TabsTrigger>
-          <TabsTrigger value="errors">{t("logs.tabErrors")}</TabsTrigger>
-        </TabsList>
-        <TabsContent value="requests">
-          <RequestLogsPanel />
-        </TabsContent>
-        <TabsContent value="errors">
-          <ErrorLogsPanel />
-        </TabsContent>
-      </Tabs>
+      <RequestLogsPanel />
     </div>
   );
 }

package/src/features/logs/panels/index.ts

@@ -1,3 +1,2 @@
 // Barrel da pasta — importe daqui de fora; dentro da pasta use o caminho direto.
-export * from "./error-logs-panel";
 export * from "./request-logs-panel";

package/src/features/logs/panels/request-logs-panel.tsx

@@ -6,11 +6,29 @@ import type {
   PaginationState,
   SortingState,
 } from "@tanstack/react-table";
+import { Eye } from "lucide-react";
 import type { JSX } from "react";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 
-import { Badge, DataTable, DataTableFeatures } from "#core/components/ui";
+import {
+  Badge,
+  Button,
+  DataTable,
+  DataTableFeatures,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  RowActions,
+  SegmentedControl,
+  SegmentedOption,
+} from "#core/components/ui";
 import { useI18n } from "#core/contexts";
+import {
+  ErrorType,
+  ErrorTypeLabelKey,
+} from "#core/features/logs/enums/error-type.enum";
+import { RequestOutcomeLabelKey } from "#core/features/logs/enums/request-outcome.enum";
 import { useRequestLogs } from "#core/features/logs/hooks/use-request-logs";
 import { RequestLog } from "#core/features/logs/services/logs.service";
 
@@ -24,9 +42,46 @@ function statusVariant(
   return "secondary";
 }
 
+/**
+ * Nenhum segmento aceso.
+ *
+ * Não é opção do controle — some do filtro só quem limpar o desfecho pelo
+ * painel lateral, e aí nenhum segmento fica marcado.
+ */
+const NO_OUTCOME = "";
+
+/**
+ * Log de requisição — um painel só.
+ *
+ * Eram dois (requisições e erros) enquanto eram duas tabelas. Hoje é uma linha
+ * por requisição, e quem separa sucesso de erro é o desfecho na barra.
+ */
 export function RequestLogsPanel(): JSX.Element {
   const { t } = useI18n();
   const logs = useRequestLogs();
+  const [detail, setDetail] = useState<RequestLog | null>(null);
+
+  // O atalho não é um segundo caminho de filtro (§11): ele escreve no mesmo
+  // estado do painel lateral, então o chip aparece, a URL guarda e o painel
+  // mostra o mesmo valor. É atalho para o campo do catálogo, não um filtro
+  // paralelo.
+  const outcome = logs.filters.values.outcome?.values?.[0] ?? NO_OUTCOME;
+  const setOutcome = (value: string): void => {
+    logs.filters.setValues({
+      ...logs.filters.values,
+      outcome: { values: [value] },
+    });
+    logs.setPage(0);
+  };
+
+  const outcomeOptions = useMemo<SegmentedOption[]>(
+    () =>
+      Object.entries(RequestOutcomeLabelKey).map(([value, key]) => ({
+        value,
+        label: t(key),
+      })),
+    [t],
+  );
 
   const columns = useMemo<ColumnDef<DataTableFeatures, RequestLog, unknown>[]>(
     () => [
@@ -37,12 +92,17 @@ export function RequestLogsPanel(): JSX.Element {
         cell: ({ getValue }) => new Date(String(getValue())).toLocaleString(),
       },
       {
-        accessorKey: "action",
+        id: "route",
         header: t("logs.route"),
         meta: { label: t("logs.route") },
         enableSorting: false,
-        cell: ({ getValue }) => (
-          <span className="font-mono text-xs">{String(getValue())}</span>
+        // A ação nomeada (`@Auditable("Login")`) diz mais que o caminho; sem
+        // ela, o caminho é o que identifica a requisição.
+        cell: ({ row }) => (
+          <span className="font-mono text-xs">
+            {row.original.action ??
+              `${row.original.method ?? ""} ${row.original.path ?? "—"}`}
+          </span>
         ),
       },
       {
@@ -54,6 +114,16 @@ export function RequestLogsPanel(): JSX.Element {
           return <Badge variant={statusVariant(status)}>{status ?? "—"}</Badge>;
         },
       },
+      {
+        accessorKey: "errorType",
+        header: t("logs.type"),
+        meta: { label: t("logs.type") },
+        enableSorting: false,
+        cell: ({ getValue }) => {
+          const type = getValue() as ErrorType | null;
+          return type == null ? "—" : t(ErrorTypeLabelKey[type]);
+        },
+      },
       {
         accessorKey: "durationMs",
         header: t("logs.duration"),
@@ -71,16 +141,26 @@ export function RequestLogsPanel(): JSX.Element {
         cell: ({ row }) => row.original.user?.name ?? t("logs.systemUser"),
       },
       {
-        accessorKey: "ipAddress",
-        header: t("logs.ip"),
-        meta: { label: t("logs.ip") },
+        id: "actions",
+        header: () => <div className="text-center">{t("common.actions")}</div>,
+        meta: { shrink: true },
+        enableHiding: false,
         enableSorting: false,
-        cell: ({ getValue }) => (
-          <span className="font-mono text-xs">{String(getValue() ?? "—")}</span>
+        cell: ({ row }) => (
+          <RowActions>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setDetail(row.original)}
+            >
+              <Eye className="h-4 w-4" />
+              {t("logs.viewDetails")}
+            </Button>
+          </RowActions>
         ),
       },
     ],
-     
+
     [t],
   );
 
@@ -105,20 +185,92 @@ export function RequestLogsPanel(): JSX.Element {
   };
 
   return (
-    <DataTable
-      columns={columns}
-      data={logs.rows}
-      getRowId={(r) => r.id}
-      storageKey="logs-requests"
-      loading={logs.loading}
-      manualPagination
-      rowCount={logs.total}
-      pagination={pagination}
-      onPaginationChange={onPaginationChange}
-      manualSorting
-      sorting={logs.sorting}
-      onSortingChange={onSortingChange}
+    <>
+      <DataTable
+        columns={columns}
+        data={logs.rows}
+        getRowId={(r) => r.id}
+        storageKey="logs-requests"
+        loading={logs.loading}
+        manualPagination
+        rowCount={logs.total}
+        pagination={pagination}
+        onPaginationChange={onPaginationChange}
+        manualSorting
+        sorting={logs.sorting}
+        onSortingChange={onSortingChange}
         filters={logs.filters}
-    />
+        // O desfecho é escolhido na barra: no painel e no chip seria a mesma
+        // coisa em três lugares. Continua no catálogo, que é quem serializa.
+        hiddenFilterFields={["outcome"]}
+        toolbar={
+          <SegmentedControl
+            // Altura dos botões `sm` de Filtros/Colunas, que dividem a linha.
+            className="h-9"
+            label={t("logs.outcome")}
+            options={outcomeOptions}
+            value={outcome}
+            onValueChange={setOutcome}
+          />
+        }
+      />
+
+      <Dialog open={!!detail} onOpenChange={(o) => !o && setDetail(null)}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>
+              {t("logs.detailsTitle")}
+              {detail?.statusCode != null && ` (${detail.statusCode})`}
+            </DialogTitle>
+          </DialogHeader>
+          {detail && (
+            <div className="flex min-w-0 flex-col gap-3 text-sm">
+              <div>
+                <span className="font-medium">{t("logs.route")}: </span>
+                <span className="font-mono text-xs">
+                  {detail.method} {detail.path}
+                </span>
+              </div>
+              {detail.errorMessage && (
+                <div>
+                  <span className="font-medium">{t("logs.message")}: </span>
+                  {detail.errorMessage}
+                </div>
+              )}
+              {detail.errorCode && (
+                <div>
+                  <span className="font-medium">{t("logs.errorCode")}: </span>
+                  <span className="font-mono text-xs">{detail.errorCode}</span>
+                </div>
+              )}
+              <div>
+                <span className="font-medium">{t("logs.user")}: </span>
+                {detail.user?.name ?? t("logs.systemUser")}
+              </div>
+              <div>
+                <span className="font-medium">{t("logs.requestId")}: </span>
+                <span className="font-mono text-xs">
+                  {detail.requestId ?? "—"}
+                </span>
+              </div>
+              {detail.userAgent && (
+                <div className="min-w-0">
+                  <span className="font-medium">{t("logs.userAgent")}: </span>
+                  <span className="font-mono text-xs">{detail.userAgent}</span>
+                </div>
+              )}
+              {detail.errorStack && (
+                <div className="min-w-0">
+                  <p className="mb-1 font-medium">{t("logs.stackTrace")}</p>
+                  <pre className="max-h-64 min-w-0 max-w-full overflow-auto rounded-md bg-muted p-3 text-xs">
+                    {detail.errorStack}
+                  </pre>
+                </div>
+              )}
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }

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

@@ -1,68 +1,30 @@
 import { api } from "#core/_services/api/axios.factory";
 import type { ListQuery } from "#core/_services/api/list-query";
 import { toListParams } from "#core/_services/api/list-query";
+import type { components } from "#core/_services/api/schema";
 
-export type ErrorType =
-  | "VALIDATION"
-  | "AUTH"
-  | "NOT_FOUND"
-  | "RATE_LIMIT"
-  | "DATABASE"
-  | "INTEGRATION"
-  | "INTERNAL";
-
-export interface LogUserRef {
-  id: string;
-  name: string;
-  email: string;
-}
-
-export interface RequestLog {
-  id: string;
-  createdAt: string;
-  userId?: string | null;
-  action: string;
-  method?: string | null;
-  path?: string | null;
-  ipAddress?: string | null;
-  statusCode?: number | null;
-  durationMs?: number | null;
-  requestId?: string | null;
-  user?: LogUserRef | null;
-}
-
-export interface ErrorLog {
-  id: string;
-  createdAt: string;
-  statusCode?: number | null;
-  type: ErrorType;
-  message: string;
-  stack?: string | null;
-  method?: string | null;
-  path?: string | null;
-  userId?: string | null;
-  ipAddress?: string | null;
-  requestId?: string | null;
-  user?: LogUserRef | null;
-}
+/** Tipos derivados do `openapi.json` (§5) — não redigitar a forma da resposta. */
+export type RequestLog = components["schemas"]["RequestLogResponse"];
+export type LogUserRef = components["schemas"]["AuditUserRefResponse"];
 
 export interface Paginated<T> {
   items: T[];
-  meta: { total: number; page: number; limit: number; totalPages: number };
+  meta: components["schemas"]["PaginationMetaResponse"];
 }
 
 export const logsService = {
+  /**
+   * Log de requisição — uma rota só.
+   *
+   * Antes eram `/audit/changes` e `/audit/errors`, duas tabelas com nove
+   * colunas iguais. Agora é uma linha por requisição, e a distinção entre
+   * sucesso e erro é o filtro `outcome`.
+   */
   listRequests(query: ListQuery) {
     return api
-      .get<Paginated<RequestLog>>("/audit/changes", {
+      .get<Paginated<RequestLog>>("/audit/requests", {
         params: toListParams(query),
       })
       .then((r) => r.data);
   },
-
-  listErrors(query: ListQuery) {
-    return api
-      .get<Paginated<ErrorLog>>("/audit/errors", { params: toListParams(query) })
-      .then((r) => r.data);
-  },
 };

package/src/features/notifications/components/notification-item.tsx

@@ -5,17 +5,19 @@ import type { JSX } from "react";
 
 import { formatDateTime } from "#core/_utils/format";
 import { useI18n } from "#core/contexts";
-import type {
-  NotificationType,
-  UserNotification,
-} from "#core/features/notifications/services/notifications.service";
+import { NotificationType } from "#core/features/notifications/enums/notification-type.enum";
+import type { UserNotification } from "#core/features/notifications/services/notifications.service";
 import { cn } from "#core/lib/utils";
 
 const ICONS: Record<NotificationType, JSX.Element> = {
-  INFO: <Info className="h-4 w-4 text-sky-500" />,
-  SUCCESS: <CheckCircle2 className="h-4 w-4 text-emerald-500" />,
-  WARNING: <AlertTriangle className="h-4 w-4 text-amber-500" />,
-  ERROR: <XCircle className="h-4 w-4 text-destructive" />,
+  [NotificationType.INFO]: <Info className="h-4 w-4 text-sky-500" />,
+  [NotificationType.SUCCESS]: (
+    <CheckCircle2 className="h-4 w-4 text-emerald-500" />
+  ),
+  [NotificationType.WARNING]: (
+    <AlertTriangle className="h-4 w-4 text-amber-500" />
+  ),
+  [NotificationType.ERROR]: <XCircle className="h-4 w-4 text-destructive" />,
 };
 
 export interface NotificationItemProps {

package/src/features/notifications/enums/notification-type.enum.ts

@@ -0,0 +1,8 @@
+// Severidade da notificação (espelha o NotificationType do backend:
+// notifications.type) — define ícone e cor.
+export enum NotificationType {
+  INFO = 0,
+  SUCCESS = 1,
+  WARNING = 2,
+  ERROR = 3,
+}

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

@@ -339,7 +339,8 @@ export function ProfileScreen(): JSX.Element {
 
       {/* diálogo: pede código TOTP para regenerar backup codes */}
       <Dialog open={regenOpen} onOpenChange={(o) => !o && setRegenOpen(false)}>
-        <DialogContent className="max-w-sm">
+        {/* Confirmação: um campo de seis dígitos não tem o que ampliar. */}
+        <DialogContent className="max-w-sm" expandable={false}>
           <DialogHeader>
             <DialogTitle>{t("auth.backupTitle")}</DialogTitle>
           </DialogHeader>