Add 5-tier warning thresholds to staff rota footer

Replaces the 2-row (vs Booked / vs with Pickup) footer with a progressive 5-row breakdown:
- Total Available (unchanged)
- vs Booked — plain diff, room cleaning only
- with Recurring Tasks — plain diff, adds recurring tasks
- with Pickup — plain diff, adds pickup hours
- with Adjustments — bold coloured final row with configurable thresholds

New 5-tier icon system: red ⚠ / amber ⚠ / green ✓ / amber ✗ / red ✗, with defaults of
4h / 1h / 1h / 2h spare or short. Thresholds are editable in Settings.

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

frontend/src/api.ts

@@ -8,10 +8,13 @@ export interface ConfigData {
   pickup_data: PickupData
   general_tasks: GeneralTask[]
   last_reviewed: string
-  tolerance_minutes: number
   workforce_rota: WorkforceRota | null
   workforce_departments: string[]
   adjustments: Adjustment[]
+  warn_over_red_hrs: number
+  warn_over_amber_hrs: number
+  warn_under_amber_hrs: number
+  warn_under_red_hrs: number
 }
 
 export interface CategoryConfig {
@@ -129,3 +132,16 @@ export function putAdjustments(adjustments: Adjustment[]): Promise<{ ok: boolean
     body: JSON.stringify({ adjustments }),
   })
 }
+
+export function putWarningThresholds(thresholds: {
+  warn_over_red_hrs: number
+  warn_over_amber_hrs: number
+  warn_under_amber_hrs: number
+  warn_under_red_hrs: number
+}): Promise<{ ok: boolean }> {
+  return request('/config/warning-thresholds', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(thresholds),
+  })
+}

frontend/src/index.css

@@ -111,9 +111,11 @@ input, textarea, select { font-family: inherit; }
 .pickup-num { min-width: 16px; text-align: center; font-size: 0.8rem; font-weight: 600; }
 
 /* Diff cells */
