rl-core-front 0.2.0 → 0.4.0

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>

package/src/features/rbac/panels/groups-panel.tsx

@@ -27,6 +27,7 @@ import {
   SelectValue,
 } from "#core/components/ui";
 import { useAuth, useI18n } from "#core/contexts";
+import { RecordAuditButton } from "#core/features/audit/components";
 import {
   Group,
   rbacService,
@@ -251,13 +252,25 @@ export function GroupsPanel(): JSX.Element {
                 ))}
               </div>
             </div>
-            <DialogFooter className="gap-2">
-              <Button type="button" variant="outline" onClick={() => setOpen(false)}>
-                {t("common.cancel")}
-              </Button>
-              <Button type="submit" disabled={loading}>
-                {t("common.save")}
-              </Button>
+            <DialogFooter className="gap-2 sm:justify-between">
+              {/* Só na edição: registro que ainda não existe não tem histórico. */}
+              <div>
+                {editing && (
+                  <RecordAuditButton entity="Group" entityId={editing.id} />
+                )}
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setOpen(false)}
+                >
+                  {t("common.cancel")}
+                </Button>
+                <Button type="submit" disabled={loading}>
+                  {t("common.save")}
+                </Button>
+              </div>
             </DialogFooter>
           </DialogForm>
         </DialogContent>

package/src/features/users/components/user-form-dialog.tsx

@@ -22,6 +22,7 @@ import {
   Label,
 } from "#core/components/ui";
 import { useI18n } from "#core/contexts";
