@xk2800/nextjs-template 0.5.3

package/components/dashboard/admin/deviceThrottleTable.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import { type DeviceThrottleRow } from "@xk2800/nextjs-template/admin/queries"
+import { Badge } from "../../ui/badge"
+import { DataTable, type Column } from "../../ui/data-table"
+import { formatDateTime } from "../../../lib/formatters"
+
+function statusBadge(row: DeviceThrottleRow) {
+  if (row.blocked && row.windowActive) return <Badge variant="destructive">Blocked</Badge>
+  if (row.windowActive) return <Badge variant="secondary">Watching</Badge>
+  return <Badge variant="outline">Cooled off</Badge>
+}
+
+const columns: Column<DeviceThrottleRow>[] = [
+  { name: 'status', title: 'Status', sticky: true, renderer: (row) => statusBadge(row) },
+  {
+    name: 'fingerprint',
+    title: 'Fingerprint',
+    minWidth: 180,
+    renderer: (row) => (
+      <span className="font-mono text-xs select-all whitespace-nowrap">{row.fingerprint}</span>
+    ),
+  },
+  {
+    name: 'ipAddress',
+    title: 'IP address',
+    renderer: (row) => (
+      <span className="font-mono text-xs select-all">{row.ipAddress || "Unknown"}</span>
+    ),
+  },
+  {
+    name: 'device',
+    title: 'Device',
+    renderer: (row) => (
+      <span className="text-sm">
+        {[row.browser, row.os].filter(Boolean).join(" · ") || "Unknown"}
+        <span className="block text-xs text-muted-foreground">{row.deviceType}</span>
+      </span>
+    ),
+  },
+  {
+    name: 'location',
+    title: 'Location',
+    renderer: (row) => (
+      <span className="text-sm">
+        {[row.city, row.country].filter(Boolean).join(", ") || "Unknown"}
+      </span>
+    ),
+  },
+  {
+    name: 'count',
+    title: 'Attempts',
+    renderer: (row) => (
+      <span className="block text-right font-medium tabular-nums">{row.count}</span>
+    ),
+  },
+  {
+    name: 'lastKind',
+    title: 'Kind',
+    renderer: (row) => (
+      <span className="text-xs text-muted-foreground">
+        {row.lastKind === "signup" ? "sign-up" : "sign-in"}
+      </span>
+    ),
+  },
+  {
+    name: 'lastEmail',
+    title: 'Target email',
+    renderer: (row) => <span className="text-sm select-all">{row.lastEmail || "—"}</span>,
+  },
+  {
+    name: 'windowStart',
+    title: 'Window started',
+    renderer: (row) => (
+      <span className="text-xs whitespace-nowrap text-muted-foreground">
+        {formatDateTime(row.windowStart)}
+      </span>
+    ),
+  },
+  {
+    name: 'lastAttemptAt',
+    title: 'Last attempt',
+    renderer: (row) => (
+      <span className="text-xs whitespace-nowrap text-muted-foreground">
+        {formatDateTime(row.lastAttemptAt)}
+      </span>
+    ),
+  },
+]
+
+export default function DeviceThrottleTable({ rows }: { rows: DeviceThrottleRow[] }) {
+  return <DataTable columns={columns} data={rows} getRowId={(row) => row.fingerprint} />
+}

package/components/dashboard/admin/impersonationLogCard.tsx

