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

package/dist/admin/{Root-hwPhIfaT.mjs → Root-DBjGZL7H.mjs}

@@ -1,13 +1,13 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useEffect, useState, useMemo } from "react";
+import { useEffect, useState, useRef, useMemo } from "react";
 import { useQuery, useQueryClient, useMutation, QueryClient, QueryClientProvider } from "react-query";
 import { Modal, Typography, Button, Portal, Flex, IconButton, Box, Field, TextInput, Combobox, ComboboxOption, Checkbox, SingleSelect, SingleSelectOption, NumberInput, JSONInput, Textarea, Alert, Tabs, Grid, SearchForm, Searchbar, Loader, Badge, Pagination } from "@strapi/design-system";
 import styled, { keyframes } from "styled-components";
 import { dashClient } from "@better-auth/infra/client";
 import { createAuthClient, InferPlugin } from "better-auth/client";
-import { Cross, Images, Plus, Trash, Pencil } from "@strapi/icons";
+import { Cross, Images, Trash, Plus, Pencil } from "@strapi/icons";
 import { useNotification, useFetchClient } from "@strapi/strapi/admin";
-import { g as getMediaLibraryComponent } from "./index-Cvcysa5M.mjs";
+import { g as getMediaLibraryComponent, P as PluginIcon } from "./index-BpruO4vo.mjs";
 const dashPathMethods = () => ({
   id: "dash-path-methods",
   pathMethods: {
@@ -454,7 +454,7 @@ function UserCombobox({
       ]) : void 0;
       const result = await client.dash.listUsers({
         query: {
-          limit: 20,
+          limit: search ? 100 : 20,
           offset: 0,
           sortBy: "createdAt",
           sortOrder: "desc",
@@ -629,6 +629,159 @@ function CreateOrganizationDialog({ teamsEnabled, onClose }) {
 function slugify(str) {
   return str.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 }
+const EntryRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px;
+  width: 100%;
+  box-sizing: border-box;
+  background: #ffffff;
+  border: 1px solid ${({ theme }) => theme.colors?.neutral200 ?? "#dcdce4"};
+  border-radius: 4px;
+  min-width: 0;
+`;
+function getDisplayLabel(doc) {
+  for (const key of ["name", "title", "email", "username", "label", "slug"]) {
+    const v = doc[key];
+    if (typeof v === "string" && v.trim()) return v;
+  }
+  return String(doc.documentId ?? doc.id ?? "");
+}
+function normalizeValue(val, cache) {
+  if (!val) return [];
+  if (typeof val === "object" && !Array.isArray(val) && val !== null && "set" in val) {
+    const items2 = val.set ?? [];
+    return items2.filter((item) => item?.documentId).map((item) => ({
+      documentId: item.documentId,
+      label: cache.get(item.documentId) ?? item.documentId
+    }));
+  }
+  const items = Array.isArray(val) ? val : [val];
+  return items.filter(
+    (item) => typeof item === "object" && item !== null && "documentId" in item
+  ).map((item) => ({
+    documentId: String(item.documentId),
+    label: getDisplayLabel(item)
+  }));
+}
+function RelationField({
+  name,
+  label,
+  attribute,
+  value,
+  onChange,
+  readOnly = false
+}) {
+  const { get } = useFetchClient();
+  const cache = useRef(/* @__PURE__ */ new Map());
+  const [search, setSearch] = useState("");
+  const [addKey, setAddKey] = useState(0);
+  const target = attribute.target ?? "";
+  const relationType = attribute.relation ?? "manyToOne";
+  const isMulti = relationType === "oneToMany" || relationType === "manyToMany";
+  const currentDocs = normalizeValue(value, cache.current);
+  const selectedIds = new Set(currentDocs.map((d) => d.documentId));
+  const { data: searchResults = [], isLoading } = useQuery({
+    queryKey: ["relation-search", target, search],
+    queryFn: async () => {
+      const params = new URLSearchParams({
+        uid: target,
+        "pagination[pageSize]": "50"
+      });
+      if (search) params.set("filters[name][$containsi]", search);
+      const { data } = await get(
+        `/better-auth-dashboard/db?${params}`
+      );
+      const docs = data.results ?? [];
+      for (const doc of docs) {
+        if (doc.documentId) {
+          cache.current.set(String(doc.documentId), getDisplayLabel(doc));
+        }
+      }
+      return docs.map((doc) => ({
+        documentId: String(doc.documentId ?? ""),
+        label: getDisplayLabel(doc)
+      })).filter((d) => d.documentId);
+    },
+    keepPreviousData: true,
+    enabled: !readOnly
+  });
+  const availableOptions = searchResults.filter(
+    (r) => !selectedIds.has(r.documentId)
+  );
+  const commit = (ids) => {
+    onChange(name, { set: ids.map((id) => ({ documentId: id })) });
+  };
+  const handleSelect = (val) => {
+    if (!val) return;
+    const opt = searchResults.find((r) => r.documentId === val);
+    if (opt) cache.current.set(val, opt.label);
+    if (isMulti) {
+      if (selectedIds.has(val)) return;
+      commit([...currentDocs.map((d) => d.documentId), val]);
+    } else {
+      commit([val]);
+    }
+    setSearch("");
+    setAddKey((k) => k + 1);
+  };
+  const handleRemove = (docId) => {
+    commit(
+      currentDocs.filter((d) => d.documentId !== docId).map((d) => d.documentId)
+    );
+  };
+  return /* @__PURE__ */ jsxs(Field.Root, { style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx(Field.Label, { children: label }),
+    !readOnly && /* @__PURE__ */ jsx(
+      Combobox,
+      {
+        value: "",
+        onChange: (val) => handleSelect(val),
+        onInputChange: (e) => setSearch(e.target.value),
+        loading: isLoading,
+        placeholder: "Search…",
+        children: availableOptions.map((opt) => /* @__PURE__ */ jsx(ComboboxOption, { value: opt.documentId, children: opt.label }, opt.documentId))
+      },
+      addKey
+    ),
+    currentDocs.length > 0 && /* @__PURE__ */ jsx(
+      Flex,
+      {
+        direction: "column",
+        gap: 1,
+        style: { marginTop: 8, width: "100%" },
+        children: currentDocs.map((doc) => /* @__PURE__ */ jsxs(EntryRow, { children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "omega",
+              textColor: "neutral800",
+              style: {
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                flex: 1,
+                minWidth: 0
+              },
+              children: doc.label
+            }
+          ),
+          !readOnly && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              label: "Remove",
+              size: "S",
+              onClick: () => handleRemove(doc.documentId),
+              children: /* @__PURE__ */ jsx(Trash, {})
+            }
+          )
+        ] }, doc.documentId))
+      }
+    )
+  ] });
+}
 function makeLabel(name) {
   return name.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()).trim();
 }
@@ -752,24 +905,15 @@ function DynamicField({
     ] });
   }
   if (type === "relation") {
-    return /* @__PURE__ */ jsxs(
-      Field.Root,
+    return /* @__PURE__ */ jsx(
+      RelationField,
       {
-        style: fieldStyle,
-        hint: `Relation → ${attribute.target ?? "unknown"}`,
-        children: [
-          /* @__PURE__ */ jsx(Field.Label, { children: label }),
-          /* @__PURE__ */ jsx(
-            TextInput,
-            {
-              value: value != null ? String(value) : "",
-              onChange: (e) => onChange(name, e.target.value),
-              disabled: readOnly,
-              placeholder: "ID…"
-            }
-          ),
-          /* @__PURE__ */ jsx(Field.Hint, {})
-        ]
+        name,
+        label,
+        attribute,
+        value,
+        onChange,
+        readOnly
       }
     );
   }
@@ -840,6 +984,8 @@ function useModelSchema(model) {
         if (SYSTEM_FIELDS.has(name)) continue;
         if (attr.type === "relation" && typeof attr.target === "string" && (attr.target.startsWith("plugin::users-permissions") || attr.target.startsWith("admin::")))
           continue;
+        const baOptions = attr.pluginOptions?.["better-auth"];
+        if (baOptions?.managed === true) continue;
         attributes[name] = attr;
       }
       return attributes;
@@ -930,6 +1076,14 @@ function OrganizationDetail({
       return result.data ?? [];
     }
   });
+  const invitationsQuery = useQuery({
+    queryKey: ["dash-org-invitations", organizationId],
+    queryFn: async () => {
+      const result = await client.dash.organization[organizationId].invitations({}, withContext({ organizationId }));
+      if (result.error) throw new Error(result.error.message ?? "Failed");
+      return result.data ?? [];
+    }
+  });
   const [activeTab, setActiveTab] = useState("details");
   const [editName, setEditName] = useState(void 0);
   const [editSlug, setEditSlug] = useState(void 0);
@@ -942,6 +1096,9 @@ function OrganizationDetail({
   const [confirmDeleteSsoId, setConfirmDeleteSsoId] = useState(
     null
   );
+  const [inviteEmail, setInviteEmail] = useState("");
+  const [inviteRole, setInviteRole] = useState("member");
+  const [confirmCancelInvitationId, setConfirmCancelInvitationId] = useState(null);
   const handleExtraChange = (name, value) => {
     setEditExtra((prev) => ({ ...prev, [name]: value }));
   };
@@ -1112,9 +1269,74 @@ function OrganizationDetail({
       });
     }
   });
+  const inviteMemberMutation = useMutation({
+    mutationFn: async () => {
+      const result = await client.dash.organization.inviteMember(
+        { email: inviteEmail, role: inviteRole, invitedBy: "" },
+        withContext({ organizationId })
+      );
+      if (result.error) throw new Error(result.error.message ?? "Failed");
+      return result.data;
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({
+        queryKey: ["dash-org-invitations", organizationId]
+      });
+      setInviteEmail("");
+      setInviteRole("member");
+      toggleNotification({ type: "success", message: "Invitation sent" });
+    },
+    onError: (err) => {
+      toggleNotification({
+        type: "danger",
+        message: err.message ?? "Failed to invite"
+      });
+    }
+  });
+  const cancelInvitationMutation = useMutation({
+    mutationFn: async (invitationId) => {
+      const result = await client.dash.organization.cancelInvitation(
+        { invitationId },
+        withContext({ organizationId })
+      );
+      if (result.error) throw new Error(result.error.message ?? "Failed");
+    },
+    onSuccess: () => {
+      setConfirmCancelInvitationId(null);
+      qc.invalidateQueries({
+        queryKey: ["dash-org-invitations", organizationId]
+      });
+      toggleNotification({ type: "success", message: "Invitation cancelled" });
+    },
+    onError: (err) => {
+      toggleNotification({
+        type: "danger",
+        message: err.message ?? "Failed to cancel"
+      });
+    }
+  });
+  const resendInvitationMutation = useMutation({
+    mutationFn: async (invitationId) => {
+      const result = await client.dash.organization.resendInvitation(
+        { invitationId },
+        withContext({ organizationId })
+      );
+      if (result.error) throw new Error(result.error.message ?? "Failed");
+    },
+    onSuccess: () => {
+      toggleNotification({ type: "success", message: "Invitation resent" });
+    },
+    onError: (err) => {
+      toggleNotification({
+        type: "danger",
+        message: err.message ?? "Failed to resend"
+      });
+    }
+  });
   const members = membersQuery.data ?? [];
   const teams = teamsQuery.data ?? [];
   const ssoProviders = ssoQuery.data ?? [];
+  const invitations = invitationsQuery.data ?? [];
   const hasOrgEdits = editName !== void 0 || editSlug !== void 0 || editLogo !== void 0 || Object.keys(editExtra).length > 0;
   const customFields = Object.entries(schemaQuery.data ?? {}).filter(([name]) => !STANDARD_ORG_FIELDS.has(name)).map(([name, attribute]) => ({ name, attribute }));
   const detailsFooter = activeTab === "details" ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1171,6 +1393,11 @@ function OrganizationDetail({
               teams.length,
               ")"
             ] }),
+            /* @__PURE__ */ jsxs(Tabs.Trigger, { value: "invitations", children: [
+              "Invitations (",
+              invitations.length,
+              ")"
+            ] }),
             /* @__PURE__ */ jsxs(Tabs.Trigger, { value: "sso", children: [
               "SSO (",
               ssoProviders.length,
@@ -1426,7 +1653,127 @@ function OrganizationDetail({
               },
               provider.id
             )) })
-          ] }) }) })
+          ] }) }) }),
+          /* @__PURE__ */ jsx(Tabs.Content, { value: "invitations", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 5, paddingTop: 6, children: [
+            /* @__PURE__ */ jsxs(FormSection, { children: [
+              /* @__PURE__ */ jsx(SectionLabel, { children: "Invite member by email" }),
+              /* @__PURE__ */ jsxs(Grid.Root, { gap: 3, children: [
+                /* @__PURE__ */ jsx(Grid.Item, { col: 8, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+                  /* @__PURE__ */ jsx(Field.Label, { children: "Email address" }),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      type: "email",
+                      value: inviteEmail,
+                      onChange: (e) => setInviteEmail(e.target.value),
+                      placeholder: "user@example.com"
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ jsx(Grid.Item, { col: 4, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+                  /* @__PURE__ */ jsx(Field.Label, { children: "Role" }),
+                  /* @__PURE__ */ jsxs(
+                    SingleSelect,
+                    {
+                      value: inviteRole,
+                      onChange: (v) => setInviteRole(String(v)),
+                      "aria-label": "Invite role",
+                      children: [
+                        /* @__PURE__ */ jsx(SingleSelectOption, { value: "member", children: "Member" }),
+                        /* @__PURE__ */ jsx(SingleSelectOption, { value: "admin", children: "Admin" }),
+                        /* @__PURE__ */ jsx(SingleSelectOption, { value: "owner", children: "Owner" })
+                      ]
+                    }
+                  )
+                ] }) })
+              ] }),
+              /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "S",
+                  startIcon: /* @__PURE__ */ jsx(Plus, {}),
+                  disabled: !inviteEmail,
+                  loading: inviteMemberMutation.isLoading,
+                  onClick: () => inviteMemberMutation.mutate(),
+                  children: "Send invitation"
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxs(FormSection, { children: [
+              /* @__PURE__ */ jsxs(SectionLabel, { children: [
+                "Invitations (",
+                invitations.length,
+                ")"
+              ] }),
+              invitationsQuery.isLoading ? /* @__PURE__ */ jsx(Typography, { textColor: "neutral500", children: "Loading…" }) : invitations.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "No invitations yet." }) : /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, children: invitations.map((inv) => {
+                const statusColor = {
+                  pending: "#f59e0b",
+                  accepted: "#5cb176",
+                  rejected: "#d02b20",
+                  canceled: "#8e8ea9"
+                };
+                const color = statusColor[inv.status] ?? "#8e8ea9";
+                const isPending = inv.status === "pending";
+                return /* @__PURE__ */ jsxs(AccountRow, { children: [
+                  /* @__PURE__ */ jsxs(
+                    Flex,
+                    {
+                      direction: "column",
+                      gap: 1,
+                      alignItems: "flex-start",
+                      style: { flex: 1 },
+                      children: [
+                        /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", children: inv.user?.name ?? inv.email }),
+                        /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral500", children: [
+                          inv.email,
+                          " · role: ",
+                          inv.role
+                        ] }),
+                        /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral500", children: [
+                          "Expires",
+                          " ",
+                          new Date(inv.expiresAt).toLocaleDateString()
+                        ] })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+                    /* @__PURE__ */ jsx(
+                      MonoChip,
+                      {
+                        style: {
+                          color,
+                          borderColor: color,
+                          background: `${color}18`
+                        },
+                        children: inv.status
+                      }
+                    ),
+                    isPending && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          size: "S",
+                          variant: "secondary",
+                          loading: resendInvitationMutation.isLoading,
+                          onClick: () => resendInvitationMutation.mutate(inv.id),
+                          children: "Resend"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          label: "Cancel invitation",
+                          onClick: () => setConfirmCancelInvitationId(inv.id),
+                          children: /* @__PURE__ */ jsx(Trash, {})
+                        }
+                      )
+                    ] })
+                  ] })
+                ] }, inv.id);
+              }) })
+            ] })
+          ] }) })
         ] }),
         confirmRemoveMemberId && /* @__PURE__ */ jsx(
           ConfirmDialog,
@@ -1460,6 +1807,17 @@ function OrganizationDetail({
             onConfirm: () => deleteSsoMutation.mutate(confirmDeleteSsoId),
             onCancel: () => setConfirmDeleteSsoId(null)
           }
+        ),
+        confirmCancelInvitationId && /* @__PURE__ */ jsx(
+          ConfirmDialog,
+          {
+            title: "Cancel invitation",
+            message: "Are you sure you want to cancel this invitation? The invite link will no longer work.",
+            confirmLabel: "Cancel invitation",
+            loading: cancelInvitationMutation.isLoading,
+            onConfirm: () => cancelInvitationMutation.mutate(confirmCancelInvitationId),
+            onCancel: () => setConfirmCancelInvitationId(null)
+          }
         )
       ]
     }
@@ -1605,12 +1963,12 @@ function TeamRow({
     )
   ] });
 }
-const PAGE_SIZE$2 = 25;
-const fadeUp$3 = keyframes`
+const PAGE_SIZE$1 = 25;
+const fadeUp$2 = keyframes`
   from { opacity: 0; transform: translateY(6px); }
   to   { opacity: 1; transform: translateY(0); }
 `;
-const Wrap$3 = styled.div`
+const Wrap$2 = styled.div`
   padding: 28px 32px;
   background: #f6f6f9;
   min-height: 100%;
@@ -1618,39 +1976,39 @@ const Wrap$3 = styled.div`
   flex-direction: column;
   gap: 20px;
 `;
-const PageHeader$2 = styled.div`
+const PageHeader$1 = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
 `;
-const TitleBlock$2 = styled.div`
+const TitleBlock$1 = styled.div`
   display: flex;
   flex-direction: column;
   gap: 4px;
 `;
-const PageTitle$2 = styled.h1`
+const PageTitle$1 = styled.h1`
   margin: 0;
   font-size: 22px;
   font-weight: 800;
   color: #32324d;
   letter-spacing: -0.03em;
 `;
-const PageSubtitle$2 = styled.p`
+const PageSubtitle$1 = styled.p`
   margin: 0;
   font-size: 12px;
   color: #8e8ea9;
 `;
-const TableCard$2 = styled.div`
+const TableCard$1 = styled.div`
   background: #ffffff;
   border: 1px solid #eaeaef;
   border-radius: 10px;
   overflow: hidden;
 `;
-const Table$2 = styled.table`
+const Table$1 = styled.table`
   width: 100%;
   border-collapse: collapse;
 `;
-const TH$2 = styled.th`
+const TH$1 = styled.th`
   text-align: left;
   padding: 10px 14px;
   font-size: 10px;
@@ -1664,13 +2022,13 @@ const TH$2 = styled.th`
   &:first-child { padding-left: 20px; }
   &:last-child  { padding-right: 20px; }
 `;
-const THCheck$1 = styled(TH$2)`
+const THCheck$1 = styled(TH$1)`
   width: 44px;
 `;
-const THActions$1 = styled(TH$2)`
+const THActions$1 = styled(TH$1)`
   width: 80px;
 `;
-const TD$2 = styled.td`
+const TD$1 = styled.td`
   padding: 11px 14px;
   font-size: 12px;
   color: #32324d;
@@ -1679,14 +2037,14 @@ const TD$2 = styled.td`
   &:first-child { padding-left: 20px; }
   &:last-child  { padding-right: 20px; }
 `;
-const TDCheck$1 = styled(TD$2)`
+const TDCheck$1 = styled(TD$1)`
   width: 44px;
 `;
-const TDActions$1 = styled(TD$2)`
+const TDActions$1 = styled(TD$1)`
   width: 80px;
 `;
-const TR$2 = styled.tr`
-  animation: ${fadeUp$3} 280ms ease both;
+const TR$1 = styled.tr`
+  animation: ${fadeUp$2} 280ms ease both;
   animation-delay: ${(p) => (p.$i ?? 0) * 25}ms;
   background: ${(p) => p.$selected ? "#f0f0ff" : "transparent"};
   transition: background 120ms ease;
@@ -1782,13 +2140,13 @@ function OrganizationsPage({ teamsEnabled }) {
   const [detailOrgId, setDetailOrgId] = useState(null);
   const [confirmDelete, setConfirmDelete] = useState(null);
   const [confirmDeleteMany, setConfirmDeleteMany] = useState(false);
-  const offset = (page - 1) * PAGE_SIZE$2;
+  const offset = (page - 1) * PAGE_SIZE$1;
   const orgsQuery = useQuery({
     queryKey: ["dash-organizations", page, search],
     queryFn: async () => {
       const result = await client.dash.listOrganizations({
         query: {
-          limit: PAGE_SIZE$2,
+          limit: PAGE_SIZE$1,
           offset,
           sortBy: "createdAt",
           sortOrder: "desc",
@@ -1833,7 +2191,7 @@ function OrganizationsPage({ teamsEnabled }) {
   });
   const orgs = orgsQuery.data && "organizations" in orgsQuery.data ? orgsQuery.data.organizations : [];
   const total = orgsQuery.data && "total" in orgsQuery.data ? orgsQuery.data.total : 0;
-  const pageCount = Math.ceil(total / PAGE_SIZE$2);
+  const pageCount = Math.ceil(total / PAGE_SIZE$1);
   const allSelected = orgs.length > 0 && orgs.every((o) => selected.has(o.id));
   const someSelected = selected.size > 0;
   const toggleSelect = (id) => {
@@ -1853,11 +2211,11 @@ function OrganizationsPage({ teamsEnabled }) {
     setSearch(searchInput);
     setPage(1);
   };
-  return /* @__PURE__ */ jsxs(Wrap$3, { "data-testid": "organizations-page", children: [
-    /* @__PURE__ */ jsxs(PageHeader$2, { children: [
-      /* @__PURE__ */ jsxs(TitleBlock$2, { children: [
-        /* @__PURE__ */ jsx(PageTitle$2, { children: "Organizations" }),
-        /* @__PURE__ */ jsxs(PageSubtitle$2, { children: [
+  return /* @__PURE__ */ jsxs(Wrap$2, { "data-testid": "organizations-page", children: [
+    /* @__PURE__ */ jsxs(PageHeader$1, { children: [
+      /* @__PURE__ */ jsxs(TitleBlock$1, { children: [
+        /* @__PURE__ */ jsx(PageTitle$1, { children: "Organizations" }),
+        /* @__PURE__ */ jsxs(PageSubtitle$1, { children: [
           total.toLocaleString(),
           " total"
         ] })
@@ -1905,7 +2263,7 @@ function OrganizationsPage({ teamsEnabled }) {
       )
     ] }),
     orgsQuery.isError && /* @__PURE__ */ jsx("div", { style: { color: "#d02b20", fontSize: 12, padding: "8px 0" }, children: orgsQuery.error instanceof Error ? orgsQuery.error.message : "An error occurred" }),
-    /* @__PURE__ */ jsx(TableCard$2, { children: orgsQuery.isLoading ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsx(Loader, { children: "Loading organizations…" }) }) : /* @__PURE__ */ jsxs(Table$2, { children: [
+    /* @__PURE__ */ jsx(TableCard$1, { children: orgsQuery.isLoading ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsx(Loader, { children: "Loading organizations…" }) }) : /* @__PURE__ */ jsxs(Table$1, { children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
         /* @__PURE__ */ jsx(THCheck$1, { children: /* @__PURE__ */ jsx(
           Checkbox,
@@ -1915,14 +2273,14 @@ function OrganizationsPage({ teamsEnabled }) {
             "aria-label": "Select all"
           }
         ) }),
-        /* @__PURE__ */ jsx(TH$2, { children: "Name" }),
-        /* @__PURE__ */ jsx(TH$2, { children: "Slug" }),
-        /* @__PURE__ */ jsx(TH$2, { children: "Members" }),
-        /* @__PURE__ */ jsx(TH$2, { children: "Created" }),
+        /* @__PURE__ */ jsx(TH$1, { children: "Name" }),
+        /* @__PURE__ */ jsx(TH$1, { children: "Slug" }),
+        /* @__PURE__ */ jsx(TH$1, { children: "Members" }),
+        /* @__PURE__ */ jsx(TH$1, { children: "Created" }),
         /* @__PURE__ */ jsx(THActions$1, {})
       ] }) }),
       /* @__PURE__ */ jsx("tbody", { children: orgs.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-        TD$2,
+        TD$1,
         {
           colSpan: 6,
           style: {
@@ -1934,7 +2292,7 @@ function OrganizationsPage({ teamsEnabled }) {
           children: search ? `No organizations matching "${search}"` : "No organizations found"
         }
       ) }) : orgs.map((org, i) => /* @__PURE__ */ jsxs(
-        TR$2,
+        TR$1,
         {
           $selected: selected.has(org.id),
           $i: i,
@@ -1948,13 +2306,13 @@ function OrganizationsPage({ teamsEnabled }) {
                 "aria-label": `Select ${org.name}`
               }
             ) }),
-            /* @__PURE__ */ jsx(TD$2, { children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
+            /* @__PURE__ */ jsx(TD$1, { children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
               /* @__PURE__ */ jsx(OrgAvatar, { name: org.name, logo: org.logo }),
               /* @__PURE__ */ jsx(OrgName, { children: org.name })
             ] }) }),
-            /* @__PURE__ */ jsx(TD$2, { children: /* @__PURE__ */ jsx(SlugChip, { children: org.slug }) }),
-            /* @__PURE__ */ jsx(TD$2, { children: /* @__PURE__ */ jsx(CountChip, { children: org.memberCount }) }),
-            /* @__PURE__ */ jsx(TD$2, { children: /* @__PURE__ */ jsx(DateText$1, { children: new Date(org.createdAt).toLocaleDateString() }) }),
+            /* @__PURE__ */ jsx(TD$1, { children: /* @__PURE__ */ jsx(SlugChip, { children: org.slug }) }),
+            /* @__PURE__ */ jsx(TD$1, { children: /* @__PURE__ */ jsx(CountChip, { children: org.memberCount }) }),
+            /* @__PURE__ */ jsx(TD$1, { children: /* @__PURE__ */ jsx(DateText$1, { children: new Date(org.createdAt).toLocaleDateString() }) }),
             /* @__PURE__ */ jsx(TDActions$1, { children: /* @__PURE__ */ jsxs(Flex, { gap: 1, justifyContent: "flex-end", children: [
               /* @__PURE__ */ jsx(
                 IconButton,
@@ -2101,95 +2459,143 @@ function Avatar({
   const color = getColor(name || "?");
   return /* @__PURE__ */ jsx(Circle, { $bg: color.bg, $fg: color.fg, $size: size, children: getInitials(name || "?") });
 }
-const fadeUp$2 = keyframes`
-  from { opacity: 0; transform: translateY(8px); }
+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$1 = keyframes`
+  from { opacity: 0; transform: translateY(10px); }
   to   { opacity: 1; transform: translateY(0); }
 `;
-const Wrap$2 = styled.div`
-  padding: 28px 32px;
-  background: #f6f6f9;
+const Wrap$1 = styled.div`
+  padding: 28px 32px 48px;
+  background: ${T.bg};
   min-height: 100%;
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 22px;
 `;
-const StatRow = styled.div`
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 12px;
-  @media (max-width: 1200px) { grid-template-columns: repeat(3, 1fr); }
-  @media (max-width: 768px)  { grid-template-columns: repeat(2, 1fr); }
+const SectionDivider = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: -6px;
 `;
-const MainRow = styled.div`
-  display: grid;
-  grid-template-columns: 1fr 300px;
-  gap: 12px;
-  @media (max-width: 960px) { grid-template-columns: 1fr; }
+const DivLabel = styled.span`
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: ${T.textMuted};
+  white-space: nowrap;
 `;
-const ActiveRow = styled.div`
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
+const DivLine = styled.div`
+  flex: 1;
+  height: 1px;
+  background: ${T.border};
 `;
 const Card = styled.div`
-  background: #ffffff;
-  border: 1px solid #eaeaef;
-  border-radius: 10px;
+  background: ${T.bgCard};
+  border: 1px solid ${T.border};
+  border-radius: 12px;
   overflow: hidden;
   position: relative;
-  animation: ${fadeUp$2} 360ms ease both;
+  animation: ${fadeUp$1} 380ms ease both;
   animation-delay: ${(p) => (p.$delay ?? 0) * 55}ms;
-  transition: border-color 180ms ease, box-shadow 180ms ease;
-
-  ${(p) => p.$accent && `
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0; left: 0; right: 0;
-      height: 3px;
-      background: ${p.$accent};
-      z-index: 1;
-    }
-  `}
-
+  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 {
-    border-color: #c0bfff;
-    box-shadow: 0 2px 16px rgba(73,69,255,0.08);
+    background: ${(p) => p.$active ? T.accent : "rgba(0,0,0,0.05)"};
+    color: ${(p) => p.$active ? "#fff" : T.textPrimary};
   }
 `;
-const StatTop = styled.div`
-  padding: 18px 18px 10px;
+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: 10px;
+  font-size: 9px;
   font-weight: 700;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.1em;
   text-transform: uppercase;
-  color: #8e8ea9;
-  margin-bottom: 8px;
+  color: ${T.textMuted};
+  margin-bottom: 10px;
 `;
 const StatValue = styled.div`
   font-size: 30px;
   font-weight: 800;
-  color: #32324d;
+  color: ${T.textPrimary};
   line-height: 1;
-  letter-spacing: -0.05em;
+  letter-spacing: -0.045em;
   font-variant-numeric: tabular-nums;
   margin-bottom: 10px;
 `;
 const TrendBadge = styled.span`
   display: inline-flex;
   align-items: center;
-  gap: 2px;
-  padding: 2px 7px;
+  gap: 3px;
+  padding: 2px 8px;
   border-radius: 20px;
-  font-size: 10px;
+  font-size: 9px;
   font-weight: 700;
-  background: ${(p) => p.$pos ? "#eafbe7" : "#fcecea"};
-  color: ${(p) => p.$pos ? "#5cb176" : "#d02b20"};
+  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: 48px;
+  height: 44px;
+  margin: 0 -20px;
 `;
 const ChartCard = styled(Card)`
   padding: 20px 20px 12px;
@@ -2201,31 +2607,42 @@ const ChartHeader = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 12px;
   flex-shrink: 0;
 `;
 const ChartTitle = styled.div`
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 700;
-  color: #32324d;
+  color: ${T.textPrimary};
+  letter-spacing: 0.01em;
 `;
-const LegendRow = styled.div`
+const SeriesRow = styled.div`
   display: flex;
   align-items: center;
-  gap: 14px;
+  gap: 6px;
 `;
-const LegendItem = styled.div`
+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;
-  font-size: 10px;
-  color: #8e8ea9;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
+  transition: all 160ms;
+  &:hover {
+    border-color: ${(p) => `${p.$c}88`};
+    color: ${(p) => p.$c};
+    background: ${(p) => `${p.$c}22`};
+  }
 `;
-const LegendDot = styled.span`
-  width: 8px;
-  height: 8px;
+const SDot = styled.span`
+  width: 6px; height: 6px;
   border-radius: 50%;
   background: ${(p) => p.$c};
   display: inline-block;
@@ -2233,140 +2650,188 @@ const LegendDot = styled.span`
 `;
 const HoverInfo = styled.div`
   font-size: 11px;
-  color: #8e8ea9;
+  color: ${T.textSecondary};
   font-variant-numeric: tabular-nums;
-  min-height: 16px;
+  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;
-  max-height: 380px;
+  overflow: hidden;
 `;
-const FeedHeader = styled.div`
-  padding: 16px 18px 12px;
-  border-bottom: 1px solid #f0f0f7;
-  flex-shrink: 0;
-  font-size: 10px;
+const FeedHead = styled.div`
+  padding: 13px 16px 9px;
+  border-bottom: 1px solid ${T.border};
+  font-size: 11px;
   font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: #8e8ea9;
+  color: ${T.textPrimary};
+  flex-shrink: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 `;
-const FeedList = styled.div`
+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;
-  padding: 6px 0;
-  &::-webkit-scrollbar { width: 3px; }
-  &::-webkit-scrollbar-track { background: transparent; }
-  &::-webkit-scrollbar-thumb { background: #d9d8ff; border-radius: 2px; }
+  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;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 9px 18px;
-  &:hover { background: #fafafe; }
+  flex-direction: column;
+  gap: 3px;
+  transition: background 130ms;
+  &:hover { background: #fafaff; }
+  &:last-child { border-bottom: none; }
 `;
-const FeedContent = styled.div`
-  flex: 1;
-  min-width: 0;
+const FeedTop = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
 `;
-const FeedName = styled.div`
-  font-size: 12px;
+const FeedName = styled.span`
+  font-size: 11px;
   font-weight: 600;
-  color: #32324d;
-  white-space: nowrap;
+  color: ${T.textPrimary};
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 `;
-const FeedSub = styled.div`
+const FeedEmail = styled.span`
   font-size: 10px;
-  color: #8e8ea9;
-  white-space: nowrap;
+  color: ${T.textSecondary};
   overflow: hidden;
   text-overflow: ellipsis;
-  margin-top: 1px;
+  white-space: nowrap;
+  display: block;
 `;
-const FeedTime = styled.div`
-  font-size: 10px;
-  color: #b8b8c7;
+const FeedMeta = styled.span`
+  font-size: 9px;
+  color: ${T.textMuted};
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
-  margin-top: 1px;
 `;
-const UsersCard = styled(Card)``;
-const TableWrap = styled.div`
-  overflow-x: auto;
+const RtnCard = styled(Card)`
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 `;
-const Table$1 = styled.table`
-  width: 100%;
-  border-collapse: collapse;
+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 TH$1 = styled.th`
-  text-align: left;
-  padding: 10px 14px;
+const RtnLabel = styled.span`
   font-size: 10px;
-  font-weight: 700;
-  color: #8e8ea9;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  border-bottom: 1px solid #eaeaef;
-  background: #fafafa;
+  color: ${T.textSecondary};
+  min-width: 80px;
+  text-align: right;
   white-space: nowrap;
-  &:first-child { padding-left: 20px; }
-  &:last-child  { padding-right: 20px; }
 `;
-const TR$1 = styled.tr`
-  &:hover td { background: #fafafe; }
-  &:last-child td { border-bottom: none; }
+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 TD$1 = styled.td`
-  padding: 10px 14px;
-  font-size: 12px;
-  color: #32324d;
-  border-bottom: 1px solid #f5f5f9;
-  vertical-align: middle;
-  &:first-child { padding-left: 20px; }
-  &:last-child  { padding-right: 20px; }
+const RtnTrack = styled.div`
+  flex: 1;
+  height: 10px;
+  background: #eaeaef;
+  border-radius: 4px;
+  overflow: hidden;
 `;
-const StatusChip$1 = styled.span`
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: 20px;
+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;
-  background: ${(p) => p.$banned ? "#fcecea" : p.$verified ? "#eafbe7" : "#f0f0ff"};
-  color: ${(p) => p.$banned ? "#d02b20" : p.$verified ? "#5cb176" : "#8e8ea9"};
-
-  &::before {
-    content: '';
-    display: inline-block;
-    width: 5px;
-    height: 5px;
-    border-radius: 50%;
-    background: ${(p) => p.$banned ? "#d02b20" : p.$verified ? "#5cb176" : "#b8b8c7"};
-  }
+  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 Divider = styled.div`
+const RingGrid = styled.div`
   display: flex;
-  align-items: center;
+  flex-direction: column;
   gap: 10px;
-  margin-bottom: -8px;
 `;
-const DivLabel = styled.span`
-  font-size: 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.08em;
-  color: #b8b8c7;
-  white-space: nowrap;
-`;
-const DivLine = styled.div`
-  flex: 1;
-  height: 1px;
-  background: #eaeaef;
+  letter-spacing: 0.1em;
+  color: ${T.textMuted};
 `;
 const Empty = styled.div`
   display: flex;
@@ -2374,32 +2839,52 @@ const Empty = styled.div`
   align-items: center;
   justify-content: center;
   padding: 32px;
-  color: #8e8ea9;
+  color: ${T.textMuted};
   font-size: 12px;
-  gap: 6px;
+  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 = 48;
+  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 range = max - min;
   const pts = data.map((v, i) => ({
     x: i / (data.length - 1) * W,
-    y: H - 4 - (v - min) / range * (H - 10)
+    y: H - 3 - (v - min) / (max - min) * (H - 8)
   }));
-  const line = pts.reduce((acc, p, i) => {
+  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 `${acc} C ${cx} ${pr.y} ${cx} ${p.y} ${p.x} ${p.y}`;
+    return `${a} C ${cx} ${pr.y} ${cx} ${p.y} ${p.x} ${p.y}`;
   }, "");
-  const area = `${line} L ${pts[pts.length - 1].x} ${H} L 0 ${H} Z`;
+  const area = `${line} L ${pts.at(-1).x} ${H} L 0 ${H} Z`;
   const gid = `spk-${id}`;
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -2408,10 +2893,10 @@ function Sparkline({
       height: H,
       viewBox: `0 0 ${W} ${H}`,
       preserveAspectRatio: "none",
-      "aria-hidden": "true",
+      "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.25" }),
+          /* @__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})` }),
@@ -2420,57 +2905,58 @@ function Sparkline({
           {
             d: line,
             stroke: color,
-            strokeWidth: "2",
+            strokeWidth: "1.6",
             fill: "none",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+            strokeLinecap: "round"
           }
         )
       ]
     }
   );
 }
-const SERIES = [
-  { key: "totalUsers", color: "#4945FF", label: "Total" },
-  { key: "newUsers", color: "#5CB176", label: "New" },
-  { key: "activeUsers", color: "#E57553", label: "Active" }
+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 AreaChart({
+function GrowthChart({
   data,
   hovered,
-  onHover
+  onHover,
+  activeSeries
 }) {
   const W = 600;
-  const H = 220;
-  const PL = 44;
+  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 === 0) {
+  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 allVals = data.flatMap((d) => SERIES.map((s) => d[s.key]));
+  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((acc, p, i) => {
+    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 `${acc} C ${cx} ${pr.y} ${cx} ${p.y} ${p.x} ${p.y}`;
+      return `${a} C ${cx} ${pr.y} ${cx} ${p.y} ${p.x} ${p.y}`;
     }, "");
-    const area = `${path} L ${pts[pts.length - 1].x} ${PT + CH} L ${pts[0].x} ${PT + CH} Z`;
+    const area = `${path} L ${pts.at(-1).x} ${PT + CH} L ${pts[0].x} ${PT + CH} Z`;
     return { pts, path, area };
   };
-  const lines = SERIES.map((s) => ({
+  const lines = active.map((s) => ({
     ...s,
     ...smooth(data.map((d) => d[s.key]))
   }));
@@ -2493,17 +2979,17 @@ function AreaChart({
         /* @__PURE__ */ jsx("defs", { children: lines.map((s) => /* @__PURE__ */ jsxs(
           "linearGradient",
           {
-            id: `ag-${s.color.replace("#", "")}`,
+            id: `ag-${s.key}`,
             x1: "0",
             y1: "0",
             x2: "0",
             y2: "1",
             children: [
-              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: s.color, stopOpacity: "0.13" }),
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: s.color, stopOpacity: "0.18" }),
               /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: s.color, stopOpacity: "0" })
             ]
           },
-          s.color
+          s.key
         )) }),
         yTicks.map((t) => /* @__PURE__ */ jsxs("g", { children: [
           /* @__PURE__ */ jsx(
@@ -2523,7 +3009,7 @@ function AreaChart({
               x: PL - 6,
               y: t.y + 4,
               textAnchor: "end",
-              fill: "#b8b8c7",
+              fill: T.textMuted,
               fontSize: "9",
               children: t.v >= 1e3 ? `${(t.v / 1e3).toFixed(1)}k` : t.v
             }
@@ -2540,25 +3026,18 @@ function AreaChart({
             strokeWidth: "1"
           }
         ),
-        lines.map((s) => /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: s.area,
-            fill: `url(#ag-${s.color.replace("#", "")})`
-          },
-          `a-${s.color}`
-        )),
+        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: "1.8",
+            strokeWidth: "2",
             fill: "none",
             strokeLinecap: "round",
             strokeLinejoin: "round"
           },
-          `l-${s.color}`
+          `line-${s.key}`
         )),
         data.map((d, i) => {
           if (i % step !== 0 && i !== data.length - 1) return null;
@@ -2568,7 +3047,7 @@ function AreaChart({
               x: xp(i),
               y: H - 6,
               textAnchor: "middle",
-              fill: "#b8b8c7",
+              fill: T.textMuted,
               fontSize: "9",
               children: d.label
             },
@@ -2578,7 +3057,7 @@ function AreaChart({
         data.map((d, i) => {
           const isHov = hovered === i;
           return (
-            // biome-ignore lint/a11y/noStaticElementInteractions: SVG chart hover hit area
+            // biome-ignore lint/a11y/noStaticElementInteractions: SVG chart hover
             /* @__PURE__ */ jsxs(
               "g",
               {
@@ -2603,10 +3082,9 @@ function AreaChart({
                       y1: PT,
                       x2: xp(i),
                       y2: PT + CH,
-                      stroke: "#32324d",
+                      stroke: "rgba(50,50,77,0.2)",
                       strokeWidth: "1",
-                      strokeDasharray: "3 3",
-                      opacity: "0.35"
+                      strokeDasharray: "3 3"
                     }
                   ),
                   lines.map((s) => /* @__PURE__ */ jsx(
@@ -2616,11 +3094,11 @@ function AreaChart({
                       cy: yp(d[s.key]),
                       r: isHov ? 4 : 2.5,
                       fill: s.color,
-                      stroke: "white",
+                      stroke: T.bg,
                       strokeWidth: isHov ? 2 : 1,
-                      opacity: isHov ? 1 : 0.45
+                      opacity: isHov ? 1 : 0.5
                     },
-                    s.color
+                    s.key
                   ))
                 ]
               },
@@ -2632,23 +3110,70 @@ function AreaChart({
     }
   );
 }
+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 d = typeof date === "string" ? new Date(date) : date;
-  const m = Math.floor((Date.now() - d.getTime()) / 6e4);
-  if (m < 1) return "just now";
-  if (m < 60) return `${m}m ago`;
-  const h = Math.floor(m / 60);
-  if (h < 24) return `${h}h ago`;
-  return `${Math.floor(h / 24)}d ago`;
+  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 fmtDate(date) {
-  return new Date(date).toLocaleDateString(void 0, {
-    month: "short",
-    day: "numeric",
-    year: "numeric"
-  });
+function rateHue(r) {
+  return r >= 70 ? 142 : r >= 40 ? 38 : 4;
 }
-function StatCardItem({
+function StatItem({
   id,
   label,
   value,
@@ -2657,26 +3182,39 @@ function StatCardItem({
   color,
   delay = 0
 }) {
+  const animated = useCountUp(value);
   const isPos = pct === void 0 || pct >= 0;
-  return /* @__PURE__ */ jsxs(Card, { $delay: delay, $accent: color, children: [
-    /* @__PURE__ */ jsxs(StatTop, { children: [
-      /* @__PURE__ */ jsx(StatLabel, { children: label }),
-      /* @__PURE__ */ jsx(StatValue, { children: typeof value === "number" ? value.toLocaleString() : value }),
-      pct !== void 0 && /* @__PURE__ */ jsxs(TrendBadge, { $pos: isPos, children: [
-        isPos ? "↑" : "↓",
-        " ",
-        Math.abs(pct).toFixed(1),
-        "%"
-      ] })
+  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 () => {
@@ -2693,12 +3231,10 @@ function OverviewPage() {
       return r.data;
     }
   });
-  const sessionsQuery = useQuery({
-    queryKey: ["dash-recent-sessions"],
+  const retentionQuery = useQuery({
+    queryKey: ["dash-user-retention", period],
     queryFn: async () => {
-      const r = await client.dash.listAllSessions({
-        query: { page: 1, limit: 10 }
-      });
+      const r = await client.dash.userRetentionData({ query: { period } });
       if (r.error) throw new Error(r.error.message ?? "Failed");
       return r.data;
     }
@@ -2707,12 +3243,22 @@ function OverviewPage() {
     queryKey: ["dash-recent-users"],
     queryFn: async () => {
       const r = await client.dash.listUsers({
-        query: { page: 1, limit: 8, search: "" }
+        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]=createdAt:desc"
+      );
+      return data.results ?? [];
+    },
+    refetchInterval: 3e4
+  });
   const orgsQuery = useQuery({
     queryKey: ["dash-orgs-count"],
     queryFn: async () => {
@@ -2724,594 +3270,344 @@ function OverviewPage() {
     }
   });
   if (statsQuery.isLoading) {
-    return /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", padding: 12, children: /* @__PURE__ */ jsx(Loader, { children: "Loading…" }) });
+    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 sessions = sessionsQuery.data?.sessions ?? [];
-  const recentUsers = usersQuery.data?.users ?? [];
+  const rtnData = retentionQuery.data?.data ?? [];
+  const users = usersQuery.data?.users ?? [];
+  const sessions = sessionsQuery.data ?? [];
   const orgCount = orgsQuery.data?.total ?? 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;
-  return /* @__PURE__ */ jsxs(Wrap$2, { "data-testid": "overview-page", children: [
+  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$1, { "data-testid": "overview-page", children: [
     /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-end", children: [
-      /* @__PURE__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "alpha", textColor: "neutral800", children: "Overview" }),
-        /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: (/* @__PURE__ */ new Date()).toLocaleDateString(void 0, {
+      /* @__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(Box, { width: "150px", children: /* @__PURE__ */ jsxs(
-        SingleSelect,
-        {
-          value: period,
-          onChange: (v) => setPeriod(v),
-          size: "S",
-          "aria-label": "Select period",
-          children: [
-            /* @__PURE__ */ jsx(SingleSelectOption, { value: "daily", children: "Daily" }),
-            /* @__PURE__ */ jsx(SingleSelectOption, { value: "weekly", children: "Weekly" }),
-            /* @__PURE__ */ jsx(SingleSelectOption, { value: "monthly", children: "Monthly" })
-          ]
-        }
-      ) })
+      /* @__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(Divider, { children: [
-      /* @__PURE__ */ jsx(DivLabel, { children: "Sign-ups" }),
+    /* @__PURE__ */ jsxs(SectionDivider, { children: [
+      /* @__PURE__ */ jsx(DivLabel, { children: "Metrics" }),
       /* @__PURE__ */ jsx(DivLine, {})
     ] }),
-    /* @__PURE__ */ jsxs(StatRow, { children: [
+    /* @__PURE__ */ jsxs(StatGrid, { children: [
       /* @__PURE__ */ jsx(
-        StatCardItem,
+        StatItem,
         {
           id: "total",
           label: "Total Users",
           value: stats.total ?? 0,
           sparkline: totalSpark,
-          color: "#4945FF",
+          color: T.accent,
           delay: 0
         }
       ),
       /* @__PURE__ */ jsx(
-        StatCardItem,
+        StatItem,
         {
           id: "d-sig",
           label: "Daily Sign-ups",
           value: stats.daily.signUps ?? 0,
           pct: stats.daily.percentage ?? void 0,
           sparkline: newSpark,
-          color: "#5CB176",
+          color: T.green,
           delay: 1
         }
       ),
       /* @__PURE__ */ jsx(
-        StatCardItem,
+        StatItem,
         {
           id: "w-sig",
           label: "Weekly Sign-ups",
           value: stats.weekly.signUps ?? 0,
           pct: stats.weekly.percentage ?? void 0,
           sparkline: newSpark,
-          color: "#5CB176",
+          color: T.green,
           delay: 2
         }
-      ),
-      /* @__PURE__ */ jsx(
-        StatCardItem,
-        {
-          id: "m-sig",
-          label: "Monthly Sign-ups",
-          value: stats.monthly.signUps ?? 0,
-          pct: stats.monthly.percentage ?? void 0,
-          sparkline: newSpark,
-          color: "#5CB176",
-          delay: 3
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        StatCardItem,
-        {
-          id: "orgs",
-          label: "Organizations",
-          value: orgCount,
-          color: "#9E6BF9",
-          delay: 4
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(MainRow, { children: [
-      /* @__PURE__ */ jsxs(ChartCard, { $delay: 5, children: [
-        /* @__PURE__ */ jsxs(ChartHeader, { children: [
-          /* @__PURE__ */ jsx(ChartTitle, { children: "User Growth" }),
-          /* @__PURE__ */ jsx(LegendRow, { children: SERIES.map((s) => /* @__PURE__ */ jsxs(LegendItem, { children: [
-            /* @__PURE__ */ jsx(LegendDot, { $c: s.color }),
-            s.label
-          ] }, s.color)) })
-        ] }),
-        /* @__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: 180 },
-            children: /* @__PURE__ */ jsx(Loader, { children: "Loading…" })
-          }
-        ) : /* @__PURE__ */ jsx(AreaChart, { data: graphData, hovered: hovIdx, onHover: setHovIdx })
-      ] }),
-      /* @__PURE__ */ jsxs(FeedCard, { $delay: 6, children: [
-        /* @__PURE__ */ jsx(FeedHeader, { children: "Recent Sessions" }),
-        /* @__PURE__ */ jsx(FeedList, { children: sessionsQuery.isLoading ? /* @__PURE__ */ jsx(Empty, { children: /* @__PURE__ */ jsx(Loader, { children: "Loading…" }) }) : sessions.length === 0 ? /* @__PURE__ */ jsx(Empty, { children: "No recent sessions" }) : sessions.map((s) => /* @__PURE__ */ jsxs(FeedItem, { children: [
-          /* @__PURE__ */ jsx(
-            Avatar,
-            {
-              name: s.user?.name ?? "?",
-              src: s.user?.image,
-              size: 28
-            }
-          ),
-          /* @__PURE__ */ jsxs(FeedContent, { children: [
-            /* @__PURE__ */ jsx(FeedName, { children: s.user?.name ?? "Unknown" }),
-            /* @__PURE__ */ jsx(FeedSub, { children: s.user?.email ?? "" }),
-            /* @__PURE__ */ jsx(FeedTime, { children: relTime(s.createdAt) })
-          ] })
-        ] }, s.id)) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(Divider, { children: [
-      /* @__PURE__ */ jsx(DivLabel, { children: "Active Users" }),
-      /* @__PURE__ */ jsx(DivLine, {})
-    ] }),
-    /* @__PURE__ */ jsxs(ActiveRow, { children: [
-      /* @__PURE__ */ jsx(
-        StatCardItem,
-        {
-          id: "d-act",
-          label: "Daily Active",
-          value: stats.activeUsers.daily.active ?? 0,
-          pct: stats.activeUsers.daily.percentage ?? void 0,
-          sparkline: activeSpark,
-          color: "#E57553",
-          delay: 7
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        StatCardItem,
-        {
-          id: "w-act",
-          label: "Weekly Active",
-          value: stats.activeUsers.weekly.active ?? 0,
-          pct: stats.activeUsers.weekly.percentage ?? void 0,
-          sparkline: activeSpark,
-          color: "#E57553",
-          delay: 8
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        StatCardItem,
-        {
-          id: "m-act",
-          label: "Monthly Active",
-          value: stats.activeUsers.monthly.active ?? 0,
-          pct: stats.activeUsers.monthly.percentage ?? void 0,
-          sparkline: activeSpark,
-          color: "#E57553",
-          delay: 9
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(Divider, { children: [
-      /* @__PURE__ */ jsx(DivLabel, { children: "Recent Users" }),
-      /* @__PURE__ */ jsx(DivLine, {})
-    ] }),
-    /* @__PURE__ */ jsx(UsersCard, { $delay: 10, children: /* @__PURE__ */ jsx(TableWrap, { children: /* @__PURE__ */ jsxs(Table$1, { children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: ["User", "Email", "Joined", "Status"].map((h) => /* @__PURE__ */ jsx(TH$1, { children: h }, h)) }) }),
-      /* @__PURE__ */ jsx("tbody", { children: usersQuery.isLoading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(TD$1, { colSpan: 4, style: { textAlign: "center", padding: 28 }, children: /* @__PURE__ */ jsx(Loader, { children: "Loading users…" }) }) }) : recentUsers.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-        TD$1,
-        {
-          colSpan: 4,
-          style: {
-            textAlign: "center",
-            padding: 28,
-            color: "#8e8ea9"
-          },
-          children: "No users yet"
-        }
-      ) }) : recentUsers.map((u) => /* @__PURE__ */ jsxs(TR$1, { children: [
-        /* @__PURE__ */ jsx(TD$1, { children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
-          /* @__PURE__ */ jsx(Avatar, { name: u.name, src: u.image, size: 26 }),
-          /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: 12 }, children: u.name })
-        ] }) }),
-        /* @__PURE__ */ jsx(
-          TD$1,
-          {
-            style: {
-              color: "#8e8ea9",
-              fontFamily: "monospace",
-              fontSize: 11
-            },
-            children: u.email
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          TD$1,
-          {
-            style: {
-              color: "#8e8ea9",
-              fontSize: 11,
-              whiteSpace: "nowrap"
-            },
-            children: fmtDate(u.createdAt)
-          }
-        ),
-        /* @__PURE__ */ jsx(TD$1, { children: /* @__PURE__ */ jsx(
-          StatusChip$1,
-          {
-            $verified: u.emailVerified,
-            $banned: u.banned,
-            children: u.banned ? "Banned" : u.emailVerified ? "Verified" : "Unverified"
-          }
-        ) })
-      ] }, u.id)) })
-    ] }) }) })
-  ] });
-}
-const PAGE_SIZE$1 = 25;
-const fadeUp$1 = keyframes`
-  from { opacity: 0; transform: translateY(6px); }
-  to   { opacity: 1; transform: translateY(0); }
-`;
-const Wrap$1 = styled.div`
-  padding: 28px 32px;
-  background: #f6f6f9;
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-`;
-const PageHeader$1 = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-`;
-const TitleBlock$1 = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-`;
-const PageTitle$1 = styled.h1`
-  margin: 0;
-  font-size: 22px;
-  font-weight: 800;
-  color: #32324d;
-  letter-spacing: -0.03em;
-`;
-const PageSubtitle$1 = styled.p`
-  margin: 0;
-  font-size: 12px;
-  color: #8e8ea9;
-`;
-const TableCard$1 = styled.div`
-  background: #ffffff;
-  border: 1px solid #eaeaef;
-  border-radius: 10px;
-  overflow: hidden;
-`;
-const ColumnHeader = styled.div`
-  padding: 10px 20px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  background: #fafafa;
-  border-bottom: 1px solid #eaeaef;
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: #8e8ea9;
-`;
-const ColumnHeaderRight = styled.div`
-  margin-left: auto;
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: #8e8ea9;
-`;
-const UserGroup = styled.div`
-  border-bottom: 1px solid #eaeaef;
-  animation: ${fadeUp$1} 280ms ease both;
-  animation-delay: ${(p) => (p.$i ?? 0) * 30}ms;
-  &:last-child { border-bottom: none; }
-`;
-const UserRowHeader = styled.div`
-  padding: 14px 20px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  border-bottom: 1px solid #f5f5f9;
-  cursor: default;
-  &:hover { background: #fafafe; }
-`;
-const UserInfo = styled.div`
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-`;
-const UserName$1 = styled.span`
-  font-size: 12px;
-  font-weight: 600;
-  color: #32324d;
-`;
-const UserEmail = styled.span`
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
-  font-size: 11px;
-  color: #8e8ea9;
-`;
-const SessionCountChip = styled.span`
-  display: inline-flex;
-  align-items: center;
-  padding: 2px 8px;
-  border-radius: 20px;
-  font-size: 10px;
-  font-weight: 700;
-  background: #f0f0ff;
-  color: #4945ff;
-`;
-const SessionCard = styled.div`
-  padding: 10px 20px 10px 64px;
-  border-top: 1px solid #f5f5f9;
-  background: #fafafa;
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  &:hover { background: #f5f5ff; }
-`;
-const SessionMeta = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  flex: 1;
-  min-width: 0;
-`;
-const IpChip = styled.span`
-  display: inline-block;
-  background: #f0f0ff;
-  color: #4945ff;
-  border-radius: 5px;
-  padding: 2px 6px;
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
-  font-size: 11px;
-  font-weight: 600;
-`;
-const TimestampText = styled.span`
-  font-size: 11px;
-  color: #8e8ea9;
-  font-variant-numeric: tabular-nums;
-`;
-const AgentText = styled.span`
-  font-size: 11px;
-  color: #b8b8c7;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: block;
-  max-width: 400px;
-`;
-const EmptyState = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 48px;
-  font-size: 12px;
-  color: #8e8ea9;
-`;
-function SessionsPage() {
-  const qc = useQueryClient();
-  const [page, setPage] = useState(1);
-  const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
-  const [confirmRevokeSessionId, setConfirmRevokeSessionId] = useState(null);
-  const [confirmRevokeMany, setConfirmRevokeMany] = useState(false);
-  const sessionsQuery = useQuery({
-    queryKey: ["dash-all-sessions", page],
-    queryFn: async () => {
-      const result = await client.dash.listAllSessions({});
-      if (result.error)
-        throw new Error(result.error.message ?? "Failed to load sessions");
-      return result.data ?? [];
-    },
-    keepPreviousData: true
-  });
-  const revokeSessionMutation = useMutation({
-    mutationFn: async (sessionId) => {
-      const result = await client.dash.sessions.revoke(
-        {},
-        withContext({ sessionId })
-      );
-      if (result.error)
-        throw new Error(result.error.message ?? "Revoke failed");
-    },
-    onSuccess: () => {
-      setConfirmRevokeSessionId(null);
-      qc.invalidateQueries({ queryKey: ["dash-all-sessions"] });
-    }
-  });
-  const revokeManyMutation = useMutation({
-    mutationFn: async (userIds) => {
-      const result = await client.dash.sessions.revokeMany(
-        {},
-        withContext({ userIds })
-      );
-      if (result.error)
-        throw new Error(result.error.message ?? "Revoke failed");
-      return result.data;
-    },
-    onSuccess: () => {
-      setConfirmRevokeMany(false);
-      setSelected(/* @__PURE__ */ new Set());
-      qc.invalidateQueries({ queryKey: ["dash-all-sessions"] });
-    }
-  });
-  const usersWithSessions = sessionsQuery.data ?? [];
-  const allUserIds = usersWithSessions.map((u) => u.id);
-  const allSelected = allUserIds.length > 0 && allUserIds.every((id) => selected.has(id));
-  const someSelected = selected.size > 0;
-  const toggleSelect = (id) => {
-    setSelected((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
-  const handleSelectAll = () => {
-    if (allSelected) setSelected(/* @__PURE__ */ new Set());
-    else setSelected(new Set(allUserIds));
-  };
-  return /* @__PURE__ */ jsxs(Wrap$1, { "data-testid": "sessions-page", children: [
-    /* @__PURE__ */ jsxs(PageHeader$1, { children: [
-      /* @__PURE__ */ jsxs(TitleBlock$1, { children: [
-        /* @__PURE__ */ jsx(PageTitle$1, { children: "Sessions" }),
-        /* @__PURE__ */ jsx(PageSubtitle$1, { children: usersWithSessions.length > 0 ? `${usersWithSessions.length} user${usersWithSessions.length !== 1 ? "s" : ""} with active sessions` : "Active sessions across all users" })
-      ] }),
-      someSelected && /* @__PURE__ */ jsxs(
-        Button,
+      ),
+      /* @__PURE__ */ jsx(
+        StatItem,
         {
-          variant: "danger-light",
-          size: "S",
-          onClick: () => setConfirmRevokeMany(true),
-          "data-testid": "revoke-selected-btn",
-          children: [
-            "Revoke sessions for ",
-            selected.size,
-            " user",
-            selected.size !== 1 ? "s" : ""
-          ]
+          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
         }
       )
     ] }),
-    sessionsQuery.isError && /* @__PURE__ */ jsx("div", { style: { color: "#d02b20", fontSize: 12, padding: "8px 0" }, children: sessionsQuery.error instanceof Error ? sessionsQuery.error.message : "An error occurred" }),
-    /* @__PURE__ */ jsx(TableCard$1, { children: sessionsQuery.isLoading ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsx(Loader, { children: "Loading sessions…" }) }) : usersWithSessions.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { children: "No active sessions" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(ColumnHeader, { children: [
-        /* @__PURE__ */ jsx(
-          Checkbox,
+    /* @__PURE__ */ jsxs(SectionDivider, { children: [
+      /* @__PURE__ */ jsx(DivLabel, { children: "Growth" }),
+      /* @__PURE__ */ jsx(DivLine, {})
+    ] }),
+    /* @__PURE__ */ jsxs(TwoPanel, { children: [
+      /* @__PURE__ */ jsxs(ChartCard, { $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,
           {
-            checked: allSelected,
-            onCheckedChange: handleSelectAll,
-            "aria-label": "Select all users"
+            justifyContent: "center",
+            alignItems: "center",
+            style: { flex: 1, minHeight: 170 },
+            children: /* @__PURE__ */ jsx(Loader, { children: "Loading…" })
           }
-        ),
-        /* @__PURE__ */ jsx("span", { children: "User / Sessions" }),
-        /* @__PURE__ */ jsx(ColumnHeaderRight, { children: "Sessions" })
+        ) : /* @__PURE__ */ jsx(
+          GrowthChart,
+          {
+            data: graphData,
+            hovered: hovIdx,
+            onHover: setHovIdx,
+            activeSeries
+          }
+        )
       ] }),
-      usersWithSessions.map((userRow, i) => /* @__PURE__ */ jsxs(UserGroup, { $i: i, "data-testid": "session-user-row", children: [
-        /* @__PURE__ */ jsxs(UserRowHeader, { children: [
-          /* @__PURE__ */ jsx(
-            Checkbox,
+      /* @__PURE__ */ jsxs(FeedCard, { $delay: 6, children: [
+        /* @__PURE__ */ jsxs(FeedHead, { children: [
+          /* @__PURE__ */ jsx("span", { children: feedMode === "signups" ? "Recent Sign-ups" : "Recent Active" }),
+          /* @__PURE__ */ jsxs(
+            FeedSelect,
             {
-              checked: selected.has(userRow.id),
-              onCheckedChange: () => toggleSelect(userRow.id),
-              "aria-label": `Select ${userRow.name}`
+              value: feedMode,
+              onChange: (e) => setFeedMode(e.target.value),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "signups", children: "Recent Sign-ups" }),
+                /* @__PURE__ */ jsx("option", { value: "active", children: "Recent Active" })
+              ]
             }
-          ),
-          /* @__PURE__ */ jsx(Avatar, { name: userRow.name ?? "", src: null, size: 30 }),
-          /* @__PURE__ */ jsxs(UserInfo, { children: [
-            /* @__PURE__ */ jsx(UserName$1, { children: userRow.name }),
-            /* @__PURE__ */ jsx(UserEmail, { children: userRow.email })
-          ] }),
-          /* @__PURE__ */ jsxs(SessionCountChip, { children: [
-            userRow.sessions.length,
-            " session",
-            userRow.sessions.length !== 1 ? "s" : ""
-          ] })
+          )
         ] }),
-        userRow.sessions.map((session) => /* @__PURE__ */ jsxs(SessionCard, { "data-testid": "session-row", children: [
-          /* @__PURE__ */ jsxs(SessionMeta, { children: [
-            /* @__PURE__ */ jsxs(
-              Flex,
+        /* @__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)) : sessionsQuery.isLoading ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsx(Loader, { children: "Loading…" }) }) : sessions.length === 0 ? /* @__PURE__ */ jsx(Empty, { children: "No sessions yet" }) : sessions.map((s) => /* @__PURE__ */ jsxs(FeedItem, { children: [
+          /* @__PURE__ */ jsxs(FeedTop, { children: [
+            /* @__PURE__ */ jsx(
+              FeedName,
               {
-                gap: 2,
-                alignItems: "center",
-                style: { flexWrap: "wrap" },
-                children: [
-                  session.ipAddress && /* @__PURE__ */ jsx(IpChip, { children: session.ipAddress }),
-                  /* @__PURE__ */ jsxs(TimestampText, { children: [
-                    "Created ",
-                    new Date(session.createdAt).toLocaleString(),
-                    " ",
-                    "· Expires",
-                    " ",
-                    new Date(session.expiresAt).toLocaleString()
-                  ] })
-                ]
+                title: s.userAgent ?? void 0,
+                style: { fontFamily: T.mono, fontSize: 10 },
+                children: s.ipAddress ?? "—"
               }
             ),
-            session.userAgent && /* @__PURE__ */ jsx(AgentText, { children: session.userAgent })
+            /* @__PURE__ */ jsx(FeedMeta, { children: relTime(s.createdAt) })
           ] }),
           /* @__PURE__ */ jsx(
-            IconButton,
+            FeedEmail,
             {
-              label: "Revoke session",
-              onClick: () => setConfirmRevokeSessionId(session.id),
-              style: { flexShrink: 0 },
-              "data-testid": "revoke-session-btn",
-              children: /* @__PURE__ */ jsx(Trash, {})
+              title: s.userAgent ?? void 0,
+              style: {
+                fontSize: 9,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: s.userAgent ?? "Unknown agent"
             }
           )
-        ] }, session.id))
-      ] }, userRow.id))
-    ] }) }),
-    usersWithSessions.length === PAGE_SIZE$1 && /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-      /* @__PURE__ */ jsx(
-        Button,
+        ] }, s.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: [
         {
-          variant: "tertiary",
-          size: "S",
-          disabled: page === 1,
-          onClick: () => setPage((p) => p - 1),
-          children: "Previous"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
+          label: "Daily Active",
+          value: stats.activeUsers.daily.active,
+          pct: stats.activeUsers.daily.percentage,
+          color: T.amber,
+          sparkline: activeSpark,
+          delay: 8
+        },
         {
-          variant: "tertiary",
-          size: "S",
-          onClick: () => setPage((p) => p + 1),
-          children: "Next"
+          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
         }
-      )
-    ] }) }),
-    confirmRevokeSessionId && /* @__PURE__ */ jsx(
-      ConfirmDialog,
-      {
-        title: "Revoke session",
-        message: "Are you sure you want to revoke this session? The user will be signed out on this device.",
-        confirmLabel: "Revoke",
-        loading: revokeSessionMutation.isLoading,
-        onConfirm: () => revokeSessionMutation.mutate(confirmRevokeSessionId),
-        onCancel: () => setConfirmRevokeSessionId(null)
-      }
-    ),
-    confirmRevokeMany && /* @__PURE__ */ jsx(
-      ConfirmDialog,
-      {
-        title: `Revoke sessions for ${selected.size} user${selected.size !== 1 ? "s" : ""}`,
-        message: `Are you sure you want to revoke all sessions for ${selected.size} user${selected.size !== 1 ? "s" : ""}? They will be signed out on all their devices.`,
-        confirmLabel: "Revoke all",
-        loading: revokeManyMutation.isLoading,
-        onConfirm: () => revokeManyMutation.mutate([...selected]),
-        onCancel: () => setConfirmRevokeMany(false)
-      }
-    )
+      ].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 useUsers(options = {}) {
@@ -3552,6 +3848,44 @@ const ReadOnlyCodeInput = styled.div`
   word-break: break-all;
   overflow-wrap: anywhere;
 `;
+const SessionCard = styled.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid #f5f5f9;
+  &:last-child { border-bottom: none; }
+`;
+const SessionMeta = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  flex: 1;
+  min-width: 0;
+`;
+const IpChip = styled.span`
+  display: inline-block;
+  background: #f0f0ff;
+  color: #4945ff;
+  border-radius: 5px;
+  padding: 2px 6px;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 11px;
+  font-weight: 600;
+`;
+const TimestampText = styled.span`
+  font-size: 11px;
+  color: #8e8ea9;
+`;
+const AgentText = styled.span`
+  font-size: 11px;
+  color: #b8b8c7;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+`;
 const STANDARD_FIELDS = /* @__PURE__ */ new Set([
   "id",
   "name",
@@ -3573,6 +3907,7 @@ function UserDetailDrawer({
 }) {
   const qc = useQueryClient();
   const { toggleNotification } = useNotification();
+  const { get, put } = useFetchClient();
   const schemaQuery = useModelSchema("user");
   const userQuery = useQuery({
     queryKey: ["dash-user", userId],
@@ -3594,6 +3929,27 @@ function UserDetailDrawer({
       return result.data?.organizations ?? [];
     }
   });
+  const sessionsQuery = useQuery({
+    queryKey: ["dash-user-sessions", userId],
+    queryFn: async () => {
+      const { data } = await get(
+        `/better-auth-dashboard/db?uid=plugin::better-auth.session&filters[userId][$eq]=${userId}&sort[0]=createdAt:desc&pagination[pageSize]=50`
+      );
+      return data.results ?? [];
+    }
+  });
+  const strapiUserQuery = useQuery({
+    queryKey: ["dash-strapi-user", userId],
+    enabled: !!schemaQuery.data,
+    queryFn: async () => {
+      const relationFields = Object.entries(schemaQuery.data).filter(([, attr]) => attr.type === "relation").map(([fieldName]) => fieldName);
+      const populateParam = relationFields.length > 0 ? `&populate=${encodeURIComponent(relationFields.join(","))}` : "";
+      const { data } = await get(
+        `/better-auth-dashboard/db?uid=plugin::better-auth.user&filters[id][$eq]=${userId}&pagination[pageSize]=1${populateParam}`
+      );
+      return data.results?.[0] ?? null;
+    }
+  });
   const [activeTab, setActiveTab] = useState("profile");
   const [editName, setEditName] = useState(void 0);
   const [editEmail, setEditEmail] = useState(void 0);
@@ -3604,6 +3960,7 @@ function UserDetailDrawer({
   const [banReason, setBanReason] = useState("");
   const [banExpiresDays, setBanExpiresDays] = useState("");
   const [confirmRevokeAll, setConfirmRevokeAll] = useState(false);
+  const [confirmRevokeSessionId, setConfirmRevokeSessionId] = useState(null);
   const [confirmUnban, setConfirmUnban] = useState(false);
   const [confirmUnlinkAccountId, setConfirmUnlinkAccountId] = useState(null);
   const [confirmDisable2FA, setConfirmDisable2FA] = useState(false);
@@ -3622,28 +3979,43 @@ function UserDetailDrawer({
     setEditExtra((prev) => ({ ...prev, [name]: value }));
   };
   const extraData = {
-    ...user,
+    ...strapiUserQuery.data ?? {},
     ...editExtra
   };
   const updateMutation = useMutation({
     mutationFn: async () => {
-      const body = { ...editExtra };
-      if (editName !== void 0) body.name = editName;
-      if (editEmail !== void 0) body.email = editEmail;
+      const baBody = {};
+      if (editName !== void 0) baBody.name = editName;
+      if (editEmail !== void 0) baBody.email = editEmail;
       if (editEmailVerified !== void 0)
-        body.emailVerified = editEmailVerified;
-      if (editImage !== void 0) body.image = editImage;
-      const result = await client.dash.updateUser(
-        body,
-        withContext({ userId })
-      );
-      if (result.error)
-        throw new Error(result.error.message ?? "Update failed");
-      return result.data;
+        baBody.emailVerified = editEmailVerified;
+      if (editImage !== void 0) baBody.image = editImage;
+      const ops = [];
+      if (Object.keys(baBody).length > 0) {
+        ops.push(
+          client.dash.updateUser(baBody, withContext({ userId })).then((result) => {
+            if (result.error)
+              throw new Error(result.error.message ?? "Update failed");
+          })
+        );
+      }
+      if (Object.keys(editExtra).length > 0) {
+        const documentId = strapiUserQuery.data?.documentId;
+        if (!documentId)
+          throw new Error("Could not resolve documentId for user");
+        ops.push(
+          put(
+            `/better-auth-dashboard/db/${documentId}?uid=plugin::better-auth.user`,
+            editExtra
+          )
+        );
+      }
+      await Promise.all(ops);
     },
     onSuccess: () => {
       qc.invalidateQueries({ queryKey: ["dash-user", userId] });
       qc.invalidateQueries({ queryKey: ["dash-users"] });
+      qc.invalidateQueries({ queryKey: ["dash-strapi-user", userId] });
       setEditName(void 0);
       setEditEmail(void 0);
       setEditEmailVerified(void 0);
@@ -3662,6 +4034,27 @@ function UserDetailDrawer({
       });
     }
   });
+  const revokeSessionMutation = useMutation({
+    mutationFn: async (sessionId) => {
+      const result = await client.dash.sessions.revoke(
+        {},
+        withContext({ sessionId })
+      );
+      if (result.error)
+        throw new Error(result.error.message ?? "Revoke failed");
+    },
+    onSuccess: () => {
+      setConfirmRevokeSessionId(null);
+      qc.invalidateQueries({ queryKey: ["dash-user-sessions", userId] });
+      toggleNotification({ type: "success", message: "Session revoked" });
+    },
+    onError: (err) => {
+      toggleNotification({
+        type: "danger",
+        message: err.message ?? "Failed to revoke session"
+      });
+    }
+  });
   const passwordMutation = useMutation({
     mutationFn: async () => {
       const result = await client.dash.setPassword(
@@ -4424,25 +4817,55 @@ function UserDetailDrawer({
               }
             ) })
           ] }) }) }),
-          /* @__PURE__ */ jsx(Tabs.Content, { value: "sessions", children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 5, paddingTop: 6, children: /* @__PURE__ */ jsxs(FormSection, { children: [
-            /* @__PURE__ */ jsx(SectionLabel, { children: "Session management" }),
-            /* @__PURE__ */ jsxs(AccountRow, { children: [
-              /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "flex-start", children: [
-                /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", children: "Revoke all sessions" }),
-                /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "Signs the user out immediately on all devices." })
-              ] }),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "danger-light",
-                  size: "S",
-                  onClick: () => setConfirmRevokeAll(true),
-                  style: { flexShrink: 0 },
-                  children: "Revoke all"
-                }
-              )
+          /* @__PURE__ */ jsx(Tabs.Content, { value: "sessions", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 5, paddingTop: 6, children: [
+            /* @__PURE__ */ jsxs(FormSection, { children: [
+              /* @__PURE__ */ jsx(SectionLabel, { children: "Session management" }),
+              /* @__PURE__ */ jsxs(AccountRow, { children: [
+                /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "flex-start", children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", children: "Revoke all sessions" }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "Signs the user out immediately on all devices." })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "danger-light",
+                    size: "S",
+                    onClick: () => setConfirmRevokeAll(true),
+                    style: { flexShrink: 0 },
+                    children: "Revoke all"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(FormSection, { children: [
+              /* @__PURE__ */ jsx(SectionLabel, { children: "Active sessions" }),
+              sessionsQuery.isLoading ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsx(Loader, { children: "Loading sessions…" }) }) : (sessionsQuery.data ?? []).length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "No active sessions." }) : /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 0, alignItems: "stretch", children: (sessionsQuery.data ?? []).map((session) => /* @__PURE__ */ jsxs(SessionCard, { children: [
+                /* @__PURE__ */ jsxs(SessionMeta, { children: [
+                  /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", style: { flexWrap: "wrap" }, children: [
+                    session.ipAddress && /* @__PURE__ */ jsx(IpChip, { children: session.ipAddress }),
+                    /* @__PURE__ */ jsxs(TimestampText, { children: [
+                      "Created",
+                      " ",
+                      new Date(session.createdAt).toLocaleString(),
+                      " · Expires",
+                      " ",
+                      new Date(session.expiresAt).toLocaleString()
+                    ] })
+                  ] }),
+                  session.userAgent && /* @__PURE__ */ jsx(AgentText, { children: session.userAgent })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    label: "Revoke session",
+                    onClick: () => setConfirmRevokeSessionId(String(session.id)),
+                    style: { flexShrink: 0 },
+                    children: /* @__PURE__ */ jsx(Trash, {})
+                  }
+                )
+              ] }, session.documentId)) })
             ] })
-          ] }) }) }),
+          ] }) }),
           /* @__PURE__ */ jsx(Tabs.Content, { value: "organizations", children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 5, paddingTop: 6, children: /* @__PURE__ */ jsxs(FormSection, { children: [
             /* @__PURE__ */ jsx(SectionLabel, { children: "Memberships" }),
             orgsQuery.isLoading ? /* @__PURE__ */ jsx(Typography, { textColor: "neutral500", children: "Loading…" }) : (orgsQuery.data ?? []).length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "Not a member of any organizations." }) : /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, children: (orgsQuery.data ?? []).map(
@@ -4479,6 +4902,17 @@ function UserDetailDrawer({
             onCancel: () => setConfirmRevokeAll(false)
           }
         ),
+        confirmRevokeSessionId && /* @__PURE__ */ jsx(
+          ConfirmDialog,
+          {
+            title: "Revoke session",
+            message: "Are you sure you want to revoke this session? The user will be signed out on this device.",
+            confirmLabel: "Revoke",
+            loading: revokeSessionMutation.isLoading,
+            onConfirm: () => revokeSessionMutation.mutate(confirmRevokeSessionId),
+            onCancel: () => setConfirmRevokeSessionId(null)
+          }
+        ),
         confirmUnban && /* @__PURE__ */ jsx(
           ConfirmDialog,
           {
@@ -5013,8 +5447,7 @@ const Accent = styled.div`
 const BrandIcon = styled.div`
   width: 30px;
   height: 30px;
-  border-radius: 7px;
-  background: linear-gradient(135deg, #4945ff 0%, #7b79ff 100%);
+  background: black;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -5090,7 +5523,7 @@ function App() {
                     paddingBottom: 4,
                     children: [
                       /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
-                        /* @__PURE__ */ jsx(BrandIcon, { children: "BA" }),
+                        /* @__PURE__ */ jsx(BrandIcon, { children: /* @__PURE__ */ jsx(PluginIcon, {}) }),
                         /* @__PURE__ */ jsxs(Box, { children: [
                           /* @__PURE__ */ jsx(Typography, { variant: "beta", textColor: "neutral800", children: "Better Auth" }),
                           /* @__PURE__ */ jsx(Box, { paddingTop: "2px", children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "Authentication Dashboard" }) })
@@ -5110,8 +5543,7 @@ function App() {
                       "data-testid": "nav-organizations",
                       children: "Organizations"
                     }
-                  ),
-                  /* @__PURE__ */ jsx(Tabs.Trigger, { value: "sessions", "data-testid": "nav-sessions", children: "Sessions" })
+                  )
                 ] })
               ]
             }
@@ -5121,8 +5553,7 @@ function App() {
     ),
     /* @__PURE__ */ jsx(Tabs.Content, { value: "overview", "data-testid": "tab-overview", children: /* @__PURE__ */ jsx(OverviewPage, {}) }),
     /* @__PURE__ */ jsx(Tabs.Content, { value: "users", "data-testid": "tab-users", children: /* @__PURE__ */ jsx(UsersPage, { config }) }),
-    orgEnabled && /* @__PURE__ */ jsx(Tabs.Content, { value: "organizations", "data-testid": "tab-organizations", children: /* @__PURE__ */ jsx(OrganizationsPage, { teamsEnabled }) }),
-    /* @__PURE__ */ jsx(Tabs.Content, { value: "sessions", "data-testid": "tab-sessions", children: /* @__PURE__ */ jsx(SessionsPage, {}) })
+    orgEnabled && /* @__PURE__ */ jsx(Tabs.Content, { value: "organizations", "data-testid": "tab-organizations", children: /* @__PURE__ */ jsx(OrganizationsPage, { teamsEnabled }) })
   ] }) });
 }
 function Root() {