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

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

@@ -1,13 +1,15 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useEffect, useState, useMemo } from "react";
+import { useId, 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 { NavLink, Outlet, Routes, Route, Navigate, useOutletContext } from "react-router-dom";
+import { Typography, ScrollArea, Box, Flex, Badge, SubNav as SubNav$1, Divider, Loader, Alert, Modal, Button, Portal, IconButton, Field, TextInput, Combobox, ComboboxOption, Checkbox, SingleSelect, SingleSelectOption, NumberInput, JSONInput, Textarea, Tabs, Grid, SearchForm, Searchbar } from "@strapi/design-system";
+import { useRBAC, Page, Layouts, BackButton, useNotification, useFetchClient } from "@strapi/strapi/admin";
 import { dashClient } from "@better-auth/infra/client";
 import { createAuthClient, InferPlugin } from "better-auth/client";
-import { Cross, Images, Plus, Trash, Pencil } from "@strapi/icons";
-import { useNotification, useFetchClient } from "@strapi/strapi/admin";
-import { g as getMediaLibraryComponent } from "./index-Cvcysa5M.mjs";
+import { useIntl } from "react-intl";
+import { P as PLUGIN_ID, a as PERMISSIONS, g as getMediaLibraryComponent, b as getEditViewSidePanels } from "./index-X2-Fh6sz.mjs";
+import { Cross, Images, Trash, Plus, Pencil } from "@strapi/icons";
+import styled, { keyframes } from "styled-components";
 const dashPathMethods = () => ({
   id: "dash-path-methods",
   pathMethods: {
@@ -99,6 +101,315 @@ const client = createAuthClient({
     headers: getAuthHeaders()
   }
 });
+const getTranslation = (id) => `${PLUGIN_ID}.${id}`;
+const HEIGHT_TOP_NAVIGATION = "6.4rem";
+const HEIGHT_TOP_NAVIGATION_MEDIUM = "5.6rem";
+const WIDTH_SIDE_NAVIGATION = "23.2rem";
+const MainSubNav = styled(SubNav$1)`
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: ${({ theme }) => theme.colors.neutral0};
+  display: flex;
+  flex-direction: column;
+  border-right: 0;
+  box-shadow: none;
+  position: relative;
+
+  ${({ theme }) => theme.breakpoints.medium} {
+    width: ${WIDTH_SIDE_NAVIGATION};
+    position: sticky;
+    top: 0;
+    border-right: 1px solid ${({ theme }) => theme.colors.neutral150};
+    overscroll-behavior: contain;
+  }
+`;
+const Main = ({ children, ...props }) => /* @__PURE__ */ jsx(MainSubNav, { ...props, children });
+const StyledLink = styled(NavLink)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-decoration: none;
+  height: 32px;
+  color: ${({ theme }) => theme.colors.neutral800};
+
+  &.active > div {
+    background-color: ${({ theme }) => theme.colors.primary100};
+    color: ${({ theme }) => theme.colors.primary700};
+    font-weight: 500;
+  }
+
+  &:hover.active > div {
+    background-color: ${({ theme }) => theme.colors.primary100};
+    color: ${({ theme }) => theme.colors.primary700};
+    font-weight: 500;
+  }
+
+  &:hover > div {
+    background-color: ${({ theme }) => theme.colors.neutral100};
+  }
+
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+`;
+const Link = (props) => {
+  const { to, label, endAction, handleClick, ...rest } = props;
+  return /* @__PURE__ */ jsx(StyledLink, { to, ...rest, onClick: handleClick, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      width: "100%",
+      paddingLeft: 3,
+      paddingRight: 3,
+      paddingTop: { initial: 1, large: 0 },
+      paddingBottom: { initial: 1, large: 0 },
+      borderRadius: 1,
+      children: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          justifyContent: "space-between",
+          width: "100%",
+          gap: { initial: 2, large: 1 },
+          children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                tag: "div",
+                lineHeight: "32px",
+                width: { initial: "80dvw", medium: "100%" },
+                overflow: "hidden",
+                style: { textOverflow: "ellipsis", whiteSpace: "nowrap" },
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsx(Flex, { gap: 2, children: endAction })
+          ]
+        }
+      )
+    }
+  ) });
+};
+const StyledHeader = styled(Flex)`
+  flex: 0 0 ${HEIGHT_TOP_NAVIGATION};
+  height: ${HEIGHT_TOP_NAVIGATION};
+
+  ${({ theme }) => theme.breakpoints.medium} {
+    flex: 0 0 ${HEIGHT_TOP_NAVIGATION_MEDIUM};
+    height: ${HEIGHT_TOP_NAVIGATION_MEDIUM};
+  }
+`;
+const Header = ({ label }) => {
+  return /* @__PURE__ */ jsx(
+    StyledHeader,
+    {
+      justifyContent: "space-between",
+      paddingLeft: 5,
+      paddingRight: 5,
+      children: /* @__PURE__ */ jsx(Typography, { variant: "beta", tag: "h2", children: label })
+    }
+  );
+};
+const Sections = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      paddingTop: { initial: 5, large: 4 },
+      paddingBottom: { initial: 5, large: 4 },
+      paddingLeft: { initial: 3, large: 0 },
+      paddingRight: { initial: 3, large: 0 },
+      maxWidth: { initial: "100%", medium: WIDTH_SIDE_NAVIGATION },
+      children: /* @__PURE__ */ jsx(Flex, { tag: "ul", gap: 6, direction: "column", alignItems: "stretch", ...props, children: children.map((child, index) => {
+        return /* @__PURE__ */ jsx("li", { children: child }, index);
+      }) })
+    }
+  );
+};
+const Section = ({
+  label,
+  children,
+  badgeLabel
+}) => {
+  const listId = useId();
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        paddingLeft: {
+          initial: 3,
+          large: 5
+        },
+        paddingRight: {
+          initial: 3,
+          large: 5
+        },
+        children: /* @__PURE__ */ jsxs(Flex, { position: "relative", justifyContent: "space-between", gap: 2, children: [
+          /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: label }) }) }),
+          /* @__PURE__ */ jsx(Flex, { gap: 1, children: badgeLabel && /* @__PURE__ */ jsx(Badge, { backgroundColor: "neutral150", textColor: "neutral600", children: badgeLabel }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Flex,
+      {
+        tag: "ol",
+        id: listId,
+        direction: "column",
+        gap: { initial: 2, large: "2px" },
+        alignItems: "stretch",
+        marginLeft: {
+          initial: 0,
+          large: 2
+        },
+        marginRight: {
+          initial: 0,
+          large: 2
+        },
+        children: children.map((child, index) => {
+          return /* @__PURE__ */ jsx("li", { children: child }, index);
+        })
+      }
+    )
+  ] });
+};
+styled.button`
+  cursor: pointer;
+  width: 100%;
+  border: none;
+  padding: 0;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  border-radius: ${({ theme }) => theme.borderRadius};
+  padding-left: ${({ theme }) => theme.spaces[3]};
+  padding-right: ${({ theme }) => theme.spaces[3]};
+  padding-top: ${({ theme }) => theme.spaces[2]};
+  padding-bottom: ${({ theme }) => theme.spaces[2]};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.neutral100};
+  }
+`;
+styled.li`
+  ${StyledLink} > div {
+    padding-left: 36px;
+  }
+`;
+styled(Box)`
+  width: 100%;
+
+  ${MainSubNav} {
+    background-color: transparent;
+    border-right: none;
+  }
+
+  ${({ theme }) => theme.breakpoints.medium} {
+    overflow: hidden;
+
+    ${MainSubNav} {
+      top: 0;
+    }
+  }
+`;
+const Content = ({ children }) => {
+  return /* @__PURE__ */ jsx(ScrollArea, { children });
+};
+const SubNav = {
+  Main,
+  Content,
+  Header,
+  Link,
+  Sections,
+  Section
+};
+const sections = [
+  {
+    id: "api-roles",
+    intlLabel: {
+      id: getTranslation("settings.general"),
+      defaultMessage: "General"
+    },
+    links: [
+      {
+        id: "overview",
+        intlLabel: {
+          id: getTranslation("settings.overview"),
+          defaultMessage: "Overview"
+        },
+        to: "/plugins/better-auth-dashboard/overview",
+        testid: "nav-overview"
+      },
+      {
+        id: "users",
+        intlLabel: {
+          id: getTranslation("settings.users"),
+          defaultMessage: "User Management"
+        },
+        to: "/plugins/better-auth-dashboard/users",
+        testid: "nav-users"
+      },
+      {
+        id: "organizations",
+        intlLabel: {
+          id: getTranslation("settings.organizations"),
+          defaultMessage: "Organization Management"
+        },
+        to: "/plugins/better-auth-dashboard/organizations",
+        testid: "nav-organizations"
+      }
+    ]
+  }
+];
+const Nav = ({ isFullPage = false, orgEnabled = false }) => {
+  const { formatMessage } = useIntl();
+  const overviewRBAC = useRBAC(PERMISSIONS.overview);
+  const userRBAC = useRBAC(PERMISSIONS.user);
+  const organizationRBAC = useRBAC(PERMISSIONS.organization);
+  return /* @__PURE__ */ jsxs(SubNav.Main, { children: [
+    !isFullPage && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SubNav.Header, { label: "Authentication" }),
+      /* @__PURE__ */ jsx(Divider, {})
+    ] }),
+    /* @__PURE__ */ jsxs(SubNav.Content, { children: [
+      isFullPage && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(SubNav.Header, { label: "Authentication" }),
+        /* @__PURE__ */ jsx(Divider, {})
+      ] }),
+      /* @__PURE__ */ jsx(SubNav.Sections, { "data-testid": "main-nav", children: sections.map((section) => /* @__PURE__ */ jsx(
+        SubNav.Section,
+        {
+          label: formatMessage(section.intlLabel),
+          children: section.links.filter((link) => orgEnabled || link.id !== "organizations").filter((link) => {
+            if (link.id === "overview") {
+              return overviewRBAC.allowedActions.canRead;
+            }
+            if (link.id === "users") {
+              return userRBAC.allowedActions.canRead;
+            }
+            if (link.id === "organizations") {
+              return organizationRBAC.allowedActions.canRead;
+            }
+            return true;
+          }).map((link) => {
+            return /* @__PURE__ */ jsx(
+              SubNav.Link,
+              {
+                to: link.to,
+                label: formatMessage(link.intlLabel),
+                "data-testid": link.testid,
+                children: formatMessage(link.intlLabel)
+              },
+              link.id
+            );
+          })
+        },
+        section.id
+      )) })
+    ] })
+  ] });
+};
 function useDashConfig() {
   return useQuery({
     queryKey: ["dash-config"],
@@ -115,6 +426,74 @@ function useDashConfig() {
 function hasPlugin(config, id) {
   return config?.plugins.some((p) => p.id === id) ?? false;
 }
+const RESPONSIVE_DEFAULT_SPACING = {
+  initial: 4,
+  medium: 6,
+  large: 10
+};
+const App = () => {
+  const { data: config, isLoading, isError, error } = useDashConfig();
+  const orgEnabled = hasPlugin(config, "organization");
+  const orgOptionsQuery = useQuery({
+    queryKey: ["dash-org-options"],
+    queryFn: async () => {
+      const result = await client.dash.organization.options();
+      if (result.error) return { teamsEnabled: false };
+      return result.data ?? { teamsEnabled: false };
+    },
+    enabled: orgEnabled
+  });
+  const teamsEnabled = orgEnabled ? orgOptionsQuery.data?.teamsEnabled ?? false : false;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", padding: 12, children: /* @__PURE__ */ jsx(Loader, { children: "Loading Better Auth dashboard…" }) });
+  }
+  if (isError) {
+    return /* @__PURE__ */ jsx(Box, { padding: 6, children: /* @__PURE__ */ jsx(
+      Alert,
+      {
+        closeLabel: "Close",
+        title: "Error loading configuration",
+        variant: "danger",
+        children: error?.message
+      }
+    ) });
+  }
+  if (!config) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-testid": "dashboard-root",
+      style: { display: "flex", flex: "1 1 auto", minHeight: "100vh" },
+      children: /* @__PURE__ */ jsxs(Layouts.Root, { sideNav: /* @__PURE__ */ jsx(Nav, { orgEnabled }), children: [
+        /* @__PURE__ */ jsx(Page.Title, { children: "Authentication" }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            display: { initial: "block", medium: "none" },
+            paddingLeft: RESPONSIVE_DEFAULT_SPACING,
+            paddingRight: RESPONSIVE_DEFAULT_SPACING,
+            paddingTop: RESPONSIVE_DEFAULT_SPACING,
+            children: /* @__PURE__ */ jsx(BackButton, { fallback: "/plugins/better-auth-dashboard" })
+          }
+        ),
+        /* @__PURE__ */ jsx(Outlet, { context: { config, teamsEnabled } })
+      ] })
+    }
+  );
+};
+const ProtectedApp = () => {
+  return /* @__PURE__ */ jsx(
+    Page.Protect,
+    {
+      permissions: [
+        ...PERMISSIONS.overview,
+        ...PERMISSIONS.user,
+        ...PERMISSIONS.organization
+      ],
+      children: /* @__PURE__ */ jsx(App, {})
+    }
+  );
+};
 function ConfirmDialog({
   title,
   message,
@@ -141,8 +520,9 @@ function ConfirmDialog({
   );
 }
 const DASH_CONTEXT_HEADER = "X-Dash-Context";
-const withContext = (ctx) => ({
+const withContext = (ctx, headers) => ({
   headers: {
+    ...headers,
     [DASH_CONTEXT_HEADER]: btoa(JSON.stringify(ctx))
   }
 });
@@ -450,11 +830,22 @@ function UserCombobox({
     queryKey: ["user-combobox-search", search],
     queryFn: async () => {
       const whereClause = search ? JSON.stringify([
-        { field: "email", operator: "contains", value: search }
+        {
+          field: "email",
+          operator: "contains",
+          value: search,
+          connector: "OR"
+        },
+        {
+          field: "name",
+          operator: "contains",
+          value: search,
+          connector: "OR"
+        }
       ]) : void 0;
       const result = await client.dash.listUsers({
         query: {
-          limit: 20,
+          limit: search ? 100 : 20,
           offset: 0,
           sortBy: "createdAt",
           sortOrder: "desc",
@@ -506,7 +897,7 @@ function CreateOrganizationDialog({ teamsEnabled, onClose }) {
           ...logo ? { logo } : {},
           ...teamsEnabled && !skipDefaultTeam && defaultTeamName ? { defaultTeamName } : {}
         },
-        withContext({ userId: ownerId, skipDefaultTeam })
+        withContext({ userId: ownerId, skipDefaultTeam }, getAuthHeaders())
       );
       if (result.error)
         throw new Error(result.error.message ?? "Create failed");
@@ -542,6 +933,7 @@ function CreateOrganizationDialog({ teamsEnabled, onClose }) {
         loading: createMutation.isLoading,
         disabled: !name || !slug || !ownerId,
         onClick: () => createMutation.mutate(),
+        "data-testid": "create-org-submit",
         children: "Create organization"
       }
     )
@@ -629,6 +1021,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 +1297,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
       }
     );
   }
@@ -809,6 +1345,21 @@ function CustomFieldsSection({
     )) })
   ] });
 }
+function EditViewSidePanels({ model, documentId, document: document2 }) {
+  const panels = getEditViewSidePanels(model);
+  if (panels.length === 0) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: panels.map(({ id, title, Component }) => /* @__PURE__ */ jsxs(FormSection, { children: [
+    /* @__PURE__ */ jsx(SectionLabel, { children: title }),
+    /* @__PURE__ */ jsx(
+      Component,
+      {
+        model,
+        documentId,
+        document: document2
+      }
+    )
+  ] }, id)) });
+}
 const SYSTEM_FIELDS = /* @__PURE__ */ new Set([
   "id",
   "documentId",
@@ -840,6 +1391,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;
@@ -892,12 +1445,13 @@ function OrganizationDetail({
   const schemaQuery = useModelSchema("organization");
   const qc = useQueryClient();
   const { toggleNotification } = useNotification();
+  const { get, put } = useFetchClient();
   const orgQuery = useQuery({
     queryKey: ["dash-org", organizationId],
     queryFn: async () => {
       const result = await client.dash.organization[organizationId](
         {},
-        withContext({ organizationId })
+        withContext({ organizationId }, getAuthHeaders())
       );
       if (result.error)
         throw new Error(result.error.message ?? "Failed to load org");
@@ -907,7 +1461,7 @@ function OrganizationDetail({
   const membersQuery = useQuery({
     queryKey: ["dash-org-members", organizationId],
     queryFn: async () => {
-      const result = await client.dash.organization[organizationId].members({}, withContext({ organizationId }));
+      const result = await client.dash.organization[organizationId].members({}, withContext({ organizationId }, getAuthHeaders()));
       if (result.error) throw new Error(result.error.message ?? "Failed");
       return result.data ?? [];
     }
@@ -916,7 +1470,7 @@ function OrganizationDetail({
     queryKey: ["dash-org-teams", organizationId],
     queryFn: async () => {
       if (!teamsEnabled) return [];
-      const result = await client.dash.organization[organizationId].teams({}, withContext({ organizationId }));
+      const result = await client.dash.organization[organizationId].teams({}, withContext({ organizationId }, getAuthHeaders()));
       if (result.error) throw new Error(result.error.message ?? "Failed");
       return result.data ?? [];
     },
@@ -925,11 +1479,29 @@ function OrganizationDetail({
   const ssoQuery = useQuery({
     queryKey: ["dash-org-sso", organizationId],
     queryFn: async () => {
-      const result = await client.dash.organization[organizationId].ssoProviders({}, withContext({ organizationId }));
+      const result = await client.dash.organization[organizationId].ssoProviders({}, withContext({ organizationId }, getAuthHeaders()));
+      if (result.error) throw new Error(result.error.message ?? "Failed");
+      return result.data ?? [];
+    }
+  });
+  const invitationsQuery = useQuery({
+    queryKey: ["dash-org-invitations", organizationId],
+    queryFn: async () => {
+      const result = await client.dash.organization[organizationId].invitations({}, withContext({ organizationId }, getAuthHeaders()));
       if (result.error) throw new Error(result.error.message ?? "Failed");
       return result.data ?? [];
     }
   });
+  const strapiOrgQuery = useQuery({
+    queryKey: ["dash-strapi-org", organizationId],
+    enabled: !!orgQuery.data,
+    queryFn: async () => {
+      const { data } = await get(
+        `/better-auth-dashboard/db?uid=plugin::better-auth.organization&filters[id][$eq]=${organizationId}&pagination[pageSize]=1`
+      );
+      return data.results?.[0] ?? null;
+    }
+  });
   const [activeTab, setActiveTab] = useState("details");
   const [editName, setEditName] = useState(void 0);
   const [editSlug, setEditSlug] = useState(void 0);
@@ -942,12 +1514,15 @@ 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 }));
   };
   const org = orgQuery.data;
   const extraData = {
-    ...org,
+    ...strapiOrgQuery.data ?? {},
     ...editExtra
   };
   const updateOrgMutation = useMutation({
@@ -956,17 +1531,21 @@ function OrganizationDetail({
       if (editName !== void 0) body.name = editName;
       if (editSlug !== void 0) body.slug = editSlug;
       if (editLogo !== void 0) body.logo = editLogo;
-      const result = await client.dash.organization.update(
-        body,
-        withContext({ organizationId })
+      const documentId = strapiOrgQuery.data?.documentId;
+      if (!documentId)
+        throw new Error("Could not resolve documentId for organization");
+      await put(
+        `/better-auth-dashboard/db/${documentId}?uid=plugin::better-auth.organization`,
+        body
       );
-      if (result.error)
-        throw new Error(result.error.message ?? "Update failed");
-      return result.data;
     },
-    onSuccess: () => {
+    onSuccess: async () => {
+      await qc.invalidateQueries({
+        queryKey: ["dash-strapi-org", organizationId]
+      });
       qc.invalidateQueries({ queryKey: ["dash-org", organizationId] });
       qc.invalidateQueries({ queryKey: ["dash-organizations"] });
+      qc.invalidateQueries({ queryKey: ["dash-strapi-org", organizationId] });
       setEditName(void 0);
       setEditSlug(void 0);
       setEditLogo(void 0);
@@ -990,7 +1569,7 @@ function OrganizationDetail({
     mutationFn: async () => {
       const result = await client.dash.organization.addMember(
         { userId: addUserId, role: addRole },
-        withContext({ organizationId })
+        withContext({ organizationId }, getAuthHeaders())
       );
       if (result.error)
         throw new Error(result.error.message ?? "Add member failed");
@@ -1013,7 +1592,7 @@ function OrganizationDetail({
     mutationFn: async (memberId) => {
       const result = await client.dash.organization.removeMember(
         { memberId },
-        withContext({ organizationId })
+        withContext({ organizationId }, getAuthHeaders())
       );
       if (result.error) throw new Error(result.error.message ?? "Failed");
     },
@@ -1036,7 +1615,7 @@ function OrganizationDetail({
     }) => {
       const result = await client.dash.organization.updateMemberRole(
         { memberId, role },
-        withContext({ organizationId })
+        withContext({ organizationId }, getAuthHeaders())
       );
       if (result.error) throw new Error(result.error.message ?? "Failed");
       return result.data;
@@ -1057,7 +1636,7 @@ function OrganizationDetail({
     mutationFn: async () => {
       const result = await client.dash.organization.createTeam(
         { name: newTeamName },
-        withContext({ organizationId })
+        withContext({ organizationId }, getAuthHeaders())
       );
       if (result.error)
         throw new Error(result.error.message ?? "Create team failed");
@@ -1079,7 +1658,7 @@ function OrganizationDetail({
     mutationFn: async (teamId) => {
       const result = await client.dash.organization.deleteTeam(
         { teamId },
-        withContext({ organizationId })
+        withContext({ organizationId }, getAuthHeaders())
       );
       if (result.error) throw new Error(result.error.message ?? "Failed");
     },
@@ -1097,7 +1676,10 @@ function OrganizationDetail({
   });
   const deleteSsoMutation = useMutation({
     mutationFn: async (providerId) => {
-      const result = await client.dash.organization[organizationId].ssoProvider.delete({ providerId }, withContext({ organizationId }));
+      const result = await client.dash.organization[organizationId].ssoProvider.delete(
+        { providerId },
+        withContext({ organizationId }, getAuthHeaders())
+      );
       if (result.error) throw new Error(result.error.message ?? "Failed");
     },
     onSuccess: () => {
@@ -1112,9 +1694,74 @@ function OrganizationDetail({
       });
     }
   });
-  const members = membersQuery.data ?? [];
-  const teams = teamsQuery.data ?? [];
+  const inviteMemberMutation = useMutation({
+    mutationFn: async () => {
+      const result = await client.dash.organization.inviteMember(
+        { email: inviteEmail, role: inviteRole, invitedBy: "" },
+        withContext({ organizationId }, getAuthHeaders())
+      );
+      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 }, getAuthHeaders())
+      );
+      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 }, getAuthHeaders())
+      );
+      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 +1818,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,
@@ -1225,33 +1877,43 @@ function OrganizationDetail({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx(EditSidebar, { children: /* @__PURE__ */ jsxs(FormSection, { children: [
-              /* @__PURE__ */ jsx(SectionLabel, { children: "Details" }),
-              /* @__PURE__ */ jsxs(
-                "div",
+            /* @__PURE__ */ jsxs(EditSidebar, { children: [
+              /* @__PURE__ */ jsxs(FormSection, { children: [
+                /* @__PURE__ */ jsx(SectionLabel, { children: "Details" }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "grid",
+                      gridTemplateColumns: "1fr 1fr",
+                      gap: 12
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs(MetaItem, { style: { gridColumn: "1 / -1" }, children: [
+                        /* @__PURE__ */ jsx(MetaKey, { children: "Organization ID" }),
+                        /* @__PURE__ */ jsx(MonoChip, { children: org?.id })
+                      ] }),
+                      /* @__PURE__ */ jsxs(MetaItem, { children: [
+                        /* @__PURE__ */ jsx(MetaKey, { children: "Members" }),
+                        /* @__PURE__ */ jsx(MetaVal, { children: org?.memberCount ?? 0 })
+                      ] }),
+                      /* @__PURE__ */ jsxs(MetaItem, { children: [
+                        /* @__PURE__ */ jsx(MetaKey, { children: "Created" }),
+                        /* @__PURE__ */ jsx(MetaVal, { children: org?.createdAt ? new Date(org.createdAt).toLocaleDateString() : "—" })
+                      ] })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                EditViewSidePanels,
                 {
-                  style: {
-                    display: "grid",
-                    gridTemplateColumns: "1fr 1fr",
-                    gap: 12
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs(MetaItem, { style: { gridColumn: "1 / -1" }, children: [
-                      /* @__PURE__ */ jsx(MetaKey, { children: "Organization ID" }),
-                      /* @__PURE__ */ jsx(MonoChip, { children: org?.id })
-                    ] }),
-                    /* @__PURE__ */ jsxs(MetaItem, { children: [
-                      /* @__PURE__ */ jsx(MetaKey, { children: "Members" }),
-                      /* @__PURE__ */ jsx(MetaVal, { children: org?.memberCount ?? 0 })
-                    ] }),
-                    /* @__PURE__ */ jsxs(MetaItem, { children: [
-                      /* @__PURE__ */ jsx(MetaKey, { children: "Created" }),
-                      /* @__PURE__ */ jsx(MetaVal, { children: org?.createdAt ? new Date(org.createdAt).toLocaleDateString() : "—" })
-                    ] })
-                  ]
+                  model: "plugin::better-auth.organization",
+                  documentId: strapiOrgQuery.data?.documentId,
+                  document: strapiOrgQuery.data ?? void 0
                 }
               )
-            ] }) })
+            ] })
           ] }) }),
           /* @__PURE__ */ jsx(Tabs.Content, { value: "members", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 5, paddingTop: 6, children: [
             /* @__PURE__ */ jsxs(FormSection, { children: [
@@ -1426,7 +2088,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 +2242,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)
+          }
         )
       ]
     }
@@ -1481,7 +2274,7 @@ function TeamRow({
         organizationId
       ].teams[team.id].members(
         { params: { orgId: organizationId, teamId: team.id } },
-        withContext({ organizationId })
+        withContext({ organizationId }, getAuthHeaders())
       );
       if (result.error) throw new Error(result.error.message ?? "Failed");
       return result.data ?? [];
@@ -1493,7 +2286,7 @@ function TeamRow({
     mutationFn: async () => {
       const result = await client.dash.organization.addTeamMember(
         { teamId: team.id, userId: addUserId },
-        withContext({ organizationId })
+        withContext({ organizationId }, getAuthHeaders())
       );
       if (result.error) throw new Error(result.error.message ?? "Failed");
       return result.data;
@@ -1509,7 +2302,7 @@ function TeamRow({
     mutationFn: async (userId) => {
       const result = await client.dash.organization.removeTeamMember(
         { teamId: team.id, userId },
-        withContext({ organizationId })
+        withContext({ organizationId }, getAuthHeaders())
       );
       if (result.error) throw new Error(result.error.message ?? "Failed");
     },
@@ -1605,12 +2398,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 +2411,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 +2457,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 +2472,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;
@@ -1773,7 +2566,9 @@ function OrgAvatar({ name, logo }) {
   return /* @__PURE__ */ jsx(OrgLogoFallback, { $bg: color.bg, $fg: color.fg, children: initials });
 }
 function OrganizationsPage({ teamsEnabled }) {
+  const rbac = useRBAC(PERMISSIONS.organization);
   const qc = useQueryClient();
+  const { toggleNotification } = useNotification();
   const [page, setPage] = useState(1);
   const [search, setSearch] = useState("");
   const [searchInput, setSearchInput] = useState("");
@@ -1782,13 +2577,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",
@@ -1805,7 +2600,7 @@ function OrganizationsPage({ teamsEnabled }) {
     mutationFn: async (organizationId) => {
       const result = await client.dash.organization.delete(
         { organizationId },
-        withContext({ organizationId })
+        withContext({ organizationId }, getAuthHeaders())
       );
       if (result.error)
         throw new Error(result.error.message ?? "Delete failed");
@@ -1813,27 +2608,44 @@ function OrganizationsPage({ teamsEnabled }) {
     onSuccess: () => {
       setConfirmDelete(null);
       qc.invalidateQueries({ queryKey: ["dash-organizations"] });
+      toggleNotification({ type: "success", message: "Organization deleted" });
+    },
+    onError: (err) => {
+      toggleNotification({
+        type: "danger",
+        message: err.message ?? "Failed to delete organization"
+      });
     }
   });
   const deleteManyMutation = useMutation({
     mutationFn: async (organizationIds) => {
       const result = await client.dash.organization.deleteMany(
         {},
-        withContext({ organizationIds })
+        withContext({ organizationIds }, getAuthHeaders())
       );
       if (result.error)
         throw new Error(result.error.message ?? "Delete failed");
       return result.data;
     },
-    onSuccess: () => {
+    onSuccess: (_data, organizationIds) => {
       setConfirmDeleteMany(false);
       setSelected(/* @__PURE__ */ new Set());
       qc.invalidateQueries({ queryKey: ["dash-organizations"] });
+      toggleNotification({
+        type: "success",
+        message: `${organizationIds.length} organization${organizationIds.length !== 1 ? "s" : ""} deleted`
+      });
+    },
+    onError: (err) => {
+      toggleNotification({
+        type: "danger",
+        message: err.message ?? "Failed to delete organizations"
+      });
     }
   });
   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,210 +2665,218 @@ 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: [
-          total.toLocaleString(),
-          " total"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          startIcon: /* @__PURE__ */ jsx(Plus, {}),
-          onClick: () => setShowCreate(true),
-          "data-testid": "create-org-btn",
-          children: "Create organization"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(Toolbar$1, { children: [
-      /* @__PURE__ */ jsx(SearchForm, { onSubmit: handleSearch, children: /* @__PURE__ */ jsx(
-        Searchbar,
-        {
-          clearLabel: "Clear",
-          name: "search",
-          placeholder: "Search organizations…",
-          value: searchInput,
-          onChange: (e) => setSearchInput(e.target.value),
-          onClear: () => {
-            setSearchInput("");
-            setSearch("");
-            setPage(1);
-          },
-          children: "Search organizations"
-        }
-      ) }),
-      someSelected && /* @__PURE__ */ jsxs(
-        Button,
-        {
-          variant: "danger-light",
-          size: "S",
-          onClick: () => setConfirmDeleteMany(true),
-          "data-testid": "delete-selected-orgs-btn",
-          children: [
-            "Delete ",
-            selected.size,
-            " selected"
-          ]
-        }
-      )
-    ] }),
-    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("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx(THCheck$1, { children: /* @__PURE__ */ jsx(
-          Checkbox,
-          {
-            checked: allSelected,
-            onCheckedChange: handleSelectAll,
-            "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(THActions$1, {})
-      ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: orgs.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-        TD$2,
-        {
-          colSpan: 6,
-          style: {
-            textAlign: "center",
-            padding: "40px",
-            color: "#8e8ea9"
-          },
-          "data-testid": "orgs-empty",
-          children: search ? `No organizations matching "${search}"` : "No organizations found"
-        }
-      ) }) : orgs.map((org, i) => /* @__PURE__ */ jsxs(
-        TR$2,
-        {
-          $selected: selected.has(org.id),
-          $i: i,
-          "data-testid": "org-row",
-          children: [
-            /* @__PURE__ */ jsx(TDCheck$1, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
+    Page.Protect,
+    {
+      permissions: PERMISSIONS.organization.filter(
+        (p) => p.action === `plugin::${PLUGIN_ID}.organization.read`
+      ),
+      children: /* @__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"
+            ] })
+          ] }),
+          rbac.allowedActions.canCreate && /* @__PURE__ */ jsx(
+            Button,
+            {
+              startIcon: /* @__PURE__ */ jsx(Plus, {}),
+              onClick: () => setShowCreate(true),
+              "data-testid": "create-org-btn",
+              children: "Create organization"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Toolbar$1, { children: [
+          /* @__PURE__ */ jsx(SearchForm, { onSubmit: handleSearch, children: /* @__PURE__ */ jsx(
+            Searchbar,
+            {
+              clearLabel: "Clear",
+              name: "search",
+              placeholder: "Search organizations…",
+              value: searchInput,
+              onChange: (e) => setSearchInput(e.target.value),
+              onClear: () => {
+                setSearchInput("");
+                setSearch("");
+                setPage(1);
+              },
+              children: "Search organizations"
+            }
+          ) }),
+          someSelected && rbac.allowedActions.canDelete && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "danger-light",
+              size: "S",
+              onClick: () => setConfirmDeleteMany(true),
+              "data-testid": "delete-selected-orgs-btn",
+              children: [
+                "Delete ",
+                selected.size,
+                " selected"
+              ]
+            }
+          )
+        ] }),
+        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$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: [
+            rbac.allowedActions.canDelete && /* @__PURE__ */ jsx(THCheck$1, { children: /* @__PURE__ */ jsx(
               Checkbox,
               {
-                checked: selected.has(org.id),
-                onCheckedChange: () => toggleSelect(org.id),
-                "aria-label": `Select ${org.name}`
+                checked: allSelected,
+                onCheckedChange: handleSelectAll,
+                "aria-label": "Select all"
               }
             ) }),
-            /* @__PURE__ */ jsx(TD$2, { 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(TDActions$1, { children: /* @__PURE__ */ jsxs(Flex, { gap: 1, justifyContent: "flex-end", children: [
-              /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  label: "Edit organization",
-                  onClick: () => setDetailOrgId(org.id),
-                  "data-testid": "edit-org-btn",
-                  children: /* @__PURE__ */ jsx(Pencil, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  label: "Delete organization",
-                  onClick: () => setConfirmDelete(org.id),
-                  "data-testid": "delete-org-btn",
-                  children: /* @__PURE__ */ jsx(Trash, {})
-                }
-              )
-            ] }) })
-          ]
-        },
-        org.id
-      )) })
-    ] }) }),
-    pageCount > 1 && /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "tertiary",
-          size: "S",
-          disabled: page === 1,
-          onClick: () => setPage((p) => p - 1),
-          children: "Previous"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "tertiary",
-          size: "S",
-          disabled: page >= pageCount,
-          onClick: () => setPage((p) => p + 1),
-          children: "Next"
-        }
-      )
-    ] }) }),
-    showCreate && /* @__PURE__ */ jsx(
-      CreateOrganizationDialog,
-      {
-        teamsEnabled,
-        onClose: () => setShowCreate(false)
-      }
-    ),
-    detailOrgId && /* @__PURE__ */ jsx(
-      OrganizationDetail,
-      {
-        organizationId: detailOrgId,
-        teamsEnabled,
-        onClose: () => setDetailOrgId(null)
-      }
-    ),
-    confirmDelete && /* @__PURE__ */ jsx(
-      ConfirmDialog,
-      {
-        title: "Delete organization",
-        message: "Are you sure you want to delete this organization? All members and teams will be removed. This action cannot be undone.",
-        confirmLabel: "Delete",
-        loading: deleteMutation.isLoading,
-        onConfirm: () => deleteMutation.mutate(confirmDelete),
-        onCancel: () => setConfirmDelete(null)
-      }
-    ),
-    confirmDeleteMany && /* @__PURE__ */ jsx(
-      ConfirmDialog,
-      {
-        title: `Delete ${selected.size} organization${selected.size !== 1 ? "s" : ""}`,
-        message: `Are you sure you want to delete ${selected.size} organization${selected.size !== 1 ? "s" : ""}? This action cannot be undone.`,
-        confirmLabel: "Delete all",
-        loading: deleteManyMutation.isLoading,
-        onConfirm: () => deleteManyMutation.mutate([...selected]),
-        onCancel: () => setConfirmDeleteMany(false)
-      }
-    )
-  ] });
-}
-const PALETTE = [
-  { bg: "#EAF5FF", fg: "#0C75AF" },
-  { bg: "#F0F0FF", fg: "#4945FF" },
-  { bg: "#EAFBE7", fg: "#328048" },
-  { bg: "#FFF3D3", fg: "#8E6A00" },
-  { bg: "#FCECEA", fg: "#D02B20" },
-  { bg: "#F6ECFC", fg: "#8312D1" },
-  { bg: "#E8F8F5", fg: "#1A7F64" }
-];
-const Circle = styled.div`
-  width: ${(p) => p.$size}px;
-  height: ${(p) => p.$size}px;
-  border-radius: 50%;
-  background: ${(p) => p.$bg};
-  color: ${(p) => p.$fg};
-  display: inline-flex;
+            /* @__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$1,
+            {
+              colSpan: 6,
+              style: {
+                textAlign: "center",
+                padding: "40px",
+                color: "#8e8ea9"
+              },
+              "data-testid": "orgs-empty",
+              children: search ? `No organizations matching "${search}"` : "No organizations found"
+            }
+          ) }) : orgs.map((org, i) => /* @__PURE__ */ jsxs(
+            TR$1,
+            {
+              $selected: selected.has(org.id),
+              $i: i,
+              "data-testid": "org-row",
+              children: [
+                rbac.allowedActions.canDelete && /* @__PURE__ */ jsx(TDCheck$1, { children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: selected.has(org.id),
+                    onCheckedChange: () => toggleSelect(org.id),
+                    "aria-label": `Select ${org.name}`
+                  }
+                ) }),
+                /* @__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$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: [
+                  rbac.allowedActions.canUpdate && /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      label: "Edit organization",
+                      onClick: () => setDetailOrgId(org.id),
+                      "data-testid": "edit-org-btn",
+                      children: /* @__PURE__ */ jsx(Pencil, {})
+                    }
+                  ),
+                  rbac.allowedActions.canDelete && /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      label: "Delete organization",
+                      onClick: () => setConfirmDelete(org.id),
+                      "data-testid": "delete-org-btn",
+                      children: /* @__PURE__ */ jsx(Trash, {})
+                    }
+                  )
+                ] }) })
+              ]
+            },
+            org.id
+          )) })
+        ] }) }),
+        pageCount > 1 && /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "tertiary",
+              size: "S",
+              disabled: page === 1,
+              onClick: () => setPage((p) => p - 1),
+              children: "Previous"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "tertiary",
+              size: "S",
+              disabled: page >= pageCount,
+              onClick: () => setPage((p) => p + 1),
+              children: "Next"
+            }
+          )
+        ] }) }),
+        rbac.allowedActions.canCreate && showCreate && /* @__PURE__ */ jsx(
+          CreateOrganizationDialog,
+          {
+            teamsEnabled,
+            onClose: () => setShowCreate(false)
+          }
+        ),
+        rbac.allowedActions.canUpdate && detailOrgId && /* @__PURE__ */ jsx(
+          OrganizationDetail,
+          {
+            organizationId: detailOrgId,
+            teamsEnabled,
+            onClose: () => setDetailOrgId(null)
+          }
+        ),
+        rbac.allowedActions.canDelete && confirmDelete && /* @__PURE__ */ jsx(
+          ConfirmDialog,
+          {
+            title: "Delete organization",
+            message: "Are you sure you want to delete this organization? All members and teams will be removed. This action cannot be undone.",
+            confirmLabel: "Delete",
+            loading: deleteMutation.isLoading,
+            onConfirm: () => deleteMutation.mutate(confirmDelete),
+            onCancel: () => setConfirmDelete(null)
+          }
+        ),
+        rbac.allowedActions.canDelete && confirmDeleteMany && /* @__PURE__ */ jsx(
+          ConfirmDialog,
+          {
+            title: `Delete ${selected.size} organization${selected.size !== 1 ? "s" : ""}`,
+            message: `Are you sure you want to delete ${selected.size} organization${selected.size !== 1 ? "s" : ""}? This action cannot be undone.`,
+            confirmLabel: "Delete all",
+            loading: deleteManyMutation.isLoading,
+            onConfirm: () => deleteManyMutation.mutate([...selected]),
+            onCancel: () => setConfirmDeleteMany(false)
+          }
+        )
+      ] })
+    }
+  );
+}
+const PALETTE = [
+  { bg: "#EAF5FF", fg: "#0C75AF" },
+  { bg: "#F0F0FF", fg: "#4945FF" },
+  { bg: "#EAFBE7", fg: "#328048" },
+  { bg: "#FFF3D3", fg: "#8E6A00" },
+  { bg: "#FCECEA", fg: "#D02B20" },
+  { bg: "#F6ECFC", fg: "#8312D1" },
+  { bg: "#E8F8F5", fg: "#1A7F64" }
+];
+const Circle = styled.div`
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
+  border-radius: 50%;
+  background: ${(p) => p.$bg};
+  color: ${(p) => p.$fg};
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: ${(p) => Math.round(p.$size * 0.38)}px;
@@ -2101,95 +2921,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 +3069,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,173 +3112,241 @@ 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 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 RtnSize = styled.span`
+  font-size: 9px;
+  color: ${T.textMuted};
+  min-width: 52px;
+  text-align: right;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
 `;
-const StatusChip$1 = styled.span`
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: 20px;
-  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"};
-  }
+const RtnTrack = styled.div`
+  flex: 1;
+  height: 10px;
+  background: #eaeaef;
+  border-radius: 4px;
+  overflow: hidden;
 `;
