Janady13/missionmatch / frontend/src/tools/slatematch/AmendmentView.tsx

1import { AlertTriangle, ArrowLeft, FileClock, ShieldAlert } from 'lucide-react' 2import { Link, useParams } from 'react-router-dom' 3import { useQuery } from '@tanstack/react-query' 4 5import { ToolHeader } from '../../components/ToolHeader' 6import { Panel } from '../../components/ui' 7import { request } from '../../lib/api' 8import { slateBrand } from './brand' 9import { useTrackedOpportunity } from './captureQueries' 10 11// THE AMENDMENT VIEW. Directive Section 4 item 11: an amendment FLAGS affected approved requirements for a 12// named human to accept, and nothing silently rewrites one. 13// 14// THE SCREEN IS BUILT AROUND THAT SENTENCE. It shows the version history so a reader can see that versions are 15// added and never edited, the alerts so they can see somebody was told, and the approved requirements reachable 16// from this opportunity so they can see WHAT IS AT STAKE. There is deliberately no button here that applies an 17// amendment to a requirement, because no such action exists: the requirement changes only by a human going to 18// the draft screen and making a new decision, which is the whole safety property. 19 20interface AmendmentPayload { 21 versions: Array<{ 22 version_number: number 23 amendment_number: string 24 source_version_label: string 25 source_payload_hash: string 26 fetched_at: string 27 is_current: boolean 28 }> 29 alerts: Array<{ 30 id: string 31 alert_type: string 32 severity: string 33 title: string 34 detail: string 35 status: string 36 created_at: string 37 }> 38 affected_requirements: Array<{ 39 requirement_id: string 40 draft_id: string 41 labor_category: string 42 clearance_level: string 43 quantity: number 44 source_scope_item_id: string 45 source_scope_title: string 46 }> 47} 48 49export function AmendmentView() { 50 const { id = '' } = useParams() 51 const opp = useTrackedOpportunity(id) 52 const q = useQuery({ 53 queryKey: ['slatematch', 'amendments', id], 54 queryFn: () => request<AmendmentPayload>(`/opportunities/tracked/${encodeURIComponent(id)}/amendments`), 55 enabled: !!id, 56 }) 57 58 const versions = q.data?.versions ?? [] 59 const alerts = q.data?.alerts ?? [] 60 const affected = q.data?.affected_requirements ?? [] 61 62 return ( 63 <div className="space-y-6"> 64 <ToolHeader name={slateBrand.name} tagline="Amendments" accent={slateBrand.accent} /> 65 66 {/* Which opportunity this is. Every one of these screens is scoped to a single pursuit, and a 67 reviewer arriving from a link needs to know which one before they start accepting things. */} 68 {opp.data?.title && <p className="text-sm font-semibold text-ink">{opp.data.title}</p>} 69 70 <Link to={`/slate/capture/${id}`} className="inline-flex items-center gap-1.5 text-sm font-semibold text-muted hover:text-ink"> 71 <ArrowLeft size={14} /> Back to the opportunity 72 </Link> 73 74 {q.isLoading && <p className="text-sm text-faint">Loading the amendment history.</p>} 75 76 <Panel title={`Version history, ${versions.length}`}> 77 <p className="mb-3 text-xs text-faint"> 78 Versions are immutable. The database refuses an update to anything but the current flag and refuses a 79 delete outright, so this list only ever grows. 80 </p> 81 {versions.length === 0 && <p className="text-sm text-faint">No versions recorded yet.</p>} 82 <ol className="space-y-2"> 83 {versions.map((v) => ( 84 <li key={v.version_number} className="flex flex-wrap items-center gap-2 rounded-md border border-slate-200 p-3"> 85 <FileClock size={14} className="text-muted" /> 86 <span className="text-sm font-semibold text-ink">Version {v.version_number}</span> 87 {v.is_current && ( 88 <span className="rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-semibold text-emerald-700">current</span> 89 )} 90 {v.amendment_number && ( 91 <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-600"> 92 amendment {v.amendment_number} 93 </span> 94 )} 95 {v.source_version_label && <span className="text-xs text-faint">{v.source_version_label}</span>} 96 <span className="text-xs text-faint">{v.fetched_at.slice(0, 19)}</span> 97 <span className="text-xs text-faint" title={v.source_payload_hash}> 98 payload {v.source_payload_hash.slice(0, 10)} 99 </span> 100 </li> 101 ))} 102 </ol> 103 {versions.length > 0 && versions.filter((v) => v.is_current).length !== 1 && ( 104 // FINDING D9 LEFT A VISIBLE SCAR AND THIS IS IT. An opportunity with no current version, or two, is a 105 // broken invariant, and it is surfaced rather than left for a background job to trip over again. 106 <p className="mt-3 inline-flex items-start gap-1.5 rounded bg-rose-50 p-2 text-xs font-semibold text-rose-800"> 107 <AlertTriangle size={13} className="mt-0.5 shrink-0" /> 108 <span> 109 {versions.filter((v) => v.is_current).length} versions are flagged current. Exactly one should be. 110 This is the invariant whose breach stopped amendment recording for this opportunity in July. 111 </span> 112 </p> 113 )} 114 </Panel> 115 116 <Panel title={`Alerts raised, ${alerts.length}`}> 117 {alerts.length === 0 && <p className="text-sm text-faint">No amendment alerts for this opportunity.</p>} 118 <ul className="space-y-2"> 119 {alerts.map((a) => ( 120 <li key={a.id} className="rounded-md border border-slate-200 p-3"> 121 <div className="flex flex-wrap items-center gap-2"> 122 <span 123 className={`rounded-full px-2 py-0.5 text-xs font-semibold ${ 124 a.severity === 'urgent' ? 'bg-rose-50 text-rose-700' : 'bg-amber-50 text-amber-700' 125 }`} 126 > 127 {a.severity} 128 </span> 129 <span className="text-sm font-semibold text-ink">{a.title}</span> 130 <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-600"> 131 {a.status} 132 </span> 133 </div> 134 {a.detail && <p className="mt-1 text-sm text-muted">{a.detail}</p>} 135 <p className="mt-1 text-xs text-faint">{a.created_at.slice(0, 19)}</p> 136 </li> 137 ))} 138 </ul> 139 </Panel> 140 141 <Panel title={`Approved requirements derived from this opportunity, ${affected.length}`}> 142 <p className="mb-3 text-xs text-faint"> 143 These are live requirements the scoring engine matches against. An amendment FLAGS them; it never 144 rewrites them. Changing one means a named human making a new decision on the draft screen. 145 </p> 146 {affected.length === 0 && ( 147 <p className="text-sm text-faint">Nothing has been promoted from this opportunity yet, so nothing is at risk.</p> 148 )} 149 <ul className="space-y-2"> 150 {affected.map((r) => ( 151 <li key={r.requirement_id} className="rounded-md border border-slate-200 p-3"> 152 <div className="flex flex-wrap items-center gap-2"> 153 {alerts.length > 0 && <ShieldAlert size={14} className="text-amber-600" />} 154 <span className="text-sm font-semibold text-ink">{r.labor_category}</span> 155 <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-600"> 156 {r.quantity} needed 157 </span> 158 <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-600"> 159 {r.clearance_level} 160 </span> 161 </div> 162 {/* THE LINEAGE, rendered so a flag can be walked back to the cited span it came from. */} 163 <p className="mt-1 text-xs text-faint"> 164 derived from scope item {r.source_scope_title || r.source_scope_item_id.slice(0, 8) || 'not recorded'} 165 {r.requirement_id ? ` , requirement ${r.requirement_id.slice(0, 8)}` : ''} 166 </p> 167 </li> 168 ))} 169 </ul> 170 {alerts.length > 0 && affected.length > 0 && ( 171 <p className="mt-3 inline-flex items-start gap-1.5 rounded bg-amber-50 p-2 text-xs font-semibold text-amber-800"> 172 <AlertTriangle size={13} className="mt-0.5 shrink-0" /> 173 <span> 174 The source changed and {affected.length} approved requirement 175 {affected.length === 1 ? ' is' : 's are'} derived from it. Review the scope, then decide. Nothing has 176 been altered automatically. 177 </span> 178 </p> 179 )} 180 </Panel> 181 </div> 182 ) 183} 184