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