feat(api,ui): MFA/TOTP, Inventory, Support, HR-Timeclock, Fiscal, Billing e Design System

Leva grande, pedida como "pelo menos mais 20 etapas, use subagentes":
fecha a pendência de MFA/TOTP da Fase 1 (feito diretamente, autenticação é
sensível demais para delegar) e lança 5 subagentes em paralelo em 2 ondas
(eden-inventory, eden-support, eden-hr-timeclock; depois eden-finance,
eden-fiscal, eden-frontend), cada um em worktree isolado, com integração
seletiva manual (barrel, app.module.ts, migrations renomeadas/aplicadas,
build/typecheck/teste ao vivo antes de cada merge).

## Backend

- MFA/TOTP (`apps/api/src/auth/mfa.service.ts`, `crypto/field-encryption.service.ts`):
  login em duas etapas quando `mfa_enabled=true`, `FieldEncryptionService`
  genérico (AES-256-GCM versionado, ADR-0005) reaproveitado por outros
  segredos reversíveis (ex. credencial de equipamento Control iD).
- Inventory: warehouses, stock_movements (ledger append-only), serialized_assets,
  asset_assignments, stock_reservations — invariante "serial/patrimônio/MAC
  nunca duplicado entre ativos ativos" reforçada por índices únicos parciais
  no banco (Master Prompt §15.3).
- Support/Service Desk: tickets com máquina de estados, SLA com pausa/retomada
  em `waiting_customer`/`waiting_third_party` (funções puras testáveis).
- HR-Timeclock (fundação): dispositivos Control iD (senha cifrada), import de
  AFD com parser + CRC-16/KERMIT, `afd_records` imutável sem exceção nem
  para super_admin (sem válvula de escape, diferente de audit_log).
- Fiscal: NCM/CFOP/municípios/naturezas de operação (eden.md módulo 5, MVP de
  5 das ~19 tabelas), product_fiscal_profiles com invariante de único
  profile ativo por billing_component.
- Billing: subscription→billing_run→invoice idempotente (regenerar em draft
  substitui, nunca duplica) e imutável após consolidar (ADR-0008: nunca
  confunde faturamento/documento fiscal/recebimento).
- FKs cruzadas fechadas: quotes/client_registrations/contracts.

## Frontend — primeira leva

- `packages/ui`: Design System real extraído do tema DreamsERP comprado —
  achado que mudou o escopo: o tema já vem em React+Tailwind (não só
  Angular), tokens visuais reais portados (cores, Geist como fonte real,
  divergindo da doc antiga que citava Nunito/Poppins).
- `apps/core-web`: login real (com suporte a MFA), sessão, shell autenticado
  via `AppShell` — substitui a tela estática "Bootstrap da Fase 1".

## Bugs reais encontrados e corrigidos (todos via teste ao vivo, não leitura)

1. **Segurança**: o token de desafio MFA era aceito como access token normal
   pelo `JwtAuthGuard` (mesma assinatura, nenhuma checagem da claim
   `purpose`) — bypass total do segundo fator. Explorado e fechado ao vivo
   contra o container real; teste de regressão em `test/mfa.spec.ts`.
2. Crase solta dentro de comentário SQL na migration de hr-timeclock quebrava
   o template literal JS (`SyntaxError` ao rodar a migration).
3. CORS ausente por completo na API.
4. `turbo.json` não declarava `VITE_API_BASE_URL` como input de build — o
   Turborepo cacheava o bundle do frontend ignorando mudança na env var.
5. `compose.yaml` usava `${VITE_API_BASE_URL:-/api/v1}`, que colidia com a
   variável de mesmo nome do `.env` local — o default nunca era aplicado.
6. Não existia `.dockerignore` — todo build copiava node_modules/.git/
   worktrees de subagentes (665MB) para dentro do contexto Docker.

Decisão do operador incorporada: a API nunca tem domínio público próprio
(só IP interno) — os 3 frontends chamam por caminho relativo `/api/v1`,
proxy externo roteia same-origin; CORS só é relevante para dev local.

Verificado: `pnpm turbo run typecheck build` (28/28), `pnpm --filter
@eden/api test` (30/30, cresceu de 15), todo o lote testado ao vivo via
curl contra os containers reais reconstruídos, incluindo os 6 bugs acima
já fechados e confirmados, e a trilha de auditoria conferida no Postgres.

Claude-Session: https://claude.ai/code/session_01BcWWuKfykGtUweXmHD6cKx

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

packages/ui/src/components/Alert.tsx

@@ -0,0 +1,29 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { cn } from "../utils/cn.js";
+
+export type AlertVariant = "info" | "success" | "warning" | "error";
+
+const variantClasses: Record<AlertVariant, string> = {
+  info: "bg-info-transparent border-info-200 text-info-900",
+  success: "bg-success-transparent border-success-200 text-success-900",
+  warning: "bg-warning-transparent border-warning-200 text-warning-900",
+  error: "bg-danger-transparent border-danger-200 text-danger-900",
+};
+
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  variant?: AlertVariant;
+  title?: ReactNode;
+}
+
+export function Alert({ variant = "info", title, className, children, role, ...rest }: AlertProps) {
+  return (
+    <div
+      role={role ?? (variant === "error" ? "alert" : "status")}
+      className={cn("rounded-md border px-4 py-3 text-sm", variantClasses[variant], className)}
+      {...rest}
+    >
+      {title ? <p className="mb-0.5 font-semibold">{title}</p> : null}
+      {children ? <div>{children}</div> : null}
+    </div>
+  );
+}

