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