@podosoft/podokit 0.4.0 → 0.5.0

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

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { Badge } from "$lib/components/ui/badge";
   import * as Table from "$lib/components/ui/table";
-  import TablePagination from "$lib/components/table-pagination.svelte";
+  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";
 
@@ -17,10 +18,52 @@
     createdAt: string;
   };
 
-  const PAGE_SIZE = 10;
   let entries = $state<Entry[]>([]);
   let page = $state(1);
-  const paged = $derived(entries.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE));
+  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");
+
+  const columns: DataTableColumn<Entry>[] = [
+    { 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 },
+  ];
+
+  const actions = $derived([...new Set(entries.map((e) => e.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 }))],
+    },
+  ]);
+
+  const searchFields: ToolbarSearchField[] = [
+    { value: "actor", label: i18n.t.audit.actor },
+    { 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;
+    }),
+  );
 
   async function load(): Promise<void> {
     try {
@@ -40,39 +83,41 @@
 <div class="flex flex-col gap-4">
   <h1 class="text-2xl font-semibold">{i18n.t.audit.title}</h1>
 
-  <div class="rounded-md border">
-    <Table.Root>
-      <Table.Header>
-        <Table.Row>
-          <Table.Head>{i18n.t.audit.when}</Table.Head>
-          <Table.Head>{i18n.t.audit.actor}</Table.Head>
-          <Table.Head>{i18n.t.audit.action}</Table.Head>
-          <Table.Head>{i18n.t.audit.target}</Table.Head>
-          <Table.Head>{i18n.t.audit.ip}</Table.Head>
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
-        {#each paged as e (e.id)}
-          <Table.Row>
-            <Table.Cell class="text-muted-foreground whitespace-nowrap">{formatDateTime(e.createdAt)}</Table.Cell>
-            <Table.Cell>
-              {#if e.actorName || e.actorEmail}
-                <div class="font-medium">{e.actorName ?? e.actorEmail}</div>
-                {#if e.actorName && e.actorEmail}<div class="text-muted-foreground text-xs">{e.actorEmail}</div>{/if}
-              {:else}
-                <span class="text-muted-foreground">—</span>
-              {/if}
-            </Table.Cell>
-            <Table.Cell><Badge variant="secondary" class="font-mono text-xs">{e.action}</Badge></Table.Cell>
-            <Table.Cell class="max-w-xs truncate">{e.targetLabel ?? "—"}</Table.Cell>
-            <Table.Cell class="text-muted-foreground">{e.ip ?? "—"}</Table.Cell>
-          </Table.Row>
-        {:else}
-          <Table.Row><Table.Cell colspan={5} class="text-muted-foreground py-8 text-center">{i18n.t.audit.empty}</Table.Cell></Table.Row>
-        {/each}
-      </Table.Body>
-    </Table.Root>
-  </div>
+  <TableToolbar
+    {filters}
+    bind:filterValues
+    {searchFields}
+    bind:searchField
+    bind:search
+    filterHeading={i18n.t.toolbar.filter}
+    searchHeading={i18n.t.toolbar.search}
+    searchButton={i18n.t.toolbar.searchButton}
+    onSearch={() => { appliedSearch = search; appliedSearchField = searchField; appliedFilters = { ...filterValues }; page = 1; }}
+  />
 
-  <TablePagination count={entries.length} perPage={PAGE_SIZE} bind:page label={fmt(i18n.t.audit.total, { count: entries.length })} />
+  <DataTable
+    {columns}
+    rows={filtered}
+    getKey={(e) => e.id}
+    empty={i18n.t.audit.empty}
+    bind:sort
+    bind:page
+    perPage={DEFAULT_PAGE_SIZE}
+    label={fmt(i18n.t.audit.total, { count: filtered.length })}
+  >
+    {#snippet row(e)}
+      <Table.Cell class="text-muted-foreground whitespace-nowrap">{formatDateTime(e.createdAt)}</Table.Cell>
+      <Table.Cell>
+        {#if e.actorName || e.actorEmail}
+          <div class="font-medium">{e.actorName ?? e.actorEmail}</div>
+          {#if e.actorName && e.actorEmail}<div class="text-muted-foreground text-xs">{e.actorEmail}</div>{/if}
+        {:else}
+          <span class="text-muted-foreground">—</span>
+        {/if}
+      </Table.Cell>
+      <Table.Cell><Badge variant="secondary" class="font-mono text-xs">{e.action}</Badge></Table.Cell>
+      <Table.Cell class="max-w-xs truncate">{e.targetLabel ?? "—"}</Table.Cell>
+      <Table.Cell class="text-muted-foreground">{e.ip ?? "—"}</Table.Cell>
+    {/snippet}
+  </DataTable>
 </div>

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

@@ -0,0 +1,6 @@
+import type { PageServerLoad } from "./$types";
+import { requireAdmin } from "$lib/server/guards";
+
+export const load: PageServerLoad = ({ locals }) => {
+  requireAdmin(locals.user);
+};

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

@@ -0,0 +1,264 @@
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button";
+  import { Input } from "$lib/components/ui/input";
+  import { Label } from "$lib/components/ui/label";
+  import { Checkbox } from "$lib/components/ui/checkbox";
+  import * as Table from "$lib/components/ui/table";
+  import * as Dialog from "$lib/components/ui/dialog";
+  import * as Select from "$lib/components/ui/select";
+  import DataTable, { type DataTableColumn, type SortState, DEFAULT_PAGE_SIZE } from "$lib/components/data-table.svelte";
+  import { toast } from "svelte-sonner";
+  import { api } from "$lib/api";
+  import { getI18n, fmt, formatDateTime } from "$lib/i18n";
+
+  const i18n = getI18n();
+
+  type Org = { id: string; name: string; slug: string; parentOrganizationId?: string | null; createdAt: string | Date };
+  let orgs = $state<Org[]>([]);
+  let sort = $state<SortState | null>({ key: "createdAt", dir: "desc" });
+  let listPage = $state(1);
+  const columns: DataTableColumn<Org>[] = [
+    { key: "name", label: i18n.t.organizations.name, sortable: true },
+    { key: "slug", label: i18n.t.organizations.slug, sortable: true },
+    { key: "parent", label: i18n.t.organizations.parent, sortable: true, value: (o) => orgName(o.parentOrganizationId) },
+    { key: "createdAt", label: i18n.t.organizations.created, sortable: true },
+    { key: "actions", label: "", class: "w-10" },
+  ];
+  let busy = $state(false);
+  let createOpen = $state(false);
+  let form = $state({ name: "", slug: "", parentOrganizationId: "" });
+  // Existing users, so managers can be picked at creation (empty = none).
+  type AppUser = { id: string; name: string; email: string };
+  let users = $state<AppUser[]>([]);
+  let managerIds = $state<string[]>([]);
+
+  const orgName = (id?: string | null): string => (id ? (orgs.find((o) => o.id === id)?.name ?? "—") : "—");
+
+  async function load(): Promise<void> {
+    const { data } = await api.auth.organization.list();
+    orgs = (data ?? []) as Org[];
+  }
+  async function loadUsers(): Promise<void> {
+    const { data } = await api.auth.admin.listUsers({ query: { limit: 100 } });
+    users = ((data?.users ?? []) as AppUser[]);
+  }
+
+  // Derive a slug from the name; fall back to a unique one for non-ASCII names.
+  const slugify = (s: string): string =>
+    s.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  const derivedSlug = (name: string): string => slugify(name) || `org-${Date.now().toString(36)}`;
+
+  function toggleManager(id: string): void {
+    managerIds = managerIds.includes(id) ? managerIds.filter((m) => m !== id) : [...managerIds, id];
+  }
+
+  // parentOrganizationId is a server additionalField not in the client's inferred
+  // create type; assert at the call boundary.
+  type CreateArg = Parameters<typeof api.auth.organization.create>[0];
+
+  async function createOrg(event: SubmitEvent): Promise<void> {
+    event.preventDefault();
+    busy = true;
+    const slug = form.slug.trim() || derivedSlug(form.name);
+    const { data: org, error } = await api.auth.organization.create({
+      name: form.name.trim(),
+      slug,
+      ...(form.parentOrganizationId ? { parentOrganizationId: form.parentOrganizationId } : {}),
+    } as CreateArg);
+    if (error) {
+      busy = false;
+      return void toast.error(error.message ?? i18n.t.organizations.actionFailed);
+    }
+    // Add the chosen existing users as managers (role-based, so any number). Goes
+    // through our /account/org-member endpoint (better-auth's addMember is server-only).
+    const orgId = (org as { id?: string } | null)?.id;
+    if (orgId) {
+      for (const userId of managerIds) {
+        await api.post("/account/org-member", { organizationId: orgId, userId, role: "manager" }).catch(() => undefined);
+      }
+    }
+    busy = false;
+    toast.success(i18n.t.organizations.createdMsg);
+    createOpen = false;
+    form = { name: "", slug: "", parentOrganizationId: "" };
+    managerIds = [];
+    await load();
+  }
+
+  async function deleteOrg(organizationId: string): Promise<void> {
+    busy = true;
+    const { error } = await api.auth.organization.delete({ organizationId });
+    busy = false;
+    if (error) return void toast.error(error.message ?? i18n.t.organizations.actionFailed);
+    toast.success(i18n.t.organizations.deletedMsg);
+    await load();
+  }
+
+  // Members & invitations for one organization.
+  type Member = { id: string; role: string; user: { email: string; name: string } };
+  type Invitation = { id: string; email: string; role: string; status: string };
+  let manageOpen = $state(false);
+  let manageOrg = $state<Org | null>(null);
+  let members = $state<Member[]>([]);
+  let invitations = $state<Invitation[]>([]);
+  let inviteEmail = $state("");
+
+  async function openManage(org: Org): Promise<void> {
+    manageOrg = org;
+    manageOpen = true;
+    members = [];
+    invitations = [];
+    await refreshMembers();
+  }
+  async function refreshMembers(): Promise<void> {
+    if (!manageOrg) return;
+    const { data } = await api.auth.organization.getFullOrganization({ query: { organizationId: manageOrg.id } });
+    members = ((data as { members?: Member[] } | null)?.members ?? []) as Member[];
+    invitations = (((data as { invitations?: Invitation[] } | null)?.invitations ?? []) as Invitation[]).filter((i) => i.status === "pending");
+  }
+  async function invite(event: SubmitEvent): Promise<void> {
+    event.preventDefault();
+    if (!manageOrg) return;
+    busy = true;
+    const { error } = await api.auth.organization.inviteMember({ email: inviteEmail.trim(), role: "member", organizationId: manageOrg.id });
+    busy = false;
+    if (error) return void toast.error(error.message ?? i18n.t.organizations.actionFailed);
+    toast.success(i18n.t.organizations.invited);
+    inviteEmail = "";
+    await refreshMembers();
+  }
+  async function removeMember(memberIdOrEmail: string): Promise<void> {
+    if (!manageOrg) return;
+    busy = true;
+    const { error } = await api.auth.organization.removeMember({ memberIdOrEmail, organizationId: manageOrg.id });
+    busy = false;
+    if (error) return void toast.error(error.message ?? i18n.t.organizations.actionFailed);
+    await refreshMembers();
+  }
+  async function cancelInvite(invitationId: string): Promise<void> {
+    busy = true;
+    const { error } = await api.auth.organization.cancelInvitation({ invitationId });
+    busy = false;
+    if (error) return void toast.error(error.message ?? i18n.t.organizations.actionFailed);
+    await refreshMembers();
+  }
+
+  $effect(() => {
+    void load();
+    void loadUsers();
+  });
+</script>
+
+<div class="flex flex-col gap-6">
+  <div class="flex items-center justify-between gap-2">
+    <div>
+      <h1 class="text-2xl font-semibold">{i18n.t.organizations.title}</h1>
+      <p class="text-muted-foreground text-sm">{i18n.t.organizations.subtitle}</p>
+    </div>
+    <Button onclick={() => (createOpen = true)}>{i18n.t.organizations.create}</Button>
+  </div>
+
+  <DataTable
+    {columns}
+    rows={orgs}
+    getKey={(o) => o.id}
+    bind:sort
+    bind:page={listPage}
+    perPage={DEFAULT_PAGE_SIZE}
+    label={fmt(i18n.t.organizations.total, { count: orgs.length })}
+    empty={i18n.t.organizations.empty}
+  >
+    {#snippet row(org)}
+      <Table.Cell class="font-medium">{org.name}</Table.Cell>
+      <Table.Cell class="text-muted-foreground font-mono text-xs">{org.slug}</Table.Cell>
+      <Table.Cell class="text-muted-foreground">{orgName(org.parentOrganizationId)}</Table.Cell>
+      <Table.Cell class="text-muted-foreground">{formatDateTime(org.createdAt)}</Table.Cell>
+      <Table.Cell class="flex justify-end gap-1">
+        <Button variant="ghost" size="sm" onclick={() => openManage(org)}>{i18n.t.organizations.manage}</Button>
+        <Button variant="ghost" size="sm" disabled={busy} onclick={() => deleteOrg(org.id)}>{i18n.t.organizations.delete}</Button>
+      </Table.Cell>
+    {/snippet}
+  </DataTable>
+</div>
+
+<Dialog.Root bind:open={manageOpen}>
+  <Dialog.Content class="max-w-lg">
+    <Dialog.Header>
+      <Dialog.Title>{manageOrg?.name}</Dialog.Title>
+      <Dialog.Description>{i18n.t.organizations.membersDesc}</Dialog.Description>
+    </Dialog.Header>
+    <form class="flex items-end gap-2" onsubmit={invite}>
+      <div class="flex flex-1 flex-col gap-1">
+        <Label for="invite-email">{i18n.t.organizations.inviteEmail}</Label>
+        <Input id="invite-email" type="email" bind:value={inviteEmail} placeholder="teammate@example.com" required />
+      </div>
+      <Button type="submit" disabled={busy || !inviteEmail.trim()}>{i18n.t.organizations.invite}</Button>
+    </form>
+    <div class="flex flex-col gap-2">
+      <p class="text-sm font-medium">{i18n.t.organizations.members}</p>
+      {#each members as m (m.id)}
+        <div class="flex items-center justify-between gap-2 rounded-md border p-2 text-sm">
+          <div><span class="font-medium">{m.user.name || m.user.email}</span> <span class="text-muted-foreground">· {m.role}</span></div>
+          {#if m.role !== "owner"}
+            <Button variant="ghost" size="sm" disabled={busy} onclick={() => removeMember(m.id)}>{i18n.t.organizations.remove}</Button>
+          {/if}
+        </div>
+      {/each}
+      {#if invitations.length}
+        <p class="text-sm font-medium">{i18n.t.organizations.pending}</p>
+        {#each invitations as inv (inv.id)}
+          <div class="flex items-center justify-between gap-2 rounded-md border border-dashed p-2 text-sm">
+            <span class="text-muted-foreground">{inv.email} · {inv.role}</span>
+            <Button variant="ghost" size="sm" disabled={busy} onclick={() => cancelInvite(inv.id)}>{i18n.t.organizations.cancelInvite}</Button>
+          </div>
+        {/each}
+      {/if}
+    </div>
+  </Dialog.Content>
+</Dialog.Root>
+
+<Dialog.Root bind:open={createOpen}>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>{i18n.t.organizations.createTitle}</Dialog.Title>
+    </Dialog.Header>
+    <form class="flex flex-col gap-3" onsubmit={createOrg}>
+      <div class="flex flex-col gap-1">
+        <Label for="o-name">{i18n.t.organizations.name}</Label>
+        <Input id="o-name" bind:value={form.name} required />
+      </div>
+      <div class="flex flex-col gap-1">
+        <Label for="o-slug">{i18n.t.organizations.slug}</Label>
+        <Input id="o-slug" bind:value={form.slug} placeholder={form.name ? derivedSlug(form.name) : "acme"} />
+      </div>
+      <div class="flex flex-col gap-1">
+        <Label for="o-parent">{i18n.t.organizations.parent}</Label>
+        <Select.Root type="single" bind:value={form.parentOrganizationId}>
+          <Select.Trigger id="o-parent" class="w-full">{form.parentOrganizationId ? orgName(form.parentOrganizationId) : i18n.t.organizations.noParent}</Select.Trigger>
+          <Select.Content>
+            <Select.Item value="">{i18n.t.organizations.noParent}</Select.Item>
+            {#each orgs as o (o.id)}<Select.Item value={o.id}>{o.name}</Select.Item>{/each}
+          </Select.Content>
+        </Select.Root>
+      </div>
+      {#if users.length}
+        <div class="flex flex-col gap-1">
+          <Label>{i18n.t.organizations.managers}</Label>
+          <p class="text-muted-foreground text-xs">{i18n.t.organizations.managersHint}</p>
+          <div class="max-h-40 overflow-y-auto rounded-md border p-2">
+            {#each users as u (u.id)}
+              <Label class="flex items-center gap-2 py-1 text-sm font-normal">
+                <Checkbox checked={managerIds.includes(u.id)} onCheckedChange={() => toggleManager(u.id)} />
+                {u.name || u.email} <span class="text-muted-foreground">· {u.email}</span>
+              </Label>
+            {/each}
+          </div>
+        </div>
+      {/if}
+      <Dialog.Footer>
+        <Button type="button" variant="outline" onclick={() => (createOpen = false)}>{i18n.t.organizations.cancel}</Button>
+        <Button type="submit" disabled={busy || !form.name.trim()}>{i18n.t.organizations.submit}</Button>
+      </Dialog.Footer>
+    </form>
+  </Dialog.Content>
+</Dialog.Root>

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

@@ -1,8 +1,7 @@
 import type { PageServerLoad } from "./$types";
-import { error } from "@sveltejs/kit";
+import { requireAdmin } from "$lib/server/guards";
 
 export const load: PageServerLoad = ({ locals }) => {
-  if (locals.user?.role !== "admin") {
-    error(403, "Admins only");
-  }
+  requireAdmin(locals.user);
+  return { currentSessionId: locals.session?.id ?? null };
 };

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

@@ -1,8 +1,10 @@
 <script lang="ts">
   import { Button } from "$lib/components/ui/button";
+  import { Badge } from "$lib/components/ui/badge";
   import * as Table from "$lib/components/ui/table";
   import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
-  import TablePagination from "$lib/components/table-pagination.svelte";
+  import DataTable, { type DataTableColumn, type SortState, DEFAULT_PAGE_SIZE } from "$lib/components/data-table.svelte";
+  import TableToolbar, { type ToolbarSearchField } from "$lib/components/table-toolbar.svelte";
   import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
   import { toast } from "svelte-sonner";
   import { api } from "$lib/api";
@@ -23,14 +25,43 @@
     userAgent?: string | null;
     ipAddress?: string | null;
     createdAt: string | Date;
+    expiresAt?: string | Date | null;
+    impersonatedBy?: string | null;
   };
 
-  const PAGE_SIZE = 5;
   let rows = $state<Row[]>([]);
   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);
-  const pagedRows = $derived(rows.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE));
+  let search = $state("");
+  let appliedSearch = $state("");
+  let searchField = $state("email");
+  let appliedSearchField = $state("email");
+
+  const columns: 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) => 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) },
+    { key: "actions", label: "", class: "w-10" },
+  ];
+
+  const searchFields: 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());
+    }),
+  );
 
   async function load(): Promise<void> {
     loading = true;
@@ -76,47 +107,50 @@
 <div class="flex flex-col gap-4">
   <h1 class="text-2xl font-semibold">{i18n.t.adminSessions.title}</h1>
 
-  <div class="rounded-md border">
-    <Table.Root>
-      <Table.Header>
-        <Table.Row>
-          <Table.Head>{i18n.t.adminSessions.user}</Table.Head>
-          <Table.Head>{i18n.t.adminSessions.device}</Table.Head>
-          <Table.Head>{i18n.t.adminSessions.ip}</Table.Head>
-          <Table.Head>{i18n.t.adminSessions.since}</Table.Head>
-          <Table.Head class="w-10"></Table.Head>
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
-        {#each pagedRows as row (row.id)}
-          <Table.Row>
-            <Table.Cell>
-              <div class="font-medium">{row.userName}</div>
-              <div class="text-muted-foreground text-xs">{row.userEmail}</div>
-            </Table.Cell>
-            <Table.Cell class="max-w-xs truncate">{row.userAgent ?? i18n.t.adminSessions.unknown}</Table.Cell>
-            <Table.Cell class="text-muted-foreground">{row.ipAddress ?? "—"}</Table.Cell>
-            <Table.Cell class="text-muted-foreground">{formatDateTime(row.createdAt)}</Table.Cell>
-            <Table.Cell>
-              <DropdownMenu.Root>
-                <DropdownMenu.Trigger>
-                  {#snippet child({ props })}
-                    <Button {...props} variant="ghost" size="icon" disabled={busy}><EllipsisIcon class="size-4" /></Button>
-                  {/snippet}
-                </DropdownMenu.Trigger>
-                <DropdownMenu.Content align="end">
-                  <DropdownMenu.Item onSelect={() => revoke(row)}>{i18n.t.adminSessions.revoke}</DropdownMenu.Item>
-                  <DropdownMenu.Item onSelect={() => revokeAll(row)}>{i18n.t.adminSessions.revokeAll}</DropdownMenu.Item>
-                </DropdownMenu.Content>
-              </DropdownMenu.Root>
-            </Table.Cell>
-          </Table.Row>
-        {:else}
-          <Table.Row><Table.Cell colspan={5} class="text-muted-foreground py-8 text-center">{loading ? "…" : i18n.t.adminSessions.empty}</Table.Cell></Table.Row>
-        {/each}
-      </Table.Body>
-    </Table.Root>
-  </div>
+  <TableToolbar
+    {searchFields}
+    bind:searchField
+    bind:search
+    searchHeading={i18n.t.toolbar.search}
+    searchButton={i18n.t.toolbar.searchButton}
+    onSearch={() => { appliedSearch = search; appliedSearchField = searchField; page = 1; }}
+  />
 
-  <TablePagination count={rows.length} perPage={PAGE_SIZE} bind:page label={fmt(i18n.t.adminSessions.total, { count: rows.length })} />
+  <DataTable
+    {columns}
+    rows={filtered}
+    getKey={(r) => r.id}
+    empty={loading ? "…" : i18n.t.adminSessions.empty}
+    bind:sort
+    bind:page
+    perPage={DEFAULT_PAGE_SIZE}
+    label={fmt(i18n.t.adminSessions.total, { count: filtered.length })}
+  >
+    {#snippet row(r)}
+      <Table.Cell>
+        <div class="flex items-center gap-2">
+          <div class="font-medium">{r.userName}</div>
+          {#if r.impersonatedBy}<Badge variant="outline">{i18n.t.adminSessions.impersonated}</Badge>{/if}
+        </div>
+        <div class="text-muted-foreground text-xs">{r.userEmail}</div>
+      </Table.Cell>
+      <Table.Cell class="max-w-xs truncate">{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>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            {#snippet child({ props })}
+              <Button {...props} variant="ghost" size="icon" disabled={busy}><EllipsisIcon class="size-4" /></Button>
+            {/snippet}
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content align="end">
+            <DropdownMenu.Item onSelect={() => revoke(r)}>{i18n.t.adminSessions.revoke}</DropdownMenu.Item>
+            <DropdownMenu.Item onSelect={() => revokeAll(r)}>{i18n.t.adminSessions.revokeAll}</DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </Table.Cell>
+    {/snippet}
+  </DataTable>
 </div>

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

@@ -0,0 +1,26 @@
+import type { PageServerLoad } from "./$types";
+import { requireAdmin } from "$lib/server/guards";
+
+// Non-secret view of the DB-backed auth config (OAuth providers, SMTP, server
+// toggles). Secrets are never sent — only a `hasSecret` flag per credential.
+// `social` is dynamic: one entry per configured provider; `catalog` lists every
+// provider that can be added.
+export type SocialProviderView = { id: string; enabled: boolean; clientId: string; redirectURI: string; hasSecret: boolean };
+export type AuthConfigView = {
+  social: Record<string, SocialProviderView>;
+  catalog: ReadonlyArray<{ id: string; label: string }>;
+  smtp: { enabled: boolean; host: string; port: number; secure: boolean; user: string; from: string; hasSecret: boolean };
+  server: { requireEmailVerification: boolean; allowDelete: boolean; hibp: boolean; auditLog: boolean };
+};
+
+export const load: PageServerLoad = async ({ locals, fetch }) => {
+  requireAdmin(locals.user);
+  let authConfig: AuthConfigView | null = null;
+  try {
+    const res = await fetch("/api/account/auth-config");
+    if (res.ok) authConfig = (await res.json()) as AuthConfigView;
+  } catch {
+    /* leave null — the page shows the DB-config sections as unavailable */
+  }
+  return { authConfig };
+};