rl-core-front 0.1.0

package/src/_utils/filter.ts

@@ -0,0 +1,313 @@
+import type { components } from "#core/_services/api/schema";
+import { formatDay, fromIsoDay, toIsoDay } from "#core/_utils/calendar";
+
+/**
+ * Tipos derivados do `openapi.json` (§5): o catálogo é servido pelo backend,
+ * então campo que mudar lá quebra o build aqui, não a tela.
+ */
+export type FilterField = components["schemas"]["FilterFieldResponse"];
+export type FilterFieldType = FilterField["type"];
+export type FilterOperator = FilterField["operators"][number];
+export type FilterOption = components["schemas"]["FilterOptionResponse"];
+
+/**
+ * Valor cru de um campo no painel.
+ *
+ * Uma forma só para todos os tipos: o tipo do campo decide quais chaves usa, e
+ * a serialização vive num lugar só (`buildFilter`).
+ */
+export interface FilterDraftValue {
+  /** Texto, booleano ou valor único. */
+  value?: string;
+  /** Seleção múltipla (`ENUM`/`SELECT`). */
+  values?: string[];
+  /** Intervalo (número ou data). */
+  from?: string;
+  to?: string;
+}
+
+export type FilterValues = Record<string, FilterDraftValue>;
+
+/** Operador preferido de cada tipo no modo simples. */
+const PREFERRED_OPERATOR: Record<FilterFieldType, FilterOperator[]> = {
+  TEXT: ["$SUBSTRING", "$LIKE", "$EQ"],
+  NUMBER: ["$EQ"],
+  DATE: ["$BETWEEN"],
+  DATETIME: ["$BETWEEN"],
+  BOOLEAN: ["$EQ"],
+  ENUM: ["$IN", "$EQ"],
+  SELECT: ["$IN", "$EQ"],
+  UUID: ["$EQ"],
+};
+
+/** Primeiro operador preferido que o campo aceita. */
+const operatorFor = (
+  field: FilterField,
+  candidates: FilterOperator[],
+): FilterOperator | null =>
+  candidates.find((operator) => field.operators.includes(operator)) ?? null;
+
+const isBlank = (value: string | undefined): boolean =>
+  value === undefined || value.trim() === "";
+
+/** Campo tem algo preenchido? É o que conta o badge e o que vira condição. */
+export const hasValue = (draft: FilterDraftValue | undefined): boolean => {
+  if (!draft) {
+    return false;
+  }
+  return (
+    !isBlank(draft.value) ||
+    !isBlank(draft.from) ||
+    !isBlank(draft.to) ||
+    (draft.values?.length ?? 0) > 0
+  );
+};
+
+export const activeFilterCount = (values: FilterValues): number =>
+  Object.values(values).filter(hasValue).length;
+
+/**
+ * Ponta de um intervalo de datas em ISO **com o fuso de quem filtrou**.
+ *
+ * O calendário devolve o dia (`"2026-06-30"`), e o dia sozinho é lido como UTC:
+ * quem está em Brasília perderia as três primeiras horas do período. Aqui o
+ * início vira 00:00 e o fim 23:59:59.999 no horário local, já convertidos.
+ */
+const toDayBound = (value: string, bound: "start" | "end"): string => {
+  const day = fromIsoDay(value);
+  if (!day) {
+    return value;
+  }
+  const date = new Date(day);
+  if (bound === "start") {
+    date.setHours(0, 0, 0, 0);
+  } else {
+    date.setHours(23, 59, 59, 999);
+  }
+  return date.toISOString();
+};
+
+/** Condição de um campo de intervalo: `$BETWEEN`, ou só um dos lados. */
+const rangeCondition = (
+  field: FilterField,
+  draft: FilterDraftValue,
+): Record<string, unknown> | null => {
+  const isDate = field.type === "DATE" || field.type === "DATETIME";
+  const bound = (value: string, side: "start" | "end"): string =>
+    isDate ? toDayBound(value, side) : value;
+
+  const from = isBlank(draft.from) ? null : bound(draft.from as string, "start");
+  const to = isBlank(draft.to) ? null : bound(draft.to as string, "end");
+
+  if (from && to && field.operators.includes("$BETWEEN")) {
+    return { $BETWEEN: [from, to] };
+  }
+  if (from && to) {
+    return { $GTE: from, $LTE: to };
+  }
+  if (from) {
+    return { $GTE: from };
+  }
+  if (to) {
+    return { $LTE: to };
+  }
+  return null;
+};
+
+const conditionFor = (
+  field: FilterField,
+  draft: FilterDraftValue,
+): Record<string, unknown> | null => {
+  switch (field.type) {
+    case "NUMBER":
+    case "DATE":
+    case "DATETIME":
+      return rangeCondition(field, draft);
+
+    case "ENUM":
+    case "SELECT": {
+      const selected = draft.values ?? [];
+      if (selected.length === 0) {
+        return null;
+      }
+      const operator = operatorFor(field, PREFERRED_OPERATOR[field.type]);
+      if (!operator) {
+        return null;
+      }
+      // Um item só com $IN também funciona, mas $EQ é mais legível na URL.
+      return operator === "$IN" && selected.length === 1
+        ? { $EQ: selected[0] }
+        : { [operator]: operator === "$IN" ? selected : selected[0] };
+    }
+
+    case "BOOLEAN":
+      if (isBlank(draft.value)) {
+        return null;
+      }
+      return { $EQ: draft.value === "true" };
+
+    default: {
+      if (isBlank(draft.value)) {
+        return null;
+      }
+      const operator = operatorFor(field, PREFERRED_OPERATOR[field.type]);
+      return operator ? { [operator]: draft.value } : null;
+    }
+  }
+};
+
+/**
+ * Valores do painel → JSON que vai na query (`?filter=`).
+ *
+ * Devolve `undefined` quando nada está preenchido — e não `"{}"`, que viraria
+ * um parâmetro vazio na URL e um filtro sem efeito no backend.
+ */
+export const buildFilter = (
+  values: FilterValues,
+  schema: FilterField[],
+): string | undefined => {
+  const where: Record<string, unknown> = {};
+
+  for (const field of schema) {
+    const draft = values[field.field];
+    if (!draft || !hasValue(draft)) {
+      continue;
+    }
+    const condition = conditionFor(field, draft);
+    if (condition) {
+      where[field.field] = condition;
+    }
+  }
+
+  return Object.keys(where).length > 0 ? JSON.stringify(where) : undefined;
+};
+
+/**
+ * JSON → valores do painel, para hidratar a tela a partir da URL.
+ *
+ * Ignora em silêncio o que não souber ler: a URL é editável à mão, e um filtro
+ * estranho não pode impedir a tela de abrir — quem valida de verdade é o backend.
+ */
+export const parseFilterValues = (
+  raw: string | null | undefined,
+  schema: FilterField[],
+): FilterValues => {
+  if (!raw) {
+    return {};
+  }
+
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return {};
+  }
+  if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+    return {};
+  }
+
+  const values: FilterValues = {};
+  for (const field of schema) {
+    const condition = (parsed as Record<string, unknown>)[field.field];
+    if (typeof condition !== "object" || condition === null) {
+      continue;
+    }
+    const draft = draftFrom(field, condition as Record<string, unknown>);
+    if (draft) {
+      values[field.field] = draft;
+    }
+  }
+  return values;
+};
+
+const draftFrom = (
+  field: FilterField,
+  condition: Record<string, unknown>,
+): FilterDraftValue | null => {
+  const asText = (value: unknown): string | undefined =>
+    typeof value === "string" || typeof value === "number"
+      ? String(value)
+      : undefined;
+
+  switch (field.type) {
+    case "NUMBER":
+    case "DATE":
+    case "DATETIME": {
+      // Data volta da URL em ISO com hora; o calendário trabalha em dia local.
+      const isDate = field.type !== "NUMBER";
+      const asBound = (value: unknown): string | undefined => {
+        const text = asText(value);
+        if (!text || !isDate) {
+          return text;
+        }
+        const parsed = new Date(text);
+        return Number.isNaN(parsed.getTime()) ? text : toIsoDay(parsed);
+      };
+
+      const between = condition.$BETWEEN;
+      if (Array.isArray(between) && between.length === 2) {
+        return { from: asBound(between[0]), to: asBound(between[1]) };
+      }
+      const from = asBound(condition.$GTE);
+      const to = asBound(condition.$LTE);
+      return from || to ? { from, to } : null;
+    }
+
+    case "ENUM":
+    case "SELECT": {
+      const list = condition.$IN;
+      if (Array.isArray(list)) {
+        return { values: list.filter((item): item is string => typeof item === "string") };
+      }
+      const single = asText(condition.$EQ);
+      return single ? { values: [single] } : null;
+    }
+
+    case "BOOLEAN":
+      return typeof condition.$EQ === "boolean"
+        ? { value: String(condition.$EQ) }
+        : null;
+
+    default: {
+      // Qualquer operador de texto serve para reidratar a caixa.
+      const value =
+        asText(condition.$SUBSTRING) ??
+        asText(condition.$LIKE) ??
+        asText(condition.$STARTSWITH) ??
+        asText(condition.$ENDSWITH) ??
+        asText(condition.$EQ);
+      return value ? { value } : null;
+    }
+  }
+};
+
+/** Resumo de um filtro ativo, para o chip. */
+export const describeValue = (
+  field: FilterField,
+  draft: FilterDraftValue,
+  labels: { from: string; to: string; yes: string; no: string; locale: string },
+): string => {
+  const show = (value: string): string =>
+    field.type === "DATE" || field.type === "DATETIME"
+      ? formatDay(value, labels.locale)
+      : value;
+
+  if (field.type === "BOOLEAN") {
+    return draft.value === "true" ? labels.yes : labels.no;
+  }
+  if (draft.values?.length) {
+    const optionLabel = (value: string): string =>
+      field.options?.find((option) => option.value === value)?.label ?? value;
+    return draft.values.map(optionLabel).join(", ");
+  }
+  if (draft.from && draft.to) {
+    return `${show(draft.from)} – ${show(draft.to)}`;
+  }
+  if (draft.from) {
+    return `${labels.from} ${show(draft.from)}`;
+  }
+  if (draft.to) {
+    return `${labels.to} ${show(draft.to)}`;
+  }
+  return draft.value ?? "";
+};

