rl-core-front 0.3.0 → 0.5.0

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/hooks/use-request.ts

@@ -34,12 +34,24 @@ export interface RunOptions {
    * "Registro criado" (ex.: "Link de primeiro acesso enviado").
    */
   success?: RequestOperation | string;
+  /**
+   * Reage ao erro com o `errorCode` em mãos — para quando a tela precisa fazer
+   * algo além de mostrar a mensagem (ex.: voltar ao passo de credenciais
+   * quando a verificação de 2FA vence).
+   *
+   * Vem por callback e não pelo estado `errorCode` porque o estado só chega no
+   * render seguinte: quem lê logo depois do `await run(...)` pegaria o valor
+   * anterior.
+   */
+  onError?: (error: { code: string | null; message: string }) => void;
 }
 
 export interface UseRequestResult {
   run: <T>(fn: () => Promise<T>, options?: RunOptions) => Promise<T | null>;
   loading: boolean;
   error: string | null;
+  /** Código estável do último erro (`AppErrorCode` do backend), para render condicional. */
+  errorCode: string | null;
   setError: Dispatch<SetStateAction<string | null>>;
 }
 
@@ -53,6 +65,7 @@ export function useRequest(): UseRequestResult {
   const { notify } = useToast();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [errorCode, setErrorCode] = useState<string | null>(null);
 
   /**
    * Ordem de preferência da mensagem:
@@ -93,6 +106,7 @@ export function useRequest(): UseRequestResult {
     async <T>(fn: () => Promise<T>, options?: RunOptions): Promise<T | null> => {
       setLoading(true);
       setError(null);
+      setErrorCode(null);
       try {
         const result = await fn();
         if (options?.success) {
@@ -101,7 +115,12 @@ export function useRequest(): UseRequestResult {
         return result;
       } catch (e) {
         const err = e as AxiosError<ApiErrorBody>;
-        setError(messageFor(err.response?.data));
+        const body = err.response?.data;
+        const message = messageFor(body);
+        const code = body?.errorCode ?? null;
+        setError(message);
+        setErrorCode(code);
+        options?.onError?.({ code, message });
         return null;
       } finally {
         setLoading(false);
@@ -110,5 +129,5 @@ export function useRequest(): UseRequestResult {
     [messageFor, notify, successMessage],
   );
 
-  return { run, loading, error, setError };
+  return { run, loading, error, errorCode, setError };
 }

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",
@@ -200,6 +212,10 @@ export const en: Messages = {
     loginSuccess: "Signed in successfully",
     twoFactorConfigured: "2FA configured successfully",
     codeSent: "Code sent to your email",
+    verificationExpired:
+      "Verification expired. Sign in again to continue — if you already scanned the QR code, it is still valid.",
+    expiresIn: "Time to confirm: {time}",
+    expiredHint: "Time is up. Sign in again to continue.",
   },
   recovery: {
     forgotTitle: "Recover password",
@@ -240,6 +256,8 @@ export const en: Messages = {
     phone: "Phone",
     email: "Email",
     roles: "Roles",
+    team: "Team",
+    selectTeam: "Select the team",
     status: "Status",
     active: "Active",
     inactive: "Inactive",
@@ -273,13 +291,25 @@ export const en: Messages = {
     avatarUpdated: "Profile photo updated",
     avatarRemoved: "Profile photo removed",
   },
-  rbac: { title: "Roles & Permissions" },
+  rbac: {
+    title: "Roles & Permissions",
+    manager: "Manager",
+    noManager: "No manager",
+  },
   validation: {
     required: "Required field",
     email: "Invalid email",
     passwordStrong: "Min. 8 chars with uppercase, lowercase, number and symbol",
     passwordsNotMatch: "Passwords do not match",
     codeShort: "Code too short",
+    rules: {
+      strength: "Password strength",
+      minLength: "At least {count} characters",
+      lowercase: "At least one lowercase letter",
+      uppercase: "At least one uppercase letter",
+      digit: "At least one number",
+      special: "At least one special character (!@#$...)",
+    },
   },
   errors: {
     unexpected: "Unexpected error",
@@ -291,6 +321,7 @@ export const en: Messages = {
       PASSWORD_REUSED:
         "This password has already been used. Choose one you have never used in this system.",
       TOO_MANY_REQUESTS: "Too many attempts. Wait a moment and try again.",
+      PENDING_TOKEN_EXPIRED: "Verification expired. Sign in again to continue.",
     },
   },
 };

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",
@@ -201,6 +214,10 @@ export const pt = {
     loginSuccess: "Login realizado com sucesso",
     twoFactorConfigured: "2FA configurado com sucesso",
     codeSent: "Código enviado para seu email",
+    verificationExpired:
+      "A verificação expirou. Entre novamente para continuar — se você já escaneou o QR code, ele continua valendo.",
+    expiresIn: "Tempo para confirmar: {time}",
+    expiredHint: "O tempo acabou. Entre novamente para continuar.",
   },
   recovery: {
     forgotTitle: "Recuperar senha",
@@ -241,6 +258,8 @@ export const pt = {
     phone: "Telefone",
     email: "Email",
     roles: "Papéis",
+    team: "Equipe",
+    selectTeam: "Selecione a equipe",
     status: "Status",
     active: "Ativo",
     inactive: "Inativo",
@@ -275,13 +294,27 @@ export const pt = {
     avatarUpdated: "Foto de perfil atualizada",
     avatarRemoved: "Foto de perfil removida",
   },
-  rbac: { title: "Papéis & Permissões" },
+  rbac: {
+    title: "Papéis & Permissões",
+    manager: "Gerente",
+    noManager: "Sem gerente",
+  },
   validation: {
     required: "Campo obrigatório",
     email: "Email inválido",
     passwordStrong:
       "Mín. 8 caracteres com maiúscula, minúscula, número e símbolo",
     passwordsNotMatch: "As senhas não conferem",
+    // Uma linha por exigência — é o que o PasswordRequirements lista enquanto
+    // a pessoa digita. Devem descrever a mesma coisa que `passwordStrong`.
+    rules: {
+      strength: "Força da senha",
+      minLength: "No mínimo {count} caracteres",
+      lowercase: "Pelo menos uma letra minúscula",
+      uppercase: "Pelo menos uma letra maiúscula",
+      digit: "Pelo menos um número",
+      special: "Pelo menos um caractere especial (!@#$...)",
+    },
     codeShort: "Código muito curto",
   },
   errors: {
@@ -298,6 +331,8 @@ export const pt = {
         "Esta senha já foi utilizada. Escolha uma senha que você ainda não usou neste sistema.",
       TOO_MANY_REQUESTS:
         "Muitas tentativas em pouco tempo. Aguarde um instante e tente de novo.",
+      PENDING_TOKEN_EXPIRED:
+        "A verificação expirou. Entre novamente para continuar.",
     },
   },
 };

package/src/index.ts

@@ -26,12 +26,24 @@ 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
 // ---------------------------------------------------------------------------
 export * from "#core/components/ui";
 export { cn } from "#core/lib/utils";
+// O projeto que criar tela com escopo de equipe monta o par de códigos com ele,
+// em vez de repetir os sufixos à mão.
+export { anyOrTeam } from "#core/_utils/permission";
 
 // ---------------------------------------------------------------------------
 // Hooks de listagem, requisição e filtro
@@ -47,7 +59,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/styles/core.css

@@ -1,6 +1,6 @@
 /*
- * Design system do rl-core-front: tokens de cor, base do body, correção do
- * autofill e a barra de progresso do toast.
+ * Design system do rl-core-front: tipografia, tokens de cor, base do body,
+ * correção do autofill e a barra de progresso do toast.
  *
  * Um projeto que consome o pacote importa este arquivo no globals.css dele,
  * depois do `@import "tailwindcss"`:
@@ -10,6 +10,44 @@
  *   @import "rl-core-front/styles.css";
  */
 
+/*
+ * Poppins, hospedada no próprio pacote — sem CDN, sem requisição a terceiro e
+ * sem passo de instalação no projeto: quem importa este arquivo já recebe a
+ * fonte. Só o subset `latin`, que cobre português e inglês por inteiro; glifo
+ * fora dele cai no fallback da stack, que é o comportamento normal do browser.
+ *
+ * Não usamos `next/font` aqui de propósito. O pacote é publicado em
+ * código-fonte, e `next/font` é resolvido pelo build de QUEM INSTALA — a mesma
+ * armadilha do alias `@/` descrita no §4 do CLAUDE.md.
+ */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./fonts/poppins-latin-400.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('./fonts/poppins-latin-500.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./fonts/poppins-latin-600.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./fonts/poppins-latin-700.woff2') format('woff2');
+}
 
 @layer base {
   :root {
@@ -20,6 +58,20 @@
      * escuro. É a causa raiz do input branco.
      */
     color-scheme: light;
+
+    /*
+     * Tipografia — o ponto de extensão da fonte. O core entrega Poppins; um
+     * projeto troca a família inteira redefinindo esta variável no globals.css
+     * dele, inclusive apontando para o que o `next/font` gerou:
+     *
+     *   :root { --font-sans: var(--font-geist), sans-serif; }
+     *
+     * Fica no `:root` e não é redeclarada no `.dark`: fonte não muda com tema.
+     */
+    --font-sans: 'Poppins', ui-sans-serif, system-ui, -apple-system,
+      'Segoe UI', sans-serif;
+    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+
     --background: 210 20% 98%;
     --foreground: 222 47% 11%;
     --card: 0 0% 100%;
@@ -40,9 +92,32 @@
     --success-foreground: 0 0% 100%;
     --warning: 38 92% 50%;
     --warning-foreground: 0 0% 100%;
+
+    /*
+     * Versão legível como TEXTO. Verde e âmbar são claros por natureza: no tema
+     * claro, `--success`/`--warning` escritos sobre fundo branco dão ~2:1 de
+     * contraste, abaixo do mínimo de acessibilidade. Preenchimento continua
+     * usando a cor cheia; quem vira letra usa esta.
+     */
+    --success-strong: 142 72% 29%;
+    --warning-strong: 32 95% 30%;
     --border: 214 32% 91%;
     --input: 214 32% 91%;
     --ring: 211 80% 42%;
+
+    /*
+     * Trilha e pílula acesa dos controles segmentados (`Tabs` e
+     * `SegmentedControl`, que dividem a mesma pele).
+     *
+     * Existem como par próprio porque a regra que precisa valer é relativa: a
+     * pílula acesa tem que ser mais clara que a trilha em que ela está. Antes
+     * isto era `bg-muted` + `bg-card`, e no tema escuro a relação se invertia
+     * (trilha 18%, acesa 13%) — a opção selecionada ficava mais ESCURA que o
+     * fundo dela e só se distinguia pelo peso da fonte.
+     */
+    --track: 210 40% 94%;
+    --track-active: 0 0% 100%;
+
     --radius: 0.6rem;
   }
 
@@ -68,9 +143,17 @@
     --success-foreground: 0 0% 100%;
     --warning: 38 92% 55%;
     --warning-foreground: 213 30% 10%;
+
+    /* No escuro o problema se inverte: como texto, precisam clarear. */
+    --success-strong: 142 60% 62%;
+    --warning-strong: 38 92% 65%;
     --border: 213 20% 22%;
     --input: 213 20% 24%;
     --ring: 211 85% 60%;
+
+    /* Trilha abaixo do card (13%) e pílula acima dele: a acesa salta. */
+    --track: 213 25% 11%;
+    --track-active: 213 20% 24%;
   }
 }
 
