Source identity
| Field | Recorded value |
|---|---|
| Source type | GitHub source |
| Original record | Janady13/missionmatch / frontend/src/screens/CandidateEvaluation.tsx |
| Date | Not specified in source |
| Repository | Janady13/missionmatch |
| Revision | 39df94f92b2a33f852481fe1954dabed841524bb |
| Branch | w0-aedt-compliance |
| Path or archive member | frontend/src/screens/CandidateEvaluation.tsx |
| Original SHA-256 | 2fb798392f464c7457829620d4e5929749b3fd9dca0c2194fdaa6c6972899063 |
| Git blob SHA | 3d720271d0f0077cfff411154e57ea45ccef3a5a |
| Reading-copy SHA-256 | 2fb798392f464c7457829620d4e5929749b3fd9dca0c2194fdaa6c6972899063 |
Recovered source transcript
Download complete source text ↓197 lines · 8.5 KB
import { useEffect, type ReactNode } from 'react'
import { Link, useParams } from 'react-router-dom'
import {
ArrowLeft,
CheckCircle2,
Clock,
Compass,
FileDown,
Layers,
Loader2,
MapPin,
Share2,
ShieldCheck,
} from 'lucide-react'
import { useCandidates, useOpportunities, useRequirements, useScreen } from '../lib/queries'
import { Badge, Bar, Panel } from '../components/ui'
import { ScreeningResults } from '../components/ScreeningResults'
import { WorkforceDNA } from '../components/WorkforceDNA'
import { bandColor, clearanceLabel, num, statusLabel } from '../lib/format'
import type { Band } from '../lib/types'
function proposal(band: Band) {
if (band === 'green') return { label: 'PROPOSAL READY', color: 'var(--color-ok)' }
if (band === 'yellow') return { label: 'REVIEW REQUIRED', color: 'var(--color-warn)' }
return { label: 'RECRUITING REQUIRED', color: 'var(--color-risk)' }
}
export function CandidateEvaluation() {
const { candidateId = '', requirementId = '' } = useParams()
const candidates = useCandidates()
const requirements = useRequirements()
const opps = useOpportunities(candidateId || null)
const screen = useScreen()
useEffect(() => {
if (candidateId && requirementId) screen.mutate({ candidateId, requirementId })
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [candidateId, requirementId])
const candidate = candidates.data?.find((c) => c.id === candidateId)
const requirement = requirements.data?.find((r) => r.id === requirementId)
return (
<div className="space-y-4">
<Link to="/screen" className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-ink">
<ArrowLeft size={15} /> Back to Screening Queue
</Link>
{screen.isPending && (
<Panel className="flex items-center justify-center gap-2 py-16 text-muted">
<Loader2 className="animate-spin" size={18} /> Evaluating mission readiness…
</Panel>
)}
{screen.isError && (
<Panel>
<p className="text-sm text-risk">{(screen.error as Error).message}</p>
</Panel>
)}
{screen.data && candidate && requirement && (
<>
{/* SCREEN 2 — Candidate Intelligence Profile + Workforce DNA */}
<Panel>
<div className="grid grid-cols-1 items-center gap-6 lg:grid-cols-2">
<div>
<div className="flex items-center gap-4">
<div className="grid size-14 place-items-center rounded-xl bg-blue/25 text-xl font-bold text-blue-soft">
{candidate.full_name
.split(' ')
.map((p) => p[0])
.slice(0, 2)
.join('')}
</div>
<div>
<h2 className="text-xl font-bold">{candidate.full_name}</h2>
<div className="text-sm text-muted">{requirement.title}</div>
</div>
</div>
<dl className="mt-4 grid grid-cols-2 gap-x-6 gap-y-2.5 text-sm">
<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`} />
<Fact icon={<Clock size={14} />} k="Experience" v={`${candidate.years_experience} years`} />
{candidate.location && <Fact icon={<MapPin size={14} />} k="Location" v={candidate.location} />}
<Fact
icon={<CheckCircle2 size={14} />}
k="Availability"
v={candidate.available ? 'Available Now' : 'Engaged'}
/>
</dl>
</div>
<div>
<div className="mb-1 text-center text-[11px] font-bold uppercase tracking-[0.14em] text-gold">
Workforce DNA™
</div>
<WorkforceDNA categories={screen.data.mission_readiness.categories} />
</div>
</div>
</Panel>
{/* SCREENS 3-5 — full screening intelligence (header suppressed) */}
<ScreeningResults view={screen.data} candidate={candidate} requirement={requirement} hideHeader />
{/* SCREEN 5/6 — Best Fit Programs + Proposal Readiness */}
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
<Panel title="Best Fit Programs" hint="Opportunity Fit Engine™">
{opps.isLoading ? (
<p className="text-sm text-muted">Scoring opportunities…</p>
) : !opps.data?.length ? (
<p className="text-sm text-faint">No matching opportunities.</p>
) : (
<div className="space-y-2.5">
{opps.data.map((o) => (
<div key={o.requirement_id}>
<div className="mb-1 flex items-center justify-between text-sm">
<span className="flex items-center gap-1.5">
<Compass size={13} style={{ color: 'var(--color-blue-soft)' }} />
{o.title}
</span>
<span className="font-semibold tabular-nums" style={{ color: bandColor(o.band) }}>
{num(o.score).toFixed(0)}%
</span>
</div>
<Bar value={num(o.score)} color={bandColor(o.band)} />
</div>
))}
</div>
)}
</Panel>
<Panel title="Proposal Readiness">
{(() => {
const pr = proposal(screen.data.mission_readiness.band)
const roles = (opps.data ?? []).filter((o) => o.band === 'green')
return (
<div>
<div className="flex items-center gap-3">
<CheckCircle2 size={30} style={{ color: pr.color }} />
<div>
<div className="text-xl font-extrabold" style={{ color: pr.color }}>
{pr.label}
</div>
<div className="text-xs text-muted">
Proposal strength {num(screen.data.mission_readiness.score).toFixed(0)}%
</div>
</div>
</div>
<div className="mt-3">
<div className="mb-1.5 text-[11px] font-bold uppercase tracking-wider text-muted">
Can Fill These Roles
</div>
<div className="flex flex-wrap gap-1.5">
<Badge color={pr.color} subtle>
{requirement.title}
</Badge>
{roles
.filter((r) => r.requirement_id !== requirement.id)
.map((r) => (
<Badge key={r.requirement_id} color="var(--color-ok)" subtle>
{r.title}
</Badge>
))}
</div>
</div>
<div className="mt-4 flex flex-wrap gap-2">
<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">
<Layers size={14} /> Add to Candidate Slate
</button>
<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">
<Share2 size={14} /> Share
</button>
<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">
<FileDown size={14} /> Export
</button>
</div>
</div>
)
})()}
</Panel>
</div>
</>
)}
</div>
)
}
function Fact({ icon, k, v }: { icon: ReactNode; k: string; v: string }) {
return (
<div>
<dt className="flex items-center gap-1.5 text-[11px] uppercase tracking-wider text-faint">
{icon} {k}
</dt>
<dd className="mt-0.5 font-semibold">{v}</dd>
</div>
)
}