{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "recruitment-candidate-pipeline", "title": "Recruitment Candidate Pipeline", "type": "registry:page", "files": [ { "path": "packages/registry-react/blocks/recruitment-candidate-pipeline/RecruitmentCandidatePipeline.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n ArrowRight,\n Award,\n Briefcase,\n Building2,\n Calendar,\n Check,\n CheckCircle2,\n ChevronRight,\n Clock,\n FileDown,\n FileSpreadsheet,\n FileText,\n Mail,\n MapPin,\n ShieldCheck,\n Bot,\n Star,\n Timer,\n UserCheck,\n UserPlus,\n Users,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'\n\nexport interface CandidateCompetency {\n name: string\n score: number\n benchmark: string\n}\n\nexport interface InterviewFeedback {\n interviewer: string\n role: string\n score: number\n verdict: string\n feedback: string\n}\n\nexport interface CompensationModel {\n targetBase: string\n equity: string\n signOn: string\n bonus: string\n totalYear1: string\n bandStatus: string\n noticePeriod: string\n}\n\nexport interface Candidate {\n id: string\n name: string\n role: string\n currentCompany: string\n location: string\n avatar: string\n initials: string\n email: string\n appliedDate: string\n stageId: 'screening' | 'technical' | 'culture' | 'offer'\n stageName: string\n stageDuration: string\n aiMatchScore: number\n overallRating: number\n reviewCount: number\n decision: 'Strong Hire' | 'Hire' | 'Pending Offer' | 'Offer Extended'\n decisionVariant: 'success' | 'default' | 'secondary' | 'warning' | 'info'\n keySkills: string[]\n aiSummary: string\n competencies: CandidateCompetency[]\n aiHighlights: string[]\n growthAreas: string[]\n interviews: InterviewFeedback[]\n compensation: CompensationModel\n}\n\nexport interface PipelineStage {\n id: 'screening' | 'technical' | 'culture' | 'offer'\n title: string\n stageMetric: string\n accentColor: string\n badgeVariant: 'info' | 'default' | 'warning' | 'success'\n}\n\nconst STAGES: PipelineStage[] = [\n {\n id: 'screening',\n title: 'Screening & AI Review',\n stageMetric: 'AI match 94%',\n accentColor: 'border-t-info',\n badgeVariant: 'info',\n },\n {\n id: 'technical',\n title: 'Technical Architecture Interview',\n stageMetric: 'Scorecard 4.8/5',\n accentColor: 'border-t-chart-1',\n badgeVariant: 'default',\n },\n {\n id: 'culture',\n title: 'Executive & Team Culture Sync',\n stageMetric: 'Strong Hire',\n accentColor: 'border-t-warning',\n badgeVariant: 'warning',\n },\n {\n id: 'offer',\n title: 'Offer Extended',\n stageMetric: '$240k Base + Equity · Pending',\n accentColor: 'border-t-success',\n badgeVariant: 'success',\n },\n]\n\nconst INITIAL_CANDIDATES: Candidate[] = [\n {\n id: 'cand-1',\n name: 'Elena Rostova',\n role: 'Senior Staff Design Engineer',\n currentCompany: 'Former Staff at Vercel',\n location: 'San Francisco, CA (Remote)',\n avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&auto=format&fit=crop&q=80',\n initials: 'ER',\n email: 'elena.rostova@designcraft.io',\n appliedDate: 'Aug 14, 2026',\n stageId: 'screening',\n stageName: 'Screening & AI Review',\n stageDuration: 'In stage for 2d',\n aiMatchScore: 96,\n overallRating: 4.9,\n reviewCount: 4,\n decision: 'Strong Hire',\n decisionVariant: 'success',\n keySkills: ['Vue 3', 'React', 'OKLCH', 'Reka UI'],\n aiSummary:\n 'Exceptional system architect with proven history leading unbundled design system registries, dual-framework component parity, and headless UI primitives.',\n competencies: [\n { name: 'Component Architecture & Modularity', score: 98, benchmark: 'Top 1% candidate pool' },\n { name: 'Cross-Framework Parity (Vue 3 & React)', score: 96, benchmark: 'Top 3% candidate pool' },\n { name: 'Design Tokens & OKLCH Color Systems', score: 95, benchmark: 'Top 5% candidate pool' },\n { name: 'Micro-interactions & Spring Physics', score: 92, benchmark: 'Top 8% candidate pool' },\n { name: 'RFC Authoring & Team Mentorship', score: 94, benchmark: 'Top 4% candidate pool' },\n ],\n aiHighlights: [\n 'Pioneered copy-paste unbundled component architecture serving 50k+ daily package invocations.',\n 'Deep contributor to Reka UI and Radix headless accessibility layers with zero layout shifts.',\n 'Championed OKLCH perceptually uniform palettes with zero contrast regressions across light & dark themes.',\n ],\n growthAreas: [\n 'Prefers structured async written documentation over high-frequency sync huddles (well-aligned with remote-first culture).',\n ],\n interviews: [\n {\n interviewer: 'Alex Rivera',\n role: 'VP of Engineering',\n score: 5.0,\n verdict: 'Strong Hire',\n feedback:\n 'Stunning grasp of reactivity internals, SFC compilation boundaries, and developer ergonomics. Instant technical pillar for our platform team.',\n },\n {\n interviewer: 'Sarah Chen',\n role: 'Principal Product Designer',\n score: 4.9,\n verdict: 'Strong Hire',\n feedback:\n 'Pixel-perfect intuition. Deep appreciation for sub-16ms layout transitions, optical alignment, and semantic token hierarchy.',\n },\n {\n interviewer: 'Devon Vance',\n role: 'Staff Frontend Lead',\n score: 4.8,\n verdict: 'Strong Hire',\n feedback:\n 'Clean API design philosophy. Strongly advocates for zero runtime bloat, tree-shakeable composables, and strict CVA variant patterns.',\n },\n ],\n compensation: {\n targetBase: '$240,000',\n equity: '$85,000 / yr (0.15% equity, 4-yr vest)',\n signOn: '$25,000',\n bonus: '$36,000 (15% target)',\n totalYear1: '$386,000',\n bandStatus: 'Within Level 7 Band ($225k – $255k)',\n noticePeriod: '2 Weeks',\n },\n },\n {\n id: 'cand-2',\n name: 'Marcus Chen',\n role: 'Senior Frontend Architect',\n currentCompany: 'Former Architect at Stripe',\n location: 'Seattle, WA (Hybrid)',\n avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&auto=format&fit=crop&q=80',\n initials: 'MC',\n email: 'marcus.chen@fintechcore.dev',\n appliedDate: 'Aug 12, 2026',\n stageId: 'screening',\n stageName: 'Screening & AI Review',\n stageDuration: 'In stage for 3d',\n aiMatchScore: 92,\n overallRating: 4.7,\n reviewCount: 3,\n decision: 'Hire',\n decisionVariant: 'default',\n keySkills: ['TypeScript', 'Tailwind v4', 'Accessibility', 'Turborepo'],\n aiSummary:\n 'Expert in enterprise monorepo governance, automated build tooling optimization, and WCAG AA accessibility test infrastructure.',\n competencies: [\n { name: 'Component Architecture & Modularity', score: 94, benchmark: 'Top 5% candidate pool' },\n { name: 'Cross-Framework Parity (Vue 3 & React)', score: 90, benchmark: 'Top 10% candidate pool' },\n { name: 'Design Tokens & OKLCH Color Systems', score: 91, benchmark: 'Top 9% candidate pool' },\n { name: 'Micro-interactions & Spring Physics', score: 88, benchmark: 'Top 12% candidate pool' },\n { name: 'RFC Authoring & Team Mentorship', score: 95, benchmark: 'Top 3% candidate pool' },\n ],\n aiHighlights: [\n 'Decreased monorepo CI build times by 54% through caching and Turborepo remote pipeline execution.',\n 'Built automated accessibility testing suite with 99.8% regression catch rate across payment checkout flows.',\n ],\n growthAreas: [\n 'Has spent less time with Vue 3.5 SFC script setup macros recently, mostly focused on React and Next.js.',\n ],\n interviews: [\n {\n interviewer: 'Alex Rivera',\n role: 'VP of Engineering',\n score: 4.8,\n verdict: 'Hire',\n feedback:\n 'Very strong fundamentals on build systems, packaging, and high-reliability data tables under heavy load.',\n },\n {\n interviewer: 'Devon Vance',\n role: 'Staff Frontend Lead',\n score: 4.6,\n verdict: 'Hire',\n feedback: 'Solid architecture chops, great understanding of semantic token resolution and bundle footprint.',\n },\n ],\n compensation: {\n targetBase: '$230,000',\n equity: '$70,000 / yr',\n signOn: '$20,000',\n bonus: '$34,500 (15% target)',\n totalYear1: '$354,500',\n bandStatus: 'Within Level 7 Band ($225k – $255k)',\n noticePeriod: '3 Weeks',\n },\n },\n {\n id: 'cand-3',\n name: 'Siddharth Mehta',\n role: 'Principal Systems Engineer',\n currentCompany: 'Former Principal at Figma',\n location: 'New York, NY (Remote)',\n avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=150&auto=format&fit=crop&q=80',\n initials: 'SM',\n email: 'siddharth.m@figma-alumni.net',\n appliedDate: 'Aug 10, 2026',\n stageId: 'technical',\n stageName: 'Technical Architecture Interview',\n stageDuration: 'In stage for 4d',\n aiMatchScore: 95,\n overallRating: 4.9,\n reviewCount: 5,\n decision: 'Strong Hire',\n decisionVariant: 'success',\n keySkills: ['Design Systems', 'Canvas/WebGL', 'Reka UI', 'Radix'],\n aiSummary:\n 'Visionary in design token compilation engines, dual-engine canvas rendering, and cross-platform design-to-code pipelines.',\n competencies: [\n { name: 'Component Architecture & Modularity', score: 97, benchmark: 'Top 2% candidate pool' },\n { name: 'Cross-Framework Parity (Vue 3 & React)', score: 93, benchmark: 'Top 6% candidate pool' },\n { name: 'Design Tokens & OKLCH Color Systems', score: 98, benchmark: 'Top 1% candidate pool' },\n { name: 'Micro-interactions & Spring Physics', score: 95, benchmark: 'Top 3% candidate pool' },\n { name: 'RFC Authoring & Team Mentorship', score: 96, benchmark: 'Top 2% candidate pool' },\n ],\n aiHighlights: [\n 'Designed token transformation schema syncing design primitives directly to 6 distinct production platforms.',\n 'Spearheaded low-latency viewport virtualization rendering 10k+ nodes at a constant 120 FPS.',\n ],\n growthAreas: ['Prefers deep architecture sprint focus over rapid day-to-day experimental marketing product churn.'],\n interviews: [\n {\n interviewer: 'Sarah Chen',\n role: 'Principal Product Designer',\n score: 5.0,\n verdict: 'Strong Hire',\n feedback: 'World-class understanding of designer-developer handoff, sub-layer nesting, and token semantics.',\n },\n {\n interviewer: 'Devon Vance',\n role: 'Staff Frontend Lead',\n score: 4.8,\n verdict: 'Strong Hire',\n feedback: 'Masterful architectural whiteboard session on headless state machines and zero-lockin registries.',\n },\n ],\n compensation: {\n targetBase: '$245,000',\n equity: '$90,000 / yr',\n signOn: '$30,000',\n bonus: '$36,750 (15% target)',\n totalYear1: '$401,750',\n bandStatus: 'Top of Level 7 Band ($225k – $255k)',\n noticePeriod: '4 Weeks',\n },\n },\n {\n id: 'cand-4',\n name: 'Amara Okafor',\n role: 'Lead UI Engineer',\n currentCompany: 'Former Lead UI at Linear',\n location: 'Austin, TX (Remote)',\n avatar: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=150&auto=format&fit=crop&q=80',\n initials: 'AO',\n email: 'amara.okafor@craftwork.io',\n appliedDate: 'Aug 08, 2026',\n stageId: 'technical',\n stageName: 'Technical Architecture Interview',\n stageDuration: 'In stage for 1d',\n aiMatchScore: 91,\n overallRating: 4.8,\n reviewCount: 4,\n decision: 'Strong Hire',\n decisionVariant: 'success',\n keySkills: ['Micro-interactions', 'Vue 3.5', 'Tailwind CSS', 'Performance'],\n aiSummary:\n 'Specialist in sub-16ms keyboard-first workflows, fluid spring physics, and ultra-dense desktop data layouts.',\n competencies: [\n { name: 'Component Architecture & Modularity', score: 92, benchmark: 'Top 8% candidate pool' },\n { name: 'Cross-Framework Parity (Vue 3 & React)', score: 94, benchmark: 'Top 5% candidate pool' },\n { name: 'Design Tokens & OKLCH Color Systems', score: 93, benchmark: 'Top 7% candidate pool' },\n { name: 'Micro-interactions & Spring Physics', score: 99, benchmark: 'Top 1% candidate pool' },\n { name: 'RFC Authoring & Team Mentorship', score: 90, benchmark: 'Top 10% candidate pool' },\n ],\n aiHighlights: [\n 'Built gesture & spring motion system with 0 runtime jank and native 120Hz responsiveness.',\n 'Created command palette keyboard navigation engine benchmarked across 2M daily power-user queries.',\n ],\n growthAreas: ['Looking to broaden direct experience in large-scale compiler and AST code generation pipelines.'],\n interviews: [\n {\n interviewer: 'Alex Rivera',\n role: 'VP of Engineering',\n score: 4.8,\n verdict: 'Strong Hire',\n feedback: 'Exceptional craft and keyboard ergonomics. Perfect fit for our design engineering culture.',\n },\n {\n interviewer: 'Sarah Chen',\n role: 'Principal Product Designer',\n score: 4.9,\n verdict: 'Strong Hire',\n feedback: 'Delightful eye for interaction states, hover intents, and subtle spring tension calibrations.',\n },\n ],\n compensation: {\n targetBase: '$235,000',\n equity: '$80,000 / yr',\n signOn: '$20,000',\n bonus: '$35,250 (15% target)',\n totalYear1: '$370,250',\n bandStatus: 'Within Level 7 Band ($225k – $255k)',\n noticePeriod: '2 Weeks',\n },\n },\n {\n id: 'cand-5',\n name: 'Lucas Vance',\n role: 'Head of Design Technology',\n currentCompany: 'Former Head of Design Tech at Ramp',\n location: 'San Francisco, CA (On-site)',\n avatar: 'https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?w=150&auto=format&fit=crop&q=80',\n initials: 'LV',\n email: 'lucas.vance@fintechcraft.co',\n appliedDate: 'Aug 05, 2026',\n stageId: 'culture',\n stageName: 'Executive & Team Culture Sync',\n stageDuration: 'In stage for 5d',\n aiMatchScore: 94,\n overallRating: 4.9,\n reviewCount: 6,\n decision: 'Strong Hire',\n decisionVariant: 'success',\n keySkills: ['OKLCH Tokens', 'Vue 3', 'Mentorship', 'API Design'],\n aiSummary:\n 'Proven team multiplier who scaled design tech teams from 0 to 18 engineers with high trust, craft rigor, and speed.',\n competencies: [\n { name: 'Component Architecture & Modularity', score: 95, benchmark: 'Top 4% candidate pool' },\n { name: 'Cross-Framework Parity (Vue 3 & React)', score: 92, benchmark: 'Top 7% candidate pool' },\n { name: 'Design Tokens & OKLCH Color Systems', score: 97, benchmark: 'Top 2% candidate pool' },\n { name: 'Micro-interactions & Spring Physics', score: 91, benchmark: 'Top 9% candidate pool' },\n { name: 'RFC Authoring & Team Mentorship', score: 98, benchmark: 'Top 1% candidate pool' },\n ],\n aiHighlights: [\n 'Established engineering mentorship tracks that accelerated senior promotion velocity by 40%.',\n 'Co-authored foundational RFC for unified design tokens across web, iOS, and Android clients.',\n ],\n growthAreas: [\n 'Best partnered with an experienced product manager for high-velocity customer roadmap prioritization.',\n ],\n interviews: [\n {\n interviewer: 'Alex Rivera',\n role: 'VP of Engineering',\n score: 5.0,\n verdict: 'Strong Hire',\n feedback: 'Incredible leader with high EQ and deep technical chops. Immediate culture and craft multiplier.',\n },\n {\n interviewer: 'Devon Vance',\n role: 'Staff Frontend Lead',\n score: 4.8,\n verdict: 'Strong Hire',\n feedback: 'Inspiring communicator with razor-sharp code review standards and pragmatic architectural empathy.',\n },\n ],\n compensation: {\n targetBase: '$240,000',\n equity: '$85,000 / yr',\n signOn: '$25,000',\n bonus: '$36,000 (15% target)',\n totalYear1: '$386,000',\n bandStatus: 'Within Level 7 Band ($225k – $255k)',\n noticePeriod: 'Immediate',\n },\n },\n {\n id: 'cand-6',\n name: 'Sofia Lindqvist',\n role: 'Staff Design Technologist',\n currentCompany: 'Former Staff at Spotify',\n location: 'Stockholm / Remote US',\n avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=150&auto=format&fit=crop&q=80',\n initials: 'SL',\n email: 'sofia.lindqvist@audiocraft.dev',\n appliedDate: 'Aug 01, 2026',\n stageId: 'offer',\n stageName: 'Offer Extended',\n stageDuration: 'In stage for 2d (Offer valid 5d)',\n aiMatchScore: 97,\n overallRating: 5.0,\n reviewCount: 7,\n decision: 'Offer Extended',\n decisionVariant: 'success',\n keySkills: ['Vue 3', 'React', 'Design Systems', 'Craft & Motion'],\n aiSummary:\n 'Flawless all-around engineering craft leader with unanimous consensus Strong Hire across 7 cross-functional panels.',\n competencies: [\n { name: 'Component Architecture & Modularity', score: 99, benchmark: 'Top 1% candidate pool' },\n { name: 'Cross-Framework Parity (Vue 3 & React)', score: 97, benchmark: 'Top 2% candidate pool' },\n { name: 'Design Tokens & OKLCH Color Systems', score: 98, benchmark: 'Top 1% candidate pool' },\n { name: 'Micro-interactions & Spring Physics', score: 96, benchmark: 'Top 2% candidate pool' },\n { name: 'RFC Authoring & Team Mentorship', score: 97, benchmark: 'Top 2% candidate pool' },\n ],\n aiHighlights: [\n 'Unanimous 5.0 consensus from all 7 hiring committee and executive interviewers.',\n 'Architected component registry ecosystem servicing 600M monthly active music listeners.',\n ],\n growthAreas: ['Requires CET / US-East overlap working agreement for synchronous core team design reviews.'],\n interviews: [\n {\n interviewer: 'Alex Rivera',\n role: 'VP of Engineering',\n score: 5.0,\n verdict: 'Offer Extended',\n feedback: 'One of the finest design engineering candidates we have ever evaluated. Flawless technical review.',\n },\n {\n interviewer: 'Sarah Chen',\n role: 'Principal Product Designer',\n score: 5.0,\n verdict: 'Offer Extended',\n feedback:\n 'Phenomenal partner for design teams. Completely dissolves the barrier between Figma and production code.',\n },\n ],\n compensation: {\n targetBase: '$240,000',\n equity: '$85,000 / yr (4-yr vest)',\n signOn: '$25,000',\n bonus: '$36,000 (15% target)',\n totalYear1: '$386,000',\n bandStatus: 'Offer Extended ($240k Base + Equity)',\n noticePeriod: '2 Weeks',\n },\n },\n]\n\nexport interface RecruitmentCandidatePipelineProps extends React.HTMLAttributes {}\n\nexport function RecruitmentCandidatePipeline({ className, ...props }: RecruitmentCandidatePipelineProps) {\n const [candidates, setCandidates] = React.useState(INITIAL_CANDIDATES)\n const [selectedCandidateId, setSelectedCandidateId] = React.useState('cand-1')\n\n const selectedCandidate = React.useMemo(() => {\n return candidates.find((c) => c.id === selectedCandidateId) ?? candidates[0]\n }, [candidates, selectedCandidateId])\n\n const selectCandidate = React.useCallback((id: string) => {\n setSelectedCandidateId(id)\n }, [])\n\n const advanceCandidate = React.useCallback((candidateId: string) => {\n setCandidates((prev) =>\n prev.map((c) => {\n if (c.id !== candidateId) return c\n if (c.stageId === 'screening') {\n return {\n ...c,\n stageId: 'technical',\n stageName: 'Technical Architecture Interview',\n stageDuration: 'Just advanced',\n }\n }\n if (c.stageId === 'technical') {\n return {\n ...c,\n stageId: 'culture',\n stageName: 'Executive & Team Culture Sync',\n stageDuration: 'Just advanced',\n }\n }\n if (c.stageId === 'culture') {\n return {\n ...c,\n stageId: 'offer',\n stageName: 'Offer Extended',\n stageDuration: 'Offer stage initiated',\n }\n }\n return c\n }),\n )\n }, [])\n\n const getCandidatesForStage = React.useCallback(\n (stageId: PipelineStage['id']) => {\n return candidates.filter((c) => c.stageId === stageId)\n },\n [candidates],\n )\n\n return (\n
\n {/* Header Section */}\n
\n
\n
\n

\n Senior Staff Design Engineer\n

\n \n \n Engineering & Product\n \n \n 1 Open Headcount\n \n \n
\n

\n AI Candidate Pipeline & Interactive Talent Scorecard\n 48 Total Applicants\n 6 Active in Pipeline\n Hiring Lead: Alex Rivera\n

\n
\n\n
\n \n \n
\n
\n\n {/* 4 Recruiting KPI Cards */}\n
\n {/* Total Applicants */}\n \n \n Total Applicants\n
\n \n
\n \n \n
\n
48
\n \n +28% WoW\n \n
\n

+14 this week · 82% qualified threshold

\n \n \n\n {/* AI Resume Match Rate */}\n \n \n AI Resume Match Rate\n
\n \n
\n \n \n
\n
88.4%
\n \n Top Quartile\n \n
\n

Avg match score · Claude 3.7 Sonnet analysis

\n \n \n\n {/* Time to Hire Velocity */}\n \n \n Time to Hire Velocity\n
\n \n
\n \n \n
\n
18 Days
\n \n -6d vs Q2\n \n
\n

Industry benchmark: 32d avg cycle

\n \n \n\n {/* Offers Extended */}\n \n \n Offers Extended\n
\n \n
\n \n \n
\n
1 Pending
\n \n 95% Close Prob\n \n
\n

$240k base + equity package under review

\n \n \n
\n\n {/* 4-Stage Candidate Pipeline Board */}\n
\n
\n
\n

Active Interview Pipeline

\n \n 6 in Progress\n \n
\n \n
\n\n
\n {STAGES.map((stage) => {\n const stageCandidates = getCandidatesForStage(stage.id)\n return (\n
\n {/* Stage Column Header */}\n
\n
\n
\n \n

\n {\n {\n screening: 'Screening & AI Review',\n technical: 'Technical Architecture Interview',\n culture: 'Executive & Team Culture Sync',\n offer: 'Offer Extended',\n }[stage.id]\n }\n

\n
\n \n {stageCandidates.length}\n \n
\n
\n {stage.stageMetric}\n
\n
\n\n {/* Candidates list in Stage */}\n
\n {stageCandidates.map((cand) => (\n selectCandidate(cand.id)}\n >\n {/* Candidate Top Row: Avatar + Name + AI Match Pill */}\n
\n
\n \n \n {cand.initials}\n \n
\n

\n {cand.name}\n

\n

{cand.currentCompany}

\n
\n
\n\n {/* AI Resume Match pill */}\n \n \n {cand.aiMatchScore}% Match\n \n
\n\n {/* Candidate Rating & Stage Duration */}\n
\n
\n \n {cand.overallRating.toFixed(1)}\n ({cand.reviewCount} interviewers)\n
\n
\n \n {cand.stageDuration}\n
\n
\n\n {/* Key Skills badges */}\n
\n {cand.keySkills.map((skill) => (\n \n {skill}\n \n ))}\n
\n\n {/* Card Action Buttons */}\n
\n {\n e.stopPropagation()\n selectCandidate(cand.id)\n }}\n >\n \n View Scorecard\n \n\n {\n e.stopPropagation()\n advanceCandidate(cand.id)\n }}\n >\n Advance\n \n \n
\n
\n ))}\n\n {/* Empty stage placeholder if all candidates moved */}\n {stageCandidates.length === 0 && (\n
\n \n

No candidates in this stage

\n
\n )}\n
\n
\n )\n })}\n
\n
\n\n {/* Candidate Detailed AI Scorecard Card / Drawer Section */}\n \n {/* Top Scorecard Header Bar */}\n
\n {/* Candidate Quick Selector Bar */}\n
\n
\n \n \n Candidate AI Scorecard & Interview Matrix\n \n
\n\n {/* Switcher pills for all 6 candidates */}\n
\n {candidates.map((c) => (\n selectCandidate(c.id)}\n >\n {c.name}\n \n {c.aiMatchScore}%\n \n \n ))}\n
\n
\n\n {/* Selected Candidate Bio Header */}\n
\n
\n \n \n {selectedCandidate.initials}\n \n\n
\n
\n