@@ -80,7 +163,21 @@
   }
   body {
     @apply bg-background text-foreground;
+    font-family: var(--font-sans);
     font-feature-settings: 'rlig' 1, 'calt' 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /*
+   * Poppins é geométrica e larga: no tamanho de título, o espaçamento padrão
+   * abre demais. Fechar um pouco vale só do `xl` para cima — em texto corrido
+   * o mesmo ajuste prejudicaria a leitura.
+   */
+  h1,
+  h2,
+  h3 {
+    letter-spacing: -0.02em;
   }
 
   /*

package/tailwind-preset.ts

@@ -33,6 +33,15 @@ const preset: Omit<Config, 'content'> = {
       screens: { '2xl': '1400px' },
     },
     extend: {
+      /*
+       * Apontam para os tokens, e não para uma família fixa: é o que permite a
+       * um projeto trocar a fonte redefinindo `--font-sans` no CSS dele, sem
+       * tocar neste preset nem no pacote. Ver `styles/core.css`.
+       */
+      fontFamily: {
+        sans: ['var(--font-sans)'],
+        mono: ['var(--font-mono)'],
+      },
       colors: {
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
@@ -70,10 +79,18 @@ const preset: Omit<Config, 'content'> = {
         success: {
           DEFAULT: 'hsl(var(--success))',
           foreground: 'hsl(var(--success-foreground))',
+          /* `strong` é a variante para texto — ver core.css. */
+          strong: 'hsl(var(--success-strong))',
         },
         warning: {
           DEFAULT: 'hsl(var(--warning))',
           foreground: 'hsl(var(--warning-foreground))',
+          strong: 'hsl(var(--warning-strong))',
+        },
+        /* Trilha e pílula acesa dos controles segmentados — ver core.css. */
+        track: {
+          DEFAULT: 'hsl(var(--track))',
+          active: 'hsl(var(--track-active))',
         },
       },
       borderRadius: {

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