@better-forge/ui 0.1.0 → 0.1.1

package/src/pages/Backups.tsx

@@ -1,170 +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>
-}
+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

@@ -1,84 +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>
-  )
-}
+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>
+  )
+}