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

package/dist/admin/{Root-BnRbzS-u.js → Root-CFxaaNC8.js}

@@ -9,7 +9,7 @@ const client$2 = require("@better-auth/infra/client");
 const client$1 = require("better-auth/client");
 const icons = require("@strapi/icons");
 const admin = require("@strapi/strapi/admin");
-const index = require("./index-xZ2FHX3i.js");
+const index = require("./index-C4--Z2Qg.js");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const dashPathMethods = () => ({
@@ -1042,6 +1042,7 @@ function OrganizationDetail({
   const schemaQuery = useModelSchema("organization");
   const qc = reactQuery.useQueryClient();
   const { toggleNotification } = admin.useNotification();
+  const { get, put } = admin.useFetchClient();
   const orgQuery = reactQuery.useQuery({
     queryKey: ["dash-org", organizationId],
     queryFn: async () => {
@@ -1088,6 +1089,16 @@ function OrganizationDetail({
       return result.data ?? [];
     }
   });
+  const strapiOrgQuery = reactQuery.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] = react.useState("details");
   const [editName, setEditName] = react.useState(void 0);
   const [editSlug, setEditSlug] = react.useState(void 0);
@@ -1108,7 +1119,7 @@ function OrganizationDetail({
   };
   const org = orgQuery.data;
   const extraData = {
-    ...org,
+    ...strapiOrgQuery.data ?? {},
     ...editExtra
   };
   const updateOrgMutation = reactQuery.useMutation({
@@ -1117,13 +1128,13 @@ 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: () => {
       qc.invalidateQueries({ queryKey: ["dash-org", organizationId] });
@@ -2136,6 +2147,7 @@ function OrgAvatar({ name, logo }) {
 }
 function OrganizationsPage({ teamsEnabled }) {
   const qc = reactQuery.useQueryClient();
+  const { toggleNotification } = admin.useNotification();
   const [page, setPage] = react.useState(1);
   const [search, setSearch] = react.useState("");
   const [searchInput, setSearchInput] = react.useState("");
@@ -2175,6 +2187,13 @@ 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 = reactQuery.useMutation({
@@ -2187,10 +2206,20 @@ function OrganizationsPage({ teamsEnabled }) {
         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 : [];
@@ -3257,7 +3286,7 @@ function OverviewPage() {
     queryKey: ["dash-recent-sessions"],
     queryFn: async () => {
       const { data } = await get(
-        "/better-auth-dashboard/db?uid=plugin::better-auth.session&pagination[pageSize]=12&sort[0]=createdAt:desc"
+        "/better-auth-dashboard/db?uid=plugin::better-auth.session&pagination[pageSize]=12&sort[0]=updatedAt:desc"
       );
       return data.results ?? [];
     },
@@ -3273,6 +3302,43 @@ 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 = reactQuery.useQuery({
+    queryKey: ["dash-active-users", activeUserIds],
+    queryFn: async () => {
+      if (activeUserIds.length === 0) return [];
+      const params = new URLSearchParams({ uid: "plugin::better-auth.user" });
+      for (let i = 0; i < activeUserIds.length; i++) {
+        params.set(`filters[id][$in][${i}]`, activeUserIds[i]);
+      }
+      params.set("pagination[pageSize]", "12");
+      const { data } = await get(
+        `/better-auth-dashboard/db?${params}`
+      );
+      return data.results ?? [];
+    },
+    enabled: feedMode === "active" && activeUserIds.length > 0
+  });
+  const chartRef = react.useRef(null);
+  const [chartHeight, setChartHeight] = react.useState(0);
+  react.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__ */ jsxRuntime.jsx(
       designSystem.Flex,
@@ -3290,8 +3356,12 @@ function OverviewPage() {
   const graphData = graphQuery.data?.data ?? [];
   const rtnData = retentionQuery.data?.data ?? [];
   const users = usersQuery.data?.users ?? [];
-  const sessions = sessionsQuery.data ?? [];
   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);
@@ -3395,7 +3465,7 @@ function OverviewPage() {
       /* @__PURE__ */ jsxRuntime.jsx(DivLine, {})
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(TwoPanel, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(ChartCard, { $delay: 5, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ChartCard, { ref: chartRef, $delay: 5, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(ChartHeader, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(ChartTitle, { children: "User Growth" }),
           /* @__PURE__ */ jsxRuntime.jsx(SeriesRow, { children: ALL_SERIES.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3431,57 +3501,57 @@ function OverviewPage() {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(FeedCard, { $delay: 6, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(FeedHead, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: feedMode === "signups" ? "Recent Sign-ups" : "Recent Active" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            FeedSelect,
-            {
-              value: feedMode,
-              onChange: (e) => setFeedMode(e.target.value),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "signups", children: "Recent Sign-ups" }),
-                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "active", children: "Recent Active" })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(FeedScroll, { children: feedMode === "signups" ? usersQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: "Loading…" }) }) : users.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Empty, { children: "No users yet" }) : users.map((u) => /* @__PURE__ */ jsxRuntime.jsxs(FeedItem, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(FeedTop, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 1, style: { minWidth: 0 }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Avatar, { name: u.name, src: u.image, size: 20 }),
-              /* @__PURE__ */ jsxRuntime.jsx(FeedName, { title: u.name, children: u.name })
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        FeedCard,
+        {
+          $delay: 6,
+          style: chartHeight > 0 ? { height: chartHeight } : void 0,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(FeedHead, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: feedMode === "signups" ? "Recent Sign-ups" : "Recently Active" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                FeedSelect,
+                {
+                  value: feedMode,
+                  onChange: (e) => setFeedMode(e.target.value),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "signups", children: "Recent Sign-ups" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "active", children: "Recently Active" })
+                  ]
+                }
+              )
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(FeedMeta, { children: relTime(u.createdAt) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(FeedEmail, { title: u.email, children: u.email })
-        ] }, u.id)) : sessionsQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: "Loading…" }) }) : sessions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Empty, { children: "No sessions yet" }) : sessions.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(FeedItem, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(FeedTop, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              FeedName,
-              {
-                title: s.userAgent ?? void 0,
-                style: { fontFamily: T.mono, fontSize: 10 },
-                children: s.ipAddress ?? "—"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(FeedMeta, { children: relTime(s.createdAt) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            FeedEmail,
-            {
-              title: s.userAgent ?? void 0,
-              style: {
-                fontSize: 9,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              },
-              children: s.userAgent ?? "Unknown agent"
-            }
-          )
-        ] }, s.documentId)) })
-      ] })
+            /* @__PURE__ */ jsxRuntime.jsx(FeedScroll, { children: feedMode === "signups" ? usersQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: "Loading…" }) }) : users.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Empty, { children: "No users yet" }) : users.map((u) => /* @__PURE__ */ jsxRuntime.jsxs(FeedItem, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(FeedTop, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 1, style: { minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Avatar, { name: u.name, src: u.image, size: 20 }),
+                  /* @__PURE__ */ jsxRuntime.jsx(FeedName, { title: u.name, children: u.name })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(FeedMeta, { children: relTime(u.createdAt) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(FeedEmail, { title: u.email, children: u.email })
+            ] }, u.id)) : activeUsersQuery.isLoading || sessionsQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: "Loading…" }) }) : sortedActiveUsers.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Empty, { children: "No recent activity" }) : sortedActiveUsers.map((u) => /* @__PURE__ */ jsxRuntime.jsxs(FeedItem, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(FeedTop, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 1, style: { minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Avatar,
+                    {
+                      name: u.name,
+                      src: u.image ?? void 0,
+                      size: 20
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(FeedName, { title: u.name, children: u.name })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(FeedMeta, { children: relTime(
+                  lastActiveByUserId.get(String(u.id)) ?? u.createdAt
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(FeedEmail, { title: u.email, children: u.email })
+            ] }, u.documentId)) })
+          ]
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(SectionDivider, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(DivLabel, { children: "Retention & Activity" }),
@@ -3857,9 +3927,10 @@ const SessionCard = styled__default.default.div`
   align-items: flex-start;
   justify-content: space-between;
   gap: 12px;
-  padding: 10px 0;
-  border-bottom: 1px solid #f5f5f9;
-  &:last-child { border-bottom: none; }
+  padding: 10px 14px;
+  background: white;
+  border: 1px solid #eaeaef;
+  border-radius: 8px;
 `;
 const SessionMeta = styled__default.default.div`
   display: flex;
@@ -3965,6 +4036,7 @@ function UserDetailDrawer({
   const [banExpiresDays, setBanExpiresDays] = react.useState("");
   const [confirmRevokeAll, setConfirmRevokeAll] = react.useState(false);
   const [confirmRevokeSessionId, setConfirmRevokeSessionId] = react.useState(null);
+  const [confirmBan, setConfirmBan] = react.useState(false);
   const [confirmUnban, setConfirmUnban] = react.useState(false);
   const [confirmUnlinkAccountId, setConfirmUnlinkAccountId] = react.useState(null);
   const [confirmDisable2FA, setConfirmDisable2FA] = react.useState(false);
@@ -3988,33 +4060,18 @@ function UserDetailDrawer({
   };
   const updateMutation = reactQuery.useMutation({
     mutationFn: async () => {
-      const baBody = {};
-      if (editName !== void 0) baBody.name = editName;
-      if (editEmail !== void 0) baBody.email = editEmail;
+      const body = { ...editExtra };
+      if (editName !== void 0) body.name = editName;
+      if (editEmail !== void 0) body.email = editEmail;
       if (editEmailVerified !== void 0)
-        baBody.emailVerified = editEmailVerified;
-      if (editImage !== void 0) baBody.image = editImage;
-      const ops = [];
-      if (Object.keys(baBody).length > 0) {
-        ops.push(
-          client.dash.updateUser(baBody, withContext({ userId })).then((result) => {
-            if (result.error)
-              throw new Error(result.error.message ?? "Update failed");
-          })
-        );
-      }
-      if (Object.keys(editExtra).length > 0) {
-        const documentId = strapiUserQuery.data?.documentId;
-        if (!documentId)
-          throw new Error("Could not resolve documentId for user");
-        ops.push(
-          put(
-            `/better-auth-dashboard/db/${documentId}?uid=plugin::better-auth.user`,
-            editExtra
-          )
-        );
-      }
-      await Promise.all(ops);
+        body.emailVerified = editEmailVerified;
+      if (editImage !== void 0) body.image = editImage;
+      const documentId = strapiUserQuery.data?.documentId;
+      if (!documentId) throw new Error("Could not resolve documentId for user");
+      await put(
+        `/better-auth-dashboard/db/${documentId}?uid=plugin::better-auth.user`,
+        body
+      );
     },
     onSuccess: () => {
       qc.invalidateQueries({ queryKey: ["dash-user", userId] });
@@ -4042,7 +4099,7 @@ function UserDetailDrawer({
     mutationFn: async (sessionId) => {
       const result = await client.dash.sessions.revoke(
         {},
-        withContext({ sessionId })
+        withContext({ sessionId, userId })
       );
       if (result.error)
         throw new Error(result.error.message ?? "Revoke failed");
@@ -4096,6 +4153,7 @@ function UserDetailDrawer({
       return result.data;
     },
     onSuccess: () => {
+      setConfirmBan(false);
       qc.invalidateQueries({ queryKey: ["dash-user", userId] });
       qc.invalidateQueries({ queryKey: ["dash-users"] });
       setBanReason("");
@@ -4711,7 +4769,8 @@ function UserDetailDrawer({
               ] })
             ] })
           ] }) }),
-          banEnabled && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Content, { value: "ban", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 4, paddingTop: 6, children: user?.banned ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          banEnabled && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Content, { value: "ban", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 5, paddingTop: 6, children: user?.banned ? /* @__PURE__ */ jsxRuntime.jsxs(FormSection, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: "Ban status" }),
             /* @__PURE__ */ jsxRuntime.jsxs(WarnCard, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 designSystem.Typography,
@@ -4726,7 +4785,7 @@ function UserDetailDrawer({
                 "Reason: ",
                 user.banReason
               ] }),
-              user.banExpires && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "danger600", children: [
+              user.banExpires ? /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "danger600", children: [
                 "Expires:",
                 " ",
                 new Date(user.banExpires).toLocaleDateString(
@@ -4738,8 +4797,7 @@ function UserDetailDrawer({
                     day: "numeric"
                   }
                 )
-              ] }),
-              !user.banExpires && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "danger600", children: "Duration: Permanent" })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "danger600", children: "Duration: Permanent" })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
               designSystem.Button,
@@ -4749,27 +4807,28 @@ function UserDetailDrawer({
                 children: "Lift ban"
               }
             ) })
-          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(FormSection, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: "Apply ban" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              designSystem.Field.Root,
+              {
+                hint: "Optional — will be shown to the user",
+                style: { width: "100%" },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Reason" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.TextInput,
+                    {
+                      value: banReason,
+                      onChange: (e) => setBanReason(e.target.value),
+                      placeholder: "e.g. Violated terms of service"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+                ]
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(
-                designSystem.Field.Root,
-                {
-                  hint: "Optional — will be shown to the user",
-                  style: { width: "100%" },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Reason" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      designSystem.TextInput,
-                      {
-                        value: banReason,
-                        onChange: (e) => setBanReason(e.target.value),
-                        placeholder: "e.g. Violated terms of service"
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
-                  ]
-                }
-              ) }),
               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(
                 designSystem.Field.Root,
                 {
@@ -4790,24 +4849,13 @@ function UserDetailDrawer({
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, children: banExpiryPreview ? /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.Flex,
-                {
-                  direction: "column",
-                  justifyContent: "flex-end",
-                  style: { height: "100%", paddingBottom: 4 },
-                  children: /* @__PURE__ */ jsxRuntime.jsxs(PreviewPill, { children: [
-                    "⏱ Expires ",
-                    banExpiryPreview
-                  ] })
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
                 designSystem.Flex,
                 {
                   direction: "column",
                   justifyContent: "flex-end",
                   style: { height: "100%", paddingBottom: 4 },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(PreviewPill, { children: "♾ Permanent ban" })
+                  children: /* @__PURE__ */ jsxRuntime.jsx(PreviewPill, { children: banExpiryPreview ? `⏱ Expires ${banExpiryPreview}` : "♾ Permanent ban" })
                 }
               ) })
             ] }),
@@ -4815,8 +4863,7 @@ function UserDetailDrawer({
               designSystem.Button,
               {
                 variant: "danger",
-                loading: banMutation.isLoading,
-                onClick: () => banMutation.mutate(),
+                onClick: () => setConfirmBan(true),
                 children: "Ban user"
               }
             ) })
@@ -4843,19 +4890,27 @@ function UserDetailDrawer({
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(FormSection, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: "Active sessions" }),
-              sessionsQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: "Loading sessions…" }) }) : (sessionsQuery.data ?? []).length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: "No active sessions." }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 0, alignItems: "stretch", children: (sessionsQuery.data ?? []).map((session) => /* @__PURE__ */ jsxRuntime.jsxs(SessionCard, { children: [
+              sessionsQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: "Loading sessions…" }) }) : (sessionsQuery.data ?? []).length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: "No active sessions." }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 2, alignItems: "stretch", children: (sessionsQuery.data ?? []).map((session) => /* @__PURE__ */ jsxRuntime.jsxs(SessionCard, { children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(SessionMeta, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", style: { flexWrap: "wrap" }, children: [
-                    session.ipAddress && /* @__PURE__ */ jsxRuntime.jsx(IpChip, { children: session.ipAddress }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(TimestampText, { children: [
-                      "Created",
-                      " ",
-                      new Date(session.createdAt).toLocaleString(),
-                      " · Expires",
-                      " ",
-                      new Date(session.expiresAt).toLocaleString()
-                    ] })
-                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    designSystem.Flex,
+                    {
+                      gap: 2,
+                      alignItems: "center",
+                      style: { flexWrap: "wrap" },
+                      children: [
+                        session.ipAddress && /* @__PURE__ */ jsxRuntime.jsx(IpChip, { children: session.ipAddress }),
+                        /* @__PURE__ */ jsxRuntime.jsxs(TimestampText, { children: [
+                          "Created",
+                          " ",
+                          new Date(session.createdAt).toLocaleString(),
+                          " · Expires",
+                          " ",
+                          new Date(session.expiresAt).toLocaleString()
+                        ] })
+                      ]
+                    }
+                  ),
                   session.userAgent && /* @__PURE__ */ jsxRuntime.jsx(AgentText, { children: session.userAgent })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -4917,6 +4972,18 @@ function UserDetailDrawer({
             onCancel: () => setConfirmRevokeSessionId(null)
           }
         ),
+        confirmBan && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
           ConfirmDialog,
           {
@@ -5147,6 +5214,7 @@ const Toolbar = styled__default.default.div`
 `;
 function UsersPage({ config }) {
   const qc = reactQuery.useQueryClient();
+  const { toggleNotification } = admin.useNotification();
   const banEnabled = hasPlugin(config, "admin");
   const emailVerificationEnabled = config.emailVerification.sendVerificationEmailEnabled;
   const twoFactorEnabled = hasPlugin(config, "two-factor");
@@ -5178,6 +5246,13 @@ 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 = reactQuery.useMutation({
@@ -5190,11 +5265,21 @@ function UsersPage({ config }) {
         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 = reactQuery.useMutation({
@@ -5206,10 +5291,20 @@ function UsersPage({ config }) {
       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) => {
@@ -5388,14 +5483,28 @@ function UsersPage({ config }) {
         user.id
       )) })
     ] }) }),
-    pageCount > 1 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.Pagination,
-      {
-        activePage: page,
-        pageCount,
-        onChangePage: setPage
-      }
-    ) }),
+    pageCount > 1 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Button,
+        {
+          variant: "tertiary",
+          size: "S",
+          disabled: page === 1,
+          onClick: () => setPage((p) => p - 1),
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Button,
+        {
+          variant: "tertiary",
+          size: "S",
+          disabled: page >= pageCount,
+          onClick: () => setPage((p) => p + 1),
+          children: "Next"
+        }
+      )
+    ] }) }),
     showCreate && /* @__PURE__ */ jsxRuntime.jsx(CreateUserDialog, { onClose: () => setShowCreate(false) }),
     detailUserId && /* @__PURE__ */ jsxRuntime.jsx(
       UserDetailDrawer,