@snksergio/design-system 0.1.0

package/dist-lib/preview/clientes.mjs

@@ -0,0 +1,897 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import { u as useTheme } from "../chunks/useTheme-BUPLZBMs.mjs";
+import { Pencil, Trash2, ChevronDown, MoreHorizontal, Plus, Download, Maximize2, Copy, Upload, RotateCcw, MessageSquare, Archive, Clock } from "lucide-react";
+import { S as STATUSES, a as STATUS_DOT, C as CATEGORIES, b as CITIES, A as AGENTS, d as CATEGORY_KIND, f as formatBRL, e as formatShortDate, g as CLIENTS_87, K as KANBAN_COLUMNS, h as STATUS_OPTIONS, i as CATEGORY_OPTIONS, j as AGENTS_LOOKUP, k as AGENT_OPTIONS } from "../chunks/clientes-showcase-mocks-Cq9u3nGZ.mjs";
+import { P as Panel, F as FormFieldInput, a as FormField, b as FormFieldSelect, c as FormFieldTextarea, d as FloatingPanel, p as presetView, D as DataTable, B as BulkActionButton, A as AlertModal } from "../chunks/panel-Ds15whqp.mjs";
+import { t as tv, a as ChipGroup, b as ChipGroupItem, B as Button, C as Chip } from "../chunks/chip-group-D3D0i72q.mjs";
+import { a as Avatar, b as AvatarFallback, A as AppShell } from "../chunks/app-shell-CDy42aNI.mjs";
+import "../chunks/input-DF4XAWmr.mjs";
+import "../chunks/badge-B_2Zt52o.mjs";
+import { P as PageHeader } from "../chunks/page-header-mC1gGtOI.mjs";
+import { b as APP_SHELL_LAYOUT_OPTIONS, f as APP_SHELL_USER, e as APP_SHELL_THEME_OPTIONS, c as APP_SHELL_MESSAGES, d as APP_SHELL_NOTIFICATIONS, A as APP_SHELL_COMMANDS, a as APP_SHELL_CONTEXTS } from "../chunks/app-shell-mocks-kWIVSzLs.mjs";
+const drawerFormStyles = 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] = useState(INITIAL_FORM);
+  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__ */ jsxs(
+    Panel,
+    {
+      open,
+      onOpenChange,
+      title: "Novo cliente",
+      side: "right",
+      size: "md",
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            color: "secondary",
+            size: "md",
+            onClick: () => onOpenChange(false),
+            children: "Cancelar"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "filled",
+            color: "primary",
+            size: "md",
+            disabled: !canSubmit,
+            onClick: handleSubmit,
+            children: "Criar cliente"
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(
+          FormFieldInput,
+          {
+            label: "Nome",
+            required: true,
+            placeholder: "Maria Silva",
+            value: form.name,
+            onChange: (e) => setForm((f) => ({ ...f, name: e.target.value }))
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: s.twoCols(), children: [
+          /* @__PURE__ */ jsx(
+            FormFieldInput,
+            {
+              label: "Email",
+              type: "email",
+              placeholder: "cliente@exemplo.com",
+              value: form.email,
+              onChange: (e) => setForm((f) => ({ ...f, email: e.target.value }))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormFieldInput,
+            {
+              label: "WhatsApp",
+              type: "tel",
+              placeholder: "55 11 99999-9999",
+              value: form.whatsapp,
+              onChange: (e) => setForm((f) => ({ ...f, whatsapp: e.target.value }))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(FormField, { label: "Status", children: () => /* @__PURE__ */ jsx(
+          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(STATUSES).map(([id, st]) => /* @__PURE__ */ jsxs(ChipGroupItem, { value: id, children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: s.statusDot(),
+                  style: { background: STATUS_DOT[id] ?? st.color },
+                  "aria-hidden": true
+                }
+              ),
+              st.label
+            ] }, id))
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FormField, { label: "Categoria", children: () => /* @__PURE__ */ jsx(
+          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(CATEGORIES).map(([id, cat]) => /* @__PURE__ */ jsx(ChipGroupItem, { value: id, children: cat.label }, id))
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: s.twoCols(), children: [
+          /* @__PURE__ */ jsx(
+            FormFieldSelect,
+            {
+              label: "Cidade",
+              placeholder: "Selecionar...",
+              value: form.city || void 0,
+              onValueChange: (v) => setForm((f) => ({ ...f, city: v })),
+              options: CITIES.map((c) => ({ value: c, label: c }))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            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__ */ jsx(
+          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 = 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__ */ jsxs("div", { className: s.field(), children: [
+    /* @__PURE__ */ jsx("span", { className: s.fieldLabel(), children: label }),
+    /* @__PURE__ */ jsx("span", { className: s.fieldValue(), children: value || "—" })
+  ] });
+}
+function DetailSection({
+  id,
+  title,
+  open,
+  onToggle,
+  children,
+  s
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: s.section(), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: s.sectionHead(),
+        onClick: () => onToggle(id),
+        "aria-expanded": open,
+        children: [
+          /* @__PURE__ */ jsx("span", { children: title }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: [s.sectionChev(), open ? s.sectionChevOpen() : ""].join(" ")
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx("div", { className: s.sectionBody(), children })
+  ] });
+}
+function DetailDrawer({
+  row,
+  onClose,
+  onEdit,
+  onDelete,
+  onSave
+}) {
+  const s = detailDrawerStyles();
+  const [openSections, setOpenSections] = 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 = STATUSES[row.statusId];
+  const cat = CATEGORIES[row.categoryId];
+  const agent = AGENTS[row.agentId];
+  const agentInitials = agent?.name.split(" ").map((p) => p[0]).join("").slice(0, 2) ?? "?";
+  return /* @__PURE__ */ jsxs(
+    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__ */ jsxs("div", { className: "flex items-center gap-gp-md min-w-0", children: [
+        /* @__PURE__ */ jsx(
+          Avatar,
+          {
+            className: "size-[40px] shrink-0",
+            style: { background: row.avatarColor },
+            children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-transparent text-white text-[14px] font-bold", children: row.initials })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-[15px] font-semibold text-fg-default whitespace-nowrap overflow-hidden text-ellipsis", children: row.name }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[6px] mt-[2px] text-[12px] text-fg-muted", children: [
+            /* @__PURE__ */ jsx("span", { children: row.id }),
+            /* @__PURE__ */ jsx("span", { className: "opacity-50", children: "·" }),
+            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-[6px]", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "inline-block size-[8px] rounded-radius-full shrink-0",
+                  style: { background: STATUS_DOT[row.statusId] ?? status?.color },
+                  "aria-hidden": true
+                }
+              ),
+              status?.label
+            ] })
+          ] })
+        ] })
+      ] }),
+      headerActions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "soft",
+            color: "secondary",
+            size: "icon-sm",
+            "aria-label": "Editar",
+            onClick: () => onEdit?.(row),
+            children: /* @__PURE__ */ jsx(Pencil, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "soft",
+            color: "critical",
+            size: "icon-sm",
+            "aria-label": "Excluir",
+            onClick: () => onDelete?.(row),
+            children: /* @__PURE__ */ jsx(Trash2, {})
+          }
+        )
+      ] }),
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", color: "secondary", size: "sm", onClick: onClose, children: "Cancelar" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "filled",
+            color: "primary",
+            size: "sm",
+            onClick: () => onSave?.(row),
+            children: "Salvar alterações"
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxs(
+          DetailSection,
+          {
+            id: "contact",
+            title: "Contato",
+            open: openSections.has("contact"),
+            onToggle: toggle,
+            s,
+            children: [
+              /* @__PURE__ */ jsx(
+                DetailField,
+                {
+                  label: "Email",
+                  value: /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: `mailto:${row.email}`,
+                      className: "text-fg-brand hover:underline",
+                      children: row.email
+                    }
+                  ),
+                  s
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                DetailField,
+                {
+                  label: "Telefone",
+                  value: /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: `tel:${row.phone.replace(/\D/g, "")}`,
+                      className: "text-fg-brand hover:underline",
+                      children: row.phone
+                    }
+                  ),
+                  s
+                }
+              ),
+              /* @__PURE__ */ jsx(DetailField, { label: "Localização", value: row.location, s })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          DetailSection,
+          {
+            id: "meta",
+            title: "Atendimento",
+            open: openSections.has("meta"),
+            onToggle: toggle,
+            s,
+            children: [
+              /* @__PURE__ */ jsx(DetailField, { label: "ID", value: row.id, s }),
+              /* @__PURE__ */ jsx(
+                DetailField,
+                {
+                  label: "Categoria",
+                  value: cat ? /* @__PURE__ */ jsx(
+                    Chip,
+                    {
+                      color: CATEGORY_KIND[row.categoryId] ?? "info",
+                      variant: "soft",
+                      size: "sm",
+                      shape: "pill",
+                      children: cat.label
+                    }
+                  ) : "—",
+                  s
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                DetailField,
+                {
+                  label: "Atribuído a",
+                  value: agent ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-gp-sm", children: [
+                    /* @__PURE__ */ jsx(
+                      Avatar,
+                      {
+                        className: "size-[22px]",
+                        style: { background: agent.color },
+                        children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-transparent text-white text-[10px] font-bold", children: agentInitials })
+                      }
+                    ),
+                    agent.name
+                  ] }) : "—",
+                  s
+                }
+              ),
+              /* @__PURE__ */ jsx(DetailField, { label: "Valor", value: formatBRL(row.value), s }),
+              /* @__PURE__ */ jsx(DetailField, { label: "Criado em", value: formatLongDate(row.createdAt), s }),
+              /* @__PURE__ */ jsx(
+                DetailField,
+                {
+                  label: "Último contato",
+                  value: formatShortDate(row.lastContact),
+                  s
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DetailSection,
+          {
+            id: "notes",
+            title: "Anotações",
+            open: openSections.has("notes"),
+            onToggle: toggle,
+            s,
+            children: /* @__PURE__ */ 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(
+          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",
+      width: 64,
+      pinned: "right",
+      getActions: ({ row }) => [
+        {
+          id: "edit",
+          label: "Editar",
+          icon: /* @__PURE__ */ jsx(Pencil, {}),
+          showInMenu: true,
+          onClick: () => console.log("Editar", row.id)
+        },
+        {
+          id: "whatsapp",
+          label: "Abrir atendimento (WhatsApp)",
+          icon: /* @__PURE__ */ jsx(MessageSquare, {}),
+          showInMenu: true,
+          onClick: () => console.log("Atendimento", row.id)
+        },
+        {
+          id: "archive",
+          label: "Arquivar",
+          icon: /* @__PURE__ */ jsx(Archive, {}),
+          showInMenu: true,
+          onClick: () => console.log("Arquivar", row.id)
+        },
+        {
+          id: "delete",
+          label: "Excluir cliente",
+          icon: /* @__PURE__ */ jsx(Trash2, {}),
+          showInMenu: true,
+          destructive: true,
+          onClick: () => handlers.onAskDelete(row)
+        }
+      ]
+    }
+  ];
+}
+const DEFAULT_VIEWS = [
+  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" }]
+  })
+];
+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: KANBAN_COLUMNS,
+  renderCard: ({ row }) => {
+    const cat = CATEGORIES[row.categoryId];
+    const agent = 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__ */ jsx(Avatar, { className: "size-[28px]", style: { background: row.avatarColor }, children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-transparent text-white text-[11px] font-bold", children: row.initials }) }),
+      chip: cat ? /* @__PURE__ */ jsx(
+        Chip,
+        {
+          color: CATEGORY_KIND[row.categoryId] ?? "info",
+          variant: "soft",
+          size: "sm",
+          shape: "pill",
+          children: cat.label
+        }
+      ) : null,
+      value: formatBRL(row.value),
+      footerLeft: agent ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-gp-sm min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx(Avatar, { className: "size-[22px]", style: { background: agent.color }, children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-transparent text-white text-[10px] font-bold", children: agentInitials }) }),
+        /* @__PURE__ */ jsx("span", { className: "text-[12px] text-fg-muted whitespace-nowrap overflow-hidden text-ellipsis", children: agent.name })
+      ] }) : null,
+      footerRight: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-[4px] text-[11.5px] text-fg-muted [font-variant-numeric:tabular-nums] shrink-0", children: [
+        /* @__PURE__ */ jsx(Clock, { size: 11, strokeWidth: 1.8, "aria-hidden": true }),
+        formatShortDate(row.lastContact)
+      ] })
+    };
+  }
+};
+function ClientesShowcase() {
+  const { theme, setTheme } = useTheme();
+  const [rows, setRows] = useState(() => CLIENTS_87);
+  const [layout, setLayout] = useState("fluid");
+  const [filterModel, setFilterModel] = useState(INITIAL_FILTERS);
+  const [viewMode, setViewMode] = useState("table");
+  const [novoClienteOpen, setNovoClienteOpen] = useState(false);
+  const [detailRowId, setDetailRowId] = useState(null);
+  const [confirmDelete, setConfirmDelete] = useState(null);
+  const detailRow = detailRowId ? rows.find((r) => r.id === detailRowId) ?? null : null;
+  const tableRef = useRef(null);
+  const askDelete = useCallback(
+    (row) => setConfirmDelete({ ids: [row.id], label: row.name }),
+    []
+  );
+  const askBulkDelete = useCallback(
+    (ids, onAfter) => 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 /* @__PURE__ */ jsxs(
+    AppShell,
+    {
+      contexts: APP_SHELL_CONTEXTS,
+      defaultActiveContextId: "inbox",
+      defaultActiveItemHref: "#atendimentos",
+      breadcrumb: [{ label: "Atendimentos" }],
+      commandGroups: APP_SHELL_COMMANDS,
+      notifications: {
+        items: APP_SHELL_NOTIFICATIONS,
+        onMarkAllRead: () => alert("Marcar todas como lidas"),
+        onMoreActions: () => alert("Mais ações"),
+        onViewAll: () => alert("Ver todas")
+      },
+      messages: {
+        items: APP_SHELL_MESSAGES,
+        onNewMessage: () => alert("Nova mensagem"),
+        onExpand: () => alert("Expandir"),
+        onViewAll: () => alert("Ver todas")
+      },
+      theme,
+      onThemeChange: (id) => setTheme(id),
+      themeOptions: APP_SHELL_THEME_OPTIONS,
+      user: APP_SHELL_USER,
+      layout,
+      onLayoutChange: setLayout,
+      layoutOptions: APP_SHELL_LAYOUT_OPTIONS,
+      onSettings: () => alert("Abrir Configurações"),
+      onLogout: () => alert("Sair (mock)"),
+      children: [
+        /* @__PURE__ */ jsx(
+          PageHeader,
+          {
+            title: "Clientes",
+            description: "Gerencie sua base de clientes, acompanhe status de cadastro e abra atendimentos diretos pelo WhatsApp.",
+            badge: /* @__PURE__ */ jsxs(Chip, { color: "primary", variant: "soft", size: "sm", shape: "rounded", children: [
+              rows.length.toLocaleString("pt-BR"),
+              " registros"
+            ] }),
+            actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  color: "secondary",
+                  size: "icon-md",
+                  "aria-label": "Mais ações",
+                  onClick: () => alert("Mais ações"),
+                  children: /* @__PURE__ */ jsx(MoreHorizontal, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "filled",
+                  color: "primary",
+                  size: "md",
+                  iconLeft: /* @__PURE__ */ jsx(Plus, {}),
+                  onClick: () => setNovoClienteOpen(true),
+                  children: "Novo cliente"
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          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__ */ jsx(Maximize2, {}),
+                    onSelect: () => alert("Tela cheia")
+                  },
+                  {
+                    id: "duplicate",
+                    label: "Duplicar visualização",
+                    icon: /* @__PURE__ */ jsx(Copy, {}),
+                    onSelect: () => alert("Duplicar visualização")
+                  },
+                  {
+                    id: "import",
+                    label: "Importar CSV",
+                    icon: /* @__PURE__ */ jsx(Upload, {}),
+                    onSelect: () => alert("Importar CSV")
+                  },
+                  {
+                    id: "reset",
+                    label: "Resetar visualização",
+                    icon: /* @__PURE__ */ jsx(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__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  BulkActionButton,
+                  {
+                    icon: /* @__PURE__ */ jsx(Download, {}),
+                    onClick: () => tableRef.current?.exportCsv("selected"),
+                    children: "Exportar"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  BulkActionButton,
+                  {
+                    icon: /* @__PURE__ */ jsx(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__ */ jsx(
+          NovoClienteDrawer,
+          {
+            open: novoClienteOpen,
+            onOpenChange: setNovoClienteOpen,
+            onSubmit: (data) => {
+              console.log("Novo cliente:", data);
+              alert(`Cliente "${data.name}" criado (mock)`);
+            }
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsx(
+          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
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ClientesShowcase,
+  ClientesShowcase as default
+};
+//# sourceMappingURL=clientes.mjs.map