@better-forge/ui 0.0.0-stage → 0.1.0

package/src/pages/AuditLog.tsx

@@ -0,0 +1,388 @@
+import { useId, useMemo, useState } from 'react'
+import { formatDateTime } from '../lib/dateFormat'
+import { useQuery } from '@tanstack/react-query'
+import { api } from '../api/client'
+import { EmptyState, EmptyStateLink, ErrorState, LoadingState, PageContainer, PageHeader, Pagination, ResizeHandle } from '../components/ui'
+import { useDebouncedValue } from '../hooks/useDebouncedValue'
+import type { AuditAction, AuditLogEntry } from '@better-forge/contracts'
+
+/** How an application names the things its audit log is about: labels and icons by type, and the sections of the filter. */
+export interface AuditEntities {
+  labels: Readonly<Record<string, string>>
+  icons: Readonly<Record<string, string>>
+  /** Filter sections, most used first. */
+  groups: ReadonlyArray<{ label: string; types: readonly string[] }>
+}
+
+interface AuditPage {
+  entries: AuditLogEntry[]
+  total: number
+  page: number
+  limit: number
+  pages: number
+}
+
+const ACTION_COLORS: Record<AuditAction, { bg: string; color: string; label: string }> = {
+  create: { bg: 'var(--audit-create-bg)', color: 'var(--audit-create-text)', label: 'Create' },
+  update: { bg: 'var(--audit-update-bg)', color: 'var(--audit-update-text)', label: 'Update' },
+  delete: { bg: 'var(--audit-delete-bg)', color: 'var(--audit-delete-text)', label: 'Delete' },
+  allow:  { bg: 'var(--audit-create-bg)', color: 'var(--audit-create-text)', label: 'Allowed' },
+  deny:   { bg: 'var(--audit-delete-bg)', color: 'var(--audit-delete-text)', label: 'Denied' },
+}
+
+function formatTs(ms: number) {
+  return formatDateTime(ms, true)
+}
+
+function DiffView({ diff }: { diff: Record<string, unknown> }) {
+  const entries = Object.entries(diff)
+  if (entries.length === 0) return <span style={{ color: 'var(--m3-outline)' }}>—</span>
+
+  // Detect if values are {from, to} pairs (update diff) or a flat snapshot
+  const isUpdateDiff = entries.every(([, v]) =>
+    v !== null && typeof v === 'object' && 'from' in (v as object) && 'to' in (v as object),
+  )
+
+  if (isUpdateDiff) {
+    return (
+      <table style={{ borderCollapse: 'collapse', fontSize: '11px', width: '100%' }}>
+        <thead>
+          <tr>
+            <th style={{ textAlign: 'left', padding: '2px 8px 2px 0', color: 'var(--m3-outline)', fontWeight: 600, whiteSpace: 'nowrap' }}>Field</th>
+            <th style={{ textAlign: 'left', padding: '2px 8px', color: 'var(--m3-outline)', fontWeight: 600 }}>Before</th>
+            <th style={{ textAlign: 'left', padding: '2px 0', color: 'var(--m3-outline)', fontWeight: 600 }}>After</th>
+          </tr>
+        </thead>
+        <tbody>
+          {entries.map(([key, val]) => {
+            const { from, to } = val as { from: unknown; to: unknown }
+            return (
+              <tr key={key}>
+                <td style={{ padding: '2px 8px 2px 0', color: 'var(--m3-secondary)', whiteSpace: 'nowrap', verticalAlign: 'top' }}>{key}</td>
+                <td style={{ padding: '2px 8px', verticalAlign: 'top' }}>
+                  <span style={{ color: 'var(--audit-delete-text)', background: 'var(--audit-delete-bg)', borderRadius: 4, padding: '0 4px', display: 'inline-block', wordBreak: 'break-all' }}>
+                    {from === null ? 'null' : String(from)}
+                  </span>
+                </td>
+                <td style={{ padding: '2px 0', verticalAlign: 'top' }}>
+                  <span style={{ color: 'var(--audit-create-text)', background: 'var(--audit-create-bg)', borderRadius: 4, padding: '0 4px', display: 'inline-block', wordBreak: 'break-all' }}>
+                    {to === null ? 'null' : String(to)}
+                  </span>
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    )
+  }
+
+  // Flat snapshot (create/delete)
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px 12px' }}>
+      {entries.map(([key, val]) => (
+        <span key={key} style={{ fontSize: '11px' }}>
+          <span style={{ color: 'var(--m3-outline)' }}>{key}: </span>
+          <span style={{ color: 'var(--m3-on-surface)' }}>{val === null ? 'null' : String(val)}</span>
+        </span>
+      ))}
+    </div>
+  )
+}
+
+const HEADERS = ['Timestamp', 'User', 'Action', 'Entity'] as const
+const DEFAULT_WIDTHS = [168, 220, 100, 200]
+const DETAILS_MIN = 160
+const FILTER_LABEL = 'font-mono text-[10px] uppercase tracking-widest'
+
+export default function AuditLogPage({ entities }: { entities: AuditEntities }) {
+  const [page, setPage] = useState(1)
+  const [emailInput, setEmailInput] = useState('')
+  const [userEmail, flushEmail] = useDebouncedValue(emailInput, 300)
+  const [entityType, setEntityType] = useState('')
+  const [action, setAction] = useState('')
+  const [fromDate, setFromDate] = useState('')
+  const [toDate, setToDate]   = useState('')
+  const [expanded, setExpanded] = useState<number | null>(null)
+  const [widths, setWidths] = useState(DEFAULT_WIDTHS)
+  const idPrefix = useId()
+  const gridColumns = `${widths.map((w) => `${w}px`).join(' ')} minmax(${DETAILS_MIN}px, 1fr)`
+  const tableMinWidth = widths.reduce((a, b) => a + b, 0) + DETAILS_MIN + 40
+
+  function resizeColumn(index: number, width: number) {
+    setWidths((prev) => prev.map((w, i) => (i === index ? width : w)))
+  }
+
+  // Reset to page 1 when filters change
+  const filters = useMemo(() => ({
+    page,
+    limit: 50,
+    ...(userEmail  ? { userEmail }  : {}),
+    ...(entityType ? { entityType } : {}),
+    ...(action     ? { action }     : {}),
+    ...(fromDate   ? { from: String(new Date(fromDate).getTime()) } : {}),
+    ...(toDate     ? { to: String(new Date(toDate + 'T23:59:59').getTime()) } : {}),
+  }), [page, userEmail, entityType, action, fromDate, toDate])
+
+  const qs = new URLSearchParams(
+    Object.fromEntries(Object.entries(filters).map(([k, v]) => [k, String(v)])),
+  ).toString()
+
+  const { data, isFetching, isLoading, isError, refetch } = useQuery<AuditPage>({
+    queryKey: ['audit', qs],
+    queryFn: () => api.get(`/admin/audit?${qs}`),
+    refetchOnMount: 'always',
+  })
+
+  function clearFilters() {
+    setEmailInput(''); flushEmail(''); setEntityType(''); setAction(''); setFromDate(''); setToDate(''); setPage(1)
+  }
+
+  const entries = data?.entries ?? []
+  const filtered = !!(emailInput || entityType || action || fromDate || toDate)
+  const totalPages = data?.pages ?? 1
+
+  return (
+    <PageContainer>
+      <PageHeader title="Audit Log" subtitle={data ? `${data.total} entries` : undefined} />
+
+      {/* Filters */}
+      <div
+        className="rounded-2xl p-4 flex flex-wrap gap-3 items-end"
+        style={{ background: 'var(--m3-surface-container-low)', border: '1px solid var(--m3-outline-variant)' }}
+      >
+        <div className="flex flex-col gap-1 min-w-[180px] flex-1">
+          <label htmlFor={`${idPrefix}-user`} className={FILTER_LABEL} style={{ color: 'var(--m3-outline)' }}>User</label>
+          <input
+            id={`${idPrefix}-user`}
+            value={emailInput}
+            onChange={(e) => { setEmailInput(e.target.value); setPage(1) }}
+            onKeyDown={(e) => { if (e.key === 'Enter') flushEmail() }}
+            placeholder="Filter by email…"
+            className="input-sig"
+            style={{ height: '36px', fontSize: '13px' }}
+          />
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <label htmlFor={`${idPrefix}-entity`} className={FILTER_LABEL} style={{ color: 'var(--m3-outline)' }}>Entity</label>
+          <select
+            id={`${idPrefix}-entity`}
+            value={entityType}
+            onChange={(e) => { setEntityType(e.target.value); setPage(1) }}
+            className="input-sig"
+            style={{ height: '36px', fontSize: '13px', width: '180px' }}
+          >
+            <option value="">All entities</option>
+            {entities.groups.map((group) => (
+              <optgroup key={group.label} label={group.label}>
+                {group.types.map((t) => <option key={t} value={t}>{entities.labels[t]}</option>)}
+              </optgroup>
+            ))}
+          </select>
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <label htmlFor={`${idPrefix}-action`} className={FILTER_LABEL} style={{ color: 'var(--m3-outline)' }}>Action</label>
+          <select
+            id={`${idPrefix}-action`}
+            value={action}
+            onChange={(e) => { setAction(e.target.value); setPage(1) }}
+            className="input-sig"
+            style={{ height: '36px', fontSize: '13px', width: '130px' }}
+          >
+            <option value="">All actions</option>
+            <option value="create">Create</option>
+            <option value="update">Update</option>
+            <option value="delete">Delete</option>
+            <option value="allow">Allowed</option>
+            <option value="deny">Denied</option>
+          </select>
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <label htmlFor={`${idPrefix}-from`} className={FILTER_LABEL} style={{ color: 'var(--m3-outline)' }}>From</label>
+          <input
+            id={`${idPrefix}-from`}
+            type="date"
+            value={fromDate}
+            onChange={(e) => { setFromDate(e.target.value); setPage(1) }}
+            className="input-sig"
+            style={{ height: '36px', fontSize: '13px', width: '150px' }}
+          />
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <label htmlFor={`${idPrefix}-to`} className={FILTER_LABEL} style={{ color: 'var(--m3-outline)' }}>To</label>
+          <input
+            id={`${idPrefix}-to`}
+            type="date"
+            value={toDate}
+            onChange={(e) => { setToDate(e.target.value); setPage(1) }}
+            className="input-sig"
+            style={{ height: '36px', fontSize: '13px', width: '150px' }}
+          />
+        </div>
+
+        {(emailInput || entityType || action || fromDate || toDate) && (
+          <button type="button" onClick={clearFilters} className="btn btn-ghost btn-sm self-end" style={{ height: '36px' }}>
+            Clear
+          </button>
+        )}
+      </div>
+
+      {/* Table */}
+      {isLoading ? (
+        <LoadingState label="Loading audit log…" />
+      ) : isError ? (
+        <ErrorState message="Could not load the audit log." onRetry={() => void refetch()} />
+      ) : (
+        <div
+          className="rounded-2xl overflow-x-auto"
+          style={{ border: '1px solid var(--m3-outline-variant)', opacity: isFetching ? 0.7 : 1, transition: 'opacity 0.15s' }}
+        >
+          <div style={{ minWidth: tableMinWidth }}>
+            {/* Header */}
+            <div
+              className="grid font-mono text-xs uppercase tracking-wider px-5 py-2.5"
+              style={{
+                gridTemplateColumns: gridColumns,
+                color: 'var(--m3-outline)',
+                borderBottom: '1px solid var(--m3-outline-variant)',
+                background: 'var(--m3-surface-container)',
+              }}
+            >
+              {HEADERS.map((label, i) => (
+                <span key={label} className="relative -my-2.5 py-2.5 pr-3">
+                  {label}
+                  <ResizeHandle
+                    label={label}
+                    width={widths[i]}
+                    measure={() => widths[i] ?? 0}
+                    onResize={(w) => resizeColumn(i, w)}
+                    onReset={() => resizeColumn(i, DEFAULT_WIDTHS[i] ?? 0)}
+                  />
+                </span>
+              ))}
+              <span>Details</span>
+            </div>
+
+            {entries.map((entry) => {
+              const ac = ACTION_COLORS[entry.action]
+              const entityLabel = entities.labels[entry.entityType] ?? entry.entityType
+              const entityIcon  = entities.icons[entry.entityType] ?? 'article'
+              const isExpanded  = expanded === entry.id
+              const hasDiff     = entry.diff && Object.keys(entry.diff).length > 0
+              const diffId      = `${idPrefix}-diff-${entry.id}`
+              const fieldCount  = hasDiff ? Object.keys(entry.diff!).length : 0
+
+              return (
+                <div
+                  key={entry.id}
+                  style={{ borderBottom: '1px solid var(--m3-outline-variant)' }}
+                >
+                  {/* Main row */}
+                  <div
+                    className="grid items-center px-5 py-3"
+                    style={{ gridTemplateColumns: gridColumns }}
+                  >
+                    {/* Timestamp */}
+                    <span className="font-mono text-xs" style={{ color: 'var(--m3-secondary)' }}>
+                      {formatTs(entry.timestamp)}
+                    </span>
+
+                    {/* User */}
+                    <span className="text-sm truncate" style={{ color: 'var(--m3-on-surface)' }} title={entry.userEmail}>
+                      {entry.userEmail}
+                    </span>
+
+                    {/* Action badge */}
+                    <span
+                      className="text-xs font-bold px-2 py-0.5 rounded-full w-fit"
+                      style={{ background: ac.bg, color: ac.color }}
+                    >
+                      {ac.label}
+                    </span>
+
+                    {/* Entity */}
+                    <div className="flex items-center gap-1.5 min-w-0">
+                      <span className="material-symbols-outlined flex-shrink-0" aria-hidden="true" style={{ fontSize: '14px', color: 'var(--m3-secondary)' }}>
+                        {entityIcon}
+                      </span>
+                      <div className="min-w-0">
+                        <div className="font-mono text-[10px] uppercase tracking-wider" style={{ color: 'var(--m3-outline)' }}>
+                          {entityLabel}
+                        </div>
+                        <div className="text-xs truncate" style={{ color: 'var(--m3-on-surface)' }} title={entry.entityName}>
+                          {entry.entityName}
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Details / expand */}
+                    {hasDiff ? (
+                      <button
+                        type="button"
+                        onClick={() => setExpanded(isExpanded ? null : entry.id)}
+                        aria-expanded={isExpanded}
+                        aria-controls={isExpanded ? diffId : undefined}
+                        className="focus-ring flex items-center justify-between gap-2 min-w-0 -mx-2 px-2 py-1.5 rounded-lg text-left transition-colors hover:bg-[var(--m3-surface-container-low)]"
+                      >
+                        <span className="text-xs" style={{ color: 'var(--m3-secondary)' }}>
+                          {isExpanded ? 'Hide details' : entry.action === 'deny' ? 'Show reason' : entry.action === 'allow' ? 'Show details' : `${fieldCount} field${fieldCount !== 1 ? 's' : ''} changed`}
+                        </span>
+                        <span
+                          className="material-symbols-outlined"
+                          aria-hidden="true"
+                          style={{
+                            fontSize: '16px', color: 'var(--m3-secondary)',
+                            transform: isExpanded ? 'rotate(180deg)' : 'none',
+                            transition: 'transform 0.2s',
+                          }}
+                        >
+                          expand_more
+                        </span>
+                      </button>
+                    ) : (
+                      <span className="text-xs" style={{ color: 'var(--m3-outline)' }}>—</span>
+                    )}
+                  </div>
+
+                  {/* Expanded diff */}
+                  {isExpanded && hasDiff && (
+                    <div
+                      id={diffId}
+                      className="px-5 py-3"
+                      style={{ borderTop: '1px solid var(--m3-outline-variant)', background: 'var(--m3-surface-container-lowest)' }}
+                    >
+                      <DiffView diff={entry.diff!} />
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+
+            {entries.length === 0 && (
+              <EmptyState
+                variant="row"
+                className="px-5 py-7"
+                icon="history"
+                title="No audit entries found."
+                description={filtered
+                  ? <>Try widening the date range, or <EmptyStateLink onClick={clearFilters}>clear all filters</EmptyStateLink>.</>
+                  : 'Changes made in the admin panel and every sign-in, allowed or denied, are recorded here.'}
+              />
+            )}
+          </div>
+        </div>
+      )}
+
+      <Pagination
+        page={page}
+        pageCount={totalPages}
+        onPageChange={setPage}
+        summary={`Page ${page} of ${totalPages} · ${data?.total ?? 0} entries`}
+      />
+    </PageContainer>
+  )
+}

package/src/pages/Backups.tsx

@@ -0,0 +1,170 @@
+import { useCallback, useEffect, useId, useRef, useState } from 'react'
+import { api } from '../api/client'
+import { ConfirmModal } from '../components/ConfirmModal'
+import { Alert, EmptyState, EmptyStateLink, ErrorState, LoadingState, PageContainer, PageHeader, Switch } from '../components/ui'
+import { formatDateTime } from '../lib/dateFormat'
+
+interface BackupInfo { filename: string; size: number; createdAt: number }
+interface BackupConfig { enabled: boolean; frequency: 'daily' | 'weekly'; hour: number; minute: number; weekday: number; retention: number }
+interface BackupStatus { state: string; lastCompletedAt: number | null; lastFilename: string | null; lastError: string | null }
+interface State { backups: BackupInfo[]; config: BackupConfig; status: BackupStatus }
+type BusyAction = 'create' | 'validate' | 'save' | 'delete'
+interface Message { tone: 'success' | 'error' | 'warning'; text: string }
+const WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+
+const errorText = (e: unknown) => e instanceof Error ? e.message : String(e)
+
+export default function BackupsPage() {
+  const [state, setState] = useState<State | null>(null)
+  const [loadError, setLoadError] = useState('')
+  const [busy, setBusy] = useState<BusyAction | null>(null)
+  const [message, setMessage] = useState<Message | null>(null)
+  const [deleteTarget, setDeleteTarget] = useState<string | null>(null)
+  const [savedConfig, setSavedConfig] = useState<BackupConfig | null>(null)
+  const file = useRef<HTMLInputElement>(null)
+  const scheduleSwitchId = useId()
+  const load = useCallback(() => api.get<State>('/admin/backups')
+    .then((data) => { setState(data); setSavedConfig(data.config); setLoadError('') })
+    .catch((e: unknown) => setLoadError(errorText(e))), [])
+  useEffect(() => { void load() }, [load])
+
+  async function create() {
+    setBusy('create'); setMessage(null)
+    try { await api.post('/admin/backups', {}); await load(); setMessage({ tone: 'success', text: 'Backup created successfully.' }) }
+    catch (e) { setMessage({ tone: 'error', text: errorText(e) }) } finally { setBusy(null) }
+  }
+  async function saveConfig(config: BackupConfig) {
+    setBusy('save'); setMessage(null)
+    try { const saved = await api.put<BackupConfig>('/admin/backups/config', config); setState((s) => s && ({ ...s, config: saved })); setSavedConfig(saved); setMessage({ tone: 'success', text: 'Schedule saved.' }) }
+    catch (e) { setMessage({ tone: 'error', text: errorText(e) }) } finally { setBusy(null) }
+  }
+  async function validate(selected: File) {
+    setBusy('validate'); setMessage(null)
+    const form = new FormData(); form.append('file', selected)
+    try {
+      const result = await api.upload<{ manifest: { createdAt: number }; vaultKeyMatches: boolean | null }>('/admin/backups/validate', form)
+      const keyMismatch = result.vaultKeyMatches === false
+      const key = keyMismatch ? ' Warning: VAULT_ENCRYPTION_KEY does not match.' : ''
+      setMessage({ tone: keyMismatch ? 'warning' : 'success', text: `Backup is valid (${formatDateTime(result.manifest.createdAt)}).${key} Stop the app and run: npm run restore -- --input <file>` })
+    } catch (e) { setMessage({ tone: 'error', text: errorText(e) }) } finally { setBusy(null); if (file.current) file.current.value = '' }
+  }
+  async function removeBackup(filename: string) {
+    setBusy('delete'); setMessage(null)
+    try {
+      await api.delete(`/admin/backups/${encodeURIComponent(filename)}?confirm=${encodeURIComponent(filename)}`)
+      setDeleteTarget(null)
+      await load()
+      setMessage({ tone: 'success', text: 'Backup deleted.' })
+    } catch (e) { setDeleteTarget(null); setMessage({ tone: 'error', text: errorText(e) }) } finally { setBusy(null) }
+  }
+
+  const header = <PageHeader title="Backups" subtitle="Create, download, validate and schedule complete application backups." />
+  if (!state && loadError) return <PageContainer>{header}<ErrorState message={loadError} onRetry={() => void load()} /></PageContainer>
+  if (!state) return <PageContainer>{header}<LoadingState label="Loading backups…" /></PageContainer>
+  const config = state.config
+  const scheduleChanged = JSON.stringify(config) !== JSON.stringify(savedConfig)
+  const scheduleSummary = config.enabled
+    ? `${config.frequency === 'daily' ? 'Every day' : `Every ${WEEKDAYS[config.weekday]}`} at ${String(config.hour).padStart(2, '0')}:${String(config.minute).padStart(2, '0')} · keep ${config.retention} ${config.retention === 1 ? 'backup' : 'backups'}`
+    : 'Automatic backups are disabled'
+  const updateConfig = (updates: Partial<BackupConfig>) => setState({ ...state, config: { ...config, ...updates } })
+  // Turns the switch on and moves focus to it; the schedule is still saved with "Save schedule".
+  const enableAutomaticBackups = () => {
+    updateConfig({ enabled: true })
+    document.getElementById(scheduleSwitchId)?.focus()
+  }
+  return <PageContainer>
+    {header}
+    {message && <Alert tone={message.tone} onDismiss={() => setMessage(null)}>{message.text}</Alert>}
+    {state.status.lastCompletedAt && <div className="text-sm" style={{ color: state.status.state === 'error' ? 'var(--m3-down)' : 'var(--m3-secondary)' }}>Last run: {formatDateTime(state.status.lastCompletedAt)} · {state.status.state}{state.status.lastError ? ` · ${state.status.lastError}` : ''}</div>}
+    <section className="rounded-2xl p-6 space-y-4" style={{ background: 'var(--m3-surface-container-lowest)', color: 'var(--m3-on-surface)' }}>
+      <div className="flex flex-wrap gap-3">
+        <button type="button" disabled={busy !== null} onClick={create} className="btn btn-primary">{busy === 'create' ? 'Creating backup…' : 'Create backup'}</button>
+        <button type="button" disabled={busy !== null} onClick={() => file.current?.click()} className="btn btn-secondary">{busy === 'validate' ? 'Validating…' : 'Validate restore file'}</button>
+        <input ref={file} className="hidden" type="file" accept=".backup" aria-label="Restore file" onChange={(e) => { const selected = e.target.files?.[0]; if (selected) void validate(selected) }} />
+      </div>
+      <p className="text-sm" style={{ color: 'var(--m3-secondary)' }}>Restore is intentionally offline. The encryption key is never included; keep VAULT_ENCRYPTION_KEY separately.</p>
+    </section>
+    <section className="rounded-2xl overflow-hidden" style={{ background: 'var(--m3-surface-container-lowest)', border: '1px solid var(--m3-outline-variant)', color: 'var(--m3-on-surface)' }}>
+      <div className="p-5 md:p-6 flex items-start justify-between gap-5">
+        <div className="flex gap-4 min-w-0">
+          <span className="material-symbols-outlined rounded-xl p-2.5 h-fit" aria-hidden="true" style={{ background: 'var(--admin-icon-container)', color: 'var(--admin-icon-color)' }}>schedule</span>
+          <div>
+            <h2 className="font-headline text-xl font-semibold">Automatic backups</h2>
+            <p className="text-sm mt-1" style={{ color: 'var(--m3-secondary)' }}>Create backups on a recurring schedule using the server&apos;s local time.</p>
+          </div>
+        </div>
+        <Switch id={scheduleSwitchId} checked={config.enabled} onChange={(enabled) => updateConfig({ enabled })} aria-label="Automatic backups" />
+      </div>
+
+      <div className="px-5 pb-5 md:px-6 md:pb-6">
+        {config.enabled ? (
+          <div className="rounded-2xl p-4 md:p-5 grid gap-5 md:grid-cols-3" style={{ background: 'var(--m3-surface-container-low)' }}>
+            <fieldset>
+              <legend className="font-mono text-xs uppercase tracking-wider mb-2" style={{ color: 'var(--m3-secondary)' }}>Frequency</legend>
+              <div className="grid grid-cols-2 rounded-xl overflow-hidden" style={{ border: '1px solid var(--m3-outline-variant)' }}>
+                {(['daily', 'weekly'] as const).map((frequency) => {
+                  const active = config.frequency === frequency
+                  return (
+                    <button
+                      key={frequency}
+                      type="button"
+                      aria-pressed={active}
+                      onClick={() => updateConfig({ frequency })}
+                      className={`px-3 py-2 text-sm font-semibold transition-colors focus-ring ${active ? 'selection-active' : ''}`}
+                      style={{ background: 'transparent', color: 'var(--m3-secondary)' }}
+                    >
+                      {frequency === 'daily' ? 'Daily' : 'Weekly'}
+                    </button>
+                  )
+                })}
+              </div>
+            </fieldset>
+
+            {config.frequency === 'weekly' && <label>
+              <span className="block font-mono text-xs uppercase tracking-wider mb-2" style={{ color: 'var(--m3-secondary)' }}>Day of week</span>
+              <select className="input-sig w-full" value={config.weekday} onChange={(e) => updateConfig({ weekday: Number(e.target.value) })}>{WEEKDAYS.map((day, index) => <option key={day} value={index}>{day}</option>)}</select>
+            </label>}
+
+            <label>
+              <span className="block font-mono text-xs uppercase tracking-wider mb-2" style={{ color: 'var(--m3-secondary)' }}>Start time</span>
+              <input className="input-sig w-full" type="time" step="60" value={`${String(config.hour).padStart(2, '0')}:${String(config.minute).padStart(2, '0')}`} onChange={(e) => { const parts = e.target.value.split(':'); const hour = Number(parts[0]); const minute = Number(parts[1]); if (parts.length === 2 && Number.isInteger(hour) && Number.isInteger(minute)) updateConfig({ hour, minute }) }} />
+              <span className="block text-xs mt-1.5" style={{ color: 'var(--m3-secondary)' }}>Server local time</span>
+            </label>
+
+            <label>
+              <span className="block font-mono text-xs uppercase tracking-wider mb-2" style={{ color: 'var(--m3-secondary)' }}>Retention</span>
+              <div className="relative"><input className="input-sig w-full pr-24" type="number" min="1" max="365" value={config.retention} onChange={(e) => updateConfig({ retention: Number(e.target.value) })} /><span className="absolute right-3 top-1/2 -translate-y-1/2 text-sm" aria-hidden="true" style={{ color: 'var(--m3-secondary)' }}>backups</span></div>
+              <span className="block text-xs mt-1.5" style={{ color: 'var(--m3-secondary)' }}>Older automatic backups are removed after a successful run.</span>
+            </label>
+          </div>
+        ) : <div className="rounded-xl px-4 py-3 text-sm flex items-center gap-3" style={{ background: 'var(--m3-surface-container-low)', color: 'var(--m3-secondary)' }}><span className="material-symbols-outlined" aria-hidden="true" style={{ fontSize: '20px' }}>info</span>Enable scheduling to configure recurring backups.</div>}
+
+        <div className="mt-5 pt-5 flex flex-col sm:flex-row sm:items-center justify-between gap-4" style={{ borderTop: '1px solid var(--m3-outline-variant)' }}>
+          <div><p className="text-xs font-mono uppercase tracking-wider" style={{ color: 'var(--m3-secondary)' }}>Current schedule</p><p className="text-sm font-medium mt-1">{scheduleSummary}</p></div>
+          <button type="button" disabled={busy !== null || !scheduleChanged} onClick={() => saveConfig(config)} className="btn btn-primary">{busy === 'save' ? 'Saving…' : scheduleChanged ? 'Save schedule' : 'Saved'}</button>
+        </div>
+      </div>
+    </section>
+    <section className="rounded-2xl overflow-hidden" style={{ background: 'var(--m3-surface-container-lowest)', color: 'var(--m3-on-surface)' }}>
+      <h2 className="font-headline text-xl font-semibold p-6 pb-3">Available backups</h2>
+      {state.backups.length === 0
+        ? <EmptyState
+            variant="inset"
+            icon="cloud_off"
+            title="No backups yet"
+            description={savedConfig?.enabled
+              ? 'Automatic backups are on; the first one will appear here after it runs.'
+              : 'Automatic backups are off. The database is not protected until the first backup exists.'}
+            action={config.enabled ? undefined : <EmptyStateLink onClick={enableAutomaticBackups}>Enable automatic backups</EmptyStateLink>}
+          />
+        : state.backups.map((item) => <div key={item.filename} className="p-4 px-6 flex flex-wrap items-center justify-between gap-3" style={{ borderTop: '1px solid var(--m3-outline-variant)' }}>
+          <div className="min-w-0"><div className="font-mono text-sm break-all">{item.filename}</div><div className="text-xs" style={{ color: 'var(--m3-secondary)' }}>{formatDateTime(item.createdAt)} · {(item.size / 1024 / 1024).toFixed(2)} MB</div></div>
+          <div className="flex gap-2">
+            <button type="button" onClick={() => api.download(`/admin/backups/${encodeURIComponent(item.filename)}/download`, item.filename)} aria-label={`Download ${item.filename}`} className="btn btn-secondary btn-sm">Download</button>
+            <button type="button" onClick={() => setDeleteTarget(item.filename)} aria-label={`Delete ${item.filename}`} className="btn btn-danger-outline btn-sm">Delete</button>
+          </div>
+        </div>)}
+    </section>
+    {deleteTarget && <ConfirmModal title="Delete backup" message="This permanently deletes the backup archive. This action cannot be undone." confirmLabel="Delete backup" confirmationText={deleteTarget} pending={busy === 'delete'} pendingLabel="Deleting…" onConfirm={() => { if (!busy) void removeBackup(deleteTarget) }} onCancel={() => setDeleteTarget(null)} />}
+  </PageContainer>
+}

package/src/pages/ChangePassword.tsx

@@ -0,0 +1,84 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { api, enterAfterSignIn, getCurrentUser, setSession, type AuthUser } from '../api/client'
+import { Alert, Field } from '../components/ui'
+
+export default function ChangePasswordPage() {
+  const navigate = useNavigate()
+  const [password, setPassword] = useState('')
+  const [confirm, setConfirm] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (password !== confirm) { setError('Passwords do not match'); return }
+    if (password.length < 8) { setError('Password must be at least 8 characters'); return }
+    setError('')
+    setLoading(true)
+    try {
+      const res = await api.post<AuthUser>('/auth/change-password', { newPassword: password })
+      setSession(res)
+      enterAfterSignIn(res, navigate)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to change password')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4" style={{ background: 'var(--m3-surface)' }}>
+      <div className="w-full max-w-sm">
+        <div className="rounded-2xl p-8" style={{ background: 'var(--m3-surface-container-low)', border: '1px solid var(--m3-outline-variant)' }}>
+          <div className="mb-6">
+            <div className="w-12 h-12 rounded-2xl flex items-center justify-center mb-4" style={{ background: 'var(--m3-on-surface)' }}>
+              <span className="material-symbols-outlined" aria-hidden="true" style={{ color: 'var(--m3-surface)', fontSize: '22px' }}>lock_reset</span>
+            </div>
+            <h1 className="font-headline font-bold text-2xl" style={{ color: 'var(--m3-on-surface)' }}>Set your password</h1>
+            <p className="text-sm mt-1" style={{ color: 'var(--m3-secondary)' }}>
+              {getCurrentUser()?.authMethod === 'oidc'
+                ? 'Password sign-in is enabled, so set your own password to replace the temporary one before continuing.'
+                : 'You must change your temporary password before continuing.'}
+            </p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {error && <Alert tone="error">{error}</Alert>}
+            <Field label="New Password" hint="Minimum 8 characters">
+              <input
+                type="password"
+                autoComplete="new-password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                minLength={8}
+                className="input-sig w-full"
+                placeholder="Minimum 8 characters"
+                autoFocus
+              />
+            </Field>
+            <Field label="Confirm Password">
+              <input
+                type="password"
+                autoComplete="new-password"
+                value={confirm}
+                onChange={(e) => setConfirm(e.target.value)}
+                required
+                className="input-sig w-full"
+                placeholder="Repeat the password"
+              />
+            </Field>
+            <button
+              type="submit"
+              disabled={loading}
+              className="btn btn-primary w-full py-3 font-headline font-bold"
+            >
+              {loading ? 'Saving…' : 'Set Password & Continue'}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}