@podosoft/podokit 1.1.6 → 1.3.0

package/dist/templates/modules/admin-dashboard/files/apps/web/src/routes/(admin)/admin/audit/+page.svelte

@@ -1,47 +1,54 @@
 <script lang="ts">
+  import { onMount } from "svelte";
   import { Badge } from "#lib/components/ui/badge/index.js";
   import * as Table from "#lib/components/ui/table/index.js";
   import DataTable, { type DataTableColumn, type SortState, DEFAULT_PAGE_SIZE } from "#lib/components/data-table.svelte";
   import TableToolbar, { type ToolbarFilter, type ToolbarSearchField } from "#lib/components/table-toolbar.svelte";
   import { toast } from "svelte-sonner";
   import { getI18n, fmt, formatDateTime } from "#lib/i18n/index.js";
+  import {
+    cursorForPage,
+    emptyTrail,
+    fetchAuditActions,
+    fetchAuditLogPage,
+    recordPage,
+    trailCount,
+    type AuditLogEntry,
+    type AuditLogFilters,
+    type AuditLogOrder,
+  } from "#lib/audit-log.js";
 
   const i18n = getI18n();
-  type Entry = {
-    id: string;
-    action: string;
-    actorId: string | null;
-    actorName: string | null;
-    actorEmail: string | null;
-    targetLabel: string | null;
-    ip: string | null;
-    createdAt: string;
-  };
+  const PAGE_SIZE = DEFAULT_PAGE_SIZE;
 
-  let entries = $state<Entry[]>([]);
+  let entries = $state<AuditLogEntry[]>([]);
+  let actions = $state<string[]>([]);
   let page = $state(1);
+  let shownPage = $state(1);
+  let trail = $state(emptyTrail());
   let sort = $state<SortState | null>({ key: "createdAt", dir: "desc" });
   let search = $state("");
-  let appliedSearch = $state("");
-  let filterValues = $state<Record<string, string>>({ action: "" });
-  let appliedFilters = $state<Record<string, string>>({ action: "" });
   let searchField = $state("actor");
-  let appliedSearchField = $state("actor");
+  let filterValues = $state<Record<string, string>>({ action: "" });
+  let applied = $state<AuditLogFilters>({ action: "", actor: "", target: "" });
+  let trailOrder: AuditLogOrder = "desc";
+  let latestRequest = 0;
 
-  const columns = $derived<DataTableColumn<Entry>[]>([
+  // The server pages by time with a cursor, so time is the only sortable column.
+  const columns = $derived<DataTableColumn<AuditLogEntry>[]>([
     { key: "createdAt", label: i18n.t.audit.when, sortable: true, class: "whitespace-nowrap" },
-    { key: "actor", label: i18n.t.audit.actor, sortable: true, value: (e) => e.actorName ?? e.actorEmail },
-    { key: "action", label: i18n.t.audit.action, sortable: true },
-    { key: "target", label: i18n.t.audit.target, sortable: true, value: (e) => e.targetLabel },
-    { key: "ip", label: i18n.t.audit.ip, sortable: true },
+    { key: "actor", label: i18n.t.audit.actor },
+    { key: "action", label: i18n.t.audit.action },
+    { key: "target", label: i18n.t.audit.target },
+    { key: "ip", label: i18n.t.audit.ip },
   ]);
 
-  const actions = $derived([...new Set(entries.map((e) => e.action))].sort());
+  const actionOptions = $derived([...new Set([...actions, ...(applied.action ? [applied.action] : [])])].sort());
   const filters = $derived<ToolbarFilter[]>([
     {
       key: "action",
       label: i18n.t.audit.action,
-      options: [{ value: "", label: i18n.t.toolbar.all }, ...actions.map((a) => ({ value: a, label: a }))],
+      options: [{ value: "", label: i18n.t.toolbar.all }, ...actionOptions.map((a) => ({ value: a, label: a }))],
     },
   ]);
 
@@ -50,33 +57,63 @@
     { value: "target", label: i18n.t.audit.target },
   ]);
 
