@snksergio/design-system 0.62.0 → 0.63.0

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

@@ -0,0 +1,117 @@
+import {
+  CLIENTS_MOCK,
+  STATUSES,
+  CATEGORIES,
+  AGENTS,
+  type ClientRow,
+} from "./_table-data";
+
+/* ── Dataset 87 clientes (bate com badge do print) ─────────────── */
+
+export const CLIENTS_87: ClientRow[] = Array.from({ length: 9 }, (_, batch) =>
+  CLIENTS_MOCK.map((row, i) => ({
+    ...row,
+    id: `CLI-${2400 + batch * 10 + i}`,
+  })),
+)
+  .flat()
+  .slice(0, 87);
+
+/* ── Lookups por categoria de status (column color mapping) ────── */
+
+export const STATUS_COLOR_MAP: Record<string, string> = {
+  active: "success",
+  pending: "warning",
+  paused: "info",
+  inactive: "neutral",
+};
+
+export const STATUS_DOT: Record<string, string> = {
+  active: "var(--color-fg-success)",
+  pending: "var(--color-fg-warning)",
+  paused: "var(--color-fg-info)",
+  inactive: "var(--color-fg-muted)",
+};
+
+export const CATEGORY_KIND: Record<string, "warning" | "info" | "success"> = {
+  royal: "warning",
+  licenciado: "info",
+  lead: "success",
+};
+
+/* ── Options pra filters/selects ───────────────────────────────── */
+
+export const STATUS_OPTIONS = Object.entries(STATUSES).map(([v, m]) => ({
+  value: v,
+  label: m.label,
+  color: STATUS_COLOR_MAP[v] ?? "neutral",
+}));
+
+export const CATEGORY_OPTIONS = Object.entries(CATEGORIES).map(([v, m]) => ({
+  value: v,
+  label: m.label,
+  color: m.kind === "neutral" ? "neutral" : m.kind,
+}));
+
+export const AGENT_OPTIONS = Object.entries(AGENTS).map(([v, a]) => ({
+  value: v,
+  label: a.name,
+}));
+
+/* ── Avatar lookup pro column type "user" ──────────────────────── */
+
+export const AGENTS_LOOKUP = Object.fromEntries(
+  Object.entries(AGENTS).map(([id, a]) => [
+    id,
+    {
+      name: a.name,
+      initials: a.name
+        .split(" ")
+        .map((s) => s[0])
+        .join("")
+        .slice(0, 2),
+      color: a.color,
+    },
+  ]),
+);
+
+/* ── Kanban columns (1 por status) ─────────────────────────────── */
+
+export const KANBAN_COLUMNS = Object.entries(STATUSES).map(([id, s]) => ({
+  id,
+  label: s.label,
+  dotColor: STATUS_DOT[id] ?? "var(--color-fg-muted)",
+}));
+
+/* ── Cidades pro select do drawer ──────────────────────────────── */
+
+export const CITIES = [
+  "São Paulo, SP",
+  "Rio de Janeiro, RJ",
+  "Belo Horizonte, MG",
+  "Porto Alegre, RS",
+  "Curitiba, PR",
+  "Recife, PE",
+  "Salvador, BA",
+  "Fortaleza, CE",
+  "Brasília, DF",
+  "Manaus, AM",
+];
+
+/* ── Helpers de formatação ─────────────────────────────────────── */
+
+export function formatBRL(value: number) {
+  return value.toLocaleString("pt-BR", {
+    style: "currency",
+    currency: "BRL",
+    minimumFractionDigits: 2,
+  });
+}
+
+export function formatShortDate(ms: number) {
+  if (!ms) return "—";
+  const d = new Date(ms);
+  const day = d.getDate().toString().padStart(2, "0");
+  const months = ["jan", "fev", "mar", "abr", "mai", "jun", "jul", "ago", "set", "out", "nov", "dez"];
+  return `${day} ${months[d.getMonth()]}`;
+}

package/dist-lib/ai/exemplos/finance/clientes-showcase.styles.ts

