Source identity
| Field | Recorded value |
|---|---|
| Source type | GitHub source |
| Original record | Janady13/missionmatch / frontend/src/screens/CommandCenter.tsx |
| Date | Not specified in source |
| Repository | Janady13/missionmatch |
| Revision | 39df94f92b2a33f852481fe1954dabed841524bb |
| Branch | w0-aedt-compliance |
| Path or archive member | frontend/src/screens/CommandCenter.tsx |
| Original SHA-256 | 58f878fd99663f4901bf3a4ed48c6728169523e7b4b9002d8601571d32446576 |
| Git blob SHA | 19fdea12d914fee381b5db4a208115cc998f82f9 |
| Reading-copy SHA-256 | 58f878fd99663f4901bf3a4ed48c6728169523e7b4b9002d8601571d32446576 |
Recovered source transcript
Download complete source text ↓310 lines · 14.0 KB
import {
AlertTriangle,
Briefcase,
Crown,
Layers,
MapPin,
Radar,
RefreshCw,
ShieldAlert,
ShieldCheck,
Target,
TrendingUp,
Users,
} from 'lucide-react'
import { useCommandCenter } from '../lib/queries'
import { Badge, Bar, Panel, Stat } from '../components/ui'
import { Gauge } from '../components/Gauge'
import { bandColor, num, stateColor } from '../lib/format'
import type { CCRecommendation } from '../lib/types'
function money(v: string | null | undefined): string {
if (!v) return 'n/a'
const n = Number(v)
if (!Number.isFinite(n)) return 'n/a'
if (n >= 1e9) return `$${(n / 1e9).toFixed(2)}B`
if (n >= 1e6) return `$${(n / 1e6).toFixed(1)}M`
if (n >= 1e3) return `$${(n / 1e3).toFixed(0)}K`
return `$${n}`
}
const riskColor: Record<string, string> = {
high: 'var(--color-risk)',
medium: 'var(--color-warn)',
low: 'var(--color-ok)',
}
const sevColor: Record<string, string> = {
high: 'var(--color-risk)',
critical: 'var(--color-risk)',
medium: 'var(--color-warn)',
warning: 'var(--color-warn)',
low: 'var(--color-blue-soft)',
info: 'var(--color-blue-soft)',
}
export function CommandCenter() {
const { data: d, isLoading, refetch, isFetching } = useCommandCenter()
if (isLoading || !d) {
return <Panel className="grid place-items-center py-24 text-muted">Aggregating mission readiness…</Panel>
}
const mr = d.mission_readiness
const ci = d.clearance_intelligence
return (
<div className="space-y-4">
{/* header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Radar size={18} className="text-gold" />
<h2 className="text-lg font-bold tracking-tight">Workforce Command Center™</h2>
<span className="text-xs text-faint">Can we staff this mission today? · as of {d.as_of}</span>
</div>
<button
onClick={() => refetch()}
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"
>
<RefreshCw size={14} className={isFetching ? 'animate-spin' : ''} /> Refresh
</button>
</div>
{/* SECTION: banner */}
<div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-6">
<Stat label="Cleared Workforce" value={d.banner.total_cleared_workforce.toLocaleString()} icon={<ShieldCheck size={16} />} />
<Stat label="Available Now" value={d.banner.available_candidates.toLocaleString()} accent="var(--color-ok)" icon={<Users size={16} />} />
<Stat label="Proposal Ready" value={d.banner.proposal_ready_candidates.toLocaleString()} accent="var(--color-blue-soft)" icon={<Target size={16} />} />
<Stat label="Active Requirements" value={d.banner.active_requirements.toLocaleString()} icon={<Briefcase size={16} />} />
<Stat label="Staffing Gaps" value={d.banner.staffing_gaps.toLocaleString()} accent={d.banner.staffing_gaps > 0 ? 'var(--color-warn)' : undefined} icon={<AlertTriangle size={16} />} />
<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} />} />
</div>
<div className="grid grid-cols-1 gap-4 xl:grid-cols-12">
{/* LEFT: opportunities + clearance */}
<div className="space-y-4 xl:col-span-4">
<Panel title="Active Opportunities" hint="ranked by value">
<div className="space-y-2">
{d.active_opportunities.map((o) => (
<div key={o.opportunity_id} className="rounded-lg border border-line/50 bg-surface/60 px-3 py-2">
<div className="flex items-center justify-between">
<div className="min-w-0">
<div className="truncate text-sm font-semibold">{o.name}</div>
<div className="text-xs text-muted">
{o.customer_agency} · {money(o.value)}
</div>
</div>
<Badge color={riskColor[o.staffing_risk_code]} subtle>
{o.staffing_risk}
</Badge>
</div>
<div className="mt-1.5 flex items-center gap-2">
<Bar value={num(o.readiness_score)} color={riskColor[o.staffing_risk_code]} />
<span className="w-10 text-right text-xs font-semibold tabular-nums">{num(o.readiness_score).toFixed(0)}%</span>
</div>
</div>
))}
</div>
</Panel>
<Panel title="Clearance Intelligence">
<div className="space-y-2">
{ci.inventory_by_level.map((l) => {
const max = Math.max(...ci.inventory_by_level.map((x) => x.total), 1)
return (
<div key={l.level}>
<div className="flex items-center justify-between text-xs">
<span className="font-semibold">{l.label}</span>
<span className="tabular-nums text-muted">
{l.total.toLocaleString()} · <span className="text-ok">{l.available} avail</span>
</span>
</div>
<Bar value={(l.total / max) * 100} color="var(--color-blue)" />
</div>
)
})}
</div>
<div className="mt-3 flex gap-2">
{ci.inventory_by_poly.map((p) => (
<span key={p.poly} className="rounded-md border border-line/70 bg-navy-800/60 px-2 py-1 text-[11px] text-blue-soft">
{p.label} {p.total}
</span>
))}
</div>
<div className="mt-3 grid grid-cols-4 gap-2 border-t border-line/50 pt-2 text-center">
{[
['Now', ci.availability_windows.now],
['30d', ci.availability_windows.d30],
['60d', ci.availability_windows.d60],
['90d', ci.availability_windows.d90],
].map(([k, v]) => (
<div key={k as string}>
<div className="text-sm font-bold tabular-nums">{(v as number).toLocaleString()}</div>
<div className="text-[10px] uppercase text-faint">{k as string}</div>
</div>
))}
</div>
{(ci.expiring.due_90 > 0 || ci.expiring.expired > 0) && (
<div className="mt-2 flex items-center gap-2 text-xs text-warn">
<AlertTriangle size={13} />
{ci.expiring.expired} expired · {ci.expiring.due_90} expiring ≤90d
</div>
)}
</Panel>
</div>
{/* CENTER: mission readiness + labor category */}
<div className="space-y-4 xl:col-span-4">
<Panel className="grid place-items-center py-5">
<Gauge value={num(mr.score)} color={bandColor(mr.band)} status={mr.status} />
<div className="mt-4 w-full space-y-2">
{mr.drivers.map((dr) => (
<div key={dr.key}>
<div className="flex items-center justify-between text-xs">
<span className="text-ink">{dr.label}</span>
<span className="font-semibold tabular-nums" style={{ color: stateColor(dr.state) }}>
{num(dr.pct).toFixed(0)}%
</span>
</div>
<Bar value={num(dr.pct)} color={stateColor(dr.state)} />
</div>
))}
</div>
</Panel>
<Panel title="Labor Category Coverage™">
<div className="space-y-2">
{d.labor_category_coverage.map((c) => (
<div key={c.labor_category}>
<div className="flex items-center justify-between text-xs">
<span>{c.labor_category}</span>
<span className="tabular-nums text-muted">
{c.filled}/{c.demanded} ·{' '}
<span style={{ color: bandColor(c.color) }}>{num(c.coverage).toFixed(0)}%</span>
</span>
</div>
<Bar value={num(c.coverage)} color={bandColor(c.color)} />
</div>
))}
</div>
</Panel>
</div>
{/* RIGHT: staffing gaps + proposal readiness */}
<div className="space-y-4 xl:col-span-4">
<Panel title="Staffing Gaps™" hint="most valuable panel">
{d.staffing_gaps.length === 0 ? (
<p className="text-sm" style={{ color: 'var(--color-ok)' }}>
Fully staffed against current demand.
</p>
) : (
<div className="space-y-2.5">
{d.staffing_gaps.map((g) => (
<div key={g.labor_category + g.required_level} className="rounded-lg border border-line/50 bg-surface/60 px-3 py-2">
<div className="flex items-center justify-between">
<span className="text-sm font-bold text-warn">{g.headline}</span>
{g.blocks_key_personnel && (
<span className="flex items-center gap-1 text-[11px] text-gold">
<Crown size={12} /> KP
</span>
)}
</div>
<div className="mt-0.5 text-xs text-muted">
{g.value_at_risk ? `${money(g.value_at_risk)} at risk · ` : ''}
{g.impacted_opportunities.slice(0, 2).join(', ')}
</div>
</div>
))}
</div>
)}
</Panel>
<Panel title="Proposal Readiness™">
<div className="grid grid-cols-2 gap-2">
{[
['Ready', d.proposal_readiness.ready, 'var(--color-ok)'],
['At Risk', d.proposal_readiness.at_risk, 'var(--color-warn)'],
['KP Missing', d.proposal_readiness.key_personnel_missing, 'var(--color-risk)'],
['LCAT Missing', d.proposal_readiness.labor_categories_missing, 'var(--color-warn)'],
].map(([k, v, c]) => (
<div key={k as string} className="rounded-lg border border-line/50 bg-surface/60 px-3 py-2 text-center">
<div className="text-2xl font-extrabold tabular-nums" style={{ color: c as string }}>
{v as number}
</div>
<div className="text-[11px] uppercase tracking-wide text-muted">{k as string}</div>
</div>
))}
</div>
</Panel>
</div>
</div>
{/* ROW: win impact + heat map + recommendations */}
<div className="grid grid-cols-1 gap-4 xl:grid-cols-12">
<Panel title="Win Impact™" hint="scarcity proxy" className="xl:col-span-3">
<div className="text-4xl font-extrabold tabular-nums" style={{ color: 'var(--color-gold)' }}>
{d.win_impact.high_impact_count}
</div>
<div className="text-xs text-muted">high-impact candidates</div>
<ul className="mt-2 space-y-1">
{d.win_impact.top.slice(0, 5).map((c) => (
<li key={c.candidate_id} className="flex items-center justify-between text-sm">
<span className="truncate">{c.full_name}</span>
<span className="shrink-0 text-[11px] text-blue-soft">
{c.clearance_level === 'ts_sci' ? 'TS/SCI' : c.clearance_level} · {c.years_experience}y
</span>
</li>
))}
</ul>
</Panel>
<Panel title="Workforce Heat Map™" hint="candidate density by metro" className="xl:col-span-5">
<div className="space-y-1.5">
{d.heat_map.slice(0, 8).map((m) => {
const max = Math.max(...d.heat_map.map((x) => x.total), 1)
return (
<div key={m.metro} className="flex items-center gap-2">
<span className="flex w-40 shrink-0 items-center gap-1 text-xs">
<MapPin size={12} className="text-blue-soft" />
{m.metro}
</span>
<Bar value={(m.total / max) * 100} color="var(--color-blue)" />
<span className="w-12 text-right text-xs tabular-nums text-muted">{m.total}</span>
</div>
)
})}
</div>
</Panel>
<Panel title="AI Recommendations" className="xl:col-span-4">
<ul className="space-y-2">
{d.ai_recommendations.map((r: CCRecommendation, i) => (
<li key={i} className="flex items-start gap-2 rounded-lg border border-line/50 bg-surface/60 px-3 py-2 text-sm">
<AlertTriangle size={15} className="mt-0.5 shrink-0" style={{ color: sevColor[r.severity] }} />
<span>{r.message}</span>
</li>
))}
</ul>
</Panel>
</div>
{/* Executive Action Center */}
<Panel title="Executive Action Center">
<div className="flex flex-wrap items-center gap-2.5">
<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">
<Layers size={15} /> Generate Slate
</button>
<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">
<Target size={15} /> Screen Candidate
</button>
<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">
<TrendingUp size={15} /> Workforce Inventory
</button>
<span className="ml-auto text-xs text-faint">
{d.action_center.open_opportunities_without_slate} opps without a slate ·{' '}
{d.action_center.requirements_unscreened} requirements unscreened
</span>
</div>
</Panel>
</div>
)
}