Janady13/missionmatch / frontend/src/components/ScreeningResults.tsx

1import type { ReactNode } from 'react' 2import { 3 AlertTriangle, 4 Award, 5 BadgeCheck, 6 Briefcase, 7 CalendarClock, 8 CheckCircle2, 9 Clock, 10 Crown, 11 FileText, 12 MapPin, 13 ShieldCheck, 14 Target, 15 TrendingUp, 16} from 'lucide-react' 17import type { CandidateListView, RequirementListView, ScreenView } from '../lib/types' 18import { bandColor, clearanceLabel, num, stateColor } from '../lib/format' 19import { Badge, CheckRow, Panel, ScoreRow } from './ui' 20import { Gauge } from './Gauge' 21 22function winColor(code: string): string { 23 return code === 'high' 24 ? 'var(--color-ok)' 25 : code === 'medium' 26 ? 'var(--color-warn)' 27 : 'var(--color-risk)' 28} 29 30export function ScreeningResults({ 31 view, 32 candidate, 33 requirement, 34 hideHeader = false, 35}: { 36 view: ScreenView 37 candidate: CandidateListView 38 requirement: RequirementListView 39 hideHeader?: boolean 40}) { 41 const mr = view.mission_readiness 42 const ci = view.clearance_intelligence 43 const wi = view.win_impact 44 const matched = view.match.matched_skills.filter((m) => m.matched) 45 46 return ( 47 <div className="space-y-4"> 48 {/* SECTION A, Candidate Summary */} 49 {!hideHeader && ( 50 <Panel className="flex flex-wrap items-center justify-between gap-4 p-4"> 51 <div className="flex items-center gap-4"> 52 <div className="grid size-14 place-items-center rounded-xl bg-blue/25 text-xl font-bold text-blue-soft"> 53 {candidate.full_name 54 .split(' ') 55 .map((p) => p[0]) 56 .slice(0, 2) 57 .join('')} 58 </div> 59 <div> 60 <div className="flex items-center gap-2"> 61 <h2 className="text-xl font-bold">{candidate.full_name}</h2> 62 <span style={{ color: 'var(--color-gold)' }}> 63 <BadgeCheck size={18} /> 64 </span> 65 </div> 66 <div className="mt-0.5 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted"> 67 <span className="flex items-center gap-1.5"> 68 <Briefcase size={14} /> {requirement.title} 69 </span> 70 <span className="flex items-center gap-1.5"> 71 <Clock size={14} /> {candidate.years_experience} yrs 72 </span> 73 {candidate.location && ( 74 <span className="flex items-center gap-1.5"> 75 <MapPin size={14} /> {candidate.location} 76 </span> 77 )} 78 <span className="flex items-center gap-1.5"> 79 <ShieldCheck size={14} /> {clearanceLabel[candidate.clearance_level] ?? candidate.clearance_level} 80 </span> 81 </div> 82 </div> 83 </div> 84 <div className="flex items-center gap-2"> 85 <Badge color={candidate.available ? 'var(--color-ok)' : 'var(--color-warn)'} subtle> 86 {candidate.available ? 'Available Now' : 'Not Available'} 87 </Badge> 88 <button 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"> 89 <FileText size={14} /> Export Report 90 </button> 91 </div> 92 </Panel> 93 )} 94 95 <div className="grid grid-cols-1 gap-4 lg:grid-cols-12"> 96 {/* SECTION B, Mission Readiness gauge */} 97 <Panel className="lg:col-span-4 grid place-items-center py-6"> 98 <Gauge value={num(mr.score)} color={bandColor(mr.band)} status={mr.status} /> 99 <p className="mt-3 max-w-[18rem] text-center text-sm text-muted">{view.match.explanation}</p> 100 </Panel> 101 102 {/* SECTION C + D, Requirement summary + qualification breakdown */} 103 <div className="lg:col-span-5 space-y-4"> 104 <Panel title="Requirement"> 105 <div className="flex items-center justify-between"> 106 <div> 107 <div className="text-base font-bold">{requirement.title}</div> 108 <div className="text-sm text-muted"> 109 {requirement.customer_agency ?? 'No specific customer'} ·{' '} 110 {clearanceLabel[requirement.required_level] ?? requirement.required_level} required 111 </div> 112 </div> 113 {requirement.key_personnel && ( 114 <Badge color="var(--color-gold)" subtle> 115 <Crown size={12} /> Key Personnel 116 </Badge> 117 )} 118 </div> 119 </Panel> 120 <Panel title="Qualification Breakdown" hint="why the score was generated"> 121 <div className="space-y-3"> 122 {mr.categories.map((cat) => ( 123 <ScoreRow 124 key={cat.name} 125 name={cat.name} 126 weight={cat.weight} 127 score={cat.score} 128 color={stateColor(cat.state)} 129 /> 130 ))} 131 </div> 132 </Panel> 133 </div> 134 135 {/* SECTION H (Win) + Clearance Intelligence */} 136 <div className="lg:col-span-3 space-y-4"> 137 <Panel title="Win Impact™"> 138 <div className="text-2xl font-extrabold" style={{ color: winColor(wi.level_code) }}> 139 {wi.level} 140 </div> 141 <div className="mt-0.5 text-xs text-faint"> 142 Staffing strength {num(wi.staffing_strength).toFixed(0)}% 143 </div> 144 <ul className="mt-2.5 space-y-1.5"> 145 {(wi.reasons ?? []).map((r) => ( 146 <li key={r} className="flex items-start gap-1.5 text-sm text-ink"> 147 <CheckCircle2 size={15} style={{ color: 'var(--color-ok)' }} className="mt-0.5 shrink-0" /> 148 {r} 149 </li> 150 ))} 151 </ul> 152 </Panel> 153 <Panel title="Clearance Intelligence"> 154 <div className="flex items-center justify-between"> 155 <span className="text-lg font-bold">{ci.current}</span> 156 <Badge color={ci.expired ? 'var(--color-risk)' : 'var(--color-ok)'} subtle> 157 {ci.expired ? 'Expired' : ci.status} 158 </Badge> 159 </div> 160 <div className={`mt-1 text-[11px] ${ci.verified ? 'font-semibold text-ok' : 'text-faint'}`}> 161 {ci.verified ? '✓ ' : ''} 162 {ci.provenance_label} 163 {ci.verified_at ? ` ${ci.verified_at}` : ''} 164 </div> 165 <div className="mt-2.5 flex flex-wrap gap-1.5"> 166 {ci.sci_eligible && <Tag>SCI Eligible</Tag>} 167 {ci.ci_poly_eligible && <Tag>CI Poly Eligible</Tag>} 168 {ci.full_scope_poly && <Tag>Full Scope Poly</Tag>} 169 {ci.recent_classified_support && <Tag>Recent Classified Support</Tag>} 170 </div> 171 <dl className="mt-3 space-y-1.5 text-sm"> 172 {typeof ci.investigation_age_months === 'number' && ( 173 <Row icon={<CalendarClock size={14} />} k="Investigation age" v={`${ci.investigation_age_months} mo`} /> 174 )} 175 {ci.expires_at && <Row icon={<Clock size={14} />} k="Expires" v={ci.expires_at} />} 176 </dl> 177 </Panel> 178 </div> 179 </div> 180 181 <div className="grid grid-cols-1 gap-4 lg:grid-cols-2"> 182 {/* SECTION E, Top Matching Skills */} 183 <Panel title="Top Matching Skills"> 184 {matched.length === 0 ? ( 185 <p className="text-sm text-faint">No specific skills required for this requirement.</p> 186 ) : ( 187 <div className="space-y-2.5"> 188 {matched.map((m) => ( 189 <div key={m.required_skill} className="flex items-center justify-between"> 190 <span className="flex items-center gap-2 text-sm"> 191 <Target size={14} style={{ color: 'var(--color-blue-soft)' }} /> 192 {m.required_skill} 193 </span> 194 <Badge color={m.exact ? 'var(--color-ok)' : 'var(--color-blue)'} subtle> 195 {m.exact ? 'Exact' : `Semantic ${(num(m.similarity) * 100).toFixed(0)}%`} 196 </Badge> 197 </div> 198 ))} 199 </div> 200 )} 201 </Panel> 202 203 {/* SECTION F, Gaps to Review */} 204 <Panel title="Gaps to Review"> 205 {view.battle_card.gaps.length === 0 ? ( 206 <p className="flex items-center gap-2 text-sm" style={{ color: 'var(--color-ok)' }}> 207 <CheckCircle2 size={16} /> No mandatory gaps identified. 208 </p> 209 ) : ( 210 <ul className="space-y-1.5"> 211 {view.battle_card.gaps.map((g) => ( 212 <li key={g} className="flex items-start gap-2 text-sm text-warn"> 213 <AlertTriangle size={15} className="mt-0.5 shrink-0" /> 214 {g} 215 </li> 216 ))} 217 </ul> 218 )} 219 </Panel> 220 221 {/* SECTION H, Battle Card */} 222 <Panel title="Candidate Battle Card™"> 223 <div className="grid grid-cols-2 gap-4"> 224 <div> 225 <div className="mb-1.5 text-[11px] font-bold uppercase tracking-wider text-muted">Strengths</div> 226 <ul className="space-y-1"> 227 {view.battle_card.strengths.length === 0 && <li className="text-sm text-faint">n/a</li>} 228 {view.battle_card.strengths.map((s) => ( 229 <li key={s} className="flex items-start gap-1.5 text-sm"> 230 <CheckCircle2 size={14} style={{ color: 'var(--color-ok)' }} className="mt-0.5 shrink-0" /> 231 {s} 232 </li> 233 ))} 234 </ul> 235 </div> 236 <div> 237 <div className="mb-1.5 text-[11px] font-bold uppercase tracking-wider text-muted">Risks</div> 238 <ul className="space-y-1"> 239 {view.battle_card.gaps.length === 0 && <li className="text-sm text-faint">None</li>} 240 {view.battle_card.gaps.map((g) => ( 241 <li key={g} className="flex items-start gap-1.5 text-sm"> 242 <AlertTriangle size={14} style={{ color: 'var(--color-warn)' }} className="mt-0.5 shrink-0" /> 243 {g} 244 </li> 245 ))} 246 </ul> 247 </div> 248 </div> 249 </Panel> 250 251 {/* Contract Readiness */} 252 <Panel title="Contract Readiness"> 253 <div className="space-y-1.5"> 254 {view.contract_readiness.areas.map((a) => ( 255 <CheckRow key={a.area} ok={a.met} label={a.area} /> 256 ))} 257 </div> 258 {view.contract_readiness.risks.length > 0 && ( 259 <div className="mt-3 border-t border-line/60 pt-2.5"> 260 <div className="mb-1.5 text-[11px] font-bold uppercase tracking-wider text-muted">Risk Areas</div> 261 <ul className="space-y-1"> 262 {view.contract_readiness.risks.map((r) => ( 263 <li key={r.message} className="flex items-start gap-1.5 text-sm text-warn"> 264 <AlertTriangle size={14} className="mt-0.5 shrink-0" /> 265 {r.message} 266 </li> 267 ))} 268 </ul> 269 </div> 270 )} 271 </Panel> 272 </div> 273 274 {/* SECTION I, Recommended Next Actions */} 275 <Panel title="Recommended Next Actions"> 276 <div className="flex flex-wrap gap-2.5"> 277 {view.next_steps.map((step, i) => ( 278 <button 279 key={step.action} 280 className={`group flex items-center gap-2 rounded-lg px-4 py-2.5 text-sm font-semibold transition-colors ${ 281 i === 0 282 ? 'bg-gradient-to-r from-blue to-navy-700 text-white hover:brightness-110' 283 : 'border border-line/70 text-muted hover:text-ink' 284 }`} 285 title={step.reason} 286 > 287 {i === 0 ? <TrendingUp size={15} /> : <Award size={15} />} 288 {step.action} 289 </button> 290 ))} 291 </div> 292 </Panel> 293 </div> 294 ) 295} 296 297function Tag({ children }: { children: ReactNode }) { 298 return ( 299 <span className="rounded-md border border-line/70 bg-navy-800/60 px-2 py-0.5 text-[11px] font-medium text-blue-soft"> 300 {children} 301 </span> 302 ) 303} 304 305function Row({ icon, k, v }: { icon: ReactNode; k: string; v: string }) { 306 return ( 307 <div className="flex items-center justify-between"> 308 <span className="flex items-center gap-1.5 text-muted"> 309 {icon} {k} 310 </span> 311 <span className="font-semibold tabular-nums">{v}</span> 312 </div> 313 ) 314} 315