@snksergio/design-system 0.1.0

package/dist-lib/preview/clientes.cjs

@@ -0,0 +1,897 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const useTheme = require("../chunks/useTheme-Dee4mo-A.mjs");
+const lucideReact = require("lucide-react");
+const clientesShowcaseMocks = require("../chunks/clientes-showcase-mocks-BMfbNNJh.mjs");
+const panel = require("../chunks/panel-bzNmFlEZ.mjs");
+const chipGroup = require("../chunks/chip-group-CsKBBHW2.mjs");
+const appShell = require("../chunks/app-shell-BNTvOETJ.mjs");
+require("../chunks/input-374MpdBL.mjs");
+require("../chunks/badge-DKpXURa1.mjs");
+const pageHeader = require("../chunks/page-header-Dw-3wqAG.mjs");
+const appShellMocks = require("../chunks/app-shell-mocks-oO_IV3Gw.mjs");
+const drawerFormStyles = chipGroup.tv({
+  slots: {
+    twoCols: "grid grid-cols-2 gap-gp-xl",
+    fieldLabel: "text-[12.5px] font-semibold tracking-[0.01em] leading-none text-fg-default dark:text-fg-muted select-none",
+    statusDot: "inline-block size-[8px] rounded-radius-full mr-gp-xs shrink-0"
+  }
+});
+const INITIAL_FORM = {
+  name: "",
+  email: "",
+  whatsapp: "",
+  statusId: "active",
+  categoryId: "lead",
+  city: "",
+  value: 0,
+  notes: ""
+};
+function NovoClienteDrawer({
+  open,
+  onOpenChange,
+  onSubmit
+}) {
+  const s = drawerFormStyles();
+  const [form, setForm] = React.useState(INITIAL_FORM);
+  React.useEffect(() => {
+    if (open) setForm(INITIAL_FORM);
+  }, [open]);
+  const canSubmit = form.name.trim().length > 0;
+  const handleSubmit = () => {
+    if (!canSubmit) return;
+    onSubmit?.(form);
+    onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    panel.Panel,
+    {
+      open,
+      onOpenChange,
+      title: "Novo cliente",
+      side: "right",
+      size: "md",
+      footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chipGroup.Button,
+          {
+            variant: "outline",
+            color: "secondary",
+            size: "md",
+            onClick: () => onOpenChange(false),
+            children: "Cancelar"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chipGroup.Button,
+          {
+            variant: "filled",
+            color: "primary",
+            size: "md",
+            disabled: !canSubmit,
+            onClick: handleSubmit,
+            children: "Criar cliente"
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          panel.FormFieldInput,
+          {
+            label: "Nome",
+            required: true,
+            placeholder: "Maria Silva",
+            value: form.name,
+            onChange: (e) => setForm((f) => ({ ...f, name: e.target.value }))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.twoCols(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            panel.FormFieldInput,
+            {
+              label: "Email",
+              type: "email",
+              placeholder: "cliente@exemplo.com",
+              value: form.email,
+              onChange: (e) => setForm((f) => ({ ...f, email: e.target.value }))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            panel.FormFieldInput,
+            {
+              label: "WhatsApp",
+              type: "tel",
+              placeholder: "55 11 99999-9999",
+              value: form.whatsapp,
+              onChange: (e) => setForm((f) => ({ ...f, whatsapp: e.target.value }))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(panel.FormField, { label: "Status", children: () => /* @__PURE__ */ jsxRuntime.jsx(
+          chipGroup.ChipGroup,
+          {
+            type: "single",
+            value: form.statusId,
+            onValueChange: (v) => v && setForm((f) => ({
+              ...f,
+              statusId: v
+            })),
+            size: "md",
+            shape: "pill",
+            ariaLabel: "Status do cliente",
+            children: Object.entries(clientesShowcaseMocks.STATUSES).map(([id, st]) => /* @__PURE__ */ jsxRuntime.jsxs(chipGroup.ChipGroupItem, { value: id, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: s.statusDot(),
+                  style: { background: clientesShowcaseMocks.STATUS_DOT[id] ?? st.color },
+                  "aria-hidden": true
+                }
+              ),
+              st.label
+            ] }, id))
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(panel.FormField, { label: "Categoria", children: () => /* @__PURE__ */ jsxRuntime.jsx(
+          chipGroup.ChipGroup,
+          {
+            type: "single",
+            value: form.categoryId,
+            onValueChange: (v) => v && setForm((f) => ({
+              ...f,
+              categoryId: v
+            })),
+            size: "md",
+            shape: "pill",
+            ariaLabel: "Categoria do cliente",
+            children: Object.entries(clientesShowcaseMocks.CATEGORIES).map(([id, cat]) => /* @__PURE__ */ jsxRuntime.jsx(chipGroup.ChipGroupItem, { value: id, children: cat.label }, id))
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.twoCols(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            panel.FormFieldSelect,
+            {
+              label: "Cidade",
+              placeholder: "Selecionar...",
+              value: form.city || void 0,
+              onValueChange: (v) => setForm((f) => ({ ...f, city: v })),
+              options: clientesShowcaseMocks.CITIES.map((c) => ({ value: c, label: c }))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            panel.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
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          panel.FormFieldTextarea,
+          {
+            label: "Notas",
+            placeholder: "Observações sobre o cliente...",
+            rows: 4,
+            value: form.notes,
+            onChange: (e) => setForm((f) => ({ ...f, notes: e.target.value }))
+          }
+        )
+      ]
+    }
+  );
+}
+const detailDrawerStyles = chipGroup.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-[13px] 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-[13px]",
+    fieldLabel: "text-[12px] text-fg-muted shrink-0",
+    fieldValue: "text-fg-default text-right break-words min-w-0"
+  }
+});
+function formatLongDate(ms) {
+  if (!ms) return "—";
+  const d = new Date(ms);
+  return d.toLocaleDateString("pt-BR", {
+    day: "numeric",
+    month: "long",
+    year: "numeric"
+  });
+}
+function DetailField({ label, value, s }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.field(), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.fieldLabel(), children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.fieldValue(), children: value || "—" })
+  ] });
+}
+function DetailSection({
+  id,
+  title,
+  open,
+  onToggle,
+  children,
+  s
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: s.section(), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: s.sectionHead(),
+        onClick: () => onToggle(id),
+        "aria-expanded": open,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronDown,
+            {
+              className: [s.sectionChev(), open ? s.sectionChevOpen() : ""].join(" ")
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.sectionBody(), children })
+  ] });
+}
+function DetailDrawer({
+  row,
+  onClose,
+  onEdit,
+  onDelete,
+  onSave
+}) {
+  const s = detailDrawerStyles();
+  const [openSections, setOpenSections] = React.useState(
+    () => /* @__PURE__ */ new Set(["contact", "meta", "notes"])
+  );
+  const toggle = (id) => {
+    setOpenSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  if (!row) return null;
+  const status = clientesShowcaseMocks.STATUSES[row.statusId];
+  const cat = clientesShowcaseMocks.CATEGORIES[row.categoryId];
+  const agent = clientesShowcaseMocks.AGENTS[row.agentId];
+  const agentInitials = agent?.name.split(" ").map((p) => p[0]).join("").slice(0, 2) ?? "?";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    panel.FloatingPanel,
+    {
+      open: row !== null,
+      onOpenChange: (open) => {
+        if (!open) onClose();
+      },
+      side: "right",
+      size: "md",
+      resizable: true,
+      maximizable: true,
+      resizableStorageKey: "clientes-showcase.detail-drawer.width",
+      titleSlot: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-gp-md min-w-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          appShell.Avatar,
+          {
+            className: "size-[40px] shrink-0",
+            style: { background: row.avatarColor },
+            children: /* @__PURE__ */ jsxRuntime.jsx(appShell.AvatarFallback, { className: "bg-transparent text-white text-[14px] font-bold", children: row.initials })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[15px] font-semibold text-fg-default whitespace-nowrap overflow-hidden text-ellipsis", children: row.name }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[6px] mt-[2px] text-[12px] text-fg-muted", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: row.id }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-50", children: "·" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-[6px]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "inline-block size-[8px] rounded-radius-full shrink-0",
+                  style: { background: clientesShowcaseMocks.STATUS_DOT[row.statusId] ?? status?.color },
+                  "aria-hidden": true
+                }
+              ),
+              status?.label
+            ] })
+          ] })
+        ] })
+      ] }),
+      headerActions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chipGroup.Button,
+          {
+            variant: "soft",
+            color: "secondary",
+            size: "icon-sm",
+            "aria-label": "Editar",
+            onClick: () => onEdit?.(row),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chipGroup.Button,
+          {
+            variant: "soft",
+            color: "critical",
+            size: "icon-sm",
+            "aria-label": "Excluir",
+            onClick: () => onDelete?.(row),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, {})
+          }
+        )
+      ] }),
+      footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chipGroup.Button, { variant: "outline", color: "secondary", size: "sm", onClick: onClose, children: "Cancelar" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chipGroup.Button,
+          {
+            variant: "filled",
+            color: "primary",
+            size: "sm",
+            onClick: () => onSave?.(row),
+            children: "Salvar alterações"
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          DetailSection,
+          {
+            id: "contact",
+            title: "Contato",
+            open: openSections.has("contact"),
+            onToggle: toggle,
+            s,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                DetailField,
+                {
+                  label: "Email",
+                  value: /* @__PURE__ */ jsxRuntime.jsx(
+                    "a",
+                    {
+                      href: `mailto:${row.email}`,
+                      className: "text-fg-brand hover:underline",
+                      children: row.email
+                    }
+                  ),
+                  s
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                DetailField,
+                {
+                  label: "Telefone",
+                  value: /* @__PURE__ */ jsxRuntime.jsx(
+                    "a",
+                    {
+                      href: `tel:${row.phone.replace(/\D/g, "")}`,
+                      className: "text-fg-brand hover:underline",
+                      children: row.phone
+                    }
+                  ),
+                  s
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(DetailField, { label: "Localização", value: row.location, s })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          DetailSection,
+          {
+            id: "meta",
+            title: "Atendimento",
+            open: openSections.has("meta"),
+            onToggle: toggle,
+            s,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DetailField, { label: "ID", value: row.id, s }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                DetailField,
+                {
+                  label: "Categoria",
+                  value: cat ? /* @__PURE__ */ jsxRuntime.jsx(
+                    chipGroup.Chip,
+                    {
+                      color: clientesShowcaseMocks.CATEGORY_KIND[row.categoryId] ?? "info",
+                      variant: "soft",
+                      size: "sm",
+                      shape: "pill",
+                      children: cat.label
+                    }
+                  ) : "—",
+                  s
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                DetailField,
+                {
+                  label: "Atribuído a",
+                  value: agent ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-gp-sm", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      appShell.Avatar,
+                      {
+                        className: "size-[22px]",
+                        style: { background: agent.color },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(appShell.AvatarFallback, { className: "bg-transparent text-white text-[10px] font-bold", children: agentInitials })
+                      }
+                    ),
+                    agent.name
+                  ] }) : "—",
+                  s
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(DetailField, { label: "Valor", value: clientesShowcaseMocks.formatBRL(row.value), s }),
+              /* @__PURE__ */ jsxRuntime.jsx(DetailField, { label: "Criado em", value: formatLongDate(row.createdAt), s }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                DetailField,
+                {
+                  label: "Último contato",
+                  value: clientesShowcaseMocks.formatShortDate(row.lastContact),
+                  s
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DetailSection,
+          {
+            id: "notes",
+            title: "Anotações",
+            open: openSections.has("notes"),
+            onToggle: toggle,
+            s,
+            children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12.5px] text-fg-muted", children: "Sem anotações." })
+          }
+        )
+      ]
+    }
+  );
+}
+function buildColumns(handlers) {
+  return [
+    { field: "id", headerName: "ID", type: "text", width: 130 },
+    {
+      field: "name",
+      headerName: "Nome",
+      type: "user",
+      sortable: true,
+      width: 220,
+      typeOptions: {
+        users: Object.fromEntries(
+          clientesShowcaseMocks.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: clientesShowcaseMocks.STATUS_OPTIONS
+    },
+    {
+      field: "categoryId",
+      headerName: "Categoria",
+      type: "badge",
+      enableColumnFilter: true,
+      filterType: "multiSelect",
+      filterOptions: clientesShowcaseMocks.CATEGORY_OPTIONS
+    },
+    {
+      field: "agentId",
+      headerName: "Atribuído",
+      type: "user",
+      enableColumnFilter: true,
+      filterType: "select",
+      filterOptions: clientesShowcaseMocks.AGENT_OPTIONS,
+      typeOptions: { users: clientesShowcaseMocks.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",
+      width: 64,
+      pinned: "right",
+      getActions: ({ row }) => [
+        {
+          id: "edit",
+          label: "Editar",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, {}),
+          showInMenu: true,
+          onClick: () => console.log("Editar", row.id)
+        },
+        {
+          id: "whatsapp",
+          label: "Abrir atendimento (WhatsApp)",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, {}),
+          showInMenu: true,
+          onClick: () => console.log("Atendimento", row.id)
+        },
+        {
+          id: "archive",
+          label: "Arquivar",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Archive, {}),
+          showInMenu: true,
+          onClick: () => console.log("Arquivar", row.id)
+        },
+        {
+          id: "delete",
+          label: "Excluir cliente",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, {}),
+          showInMenu: true,
+          destructive: true,
+          onClick: () => handlers.onAskDelete(row)
+        }
+      ]
+    }
+  ];
+}
+const DEFAULT_VIEWS = [
+  panel.presetView({
+    id: "preset:meus",
+    name: "Meus",
+    filters: [{ field: "agentId", value: "you" }]
+  }),
+  panel.presetView({
+    id: "preset:ativos",
+    name: "Ativos",
+    filters: [{ field: "statusId", value: "active" }]
+  }),
+  panel.presetView({
+    id: "preset:royals",
+    name: "Royals",
+    filters: [{ field: "categoryId", value: "royal" }]
+  }),
+  panel.presetView({
+    id: "preset:ultimos-7-dias",
+    name: "Últimos 7 dias",
+    sort: [{ field: "createdAt", direction: "desc" }]
+  })
+];
+const INITIAL_FILTERS = {
+  items: [
+    { id: "filter-status-ativo", field: "statusId", operator: "equals", value: "active" },
+    { id: "filter-categoria-royal", field: "categoryId", operator: "equals", value: "royal" }
+  ],
+  logicOperator: "AND"
+};
+const KANBAN_CONFIG = {
+  groupByField: "statusId",
+  columns: clientesShowcaseMocks.KANBAN_COLUMNS,
+  renderCard: ({ row }) => {
+    const cat = clientesShowcaseMocks.CATEGORIES[row.categoryId];
+    const agent = clientesShowcaseMocks.AGENTS[row.agentId];
+    const agentInitials = agent?.name.split(" ").map((s) => s[0]).join("").slice(0, 2) ?? "?";
+    return {
+      title: row.name,
+      subtitle: row.id,
+      avatar: /* @__PURE__ */ jsxRuntime.jsx(appShell.Avatar, { className: "size-[28px]", style: { background: row.avatarColor }, children: /* @__PURE__ */ jsxRuntime.jsx(appShell.AvatarFallback, { className: "bg-transparent text-white text-[11px] font-bold", children: row.initials }) }),
+      chip: cat ? /* @__PURE__ */ jsxRuntime.jsx(
+        chipGroup.Chip,
+        {
+          color: clientesShowcaseMocks.CATEGORY_KIND[row.categoryId] ?? "info",
+          variant: "soft",
+          size: "sm",
+          shape: "pill",
+          children: cat.label
+        }
+      ) : null,
+      value: clientesShowcaseMocks.formatBRL(row.value),
+      footerLeft: agent ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-gp-sm min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(appShell.Avatar, { className: "size-[22px]", style: { background: agent.color }, children: /* @__PURE__ */ jsxRuntime.jsx(appShell.AvatarFallback, { className: "bg-transparent text-white text-[10px] font-bold", children: agentInitials }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-fg-muted whitespace-nowrap overflow-hidden text-ellipsis", children: agent.name })
+      ] }) : null,
+      footerRight: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-[4px] text-[11.5px] text-fg-muted [font-variant-numeric:tabular-nums] shrink-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { size: 11, strokeWidth: 1.8, "aria-hidden": true }),
+        clientesShowcaseMocks.formatShortDate(row.lastContact)
+      ] })
+    };
+  }
+};
+function ClientesShowcase() {
+  const { theme, setTheme } = useTheme.useTheme();
+  const [rows, setRows] = React.useState(() => clientesShowcaseMocks.CLIENTS_87);
+  const [layout, setLayout] = React.useState("fluid");
+  const [filterModel, setFilterModel] = React.useState(INITIAL_FILTERS);
+  const [viewMode, setViewMode] = React.useState("table");
+  const [novoClienteOpen, setNovoClienteOpen] = React.useState(false);
+  const [detailRowId, setDetailRowId] = React.useState(null);
+  const [confirmDelete, setConfirmDelete] = React.useState(null);
+  const detailRow = detailRowId ? rows.find((r) => r.id === detailRowId) ?? null : null;
+  const tableRef = React.useRef(null);
+  const askDelete = React.useCallback(
+    (row) => setConfirmDelete({ ids: [row.id], label: row.name }),
+    []
+  );
+  const askBulkDelete = React.useCallback(
+    (ids, onAfter) => setConfirmDelete({
+      ids,
+      label: `${ids.length} cliente${ids.length === 1 ? "" : "s"}`,
+      onAfter
+    }),
+    []
+  );
+  const handleConfirmDelete = React.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 = React.useMemo(
+    () => buildColumns({ onAskDelete: askDelete }),
+    [askDelete]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    appShell.AppShell,
+    {
+      contexts: appShellMocks.APP_SHELL_CONTEXTS,
+      defaultActiveContextId: "inbox",
+      defaultActiveItemHref: "#atendimentos",
+      breadcrumb: [{ label: "Atendimentos" }],
+      commandGroups: appShellMocks.APP_SHELL_COMMANDS,
+      notifications: {
+        items: appShellMocks.APP_SHELL_NOTIFICATIONS,
+        onMarkAllRead: () => alert("Marcar todas como lidas"),
+        onMoreActions: () => alert("Mais ações"),
+        onViewAll: () => alert("Ver todas")
+      },
+      messages: {
+        items: appShellMocks.APP_SHELL_MESSAGES,
+        onNewMessage: () => alert("Nova mensagem"),
+        onExpand: () => alert("Expandir"),
+        onViewAll: () => alert("Ver todas")
+      },
+      theme,
+      onThemeChange: (id) => setTheme(id),
+      themeOptions: appShellMocks.APP_SHELL_THEME_OPTIONS,
+      user: appShellMocks.APP_SHELL_USER,
+      layout,
+      onLayoutChange: setLayout,
+      layoutOptions: appShellMocks.APP_SHELL_LAYOUT_OPTIONS,
+      onSettings: () => alert("Abrir Configurações"),
+      onLogout: () => alert("Sair (mock)"),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          pageHeader.PageHeader,
+          {
+            title: "Clientes",
+            description: "Gerencie sua base de clientes, acompanhe status de cadastro e abra atendimentos diretos pelo WhatsApp.",
+            badge: /* @__PURE__ */ jsxRuntime.jsxs(chipGroup.Chip, { color: "primary", variant: "soft", size: "sm", shape: "rounded", children: [
+              rows.length.toLocaleString("pt-BR"),
+              " registros"
+            ] }),
+            actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chipGroup.Button,
+                {
+                  variant: "outline",
+                  color: "secondary",
+                  size: "icon-md",
+                  "aria-label": "Mais ações",
+                  onClick: () => alert("Mais ações"),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, {})
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chipGroup.Button,
+                {
+                  variant: "filled",
+                  color: "primary",
+                  size: "md",
+                  iconLeft: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {}),
+                  onClick: () => setNovoClienteOpen(true),
+                  children: "Novo cliente"
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          panel.DataTable,
+          {
+            ref: tableRef,
+            rows,
+            columns,
+            getRowId: (r) => r.id,
+            persistId: "showcase-clientes-crud",
+            defaultViews: DEFAULT_VIEWS,
+            filterModel,
+            onFilterModelChange: setFilterModel,
+            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: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, {}),
+                    onSelect: () => alert("Tela cheia")
+                  },
+                  {
+                    id: "duplicate",
+                    label: "Duplicar visualização",
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, {}),
+                    onSelect: () => alert("Duplicar visualização")
+                  },
+                  {
+                    id: "import",
+                    label: "Importar CSV",
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, {}),
+                    onSelect: () => alert("Importar CSV")
+                  },
+                  {
+                    id: "reset",
+                    label: "Resetar visualização",
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  panel.BulkActionButton,
+                  {
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, {}),
+                    onClick: () => tableRef.current?.exportCsv("selected"),
+                    children: "Exportar"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  panel.BulkActionButton,
+                  {
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, {}),
+                    variant: "danger",
+                    onClick: () => askBulkDelete(selectedIds.map(String), clearSelection),
+                    children: "Excluir"
+                  }
+                )
+              ] })
+            },
+            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"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          NovoClienteDrawer,
+          {
+            open: novoClienteOpen,
+            onOpenChange: setNovoClienteOpen,
+            onSubmit: (data) => {
+              console.log("Novo cliente:", data);
+              alert(`Cliente "${data.name}" criado (mock)`);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          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)`)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          panel.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
+          }
+        )
+      ]
+    }
+  );
+}
+exports.ClientesShowcase = ClientesShowcase;
+exports.default = ClientesShowcase;
+//# sourceMappingURL=clientes.cjs.map