packages/ui/src/components/AppShell.tsx

@@ -0,0 +1,120 @@
+import type { ComponentType, ReactNode } from "react";
+import { cn } from "../utils/cn.js";
+
+export interface AppShellNavItem {
+  key: string;
+  label: string;
+  href: string;
+  icon?: ReactNode;
+  active?: boolean;
+}
+
+interface NavLinkRenderProps {
+  href: string;
+  className?: string;
+  children: ReactNode;
+}
+
+export interface AppShellProps {
+  /** e.g. "EDEN Core" — shown next to the logo and used as the img alt text. */
+  appName: string;
+  logoSrc?: string;
+  navItems: AppShellNavItem[];
+  userName?: string;
+  userRole?: string;
+  onLogout?: () => void;
+  children: ReactNode;
+  /**
+   * Router-agnostic navigation: packages/ui doesn't depend on react-router.
+   * Defaults to a plain `<a>` (full page reload); pass e.g.
+   * `({ href, className, children }) => <Link to={href} className={className}>{children}</Link>`
+   * from the consuming app to get client-side routing.
+   */
+  LinkComponent?: ComponentType<NavLinkRenderProps>;
+}
+
+function DefaultLink({ href, className, children }: NavLinkRenderProps) {
+  return (
+    <a href={href} className={className}>
+      {children}
+    </a>
+  );
+}
+
+/**
+ * Visually inspired by the DreamsERP theme's sidebar/topbar
+ * (react/src/components/common-sidebar, common-header) — sidebar with
+ * logo + dark active nav item, white topbar with a bordered bottom edge —
+ * without importing any of the theme's Redux/routing code.
+ */
+export function AppShell({
+  appName,
+  logoSrc,
+  navItems,
+  userName,
+  userRole,
+  onLogout,
+  children,
+  LinkComponent = DefaultLink,
+}: AppShellProps) {
+  return (
+    <div className="flex min-h-screen bg-light">
+      <aside className="hidden w-sidebar shrink-0 flex-col border-r border-border-color bg-white lg:flex">
+        <div className="flex h-topbar items-center gap-2 border-b border-border-color px-4">
+          {logoSrc ? <img src={logoSrc} alt={appName} className="h-7 w-auto" /> : null}
+          <span className="text-sm font-bold text-title">{appName}</span>
+        </div>
+        <nav className="flex flex-1 flex-col gap-1 overflow-y-auto p-3" aria-label="Navegação principal">
+          {navItems.map((item) => (
+            <LinkComponent
+              key={item.key}
+              href={item.href}
+              className={cn(
+                "flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150",
+                item.active
+                  ? "bg-dark text-white"
+                  : "text-gray-900 hover:bg-light-700 hover:text-primary",
+              )}
+            >
+              {item.icon}
+              <span>{item.label}</span>
+            </LinkComponent>
+          ))}
+        </nav>
+      </aside>
+
+      <div className="flex min-w-0 flex-1 flex-col">
+        <header className="flex h-topbar items-center justify-between gap-3 border-b border-border-color bg-white px-4">
+          <div className="flex items-center gap-2 lg:hidden">
+            {logoSrc ? <img src={logoSrc} alt={appName} className="h-6 w-auto" /> : null}
+            <span className="text-sm font-bold text-title">{appName}</span>
+          </div>
+          <div className="ms-auto flex items-center gap-3">
+            {userName ? (
+              <div className="flex items-center gap-2 rounded-md border border-border-color px-2 py-1">
+                <span className="flex size-7 items-center justify-center rounded-full bg-dark text-xs font-semibold text-white">
+                  {userName.charAt(0).toUpperCase()}
+                </span>
+                <div className="hidden text-left leading-tight sm:block">
+                  <p className="text-xs font-semibold text-title">{userName}</p>
+                  {userRole ? <p className="text-[11px] text-default">{userRole}</p> : null}
+                </div>
+              </div>
+            ) : null}
+            {onLogout ? (
+              <button
+                type="button"
+                onClick={onLogout}
+                className="rounded-md border border-border-color px-3 py-1.5 text-xs font-semibold text-default hover:bg-light hover:text-danger"
+              >
+                Sair
+              </button>
+            ) : null}
+          </div>
+        </header>
+
+        <main className="flex-1 p-6">{children}</main>
+      </div>
+    </div>
+  );
+}

packages/ui/src/components/Badge.tsx

