@snksergio/design-system 0.61.0 → 0.63.0

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";

package/dist-lib/ai/exemplos/finance/components/FinanceDetailPanel/finance-detail-panel.tsx

@@ -0,0 +1,241 @@
+import { Banknote, Pencil } from "lucide-react";
+import {
+  FloatingPanel,
+  FloatingPanelSection,
+  FloatingPanelField,
+} from "@/components/ui/FloatingPanel";
+import { Avatar } from "@/components/ui/avatar-ig";
+import { Button } from "@/components/ui/Button/button";
+import { Chip } from "@/components/ui/Chip";
+import { AGENTS } from "../../_table-data";
+import {
+  ACCOUNT_STATUS,
+  BANKS,
+  formatBRL,
+  formatRelativeDays,
+} from "../../clientes-financeiro-mocks";
+import type {
+  FinanceClientRow,
+  PaymentMethod,
+} from "../../clientes-financeiro.types";
+
+const PAYMENT_METHOD_LABEL: Record<PaymentMethod, string> = {
+  pix: "PIX",
+  ted: "TED",
+  boleto: "Boleto",
+};
+
+function formatLongDate(ms: number): string {
+  if (!ms) return "—";
+  return new Date(ms).toLocaleDateString("pt-BR", {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
+}
+
+export type FinanceDetailPanelProps = {
+  row: FinanceClientRow | null;
+  onClose: () => void;
+  onEdit?: (row: FinanceClientRow) => void;
+  onSacar?: (row: FinanceClientRow) => void;
+};
+
+export function FinanceDetailPanel({
+  row,
+  onClose,
+  onEdit,
+  onSacar,
+}: FinanceDetailPanelProps) {
+  if (!row) return null;
+
+  const status = ACCOUNT_STATUS[row.accountStatus];
+  const bank = BANKS[row.bankAccount.bank];
+  const agent = AGENTS[row.agentId as keyof typeof AGENTS];
+  const blocked = row.accountStatus === "bloqueado";
+
+  return (
+    <FloatingPanel
+      open={row !== null}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+      side="right"
+      size="md"
+      resizable
+      maximizable
+      // Sections gerenciam o próprio padding edge-to-edge (divisórias full-width).
+      bodyPadded={false}
+      resizableStorageKey="clientes-financeiro.detail-panel.width"
+      titleSlot={
+        <div className="flex items-center gap-gp-md min-w-0">
+          <Avatar size="lg" colorHex={row.avatarColor} className="shrink-0">
+            {row.initials}
+          </Avatar>
+          <div className="flex flex-col min-w-0 flex-1">
+            <div className="text-body-md font-semibold text-fg-default truncate">
+              {row.name}
+            </div>
+            <div className="flex items-center gap-gp-sm mt-[2px] text-body-xs font-normal text-fg-muted">
+              <span className="tabular-nums">{row.id}</span>
+              <span className="opacity-50">·</span>
+              <Chip color={status.color} variant="soft" size="sm" shape="pill">
+                {status.label}
+              </Chip>
+            </div>
+          </div>
+        </div>
+      }
+      headerActions={
+        <>
+          <Button
+            variant="soft"
+            color="secondary"
+            size="icon-sm"
+            aria-label="Editar dados"
+            onClick={() => onEdit?.(row)}
+          >
+            <Pencil />
+          </Button>
+          <Button
+            variant="soft"
+            color="primary"
+            size="icon-sm"
+            aria-label="Realizar saque"
+            disabled={blocked}
+            onClick={() => onSacar?.(row)}
+          >
+            <Banknote />
+          </Button>
+        </>
+      }
+      footer={
+        <>
+          <Button variant="outline" color="secondary" size="sm" onClick={onClose}>
+            Fechar
+          </Button>
+          <Button
+            variant="filled"
+            color="primary"
+            size="sm"
+            disabled={blocked}
+            onClick={() => onSacar?.(row)}
+          >
+            Realizar saque
+          </Button>
+        </>
+      }
+    >
+      {/* Saldo em destaque — gutter próprio (body não tem padding). */}
+      <div className="px-[18px] pt-pad-xl pb-pad-md">
+        <div className="flex flex-col gap-gp-2xs p-pad-2xl bg-bg-success-muted rounded-radius-lg">
+          <span className="text-caption-sm text-fg-muted">Saldo disponível</span>
+          <span className="text-body-2xl font-bold text-fg-success leading-none tabular-nums">
+            {formatBRL(row.availableBalance)}
+          </span>
+        </div>
+      </div>
+
+      <FloatingPanelSection title="Empresa">
+        <FloatingPanelField label="Razão Social" value={row.companyName} />
+        <FloatingPanelField
+          label="CNPJ"
+          value={<span className="tabular-nums">{row.cnpj}</span>}
+        />
+      </FloatingPanelSection>
+
+      <FloatingPanelSection title="Conta bancária">
+        <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>
+      </FloatingPanelSection>
+
+      <FloatingPanelSection title="Financeiro">
+        <FloatingPanelField
+          label="Volume mensal"
+          value={<span className="tabular-nums">{formatBRL(row.monthlyVolume)}</span>}
+        />
+        <FloatingPanelField
+          label="Comissão"
+          value={
+            <span className="tabular-nums">
+              {row.commissionRate.toLocaleString("pt-BR", { minimumFractionDigits: 1 })}%
+            </span>
+          }
+        />
+        <FloatingPanelField
+          label="Saque automático"
+          value={row.autoWithdraw ? "Ativado" : "Desativado"}
+        />
+        <FloatingPanelField
+          label="Métodos"
+          value={
+            <span className="inline-flex flex-wrap gap-gp-2xs justify-end">
+              {row.paymentMethods.map((m) => (
+                <Chip key={m} color="neutral" variant="soft" size="sm" shape="rounded">
+                  {PAYMENT_METHOD_LABEL[m]}
+                </Chip>
+              ))}
+            </span>
+          }
+        />
+      </FloatingPanelSection>
+
+      <FloatingPanelSection title="Contato">
+        <FloatingPanelField
+          label="Email"
+          value={
+            <a href={`mailto:${row.email}`} className="text-fg-brand hover:underline">
+              {row.email}
+            </a>
+          }
+        />
+        <FloatingPanelField
+          label="Telefone"
+          value={
+            <a
+              href={`tel:${row.phone.replace(/\D/g, "")}`}
+              className="text-fg-brand hover:underline"
+            >
+              {row.phone}
+            </a>
+          }
+        />
+        <FloatingPanelField label="Localização" value={row.location} />
+      </FloatingPanelSection>
+
+      <FloatingPanelSection title="Gestão">
+        <FloatingPanelField
+          label="Gestor da conta"
+          value={
+            agent ? (
+              <span className="inline-flex items-center gap-gp-sm">
+                <Avatar size="xs" colorHex={agent.color}>
+                  {agent.initials}
+                </Avatar>
+                {agent.name}
+              </span>
+            ) : (
+              "—"
+            )
+          }
+        />
+        <FloatingPanelField label="Cliente desde" value={formatLongDate(row.createdAt)} />
+        <FloatingPanelField
+          label="Última movimentação"
+          value={formatRelativeDays(row.lastMovement)}
+        />
+      </FloatingPanelSection>
+    </FloatingPanel>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { FinanceDetailPanel } from "./finance-detail-panel";
+export type { FinanceDetailPanelProps } from "./finance-detail-panel";

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

@@ -0,0 +1,2 @@
+export { NovoClienteDrawer } from "./novo-cliente-drawer";
+export type { NovoClienteDrawerProps } from "./novo-cliente-drawer";

package/dist-lib/ai/exemplos/finance/components/NovoClienteDrawer/novo-cliente-drawer.tsx

@@ -0,0 +1,207 @@
+import { useEffect, useState } from "react";
+import { Panel } from "@/components/ui/Panel";
+import { Button } from "@/components/ui/Button/button";
+import {
+  FormField,
+  FormFieldInput,
+  FormFieldSelect,
+  FormFieldTextarea,
+} from "@/components/ui/FormField";
+import { ChipGroup, ChipGroupItem } from "@/components/ui/Chip";
+import { STATUSES, CATEGORIES } from "../../_table-data";
+import { CITIES, STATUS_DOT } from "../../clientes-showcase-mocks";
+import { drawerFormStyles } from "../../clientes-showcase.styles";
+import type { NovoClienteFormData } from "../../clientes-showcase.types";
+
+const INITIAL_FORM: NovoClienteFormData = {
+  name: "",
+  email: "",
+  whatsapp: "",
+  statusId: "active",
+  categoryId: "lead",
+  city: "",
+  value: 0,
+  notes: "",
+};
+
+export type NovoClienteDrawerProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Disparado ao confirmar — drawer fecha automaticamente após o submit. */
+  onSubmit?: (data: NovoClienteFormData) => void;
+};
+
+/**
+ * Drawer "Novo cliente" — replica visual do TblClientFormDrawer
+ * (sandbox /design-and-table-v2), recompilado em cima dos componentes do DS:
+ *   Panel + FormField (Input / Select / Textarea) + ChipGroup + Button.
+ *
+ * Layout (top → bottom):
+ *   1. Nome*           — full width
+ *   2. Email + WhatsApp — 2 cols
+ *   3. Status           — ChipGroup com dot colorido
+ *   4. Categoria        — ChipGroup
+ *   5. Cidade + Valor R$ — 2 cols
+ *   6. Notas            — textarea full width
+ */
+export function NovoClienteDrawer({
+  open,
+  onOpenChange,
+  onSubmit,
+}: NovoClienteDrawerProps) {
+  const s = drawerFormStyles();
+  const [form, setForm] = useState<NovoClienteFormData>(INITIAL_FORM);
+
+  // Reseta form sempre que abrir
+  useEffect(() => {
+    if (open) setForm(INITIAL_FORM);
+  }, [open]);
+
+  const canSubmit = form.name.trim().length > 0;
+
+  const handleSubmit = () => {
+    if (!canSubmit) return;
+    onSubmit?.(form);
+    onOpenChange(false);
+  };
+
+  return (
+    <Panel
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Novo cliente"
+      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={!canSubmit}
+            onClick={handleSubmit}
+          >
+            Criar cliente
+          </Button>
+        </>
+      }
+    >
+      <FormFieldInput
+        label="Nome"
+        required
+        placeholder="Maria Silva"
+        value={form.name}
+        onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
+      />
+
+      <div className={s.twoCols()}>
+        <FormFieldInput
+          label="Email"
+          type="email"
+          placeholder="cliente@exemplo.com"
+          value={form.email}
+          onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))}
+        />
+        <FormFieldInput
+          label="WhatsApp"
+          type="tel"
+          placeholder="55 11 99999-9999"
+          value={form.whatsapp}
+          onChange={(e) => setForm((f) => ({ ...f, whatsapp: e.target.value }))}
+        />
+      </div>
+
+      <FormField label="Status">
+        {() => (
+          <ChipGroup
+            type="single"
+            value={form.statusId}
+            onValueChange={(v) =>
+              v &&
+              setForm((f) => ({
+                ...f,
+                statusId: v as keyof typeof STATUSES,
+              }))
+            }
+            size="md"
+            shape="pill"
+            ariaLabel="Status do cliente"
+          >
+            {Object.entries(STATUSES).map(([id, st]) => (
+              <ChipGroupItem key={id} value={id}>
+                <span
+                  className={s.statusDot()}
+                  style={{ background: STATUS_DOT[id] ?? st.color }}
+                  aria-hidden
+                />
+                {st.label}
+              </ChipGroupItem>
+            ))}
+          </ChipGroup>
+        )}
+      </FormField>
+
+      <FormField label="Categoria">
+        {() => (
+          <ChipGroup
+            type="single"
+            value={form.categoryId}
+            onValueChange={(v) =>
+              v &&
+              setForm((f) => ({
+                ...f,
+                categoryId: v as keyof typeof CATEGORIES,
+              }))
+            }
+            size="md"
+            shape="pill"
+            ariaLabel="Categoria do cliente"
+          >
+            {Object.entries(CATEGORIES).map(([id, cat]) => (
+              <ChipGroupItem key={id} value={id}>
+                {cat.label}
+              </ChipGroupItem>
+            ))}
+          </ChipGroup>
+        )}
+      </FormField>
+
+      <div className={s.twoCols()}>
+        <FormFieldSelect
+          label="Cidade"
+          placeholder="Selecionar..."
+          value={form.city || undefined}
+          onValueChange={(v) => setForm((f) => ({ ...f, city: v }))}
+          options={CITIES.map((c) => ({ value: c, label: c }))}
+        />
+        <FormFieldInput
+          label="Valor (R$)"
+          type="number"
+          startAddon="R$"
+          value={String(form.value)}
+          onChange={(e) =>
+            setForm((f) => ({ ...f, value: Number(e.target.value) }))
+          }
+          min={0}
+          step={0.01}
+        />
+      </div>
+
+      <FormFieldTextarea
+        label="Notas"
+        placeholder="Observações sobre o cliente..."
+        rows={4}
+        value={form.notes}
+        onChange={(e) => setForm((f) => ({ ...f, notes: e.target.value }))}
+      />
+    </Panel>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { SacarDialog } from "./sacar-dialog";
+export type { SacarDialogProps } from "./sacar-dialog";