Source identity
| Field | Recorded value |
|---|---|
| Source type | GitHub source |
| Original record | Janady13/missionmatch / frontend/src/screens/Dashboard.tsx |
| Date | Not specified in source |
| Repository | Janady13/missionmatch |
| Revision | 39df94f92b2a33f852481fe1954dabed841524bb |
| Branch | w0-aedt-compliance |
| Path or archive member | frontend/src/screens/Dashboard.tsx |
| Original SHA-256 | 7877262ce6109238b4c46ad2c80f8f76a9be2686f1b39d2017cedcdac4ea2957 |
| Git blob SHA | 86d75177bff781f942d3351936fd5a50efbb45aa |
| Reading-copy SHA-256 | 7877262ce6109238b4c46ad2c80f8f76a9be2686f1b39d2017cedcdac4ea2957 |
Recovered source transcript
Download complete source text ↓77 lines · 3.6 KB
import { Link } from 'react-router-dom'
import { ClipboardList, Crosshair, Crown, ShieldCheck, Users } from 'lucide-react'
import { useCandidates, useRequirements } from '../lib/queries'
import { Badge, Panel, Stat } from '../components/ui'
import { clearanceLabel } from '../lib/format'
export function Dashboard() {
const candidates = useCandidates()
const requirements = useRequirements()
const cs = candidates.data ?? []
const rs = requirements.data ?? []
const available = cs.filter((c) => c.available).length
const keyP = rs.filter((r) => r.key_personnel).length
return (
<div className="space-y-4">
<div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
<Stat label="Candidates" value={cs.length} icon={<Users size={18} />} />
<Stat label="Open Requirements" value={rs.length} accent="var(--color-gold)" icon={<ClipboardList size={18} />} />
<Stat label="Available Now" value={available} accent="var(--color-ok)" icon={<ShieldCheck size={18} />} />
<Stat label="Key Personnel Roles" value={keyP} accent="var(--color-blue-soft)" icon={<Crown size={18} />} />
</div>
<Panel className="flex flex-wrap items-center justify-between gap-4 bg-gradient-to-r from-navy-800/70 to-surface">
<div>
<h2 className="text-lg font-bold">Evaluate a candidate against a requirement</h2>
<p className="text-sm text-muted">Run screenMATCH™ to generate an explainable Mission Readiness score.</p>
</div>
<Link
to="/screen"
className="flex items-center gap-2 rounded-lg bg-gradient-to-r from-blue to-navy-700 px-5 py-2.5 text-sm font-bold text-white hover:brightness-110"
>
<Crosshair size={16} /> Screen Candidate
</Link>
</Panel>
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
<Panel title="Open Requirements" hint="requiring evaluation">
<ul className="divide-y divide-line/50">
{rs.length === 0 && <li className="py-3 text-sm text-faint">No requirements yet.</li>}
{rs.slice(0, 6).map((r) => (
<li key={r.id} className="flex items-center justify-between py-2.5">
<div>
<div className="text-sm font-semibold">{r.title}</div>
<div className="text-xs text-muted">{r.customer_agency ?? 'No specific customer'}</div>
</div>
<Badge color="var(--color-blue)" subtle>
{clearanceLabel[r.required_level] ?? r.required_level}
</Badge>
</li>
))}
</ul>
</Panel>
<Panel title="Recent Candidates" hint="Demo data">
<ul className="divide-y divide-line/50">
{cs.length === 0 && <li className="py-3 text-sm text-faint">No candidates yet.</li>}
{cs.slice(0, 6).map((c) => (
<li key={c.id} className="flex items-center justify-between py-2.5">
<div>
<div className="text-sm font-semibold">{c.full_name}</div>
<div className="text-xs text-muted">{c.years_experience} yrs experience</div>
</div>
<Badge color={c.available ? 'var(--color-ok)' : 'var(--color-warn)'} subtle>
{clearanceLabel[c.clearance_level] ?? c.clearance_level}
</Badge>
</li>
))}
</ul>
<p className="mt-3 text-[11px] text-faint">
Clearance is a self reported, detected indicator, not verified. Candidates are Demo data.
</p>
</Panel>
</div>
</div>
)
}