package/src/_utils/format.ts

@@ -0,0 +1,35 @@
+/**
+ * ISO-8601 com data e hora, do jeito que o backend serializa `Date`.
+ * Aceita `Z` e offset (+03:00), com ou sem milissegundos.
+ */
+const ISO_DATE_TIME =
+  /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?(Z|[+-]\d{2}:\d{2})$/;
+
+/** Só é data se for string no formato ISO — número solto não conta. */
+export function isIsoDateTime(value: unknown): value is string {
+  return typeof value === "string" && ISO_DATE_TIME.test(value);
+}
+
+/**
+ * Data e hora no formato do locale. Recebe o locale de quem chama porque o
+ * idioma é escolha do usuário (I18nProvider), não do navegador.
+ */
+export function formatDateTime(value: string | Date, locale: string): string {
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return String(value);
+  }
+  return new Intl.DateTimeFormat(locale, {
+    dateStyle: "short",
+    timeStyle: "medium",
+  }).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);
+  if (d.length <= 2) {return d.replace(/(\d{0,2})/, "($1");}
+  if (d.length <= 6) {return d.replace(/(\d{2})(\d{0,4})/, "($1) $2");}
+  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");
+}

package/src/_utils/initials.ts

@@ -0,0 +1,24 @@
+/**
+ * Iniciais para o fallback do avatar: "Rodrigo Liberti" → "RL".
+ *
+ * Sem sobrenome, tenta a segunda palavra do próprio nome ("Ana Paula" → "AP");
+ * se só houver uma palavra, devolve uma letra — duas letras da mesma palavra
+ * ("RO") pareceriam sobrenome que não existe.
+ */
+export function getInitials(
+  name?: string | null,
+  lastName?: string | null,
+): string {
+  const first = name?.trim() ?? "";
+  const last = lastName?.trim() ?? "";
+
+  const firstLetter = first.charAt(0);
+  if (!firstLetter) {
+    return "?";
+  }
+
+  const secondSource = last || first.split(/\s+/).slice(1).join(" ");
+  const secondLetter = secondSource.charAt(0);
+
+  return (firstLetter + secondLetter).toUpperCase();
+}

