Add settings page for managing forecasting API key and URL via UI

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/App.tsx

@@ -1,10 +1,16 @@
 import AuthGate from './components/AuthGate'
 import ReportsPage from './pages/ReportsPage'
+import { UpdateBanner } from './components/UpdateBanner'
+import { useVersionCheck } from './hooks/useVersionCheck'
 
 export default function App() {
+  const updateAvailable = useVersionCheck('/reports/health')
   return (
-    <AuthGate>
-      <ReportsPage />
-    </AuthGate>
+    <>
+      <AuthGate>
+        <ReportsPage />
+      </AuthGate>
+      <UpdateBanner visible={updateAvailable} />
+    </>
   )
 }

frontend/src/api.ts

@@ -63,3 +63,14 @@ export function dfDeleteSnapshot(year: number, month: number, id: number) {
     method: 'DELETE',
   })
 }
+
+// ── Settings ──────────────────────────────────────────────────────────────────
+export type AppSetting = { key: string; value: string; updated_at: string }
+
+export function getSettings(): Promise<{ settings: AppSetting[] }> {
+  return request('/settings')
+}
+
+export function saveSettings(settings: { key: string; value: string }[]): Promise<{ ok: boolean }> {
+  return request('/settings', { method: 'PUT', body: JSON.stringify({ settings }) })
+}

frontend/src/components/UpdateBanner.tsx

@@ -0,0 +1,44 @@
+import { RefreshCw } from 'lucide-react'
+
+export function UpdateBanner({ visible }: { visible: boolean }) {
+  if (!visible) return null
+  return (
+    <div style={{
+      position: 'fixed',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      zIndex: 9999,
+      background: 'var(--sidebar)',
+      color: 'var(--text-light)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '12px',
+      padding: '10px 16px',
+      fontSize: '14px',
+      boxShadow: '0 -2px 8px rgba(0,0,0,0.3)',
+    }}>
+      <span>A new version is available.</span>
+      <button
+        onClick={() => window.location.reload()}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '6px',
+          background: 'var(--accent)',
+          color: 'var(--sidebar)',
+          border: 'none',
+          borderRadius: '4px',
+          padding: '6px 14px',
+          fontWeight: 600,
+          cursor: 'pointer',
+          fontSize: '13px',
+        }}
+      >
+        <RefreshCw size={14} strokeWidth={1.75} />
+        Reload
+      </button>
+    </div>
+  )
+}

frontend/src/hooks/useVersionCheck.ts

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react'
+
+const POLL_MS = 2 * 60 * 1000
+
+export function useVersionCheck(healthUrl: string) {
+  const [updateAvailable, setUpdateAvailable] = useState(false)
+
+  useEffect(() => {
+    let seenVersion: string | null = null
+
+    async function check() {
+      try {
+        const res = await fetch(healthUrl, { cache: 'no-store' })
+        if (!res.ok) return
+        const data = await res.json()
+        const v: string | undefined = data.version
+        if (!v) return
+        if (seenVersion === null) {
+          seenVersion = v
+        } else if (v !== seenVersion) {
+          setUpdateAvailable(true)
+        }
+      } catch {
+        // network error — skip silently
+      }
+    }
+
+    check()
+    const interval = setInterval(check, POLL_MS)
+
+    function onVisible() {
+      if (document.visibilityState === 'visible') check()
+    }
+    document.addEventListener('visibilitychange', onVisible)
+
+    return () => {
+      clearInterval(interval)
+      document.removeEventListener('visibilitychange', onVisible)
+    }
+  }, [healthUrl])
+
+  return updateAvailable
+}

frontend/src/index.css

@@ -72,14 +72,11 @@ html, body, #root {
 }
 
 .sidebar-user {
-  padding: 12px 16px;
-  border-top: 1px solid rgba(255,255,255,.08);
   color: rgba(255,255,255,.4);
   font-size: 12px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  flex-shrink: 0;
 }
 
 /* ── Report tree ────────────────────────────────────────────────── */
@@ -748,3 +745,102 @@ html, body, #root {
   /* Section titles */
   .wa-section-title { font-size: 11px; padding-bottom: 6px; margin-bottom: 10px; }
 }