@@ -0,0 +1,73 @@
+import Link from "next/link"
+import { ShieldAlert } from "lucide-react"
+import { getRecentImpersonationEvents } from "@xk2800/nextjs-template/activity/queries"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../../ui/card"
+import { Badge } from "../../ui/badge"
+import { formatDateTime } from "../../../lib/formatters"
+
+// Dedicated, always-visible feed of who's been logging in as whom — so an
+// admin can see this at a glance instead of having to remember to filter the
+// generic activity log for it. Rendered on both the Users page (where the
+// impersonated accounts live) and the Audit Logs page. Styled like
+// adminSection.tsx's amber callout to read as a distinct, security-sensitive
+// section rather than just another card in the list.
+interface ImpersonationLogCardProps {
+  // Skip the "View full log" link on the Audit Logs page itself, since the
+  // full filterable table is already right below this card there.
+  showViewAllLink?: boolean
+}
+
+export default async function ImpersonationLogCard({ showViewAllLink = true }: ImpersonationLogCardProps) {
+  const events = await getRecentImpersonationEvents(10)
+
+  return (
+    <Card className="border-amber-200 bg-amber-50/60 dark:border-amber-900/40 dark:bg-amber-500/[0.04]">
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <CardTitle>Impersonation log</CardTitle>
+          <span className="inline-flex items-center gap-1 rounded-full border border-amber-300 bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-900 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-400">
+            <ShieldAlert className="size-3" />
+            Security
+          </span>
+        </div>
+        <CardDescription>Most recent admin impersonation activity</CardDescription>
+      </CardHeader>
+      <CardContent>
+        {events.length === 0 ? (
+          <p className="text-sm text-gray-500 py-4">No impersonation activity recorded</p>
+        ) : (
+          <ul className="divide-y divide-border">
+            {events.map((event) => (
+              <li key={event.id} className="flex items-center justify-between gap-4 py-3">
+                <div className="flex items-center gap-3">
+                  <Badge variant={event.action === 'impersonation_started' ? 'destructive' : 'secondary'}>
+                    {event.action === 'impersonation_started' ? 'Started' : 'Stopped'}
+                  </Badge>
+                  <div>
+                    <p className="text-sm">{event.description}</p>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">
+                      by {event.adminName || event.adminEmail || event.adminId}
+                    </p>
+                  </div>
+                </div>
+                <span className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                  {formatDateTime(event.createdAt)}
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+        {showViewAllLink && (
+          <div className="mt-4 pt-4 border-t border-amber-200 dark:border-amber-900/40">
+            <Link
+              href="/dashboard/admin/activity-logs"
+              className="text-sm font-medium text-amber-900 hover:underline dark:text-amber-400"
+            >
+              View full audit log →
+            </Link>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/components/dashboard/admin/newDeviceCard.tsx

@@ -0,0 +1,35 @@
+import { MonitorSmartphone } from "lucide-react"
+import { getRecentNewDevices } from "@xk2800/nextjs-template/admin/queries"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../../ui/card"
+import NewDeviceTable from "./newDeviceTable"
+
+// First sign-in from a device for each account (written by
+// app/api/device-check/route.ts). The user and every admin also get an email;
+// this is the durable, at-a-glance surface. If a row looks like a hijack,
+// "Revoke sessions" logs that account out everywhere in one click, or open the
+// account for the full session list / activity trail.
+export default async function NewDeviceCard() {
+  const rows = await getRecentNewDevices(20)
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex flex-wrap items-center gap-2">
+          <MonitorSmartphone className="size-4" />
+          <CardTitle>New devices</CardTitle>
+        </div>
+        <CardDescription>
+          First sign-in from a device for each account, newest first. Revoke the
+          account&apos;s sessions if the sign-in wasn&apos;t them.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {rows.length === 0 ? (
+          <p className="text-sm text-gray-500 py-4">No new-device sign-ins recorded yet</p>
+        ) : (
+          <NewDeviceTable rows={rows} />
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/components/dashboard/admin/newDeviceTable.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import Link from "next/link"
+import { type RecentNewDeviceRow } from "@xk2800/nextjs-template/admin/queries"
+import { DataTable, type Column } from "../../ui/data-table"
+import { formatDateTime } from "../../../lib/formatters"
+import RevokeAllSessionsButton from "./revokeAllSessionsButton"
+
+const columns: Column<RecentNewDeviceRow>[] = [
+  {
+    name: 'account',
+    title: 'Account',
+    sticky: true,
+    renderer: (row) => (
+      <span className="text-sm">
+        <Link href={`/dashboard/admin/users/${row.userId}`} className="font-medium hover:underline">
+          {row.userName}
+        </Link>
+        <span className="block text-xs text-muted-foreground">{row.userEmail}</span>
+      </span>
+    ),
+  },
+  {
+    name: 'device',
+    title: 'Device',
+    renderer: (row) => (
+      <span className="text-sm">
+        {[row.browser, row.os].filter(Boolean).join(" · ") || "Unknown"}
+        <span className="block text-xs text-muted-foreground">{row.deviceType}</span>
+      </span>
+    ),
+  },
+  {
+    name: 'location',
+    title: 'Location',
+    renderer: (row) => (
+      <span className="text-sm">
+        {[row.city, row.country].filter(Boolean).join(", ") || "Unknown"}
+      </span>
+    ),
+  },
+  {
+    name: 'ipAddress',
+    title: 'IP address',
+    renderer: (row) => (
+      <span className="font-mono text-xs select-all">{row.ipAddress || "Unknown"}</span>
+    ),
+  },
+  {
+    name: 'createdAt',
+    title: 'When',
+    renderer: (row) => (
+      <span className="text-xs whitespace-nowrap text-muted-foreground">
+        {formatDateTime(row.createdAt)}
+      </span>
+    ),
+  },
+  {
+    name: 'actions',
+    title: 'Action',
+    renderer: (row) => (
+      <span className="block text-right">
+        <RevokeAllSessionsButton userId={row.userId} label="Revoke sessions" />
+      </span>
+    ),
+  },
+]
+
+export default function NewDeviceTable({ rows }: { rows: RecentNewDeviceRow[] }) {
+  return <DataTable columns={columns} data={rows} getRowId={(row) => row.id} />
+}

package/components/dashboard/admin/revokeAllSessionsButton.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { toast } from "sonner"
+import { Button } from "../../ui/button"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../../ui/alert-dialog"
+
+// Kills every session for one account — the fast path when a new-device alert
+// turns out to be a hijack. Hits the existing admin route with no sessionId,
+// which deletes them all and writes a session_revoked audit entry.
+export default function RevokeAllSessionsButton({
+  userId,
+  label = "Revoke all sessions",
+  size = "sm",
+}: {
+  userId: string
+  label?: string
+  size?: "sm" | "default"
+}) {
+  const router = useRouter()
+  const [open, setOpen] = useState(false)
+  const [busy, setBusy] = useState(false)
+
+  const revoke = async () => {
+    setBusy(true)
+    try {
+      const res = await fetch(`/api/admin/users/${userId}/sessions`, { method: "DELETE" })
+      if (!res.ok) throw new Error()
+      toast.success("All sessions revoked")
+      setOpen(false)
+      router.refresh()
+    } catch {
+      toast.error("Failed to revoke sessions")
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <>
+      <Button variant="destructive" size={size} onClick={() => setOpen(true)}>
+        {label}
+      </Button>
+      <AlertDialog open={open} onOpenChange={setOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Revoke all sessions?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Logs this account out of every device. Cached sessions may stay valid for
+              up to 5 minutes. The user can sign back in normally afterwards.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={busy}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={revoke}
+              disabled={busy}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {busy ? "Revoking..." : "Revoke all"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}

package/components/dashboard/admin/sharedDeviceCard.tsx

@@ -0,0 +1,42 @@
+import { Fingerprint, ShieldAlert } from "lucide-react"
+import { getSharedDeviceAccounts } from "@xk2800/nextjs-template/admin/queries"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../../ui/card"
+import { Badge } from "../../ui/badge"
+import SharedDeviceTable from "./sharedDeviceTable"
+
+// One physical device (FingerprintJS visitorId) that 3+ accounts have signed in
+// from — the multi-account / trial-abuse signal. Each account links to its admin
+// detail page, where it can be banned. Sits next to the Device throttle and New
+// devices cards; a shared device that's also failing logins shows on all three.
+export default async function SharedDeviceCard() {
+  const devices = await getSharedDeviceAccounts(20)
+
+  return (
+    <Card className="border-amber-200 bg-amber-50/60 dark:border-amber-900/40 dark:bg-amber-500/[0.04]">
+      <CardHeader>
+        <div className="flex flex-wrap items-center gap-2">
+          <Fingerprint className="size-4" />
+          <CardTitle>Shared devices</CardTitle>
+          <span className="inline-flex items-center gap-1 rounded-full border border-amber-300 bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-900 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-400">
+            <ShieldAlert className="size-3" />
+            Security
+          </span>
+          {devices.length > 0 && (
+            <Badge variant="destructive">{devices.length} flagged</Badge>
+          )}
+        </div>
+        <CardDescription>
+          One device signed into by three or more accounts — a multi-account /
+          trial-abuse signal. Open an account to ban it.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {devices.length === 0 ? (
+          <p className="text-sm text-gray-500 py-4">No devices shared across 3+ accounts</p>
+        ) : (
+          <SharedDeviceTable devices={devices} />
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/components/dashboard/admin/sharedDeviceTable.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import Link from "next/link"
+import { type SharedDeviceRow } from "@xk2800/nextjs-template/admin/queries"
+import { Badge } from "../../ui/badge"
+import { DataTable, type Column } from "../../ui/data-table"
+import { formatDateTime } from "../../../lib/formatters"
+
+const columns: Column<SharedDeviceRow>[] = [
+  {
+    name: 'visitorId',
+    title: 'Device fingerprint',
+    sticky: true,
+    renderer: (d) => (
+      <span className="font-mono text-xs select-all break-all">{d.visitorId}</span>
+    ),
+  },
+  {
+    name: 'device',
+    title: 'Device',
+    renderer: (d) => (
+      <span className="text-sm">
+        {[d.browser, d.os].filter(Boolean).join(" · ") || "Unknown"}
+        <span className="block text-xs text-muted-foreground">{d.deviceType}</span>
+      </span>
+    ),
+  },
+  {
+    name: 'location',
+    title: 'Location',
+    renderer: (d) => (
+      <span className="text-sm">{[d.city, d.country].filter(Boolean).join(", ") || "Unknown"}</span>
+    ),
+  },
+  {
+    name: 'accountCount',
+    title: 'Accounts',
+    renderer: (d) => (
+      <span className="block text-right font-medium tabular-nums">{d.accountCount}</span>
+    ),
+  },
+  {
+    name: 'accounts',
+    title: 'Shared by',
+    minWidth: 220,
+    renderer: (d) => (
+      <ul className="space-y-1 text-sm">
+        {d.accounts.map((a) => (
+          <li key={a.userId}>
+            <Link href={`/dashboard/admin/users/${a.userId}`} className="font-medium hover:underline">
+              {a.userName}
+            </Link>
+            {a.banned && <Badge variant="outline" className="ml-2">Banned</Badge>}
+            <span className="block text-xs text-muted-foreground">
+              {a.userEmail} · first seen {formatDateTime(a.firstSeenAt)}
+            </span>
+          </li>
+        ))}
+      </ul>
+    ),
+  },
+  {
+    name: 'lastSeenAt',
+    title: 'Last seen',
+    renderer: (d) => (
+      <span className="text-xs whitespace-nowrap text-muted-foreground">
+        {formatDateTime(d.lastSeenAt)}
+      </span>
+    ),
+  },
+]
+
+export default function SharedDeviceTable({ devices }: { devices: SharedDeviceRow[] }) {
+  return <DataTable columns={columns} data={devices} getRowId={(d) => d.visitorId} />
+}

package/components/dashboard/admin/systemSettingsForm.tsx

@@ -0,0 +1,200 @@
+'use client'
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { toast } from "sonner"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../../ui/card"
+import { Switch } from "../../ui/switch"
+import { Label } from "../../ui/label"
+import { Textarea } from "../../ui/textarea"
+import { Button } from "../../ui/button"
+import type { SystemSettings } from "@xk2800/nextjs-template/settings/queries"
+
+interface ConfiguredAuthFlags {
+  google: boolean
+  emailPassword: boolean
+  oneTap: boolean
+}
+
+interface SystemSettingsFormProps {
+  initialSettings: SystemSettings
+  configuredFlags: ConfiguredAuthFlags
+}
+
+export default function SystemSettingsForm({ initialSettings, configuredFlags }: SystemSettingsFormProps) {
+  const router = useRouter()
+  const [settings, setSettings] = useState(initialSettings)
+  const [isSaving, setIsSaving] = useState(false)
+
+  // "Left enabled" means actually usable — configured (env) AND toggled on
+  // (DB) — not just the DB toggle, which can look "on" while being fully
+  // inert if the env var for that method is off.
+  const anySignInMethodLeft =
+    (configuredFlags.google && settings.authEnableGoogle) ||
+    (configuredFlags.emailPassword && settings.authEnableEmailPassword)
+
+  const handleSave = async () => {
+    setIsSaving(true)
+    try {
+      const response = await fetch('/api/admin/settings', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          maintenanceMode: settings.maintenanceMode,
+          maintenanceMessage: settings.maintenanceMessage,
+          authEnableGoogle: settings.authEnableGoogle,
+          authEnableEmailPassword: settings.authEnableEmailPassword,
+          authEnableOneTap: settings.authEnableOneTap,
+          enableSessionRevocation: settings.enableSessionRevocation,
+        }),
+      })
+
+      const data = await response.json()
+      if (!response.ok) throw new Error(data.error || 'Failed to save settings')
+
+      toast.success('Settings saved')
+      router.refresh()
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Failed to save settings')
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Authentication & Sessions</CardTitle>
+          <CardDescription>
+            Live toggles on top of what&apos;s configured via environment variables —
+            a method disabled here stops working immediately, without a redeploy
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <Label htmlFor="google-toggle">Google sign-in</Label>
+              <p className="text-sm text-gray-500">Show the Google button and accept sign-ins</p>
+              {!configuredFlags.google && (
+                <p className="text-sm text-amber-600 dark:text-amber-500">
+                  Not configured for this deployment — set AUTH_ENABLE_GOOGLE=true (and Google credentials)
+                  to unlock this toggle
+                </p>
+              )}
+            </div>
+            <Switch
+              id="google-toggle"
+              checked={settings.authEnableGoogle}
+              disabled={!configuredFlags.google}
+              onCheckedChange={(checked) => setSettings({ ...settings, authEnableGoogle: checked })}
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div>
+              <Label htmlFor="email-toggle">Email &amp; password sign-in</Label>
+              <p className="text-sm text-gray-500">Show the email/password form and signup page</p>
+              {!configuredFlags.emailPassword && (
+                <p className="text-sm text-amber-600 dark:text-amber-500">
+                  Not configured for this deployment — set AUTH_ENABLE_EMAIL_PASSWORD=true to unlock this toggle
+                </p>
+              )}
+            </div>
+            <Switch
+              id="email-toggle"
+              checked={settings.authEnableEmailPassword}
+              disabled={!configuredFlags.emailPassword}
+              onCheckedChange={(checked) => setSettings({ ...settings, authEnableEmailPassword: checked })}
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div>
+              <Label htmlFor="onetap-toggle">Google One Tap</Label>
+              <p className="text-sm text-gray-500">
+                Show the One Tap prompt on load — a shortcut into Google sign-in, not a
+                separate method; it stops working if Google sign-in above is off
+              </p>
+              {!configuredFlags.oneTap ? (
+                <p className="text-sm text-amber-600 dark:text-amber-500">
+                  Not configured for this deployment — set AUTH_ENABLE_ONE_TAP=true
+                  (and NEXT_PUBLIC_AUTH_ENABLE_ONE_TAP=true) to unlock this toggle
+                </p>
+              ) : !settings.authEnableGoogle && (
+                <p className="text-sm text-amber-600 dark:text-amber-500">
+                  Requires Google sign-in to be enabled above
+                </p>
+              )}
+            </div>
+            <Switch
+              id="onetap-toggle"
+              checked={settings.authEnableOneTap}
+              disabled={!configuredFlags.oneTap}
+              onCheckedChange={(checked) => setSettings({ ...settings, authEnableOneTap: checked })}
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div>
+              <Label htmlFor="revoke-toggle">Session revocation</Label>
+              <p className="text-sm text-gray-500">Let users revoke their own sessions from Settings</p>
+            </div>
+            <Switch
+              id="revoke-toggle"
+              checked={settings.enableSessionRevocation}
+              onCheckedChange={(checked) => setSettings({ ...settings, enableSessionRevocation: checked })}
+            />
+          </div>
+
+          {!anySignInMethodLeft && (
+            <p className="text-sm text-destructive">
+              At least one sign-in method must stay enabled, or nobody will be able to sign in.
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Maintenance Mode</CardTitle>
+          <CardDescription>
+            Blocks the dashboard for non-admins and shows a maintenance page instead — admins keep full access
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <Label htmlFor="maintenance-toggle">Maintenance mode</Label>
+              <p className="text-sm text-gray-500">Non-admins are redirected to /maintenance</p>
+            </div>
+            <Switch
+              id="maintenance-toggle"
+              checked={settings.maintenanceMode}
+              onCheckedChange={(checked) => setSettings({ ...settings, maintenanceMode: checked })}
+            />
+          </div>
+
+          {settings.maintenanceMode && (
+            <div className="space-y-2">
+              <Label htmlFor="maintenance-message">Message shown to visitors (optional)</Label>
+              <Textarea
+                id="maintenance-message"
+                value={settings.maintenanceMessage ?? ''}
+                onChange={(e) => setSettings({ ...settings, maintenanceMessage: e.target.value || null })}
+                placeholder="We'll be back shortly."
+                maxLength={2000}
+              />
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-end">
+        <Button onClick={handleSave} disabled={isSaving || !anySignInMethodLeft}>
+          {isSaving ? 'Saving...' : 'Save changes'}
+        </Button>
+      </div>
+    </div>
+  )
+}

package/components/dashboard/admin/systemSettingsSection.tsx

@@ -0,0 +1,9 @@
+import { getSystemSettings, getConfiguredAuthFlags } from "@xk2800/nextjs-template/settings/queries"
+import SystemSettingsForm from "./systemSettingsForm"
+
+export default async function SystemSettingsSection() {
+  const settings = await getSystemSettings()
+  const configuredFlags = getConfiguredAuthFlags()
+
+  return <SystemSettingsForm initialSettings={settings} configuredFlags={configuredFlags} />
+}