sanity-plugin-ga-dashboard 1.0.0

package/dist/index.js

@@ -0,0 +1,890 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  googleAnalyticsPlugin: () => googleAnalyticsPlugin
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/plugin.ts
+var import_sanity = require("sanity");
+var import_icons = require("@sanity/icons");
+
+// src/components/dashboard.tsx
+var import_react = require("react");
+var import_recharts = require("recharts");
+
+// src/utils/ga-api.ts
+async function fetchAnalyticsData(apiUrl, dateRange) {
+  const res = await fetch(`${apiUrl}?range=${dateRange}`, { cache: "no-store" });
+  if (!res.ok) {
+    const err = await res.json().catch(() => null);
+    throw new Error(
+      (err == null ? void 0 : err.error) || `Analytics API error: ${res.status} ${res.statusText}`
+    );
+  }
+  return parseResponse(await res.json());
+}
+var mv = (row, i) => {
+  var _a, _b, _c;
+  return parseFloat((_c = (_b = (_a = row == null ? void 0 : row.metricValues) == null ? void 0 : _a[i]) == null ? void 0 : _b.value) != null ? _c : "0");
+};
+var dv = (row, i) => {
+  var _a, _b, _c;
+  return (_c = (_b = (_a = row == null ? void 0 : row.dimensionValues) == null ? void 0 : _a[i]) == null ? void 0 : _b.value) != null ? _c : "";
+};
+function totalOf(data) {
+  if (!(data == null ? void 0 : data.rows)) return 0;
+  return data.rows.reduce((s, r) => s + mv(r, 0), 0);
+}
+function parseOverview(d) {
+  var _a;
+  const row = (_a = d == null ? void 0 : d.rows) == null ? void 0 : _a[0];
+  if (!row) return { totalUsers: 0, newUsers: 0, sessions: 0, pageViews: 0, avgSessionDuration: 0, bounceRate: 0, engagedSessions: 0, engagementRate: 0, pagesPerSession: 0, eventsPerSession: 0 };
+  return {
+    totalUsers: mv(row, 0),
+    newUsers: mv(row, 1),
+    sessions: mv(row, 2),
+    pageViews: mv(row, 3),
+    avgSessionDuration: mv(row, 4),
+    bounceRate: mv(row, 5),
+    engagedSessions: mv(row, 6),
+    engagementRate: mv(row, 7),
+    pagesPerSession: mv(row, 8),
+    eventsPerSession: mv(row, 9)
+  };
+}
+function parseTimeSeries(d) {
+  if (!(d == null ? void 0 : d.rows)) return [];
+  return d.rows.map((row) => {
+    const s = dv(row, 0);
+    return {
+      date: `${s.slice(0, 4)}-${s.slice(4, 6)}-${s.slice(6, 8)}`,
+      displayDate: `${s.slice(4, 6)}/${s.slice(6, 8)}`,
+      users: mv(row, 0),
+      sessions: mv(row, 1),
+      pageViews: mv(row, 2)
+    };
+  });
+}
+function parseHourly(d) {
+  if (!(d == null ? void 0 : d.rows)) return [];
+  return d.rows.map((row) => {
+    const h = parseInt(dv(row, 0), 10);
+    const suffix = h < 12 ? "AM" : "PM";
+    const display = h === 0 ? "12AM" : h <= 12 ? `${h}${suffix}` : `${h - 12}${suffix}`;
+    return { hour: dv(row, 0), label: display, users: mv(row, 0), sessions: mv(row, 1) };
+  });
+}
+function parseTopPages(d) {
+  if (!(d == null ? void 0 : d.rows)) return [];
+  return d.rows.map((row) => ({ path: dv(row, 0), pageViews: mv(row, 0), users: mv(row, 1) }));
+}
+function parseLandingPages(d) {
+  if (!(d == null ? void 0 : d.rows)) return [];
+  return d.rows.map((row) => ({
+    path: dv(row, 0),
+    sessions: mv(row, 0),
+    users: mv(row, 1),
+    bounceRate: mv(row, 2)
+  }));
+}
+function parseWithPercentage(d, dimIdx, metricIdx) {
+  if (!(d == null ? void 0 : d.rows)) return [];
+  const total = totalOf(d);
+  return d.rows.map((row) => {
+    const sessions = mv(row, metricIdx);
+    return { name: dv(row, dimIdx), sessions, percentage: total > 0 ? Math.round(sessions / total * 1e3) / 10 : 0 };
+  });
+}
+function parseDevices(d) {
+  return parseWithPercentage(d, 0, 0).map((x) => ({ device: x.name, sessions: x.sessions, percentage: x.percentage }));
+}
+function parseBrowsers(d) {
+  return parseWithPercentage(d, 0, 0).map((x) => ({ browser: x.name, sessions: x.sessions, percentage: x.percentage }));
+}
+function parseOS(d) {
+  return parseWithPercentage(d, 0, 0).map((x) => ({ os: x.name, sessions: x.sessions, percentage: x.percentage }));
+}
+function parseCountries(d) {
+  if (!(d == null ? void 0 : d.rows)) return [];
+  return d.rows.map((row) => ({ country: dv(row, 0), users: mv(row, 0), sessions: mv(row, 1) }));
+}
+function parseCities(d) {
+  if (!(d == null ? void 0 : d.rows)) return [];
+  return d.rows.map((row) => ({ city: dv(row, 0), country: dv(row, 1), users: mv(row, 0), sessions: mv(row, 1) }));
+}
+function parseSources(d) {
+  if (!(d == null ? void 0 : d.rows)) return [];
+  return d.rows.map((row) => ({
+    source: [dv(row, 0), dv(row, 1)].filter(Boolean).join(" / "),
+    sessions: mv(row, 0),
+    users: mv(row, 1)
+  }));
+}
+function parseChannels(d) {
+  if (!(d == null ? void 0 : d.rows)) return [];
+  return d.rows.map((row) => ({
+    channel: dv(row, 0),
+    sessions: mv(row, 0),
+    users: mv(row, 1),
+    engagementRate: mv(row, 2)
+  }));
+}
+function parseNewVsReturning(d) {
+  if (!(d == null ? void 0 : d.rows)) return [];
+  const total = totalOf(d);
+  return d.rows.map((row) => {
+    const users = mv(row, 0);
+    return {
+      type: dv(row, 0),
+      users,
+      percentage: total > 0 ? Math.round(users / total * 1e3) / 10 : 0
+    };
+  });
+}
+function parseEvents(d) {
+  if (!(d == null ? void 0 : d.rows)) return [];
+  return d.rows.map((row) => ({ name: dv(row, 0), count: mv(row, 0), usersCount: mv(row, 1) }));
+}
+function parseReferrers(d) {
+  if (!(d == null ? void 0 : d.rows)) return [];
+  return d.rows.map((row) => ({ referrer: dv(row, 0) || "(direct)", sessions: mv(row, 0), users: mv(row, 1) }));
+}
+function parseActiveUsers(d) {
+  var _a, _b, _c, _d, _e;
+  return parseInt((_e = (_d = (_c = (_b = (_a = d == null ? void 0 : d.rows) == null ? void 0 : _a[0]) == null ? void 0 : _b.metricValues) == null ? void 0 : _c[0]) == null ? void 0 : _d.value) != null ? _e : "0", 10);
+}
+function parseResponse(raw) {
+  return {
+    activeUsers: parseActiveUsers(raw.activeUsers),
+    overview: parseOverview(raw.overview),
+    timeSeries: parseTimeSeries(raw.timeSeries),
+    hourlyToday: parseHourly(raw.hourlyToday),
+    topPages: parseTopPages(raw.topPages),
+    landingPages: parseLandingPages(raw.landingPages),
+    devices: parseDevices(raw.devices),
+    browsers: parseBrowsers(raw.browsers),
+    operatingSystems: parseOS(raw.operatingSystems),
+    countries: parseCountries(raw.countries),
+    cities: parseCities(raw.cities),
+    trafficSources: parseSources(raw.trafficSources),
+    channels: parseChannels(raw.channels),
+    newVsReturning: parseNewVsReturning(raw.newVsReturning),
+    topEvents: parseEvents(raw.topEvents),
+    referrers: parseReferrers(raw.referrers)
+  };
+}
+
+// src/components/dashboard.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var DATE_RANGES = [
+  { label: "7d", value: "7" },
+  { label: "14d", value: "14" },
+  { label: "30d", value: "30" },
+  { label: "90d", value: "90" }
+];
+var PALETTE = ["#4f8ef7", "#3ecf8e", "#f6b93b", "#e55353", "#a55eea", "#26c0d3", "#fd9644", "#20bf6b"];
+var DEVICE_COLORS = {
+  desktop: "#4f8ef7",
+  mobile: "#3ecf8e",
+  tablet: "#f6b93b"
+};
+var CHANNEL_COLORS = {
+  "Organic Search": "#3ecf8e",
+  "Direct": "#4f8ef7",
+  "Referral": "#f6b93b",
+  "Organic Social": "#e55353",
+  "Email": "#a55eea",
+  "Paid Search": "#26c0d3",
+  "Display": "#fd9644"
+};
+var METRIC_INFO = {
+  "Total Users": "Unique users who visited your site in the selected period.",
+  "New Users": "First-time visitors \u2014 users who have never visited before.",
+  "Sessions": "Total browsing sessions. One user can have multiple sessions.",
+  "Page Views": "Total pages viewed, including repeated views of the same page.",
+  "Avg. Duration": "Average time a user spends in a single session.",
+  "Bounce Rate": "Percentage of sessions where the user left without any interaction.",
+  "Engaged Sessions": "Sessions lasting 10+ seconds, or with a conversion, or 2+ page views.",
+  "Engagement Rate": "Percentage of total sessions that were engaged sessions.",
+  "Pages / Session": "Average number of pages a user views per session.",
+  "Events / Session": "Average number of events (clicks, scrolls, etc.) fired per session."
+};
+var SECTION_INFO = {
+  "Users & Sessions Over Time": "Daily breakdown of users, sessions and page views over the selected date range.",
+  "Traffic by Hour \u2014 Today": "How traffic is distributed across each hour of today.",
+  "Channel Grouping": "Which marketing channels are driving sessions (Organic, Direct, Social, etc.).",
+  "Top Pages": "Most visited pages ranked by page view count.",
+  "Top Landing Pages": "First pages users arrive on, ranked by session count. High bounce rate may indicate poor landing experience.",
+  "Devices": "Share of sessions split by device type (desktop, mobile, tablet).",
+  "New vs Returning": "Ratio of first-time visitors to users who have visited before.",
+  "Browsers": "Which web browsers your visitors are using.",
+  "Operating Systems": "Which operating systems your visitors are running.",
+  "Top Events": "All events fired on your site (clicks, scrolls, form submits, custom events).",
+  "Top Countries": "Countries your users are visiting from, ranked by user count.",
+  "Top Cities": "Cities your users are visiting from, ranked by user count.",
+  "Traffic Sources": "Source and medium pairs showing where your traffic originates.",
+  "Top Referrers": "Specific pages on other websites that linked to your site."
+};
+var TABS = [
+  { id: "overview", label: "Overview", icon: "\u25A6" },
+  { id: "traffic", label: "Traffic", icon: "\u2197" },
+  { id: "content", label: "Content", icon: "\u2261" },
+  { id: "audience", label: "Audience", icon: "\u25C9" },
+  { id: "geography", label: "Geography", icon: "\u2295" },
+  { id: "events", label: "Events", icon: "\u26A1" },
+  { id: "acquisition", label: "Acquisition", icon: "\u2934" }
+];
+var fNum = (n) => n >= 1e6 ? `${(n / 1e6).toFixed(1)}M` : n >= 1e3 ? `${(n / 1e3).toFixed(1)}K` : n.toLocaleString();
+var fDur = (s) => {
+  const m = Math.floor(s / 60);
+  const sec = Math.round(s % 60);
+  return m > 0 ? `${m}m ${sec}s` : `${sec}s`;
+};
+var fPct = (v) => `${(v * 100).toFixed(1)}%`;
+var fEngPct = (v) => `${(v * 100).toFixed(0)}%`;
+var GLOBAL_CSS = `
+@keyframes ga-spin   { to { transform: rotate(360deg); } }
+@keyframes ga-pulse  { 0%,100%{box-shadow:0 0 0 3px rgba(62,207,142,.3)} 50%{box-shadow:0 0 0 7px rgba(62,207,142,.08)} }
+@keyframes ga-fadein { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
+@keyframes ga-shimmer { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
+.ga-skel {
+  background:linear-gradient(90deg,#f1f5f9 25%,#e8eef4 50%,#f1f5f9 75%);
+  background-size:1200px 100%; animation:ga-shimmer 1.4s infinite linear; border-radius:4px;
+}
+.ga-tooltip-wrap { position:relative; display:inline-flex; align-items:center; }
+.ga-tooltip-wrap .ga-tip {
+  visibility:hidden; opacity:0; pointer-events:none;
+  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
+  background:#1e293b; color:#f1f5f9; font-size:12px; line-height:1.5;
+  padding:8px 12px; border-radius:7px; white-space:normal; width:220px;
+  box-shadow:0 4px 16px rgba(0,0,0,.18); z-index:9999; transition:opacity .15s;
+}
+.ga-tooltip-wrap .ga-tip::after {
+  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
+  border:5px solid transparent; border-top-color:#1e293b;
+}
+.ga-tooltip-wrap:hover .ga-tip { visibility:visible; opacity:1; }
+.ga-info-btn {
+  width:16px; height:16px; border-radius:50%; border:1.5px solid #94a3b8;
+  background:transparent; color:#94a3b8; font-size:10px; font-weight:700;
+  cursor:default; display:inline-flex; align-items:center; justify-content:center;
+  margin-left:6px; flex-shrink:0; line-height:1; padding:0;
+}
+.ga-info-btn:hover { border-color:#4f8ef7; color:#4f8ef7; }
+.ga-tab-btn { border:none; background:none; cursor:pointer; width:100%; padding:0; }
+.ga-tab-btn:focus { outline:none; }
+.ga-date-btn { border:none; cursor:pointer; }
+.ga-retry-btn { border:none; cursor:pointer; }
+`;
+function InfoIcon({ text }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ga-tooltip-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "ga-info-btn", tabIndex: -1, children: "i" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ga-tip", children: text })
+  ] });
+}
+function Skel({ w, h = 14, r = 4, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ga-skel", style: __spreadValues({ width: w != null ? w : "100%", height: h, borderRadius: r, flexShrink: 0 }, style) });
+}
+function Panel({ title, children, info, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: __spreadValues({
+    background: "#fff",
+    border: "1px solid #e2e8f0",
+    borderRadius: 10,
+    padding: "20px 22px",
+    boxSizing: "border-box"
+  }, style), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", marginBottom: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 13, fontWeight: 600, color: "#1e293b", letterSpacing: "0.01em" }, children: title }),
+      info && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InfoIcon, { text: info })
+    ] }),
+    children
+  ] });
+}
+function SectionLabel({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 11, fontWeight: 700, color: "#94a3b8", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 14 }, children });
+}
+function DataTable({ headers, rows, empty = "No data", loading, skeletonRows = 6 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: "100%", overflowX: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: 13, tableLayout: "fixed" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: headers.map((h, i) => {
+      var _a;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: {
+        padding: "6px 10px",
+        textAlign: (_a = h.align) != null ? _a : "left",
+        color: "#94a3b8",
+        fontWeight: 600,
+        fontSize: 11,
+        borderBottom: "1px solid #f1f5f9",
+        textTransform: "uppercase",
+        letterSpacing: "0.05em",
+        width: h.width,
+        whiteSpace: "nowrap"
+      }, children: h.label }, i);
+    }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: loading ? Array.from({ length: skeletonRows }).map((_, ri) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { style: { borderBottom: "1px solid #f8fafc" }, children: headers.map((_h, ci) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: { padding: "9px 10px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skel, { w: ci === 0 ? `${60 + ri * 7 % 30}%` : "70%", h: 12 }) }, ci)) }, ri)) : rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: headers.length, style: { padding: "28px", textAlign: "center", color: "#cbd5e1", fontSize: 13 }, children: empty }) }) : rows.map((row, ri) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "tr",
+      {
+        style: { borderBottom: "1px solid #f8fafc", transition: "background .1s" },
+        onMouseEnter: (e) => e.currentTarget.style.background = "#f8fafc",
+        onMouseLeave: (e) => e.currentTarget.style.background = "",
+        children: row.map((cell, ci) => {
+          var _a, _b;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: {
+            padding: "9px 10px",
+            textAlign: (_b = (_a = headers[ci]) == null ? void 0 : _a.align) != null ? _b : "left",
+            color: ci === 0 ? "#334155" : ci === 1 ? "#1e293b" : "#94a3b8",
+            fontWeight: ci === 1 ? 600 : 400,
+            verticalAlign: "middle"
+          }, children: cell }, ci);
+        })
+      },
+      ri
+    )) })
+  ] }) });
+}
+function Donut({ data, colors, info, loading }) {
+  if (loading) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "16px 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ga-skel", style: { width: 120, height: 120, borderRadius: "50%" } }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 8, marginTop: 4 }, children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ga-skel", style: { width: 8, height: 8, borderRadius: 2, flexShrink: 0 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skel, { w: `${50 + i * 12}%`, h: 11 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skel, { w: 30, h: 11, style: { marginLeft: "auto" } })
+    ] }, i)) })
+  ] });
+  if (data.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "#cbd5e1", fontSize: 13, padding: "20px 0", textAlign: "center" }, children: "No data" });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: 180 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_recharts.PieChart, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_recharts.Pie,
+        {
+          data,
+          dataKey: "value",
+          nameKey: "name",
+          cx: "50%",
+          cy: "50%",
+          innerRadius: 48,
+          outerRadius: 76,
+          paddingAngle: 2,
+          children: data.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Cell, { fill: colors[i % colors.length] }, i))
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_recharts.Tooltip,
+        {
+          formatter: (v) => fNum(Number(v)),
+          contentStyle: { background: "#fff", border: "1px solid #e2e8f0", borderRadius: 7, fontSize: 13 }
+        }
+      )
+    ] }) }) }),
+    info && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 12, color: "#94a3b8", textAlign: "center", marginBottom: 12 }, children: info }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 7 }, children: data.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: 9, height: 9, borderRadius: 2, background: colors[i % colors.length], flexShrink: 0 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { flex: 1, fontSize: 13, color: "#475569", textTransform: "capitalize" }, children: d.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { fontSize: 12, color: "#cbd5e1" }, children: [
+        d.percentage,
+        "%"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 13, fontWeight: 600, color: "#1e293b", minWidth: 40, textAlign: "right" }, children: fNum(d.value) })
+    ] }, d.name)) })
+  ] });
+}
+function MetricCard({ label, value, sub, color, info, loading }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        flex: "1 1 140px",
+        minWidth: 132,
+        background: "#fff",
+        border: "1px solid #e2e8f0",
+        borderRadius: 10,
+        padding: "16px 18px",
+        boxSizing: "border-box",
+        transition: "box-shadow .15s"
+      },
+      onMouseEnter: (e) => e.currentTarget.style.boxShadow = "0 4px 14px rgba(0,0,0,.07)",
+      onMouseLeave: (e) => e.currentTarget.style.boxShadow = "",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", marginBottom: 10 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 11, color: "#94a3b8", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.06em", flex: 1 }, children: label }),
+          info && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InfoIcon, { text: info })
+        ] }),
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skel, { w: "55%", h: 22, r: 5 }),
+          sub && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skel, { w: "40%", h: 11, style: { marginTop: 6 } })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 26, fontWeight: 700, color, lineHeight: 1, marginBottom: sub ? 4 : 0 }, children: value }),
+          sub && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 12, color: "#94a3b8", marginTop: 3 }, children: sub })
+        ] })
+      ]
+    }
+  );
+}
+function ActiveBadge({ count, loading }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 10,
+    background: "#f0fdf9",
+    border: "1px solid #a7f3d0",
+    borderRadius: 10,
+    padding: "12px 20px",
+    marginBottom: 20
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+      width: 10,
+      height: 10,
+      borderRadius: "50%",
+      background: "#10b981",
+      animation: "ga-pulse 2s infinite",
+      flexShrink: 0
+    } }),
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skel, { w: 80, h: 20, r: 5 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 22, fontWeight: 700, color: "#065f46" }, children: count.toLocaleString() }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 13, color: "#047857" }, children: "users active right now" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InfoIcon, { text: "Real-time count of users active on your site in the last 30 minutes." })
+  ] });
+}
+function PathCell({ path }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { title: path, style: {
+    display: "block",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    color: "#4f8ef7",
+    fontSize: 13
+  }, children: path });
+}
+function EmptyTab() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 300, color: "#cbd5e1", fontSize: 14 }, children: "No data to display" });
+}
+function SkeletonChart({ height }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative", height, overflow: "hidden" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skel, { w: "100%", h: height, r: 6 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      display: "flex",
+      justifyContent: "space-between",
+      padding: "0 4px 6px",
+      gap: 4,
+      pointerEvents: "none"
+    }, children: Array.from({ length: 7 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skel, { w: 32, h: 10, r: 3 }, i)) })
+  ] });
+}
+function OverviewTab({ data, loading }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { animation: "ga-fadein .25s ease", overflowX: "hidden" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActiveBadge, { count: data.activeUsers, loading }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionLabel, { children: "Key Metrics" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 24 }, children: [
+      ["Total Users", fNum(data.overview.totalUsers), "#4f8ef7"],
+      ["New Users", fNum(data.overview.newUsers), "#3ecf8e"],
+      ["Sessions", fNum(data.overview.sessions), "#f6b93b"],
+      ["Page Views", fNum(data.overview.pageViews), "#e55353"],
+      ["Avg. Duration", fDur(data.overview.avgSessionDuration), "#a55eea"],
+      ["Bounce Rate", fPct(data.overview.bounceRate), "#fd9644"]
+    ].map(([l, v, c]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MetricCard, { label: l, value: v, color: c, info: METRIC_INFO[l], loading }, l)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionLabel, { children: "Engagement" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", gap: 10, flexWrap: "wrap" }, children: [
+      ["Engaged Sessions", fNum(data.overview.engagedSessions), "#26c0d3"],
+      ["Engagement Rate", fEngPct(data.overview.engagementRate), "#3ecf8e"],
+      ["Pages / Session", data.overview.pagesPerSession.toFixed(1), "#8b5cf6"],
+      ["Events / Session", data.overview.eventsPerSession.toFixed(1), "#f59e0b"]
+    ].map(([l, v, c]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MetricCard, { label: l, value: v, color: c, info: METRIC_INFO[l], loading }, l)) })
+  ] });
+}
+function TrafficTab({ data, loading }) {
+  const channelBar = data.channels.map((c) => ({ name: c.channel, Sessions: c.sessions, Users: c.users }));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { animation: "ga-fadein .25s ease", display: "flex", flexDirection: "column", gap: 20 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Panel, { title: "Users, Sessions & Page Views", info: SECTION_INFO["Users & Sessions Over Time"], children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonChart, { height: 300 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: 300 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_recharts.AreaChart, { data: data.timeSeries, margin: { top: 4, right: 8, left: 0, bottom: 0 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: [["gU", "#4f8ef7"], ["gS", "#3ecf8e"], ["gP", "#e55353"]].map(([id, c]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "5%", stopColor: c, stopOpacity: 0.18 }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "95%", stopColor: c, stopOpacity: 0 })
+      ] }, id)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: "#f1f5f9" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.XAxis, { dataKey: "displayDate", fontSize: 11, tick: { fill: "#94a3b8" }, axisLine: false, tickLine: false }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.YAxis, { fontSize: 11, tick: { fill: "#94a3b8" }, axisLine: false, tickLine: false, width: 36 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Tooltip, { contentStyle: { background: "#fff", border: "1px solid #e2e8f0", borderRadius: 7, fontSize: 13 }, cursor: { stroke: "#f1f5f9" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Legend, { wrapperStyle: { fontSize: 13, paddingTop: 10 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Area, { type: "monotone", dataKey: "users", name: "Users", stroke: "#4f8ef7", fill: "url(#gU)", strokeWidth: 2, dot: false }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Area, { type: "monotone", dataKey: "sessions", name: "Sessions", stroke: "#3ecf8e", fill: "url(#gS)", strokeWidth: 2, dot: false }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Area, { type: "monotone", dataKey: "pageViews", name: "Pages", stroke: "#e55353", fill: "url(#gP)", strokeWidth: 2, dot: false })
+    ] }) }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Panel, { title: "Traffic by Hour \u2014 Today", info: SECTION_INFO["Traffic by Hour \u2014 Today"], children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonChart, { height: 220 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: 220 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_recharts.BarChart, { data: data.hourlyToday, margin: { top: 4, right: 8, left: 0, bottom: 0 }, barSize: 12, barGap: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: "#f1f5f9", vertical: false }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.XAxis, { dataKey: "label", fontSize: 11, tick: { fill: "#94a3b8" }, axisLine: false, tickLine: false, interval: 1 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.YAxis, { fontSize: 11, tick: { fill: "#94a3b8" }, axisLine: false, tickLine: false, width: 32 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Tooltip, { contentStyle: { background: "#fff", border: "1px solid #e2e8f0", borderRadius: 7, fontSize: 13 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Legend, { wrapperStyle: { fontSize: 13, paddingTop: 8 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "users", name: "Users", fill: "#4f8ef7", radius: [3, 3, 0, 0] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "sessions", name: "Sessions", fill: "#3ecf8e", radius: [3, 3, 0, 0] })
+    ] }) }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Panel, { title: "Channel Grouping", info: SECTION_INFO["Channel Grouping"], children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonChart, { height: 200 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: Math.max(200, data.channels.length * 46) }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_recharts.BarChart, { data: channelBar, layout: "vertical", margin: { top: 4, right: 24, left: 8, bottom: 0 }, barSize: 11, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: "#f1f5f9", horizontal: false }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.XAxis, { type: "number", fontSize: 11, tick: { fill: "#94a3b8" }, axisLine: false, tickLine: false }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.YAxis, { type: "category", dataKey: "name", fontSize: 12, tick: { fill: "#475569" }, axisLine: false, tickLine: false, width: 130 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Tooltip, { contentStyle: { background: "#fff", border: "1px solid #e2e8f0", borderRadius: 7, fontSize: 13 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Legend, { wrapperStyle: { fontSize: 13, paddingTop: 8 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "Sessions", radius: [0, 3, 3, 0], children: channelBar.map((e, i) => {
+        var _a;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Cell, { fill: (_a = CHANNEL_COLORS[e.name]) != null ? _a : PALETTE[i % PALETTE.length] }, i);
+      }) })
+    ] }) }) }) })
+  ] });
+}
+function ContentTab({ data, loading }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { animation: "ga-fadein .25s ease", display: "flex", flexDirection: "column", gap: 20 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Panel, { title: "Top Pages", info: SECTION_INFO["Top Pages"], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DataTable,
+      {
+        loading,
+        headers: [{ label: "Page Path" }, { label: "Views", align: "right", width: "72px" }, { label: "Users", align: "right", width: "62px" }],
+        rows: data.topPages.map((p) => [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PathCell, { path: p.path }, p.path), fNum(p.pageViews), fNum(p.users)])
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Panel, { title: "Top Landing Pages", info: SECTION_INFO["Top Landing Pages"], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DataTable,
+      {
+        loading,
+        headers: [{ label: "Landing Page" }, { label: "Sessions", align: "right", width: "80px" }, { label: "Bounce", align: "right", width: "68px" }],
+        rows: data.landingPages.map((p) => [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PathCell, { path: p.path }, p.path), fNum(p.sessions), fPct(p.bounceRate)])
+      }
+    ) })
+  ] });
+}
+function AudienceTab({ data, loading }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { animation: "ga-fadein .25s ease", display: "flex", flexDirection: "column", gap: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", gap: 12 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Panel, { title: "Devices", info: SECTION_INFO["Devices"], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Donut,
+      {
+        loading,
+        data: data.devices.map((d) => ({ name: d.device, value: d.sessions, percentage: d.percentage })),
+        colors: data.devices.map((d) => {
+          var _a;
+          return (_a = DEVICE_COLORS[d.device.toLowerCase()]) != null ? _a : "#4f8ef7";
+        })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Panel, { title: "New vs Returning", info: SECTION_INFO["New vs Returning"], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Donut,
+      {
+        loading,
+        data: data.newVsReturning.map((d) => ({ name: d.type, value: d.users, percentage: d.percentage })),
+        colors: ["#4f8ef7", "#3ecf8e"]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Panel, { title: "Browsers", info: SECTION_INFO["Browsers"], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Donut,
+      {
+        loading,
+        data: data.browsers.map((d) => ({ name: d.browser, value: d.sessions, percentage: d.percentage })),
+        colors: PALETTE
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Panel, { title: "Operating Systems", info: SECTION_INFO["Operating Systems"], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Donut,
+      {
+        loading,
+        data: data.operatingSystems.map((d) => ({ name: d.os, value: d.sessions, percentage: d.percentage })),
+        colors: PALETTE
+      }
+    ) })
+  ] }) });
+}
+function GeographyTab({ data, loading }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { animation: "ga-fadein .25s ease", display: "flex", flexDirection: "column", gap: 20 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Panel, { title: "Top Countries", info: SECTION_INFO["Top Countries"], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DataTable,
+      {
+        loading,
+        headers: [{ label: "Country" }, { label: "Users", align: "right", width: "70px" }, { label: "Sessions", align: "right", width: "78px" }],
+        rows: data.countries.map((c) => [c.country, fNum(c.users), fNum(c.sessions)])
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Panel, { title: "Top Cities", info: SECTION_INFO["Top Cities"], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DataTable,
+      {
+        loading,
+        headers: [{ label: "City" }, { label: "Country", width: "110px" }, { label: "Users", align: "right", width: "65px" }, { label: "Sessions", align: "right", width: "75px" }],
+        rows: data.cities.map((c) => [
+          c.city,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 12, color: "#94a3b8" }, children: c.country }, c.city),
+          fNum(c.users),
+          fNum(c.sessions)
+        ])
+      }
+    ) })
+  ] });
+}
+function EventsTab({ data, loading }) {
+  if (!loading && data.topEvents.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyTab, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { animation: "ga-fadein .25s ease" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Panel, { title: "Top Events", info: SECTION_INFO["Top Events"], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    DataTable,
+    {
+      loading,
+      headers: [{ label: "Event Name" }, { label: "Count", align: "right", width: "80px" }, { label: "Users", align: "right", width: "70px" }],
+      rows: data.topEvents.map((e) => [e.name, fNum(e.count), fNum(e.usersCount)])
+    }
+  ) }) });
+}
+function AcquisitionTab({ data, loading }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { animation: "ga-fadein .25s ease", display: "flex", flexDirection: "column", gap: 20 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Panel, { title: "Traffic Sources", info: SECTION_INFO["Traffic Sources"], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DataTable,
+      {
+        loading,
+        headers: [{ label: "Source / Medium" }, { label: "Sessions", align: "right", width: "82px" }, { label: "Users", align: "right", width: "65px" }],
+        rows: data.trafficSources.map((s) => [s.source || "(direct)", fNum(s.sessions), fNum(s.users)])
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Panel, { title: "Top Referrers", info: SECTION_INFO["Top Referrers"], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DataTable,
+      {
+        loading,
+        headers: [{ label: "Referrer" }, { label: "Sessions", align: "right", width: "82px" }, { label: "Users", align: "right", width: "65px" }],
+        rows: data.referrers.map((r) => [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { title: r.referrer, style: { display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontSize: 13 }, children: r.referrer }, r.referrer),
+          fNum(r.sessions),
+          fNum(r.users)
+        ])
+      }
+    ) })
+  ] });
+}
+function Dashboard({ apiUrl }) {
+  var _a;
+  const [data, setData] = (0, import_react.useState)(null);
+  const [loading, setLoading] = (0, import_react.useState)(true);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [dateRange, setDateRange] = (0, import_react.useState)("30");
+  const [activeTab, setActiveTab] = (0, import_react.useState)("overview");
+  const loadData = (0, import_react.useCallback)(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      setData(await fetchAnalyticsData(apiUrl, dateRange));
+    } catch (err) {
+      console.error("Failed to fetch analytics data", err);
+      setError(err instanceof Error ? err.message : "Failed to fetch analytics");
+    } finally {
+      setLoading(false);
+    }
+  }, [apiUrl, dateRange]);
+  (0, import_react.useEffect)(() => {
+    loadData();
+  }, [loadData]);
+  const H = "calc(100vh - 51px)";
+  if (loading && !data) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh", flexDirection: "column", gap: 14, background: "#f8fafc" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: 36, height: 36, border: "3px solid #e2e8f0", borderTopColor: "#4f8ef7", borderRadius: "50%", animation: "ga-spin .8s linear infinite" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "#94a3b8", fontSize: 14 }, children: "Loading analytics\u2026" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: GLOBAL_CSS })
+  ] });
+  if (error && !data) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: H, background: "#f8fafc" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: GLOBAL_CSS }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { maxWidth: 480, width: "100%", background: "#fff", border: "1px solid #e2e8f0", borderRadius: 12, padding: 32 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontWeight: 700, color: "#dc2626", marginBottom: 8, fontSize: 15 }, children: "Failed to load analytics" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 13, color: "#64748b", marginBottom: 20, lineHeight: 1.6 }, children: error }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          className: "ga-retry-btn",
+          onClick: loadData,
+          style: { padding: "9px 22px", background: "#4f8ef7", color: "#fff", borderRadius: 7, cursor: "pointer", fontSize: 13, fontWeight: 600 },
+          children: "Retry"
+        }
+      )
+    ] })
+  ] });
+  if (!data) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+    height: H,
+    background: "#f8fafc",
+    overflow: "hidden",
+    fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif',
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "stretch"
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: GLOBAL_CSS }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+      display: "flex",
+      width: "100%",
+      height: "100%",
+      overflow: "hidden",
+      boxShadow: "0 0 0 1px #e2e8f0"
+    }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+        width: 180,
+        background: "#fff",
+        borderRight: "1px solid #e2e8f0",
+        display: "flex",
+        flexDirection: "column",
+        flexShrink: 0,
+        overflow: "hidden"
+      }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "20px 16px 16px", borderBottom: "1px solid #f1f5f9" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 13, fontWeight: 700, color: "#1e293b", letterSpacing: "0.01em" }, children: "Analytics" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 11, color: "#94a3b8", marginTop: 2 }, children: "Google Analytics 4" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "12px 12px 8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 10, fontWeight: 700, color: "#cbd5e1", textTransform: "uppercase", letterSpacing: "0.07em", marginBottom: 6 }, children: "Date Range" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", gap: 4, flexWrap: "wrap" }, children: DATE_RANGES.map((r) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              className: "ga-date-btn",
+              onClick: () => setDateRange(r.value),
+              style: {
+                padding: "4px 8px",
+                fontSize: 11,
+                fontWeight: dateRange === r.value ? 700 : 400,
+                borderRadius: 5,
+                border: dateRange === r.value ? "1.5px solid #4f8ef7" : "1.5px solid #e2e8f0",
+                background: dateRange === r.value ? "#eff6ff" : "#fff",
+                color: dateRange === r.value ? "#4f8ef7" : "#64748b",
+                cursor: "pointer"
+              },
+              children: r.label
+            },
+            r.value
+          )) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("nav", { style: { flex: 1, overflow: "auto", padding: "8px 8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 10, fontWeight: 700, color: "#cbd5e1", textTransform: "uppercase", letterSpacing: "0.07em", marginBottom: 6, paddingLeft: 8 }, children: "Sections" }),
+          TABS.map((tab) => {
+            const active = activeTab === tab.id;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "button",
+              {
+                className: "ga-tab-btn",
+                onClick: () => setActiveTab(tab.id),
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 9,
+                  padding: "9px 10px",
+                  borderRadius: 7,
+                  marginBottom: 2,
+                  background: active ? "#eff6ff" : "transparent",
+                  color: active ? "#4f8ef7" : "#64748b",
+                  fontWeight: active ? 600 : 400,
+                  fontSize: 13
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 14, opacity: 0.8 }, children: tab.icon }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: tab.label }),
+                  active && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { marginLeft: "auto", width: 4, height: 4, borderRadius: "50%", background: "#4f8ef7" } })
+                ]
+              },
+              tab.id
+            );
+          })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: "12px", borderTop: "1px solid #f1f5f9" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: "ga-retry-btn",
+            onClick: loadData,
+            style: {
+              width: "100%",
+              padding: "8px",
+              background: "#f8fafc",
+              border: "1px solid #e2e8f0",
+              borderRadius: 7,
+              fontSize: 12,
+              color: loading ? "#94a3b8" : "#475569",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 6,
+              fontWeight: 500
+            },
+            children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: 12, height: 12, border: "2px solid #e2e8f0", borderTopColor: "#4f8ef7", borderRadius: "50%", animation: "ga-spin .8s linear infinite" } }),
+              "Refreshing\u2026"
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: "\u21BB Refresh" })
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1, overflow: "auto", padding: "24px 28px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 22 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { style: { margin: 0, fontSize: 18, fontWeight: 700, color: "#1e293b" }, children: (_a = TABS.find((t) => t.id === activeTab)) == null ? void 0 : _a.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 12, color: "#94a3b8", marginTop: 3 }, children: [
+              "Last ",
+              dateRange,
+              " days"
+            ] })
+          ] }),
+          error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { background: "#fffbeb", border: "1px solid #fcd34d", borderRadius: 7, padding: "8px 14px", fontSize: 12, color: "#92400e" }, children: "\u26A0 Showing cached data" })
+        ] }),
+        activeTab === "overview" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OverviewTab, { data, loading }),
+        activeTab === "traffic" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TrafficTab, { data, loading }),
+        activeTab === "content" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContentTab, { data, loading }),
+        activeTab === "audience" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AudienceTab, { data, loading }),
+        activeTab === "geography" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GeographyTab, { data, loading }),
+        activeTab === "events" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EventsTab, { data, loading }),
+        activeTab === "acquisition" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AcquisitionTab, { data, loading })
+      ] })
+    ] })
+  ] });
+}
+
+// src/google-analytics-tool.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function GoogleAnalyticsTool({ apiUrl }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dashboard, { apiUrl: apiUrl || "/api/analytics" });
+}
+
+// src/plugin.ts
+var googleAnalyticsPlugin = (config = {}) => (0, import_sanity.definePlugin)({
+  name: "ga-dashboard",
+  tools: (prev) => [
+    ...prev,
+    {
+      name: "ga-dashboard",
+      title: "Google Analytics",
+      icon: import_icons.BarChartIcon,
+      component: () => GoogleAnalyticsTool(config)
+    }
+  ]
+})();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  googleAnalyticsPlugin
+});
+//# sourceMappingURL=index.js.map