Janady13/missionmatch / frontend/src/tools/missionmatch/CommandCenter.tsx

1import { useState } from 'react' 2import { 3 AlertTriangle, 4 Briefcase, 5 Crown, 6 Layers, 7 MapPin, 8 Radar, 9 RefreshCw, 10 ScanSearch, 11 ShieldAlert, 12 ShieldCheck, 13 Target, 14 TrendingUp, 15 Users, 16} from 'lucide-react' 17import { useMissionAdoptForecast, useMissionCommandCenter } from './queries' 18import { ContinuousLearningTile, ExecutiveCards } from '../../components/ExecutiveCards' 19import { missionBrand } from './brand' 20import { WhoCanSupport } from './WhoCanSupport' 21import { Badge, Bar, Panel, Stat } from '../../components/ui' 22import { Gauge } from '../../components/Gauge' 23import { MissionCheckModal } from '../../components/MissionCheckModal' 24import { ToolHeader } from '../../components/ToolHeader' 25import { bandColor, fmtUSD, num, stateColor } from '../../lib/format' 26import type { CCRecommendation, CCUpcomingOpportunity } from '../../lib/types' 27 28const riskColor: Record<string, string> = { 29 high: 'var(--color-risk)', 30 medium: 'var(--color-warn)', 31 low: 'var(--color-ok)', 32} 33const sevColor: Record<string, string> = { 34 high: 'var(--color-risk)', 35 critical: 'var(--color-risk)', 36 medium: 'var(--color-warn)', 37 warning: 'var(--color-warn)', 38 low: 'var(--color-blue-soft)', 39 info: 'var(--color-blue-soft)', 40} 41 42export function CommandCenter() { 43 const { data: d, isLoading, isError, error, refetch, isFetching } = useMissionCommandCenter() 44 const [missionCheck, setMissionCheck] = useState(false) 45 46 if (isLoading) { 47 return <Panel className="grid place-items-center py-24 text-muted">Aggregating mission readiness…</Panel> 48 } 49 // A FAILED load must say so. This screen previously gated on `isLoading || !d`, so any error left data 50 // undefined while loading was already false and it rendered "Aggregating mission readiness" forever: a 51 // request that had already failed presented as one still in flight, with nothing on screen, in the 52 // console, or in the interface to say otherwise. It hid a real outage behind a spinner and made the 53 // cause undiagnosable without opening the network tab. 54 // 55 // The retry matters as much as the message: most failures here are transient (a restart, a brief plane 56 // outage), and without it the only recovery a user knows is reloading the whole application. 57 if (isError || !d) { 58 return ( 59 <Panel className="grid place-items-center gap-3 py-24 text-center"> 60 <p className="text-sm font-semibold text-warn">Could not load mission readiness.</p> 61 <p className="max-w-md text-xs text-faint"> 62 {(error as Error)?.message ?? 'The request did not return data.'} 63 </p> 64 <button 65 onClick={() => void refetch()} 66 disabled={isFetching} 67 className="rounded-lg border border-line/70 px-3 py-1.5 text-xs font-semibold text-muted hover:text-ink disabled:opacity-50" 68 > 69 {isFetching ? 'Retrying…' : 'Try again'} 70 </button> 71 </Panel> 72 ) 73 } 74 const mr = d.mission_readiness 75 const ci = d.clearance_intelligence 76 77 return ( 78 <div className="space-y-4"> 79 <MissionCheckModal open={missionCheck} onClose={() => setMissionCheck(false)} /> 80 <ToolHeader name={missionBrand.name} tagline={missionBrand.tagline} accent={missionBrand.accent} /> 81 {/* header */} 82 <div className="flex items-center justify-between"> 83 <div className="flex items-center gap-2"> 84 <Radar size={18} className="text-gold" /> 85 <h2 className="text-lg font-bold tracking-tight">Workforce Command Center™</h2> 86 <span className="text-xs text-faint">Can we staff this mission today? · as of {d.as_of}</span> 87 </div> 88 <button 89 onClick={() => refetch()} 90 className="flex items-center gap-1.5 rounded-lg border border-line/70 px-3 py-1.5 text-sm font-semibold text-muted hover:text-ink" 91 > 92 <RefreshCw size={14} className={isFetching ? 'animate-spin' : ''} /> Refresh 93 </button> 94 </div> 95 96 {/* Executive intelligence row plus the admin only learning tile */} 97 <ExecutiveCards cards={d.executive_cards ?? []} /> 98 <ContinuousLearningTile /> 99 100 {/* SECTION: banner */} 101 <div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-6"> 102 <Stat label="Cleared Workforce" value={d.banner.total_cleared_workforce.toLocaleString()} icon={<ShieldCheck size={16} />} /> 103 <Stat label="Available Now" value={d.banner.available_candidates.toLocaleString()} accent="var(--color-ok)" icon={<Users size={16} />} /> 104 <Stat label="Proposal Ready" value={d.banner.proposal_ready_candidates.toLocaleString()} accent="var(--color-blue-soft)" icon={<Target size={16} />} /> 105 <Stat label="Active Requirements" value={d.banner.active_requirements.toLocaleString()} icon={<Briefcase size={16} />} /> 106 <Stat label="Staffing Gaps" value={d.banner.staffing_gaps.toLocaleString()} accent={d.banner.staffing_gaps > 0 ? 'var(--color-warn)' : undefined} icon={<AlertTriangle size={16} />} /> 107 <Stat label="High Risk Opps" value={d.banner.high_risk_opportunities.toLocaleString()} accent={d.banner.high_risk_opportunities > 0 ? 'var(--color-risk)' : undefined} icon={<ShieldAlert size={16} />} /> 108 </div> 109 110 <div className="grid grid-cols-1 gap-4 xl:grid-cols-12"> 111 {/* LEFT: opportunities + clearance */} 112 <div className="space-y-4 xl:col-span-4"> 113 <Panel title="Active Opportunities" hint="ranked by value"> 114 <div className="space-y-2"> 115 {d.active_opportunities.map((o) => ( 116 <div key={o.opportunity_id} className="rounded-lg border border-line/50 bg-surface/60 px-3 py-2"> 117 <div className="flex items-center justify-between"> 118 <div className="min-w-0"> 119 <div className="truncate text-sm font-semibold">{o.name}</div> 120 <div className="text-xs text-muted"> 121 {o.customer_agency} · {fmtUSD(o.value)} 122 </div> 123 </div> 124 <Badge color={riskColor[o.staffing_risk_code]} subtle> 125 {o.staffing_risk} 126 </Badge> 127 </div> 128 <div className="mt-1.5 flex items-center gap-2"> 129 <Bar value={num(o.readiness_score)} color={riskColor[o.staffing_risk_code]} /> 130 <span className="w-10 text-right text-xs font-semibold tabular-nums">{num(o.readiness_score).toFixed(0)}%</span> 131 </div> 132 </div> 133 ))} 134 </div> 135 </Panel> 136 137 <Panel title="Clearance Intelligence"> 138 <div className="space-y-2"> 139 {ci.inventory_by_level.map((l) => { 140 const max = Math.max(...ci.inventory_by_level.map((x) => x.total), 1) 141 return ( 142 <div key={l.level}> 143 <div className="flex items-center justify-between text-xs"> 144 <span className="font-semibold">{l.label}</span> 145 <span className="tabular-nums text-muted"> 146 {l.total.toLocaleString()} · <span className="text-ok">{l.available} avail</span> 147 </span> 148 </div> 149 <Bar value={(l.total / max) * 100} color="var(--color-blue)" /> 150 </div> 151 ) 152 })} 153 </div> 154 <div className="mt-3 flex gap-2"> 155 {ci.inventory_by_poly.map((p) => ( 156 <span key={p.poly} className="rounded-md border border-line/70 bg-navy-800/60 px-2 py-1 text-[11px] text-blue-soft"> 157 {p.label} {p.total} 158 </span> 159 ))} 160 </div> 161 <div className="mt-3 grid grid-cols-4 gap-2 border-t border-line/50 pt-2 text-center"> 162 {[ 163 ['Now', ci.availability_windows.now], 164 ['30d', ci.availability_windows.d30], 165 ['60d', ci.availability_windows.d60], 166 ['90d', ci.availability_windows.d90], 167 ].map(([k, v]) => ( 168 <div key={k as string}> 169 <div className="text-sm font-bold tabular-nums">{(v as number).toLocaleString()}</div> 170 <div className="text-[10px] uppercase text-faint">{k as string}</div> 171 </div> 172 ))} 173 </div> 174 {(ci.expiring.due_90 > 0 || ci.expiring.expired > 0) && ( 175 <div className="mt-2 flex items-center gap-2 text-xs text-warn"> 176 <AlertTriangle size={13} /> 177 {ci.expiring.expired} expired · {ci.expiring.due_90} expiring ≤90d 178 </div> 179 )} 180 </Panel> 181 </div> 182 183 {/* CENTER: mission readiness + labor category */} 184 <div className="space-y-4 xl:col-span-4"> 185 <Panel className="grid place-items-center py-5"> 186 <Gauge value={num(mr.score)} color={bandColor(mr.band)} status={mr.status} /> 187 <div className="mt-4 w-full space-y-2"> 188 {mr.drivers.map((dr) => ( 189 <div key={dr.key}> 190 <div className="flex items-center justify-between text-xs"> 191 <span className="text-ink">{dr.label}</span> 192 <span className="font-semibold tabular-nums" style={{ color: stateColor(dr.state) }}> 193 {num(dr.pct).toFixed(0)}% 194 </span> 195 </div> 196 <Bar value={num(dr.pct)} color={stateColor(dr.state)} /> 197 </div> 198 ))} 199 </div> 200 </Panel> 201 202 <Panel title="Labor Category Coverage™"> 203 <div className="space-y-2"> 204 {d.labor_category_coverage.map((c) => ( 205 <div key={c.labor_category}> 206 <div className="flex items-center justify-between text-xs"> 207 <span>{c.labor_category}</span> 208 <span className="tabular-nums text-muted"> 209 {c.filled}/{c.demanded} ·{' '} 210 <span style={{ color: bandColor(c.color) }}>{num(c.coverage).toFixed(0)}%</span> 211 </span> 212 </div> 213 <Bar value={num(c.coverage)} color={bandColor(c.color)} /> 214 </div> 215 ))} 216 </div> 217 </Panel> 218 </div> 219 220 {/* RIGHT: staffing gaps + proposal readiness */} 221 <div className="space-y-4 xl:col-span-4"> 222 <Panel title="Staffing Gaps™" hint="most valuable panel"> 223 {d.staffing_gaps.length === 0 ? ( 224 <p className="text-sm" style={{ color: 'var(--color-ok)' }}> 225 Fully staffed against current demand. 226 </p> 227 ) : ( 228 <div className="space-y-2.5"> 229 {d.staffing_gaps.map((g) => ( 230 <div key={g.labor_category + g.required_level} className="rounded-lg border border-line/50 bg-surface/60 px-3 py-2"> 231 <div className="flex items-center justify-between"> 232 <span className="text-sm font-bold text-warn">{g.headline}</span> 233 {g.blocks_key_personnel && ( 234 <span className="flex items-center gap-1 text-[11px] text-gold"> 235 <Crown size={12} /> KP 236 </span> 237 )} 238 </div> 239 <div className="mt-0.5 text-xs text-muted"> 240 {g.value_at_risk ? ( 241 <> 242 <span className="font-semibold text-warn">{fmtUSD(g.value_at_risk)} exposure</span> 243 {g.value_representative && ( 244 <span 245 className="ml-1.5 rounded bg-line/40 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-muted" 246 title="Representative demo value, not a real federal figure" 247 > 248 representative 249 </span> 250 )} 251 {' · '} 252 </> 253 ) : null} 254 {g.impacted_opportunities.slice(0, 2).join(', ')} 255 </div> 256 {/* counted basis, so the dollar is auditable, never a bare sum */} 257 <div className="mt-0.5 text-[11px] text-faint">{g.value_basis}</div> 258 {/* modeled Mission Readiness Impact */} 259 {num(g.impact_modeled_pct) > 0 && ( 260 <div 261 className="mt-0.5 flex items-center gap-1 text-[11px] text-blue-soft" 262 title={g.impact_modeled_label} 263 > 264 <TrendingUp size={11} /> 265 Mission Readiness Impact, plus {g.impact_modeled_pct} pts coverage if filled, modeled 266 </div> 267 )} 268 </div> 269 ))} 270 </div> 271 )} 272 <button 273 onClick={() => setMissionCheck(true)} 274 className="mt-3 flex w-full items-center justify-center gap-1.5 rounded-lg border border-gold/50 px-3 py-2 text-xs font-semibold text-gold hover:bg-gold/10" 275 > 276 <ScanSearch size={14} /> Find Candidate 277 </button> 278 </Panel> 279 280 <Panel title="Proposal Readiness™"> 281 <div className="grid grid-cols-2 gap-2"> 282 {[ 283 ['Ready', d.proposal_readiness.ready, 'var(--color-ok)'], 284 ['At Risk', d.proposal_readiness.at_risk, 'var(--color-warn)'], 285 ['KP Missing', d.proposal_readiness.key_personnel_missing, 'var(--color-risk)'], 286 ['LCAT Missing', d.proposal_readiness.labor_categories_missing, 'var(--color-warn)'], 287 ].map(([k, v, c]) => ( 288 <div key={k as string} className="rounded-lg border border-line/50 bg-surface/60 px-3 py-2 text-center"> 289 <div className="text-2xl font-extrabold tabular-nums" style={{ color: c as string }}> 290 {v as number} 291 </div> 292 <div className="text-[11px] uppercase tracking-wide text-muted">{k as string}</div> 293 </div> 294 ))} 295 </div> 296 </Panel> 297 </div> 298 </div> 299 300 {/* ROW: win impact + heat map + recommendations */} 301 <div className="grid grid-cols-1 gap-4 xl:grid-cols-12"> 302 <Panel title="Win Impact™" hint="scarcity proxy" className="xl:col-span-3"> 303 <div className="text-4xl font-extrabold tabular-nums" style={{ color: 'var(--color-gold)' }}> 304 {d.win_impact.high_impact_count} 305 </div> 306 <div className="text-xs text-muted">high impact candidates</div> 307 <ul className="mt-2 space-y-1"> 308 {d.win_impact.top.slice(0, 5).map((c) => ( 309 <li key={c.candidate_id} className="flex items-center justify-between text-sm"> 310 <span className="truncate">{c.full_name}</span> 311 <span className="shrink-0 text-[11px] text-blue-soft"> 312 {c.clearance_level === 'ts_sci' ? 'TS/SCI' : c.clearance_level} · {c.years_experience}y 313 </span> 314 </li> 315 ))} 316 </ul> 317 </Panel> 318 319 <Panel title="Workforce Heat Map™" hint="candidate density by metro" className="xl:col-span-5"> 320 <div className="space-y-1.5"> 321 {d.heat_map.slice(0, 8).map((m) => { 322 const max = Math.max(...d.heat_map.map((x) => x.total), 1) 323 return ( 324 <div key={m.metro} className="flex items-center gap-2"> 325 <span className="flex w-40 shrink-0 items-center gap-1 text-xs"> 326 <MapPin size={12} className="text-blue-soft" /> 327 {m.metro} 328 </span> 329 <Bar value={(m.total / max) * 100} color="var(--color-blue)" /> 330 <span className="w-12 text-right text-xs tabular-nums text-muted">{m.total}</span> 331 </div> 332 ) 333 })} 334 </div> 335 </Panel> 336 337 <Panel title="AI Recommendations" className="xl:col-span-4"> 338 <ul className="space-y-2"> 339 {/* Keyed on the recommendation content. The list is replaced wholesale on refetch, so a 340 position key would let React carry a row's identity over to an unrelated recommendation. */} 341 {d.ai_recommendations.map((r: CCRecommendation) => ( 342 <li 343 key={`${r.severity}:${r.message}`} 344 className="flex items-start gap-2 rounded-lg border border-line/50 bg-surface/60 px-3 py-2 text-sm" 345 > 346 <AlertTriangle size={15} className="mt-0.5 shrink-0" style={{ color: sevColor[r.severity] }} /> 347 <span>{r.message}</span> 348 </li> 349 ))} 350 </ul> 351 </Panel> 352 </div> 353 354 {/* ROW: upcoming opportunities (forecasts) + incumbent landscape (contract awards) */} 355 <div className="grid grid-cols-1 gap-4 xl:grid-cols-12"> 356 <Panel title="Upcoming Opportunities™" hint="planning data, does not change current readiness" className="xl:col-span-7"> 357 {d.upcoming_opportunities.length === 0 ? ( 358 <p className="text-sm text-muted">No forecasts ingested yet.</p> 359 ) : ( 360 <div className="space-y-2"> 361 {d.upcoming_opportunities.map((u) => ( 362 <UpcomingCard key={u.record_id} u={u} /> 363 ))} 364 </div> 365 )} 366 </Panel> 367 368 <Panel title="Incumbent Landscape" hint="who holds the contracts" className="xl:col-span-5"> 369 {d.incumbent_landscape.length === 0 ? ( 370 <p className="text-sm text-muted">No award data ingested yet.</p> 371 ) : ( 372 <div className="space-y-1.5"> 373 {d.incumbent_landscape.map((inc) => ( 374 <div key={inc.record_id} className="flex items-center justify-between rounded-lg border border-line/50 bg-surface/60 px-3 py-2"> 375 <div className="min-w-0"> 376 <div className="truncate text-sm font-semibold">{inc.incumbent}</div> 377 <div className="text-xs text-muted"> 378 {inc.agency} 379 {inc.naics ? ` · NAICS ${inc.naics}` : ''} 380 </div> 381 </div> 382 <div className="shrink-0 pl-2 text-right"> 383 <div className="text-sm font-bold tabular-nums">{fmtUSD(inc.value)}</div> 384 <div className="text-[10px] uppercase tracking-wide text-faint">{inc.value_source || inc.source}</div> 385 </div> 386 </div> 387 ))} 388 </div> 389 )} 390 </Panel> 391 </div> 392 393 {/* Executive Action Center */} 394 <Panel title="Executive Action Center"> 395 <div className="flex flex-wrap items-center gap-2.5"> 396 <button className="flex items-center gap-2 rounded-lg bg-gradient-to-r from-blue to-navy-700 px-4 py-2.5 text-sm font-bold text-white hover:brightness-110"> 397 <Layers size={15} /> Generate Slate 398 </button> 399 <button className="flex items-center gap-2 rounded-lg border border-line/70 px-4 py-2.5 text-sm font-semibold text-muted hover:text-ink"> 400 <Target size={15} /> Screen Candidate 401 </button> 402 <button className="flex items-center gap-2 rounded-lg border border-line/70 px-4 py-2.5 text-sm font-semibold text-muted hover:text-ink"> 403 <TrendingUp size={15} /> Workforce Inventory 404 </button> 405 <span className="ml-auto text-xs text-faint"> 406 {d.action_center.open_opportunities_without_slate} opps without a slate ·{' '} 407 {d.action_center.requirements_unscreened} requirements unscreened 408 </span> 409 </div> 410 </Panel> 411 412 {/* Who can support this mission today, read from the persisted screenMATCH evaluations. */} 413 <WhoCanSupport /> 414 </div> 415 ) 416} 417 418// UpcomingCard renders one forecast with its honest fit note and a compact adopt as requirement form. 419// Adopting creates a real requirement the shared engine scores; on success the dashboard refreshes so 420// the new requirement shows up in coverage. The forecast itself never alters the current readiness. 421function UpcomingCard({ u }: { u: CCUpcomingOpportunity }) { 422 const [open, setOpen] = useState(false) 423 const [level, setLevel] = useState('secret') 424 const [years, setYears] = useState(3) 425 const [skills, setSkills] = useState('') 426 const adopt = useMissionAdoptForecast() 427 428 return ( 429 <div className="rounded-lg border border-line/50 bg-surface/60 px-3 py-2"> 430 <div className="flex items-start justify-between gap-2"> 431 <div className="min-w-0"> 432 <div className="truncate text-sm font-semibold">{u.title}</div> 433 <div className="text-xs text-muted"> 434 {u.agency} 435 {u.naics ? ` · NAICS ${u.naics}` : ''} 436 {u.place_of_performance ? ` · ${u.place_of_performance}` : ''} 437 {u.estimated_award_date ? ` · est. award ${u.estimated_award_date}` : ''} 438 {u.estimated_value ? ` · ${fmtUSD(u.estimated_value)}` : ''} 439 </div> 440 </div> 441 <span 442 className="shrink-0 rounded bg-line/40 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-muted" 443 title="Forecast, subject to change" 444 > 445 {u.planning_note} 446 </span> 447 </div> 448 <div className="mt-1 text-[11px] text-blue-soft">{u.fit_note}</div> 449 {u.adoptable && ( 450 <div className="mt-1.5"> 451 {!open ? ( 452 <button onClick={() => setOpen(true)} className="text-[11px] font-semibold text-gold hover:underline"> 453 Adopt as requirement 454 </button> 455 ) : ( 456 <form 457 onSubmit={(e) => { 458 e.preventDefault() 459 adopt.mutate( 460 { 461 recordID: u.record_id, 462 input: { 463 required_level: level, 464 required_poly: 'none', 465 required_years: years, 466 key_personnel: false, 467 skills: skills 468 .split(',') 469 .map((s) => s.trim()) 470 .filter(Boolean), 471 }, 472 }, 473 { onSuccess: () => setOpen(false) }, 474 ) 475 }} 476 className="mt-1 space-y-1.5 rounded-md border border-line/50 bg-navy-950/40 p-2" 477 > 478 <div className="flex flex-wrap items-center gap-1.5"> 479 <select 480 value={level} 481 onChange={(e) => setLevel(e.target.value)} 482 className="rounded border border-line/70 bg-navy-950/60 px-1.5 py-1 text-[11px] outline-none" 483 aria-label="Required clearance" 484 > 485 <option value="none">No clearance</option> 486 <option value="secret">Secret</option> 487 <option value="top_secret">Top Secret</option> 488 <option value="ts_sci">TS/SCI</option> 489 </select> 490 <input 491 type="number" 492 min={0} 493 value={years} 494 onChange={(e) => setYears(Number(e.target.value))} 495 className="w-16 rounded border border-line/70 bg-navy-950/60 px-1.5 py-1 text-[11px] outline-none" 496 aria-label="Required years" 497 /> 498 </div> 499 <input 500 value={skills} 501 onChange={(e) => setSkills(e.target.value)} 502 placeholder="Required skills, comma separated" 503 className="w-full rounded border border-line/70 bg-navy-950/60 px-1.5 py-1 text-[11px] outline-none" 504 aria-label="Required skills" 505 /> 506 <div className="flex items-center gap-1.5"> 507 <button 508 type="submit" 509 disabled={adopt.isPending} 510 className="rounded bg-gold/20 px-2 py-1 text-[11px] font-semibold text-gold hover:bg-gold/30 disabled:opacity-50" 511 > 512 {adopt.isPending ? 'Adopting…' : 'Create requirement'} 513 </button> 514 <button type="button" onClick={() => setOpen(false)} className="text-[11px] text-muted hover:text-ink"> 515 Cancel 516 </button> 517 {adopt.isError && <span className="text-[11px] text-risk">Could not adopt. Try again.</span>} 518 </div> 519 </form> 520 )} 521 </div> 522 )} 523 </div> 524 ) 525} 526