-  const filtered = $derived(
-    entries.filter((e) => {
-      if (appliedFilters.action && e.action !== appliedFilters.action) return false;
-      if (appliedSearch) {
-        const hay = (
-          appliedSearchField === "target"
-            ? (e.targetLabel ?? "")
-            : `${e.actorName ?? ""} ${e.actorEmail ?? ""}`
-        ).toLowerCase();
-        if (!hay.includes(appliedSearch.toLowerCase())) return false;
-      }
-      return true;
-    }),
+  const count = $derived(trailCount(trail, PAGE_SIZE));
+  const first = $derived((shownPage - 1) * PAGE_SIZE + 1);
+  const label = $derived(
+    trail.end || entries.length === 0
+      ? fmt(i18n.t.audit.total, { count })
+      : fmt(i18n.t.audit.range, { from: first, to: first + entries.length - 1 }),
   );
 
-  async function load(): Promise<void> {
+  function currentOrder(): AuditLogOrder {
+    return sort?.dir === "asc" ? "asc" : "desc";
+  }
+
+  async function load(target: number): Promise<void> {
+    const cursor = cursorForPage(trail, target);
+    if (cursor === undefined) {
+      page = shownPage;
+      return;
+    }
+    const request = ++latestRequest;
     try {
-      const res = await fetch("/api/audit-logs");
-      if (!res.ok) throw new Error();
-      entries = (await res.json()) as Entry[];
+      const result = await fetchAuditLogPage(fetch, applied, trailOrder, cursor, PAGE_SIZE);
+      if (request !== latestRequest) return;
+      entries = result.entries;
+      page = target;
+      shownPage = target;
+      trail = recordPage(trail, target, result.entries.length, result.nextCursor);
     } catch {
+      if (request !== latestRequest) return;
+      page = shownPage;
       toast.error(i18n.t.audit.loadFailed);
     }
   }
 
-  $effect(() => {
-    void load();
+  function restart(): void {
+    trailOrder = currentOrder();
+    trail = emptyTrail();
+    void load(1);
+  }
+
+  function applySearch(): void {
+    const value = search.trim();
+    applied = {
+      action: filterValues.action ?? "",
+      actor: searchField === "actor" ? value : "",
+      target: searchField === "target" ? value : "",
+    };
+    restart();
+  }
+
+  function onTableChange(state: { page: number }): void {
+    if (currentOrder() !== trailOrder) restart();
+    else void load(state.page);
+  }
+
+  onMount(() => {
+    restart();
+    void fetchAuditActions(fetch).then((codes) => { actions = codes; }, () => undefined);
   });
 </script>
 
@@ -89,21 +126,27 @@
     {searchFields}
     bind:searchField
     bind:search
+    searchPlaceholder={searchField === "target" ? i18n.t.audit.targetHint : i18n.t.audit.actorHint}
     filterHeading={i18n.t.toolbar.filter}
     searchHeading={i18n.t.toolbar.search}
     searchButton={i18n.t.toolbar.searchButton}
-    onSearch={() => { appliedSearch = search; appliedSearchField = searchField; appliedFilters = { ...filterValues }; page = 1; }}
+    onSearch={applySearch}
   />
 
   <DataTable
     {columns}
-    rows={filtered}
+    rows={entries}
     getKey={(e) => e.id}
     empty={i18n.t.audit.empty}
+    ariaLabel={i18n.t.audit.title}
     bind:sort
+    manualSort
     bind:page
-    perPage={DEFAULT_PAGE_SIZE}
-    label={fmt(i18n.t.audit.total, { count: filtered.length })}
+    perPage={PAGE_SIZE}
+    total={count}
+    manualPagination
+    {label}
+    onChange={onTableChange}
   >
     {#snippet row(e)}
       <Table.Cell class="text-muted-foreground whitespace-nowrap">{formatDateTime(e.createdAt)}</Table.Cell>

package/dist/templates/modules/admin-dashboard/files/apps/web/src/routes/(admin)/admin/sessions/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from "svelte";
   import { Button } from "#lib/components/ui/button/index.js";
   import { Badge } from "#lib/components/ui/badge/index.js";
   import * as Table from "#lib/components/ui/table/index.js";
@@ -8,100 +9,94 @@
   import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
   import { toast } from "svelte-sonner";
   import { api } from "#lib/api.js";
+  import { KeysetPages, listAdminSessions, revokeAdminSession, type AdminSession } from "#lib/admin/sessions.js";
   import { getI18n, fmt, formatDateTime } from "#lib/i18n/index.js";
   import { deviceLabel } from "#lib/device-label.js";
 
   const i18n = getI18n();
+  const PAGE_SIZE = DEFAULT_PAGE_SIZE;
+  // The API pages newest first by keyset, so the order is fixed rather than sortable.
+  const sort: SortState = { key: "createdAt", dir: "desc" };
+  const pages = new KeysetPages();
 
-  // better-auth has no "list all sessions" endpoint, so fan out listUserSessions
-  // over a page of users and flatten. Bounded to USER_LIMIT users — adequate for a
-  // starter admin view; paginate/scope further for large deployments.
-  const USER_LIMIT = 50;
-  type Row = {
-    id: string;
-    token: string;
-    userId: string;
-    userName: string;
-    userEmail: string;
-    userAgent?: string | null;
-    ipAddress?: string | null;
-    createdAt: string | Date;
-    expiresAt?: string | Date | null;
-    impersonatedBy?: string | null;
-  };
-
-  let rows = $state<Row[]>([]);
+  let rows = $state<AdminSession[]>([]);
+  let total = $state(0);
+  let pagerTotal = $state(0);
   let page = $state(1);
-  // No default sort: keep the fan-out order so the newest session isn't required
-  // to sit on page 1. Sorting is available by clicking a column header.
-  let sort = $state<SortState | null>(null);
   let loading = $state(false);
   let busy = $state(false);
   let search = $state("");
   let appliedSearch = $state("");
-  let searchField = $state("email");
-  let appliedSearchField = $state("email");
+  let searchField = $state("user");
+  let latestRequest = 0;
+  let shownPage = 1;
 
-  const columns = $derived<DataTableColumn<Row>[]>([
-    { key: "user", label: i18n.t.adminSessions.user, sortable: true, value: (r) => r.userName },
-    { key: "device", label: i18n.t.adminSessions.device, sortable: true, value: (r) => deviceLabel(r.userAgent) ?? r.userAgent ?? "" },
-    { key: "ip", label: i18n.t.adminSessions.ip, sortable: true, value: (r) => r.ipAddress },
-    { key: "createdAt", label: i18n.t.adminSessions.since, sortable: true },
-    { key: "expiresAt", label: i18n.t.adminSessions.expires, sortable: true, value: (r) => (r.expiresAt ? new Date(r.expiresAt).getTime() : 0) },
+  const columns = $derived<DataTableColumn<AdminSession>[]>([
+    { key: "user", label: i18n.t.adminSessions.user },
+    { key: "device", label: i18n.t.adminSessions.device },
+    { key: "ip", label: i18n.t.adminSessions.ip },
+    { key: "createdAt", label: i18n.t.adminSessions.since },
+    { key: "expiresAt", label: i18n.t.adminSessions.expires },
     { key: "actions", label: "", class: "w-10" },
   ]);
 
-  const searchFields = $derived<ToolbarSearchField[]>([
-    { value: "email", label: i18n.t.users.email },
-    { value: "name", label: i18n.t.users.name },
-  ]);
-
-  const filtered = $derived(
-    rows.filter((r) => {
-      if (!appliedSearch) return true;
-      const hay = (appliedSearchField === "name" ? r.userName : r.userEmail).toLowerCase();
-      return hay.includes(appliedSearch.toLowerCase());
-    }),
-  );
+  const searchFields = $derived<ToolbarSearchField[]>([{ value: "user", label: i18n.t.adminSessions.user }]);
 
-  async function load(): Promise<void> {
+  // Loads one page; a newer request supersedes any that is still in flight.
+  async function load(target: number): Promise<void> {
+    const cursor = pages.cursorFor(target);
+    if (cursor === undefined) return;
+    const request = ++latestRequest;
     loading = true;
-    const { data, error } = await api.auth.admin.listUsers({ query: { limit: USER_LIMIT, offset: 0 } });
-    if (error) {
-      loading = false;
-      toast.error(error.message ?? i18n.t.adminSessions.loadFailed);
-      return;
+    try {
+      const result = await listAdminSessions(api, { limit: PAGE_SIZE, cursor, search: appliedSearch });
+      if (request !== latestRequest) return;
+      // A revoke can empty the last page; show the one before it instead.
+      if (result.items.length === 0 && target > 1) return load(target - 1);
+      pages.record(target, result.nextCursor);
+      rows = result.items;
+      total = result.total;
+      pagerTotal = pages.pagerTotal(result.total, PAGE_SIZE);
+      page = shownPage = target;
+    } catch {
+      if (request !== latestRequest) return;
+      page = shownPage;
+      toast.error(i18n.t.adminSessions.loadFailed);
+    } finally {
+      if (request === latestRequest) loading = false;
     }
-    const users = (data?.users ?? []) as Array<{ id: string; name: string; email: string }>;
-    const perUser = await Promise.all(
-      users.map(async (u) => {
-        const { data: res } = await api.auth.admin.listUserSessions({ userId: u.id });
-        const sessions = (res?.sessions ?? []) as Array<Omit<Row, "userId" | "userName" | "userEmail">>;
-        return sessions.map((s) => ({ ...s, userId: u.id, userName: u.name, userEmail: u.email }));
-      }),
-    );
-    rows = perUser.flat();
-    loading = false;
   }
 
-  async function act(promise: Promise<{ error?: { message?: string } | null }>, ok: string): Promise<void> {
+  function applySearch(): void {
+    appliedSearch = search;
+    pages.reset();
+    void load(1);
+  }
+
+  async function revoke(row: AdminSession): Promise<void> {
     busy = true;
-    const { error } = await promise;
-    busy = false;
-    if (error) toast.error(error.message ?? i18n.t.adminSessions.loadFailed);
-    else {
-      toast.success(ok);
-      await load();
+    try {
+      await revokeAdminSession(api, row.id);
+      toast.success(i18n.t.adminSessions.revoked);
+      await load(page);
+    } catch {
+      toast.error(i18n.t.adminSessions.revokeFailed);
+    } finally {
+      busy = false;
     }
   }
 
-  const revoke = (row: Row) =>
-    act(api.auth.admin.revokeUserSession({ sessionToken: row.token }), i18n.t.adminSessions.revoked);
-  const revokeAll = (row: Row) =>
-    act(api.auth.admin.revokeUserSessions({ userId: row.userId }), i18n.t.adminSessions.allRevoked);
+  async function revokeAll(row: AdminSession): Promise<void> {
+    busy = true;
+    const { error } = await api.auth.admin.revokeUserSessions({ userId: row.userId });
+    busy = false;
+    if (error) return void toast.error(i18n.t.adminSessions.revokeFailed);
+    toast.success(i18n.t.adminSessions.allRevoked);
+    await load(page);
+  }
 
   $effect(() => {
-    void load();
+    untrack(() => void load(1));
   });
 </script>
 
@@ -112,20 +107,26 @@
     {searchFields}
     bind:searchField
     bind:search
+    searchPlaceholder={i18n.t.adminSessions.searchPlaceholder}
     searchHeading={i18n.t.toolbar.search}
     searchButton={i18n.t.toolbar.searchButton}
-    onSearch={() => { appliedSearch = search; appliedSearchField = searchField; page = 1; }}
+    onSearch={applySearch}
   />
 
   <DataTable
     {columns}
-    rows={filtered}
+    {rows}
     getKey={(r) => r.id}
     empty={loading ? "…" : i18n.t.adminSessions.empty}
-    bind:sort
+    ariaLabel={i18n.t.adminSessions.title}
+    {sort}
+    manualSort
+    manualPagination
     bind:page
-    perPage={DEFAULT_PAGE_SIZE}
-    label={fmt(i18n.t.adminSessions.total, { count: filtered.length })}
+    perPage={PAGE_SIZE}
+    total={pagerTotal}
+    label={fmt(i18n.t.adminSessions.total, { count: total })}
+    onChange={(state) => void load(state.page)}
   >
     {#snippet row(r)}
       <Table.Cell>
@@ -138,7 +139,7 @@
       <Table.Cell class="max-w-xs truncate" title={r.userAgent ?? ""}>{deviceLabel(r.userAgent) ?? r.userAgent ?? i18n.t.adminSessions.unknown}</Table.Cell>
       <Table.Cell class="text-muted-foreground">{r.ipAddress ?? "—"}</Table.Cell>
       <Table.Cell class="text-muted-foreground">{formatDateTime(r.createdAt)}</Table.Cell>
-      <Table.Cell class="text-muted-foreground">{r.expiresAt ? formatDateTime(r.expiresAt) : "—"}</Table.Cell>
+      <Table.Cell class="text-muted-foreground">{formatDateTime(r.expiresAt)}</Table.Cell>
       <Table.Cell>
         <DropdownMenu.Root>
           <DropdownMenu.Trigger>

package/dist/templates/modules/admin-dashboard/files/apps/web/src/routes/(admin)/admin/settings/+page.server.ts

@@ -1,4 +1,5 @@
 import type { PageServerLoad } from "./$types";
+import { getCapabilities, type CapabilitiesEvent } from "#lib/server/capabilities.js";
 import { requireAdmin } from "#lib/server/guards.js";
 
 // Non-secret view of the DB-backed auth config (OAuth providers, SMTP, server
@@ -20,23 +21,23 @@ export type AuthConfigView = {
   };
 };
 
-export const load: PageServerLoad = async ({ locals, fetch }) => {
-  requireAdmin(locals.user, locals);
-  let authConfig: AuthConfigView | null = null;
+async function loadAuthConfig(fetch: CapabilitiesEvent["fetch"]): Promise<AuthConfigView | null> {
   try {
     const res = await fetch("/api/account/auth-config");
-    if (res.ok) authConfig = (await res.json()) as AuthConfigView;
+    if (res.ok) return (await res.json()) as AuthConfigView;
   } catch {
     /* leave null — the page shows the DB-config sections as unavailable */
   }
-  // The require-two-factor policy lives in the feature-flag store (not the typed
-  // Capabilities), so read it from its own endpoint for the Settings toggle.
-  let require2fa = false;
-  try {
-    const res = await fetch("/api/account/require-2fa");
-    if (res.ok) require2fa = ((await res.json()) as { require2fa?: boolean }).require2fa === true;
-  } catch {
-    /* default off */
-  }
-  return { authConfig, require2fa };
+  return null;
+}
+
+export const load: PageServerLoad = async ({ locals, fetch }) => {
+  requireAdmin(locals.user, locals);
+  // The admin layout loads the same capabilities in this request, so the
+  // require-two-factor policy comes from that shared response.
+  const [authConfig, capabilities] = await Promise.all([
+    loadAuthConfig(fetch),
+    getCapabilities({ locals, fetch }),
+  ]);
+  return { authConfig, require2fa: capabilities.require2fa };
 };

package/dist/templates/modules/admin-dashboard/files/apps/web/src/routes/(admin)/admin/settings/+page.svelte

@@ -24,8 +24,8 @@
   const ac = $derived(data.authConfig);
 
   type EditableFlag = "twoFactor" | "magicLink" | "emailOtp" | "username" | "multiSession" | "phoneNumber" | "apiKey" | "passkey" | "organization" | "oidcProvider";
-  // require2fa is a policy flag stored alongside the feature flags but not part of
-  // the typed Capabilities, so it is toggled but never read from `caps`.
+  // require2fa is an enrolment policy rather than a feature, so its card reads
+  // `data.require2fa` instead of the feature flags in `caps`.
   type ToggleFlag = EditableFlag | "require2fa";
   type ServerKey = "requireEmailVerification" | "requireSignupApproval" | "hibp" | "allowDelete" | "auditLog";