package/src/_utils/password.ts

@@ -0,0 +1,7 @@
+/**
+ * Espelha STRONG_PASSWORD_REGEX do backend (core/utils/password.constants.ts).
+ * Mín. 8 caracteres, com maiúscula, minúscula, número e caractere especial.
+ * Ao mudar aqui, mude lá também — o backend é a autoridade final.
+ */
+export const STRONG_PASSWORD_REGEX =
+  /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*(),.?":{}|<>]).{8,}$/;

package/src/components/app-shell.tsx

@@ -0,0 +1,314 @@
+"use client";
+
+import {
+  ChevronDown,
+  ChevronRight,
+  History,
+  LayoutDashboard,
+  LogOut,
+  Menu,
+  ScrollText,
+  Settings,
+  Shield,
+  ShieldCheck,
+  User,
+  Users,
+} from "lucide-react";
+import { usePathname, useRouter } from "next/navigation";
+import type { JSX } from "react";
+import { useEffect, useMemo, useState } from "react";
+
+import { Breadcrumbs } from "#core/components/breadcrumbs";
+import { LanguageSelector } from "#core/components/language-selector";
+import { ThemeToggle } from "#core/components/theme-toggle";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Separator,
+  Spinner,
+} from "#core/components/ui";
+import { UserAvatar } from "#core/components/user-avatar";
+import { useAuth, useI18n } from "#core/contexts";
+import { NotificationsCenter } from "#core/features/notifications/notifications-center";
+import { ForcePasswordChange } from "#core/features/profile/force-password-change";
+import { cn } from "#core/lib/utils";
+
+const COLLAPSE_KEY = "sidebar-collapsed";
+
+interface NavItem {
+  key: string;
+  href: string;
+  icon: React.ComponentType<{ className?: string }>;
+  perm: string | null;
+}
+
+const DASHBOARD: NavItem = {
+  key: "nav.dashboard",
+  href: "/dashboard",
+  icon: LayoutDashboard,
+  perm: null,
+};
+const PROFILE: NavItem = {
+  key: "nav.profile",
+  href: "/perfil",
+  icon: User,
+  perm: null,
+};
+const ADMIN_CHILDREN: NavItem[] = [
+  { key: "nav.users", href: "/usuarios", icon: Users, perm: "users:read:any" },
+  { key: "nav.rbac", href: "/rbac", icon: ShieldCheck, perm: "roles:read:any" },
+  { key: "nav.logs", href: "/logs", icon: ScrollText, perm: "audit:read:any" },
+  // Restrito a administradores — só quem tem audit:read-trail:any (só Super Admin) vê este item.
+  {
+    key: "nav.audit",
+    href: "/auditoria",
+    icon: History,
+    perm: "audit:read-trail:any",
+  },
+];
+
+export function AppShell({ children }: { children: React.ReactNode }): JSX.Element {
+  const { user, loading, logout, hasPermission } = useAuth();
+  const { t } = useI18n();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [collapsed, setCollapsed] = useState<boolean>(() => {
+    if (typeof window === "undefined") {return false;}
+    return localStorage.getItem(COLLAPSE_KEY) === "1";
+  });
+
+  const adminChildren = useMemo(
+    () => ADMIN_CHILDREN.filter((c) => !c.perm || hasPermission(c.perm)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [user],
+  );
+  const adminActive = adminChildren.some((c) => pathname === c.href);
+  const [adminOpen, setAdminOpen] = useState(adminActive);
+
+  useEffect(() => {
+    if (!loading && !user) {router.replace("/login");}
+  }, [loading, user, router]);
+
+  if (loading || !user) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background">
+        <Spinner className="h-8 w-8" />
+      </div>
+    );
+  }
+
+  if (user?.passwordExpired || user?.mustChangePassword) {
+    return (
+      <ForcePasswordChange
+        reason={user.passwordExpired ? "expired" : "provisional"}
+      />
+    );
+  }
+
+  const toggleCollapsed = (): void =>
+    setCollapsed((v) => {
+      const next = !v;
+      localStorage.setItem(COLLAPSE_KEY, next ? "1" : "0");
+      return next;
+    });
+
+  const go = (href: string): void => {
+    router.push(href);
+    setMobileOpen(false);
+  };
+
+  const NavLink = ({
+    item,
+    mini,
+    nested,
+  }: {
+    item: NavItem;
+    mini: boolean;
+    nested?: boolean;
+  }): JSX.Element => {
+    const active = pathname === item.href;
+    const Icon = item.icon;
+    return (
+      <button
+        onClick={() => go(item.href)}
+        title={mini ? t(item.key) : undefined}
+        className={cn(
+          "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
+          mini && "justify-center px-2",
+          nested && !mini && "pl-10",
+          active
+            ? "bg-primary/10 text-primary"
+            : "text-muted-foreground hover:bg-accent hover:text-foreground",
+        )}
+      >
+        <Icon className="h-5 w-5 shrink-0" />
+        {!mini && <span className="truncate">{t(item.key)}</span>}
+      </button>
+    );
+  };
+
+  const NavContent = ({ mini }: { mini: boolean }): JSX.Element => (
+    <div className="flex flex-1 flex-col gap-1 overflow-y-auto overflow-x-hidden p-3">
+      <NavLink item={DASHBOARD} mini={mini} />
+
+      {adminChildren.length > 0 &&
+        (mini ? (
+          <>
+            <Separator className="my-2" />
+            {adminChildren.map((c) => (
+              <NavLink key={c.href} item={c} mini />
+            ))}
+          </>
+        ) : (
+          <div className="mt-2">
+            <button
+              onClick={() => setAdminOpen((v) => !v)}
+              className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+            >
+              <Settings className="h-5 w-5 shrink-0" />
+              <span className="flex-1 text-left">{t("nav.admin")}</span>
+              <ChevronRight
+                className={cn(
+                  "h-4 w-4 transition-transform",
+                  adminOpen && "rotate-90",
+                )}
+              />
+            </button>
+            {adminOpen && (
+              <div className="mt-1 flex flex-col gap-1">
+                {adminChildren.map((c) => (
+                  <NavLink key={c.href} item={c} mini={false} nested />
+                ))}
+              </div>
+            )}
+          </div>
+        ))}
+
+      <div className="mt-1">
+        <NavLink item={PROFILE} mini={mini} />
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="fixed inset-x-0 top-0 z-40 flex h-16 items-center gap-2 border-b border-border bg-card px-3 sm:px-4">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="md:hidden"
+          onClick={() => setMobileOpen(true)}
+          aria-label="menu"
+        >
+          <Menu className="h-5 w-5" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="hidden md:inline-flex"
+          onClick={toggleCollapsed}
+          aria-label="menu"
+        >
+          <Menu className="h-5 w-5" />
+        </Button>
+
+        <div className="flex items-center gap-2">
+          <Shield className="h-6 w-6 text-primary" />
+          <span className="hidden text-lg font-extrabold sm:block">
+            {t("app.name")}
+          </span>
+        </div>
+
+        <div className="flex-1" />
+
+        <LanguageSelector />
+        <ThemeToggle />
+        <NotificationsCenter />
+        <Separator orientation="vertical" className="mx-1 h-8" />
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button className="flex items-center gap-2 rounded-lg px-1.5 py-1 transition-colors hover:bg-accent">
+              <UserAvatar
+                name={user?.name}
+                lastName={user?.lastName}
+                avatar={user?.avatar}
+                className="h-8 w-8"
+                fallbackClassName="text-xs"
+              />
+              <div className="hidden text-left sm:block">
+                <p className="text-sm font-semibold leading-tight">
+                  {user?.name}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {user?.roles?.[0] ?? ""}
+                </p>
+              </div>
+              <ChevronDown className="hidden h-4 w-4 text-muted-foreground sm:block" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48">
+            <DropdownMenuLabel>{user?.name}</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={() => router.push("/perfil")}>
+              <User className="h-4 w-4" />
+              {t("user.menuProfile")}
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => logout()}>
+              <LogOut className="h-4 w-4" />
+              {t("user.logout")}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </header>
+
+      {/* Desktop sidebar */}
+      <aside
+        className={cn(
+          "fixed left-0 top-16 z-30 hidden h-[calc(100vh-4rem)] flex-col border-r border-border bg-card transition-[width] duration-200 md:flex",
+          collapsed ? "w-[76px]" : "w-64",
+        )}
+      >
+        <NavContent mini={collapsed} />
+      </aside>
+
+      {/* Mobile sidebar */}
+      {mobileOpen && (
+        <div className="fixed inset-0 z-50 md:hidden">
+          <div
+            className="absolute inset-0 bg-black/50"
+            onClick={() => setMobileOpen(false)}
+          />
+          <aside className="absolute left-0 top-0 flex h-full w-64 flex-col border-r border-border bg-card">
+            <div className="flex h-16 items-center gap-2 border-b border-border px-4">
+              <Shield className="h-6 w-6 text-primary" />
+              <span className="text-lg font-extrabold">{t("app.name")}</span>
+            </div>
+            <NavContent mini={false} />
+          </aside>
+        </div>
+      )}
+
+      {/* Main */}
+      <main
+        className={cn(
+          "pt-16 transition-[margin] duration-200",
+          collapsed ? "md:ml-[76px]" : "md:ml-64",
+        )}
+      >
+        <div className="p-4 md:p-8">
+          <Breadcrumbs />
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+}