rl-core-front 0.8.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Telas e componentes Next.js do core: login com 2FA, usu\u00e1rios, RBAC, auditoria, logs e listagens com filtro din\u00e2mico",
   "author": "Rodrigo Liberti",
   "license": "MIT",

package/src/_utils/format.ts

@@ -33,3 +33,43 @@ export function maskPhoneBR(value: string): string {
   if (d.length <= 10) {return d.replace(/(\d{2})(\d{4})(\d{0,4})/, "($1) $2-$3");}
   return d.replace(/(\d{2})(\d{5})(\d{0,4})/, "($1) $2-$3");
 }
+
+/** Teto do campo de dinheiro: 999.999.999,99 — nove dígitos e os dois centavos. */
+const MAX_DIGITOS_MOEDA = 11;
+
+/**
+ * Máscara de dinheiro BR enquanto digita: 123456 vira 1.234,56
+ *
+ * Os dígitos entram **pela direita**, como em caixa de supermercado: cada tecla
+ * empurra o valor uma casa, e a vírgula nunca precisa ser digitada.
+ *
+ * Campo de texto e não `<input type="number">`: o numérico não aceita máscara,
+ * mostra setas de incremento e usa ponto decimal — três coisas erradas para um
+ * valor em reais.
+ */
+export function maskCurrencyBR(value: string): string {
+  const digitos = value.replace(/\D/g, "").slice(0, MAX_DIGITOS_MOEDA);
+  if (digitos === "") {
+    return "";
+  }
+
+  // `padStart` é o que faz o primeiro dígito virar centavo em vez de real.
+  const comCentavos = digitos.padStart(3, "0");
+  const inteiro = Number(comCentavos.slice(0, -2));
+
+  return `${inteiro.toLocaleString("pt-BR")},${comCentavos.slice(-2)}`;
+}
+
+/** Da máscara para o número que vai à API: `1.234,56` vira `1234.56`. */
+export function parseCurrencyBR(value: string): number {
+  const numero = Number(value.replace(/\./g, "").replace(",", "."));
+  return Number.isFinite(numero) ? numero : 0;
+}
+
+/** Do número que veio da API para a máscara: `1234.5` vira `1.234,50`. */
+export function formatCurrencyBR(value: number | null | undefined): string {
+  if (value === null || value === undefined) {
+    return "";
+  }
+  return maskCurrencyBR(String(Math.round(value * 100)));
+}

