rl-core-front 0.9.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.9.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/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/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/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