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

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