Janady13/missionmatch / frontend/src/tools/missionmatch/Candidates.tsx

1import { type ReactNode, useEffect, useState } from 'react' 2import { useNavigate } from 'react-router-dom' 3import { ChevronRight, LayoutGrid, Rows3, ScanSearch, ShieldQuestion, Target, Trash2, TrendingUp, Trophy } from 'lucide-react' 4import { useDeleteExternalCandidate } from '../../lib/queries' 5import { useMissionIntelligence } from './queries' 6import { missionBrand } from './brand' 7import type { CandidateIntelligence, IntelClearance } from '../../lib/types' 8import { Badge, Panel } from '../../components/ui' 9import { MissionCheckModal } from '../../components/MissionCheckModal' 10import { ToolHeader } from '../../components/ToolHeader' 11import { bandColor, num, proposalColor, winImpactColor } from '../../lib/format' 12 13type View = 'intelligence' | 'list' 14const VIEW_KEY = 'screenmatch.candidatesView' 15 16export function Candidates() { 17 const { data, isLoading, isError, error, refetch } = useMissionIntelligence() 18 const [view, setView] = useState<View>(() => (localStorage.getItem(VIEW_KEY) as View) || 'intelligence') 19 const [missionCheck, setMissionCheck] = useState(false) 20 useEffect(() => { 21 localStorage.setItem(VIEW_KEY, view) 22 }, [view]) 23 24 const rows = data ?? [] 25 const greens = rows.filter((c) => c.mission_readiness.band === 'green').length 26 const highImpact = rows.filter((c) => c.win_impact.level === 'HIGH').length 27 28 return ( 29 <div className="space-y-4"> 30 <ToolHeader name={missionBrand.name} tagline="Candidates Intelligence View" accent={missionBrand.accent} /> 31 <Panel className="flex flex-wrap items-center justify-between gap-3 p-4"> 32 <div> 33 <div className="flex items-center gap-2"> 34 <span className="text-sm font-bold">Cleared Workforce Intelligence</span> 35 <Badge color="var(--color-gold)" subtle>Demo data</Badge> 36 </div> 37 <div className="mt-0.5 text-xs text-faint"> 38 {isLoading 39 ? 'Scoring the workforce against open requirements…' 40 : `${rows.length} synthetic candidates, ${greens} proposal ready, ${highImpact} fill an open gap. Shaped for Galapagos cleared IT and cyber.`} 41 </div> 42 </div> 43 <div className="flex items-center gap-2"> 44 <button 45 onClick={() => setMissionCheck(true)} 46 className="flex items-center gap-1.5 rounded-lg border border-gold/50 px-3 py-1.5 text-xs font-semibold text-gold hover:bg-gold/10" 47 > 48 <ScanSearch size={14} /> Mission Check 49 </button> 50 <div className="flex items-center gap-1 rounded-lg border border-line/70 bg-navy-900 p-1"> 51 <ToggleButton active={view === 'intelligence'} onClick={() => setView('intelligence')} icon={<LayoutGrid size={14} />} label="Intelligence View" /> 52 <ToggleButton active={view === 'list'} onClick={() => setView('list')} icon={<Rows3 size={14} />} label="List View" /> 53 </div> 54 </div> 55 </Panel> 56 57 <MissionCheckModal open={missionCheck} onClose={() => setMissionCheck(false)} /> 58 59 {isLoading ? ( 60 <Panel className="py-10 text-center text-muted">Computing Mission Readiness, Win Impact, and Best Fit…</Panel> 61 ) : isError ? ( 62 // A FAILED load is not an empty bench. This previously fell through to "No candidates yet", which 63 // tells a recruiter their entire pool is gone when the API is simply down. 64 <Panel className="grid place-items-center gap-3 py-10 text-center"> 65 <p className="text-sm font-semibold text-warn">Could not load candidates.</p> 66 <p className="max-w-md text-xs text-faint">{(error as Error)?.message}</p> 67 <button 68 onClick={() => void refetch()} 69 className="rounded-lg border border-line/70 px-3 py-1.5 text-xs font-semibold text-muted hover:text-ink" 70 > 71 Try again 72 </button> 73 </Panel> 74 ) : rows.length === 0 ? ( 75 <Panel className="py-10 text-center text-muted">No candidates yet.</Panel> 76 ) : view === 'intelligence' ? ( 77 <IntelligenceView rows={rows} /> 78 ) : ( 79 <ListView rows={rows} /> 80 )} 81 82 <p className="px-1 text-[11px] leading-relaxed text-faint"> 83 Mission Readiness, Proposal Ready, Win Impact, and Best Fit are computed live from the shared scoring engine and the 84 Command Center coverage, so a candidate shows the same Mission Readiness here, on the dashboard, in Top Matches, and in 85 the evaluation view. Every candidate shown is synthetic Demo data, a generated profile for demonstration, not a real 86 person. The sourced External leads additionally carry an Unknown clearance. Clearance is a self reported clearance 87 intelligence indicator, never verified. The real check is the hiring client FSO through DISS at onboarding. When 88 Galapagos loads their own bench the staffing picture becomes real. 89 </p> 90 </div> 91 ) 92} 93 94function ToggleButton({ active, onClick, icon, label }: { active: boolean; onClick: () => void; icon: ReactNode; label: string }) { 95 return ( 96 <button 97 onClick={onClick} 98 className={`flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-semibold transition ${ 99 active ? 'bg-blue/25 text-blue-soft' : 'text-faint hover:text-muted' 100 }`} 101 > 102 {icon} 103 {label} 104 </button> 105 ) 106} 107 108// ---------------- List View ---------------- 109 110function ListView({ rows }: { rows: CandidateIntelligence[] }) { 111 const nav = useNavigate() 112 const del = useDeleteExternalCandidate() 113 return ( 114 <Panel title="Candidates" hint={`${rows.length} ranked by Mission Readiness`}> 115 <div className="overflow-x-auto"> 116 <table className="w-full min-w-[60rem] text-sm"> 117 <thead> 118 <tr className="text-left text-[11px] uppercase tracking-wider text-faint"> 119 <th className="pb-2 font-semibold">Candidate</th> 120 <th className="pb-2 font-semibold">Clearance Intelligence</th> 121 <th className="pb-2 font-semibold">Mission Ready</th> 122 <th className="pb-2 font-semibold">Proposal Ready</th> 123 <th className="pb-2 font-semibold">Win Impact</th> 124 <th className="pb-2 font-semibold">Best Fit</th> 125 <th className="pb-2" /> 126 </tr> 127 </thead> 128 <tbody className="divide-y divide-line/50"> 129 {rows.map((c) => ( 130 <tr key={c.id} className="align-top hover:bg-navy-800/40"> 131 <td className="py-3 pr-3"> 132 <div className="font-semibold">{c.full_name}</div> 133 <div className="mt-0.5 flex items-center gap-1.5 text-[11px] text-faint"> 134 {c.years_experience} yrs{c.location ? ` · ${c.location}` : ''} 135 {c.source === 'external' && ( 136 <Badge color="var(--color-warn)" subtle> 137 External · Demo 138 </Badge> 139 )} 140 </div> 141 </td> 142 <td className="py-3 pr-3"> 143 <ClearanceCell c={c.clearance} /> 144 </td> 145 <td className="py-3 pr-3"> 146 <span className="text-base font-bold tabular-nums" style={{ color: bandColor(c.mission_readiness.band) }}> 147 {num(c.mission_readiness.score).toFixed(0)}% 148 </span> 149 <div className="text-[11px] text-faint">{c.mission_readiness.status}</div> 150 </td> 151 <td className="py-3 pr-3"> 152 <span title={c.proposal_ready.reason}> 153 <Badge color={proposalColor(c.proposal_ready.value)} subtle> 154 {c.proposal_ready.value} 155 </Badge> 156 </span> 157 <div className="mt-0.5 max-w-[12rem] truncate text-[11px] text-faint" title={c.proposal_ready.reason}> 158 {c.proposal_ready.reason} 159 </div> 160 </td> 161 <td className="py-3 pr-3"> 162 <span title={c.win_impact.basis}> 163 <Badge color={winImpactColor(c.win_impact.level)} subtle> 164 {c.win_impact.level} 165 </Badge> 166 </span> 167 </td> 168 <td className="py-3 pr-3"> 169 <div className="font-semibold">{c.best_fit.name}</div> 170 <div className="text-[11px] text-faint"> 171 {c.best_fit.customer_agency ? `${c.best_fit.customer_agency} · ` : ''} 172 {num(c.best_fit.score).toFixed(0)}% fit 173 </div> 174 </td> 175 <td className="py-3 text-right"> 176 <div className="inline-flex items-center gap-1.5"> 177 {c.source === 'external' && ( 178 <button 179 onClick={() => del.mutate(c.id)} 180 disabled={del.isPending} 181 title="Delete this sourced record" 182 className="grid size-7 place-items-center rounded-md border border-line/70 text-muted hover:border-risk/60 hover:text-risk disabled:opacity-50" 183 > 184 <Trash2 size={13} /> 185 </button> 186 )} 187 <button 188 onClick={() => nav(`/screen/evaluate/${c.id}/${c.best_fit.requirement_id}`)} 189 className="inline-flex items-center gap-1 rounded-md border border-line/70 px-2.5 py-1 text-xs font-semibold text-muted hover:border-blue/60 hover:text-blue-soft" 190 > 191 Review <ChevronRight size={13} /> 192 </button> 193 </div> 194 </td> 195 </tr> 196 ))} 197 </tbody> 198 </table> 199 </div> 200 </Panel> 201 ) 202} 203 204// ---------------- Intelligence View ---------------- 205 206function IntelligenceView({ rows }: { rows: CandidateIntelligence[] }) { 207 return ( 208 <div className="grid gap-3 lg:grid-cols-2 xl:grid-cols-3"> 209 {rows.map((c) => ( 210 <IntelCard key={c.id} c={c} /> 211 ))} 212 </div> 213 ) 214} 215 216function IntelCard({ c }: { c: CandidateIntelligence }) { 217 const nav = useNavigate() 218 const del = useDeleteExternalCandidate() 219 const r = c.mission_readiness 220 return ( 221 <Panel className="flex flex-col gap-3 p-4"> 222 <div className="flex items-start justify-between gap-2"> 223 <div className="min-w-0"> 224 <div className="truncate font-bold">{c.full_name}</div> 225 <div className="mt-0.5 flex flex-wrap items-center gap-1.5 text-[11px] text-faint"> 226 {c.years_experience} yrs{c.location ? ` · ${c.location}` : ''} 227 {c.source === 'external' && ( 228 <Badge color="var(--color-warn)" subtle> 229 External · Demo 230 </Badge> 231 )} 232 </div> 233 </div> 234 <Ring value={num(r.score)} color={bandColor(r.band)} /> 235 </div> 236 237 <div className="flex flex-wrap items-center gap-2"> 238 <span title={c.proposal_ready.reason}> 239 <Badge color={proposalColor(c.proposal_ready.value)} subtle> 240 <Trophy size={11} /> Proposal {c.proposal_ready.value} 241 </Badge> 242 </span> 243 <span title={c.win_impact.basis}> 244 <Badge color={winImpactColor(c.win_impact.level)} subtle> 245 <TrendingUp size={11} /> Win {c.win_impact.level} 246 </Badge> 247 </span> 248 <span className="text-[11px] text-faint">{r.status}</span> 249 </div> 250 251 <ClearanceCell c={c.clearance} /> 252 253 <div className="rounded-lg bg-navy-950/40 px-3 py-2"> 254 <div className="flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wider text-gold"> 255 <Target size={12} /> Best Fit 256 </div> 257 <div className="mt-0.5 text-sm font-semibold">{c.best_fit.name}</div> 258 <div className="text-[11px] text-faint"> 259 {c.best_fit.customer_agency ? `${c.best_fit.customer_agency} · ` : ''} 260 {num(c.best_fit.score).toFixed(0)}% fit 261 </div> 262 <div className="mt-1 text-[11px] text-faint" title={c.win_impact.basis}> 263 {c.win_impact.basis} 264 </div> 265 </div> 266 267 <div> 268 <div className="mb-1 text-[11px] font-bold uppercase tracking-wider text-muted">Labor Category Coverage</div> 269 {c.labor_category_coverage.length > 0 ? ( 270 <div className="flex flex-wrap gap-1.5"> 271 {c.labor_category_coverage.map((l) => ( 272 <span key={l} className="rounded-full bg-blue/15 px-2.5 py-1 text-[11px] font-semibold text-blue-soft"> 273 {l} 274 </span> 275 ))} 276 </div> 277 ) : ( 278 <div className="text-[11px] text-faint"> 279 {c.headline ? c.headline : 'Qualification review pending'} 280 </div> 281 )} 282 </div> 283 284 <div className="mt-auto flex items-center justify-between gap-2 pt-1"> 285 {c.source === 'external' ? ( 286 <button 287 onClick={() => del.mutate(c.id)} 288 disabled={del.isPending} 289 className="inline-flex items-center gap-1.5 rounded-md border border-line/70 px-2.5 py-1 text-xs font-semibold text-muted hover:border-risk/60 hover:text-risk disabled:opacity-50" 290 > 291 <Trash2 size={12} /> Delete 292 </button> 293 ) : ( 294 <span /> 295 )} 296 <button 297 onClick={() => nav(`/screen/evaluate/${c.id}/${c.best_fit.requirement_id}`)} 298 className="inline-flex items-center gap-1 rounded-md bg-blue/20 px-3 py-1.5 text-xs font-semibold text-blue-soft hover:bg-blue/30" 299 > 300 Review <ChevronRight size={13} /> 301 </button> 302 </div> 303 </Panel> 304 ) 305} 306 307// ---------------- shared ---------------- 308 309function ClearanceCell({ c }: { c: IntelClearance }) { 310 const unknown = !c.sci_known || c.level === 'Unknown' 311 const lapsed = c.sci_known && c.status !== 'Active' // Expired or Inactive, never shown as confident 312 const badgeColor = unknown ? 'var(--color-muted)' : lapsed ? 'var(--color-warn)' : 'var(--color-blue)' 313 return ( 314 <div className="flex items-start gap-2"> 315 <Badge color={badgeColor} subtle> 316 {unknown ? ( 317 <span className="inline-flex items-center gap-1"> 318 <ShieldQuestion size={11} /> {c.level || 'Unknown'} 319 </span> 320 ) : ( 321 c.level 322 )} 323 </Badge> 324 <div className="space-y-0.5 text-[11px] text-faint"> 325 {!unknown && ( 326 <div className={lapsed ? 'font-semibold text-warn' : ''}> 327 {c.status} 328 {c.sci_eligible ? ' · SCI eligible' : ''} 329 {c.investigation_year ? ` · investigated ${c.investigation_year}` : ''} 330 </div> 331 )} 332 <div className={c.verified ? 'font-semibold text-ok' : ''}> 333 {c.verified ? '✓ ' : ''} 334 {c.provenance} 335 </div> 336 <div>{c.available ? 'Available now' : 'Engaged'}</div> 337 </div> 338 </div> 339 ) 340} 341 342function Ring({ value, color }: { value: number; color: string }) { 343 const r = 22 344 const circ = 2 * Math.PI * r 345 return ( 346 <div className="relative grid size-[58px] shrink-0 place-items-center"> 347 <svg width="58" height="58" className="-rotate-90"> 348 <circle cx="29" cy="29" r={r} fill="none" stroke="#13314f" strokeWidth="6" /> 349 <circle 350 cx="29" 351 cy="29" 352 r={r} 353 fill="none" 354 stroke={color} 355 strokeWidth="6" 356 strokeLinecap="round" 357 strokeDasharray={circ} 358 strokeDashoffset={circ * (1 - value / 100)} 359 /> 360 </svg> 361 <span className="absolute text-[13px] font-bold tabular-nums">{value.toFixed(0)}</span> 362 </div> 363 ) 364} 365