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