@snksergio/design-system 0.62.0 → 0.63.0

package/dist-lib/ai/exemplos/clientes/clientes-screen.tsx

@@ -0,0 +1,505 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import {
+  Archive,
+  Clock,
+  Copy,
+  Download,
+  Maximize2,
+  MessageSquare,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  RotateCcw,
+  Trash2,
+  Upload,
+} from "lucide-react";
+import {
+  CATEGORIES,
+  AGENTS,
+  type ClientRow,
+} from "./_table-data";
+import {
+  DataTable,
+  presetView,
+  type DataTableColumnDef,
+  type DataTableKanbanConfig,
+  type DataTablePresetView,
+  type DataTableRef,
+  type DataTableViewMode,
+  type FilterModel,
+} from "@/components/ui/DataTable";
+import { Button } from "@/components/ui/Button/button";
+import { Chip } from "@/components/ui/Chip";
+import { PageHeader } from "@/components/ui/PageHeader";
+import { BulkActionButton } from "@/components/ui/TableToolbar";
+import { Avatar, AvatarFallback } from "@/components/shadcn/avatar";
+import {
+  CLIENTS_87,
+  STATUS_OPTIONS,
+  CATEGORY_OPTIONS,
+  AGENT_OPTIONS,
+  AGENTS_LOOKUP,
+  KANBAN_COLUMNS,
+  CATEGORY_KIND,
+  formatBRL,
+  formatShortDate,
+} from "./clientes-showcase-mocks";
+import { NovoClienteDrawer } from "./components/NovoClienteDrawer";
+import { DetailDrawer } from "./components/DetailDrawer";
+import { AlertModal } from "@/components/ui/AlertModal";
+
+/* ── Columns declarativas (type-based) ─────────────────────────── */
+
+type ColumnHandlers = {
+  /** Pede confirmação de exclusão (abre o AlertModal). */
+  onAskDelete: (row: ClientRow) => void;
+};
+
+function buildColumns(handlers: ColumnHandlers): DataTableColumnDef<ClientRow>[] {
+  return [
+  { field: "id", headerName: "ID", type: "text", width: 130 },
+  {
+    field: "name",
+    headerName: "Nome",
+    type: "user",
+    sortable: true,
+    width: 220,
+    typeOptions: {
+      users: Object.fromEntries(
+        CLIENTS_87.map((c) => [
+          c.name,
+          {
+            name: c.name,
+            initials: c.initials,
+            color: c.avatarColor,
+          },
+        ]),
+      ),
+    },
+    valueGetter: (row) => row.name,
+  },
+  {
+    field: "email",
+    headerName: "Email",
+    type: "email",
+    enableColumnFilter: true,
+    filterType: "text",
+  },
+  {
+    field: "phone",
+    headerName: "Telefone",
+    type: "phone",
+  },
+  {
+    field: "statusId",
+    headerName: "Status",
+    type: "status",
+    enableColumnFilter: true,
+    filterType: "multiSelect",
+    filterOptions: STATUS_OPTIONS,
+  },
+  {
+    field: "categoryId",
+    headerName: "Categoria",
+    type: "badge",
+    enableColumnFilter: true,
+    filterType: "multiSelect",
+    filterOptions: CATEGORY_OPTIONS,
+  },
+  {
+    field: "agentId",
+    headerName: "Atribuído",
+    type: "user",
+    enableColumnFilter: true,
+    filterType: "select",
+    filterOptions: AGENT_OPTIONS,
+    typeOptions: { users: AGENTS_LOOKUP },
+  },
+  {
+    field: "value",
+    headerName: "Valor",
+    type: "currency",
+    sortable: true,
+    enableColumnFilter: true,
+    filterType: "number",
+    aggregate: "sum",
+    aggregateFormatter: (v) =>
+      new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(v),
+  },
+  {
+    field: "createdAt",
+    headerName: "Criado em",
+    type: "date",
+    sortable: true,
+    enableColumnFilter: true,
+    filterType: "date",
+    width: 130,
+  },
+  {
+    field: "lastContact",
+    headerName: "Último contato",
+    type: "date",
+    sortable: true,
+    width: 150,
+  },
+  {
+    field: "location",
+    headerName: "Localização",
+    type: "text",
+    minWidth: 150,
+  },
+  {
+    field: "_actions",
+    headerName: "",
+    type: "actions",
+    // Sem `width` e sem `pinned`, de propósito — o `type` já entrega os dois:
+    // a largura é DERIVADA do nº de ações (1→44px · 2→74 · 3→104) e acima de 3 elas
+    // colapsam no "…" sozinhas; o pin à direita sai de
+    // `col.pinned ?? (isActions ? "right" : undefined)`. Prop redundante aqui vira prop
+    // copiada em toda tela gerada — o exemplo é a fonte de maior precedência das skills.
+    getActions: ({ row }) => [
+      {
+        id: "edit",
+        label: "Editar",
+        icon: <Pencil />,
+        onClick: () => console.log("Editar", row.id),
+      },
+      {
+        id: "whatsapp",
+        label: "Abrir atendimento (WhatsApp)",
+        icon: <MessageSquare />,
+        onClick: () => console.log("Atendimento", row.id),
+      },
+      {
+        id: "archive",
+        label: "Arquivar",
+        icon: <Archive />,
+        onClick: () => console.log("Arquivar", row.id),
+      },
+      {
+        id: "delete",
+        label: "Excluir cliente",
+        icon: <Trash2 />,
+        destructive: true,
+        onClick: () => handlers.onAskDelete(row),
+      },
+    ],
+  },
+  ];
+}
+
+/* ── Saved views / Presets — tabs do toolbar ───────────────────── */
+
+const DEFAULT_VIEWS: DataTablePresetView[] = [
+  presetView({
+    id: "preset:meus",
+    name: "Meus",
+    filters: [{ field: "agentId", value: "you" }],
+  }),
+  presetView({
+    id: "preset:ativos",
+    name: "Ativos",
+    filters: [{ field: "statusId", value: "active" }],
+  }),
+  presetView({
+    id: "preset:royals",
+    name: "Royals",
+    filters: [{ field: "categoryId", value: "royal" }],
+  }),
+  presetView({
+    id: "preset:ultimos-7-dias",
+    name: "Últimos 7 dias",
+    sort: [{ field: "createdAt", direction: "desc" }],
+  }),
+];
+
+/* ── Filtros iniciais (Status=Ativo + Categoria=Royal — print) ─── */
+
+// statusId e categoryId são filterType="multiSelect" — operator correto é "isAnyOf"
+// (not "equals"). Sem isso, o popover Filtros mostrava o Select de operador VAZIO
+// porque "equals" não está nos operators de MultiSelectColumnType.
+const INITIAL_FILTERS: FilterModel = {
+  items: [
+    { id: "filter-status-ativo", field: "statusId", operator: "isAnyOf", value: "active" },
+    { id: "filter-categoria-royal", field: "categoryId", operator: "isAnyOf", value: "royal" },
+  ],
+  logicOperator: "AND",
+};
+
+/* ── Kanban config (renderCard com JSX) ────────────────────────── */
+
+const KANBAN_CONFIG: DataTableKanbanConfig<ClientRow> = {
+  groupByField: "statusId",
+  columns: KANBAN_COLUMNS,
+  renderCard: ({ row }) => {
+    const cat = CATEGORIES[row.categoryId as keyof typeof CATEGORIES];
+    const agent = AGENTS[row.agentId as keyof typeof AGENTS];
+    const agentInitials = agent?.name.split(" ").map((s) => s[0]).join("").slice(0, 2) ?? "?";
+    return {
+      title: row.name,
+      subtitle: row.id,
+      avatar: (
+        <Avatar className="size-[28px]" style={{ background: row.avatarColor }}>
+          <AvatarFallback className="bg-transparent text-white text-caption-sm font-bold">
+            {row.initials}
+          </AvatarFallback>
+        </Avatar>
+      ),
+      chip: cat ? (
+        <Chip
+          color={CATEGORY_KIND[row.categoryId] ?? "info"}
+          variant="soft"
+          size="sm"
+          shape="pill"
+        >
+          {cat.label}
+        </Chip>
+      ) : null,
+      value: formatBRL(row.value),
+      footerLeft: agent ? (
+        <span className="inline-flex items-center gap-gp-sm min-w-0 flex-1">
+          <Avatar className="size-[22px]" style={{ background: agent.color }}>
+            <AvatarFallback className="bg-transparent text-white text-caption-xs font-bold">
+              {agentInitials}
+            </AvatarFallback>
+          </Avatar>
+          <span className="text-body-xs font-normal text-fg-muted whitespace-nowrap overflow-hidden text-ellipsis">
+            {agent.name}
+          </span>
+        </span>
+      ) : null,
+      footerRight: (
+        <span className="inline-flex items-center gap-[4px] text-caption-sm text-fg-muted [font-variant-numeric:tabular-nums] shrink-0">
+          <Clock size={11} strokeWidth={1.8} aria-hidden />
+          {formatShortDate(row.lastContact)}
+        </span>
+      ),
+    };
+  },
+};
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   Page — Clientes (showcase usando DataTable real)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+type ConfirmDeleteState = {
+  ids: string[];
+  label: string;
+  /** Callback opcional após confirmar — usado pelo bulk pra limpar seleção. */
+  onAfter?: () => void;
+} | null;
+
+export function ClientesScreen() {
+  const [rows, setRows] = useState<ClientRow[]>(() => CLIENTS_87);
+  const [filterModel, setFilterModel] = useState<FilterModel>(INITIAL_FILTERS);
+  const [viewMode, setViewMode] = useState<DataTableViewMode>("table");
+  const [novoClienteOpen, setNovoClienteOpen] = useState(false);
+  const [detailRowId, setDetailRowId] = useState<string | null>(null);
+  const [confirmDelete, setConfirmDelete] = useState<ConfirmDeleteState>(null);
+  const detailRow = detailRowId ? rows.find((r) => r.id === detailRowId) ?? null : null;
+  const tableRef = useRef<DataTableRef>(null);
+
+  const askDelete = useCallback(
+    (row: ClientRow) =>
+      setConfirmDelete({ ids: [row.id], label: row.name }),
+    [],
+  );
+
+  const askBulkDelete = useCallback(
+    (ids: string[], onAfter: () => void) =>
+      setConfirmDelete({
+        ids,
+        label: `${ids.length} cliente${ids.length === 1 ? "" : "s"}`,
+        onAfter,
+      }),
+    [],
+  );
+
+  const handleConfirmDelete = useCallback(() => {
+    if (!confirmDelete) return;
+    const ids = new Set(confirmDelete.ids);
+    setRows((prev) => prev.filter((r) => !ids.has(r.id)));
+    if (detailRowId && ids.has(detailRowId)) setDetailRowId(null);
+    confirmDelete.onAfter?.();
+    setConfirmDelete(null);
+  }, [confirmDelete, detailRowId]);
+
+  const columns = useMemo(
+    () => buildColumns({ onAskDelete: askDelete }),
+    [askDelete],
+  );
+
+  return (
+    // Conteúdo da página (sem shell). Embrulhe no seu AppShell/layout — o
+    // parent precisa dar altura (h-full/flex) pra DataTable preencher.
+    <div className="flex flex-col h-full min-h-0 gap-gp-2xl">
+      <PageHeader
+        title="Clientes"
+        description="Gerencie sua base de clientes, acompanhe status de cadastro e abra atendimentos diretos pelo WhatsApp."
+        badge={
+          <Chip color="primary" variant="soft" size="sm" shape="rounded">
+            {rows.length.toLocaleString("pt-BR")} registros
+          </Chip>
+        }
+        actions={
+          <>
+            <Button
+              variant="outline"
+              color="secondary"
+              size="icon-md"
+              aria-label="Mais ações"
+              onClick={() => alert("Mais ações")}
+            >
+              <MoreHorizontal />
+            </Button>
+            <Button
+              variant="filled"
+              color="primary"
+              size="md"
+              iconLeft={<Plus />}
+              onClick={() => setNovoClienteOpen(true)}
+            >
+              Novo cliente
+            </Button>
+          </>
+        }
+      />
+
+      {/* DataTable — ocupa o resto do body ──────────────────────── */}
+      <DataTable<ClientRow>
+        ref={tableRef}
+        rows={rows}
+        columns={columns}
+        getRowId={(r) => r.id}
+        persistId="showcase-clientes-crud"
+        defaultViews={DEFAULT_VIEWS}
+        /* Chips de filtro VAZIOS já visíveis no load ("Atribuído") — a afordância
+           aparece sem abrir o menu; o usuário clica e preenche. Filtro é recurso
+           da tabela (nativo), nunca form/select acima dela. */
+        showEmptyFilterChips={["agentId"]}
+        filterModel={filterModel}
+        onFilterModelChange={setFilterModel}
+        viewMode={viewMode}
+        onViewModeChange={setViewMode}
+        kanbanConfig={KANBAN_CONFIG}
+        toolbar={{
+          enableSearch: true,
+          enableFilters: true,
+          enableColumns: true,
+          enableDensity: true,
+          enableExport: true,
+          moreMenu: {
+            items: [
+              {
+                id: "fullscreen",
+                label: "Tela cheia",
+                icon: <Maximize2 />,
+                onSelect: () => alert("Tela cheia"),
+              },
+              {
+                id: "duplicate",
+                label: "Duplicar visualização",
+                icon: <Copy />,
+                onSelect: () => alert("Duplicar visualização"),
+              },
+              {
+                id: "import",
+                label: "Importar CSV",
+                icon: <Upload />,
+                onSelect: () => alert("Importar CSV"),
+              },
+              {
+                id: "reset",
+                label: "Resetar visualização",
+                icon: <RotateCcw />,
+                destructive: true,
+                onSelect: () => tableRef.current?.resetPersistedState(),
+              },
+            ],
+          },
+        }}
+        paginationConfig={{
+          enabled: true,
+          initialPageSize: 10,
+          pageSizeOptions: [10, 25, 50, 100],
+        }}
+        selectionConfig={{
+          enabled: true,
+          enableGlobal: true,
+          actions: (selectedIds, clearSelection) => (
+            <>
+              <BulkActionButton
+                icon={<Download />}
+                onClick={() => tableRef.current?.exportCsv("selected")}
+              >
+                Exportar
+              </BulkActionButton>
+              <BulkActionButton
+                icon={<Trash2 />}
+                variant="danger"
+                onClick={() => askBulkDelete(selectedIds.map(String), clearSelection)}
+              >
+                Excluir
+              </BulkActionButton>
+            </>
+          ),
+        }}
+        onCellEditCommit={async ({ id, field, value }) => {
+          await new Promise((res) => setTimeout(res, 400));
+          setRows((prev) =>
+            prev.map((r) => (r.id === id ? { ...r, [field]: value } : r)),
+          );
+        }}
+        onRowClick={(row) => setDetailRowId(row.id)}
+        className="flex-1 min-h-0"
+      />
+
+      {/* Drawer "Novo cliente" — controlado pelo botão do header */}
+      <NovoClienteDrawer
+        open={novoClienteOpen}
+        onOpenChange={setNovoClienteOpen}
+        onSubmit={(data) => {
+          console.log("Novo cliente:", data);
+          alert(`Cliente "${data.name}" criado (mock)`);
+        }}
+      />
+
+      {/* DetailDrawer — abre ao clicar numa row, slide-in da direita SEM
+          backdrop modal (tabela continua interativa atrás). */}
+      <DetailDrawer
+        row={detailRow}
+        onClose={() => setDetailRowId(null)}
+        onEdit={(r) => console.log("Editar", r.id)}
+        onDelete={(r) => askDelete(r)}
+        onSave={(r) => alert(`Salvar alterações em ${r.name} (mock)`)}
+      />
+
+      {/* AlertModal de confirmação de exclusão — compartilhado entre
+          row action menu, bulk action e DetailDrawer.onDelete. */}
+      <AlertModal
+        open={confirmDelete !== null}
+        onOpenChange={(open) => {
+          if (!open) setConfirmDelete(null);
+        }}
+        tone="danger"
+        title={
+          confirmDelete && confirmDelete.ids.length > 1
+            ? `Excluir ${confirmDelete.label}?`
+            : "Excluir cliente?"
+        }
+        description={
+          confirmDelete
+            ? confirmDelete.ids.length > 1
+              ? `Esta ação não pode ser desfeita. ${confirmDelete.label} serão removidos permanentemente.`
+              : `Esta ação não pode ser desfeita. "${confirmDelete.label}" será removido permanentemente.`
+            : null
+        }
+        confirmLabel="Excluir"
+        cancelLabel="Cancelar"
+        onConfirm={handleConfirmDelete}
+      />
+    </div>
+  );
+}
+
+export default ClientesScreen;

