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

package/dist/admin/index-CANDPUGD.mjs

@@ -0,0 +1,1215 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Flex, Loader } from "@strapi/design-system";
+import { Page, useFetchClient } from "@strapi/strapi/admin";
+import { useState, useRef, useEffect } from "react";
+import { useQuery } from "react-query";
+import styled, { keyframes } from "styled-components";
+import { b as PERMISSIONS, P as PLUGIN_ID, c as client } from "./index-D9CiI8Yr.mjs";
+import { A as Avatar } from "./Avatar-DNczJU0i.mjs";
+const T = {
+  bg: "#f6f6f9",
+  bgCard: "#ffffff",
+  border: "#eaeaef",
+  borderHover: "rgba(73,69,255,0.35)",
+  accent: "#4945ff",
+  green: "#5cb176",
+  greenDim: "rgba(92,177,118,0.12)",
+  amber: "#d9822f",
+  red: "#d02b20",
+  redDim: "rgba(208,43,32,0.1)",
+  purple: "#8460b8",
+  textPrimary: "#32324d",
+  textSecondary: "#666687",
+  textMuted: "#b8b8c7",
+  mono: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace`
+};
+const fadeUp = keyframes`
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: translateY(0); }
+`;
+const Wrap = styled.div`
+  padding: 28px 32px 48px;
+  background: ${T.bg};
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+`;
+const SectionDivider = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: -6px;
+`;
+const DivLabel = styled.span`
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: ${T.textMuted};
+  white-space: nowrap;
+`;
+const DivLine = styled.div`
+  flex: 1;
+  height: 1px;
+  background: ${T.border};
+`;
+const Card = styled.div`
+  background: ${T.bgCard};
+  border: 1px solid ${T.border};
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  animation: ${fadeUp} 380ms ease both;
+  animation-delay: ${(p) => (p.$delay ?? 0) * 55}ms;
+  transition: border-color 200ms, box-shadow 200ms;
+  &:hover {
+    border-color: ${T.borderHover};
+    box-shadow: 0 0 0 1px ${T.borderHover}, 0 8px 32px rgba(124,109,250,0.07);
+  }
+`;
+const PillGroup = styled.div`
+  display: flex;
+  background: rgba(0,0,0,0.03);
+  border: 1px solid ${T.border};
+  border-radius: 9px;
+  padding: 3px;
+  gap: 2px;
+`;
+const Pill = styled.button`
+  appearance: none;
+  border: none;
+  cursor: pointer;
+  padding: 5px 16px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  transition: background 180ms, color 180ms;
+  background: ${(p) => p.$active ? T.accent : "transparent"};
+  color: ${(p) => p.$active ? "#fff" : T.textSecondary};
+  &:hover {
+    background: ${(p) => p.$active ? T.accent : "rgba(0,0,0,0.05)"};
+    color: ${(p) => p.$active ? "#fff" : T.textPrimary};
+  }
+`;
+const StatGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 10px;
+  @media (max-width: 1200px) { grid-template-columns: repeat(3, 1fr); }
+`;
+const StatCard = styled(Card)`
+  padding: 18px 20px 0;
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 2px;
+    background: ${(p) => p.$accent};
+    opacity: 0.75;
+  }
+`;
+const StatLabel = styled.div`
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: ${T.textMuted};
+  margin-bottom: 10px;
+`;
+const StatValue = styled.div`
+  font-size: 30px;
+  font-weight: 800;
+  color: ${T.textPrimary};
+  line-height: 1;
+  letter-spacing: -0.045em;
+  font-variant-numeric: tabular-nums;
+  margin-bottom: 10px;
+`;
+const TrendBadge = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 8px;
+  border-radius: 20px;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  background: ${(p) => p.$pos ? T.greenDim : T.redDim};
+  color: ${(p) => p.$pos ? T.green : T.red};
+  margin-bottom: 12px;
+`;
+const SparkWrap = styled.div`
+  height: 44px;
+  margin: 0 -20px;
+`;
+const ChartCard = styled(Card)`
+  padding: 20px 20px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+const ChartHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-shrink: 0;
+`;
+const ChartTitle = styled.div`
+  font-size: 12px;
+  font-weight: 700;
+  color: ${T.textPrimary};
+  letter-spacing: 0.01em;
+`;
+const SeriesRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+const SeriesBtn = styled.button`
+  appearance: none;
+  border: 1px solid ${(p) => p.$on ? `${p.$c}55` : T.border};
+  background: ${(p) => p.$on ? `${p.$c}18` : "transparent"};
+  color: ${(p) => p.$on ? p.$c : T.textMuted};
+  font-size: 10px;
+  font-weight: 600;
+  padding: 3px 10px 3px 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  transition: all 160ms;
+  &:hover {
+    border-color: ${(p) => `${p.$c}88`};
+    color: ${(p) => p.$c};
+    background: ${(p) => `${p.$c}22`};
+  }
+`;
+const SDot = styled.span`
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: ${(p) => p.$c};
+  display: inline-block;
+  flex-shrink: 0;
+`;
+const HoverInfo = styled.div`
+  font-size: 11px;
+  color: ${T.textSecondary};
+  font-variant-numeric: tabular-nums;
+  font-family: ${T.mono};
+  min-height: 15px;
+`;
+const TwoPanel = styled.div`
+  display: grid;
+  grid-template-columns: ${(p) => p.$ratio ?? "1fr 288px"};
+  gap: 10px;
+  align-items: stretch;
+  @media (max-width: 900px) { grid-template-columns: 1fr; }
+`;
+const FeedCard = styled(Card)`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
+const FeedHead = styled.div`
+  padding: 13px 16px 9px;
+  border-bottom: 1px solid ${T.border};
+  font-size: 11px;
+  font-weight: 700;
+  color: ${T.textPrimary};
+  flex-shrink: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const FeedSelect = styled.select`
+  appearance: none;
+  border: 1px solid ${T.border};
+  border-radius: 6px;
+  background: ${T.bgCard};
+  color: ${T.textSecondary};
+  font-size: 10px;
+  font-weight: 600;
+  padding: 3px 22px 3px 8px;
+  cursor: pointer;
+  outline: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666687'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 7px center;
+  transition: border-color 160ms;
+  &:hover, &:focus { border-color: ${T.accent}; color: ${T.textPrimary}; }
+`;
+const FeedScroll = styled.div`
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+  &::-webkit-scrollbar { width: 4px; }
+  &::-webkit-scrollbar-thumb { background: ${T.textMuted}; border-radius: 2px; }
+`;
+const FeedItem = styled.div`
+  padding: 9px 14px;
+  border-bottom: 1px solid #f0f0f5;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  transition: background 130ms;
+  &:hover { background: #fafaff; }
+  &:last-child { border-bottom: none; }
+`;
+const FeedTop = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+`;
+const FeedName = styled.span`
+  font-size: 11px;
+  font-weight: 600;
+  color: ${T.textPrimary};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const FeedEmail = styled.span`
+  font-size: 10px;
+  color: ${T.textSecondary};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+`;
+const FeedMeta = styled.span`
+  font-size: 9px;
+  color: ${T.textMuted};
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+`;
+const RtnCard = styled(Card)`
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+const RtnRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 6px;
+  border-radius: 7px;
+  transition: background 130ms;
+  background: ${(p) => p.$hov ? "#f0f0f6" : "transparent"};
+  cursor: default;
+`;
+const RtnLabel = styled.span`
+  font-size: 10px;
+  color: ${T.textSecondary};
+  min-width: 80px;
+  text-align: right;
+  white-space: nowrap;
+`;
+const RtnSize = styled.span`
+  font-size: 9px;
+  color: ${T.textMuted};
+  min-width: 52px;
+  text-align: right;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+`;
+const RtnTrack = styled.div`
+  flex: 1;
+  height: 10px;
+  background: #eaeaef;
+  border-radius: 4px;
+  overflow: hidden;
+`;
+const RtnBar = styled.div`
+  width: ${(p) => Math.max(p.$w, 0.5)}%;
+  height: 100%;
+  background: hsl(${(p) => p.$hue}, 60%, 50%);
+  border-radius: 4px;
+  transition: width 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+`;
+const RtnPct = styled.span`
+  font-size: 10px;
+  font-weight: 700;
+  color: hsl(${(p) => p.$hue}, 60%, 60%);
+  min-width: 38px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  font-family: ${T.mono};
+`;
+const RtnTip = styled.div`
+  font-size: 10px;
+  color: ${T.textSecondary};
+  min-height: 14px;
+  font-variant-numeric: tabular-nums;
+  padding: 0 6px;
+`;
+const RingGrid = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+const RingCard = styled(Card)`
+  padding: 18px 20px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+`;
+const RingInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+const RingVal = styled.div`
+  font-size: 24px;
+  font-weight: 800;
+  color: ${T.textPrimary};
+  letter-spacing: -0.04em;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+`;
+const RingLabel = styled.div`
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: ${T.textMuted};
+`;
+const Empty = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+  color: ${T.textMuted};
+  font-size: 12px;
+  gap: 8px;
+`;
+function useCountUp(target, duration = 850) {
+  const [count, setCount] = useState(0);
+  const prevRef = useRef(0);
+  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__ */ 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__ */ jsxs(
+    "svg",
+    {
+      width: "100%",
+      height: H,
+      viewBox: `0 0 ${W} ${H}`,
+      preserveAspectRatio: "none",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gid, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.32" }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+        ] }) }),
+        /* @__PURE__ */ jsx("path", { d: area, fill: `url(#${gid})` }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: line,
+            stroke: color,
+            strokeWidth: "1.6",
+            fill: "none",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+const ALL_SERIES = [
+  { key: "totalUsers", color: T.accent, label: "Total" },
+  { key: "newUsers", color: T.green, label: "New" },
+  { key: "activeUsers", color: T.amber, label: "Active" }
+];
+function GrowthChart({
+  data,
+  hovered,
+  onHover,
+  activeSeries
+}) {
+  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__ */ jsxs(Empty, { children: [
+      /* @__PURE__ */ jsx("div", { style: { fontSize: 24 }, children: "📊" }),
+      /* @__PURE__ */ jsx("div", { children: "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,
+    ...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__ */ jsxs(
+    "svg",
+    {
+      width: "100%",
+      viewBox: `0 0 ${W} ${H}`,
+      preserveAspectRatio: "xMidYMid meet",
+      style: { display: "block" },
+      "aria-label": "User growth chart",
+      role: "img",
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: lines.map((s) => /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: `ag-${s.key}`,
+            x1: "0",
+            y1: "0",
+            x2: "0",
+            y2: "1",
+            children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: s.color, stopOpacity: "0.18" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: s.color, stopOpacity: "0" })
+            ]
+          },
+          s.key
+        )) }),
+        yTicks.map((t) => /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: PL,
+              y1: t.y,
+              x2: W - PR,
+              y2: t.y,
+              stroke: "#eaeaef",
+              strokeWidth: "1"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: PL - 6,
+              y: t.y + 4,
+              textAnchor: "end",
+              fill: T.textMuted,
+              fontSize: "9",
+              children: t.v >= 1e3 ? `${(t.v / 1e3).toFixed(1)}k` : t.v
+            }
+          )
+        ] }, t.v)),
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: PL,
+            y1: PT + CH,
+            x2: W - PR,
+            y2: PT + CH,
+            stroke: "#eaeaef",
+            strokeWidth: "1"
+          }
+        ),
+        lines.map((s) => /* @__PURE__ */ jsx("path", { d: s.area, fill: `url(#ag-${s.key})` }, `area-${s.key}`)),
+        lines.map((s) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: s.path,
+            stroke: s.color,
+            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__ */ jsx(
+            "text",
+            {
+              x: xp(i),
+              y: H - 6,
+              textAnchor: "middle",
+              fill: T.textMuted,
+              fontSize: "9",
+              children: d.label
+            },
+            i
+          );
+        }),
+        data.map((d, i) => {
+          const isHov = hovered === i;
+          return (
+            // biome-ignore lint/a11y/noStaticElementInteractions: SVG chart hover
+            /* @__PURE__ */ jsxs(
+              "g",
+              {
+                onMouseEnter: () => onHover(i),
+                onMouseLeave: () => onHover(null),
+                style: { cursor: "crosshair" },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: xp(i) - segW / 2,
+                      y: PT,
+                      width: segW,
+                      height: CH,
+                      fill: "transparent"
+                    }
+                  ),
+                  isHov && /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      x1: xp(i),
+                      y1: PT,
+                      x2: xp(i),
+                      y2: PT + CH,
+                      stroke: "rgba(50,50,77,0.2)",
+                      strokeWidth: "1",
+                      strokeDasharray: "3 3"
+                    }
+                  ),
+                  lines.map((s) => /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: xp(i),
+                      cy: yp(d[s.key]),
+                      r: isHov ? 4 : 2.5,
+                      fill: s.color,
+                      stroke: T.bg,
+                      strokeWidth: isHov ? 2 : 1,
+                      opacity: isHov ? 1 : 0.5
+                    },
+                    s.key
+                  ))
+                ]
+              },
+              i
+            )
+          );
+        })
+      ]
+    }
+  );
+}
+function ProgressRing({
+  value,
+  max,
+  color,
+  size = 56
+}) {
+  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__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      style: { flexShrink: 0 },
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: size / 2,
+            cy: size / 2,
+            r,
+            fill: "none",
+            stroke: "#e5e7eb",
+            strokeWidth: "7"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: size / 2,
+            cy: size / 2,
+            r,
+            fill: "none",
+            stroke: 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) {
+  const diff = Date.now() - new Date(date).getTime();
+  const mins = Math.floor(diff / 6e4);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h`;
+  return `${Math.floor(hrs / 24)}d`;
+}
+function rateHue(r) {
+  return r >= 70 ? 142 : r >= 40 ? 38 : 4;
+}
+function StatItem({
+  id,
+  label,
+  value,
+  pct,
+  sparkline,
+  color,
+  delay = 0
+}) {
+  const animated = useCountUp(value);
+  const isPos = pct === void 0 || pct >= 0;
+  return /* @__PURE__ */ jsxs(StatCard, { $delay: delay, $accent: color, children: [
+    /* @__PURE__ */ jsx(StatLabel, { children: label }),
+    /* @__PURE__ */ jsx(StatValue, { children: animated.toLocaleString() }),
+    pct !== void 0 && /* @__PURE__ */ jsxs(TrendBadge, { $pos: isPos, children: [
+      isPos ? "↑" : "↓",
+      " ",
+      Math.abs(pct).toFixed(1),
+      "%"
+    ] }),
+    sparkline && sparkline.length > 1 && /* @__PURE__ */ jsx(SparkWrap, { children: /* @__PURE__ */ jsx(Sparkline, { data: sparkline, color, id }) })
+  ] });
+}
+function OverviewPage() {
+  const { get } = useFetchClient();
+  const [period, setPeriod] = useState(
+    "weekly"
+  );
+  const [feedMode, setFeedMode] = useState("signups");
+  const [hovIdx, setHovIdx] = useState(null);
+  const [rtnHov, setRtnHov] = useState(null);
+  const [activeSeries, setActiveSeries] = 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 = useQuery({
+    queryKey: ["dash-user-stats"],
+    queryFn: async () => {
+      const r = await client.dash.userStats();
+      if (r.error) throw new Error(r.error.message ?? "Failed");
+      return r.data;
+    }
+  });
+  const graphQuery = useQuery({
+    queryKey: ["dash-user-graph", period],
+    queryFn: async () => {
+      const r = await client.dash.userGraphData({ query: { period } });
+      if (r.error) throw new Error(r.error.message ?? "Failed");
+      return r.data;
+    }
+  });
+  const retentionQuery = useQuery({
+    queryKey: ["dash-user-retention", period],
+    queryFn: async () => {
+      const r = await client.dash.userRetentionData({ query: { period } });
+      if (r.error) throw new Error(r.error.message ?? "Failed");
+      return r.data;
+    }
+  });
+  const usersQuery = useQuery({
+    queryKey: ["dash-recent-users"],
+    queryFn: async () => {
+      const r = await client.dash.listUsers({
+        query: { limit: 12, offset: 0, sortBy: "createdAt", sortOrder: "desc" }
+      });
+      if (r.error) throw new Error(r.error.message ?? "Failed");
+      return r.data;
+    }
+  });
+  const sessionsQuery = 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 = useQuery({
+    queryKey: ["dash-orgs-count"],
+    queryFn: async () => {
+      const r = await client.dash.listOrganizations({
+        query: { page: 1, limit: 1 }
+      });
+      if (r.error) throw new Error(r.error.message ?? "Failed");
+      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 = 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
+  });
+  const chartRef = useRef(null);
+  const [chartHeight, setChartHeight] = useState(0);
+  useEffect(() => {
+    const el = chartRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) setChartHeight(entry.contentRect.height);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  if (statsQuery.isLoading) {
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        justifyContent: "center",
+        alignItems: "center",
+        padding: 12,
+        style: { background: T.bg, minHeight: "100%" },
+        children: /* @__PURE__ */ jsx(Loader, { children: "Loading…" })
+      }
+    );
+  }
+  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 activeSpark = graphData.map((d) => d.activeUsers);
+  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
+  );
+  return /* @__PURE__ */ jsxs(Wrap, { "data-testid": "overview-page", children: [
+    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-end", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: 22,
+              fontWeight: 800,
+              color: T.textPrimary,
+              letterSpacing: "-0.03em"
+            },
+            children: "Overview"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: T.textSecondary, marginTop: 4 }, children: (/* @__PURE__ */ new Date()).toLocaleDateString(void 0, {
+          weekday: "long",
+          year: "numeric",
+          month: "long",
+          day: "numeric"
+        }) })
+      ] }),
+      /* @__PURE__ */ jsx(PillGroup, { children: ["daily", "weekly", "monthly"].map((p) => /* @__PURE__ */ jsx(Pill, { $active: period === p, onClick: () => setPeriod(p), children: p[0].toUpperCase() + p.slice(1) }, p)) })
+    ] }),
+    /* @__PURE__ */ jsxs(SectionDivider, { children: [
+      /* @__PURE__ */ jsx(DivLabel, { children: "Metrics" }),
+      /* @__PURE__ */ jsx(DivLine, {})
+    ] }),
+    /* @__PURE__ */ jsxs(StatGrid, { children: [
+      /* @__PURE__ */ jsx(
+        StatItem,
+        {
+          id: "total",
+          label: "Total Users",
+          value: stats.total ?? 0,
+          sparkline: totalSpark,
+          color: T.accent,
+          delay: 0
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatItem,
+        {
+          id: "d-sig",
+          label: "Daily Sign-ups",
+          value: stats.daily.signUps ?? 0,
+          pct: stats.daily.percentage ?? void 0,
+          sparkline: newSpark,
+          color: T.green,
+          delay: 1
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatItem,
+        {
+          id: "w-sig",
+          label: "Weekly Sign-ups",
+          value: stats.weekly.signUps ?? 0,
+          pct: stats.weekly.percentage ?? void 0,
+          sparkline: newSpark,
+          color: T.green,
+          delay: 2
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatItem,
+        {
+          id: "m-sig",
+          label: "Monthly Sign-ups",
+          value: stats.monthly.signUps ?? 0,
+          pct: stats.monthly.percentage ?? void 0,
+          sparkline: newSpark,
+          color: T.green,
+          delay: 3
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatItem,
+        {
+          id: "orgs",
+          label: "Organizations",
+          value: orgCount,
+          color: T.purple,
+          delay: 4
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(SectionDivider, { children: [
+      /* @__PURE__ */ jsx(DivLabel, { children: "Growth" }),
+      /* @__PURE__ */ jsx(DivLine, {})
+    ] }),
+    /* @__PURE__ */ jsxs(TwoPanel, { children: [
+      /* @__PURE__ */ jsxs(ChartCard, { ref: chartRef, $delay: 5, children: [
+        /* @__PURE__ */ jsxs(ChartHeader, { children: [
+          /* @__PURE__ */ jsx(ChartTitle, { children: "User Growth" }),
+          /* @__PURE__ */ jsx(SeriesRow, { children: ALL_SERIES.map((s) => /* @__PURE__ */ jsxs(
+            SeriesBtn,
+            {
+              $on: activeSeries.has(s.key),
+              $c: s.color,
+              onClick: () => toggleSeries(s.key),
+              children: [
+                /* @__PURE__ */ jsx(SDot, { $c: s.color }),
+                s.label
+              ]
+            },
+            s.key
+          )) })
+        ] }),
+        /* @__PURE__ */ jsx(HoverInfo, { children: hovRow ? `${hovRow.label}  ·  ${hovRow.totalUsers.toLocaleString()} total  ·  +${hovRow.newUsers.toLocaleString()} new  ·  ${hovRow.activeUsers.toLocaleString()} active` : "Hover the chart to inspect a data point" }),
+        graphQuery.isLoading ? /* @__PURE__ */ jsx(
+          Flex,
+          {
+            justifyContent: "center",
+            alignItems: "center",
+            style: { flex: 1, minHeight: 170 },
+            children: /* @__PURE__ */ jsx(Loader, { children: "Loading…" })
+          }
+        ) : /* @__PURE__ */ jsx(
+          GrowthChart,
+          {
+            data: graphData,
+            hovered: hovIdx,
+            onHover: setHovIdx,
+            activeSeries
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        FeedCard,
+        {
+          $delay: 6,
+          style: chartHeight > 0 ? { height: chartHeight } : void 0,
+          children: [
+            /* @__PURE__ */ jsxs(FeedHead, { children: [
+              /* @__PURE__ */ jsx("span", { children: feedMode === "signups" ? "Recent Sign-ups" : "Recently Active" }),
+              /* @__PURE__ */ jsxs(
+                FeedSelect,
+                {
+                  value: feedMode,
+                  onChange: (e) => setFeedMode(e.target.value),
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "signups", children: "Recent Sign-ups" }),
+                    /* @__PURE__ */ jsx("option", { value: "active", children: "Recently Active" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(FeedScroll, { children: feedMode === "signups" ? usersQuery.isLoading ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsx(Loader, { children: "Loading…" }) }) : users.length === 0 ? /* @__PURE__ */ jsx(Empty, { children: "No users yet" }) : users.map((u) => /* @__PURE__ */ jsxs(FeedItem, { children: [
+              /* @__PURE__ */ jsxs(FeedTop, { children: [
+                /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 1, style: { minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx(Avatar, { name: u.name, src: u.image, size: 20 }),
+                  /* @__PURE__ */ jsx(FeedName, { title: u.name, children: u.name })
+                ] }),
+                /* @__PURE__ */ jsx(FeedMeta, { children: relTime(u.createdAt) })
+              ] }),
+              /* @__PURE__ */ jsx(FeedEmail, { title: u.email, children: u.email })
+            ] }, u.id)) : activeUsersQuery.isLoading || sessionsQuery.isLoading ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsx(Loader, { children: "Loading…" }) }) : sortedActiveUsers.length === 0 ? /* @__PURE__ */ jsx(Empty, { children: "No recent activity" }) : sortedActiveUsers.map((u) => /* @__PURE__ */ jsxs(FeedItem, { children: [
+              /* @__PURE__ */ jsxs(FeedTop, { children: [
+                /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 1, style: { minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx(
+                    Avatar,
+                    {
+                      name: u.name,
+                      src: u.image ?? void 0,
+                      size: 20
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(FeedName, { title: u.name, children: u.name })
+                ] }),
+                /* @__PURE__ */ jsx(FeedMeta, { children: relTime(
+                  lastActiveByUserId.get(String(u.id)) ?? u.createdAt
+                ) })
+              ] }),
+              /* @__PURE__ */ jsx(FeedEmail, { title: u.email, children: u.email })
+            ] }, u.documentId)) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(SectionDivider, { children: [
+      /* @__PURE__ */ jsx(DivLabel, { children: "Retention & Activity" }),
+      /* @__PURE__ */ jsx(DivLine, {})
+    ] }),
+    /* @__PURE__ */ jsxs(TwoPanel, { children: [
+      /* @__PURE__ */ jsxs(RtnCard, { $delay: 7, children: [
+        /* @__PURE__ */ jsxs(ChartHeader, { children: [
+          /* @__PURE__ */ jsx(ChartTitle, { children: "Cohort Retention" }),
+          /* @__PURE__ */ jsx(Flex, { alignItems: "center", gap: 2, children: [
+            { hue: 142, label: "≥70%" },
+            { hue: 38, label: "40–70%" },
+            { hue: 4, label: "<40%" }
+          ].map(({ hue, label }) => /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              alignItems: "center",
+              gap: 1,
+              style: { marginLeft: 8 },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      width: 8,
+                      height: 8,
+                      borderRadius: "50%",
+                      background: `hsl(${hue},60%,50%)`,
+                      display: "inline-block",
+                      flexShrink: 0
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { style: { fontSize: 9, color: T.textMuted }, children: label })
+              ]
+            },
+            hue
+          )) })
+        ] }),
+        /* @__PURE__ */ jsx(RtnTip, { children: rtnHovRow ? `Cohort ${rtnHovRow.label} · ${rtnHovRow.cohortSize.toLocaleString()} users · active ${rtnHovRow.activeStart} – ${rtnHovRow.activeEnd}` : "Hover a row to see cohort details" }),
+        retentionQuery.isLoading ? /* @__PURE__ */ jsx(
+          Flex,
+          {
+            justifyContent: "center",
+            alignItems: "center",
+            style: { minHeight: 80 },
+            children: /* @__PURE__ */ jsx(Loader, { children: "Loading…" })
+          }
+        ) : rtnData.length === 0 ? /* @__PURE__ */ jsxs(Empty, { children: [
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 22 }, children: "📉" }),
+          /* @__PURE__ */ jsx("div", { children: "No retention data for this period" })
+        ] }) : /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 5 }, children: rtnData.map((row, i) => {
+          const hue = rateHue(row.retentionRate);
+          return /* @__PURE__ */ jsxs(
+            RtnRow,
+            {
+              $hov: rtnHov === i,
+              onMouseEnter: () => setRtnHov(i),
+              onMouseLeave: () => setRtnHov(null),
+              children: [
+                /* @__PURE__ */ jsx(RtnLabel, { children: row.label }),
+                /* @__PURE__ */ jsx(RtnSize, { children: row.cohortSize.toLocaleString() }),
+                /* @__PURE__ */ jsx(RtnTrack, { children: /* @__PURE__ */ jsx(RtnBar, { $w: row.retentionRate, $hue: hue }) }),
+                /* @__PURE__ */ jsxs(RtnPct, { $hue: hue, children: [
+                  row.retentionRate.toFixed(1),
+                  "%"
+                ] })
+              ]
+            },
+            row.n
+          );
+        }) })
+      ] }),
+      /* @__PURE__ */ jsx(RingGrid, { children: [
+        {
+          label: "Daily Active",
+          value: stats.activeUsers.daily.active,
+          pct: stats.activeUsers.daily.percentage,
+          color: T.amber,
+          sparkline: activeSpark,
+          delay: 8
+        },
+        {
+          label: "Weekly Active",
+          value: stats.activeUsers.weekly.active,
+          pct: stats.activeUsers.weekly.percentage,
+          color: T.green,
+          sparkline: activeSpark,
+          delay: 9
+        },
+        {
+          label: "Monthly Active",
+          value: stats.activeUsers.monthly.active,
+          pct: stats.activeUsers.monthly.percentage,
+          color: T.accent,
+          sparkline: activeSpark,
+          delay: 10
+        }
+      ].map(({ label, value, pct, color, delay }) => {
+        const isPos = pct == null || pct >= 0;
+        return /* @__PURE__ */ jsxs(RingCard, { $delay: delay, children: [
+          /* @__PURE__ */ jsx(
+            ProgressRing,
+            {
+              value: value ?? 0,
+              max: activeMax,
+              color,
+              size: 56
+            }
+          ),
+          /* @__PURE__ */ jsxs(RingInfo, { children: [
+            /* @__PURE__ */ jsx(RingLabel, { children: label }),
+            /* @__PURE__ */ jsx(RingVal, { children: (value ?? 0).toLocaleString() }),
+            pct != null && /* @__PURE__ */ jsxs(
+              TrendBadge,
+              {
+                $pos: isPos,
+                style: { marginTop: 4, marginBottom: 0 },
+                children: [
+                  isPos ? "↑" : "↓",
+                  " ",
+                  Math.abs(pct).toFixed(1),
+                  "%"
+                ]
+              }
+            )
+          ] })
+        ] }, label);
+      }) })
+    ] })
+  ] });
+}
+function ProtectedOverviewPage() {
+  return /* @__PURE__ */ jsx(
+    Page.Protect,
+    {
+      permissions: PERMISSIONS.overview.filter(
+        (p) => p.action === `plugin::${PLUGIN_ID}.overview.read`
+      ),
+      children: /* @__PURE__ */ jsx(OverviewPage, {})
+    }
+  );
+}
+export {
+  OverviewPage,
+  ProtectedOverviewPage as default
+};