@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/admins/admins-table.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, TableShell, TableSkeleton, Th } from "@withpotter/ui-kit";
+import { EmptyState, Panel } from "../_ui";
+import { EmptyBlock } from "../audit/empty-block";
+import { AdminRow, ADMIN_COLUMNS } from "./admin-row";
+function AdminsTable({
+  data,
+  isLoading,
+  isError,
+  onRetry,
+  roles,
+  invite,
+  onAccess,
+  onToggleStatus,
+  onResetPassword
+}) {
+  let table;
+  if (isLoading) {
+    table = /* @__PURE__ */ jsx("div", { "aria-hidden": true, children: /* @__PURE__ */ jsx(TableSkeleton, { bare: true, rows: 5, columns: ADMIN_COLUMNS }) });
+  } else if (isError || !data) {
+    table = /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        tone: "error",
+        title: "Admins could not be loaded",
+        description: "Try again. If this keeps happening, contact engineering.",
+        action: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: onRetry, children: "Try again" })
+      }
+    );
+  } else if (data.length === 0) {
+    table = /* @__PURE__ */ jsx(
+      EmptyBlock,
+      {
+        message: "No admins yet. Give each one only the access they need.",
+        action: invite
+      }
+    );
+  } else {
+    table = /* @__PURE__ */ jsx(
+      TableShell,
+      {
+        bare: true,
+        minWidth: 900,
+        density: "compact",
+        head: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx(Th, { children: "Admin" }),
+          /* @__PURE__ */ jsx(Th, { children: "Level" }),
+          /* @__PURE__ */ jsx(Th, { children: "Access" }),
+          /* @__PURE__ */ jsx(Th, { children: "Status" }),
+          /* @__PURE__ */ jsx(Th, { children: "Last sign-in" }),
+          /* @__PURE__ */ jsx(Th, { align: "right", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Actions" }) })
+        ] }),
+        children: data.map((a) => /* @__PURE__ */ jsx(
+          AdminRow,
+          {
+            a,
+            roles,
+            actions: {
+              onAccess: (kind) => onAccess({ admin: a, kind }),
+              onToggleStatus: () => onToggleStatus(a),
+              onResetPassword: () => onResetPassword(a)
+            }
+          },
+          a.id
+        ))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { "aria-busy": isLoading || void 0, children: /* @__PURE__ */ jsx(Panel, { title: "All admins", count: data?.length, height: "auto", flush: true, children: table }) });
+}
+export {
+  AdminsTable
+};
+//# sourceMappingURL=admins-table.js.map

