@strapi-community/plugin-better-auth-dashboard 1.0.0-beta.1 → 1.0.0

package/dist/admin/index-DQdn5s8q.js

@@ -0,0 +1,1184 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const designSystem = require("@strapi/design-system");
+const admin = require("@strapi/strapi/admin");
+const react = require("react");
+const reactIntl = require("react-intl");
+const reactQuery = require("react-query");
+const styled = require("styled-components");
+const index = require("./index-BCBu-0nr.js");
+const Avatar = require("./Avatar-CdT7eBCh.js");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const SegmentedControlContext = react.createContext(null);
+const Root = ({ value, onChange, label, children }) => /* @__PURE__ */ jsxRuntime.jsx(SegmentedControlContext.Provider, { value: { value, onChange }, children: /* @__PURE__ */ jsxRuntime.jsx(
+  designSystem.Flex,
+  {
+    role: "group",
+    "aria-label": label,
+    gap: 1,
+    padding: 1,
+    background: "neutral100",
+    borderColor: "neutral200",
+    borderStyle: "solid",
+    borderWidth: "1px",
+    hasRadius: true,
+    children
+  }
+) });
+const Item = ({ value, disabled, children }) => {
+  const ctx = react.useContext(SegmentedControlContext);
+  if (!ctx) throw new Error("SegmentedControl.Item must be used inside Root");
+  const active = ctx.value === value;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Button,
+    {
+      size: "S",
+      variant: active ? "tertiary" : "ghost",
+      "aria-pressed": active,
+      disabled,
+      onClick: () => !active && ctx.onChange(value),
+      children
+    }
+  );
+};
+const SegmentedControl = { Root, Item };
+const CARD = {
+  background: "neutral0",
+  hasRadius: true,
+  shadow: "tableShadow"
+};
+const TwoPanel = styled__default.default.div`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 30rem;
+  gap: ${({ theme }) => theme.spaces[4]};
+  align-items: stretch;
+  @media (max-width: 900px) { grid-template-columns: 1fr; }
+`;
+const FeedSlot = styled__default.default.div`
+  position: relative;
+
+  & > * {
+    position: absolute;
+    inset: 0;
+  }
+
+  @media (max-width: 900px) {
+    min-height: 32rem;
+  }
+`;
+function SectionDivider({ label }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}) })
+  ] });
+}
+function Empty({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral500", children }) });
+}
+function Dot({ color }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Box,
+    {
+      tag: "span",
+      background: color,
+      width: "0.8rem",
+      height: "0.8rem",
+      display: "inline-block",
+      shrink: 0,
+      style: { borderRadius: "50%" },
+      "aria-hidden": true
+    }
+  );
+}
+function TrendBadge({ pct }) {
+  const isPos = pct >= 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Badge, { size: "S", variant: isPos ? "success" : "danger", children: [
+    isPos ? "↑" : "↓",
+    " ",
+    Math.abs(pct).toFixed(1),
+    "%"
+  ] });
+}
+function useCountUp(target, duration = 850) {
+  const [count, setCount] = react.useState(0);
+  const prevRef = react.useRef(0);
+  react.useEffect(() => {
+    let raf;
+    let start = 0;
+    const from = prevRef.current;
+    const diff = target - from;
+    const step = (ts) => {
+      if (!start) start = ts;
+      const progress = Math.min((ts - start) / duration, 1);
+      const eased = 1 - (1 - progress) ** 3;
+      setCount(Math.round(from + eased * diff));
+      if (progress < 1) raf = requestAnimationFrame(step);
+      else prevRef.current = target;
+    };
+    raf = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(raf);
+  }, [target, duration]);
+  return count;
+}
+function Sparkline({
+  data,
+  color,
+  id
+}) {
+  const W = 300;
+  const H = 44;
+  if (data.length < 2) return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "100%", height: H });
+  const min = Math.min(...data);
+  const max = Math.max(...data, min + 1);
+  const pts = data.map((v, i) => ({
+    x: i / (data.length - 1) * W,
+    y: H - 3 - (v - min) / (max - min) * (H - 8)
+  }));
+  const line = pts.reduce((a, p, i) => {
+    if (i === 0) return `M ${p.x} ${p.y}`;
+    const pr = pts[i - 1];
+    const cx = (pr.x + p.x) / 2;
+    return `${a} C ${cx} ${pr.y} ${cx} ${p.y} ${p.x} ${p.y}`;
+  }, "");
+  const area = `${line} L ${pts.at(-1).x} ${H} L 0 ${H} Z`;
+  const gid = `spk-${id}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "100%",
+      height: H,
+      viewBox: `0 0 ${W} ${H}`,
+      preserveAspectRatio: "none",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: gid, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.32" }),
+          /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: area, fill: `url(#${gid})` }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: line,
+            stroke: color,
+            strokeWidth: "1.6",
+            fill: "none",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+const ALL_SERIES = [
+  {
+    key: "totalUsers",
+    color: "primary600",
+    label: {
+      id: index.getTranslation("overview.growth.series.total"),
+      defaultMessage: "Total"
+    }
+  },
+  {
+    key: "newUsers",
+    color: "success500",
+    label: {
+      id: index.getTranslation("overview.growth.series.new"),
+      defaultMessage: "New"
+    }
+  },
+  {
+    key: "activeUsers",
+    color: "warning500",
+    label: {
+      id: index.getTranslation("overview.growth.series.active"),
+      defaultMessage: "Active"
+    }
+  }
+];
+function GrowthChart({
+  data,
+  hovered,
+  onHover,
+  activeSeries
+}) {
+  const { colors } = styled.useTheme();
+  const { formatMessage } = reactIntl.useIntl();
+  const W = 600;
+  const H = 200;
+  const PL = 40;
+  const PR = 12;
+  const PT = 12;
+  const PB = 28;
+  const CW = W - PL - PR;
+  const CH = H - PT - PB;
+  if (!data.length) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Empty, { children: formatMessage({
+      id: index.getTranslation("overview.growth.empty"),
+      defaultMessage: "No growth data for this period"
+    }) });
+  }
+  const active = ALL_SERIES.filter((s) => activeSeries.has(s.key));
+  const allVals = data.flatMap((d) => active.map((s) => d[s.key]));
+  const maxV = Math.max(...allVals, 10);
+  const yMax = Math.ceil(maxV * 1.15);
+  const xp = (i) => PL + i / Math.max(data.length - 1, 1) * CW;
+  const yp = (v) => PT + (1 - v / yMax) * CH;
+  const smooth = (vals) => {
+    const pts = vals.map((v, i) => ({ x: xp(i), y: yp(v) }));
+    const path = pts.reduce((a, p, i) => {
+      if (i === 0) return `M ${p.x} ${p.y}`;
+      const pr = pts[i - 1];
+      const cx = (pr.x + p.x) / 2;
+      return `${a} C ${cx} ${pr.y} ${cx} ${p.y} ${p.x} ${p.y}`;
+    }, "");
+    const area = `${path} L ${pts.at(-1).x} ${PT + CH} L ${pts[0].x} ${PT + CH} Z`;
+    return { pts, path, area };
+  };
+  const lines = active.map((s) => ({
+    ...s,
+    hex: colors[s.color],
+    ...smooth(data.map((d) => d[s.key]))
+  }));
+  const yTicks = Array.from({ length: 5 }, (_, i) => {
+    const v = yMax * (4 - i) / 4;
+    return { v: Math.round(v), y: yp(v) };
+  });
+  const step = Math.max(1, Math.ceil(data.length / 8));
+  const segW = CW / Math.max(data.length - 1, 1);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "100%",
+      viewBox: `0 0 ${W} ${H}`,
+      preserveAspectRatio: "xMidYMid meet",
+      style: { display: "block" },
+      "aria-label": formatMessage({
+        id: index.getTranslation("overview.growth.chartLabel"),
+        defaultMessage: "User growth chart"
+      }),
+      role: "img",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("defs", { children: lines.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "linearGradient",
+          {
+            id: `ag-${s.key}`,
+            x1: "0",
+            y1: "0",
+            x2: "0",
+            y2: "1",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: s.hex, stopOpacity: "0.18" }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: s.hex, stopOpacity: "0" })
+            ]
+          },
+          s.key
+        )) }),
+        yTicks.map((t) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1: PL,
+              y1: t.y,
+              x2: W - PR,
+              y2: t.y,
+              stroke: colors.neutral150,
+              strokeWidth: "1"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              x: PL - 6,
+              y: t.y + 4,
+              textAnchor: "end",
+              fill: colors.neutral500,
+              fontSize: "9",
+              children: t.v >= 1e3 ? `${(t.v / 1e3).toFixed(1)}k` : t.v
+            }
+          )
+        ] }, t.v)),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: PL,
+            y1: PT + CH,
+            x2: W - PR,
+            y2: PT + CH,
+            stroke: colors.neutral150,
+            strokeWidth: "1"
+          }
+        ),
+        lines.map((s) => /* @__PURE__ */ jsxRuntime.jsx("path", { d: s.area, fill: `url(#ag-${s.key})` }, `area-${s.key}`)),
+        lines.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: s.path,
+            stroke: s.hex,
+            strokeWidth: "2",
+            fill: "none",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          },
+          `line-${s.key}`
+        )),
+        data.map((d, i) => {
+          if (i % step !== 0 && i !== data.length - 1) return null;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              x: xp(i),
+              y: H - 6,
+              textAnchor: "middle",
+              fill: colors.neutral500,
+              fontSize: "9",
+              children: d.label
+            },
+            i
+          );
+        }),
+        data.map((d, i) => {
+          const isHov = hovered === i;
+          return (
+            // biome-ignore lint/a11y/noStaticElementInteractions: SVG chart hover
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "g",
+              {
+                onMouseEnter: () => onHover(i),
+                onMouseLeave: () => onHover(null),
+                style: { cursor: "crosshair" },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "rect",
+                    {
+                      x: xp(i) - segW / 2,
+                      y: PT,
+                      width: segW,
+                      height: CH,
+                      fill: "transparent"
+                    }
+                  ),
+                  isHov && /* @__PURE__ */ jsxRuntime.jsx(
+                    "line",
+                    {
+                      x1: xp(i),
+                      y1: PT,
+                      x2: xp(i),
+                      y2: PT + CH,
+                      stroke: colors.neutral300,
+                      strokeWidth: "1",
+                      strokeDasharray: "3 3"
+                    }
+                  ),
+                  lines.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+                    "circle",
+                    {
+                      cx: xp(i),
+                      cy: yp(d[s.key]),
+                      r: isHov ? 4 : 2.5,
+                      fill: s.hex,
+                      stroke: colors.neutral0,
+                      strokeWidth: isHov ? 2 : 1,
+                      opacity: isHov ? 1 : 0.5
+                    },
+                    s.key
+                  ))
+                ]
+              },
+              i
+            )
+          );
+        })
+      ]
+    }
+  );
+}
+function ProgressRing({
+  value,
+  max,
+  color,
+  size = 56
+}) {
+  const { colors } = styled.useTheme();
+  const r = (size - 9) / 2;
+  const circ = 2 * Math.PI * r;
+  const pct = Math.min(value / Math.max(max, 1), 1);
+  const offset = circ * (1 - pct);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      style: { flexShrink: 0 },
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            cx: size / 2,
+            cy: size / 2,
+            r,
+            fill: "none",
+            stroke: colors.neutral150,
+            strokeWidth: "7"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            cx: size / 2,
+            cy: size / 2,
+            r,
+            fill: "none",
+            stroke: colors[color],
+            strokeWidth: "7",
+            strokeDasharray: `${circ} ${circ}`,
+            strokeDashoffset: offset,
+            strokeLinecap: "round",
+            transform: `rotate(-90 ${size / 2} ${size / 2})`,
+            style: {
+              transition: "stroke-dashoffset 0.9s cubic-bezier(0.4,0,0.2,1)"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function relTime(date, formatMessage) {
+  const diff = Date.now() - new Date(date).getTime();
+  const mins = Math.floor(diff / 6e4);
+  if (mins < 1)
+    return formatMessage({
+      id: index.getTranslation("overview.relTime.justNow"),
+      defaultMessage: "just now"
+    });
+  if (mins < 60)
+    return formatMessage(
+      {
+        id: index.getTranslation("overview.relTime.minutes"),
+        defaultMessage: "{count}m"
+      },
+      { count: mins }
+    );
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24)
+    return formatMessage(
+      {
+        id: index.getTranslation("overview.relTime.hours"),
+        defaultMessage: "{count}h"
+      },
+      { count: hrs }
+    );
+  return formatMessage(
+    {
+      id: index.getTranslation("overview.relTime.days"),
+      defaultMessage: "{count}d"
+    },
+    { count: Math.floor(hrs / 24) }
+  );
+}
+function rateColor(r) {
+  return r >= 70 ? "success500" : r >= 40 ? "warning500" : "danger500";
+}
+function StatItem({
+  id,
+  label,
+  value,
+  pct,
+  sparkline,
+  color
+}) {
+  const { colors } = styled.useTheme();
+  const animated = useCountUp(value);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    designSystem.Flex,
+    {
+      ...CARD,
+      direction: "column",
+      alignItems: "stretch",
+      overflow: "hidden",
+      height: "100%",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { height: "0.2rem", background: color }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          designSystem.Flex,
+          {
+            direction: "column",
+            alignItems: "flex-start",
+            gap: 2,
+            paddingTop: 4,
+            paddingLeft: 5,
+            paddingRight: 5,
+            paddingBottom: sparkline && sparkline.length > 1 ? 2 : 5,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: label }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", tag: "p", textColor: "neutral800", children: animated.toLocaleString() }),
+              pct !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(TrendBadge, { pct })
+            ]
+          }
+        ),
+        sparkline && sparkline.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginTop: "auto", height: "4.4rem", children: /* @__PURE__ */ jsxRuntime.jsx(Sparkline, { data: sparkline, color: colors[color], id }) })
+      ]
+    }
+  );
+}
+function OverviewPage() {
+  const { get } = admin.useFetchClient();
+  const { formatMessage } = reactIntl.useIntl();
+  const failedMessage = formatMessage({
+    id: index.getTranslation("overview.common.failed"),
+    defaultMessage: "Failed"
+  });
+  const recentSignUpsMessage = {
+    id: index.getTranslation("overview.feed.recentSignUps"),
+    defaultMessage: "Recent Sign-ups"
+  };
+  const recentlyActiveMessage = {
+    id: index.getTranslation("overview.feed.recentlyActive"),
+    defaultMessage: "Recently Active"
+  };
+  const loadingMessage = formatMessage({
+    id: index.getTranslation("overview.common.loading"),
+    defaultMessage: "Loading…"
+  });
+  const [period, setPeriod] = react.useState(
+    "weekly"
+  );
+  const [feedMode, setFeedMode] = react.useState("signups");
+  const [hovIdx, setHovIdx] = react.useState(null);
+  const [rtnHov, setRtnHov] = react.useState(null);
+  const [activeSeries, setActiveSeries] = react.useState(
+    () => /* @__PURE__ */ new Set(["totalUsers", "newUsers", "activeUsers"])
+  );
+  const toggleSeries = (key) => {
+    setActiveSeries((prev) => {
+      const next = new Set(prev);
+      if (next.has(key) && next.size > 1) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+  const statsQuery = reactQuery.useQuery({
+    queryKey: ["dash-user-stats"],
+    queryFn: async () => {
+      const r = await index.client.dash.userStats();
+      if (r.error) throw new Error(r.error.message ?? failedMessage);
+      return r.data;
+    }
+  });
+  const graphQuery = reactQuery.useQuery({
+    queryKey: ["dash-user-graph", period],
+    queryFn: async () => {
+      const r = await index.client.dash.userGraphData({ query: { period } });
+      if (r.error) throw new Error(r.error.message ?? failedMessage);
+      return r.data;
+    }
+  });
+  const retentionQuery = reactQuery.useQuery({
+    queryKey: ["dash-user-retention", period],
+    queryFn: async () => {
+      const r = await index.client.dash.userRetentionData({ query: { period } });
+      if (r.error) throw new Error(r.error.message ?? failedMessage);
+      return r.data;
+    }
+  });
+  const usersQuery = reactQuery.useQuery({
+    queryKey: ["dash-recent-users"],
+    queryFn: async () => {
+      const r = await index.client.dash.listUsers({
+        query: { limit: 12, offset: 0, sortBy: "createdAt", sortOrder: "desc" }
+      });
+      if (r.error) throw new Error(r.error.message ?? failedMessage);
+      return r.data;
+    }
+  });
+  const sessionsQuery = reactQuery.useQuery({
+    queryKey: ["dash-recent-sessions"],
+    queryFn: async () => {
+      const { data } = await get(
+        "/better-auth-dashboard/db?uid=plugin::better-auth.session&pagination[pageSize]=12&sort[0]=updatedAt:desc"
+      );
+      return data.results ?? [];
+    },
+    refetchInterval: 3e4
+  });
+  const orgsQuery = reactQuery.useQuery({
+    queryKey: ["dash-orgs-count"],
+    queryFn: async () => {
+      const r = await index.client.dash.listOrganizations({
+        query: { page: 1, limit: 1 }
+      });
+      if (r.error) throw new Error(r.error.message ?? failedMessage);
+      return r.data;
+    }
+  });
+  const sessionsRaw = sessionsQuery.data ?? [];
+  const activeUserIds = [];
+  const lastActiveByUserId = /* @__PURE__ */ new Map();
+  for (const s of sessionsRaw) {
+    const uid = String(s.userId);
+    if (!lastActiveByUserId.has(uid)) {
+      lastActiveByUserId.set(uid, s.updatedAt ?? s.createdAt);
+      activeUserIds.push(uid);
+    }
+  }
+  const activeUsersQuery = reactQuery.useQuery({
+    queryKey: ["dash-active-users", activeUserIds],
+    queryFn: async () => {
+      if (activeUserIds.length === 0) return [];
+      const params = new URLSearchParams({ uid: "plugin::better-auth.user" });
+      for (let i = 0; i < activeUserIds.length; i++) {
+        params.set(`filters[id][$in][${i}]`, activeUserIds[i]);
+      }
+      params.set("pagination[pageSize]", "12");
+      const { data } = await get(
+        `/better-auth-dashboard/db?${params}`
+      );
+      return data.results ?? [];
+    },
+    enabled: feedMode === "active" && activeUserIds.length > 0
+  });
+  if (statsQuery.isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", alignItems: "center", padding: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: loadingMessage }) });
+  }
+  const stats = statsQuery.data;
+  if (!stats) return null;
+  const graphData = graphQuery.data?.data ?? [];
+  const rtnData = retentionQuery.data?.data ?? [];
+  const users = usersQuery.data?.users ?? [];
+  const orgCount = orgsQuery.data?.total ?? 0;
+  const activeUserMap = /* @__PURE__ */ new Map();
+  for (const u of activeUsersQuery.data ?? []) {
+    activeUserMap.set(String(u.id), u);
+  }
+  const sortedActiveUsers = activeUserIds.map((uid) => activeUserMap.get(uid)).filter((u) => u !== void 0);
+  const totalSpark = graphData.map((d) => d.totalUsers);
+  const newSpark = graphData.map((d) => d.newUsers);
+  const hovRow = hovIdx !== null ? graphData[hovIdx] : null;
+  const rtnHovRow = rtnHov !== null ? rtnData[rtnHov] : null;
+  const activeMax = Math.max(
+    stats.activeUsers.daily.active ?? 0,
+    stats.activeUsers.weekly.active ?? 0,
+    stats.activeUsers.monthly.active ?? 0,
+    1
+  );
+  const renderFeedItem = (key, name, email, image, when) => /* @__PURE__ */ jsxRuntime.jsxs(
+    designSystem.Box,
+    {
+      paddingTop: 2,
+      paddingBottom: 2,
+      paddingLeft: 4,
+      paddingRight: 4,
+      borderColor: "neutral150",
+      borderStyle: "solid",
+      borderWidth: "0 0 1px 0",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", gap: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, minWidth: 0, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, { name, src: image, size: 20 }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Typography,
+              {
+                variant: "omega",
+                fontWeight: "semiBold",
+                textColor: "neutral800",
+                ellipsis: true,
+                title: name,
+                children: name
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", shrink: 0, children: relTime(when, formatMessage) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Typography,
+          {
+            variant: "pi",
+            textColor: "neutral600",
+            ellipsis: true,
+            tag: "div",
+            title: email,
+            children: email
+          }
+        )
+      ]
+    },
+    key
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Main, { "data-testid": "overview-page", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      admin.Layouts.Header,
+      {
+        title: formatMessage({
+          id: index.getTranslation("overview.header.title"),
+          defaultMessage: "Overview"
+        }),
+        subtitle: (/* @__PURE__ */ new Date()).toLocaleDateString(void 0, {
+          weekday: "long",
+          year: "numeric",
+          month: "long",
+          day: "numeric"
+        }),
+        primaryAction: /* @__PURE__ */ jsxRuntime.jsxs(
+          SegmentedControl.Root,
+          {
+            label: formatMessage({
+              id: index.getTranslation("overview.period.label"),
+              defaultMessage: "Period"
+            }),
+            value: period,
+            onChange: (v) => setPeriod(v),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SegmentedControl.Item, { value: "daily", children: formatMessage({
+                id: index.getTranslation("overview.period.daily"),
+                defaultMessage: "Daily"
+              }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(SegmentedControl.Item, { value: "weekly", children: formatMessage({
+                id: index.getTranslation("overview.period.weekly"),
+                defaultMessage: "Weekly"
+              }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(SegmentedControl.Item, { value: "monthly", children: formatMessage({
+                id: index.getTranslation("overview.period.monthly"),
+                defaultMessage: "Monthly"
+              }) })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(admin.Layouts.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Flex,
+      {
+        direction: "column",
+        alignItems: "stretch",
+        gap: 6,
+        paddingBottom: 10,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SectionDivider,
+            {
+              label: formatMessage({
+                id: index.getTranslation("overview.sections.metrics"),
+                defaultMessage: "Metrics"
+              })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            designSystem.Grid.Root,
+            {
+              gap: 4,
+              style: {
+                gridTemplateColumns: "repeat(auto-fit, minmax(18rem, 1fr))"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  StatItem,
+                  {
+                    id: "total",
+                    label: formatMessage({
+                      id: index.getTranslation("overview.stats.totalUsers"),
+                      defaultMessage: "Total Users"
+                    }),
+                    value: stats.total ?? 0,
+                    sparkline: totalSpark,
+                    color: "primary600"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  StatItem,
+                  {
+                    id: "d-sig",
+                    label: formatMessage({
+                      id: index.getTranslation("overview.stats.dailySignUps"),
+                      defaultMessage: "Daily Sign-ups"
+                    }),
+                    value: stats.daily.signUps ?? 0,
+                    pct: stats.daily.percentage ?? void 0,
+                    sparkline: newSpark,
+                    color: "success500"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  StatItem,
+                  {
+                    id: "w-sig",
+                    label: formatMessage({
+                      id: index.getTranslation("overview.stats.weeklySignUps"),
+                      defaultMessage: "Weekly Sign-ups"
+                    }),
+                    value: stats.weekly.signUps ?? 0,
+                    pct: stats.weekly.percentage ?? void 0,
+                    sparkline: newSpark,
+                    color: "success500"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  StatItem,
+                  {
+                    id: "m-sig",
+                    label: formatMessage({
+                      id: index.getTranslation("overview.stats.monthlySignUps"),
+                      defaultMessage: "Monthly Sign-ups"
+                    }),
+                    value: stats.monthly.signUps ?? 0,
+                    pct: stats.monthly.percentage ?? void 0,
+                    sparkline: newSpark,
+                    color: "success500"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  StatItem,
+                  {
+                    id: "orgs",
+                    label: formatMessage({
+                      id: index.getTranslation("overview.stats.organizations"),
+                      defaultMessage: "Organizations"
+                    }),
+                    value: orgCount,
+                    color: "alternative600"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SectionDivider,
+            {
+              label: formatMessage({
+                id: index.getTranslation("overview.sections.growth"),
+                defaultMessage: "Growth"
+              })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(TwoPanel, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              designSystem.Flex,
+              {
+                ...CARD,
+                direction: "column",
+                alignItems: "stretch",
+                gap: 3,
+                padding: 5,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", gap: 3, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", tag: "h2", children: formatMessage({
+                      id: index.getTranslation("overview.growth.title"),
+                      defaultMessage: "User Growth"
+                    }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, children: ALL_SERIES.map((s) => {
+                      const on = activeSeries.has(s.key);
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        designSystem.Button,
+                        {
+                          size: "S",
+                          variant: on ? "secondary" : "tertiary",
+                          "aria-pressed": on,
+                          startIcon: /* @__PURE__ */ jsxRuntime.jsx(Dot, { color: on ? s.color : "neutral300" }),
+                          onClick: () => toggleSeries(s.key),
+                          children: formatMessage(s.label)
+                        },
+                        s.key
+                      );
+                    }) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", tag: "p", children: hovRow ? formatMessage(
+                    {
+                      id: index.getTranslation("overview.growth.hoverDetails"),
+                      defaultMessage: "{label}  ·  {total} total  ·  +{new} new  ·  {active} active"
+                    },
+                    {
+                      label: hovRow.label,
+                      total: hovRow.totalUsers.toLocaleString(),
+                      new: hovRow.newUsers.toLocaleString(),
+                      active: hovRow.activeUsers.toLocaleString()
+                    }
+                  ) : formatMessage({
+                    id: index.getTranslation("overview.growth.hoverHint"),
+                    defaultMessage: "Hover the chart to inspect a data point"
+                  }) }),
+                  graphQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.Flex,
+                    {
+                      justifyContent: "center",
+                      alignItems: "center",
+                      minHeight: "17rem",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: loadingMessage })
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    GrowthChart,
+                    {
+                      data: graphData,
+                      hovered: hovIdx,
+                      onHover: setHovIdx,
+                      activeSeries
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(FeedSlot, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+              designSystem.Flex,
+              {
+                ...CARD,
+                direction: "column",
+                alignItems: "stretch",
+                overflow: "hidden",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    designSystem.Flex,
+                    {
+                      justifyContent: "space-between",
+                      gap: 2,
+                      padding: 4,
+                      borderColor: "neutral150",
+                      borderStyle: "solid",
+                      borderWidth: "0 0 1px 0",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: feedMode === "signups" ? formatMessage(recentSignUpsMessage) : formatMessage(recentlyActiveMessage) }),
+                        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "15rem", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                          designSystem.SingleSelect,
+                          {
+                            size: "S",
+                            "aria-label": formatMessage({
+                              id: index.getTranslation("overview.feed.label"),
+                              defaultMessage: "Feed"
+                            }),
+                            value: feedMode,
+                            onChange: (v) => setFeedMode(v),
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "signups", children: formatMessage(recentSignUpsMessage) }),
+                              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "active", children: formatMessage(recentlyActiveMessage) })
+                            ]
+                          }
+                        ) })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { flex: 1, overflow: "auto", minHeight: 0, children: feedMode === "signups" ? usersQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { small: true, children: loadingMessage }) }) : users.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Empty, { children: formatMessage({
+                    id: index.getTranslation("overview.feed.noUsers"),
+                    defaultMessage: "No users yet"
+                  }) }) : users.map(
+                    (u) => renderFeedItem(
+                      u.id,
+                      u.name,
+                      u.email,
+                      u.image,
+                      u.createdAt
+                    )
+                  ) : activeUsersQuery.isLoading || sessionsQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { small: true, children: loadingMessage }) }) : sortedActiveUsers.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Empty, { children: formatMessage({
+                    id: index.getTranslation("overview.feed.noActivity"),
+                    defaultMessage: "No recent activity"
+                  }) }) : sortedActiveUsers.map(
+                    (u) => renderFeedItem(
+                      u.documentId,
+                      u.name,
+                      u.email,
+                      u.image,
+                      lastActiveByUserId.get(String(u.id)) ?? u.createdAt
+                    )
+                  ) })
+                ]
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SectionDivider,
+            {
+              label: formatMessage({
+                id: index.getTranslation("overview.sections.retentionActivity"),
+                defaultMessage: "Retention & Activity"
+              })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(TwoPanel, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              designSystem.Flex,
+              {
+                ...CARD,
+                direction: "column",
+                alignItems: "stretch",
+                gap: 3,
+                padding: 5,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", gap: 3, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", tag: "h2", children: formatMessage({
+                      id: index.getTranslation("overview.retention.title"),
+                      defaultMessage: "Cohort Retention"
+                    }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 3, children: [
+                      { color: "success500", label: "≥70%" },
+                      { color: "warning500", label: "40–70%" },
+                      { color: "danger500", label: "<40%" }
+                    ].map(({ color, label }) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 1, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(Dot, { color }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: label })
+                    ] }, color)) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", tag: "p", children: rtnHovRow ? formatMessage(
+                    {
+                      id: index.getTranslation("overview.retention.hoverDetails"),
+                      defaultMessage: "Cohort {label} · {cohortSize} users · active {activeStart} – {activeEnd}"
+                    },
+                    {
+                      label: rtnHovRow.label,
+                      cohortSize: rtnHovRow.cohortSize.toLocaleString(),
+                      activeStart: rtnHovRow.activeStart,
+                      activeEnd: rtnHovRow.activeEnd
+                    }
+                  ) : formatMessage({
+                    id: index.getTranslation("overview.retention.hoverHint"),
+                    defaultMessage: "Hover a row to see cohort details"
+                  }) }),
+                  retentionQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.Flex,
+                    {
+                      justifyContent: "center",
+                      alignItems: "center",
+                      minHeight: "8rem",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: loadingMessage })
+                    }
+                  ) : rtnData.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Empty, { children: formatMessage({
+                    id: index.getTranslation("overview.retention.empty"),
+                    defaultMessage: "No retention data for this period"
+                  }) }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: rtnData.map((row, i) => {
+                    const color = rateColor(row.retentionRate);
+                    return /* @__PURE__ */ jsxRuntime.jsxs(
+                      designSystem.Flex,
+                      {
+                        gap: 3,
+                        padding: 1,
+                        hasRadius: true,
+                        background: rtnHov === i ? "neutral100" : void 0,
+                        onMouseEnter: () => setRtnHov(i),
+                        onMouseLeave: () => setRtnHov(null),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            designSystem.Typography,
+                            {
+                              variant: "pi",
+                              textColor: "neutral600",
+                              textAlign: "right",
+                              minWidth: "8rem",
+                              children: row.label
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            designSystem.Typography,
+                            {
+                              variant: "pi",
+                              textColor: "neutral500",
+                              textAlign: "right",
+                              minWidth: "5.2rem",
+                              children: row.cohortSize.toLocaleString()
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            designSystem.Box,
+                            {
+                              flex: 1,
+                              height: "1rem",
+                              background: "neutral150",
+                              hasRadius: true,
+                              overflow: "hidden",
+                              children: /* @__PURE__ */ jsxRuntime.jsx(
+                                designSystem.Box,
+                                {
+                                  height: "100%",
+                                  background: color,
+                                  hasRadius: true,
+                                  style: {
+                                    width: `${Math.max(row.retentionRate, 0.5)}%`,
+                                    transition: "width 0.55s ease"
+                                  }
+                                }
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsxs(
+                            designSystem.Typography,
+                            {
+                              variant: "pi",
+                              fontWeight: "bold",
+                              textColor: color,
+                              textAlign: "right",
+                              minWidth: "3.8rem",
+                              children: [
+                                row.retentionRate.toFixed(1),
+                                "%"
+                              ]
+                            }
+                          )
+                        ]
+                      },
+                      row.n
+                    );
+                  }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+              {
+                label: formatMessage({
+                  id: index.getTranslation("overview.activeUsers.daily"),
+                  defaultMessage: "Daily Active"
+                }),
+                value: stats.activeUsers.daily.active,
+                pct: stats.activeUsers.daily.percentage,
+                color: "warning500"
+              },
+              {
+                label: formatMessage({
+                  id: index.getTranslation("overview.activeUsers.weekly"),
+                  defaultMessage: "Weekly Active"
+                }),
+                value: stats.activeUsers.weekly.active,
+                pct: stats.activeUsers.weekly.percentage,
+                color: "success500"
+              },
+              {
+                label: formatMessage({
+                  id: index.getTranslation("overview.activeUsers.monthly"),
+                  defaultMessage: "Monthly Active"
+                }),
+                value: stats.activeUsers.monthly.active,
+                pct: stats.activeUsers.monthly.percentage,
+                color: "primary600"
+              }
+            ].map(({ label, value, pct, color }) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { ...CARD, gap: 4, padding: 5, flex: 1, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ProgressRing,
+                {
+                  value: value ?? 0,
+                  max: activeMax,
+                  color,
+                  size: 56
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: label }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", tag: "p", textColor: "neutral800", children: (value ?? 0).toLocaleString() }),
+                pct != null && /* @__PURE__ */ jsxRuntime.jsx(TrendBadge, { pct })
+              ] })
+            ] }, label)) })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+}
+function ProtectedOverviewPage() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    admin.Page.Protect,
+    {
+      permissions: index.PERMISSIONS.overview.filter(
+        (p) => p.action === `plugin::${index.PLUGIN_ID}.overview.read`
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(OverviewPage, {})
+    }
+  );
+}
+exports.OverviewPage = OverviewPage;
+exports.default = ProtectedOverviewPage;