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

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-20 14:37:36 +00:00 · 2026-07-20 14:37:36 +00:00 · 1c411e402e
commit 1c411e402e
parent cae411eae7
19809 changed files with 1962608 additions and 97 deletions
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/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>
+  )
+}