@podosoft/podokit 1.1.5 → 1.2.0

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/server/capabilities.test.ts

@@ -0,0 +1,98 @@
+import type { Capabilities } from "@podosoft/podokit-api-client";
+import { describe, expect, it, vi, type Mock } from "vitest";
+import { DEFAULT_CAPABILITIES, getCapabilities } from "./capabilities";
+import { loadProtectedLayout } from "./protected-layout";
+
+type TestUser = NonNullable<App.Locals["user"]>;
+type FetchMock = Mock<(input: RequestInfo | URL, init?: RequestInit) => Promise<Response>>;
+
+function fetchMock(respond: () => Promise<Response>): FetchMock {
+  return vi.fn<(input: RequestInfo | URL, init?: RequestInit) => Promise<Response>>(respond);
+}
+
+function locals(user: TestUser | null = null): App.Locals {
+  return {
+    user,
+    session: user ? { id: "session-1", impersonatedBy: null } : null,
+    authUnavailable: false,
+    locale: "en",
+    site: null,
+    siteUnavailable: false,
+  };
+}
+
+function capabilitiesFetch(capabilities: Partial<Capabilities>): FetchMock {
+  return fetchMock(async () => Response.json({ ...DEFAULT_CAPABILITIES, twoFactor: true, ...capabilities }));
+}
+
+const member: TestUser = { id: "user-1", email: "user@example.com", name: "User", twoFactorEnabled: false };
+
+describe("getCapabilities", () => {
+  it("fetches once for every load in the same request", async () => {
+    const fetch = capabilitiesFetch({ auditLog: true });
+    const request = locals(member);
+
+    const [first, second] = await Promise.all([
+      getCapabilities({ locals: request, fetch }),
+      getCapabilities({ locals: request, fetch }),
+    ]);
+    const third = await getCapabilities({ locals: request, fetch });
+
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledWith("/api/account/capabilities");
+    expect(first.auditLog).toBe(true);
+    expect(second).toBe(first);
+    expect(third).toBe(first);
+  });
+
+  it("fetches again for a new request", async () => {
+    const fetch = capabilitiesFetch({});
+
+    await getCapabilities({ locals: locals(member), fetch });
+    await getCapabilities({ locals: locals(member), fetch });
+
+    expect(fetch).toHaveBeenCalledTimes(2);
+  });
+
+  it("resolves to safe defaults when the endpoint fails", async () => {
+    const rejected = fetchMock(async () => {
+      throw new TypeError("fetch failed");
+    });
+    const unavailable = fetchMock(async () => new Response("", { status: 503 }));
+
+    await expect(getCapabilities({ locals: locals(), fetch: rejected })).resolves.toEqual(DEFAULT_CAPABILITIES);
+    await expect(getCapabilities({ locals: locals(), fetch: unavailable })).resolves.toEqual(DEFAULT_CAPABILITIES);
+  });
+});
+
+describe("loadProtectedLayout", () => {
+  it("sends an un-enrolled user to setup when the policy requires two-factor", async () => {
+    const fetch = capabilitiesFetch({ require2fa: true });
+
+    await expect(loadProtectedLayout({ locals: locals(member), fetch })).rejects.toMatchObject({
+      status: 302,
+      location: "/setup-2fa",
+    });
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).not.toHaveBeenCalledWith("/api/account/require-2fa");
+  });
+
+  it("lets enrolled users through and shares the capabilities response", async () => {
+    const fetch = capabilitiesFetch({ require2fa: true });
+    const request = locals({ ...member, twoFactorEnabled: true });
+
+    const data = await loadProtectedLayout({ locals: request, fetch });
+
+    expect(data.capabilities.require2fa).toBe(true);
+    expect(data.capabilities).toBe(await getCapabilities({ locals: request, fetch }));
+    expect(fetch).toHaveBeenCalledTimes(1);
+  });
+
+  it("fails closed before fetching when the backend could not be checked", async () => {
+    const fetch = capabilitiesFetch({});
+    const request = { ...locals(member), authUnavailable: true };
+
+    await expect(loadProtectedLayout({ locals: request, fetch })).rejects.toMatchObject({ status: 503 });
+    expect(fetch).not.toHaveBeenCalled();
+  });
+});

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/server/capabilities.ts