+import { RecordAuditButton } from "#core/features/audit/components";
 import {
   CreateUserPayload,
   Role,
@@ -172,13 +173,21 @@ export function UserFormDialog({
           />
           </div>
 
-          <DialogFooter className="gap-2">
-            <Button type="button" variant="outline" onClick={onClose}>
-              {t("common.cancel")}
-            </Button>
-            <Button type="submit" disabled={loading}>
-              {isEdit ? t("common.save") : t("common.create")}
-            </Button>
+          <DialogFooter className="gap-2 sm:justify-between">
+            {/* Só na edição: registro que ainda não existe não tem histórico. */}
+            <div>
+              {editing && (
+                <RecordAuditButton entity="User" entityId={editing.id} />
+              )}
+            </div>
+            <div className="flex gap-2">
+              <Button type="button" variant="outline" onClick={onClose}>
+                {t("common.cancel")}
+              </Button>
+              <Button type="submit" disabled={loading}>
+                {isEdit ? t("common.save") : t("common.create")}
+              </Button>
+            </div>
           </DialogFooter>
         </DialogForm>
       </DialogContent>

package/src/features/users/hooks/use-users.ts

@@ -68,9 +68,14 @@ export function useUsers(): UseUsersResult {
     }
   }, [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]);
 
   useEffect(() => {
     void run(() => usersService.listRoles()).then((r) => r && setRoles(r));
@@ -163,7 +168,9 @@ export function useUsers(): UseUsersResult {
     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,
     acting,
     setPage: list.setPage,
     setPageSize: list.setPageSize,

package/src/hooks/use-filters.ts

@@ -32,6 +32,15 @@ export interface FiltersState {
   validation: AdvancedValidation;
   /** JSON pronto para a query — `undefined` quando não há filtro. */
   filter: string | undefined;
+  /**
+   * A URL já foi lida e o `filter` abaixo é o definitivo.
+   *
+   * Antes disso `filter` é `undefined` porque ninguém leu a querystring ainda —
+   * e não porque a listagem esteja sem filtro. Quem busca precisa esperar, ou
+   * dispara uma consulta sem filtro cuja resposta pode chegar depois da certa e
+   * pintar a tela com tudo.
+   */
+  hydrated: boolean;
 }
 
 const QUERY_PARAM = "filter";
@@ -57,8 +66,16 @@ const writeToUrl = (encoded: string | undefined): void => {
  * Espelhar na URL faz o filtro sobreviver ao F5 e virar link compartilhável.
  * O espelho é `replaceState` e não `router.replace`: o filtro não é navegação,
  * e trocá-lo não deve empilhar histórico nem refazer o render da rota.
+ *
+ * `defaultValues` é o filtro de quem chega sem `?filter=` na URL — a listagem
+ * abre já filtrada. Vale só na hidratação: link com filtro manda, e limpar os
+ * filtros continua limpando (o padrão volta no F5 seguinte, que é o que
+ * "padrão" quer dizer).
  */
-export function useFilters(schemaUrl: string): FiltersState {
+export function useFilters(
+  schemaUrl: string,
+  defaultValues?: FilterValues,
+): FiltersState {
   const { schema, loading } = useFilterSchema(schemaUrl);
 
   const [mode, setModeState] = useState<FilterMode>("simple");
@@ -82,9 +99,14 @@ export function useFilters(schemaUrl: string): FiltersState {
       }
     } else if (raw) {
       setValuesState(parseFilterValues(raw, schema));
+    } else if (defaultValues) {
+      // Espelha na URL como qualquer outro filtro: sem isso a tela mostraria
+      // um estado que o link não carrega.
+      setValuesState(defaultValues);
+      writeToUrl(buildFilter(defaultValues, schema));
     }
     setHydrated(true);
-  }, [hydrated, loading, schema]);
+  }, [hydrated, loading, schema, defaultValues]);
 
   const setValues = useCallback(
     (next: FilterValues): void => {
@@ -144,5 +166,6 @@ export function useFilters(schemaUrl: string): FiltersState {
     setTree,
     validation,
     filter,
+    hydrated,
   };
 }

package/src/hooks/use-list-query.ts

@@ -5,12 +5,22 @@ import type { Dispatch, SetStateAction } from "react";
 import { useEffect, useMemo, useState } from "react";
 
 import type { ListQuery } from "#core/_services/api/list-query";
+import type { FilterValues } from "#core/_utils/filter";
 import type { FiltersState } from "#core/hooks/use-filters";
 import { useFilters } from "#core/hooks/use-filters";
 
 export interface UseListQueryResult {
   /** Pronta para o `.service.ts` da feature. */
   query: ListQuery;
+  /**
+   * A `query` já vale — **o hook da feature só pode buscar depois disso**.
+   *
+   * Enquanto é `false`, o filtro da URL ainda não foi lido e a `query` sairia
+   * sem ele. Buscar assim mesmo faz duas requisições por carregamento, e a
+   * errada pode chegar por último: a tela abre mostrando tudo com o filtro
+   * marcado na barra.
+   */
+  ready: boolean;
   page: number;
   pageSize: number;
   sorting: SortingState;
@@ -30,8 +40,10 @@ export interface UseListQueryResult {
 export function useListQuery(
   schemaUrl: string,
   initialPageSize = 10,
+  /** Filtro de quem chega sem `?filter=` — a listagem abre já filtrada. */
+  defaultFilterValues?: FilterValues,
 ): UseListQueryResult {
-  const filters = useFilters(schemaUrl);
+  const filters = useFilters(schemaUrl, defaultFilterValues);
   const { filter } = filters;
 
   const [page, setPage] = useState(0);
@@ -58,6 +70,7 @@ export function useListQuery(
 
   return {
     query,
+    ready: filters.hydrated,
     page,
     pageSize,
     sorting,

package/src/i18n/messages/en.ts

@@ -13,11 +13,20 @@ export const en: Messages = {
     audit: "Audit",
   },
   logs: {
+    outcomeSuccess: "Success",
+    outcomeError: "Error",
+    outcomeAborted: "Aborted",
+    errorValidation: "Validation",
+    errorAuth: "Authentication",
+    errorNotFound: "Not found",
+    errorRateLimit: "Rate limit",
+    errorDatabase: "Database",
+    errorIntegration: "Integration",
+    errorInternal: "Internal",
+    outcome: "Outcome",
     title: "Logs",
     subtitle:
-      "Every API request — success and error, route, status and duration.",
-    tabRequests: "Requests",
-    tabErrors: "Errors",
+      "Errors, slow requests and auditable actions — route, status and duration.",
     date: "Date/time",
     route: "Route",
     status: "Status",
@@ -29,10 +38,14 @@ export const en: Messages = {
     type: "Type",
     message: "Message",
     viewDetails: "View details",
-    detailsTitle: "Error details",
+    detailsTitle: "Request details",
+    errorCode: "Error code",
+    userAgent: "User agent",
     stackTrace: "Stack trace",
   },
   auditTrail: {
+    recordHistory: "Change history",
+    noRecordHistory: "This record has no changes yet.",
     title: "Audit Trail",
     subtitle: "Data change history — who changed what, and when.",
     entity: "Entity",
@@ -87,7 +100,6 @@ export const en: Messages = {
     hint: "Fill in only the fields you want to use. All of them are combined with AND.",
     apply: "Apply",
     clear: "Clear",
-    clearAll: "Clear all",
     empty: "This listing has no filters yet.",
     noOptions: "No options available",
     all: "All",

package/src/i18n/messages/pt.ts

@@ -11,10 +11,20 @@ export const pt = {
     audit: "Auditoria",
   },
   logs: {
+    outcomeSuccess: "Sucesso",
+    outcomeError: "Erro",
+    outcomeAborted: "Abortada",
+    errorValidation: "Validação",
+    errorAuth: "Autenticação",
+    errorNotFound: "Não encontrado",
+    errorRateLimit: "Limite de requisições",
+    errorDatabase: "Banco de dados",
+    errorIntegration: "Integração",
+    errorInternal: "Interno",
+    outcome: "Desfecho",
     title: "Logs",
-    subtitle: "Toda requisição à API — sucesso e erro, rota, status e duração.",
-    tabRequests: "Requisições",
-    tabErrors: "Erros",
+    subtitle:
+      "Erros, requisições lentas e ações auditáveis — rota, status e duração.",
     date: "Data/hora",
     route: "Rota",
     status: "Status",
@@ -26,10 +36,14 @@ export const pt = {
     type: "Tipo",
     message: "Mensagem",
     viewDetails: "Ver detalhes",
-    detailsTitle: "Detalhes do erro",
+    detailsTitle: "Detalhes da requisição",
+    errorCode: "Código do erro",
+    userAgent: "User agent",
     stackTrace: "Stack trace",
   },
   auditTrail: {
+    recordHistory: "Histórico de alterações",
+    noRecordHistory: "Este registro ainda não sofreu alterações.",
     title: "Trilha de Auditoria",
     subtitle: "Histórico de alterações de dados — quem mudou o quê, e quando.",
     entity: "Entidade",
@@ -88,7 +102,6 @@ export const pt = {
     hint: "Preencha só os campos que quiser usar. Tudo é combinado com E.",
     apply: "Aplicar",
     clear: "Limpar",
-    clearAll: "Limpar tudo",
     empty: "Esta listagem ainda não tem filtros.",
     noOptions: "Nenhuma opção disponível",
     all: "Todos",

package/src/index.ts

@@ -26,6 +26,15 @@ export { UsersScreen } from "#core/features/users/users-screen";
 // ---------------------------------------------------------------------------
 export * from "#core/components";
 export * from "#core/contexts";
+// Histórico de alterações de um registro, para a tela de edição do projeto.
+export type {
+  AuditDiffProps,
+  RecordAuditButtonProps,
+} from "#core/features/audit/components";
+export {
+  AuditDiff,
+  RecordAuditButton,
+} from "#core/features/audit/components";
 
 // ---------------------------------------------------------------------------
 // Primitivos de UI — agnósticos de domínio
@@ -47,7 +56,9 @@ export { useFilters } from "#core/hooks/use-filters";
 export type { UseListQueryResult } from "#core/hooks/use-list-query";
 export { useListQuery } from "#core/hooks/use-list-query";
 export type { RunOptions, UseRequestResult } from "#core/hooks/use-request";
-export { useRequest } from "#core/hooks/use-request";
+// RequestOperation é enum (valor, não só tipo): sem ele o projeto não consegue
+// pedir o toast padrão de criado/alterado/removido que o core já traduz.
+export { RequestOperation, useRequest } from "#core/hooks/use-request";
 
 // ---------------------------------------------------------------------------
 // HTTP e traduções

package/src/components/ui/filter-chips.tsx

@@ -1,88 +0,0 @@
-"use client";
-
-import { SlidersHorizontal, X } from "lucide-react";
-import type { JSX } from "react";
-
-import { countConditions } from "#core/_utils/advanced-filter";
-import { describeValue, hasValue } from "#core/_utils/filter";
-import { Button } from "#core/components/ui/button";
-import { useFieldLabel } from "#core/components/ui/filter-sheet";
-import { useI18n } from "#core/contexts";
-import type { FiltersState } from "#core/hooks/use-filters";
-
-export interface FilterChipsProps {
-  filters: FiltersState;
-}
-
-/**
- * Filtros ativos em forma de chip, cada um removível.
- *
- * Existe para o usuário não precisar abrir o painel só para lembrar o que está
- * filtrando — e para não olhar uma tabela vazia sem saber por quê. No modo
- * avançado a expressão não cabe num chip por campo, então vira um resumo com a
- * contagem de condições.
- */
-export function FilterChips({ filters }: FilterChipsProps): JSX.Element | null {
-  const { t, locale } = useI18n();
-  const labelFor = useFieldLabel();
-  const { schema, values, mode, tree } = filters;
-
-  if (mode === "advanced") {
-    const total = tree ? countConditions(tree) : 0;
-    if (total === 0 || !filters.filter) {
-      return null;
-    }
-    return (
-      <div className="mb-3 flex flex-wrap items-center gap-2">
-        <span className="flex items-center gap-1.5 rounded-full border border-border bg-muted/40 px-3 py-1 text-xs">
-          <SlidersHorizontal className="h-3 w-3" />
-          {t("filters.advancedSummary", { count: total })}
-        </span>
-        <Button variant="ghost" size="sm" onClick={() => filters.setMode("simple")}>
-          {t("filters.clearAll")}
-        </Button>
-      </div>
-    );
-  }
-
-  const active = schema.filter((field) => hasValue(values[field.field]));
-  if (active.length === 0) {
-    return null;
-  }
-
-  const remove = (field: string): void => {
-    const next = { ...values };
-    delete next[field];
-    filters.setValues(next);
-  };
-
-  const labels = {
-    from: t("filters.fromChip"),
-    to: t("filters.toChip"),
-    yes: t("common.yes"),
-    no: t("common.no"),
-    locale,
-  };
-
-  return (
-    <div className="mb-3 flex flex-wrap items-center gap-2">
-      {active.map((field) => (
-        <button
-          key={field.field}
-          type="button"
-          onClick={() => remove(field.field)}
-          className="flex items-center gap-1.5 rounded-full border border-border bg-muted/40 px-3 py-1 text-xs transition-colors hover:bg-muted"
-        >
-          <span className="text-muted-foreground">{labelFor(field)}:</span>
-          <span className="font-medium">
-            {describeValue(field, values[field.field], labels)}
-          </span>
-          <X className="h-3 w-3" />
-        </button>
-      ))}
-      <Button variant="ghost" size="sm" onClick={() => filters.setValues({})}>
-        {t("filters.clearAll")}
-      </Button>
-    </div>
-  );
-}

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

@@ -1,65 +0,0 @@
-"use client";
-
-import type { SortingState } from "@tanstack/react-table";
-import {
-  Dispatch,
-  SetStateAction,
-  useCallback,
-  useEffect,
-  useState,
-} from "react";
-
-import { ErrorLog, logsService } 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";
-
-export interface UseErrorLogsResult {
-  rows: ErrorLog[];
-  total: number;
-  page: number;
-  pageSize: number;
-  sorting: SortingState;
-  loading: boolean;
-  setPage: Dispatch<SetStateAction<number>>;
-  setPageSize: Dispatch<SetStateAction<number>>;
-  setSorting: Dispatch<SetStateAction<SortingState>>;
-  /** Filtros dinâmicos — repassar para o `DataTable`. */
-  filters: FiltersState;
-  refresh: () => Promise<void>;
-}
-
-export function useErrorLogs(): UseErrorLogsResult {
-  const { run, loading } = useRequest();
-
-  const list = useListQuery("/audit/errors/filter-schema", 20);
-
-  const [rows, setRows] = useState<ErrorLog[]>([]);
-  const [total, setTotal] = useState(0);
-
-  const fetch = useCallback(async () => {
-    const res = await run(() => logsService.listErrors(list.query));
-    if (res) {
-      setRows(res.items);
-      setTotal(res.meta.total);
-    }
-  }, [run, list.query]);
-
-  useEffect(() => {
-    void fetch();
-  }, [fetch]);
-
-  return {
-    rows,
-    total,
-    page: list.page,
-    pageSize: list.pageSize,
-    sorting: list.sorting,
-    loading,
-    setPage: list.setPage,
-    setPageSize: list.setPageSize,
-    setSorting: list.setSorting,
-    filters: list.filters,
-    refresh: fetch,
-  };
-}