@snksergio/design-system 0.62.0 → 0.63.0

package/dist-lib/ai/exemplos/edit-page/edit-page-screen.tsx

@@ -0,0 +1,234 @@
+import { useRef, useState } from "react";
+import { CreditCard, MapPin, Package, User } from "lucide-react";
+import { Button } from "@/components/ui/Button/button";
+import { ChipGroup, ChipGroupItem } from "@/components/ui/Chip";
+import { PageHeader } from "@/components/ui/PageHeader";
+import {
+  FormField,
+  FormFieldInput,
+  FormFieldSelect,
+} from "@/components/ui/FormField";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/shadcn/select";
+import { Input } from "@/components/shadcn/input";
+import { SectionCard } from "./components/section-card";
+import { StepNav, type Step } from "./components/StepNav";
+
+const STEPS: Step[] = [
+  {
+    id: "produtos",
+    icon: Package,
+    title: "Selecionar produtos",
+    description: "Adicione produtos à lista de compra.",
+  },
+  {
+    id: "cliente",
+    icon: User,
+    title: "Dados do cliente",
+    description: "Nome, e-mail e telefone do cliente.",
+  },
+  {
+    id: "endereco",
+    icon: MapPin,
+    title: "Endereço",
+    description: "Informe o endereço de entrega.",
+  },
+  {
+    id: "pagamento",
+    icon: CreditCard,
+    title: "Pagamento",
+    description: "Método e dados do pagamento.",
+  },
+];
+
+const COUNTRY_OPTIONS = [
+  { value: "br", label: "Brasil" },
+  { value: "pt", label: "Portugal" },
+  { value: "us", label: "Estados Unidos" },
+];
+
+const PAYMENT_OPTIONS = [
+  { value: "card", label: "Cartão de crédito/débito" },
+  { value: "pix", label: "PIX" },
+  { value: "boleto", label: "Boleto" },
+];
+
+const DDI_OPTIONS = ["+55", "+1", "+351"];
+
+/**
+ * EditPageScreen — tela de edição de pedido (formulário em etapas). Mesmo
+ * modelo de design da OrderDetail (SectionCard) + nav lateral (stepper).
+ * Toggle de layout: 1 coluna (igual à referência) ou 2 colunas. Domínio
+ * iGreen (energia solar).
+ */
+export function EditPageScreen() {
+  const [cols, setCols] = useState<"one" | "two">("one");
+  const [activeStep, setActiveStep] = useState("produtos");
+
+  const sectionRefs = useRef<Record<string, HTMLDivElement | null>>({});
+
+  const goTo = (id: string) => {
+    setActiveStep(id);
+    sectionRefs.current[id]?.scrollIntoView({ behavior: "smooth", block: "start" });
+  };
+
+  const setRef = (id: string) => (el: HTMLDivElement | null) => {
+    sectionRefs.current[id] = el;
+  };
+
+  return (
+    // Conteúdo da página (sem shell). Embrulhe no seu AppShell/layout — o
+    // parent precisa dar altura (h-full/flex) pra página preencher.
+    <div className="flex flex-col h-full min-h-0 gap-gp-2xl">
+      <PageHeader
+        title="Editar pedido"
+        description="Pedido #84021 · atualize produtos, cliente, entrega e pagamento."
+        hideTextOnMobile={false}
+        actions={
+          <ChipGroup
+            type="single"
+            value={cols}
+            onValueChange={(v) => v && setCols(v as "one" | "two")}
+            size="sm"
+            ariaLabel="Layout das colunas"
+          >
+            <ChipGroupItem value="one">1 coluna</ChipGroupItem>
+            <ChipGroupItem value="two">2 colunas</ChipGroupItem>
+          </ChipGroup>
+        }
+      />
+
+      <div className="grid grid-cols-1 items-start gap-gp-4xl pb-pad-6xl lg:grid-cols-[260px_1fr]">
+        {/* Nav lateral */}
+        <StepNav
+          steps={STEPS}
+          activeId={activeStep}
+          onSelect={goTo}
+          className="lg:sticky lg:top-gp-2xl"
+        />
+
+        {/* Seções do formulário */}
+        <div
+          className={
+            cols === "two"
+              ? "grid grid-cols-1 items-start gap-gp-4xl xl:grid-cols-2"
+              : "flex flex-col gap-gp-4xl"
+          }
+        >
+          <div ref={setRef("produtos")} className="scroll-mt-gp-2xl">
+            <SectionCard title="Selecionar produtos">
+              <FormFieldInput
+                label="Buscar produto"
+                placeholder="Busque por nome ou SKU..."
+              />
+            </SectionCard>
+          </div>
+
+          <div ref={setRef("cliente")} className="scroll-mt-gp-2xl">
+            <SectionCard title="Dados do cliente">
+              <div className="flex flex-col gap-form-gap">
+                <div className="grid grid-cols-1 gap-form-gap sm:grid-cols-2">
+                  <FormFieldInput label="Nome" placeholder="Nome" />
+                  <FormFieldInput label="Usuário" placeholder="Nome de usuário" />
+                </div>
+                <FormFieldInput
+                  label="Email"
+                  type="email"
+                  placeholder="email@exemplo.com"
+                />
+                <FormField label="Telefone">
+                  {({ id }) => (
+                    <div className="flex gap-gp-sm">
+                      <Select defaultValue="+55">
+                        <SelectTrigger className="w-24 shrink-0">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {DDI_OPTIONS.map((d) => (
+                            <SelectItem key={d} value={d}>
+                              {d}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <Input
+                        id={id}
+                        type="tel"
+                        placeholder="Número de telefone"
+                        className="flex-1"
+                      />
+                    </div>
+                  )}
+                </FormField>
+              </div>
+            </SectionCard>
+          </div>
+
+          <div ref={setRef("endereco")} className="scroll-mt-gp-2xl">
+            <SectionCard title="Endereço">
+              <div className="flex flex-col gap-form-gap">
+                <FormFieldSelect
+                  label="País"
+                  placeholder="Selecione o país"
+                  options={COUNTRY_OPTIONS}
+                />
+                <FormFieldInput label="Endereço" placeholder="Rua, número" />
+                <div className="grid grid-cols-1 gap-form-gap sm:grid-cols-2">
+                  <FormFieldInput label="Cidade" placeholder="Cidade" />
+                  <FormFieldInput label="CEP" placeholder="00000-000" />
+                </div>
+              </div>
+            </SectionCard>
+          </div>
+
+          <div ref={setRef("pagamento")} className="scroll-mt-gp-2xl">
+            <SectionCard title="Pagamento">
+              <div className="flex flex-col gap-form-gap">
+                <FormFieldSelect
+                  label="Método de pagamento"
+                  defaultValue="card"
+                  options={PAYMENT_OPTIONS}
+                />
+                <FormFieldInput
+                  label="Nome no cartão"
+                  placeholder="Nome impresso no cartão"
+                />
+                <FormFieldInput
+                  label="Número do cartão"
+                  placeholder="0000 0000 0000 0000"
+                  inputMode="numeric"
+                />
+                <div className="grid grid-cols-1 gap-form-gap sm:grid-cols-2">
+                  <FormFieldInput label="Validade" placeholder="MM/AA" />
+                  <FormFieldInput label="CVV" placeholder="123" />
+                </div>
+              </div>
+            </SectionCard>
+          </div>
+
+          {/* Footer de ações */}
+          <div
+            className={
+              "flex items-center justify-end gap-gp-md" +
+              (cols === "two" ? " xl:col-span-2" : "")
+            }
+          >
+            <Button variant="outline" color="secondary" size="md">
+              Cancelar
+            </Button>
+            <Button variant="filled" color="primary" size="md">
+              Salvar pedido
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default EditPageScreen;

package/dist-lib/ai/exemplos/edit-page/index.ts

@@ -0,0 +1 @@
+export { EditPageScreen, default } from "./edit-page-screen";

package/dist-lib/ai/exemplos/finance/_table-data.ts

@@ -0,0 +1,57 @@
+/**
+ * Dados base compartilhados (extraídos do showcase TableDoc do DS).
+ * Mantém o exemplo autossuficiente — sem dependência da infra de preview.
+ */
+
+export const STATUSES: Record<string, { label: string; color: string }> = {
+  active: { label: "Ativo", color: "var(--color-fg-success)" },
+  pending: { label: "Pendente", color: "var(--color-fg-warning)" },
+  paused: { label: "Pausado", color: "var(--color-fg-info)" },
+  inactive: { label: "Inativo", color: "var(--color-fg-muted)" },
+};
+
+export type CategoryKind = "warning" | "info" | "success" | "neutral";
+export const CATEGORIES: Record<string, { label: string; kind: CategoryKind }> = {
+  royal: { label: "Royal", kind: "warning" },
+  licenciado: { label: "Licenciado", kind: "info" },
+  lead: { label: "Lead", kind: "success" },
+};
+
+export const AGENTS: Record<string, { name: string; initials: string; color: string }> = {
+  you: { name: "Voce", initials: "VC", color: "#0a3a2e" },
+  aline: { name: "Aline Castro", initials: "AC", color: "#f59e0b" },
+  carlos: { name: "Carlos Souza", initials: "CS", color: "#8754ec" },
+  maria: { name: "Maria Lima", initials: "ML", color: "#ef4444" },
+};
+
+export type ClientRow = {
+  id: string;
+  name: string;
+  initials: string;
+  avatarColor: string;
+  email: string;
+  phone: string;
+  statusId: keyof typeof STATUSES;
+  categoryId: keyof typeof CATEGORIES;
+  location: string;
+  value: number;
+  agentId: keyof typeof AGENTS;
+  createdAt: number;
+  lastContact: number;
+};
+
+const BASE_DATE = new Date("2026-04-15T12:00:00Z").getTime();
+const DAY_MS = 86400000;
+
+export const CLIENTS_MOCK: ClientRow[] = [
+  { id: "CLI-2401", name: "Maria Silva", initials: "MS", avatarColor: "#f59e0b", email: "maria.silva@example.com", phone: "+55 11 91234-5678", statusId: "active", categoryId: "royal", location: "São Paulo, SP", value: 4800, agentId: "you", createdAt: BASE_DATE - 65 * DAY_MS, lastContact: BASE_DATE - 2 * DAY_MS },
+  { id: "CLI-2402", name: "João Santos", initials: "JS", avatarColor: "#0a3a2e", email: "joao.santos@example.com", phone: "+55 11 92345-6789", statusId: "pending", categoryId: "licenciado", location: "Rio de Janeiro, RJ", value: 12300, agentId: "aline", createdAt: BASE_DATE - 58 * DAY_MS, lastContact: BASE_DATE - 5 * DAY_MS },
+  { id: "CLI-2403", name: "Carlos Oliveira", initials: "CO", avatarColor: "#8754ec", email: "carlos.oliveira@example.com", phone: "+55 11 93456-7890", statusId: "active", categoryId: "lead", location: "Belo Horizonte, MG", value: 2150, agentId: "carlos", createdAt: BASE_DATE - 51 * DAY_MS, lastContact: BASE_DATE - 1 * DAY_MS },
+  { id: "CLI-2404", name: "Ana Costa", initials: "AC", avatarColor: "#1cb280", email: "ana.costa@example.com", phone: "+55 11 94567-8901", statusId: "paused", categoryId: "royal", location: "Porto Alegre, RS", value: 8900, agentId: "maria", createdAt: BASE_DATE - 44 * DAY_MS, lastContact: BASE_DATE - 12 * DAY_MS },
+  { id: "CLI-2405", name: "Pedro Pereira", initials: "PP", avatarColor: "#ef4444", email: "pedro.pereira@example.com", phone: "+55 11 95678-9012", statusId: "inactive", categoryId: "lead", location: "Curitiba, PR", value: 1100, agentId: "you", createdAt: BASE_DATE - 37 * DAY_MS, lastContact: BASE_DATE - 30 * DAY_MS },
+  { id: "CLI-2406", name: "Lúcia Almeida", initials: "LA", avatarColor: "#f9a47a", email: "lucia.almeida@example.com", phone: "+55 11 96789-0123", statusId: "active", categoryId: "licenciado", location: "Recife, PE", value: 6750, agentId: "aline", createdAt: BASE_DATE - 30 * DAY_MS, lastContact: BASE_DATE - 3 * DAY_MS },
+  { id: "CLI-2407", name: "Roberto Souza", initials: "RS", avatarColor: "#0088cc", email: "roberto.souza@example.com", phone: "+55 11 97890-1234", statusId: "pending", categoryId: "royal", location: "São Paulo, SP", value: 15200, agentId: "carlos", createdAt: BASE_DATE - 23 * DAY_MS, lastContact: BASE_DATE - 7 * DAY_MS },
+  { id: "CLI-2408", name: "Fernanda Lima", initials: "FL", avatarColor: "#e1306c", email: "fernanda.lima@example.com", phone: "+55 11 98901-2345", statusId: "active", categoryId: "lead", location: "Rio de Janeiro, RJ", value: 3400, agentId: "maria", createdAt: BASE_DATE - 16 * DAY_MS, lastContact: BASE_DATE - 1 * DAY_MS },
+  { id: "CLI-2409", name: "Bruno Rodrigues", initials: "BR", avatarColor: "#70c748", email: "bruno.rodrigues@example.com", phone: "+55 11 99012-3456", statusId: "paused", categoryId: "licenciado", location: "Belo Horizonte, MG", value: 5600, agentId: "you", createdAt: BASE_DATE - 9 * DAY_MS, lastContact: BASE_DATE - 6 * DAY_MS },
+  { id: "CLI-2410", name: "Camila Ribeiro", initials: "CR", avatarColor: "#8754ec", email: "camila.ribeiro@example.com", phone: "+55 11 90123-4567", statusId: "active", categoryId: "royal", location: "Porto Alegre, RS", value: 9800, agentId: "aline", createdAt: BASE_DATE - 2 * DAY_MS, lastContact: BASE_DATE },
+];

package/dist-lib/ai/exemplos/finance/clientes-financeiro-mocks.ts

@@ -0,0 +1,227 @@
+import { CLIENTS_87 } from "./clientes-showcase-mocks";
+import type {
+  AccountStatus,
+  BankAccount,
+  BankId,
+  FinanceClientRow,
+  FinanceTransaction,
+  PaymentMethod,
+} from "./clientes-financeiro.types";
+
+/* ── Banks (lookup com nome + cor temática) ─────────────────────── */
+
+export const BANKS: Record<BankId, { name: string; color: string; initials: string }> = {
+  bb:         { name: "Banco do Brasil", color: "#FAE128", initials: "BB" },
+  itau:       { name: "Itaú",            color: "#EC7000", initials: "IT" },
+  nubank:     { name: "Nubank",          color: "#820AD1", initials: "NU" },
+  santander:  { name: "Santander",       color: "#EC0000", initials: "SA" },
+  bradesco:   { name: "Bradesco",        color: "#CC092F", initials: "BR" },
+};
+
+const BANK_IDS: BankId[] = ["bb", "itau", "nubank", "santander", "bradesco"];
+
+/** Contas mocadas pra o modal Sacar — opções fixas. */
+export const SACAR_ACCOUNT_OPTIONS: BankAccount[] = [
+  { bank: "bb",        bankName: "Banco do Brasil", agency: "0001", account: "12345-6" },
+  { bank: "nubank",    bankName: "Nubank",          agency: "0001", account: "98765-4" },
+  { bank: "itau",      bankName: "Itaú",            agency: "1234", account: "55555-1" },
+];
+
+/* ── Helpers de geração ─────────────────────────────────────────── */
+
+/** Gera dado bancário pseudo-determinístico baseado no índice do cliente. */
+function makeAccount(idx: number): BankAccount {
+  const bank = BANK_IDS[idx % BANK_IDS.length];
+  const agency = String(1000 + (idx * 37) % 9000).padStart(4, "0");
+  const accountSeq = String(10000 + (idx * 113) % 89999).padStart(5, "0");
+  const dv = (idx * 7) % 10;
+  return {
+    bank,
+    bankName: BANKS[bank].name,
+    agency,
+    account: `${accountSeq}-${dv}`,
+  };
+}
+
+/** Saldo pseudo-determinístico — varia entre R$ 150 e R$ 25.000. */
+function makeBalance(idx: number): number {
+  const base = 150 + (idx * 317) % 24850;
+  // arredonda pra 2 casas
+  return Math.round(base * 100) / 100;
+}
+
+/** Razão social pseudo-determinística — combina nome do contato + sufixo. */
+const COMPANY_SUFFIXES = [
+  "Solar Energy LTDA",
+  "Energia Renovável ME",
+  "Eco Solutions S.A.",
+  "Green Power LTDA",
+  "Solar Tech ME",
+  "Energy Brasil S.A.",
+];
+function makeCompanyName(idx: number, contactName: string): string {
+  // Pega o primeiro nome do contato e combina com sufixo PJ
+  const firstName = contactName.split(" ")[0];
+  const suffix = COMPANY_SUFFIXES[idx % COMPANY_SUFFIXES.length];
+  return `${firstName} ${suffix}`;
+}
+
+/** CNPJ pseudo-determinístico — gera formato XX.XXX.XXX/0001-XX baseado no idx. */
+function makeCNPJ(idx: number): string {
+  // Bloco 1: 2 dígitos
+  const b1 = String(10 + (idx * 13) % 89).padStart(2, "0");
+  // Bloco 2: 3 dígitos
+  const b2 = String(100 + (idx * 71) % 899).padStart(3, "0");
+  // Bloco 3: 3 dígitos
+  const b3 = String(100 + (idx * 127) % 899).padStart(3, "0");
+  // DV: 2 dígitos
+  const dv = String(10 + (idx * 53) % 89).padStart(2, "0");
+  return `${b1}.${b2}.${b3}/0001-${dv}`;
+}
+
+/* ── Situação da conta (badge + eixo do Kanban) ─────────────────── */
+
+export const ACCOUNT_STATUS: Record<
+  AccountStatus,
+  { label: string; color: "warning" | "success" | "info" | "danger" }
+> = {
+  pendente:   { label: "Pendente",      color: "warning" },
+  ativo:      { label: "Ativo",         color: "success" },
+  negociacao: { label: "Em negociação", color: "info" },
+  bloqueado:  { label: "Bloqueado",     color: "danger" },
+};
+
+const ACCOUNT_STATUS_IDS: AccountStatus[] = [
+  "ativo",
+  "ativo",
+  "pendente",
+  "ativo",
+  "negociacao",
+  "ativo",
+  "bloqueado",
+]; // distribuição enviesada p/ "ativo" (realista) via módulo do índice
+
+const PAYMENT_METHOD_SETS: PaymentMethod[][] = [
+  ["pix"],
+  ["pix", "ted"],
+  ["pix", "boleto"],
+  ["pix", "ted", "boleto"],
+  ["ted", "boleto"],
+];
+
+const TRANSACTION_DESCRIPTIONS: Record<"in" | "out", string[]> = {
+  in: ["Comissão de venda", "Bônus de meta", "Repasse de royalty", "Estorno"],
+  out: ["Saque para conta", "Taxa de serviço", "Antecipação", "Ajuste de saldo"],
+};
+
+const NOW = new Date("2026-06-10T12:00:00Z").getTime();
+const DAY = 86400000;
+
+/** Status pseudo-determinístico baseado no índice. */
+function makeAccountStatus(idx: number): AccountStatus {
+  return ACCOUNT_STATUS_IDS[idx % ACCOUNT_STATUS_IDS.length];
+}
+
+/** Volume mensal pseudo-determinístico — R$ 2k a R$ 80k. */
+function makeMonthlyVolume(idx: number): number {
+  return Math.round((2000 + ((idx * 911) % 78000)) * 100) / 100;
+}
+
+/** Taxa de comissão 4%–14% (1 casa). */
+function makeCommissionRate(idx: number): number {
+  return Math.round((4 + ((idx * 37) % 100) / 10) * 10) / 10;
+}
+
+/** Última movimentação — entre 0 e ~45 dias atrás. */
+function makeLastMovement(idx: number): number {
+  return NOW - ((idx * 53) % 45) * DAY - ((idx * 17) % 24) * 3600000;
+}
+
+/** Extrato pseudo-determinístico — 4 a 6 movimentações recentes. */
+function makeTransactions(idx: number, lastMovement: number): FinanceTransaction[] {
+  const count = 4 + (idx % 3);
+  return Array.from({ length: count }, (_, i) => {
+    const type: "in" | "out" = (idx + i) % 3 === 0 ? "out" : "in";
+    const pool = TRANSACTION_DESCRIPTIONS[type];
+    return {
+      id: `TX-${idx}-${i}`,
+      date: lastMovement - i * (2 * DAY + ((idx * 7) % 5) * DAY),
+      type,
+      amount: Math.round((120 + ((idx * 211 + i * 67) % 9800)) * 100) / 100,
+      description: pool[(idx + i) % pool.length],
+    };
+  });
+}
+
+/* ── Dataset financeiro — 87 clientes com banco + saldo ─────────── */
+
+export const FINANCE_CLIENTS: FinanceClientRow[] = CLIENTS_87.map((c, idx) => {
+  const lastMovement = makeLastMovement(idx);
+  return {
+    ...c,
+    // Force categoria "licenciado" pra tema financeiro (afiliados/parceiros PJ)
+    categoryId: "licenciado",
+    bankAccount: makeAccount(idx),
+    availableBalance: makeBalance(idx),
+    monthlyVolume: makeMonthlyVolume(idx),
+    commissionRate: makeCommissionRate(idx),
+    accountStatus: makeAccountStatus(idx),
+    autoWithdraw: idx % 3 !== 0, // ~2/3 com saque automático
+    paymentMethods: PAYMENT_METHOD_SETS[idx % PAYMENT_METHOD_SETS.length],
+    lastMovement,
+    transactions: makeTransactions(idx, lastMovement),
+    cnpj: makeCNPJ(idx),
+    companyName: makeCompanyName(idx, c.name),
+  };
+});
+
+/* ── Formatters ─────────────────────────────────────────────────── */
+
+export function formatBRL(value: number): string {
+  return new Intl.NumberFormat("pt-BR", {
+    style: "currency",
+    currency: "BRL",
+  }).format(value);
+}
+
+export function formatBankAccountShort(acc: BankAccount): string {
+  // Ex: "BB · Ag 0001 · 12345-6"
+  return `${BANKS[acc.bank].initials} · Ag ${acc.agency} · ${acc.account}`;
+}
+
+/* ── Estatísticas agregadas (KPIs do header da página) ──────────── */
+
+export const FINANCE_KPIS = {
+  /** Total disponível pra saque em todos os clientes. */
+  totalAvailable: FINANCE_CLIENTS.reduce((sum, c) => sum + c.availableBalance, 0),
+  /** Quantidade de clientes com saldo > R$ 5.000 (pra destacar high-value). */
+  highValueCount: FINANCE_CLIENTS.filter((c) => c.availableBalance > 5000).length,
+  /** Saldo médio. */
+  averageBalance: 0,
+  /** Contas em risco (negociação + bloqueado) — alinha com a preset "Inadimplentes". */
+  atRiskCount: FINANCE_CLIENTS.filter(
+    (c) => c.accountStatus === "negociacao" || c.accountStatus === "bloqueado",
+  ).length,
+};
+FINANCE_KPIS.averageBalance =
+  FINANCE_KPIS.totalAvailable / FINANCE_CLIENTS.length;
+
+/** Label curto pra movimentação relativa ("hoje", "há 3 dias"). */
+export function formatRelativeDays(ts: number): string {
+  const days = Math.floor((NOW - ts) / DAY);
+  if (days <= 0) return "hoje";
+  if (days === 1) return "ontem";
+  if (days < 30) return `há ${days} dias`;
+  const months = Math.floor(days / 30);
+  return months === 1 ? "há 1 mês" : `há ${months} meses`;
+}
+
+/** Data curta "09 fev" / "09 fev, 14:30" pro extrato. */
+export function formatDateTimeShort(ts: number): string {
+  return new Date(ts).toLocaleString("pt-BR", {
+    day: "2-digit",
+    month: "short",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}

package/dist-lib/ai/exemplos/finance/clientes-financeiro.types.ts

@@ -0,0 +1,75 @@
+/**
+ * Types do ClientesFinanceiroShowcase — extensão financeira do ClientesShowcase.
+ *
+ * Reaproveita estrutura de cliente mas adiciona dados bancários + saldo
+ * disponível pra suportar a action de Saque.
+ */
+
+import type { ClientRow } from "./_table-data";
+
+/** Banco suportado nos mocks (com logo/cor próprios). */
+export type BankId = "bb" | "itau" | "nubank" | "santander" | "bradesco";
+
+export type BankAccount = {
+  bank: BankId;
+  bankName: string;
+  agency: string;   // ex: "1234"
+  account: string;  // ex: "98765-4"
+};
+
+/**
+ * Situação financeira da conta (pipeline) — vira coluna `badge` (chip colorido)
+ * E o eixo do board Kanban. Fluxo: pendente → ativo → negociação → bloqueado.
+ */
+export type AccountStatus = "pendente" | "ativo" | "negociacao" | "bloqueado";
+
+/** Método de recebimento aceito pelo licenciado (coluna `tags`). */
+export type PaymentMethod = "pix" | "ted" | "boleto";
+
+/** Movimentação financeira — usada no extrato da row expansion. */
+export type FinanceTransaction = {
+  id: string;
+  /** Timestamp (ms) da movimentação. */
+  date: number;
+  /** Entrada (crédito) ou saída (saque/débito). */
+  type: "in" | "out";
+  /** Valor em BRL (sempre positivo; `type` define o sinal). */
+  amount: number;
+  description: string;
+};
+
+/** Cliente com dados financeiros — estende ClientRow. */
+export type FinanceClientRow = ClientRow & {
+  /** Saldo disponível pra saque (BRL). */
+  availableBalance: number;
+  /** Volume financeiro movimentado no mês (BRL). */
+  monthlyVolume: number;
+  /** Taxa de comissão do licenciado (0–100, editável inline). */
+  commissionRate: number;
+  /** Situação da conta — chip + eixo do Kanban. */
+  accountStatus: AccountStatus;
+  /** Saque automático habilitado (boolean editável inline). */
+  autoWithdraw: boolean;
+  /** Métodos de recebimento aceitos (tags). */
+  paymentMethods: PaymentMethod[];
+  /** Timestamp (ms) da última movimentação financeira. */
+  lastMovement: number;
+  /** Extrato das últimas movimentações (row expansion). */
+  transactions: FinanceTransaction[];
+  /** Dados bancários do cliente. */
+  bankAccount: BankAccount;
+  /** CNPJ do cliente (formato XX.XXX.XXX/0001-XX). */
+  cnpj: string;
+  /** Razão social da empresa (nome PJ). */
+  companyName: string;
+};
+
+/**
+ * Form data do modal Sacar — usuário escolhe valor + conta destino.
+ * `clientId` é injetado pelo trigger (row da action).
+ */
+export type SacarFormData = {
+  clientId: string;
+  amount: number;
+  selectedAccountBank: BankId;
+};