@@ -0,0 +1,13 @@
+import { tv } from "@/utils/tv";
+
+/**
+ * Layout em grid de 2 colunas usado dentro do drawer pra pares de campos
+ * (Email + WhatsApp, Cidade + Valor).
+ * `gap-form-gap` (20px) = token DS pra spacing entre FormField units (L-024).
+ */
+export const drawerFormStyles = tv({
+  slots: {
+    twoCols: "grid grid-cols-2 gap-form-gap",
+    statusDot: "inline-block size-[8px] rounded-radius-full mr-gp-xs shrink-0",
+  },
+});

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

@@ -0,0 +1,16 @@
+import type { STATUSES, CATEGORIES } from "./_table-data";
+
+/**
+ * Payload do formulário do drawer "Novo cliente".
+ * Consumido por <NovoClienteDrawer onSubmit={...}> no main page.
+ */
+export type NovoClienteFormData = {
+  name: string;
+  email: string;
+  whatsapp: string;
+  statusId: keyof typeof STATUSES;
+  categoryId: keyof typeof CATEGORIES;
+  city: string;
+  value: number;
+  notes: string;
+};

package/dist-lib/ai/exemplos/finance/components/EditarFinanceDrawer/editar-finance-drawer.tsx

@@ -0,0 +1,241 @@
+import { useEffect, useState } from "react";
+import { Panel } from "@/components/ui/Panel";
+import { Button } from "@/components/ui/Button/button";
+import {
+  FormField,
+  FormFieldInput,
+  FormFieldSelect,
+} from "@/components/ui/FormField";
+import { ChipGroup, ChipGroupItem } from "@/components/ui/Chip";
+import { Switch } from "@/components/shadcn/switch";
+import { AGENTS } from "../../_table-data";
+import { ACCOUNT_STATUS, BANKS } from "../../clientes-financeiro-mocks";
+import type {
+  AccountStatus,
+  BankId,
+  FinanceClientRow,
+  PaymentMethod,
+} from "../../clientes-financeiro.types";
+
+const PAYMENT_METHODS: { value: PaymentMethod; label: string }[] = [
+  { value: "pix", label: "PIX" },
+  { value: "ted", label: "TED" },
+  { value: "boleto", label: "Boleto" },
+];
+
+const BANK_OPTIONS = (Object.keys(BANKS) as BankId[]).map((id) => ({
+  value: id,
+  label: BANKS[id].name,
+}));
+
+const AGENT_OPTIONS = Object.entries(AGENTS).map(([id, a]) => ({
+  value: id,
+  label: a.name,
+}));
+
+const STATUS_OPTIONS = (
+  Object.entries(ACCOUNT_STATUS) as [AccountStatus, (typeof ACCOUNT_STATUS)[AccountStatus]][]
+).map(([value, m]) => ({ value, label: m.label, color: m.color }));
+
+/** Campos editáveis da row financeira. */
+export type FinanceEditPatch = {
+  name: string;
+  email: string;
+  phone: string;
+  companyName: string;
+  cnpj: string;
+  accountStatus: AccountStatus;
+  bank: BankId;
+  commissionRate: number;
+  autoWithdraw: boolean;
+  paymentMethods: PaymentMethod[];
+  agentId: string;
+};
+
+export type EditarFinanceDrawerProps = {
+  /** Row em edição — null fecha o drawer. */
+  client: FinanceClientRow | null;
+  onOpenChange: (open: boolean) => void;
+  /** Salva as alterações (mock no showcase). */
+  onSave?: (id: string, patch: FinanceEditPatch) => void;
+};
+
+/**
+ * Drawer "Editar licenciado" — campos REAIS da row financeira (não o form
+ * genérico de criação). Panel + FormField (Input/Select) + ChipGroup + Switch.
+ */
+export function EditarFinanceDrawer({
+  client,
+  onOpenChange,
+  onSave,
+}: EditarFinanceDrawerProps) {
+  const [form, setForm] = useState<FinanceEditPatch | null>(null);
+
+  // (Re)hidrata o form ao abrir/trocar de cliente.
+  useEffect(() => {
+    if (!client) return;
+    setForm({
+      name: client.name,
+      email: client.email,
+      phone: client.phone,
+      companyName: client.companyName,
+      cnpj: client.cnpj,
+      accountStatus: client.accountStatus,
+      bank: client.bankAccount.bank,
+      commissionRate: client.commissionRate,
+      autoWithdraw: client.autoWithdraw,
+      paymentMethods: client.paymentMethods,
+      agentId: client.agentId as string,
+    });
+  }, [client]);
+
+  const patch = (p: Partial<FinanceEditPatch>) =>
+    setForm((f) => (f ? { ...f, ...p } : f));
+
+  const canSave = !!form && form.name.trim().length > 0;
+
+  const handleSave = () => {
+    if (!client || !form || !canSave) return;
+    onSave?.(client.id, form);
+    onOpenChange(false);
+  };
+
+  return (
+    <Panel
+      open={client !== null}
+      onOpenChange={onOpenChange}
+      title={client ? `Editar — ${client.name}` : "Editar licenciado"}
+      side="right"
+      size="md"
+      footer={
+        <>
+          <Button variant="outline" color="secondary" size="md" onClick={() => onOpenChange(false)}>
+            Cancelar
+          </Button>
+          <Button
+            variant="filled"
+            color="primary"
+            size="md"
+            disabled={!canSave}
+            onClick={handleSave}
+          >
+            Salvar alterações
+          </Button>
+        </>
+      }
+    >
+      {form && (
+        <>
+          <FormFieldInput
+            label="Licenciado"
+            required
+            value={form.name}
+            onChange={(e) => patch({ name: e.target.value })}
+          />
+
+          <div className="grid grid-cols-2 gap-form-gap">
+            <FormFieldInput
+              label="Email"
+              type="email"
+              value={form.email}
+              onChange={(e) => patch({ email: e.target.value })}
+            />
+            <FormFieldInput
+              label="Telefone"
+              type="tel"
+              value={form.phone}
+              onChange={(e) => patch({ phone: e.target.value })}
+            />
+          </div>
+
+          <FormFieldInput
+            label="Razão Social"
+            value={form.companyName}
+            onChange={(e) => patch({ companyName: e.target.value })}
+          />
+          <FormFieldInput
+            label="CNPJ"
+            value={form.cnpj}
+            onChange={(e) => patch({ cnpj: e.target.value })}
+          />
+
+          <FormField label="Situação">
+            {() => (
+              <ChipGroup
+                type="single"
+                value={form.accountStatus}
+                onValueChange={(v) => v && patch({ accountStatus: v as AccountStatus })}
+                size="md"
+                shape="pill"
+                ariaLabel="Situação da conta"
+              >
+                {STATUS_OPTIONS.map((o) => (
+                  <ChipGroupItem key={o.value} value={o.value}>
+                    {o.label}
+                  </ChipGroupItem>
+                ))}
+              </ChipGroup>
+            )}
+          </FormField>
+
+          <div className="grid grid-cols-2 gap-form-gap">
+            <FormFieldSelect
+              label="Banco"
+              value={form.bank}
+              onValueChange={(v) => patch({ bank: v as BankId })}
+              options={BANK_OPTIONS}
+            />
+            <FormFieldInput
+              label="Comissão (%)"
+              type="number"
+              value={String(form.commissionRate)}
+              onChange={(e) => patch({ commissionRate: Number(e.target.value) })}
+              min={0}
+              max={100}
+              step={0.1}
+            />
+          </div>
+
+          <FormFieldSelect
+            label="Gestor da conta"
+            value={form.agentId}
+            onValueChange={(v) => patch({ agentId: v })}
+            options={AGENT_OPTIONS}
+          />
+
+          <FormField label="Métodos de recebimento">
+            {() => (
+              <ChipGroup
+                type="multiple"
+                value={form.paymentMethods}
+                onValueChange={(v) => patch({ paymentMethods: v as PaymentMethod[] })}
+                size="md"
+                shape="rounded"
+                ariaLabel="Métodos de recebimento"
+              >
+                {PAYMENT_METHODS.map((m) => (
+                  <ChipGroupItem key={m.value} value={m.value}>
+                    {m.label}
+                  </ChipGroupItem>
+                ))}
+              </ChipGroup>
+            )}
+          </FormField>
+
+          <FormField
+            label="Saque automático"
+            helperText="Quando ligado, saques são processados automaticamente."
+          >
+            {() => (
+              <Switch
+                checked={form.autoWithdraw}
+                onCheckedChange={(next) => patch({ autoWithdraw: next })}
+                aria-label="Saque automático"
+              />
+            )}
+          </FormField>
+        </>
+      )}
+    </Panel>
+  );
+}