@@ -0,0 +1,54 @@
+import type { Capabilities } from "@podosoft/podokit-api-client";
+
+type ServerFetch = (
+  input: RequestInfo | URL,
+  init?: RequestInit,
+) => Promise<Response>;
+
+export interface CapabilitiesEvent {
+  locals: App.Locals;
+  fetch: ServerFetch;
+}
+
+/** Safe values used when the capability endpoint cannot be reached. */
+export const DEFAULT_CAPABILITIES: Capabilities = {
+  twoFactor: false,
+  providers: [],
+  deleteAccount: false,
+  auditLog: false,
+  emailVerification: false,
+  signupApprovalRequired: false,
+  passwordBreachCheck: false,
+  magicLink: false,
+  emailOtp: false,
+  username: false,
+  multiSession: false,
+  phoneNumber: false,
+  apiKey: false,
+  passkey: false,
+  organization: false,
+  oidcProvider: false,
+  require2fa: false,
+  roles: ["admin", "user"],
+};
+
+async function fetchCapabilities(fetch: ServerFetch): Promise<Capabilities> {
+  try {
+    const response = await fetch("/api/account/capabilities");
+    if (response.ok) return (await response.json()) as Capabilities;
+  } catch {
+    /* Keep safe defaults if the capability endpoint is unavailable. */
+  }
+  return DEFAULT_CAPABILITIES;
+}
+
+/**
+ * Load `/account/capabilities` at most once per request. Every server load of
+ * one page render or `__data.json` request shares `locals`, so layouts and
+ * pages can call this freely. The promise never rejects; failures resolve to
+ * {@link DEFAULT_CAPABILITIES}.
+ */
+export function getCapabilities({ locals, fetch }: CapabilitiesEvent): Promise<Capabilities> {
+  locals.capabilities ??= fetchCapabilities(fetch);
+  return locals.capabilities;
+}

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/server/protected-layout.ts

@@ -1,16 +1,9 @@
 import { redirect } from "@sveltejs/kit";
 import type { Capabilities } from "@podosoft/podokit-api-client";
+import { getCapabilities, type CapabilitiesEvent } from "./capabilities";
 import { requireBackendAvailable } from "./guards";
 
-type ServerFetch = (
-  input: RequestInfo | URL,
-  init?: RequestInit,
-) => Promise<Response>;
-
-export interface ProtectedLayoutInput {
-  locals: App.Locals;
-  fetch: ServerFetch;
-}
+export type ProtectedLayoutInput = CapabilitiesEvent;
 
 export interface ProtectedLayoutData {
   user: App.Locals["user"];
@@ -22,53 +15,17 @@ export interface ProtectedLayoutData {
  * Load the shared signed-in route context without imposing an application shell.
  * The `(app)` group stays available for product UI, while `(admin)` adds admin chrome.
  */
-export async function loadProtectedLayout({
-  locals,
-  fetch,
-}: ProtectedLayoutInput): Promise<ProtectedLayoutData> {
+export async function loadProtectedLayout(event: ProtectedLayoutInput): Promise<ProtectedLayoutData> {
+  const { locals } = event;
   requireBackendAvailable(locals);
 
-  let capabilities: Capabilities = {
-    twoFactor: false,
-    providers: [],
-    deleteAccount: false,
-    auditLog: false,
-    emailVerification: false,
-    signupApprovalRequired: false,
-    passwordBreachCheck: false,
-    magicLink: false,
-    emailOtp: false,
-    username: false,
-    multiSession: false,
-    phoneNumber: false,
-    apiKey: false,
-    passkey: false,
-    organization: false,
-    oidcProvider: false,
-    roles: ["admin", "user"],
-  };
-  try {
-    const response = await fetch("/api/account/capabilities");
-    if (response.ok) capabilities = (await response.json()) as Capabilities;
-  } catch {
-    /* keep defaults */
-  }
+  const capabilities = await getCapabilities(event);
 
   // Require-two-factor policy: a signed-in user who has not enrolled is sent to
   // setup. The API guard remains authoritative; this redirect provides the UX.
-  const user = locals.user as (App.Locals["user"] & { twoFactorEnabled?: boolean }) | null;
-  let mustEnrol = false;
-  if (user && !user.twoFactorEnabled) {
-    try {
-      const response = await fetch("/api/account/require-2fa");
-      mustEnrol =
-        response.ok &&
-        ((await response.json()) as { require2fa?: boolean }).require2fa === true;
-    } catch {
-      /* do not block the app if the policy check fails */
-    }
+  if (locals.user && !locals.user.twoFactorEnabled && capabilities.require2fa) {
+    redirect(302, "/setup-2fa");
   }
-  if (mustEnrol) redirect(302, "/setup-2fa");
 
   return {
     user: locals.user,

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>