package/src/components/ui/combobox.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+import { Check, ChevronDown, X } from "lucide-react";
+import type { JSX } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import { Badge } from "#core/components/ui/badge";
+import { Button } from "#core/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "#core/components/ui/dropdown-menu";
+import { Input } from "#core/components/ui/input";
+import { useI18n } from "#core/contexts";
+
+/** O mínimo para desenhar uma opção: o que identifica e o que se lê. */
+export interface ComboboxOption {
+  id: string;
+  name: string;
+}
+
+export interface ComboboxProps {
+  options: ComboboxOption[];
+  /** Sempre lista — o modo de um valor usa zero ou um item. */
+  value: string[];
+  onChange: (ids: string[]) => void;
+  multiple?: boolean;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  disabled?: boolean;
+}
+
+/**
+ * Escolha com busca, de um valor ou de vários.
+ *
+ * O que o `Select` não faz: com trinta opções, uma lista sem campo de busca
+ * vira caça ao tesouro, e o `Select` do Radix só tem a busca por digitação —
+ * que salta para a opção e não filtra nada.
+ *
+ * Um componente para os dois modos porque a diferença é uma linha na hora de
+ * marcar: a busca, a lista e o painel são os mesmos. Dois componentes seriam o
+ * mesmo arquivo duas vezes.
+ *
+ * Só escolhe — não cria. Quem cadastra o item nem sempre é quem pode cadastrar
+ * na origem, e um "criar" aqui daria um botão que falha na cara de quem clicou.
+ */
+export function Combobox({
+  options,
+  value,
+  onChange,
+  multiple = false,
+  placeholder,
+  searchPlaceholder,
+  emptyMessage,
+  disabled,
+}: ComboboxProps): JSX.Element {
+  const { t } = useI18n();
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const selected = useMemo(
+    () => options.filter((option) => value.includes(option.id)),
+    [options, value],
+  );
+
+  const termo = search.trim();
+  const visiveis = useMemo(
+    () =>
+      options.filter((option) =>
+        option.name.toLowerCase().includes(termo.toLowerCase()),
+      ),
+    [options, termo],
+  );
+
+  const alternar = (id: string): void => {
+    if (!multiple) {
+      onChange([id]);
+      setOpen(false);
+      setSearch("");
+      return;
+    }
+
+    onChange(
+      value.includes(id)
+        ? value.filter((atual) => atual !== id)
+        : [...value, id],
+    );
+  };
+
+  // O Radix leva o foco para o menu ao abrir, e isso vence o `autoFocus` do
+  // campo de busca — sem devolver o foco, só depois de clicar nele a digitação
+  // pesquisa. `onOpenAutoFocus` é prop privada do `DropdownMenu` e não dá para
+  // interceptar, então o foco volta no quadro seguinte, quando o controle de
+  // foco do Radix já agiu.
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const quadro = requestAnimationFrame(() => inputRef.current?.focus());
+    return () => cancelAnimationFrame(quadro);
+  }, [open]);
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild disabled={disabled}>
+        <Button
+          type="button"
+          variant="outline"
+          className="h-auto min-h-9 w-full justify-between gap-2 py-1.5 font-normal"
+          // Chegando por Tab, digitar abre o menu já com a letra na busca. Sem
+          // isto o campo só responde a Enter, Espaço ou seta, e quem vem
+          // digitando do campo anterior perde o que escreveu.
+          onKeyDown={(event) => {
+            if (
+              event.key.length !== 1 ||
+              event.ctrlKey ||
+              event.metaKey ||
+              event.altKey
+            ) {
+              return;
+            }
+            event.preventDefault();
+            setSearch(event.key);
+            setOpen(true);
+          }}
+        >
+          <span className="flex flex-1 flex-wrap items-center gap-1 text-left">
+            {selected.length === 0 && (
+              <span className="text-muted-foreground">
+                {placeholder ?? t("common.select")}
+              </span>
+            )}
+            {multiple
+              ? selected.map((option) => (
+                  <Badge key={option.id} variant="secondary" className="gap-1">
+                    {option.name}
+                    <X
+                      className="h-3 w-3 cursor-pointer"
+                      onClick={(event) => {
+                        // Sem isto, tirar um selo abriria o menu junto.
+                        event.stopPropagation();
+                        onChange(value.filter((id) => id !== option.id));
+                      }}
+                    />
+                  </Badge>
+                ))
+              : selected.map((option) => (
+                  <span key={option.id}>{option.name}</span>
+                ))}
+          </span>
+          <ChevronDown className="h-4 w-4 shrink-0 opacity-60" />
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        /*
+         * Cara de select: mesma largura do campo e aberto **por cima** dele.
+         *
+         * A largura precisa de `var(...)` por extenso — o atalho
+         * `w-[--variavel]` era do Tailwind 3 e não gera CSS na 4. A margem
+         * negativa é o que sobrepõe: com `sideOffset` zero o painel encosta na
+         * borda do campo, e subir a altura dele cobre o campo. O `data-[side]`
+         * cuida da abertura para cima, quando não há espaço embaixo.
+         */
+        className="max-h-72 w-(--radix-dropdown-menu-trigger-width) overflow-y-auto p-1 data-[side=bottom]:-mt-(--radix-dropdown-menu-trigger-height) data-[side=top]:-mb-(--radix-dropdown-menu-trigger-height)"
+        align="start"
+        sideOffset={0}
+      >
+        <div className="p-1">
+          <Input
+            ref={inputRef}
+            value={search}
+            placeholder={searchPlaceholder ?? t("common.search")}
+            onChange={(event) => setSearch(event.target.value)}
+            // O menu do Radix tem busca por digitação própria: sem parar o
+            // evento aqui, digitar "c" pularia o foco para o item "Chase" em
+            // vez de escrever no campo.
+            onKeyDown={(event) => {
+              event.stopPropagation();
+              if (event.key !== "Enter") {
+                return;
+              }
+              // Enter escolhe o que a busca deixou na tela — sem isto, filtrar
+              // pelo teclado ainda terminaria no mouse.
+              event.preventDefault();
+              if (visiveis[0]) {
+                alternar(visiveis[0].id);
+              }
+            }}
+          />
+        </div>
+
+        {visiveis.map((option) => (
+          <button
+            key={option.id}
+            type="button"
+            className="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
+            onClick={() => alternar(option.id)}
+          >
+            <span className="truncate">{option.name}</span>
+            {value.includes(option.id) && <Check className="h-4 w-4" />}
+          </button>
+        ))}
+
+        {visiveis.length === 0 && (
+          <p className="px-2 py-3 text-center text-sm text-muted-foreground">
+            {emptyMessage ?? t("common.noResults")}
+          </p>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/ui/data-table.tsx

@@ -22,9 +22,9 @@ import {
 import {
   ArrowDown,
   ArrowUp,
+  ArrowUpDown,
   ChevronLeft,
   ChevronRight,
-  ChevronsUpDown,
   Filter,
   SlidersHorizontal,
 } from "lucide-react";
@@ -307,11 +307,14 @@ export function DataTable<T extends RowData>({
                             header.getContext(),
                           )}
                           {sorted === "asc" ? (
-                            <ArrowUp className="h-3.5 w-3.5" />
+                            <ArrowUp className="h-3.5 w-3.5 text-primary" />
                           ) : sorted === "desc" ? (
-                            <ArrowDown className="h-3.5 w-3.5" />
+                            <ArrowDown className="h-3.5 w-3.5 text-primary" />
                           ) : (
-                            <ChevronsUpDown className="h-3.5 w-3.5 opacity-50" />
+                            // Seta dupla apagada na coluna livre e seta única
+                            // em destaque na que ordena: sem a cor, achar a
+                            // coluna ativa exige comparar o desenho de todas.
+                            <ArrowUpDown className="h-3.5 w-3.5 opacity-40" />
                           )}
                         </button>
                       ) : (

package/src/components/ui/date-picker.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import { Calendar, ChevronLeft, ChevronRight } from "lucide-react";
+import type { JSX } from "react";
+import { useEffect, useRef, useState } from "react";
+
+import {
+  addMonths,
+  formatDay,
+  fromIsoDay,
+  isSameDay,
+  isSameMonth,
+  monthGrid,
+  monthLabel,
+  today,
+  toIsoDay,
+  weekdayLabels,
+} from "#core/_utils/calendar";
+import { Button } from "#core/components/ui/button";
+import { useI18n } from "#core/contexts";
+import { cn } from "#core/lib/utils";
+
+export interface DatePickerProps {
+  /** `"yyyy-MM-dd"` — o mesmo formato que o backend recebe e devolve. */
+  value?: string;
+  onChange: (day: string | undefined) => void;
+  disabled?: boolean;
+  /** Descreve o campo para quem usa leitor de tela. */
+  label?: string;
+  placeholder?: string;
+}
+
+/**
+ * Escolha de **uma** data, no mesmo calendário do `DateRangePicker`.
+ *
+ * Existe pelo mesmo motivo que o irmão de intervalo: o `<input type="date">`
+ * abre um calendário do navegador, que não aceita tema nem largura e muda de
+ * cara entre Chrome, Safari e Firefox — no meio de um formulário escuro, ele é
+ * a única coisa clara na tela.
+ *
+ * O valor continua sendo a string ISO do dia, e não `Date`: é o que o backend
+ * grava (`char(10)`) e o que evita a viagem por fuso que transforma dia 1º às
+ * 00:00 locais no dia 30 em UTC.
+ */
+export function DatePicker({
+  value,
+  onChange,
+  disabled,
+  label,
+  placeholder,
+}: DatePickerProps): JSX.Element {
+  const { t, locale } = useI18n();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+
+  const selected = fromIsoDay(value);
+  const [month, setMonth] = useState<Date>(() => selected ?? today());
+
+  // Fecha ao clicar fora e no ESC — o painel é flutuante e não tem overlay
+  // próprio, então quem fecha é o documento.
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onPointerDown = (event: MouseEvent): void => {
+      if (!containerRef.current?.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+
+  const pickDay = (day: Date): void => {
+    onChange(toIsoDay(day));
+    setOpen(false);
+  };
+
+  const dayClass = (day: Date): string => {
+    if (selected && isSameDay(day, selected)) {
+      return "bg-primary text-primary-foreground font-semibold";
+    }
+    if (isSameDay(day, today())) {
+      return "border border-primary/50";
+    }
+    return isSameMonth(day, month) ? "" : "text-muted-foreground/60";
+  };
+
+  return (
+    <div className="relative" ref={containerRef}>
+      <button
+        type="button"
+        disabled={disabled}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        aria-label={label}
+        onClick={() => setOpen((current) => !current)}
+        className="flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors hover:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <span className={cn("truncate", !value && "text-muted-foreground")}>
+          {value ? formatDay(value, locale) : (placeholder ?? t("filters.selectDate"))}
+        </span>
+        <Calendar className="h-4 w-4 shrink-0 text-muted-foreground" />
+      </button>
+
+      {open && (
+        <div
+          role="dialog"
+          // Largura do campo, e não fixa: o painel é a continuação dele, e
+          // solto no meio de um formulário de duas colunas ficava torto.
+          className="absolute left-0 z-50 mt-2 w-full min-w-[17rem] rounded-xl border border-border bg-popover p-3 text-popover-foreground shadow-lg"
+        >
+          <div className="mb-2 flex items-center justify-between">
+            <Button
+              type="button"
+              variant="ghost"
+              size="iconSm"
+              aria-label={t("filters.previousMonth")}
+              onClick={() => setMonth(addMonths(month, -1))}
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <span className="text-sm font-medium capitalize">
+              {monthLabel(month, locale)}
+            </span>
+            <Button
+              type="button"
+              variant="ghost"
+              size="iconSm"
+              aria-label={t("filters.nextMonth")}
+              onClick={() => setMonth(addMonths(month, 1))}
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+
+          <div className="mb-1 grid grid-cols-7 text-center text-xs text-muted-foreground">
+            {weekdayLabels(locale).map((weekday) => (
+              <span key={weekday} className="capitalize">
+                {weekday}
+              </span>
+            ))}
+          </div>
+
+          <div className="grid grid-cols-7 gap-y-1 justify-items-center">
+            {monthGrid(month).map((day) => (
+              <button
+                key={day.toISOString()}
+                type="button"
+                onClick={() => pickDay(day)}
+                className={cn(
+                  "flex h-8 w-8 items-center justify-center rounded-full text-sm transition-colors hover:bg-accent",
+                  dayClass(day),
+                )}
+              >
+                {day.getDate()}
+              </button>
+            ))}
+          </div>
+
+          <div className="mt-2 flex justify-between border-t border-border pt-2">
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                pickDay(today());
+                setMonth(today());
+              }}
+            >
+              {t("filters.today")}
+            </Button>
+            {value && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  onChange(undefined);
+                  setOpen(false);
+                }}
+              >
+                {t("filters.clear")}
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ui/index.ts

@@ -6,8 +6,10 @@ export * from "./button";
 export * from "./card";
 export * from "./checkbox";
 export * from "./column-visibility-modal";
+export * from "./combobox";
 export * from "./confirm-dialog";
 export * from "./data-table";
+export * from "./date-picker";
 export * from "./date-range-picker";
 export * from "./dialog";
 export * from "./dropdown-menu";

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

@@ -76,7 +76,6 @@ export function AuditScreen(): JSX.Element {
         id: "user",
         header: t("auditTrail.user"),
         meta: { label: t("auditTrail.user") },
-        enableSorting: false,
         cell: ({ row }) =>
           row.original.user?.name ?? t("auditTrail.systemUser"),
       },
@@ -84,7 +83,6 @@ export function AuditScreen(): JSX.Element {
         accessorKey: "ipAddress",
         header: t("auditTrail.ip"),
         meta: { label: t("auditTrail.ip") },
-        enableSorting: false,
         cell: ({ getValue }) => (
           <span className="font-mono text-xs">{String(getValue() ?? "—")}</span>
         ),

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

@@ -95,7 +95,6 @@ export function RequestLogsPanel(): JSX.Element {
         id: "route",
         header: t("logs.route"),
         meta: { label: t("logs.route") },
-        enableSorting: false,
         // A ação nomeada (`@Auditable("Login")`) diz mais que o caminho; sem
         // ela, o caminho é o que identifica a requisição.
         cell: ({ row }) => (
@@ -118,7 +117,6 @@ export function RequestLogsPanel(): JSX.Element {
         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]);
@@ -137,7 +135,6 @@ export function RequestLogsPanel(): JSX.Element {
         id: "user",
         header: t("logs.user"),
         meta: { label: t("logs.user") },
-        enableSorting: false,
         cell: ({ row }) => row.original.user?.name ?? t("logs.systemUser"),
       },
       {

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

@@ -50,7 +50,10 @@ const THEME_OPTIONS: { value: ColorPreference; key: string }[] = [
 export function ProfileScreen(): JSX.Element {
   const { user, logout, refreshProfile } = useAuth();
   const { preference, setPreference } = useColorMode();
-  const { run, loading } = useRequest();
+  // `error` vinha sendo ignorado: o `useRequest` guarda a mensagem do servidor
+  // mas não notifica, então um 400 de validação ficava invisível — a tela não
+  // salvava e nada dizia por quê.
+  const { run, loading, error, setError } = useRequest();
   // useRequest próprio da troca de senha: o `run` compartilhado da tela zeraria
   // esse erro a cada outra ação (salvar perfil, trocar avatar).
   const password = useRequest();
@@ -82,7 +85,37 @@ export function ProfileScreen(): JSX.Element {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const [formErrors, setFormErrors] = useState<Partial<typeof form>>({});
+
+  /**
+   * As mesmas regras do `UpdateProfileCommand`, do lado de cá.
+   *
+   * Telefone fica de fora quando está em branco: ele é opcional, e o backend
+   * lê o vazio como "apagar o telefone".
+   */
+  const validateProfile = (): boolean => {
+    const errors: Partial<typeof form> = {};
+
+    if (form.name.trim().length < 2) {
+      errors.name = t("validation.minLength", { count: 2 });
+    }
+    if (form.lastName.trim().length < 2) {
+      errors.lastName = t("validation.minLength", { count: 2 });
+    }
+    if (form.phone.trim() !== "" && form.phone.trim().length < 8) {
+      errors.phone = t("validation.minLength", { count: 8 });
+    }
+
+    setFormErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
   const saveProfile = async (): Promise<void> => {
+    setError(null);
+    if (!validateProfile()) {
+      return;
+    }
+
     const res = await run(() => authService.updateProfile(form), {
       success: t("profile.saved"),
     });
@@ -212,19 +245,22 @@ export function ProfileScreen(): JSX.Element {
             </div>
 
             <h2 className="text-lg font-semibold">{t("profile.data")}</h2>
-            <Field label={t("users.name")}>
+            <Field label={t("users.name")} error={formErrors.name}>
               <Input
                 value={form.name}
                 onChange={(e) => setForm({ ...form, name: e.target.value })}
               />
             </Field>
-            <Field label={t("users.lastName")}>
+            <Field label={t("users.lastName")} error={formErrors.lastName}>
               <Input
                 value={form.lastName}
                 onChange={(e) => setForm({ ...form, lastName: e.target.value })}
               />
             </Field>
-            <Field label={t("users.phone")}>
+            <Field
+              label={`${t("users.phone")} (${t("common.optional")})`}
+              error={formErrors.phone}
+            >
               <Input
                 placeholder="(11) 90000-0000"
                 value={form.phone}
@@ -233,6 +269,13 @@ export function ProfileScreen(): JSX.Element {
                 }
               />
             </Field>
+
+            {/* O que o servidor recusou — regra que o cliente não conhece. */}
+            {error && (
+              <Alert variant="error" className="text-sm">
+                {error}
+              </Alert>
+            )}
             <p className="text-sm text-muted-foreground">
               <strong>{t("users.email")}:</strong> {user?.email} ·{" "}
               <strong>{t("dashboard.roles")}:</strong> {user?.roles.join(", ")}

package/src/features/queues/hooks/use-queue-jobs.ts

@@ -1,5 +1,6 @@
 "use client";
 
+import type { SortingState } from "@tanstack/react-table";
 import { useCallback, useEffect, useState } from "react";
 
 import {
@@ -25,9 +26,11 @@ export interface UseQueueJobsResult {
   page: number;
   pageSize: number;
   state: QueueJobState;
+  sorting: SortingState;
   loading: boolean;
   setPage: (page: number) => void;
   setPageSize: (size: number) => void;
+  setSorting: (sorting: SortingState) => void;
   setState: (state: QueueJobState) => void;
   refresh: () => Promise<void>;
   retry: (id: string) => Promise<void>;
@@ -49,11 +52,22 @@ export function useQueueJobs(): UseQueueJobsResult {
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(20);
   const [state, setStateValue] = useState<QueueJobState>(QueueJobState.FAILED);
+  // Sem ordem escolhida, a lista sai na ordem do Redis — que é a mais recente
+  // primeiro e não custa varredura nenhuma no backend.
+  const [sorting, setSorting] = useState<SortingState>([]);
 
   const fetch = useCallback(async (): Promise<void> => {
     const [list, summary] = await Promise.all([
       // O `page` da tabela é base zero; o da API, base um.
-      run(() => queuesService.list({ state, page: page + 1, limit: pageSize })),
+      run(() =>
+        queuesService.list({
+          state,
+          page: page + 1,
+          limit: pageSize,
+          sortBy: sorting[0]?.id,
+          sortDir: sorting[0] ? (sorting[0].desc ? "DESC" : "ASC") : undefined,
+        }),
+      ),
       run(() => queuesService.counts()),
     ]);
     if (list) {
@@ -63,7 +77,7 @@ export function useQueueJobs(): UseQueueJobsResult {
     if (summary) {
       setCounts(summary);
     }
-  }, [run, state, page, pageSize]);
+  }, [run, state, page, pageSize, sorting]);
 
   useEffect(() => {
     void fetch();
@@ -92,9 +106,11 @@ export function useQueueJobs(): UseQueueJobsResult {
     page,
     pageSize,
     state,
+    sorting,
     loading,
     setPage,
     setPageSize,
+    setSorting,
     setState,
     refresh: fetch,
     retry: (id) => act(queuesService.retry(id)),

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

@@ -4,6 +4,7 @@ import type {
   ColumnDef,
   OnChangeFn,
   PaginationState,
+  SortingState,
 } from "@tanstack/react-table";
 import { RotateCcw, Trash2 } from "lucide-react";
 import type { JSX } from "react";
@@ -90,7 +91,6 @@ export function QueuesScreen(): JSX.Element {
         accessorKey: "name",
         header: t("queues.job"),
         meta: { label: t("queues.job") },
-        enableSorting: false,
         cell: ({ row }) => (
           <div className="flex flex-col">
             <span className="font-medium">{row.original.name}</span>
@@ -104,7 +104,6 @@ export function QueuesScreen(): JSX.Element {
         accessorKey: "state",
         header: t("queues.state"),
         meta: { label: t("queues.state") },
-        enableSorting: false,
         cell: ({ row }) => {
           const state = row.original.state as QueueJobState;
           return (
@@ -118,7 +117,6 @@ export function QueuesScreen(): JSX.Element {
         accessorKey: "percent",
         header: t("queues.progress"),
         meta: { label: t("queues.progress") },
-        enableSorting: false,
         cell: ({ getValue }) => {
           const percent = getValue() as number | null;
           return percent == null ? "—" : `${percent}%`;
@@ -128,20 +126,17 @@ export function QueuesScreen(): JSX.Element {
         accessorKey: "attemptsMade",
         header: t("queues.attempts"),
         meta: { label: t("queues.attempts") },
-        enableSorting: false,
       },
       {
         accessorKey: "createdAt",
         header: t("queues.createdAt"),
         meta: { label: t("queues.createdAt") },
-        enableSorting: false,
         cell: ({ getValue }) => new Date(String(getValue())).toLocaleString(),
       },
       {
         accessorKey: "failedReason",
         header: t("queues.reason"),
         meta: { label: t("queues.reason") },
-        enableSorting: false,
         // Cru e por inteiro no `title`: quem lê esta tela é quem vai consertar
         // a causa, e a mensagem truncada some justamente na parte útil.
         cell: ({ getValue }) => {
@@ -161,9 +156,9 @@ export function QueuesScreen(): JSX.Element {
       {
         id: "actions",
         header: () => <div className="text-center">{t("common.actions")}</div>,
+        enableSorting: false,
         meta: { shrink: true },
         enableHiding: false,
-        enableSorting: false,
         cell: ({ row }) =>
           canManage ? (
             <RowActions>
@@ -196,6 +191,13 @@ export function QueuesScreen(): JSX.Element {
     pageIndex: queue.page,
     pageSize: queue.pageSize,
   };
+  /** Ordem nova recomeça na primeira página: a página 3 era da ordem antiga. */
+  const onSortingChange: OnChangeFn<SortingState> = (updater) => {
+    const next = typeof updater === "function" ? updater(queue.sorting) : updater;
+    queue.setSorting(next);
+    queue.setPage(0);
+  };
+
   const onPaginationChange: OnChangeFn<PaginationState> = (updater) => {
     const next = typeof updater === "function" ? updater(pagination) : updater;
     if (next.pageSize !== queue.pageSize) {
@@ -246,7 +248,9 @@ export function QueuesScreen(): JSX.Element {
         rowCount={queue.total}
         pagination={pagination}
         onPaginationChange={onPaginationChange}
-        enableSorting={false}
+        manualSorting
+        sorting={queue.sorting}
+        onSortingChange={onSortingChange}
         emptyMessage={t("queues.empty")}
         toolbar={
           <SegmentedControl

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

@@ -28,6 +28,9 @@ export interface QueueJobsQuery {
   state: QueueJobState;
   page: number;
   limit: number;
+  /** Campo da whitelist do backend (`SORTABLE_JOB_FIELDS`). */
+  sortBy?: string;
+  sortDir?: "ASC" | "DESC";
 }
 
 export const queuesService = {

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

@@ -159,9 +159,12 @@ export function GroupsPanel(): JSX.Element {
       { accessorKey: "type", header: "Tipo", meta: { label: "Tipo" } },
       {
         id: "manager",
+        accessorFn: (row) => {
+          const manager = candidates.find((c) => c.id === row.managerId);
+          return manager ? fullName(manager) : "";
+        },
         header: t("rbac.manager"),
         meta: { label: t("rbac.manager") },
-        enableSorting: false,
         // Sem gerente, o escopo `team` não alcança ninguém aqui dentro — e é
         // exatamente isso que o traço precisa deixar visível na listagem.
         cell: ({ row }) => {

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

@@ -90,7 +90,6 @@ export function UsersScreen(): JSX.Element {
         id: "roles",
         header: t("users.roles"),
         meta: { label: t("users.roles") },
-        enableSorting: false,
         cell: ({ row }) => (
           <div className="flex flex-wrap gap-1">
             {row.original.roles?.map((r) => (
@@ -125,7 +124,6 @@ export function UsersScreen(): JSX.Element {
         accessorKey: "twoFactorEnabled",
         header: "2FA",
         meta: { label: "2FA" },
-        enableSorting: false,
         cell: ({ row }) => (
           <Badge
             variant={row.original.twoFactorEnabled ? "success" : "warning"}

package/src/i18n/messages/en.ts

@@ -135,6 +135,8 @@ export const en: Messages = {
     fromChip: "from",
     toChip: "until",
     selectPeriod: "Select a period",
+    selectDate: "Select a date",
+    today: "Today",
     lastDays: "{days} days",
     previousMonth: "Previous month",
     nextMonth: "Next month",
@@ -187,6 +189,7 @@ export const en: Messages = {
   },
   common: {
     save: "Save",
+    optional: "optional",
     cancel: "Cancel",
     edit: "Edit",
     delete: "Delete",
@@ -194,6 +197,9 @@ export const en: Messages = {
     confirm: "Confirm",
     send: "Send",
     yes: "Yes",
+    select: "Select…",
+    search: "Search…",
+    noResults: "Nothing found",
     no: "No",
     actions: "Actions",
     loading: "Loading...",
@@ -343,6 +349,7 @@ export const en: Messages = {
   },
   validation: {
     required: "Required field",
+    minLength: "At least {count} characters",
     email: "Invalid email",
     passwordStrong: "Min. 8 chars with uppercase, lowercase, number and symbol",
     passwordsNotMatch: "Passwords do not match",

package/src/i18n/messages/pt.ts

@@ -137,6 +137,8 @@ export const pt = {
     fromChip: "a partir de",
     toChip: "até",
     selectPeriod: "Selecione o período",
+    selectDate: "Selecione a data",
+    today: "Hoje",
     lastDays: "{days} dias",
     previousMonth: "Mês anterior",
     nextMonth: "Próximo mês",
@@ -189,6 +191,7 @@ export const pt = {
   },
   common: {
     save: "Salvar",
+    optional: "opcional",
     cancel: "Cancelar",
     edit: "Editar",
     delete: "Excluir",
@@ -196,6 +199,9 @@ export const pt = {
     confirm: "Confirmar",
     send: "Enviar",
     yes: "Sim",
+    select: "Selecionar…",
+    search: "Pesquisar…",
+    noResults: "Nada encontrado",
     no: "Não",
     actions: "Ações",
     loading: "Carregando...",
@@ -347,6 +353,7 @@ export const pt = {
   },
   validation: {
     required: "Campo obrigatório",
+    minLength: "No mínimo {count} caracteres",
     email: "Email inválido",
     passwordStrong:
       "Mín. 8 caracteres com maiúscula, minúscula, número e símbolo",

package/src/index.ts

@@ -58,6 +58,14 @@ 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";
+// Máscaras de campo: sem elas públicas, cada projeto reescreve a sua — e a
+// segunda cópia é sempre a que esquece o teto de dígitos.
+export {
+  formatCurrencyBR,
+  maskCurrencyBR,
+  maskPhoneBR,
+  parseCurrencyBR,
+} from "#core/_utils/format";
 
 // ---------------------------------------------------------------------------
 // Hooks de listagem, requisição e filtro