+
+/* ── Sidebar footer / settings ───────────────────────────────────────────────── */
+.sidebar-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-top: 1px solid rgba(255,255,255,0.07);
+  margin-top: auto;
+  flex-shrink: 0;
+}
+.sidebar-settings-btn {
+  background: none;
+  border: none;
+  color: rgba(255,255,255,0.45);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  transition: color 0.15s, background 0.15s;
+}
+.sidebar-settings-btn:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.06); }
+.sidebar-settings-btn.active { color: var(--gold); }
+
+/* ── Settings page ───────────────────────────────────────────────────────────── */
+.settings-page {
+  max-width: 640px;
+  padding: 32px 28px;
+}
+.settings-header h1 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 6px;
+}
+.settings-header p {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin: 0 0 28px;
+}
+.settings-body { display: flex; flex-direction: column; gap: 20px; }
+.setting-row { display: flex; flex-direction: column; gap: 6px; }
+.setting-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.setting-hint {
+  font-weight: 400;
+  color: var(--text-secondary);
+  font-size: 11px;
+}
+.setting-input-wrap {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.setting-input {
+  flex: 1;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  padding: 7px 10px;
+  font-size: 12px;
+  font-family: monospace;
+  color: var(--text-primary);
+  outline: none;
+  transition: border-color 0.15s;
+}
+.setting-input:focus { border-color: var(--gold); }
+.setting-reveal-btn {
+  font-size: 11px;
+  padding: 6px 10px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.setting-reveal-btn:hover { color: var(--text-primary); border-color: var(--text-secondary); }
+.setting-updated {
+  font-size: 10px;
+  color: var(--text-secondary);
+}
+.settings-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-top: 8px;
+}
+.setting-saved {
+  font-size: 12px;
+  color: #22c55e;
+}

frontend/src/pages/ReportsPage.tsx

@@ -2,13 +2,14 @@ import { useEffect, useState, useCallback } from 'react'
 import {
   BarChart2, Building2, UtensilsCrossed, ShoppingCart, Database,
   ChevronRight, ChevronDown, Play, Download, Loader2, AlertCircle,
-  FileBarChart, TrendingUp,
+  FileBarChart, TrendingUp, Settings,
 } from 'lucide-react'
 import { useAuth } from '../components/AuthGate'
 import { fetchReports, runReport } from '../api'
 import type { ReportMeta, ReportResult } from '../types'
 import DirectorsForecast from './DirectorsForecast'
 import WeeklyActual from './WeeklyActual'
+import { SettingsPage } from './SettingsPage'
 
 const DIRECTORS_REPORTS: ReportMeta[] = [
   {
@@ -116,7 +117,7 @@ interface SidebarProps {
   onSelect: (r: ReportMeta) => void
 }
 
-function Sidebar({ tree, selectedId, onSelect }: SidebarProps) {
+function Sidebar({ tree, selectedId, onSelect, onSettings }: SidebarProps & { onSettings: () => void }) {
   const { user } = useAuth()
   const [openCats, setOpenCats] = useState<Set<string>>(new Set(tree.map(t => t.category)))
   const [openSubs, setOpenSubs] = useState<Set<string>>(new Set())
@@ -214,7 +215,18 @@ function Sidebar({ tree, selectedId, onSelect }: SidebarProps) {
         })}
       </nav>
 
-      <div className="sidebar-user">{user.name}</div>
+      <div className="sidebar-footer">
+        {user.is_admin && (
+          <button
+            className={`sidebar-settings-btn${selectedId === '__settings__' ? ' active' : ''}`}
+            onClick={onSettings}
+            title="Settings"
+          >
+            <Settings size={14} strokeWidth={1.75} />
+          </button>
+        )}
+        <div className="sidebar-user">{user.name}</div>
+      </div>
     </aside>
   )
 }
@@ -263,6 +275,7 @@ function ResultsTable({ result }: { result: ReportResult }) {
 export default function ReportsPage() {
   const [reports, setReports]     = useState<ReportMeta[]>([])
   const [selected, setSelected]   = useState<ReportMeta | null>(null)
+  const [showSettings, setShowSettings] = useState(false)
   const [dateFrom, setDateFrom]   = useState(daysAgo(7))
   const [dateTo, setDateTo]       = useState(today())
   const [result, setResult]       = useState<ReportResult | null>(null)
@@ -277,10 +290,16 @@ export default function ReportsPage() {
 
   const handleSelect = useCallback((r: ReportMeta) => {
     setSelected(r)
+    setShowSettings(false)
     setResult(null)
     setError(null)
   }, [])
 
+  const handleSettings = useCallback(() => {
+    setShowSettings(true)
+    setSelected(null)
+  }, [])
+
   const handleRun = async () => {
     if (!selected) return
     setLoading(true)
@@ -298,7 +317,7 @@ export default function ReportsPage() {
 
   return (
     <div className="app-shell">
-      <Sidebar tree={tree} selectedId={selected?.id ?? null} onSelect={handleSelect} />
+      <Sidebar tree={tree} selectedId={showSettings ? '__settings__' : (selected?.id ?? null)} onSelect={handleSelect} onSettings={handleSettings} />
 
       {/* Mobile top bar */}
       <div className="top-bar">
@@ -307,7 +326,9 @@ export default function ReportsPage() {
       </div>
 
       <main className="page-content">
-        {!selected ? (
+        {showSettings ? (
+          <SettingsPage />
+        ) : !selected ? (
           <div className="welcome-state">
             <BarChart2 size={48} strokeWidth={1} style={{ color: 'var(--border)', marginBottom: 16 }} />
             <h2>Custom Reports</h2>

frontend/src/pages/SettingsPage.tsx

@@ -0,0 +1,111 @@
+import { useEffect, useState } from 'react'
+import { Save } from 'lucide-react'
+import { getSettings, saveSettings, type AppSetting } from '../api'
+
+const SETTING_LABELS: Record<string, { label: string; hint: string; secret?: boolean }> = {
+  forecasting_api_key: {
+    label: 'Forecasting API Key',
+    hint: 'API key for the Forecasting app public API. Create one in Forecasting → Settings → API Keys.',
+    secret: true,
+  },
+  forecasting_url: {
+    label: 'Forecasting URL',
+    hint: 'Internal URL for the Forecasting backend (e.g. http://10.10.10.113:3080). Leave blank to use the default.',
+  },
+}
+
+export function SettingsPage() {
+  const [settings, setSettings]   = useState<AppSetting[]>([])
+  const [values, setValues]       = useState<Record<string, string>>({})
+  const [loading, setLoading]     = useState(true)
+  const [saving, setSaving]       = useState(false)
+  const [saved, setSaved]         = useState(false)
+  const [error, setError]         = useState<string | null>(null)
+  const [revealed, setRevealed]   = useState<Record<string, boolean>>({})
+
+  useEffect(() => {
+    getSettings()
+      .then(({ settings: rows }) => {
+        setSettings(rows)
+        const v: Record<string, string> = {}
+        for (const r of rows) v[r.key] = r.value
+        setValues(v)
+      })
+      .catch(e => setError(e.message))
+      .finally(() => setLoading(false))
+  }, [])
+
+  async function handleSave() {
+    setSaving(true); setSaved(false); setError(null)
+    try {
+      await saveSettings(Object.entries(values).map(([key, value]) => ({ key, value })))
+      setSaved(true)
+      setTimeout(() => setSaved(false), 3000)
+    } catch (e) {
+      setError((e as Error).message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (loading) return <div className="df-loading"><div className="df-spinner" /></div>
+
+  return (
+    <div className="settings-page">
+      <div className="settings-header">
+        <h1>Reports Settings</h1>
+        <p>These settings are stored in the database and override environment variables.</p>
+      </div>
+
+      <div className="settings-body">
+        {settings.map(s => {
+          const meta = SETTING_LABELS[s.key] ?? { label: s.key, hint: '' }
+          const isSecret = meta.secret
+          const isRevealed = revealed[s.key]
+          return (
+            <div key={s.key} className="setting-row">
+              <label className="setting-label">
+                {meta.label}
+                {meta.hint && <span className="setting-hint">{meta.hint}</span>}
+              </label>
+              <div className="setting-input-wrap">
+                <input
+                  type={isSecret && !isRevealed ? 'password' : 'text'}
+                  value={values[s.key] ?? ''}
+                  placeholder={isSecret ? 'fk_…' : 'http://10.10.10.113:3080'}
+                  onChange={e => setValues(v => ({ ...v, [s.key]: e.target.value }))}
+                  className="setting-input"
+                  autoComplete="off"
+                  spellCheck={false}
+                />
+                {isSecret && (
+                  <button
+                    type="button"
+                    className="setting-reveal-btn"
+                    onClick={() => setRevealed(r => ({ ...r, [s.key]: !r[s.key] }))}
+                  >
+                    {isRevealed ? 'Hide' : 'Show'}
+                  </button>
+                )}
+              </div>
+              {s.updated_at && (
+                <span className="setting-updated">
+                  Last saved: {new Date(s.updated_at).toLocaleString('en-GB')}
+                </span>
+              )}
+            </div>
+          )
+        })}
+
+        <div className="settings-actions">
+          {error && <span className="df-error-inline">{error}</span>}
+          {saved && <span className="setting-saved">Saved ✓</span>}
+          <button className="btn-run" onClick={handleSave} disabled={saving}>
+            <Save size={13} strokeWidth={1.75} />
+            {saving ? 'Saving…' : 'Save Settings'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}