/* === Milestone detail panel — RAG rating, rationale, numeric override === Spec §3: a written rationale is REQUIRED for any Yellow or Red (Pew board convention) — the form enforces it. Numeric milestones carry a human override of the auto-computed counts (judgment calls must be correctable). Milestones are board-level: admins edit, everyone else reads. */ function MilestonePanel({ id, onClose }) { const m = window.MILESTONES.find((x) => x.id === id); const me = window.Store.session(); const canEdit = !!(me && me.role === "admin"); const [history, setHistory] = React.useState(null); const [err, setErr] = React.useState(null); const [busy, setBusy] = React.useState(false); // Edit form state const [rag, setRag] = React.useState(m ? m.rag : "green"); const [rationale, setRationale] = React.useState((m && m.rationale && m.rationale.text) || ""); const [current, setCurrent] = React.useState(m ? m.current : null); const [secondaryCurrent, setSecondaryCurrent] = React.useState(m ? m.secondaryCurrent : null); React.useEffect(() => { if (!m) return; setRag(m.rag); setRationale((m.rationale && m.rationale.text) || ""); setCurrent(m.current); setSecondaryCurrent(m.secondaryCurrent); }, [id]); const refreshHistory = React.useCallback(() => { window.Store.history({ type: "milestone", id }).then(setHistory).catch(() => setHistory([])); }, [id]); React.useEffect(() => { setHistory(null); refreshHistory(); }, [id, refreshHistory]); React.useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [onClose]); if (!m) return null; const isNumeric = m.kind === "numeric"; const ragDirty = rag !== m.rag || rationale !== ((m.rationale && m.rationale.text) || ""); const numDirty = isNumeric && (Number(current) !== m.current || (m.secondaryTarget != null && Number(secondaryCurrent) !== m.secondaryCurrent)); const rationaleMissing = (rag === "yellow" || rag === "red") && !rationale.trim(); async function save() { if (rationaleMissing) { setErr("Yellow and Red require a written rationale (board convention)."); return; } setBusy(true); setErr(null); const patch = {}, prev = {}; if (rag !== m.rag) { patch.rag = rag; prev.rag = m.rag; } const newRationale = (rag === "green") ? (rationale.trim() ? { label: "NOTE", text: rationale.trim() } : null) : { label: `RATIONALE (${rag.toUpperCase()})`, text: rationale.trim() }; if (JSON.stringify(newRationale) !== JSON.stringify(m.rationale || null)) { patch.rationale = newRationale; prev.rationale = m.rationale || null; } if (isNumeric && Number(current) !== m.current) { patch.current = Number(current); prev.current = m.current; } if (isNumeric && m.secondaryTarget != null && Number(secondaryCurrent) !== m.secondaryCurrent) { patch.secondaryCurrent = Number(secondaryCurrent); prev.secondaryCurrent = m.secondaryCurrent; } if (!Object.keys(patch).length) { setBusy(false); return; } try { await window.Store.commit({ entityType: "milestone", entityId: id, action: "update", patch, prev }); refreshHistory(); } catch (e) { setErr(String(e.message || e)); } finally { setBusy(false); } } const numInput = { width: 80, padding: "6px 8px", borderRadius: 4, border: "1px solid var(--border)", background: "var(--surface-2)", font: "600 14px/1 var(--mono)", outline: "none", textAlign: "center", }; return ( <>