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

1import { useEffect, useState } from 'react' 2import { CheckCircle2, Compass, FileUp, Loader2, ScanSearch, UploadCloud } from 'lucide-react' 3import { Badge, Bar, Modal, Panel } from './ui' 4import { ScreeningResults } from './ScreeningResults' 5import { useMissionCheckJD, useMissionCheckOpportunities, useSaveCandidate } from '../lib/queries' 6import { bandColor, missionRecColor, num } from '../lib/format' 7import type { 8 CandidateListView, 9 ParsedCandidate, 10 ParsedRequirement, 11 RequirementListView, 12 SaveCandidateRequest, 13} from '../lib/types' 14 15type Mode = 'opportunities' | 'jd' 16 17// MissionCheckModal is the W1 surface. It parses a resume to text in the browser (nothing is uploaded), 18// then scores it server side: Mode A against every open opportunity, Mode B against a pasted job 19// description. The result is advisory and a human decides; the optional Save Candidate persists a 20// reviewed, audited record. 21export function MissionCheckModal({ open, onClose }: { open: boolean; onClose: () => void }) { 22 const [mode, setMode] = useState<Mode>('opportunities') 23 const [resumeText, setResumeText] = useState('') 24 const [jdText, setJdText] = useState('') 25 const [fileNote, setFileNote] = useState('') 26 const [parseError, setParseError] = useState('') 27 const [parsing, setParsing] = useState(false) 28 29 const modeA = useMissionCheckOpportunities() 30 const modeB = useMissionCheckJD() 31 32 function close() { 33 modeA.reset() 34 modeB.reset() 35 setResumeText('') 36 setJdText('') 37 setFileNote('') 38 setParseError('') 39 onClose() 40 } 41 42 async function onFile(file: File | undefined) { 43 if (!file) return 44 setParseError('') 45 setFileNote('') 46 setParsing(true) 47 try { 48 // Lazy load the PDF and DOCX parsers (about 1 MB) only when a file is actually parsed, so they 49 // never weigh down the initial page load. 50 const { extractResumeText } = await import('../lib/resume') 51 const r = await extractResumeText(file) 52 if (r.lowConfidence || r.text.trim() === '') { 53 setParseError('That file had little or no selectable text. It may be a scan, so paste the resume text instead.') 54 } else { 55 setResumeText(r.text) 56 setFileNote(`Parsed ${file.name} in memory as ${r.source.toUpperCase()}. The file was not uploaded or stored.`) 57 } 58 } catch (e) { 59 setParseError(e instanceof Error && e.message ? e.message : 'Could not read that file. Paste the text instead.') 60 } finally { 61 setParsing(false) 62 } 63 } 64 65 function run() { 66 setParseError('') 67 if (mode === 'opportunities') modeA.mutate({ text: resumeText }) 68 else modeB.mutate({ resume: resumeText, jd: jdText }) 69 } 70 71 const pending = modeA.isPending || modeB.isPending 72 const runError = (mode === 'opportunities' ? modeA.error : modeB.error) as Error | null 73 const canRun = 74 resumeText.trim() !== '' && (mode === 'jd' ? jdText.trim() !== '' : true) && !pending && !parsing 75 76 return ( 77 <Modal open={open} onClose={close} title="Mission Check"> 78 <div className="space-y-4"> 79 <div className="flex flex-wrap items-center justify-between gap-2"> 80 <p className="text-sm text-muted"> 81 Score a resume against the mission. Parsed in your browser, nothing is uploaded or stored. 82 </p> 83 <Badge color="var(--color-gold)" subtle> 84 Parsed in memory, not stored 85 </Badge> 86 </div> 87 88 {/* mode tabs */} 89 <div className="flex gap-1 rounded-lg border border-line/70 bg-navy-900 p-1"> 90 <Tab active={mode === 'opportunities'} onClick={() => setMode('opportunities')} label="Match all opportunities" /> 91 <Tab active={mode === 'jd'} onClick={() => setMode('jd')} label="Match a job description" /> 92 </div> 93 94 {/* resume input */} 95 <DropZone parsing={parsing} fileNote={fileNote} onFile={onFile} /> 96 <div> 97 <label className="mb-1 block text-[11px] font-semibold uppercase tracking-wider text-muted"> 98 Or paste the resume text 99 </label> 100 <textarea 101 value={resumeText} 102 onChange={(e) => setResumeText(e.target.value)} 103 rows={4} 104 placeholder="Paste the resume text here" 105 className="w-full rounded-lg border border-line/70 bg-navy-950/60 px-3 py-2 text-sm text-ink outline-none focus:border-blue/60" 106 /> 107 </div> 108 109 {mode === 'jd' && ( 110 <div> 111 <label className="mb-1 block text-[11px] font-semibold uppercase tracking-wider text-muted"> 112 Job description 113 </label> 114 <textarea 115 value={jdText} 116 onChange={(e) => setJdText(e.target.value)} 117 rows={4} 118 placeholder="Paste the job description to score against" 119 className="w-full rounded-lg border border-line/70 bg-navy-950/60 px-3 py-2 text-sm text-ink outline-none focus:border-blue/60" 120 /> 121 </div> 122 )} 123 124 {parseError && <p className="text-sm text-warn">{parseError}</p>} 125 126 <div className="flex items-center gap-3"> 127 <button 128 onClick={run} 129 disabled={!canRun} 130 className="flex items-center gap-2 rounded-lg bg-gradient-to-r from-blue to-navy-700 px-4 py-2 text-sm font-bold text-white hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50" 131 > 132 {pending ? <Loader2 className="animate-spin" size={15} /> : <ScanSearch size={15} />} 133 Run Mission Check 134 </button> 135 <span className="text-[11px] text-faint"> 136 Advisory only, a human makes the final decision. No demographic data is used. 137 </span> 138 </div> 139 140 {runError && <p className="text-sm text-risk">{runError.message}</p>} 141 142 {/* results */} 143 {mode === 'opportunities' && modeA.data && <ModeAResult data={modeA.data} />} 144 {mode === 'jd' && modeB.data && <ModeBResult data={modeB.data} />} 145 </div> 146 </Modal> 147 ) 148} 149 150function Tab({ active, onClick, label }: { active: boolean; onClick: () => void; label: string }) { 151 return ( 152 <button 153 onClick={onClick} 154 className={`flex-1 rounded-md px-3 py-1.5 text-xs font-semibold transition ${ 155 active ? 'bg-blue/25 text-blue-soft' : 'text-faint hover:text-muted' 156 }`} 157 > 158 {label} 159 </button> 160 ) 161} 162 163function DropZone({ 164 parsing, 165 fileNote, 166 onFile, 167}: { 168 parsing: boolean 169 fileNote: string 170 onFile: (f: File | undefined) => void 171}) { 172 const [over, setOver] = useState(false) 173 return ( 174 <div 175 onDragOver={(e) => { 176 e.preventDefault() 177 setOver(true) 178 }} 179 onDragLeave={() => setOver(false)} 180 onDrop={(e) => { 181 e.preventDefault() 182 setOver(false) 183 onFile(e.dataTransfer.files?.[0]) 184 }} 185 className={`rounded-lg border border-dashed px-4 py-5 text-center transition ${ 186 over ? 'border-blue/70 bg-blue/10' : 'border-line/70 bg-navy-950/40' 187 }`} 188 > 189 <div className="flex flex-col items-center gap-1.5"> 190 {parsing ? ( 191 <Loader2 className="animate-spin text-blue-soft" size={20} /> 192 ) : ( 193 <UploadCloud className="text-muted" size={20} /> 194 )} 195 <div className="text-sm text-muted">Drag a PDF or DOCX resume here</div> 196 <label className="mt-1 inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-line/70 px-3 py-1.5 text-xs font-semibold text-muted hover:border-blue/60 hover:text-blue-soft"> 197 <FileUp size={13} /> Browse 198 <input 199 type="file" 200 accept=".pdf,.docx" 201 className="hidden" 202 onChange={(e) => onFile(e.target.files?.[0])} 203 /> 204 </label> 205 </div> 206 {fileNote && <p className="mt-2 text-[11px] text-ok">{fileNote}</p>} 207 </div> 208 ) 209} 210 211function RecommendationBanner({ value, reason }: { value: string; reason: string }) { 212 const color = missionRecColor(value) 213 return ( 214 <div className="flex items-center gap-3 rounded-lg border px-4 py-3" style={{ borderColor: color }}> 215 <CheckCircle2 size={26} style={{ color }} /> 216 <div> 217 <div className="text-lg font-extrabold" style={{ color }}> 218 {value} 219 </div> 220 <div className="text-xs text-muted">{reason}</div> 221 </div> 222 </div> 223 ) 224} 225 226function ModeAResult({ data }: { data: import('../lib/types').MissionCheckModeAResult }) { 227 return ( 228 <div className="space-y-3"> 229 <Panel title="Top opportunity matches" hint="ranked by Mission Readiness"> 230 {data.rows.length === 0 ? ( 231 <p className="text-sm text-faint">No open opportunities to match against yet.</p> 232 ) : ( 233 <div className="space-y-2.5"> 234 {data.rows.map((o) => ( 235 <div key={o.requirement_id}> 236 <div className="mb-1 flex items-center justify-between text-sm"> 237 <span className="flex items-center gap-1.5"> 238 <Compass size={13} style={{ color: 'var(--color-blue-soft)' }} /> 239 {o.title} 240 </span> 241 <span className="flex items-center gap-2"> 242 <Badge color={missionRecColor(o.recommendation)} subtle> 243 {o.recommendation} 244 </Badge> 245 <span className="font-semibold tabular-nums" style={{ color: bandColor(o.band) }}> 246 {num(o.score).toFixed(0)}% 247 </span> 248 </span> 249 </div> 250 <Bar value={num(o.score)} color={bandColor(o.band)} /> 251 </div> 252 ))} 253 </div> 254 )} 255 </Panel> 256 <SaveSection candidate={data.candidate} /> 257 <Disclosure assumptions={data.assumptions} categories={data.data_categories} /> 258 </div> 259 ) 260} 261 262function ModeBResult({ data }: { data: import('../lib/types').MissionCheckModeBResult }) { 263 return ( 264 <div className="space-y-3"> 265 <RecommendationBanner value={data.recommendation} reason={data.recommendation_reason} /> 266 <ScreeningResults 267 view={data.view} 268 candidate={candidateStub(data.candidate)} 269 requirement={reqStub(data.requirement)} 270 hideHeader 271 /> 272 <SaveSection candidate={data.candidate} /> 273 <Disclosure assumptions={data.assumptions} categories={data.data_categories} /> 274 </div> 275 ) 276} 277 278// SaveSection persists the reviewed parse as an audited candidate (recruiter capability). The name is 279// editable because resume name detection is best effort; saving needs a name. 280function SaveSection({ candidate }: { candidate: ParsedCandidate }) { 281 const save = useSaveCandidate() 282 const [name, setName] = useState(candidate.full_name) 283 // A new Mission Check run yields a new candidate object, so reset the name and clear any prior save 284 // success, otherwise the success state would carry over and wrongly mark the new result as saved. 285 useEffect(() => { 286 setName(candidate.full_name) 287 save.reset() 288 // eslint-disable-next-line react-hooks/exhaustive-deps 289 }, [candidate]) 290 291 if (save.isSuccess) { 292 return ( 293 <Panel className="flex items-center gap-2 text-sm text-ok"> 294 <CheckCircle2 size={16} /> Candidate saved. It is now in your workforce, clearance self reported. 295 </Panel> 296 ) 297 } 298 299 function doSave() { 300 const body: SaveCandidateRequest = { 301 full_name: name.trim(), 302 clearance_level: candidate.clearance_level, 303 clearance_poly: candidate.clearance_poly, 304 clearance_status: candidate.clearance_status, 305 years_experience: candidate.years_experience, 306 location: candidate.location, 307 remote: false, 308 relocatable: false, 309 available: true, 310 skills: candidate.skills, 311 certifications: candidate.certifications, 312 customer_experience: candidate.customer_experience, 313 } 314 save.mutate(body) 315 } 316 317 return ( 318 <Panel title="Save as candidate" hint="recruiter capability, audited"> 319 <div className="space-y-2"> 320 <div className="flex flex-wrap gap-1.5 text-[11px]"> 321 {candidate.skills.slice(0, 8).map((s) => ( 322 <span key={s} className="rounded-full bg-blue/15 px-2 py-0.5 text-blue-soft"> 323 {s} 324 </span> 325 ))} 326 {candidate.years_experience > 0 && ( 327 <span className="rounded-full bg-navy-800 px-2 py-0.5 text-muted"> 328 {candidate.years_experience} yrs 329 </span> 330 )} 331 </div> 332 <div className="flex items-center gap-2"> 333 <input 334 value={name} 335 onChange={(e) => setName(e.target.value)} 336 placeholder="Candidate name" 337 className="flex-1 rounded-md border border-line/70 bg-navy-950/60 px-3 py-1.5 text-sm text-ink outline-none focus:border-blue/60" 338 /> 339 <button 340 onClick={doSave} 341 disabled={name.trim() === '' || save.isPending} 342 title={name.trim() === '' ? 'A candidate name is required to save' : 'Save this candidate'} 343 className="flex items-center gap-1.5 rounded-md bg-blue/20 px-3 py-1.5 text-sm font-semibold text-blue-soft hover:bg-blue/30 disabled:cursor-not-allowed disabled:opacity-50" 344 > 345 {save.isPending ? <Loader2 className="animate-spin" size={14} /> : <CheckCircle2 size={14} />} 346 Save Candidate 347 </button> 348 </div> 349 <p className="text-[11px] text-faint"> 350 Clearance is a self reported, detected indicator, not verified. The real check is the customer FSO through DISS. 351 </p> 352 {save.isError && <p className="text-[11px] text-risk">{(save.error as Error).message}</p>} 353 </div> 354 </Panel> 355 ) 356} 357 358function Disclosure({ assumptions, categories }: { assumptions: string[]; categories: string[] }) { 359 return ( 360 <p className="text-[11px] leading-relaxed text-faint"> 361 This is an automated employment decision aid: it is advisory, a human decides, it takes no demographic input, and 362 each run is logged. Assumptions: {assumptions.join('; ')}. Data assessed: {categories.join(', ')}. 363 </p> 364 ) 365} 366 367function candidateStub(p: ParsedCandidate): CandidateListView { 368 return { 369 id: 'mission_check', 370 full_name: p.full_name || 'Uploaded resume', 371 clearance_level: p.clearance_level, 372 clearance_status: p.clearance_status, 373 years_experience: p.years_experience, 374 location: p.location || undefined, 375 available: true, 376 } 377} 378 379function reqStub(p: ParsedRequirement): RequirementListView { 380 return { 381 id: 'pasted_jd', 382 title: p.title, 383 required_level: p.required_level, 384 customer_agency: p.customer_agency || undefined, 385 key_personnel: p.key_personnel, 386 } 387} 388