package/dist/admin/admins/admins-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/admins/admins-table.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { Button, TableShell, TableSkeleton, Th } from '@withpotter/ui-kit';\nimport type { AdminRow as Admin, RoleRow } from '@withpotter/lib/admin-api';\nimport { EmptyState, Panel } from '../_ui';\nimport { EmptyBlock } from '../audit/empty-block';\nimport type { AccessEdit } from './access-dialog';\nimport { AdminRow, ADMIN_COLUMNS } from './admin-row';\n\n/** Every admin with their level, access and status, in one card. */\nexport function AdminsTable({\n  data,\n  isLoading,\n  isError,\n  onRetry,\n  roles,\n  invite,\n  onAccess,\n  onToggleStatus,\n  onResetPassword,\n}: {\n  data: Admin[] | undefined;\n  isLoading: boolean;\n  isError: boolean;\n  onRetry: () => void;\n  roles: RoleRow[];\n  /** The Invite button, offered again when there is no one yet. */\n  invite: ReactNode;\n  onAccess: (edit: AccessEdit) => void;\n  onToggleStatus: (admin: Admin) => void;\n  onResetPassword: (admin: Admin) => void;\n}) {\n  let table;\n  if (isLoading) {\n    table = (\n      <div aria-hidden>\n        <TableSkeleton bare rows={5} columns={ADMIN_COLUMNS} />\n      </div>\n    );\n  } else if (isError || !data) {\n    table = (\n      <EmptyState\n        tone=\"error\"\n        title=\"Admins could not be loaded\"\n        description=\"Try again. If this keeps happening, contact engineering.\"\n        action={\n          <Button size=\"sm\" variant=\"secondary\" onClick={onRetry}>\n            Try again\n          </Button>\n        }\n      />\n    );\n  } else if (data.length === 0) {\n    table = (\n      <EmptyBlock\n        message=\"No admins yet. Give each one only the access they need.\"\n        action={invite}\n      />\n    );\n  } else {\n    table = (\n      <TableShell\n        bare\n        minWidth={900}\n        density=\"compact\"\n        head={\n          <tr>\n            <Th>Admin</Th>\n            <Th>Level</Th>\n            <Th>Access</Th>\n            <Th>Status</Th>\n            <Th>Last sign-in</Th>\n            <Th align=\"right\">\n              <span className=\"sr-only\">Actions</span>\n            </Th>\n          </tr>\n        }\n      >\n        {data.map((a) => (\n          <AdminRow\n            key={a.id}\n            a={a}\n            roles={roles}\n            actions={{\n              onAccess: (kind) => onAccess({ admin: a, kind }),\n              onToggleStatus: () => onToggleStatus(a),\n              onResetPassword: () => onResetPassword(a),\n            }}\n          />\n        ))}\n      </TableShell>\n    );\n  }\n\n  return (\n    <div aria-busy={isLoading || undefined}>\n      <Panel title=\"All admins\" count={data?.length} height=\"auto\" flush>\n        {table}\n      </Panel>\n    </div>\n  );\n}\n"],"mappings":";AAqCQ,cA8BE,YA9BF;AAlCR,SAAS,QAAQ,YAAY,eAAe,UAAU;AAEtD,SAAS,YAAY,aAAa;AAClC,SAAS,kBAAkB;AAE3B,SAAS,UAAU,qBAAqB;AAGjC,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAWG;AACD,MAAI;AACJ,MAAI,WAAW;AACb,YACE,oBAAC,SAAI,eAAW,MACd,8BAAC,iBAAc,MAAI,MAAC,MAAM,GAAG,SAAS,eAAe,GACvD;AAAA,EAEJ,WAAW,WAAW,CAAC,MAAM;AAC3B,YACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,QACE,oBAAC,UAAO,MAAK,MAAK,SAAQ,aAAY,SAAS,SAAS,uBAExD;AAAA;AAAA,IAEJ;AAAA,EAEJ,WAAW,KAAK,WAAW,GAAG;AAC5B,YACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,QAAQ;AAAA;AAAA,IACV;AAAA,EAEJ,OAAO;AACL,YACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAI;AAAA,QACJ,UAAU;AAAA,QACV,SAAQ;AAAA,QACR,MACE,qBAAC,QACC;AAAA,8BAAC,MAAG,mBAAK;AAAA,UACT,oBAAC,MAAG,mBAAK;AAAA,UACT,oBAAC,MAAG,oBAAM;AAAA,UACV,oBAAC,MAAG,oBAAM;AAAA,UACV,oBAAC,MAAG,0BAAY;AAAA,UAChB,oBAAC,MAAG,OAAM,SACR,8BAAC,UAAK,WAAU,WAAU,qBAAO,GACnC;AAAA,WACF;AAAA,QAGD,eAAK,IAAI,CAAC,MACT;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA,SAAS;AAAA,cACP,UAAU,CAAC,SAAS,SAAS,EAAE,OAAO,GAAG,KAAK,CAAC;AAAA,cAC/C,gBAAgB,MAAM,eAAe,CAAC;AAAA,cACtC,iBAAiB,MAAM,gBAAgB,CAAC;AAAA,YAC1C;AAAA;AAAA,UAPK,EAAE;AAAA,QAQT,CACD;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE,oBAAC,SAAI,aAAW,aAAa,QAC3B,8BAAC,SAAM,OAAM,cAAa,OAAO,MAAM,QAAQ,QAAO,QAAO,OAAK,MAC/D,iBACH,GACF;AAEJ;","names":[]}

package/dist/admin/admins/admins-workspace.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { Button } from "@withpotter/ui-kit";
+import {
+  usePlatformAdmins,
+  useAdminPermissions,
+  useAdminRoles
+} from "../hooks";
+import { PageTabs, PeriodSelector, useTabParam } from "../_ui";
+import { SectionHeader } from "../audit/section-header";
+import { useAnalyticsRange } from "../audit/use-range";
+import { AccessDialog } from "./access-dialog";
+import { AdminsActivity } from "./admins-activity";
+import { AdminsAnalytics } from "./admins-analytics";
+import { AdminsTable } from "./admins-table";
+import { InviteDialog } from "./invite-dialog";
+import { TempPasswordDialog } from "./temp-password-dialog";
+import { useAdminActions } from "./use-admin-actions";
+const KEYS = ["overview", "manage", "activity"];
+function AdminsWorkspace() {
+  const [tab, setTab] = useTabParam(KEYS);
+  const queryClient = useQueryClient();
+  const { data, isLoading, isError, refetch } = usePlatformAdmins();
+  const { data: catalog = [] } = useAdminPermissions();
+  const { data: roles = [] } = useAdminRoles();
+  const period = useAnalyticsRange();
+  const [inviting, setInviting] = useState(false);
+  const [access, setAccess] = useState(null);
+  const invalidate = () => void queryClient.invalidateQueries({
+    queryKey: ["platform-admin", "admins"]
+  });
+  const { temp, setTemp, toggleStatus, reset } = useAdminActions(invalidate);
+  const invite = /* @__PURE__ */ jsx(Button, { onClick: () => setInviting(true), children: "Invite admin" });
+  const tabs = [
+    { id: "overview", label: "Overview" },
+    { id: "manage", label: "Manage admins", count: data?.length },
+    { id: "activity", label: "Recent activity" }
+  ];
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      SectionHeader,
+      {
+        title: "Admins",
+        description: "The people who run this console. Grant only the access each one needs.",
+        actions: /* @__PURE__ */ jsxs("div", { className: "adm-toolbar", children: [
+          tab !== "manage" && /* @__PURE__ */ jsx(
+            PeriodSelector,
+            {
+              value: period.rangeKey,
+              onChange: period.setRangeKey,
+              customStart: period.customStart,
+              customEnd: period.customEnd,
+              onCustomChange: period.onCustomChange
+            }
+          ),
+          tab === "manage" && invite
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(PageTabs, { tabs, active: tab, onChange: setTab }),
+    tab === "overview" && /* @__PURE__ */ jsx(AdminsAnalytics, { range: period.range }),
+    tab === "activity" && /* @__PURE__ */ jsx(AdminsActivity, { range: period.range }),
+    tab === "manage" && /* @__PURE__ */ jsx(
+      AdminsTable,
+      {
+        data,
+        isLoading,
+        isError,
+        onRetry: () => void refetch(),
+        roles,
+        invite,
+        onAccess: setAccess,
+        onToggleStatus: (a) => void toggleStatus(a),
+        onResetPassword: (a) => void reset(a)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InviteDialog,
+      {
+        open: inviting,
+        catalog,
+        roles,
+        onClose: () => setInviting(false),
+        onInvited: (r) => {
+          setInviting(false);
+          setTemp({ ...r, reason: "invite" });
+          invalidate();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AccessDialog,
+      {
+        edit: access,
+        catalog,
+        roles,
+        onClose: () => setAccess(null),
+        onSaved: invalidate
+      }
+    ),
+    /* @__PURE__ */ jsx(TempPasswordDialog, { temp, onClose: () => setTemp(null) })
+  ] });
+}
+export {
+  AdminsWorkspace
+};
+//# sourceMappingURL=admins-workspace.js.map

package/dist/admin/admins/admins-workspace.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/admins/admins-workspace.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { Button } from '@withpotter/ui-kit';\nimport {\n  usePlatformAdmins,\n  useAdminPermissions,\n  useAdminRoles,\n} from '../hooks';\nimport { PageTabs, PeriodSelector, useTabParam } from '../_ui';\nimport { SectionHeader } from '../audit/section-header';\nimport { useAnalyticsRange } from '../audit/use-range';\nimport { AccessDialog, type AccessEdit } from './access-dialog';\nimport { AdminsActivity } from './admins-activity';\nimport { AdminsAnalytics } from './admins-analytics';\nimport { AdminsTable } from './admins-table';\nimport { InviteDialog } from './invite-dialog';\nimport { TempPasswordDialog } from './temp-password-dialog';\nimport { useAdminActions } from './use-admin-actions';\n\nconst KEYS = ['overview', 'manage', 'activity'] as const;\n\n/** Admins: the picture, the people and what they did, one tab each. */\nexport function AdminsWorkspace() {\n  const [tab, setTab] = useTabParam(KEYS);\n  const queryClient = useQueryClient();\n  const { data, isLoading, isError, refetch } = usePlatformAdmins();\n  const { data: catalog = [] } = useAdminPermissions();\n  const { data: roles = [] } = useAdminRoles();\n  const period = useAnalyticsRange();\n  const [inviting, setInviting] = useState(false);\n  const [access, setAccess] = useState<AccessEdit | null>(null);\n  const invalidate = () =>\n    void queryClient.invalidateQueries({\n      queryKey: ['platform-admin', 'admins'],\n    });\n  const { temp, setTemp, toggleStatus, reset } = useAdminActions(invalidate);\n  const invite = (\n    <Button onClick={() => setInviting(true)}>Invite admin</Button>\n  );\n  const tabs = [\n    { id: 'overview', label: 'Overview' },\n    { id: 'manage', label: 'Manage admins', count: data?.length },\n    { id: 'activity', label: 'Recent activity' },\n  ] as const;\n\n  return (\n    <div>\n      <SectionHeader\n        title=\"Admins\"\n        description=\"The people who run this console. Grant only the access each one needs.\"\n        actions={\n          <div className=\"adm-toolbar\">\n            {tab !== 'manage' && (\n              <PeriodSelector\n                value={period.rangeKey}\n                onChange={period.setRangeKey}\n                customStart={period.customStart}\n                customEnd={period.customEnd}\n                onCustomChange={period.onCustomChange}\n              />\n            )}\n            {tab === 'manage' && invite}\n          </div>\n        }\n      />\n      <PageTabs tabs={tabs} active={tab} onChange={setTab} />\n\n      {tab === 'overview' && <AdminsAnalytics range={period.range} />}\n      {tab === 'activity' && <AdminsActivity range={period.range} />}\n      {tab === 'manage' && (\n        <AdminsTable\n          data={data}\n          isLoading={isLoading}\n          isError={isError}\n          onRetry={() => void refetch()}\n          roles={roles}\n          invite={invite}\n          onAccess={setAccess}\n          onToggleStatus={(a) => void toggleStatus(a)}\n          onResetPassword={(a) => void reset(a)}\n        />\n      )}\n\n      <InviteDialog\n        open={inviting}\n        catalog={catalog}\n        roles={roles}\n        onClose={() => setInviting(false)}\n        onInvited={(r) => {\n          setInviting(false);\n          setTemp({ ...r, reason: 'invite' });\n          invalidate();\n        }}\n      />\n      <AccessDialog\n        edit={access}\n        catalog={catalog}\n        roles={roles}\n        onClose={() => setAccess(null)}\n        onSaved={invalidate}\n      />\n      <TempPasswordDialog temp={temp} onClose={() => setTemp(null)} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/admins/admins.module.css

@@ -0,0 +1,191 @@
+/* Admins: invite and access dialogs, the one-time password, admin table. */
+
+/* ---- Dialog forms ---- */
+.form {
+  display: grid;
+  gap: 24px;
+}
+
+.formRow {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 180px;
+  align-items: end;
+  gap: 12px;
+}
+
+@media (max-width: 719px) {
+  .formRow {
+    grid-template-columns: 1fr;
+    align-items: stretch;
+  }
+}
+
+.field {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.fieldLabel {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--text-secondary);
+}
+
+.choices {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.choicesLegend {
+  margin-bottom: 12px;
+  padding: 0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--text-primary);
+}
+
+.choiceList {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 8px 24px;
+}
+
+.note {
+  margin: 0;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--text-tertiary);
+}
+
+.footNote {
+  font-size: 13px;
+  line-height: 20px;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-secondary);
+}
+
+.footActions {
+  display: flex;
+  gap: 8px;
+}
+
+/* ---- One-time password ---- */
+.tempBody {
+  display: grid;
+  gap: 16px;
+}
+
+.secret {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: end;
+  gap: 8px;
+}
+
+.secretActions {
+  display: flex;
+  gap: 8px;
+}
+
+/* ---- Admin table ---- */
+.who {
+  max-width: 300px;
+}
+
+.identity {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.identityText {
+  display: grid;
+  min-width: 0;
+}
+
+.name,
+.email {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.name {
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.email {
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--text-tertiary);
+}
+
+.access {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 4px 8px;
+  max-width: 360px;
+  overflow: hidden;
+  color: var(--text-secondary);
+}
+
+.pill,
+.level {
+  white-space: nowrap;
+}
+
+.level {
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.roles {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.direct {
+  flex-shrink: 0;
+  font-size: 13px;
+  line-height: 20px;
+  white-space: nowrap;
+  color: var(--text-secondary);
+}
+
+.muted {
+  color: var(--text-tertiary);
+}
+
+.subtle {
+  display: block;
+  margin-top: 4px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--text-tertiary);
+}
+
+.when {
+  border-radius: 4px;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-secondary);
+  cursor: default;
+}
+
+.menuCell {
+  width: 56px;
+  text-align: right;
+}
+
+.menuCell > div {
+  display: inline-flex;
+}

package/dist/admin/admins/invite-dialog.js

@@ -0,0 +1,134 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { Button, FormDialog, Input, useToast } from "@withpotter/ui-kit";
+import { Select } from "@withpotter/ui-kit/select";
+import { platformAdminApi } from "@withpotter/lib/admin-api";
+import { PermissionPicker, toggleIn } from "../roles/permission-picker";
+import { RoleChoices } from "./role-choices";
+import styles from "./admins.module.css";
+const FORM_ID = "invite-admin-form";
+function InviteDialog({
+  open,
+  catalog,
+  roles,
+  onClose,
+  onInvited
+}) {
+  const { toast } = useToast();
+  const roleFieldId = useId();
+  const [email, setEmail] = useState("");
+  const [role, setRole] = useState("admin");
+  const [perms, setPerms] = useState([]);
+  const [roleIds, setRoleIds] = useState([]);
+  const invite = useMutation({
+    mutationFn: () => platformAdminApi.inviteAdmin(email, role, perms, roleIds),
+    onSuccess: (r) => {
+      onInvited(r);
+      setEmail("");
+      setRole("admin");
+      setPerms([]);
+      setRoleIds([]);
+    },
+    onError: (error) => toast({
+      title: "The invite was not sent",
+      description: error.message,
+      variant: "destructive"
+    })
+  });
+  const canSend = email.trim().length > 0 && !invite.isPending;
+  return /* @__PURE__ */ jsx(
+    FormDialog,
+    {
+      open,
+      size: "lg",
+      title: "Invite admin",
+      description: "They get a temporary password and choose their own on first sign-in.",
+      onClose,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: styles.footNote, children: role === "superadmin" ? "Full access" : `${roleIds.length} role${roleIds.length === 1 ? "" : "s"} \xB7 ${perms.length} direct` }),
+        /* @__PURE__ */ jsxs("div", { className: styles.footActions, children: [
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "submit",
+              form: FORM_ID,
+              disabled: !canSend,
+              loading: invite.isPending,
+              children: "Send invite"
+            }
+          )
+        ] })
+      ] }),
+      children: /* @__PURE__ */ jsxs(
+        "form",
+        {
+          id: FORM_ID,
+          className: styles.form,
+          onSubmit: (e) => {
+            e.preventDefault();
+            if (canSend) invite.mutate();
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.formRow, children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  label: "Email",
+                  type: "email",
+                  placeholder: "name@company.com",
+                  value: email,
+                  onChange: (e) => setEmail(e.target.value),
+                  autoFocus: true
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: styles.field, children: [
+                /* @__PURE__ */ jsx("label", { htmlFor: roleFieldId, className: styles.fieldLabel, children: "Access level" }),
+                /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    id: roleFieldId,
+                    value: role,
+                    onChange: (v) => setRole(v),
+                    options: [
+                      { value: "admin", label: "Admin" },
+                      { value: "superadmin", label: "Superadmin" }
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            role === "admin" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                RoleChoices,
+                {
+                  legend: "Roles (permissions stack as a union)",
+                  roles,
+                  value: roleIds,
+                  onToggle: (id) => setRoleIds(toggleIn(id)),
+                  emptyLabel: "No roles yet \u2014 create one on the Roles page."
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                PermissionPicker,
+                {
+                  legend: "Extra permissions (optional)",
+                  keys: catalog,
+                  value: perms,
+                  onToggle: (key) => setPerms(toggleIn(key)),
+                  onSet: setPerms
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx("p", { className: styles.note, children: "Superadmins have full access, so no roles or permissions are needed." })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  InviteDialog
+};
+//# sourceMappingURL=invite-dialog.js.map

package/dist/admin/admins/invite-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/admins/invite-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\nimport { useMutation } from '@tanstack/react-query';\nimport { Button, FormDialog, Input, useToast } from '@withpotter/ui-kit';\nimport { Select } from '@withpotter/ui-kit/select';\nimport { platformAdminApi, type RoleRow } from '@withpotter/lib/admin-api';\nimport { PermissionPicker, toggleIn } from '../roles/permission-picker';\nimport { RoleChoices } from './role-choices';\nimport styles from './admins.module.css';\n\ntype AdminRole = 'admin' | 'superadmin';\nconst FORM_ID = 'invite-admin-form';\n\n/** Email and access level, then roles and any direct grants. */\nexport function InviteDialog({\n  open,\n  catalog,\n  roles,\n  onClose,\n  onInvited,\n}: {\n  open: boolean;\n  catalog: string[];\n  roles: RoleRow[];\n  onClose: () => void;\n  onInvited: (temp: { email: string; tempPassword: string }) => void;\n}) {\n  const { toast } = useToast();\n  const roleFieldId = useId();\n  const [email, setEmail] = useState('');\n  const [role, setRole] = useState<AdminRole>('admin');\n  const [perms, setPerms] = useState<string[]>([]);\n  const [roleIds, setRoleIds] = useState<string[]>([]);\n\n  const invite = useMutation({\n    mutationFn: () => platformAdminApi.inviteAdmin(email, role, perms, roleIds),\n    onSuccess: (r) => {\n      onInvited(r);\n      setEmail('');\n      setRole('admin');\n      setPerms([]);\n      setRoleIds([]);\n    },\n    onError: (error) =>\n      toast({\n        title: 'The invite was not sent',\n        description: error.message,\n        variant: 'destructive',\n      }),\n  });\n  const canSend = email.trim().length > 0 && !invite.isPending;\n\n  return (\n    <FormDialog\n      open={open}\n      size=\"lg\"\n      title=\"Invite admin\"\n      description=\"They get a temporary password and choose their own on first sign-in.\"\n      onClose={onClose}\n      footer={\n        <>\n          <span className={styles.footNote}>\n            {role === 'superadmin'\n              ? 'Full access'\n              : `${roleIds.length} role${roleIds.length === 1 ? '' : 's'} · ${perms.length} direct`}\n          </span>\n          <div className={styles.footActions}>\n            <Button type=\"button\" variant=\"secondary\" onClick={onClose}>\n              Cancel\n            </Button>\n            <Button\n              type=\"submit\"\n              form={FORM_ID}\n              disabled={!canSend}\n              loading={invite.isPending}\n            >\n              Send invite\n            </Button>\n          </div>\n        </>\n      }\n    >\n      <form\n        id={FORM_ID}\n        className={styles.form}\n        onSubmit={(e) => {\n          e.preventDefault();\n          if (canSend) invite.mutate();\n        }}\n      >\n        <div className={styles.formRow}>\n          <Input\n            label=\"Email\"\n            type=\"email\"\n            placeholder=\"name@company.com\"\n            value={email}\n            onChange={(e) => setEmail(e.target.value)}\n            autoFocus\n          />\n          <div className={styles.field}>\n            <label htmlFor={roleFieldId} className={styles.fieldLabel}>\n              Access level\n            </label>\n            <Select\n              id={roleFieldId}\n              value={role}\n              onChange={(v) => setRole(v as AdminRole)}\n              options={[\n                { value: 'admin', label: 'Admin' },\n                { value: 'superadmin', label: 'Superadmin' },\n              ]}\n            />\n          </div>\n        </div>\n\n        {role === 'admin' ? (\n          <>\n            <RoleChoices\n              legend=\"Roles (permissions stack as a union)\"\n              roles={roles}\n              value={roleIds}\n              onToggle={(id) => setRoleIds(toggleIn(id))}\n              emptyLabel=\"No roles yet — create one on the Roles page.\"\n            />\n            <PermissionPicker\n              legend=\"Extra permissions (optional)\"\n              keys={catalog}\n              value={perms}\n              onToggle={(key) => setPerms(toggleIn(key))}\n              onSet={setPerms}\n            />\n          </>\n        ) : (\n          <p className={styles.note}>\n            Superadmins have full access, so no roles or permissions are needed.\n          </p>\n        )}\n      </form>\n    </FormDialog>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/admins/page.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { AdminsWorkspace } from "./admins-workspace";
+function AdminsPage() {
+  return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(AdminsWorkspace, {}) });
+}
+export {
+  AdminsPage as default
+};
+//# sourceMappingURL=page.js.map

package/dist/admin/admins/page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/admins/page.tsx"],"sourcesContent":["'use client';\n\nimport { Suspense } from 'react';\nimport { AdminsWorkspace } from './admins-workspace';\n\n/** The tabs read `?tab=`, so the workspace waits on the search params. */\nexport default function AdminsPage() {\n  return (\n    <Suspense>\n      <AdminsWorkspace />\n    </Suspense>\n  );\n}\n"],"mappings":";AASM;AAPN,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAGjB,SAAR,aAA8B;AACnC,SACE,oBAAC,YACC,8BAAC,mBAAgB,GACnB;AAEJ;","names":[]}

package/dist/admin/admins/recent-activity.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Reveal } from "../_fx";
+import { Panel } from "../_ui";
+import { When } from "../audit/when";
+import styles from "./recent-activity.module.css";
+const prettyAction = (a) => a.replace(/[._]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+function RecentActivity({
+  items,
+  caption
+}) {
+  return /* @__PURE__ */ jsx(
+    Panel,
+    {
+      title: "Recent admin activity",
+      count: items.length,
+      caption,
+      height: "calc(var(--adm-panel-h) * 1.5)",
+      children: /* @__PURE__ */ jsx("ul", { className: styles.feed, children: items.map((r, i) => /* @__PURE__ */ jsxs(Reveal, { as: "li", index: i, className: styles.feedItem, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.feedMain, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.feedAction, children: [
+            prettyAction(r.action),
+            r.targetType && /* @__PURE__ */ jsxs("span", { className: styles.feedTarget, children: [
+              " \xB7 ",
+              r.targetType
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles.feedWho, title: r.adminEmail ?? "system", children: r.adminEmail ?? "system" })
+        ] }),
+        /* @__PURE__ */ jsx(When, { iso: r.createdAt, className: styles.feedWhen })
+      ] }, r.id)) })
+    }
+  );
+}
+export {
+  RecentActivity,
+  prettyAction
+};
+//# sourceMappingURL=recent-activity.js.map

package/dist/admin/admins/recent-activity.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/admins/recent-activity.tsx"],"sourcesContent":["import { Reveal } from '../_fx';\nimport { Panel } from '../_ui';\nimport { When } from '../audit/when';\nimport styles from './recent-activity.module.css';\n\nexport const prettyAction = (a: string) =>\n  a.replace(/[._]/g, ' ').replace(/\\b\\w/g, (c) => c.toUpperCase());\n\nexport interface RecentItem {\n  id: string;\n  action: string;\n  targetType: string | null;\n  adminEmail: string | null;\n  createdAt: string;\n}\n\n/** The latest admin actions, newest first; scrolls inside a fixed height. */\nexport function RecentActivity({\n  items,\n  caption,\n}: {\n  items: RecentItem[];\n  caption: string;\n}) {\n  return (\n    <Panel\n      title=\"Recent admin activity\"\n      count={items.length}\n      caption={caption}\n      height=\"calc(var(--adm-panel-h) * 1.5)\"\n    >\n      <ul className={styles.feed}>\n        {items.map((r, i) => (\n          <Reveal as=\"li\" index={i} key={r.id} className={styles.feedItem}>\n            <div className={styles.feedMain}>\n              <div className={styles.feedAction}>\n                {prettyAction(r.action)}\n                {r.targetType && (\n                  <span className={styles.feedTarget}> · {r.targetType}</span>\n                )}\n              </div>\n              <div className={styles.feedWho} title={r.adminEmail ?? 'system'}>\n                {r.adminEmail ?? 'system'}\n              </div>\n            </div>\n            <When iso={r.createdAt} className={styles.feedWhen} />\n          </Reveal>\n        ))}\n      </ul>\n    </Panel>\n  );\n}\n"],"mappings":"AAsCkB,SAGJ,KAHI;AAtClB,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,OAAO,YAAY;AAEZ,MAAM,eAAe,CAAC,MAC3B,EAAE,QAAQ,SAAS,GAAG,EAAE,QAAQ,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC;AAW1D,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AACF,GAGG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAO,MAAM;AAAA,MACb;AAAA,MACA,QAAO;AAAA,MAEP,8BAAC,QAAG,WAAW,OAAO,MACnB,gBAAM,IAAI,CAAC,GAAG,MACb,qBAAC,UAAO,IAAG,MAAK,OAAO,GAAc,WAAW,OAAO,UACrD;AAAA,6BAAC,SAAI,WAAW,OAAO,UACrB;AAAA,+BAAC,SAAI,WAAW,OAAO,YACpB;AAAA,yBAAa,EAAE,MAAM;AAAA,YACrB,EAAE,cACD,qBAAC,UAAK,WAAW,OAAO,YAAY;AAAA;AAAA,cAAI,EAAE;AAAA,eAAW;AAAA,aAEzD;AAAA,UACA,oBAAC,SAAI,WAAW,OAAO,SAAS,OAAO,EAAE,cAAc,UACpD,YAAE,cAAc,UACnB;AAAA,WACF;AAAA,QACA,oBAAC,QAAK,KAAK,EAAE,WAAW,WAAW,OAAO,UAAU;AAAA,WAZvB,EAAE,EAajC,CACD,GACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/admin/admins/recent-activity.module.css

@@ -0,0 +1,60 @@
+/* ---- Recent activity list ---- */
+.feed {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.feedItem {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.feedItem:first-child {
+  border-top: 0;
+  padding-top: 4px;
+}
+
+.feedMain {
+  flex: 1;
+  min-width: 0;
+}
+
+.feedAction {
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-primary);
+}
+
+.feedTarget {
+  font-weight: 400;
+  color: var(--text-tertiary);
+}
+
+.feedWho {
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-secondary);
+}
+
+.feedWhen {
+  flex-shrink: 0;
+  font-size: 13px;
+  line-height: 20px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-tertiary);
+  border-radius: 4px;
+  cursor: default;
+}