{selectedCandidate.name}

\n \n \n {selectedCandidate.aiMatchScore}% AI Fit\n \n \n {selectedCandidate.decision}\n \n
\n\n
\n \n \n {selectedCandidate.currentCompany}\n \n \n \n {selectedCandidate.location}\n \n \n \n {selectedCandidate.email}\n \n \n \n Applied {selectedCandidate.appliedDate}\n \n
\n
\n
\n\n {/* Header Action Buttons */}\n
\n advanceCandidate(selectedCandidate.id)}\n >\n Advance to Next Round\n \n \n \n
\n
\n
\n\n {/* Scorecard Content: 3-Column Grid */}\n \n {/* AI Executive Summary Banner */}\n
\n
\n \n
\n
\n

\n AI Synthesized Resume & Interview Consensus\n \n High Confidence (98.2%)\n \n

\n

\n {{\n 'cand-1':\n 'Exceptional system architect with proven history leading unbundled design system registries, dual-framework component parity, and headless UI primitives.',\n 'cand-2':\n 'Expert in enterprise monorepo governance, automated build tooling optimization, and WCAG AA accessibility test infrastructure.',\n 'cand-3':\n 'Visionary in design token compilation engines, dual-engine canvas rendering, and cross-platform design-to-code pipelines.',\n 'cand-4':\n 'Specialist in sub-16ms keyboard-first workflows, fluid spring physics, and ultra-dense desktop data layouts.',\n 'cand-5':\n 'Proven team multiplier who scaled design tech teams from 0 to 18 engineers with high trust, craft rigor, and speed.',\n 'cand-6':\n 'Flawless all-around engineering craft leader with unanimous consensus Strong Hire across 7 cross-functional panels.',\n }[selectedCandidate.id] || selectedCandidate.aiSummary}\n