package/dist-lib/ai/exemplos/clientes/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/clientes/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/clientes/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/clientes/components/DetailDrawer/detail-drawer.styles.ts

@@ -0,0 +1,28 @@
+import { tv } from "@/utils/tv";
+
+/**
+ * Styles do DetailDrawer — apenas as partes internas (sections collapsibles
+ * + DetailField). O shell flutuante (aside, header com avatar+meta, footer
+ * com botões) é delegado ao `<FloatingPanel>` do DS.
+ */
+export const detailDrawerStyles = tv({
+  slots: {
+    section: "border-b border-border-default last:border-b-0",
+    sectionHead: [
+      "flex items-center justify-between w-full",
+      "px-[18px] py-[14px]",
+      "bg-transparent border-0 cursor-pointer text-left",
+      "text-body-sm font-semibold text-fg-default",
+      "transition-colors duration-150",
+      "hover:bg-bg-muted",
+      "focus-visible:outline-none focus-visible:bg-bg-muted",
+    ],
+    sectionChev: "size-[14px] text-fg-muted transition-transform duration-200",
+    sectionChevOpen: "rotate-180",
+    sectionBody: "flex flex-col gap-gp-md px-[18px] pb-pad-2xl",
+
+    field: "flex items-baseline justify-between gap-gp-md text-body-sm font-normal",
+    fieldLabel: "text-body-xs font-normal text-fg-muted shrink-0",
+    fieldValue: "text-fg-default text-right break-words min-w-0",
+  },
+});