@snksergio/design-system 0.1.0

package/dist-lib/preview/dashboard.cjs

@@ -0,0 +1,733 @@
+"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 recharts = require("recharts");
+const chipGroup = require("../chunks/chip-group-CsKBBHW2.mjs");
+const appShell = require("../chunks/app-shell-BNTvOETJ.mjs");
+const pageHeader = require("../chunks/page-header-Dw-3wqAG.mjs");
+const appShellMocks = require("../chunks/app-shell-mocks-oO_IV3Gw.mjs");
+const KPIS_PRIMARY = [
+  {
+    id: "in-conv",
+    title: "Em atendimento",
+    value: "12",
+    delta: { value: "+3", direction: "up", positive: true, label: "vs ontem" },
+    icon: lucideReact.Phone,
+    tone: "success"
+  },
+  {
+    id: "waiting",
+    title: "Em espera",
+    value: "4",
+    delta: { value: "+1", direction: "up", positive: false, label: "vs ontem" },
+    icon: lucideReact.Timer,
+    tone: "warning"
+  },
+  {
+    id: "finished",
+    title: "Resolvidos hoje",
+    value: "87",
+    delta: { value: "+12%", direction: "up", positive: true, label: "vs semana" },
+    icon: lucideReact.CheckCircle2,
+    tone: "info"
+  },
+  {
+    id: "new",
+    title: "Novos contatos",
+    value: "260",
+    delta: { value: "+24", direction: "up", positive: true, label: "vs ontem" },
+    icon: lucideReact.UserPlus,
+    tone: "brand"
+  },
+  {
+    id: "talk",
+    title: "Tempo médio atend.",
+    value: "4m 32s",
+    delta: { value: "-12s", direction: "down", positive: true, label: "melhorou" },
+    icon: lucideReact.Clock,
+    tone: "neutral"
+  },
+  {
+    id: "wait",
+    title: "Tempo médio espera",
+    value: "1m 18s",
+    delta: { value: "-8s", direction: "down", positive: true, label: "melhorou" },
+    icon: lucideReact.Timer,
+    tone: "neutral"
+  }
+];
+const KPIS_QUALITY = [
+  {
+    id: "frt",
+    title: "First Response Time",
+    value: "42s",
+    delta: { value: "-5s", direction: "down", positive: true, label: "melhorou" },
+    icon: lucideReact.TrendingUp,
+    tone: "info"
+  },
+  {
+    id: "csat",
+    title: "CSAT",
+    value: "4.7",
+    delta: { value: "+0.2", direction: "up", positive: true, label: "vs semana" },
+    icon: lucideReact.Star,
+    tone: "warning"
+  },
+  {
+    id: "nps",
+    title: "NPS",
+    value: "68",
+    delta: { value: "+5", direction: "up", positive: true, label: "vs mês" },
+    icon: lucideReact.Headphones,
+    tone: "success"
+  },
+  {
+    id: "ai",
+    title: "Resolvido por IA",
+    value: "32%",
+    delta: { value: "+4%", direction: "up", positive: true, label: "vs semana" },
+    icon: lucideReact.Bot,
+    tone: "brand"
+  }
+];
+const VOLUME_BY_MONTH = [
+  { m: "Jan", human: 2400, ai: 1200 },
+  { m: "Feb", human: 4e3, ai: 2800 },
+  { m: "Mar", human: 3500, ai: 2200 },
+  { m: "Apr", human: 3800, ai: 2900 },
+  { m: "May", human: 2700, ai: 2300 },
+  { m: "Jun", human: 3200, ai: 2700 },
+  { m: "Jul", human: 2600, ai: 2700 },
+  { m: "Aug", human: 4500, ai: 3200 },
+  { m: "Sep", human: 2800, ai: 2700 },
+  { m: "Oct", human: 4200, ai: 2300 },
+  { m: "Nov", human: 2600, ai: 2700 },
+  { m: "Dec", human: 3e3, ai: 4e3 }
+];
+const REGIONS = [
+  { name: "São Paulo", value: 1650, color: "var(--color-fg-brand)", delta: "+4.7%", positive: true },
+  { name: "Rio de Janeiro", value: 350, color: "var(--color-fg-warning)", delta: "+2.1%", positive: true },
+  { name: "Belo Horizonte", value: 498, color: "var(--color-fg-info)", delta: "-1.7%", positive: false }
+];
+const CHANNELS = [
+  { id: "whatsapp", name: "WhatsApp", volume: "8.49k", color: "#25d366", icon: lucideReact.MessageSquare, status: "active" },
+  { id: "instagram", name: "Instagram", volume: "6.98k", color: "#e1306c", icon: lucideReact.MessageSquare, status: "active" },
+  { id: "telegram", name: "Telegram", volume: "3.21k", color: "#0088cc", icon: lucideReact.Send, status: "paused" },
+  { id: "email", name: "Email", volume: "2.14k", color: "#8754ec", icon: lucideReact.Mail, status: "active" },
+  { id: "webchat", name: "Web Chat", volume: "1.50k", color: "#0a3a2e", icon: lucideReact.MessageSquare, status: "off" }
+];
+const CHANNEL_STATUS_LABEL = {
+  active: "Ativo",
+  paused: "Pausado",
+  off: "Desligado"
+};
+const CHANNEL_STATUS_TONE = {
+  active: "success",
+  paused: "warning",
+  off: "neutral"
+};
+const OPEN_CONVS = [
+  { id: "#A-2453", name: "Maria Hernandez", initials: "MH", hex: "#f59e0b", channel: "whatsapp", status: "attending", waitTime: "2m", agent: { initials: "AC", name: "Aline Castro", hex: "#f59e0b" } },
+  { id: "#A-2455", name: "James Johnson", initials: "JJ", hex: "#0a3a2e", channel: "telegram", status: "waiting", waitTime: "8m" },
+  { id: "#A-2458", name: "Camila Ribeiro", initials: "CR", hex: "#8754ec", channel: "instagram", status: "attending", waitTime: "1m", agent: { initials: "VC", name: "Você", hex: "#0a3a2e" } },
+  { id: "#A-2461", name: "Roberto Souza", initials: "RS", hex: "#0088cc", channel: "whatsapp", status: "ai", waitTime: "3m" },
+  { id: "#A-2466", name: "Ana Costa", initials: "AC", hex: "#1cb280", channel: "email", status: "waiting", waitTime: "14m" }
+];
+const STATUS_LABEL = {
+  attending: "Em atendimento",
+  waiting: "Em espera",
+  ai: "IA"
+};
+const STATUS_TONE = {
+  attending: "success",
+  waiting: "warning",
+  ai: "info"
+};
+const AGENTS = [
+  { id: "aline", name: "Aline Castro", initials: "AC", hex: "#f59e0b", active: true, resolved: 24, avgTime: "3m 12s", csat: 4.9 },
+  { id: "carlos", name: "Carlos Souza", initials: "CS", hex: "#8754ec", active: true, resolved: 19, avgTime: "4m 45s", csat: 4.7 },
+  { id: "maria", name: "Maria Lima", initials: "ML", hex: "#ef4444", active: false, resolved: 17, avgTime: "5m 03s", csat: 4.5 },
+  { id: "joao", name: "João Pereira", initials: "JP", hex: "#1cb280", active: true, resolved: 15, avgTime: "3m 58s", csat: 4.8 },
+  { id: "you", name: "Você", initials: "VC", hex: "#0a3a2e", active: true, resolved: 12, avgTime: "4m 11s", csat: 4.6 }
+];
+const TRAFFIC_ROWS = [
+  { source: "Direct", visits: "1.300", bounce: "30%", goal: 80, goalColor: "var(--color-fg-warning)" },
+  { source: "Email Campaign", visits: "5.000", bounce: "45%", goal: 40, goalColor: "var(--color-fg-success)" },
+  { source: "Organic", visits: "3.000", bounce: "10%", goal: 55, goalColor: "var(--color-fg-warning)" },
+  { source: "Paid Search", visits: "2.450", bounce: "22%", goal: 68, goalColor: "var(--color-fg-success)" },
+  { source: "Social", visits: "1.870", bounce: "55%", goal: 25, goalColor: "var(--color-fg-danger)" },
+  { source: "Referral", visits: "940", bounce: "18%", goal: 72, goalColor: "var(--color-fg-success)" }
+];
+const TONE_CLASSES = {
+  brand: { bg: "bg-bg-brand-subtle", fg: "text-fg-brand" },
+  success: { bg: "bg-bg-success-muted", fg: "text-fg-success" },
+  warning: { bg: "bg-bg-warning-muted", fg: "text-fg-warning" },
+  info: { bg: "bg-bg-info-muted", fg: "text-fg-info" },
+  danger: { bg: "bg-bg-danger-muted", fg: "text-fg-danger" },
+  neutral: { bg: "bg-bg-muted", fg: "text-fg-muted" }
+};
+function KpiCard({ kpi }) {
+  const Icon = kpi.icon;
+  const cls = TONE_CLASSES[kpi.tone];
+  return /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "flex flex-col gap-gp-lg p-pad-3xl bg-bg-surface border border-border-subtle rounded-radius-xl shadow-sh-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-start justify-between gap-gp-md", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "m-0 text-paragraph-sm font-semibold text-fg-default", children: kpi.title }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: chipGroup.cn(
+            "grid place-items-center size-form-lg rounded-radius-lg shrink-0",
+            cls.bg,
+            cls.fg
+          ),
+          "aria-hidden": true,
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-icon-md", strokeWidth: 1.8 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-gp-xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-gp-md flex-wrap", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[26px] font-bold text-fg-default leading-none [font-variant-numeric:tabular-nums]", children: kpi.value }),
+        kpi.delta && /* @__PURE__ */ jsxRuntime.jsx(
+          chipGroup.Chip,
+          {
+            color: kpi.delta.positive ? "success" : "danger",
+            variant: "soft",
+            size: "sm",
+            shape: "pill",
+            children: kpi.delta.value
+          }
+        )
+      ] }),
+      kpi.delta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-fg-subtle", children: kpi.delta.label })
+    ] })
+  ] });
+}
+function WelcomeBanner() {
+  return /* @__PURE__ */ jsxRuntime.jsx("article", { className: "relative overflow-hidden bg-bg-brand rounded-radius-xl p-pad-4xl flex items-center gap-gp-2xl flex-1 w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-gp-md flex-1 min-w-0 z-[1]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "m-0 flex items-center gap-gp-md text-[22px] font-bold text-fg-on-brand", children: [
+      "Boa tarde, Sergio",
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: "size-icon-md text-fg-warning", fill: "currentColor" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "m-0 text-paragraph-sm text-fg-on-brand opacity-80 max-w-[480px]", children: [
+      "Acompanhe a performance da sua equipe hoje.",
+      /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+      "Snapshot rápido das principais métricas do atendimento."
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+      chipGroup.Button,
+      {
+        color: "secondary",
+        variant: "filled",
+        size: "md",
+        iconRight: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, {}),
+        className: "bg-bg-surface text-fg-default hover:bg-bg-muted",
+        children: "Ver relatório completo"
+      }
+    ) })
+  ] }) });
+}
+function KeyInsightsCard() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "flex flex-col gap-gp-md p-pad-3xl bg-bg-surface border border-border-subtle rounded-radius-xl shadow-sh-sm h-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center justify-between gap-gp-md", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "m-0 text-[15px] font-bold text-fg-default", children: "Key Insights" }),
+      /* @__PURE__ */ jsxRuntime.jsx(chipGroup.Button, { color: "secondary", variant: "ghost", size: "icon-sm", "aria-label": "Mais opções", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, {}) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-[12px] text-fg-muted", children: "Receita acumulada (anual)" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-gp-md flex-wrap", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[26px] font-bold text-fg-default leading-none [font-variant-numeric:tabular-nums]", children: "R$ 395.7k" }),
+      /* @__PURE__ */ jsxRuntime.jsx(chipGroup.Chip, { color: "success", variant: "soft", size: "sm", shape: "pill", children: "+2.7%" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-auto flex flex-col gap-gp-md", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[8px] gap-[2px] rounded-radius-full overflow-hidden", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-bg-brand", style: { flex: 4 }, "aria-hidden": true }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-bg-warning", style: { flex: 3 }, "aria-hidden": true }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-bg-info", style: { flex: 4 }, "aria-hidden": true })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-gp-lg flex-wrap text-[11px] text-fg-muted", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-[5px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-[8px] rounded-radius-full bg-bg-brand", "aria-hidden": true }),
+          "São Paulo"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-[5px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-[8px] rounded-radius-full bg-bg-warning", "aria-hidden": true }),
+          "Rio"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-[5px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-[8px] rounded-radius-full bg-bg-info", "aria-hidden": true }),
+          "MG"
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function SectionCard({
+  title,
+  subtitle,
+  action,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: chipGroup.cn(
+        "flex flex-col gap-gp-2xl p-pad-3xl bg-bg-surface border border-border-subtle rounded-radius-xl shadow-sh-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center justify-between gap-gp-md", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[2px] min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "m-0 text-[15px] font-bold text-fg-default", children: title }),
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-[12px] text-fg-muted", children: subtitle })
+          ] }),
+          action ?? /* @__PURE__ */ jsxRuntime.jsx(chipGroup.Button, { color: "secondary", variant: "ghost", size: "icon-sm", "aria-label": "Mais opções", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, {}) })
+        ] }),
+        children
+      ]
+    }
+  );
+}
+const CHART_TOOLTIP_STYLE = {
+  borderRadius: 10,
+  border: "1px solid var(--color-border-default)",
+  background: "var(--color-bg-surface-elevated)",
+  color: "var(--color-fg-default)",
+  fontSize: 12,
+  boxShadow: "rgba(0,0,0,0.18) 0 12px 24px -4px",
+  padding: "8px 12px"
+};
+const CHART_TOOLTIP_LABEL_STYLE = {
+  color: "var(--color-fg-muted)",
+  fontSize: 11,
+  marginBottom: 4
+};
+function VolumeStackedChart() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-gp-lg", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-gp-md flex-wrap", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-gp-md flex-wrap", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[26px] font-bold text-fg-default leading-none [font-variant-numeric:tabular-nums]", children: "R$ 395.7k" }),
+        /* @__PURE__ */ jsxRuntime.jsx(chipGroup.Chip, { color: "success", variant: "soft", size: "sm", shape: "pill", children: "+18%" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-fg-muted", children: "vs ano passado" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-gp-md", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-[4px] text-[11px] text-fg-muted", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-[8px] rounded-radius-full bg-bg-brand", "aria-hidden": true }),
+          " Humano"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-[4px] text-[11px] text-fg-muted", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-[8px] rounded-radius-full bg-bg-brand-subtle", "aria-hidden": true }),
+          " IA"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(chipGroup.Button, { color: "secondary", variant: "outline", size: "sm", iconRight: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}), children: "2026" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%", height: 280 }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      recharts.BarChart,
+      {
+        data: VOLUME_BY_MONTH,
+        margin: { top: 8, right: 8, left: -16, bottom: 0 },
+        barCategoryGap: 18,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.CartesianGrid,
+            {
+              stroke: "var(--color-border-subtle)",
+              strokeDasharray: "4 4",
+              vertical: false
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.XAxis,
+            {
+              dataKey: "m",
+              tickLine: false,
+              axisLine: false,
+              fontSize: 11,
+              stroke: "var(--color-fg-subtle)"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.YAxis,
+            {
+              tickLine: false,
+              axisLine: false,
+              fontSize: 11,
+              stroke: "var(--color-fg-subtle)",
+              tickFormatter: (v) => v === 0 ? "0k" : `${v / 1e3}k`,
+              ticks: [0, 2e3, 4e3, 6e3, 8e3, 1e4],
+              domain: [0, 1e4]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Tooltip,
+            {
+              cursor: { fill: "var(--color-bg-muted)", opacity: 0.5 },
+              contentStyle: CHART_TOOLTIP_STYLE,
+              labelStyle: CHART_TOOLTIP_LABEL_STYLE,
+              formatter: (value, name) => {
+                const label = name === "human" ? "Humano" : "IA";
+                return [Number(value).toLocaleString("pt-BR"), label];
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { dataKey: "human", stackId: "x", fill: "var(--color-bg-brand)", radius: [0, 0, 0, 0] }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { dataKey: "ai", stackId: "x", fill: "var(--color-bg-brand-subtle)", radius: [6, 6, 0, 0] })
+        ]
+      }
+    ) }) })
+  ] });
+}
+function CurrentVisitsCard() {
+  const total = REGIONS.reduce((s, r) => s + r.value, 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs(SectionCard, { title: "Origem dos atendimentos", subtitle: "Por região", className: "h-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", style: { height: 210 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 210, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { margin: { top: 0, right: 0, bottom: 0, left: 0 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Pie,
+          {
+            data: REGIONS,
+            dataKey: "value",
+            nameKey: "name",
+            cx: "50%",
+            cy: "50%",
+            innerRadius: 70,
+            outerRadius: 92,
+            paddingAngle: 3,
+            startAngle: 90,
+            endAngle: -270,
+            stroke: "none",
+            isAnimationActive: true,
+            children: REGIONS.map((r) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: r.color }, r.name))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Tooltip,
+          {
+            contentStyle: CHART_TOOLTIP_STYLE,
+            labelStyle: CHART_TOOLTIP_LABEL_STYLE,
+            formatter: (value) => Number(value).toLocaleString("pt-BR")
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center pointer-events-none", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-fg-muted", children: "Total" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[24px] font-bold text-fg-default leading-none [font-variant-numeric:tabular-nums]", children: total.toLocaleString("pt-BR") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto flex flex-col gap-gp-md", children: REGIONS.map((r) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-gp-md", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "size-[10px] rounded-radius-full shrink-0",
+          style: { background: r.color },
+          "aria-hidden": true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-[12.5px] text-fg-default font-medium", children: r.name }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-fg-default [font-variant-numeric:tabular-nums]", children: r.value.toLocaleString("pt-BR") }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        chipGroup.Chip,
+        {
+          color: r.positive ? "success" : "danger",
+          variant: "soft",
+          size: "sm",
+          shape: "pill",
+          children: r.delta
+        }
+      )
+    ] }, r.name)) })
+  ] });
+}
+function PersonAvatar({ initials, hex, size = "md" }) {
+  const cls = size === "sm" ? "size-[24px] text-[10px]" : "size-[32px] text-[12px]";
+  return /* @__PURE__ */ jsxRuntime.jsx(appShell.Avatar, { className: cls, style: { background: hex }, children: /* @__PURE__ */ jsxRuntime.jsx(appShell.AvatarFallback, { className: "bg-transparent text-white font-bold", children: initials }) });
+}
+function OpenConversationsList() {
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 p-0 list-none flex flex-col", children: OPEN_CONVS.map((c) => {
+    const ChIcon = CHANNELS.find((ch) => ch.id === c.channel)?.icon ?? lucideReact.MessageSquare;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        className: "flex items-center gap-gp-md py-pad-lg border-b border-border-subtle last:border-b-0 cursor-pointer hover:[&>*]:opacity-90 transition-opacity",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PersonAvatar, { initials: c.initials, hex: c.hex, size: "md" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex flex-col gap-[2px]", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-gp-sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] font-semibold text-fg-default whitespace-nowrap overflow-hidden text-ellipsis", children: c.name }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-fg-subtle [font-variant-numeric:tabular-nums] shrink-0", children: c.id })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-gp-sm flex-wrap text-[11px] text-fg-muted", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-[3px]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ChIcon, { size: 11, strokeWidth: 1.8, "aria-hidden": true }),
+                CHANNELS.find((ch) => ch.id === c.channel)?.name ?? c.channel
+              ] }),
+              c.agent && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: "·" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: c.agent.name })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-[4px] shrink-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(chipGroup.Chip, { color: STATUS_TONE[c.status], variant: "soft", size: "sm", shape: "pill", children: STATUS_LABEL[c.status] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-[3px] text-[11px] text-fg-muted [font-variant-numeric:tabular-nums]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { size: 10, strokeWidth: 1.8, "aria-hidden": true }),
+              c.waitTime
+            ] })
+          ] })
+        ]
+      },
+      c.id
+    );
+  }) });
+}
+function AgentPerformanceList() {
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 p-0 list-none flex flex-col", children: AGENTS.map((a, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "li",
+    {
+      className: "flex items-center gap-gp-md py-pad-lg border-b border-border-subtle last:border-b-0",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "grid place-items-center size-[20px] rounded-radius-full bg-bg-muted text-[11px] font-bold text-fg-muted shrink-0 [font-variant-numeric:tabular-nums]", children: i + 1 }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PersonAvatar, { initials: a.initials, hex: a.hex, size: "md" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: chipGroup.cn(
+                "absolute -bottom-[1px] -right-[1px] size-[8px] rounded-radius-full border border-bg-surface",
+                a.active ? "bg-bg-success" : "bg-bg-muted"
+              ),
+              "aria-label": a.active ? "online" : "offline"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex flex-col gap-[2px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] font-semibold text-fg-default whitespace-nowrap overflow-hidden text-ellipsis", children: a.name }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] text-fg-muted", children: [
+            a.resolved,
+            " resolvidos · ",
+            a.avgTime,
+            " médio"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[3px] shrink-0 text-[12px] font-semibold text-fg-default", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Star, { size: 11, strokeWidth: 2, className: "text-fg-warning fill-current", "aria-hidden": true }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-variant-numeric:tabular-nums]", children: a.csat.toFixed(1) })
+        ] })
+      ]
+    },
+    a.id
+  )) });
+}
+function ChannelPerformanceList() {
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 p-0 list-none flex flex-col", children: CHANNELS.map((c) => {
+    const Icon = c.icon;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        className: "flex items-center gap-gp-lg py-pad-lg border-b border-border-subtle last:border-b-0",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "grid place-items-center size-[36px] rounded-radius-full shrink-0 text-white",
+              style: { background: c.color },
+              "aria-hidden": true,
+              children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 16, strokeWidth: 1.8 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex flex-col gap-[2px]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] font-semibold text-fg-default", children: c.name }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] text-fg-muted", children: [
+              c.volume,
+              " mensagens"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(chipGroup.Chip, { color: CHANNEL_STATUS_TONE[c.status], variant: "soft", size: "sm", shape: "pill", children: CHANNEL_STATUS_LABEL[c.status] })
+        ]
+      },
+      c.id
+    );
+  }) });
+}
+function TrafficDataTable() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SectionCard,
+    {
+      title: "Origem do tráfego",
+      subtitle: "Fontes de aquisição",
+      className: "flex-1 h-full",
+      action: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative max-w-[200px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.Search,
+          {
+            size: 14,
+            strokeWidth: 1.8,
+            className: "absolute left-pad-lg top-1/2 -translate-y-1/2 text-fg-muted pointer-events-none"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "search",
+            placeholder: "Buscar...",
+            className: "h-form-md pl-[34px] pr-pad-md w-full rounded-radius-md bg-bg-muted border border-border-input text-paragraph-sm text-fg-default placeholder:text-fg-muted focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand focus-visible:border-border-brand"
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto -mx-pad-2xl px-pad-2xl", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full text-paragraph-sm border-separate border-spacing-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "text-[11px] font-bold tracking-[0.04em] text-fg-subtle uppercase", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "text-left pb-pad-md border-b border-border-subtle font-bold", children: "Fonte" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "text-right pb-pad-md border-b border-border-subtle font-bold", children: "Visitas" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "text-left pb-pad-md pl-pad-2xl border-b border-border-subtle font-bold", children: "Bounce" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "text-left pb-pad-md pl-pad-2xl border-b border-border-subtle font-bold", children: "Meta (%)" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: TRAFFIC_ROWS.map((r) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "text-[12.5px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-pad-lg border-b border-border-subtle text-fg-default font-medium", children: r.source }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-pad-lg border-b border-border-subtle text-right text-fg-default [font-variant-numeric:tabular-nums]", children: r.visits }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-pad-sm pl-pad-2xl border-b border-border-subtle text-fg-muted [font-variant-numeric:tabular-nums]", children: r.bounce }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-pad-sm pl-pad-2xl border-b border-border-subtle", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-gp-md", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-[6px] bg-bg-muted rounded-radius-full overflow-hidden min-w-[80px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "h-full rounded-radius-full",
+                style: { width: `${r.goal}%`, background: r.goalColor }
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] font-semibold text-fg-default [font-variant-numeric:tabular-nums] shrink-0 min-w-[32px] text-right", children: [
+              r.goal,
+              "%"
+            ] })
+          ] }) })
+        ] }, r.source)) })
+      ] }) })
+    }
+  );
+}
+function DashboardShowcase() {
+  const { theme, setTheme } = useTheme.useTheme();
+  const [period, setPeriod] = React.useState("Últimos 7 dias");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    appShell.AppShell,
+    {
+      contexts: appShellMocks.APP_SHELL_CONTEXTS,
+      defaultActiveContextId: "inbox",
+      defaultActiveItemHref: "#dashboard",
+      breadcrumb: [{ label: "Dashboard" }],
+      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,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          pageHeader.PageHeader,
+          {
+            title: "Dashboard",
+            description: "Visão geral do atendimento em tempo real — KPIs, volume, canais e performance da equipe.",
+            badge: /* @__PURE__ */ jsxRuntime.jsx(chipGroup.Chip, { color: "primary", variant: "soft", size: "sm", shape: "pill", children: "Hoje" }),
+            actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chipGroup.Button,
+                {
+                  color: "secondary",
+                  variant: "outline",
+                  size: "icon-md",
+                  "aria-label": "Mais ações",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, {})
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chipGroup.Button,
+                {
+                  color: "secondary",
+                  variant: "outline",
+                  size: "md",
+                  iconLeft: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, {}),
+                  iconRight: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}),
+                  onClick: () => {
+                    const next = period === "Últimos 7 dias" ? "Últimos 30 dias" : "Últimos 7 dias";
+                    setPeriod(next);
+                  },
+                  children: period
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "grid grid-cols-1 lg:grid-cols-3 gap-gp-2xl items-stretch", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:col-span-2 flex", children: /* @__PURE__ */ jsxRuntime.jsx(WelcomeBanner, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(KeyInsightsCard, {})
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "section",
+          {
+            "aria-label": "KPIs principais",
+            className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-gp-2xl",
+            children: KPIS_PRIMARY.map((kpi) => /* @__PURE__ */ jsxRuntime.jsx(KpiCard, { kpi }, kpi.id))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "grid grid-cols-1 lg:grid-cols-3 gap-gp-2xl items-stretch", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SectionCard,
+            {
+              title: "Volume de atendimentos",
+              subtitle: "Humano vs IA — ano corrente",
+              className: "lg:col-span-2 h-full",
+              children: /* @__PURE__ */ jsxRuntime.jsx(VolumeStackedChart, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(CurrentVisitsCard, {})
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "section",
+          {
+            "aria-label": "Qualidade do atendimento",
+            className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-gp-2xl",
+            children: KPIS_QUALITY.map((kpi) => /* @__PURE__ */ jsxRuntime.jsx(KpiCard, { kpi }, kpi.id))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "grid grid-cols-1 lg:grid-cols-2 gap-gp-2xl", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SectionCard,
+            {
+              title: "Atendimentos em aberto",
+              subtitle: "5 ativos agora",
+              action: /* @__PURE__ */ jsxRuntime.jsx(chipGroup.Button, { color: "secondary", variant: "ghost", size: "sm", children: "Ver todos" }),
+              children: /* @__PURE__ */ jsxRuntime.jsx(OpenConversationsList, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SectionCard,
+            {
+              title: "Performance da equipe",
+              subtitle: "Ranking de hoje",
+              action: /* @__PURE__ */ jsxRuntime.jsx(chipGroup.Button, { color: "secondary", variant: "ghost", size: "sm", children: "Ver equipe" }),
+              children: /* @__PURE__ */ jsxRuntime.jsx(AgentPerformanceList, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "grid grid-cols-1 lg:grid-cols-3 gap-gp-2xl items-stretch", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { title: "Canais", subtitle: "Volume e status", className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsx(ChannelPerformanceList, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:col-span-2 flex", children: /* @__PURE__ */ jsxRuntime.jsx(TrafficDataTable, {}) })
+        ] })
+      ]
+    }
+  );
+}
+exports.default = DashboardShowcase;
+//# sourceMappingURL=dashboard.cjs.map