\n
\n
\n\n
\n {/* Column 1: AI Competency & Skill Radar Breakdown */}\n
\n
\n
\n

Competency Scorecard

\n

AI parsed technical signals

\n
\n \n {selectedCandidate.competencies.length} Pillars\n \n
\n\n
\n {selectedCandidate.competencies.map((comp) => (\n
\n
\n \n {comp.name}\n \n {comp.score}%\n
\n \n
\n {comp.benchmark}\n
\n
\n ))}\n
\n\n \n\n {/* AI Highlights list */}\n
\n
\n \n Key AI Resume Signals\n
\n
    \n {selectedCandidate.aiHighlights.map((highlight, idx) => (\n
  • \n •\n {highlight}\n
    • \n ))}\n
\n
\n\n {/* Growth Areas / Calibration */}\n
\n
\n \n Interviewer Calibration Note\n
\n

{selectedCandidate.growthAreas[0]}

\n
\n
\n\n {/* Column 2: Interviewer Scorecards & Qualitative Notes */}\n
\n
\n
\n

Interviewer Scorecards

\n

Direct debrief ratings & feedback

\n
\n
\n \n {selectedCandidate.overallRating.toFixed(1)} / 5.0\n
\n
\n\n
\n {selectedCandidate.interviews.map((review, index) => (\n
\n
\n
\n

{review.interviewer}

\n

{review.role}

\n
\n
\n \n {review.verdict}\n \n \n {review.score.toFixed(1)} ★\n \n
\n
\n

“{review.feedback}”

\n
\n ))}\n
\n\n \n\n {/* Debrief Consensus Banner */}\n
\n
\n \n Hiring Committee Consensus\n
\n \n Unanimous Strong Hire\n \n
\n
\n\n {/* Column 3: Compensation Package & Offer Structuring */}\n
\n
\n
\n

