Janady13/missionmatch / frontend/src/tools/screenmatch/CandidateEvaluation.tsx

1import { type ReactNode } from 'react' 2import { Link, useParams } from 'react-router-dom' 3import { 4 ArrowLeft, 5 CheckCircle2, 6 Clock, 7 Compass, 8 FileDown, 9 Layers, 10 Loader2, 11 MapPin, 12 Share2, 13 ShieldCheck, 14} from 'lucide-react' 15import { useScreenCandidate, useScreenOpportunities, useScreenRequirement, useScreenScreen } from './queries' 16import { Badge, Bar, Panel } from '../../components/ui' 17import { OutcomeBar } from '../../components/OutcomeBar' 18import { ScreeningResults } from '../../components/ScreeningResults' 19import { WorkforceDNA } from '../../components/WorkforceDNA' 20import { bandColor, clearanceLabel, num, statusLabel } from '../../lib/format' 21import type { Band } from '../../lib/types' 22 23function proposal(band: Band) { 24 if (band === 'green') return { label: 'PROPOSAL READY', color: 'var(--color-ok)' } 25 if (band === 'yellow') return { label: 'REVIEW REQUIRED', color: 'var(--color-warn)' } 26 return { label: 'RECRUITING REQUIRED', color: 'var(--color-risk)' } 27} 28 29export function CandidateEvaluation() { 30 const { candidateId = '', requirementId = '' } = useParams() 31 const candidateQuery = useScreenCandidate(candidateId || null) 32 const requirementQuery = useScreenRequirement(requirementId || null) 33 const opps = useScreenOpportunities(candidateId || null) 34 // Scoring this pair is a read, so it is a keyed query rather than a mutation fired from an effect. 35 // The key carries the pair, which is what guarantees a stale score can never render under the new 36 // candidate's identity during a transition: a different pair is a different cache slot. 37 const screen = useScreenScreen(candidateId || null, requirementId || null) 38 39 const candidate = candidateQuery.data 40 const requirement = requirementQuery.data 41 42 return ( 43 <div className="space-y-4"> 44 <Link to="/screen" className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-ink"> 45 <ArrowLeft size={15} /> Back to Screening Queue 46 </Link> 47 48 {screen.isLoading && ( 49 <Panel className="flex items-center justify-center gap-2 py-16 text-muted"> 50 <Loader2 className="animate-spin" size={18} /> Evaluating mission readiness… 51 </Panel> 52 )} 53 {screen.isError && ( 54 <Panel> 55 <p className="text-sm text-risk">{(screen.error as Error).message}</p> 56 </Panel> 57 )} 58 59 {screen.data && candidate && requirement && ( 60 <> 61 {/* SCREEN 2, Candidate Intelligence Profile + Workforce DNA */} 62 <Panel> 63 <div className="grid grid-cols-1 items-center gap-6 lg:grid-cols-2"> 64 <div> 65 <div className="flex items-center gap-4"> 66 <div className="grid size-14 place-items-center rounded-xl bg-screen/20 text-xl font-bold text-screen-soft"> 67 {candidate.full_name 68 .split(' ') 69 .map((p) => p[0]) 70 .slice(0, 2) 71 .join('')} 72 </div> 73 <div> 74 <h2 className="text-xl font-bold">{candidate.full_name}</h2> 75 <div className="text-sm text-muted">{requirement.title}</div> 76 </div> 77 </div> 78 <dl className="mt-4 grid grid-cols-2 gap-x-6 gap-y-2.5 text-sm"> 79 <Fact icon={<ShieldCheck size={14} />} k="Clearance (self reported)" v={`${clearanceLabel[candidate.clearance_level] ?? candidate.clearance_level} · ${statusLabel[candidate.clearance_status] ?? candidate.clearance_status} · not verified`} /> 80 <Fact icon={<Clock size={14} />} k="Experience" v={`${candidate.years_experience} years`} /> 81 {candidate.location && <Fact icon={<MapPin size={14} />} k="Location" v={candidate.location} />} 82 <Fact 83 icon={<CheckCircle2 size={14} />} 84 k="Availability" 85 v={candidate.available ? 'Available Now' : 'Engaged'} 86 /> 87 </dl> 88 </div> 89 <div> 90 <div className="mb-1 text-center text-[11px] font-bold uppercase tracking-[0.14em] text-gold"> 91 Workforce DNA™ 92 </div> 93 <WorkforceDNA categories={screen.data.mission_readiness.categories} /> 94 </div> 95 </div> 96 </Panel> 97 98 {/* The one click screening decision, the closed loop feedback capture */} 99 <OutcomeBar candidateId={candidateId} requirementId={requirementId} /> 100 101 {/* SCREENS 3-5, full screening intelligence (header suppressed) */} 102 <ScreeningResults view={screen.data} candidate={candidate} requirement={requirement} hideHeader /> 103 104 {/* SCREEN 5/6, Best Fit Programs + Proposal Readiness */} 105 <div className="grid grid-cols-1 gap-4 lg:grid-cols-2"> 106 <Panel title="Best Fit Programs" hint="Opportunity Fit Engine™"> 107 {opps.isLoading ? ( 108 <p className="text-sm text-muted">Scoring opportunities…</p> 109 ) : !opps.data?.length ? ( 110 <p className="text-sm text-faint">No matching opportunities.</p> 111 ) : ( 112 <div className="space-y-2.5"> 113 {opps.data.map((o) => ( 114 <div key={o.requirement_id}> 115 <div className="mb-1 flex items-center justify-between text-sm"> 116 <span className="flex items-center gap-1.5"> 117 <Compass size={13} style={{ color: 'var(--color-blue-soft)' }} /> 118 {o.title} 119 </span> 120 <span className="font-semibold tabular-nums" style={{ color: bandColor(o.band) }}> 121 {num(o.score).toFixed(0)}% 122 </span> 123 </div> 124 <Bar value={num(o.score)} color={bandColor(o.band)} /> 125 </div> 126 ))} 127 </div> 128 )} 129 </Panel> 130 131 <Panel title="Proposal Readiness"> 132 {(() => { 133 const pr = proposal(screen.data.mission_readiness.band) 134 const roles = (opps.data ?? []).filter((o) => o.band === 'green') 135 return ( 136 <div> 137 <div className="flex items-center gap-3"> 138 <CheckCircle2 size={30} style={{ color: pr.color }} /> 139 <div> 140 <div className="text-xl font-extrabold" style={{ color: pr.color }}> 141 {pr.label} 142 </div> 143 <div className="text-xs text-muted"> 144 Proposal strength {num(screen.data.mission_readiness.score).toFixed(0)}% 145 </div> 146 </div> 147 </div> 148 149 <div className="mt-3"> 150 <div className="mb-1.5 text-[11px] font-bold uppercase tracking-wider text-muted"> 151 Can Fill These Roles 152 </div> 153 <div className="flex flex-wrap gap-1.5"> 154 <Badge color={pr.color} subtle> 155 {requirement.title} 156 </Badge> 157 {roles 158 .filter((r) => r.requirement_id !== requirement.id) 159 .map((r) => ( 160 <Badge key={r.requirement_id} color="var(--color-ok)" subtle> 161 {r.title} 162 </Badge> 163 ))} 164 </div> 165 </div> 166 167 <div className="mt-4 flex flex-wrap gap-2"> 168 <button className="flex items-center gap-1.5 rounded-lg bg-gradient-to-r from-blue to-navy-700 px-3.5 py-2 text-sm font-semibold text-white hover:brightness-110"> 169 <Layers size={14} /> Add to Candidate Slate 170 </button> 171 <button className="flex items-center gap-1.5 rounded-lg border border-line/70 px-3.5 py-2 text-sm font-semibold text-muted hover:text-ink"> 172 <Share2 size={14} /> Share 173 </button> 174 <button className="flex items-center gap-1.5 rounded-lg border border-line/70 px-3.5 py-2 text-sm font-semibold text-muted hover:text-ink"> 175 <FileDown size={14} /> Export 176 </button> 177 </div> 178 </div> 179 ) 180 })()} 181 </Panel> 182 </div> 183 </> 184 )} 185 </div> 186 ) 187} 188 189function Fact({ icon, k, v }: { icon: ReactNode; k: string; v: string }) { 190 return ( 191 <div> 192 <dt className="flex items-center gap-1.5 text-[11px] uppercase tracking-wider text-faint"> 193 {icon} {k} 194 </dt> 195 <dd className="mt-0.5 font-semibold">{v}</dd> 196 </div> 197 ) 198} 199