-.diff-ok    { color: var(--success); font-weight: 600; }
-.diff-under { color: var(--danger);  font-weight: 600; }
-.diff-over  { color: var(--warning); font-weight: 600; }
+.diff-ok          { color: var(--success); font-weight: 600; }
+.diff-under       { color: var(--danger);  font-weight: 600; }
+.diff-under-amber { color: var(--warning); font-weight: 600; }
+.diff-over        { color: var(--warning); font-weight: 600; }
+.diff-over-red    { color: var(--danger);  font-weight: 600; }
 
 /* Numeric inputs in tables */
 .hk-num-input {

frontend/src/pages/CategorySettings.tsx

@@ -3,7 +3,7 @@ import { GripVertical } from 'lucide-react'
 import {
   getCategories, putCategories, testNewbook,
   getConfig, getWorkforceDepartments, putWorkforceDepartments,
-  putGeneralTasks, putTimeReq,
+  putGeneralTasks, putTimeReq, putWarningThresholds,
 } from '../api'
 import type { CategoryConfig } from '../api'
 import type { GeneralTask, TimeReqs } from '../types'
@@ -40,6 +40,15 @@ export function Settings() {
   const [timeMsg, setTimeMsg]     = useState('')
   const [timeError, setTimeError] = useState('')
 
+  // ── Warning threshold state ────────────────────────────────────────────────
+  const [warnOverRed, setWarnOverRed]         = useState(4)
+  const [warnOverAmber, setWarnOverAmber]     = useState(1)
+  const [warnUnderAmber, setWarnUnderAmber]   = useState(1)
+  const [warnUnderRed, setWarnUnderRed]       = useState(2)
+  const [warnSaving, setWarnSaving]           = useState(false)
+  const [warnMsg, setWarnMsg]                 = useState('')
+  const [warnError, setWarnError]             = useState('')
+
   useEffect(() => {
     Promise.all([
       getCategories(),
@@ -57,6 +66,10 @@ export function Settings() {
       setTasks(cfg.general_tasks || [])
       setTimeReqs(cfg.time_requirements || {})
       setWfSelected(cfg.workforce_departments || [])
+      setWarnOverRed(cfg.warn_over_red_hrs ?? 4)
+      setWarnOverAmber(cfg.warn_over_amber_hrs ?? 1)
+      setWarnUnderAmber(cfg.warn_under_amber_hrs ?? 1)
+      setWarnUnderRed(cfg.warn_under_red_hrs ?? 2)
       if (depts) setWfDepts(depts)
       setLoading(false)
       setWfLoading(false)
@@ -170,6 +183,23 @@ export function Settings() {
     }
   }
 
+  // ── Warning threshold handlers ─────────────────────────────────────────────
+
+  async function saveWarnThresholds() {
+    setWarnSaving(true); setWarnError(''); setWarnMsg('')
+    try {
+      await putWarningThresholds({
+        warn_over_red_hrs:    warnOverRed,
+        warn_over_amber_hrs:  warnOverAmber,
+        warn_under_amber_hrs: warnUnderAmber,
+        warn_under_red_hrs:   warnUnderRed,
+      })
+      setWarnMsg('Saved'); setTimeout(() => setWarnMsg(''), 2500)
+    } catch (e) {
+      setWarnError(e instanceof Error ? e.message : 'Save failed')
+    } finally { setWarnSaving(false) }
+  }
+
   if (loading) {
     return <div style={{ padding: '2rem', color: 'var(--text-mid)' }}>Loading…</div>
   }
@@ -380,6 +410,44 @@ export function Settings() {
           </tbody>
         </table>
       </div>
+
+      {/* ── Warning Thresholds ───────────────────────────────────────────────── */}
+      <Divider />
+      <SectionHeading title="Warning Thresholds" />
+      <p style={{ fontSize: '0.82rem', color: 'var(--text-mid)', marginBottom: '1rem' }}>
+        Controls the colour and icon shown on the "with Adjustments" row in the staff rota. All values are in hours.
+      </p>
+
+      {warnError && <Banner type="error">{warnError}</Banner>}
+      {warnMsg   && <Banner type="ok">{warnMsg}</Banner>}
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.625rem', marginBottom: '1.25rem', maxWidth: '420px' }}>
+        {([
+          { label: '⚠ Red warning — spare over', value: warnOverRed,    set: setWarnOverRed,    help: 'default 4h' },
+          { label: '⚠ Amber warning — spare over', value: warnOverAmber,  set: setWarnOverAmber,  help: 'default 1h' },
+          { label: '✗ Amber cross — short over',  value: warnUnderAmber, set: setWarnUnderAmber, help: 'default 1h' },
+          { label: '✗ Red cross — short over',    value: warnUnderRed,   set: setWarnUnderRed,   help: 'default 2h' },
+        ] as { label: string; value: number; set: (v: number) => void; help: string }[]).map(({ label, value, set, help }) => (
+          <div key={label} style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+            <span style={{ flex: 1, fontSize: '0.875rem', color: 'var(--text-dark)' }}>{label}</span>
+            <input
+              type="number" className="hk-num-input"
+              min={0} max={24} step={0.5}
+              value={value}
+              onChange={e => set(parseFloat(e.target.value) || 0)}
+              style={{ width: '68px' }}
+            />
+            <span style={{ fontSize: '0.75rem', color: 'var(--text-mid)', minWidth: '52px' }}>{help}</span>
+          </div>
+        ))}
+      </div>
+      <p style={{ fontSize: '0.78rem', color: 'var(--text-mid)', marginBottom: '1rem' }}>
+        Green ✓ is automatic — shown when the difference is within the amber spare and short thresholds above.
+      </p>
+
+      <div style={{ marginBottom: '2.5rem' }}>
+        <Btn onClick={saveWarnThresholds} disabled={warnSaving} primary>{warnSaving ? 'Saving…' : 'Save Thresholds'}</Btn>
+      </div>
     </div>
   )
 }