@@ -0,0 +1,33 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "../utils/cn.js";
+
+export type BadgeVariant = "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "neutral";
+
+const variantClasses: Record<BadgeVariant, string> = {
+  primary: "bg-primary-transparent text-primary-900",
+  secondary: "bg-secondary-transparent text-secondary-900",
+  success: "bg-success-transparent text-success-900",
+  warning: "bg-warning-transparent text-warning-900",
+  danger: "bg-danger-transparent text-danger-900",
+  info: "bg-info-transparent text-info-900",
+  neutral: "bg-light text-gray-900",
+};
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+}
+
+export function Badge({ variant = "neutral", className, children, ...rest }: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-semibold",
+        variantClasses[variant],
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </span>
+  );
+}

packages/ui/src/components/Button.tsx

@@ -0,0 +1,54 @@
+import { forwardRef } from "react";
+import type { ButtonHTMLAttributes } from "react";
+import { cn } from "../utils/cn.js";
+
+export type ButtonVariant = "primary" | "secondary" | "danger" | "ghost";
+export type ButtonSize = "sm" | "md";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  /** Shows an inline spinner and disables the button — for in-flight submits (e.g. login). */
+  loading?: boolean;
+}
+
+const variantClasses: Record<ButtonVariant, string> = {
+  // Theme source (login.tsx) uses a dark CTA that hovers to the primary-hover
+  // shade, not a flat primary fill — kept here as-is.
+  primary: "bg-dark text-white hover:bg-primary-hover",
+  secondary: "bg-white text-title border border-border-color hover:bg-light",
+  danger: "bg-danger text-white hover:bg-danger-hover",
+  ghost: "bg-transparent text-default hover:bg-light",
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+  sm: "text-xs px-3 py-1.5",
+  md: "text-sm px-4 py-2.5",
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { variant = "primary", size = "md", loading = false, disabled, className, children, ...rest },
+  ref,
+) {
+  return (
+    <button
+      ref={ref}
+      disabled={disabled || loading}
+      className={cn(
+        "inline-flex items-center justify-center gap-2 rounded-md font-semibold cursor-pointer transition-colors duration-200 ease-in-out disabled:cursor-not-allowed disabled:opacity-60",
+        variantClasses[variant],
+        sizeClasses[size],
+        className,
+      )}
+      {...rest}
+    >
+      {loading ? (
+        <span
+          aria-hidden="true"
+          className="size-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+        />
+      ) : null}
+      {children}
+    </button>
+  );
+});

packages/ui/src/components/Card.tsx

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { cn } from "../utils/cn.js";
+
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  title?: ReactNode;
+  actions?: ReactNode;
+}
+
+/** Theme source (auth-pages/login.tsx): `bg-white border border-border-color rounded-md shadow-sm`. */
+export function Card({ title, actions, className, children, ...rest }: CardProps) {
+  return (
+    <div className={cn("rounded-md border border-border-color bg-white shadow-sm", className)} {...rest}>
+      {title || actions ? (
+        <div className="flex items-center justify-between gap-3 border-b border-border-color px-5 py-4">
+          {title ? <h3 className="!text-base font-semibold text-title">{title}</h3> : <span />}
+          {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
+        </div>
+      ) : null}
+      <div className="p-5">{children}</div>
+    </div>
+  );
+}

packages/ui/src/components/Input.tsx

@@ -0,0 +1,50 @@
+import { forwardRef, useId } from "react";
+import type { InputHTMLAttributes } from "react";
+import { cn } from "../utils/cn.js";
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  /** Validation/server error message — shown below the field, field border turns danger. */
+  error?: string;
+  /** Helper text shown below the field when there's no error. */
+  hint?: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { label, error, hint, id, className, ...rest },
+  ref,
+) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+
+  return (
+    <div className="flex flex-col gap-1">
+      {label ? (
+        <label htmlFor={inputId} className="text-sm font-semibold text-gray-900">
+          {label}
+        </label>
+      ) : null}
+      <input
+        ref={ref}
+        id={inputId}
+        aria-invalid={error ? true : undefined}
+        aria-describedby={error ? `${inputId}-error` : hint ? `${inputId}-hint` : undefined}
+        className={cn(
+          "w-full rounded-md border bg-white px-3 py-2.5 text-sm text-title placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/30",
+          error ? "border-danger" : "border-border-color",
+          className,
+        )}
+        {...rest}
+      />
+      {error ? (
+        <p id={`${inputId}-error`} className="text-xs text-danger">
+          {error}
+        </p>
+      ) : hint ? (
+        <p id={`${inputId}-hint`} className="text-xs text-default">
+          {hint}
+        </p>
+      ) : null}
+    </div>
+  );
+});

packages/ui/src/components/PageHeader.tsx

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { cn } from "../utils/cn.js";
+
+export interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  title: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+}
+
+export function PageHeader({ title, description, actions, className, ...rest }: PageHeaderProps) {
+  return (
+    <div className={cn("flex flex-wrap items-start justify-between gap-3 pb-4", className)} {...rest}>
+      <div>
+        <h1 className="!text-xl font-bold text-title">{title}</h1>
+        {description ? <p className="mt-1 text-sm text-default">{description}</p> : null}
+      </div>
+      {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
+    </div>
+  );
+}