Compensation & Package Model

\n

Target offer & benchmarking

\n
\n \n Level 7 Band\n \n
\n\n
\n
\n \n \n \n \n Target Base Salary\n \n \n {selectedCandidate.compensation.targetBase}\n \n \n \n \n Equity (RSUs / Grant)\n \n \n {selectedCandidate.compensation.equity}\n \n \n \n \n Target Annual Bonus\n \n \n {selectedCandidate.compensation.bonus}\n \n \n \n \n Sign-on Incentive\n \n \n {selectedCandidate.compensation.signOn}\n \n \n \n Target Year 1 OTE\n \n {selectedCandidate.compensation.totalYear1}\n \n \n \n
\n
\n
\n\n
\n
\n Notice Period\n \n {selectedCandidate.compensation.noticePeriod}\n \n
\n
\n Band Status\n \n {selectedCandidate.compensation.bandStatus}\n \n
\n
\n\n \n\n
\n \n \n
\n
\n
\n \n \n \n )\n}\n\nexport default RecruitmentCandidatePipeline\n", "type": "registry:page", "target": "~/components/blocks/RecruitmentCandidatePipeline.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/avatar.json", "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/table.json" ], "description": "AI-powered applicant tracking pipeline, candidate scorecard, resume match scoring, and interview stages board.", "categories": [ "hr", "app", "dashboard", "ai" ] }