-const Divider = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: -8px;
+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 DivLabel = styled.span`
+const RtnPct = styled.span`
   font-size: 10px;
   font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: #b8b8c7;
-  white-space: nowrap;
+  color: hsl(${(p) => p.$hue}, 60%, 60%);
+  min-width: 38px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  font-family: ${T.mono};
 `;
-const DivLine = styled.div`
-  flex: 1;
-  height: 1px;
-  background: #eaeaef;
+const RtnTip = styled.div`
+  font-size: 10px;
+  color: ${T.textSecondary};
+  min-height: 14px;
+  font-variant-numeric: tabular-nums;
+  padding: 0 6px;
 `;
-const Empty = styled.div`
+const RingGrid = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: center;
+  gap: 10px;
+`;
+const RingCard = styled(Card)`
+  padding: 18px 20px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+`;
+const RingInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+const RingVal = styled.div`
+  font-size: 24px;
+  font-weight: 800;
+  color: ${T.textPrimary};
+  letter-spacing: -0.04em;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+`;
+const RingLabel = styled.div`
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: ${T.textMuted};
+`;
+const Empty = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   justify-content: center;
   padding: 32px;
-  color: #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 +3355,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 +3367,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 +3441,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 +3471,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 +3488,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 +3509,7 @@ function AreaChart({
               x: xp(i),
               y: H - 6,
               textAnchor: "middle",
