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