package/dist-lib/ai/exemplos/finance/components/EditarFinanceDrawer/index.ts

@@ -0,0 +1,5 @@
+export { EditarFinanceDrawer } from "./editar-finance-drawer";
+export type {
+  EditarFinanceDrawerProps,
+  FinanceEditPatch,
+} from "./editar-finance-drawer";

package/dist-lib/ai/exemplos/finance/components/ExtratoExpansion/extrato-expansion.tsx

@@ -0,0 +1,172 @@
+import {
+  ArrowDownLeft,
+  ArrowUpRight,
+  Mail,
+  MapPin,
+  Phone,
+  Wallet,
+} from "lucide-react";
+import { Avatar } from "@/components/ui/avatar-ig";
+import { Chip } from "@/components/ui/Chip";
+import {
+  ACCOUNT_STATUS,
+  BANKS,
+  formatBRL,
+  formatDateTimeShort,
+} from "../../clientes-financeiro-mocks";
+import type { FinanceClientRow } from "../../clientes-financeiro.types";
+
+/* ── Linha do extrato ───────────────────────────────────────────── */
+
+function TransactionRow({
+  date,
+  type,
+  amount,
+  description,
+}: FinanceClientRow["transactions"][number]) {
+  const isIn = type === "in";
+  return (
+    <li className="flex items-center gap-gp-md py-pad-sm">
+      <span
+        className={`grid place-items-center size-form-md shrink-0 rounded-radius-md ${
+          isIn
+            ? "bg-bg-success-muted text-fg-success"
+            : "bg-bg-danger-muted text-fg-danger"
+        }`}
+        aria-hidden="true"
+      >
+        {isIn ? (
+          <ArrowDownLeft className="size-icon-sm" strokeWidth={2} />
+        ) : (
+          <ArrowUpRight className="size-icon-sm" strokeWidth={2} />
+        )}
+      </span>
+      <div className="flex flex-col min-w-0 flex-1">
+        <span className="text-body-sm font-medium text-fg-default truncate">
+          {description}
+        </span>
+        <span className="text-caption-md text-fg-muted tabular-nums">
+          {formatDateTimeShort(date)}
+        </span>
+      </div>
+      <span
+        className={`text-body-sm font-semibold tabular-nums shrink-0 ${
+          isIn ? "text-fg-success" : "text-fg-danger"
+        }`}
+      >
+        {isIn ? "+" : "−"} {formatBRL(amount)}
+      </span>
+    </li>
+  );
+}
+
+/* ── Item label/valor das colunas laterais ─────────────────────── */
+
+function InfoRow({
+  icon: Icon,
+  label,
+  children,
+}: {
+  icon: React.ComponentType<{ className?: string; strokeWidth?: number }>;
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-start gap-gp-sm">
+      <Icon className="size-icon-sm text-fg-muted mt-[2px] shrink-0" strokeWidth={1.8} />
+      <div className="flex flex-col gap-gp-2xs min-w-0">
+        <span className="text-body-sm text-fg-strong break-words">{children}</span>
+        <span className="text-body-xs font-normal text-fg-muted">{label}</span>
+      </div>
+    </div>
+  );
+}
+
+/* ── Painel de expansão da row ──────────────────────────────────── */
+
+export function ExtratoExpansion({ row }: { row: FinanceClientRow }) {
+  const status = ACCOUNT_STATUS[row.accountStatus];
+  const bank = BANKS[row.bankAccount.bank];
+  // Extrato exibe as 5 movimentações mais recentes (transactions já vem ordenado desc).
+  const recent = row.transactions.slice(0, 5);
+
+  return (
+    <div className="w-full p-pad-4xl bg-bg-subtle">
+      <div className="grid grid-cols-1 lg:grid-cols-[1.5fr_1fr] gap-gp-4xl lg:gap-gp-6xl max-w-[1100px]">
+        {/* Extrato */}
+        <section className="flex flex-col gap-gp-lg">
+          <header className="flex items-center justify-between gap-gp-md">
+            <h4 className="m-0 text-body-md font-semibold text-fg-muted uppercase tracking-wider">
+              Extrato recente
+            </h4>
+            <Chip color={status.color} variant="soft" size="sm" shape="pill">
+              {status.label}
+            </Chip>
+          </header>
+          <ul className="flex flex-col divide-y divide-border-subtle m-0 p-0 list-none">
+            {recent.map((tx) => (
+              <TransactionRow key={tx.id} {...tx} />
+            ))}
+          </ul>
+        </section>
+
+        {/* Dados bancários + contato + resumo — separados do extrato por
+            divisória sutil + respiro (evita poluição visual de "grudado"). */}
+        <div className="flex flex-col gap-gp-3xl lg:pl-gp-6xl lg:border-l lg:border-border-subtle">
+          <section className="flex flex-col gap-gp-md">
+            <h4 className="m-0 text-body-md font-semibold text-fg-muted uppercase tracking-wider">
+              Conta bancária
+            </h4>
+            <div className="flex items-center gap-gp-md">
+              <Avatar size="lg" colorHex={bank.color} className="text-caption-md font-bold">
+                {bank.initials}
+              </Avatar>
+              <div className="flex flex-col min-w-0">
+                <span className="text-body-sm font-medium text-fg-default truncate">
+                  {row.bankAccount.bankName}
+                </span>
+                <span className="text-caption-md text-fg-muted tabular-nums">
+                  Ag {row.bankAccount.agency} · {row.bankAccount.account}
+                </span>
+              </div>
+            </div>
+          </section>
+
+          <section className="flex flex-col gap-gp-md">
+            <h4 className="m-0 text-body-md font-semibold text-fg-muted uppercase tracking-wider">
+              Contato
+            </h4>
+            <InfoRow icon={Mail} label="Email">{row.email}</InfoRow>
+            <InfoRow icon={Phone} label="Telefone">{row.phone}</InfoRow>
+            <InfoRow icon={MapPin} label="Localização">{row.location}</InfoRow>
+          </section>
+
+          <section className="flex flex-col gap-gp-md">
+            <h4 className="m-0 text-body-md font-semibold text-fg-muted uppercase tracking-wider">
+              Resumo financeiro
+            </h4>
+            <InfoRow icon={Wallet} label="Saldo disponível">
+              <span className="font-semibold tabular-nums text-fg-success">
+                {formatBRL(row.availableBalance)}
+              </span>
+            </InfoRow>
+            <div className="flex gap-gp-2xl">
+              <div className="flex flex-col gap-gp-2xs">
+                <span className="text-body-sm font-medium text-fg-default tabular-nums">
+                  {formatBRL(row.monthlyVolume)}
+                </span>
+                <span className="text-body-xs font-normal text-fg-muted">Volume mensal</span>
+              </div>
+              <div className="flex flex-col gap-gp-2xs">
+                <span className="text-body-sm font-medium text-fg-default tabular-nums">
+                  {row.commissionRate.toLocaleString("pt-BR", { minimumFractionDigits: 1 })}%
+                </span>
+                <span className="text-body-xs font-normal text-fg-muted">Comissão</span>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist-lib/ai/exemplos/finance/components/ExtratoExpansion/index.ts

@@ -0,0 +1 @@
+export { ExtratoExpansion } from "./extrato-expansion";