AI-powered applicant tracking pipeline, candidate scorecard, resume match scoring, and interview stages board.
Also available for Vue ->$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/recruitment-candidate-pipeline.json$npx shadcn@latest add https://uipkge.dev/r/react/recruitment-candidate-pipeline.json$yarn dlx shadcn@latest add https://uipkge.dev/r/react/recruitment-candidate-pipeline.json$bunx shadcn@latest add https://uipkge.dev/r/react/recruitment-candidate-pipeline.jsonnpx shadcn@latest add @uipkge-react/recruitment-candidate-pipelineInstalls to:components/blocks/| Name | Type / Values | Default | Required |
|---|---|---|---|
stageId | 'technical', | — | required |
stageName | 'Technical Architecture Interview', | — | required |
stageDuration | 'Just advanced', | — | required |
Req | #ENG-2026-08 | — | required |
screening | 'Screening & AI Review', | — | required |
technical | 'Technical Architecture Interview', | — | required |
culture | 'Executive & Team Culture Sync', | — | required |
offer | 'Offer Extended', | — | required |
Type aliases exported from this item's source. Use these to shape the data you pass in.
CandidateCompetencyinterface CandidateCompetency {
name: string
score: number
benchmark: string
}InterviewFeedbackinterface InterviewFeedback {
interviewer: string
role: string
score: number
verdict: string
feedback: string
}CompensationModelinterface CompensationModel {
targetBase: string
equity: string
signOn: string
bonus: string
totalYear1: string
bandStatus: string
noticePeriod: string
}Candidateinterface Candidate {
id: string
name: string
role: string
currentCompany: string
location: string
avatar: string
initials: string
email: string
appliedDate: string
stageId: 'screening' | 'technical' | 'culture' | 'offer'
stageName: string
stageDuration: string
aiMatchScore: number
overallRating: number
reviewCount: number
decision: 'Strong Hire' | 'Hire' | 'Pending Offer' | 'Offer Extended'
decisionVariant: 'success' | 'default' | 'secondary' | 'warning' | 'info'
keySkills: string[]
aiSummary: string
competencies: CandidateCompetency[]
aiHighlights: string[]
growthAreas: string[]
interviews: InterviewFeedback[]
compensation: CompensationModel
}PipelineStageinterface PipelineStage {
id: 'screening' | 'technical' | 'culture' | 'offer'
title: string
stageMetric: string
accentColor: string
badgeVariant: 'info' | 'default' | 'warning' | 'success'
}'use client'
import * as React from 'react'
import {
ArrowRight,
Award,
Briefcase,
Building2,
Calendar,
Check,
CheckCircle2,
ChevronRight,
Clock,
FileDown,
FileSpreadsheet,
FileText,
Mail,
MapPin,
ShieldCheck,
Bot,
Star,
Timer,
UserCheck,
UserPlus,
Users,
} from 'lucide-react'
import { cn } from '@/lib/utils'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Progress } from '@/components/ui/progress'
import { Separator } from '@/components/ui/separator'
import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'
export interface CandidateCompetency {
name: string
score: number
benchmark: string
}
export interface InterviewFeedback {
interviewer: string
role: string
score: number
verdict: string
feedback: string
}
export interface CompensationModel {
targetBase: string
equity: string
signOn: string
bonus: string
totalYear1: string
bandStatus: string
noticePeriod: string
}
export interface Candidate {
id: string
name: string
role: string
currentCompany: string
location: string
avatar: string
initials: string
email: string
appliedDate: string
stageId: 'screening' | 'technical' | 'culture' | 'offer'
stageName: string
stageDuration: string
aiMatchScore: number
overallRating: number
reviewCount: number
decision: 'Strong Hire' | 'Hire' | 'Pending Offer' | 'Offer Extended'
decisionVariant: 'success' | 'default' | 'secondary' | 'warning' | 'info'
keySkills: string[]
aiSummary: string
competencies: CandidateCompetency[]
aiHighlights: string[]
growthAreas: string[]
interviews: InterviewFeedback[]
compensation: CompensationModel
}
export interface PipelineStage {
id: 'screening' | 'technical' | 'culture' | 'offer'
title: string
stageMetric: string
accentColor: string
badgeVariant: 'info' | 'default' | 'warning' | 'success'
}
const STAGES: PipelineStage[] = [
{
id: 'screening',
title: 'Screening & AI Review',
stageMetric: 'AI match 94%',
accentColor: 'border-t-info',
badgeVariant: 'info',
},
{
id: 'technical',
title: 'Technical Architecture Interview',
stageMetric: 'Scorecard 4.8/5',
accentColor: 'border-t-chart-1',
badgeVariant: 'default',
},
{
id: 'culture',
title: 'Executive & Team Culture Sync',
stageMetric: 'Strong Hire',
accentColor: 'border-t-warning',
badgeVariant: 'warning',
},
{
id: 'offer',
title: 'Offer Extended',
stageMetric: '$240k Base + Equity · Pending',
accentColor: 'border-t-success',
badgeVariant: 'success',
},
]
const INITIAL_CANDIDATES: Candidate[] = [
{
id: 'cand-1',
name: 'Elena Rostova',
role: 'Senior Staff Design Engineer',
currentCompany: 'Former Staff at Vercel',
location: 'San Francisco, CA (Remote)',
avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&auto=format&fit=crop&q=80',
initials: 'ER',
email: '[email protected]',
appliedDate: 'Aug 14, 2026',
stageId: 'screening',
stageName: 'Screening & AI Review',
stageDuration: 'In stage for 2d',
aiMatchScore: 96,
overallRating: 4.9,
reviewCount: 4,
decision: 'Strong Hire',
decisionVariant: 'success',
keySkills: ['Vue 3', 'React', 'OKLCH', 'Reka UI'],
aiSummary:
'Exceptional system architect with proven history leading unbundled design system registries, dual-framework component parity, and headless UI primitives.',
competencies: [
{ name: 'Component Architecture & Modularity', score: 98, benchmark: 'Top 1% candidate pool' },
{ name: 'Cross-Framework Parity (Vue 3 & React)', score: 96, benchmark: 'Top 3% candidate pool' },
{ name: 'Design Tokens & OKLCH Color Systems', score: 95, benchmark: 'Top 5% candidate pool' },
{ name: 'Micro-interactions & Spring Physics', score: 92, benchmark: 'Top 8% candidate pool' },
{ name: 'RFC Authoring & Team Mentorship', score: 94, benchmark: 'Top 4% candidate pool' },
],
aiHighlights: [
'Pioneered copy-paste unbundled component architecture serving 50k+ daily package invocations.',
'Deep contributor to Reka UI and Radix headless accessibility layers with zero layout shifts.',
'Championed OKLCH perceptually uniform palettes with zero contrast regressions across light & dark themes.',
],
growthAreas: [
'Prefers structured async written documentation over high-frequency sync huddles (well-aligned with remote-first culture).',
],
interviews: [
{
interviewer: 'Alex Rivera',
role: 'VP of Engineering',
score: 5.0,
verdict: 'Strong Hire',
feedback:
'Stunning grasp of reactivity internals, SFC compilation boundaries, and developer ergonomics. Instant technical pillar for our platform team.',
},
{
interviewer: 'Sarah Chen',
role: 'Principal Product Designer',
score: 4.9,
verdict: 'Strong Hire',
feedback:
'Pixel-perfect intuition. Deep appreciation for sub-16ms layout transitions, optical alignment, and semantic token hierarchy.',
},
{
interviewer: 'Devon Vance',
role: 'Staff Frontend Lead',
score: 4.8,
verdict: 'Strong Hire',
feedback:
'Clean API design philosophy. Strongly advocates for zero runtime bloat, tree-shakeable composables, and strict CVA variant patterns.',
},
],
compensation: {
targetBase: '$240,000',
equity: '$85,000 / yr (0.15% equity, 4-yr vest)',
signOn: '$25,000',
bonus: '$36,000 (15% target)',
totalYear1: '$386,000',
bandStatus: 'Within Level 7 Band ($225k – $255k)',
noticePeriod: '2 Weeks',
},
},
{
id: 'cand-2',
name: 'Marcus Chen',
role: 'Senior Frontend Architect',
currentCompany: 'Former Architect at Stripe',
location: 'Seattle, WA (Hybrid)',
avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&auto=format&fit=crop&q=80',
initials: 'MC',
email: '[email protected]',
appliedDate: 'Aug 12, 2026',
stageId: 'screening',
stageName: 'Screening & AI Review',
stageDuration: 'In stage for 3d',
aiMatchScore: 92,
overallRating: 4.7,
reviewCount: 3,
decision: 'Hire',
decisionVariant: 'default',
keySkills: ['TypeScript', 'Tailwind v4', 'Accessibility', 'Turborepo'],
aiSummary:
'Expert in enterprise monorepo governance, automated build tooling optimization, and WCAG AA accessibility test infrastructure.',
competencies: [
{ name: 'Component Architecture & Modularity', score: 94, benchmark: 'Top 5% candidate pool' },
{ name: 'Cross-Framework Parity (Vue 3 & React)', score: 90, benchmark: 'Top 10% candidate pool' },
{ name: 'Design Tokens & OKLCH Color Systems', score: 91, benchmark: 'Top 9% candidate pool' },
{ name: 'Micro-interactions & Spring Physics', score: 88, benchmark: 'Top 12% candidate pool' },
{ name: 'RFC Authoring & Team Mentorship', score: 95, benchmark: 'Top 3% candidate pool' },
],
aiHighlights: [
'Decreased monorepo CI build times by 54% through caching and Turborepo remote pipeline execution.',
'Built automated accessibility testing suite with 99.8% regression catch rate across payment checkout flows.',
],
growthAreas: [
'Has spent less time with Vue 3.5 SFC script setup macros recently, mostly focused on React and Next.js.',
],
interviews: [
{
interviewer: 'Alex Rivera',
role: 'VP of Engineering',
score: 4.8,
verdict: 'Hire',
feedback:
'Very strong fundamentals on build systems, packaging, and high-reliability data tables under heavy load.',
},
{
interviewer: 'Devon Vance',
role: 'Staff Frontend Lead',
score: 4.6,
verdict: 'Hire',
feedback: 'Solid architecture chops, great understanding of semantic token resolution and bundle footprint.',
},
],
compensation: {
targetBase: '$230,000',
equity: '$70,000 / yr',
signOn: '$20,000',
bonus: '$34,500 (15% target)',
totalYear1: '$354,500',
bandStatus: 'Within Level 7 Band ($225k – $255k)',
noticePeriod: '3 Weeks',
},
},
{
id: 'cand-3',
name: 'Siddharth Mehta',
role: 'Principal Systems Engineer',
currentCompany: 'Former Principal at Figma',
location: 'New York, NY (Remote)',
avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=150&auto=format&fit=crop&q=80',
initials: 'SM',
email: '[email protected]',
appliedDate: 'Aug 10, 2026',
stageId: 'technical',
stageName: 'Technical Architecture Interview',
stageDuration: 'In stage for 4d',
aiMatchScore: 95,
overallRating: 4.9,
reviewCount: 5,
decision: 'Strong Hire',
decisionVariant: 'success',
keySkills: ['Design Systems', 'Canvas/WebGL', 'Reka UI', 'Radix'],
aiSummary:
'Visionary in design token compilation engines, dual-engine canvas rendering, and cross-platform design-to-code pipelines.',
competencies: [
{ name: 'Component Architecture & Modularity', score: 97, benchmark: 'Top 2% candidate pool' },
{ name: 'Cross-Framework Parity (Vue 3 & React)', score: 93, benchmark: 'Top 6% candidate pool' },
{ name: 'Design Tokens & OKLCH Color Systems', score: 98, benchmark: 'Top 1% candidate pool' },
{ name: 'Micro-interactions & Spring Physics', score: 95, benchmark: 'Top 3% candidate pool' },
{ name: 'RFC Authoring & Team Mentorship', score: 96, benchmark: 'Top 2% candidate pool' },
],
aiHighlights: [
'Designed token transformation schema syncing design primitives directly to 6 distinct production platforms.',
'Spearheaded low-latency viewport virtualization rendering 10k+ nodes at a constant 120 FPS.',
],
growthAreas: ['Prefers deep architecture sprint focus over rapid day-to-day experimental marketing product churn.'],
interviews: [
{
interviewer: 'Sarah Chen',
role: 'Principal Product Designer',
score: 5.0,
verdict: 'Strong Hire',
feedback: 'World-class understanding of designer-developer handoff, sub-layer nesting, and token semantics.',
},
{
interviewer: 'Devon Vance',
role: 'Staff Frontend Lead',
score: 4.8,
verdict: 'Strong Hire',
feedback: 'Masterful architectural whiteboard session on headless state machines and zero-lockin registries.',
},
],
compensation: {
targetBase: '$245,000',
equity: '$90,000 / yr',
signOn: '$30,000',
bonus: '$36,750 (15% target)',
totalYear1: '$401,750',
bandStatus: 'Top of Level 7 Band ($225k – $255k)',
noticePeriod: '4 Weeks',
},
},
{
id: 'cand-4',
name: 'Amara Okafor',
role: 'Lead UI Engineer',
currentCompany: 'Former Lead UI at Linear',
location: 'Austin, TX (Remote)',
avatar: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=150&auto=format&fit=crop&q=80',
initials: 'AO',
email: '[email protected]',
appliedDate: 'Aug 08, 2026',
stageId: 'technical',
stageName: 'Technical Architecture Interview',
stageDuration: 'In stage for 1d',
aiMatchScore: 91,
overallRating: 4.8,
reviewCount: 4,
decision: 'Strong Hire',
decisionVariant: 'success',
keySkills: ['Micro-interactions', 'Vue 3.5', 'Tailwind CSS', 'Performance'],
aiSummary:
'Specialist in sub-16ms keyboard-first workflows, fluid spring physics, and ultra-dense desktop data layouts.',
competencies: [
{ name: 'Component Architecture & Modularity', score: 92, benchmark: 'Top 8% candidate pool' },
{ name: 'Cross-Framework Parity (Vue 3 & React)', score: 94, benchmark: 'Top 5% candidate pool' },
{ name: 'Design Tokens & OKLCH Color Systems', score: 93, benchmark: 'Top 7% candidate pool' },
{ name: 'Micro-interactions & Spring Physics', score: 99, benchmark: 'Top 1% candidate pool' },
{ name: 'RFC Authoring & Team Mentorship', score: 90, benchmark: 'Top 10% candidate pool' },
],
aiHighlights: [
'Built gesture & spring motion system with 0 runtime jank and native 120Hz responsiveness.',
'Created command palette keyboard navigation engine benchmarked across 2M daily power-user queries.',
],
growthAreas: ['Looking to broaden direct experience in large-scale compiler and AST code generation pipelines.'],
interviews: [
{
interviewer: 'Alex Rivera',
role: 'VP of Engineering',
score: 4.8,
verdict: 'Strong Hire',
feedback: 'Exceptional craft and keyboard ergonomics. Perfect fit for our design engineering culture.',
},
{
interviewer: 'Sarah Chen',
role: 'Principal Product Designer',
score: 4.9,
verdict: 'Strong Hire',
feedback: 'Delightful eye for interaction states, hover intents, and subtle spring tension calibrations.',
},
],
compensation: {
targetBase: '$235,000',
equity: '$80,000 / yr',
signOn: '$20,000',
bonus: '$35,250 (15% target)',
totalYear1: '$370,250',
bandStatus: 'Within Level 7 Band ($225k – $255k)',
noticePeriod: '2 Weeks',
},
},
{
id: 'cand-5',
name: 'Lucas Vance',
role: 'Head of Design Technology',
currentCompany: 'Former Head of Design Tech at Ramp',
location: 'San Francisco, CA (On-site)',
avatar: 'https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?w=150&auto=format&fit=crop&q=80',
initials: 'LV',
email: '[email protected]',
appliedDate: 'Aug 05, 2026',
stageId: 'culture',
stageName: 'Executive & Team Culture Sync',
stageDuration: 'In stage for 5d',
aiMatchScore: 94,
overallRating: 4.9,
reviewCount: 6,
decision: 'Strong Hire',
decisionVariant: 'success',
keySkills: ['OKLCH Tokens', 'Vue 3', 'Mentorship', 'API Design'],
aiSummary:
'Proven team multiplier who scaled design tech teams from 0 to 18 engineers with high trust, craft rigor, and speed.',
competencies: [
{ name: 'Component Architecture & Modularity', score: 95, benchmark: 'Top 4% candidate pool' },
{ name: 'Cross-Framework Parity (Vue 3 & React)', score: 92, benchmark: 'Top 7% candidate pool' },
{ name: 'Design Tokens & OKLCH Color Systems', score: 97, benchmark: 'Top 2% candidate pool' },
{ name: 'Micro-interactions & Spring Physics', score: 91, benchmark: 'Top 9% candidate pool' },
{ name: 'RFC Authoring & Team Mentorship', score: 98, benchmark: 'Top 1% candidate pool' },
],
aiHighlights: [
'Established engineering mentorship tracks that accelerated senior promotion velocity by 40%.',
'Co-authored foundational RFC for unified design tokens across web, iOS, and Android clients.',
],
growthAreas: [
'Best partnered with an experienced product manager for high-velocity customer roadmap prioritization.',
],
interviews: [
{
interviewer: 'Alex Rivera',
role: 'VP of Engineering',
score: 5.0,
verdict: 'Strong Hire',
feedback: 'Incredible leader with high EQ and deep technical chops. Immediate culture and craft multiplier.',
},
{
interviewer: 'Devon Vance',
role: 'Staff Frontend Lead',
score: 4.8,
verdict: 'Strong Hire',
feedback: 'Inspiring communicator with razor-sharp code review standards and pragmatic architectural empathy.',
},
],
compensation: {
targetBase: '$240,000',
equity: '$85,000 / yr',
signOn: '$25,000',
bonus: '$36,000 (15% target)',
totalYear1: '$386,000',
bandStatus: 'Within Level 7 Band ($225k – $255k)',
noticePeriod: 'Immediate',
},
},
{
id: 'cand-6',
name: 'Sofia Lindqvist',
role: 'Staff Design Technologist',
currentCompany: 'Former Staff at Spotify',
location: 'Stockholm / Remote US',
avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=150&auto=format&fit=crop&q=80',
initials: 'SL',
email: '[email protected]',
appliedDate: 'Aug 01, 2026',
stageId: 'offer',
stageName: 'Offer Extended',
stageDuration: 'In stage for 2d (Offer valid 5d)',
aiMatchScore: 97,
overallRating: 5.0,
reviewCount: 7,
decision: 'Offer Extended',
decisionVariant: 'success',
keySkills: ['Vue 3', 'React', 'Design Systems', 'Craft & Motion'],
aiSummary:
'Flawless all-around engineering craft leader with unanimous consensus Strong Hire across 7 cross-functional panels.',
competencies: [
{ name: 'Component Architecture & Modularity', score: 99, benchmark: 'Top 1% candidate pool' },
{ name: 'Cross-Framework Parity (Vue 3 & React)', score: 97, benchmark: 'Top 2% candidate pool' },
{ name: 'Design Tokens & OKLCH Color Systems', score: 98, benchmark: 'Top 1% candidate pool' },
{ name: 'Micro-interactions & Spring Physics', score: 96, benchmark: 'Top 2% candidate pool' },
{ name: 'RFC Authoring & Team Mentorship', score: 97, benchmark: 'Top 2% candidate pool' },
],
aiHighlights: [
'Unanimous 5.0 consensus from all 7 hiring committee and executive interviewers.',
'Architected component registry ecosystem servicing 600M monthly active music listeners.',
],
growthAreas: ['Requires CET / US-East overlap working agreement for synchronous core team design reviews.'],
interviews: [
{
interviewer: 'Alex Rivera',
role: 'VP of Engineering',
score: 5.0,
verdict: 'Offer Extended',
feedback: 'One of the finest design engineering candidates we have ever evaluated. Flawless technical review.',
},
{
interviewer: 'Sarah Chen',
role: 'Principal Product Designer',
score: 5.0,
verdict: 'Offer Extended',
feedback:
'Phenomenal partner for design teams. Completely dissolves the barrier between Figma and production code.',
},
],
compensation: {
targetBase: '$240,000',
equity: '$85,000 / yr (4-yr vest)',
signOn: '$25,000',
bonus: '$36,000 (15% target)',
totalYear1: '$386,000',
bandStatus: 'Offer Extended ($240k Base + Equity)',
noticePeriod: '2 Weeks',
},
},
]
export interface RecruitmentCandidatePipelineProps extends React.HTMLAttributes<HTMLDivElement> {}
export function RecruitmentCandidatePipeline({ className, ...props }: RecruitmentCandidatePipelineProps) {
const [candidates, setCandidates] = React.useState<Candidate[]>(INITIAL_CANDIDATES)
const [selectedCandidateId, setSelectedCandidateId] = React.useState<string>('cand-1')
const selectedCandidate = React.useMemo(() => {
return candidates.find((c) => c.id === selectedCandidateId) ?? candidates[0]
}, [candidates, selectedCandidateId])
const selectCandidate = React.useCallback((id: string) => {
setSelectedCandidateId(id)
}, [])
const advanceCandidate = React.useCallback((candidateId: string) => {
setCandidates((prev) =>
prev.map((c) => {
if (c.id !== candidateId) return c
if (c.stageId === 'screening') {
return {
...c,
stageId: 'technical',
stageName: 'Technical Architecture Interview',
stageDuration: 'Just advanced',
}
}
if (c.stageId === 'technical') {
return {
...c,
stageId: 'culture',
stageName: 'Executive & Team Culture Sync',
stageDuration: 'Just advanced',
}
}
if (c.stageId === 'culture') {
return {
...c,
stageId: 'offer',
stageName: 'Offer Extended',
stageDuration: 'Offer stage initiated',
}
}
return c
}),
)
}, [])
const getCandidatesForStage = React.useCallback(
(stageId: PipelineStage['id']) => {
return candidates.filter((c) => c.stageId === stageId)
},
[candidates],
)
return (
<div className={cn('w-full space-y-6 font-sans', className)} {...props}>
{/* Header Section */}
<div className="bg-card text-card-foreground border-border/80 flex flex-col justify-between gap-4 rounded-xl border p-5 shadow-xs sm:p-6 lg:flex-row lg:items-center">
<div className="space-y-1.5">
<div className="flex flex-wrap items-center gap-2.5">
<h1 className="text-foreground text-xl font-bold tracking-tight sm:text-2xl">
Senior Staff Design Engineer
</h1>
<Badge variant="secondary" className="gap-1 font-medium">
<Building2 className="text-muted-foreground size-3" />
Engineering & Product
</Badge>
<Badge variant="outline" className="border-success/30 bg-success/10 text-success gap-1 font-medium">
<span className="bg-success size-1.5 animate-pulse rounded-full" />1 Open Headcount
</Badge>
<Badge variant="outline" className="text-muted-foreground hidden sm:inline-flex">
Req: #ENG-2026-08
</Badge>
</div>
<p className="text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-1 text-xs sm:text-sm">
<span>AI Candidate Pipeline & Interactive Talent Scorecard</span>
<span className="text-foreground font-medium tabular-nums">48 Total Applicants</span>
<span className="text-success text-success font-medium tabular-nums">6 Active in Pipeline</span>
<span>Hiring Lead: Alex Rivera</span>
</p>
</div>
<div className="flex flex-wrap items-center gap-2.5">
<Button variant="outline" size="sm" className="gap-1.5 shadow-xs">
<FileDown className="size-3.5" />
<span>Export ATS CSV</span>
</Button>
<Button size="sm" className="gap-1.5 shadow-xs">
<UserPlus className="size-3.5" />
<span>Add Candidate</span>
</Button>
</div>
</div>
{/* 4 Recruiting KPI Cards */}
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
{/* Total Applicants */}
<Card className="border-border/80 shadow-xs">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-muted-foreground text-xs font-medium">Total Applicants</CardTitle>
<div className="bg-primary/10 text-primary flex size-8 items-center justify-center rounded-lg">
<Users className="size-4" />
</div>
</CardHeader>
<CardContent className="space-y-1">
<div className="flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5">
<div className="text-foreground text-2xl font-bold tracking-tight tabular-nums">48</div>
<Badge
variant="outline"
className="border-success/30 bg-success/10 text-success text-success text-xs font-medium tabular-nums"
>
+28% WoW
</Badge>
</div>
<p className="text-muted-foreground text-xs">+14 this week · 82% qualified threshold</p>
</CardContent>
</Card>
{/* AI Resume Match Rate */}
<Card className="border-border/80 shadow-xs">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-muted-foreground text-xs font-medium">AI Resume Match Rate</CardTitle>
<div className="bg-success/10 text-success flex size-8 items-center justify-center rounded-lg">
<Award className="size-4" />
</div>
</CardHeader>
<CardContent className="space-y-1">
<div className="flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5">
<div className="text-foreground text-2xl font-bold tracking-tight tabular-nums">88.4%</div>
<Badge
variant="outline"
className="border-info/30 bg-info/10 text-info text-info text-xs font-medium tabular-nums"
>
Top Quartile
</Badge>
</div>
<p className="text-muted-foreground text-xs">Avg match score · Claude 3.7 Sonnet analysis</p>
</CardContent>
</Card>
{/* Time to Hire Velocity */}
<Card className="border-border/80 shadow-xs">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-muted-foreground text-xs font-medium">Time to Hire Velocity</CardTitle>
<div className="bg-chart-1/10 text-chart-1 flex size-8 items-center justify-center rounded-lg">
<Timer className="size-4" />
</div>
</CardHeader>
<CardContent className="space-y-1">
<div className="flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5">
<div className="text-foreground text-2xl font-bold tracking-tight tabular-nums">18 Days</div>
<Badge
variant="outline"
className="border-success/30 bg-success/10 text-success text-success text-xs font-medium tabular-nums"
>
-6d vs Q2
</Badge>
</div>
<p className="text-muted-foreground text-xs">Industry benchmark: 32d avg cycle</p>
</CardContent>
</Card>
{/* Offers Extended */}
<Card className="border-border/80 shadow-xs">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-muted-foreground text-xs font-medium">Offers Extended</CardTitle>
<div className="bg-warning/10 text-warning flex size-8 items-center justify-center rounded-lg">
<Award className="size-4" />
</div>
</CardHeader>
<CardContent className="space-y-1">
<div className="flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5">
<div className="text-foreground text-2xl font-bold tracking-tight tabular-nums">1 Pending</div>
<Badge
variant="outline"
className="border-warning/30 bg-warning/10 text-warning text-warning text-xs font-medium tabular-nums"
>
95% Close Prob
</Badge>
</div>
<p className="text-muted-foreground text-xs">$240k base + equity package under review</p>
</CardContent>
</Card>
</div>
{/* 4-Stage Candidate Pipeline Board */}
<div className="space-y-3">
<div className="flex items-center justify-between gap-x-2">
<div className="flex flex-wrap items-center gap-2">
<h2 className="text-foreground text-base font-semibold">Active Interview Pipeline</h2>
<Badge variant="outline" className="text-xs tabular-nums">
6 in Progress
</Badge>
</div>
<p className="text-muted-foreground hidden text-xs sm:block">
Select any candidate to load their detailed AI Scorecard below
</p>
</div>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
{STAGES.map((stage) => {
const stageCandidates = getCandidatesForStage(stage.id)
return (
<div key={stage.id} className="border-border/80 bg-muted/20 flex flex-col gap-3 rounded-xl border p-3.5">
{/* Stage Column Header */}
<div className="border-border/70 border-b pb-2.5">
<div className="flex items-center justify-between gap-1.5">
<div className="flex min-w-0 items-center gap-2">
<span
className={cn(
'size-2 shrink-0 rounded-full',
stage.id === 'screening'
? 'bg-info'
: stage.id === 'technical'
? 'bg-chart-1'
: stage.id === 'culture'
? 'bg-warning'
: 'bg-success',
)}
/>
<h3 className="text-foreground truncate text-xs font-semibold" title={stage.title}>
{
{
screening: 'Screening & AI Review',
technical: 'Technical Architecture Interview',
culture: 'Executive & Team Culture Sync',
offer: 'Offer Extended',
}[stage.id]
}
</h3>
</div>
<Badge variant="secondary" className="shrink-0 px-1.5 py-0 text-xs tabular-nums">
{stageCandidates.length}
</Badge>
</div>
<div className="text-muted-foreground mt-1 flex items-center justify-between gap-x-2 text-xs">
<span className="truncate">{stage.stageMetric}</span>
</div>
</div>
{/* Candidates list in Stage */}
<div className="flex flex-col gap-3">
{stageCandidates.map((cand) => (
<div
key={cand.id}
className={cn(
'group bg-card relative flex cursor-pointer flex-col gap-3 rounded-lg border p-3.5 shadow-xs transition-colors duration-200',
selectedCandidateId === cand.id
? 'border-primary ring-primary/20 bg-card shadow-sm ring-2'
: 'border-border/80 hover:border-border hover:shadow-sm',
)}
onClick={() => selectCandidate(cand.id)}
>
{/* Candidate Top Row: Avatar + Name + AI Match Pill */}
<div className="flex items-start justify-between gap-2">
<div className="flex min-w-0 items-center gap-2.5">
<Avatar className="border-border/80 size-9 shrink-0 border">
<AvatarImage src={cand.avatar} alt={cand.name} />
<AvatarFallback className="text-xs font-semibold">{cand.initials}</AvatarFallback>
</Avatar>
<div className="min-w-0">
<h4 className="text-foreground group-hover:text-primary truncate text-xs font-semibold transition-colors">
{cand.name}
</h4>
<p className="text-muted-foreground truncate text-xs">{cand.currentCompany}</p>
</div>
</div>
{/* AI Resume Match pill */}
<Badge
variant="outline"
className="border-success/30 bg-success/10 text-success text-success shrink-0 gap-1 text-xs font-medium tabular-nums"
>
<CheckCircle2 className="text-success size-3" />
<span>{cand.aiMatchScore}% Match</span>
</Badge>
</div>
{/* Candidate Rating & Stage Duration */}
<div className="flex items-center justify-between gap-2 text-xs">
<div className="text-warning flex items-center gap-1 font-medium tabular-nums">
<Star className="fill-warning text-warning size-3" />
<span className="text-foreground font-semibold">{cand.overallRating.toFixed(1)}</span>
<span className="text-muted-foreground font-normal">({cand.reviewCount} interviewers)</span>
</div>
<div className="text-muted-foreground flex items-center gap-1 text-xs">
<Clock className="text-muted-foreground/80 size-3 shrink-0" />
<span className="truncate">{cand.stageDuration}</span>
</div>
</div>
{/* Key Skills badges */}
<div className="flex flex-wrap gap-1">
{cand.keySkills.map((skill) => (
<Badge key={skill} variant="secondary" className="px-1.5 py-0 text-xs font-normal">
{skill}
</Badge>
))}
</div>
{/* Card Action Buttons */}
<div className="border-border/60 flex flex-wrap items-center gap-2 border-t pt-1">
<Button
variant="ghost"
size="sm"
className="text-muted-foreground hover:text-foreground h-7 flex-1 justify-start gap-1 px-2 text-xs"
onClick={(e) => {
e.stopPropagation()
selectCandidate(cand.id)
}}
>
<FileText className="size-3" />
<span>View Scorecard</span>
</Button>
<Button
variant="outline"
size="sm"
className="hover:bg-primary hover:text-primary-foreground hover:border-primary h-7 gap-1 px-2 text-xs"
onClick={(e) => {
e.stopPropagation()
advanceCandidate(cand.id)
}}
>
<span>Advance</span>
<ChevronRight className="size-3" />
</Button>
</div>
</div>
))}
{/* Empty stage placeholder if all candidates moved */}
{stageCandidates.length === 0 && (
<div className="border-border/80 text-muted-foreground flex flex-col items-center justify-center rounded-lg border border-dashed p-6 text-center">
<UserCheck className="text-muted-foreground/60 mb-1 size-5" />
<p className="text-xs font-medium">No candidates in this stage</p>
</div>
)}
</div>
</div>
)
})}
</div>
</div>
{/* Candidate Detailed AI Scorecard Card / Drawer Section */}
<Card className="border-border/80 overflow-hidden shadow-sm">
{/* Top Scorecard Header Bar */}
<div className="border-border bg-muted/30 border-b p-4 sm:p-5">
{/* Candidate Quick Selector Bar */}
<div className="mb-4 flex flex-wrap items-center justify-between gap-3">
<div className="flex flex-wrap items-center gap-2">
<UserCheck className="text-success size-4" />
<span className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
Candidate AI Scorecard & Interview Matrix
</span>
</div>
{/* Switcher pills for all 6 candidates */}
<div className="flex flex-wrap items-center gap-1.5">
{candidates.map((c) => (
<button
key={c.id}
type="button"
className={cn(
'focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',
selectedCandidateId === c.id
? 'bg-primary text-primary-foreground shadow-xs'
: 'bg-background hover:bg-muted text-muted-foreground hover:text-foreground border-border/70 border',
)}
onClick={() => selectCandidate(c.id)}
>
<span>{c.name}</span>
<span
className={cn(
'py-0.2 rounded-full px-1 text-xs font-semibold tabular-nums',
selectedCandidateId === c.id
? 'bg-primary-foreground/20 text-primary-foreground'
: 'bg-muted text-muted-foreground',
)}
>
{c.aiMatchScore}%
</span>
</button>
))}
</div>
</div>
{/* Selected Candidate Bio Header */}
<div className="flex flex-col justify-between gap-4 lg:flex-row lg:items-center">
<div className="flex items-start gap-3.5 sm:items-center">
<Avatar className="border-background size-12 shrink-0 border-2 shadow-xs">
<AvatarImage src={selectedCandidate.avatar} alt={selectedCandidate.name} />
<AvatarFallback className="text-sm font-semibold">{selectedCandidate.initials}</AvatarFallback>
</Avatar>
<div className="space-y-1">
<div className="flex flex-wrap items-center gap-2">
<h3 className="text-foreground text-lg font-bold">{selectedCandidate.name}</h3>
<Badge
variant="outline"
className="border-success/30 bg-success/10 text-success text-success gap-1 text-xs font-medium tabular-nums"
>
<CheckCircle2 className="text-success size-3" />
{selectedCandidate.aiMatchScore}% AI Fit
</Badge>
<Badge variant="default" className="text-xs font-medium">
{selectedCandidate.decision}
</Badge>
</div>
<div className="text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
<span className="flex items-center gap-1">
<Briefcase className="size-3" />
{selectedCandidate.currentCompany}
</span>
<span className="flex items-center gap-1">
<MapPin className="size-3" />
{selectedCandidate.location}
</span>
<span className="flex items-center gap-1">
<Mail className="size-3" />
{selectedCandidate.email}
</span>
<span className="flex items-center gap-1">
<Calendar className="size-3" />
Applied {selectedCandidate.appliedDate}
</span>
</div>
</div>
</div>
{/* Header Action Buttons */}
<div className="flex flex-wrap items-center gap-2">
<Button
variant="outline"
size="sm"
className="gap-1.5 text-xs shadow-xs"
onClick={() => advanceCandidate(selectedCandidate.id)}
>
<span>Advance to Next Round</span>
<ArrowRight className="size-3.5" />
</Button>
<Button size="sm" className="gap-1.5 text-xs shadow-xs">
<CheckCircle2 className="size-3.5" />
<span>Extend Offer Letter</span>
</Button>
</div>
</div>
</div>
{/* Scorecard Content: 3-Column Grid */}
<CardContent className="space-y-6 p-5">
{/* AI Executive Summary Banner */}
<div className="border-success/20 bg-success/5 flex flex-col items-start gap-3 rounded-lg border p-4 sm:flex-row">
<div className="bg-success/10 text-success flex size-8 shrink-0 items-center justify-center rounded-md">
<Bot className="size-4.5" />
</div>
<div className="space-y-1">
<h4 className="text-foreground flex items-center gap-1.5 text-xs font-semibold">
<span>AI Synthesized Resume & Interview Consensus</span>
<Badge variant="outline" className="border-success/30 text-success py-0 text-xs">
High Confidence (98.2%)
</Badge>
</h4>
<p className="text-muted-foreground text-xs leading-relaxed">
{{
'cand-1':
'Exceptional system architect with proven history leading unbundled design system registries, dual-framework component parity, and headless UI primitives.',
'cand-2':
'Expert in enterprise monorepo governance, automated build tooling optimization, and WCAG AA accessibility test infrastructure.',
'cand-3':
'Visionary in design token compilation engines, dual-engine canvas rendering, and cross-platform design-to-code pipelines.',
'cand-4':
'Specialist in sub-16ms keyboard-first workflows, fluid spring physics, and ultra-dense desktop data layouts.',
'cand-5':
'Proven team multiplier who scaled design tech teams from 0 to 18 engineers with high trust, craft rigor, and speed.',
'cand-6':
'Flawless all-around engineering craft leader with unanimous consensus Strong Hire across 7 cross-functional panels.',
}[selectedCandidate.id] || selectedCandidate.aiSummary}
</p>
</div>
</div>
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
{/* Column 1: AI Competency & Skill Radar Breakdown */}
<div className="border-border/80 bg-card space-y-4 rounded-xl border p-4">
<div className="flex items-center justify-between gap-x-2">
<div>
<h4 className="text-foreground text-xs font-semibold">Competency Scorecard</h4>
<p className="text-muted-foreground text-xs">AI parsed technical signals</p>
</div>
<Badge variant="secondary" className="text-xs tabular-nums">
{selectedCandidate.competencies.length} Pillars
</Badge>
</div>
<div className="space-y-3.5">
{selectedCandidate.competencies.map((comp) => (
<div key={comp.name} className="space-y-1.5">
<div className="flex items-center justify-between gap-x-2 text-xs">
<span className="text-foreground truncate pr-2 font-medium" title={comp.name}>
{comp.name}
</span>
<span className="text-foreground shrink-0 font-bold tabular-nums">{comp.score}%</span>
</div>
<Progress value={comp.score} className="h-1.5" />
<div className="text-muted-foreground flex items-center justify-between gap-x-2 text-xs">
<span className="text-xs">{comp.benchmark}</span>
</div>
</div>
))}
</div>
<Separator className="my-3" />
{/* AI Highlights list */}
<div className="space-y-2">
<h5 className="text-foreground flex items-center gap-1.5 text-xs font-semibold">
<Check className="text-success size-3.5" />
<span>Key AI Resume Signals</span>
</h5>
<ul className="text-muted-foreground space-y-1.5 text-xs">
{selectedCandidate.aiHighlights.map((highlight, idx) => (
<li key={idx} className="flex items-start gap-1.5">
<span className="text-success font-bold">•</span>
<span>{highlight}</span>
</li>
))}
</ul>
</div>
{/* Growth Areas / Calibration */}
<div className="bg-muted/40 border-border/60 space-y-1.5 rounded-lg border p-3 text-xs">
<div className="text-foreground flex items-center gap-1.5 font-medium">
<ShieldCheck className="text-chart-1 size-3.5" />
<span>Interviewer Calibration Note</span>
</div>
<p className="text-muted-foreground leading-relaxed">{selectedCandidate.growthAreas[0]}</p>
</div>
</div>
{/* Column 2: Interviewer Scorecards & Qualitative Notes */}
<div className="border-border/80 bg-card space-y-4 rounded-xl border p-4">
<div className="flex items-center justify-between gap-x-2">
<div>
<h4 className="text-foreground text-xs font-semibold">Interviewer Scorecards</h4>
<p className="text-muted-foreground text-xs">Direct debrief ratings & feedback</p>
</div>
<div className="text-warning flex items-center gap-1 text-xs font-bold tabular-nums">
<Star className="fill-warning text-warning size-3.5" />
<span>{selectedCandidate.overallRating.toFixed(1)} / 5.0</span>
</div>
</div>
<div className="space-y-3">
{selectedCandidate.interviews.map((review, index) => (
<div key={index} className="border-border/70 bg-muted/20 space-y-2 rounded-lg border p-3">
<div className="flex items-start justify-between gap-2">
<div>
<p className="text-foreground text-xs font-semibold">{review.interviewer}</p>
<p className="text-muted-foreground text-xs">{review.role}</p>
</div>
<div className="flex shrink-0 items-center gap-1.5">
<Badge
variant="outline"
className="border-success/30 bg-success/10 text-success text-xs font-medium"
>
{review.verdict}
</Badge>
<Badge variant="secondary" className="text-xs font-bold tabular-nums">
{review.score.toFixed(1)} ★
</Badge>
</div>
</div>
<p className="text-muted-foreground text-xs leading-relaxed italic">“{review.feedback}”</p>
</div>
))}
</div>
<Separator className="my-3" />
{/* Debrief Consensus Banner */}
<div className="border-success/20 bg-success/10 flex items-center justify-between gap-x-2 rounded-lg border p-3 text-xs">
<div className="flex flex-wrap items-center gap-2">
<UserCheck className="text-success size-4" />
<span className="text-foreground font-medium">Hiring Committee Consensus</span>
</div>
<Badge variant="outline" className="border-success/30 text-success font-semibold">
Unanimous Strong Hire
</Badge>
</div>
</div>
{/* Column 3: Compensation Package & Offer Structuring */}
<div className="border-border/80 bg-card space-y-4 rounded-xl border p-4">
<div className="flex items-center justify-between gap-x-2">
<div>
<h4 className="text-foreground text-xs font-semibold">Compensation & Package Model</h4>
<p className="text-muted-foreground text-xs">Target offer & benchmarking</p>
</div>
<Badge variant="outline" className="border-chart-1/30 bg-chart-1/10 text-chart-1 text-xs">
Level 7 Band
</Badge>
</div>
<div className="border-border/70 overflow-hidden rounded-lg border">
<div className="overflow-x-auto">
<Table>
<TableBody>
<TableRow className="hover:bg-transparent">
<TableCell className="text-muted-foreground py-2.5 text-xs font-medium">
Target Base Salary
</TableCell>
<TableCell className="text-foreground py-2.5 text-right text-xs font-bold tabular-nums">
{selectedCandidate.compensation.targetBase}
</TableCell>
</TableRow>
<TableRow className="hover:bg-transparent">
<TableCell className="text-muted-foreground py-2.5 text-xs font-medium">
Equity (RSUs / Grant)
</TableCell>
<TableCell className="text-foreground py-2.5 text-right text-xs font-bold tabular-nums">
{selectedCandidate.compensation.equity}
</TableCell>
</TableRow>
<TableRow className="hover:bg-transparent">
<TableCell className="text-muted-foreground py-2.5 text-xs font-medium">
Target Annual Bonus
</TableCell>
<TableCell className="text-foreground py-2.5 text-right text-xs font-bold tabular-nums">
{selectedCandidate.compensation.bonus}
</TableCell>
</TableRow>
<TableRow className="hover:bg-transparent">
<TableCell className="text-muted-foreground py-2.5 text-xs font-medium">
Sign-on Incentive
</TableCell>
<TableCell className="text-foreground py-2.5 text-right text-xs font-bold tabular-nums">
{selectedCandidate.compensation.signOn}
</TableCell>
</TableRow>
<TableRow className="bg-muted/40 hover:bg-muted/40 font-semibold">
<TableCell className="text-foreground py-2.5 text-xs">Target Year 1 OTE</TableCell>
<TableCell className="text-success text-success py-2.5 text-right text-xs font-bold tabular-nums">
{selectedCandidate.compensation.totalYear1}
</TableCell>
</TableRow>
</TableBody>
</Table>
</div>
</div>
<div className="space-y-2">
<div className="flex items-center justify-between gap-x-2 text-xs">
<span className="text-muted-foreground">Notice Period</span>
<span className="text-foreground font-medium tabular-nums">
{selectedCandidate.compensation.noticePeriod}
</span>
</div>
<div className="flex items-center justify-between gap-x-2 text-xs">
<span className="text-muted-foreground">Band Status</span>
<Badge variant="secondary" className="text-xs font-normal">
{selectedCandidate.compensation.bandStatus}
</Badge>
</div>
</div>
<Separator className="my-3" />
<div className="flex flex-col gap-2">
<Button size="sm" className="w-full gap-1.5 text-xs shadow-xs">
<FileSpreadsheet className="size-3.5" />
<span>Generate Official Offer Doc</span>
</Button>
<Button variant="outline" size="sm" className="w-full gap-1.5 text-xs shadow-xs">
<Calendar className="size-3.5" />
<span>Schedule Executive Alignment</span>
</Button>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
)
}
export default RecruitmentCandidatePipeline
Raw manifest:https://uipkge.dev/r/react/recruitment-candidate-pipeline.json