-              fill: "#b8b8c7",
+              fill: T.textMuted,
               fontSize: "9",
               children: d.label
             },
@@ -2578,7 +3519,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 +3544,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 +3556,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 +3572,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 +3644,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 +3693,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 +3705,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]=updatedAt:desc"
+      );
+      return data.results ?? [];
+    },
+    refetchInterval: 3e4
+  });
   const orgsQuery = useQuery({
     queryKey: ["dash-orgs-count"],
     queryFn: async () => {
@@ -2723,596 +3731,403 @@ function OverviewPage() {
       return r.data;
     }
   });
+  const sessionsRaw = sessionsQuery.data ?? [];
+  const activeUserIds = [];
+  const lastActiveByUserId = /* @__PURE__ */ new Map();
+  for (const s of sessionsRaw) {
+    const uid = String(s.userId);
+    if (!lastActiveByUserId.has(uid)) {
+      lastActiveByUserId.set(uid, s.updatedAt ?? s.createdAt);
+      activeUserIds.push(uid);
+    }
+  }
+  const activeUsersQuery = useQuery({
+    queryKey: ["dash-active-users", activeUserIds],
+    queryFn: async () => {
+      if (activeUserIds.length === 0) return [];
+      const params = new URLSearchParams({ uid: "plugin::better-auth.user" });
+      for (let i = 0; i < activeUserIds.length; i++) {
+        params.set(`filters[id][$in][${i}]`, activeUserIds[i]);
+      }
+      params.set("pagination[pageSize]", "12");
+      const { data } = await get(
+        `/better-auth-dashboard/db?${params}`
+      );
+      return data.results ?? [];
+    },
+    enabled: feedMode === "active" && activeUserIds.length > 0
+  });
+  const chartRef = useRef(null);
+  const [chartHeight, setChartHeight] = useState(0);
+  useEffect(() => {
+    const el = chartRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) setChartHeight(entry.contentRect.height);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
   if (statsQuery.isLoading) {
-    return /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", padding: 12, 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 orgCount = orgsQuery.data?.total ?? 0;
+  const activeUserMap = /* @__PURE__ */ new Map();
+  for (const u of activeUsersQuery.data ?? []) {
+    activeUserMap.set(String(u.id), u);
+  }
+  const sortedActiveUsers = activeUserIds.map((uid) => activeUserMap.get(uid)).filter((u) => u !== void 0);
   const totalSpark = graphData.map((d) => d.totalUsers);
   const newSpark = graphData.map((d) => d.newUsers);
   const activeSpark = graphData.map((d) => d.activeUsers);
   const hovRow = hovIdx !== null ? graphData[hovIdx] : null;
-  return /* @__PURE__ */ jsxs(Wrap$2, { "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, {
-          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__ */ jsxs(Divider, { children: [
-      /* @__PURE__ */ jsx(DivLabel, { children: "Sign-ups" }),
-      /* @__PURE__ */ jsx(DivLine, {})
-    ] }),
-    /* @__PURE__ */ jsxs(StatRow, { children: [
-      /* @__PURE__ */ jsx(
-        StatCardItem,
-        {
-          id: "total",
-          label: "Total Users",
-          value: stats.total ?? 0,
-          sparkline: totalSpark,
-          color: "#4945FF",
-          delay: 0
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        StatCardItem,
-        {
-          id: "d-sig",
-          label: "Daily Sign-ups",
-          value: stats.daily.signUps ?? 0,
-          pct: stats.daily.percentage ?? void 0,
-          sparkline: newSpark,
-          color: "#5CB176",
-          delay: 1
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        StatCardItem,
-        {
-          id: "w-sig",
-          label: "Weekly Sign-ups",
-          value: stats.weekly.signUps ?? 0,
-          pct: stats.weekly.percentage ?? void 0,
-          sparkline: newSpark,
-          color: "#5CB176",
-          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
-        }
+  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__ */ jsx(
+    Page.Protect,
+    {
+      permissions: PERMISSIONS.overview.filter(
+        (p) => p.action === `plugin::${PLUGIN_ID}.overview.read`
       ),
-      /* @__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)) })
+      children: /* @__PURE__ */ jsxs(Wrap$1, { "data-testid": "overview-page", children: [
+        /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-end", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  fontSize: 22,
+                  fontWeight: 800,
+                  color: T.textPrimary,
+                  letterSpacing: "-0.03em"
+                },
+                children: "Overview"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: T.textSecondary, marginTop: 4 }, children: (/* @__PURE__ */ new Date()).toLocaleDateString(void 0, {
+              weekday: "long",
+              year: "numeric",
+              month: "long",
+              day: "numeric"
+            }) })
+          ] }),
+          /* @__PURE__ */ jsx(PillGroup, { children: ["daily", "weekly", "monthly"].map((p) => /* @__PURE__ */ jsx(Pill, { $active: period === p, onClick: () => setPeriod(p), children: p[0].toUpperCase() + p.slice(1) }, p)) })
         ] }),
-        /* @__PURE__ */ 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__ */ jsxs(SectionDivider, { children: [
+          /* @__PURE__ */ jsx(DivLabel, { children: "Metrics" }),
+          /* @__PURE__ */ jsx(DivLine, {})
+        ] }),
+        /* @__PURE__ */ jsxs(StatGrid, { children: [
           /* @__PURE__ */ jsx(
-            Avatar,
+            StatItem,
             {
-              name: s.user?.name ?? "?",
-              src: s.user?.image,
-              size: 28
+              id: "total",
+              label: "Total Users",
+              value: stats.total ?? 0,
+              sparkline: totalSpark,
+              color: T.accent,
+              delay: 0
             }
-          ),
-          /* @__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,
-        {
-          variant: "danger-light",
-          size: "S",
-          onClick: () => setConfirmRevokeMany(true),
-          "data-testid": "revoke-selected-btn",
-          children: [
-            "Revoke sessions for ",
-            selected.size,
-            " user",
-            selected.size !== 1 ? "s" : ""
-          ]
-        }
-      )
-    ] }),
-    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,
-          {
-            checked: allSelected,
-            onCheckedChange: handleSelectAll,
-            "aria-label": "Select all users"
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { children: "User / Sessions" }),
-        /* @__PURE__ */ jsx(ColumnHeaderRight, { children: "Sessions" })
-      ] }),
-      usersWithSessions.map((userRow, i) => /* @__PURE__ */ jsxs(UserGroup, { $i: i, "data-testid": "session-user-row", children: [
-        /* @__PURE__ */ jsxs(UserRowHeader, { children: [
+          ),
           /* @__PURE__ */ jsx(
-            Checkbox,
+            StatItem,
             {
-              checked: selected.has(userRow.id),
-              onCheckedChange: () => toggleSelect(userRow.id),
-              "aria-label": `Select ${userRow.name}`
+              id: "d-sig",
+              label: "Daily Sign-ups",
+              value: stats.daily.signUps ?? 0,
+              pct: stats.daily.percentage ?? void 0,
+              sparkline: newSpark,
+              color: T.green,
+              delay: 1
             }
           ),
-          /* @__PURE__ */ jsx(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" : ""
-          ] })
+          /* @__PURE__ */ jsx(
+            StatItem,
+            {
+              id: "w-sig",
+              label: "Weekly Sign-ups",
+              value: stats.weekly.signUps ?? 0,
+              pct: stats.weekly.percentage ?? void 0,
+              sparkline: newSpark,
+              color: T.green,
+              delay: 2
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            StatItem,
+            {
+              id: "m-sig",
+              label: "Monthly Sign-ups",
+              value: stats.monthly.signUps ?? 0,
+              pct: stats.monthly.percentage ?? void 0,
+              sparkline: newSpark,
+              color: T.green,
+              delay: 3
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            StatItem,
+            {
+              id: "orgs",
+              label: "Organizations",
+              value: orgCount,
+              color: T.purple,
+              delay: 4
+            }
+          )
         ] }),
-        userRow.sessions.map((session) => /* @__PURE__ */ jsxs(SessionCard, { "data-testid": "session-row", children: [
-          /* @__PURE__ */ jsxs(SessionMeta, { children: [
-            /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs(SectionDivider, { children: [
+          /* @__PURE__ */ jsx(DivLabel, { children: "Growth" }),
+          /* @__PURE__ */ jsx(DivLine, {})
+        ] }),
+        /* @__PURE__ */ jsxs(TwoPanel, { children: [
+          /* @__PURE__ */ jsxs(ChartCard, { ref: chartRef, $delay: 5, children: [
+            /* @__PURE__ */ jsxs(ChartHeader, { children: [
+              /* @__PURE__ */ jsx(ChartTitle, { children: "User Growth" }),
+              /* @__PURE__ */ jsx(SeriesRow, { children: ALL_SERIES.map((s) => /* @__PURE__ */ jsxs(
+                SeriesBtn,
+                {
+                  $on: activeSeries.has(s.key),
+                  $c: s.color,
+                  onClick: () => toggleSeries(s.key),
+                  children: [
+                    /* @__PURE__ */ jsx(SDot, { $c: s.color }),
+                    s.label
+                  ]
+                },
+                s.key
+              )) })
+            ] }),
+            /* @__PURE__ */ jsx(HoverInfo, { children: hovRow ? `${hovRow.label}  ·  ${hovRow.totalUsers.toLocaleString()} total  ·  +${hovRow.newUsers.toLocaleString()} new  ·  ${hovRow.activeUsers.toLocaleString()} active` : "Hover the chart to inspect a data point" }),
+            graphQuery.isLoading ? /* @__PURE__ */ jsx(
               Flex,
               {
-                gap: 2,
+                justifyContent: "center",
                 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()
-                  ] })
-                ]
+                style: { flex: 1, minHeight: 170 },
+                children: /* @__PURE__ */ jsx(Loader, { children: "Loading…" })
               }
-            ),
-            session.userAgent && /* @__PURE__ */ jsx(AgentText, { children: session.userAgent })
+            ) : /* @__PURE__ */ jsx(
+              GrowthChart,
+              {
+                data: graphData,
+                hovered: hovIdx,
+                onHover: setHovIdx,
+                activeSeries
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsx(
-            IconButton,
+          /* @__PURE__ */ jsxs(
+            FeedCard,
             {
-              label: "Revoke session",
-              onClick: () => setConfirmRevokeSessionId(session.id),
-              style: { flexShrink: 0 },
-              "data-testid": "revoke-session-btn",
-              children: /* @__PURE__ */ jsx(Trash, {})
+              $delay: 6,
+              style: chartHeight > 0 ? { height: chartHeight } : void 0,
+              children: [
+                /* @__PURE__ */ jsxs(FeedHead, { children: [
+                  /* @__PURE__ */ jsx("span", { children: feedMode === "signups" ? "Recent Sign-ups" : "Recently Active" }),
+                  /* @__PURE__ */ jsxs(
+                    FeedSelect,
+                    {
+                      value: feedMode,
+                      onChange: (e) => setFeedMode(e.target.value),
+                      children: [
+                        /* @__PURE__ */ jsx("option", { value: "signups", children: "Recent Sign-ups" }),
+                        /* @__PURE__ */ jsx("option", { value: "active", children: "Recently Active" })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(FeedScroll, { children: feedMode === "signups" ? usersQuery.isLoading ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsx(Loader, { children: "Loading…" }) }) : users.length === 0 ? /* @__PURE__ */ jsx(Empty, { children: "No users yet" }) : users.map((u) => /* @__PURE__ */ jsxs(FeedItem, { children: [
+                  /* @__PURE__ */ jsxs(FeedTop, { children: [
+                    /* @__PURE__ */ jsxs(
+                      Flex,
+                      {
+                        alignItems: "center",
+                        gap: 1,
+                        style: { minWidth: 0 },
+                        children: [
+                          /* @__PURE__ */ jsx(Avatar, { name: u.name, src: u.image, size: 20 }),
+                          /* @__PURE__ */ jsx(FeedName, { title: u.name, children: u.name })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(FeedMeta, { children: relTime(u.createdAt) })
+                  ] }),
+                  /* @__PURE__ */ jsx(FeedEmail, { title: u.email, children: u.email })
+                ] }, u.id)) : activeUsersQuery.isLoading || sessionsQuery.isLoading ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsx(Loader, { children: "Loading…" }) }) : sortedActiveUsers.length === 0 ? /* @__PURE__ */ jsx(Empty, { children: "No recent activity" }) : sortedActiveUsers.map((u) => /* @__PURE__ */ jsxs(FeedItem, { children: [
+                  /* @__PURE__ */ jsxs(FeedTop, { children: [
+                    /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 1, style: { minWidth: 0 }, children: [
+                      /* @__PURE__ */ jsx(
+                        Avatar,
+                        {
+                          name: u.name,
+                          src: u.image ?? void 0,
+                          size: 20
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(FeedName, { title: u.name, children: u.name })
+                    ] }),
+                    /* @__PURE__ */ jsx(FeedMeta, { children: relTime(
+                      lastActiveByUserId.get(String(u.id)) ?? u.createdAt
+                    ) })
+                  ] }),
+                  /* @__PURE__ */ jsx(FeedEmail, { title: u.email, children: u.email })
+                ] }, u.documentId)) })
+              ]
             }
           )
-        ] }, 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,
-        {
-          variant: "tertiary",
-          size: "S",
-          disabled: page === 1,
-          onClick: () => setPage((p) => p - 1),
-          children: "Previous"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "tertiary",
-          size: "S",
-          onClick: () => setPage((p) => p + 1),
-          children: "Next"
-        }
-      )
-    ] }) }),
-    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)
-      }
-    )
-  ] });
+        ] }),
+        /* @__PURE__ */ jsxs(SectionDivider, { children: [
+          /* @__PURE__ */ jsx(DivLabel, { children: "Retention & Activity" }),
+          /* @__PURE__ */ jsx(DivLine, {})
+        ] }),
+        /* @__PURE__ */ jsxs(TwoPanel, { children: [
+          /* @__PURE__ */ jsxs(RtnCard, { $delay: 7, children: [
+            /* @__PURE__ */ jsxs(ChartHeader, { children: [
+              /* @__PURE__ */ jsx(ChartTitle, { children: "Cohort Retention" }),
+              /* @__PURE__ */ jsx(Flex, { alignItems: "center", gap: 2, children: [
+                { hue: 142, label: "≥70%" },
+                { hue: 38, label: "40–70%" },
+                { hue: 4, label: "<40%" }
+              ].map(({ hue, label }) => /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  alignItems: "center",
+                  gap: 1,
+                  style: { marginLeft: 8 },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          width: 8,
+                          height: 8,
+                          borderRadius: "50%",
+                          background: `hsl(${hue},60%,50%)`,
+                          display: "inline-block",
+                          flexShrink: 0
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { style: { fontSize: 9, color: T.textMuted }, children: label })
+                  ]
+                },
+                hue
+              )) })
+            ] }),
+            /* @__PURE__ */ jsx(RtnTip, { children: rtnHovRow ? `Cohort ${rtnHovRow.label} · ${rtnHovRow.cohortSize.toLocaleString()} users · active ${rtnHovRow.activeStart} – ${rtnHovRow.activeEnd}` : "Hover a row to see cohort details" }),
+            retentionQuery.isLoading ? /* @__PURE__ */ jsx(
+              Flex,
+              {
+                justifyContent: "center",
+                alignItems: "center",
+                style: { minHeight: 80 },
+                children: /* @__PURE__ */ jsx(Loader, { children: "Loading…" })
+              }
+            ) : rtnData.length === 0 ? /* @__PURE__ */ jsxs(Empty, { children: [
+              /* @__PURE__ */ jsx("div", { style: { fontSize: 22 }, children: "📉" }),
+              /* @__PURE__ */ jsx("div", { children: "No retention data for this period" })
+            ] }) : /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 5 }, children: rtnData.map((row, i) => {
+              const hue = rateHue(row.retentionRate);
+              return /* @__PURE__ */ jsxs(
+                RtnRow,
+                {
+                  $hov: rtnHov === i,
+                  onMouseEnter: () => setRtnHov(i),
+                  onMouseLeave: () => setRtnHov(null),
+                  children: [
+                    /* @__PURE__ */ jsx(RtnLabel, { children: row.label }),
+                    /* @__PURE__ */ jsx(RtnSize, { children: row.cohortSize.toLocaleString() }),
+                    /* @__PURE__ */ jsx(RtnTrack, { children: /* @__PURE__ */ jsx(RtnBar, { $w: row.retentionRate, $hue: hue }) }),
+                    /* @__PURE__ */ jsxs(RtnPct, { $hue: hue, children: [
+                      row.retentionRate.toFixed(1),
+                      "%"
+                    ] })
+                  ]
+                },
+                row.n
+              );
+            }) })
+          ] }),
+          /* @__PURE__ */ jsx(RingGrid, { children: [
+            {
+              label: "Daily Active",
+              value: stats.activeUsers.daily.active,
+              pct: stats.activeUsers.daily.percentage,
+              color: T.amber,
+              sparkline: activeSpark,
+              delay: 8
+            },
+            {
+              label: "Weekly Active",
+              value: stats.activeUsers.weekly.active,
+              pct: stats.activeUsers.weekly.percentage,
+              color: T.green,
+              sparkline: activeSpark,
+              delay: 9
+            },
+            {
+              label: "Monthly Active",
+              value: stats.activeUsers.monthly.active,
+              pct: stats.activeUsers.monthly.percentage,
+              color: T.accent,
+              sparkline: activeSpark,
+              delay: 10
+            }
+          ].map(({ label, value, pct, color, delay }) => {
+            const isPos = pct == null || pct >= 0;
+            return /* @__PURE__ */ jsxs(RingCard, { $delay: delay, children: [
+              /* @__PURE__ */ jsx(
+                ProgressRing,
+                {
+                  value: value ?? 0,
+                  max: activeMax,
+                  color,
+                  size: 56
+                }
+              ),
+              /* @__PURE__ */ jsxs(RingInfo, { children: [
+                /* @__PURE__ */ jsx(RingLabel, { children: label }),
+                /* @__PURE__ */ jsx(RingVal, { children: (value ?? 0).toLocaleString() }),
+                pct != null && /* @__PURE__ */ jsxs(
+                  TrendBadge,
+                  {
+                    $pos: isPos,
+                    style: { marginTop: 4, marginBottom: 0 },
+                    children: [
+                      isPos ? "↑" : "↓",
+                      " ",
+                      Math.abs(pct).toFixed(1),
+                      "%"
+                    ]
+                  }
+                )
+              ] })
+            ] }, label);
+          }) })
+        ] })
+      ] })
+    }
+  );
 }
 function useUsers(options = {}) {
   const { limit = 25, offset = 0, search } = options;
@@ -3323,7 +4138,14 @@ function useUsers(options = {}) {
         {
           field: "email",
           operator: "contains",
-          value: search
+          value: search,
+          connector: "OR"
+        },
+        {
+          field: "name",
+          operator: "contains",
+          value: search,
+          connector: "OR"
         }
       ]) : void 0;
       const result = await client.dash.listUsers({
@@ -3552,6 +4374,45 @@ 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 14px;
+  background: white;
+  border: 1px solid #eaeaef;
+  border-radius: 8px;
+`;
+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,11 +4434,15 @@ function UserDetailDrawer({
 }) {
   const qc = useQueryClient();
   const { toggleNotification } = useNotification();
+  const { get, put } = useFetchClient();
   const schemaQuery = useModelSchema("user");
   const userQuery = useQuery({
     queryKey: ["dash-user", userId],
     queryFn: async () => {
-      const result = await client.dash.user({}, withContext({ userId }));
+      const result = await client.dash.user(
+        {},
+        withContext({ userId }, getAuthHeaders())
+      );
       if (result.error)
         throw new Error(result.error.message ?? "Failed to load user");
       return result.data;
@@ -3588,12 +4453,33 @@ function UserDetailDrawer({
     queryFn: async () => {
       const result = await client.dash.userOrganizations(
         {},
-        withContext({ userId })
+        withContext({ userId }, getAuthHeaders())
       );
       if (result.error) throw new Error(result.error.message ?? "Failed");
       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 +4490,8 @@ function UserDetailDrawer({
   const [banReason, setBanReason] = useState("");
   const [banExpiresDays, setBanExpiresDays] = useState("");
   const [confirmRevokeAll, setConfirmRevokeAll] = useState(false);
+  const [confirmRevokeSessionId, setConfirmRevokeSessionId] = useState(null);
+  const [confirmBan, setConfirmBan] = useState(false);
   const [confirmUnban, setConfirmUnban] = useState(false);
   const [confirmUnlinkAccountId, setConfirmUnlinkAccountId] = useState(null);
   const [confirmDisable2FA, setConfirmDisable2FA] = useState(false);
@@ -3622,26 +4510,33 @@ function UserDetailDrawer({
     setEditExtra((prev) => ({ ...prev, [name]: value }));
   };
   const extraData = {
-    ...user,
+    ...strapiUserQuery.data ?? {},
     ...editExtra
   };
   const updateMutation = useMutation({
     mutationFn: async () => {
-      const body = { ...editExtra };
+      const body = {};
       if (editName !== void 0) body.name = editName;
       if (editEmail !== void 0) body.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 })
+      const documentId = strapiUserQuery.data?.documentId;
+      if (!documentId) throw new Error("Could not resolve documentId for user");
+      const updateUser = await client.dash.updateUser(
+        { userId, ...body },
+        withContext({ userId }, getAuthHeaders())
       );
-      if (result.error)
-        throw new Error(result.error.message ?? "Update failed");
-      return result.data;
+      if (!updateUser.data) throw new Error("Update failed");
+      if (Object.keys(editExtra).length > 0) {
+        await put(
+          `/better-auth-dashboard/db/${documentId}?uid=plugin::better-auth.user`,
+          editExtra
+        );
+      }
     },
-    onSuccess: () => {
+    onSuccess: async () => {
+      await qc.invalidateQueries({ queryKey: ["dash-strapi-user", userId] });
       qc.invalidateQueries({ queryKey: ["dash-user", userId] });
       qc.invalidateQueries({ queryKey: ["dash-users"] });
       setEditName(void 0);
@@ -3662,11 +4557,32 @@ function UserDetailDrawer({
       });
     }
   });
+  const revokeSessionMutation = useMutation({
+    mutationFn: async (sessionId) => {
+      const result = await client.dash.sessions.revoke(
+        {},
+        withContext({ sessionId, userId }, getAuthHeaders())
+      );
+      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(
         { password: newPassword },
-        withContext({ userId })
+        withContext({ userId }, getAuthHeaders())
       );
       if (result.error)
         throw new Error(result.error.message ?? "Password update failed");
@@ -3694,11 +4610,15 @@ function UserDetailDrawer({
         const days = parseInt(banExpiresDays, 10);
         if (!Number.isNaN(days)) body.banExpires = Date.now() + days * 864e5;
       }
-      const result = await client.dash.banUser(body, withContext({ userId }));
+      const result = await client.dash.banUser(
+        body,
+        withContext({ userId }, getAuthHeaders())
+      );
       if (result.error) throw new Error(result.error.message ?? "Ban failed");
       return result.data;
     },
     onSuccess: () => {
+      setConfirmBan(false);
       qc.invalidateQueries({ queryKey: ["dash-user", userId] });
       qc.invalidateQueries({ queryKey: ["dash-users"] });
       setBanReason("");
@@ -3714,7 +4634,10 @@ function UserDetailDrawer({
   });
   const unbanMutation = useMutation({
     mutationFn: async () => {
-      const result = await client.dash.unbanUser({}, withContext({ userId }));
+      const result = await client.dash.unbanUser(
+        {},
+        withContext({ userId }, getAuthHeaders())
+      );
       if (result.error) throw new Error(result.error.message ?? "Unban failed");
       return result.data;
     },
@@ -3735,7 +4658,7 @@ function UserDetailDrawer({
     mutationFn: async (providerId) => {
       const result = await client.dash.unlinkAccount(
         { providerId },
-        withContext({ userId })
+        withContext({ userId }, getAuthHeaders())
       );
       if (result.error)
         throw new Error(result.error.message ?? "Failed to unlink account");
@@ -3756,7 +4679,7 @@ function UserDetailDrawer({
     mutationFn: async () => {
       const result = await client.dash.sessions.revokeAll(
         { userId },
-        withContext({})
+        withContext({}, getAuthHeaders())
       );
       if (result.error)
         throw new Error(result.error.message ?? "Revoke failed");
@@ -3778,7 +4701,7 @@ function UserDetailDrawer({
       const callbackUrl = new URL(window.location.href, window.location.origin);
       const result = await client.dash.sendVerificationEmail(
         { callbackUrl: callbackUrl.toString() },
-        withContext({ userId })
+        withContext({ userId }, getAuthHeaders())
       );
       if (result.error) throw new Error(result.error.message ?? "Failed");
       return result.data;
@@ -3801,7 +4724,7 @@ function UserDetailDrawer({
       const callbackUrl = new URL(window.location.href, window.location.origin);
       const result = await client.dash.sendResetPasswordEmail(
         { callbackUrl: callbackUrl.toString() },
-        withContext({ userId })
+        withContext({ userId }, getAuthHeaders())
       );
       if (result.error) throw new Error(result.error.message ?? "Failed");
       return result.data;
@@ -3823,7 +4746,7 @@ function UserDetailDrawer({
     mutationFn: async () => {
       const result = await client.dash.enableTwoFactor(
         {},
-        withContext({ userId })
+        withContext({ userId }, getAuthHeaders())
       );
       if (result.error)
         throw new Error(result.error.message ?? "Failed to enable 2FA");
@@ -3848,7 +4771,7 @@ function UserDetailDrawer({
     mutationFn: async () => {
       const result = await client.dash.disableTwoFactor(
         {},
-        withContext({ userId })
+        withContext({ userId }, getAuthHeaders())
       );
       if (result.error)
         throw new Error(result.error.message ?? "Failed to disable 2FA");
@@ -3876,7 +4799,7 @@ function UserDetailDrawer({
     mutationFn: async () => {
       const result = await client.dash.viewTwoFactorTotpUri(
         {},
-        withContext({ userId })
+        withContext({ userId }, getAuthHeaders())
       );
       if (result.error)
         throw new Error(result.error.message ?? "Failed to load TOTP URI");
@@ -3899,7 +4822,7 @@ function UserDetailDrawer({
     mutationFn: async () => {
       const result = await client.dash.viewBackupCodes(
         {},
-        withContext({ userId })
+        withContext({ userId }, getAuthHeaders())
       );
       if (result.error)
         throw new Error(result.error.message ?? "Failed to load backup codes");
@@ -3922,7 +4845,7 @@ function UserDetailDrawer({
     mutationFn: async () => {
       const result = await client.dash.generateBackupCodes(
         {},
-        withContext({ userId })
+        withContext({ userId }, getAuthHeaders())
       );
       if (result.error)
         throw new Error(
@@ -4118,7 +5041,15 @@ function UserDetailDrawer({
                     }
                   )
                 ] })
-              ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                EditViewSidePanels,
+                {
+                  model: "plugin::better-auth.user",
+                  documentId: strapiUserQuery.data?.documentId,
+                  document: strapiUserQuery.data ?? void 0
+                }
+              )
             ] })
           ] }) }),
           /* @__PURE__ */ jsx(Tabs.Content, { value: "security", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 5, paddingTop: 6, children: [
@@ -4314,7 +5245,8 @@ function UserDetailDrawer({
               ] })
             ] })
           ] }) }),
-          banEnabled && /* @__PURE__ */ jsx(Tabs.Content, { value: "ban", children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 4, paddingTop: 6, children: user?.banned ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          banEnabled && /* @__PURE__ */ jsx(Tabs.Content, { value: "ban", children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 5, paddingTop: 6, children: user?.banned ? /* @__PURE__ */ jsxs(FormSection, { children: [
+            /* @__PURE__ */ jsx(SectionLabel, { children: "Ban status" }),
             /* @__PURE__ */ jsxs(WarnCard, { children: [
               /* @__PURE__ */ jsx(
                 Typography,
@@ -4329,7 +5261,7 @@ function UserDetailDrawer({
                 "Reason: ",
                 user.banReason
               ] }),
-              user.banExpires && /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "danger600", children: [
+              user.banExpires ? /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "danger600", children: [
                 "Expires:",
                 " ",
                 new Date(user.banExpires).toLocaleDateString(
@@ -4341,8 +5273,7 @@ function UserDetailDrawer({
                     day: "numeric"
                   }
                 )
-              ] }),
-              !user.banExpires && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "danger600", children: "Duration: Permanent" })
+              ] }) : /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "danger600", children: "Duration: Permanent" })
             ] }),
             /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
               Button,
@@ -4352,27 +5283,28 @@ function UserDetailDrawer({
                 children: "Lift ban"
               }
             ) })
-          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          ] }) : /* @__PURE__ */ jsxs(FormSection, { children: [
+            /* @__PURE__ */ jsx(SectionLabel, { children: "Apply ban" }),
+            /* @__PURE__ */ jsxs(
+              Field.Root,
+              {
+                hint: "Optional — will be shown to the user",
+                style: { width: "100%" },
+                children: [
+                  /* @__PURE__ */ jsx(Field.Label, { children: "Reason" }),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      value: banReason,
+                      onChange: (e) => setBanReason(e.target.value),
+                      placeholder: "e.g. Violated terms of service"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Field.Hint, {})
+                ]
+              }
+            ),
             /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
-              /* @__PURE__ */ jsx(Grid.Item, { col: 12, children: /* @__PURE__ */ jsxs(
-                Field.Root,
-                {
-                  hint: "Optional — will be shown to the user",
-                  style: { width: "100%" },
-                  children: [
-                    /* @__PURE__ */ jsx(Field.Label, { children: "Reason" }),
-                    /* @__PURE__ */ jsx(
-                      TextInput,
-                      {
-                        value: banReason,
-                        onChange: (e) => setBanReason(e.target.value),
-                        placeholder: "e.g. Violated terms of service"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(Field.Hint, {})
-                  ]
-                }
-              ) }),
               /* @__PURE__ */ jsx(Grid.Item, { col: 6, children: /* @__PURE__ */ jsxs(
                 Field.Root,
                 {
@@ -4393,24 +5325,13 @@ function UserDetailDrawer({
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsx(Grid.Item, { col: 6, children: banExpiryPreview ? /* @__PURE__ */ jsx(
-                Flex,
-                {
-                  direction: "column",
-                  justifyContent: "flex-end",
-                  style: { height: "100%", paddingBottom: 4 },
-                  children: /* @__PURE__ */ jsxs(PreviewPill, { children: [
-                    "⏱ Expires ",
-                    banExpiryPreview
-                  ] })
-                }
-              ) : /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(Grid.Item, { col: 6, children: /* @__PURE__ */ jsx(
                 Flex,
                 {
                   direction: "column",
                   justifyContent: "flex-end",
                   style: { height: "100%", paddingBottom: 4 },
-                  children: /* @__PURE__ */ jsx(PreviewPill, { children: "♾ Permanent ban" })
+                  children: /* @__PURE__ */ jsx(PreviewPill, { children: banExpiryPreview ? `⏱ Expires ${banExpiryPreview}` : "♾ Permanent ban" })
                 }
               ) })
             ] }),
@@ -4418,31 +5339,68 @@ function UserDetailDrawer({
               Button,
               {
                 variant: "danger",
-                loading: banMutation.isLoading,
-                onClick: () => banMutation.mutate(),
+                onClick: () => setConfirmBan(true),
                 children: "Ban user"
               }
             ) })
           ] }) }) }),
-          /* @__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: 2, 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 +5437,29 @@ 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)
+          }
+        ),
+        confirmBan && /* @__PURE__ */ jsx(
+          ConfirmDialog,
+          {
+            title: "Ban user",
+            message: banReason ? `Ban this user for the following reason: "${banReason}"? They will be prevented from signing in.` : "Are you sure you want to ban this user? They will be prevented from signing in.",
+            confirmLabel: "Ban user",
+            variant: "danger",
+            loading: banMutation.isLoading,
+            onConfirm: () => banMutation.mutate(),
+            onCancel: () => setConfirmBan(false)
+          }
+        ),
         confirmUnban && /* @__PURE__ */ jsx(
           ConfirmDialog,
           {
@@ -4708,7 +5689,9 @@ const Toolbar = styled.div`
   gap: 12px;
 `;
 function UsersPage({ config }) {
+  const rbac = useRBAC(PERMISSIONS.user);
   const qc = useQueryClient();
+  const { toggleNotification } = useNotification();
   const banEnabled = hasPlugin(config, "admin");
   const emailVerificationEnabled = config.emailVerification.sendVerificationEmailEnabled;
   const twoFactorEnabled = hasPlugin(config, "two-factor");
@@ -4732,7 +5715,10 @@ function UsersPage({ config }) {
   const pageCount = Math.ceil(total / PAGE_SIZE);
   const deleteMutation = useMutation({
     mutationFn: async (userId) => {
-      const result = await client.dash.deleteUser({}, withContext({ userId }));
+      const result = await client.dash.deleteUser(
+        {},
+        withContext({ userId }, getAuthHeaders())
+      );
       if (result.error)
         throw new Error(result.error.message ?? "Delete failed");
     },
@@ -4740,38 +5726,65 @@ function UsersPage({ config }) {
       setConfirmDelete(null);
       qc.invalidateQueries({ queryKey: ["dash-users"] });
       qc.invalidateQueries({ queryKey: ["dash-user-stats"] });
+      toggleNotification({ type: "success", message: "User deleted" });
+    },
+    onError: (err) => {
+      toggleNotification({
+        type: "danger",
+        message: err.message ?? "Failed to delete user"
+      });
     }
   });
   const deleteManyMutation = useMutation({
     mutationFn: async (userIds) => {
       const result = await client.dash.deleteManyUsers(
         {},
-        withContext({ userIds })
+        withContext({ userIds }, getAuthHeaders())
       );
       if (result.error)
         throw new Error(result.error.message ?? "Delete failed");
       return result.data;
     },
-    onSuccess: () => {
+    onSuccess: (_data, userIds) => {
       setConfirmDeleteMany(false);
       setSelected(/* @__PURE__ */ new Set());
       qc.invalidateQueries({ queryKey: ["dash-users"] });
       qc.invalidateQueries({ queryKey: ["dash-user-stats"] });
+      toggleNotification({
+        type: "success",
+        message: `${userIds.length} user${userIds.length !== 1 ? "s" : ""} deleted`
+      });
+    },
+    onError: (err) => {
+      toggleNotification({
+        type: "danger",
+        message: err.message ?? "Failed to delete users"
+      });
     }
   });
   const banManyMutation = useMutation({
     mutationFn: async (userIds) => {
       const result = await client.dash.banManyUsers(
         {},
-        withContext({ userIds })
+        withContext({ userIds }, getAuthHeaders())
       );
       if (result.error) throw new Error(result.error.message ?? "Ban failed");
       return result.data;
     },
-    onSuccess: () => {
+    onSuccess: (_data, userIds) => {
       setConfirmBanMany(false);
       setSelected(/* @__PURE__ */ new Set());
       qc.invalidateQueries({ queryKey: ["dash-users"] });
+      toggleNotification({
+        type: "success",
+        message: `${userIds.length} user${userIds.length !== 1 ? "s" : ""} banned`
+      });
+    },
+    onError: (err) => {
+      toggleNotification({
+        type: "danger",
+        message: err.message ?? "Failed to ban users"
+      });
     }
   });
   const toggleSelect = (id) => {
@@ -4796,334 +5809,244 @@ function UsersPage({ config }) {
     setSearch(searchInput);
     setPage(1);
   };
-  return /* @__PURE__ */ jsxs(Wrap, { "data-testid": "users-page", children: [
-    /* @__PURE__ */ jsxs(PageHeader, { children: [
-      /* @__PURE__ */ jsxs(TitleBlock, { children: [
-        /* @__PURE__ */ jsx(PageTitle, { children: "Users" }),
-        /* @__PURE__ */ jsxs(PageSubtitle, { children: [
-          total.toLocaleString(),
-          " total",
-          data?.onlineUsers ? ` · ${data.onlineUsers} online` : ""
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          startIcon: /* @__PURE__ */ jsx(Plus, {}),
-          onClick: () => setShowCreate(true),
-          "data-testid": "create-user-btn",
-          children: "Create user"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(Toolbar, { children: [
-      /* @__PURE__ */ jsx(SearchForm, { onSubmit: handleSearch, children: /* @__PURE__ */ jsx(
-        Searchbar,
-        {
-          clearLabel: "Clear",
-          name: "search",
-          placeholder: "Search by email…",
-          value: searchInput,
-          onChange: (e) => setSearchInput(e.target.value),
-          onClear: () => {
-            setSearchInput("");
-            setSearch("");
-            setPage(1);
-          },
-          "data-testid": "user-search",
-          children: "Search users"
-        }
-      ) }),
-      someSelected && /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-        /* @__PURE__ */ jsxs(
-          Button,
-          {
-            variant: "danger-light",
-            size: "S",
-            onClick: () => setConfirmDeleteMany(true),
-            "data-testid": "delete-selected-btn",
-            children: [
-              "Delete ",
-              selected.size,
-              " selected"
-            ]
-          }
-        ),
-        banEnabled && /* @__PURE__ */ jsxs(
-          Button,
-          {
-            variant: "secondary",
-            size: "S",
-            onClick: () => setConfirmBanMany(true),
-            children: [
-              "Ban ",
-              selected.size,
-              " selected"
-            ]
-          }
-        )
-      ] })
-    ] }),
-    isError && /* @__PURE__ */ jsx("div", { style: { color: "#d02b20", fontSize: 12, padding: "8px 0" }, children: error?.message }),
-    /* @__PURE__ */ jsx(TableCard, { children: isLoading ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsx(Loader, { children: "Loading users…" }) }) : /* @__PURE__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx(THCheck, { children: /* @__PURE__ */ jsx(
-          Checkbox,
-          {
-            checked: allSelected,
-            onCheckedChange: handleSelectAll,
-            "aria-label": "Select all"
-          }
-        ) }),
-        /* @__PURE__ */ jsx(TH, { children: "Name" }),
-        /* @__PURE__ */ jsx(TH, { children: "Email" }),
-        /* @__PURE__ */ jsx(TH, { children: "Status" }),
-        /* @__PURE__ */ jsx(TH, { children: "Created" }),
-        /* @__PURE__ */ jsx(THActions, {})
-      ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: users.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-        TD,
-        {
-          colSpan: 6,
-          style: {
-            textAlign: "center",
-            padding: "40px",
-            color: "#8e8ea9"
-          },
-          "data-testid": "users-empty",
-          children: search ? `No users matching "${search}"` : "No users found"
-        }
-      ) }) : users.map((user, i) => /* @__PURE__ */ jsxs(
-        TR,
-        {
-          $selected: selected.has(user.id),
-          $i: i,
-          "data-testid": "user-row",
-          children: [
-            /* @__PURE__ */ jsx(TDCheck, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
+    Page.Protect,
+    {
+      permissions: PERMISSIONS.user.filter(
+        (p) => p.action === `plugin::${PLUGIN_ID}.user.read`
+      ),
+      children: /* @__PURE__ */ jsxs(Wrap, { "data-testid": "users-page", children: [
+        /* @__PURE__ */ jsxs(PageHeader, { children: [
+          /* @__PURE__ */ jsxs(TitleBlock, { children: [
+            /* @__PURE__ */ jsx(PageTitle, { children: "Users" }),
+            /* @__PURE__ */ jsxs(PageSubtitle, { children: [
+              total.toLocaleString(),
+              " total",
+              data?.onlineUsers ? ` · ${data.onlineUsers} online` : ""
+            ] })
+          ] }),
+          rbac.allowedActions.canCreate && /* @__PURE__ */ jsx(
+            Button,
+            {
+              startIcon: /* @__PURE__ */ jsx(Plus, {}),
+              onClick: () => setShowCreate(true),
+              "data-testid": "create-user-btn",
+              children: "Create user"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Toolbar, { children: [
+          /* @__PURE__ */ jsx(SearchForm, { onSubmit: handleSearch, children: /* @__PURE__ */ jsx(
+            Searchbar,
+            {
+              clearLabel: "Clear",
+              name: "search",
+              placeholder: "Search by email…",
+              value: searchInput,
+              onChange: (e) => setSearchInput(e.target.value),
+              onClear: () => {
+                setSearchInput("");
+                setSearch("");
+                setPage(1);
+              },
+              "data-testid": "user-search",
+              children: "Search users"
+            }
+          ) }),
+          someSelected && /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+            rbac.allowedActions.canDelete && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "danger-light",
+                size: "S",
+                onClick: () => setConfirmDeleteMany(true),
+                "data-testid": "delete-selected-btn",
+                children: [
+                  "Delete ",
+                  selected.size,
+                  " selected"
+                ]
+              }
+            ),
+            banEnabled && rbac.allowedActions.canUpdate && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "secondary",
+                size: "S",
+                onClick: () => setConfirmBanMany(true),
+                children: [
+                  "Ban ",
+                  selected.size,
+                  " selected"
+                ]
+              }
+            )
+          ] })
+        ] }),
+        isError && /* @__PURE__ */ jsx("div", { style: { color: "#d02b20", fontSize: 12, padding: "8px 0" }, children: error?.message }),
+        /* @__PURE__ */ jsx(TableCard, { children: isLoading ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsx(Loader, { children: "Loading users…" }) }) : /* @__PURE__ */ jsxs(Table, { children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            (rbac.allowedActions.canDelete || rbac.allowedActions.canUpdate) && /* @__PURE__ */ jsx(THCheck, { children: /* @__PURE__ */ jsx(
               Checkbox,
               {
-                checked: selected.has(user.id),
-                onCheckedChange: () => toggleSelect(user.id),
-                "aria-label": `Select ${user.name}`
+                checked: allSelected,
+                onCheckedChange: handleSelectAll,
+                "aria-label": "Select all"
               }
             ) }),
-            /* @__PURE__ */ jsx(TD, { children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
-              /* @__PURE__ */ jsx(
-                Avatar,
-                {
-                  name: user.name ?? "",
-                  src: user.image,
-                  size: 28
-                }
-              ),
-              /* @__PURE__ */ jsx(UserName, { children: user.name })
-            ] }) }),
-            /* @__PURE__ */ jsx(TD, { children: /* @__PURE__ */ jsx(MonoText, { children: user.email }) }),
-            /* @__PURE__ */ jsx(TD, { children: /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
-              user.emailVerified ? /* @__PURE__ */ jsx(StatusChip, { $variant: "verified", children: "Verified" }) : /* @__PURE__ */ jsx(StatusChip, { $variant: "unverified", children: "Unverified" }),
-              user.banned && /* @__PURE__ */ jsx(StatusChip, { $variant: "banned", children: "Banned" })
-            ] }) }),
-            /* @__PURE__ */ jsx(TD, { children: /* @__PURE__ */ jsx(DateText, { children: new Date(user.createdAt).toLocaleDateString() }) }),
-            /* @__PURE__ */ jsx(TDActions, { children: /* @__PURE__ */ jsxs(Flex, { gap: 1, justifyContent: "flex-end", children: [
-              /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  label: "Edit user",
-                  onClick: () => setDetailUserId(user.id),
-                  "data-testid": "edit-user-btn",
-                  children: /* @__PURE__ */ jsx(Pencil, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  label: "Delete user",
-                  onClick: () => setConfirmDelete(user.id),
-                  "data-testid": "delete-user-btn",
-                  children: /* @__PURE__ */ jsx(Trash, {})
-                }
-              )
-            ] }) })
-          ]
-        },
-        user.id
-      )) })
-    ] }) }),
-    pageCount > 1 && /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx(
-      Pagination,
-      {
-        activePage: page,
-        pageCount,
-        onChangePage: setPage
-      }
-    ) }),
-    showCreate && /* @__PURE__ */ jsx(CreateUserDialog, { onClose: () => setShowCreate(false) }),
-    detailUserId && /* @__PURE__ */ jsx(
-      UserDetailDrawer,
-      {
-        userId: detailUserId,
-        banEnabled,
-        emailVerificationEnabled,
-        twoFactorEnabled,
-        onClose: () => setDetailUserId(null)
-      }
-    ),
-    confirmDelete && /* @__PURE__ */ jsx(
-      ConfirmDialog,
-      {
-        title: "Delete user",
-        message: "Are you sure you want to delete this user? This action cannot be undone.",
-        confirmLabel: "Delete",
-        loading: deleteMutation.isLoading,
-        onConfirm: () => deleteMutation.mutate(confirmDelete),
-        onCancel: () => setConfirmDelete(null)
-      }
-    ),
-    confirmDeleteMany && /* @__PURE__ */ jsx(
-      ConfirmDialog,
-      {
-        title: `Delete ${selected.size} user${selected.size !== 1 ? "s" : ""}`,
-        message: `Are you sure you want to delete ${selected.size} user${selected.size !== 1 ? "s" : ""}? This action cannot be undone.`,
-        confirmLabel: "Delete all",
-        loading: deleteManyMutation.isLoading,
-        onConfirm: () => deleteManyMutation.mutate([...selected]),
-        onCancel: () => setConfirmDeleteMany(false)
-      }
-    ),
-    confirmBanMany && /* @__PURE__ */ jsx(
-      ConfirmDialog,
-      {
-        title: `Ban ${selected.size} user${selected.size !== 1 ? "s" : ""}`,
-        message: `Are you sure you want to ban ${selected.size} user${selected.size !== 1 ? "s" : ""}? They will be prevented from signing in.`,
-        confirmLabel: "Ban all",
-        variant: "danger",
-        loading: banManyMutation.isLoading,
-        onConfirm: () => banManyMutation.mutate([...selected]),
-        onCancel: () => setConfirmBanMany(false)
-      }
-    )
-  ] });
-}
-const Accent = styled.div`
-  height: 3px;
-  background: linear-gradient(90deg, #4945ff 0%, #7b79ff 55%, #9593ff 100%);
-  flex-shrink: 0;
-`;
-const BrandIcon = styled.div`
-  width: 30px;
-  height: 30px;
-  border-radius: 7px;
-  background: linear-gradient(135deg, #4945ff 0%, #7b79ff 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 12px;
-  font-weight: 900;
-  flex-shrink: 0;
-  letter-spacing: -0.06em;
-  user-select: none;
-`;
-const PathTag = styled.code`
-  padding: 2px 8px;
-  background: #f0f0ff;
-  border: 1px solid #d9d8ff;
-  border-radius: 4px;
-  font-size: 11px;
-  color: #4945ff;
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
-  font-weight: 500;
-`;
-function App() {
-  const { data: config, isLoading, isError, error } = useDashConfig();
-  const orgEnabled = hasPlugin(config, "organization");
-  const orgOptionsQuery = useQuery({
-    queryKey: ["dash-org-options"],
-    queryFn: async () => {
-      const result = await client.dash.organization.options();
-      if (result.error) return { teamsEnabled: false };
-      return result.data ?? { teamsEnabled: false };
-    },
-    enabled: orgEnabled
-  });
-  const teamsEnabled = orgEnabled ? orgOptionsQuery.data?.teamsEnabled ?? false : false;
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", padding: 12, children: /* @__PURE__ */ jsx(Loader, { children: "Loading Better Auth dashboard…" }) });
-  }
-  if (isError) {
-    return /* @__PURE__ */ jsx(Box, { padding: 6, children: /* @__PURE__ */ jsx(
-      Alert,
-      {
-        closeLabel: "Close",
-        title: "Error loading configuration",
-        variant: "danger",
-        children: error?.message
-      }
-    ) });
-  }
-  if (!config) return null;
-  return /* @__PURE__ */ jsx(Box, { background: "neutral100", minHeight: "100vh", "data-testid": "dashboard-root", children: /* @__PURE__ */ jsxs(Tabs.Root, { defaultValue: "overview", children: [
-    /* @__PURE__ */ jsxs(
-      Box,
-      {
-        background: "neutral0",
-        borderColor: "neutral150",
-        borderStyle: "solid",
-        borderWidth: "1px",
-        style: { overflow: "hidden" },
-        children: [
-          /* @__PURE__ */ jsx(Accent, {}),
-          /* @__PURE__ */ jsxs(
-            Box,
+            /* @__PURE__ */ jsx(TH, { children: "Name" }),
+            /* @__PURE__ */ jsx(TH, { children: "Email" }),
+            /* @__PURE__ */ jsx(TH, { children: "Status" }),
+            /* @__PURE__ */ jsx(TH, { children: "Created" }),
+            /* @__PURE__ */ jsx(THActions, {})
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: users.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+            TD,
             {
-              paddingLeft: 6,
-              paddingRight: 6,
-              paddingTop: 4,
-              paddingBottom: 0,
+              colSpan: 6,
+              style: {
+                textAlign: "center",
+                padding: "40px",
+                color: "#8e8ea9"
+              },
+              "data-testid": "users-empty",
+              children: search ? `No users matching "${search}"` : "No users found"
+            }
+          ) }) : users.map((user, i) => /* @__PURE__ */ jsxs(
+            TR,
+            {
+              $selected: selected.has(user.id),
+              $i: i,
+              "data-testid": "user-row",
               children: [
-                /* @__PURE__ */ jsxs(
-                  Flex,
+                (rbac.allowedActions.canDelete || rbac.allowedActions.canUpdate) && /* @__PURE__ */ jsx(TDCheck, { children: /* @__PURE__ */ jsx(
+                  Checkbox,
                   {
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    paddingBottom: 4,
-                    children: [
-                      /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
-                        /* @__PURE__ */ jsx(BrandIcon, { children: "BA" }),
-                        /* @__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" }) })
-                        ] })
-                      ] }),
-                      /* @__PURE__ */ jsx(PathTag, { children: config.basePath })
-                    ]
+                    checked: selected.has(user.id),
+                    onCheckedChange: () => toggleSelect(user.id),
+                    "aria-label": `Select ${user.name}`
                   }
-                ),
-                /* @__PURE__ */ jsxs(Tabs.List, { "aria-label": "Dashboard navigation", "data-testid": "main-nav", children: [
-                  /* @__PURE__ */ jsx(Tabs.Trigger, { value: "overview", "data-testid": "nav-overview", children: "Overview" }),
-                  /* @__PURE__ */ jsx(Tabs.Trigger, { value: "users", "data-testid": "nav-users", children: "Users" }),
-                  orgEnabled && /* @__PURE__ */ jsx(
-                    Tabs.Trigger,
+                ) }),
+                /* @__PURE__ */ jsx(TD, { children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
+                  /* @__PURE__ */ jsx(
+                    Avatar,
                     {
-                      value: "organizations",
-                      "data-testid": "nav-organizations",
-                      children: "Organizations"
+                      name: user.name ?? "",
+                      src: user.image,
+                      size: 28
                     }
                   ),
-                  /* @__PURE__ */ jsx(Tabs.Trigger, { value: "sessions", "data-testid": "nav-sessions", children: "Sessions" })
-                ] })
+                  /* @__PURE__ */ jsx(UserName, { children: user.name })
+                ] }) }),
+                /* @__PURE__ */ jsx(TD, { children: /* @__PURE__ */ jsx(MonoText, { children: user.email }) }),
+                /* @__PURE__ */ jsx(TD, { children: /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
+                  user.emailVerified ? /* @__PURE__ */ jsx(StatusChip, { $variant: "verified", children: "Verified" }) : /* @__PURE__ */ jsx(StatusChip, { $variant: "unverified", children: "Unverified" }),
+                  user.banned && /* @__PURE__ */ jsx(StatusChip, { $variant: "banned", children: "Banned" })
+                ] }) }),
+                /* @__PURE__ */ jsx(TD, { children: /* @__PURE__ */ jsx(DateText, { children: new Date(user.createdAt).toLocaleDateString() }) }),
+                /* @__PURE__ */ jsx(TDActions, { children: /* @__PURE__ */ jsxs(Flex, { gap: 1, justifyContent: "flex-end", children: [
+                  rbac.allowedActions.canUpdate && /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      label: "Edit user",
+                      onClick: () => setDetailUserId(user.id),
+                      "data-testid": "edit-user-btn",
+                      children: /* @__PURE__ */ jsx(Pencil, {})
+                    }
+                  ),
+                  rbac.allowedActions.canDelete && /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      label: "Delete user",
+                      onClick: () => setConfirmDelete(user.id),
+                      "data-testid": "delete-user-btn",
+                      children: /* @__PURE__ */ jsx(Trash, {})
+                    }
+                  )
+                ] }) })
               ]
+            },
+            user.id
+          )) })
+        ] }) }),
+        pageCount > 1 && /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "tertiary",
+              size: "S",
+              disabled: page === 1,
+              onClick: () => setPage((p) => p - 1),
+              children: "Previous"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "tertiary",
+              size: "S",
+              disabled: page >= pageCount,
+              onClick: () => setPage((p) => p + 1),
+              children: "Next"
             }
           )
-        ]
-      }
-    ),
-    /* @__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, {}) })
-  ] }) });
+        ] }) }),
+        rbac.allowedActions.canCreate && showCreate && /* @__PURE__ */ jsx(CreateUserDialog, { onClose: () => setShowCreate(false) }),
+        rbac.allowedActions.canUpdate && detailUserId && /* @__PURE__ */ jsx(
+          UserDetailDrawer,
+          {
+            userId: detailUserId,
+            banEnabled,
+            emailVerificationEnabled,
+            twoFactorEnabled,
+            onClose: () => setDetailUserId(null)
+          }
+        ),
+        rbac.allowedActions.canDelete && confirmDelete && /* @__PURE__ */ jsx(
+          ConfirmDialog,
+          {
+            title: "Delete user",
+            message: "Are you sure you want to delete this user? This action cannot be undone.",
+            confirmLabel: "Delete",
+            loading: deleteMutation.isLoading,
+            onConfirm: () => deleteMutation.mutate(confirmDelete),
+            onCancel: () => setConfirmDelete(null)
+          }
+        ),
+        rbac.allowedActions.canDelete && confirmDeleteMany && /* @__PURE__ */ jsx(
+          ConfirmDialog,
+          {
+            title: `Delete ${selected.size} user${selected.size !== 1 ? "s" : ""}`,
+            message: `Are you sure you want to delete ${selected.size} user${selected.size !== 1 ? "s" : ""}? This action cannot be undone.`,
+            confirmLabel: "Delete all",
+            loading: deleteManyMutation.isLoading,
+            onConfirm: () => deleteManyMutation.mutate([...selected]),
+            onCancel: () => setConfirmDeleteMany(false)
+          }
+        ),
+        rbac.allowedActions.canUpdate && confirmBanMany && /* @__PURE__ */ jsx(
+          ConfirmDialog,
+          {
+            title: `Ban ${selected.size} user${selected.size !== 1 ? "s" : ""}`,
+            message: `Are you sure you want to ban ${selected.size} user${selected.size !== 1 ? "s" : ""}? They will be prevented from signing in.`,
+            confirmLabel: "Ban all",
+            variant: "danger",
+            loading: banManyMutation.isLoading,
+            onConfirm: () => banManyMutation.mutate([...selected]),
+            onCancel: () => setConfirmBanMany(false)
+          }
+        )
+      ] })
+    }
+  );
+}
+function UsersRoute() {
+  const { config } = useOutletContext();
+  return /* @__PURE__ */ jsx(UsersPage, { config });
+}
+function OrganizationsRoute() {
+  const { teamsEnabled } = useOutletContext();
+  return /* @__PURE__ */ jsx(OrganizationsPage, { teamsEnabled });
 }
 function Root() {
   const queryClient = useMemo(
@@ -5138,7 +6061,12 @@ function Root() {
     }),
     []
   );
-  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(App, {}) });
+  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(Routes, { children: /* @__PURE__ */ jsxs(Route, { path: "/", element: /* @__PURE__ */ jsx(ProtectedApp, {}), children: [
+    /* @__PURE__ */ jsx(Route, { index: true, element: /* @__PURE__ */ jsx(Navigate, { to: "overview", replace: true }) }),
+    /* @__PURE__ */ jsx(Route, { path: "overview", element: /* @__PURE__ */ jsx(OverviewPage, {}) }),
+    /* @__PURE__ */ jsx(Route, { path: "users", element: /* @__PURE__ */ jsx(UsersRoute, {}) }),
+    /* @__PURE__ */ jsx(Route, { path: "organizations", element: /* @__PURE__ */ jsx(OrganizationsRoute, {}) })
+  ] }) }) });
 }
 export {
   Root,