rl-core-front 0.19.1 → 0.19.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.19.1",
+  "version": "0.19.5",
   "description": "Telas e componentes Next.js do core: login com 2FA, usuários, RBAC, auditoria, logs e listagens com filtro dinâmico",
   "author": "Rodrigo Liberti",
   "license": "MIT",

package/src/_services/api/schema.d.ts

@@ -1581,6 +1581,11 @@ export interface components {
              * @example /usuarios
              */
             route?: string | null;
+            /**
+             * @description Módulo de origem, que agrupa o sino. Nulo quando veio do próprio sistema.
+             * @example Contas
+             */
+            source?: string | null;
             read: boolean;
             /** Format: date-time */
             createdAt: string;
@@ -1605,7 +1610,7 @@ export interface components {
             body: string;
             type: components["schemas"]["NotificationType"];
             targets: components["schemas"]["NotificationTargetCommand"][];
-            /** @description Dado extra. `route` é usado pelo cliente para navegar. */
+            /** @description Dado extra. `route` é usado pelo cliente para navegar; `source` é o módulo de origem, que agrupa o sino. */
             payload?: Record<string, never>;
         };
         RequestExportCommand: {

package/src/_utils/calc.ts

@@ -8,9 +8,12 @@
  * enquanto este parser recusa o que não entende em vez de tentar adivinhar.
  *
  * O que ele entende: `+ - * / %`, parênteses, sinal negativo, e número no
- * formato brasileiro (ponto de milhar, vírgula decimal).
+ * formato brasileiro (ponto de milhar, vírgula decimal) — com os dígitos
+ * soltos lidos em centavos, como o campo de dinheiro faz (`4250` é 42,50).
  */
 
+import { maskCurrencyBR } from "#core/_utils/format";
+
 /**
  * Por que a conta não fechou. É código e não frase pronta porque a mensagem é
  * texto de tela: quem traduz é o componente, com o dicionário de quem está
@@ -83,15 +86,99 @@ const SYMBOL_TO_GLYPH = new Map<string, string>(OPERATOR_GLYPHS);
 
 const SYMBOLS = "+-*/%()";
 
+/** O desenho de uma tecla: `*` vira `×`; o resto fica como é. */
+export const glyphOf = (symbol: string): string => SYMBOL_TO_GLYPH.get(symbol) ?? symbol;
+
+/** Um pedaço da conta: um número (e se ele é dinheiro ou não) ou um símbolo. */
+interface Run {
+  kind: "number" | "symbol";
+  text: string;
+  /** Só em número: quantidade ou porcentagem, e não dinheiro — ver `toNumber`. */
+  plain: boolean;
+}
+
 /**
- * A conta como se lê na tela: `120*2+10%` vira `120×2+10%`.
+ * A conta em pedaços, com cada número já sabendo se é dinheiro.
  *
- * Mora aqui, junto do que faz o caminho de volta, e não no componente: são a
- * mesma correspondência, e separadas elas saem de sincronia calada.
+ * É a mesma pergunta que o tokenizador faz — o que vem depois de `×`/`÷` e
+ * o que vem antes de `%` não é dinheiro —, respondida sobre o texto cru para
+ * o visor e a normalização usarem sem avaliar a conta (que pode estar pela
+ * metade). O que não é número nem símbolo é descartado.
+ */
+const splitRuns = (source: string): Run[] => {
+  const runs: Run[] = [];
+  let index = 0;
+
+  while (index < source.length) {
+    const character: string = source[index];
+
+    if (NUMBER_PART.test(character)) {
+      let end: number = index;
+      while (end < source.length && NUMBER_PART.test(source[end])) {
+        end += 1;
+      }
+      runs.push({ kind: "number", text: source.slice(index, end), plain: false });
+      index = end;
+      continue;
+    }
+
+    const symbol: string = GLYPH_TO_SYMBOL.get(character) ?? character;
+    if (SYMBOLS.includes(symbol)) {
+      runs.push({ kind: "symbol", text: symbol, plain: false });
+    }
+    index += 1;
+  }
+
+  runs.forEach((run, position) => {
+    if (run.kind !== "number") {
+      return;
+    }
+    const previous: Run | undefined = runs[position - 1];
+    const next: Run | undefined = runs[position + 1];
+
+    run.plain =
+      (previous?.kind === "symbol" && (previous.text === "*" || previous.text === "/")) ||
+      (next?.kind === "symbol" && next.text === "%");
+  });
+
+  return runs;
+};
+
+/**
+ * O texto do visor, como a pessoa o vê e edita, na forma que a conta lê.
+ *
+ * O visor é um campo de texto que mostra dinheiro formatado (`44,90`), e a
+ * pessoa digita, apaga e cola nele. O que sai daqui é a forma canônica: os
+ * símbolos em vez dos desenhos, o dinheiro só em dígitos (`4490` — a vírgula
+ * e o ponto são da máscara, e o que a pessoa digitou de ponto ou vírgula num
+ * valor em reais é descartado, como o campo faz), e a quantidade e a
+ * porcentagem como vieram, que ali `1,5` é literal.
+ */
+export const normalizeExpression = (display: string): string =>
+  splitRuns(display)
+    .map((run) =>
+      run.kind === "number" && !run.plain ? run.text.replace(/\D/g, "") : run.text,
+    )
+    .join("");
+
+/**
+ * A conta como se lê na tela: `4490*2+10%` vira `44,90×2+10%`.
+ *
+ * O dinheiro sai formatado como o campo o mostra — `4490` é 44,90 —, para
+ * a pessoa ver o mesmo que a conta vai ler; a quantidade e a porcentagem
+ * ficam como estão. Mora aqui, junto do que faz o caminho de volta
+ * (`normalizeExpression`), e não no componente: são a mesma correspondência,
+ * e separadas elas saem de sincronia calada.
  */
 export const toDisplayExpression = (source: string): string =>
-  Array.from(source)
-    .map((character) => SYMBOL_TO_GLYPH.get(character) ?? character)
+  splitRuns(source)
+    .map((run) => {
+      if (run.kind === "symbol") {
+        return SYMBOL_TO_GLYPH.get(run.text) ?? run.text;
+      }
+
+      return run.plain ? run.text : maskCurrencyBR(run.text);
+    })
     .join("");
 
 /**
@@ -109,14 +196,25 @@ export const isCalcCharacter = (character: string): boolean =>
 /**
  * Número brasileiro para `number`.
  *
- * A ambiguidade real é o ponto sozinho: `1.200` é mil e duzentos para quem
- * digita em reais, e 1,2 para o `Number`. A regra é a do país — havendo
- * vírgula, todo ponto é milhar; sem vírgula, o ponto ainda é milhar quando
- * separa exatamente três dígitos no fim, ou quando aparece mais de uma vez.
+ * **Dígitos soltos são centavos**, como no campo: quem digita `4250` no campo
+ * vê 42,50, e a calculadora lendo 4.250,00 era a mesma tecla dando dois
+ * valores. A vírgula, quando vem, manda — `42,50` é literal. Duas exceções,
+ * que são o que não é dinheiro (`plain`): a porcentagem (`10%` são dez por
+ * cento, não 0,10%) e o que vem depois de `×` ou `÷` — quantidade, não
+ * valor: `4250×3` são três de 42,50, e `100,00÷4` é dividir em quatro.
+ *
+ * O ponto sozinho é milhar: `1.200` é mil e duzentos para quem digita em
+ * reais, e 1,2 para o `Number`. A regra é a do país — havendo vírgula, todo
+ * ponto é milhar; sem vírgula, o ponto ainda é milhar quando separa exatamente
+ * três dígitos no fim, ou quando aparece mais de uma vez.
  */
-const toNumber = (raw: string): number => {
+const toNumber = (raw: string, plain: boolean): number => {
   let text: string = raw;
 
+  if (/^\d+$/.test(text) && !plain) {
+    return Number(text) / 100;
+  }
+
   if (text.includes(",")) {
     text = text.replace(/\./g, "").replace(/,/g, ".");
   } else if ((text.match(/\./g) ?? []).length > 1 || /\d\.\d{3}$/.test(text)) {
@@ -148,7 +246,13 @@ const tokenize = (source: string): Token[] => {
       while (end < source.length && NUMBER_PART.test(source[end])) {
         end += 1;
       }
-      tokens.push({ type: "number", value: toNumber(source.slice(index, end)) });
+      // O `%` logo depois, ou o `×`/`÷` logo antes, mudam a leitura do
+      // número — ver `toNumber`.
+      const previous: Token | undefined = tokens[tokens.length - 1];
+      const plain: boolean =
+        /^\s*%/.test(source.slice(end)) ||
+        (previous?.type === "*" || previous?.type === "/");
+      tokens.push({ type: "number", value: toNumber(source.slice(index, end), plain) });
       index = end;
       continue;
     }

package/src/_utils/format.ts

@@ -25,6 +25,63 @@ export function formatDateTime(value: string | Date, locale: string): string {
   }).format(date);
 }
 
+const MINUTE_MS = 60_000;
+const HOUR_MS = 60 * MINUTE_MS;
+
+const sameDay = (a: Date, b: Date): boolean =>
+  a.getFullYear() === b.getFullYear() &&
+  a.getMonth() === b.getMonth() &&
+  a.getDate() === b.getDate();
+
+/**
+ * Há quanto tempo, do jeito que uma caixa de entrada mostra: "agora",
+ * "há 6 min", "há 2 h" no mesmo dia, "ontem, 18:02" e, antes disso, só a data
+ * curta — o que importa num aviso de três dias atrás é *qual* dia, não a hora.
+ *
+ * `now` é parâmetro para o teste fixar o relógio; em uso normal fica o padrão.
+ */
+export function formatRelativeTime(
+  value: string | Date,
+  locale: string,
+  now: Date = new Date(),
+): string {
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return String(value);
+  }
+
+  const relative = new Intl.RelativeTimeFormat(locale, {
+    numeric: "auto",
+    style: "short",
+  });
+  const elapsed = now.getTime() - date.getTime();
+
+  if (elapsed < MINUTE_MS) {
+    return relative.format(0, "second");
+  }
+  if (elapsed < HOUR_MS) {
+    return relative.format(-Math.floor(elapsed / MINUTE_MS), "minute");
+  }
+  if (sameDay(date, now)) {
+    return relative.format(-Math.floor(elapsed / HOUR_MS), "hour");
+  }
+
+  const yesterday = new Date(now);
+  yesterday.setDate(now.getDate() - 1);
+  if (sameDay(date, yesterday)) {
+    const time = new Intl.DateTimeFormat(locale, { timeStyle: "short" }).format(
+      date,
+    );
+    return `${relative.format(-1, "day")}, ${time}`;
+  }
+
+  return new Intl.DateTimeFormat(locale, {
+    day: "2-digit",
+    month: "2-digit",
+    ...(date.getFullYear() !== now.getFullYear() && { year: "numeric" }),
+  }).format(date);
+}
+
 /** Aplica máscara de telefone BR enquanto digita: (00) 00000-0000 */
 export function maskPhoneBR(value: string): string {
   const d = value.replace(/\D/g, "").slice(0, 11);

package/src/_utils/text.ts

@@ -0,0 +1,25 @@
+/**
+ * O texto pronto para comparar: minúsculo e sem acento.
+ *
+ * `"Óleo"` vira `"oleo"` — é o que faz digitar `oleo` achar "Óleo do motor"
+ * num select. O banco já compara assim (collation *accent-insensitive*); no
+ * navegador, `includes` compara byte a byte, e o acento separava o que a
+ * pessoa digitou do que estava cadastrado.
+ *
+ * `NFD` separa a letra do acento, e a faixa `\p{Diacritic}` é o acento —
+ * removê-la deixa a letra. Vale para qualquer alfabeto latino, não só o
+ * nosso.
+ */
+export const normalizeText = (text: string): string =>
+  text
+    .normalize("NFD")
+    .replace(/\p{Diacritic}/gu, "")
+    .toLowerCase();
+
+/** `text` contém `term`, ignorando acento e caixa. Termo vazio casa com tudo. */
+export const matchesText = (text: string, term: string): boolean =>
+  normalizeText(text).includes(normalizeText(term.trim()));
+
+/** Os dois são o mesmo nome, ignorando acento, caixa e espaços nas pontas. */
+export const sameText = (a: string, b: string): boolean =>
+  normalizeText(a.trim()) === normalizeText(b.trim());

package/src/components/ui/combobox.tsx

@@ -4,6 +4,7 @@ import { Check, ChevronDown, Plus, X } from "lucide-react";
 import type { JSX } from "react";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 
+import { matchesText, sameText } from "#core/_utils/text";
 import { Badge } from "#core/components/ui/badge";
 import { Button } from "#core/components/ui/button";
 import {
@@ -46,8 +47,17 @@ export interface ComboboxProps {
    * sabe se isso vira POST ou só um valor no formulário.
    */
   creatable?: boolean;
-  /** Chamado com o texto digitado, já sem espaços nas pontas. */
-  onCreate?: (text: string) => void;
+  /**
+   * Chamado com o texto digitado, já sem espaços nas pontas.
+   *
+   * Pode devolver o id do que criou — direto ou em promessa. Quando devolve,
+   * o item novo fica selecionado (no múltiplo, marcado junto aos outros):
+   * quem digitou "Kronos" e mandou criar quer a despesa na Kronos, não a
+   * lista fechada e o campo vazio. Quem não devolve nada, como o campo que
+   * só guarda o texto no formulário, continua como antes. Erro é de quem
+   * cria — o toast é dele; aqui só não se seleciona nada.
+   */
+  onCreate?: (text: string) => CreateResult | Promise<CreateResult>;
   /** Texto da linha de criação. Ausente, `Criar "{text}"`. */
   createLabel?: (text: string) => string;
   /**
@@ -64,6 +74,9 @@ export interface ComboboxProps {
   idleCloseMs?: number;
 }
 
+/** O que o `onCreate` devolve: o id do item criado, ou nada. */
+export type CreateResult = string | null | undefined | void;
+
 /** Id da linha de criação na lista apontável — nenhuma opção real o usa. */
 const CREATE_ID = "\u0000create";
 
@@ -160,23 +173,24 @@ export function Combobox({
     [options, value],
   );
 
+  /*
+    Sem acento e sem caixa, dos dois lados: digitar "oleo" acha "Óleo do
+    motor". É como o banco já compara — e o select, que filtra no navegador,
+    não podia ser mais exigente que ele.
+  */
   const termo = search.trim();
   const filtradas = useMemo(
-    () =>
-      options.filter((option) =>
-        option.name.toLowerCase().includes(termo.toLowerCase()),
-      ),
+    () => options.filter((option) => matchesText(option.name, termo)),
     [options, termo],
   );
 
   /**
-   * A linha "Criar" só quando há texto e nenhuma opção tem exatamente esse
-   * nome — com "Kronos" na lista, digitar "kronos" deve escolher, não criar.
+   * A linha "Criar" só quando há texto e nenhuma opção tem esse nome — com
+   * "Kronos" na lista, digitar "kronos" deve escolher, não criar; e com
+   * "Óleo", digitar "oleo" também.
    */
   const podeCriar =
-    creatable &&
-    termo !== "" &&
-    !options.some((option) => option.name.toLowerCase() === termo.toLowerCase());
+    creatable && termo !== "" && !options.some((option) => sameText(option.name, termo));
 
   /** O que se aponta pelo teclado: as opções filtradas e, no fim, a de criar. */
   const visiveis = useMemo(
@@ -184,6 +198,26 @@ export function Combobox({
     [filtradas, podeCriar, termo],
   );
 
+  /*
+   * O valor do momento em que a criação termina, e não o do clique: no
+   * múltiplo, quem marcou outro item enquanto o POST corria não pode perder
+   * a marca quando o novo chega.
+   */
+  const valorAtual = useRef(value);
+  useEffect(() => {
+    valorAtual.current = value;
+  }, [value]);
+
+  const criar = (texto: string): void => {
+    Promise.resolve(onCreate?.(texto))
+      .then((novo) => {
+        if (novo) {
+          onChange(multiple ? [...valorAtual.current, novo] : [novo]);
+        }
+      })
+      .catch(() => undefined);
+  };
+
   /** A posição do apontado; sem ele — ou fora da busca — é a do primeiro. */
   const ativo = Math.max(
     visiveis.findIndex((option) => option.id === apontado),
@@ -192,7 +226,7 @@ export function Combobox({
 
   const alternar = (id: string): void => {
     if (id === CREATE_ID) {
-      onCreate?.(termo);
+      criar(termo);
       setSearch("");
       if (!multiple) {
         setOpen(false);

package/src/components/ui/index.ts

@@ -32,6 +32,7 @@ export * from "./password-requirements";
 export * from "./period-nav";
 export * from "./popover";
 export * from "./row-actions";
+export * from "./searchable-select";
 export * from "./segmented-control";
 export * from "./select";
 export * from "./separator";

package/src/components/ui/money-input.tsx

@@ -1,14 +1,16 @@
 "use client";
 
 import { Calculator, Delete } from "lucide-react";
-import type { JSX, KeyboardEvent } from "react";
+import type { ChangeEvent, JSX, KeyboardEvent } from "react";
 import { useRef, useState } from "react";
 
 import {
   CalcError,
   CalcErrorCode,
   evaluateExpression,
+  glyphOf,
   isCalcCharacter,
+  normalizeExpression,
   toDisplayExpression,
 } from "#core/_utils/calc";
 import {
@@ -61,7 +63,7 @@ type KeyRole = "digit" | "operator" | "aux";
 interface CalcKey {
   /**
    * O que a tecla acrescenta à conta — e também o seu desenho, passado pelo
-   * `toDisplayExpression`: a tecla do `*` mostra `×` sem que o glifo precise
+   * `toGlyphs`: a tecla do `*` mostra `×` sem que o glifo precise
    * ser escrito aqui de novo.
    */
   input?: string;
@@ -126,8 +128,15 @@ export const MoneyInput = ({
 }: MoneyInputProps): JSX.Element => {
   const { t } = useI18n();
   const [open, setOpen] = useState(false);
+  /*
+    A conta na forma canônica — símbolos, dinheiro só em dígitos (`4490`). O
+    visor mostra e edita a forma desenhada (`44,90`), e cada mudança volta
+    para cá por `normalizeExpression`: é o que deixa a pessoa digitar, apagar
+    e colar num campo formatado sem a máscara e o cursor brigarem.
+  */
   const [expression, setExpression] = useState("");
-  const panelRef = useRef<HTMLDivElement>(null);
+  const visorRef = useRef<HTMLInputElement>(null);
+  const display: string = toDisplayExpression(expression);
 
   /**
    * Traduz o erro do parser. O código vem do `calc.util`, que não conhece
@@ -165,24 +174,115 @@ export const MoneyInput = ({
     }
   })();
 
-  /** Abrir semeia a conta com o que já está no campo, para somar em cima. */
+  /**
+   * Abrir semeia a conta com o que já está no campo, para somar em cima.
+   *
+   * Em dígitos (`359`), e não no texto do campo (`3,59`): com a vírgula o
+   * número vira literal, e cada dígito digitado depois entrava como casa
+   * decimal a mais — `3,5922` arredondava de volta para 3,59, e o valor
+   * parecia travado. Em dígitos o visor mostra o mesmo 3,59, e digitar em
+   * cima empurra o valor como o campo faz.
+   */
   const handleOpenChange = (next: boolean): void => {
     if (next) {
-      setExpression(parseCurrencyBR(value) > 0 ? value : "");
+      const cents: number = Math.round(parseCurrencyBR(value) * 100);
+      setExpression(cents > 0 ? String(cents) : "");
     }
     setOpen(next);
   };
 
+  /**
+   * O visor como ficou depois de uma edição, e onde o cursor estava nele.
+   *
+   * O texto novo é normalizado e desenhado de novo — a máscara pode ter
+   * mudado de lugar (`449` é 4,49; `4490` é 44,90) —, e o cursor é posto
+   * com o mesmo número de caracteres "de verdade" (tudo que não é ponto,
+   * vírgula ou espaço) **à direita** dele. É o que faz digitar no meio de
+   * `44,90` cair onde a pessoa clicou, e não no fim.
+   *
+   * Contado do fim, e não do início, por causa do zero que a máscara põe na
+   * frente: `9` desenha `0,09`, e contando do início o cursor caía depois
+   * desse zero — o `8` seguinte entrava antes da vírgula, e `987` virava
+   * 80,79 em vez de 9,87.
+   */
+  const commit = (nextDisplay: string, caret: number): void => {
+    const significantAfter: number = Array.from(nextDisplay.slice(caret)).filter(
+      (character) => !/[.,\s]/.test(character),
+    ).length;
+    const raw: string = normalizeExpression(nextDisplay);
+    const redrawn: string = toDisplayExpression(raw);
+
+    let position: number = redrawn.length;
+    let seen = 0;
+    while (position > 0 && seen < significantAfter) {
+      if (!/[.,\s]/.test(redrawn[position - 1])) {
+        seen += 1;
+      }
+      position -= 1;
+    }
+
+    setExpression(raw);
+    // Depois do render, quando o campo já mostra o texto redesenhado.
+    requestAnimationFrame(() => {
+      visorRef.current?.focus();
+      visorRef.current?.setSelectionRange(position, position);
+    });
+  };
+
+  /** Onde a seleção está no visor — no fim, se o campo ainda não tem foco. */
+  const selection = (): [number, number] => [
+    visorRef.current?.selectionStart ?? display.length,
+    visorRef.current?.selectionEnd ?? display.length,
+  ];
+
+  /**
+   * A tecla escreve onde o cursor está — e por cima do que estiver
+   * selecionado, como qualquer campo de texto.
+   *
+   * O visor foi um texto fixo em que as teclas só acrescentavam no fim: para
+   * trocar o `500` do meio da conta era apagar até lá e digitar tudo de novo,
+   * e selecionar tudo e digitar acrescentava em vez de substituir.
+   */
+  const write = (text: string): void => {
+    const [start, end] = selection();
+
+    commit(display.slice(0, start) + text + display.slice(end), start + text.length);
+  };
+
+  /**
+   * O backspace da tecla: apaga a seleção, ou o caractere antes do cursor —
+   * pulando o ponto e a vírgula, que são da máscara e voltam sozinhos.
+   */
+  const erase = (): void => {
+    const [start, end] = selection();
+    let from: number = start;
+
+    if (start === end) {
+      while (from > 0 && /[.,]/.test(display[from - 1])) {
+        from -= 1;
+      }
+      from = Math.max(from - 1, 0);
+    }
+
+    commit(display.slice(0, from) + display.slice(end), from);
+  };
+
   const press = (key: CalcKey): void => {
     if (key.action === "clear") {
       setExpression("");
+      visorRef.current?.focus();
       return;
     }
     if (key.action === "backspace") {
-      setExpression((current) => current.slice(0, -1));
+      erase();
       return;
     }
-    setExpression((current) => current + (key.input ?? ""));
+    write(key.input ?? "");
+  };
+
+  /** O que foi digitado, apagado ou colado direto no visor. */
+  const handleVisorChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    commit(event.target.value, event.target.selectionStart ?? event.target.value.length);
   };
 
   const apply = (): void => {
@@ -198,21 +298,16 @@ export const MoneyInput = ({
       event.target instanceof HTMLElement && event.target.tagName === "BUTTON";
 
     // Com o foco numa tecla, o Enter é o clique dela — mexer nisso quebraria
-    // quem navega por Tab.
+    // quem navega por Tab. No visor e no resto do painel, o Enter usa o valor.
     if (event.key === "Enter" && !onButton) {
       event.preventDefault();
       apply();
       return;
     }
-    if (event.key === "Backspace") {
+    // Fora do visor (numa tecla, por Tab), digitar ainda escreve na conta.
+    if (event.target !== visorRef.current && event.key.length === 1 && isCalcCharacter(event.key)) {
       event.preventDefault();
-      setExpression((current) => current.slice(0, -1));
-      return;
-    }
-    if (event.key.length === 1 && isCalcCharacter(event.key)) {
-      event.preventDefault();
-      // No teclado numérico o decimal é ponto; em reais, é vírgula.
-      setExpression((current) => current + (event.key === "." ? "," : event.key));
+      write(event.key);
     }
   };
 
@@ -252,28 +347,39 @@ export const MoneyInput = ({
       </PopoverAnchor>
 
       <PopoverContent
-        ref={panelRef}
         align="end"
         aria-label={t("calculator.title")}
         onKeyDown={handleKeyDown}
-        // O foco fica no painel, e não na primeira tecla: assim o Enter usa o
-        // valor em vez de apertar o "C".
+        // O foco vai para o visor, com o cursor no fim: é onde se digita, e é
+        // onde o Enter usa o valor em vez de apertar o "C".
         onOpenAutoFocus={(event) => {
           event.preventDefault();
-          panelRef.current?.focus();
+          const visor = visorRef.current;
+          visor?.focus();
+          visor?.setSelectionRange(visor.value.length, visor.value.length);
         }}
-        tabIndex={-1}
         className="w-72"
       >
+        {/*
+          O visor é a linha grande, e é editável: é nela que a pessoa clica
+          para trocar um número. O resultado fica embaixo, pequeno — é
+          consequência, não o que se mexe.
+        */}
         <div className="flex min-h-14 flex-col justify-between gap-1 rounded-md border border-border bg-muted/50 px-3 py-1.5 text-right">
-          <span className="min-h-5 break-all font-mono text-xs text-muted-foreground">
-            {toDisplayExpression(expression)}
-          </span>
+          <input
+            ref={visorRef}
+            value={display}
+            onChange={handleVisorChange}
+            aria-label={t("calculator.title")}
+            autoComplete="off"
+            spellCheck={false}
+            className="w-full bg-transparent text-right font-mono text-base font-medium tabular-nums outline-none"
+          />
           {outcome.message ? (
             <span className="break-words text-xs text-destructive">{outcome.message}</span>
           ) : (
-            <span className="break-all font-mono text-base font-medium tabular-nums">
-              {formatMoneyBR(outcome.value ?? 0)}
+            <span className="min-h-4 font-mono text-xs text-muted-foreground">
+              {expression ? `= ${formatMoneyBR(outcome.value ?? 0)}` : ""}
             </span>
           )}
         </div>
@@ -285,6 +391,9 @@ export const MoneyInput = ({
               type="button"
               variant={key.role === "aux" ? "outline" : "secondary"}
               aria-label={key.labelKey ? t(key.labelKey) : undefined}
+              // O clique não tira o foco do visor: é a seleção de lá que a
+              // tecla substitui, e o cursor de lá que ela avança.
+              onMouseDown={(event) => event.preventDefault()}
               onClick={() => press(key)}
               className={cn(
                 "h-8 px-0 font-mono text-sm",
@@ -292,7 +401,7 @@ export const MoneyInput = ({
                 key.role === "aux" && "text-muted-foreground",
               )}
             >
-              {key.label ?? (key.input ? toDisplayExpression(key.input) : <Delete />)}
+              {key.label ?? (key.input ? glyphOf(key.input) : <Delete />)}
             </Button>
           ))}
         </div>

package/src/components/ui/searchable-select.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import type { JSX } from "react";
+
+import { Combobox, type CreateResult } from "#core/components/ui/combobox";
+import type { SelectOption } from "#core/components/ui/simple-select";
+
+export interface SearchableSelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  /** O mesmo formato do `SimpleSelect` — a troca entre os dois é o nome. */
+  options: SelectOption[];
+  placeholder?: string;
+  searchPlaceholder?: string;
+  /** Mostra o X que devolve o campo ao vazio. Só onde o vazio é resposta. */
+  clearable?: boolean;
+  disabled?: boolean;
+  /**
+   * Deixa criar o que foi digitado quando nenhuma opção tem esse nome.
+   *
+   * É a flag por campo: o select de categoria da despesa liga, o filtro do
+   * extrato não. Quem cria é o `onCreate`, que devolve o id do registro
+   * novo — e o campo fica com ele selecionado, como se a pessoa tivesse
+   * escolhido da lista.
+   */
+  creatable?: boolean;
+  onCreate?: (text: string) => CreateResult | Promise<CreateResult>;
+  /** Texto da linha de criação. Ausente, `Criar "{text}"`. */
+  createLabel?: (text: string) => string;
+}
+
+/**
+ * Escolha de **um** valor, com busca — o `Combobox` no formato de select.
+ *
+ * O `Combobox` fala em lista (`string[]`), porque também serve à escolha
+ * múltipla; aqui dentro fica a conversão que todo campo de um valor faria
+ * igual, e a tela continua passando `value`/`onChange` de texto como já
+ * fazia com o `SimpleSelect`.
+ *
+ * Por que não o `SimpleSelect` nesses campos: com uma dúzia de categorias
+ * cadastradas, achar "Combustível" numa lista sem busca é rolar até
+ * encontrar, e o teclado do Radix só salta para a opção — não filtra.
+ */
+export const SearchableSelect = ({
+  value,
+  onChange,
+  options,
+  placeholder,
+  searchPlaceholder,
+  clearable,
+  disabled,
+  creatable,
+  onCreate,
+  createLabel,
+}: SearchableSelectProps): JSX.Element => (
+  <Combobox
+    options={options.map((option) => ({ id: option.value, name: option.label }))}
+    // Campo vazio é lista vazia: `[""]` seria uma opção de id em branco.
+    value={value ? [value] : []}
+    onChange={(ids) => onChange(ids[0] ?? "")}
+    placeholder={placeholder}
+    searchPlaceholder={searchPlaceholder}
+    clearable={clearable}
+    disabled={disabled}
+    creatable={creatable}
+    onCreate={onCreate}
+    createLabel={createLabel}
+  />
+);

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

@@ -3,22 +3,35 @@
 import { AlertTriangle, CheckCircle2, Info, X, XCircle } from "lucide-react";
 import type { JSX } from "react";
 
-import { formatDateTime } from "#core/_utils/format";
+import { formatDateTime, formatRelativeTime } from "#core/_utils/format";
 import { useI18n } from "#core/contexts";
 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> = {
-  [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" />,
-};
+/**
+ * Ícone e filete lateral saem da mesma cor: a severidade se lê no filete
+ * antes de ler o ícone, e as duas pistas discordando confundiriam.
+ */
+const SEVERITY: Record<NotificationType, { icon: JSX.Element; rail: string }> =
+  {
+    [NotificationType.INFO]: {
+      icon: <Info className="h-4 w-4 text-sky-500" />,
+      rail: "border-l-sky-500",
+    },
+    [NotificationType.SUCCESS]: {
+      icon: <CheckCircle2 className="h-4 w-4 text-emerald-500" />,
+      rail: "border-l-emerald-500",
+    },
+    [NotificationType.WARNING]: {
+      icon: <AlertTriangle className="h-4 w-4 text-amber-500" />,
+      rail: "border-l-amber-500",
+    },
+    [NotificationType.ERROR]: {
+      icon: <XCircle className="h-4 w-4 text-destructive" />,
+      rail: "border-l-destructive",
+    },
+  };
 
 export interface NotificationItemProps {
   notification: UserNotification;
@@ -27,12 +40,18 @@ export interface NotificationItemProps {
   onDismiss: (id: string) => void;
 }
 
+/**
+ * Uma linha compacta: título e hora na mesma linha, corpo em uma só. O sino é
+ * um popover, e cada linha a mais é uma notificação a menos visível sem rolar;
+ * o texto inteiro fica no `title` para o hover.
+ */
 export function NotificationItem({
   notification,
   onSelect,
   onDismiss,
 }: NotificationItemProps): JSX.Element {
   const { locale, t } = useI18n();
+  const severity = SEVERITY[notification.type];
 
   return (
     /*
@@ -42,38 +61,44 @@ export function NotificationItem({
     */
     <div
       className={cn(
-        "group/notice relative border-b border-border transition-colors hover:bg-accent",
-        !notification.read && "bg-accent/40",
+        "group/notice relative border-l-[3px] border-l-transparent transition-colors",
+        // O filete só na não lida: é ele que diz "isto ainda pede atenção".
+        !notification.read && cn("bg-accent/35", severity.rail),
       )}
     >
       <button
         type="button"
         onClick={() => onSelect(notification)}
-        className="flex w-full gap-3 px-4 py-3 pr-10 text-left"
+        className="flex w-full items-start gap-2.5 py-2 pl-3 pr-9 text-left hover:bg-accent"
       >
-        <span className="mt-0.5 shrink-0">{ICONS[notification.type]}</span>
+        <span className="mt-0.5 shrink-0">{severity.icon}</span>
 
         <span className="min-w-0 flex-1">
-        <span className="flex items-center gap-2">
+          <span className="flex items-baseline gap-2">
+            <span
+              title={notification.title}
+              className={cn(
+                "min-w-0 flex-1 truncate text-sm",
+                !notification.read && "font-semibold",
+              )}
+            >
+              {notification.title}
+            </span>
+            <time
+              dateTime={notification.createdAt}
+              title={formatDateTime(notification.createdAt, locale)}
+              className="shrink-0 text-[11px] tabular-nums text-muted-foreground"
+            >
+              {formatRelativeTime(notification.createdAt, locale)}
+            </time>
+          </span>
+
           <span
-            className={cn(
-              "truncate text-sm",
-              notification.read ? "text-foreground" : "font-semibold",
-            )}
+            title={notification.body}
+            className="block truncate text-xs text-muted-foreground"
           >
-            {notification.title}
+            {notification.body}
           </span>
-          {!notification.read && (
-            <span className="h-2 w-2 shrink-0 rounded-full bg-primary" />
-          )}
-        </span>
-
-        <span className="mt-0.5 block text-xs text-muted-foreground">
-          {notification.body}
-        </span>
-        <span className="mt-1 block text-[11px] text-muted-foreground">
-          {formatDateTime(notification.createdAt, locale)}
-        </span>
         </span>
       </button>
 
@@ -84,7 +109,7 @@ export function NotificationItem({
         onClick={() => onDismiss(notification.id)}
         aria-label={t("notifications.dismiss")}
         title={t("notifications.dismiss")}
-        className="absolute right-2 top-3 hidden rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground group-hover/notice:block"
+        className="absolute right-2 top-2 hidden rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground group-hover/notice:block group-focus-within/notice:block"
       >
         <X className="h-3.5 w-3.5" />
       </button>

package/src/features/notifications/notifications-center.tsx

@@ -20,9 +20,44 @@ import { cn } from "#core/lib/utils";
 
 type Tab = "all" | "unread" | "read";
 
+const TABS: readonly Tab[] = ["all", "unread", "read"];
+
 /** Acima disso o número não cabe no badge sem empurrar o layout. */
 const BADGE_LIMIT = 99;
 
+interface NotificationGroup {
+  source: string;
+  items: UserNotification[];
+  unread: number;
+}
+
+/**
+ * Agrupa pela origem (`source`), na ordem em que cada uma aparece na lista —
+ * como a lista vem da mais nova para a mais velha, o grupo com a notificação
+ * mais recente fica no topo. O sino não conhece os módulos do produto, então
+ * não existe ordem fixa para impor; quem não declarou origem cai no grupo
+ * padrão ("Sistema").
+ */
+export function groupBySource(
+  items: UserNotification[],
+  defaultSource: string,
+): NotificationGroup[] {
+  const groups = new Map<string, NotificationGroup>();
+
+  for (const item of items) {
+    const source = item.source ?? defaultSource;
+    const group = groups.get(source) ?? { source, items: [], unread: 0 };
+
+    group.items.push(item);
+    if (!item.read) {
+      group.unread += 1;
+    }
+    groups.set(source, group);
+  }
+
+  return [...groups.values()];
+}
+
 export function NotificationsCenter(): JSX.Element {
   const { t } = useI18n();
   const router = useRouter();
@@ -30,6 +65,9 @@ export function NotificationsCenter(): JSX.Element {
     useNotifications();
   const [tab, setTab] = useState<Tab>("all");
 
+  const read = items.length - unread;
+  const counts: Record<Tab, number> = { all: items.length, unread, read };
+
   const visible =
     tab === "unread"
       ? items.filter((i) => !i.read)
@@ -37,7 +75,7 @@ export function NotificationsCenter(): JSX.Element {
         ? items.filter((i) => i.read)
         : items;
 
-  const lidas = items.filter((i) => i.read).length;
+  const groups = groupBySource(visible, t("notifications.sourceDefault"));
 
   const onSelect = (notification: UserNotification): void => {
     if (!notification.read) {
@@ -68,24 +106,8 @@ export function NotificationsCenter(): JSX.Element {
       </DropdownMenuTrigger>
 
       <DropdownMenuContent align="end" className="w-96 p-0">
-        <div className="flex items-center justify-between border-b border-border px-4 py-2">
-          <div className="flex gap-3">
-            {(["all", "unread", "read"] as const).map((value) => (
-              <button
-                key={value}
-                type="button"
-                onClick={() => setTab(value)}
-                className={cn(
-                  "border-b-2 pb-1 text-sm transition-colors",
-                  tab === value
-                    ? "border-primary font-medium text-foreground"
-                    : "border-transparent text-muted-foreground hover:text-foreground",
-                )}
-              >
-                {t(`notifications.${value}`)}
-              </button>
-            ))}
-          </div>
+        <div className="flex items-center justify-between px-4 pt-3">
+          <h2 className="text-sm font-semibold">{t("notifications.title")}</h2>
 
           {/*
             A ação do cabeçalho segue a aba. Em "Lidas" o que se quer é
@@ -96,7 +118,7 @@ export function NotificationsCenter(): JSX.Element {
             <button
               type="button"
               onClick={() => void dismissRead()}
-              disabled={lidas === 0}
+              disabled={read === 0}
               className="text-xs font-medium text-primary hover:underline disabled:cursor-not-allowed disabled:text-muted-foreground disabled:no-underline"
             >
               {t("notifications.clearRead")}
@@ -113,6 +135,39 @@ export function NotificationsCenter(): JSX.Element {
           )}
         </div>
 
+        <div
+          role="tablist"
+          className="flex gap-1 border-b border-border px-3 pt-2"
+        >
+          {TABS.map((value) => (
+            <button
+              key={value}
+              type="button"
+              role="tab"
+              aria-selected={tab === value}
+              onClick={() => setTab(value)}
+              className={cn(
+                "-mb-px inline-flex items-center gap-1.5 border-b-2 px-1.5 pb-2 pt-1 text-sm transition-colors",
+                tab === value
+                  ? "border-primary font-medium text-foreground"
+                  : "border-transparent text-muted-foreground hover:text-foreground",
+              )}
+            >
+              {t(`notifications.${value}`)}
+              <span
+                className={cn(
+                  "grid h-[18px] min-w-[18px] place-items-center rounded-full px-1.5 text-[10.5px] font-semibold",
+                  tab === value
+                    ? "bg-primary/15 text-primary"
+                    : "bg-muted text-muted-foreground",
+                )}
+              >
+                {counts[value]}
+              </span>
+            </button>
+          ))}
+        </div>
+
         <div className="max-h-96 overflow-y-auto">
           {loading && items.length === 0 && (
             <div className="flex justify-center py-8">
@@ -126,13 +181,39 @@ export function NotificationsCenter(): JSX.Element {
             </p>
           )}
 
-          {visible.map((notification) => (
-            <NotificationItem
-              key={notification.id}
-              notification={notification}
-              onSelect={onSelect}
-              onDismiss={(id) => void dismiss(id)}
-            />
+          {groups.map((group) => (
+            <section key={group.source} aria-label={group.source}>
+              <header className="flex items-baseline justify-between px-3 pb-1 pt-2.5">
+                <span className="text-[10.5px] font-semibold uppercase tracking-wider text-muted-foreground">
+                  {group.source}
+                </span>
+                <span className="text-[11px] tabular-nums text-muted-foreground">
+                  {group.unread > 0 && (
+                    <>
+                      <span className="font-semibold text-primary">
+                        {group.unread}
+                      </span>{" "}
+                      {t(
+                        group.unread === 1
+                          ? "notifications.unreadOne"
+                          : "notifications.unreadMany",
+                      )}
+                      {" · "}
+                    </>
+                  )}
+                  {group.items.length}
+                </span>
+              </header>
+
+              {group.items.map((notification) => (
+                <NotificationItem
+                  key={notification.id}
+                  notification={notification}
+                  onSelect={onSelect}
+                  onDismiss={(id) => void dismiss(id)}
+                />
+              ))}
+            </section>
           ))}
         </div>
       </DropdownMenuContent>

package/src/i18n/messages/en.ts

@@ -272,6 +272,9 @@ export const en: Messages = {
     dismiss: "Remove from list",
     markAllRead: "Mark all as read",
     empty: "No notifications",
+    sourceDefault: "System",
+    unreadOne: "unread",
+    unreadMany: "unread",
   },
   calculator: {
     open: "Open the calculator",

package/src/i18n/messages/pt.ts

@@ -275,6 +275,9 @@ export const pt = {
     dismiss: "Tirar da lista",
     markAllRead: "Marcar todas como lidas",
     empty: "Nenhuma notificação",
+    sourceDefault: "Sistema",
+    unreadOne: "não lida",
+    unreadMany: "não lidas",
   },
   calculator: {
     open: "Abrir a calculadora",

package/src/index.ts

@@ -64,10 +64,12 @@ export { anyOrTeam } from "#core/_utils/permission";
 export {
   formatCurrencyBR,
   formatMoneyBR,
+  formatRelativeTime,
   maskCurrencyBR,
   maskPhoneBR,
   parseCurrencyBR,
 } from "#core/_utils/format";
+export { matchesText, normalizeText, sameText } from "#core/_utils/text";
 
 // ---------------------------------------------------------------------------
 // Hooks de listagem, requisição e filtro