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

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

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>
+  )
+}