{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "recruitment-candidate-pipeline", "title": "Recruitment Candidate Pipeline", "type": "registry:page", "files": [ { "path": "packages/registry-angular/blocks/recruitment-candidate-pipeline/recruitment-candidate-pipeline.component.ts", "content": "// AI-powered applicant tracking pipeline, candidate scorecard, resume match scoring,\n// and interview stages board. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n ArrowRight,\n Award,\n Bot,\n Briefcase,\n Building2,\n Calendar,\n Check,\n CheckCircle2,\n ChevronRight,\n Clock,\n FileDown,\n FileSpreadsheet,\n FileText,\n LucideAngularModule,\n Mail,\n MapPin,\n ShieldCheck,\n Star,\n Timer,\n UserCheck,\n UserPlus,\n Users,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent, UiAvatarImageComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\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 initialCandidates: 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 unbundled standalone 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\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-recruitment-candidate-pipeline, [ui-recruitment-candidate-pipeline]',\n standalone: true,\n // The block renders its own root
: keep this wrapper out of the layout.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiAvatarImageComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiProgressComponent,\n UiSeparatorComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n \n
\n
\n

Senior Staff Design Engineer

\n \n \n Engineering & Product\n \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 \n
\n \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 \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 \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 \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 \n
\n
\n
\n

Active Interview Pipeline

\n 6 in Progress \n
\n \n
\n\n
\n @for (stage of stages; track stage.id) {\n
\n \n
\n
\n
\n \n

\n {{ stage.title }}\n

\n
\n \n {{ getCandidatesForStage(stage.id).length }}\n \n
\n
\n {{ stage.stageMetric }}\n
\n
\n\n \n
\n @for (cand of getCandidatesForStage(stage.id); track cand.id) {\n
\n \n
\n
\n \n \n {{ cand.initials }}\n \n
\n \n {{ cand.name }}\n \n

\n {{ cand.currentCompany }}\n

\n
\n
\n\n \n \n \n {{ cand.aiMatchScore }}% Match\n \n
\n\n \n
\n
\n \n {{ cand.overallRating.toFixed(1) }}\n ({{ cand.reviewCount }} interviewers)\n
\n
\n \n {{ cand.stageDuration }}\n
\n
\n\n \n
\n @for (skill of cand.keySkills; track skill) {\n \n {{ skill }}\n \n }\n
\n\n \n
\n \n \n View Scorecard\n \n\n \n Advance\n \n \n
\n
\n }\n\n \n @if (getCandidatesForStage(stage.id).length === 0) {\n \n \n

No candidates in this stage

\n
\n }\n
\n
\n }\n
\n
\n\n \n
\n \n
\n \n
\n
\n \n \n Candidate AI Scorecard & Interview Matrix\n \n
\n\n \n
\n @for (c of candidates(); track c.id) {\n \n }\n
\n
\n\n \n
\n
\n \n \n {{\n selectedCandidate().initials\n }}\n \n\n
\n
\n

\n {{ selectedCandidate().name }}\n

\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 \n
\n \n Advance to Next Round\n \n \n \n
\n
\n
\n\n \n
\n \n
\n
\n \n
\n
\n

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

\n

\n {{ selectedCandidate().aiSummary }}\n

\n
\n
\n\n
\n \n
\n
\n
\n

Competency Scorecard

\n

AI parsed technical signals

\n
\n \n {{ selectedCandidate().competencies.length }} Pillars\n \n
\n\n
\n @for (comp of selectedCandidate().competencies; track comp.name) {\n
\n
\n \n {{ comp.name }}\n \n {{ comp.score }}% \n
\n
\n
\n {{ comp.benchmark }}\n
\n
\n }\n
\n\n \n\n \n
\n
\n \n Key AI Resume Signals\n
\n
    \n @for (highlight of selectedCandidate().aiHighlights; track highlight) {\n
  • \n •\n {{ highlight }}\n
    • \n }\n
\n
\n\n \n
\n
\n \n Interviewer Calibration Note\n
\n

\n {{ selectedCandidate().growthAreas[0] }}\n

\n
\n
\n\n \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 @for (review of selectedCandidate().interviews; track review.interviewer) {\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 \n \n
\n \n Hiring Committee Consensus\n
\n \n Unanimous Strong Hire\n \n
\n
\n\n \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})\nexport class UiRecruitmentCandidatePipelineComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Award = Award\n protected readonly Bot = Bot\n protected readonly Briefcase = Briefcase\n protected readonly Building2 = Building2\n protected readonly Calendar = Calendar\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly ChevronRight = ChevronRight\n protected readonly Clock = Clock\n protected readonly FileDown = FileDown\n protected readonly FileSpreadsheet = FileSpreadsheet\n protected readonly FileText = FileText\n protected readonly Mail = Mail\n protected readonly MapPin = MapPin\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Star = Star\n protected readonly Timer = Timer\n protected readonly UserCheck = UserCheck\n protected readonly UserPlus = UserPlus\n protected readonly Users = Users\n\n protected readonly stages = stages\n\n @Input('class') className?: string\n @Input() set initialCandidateId(v: string | undefined) {\n if (v) this.selectedCandidateId.set(v)\n }\n\n readonly candidates = signal(\n initialCandidates.map((c) => ({\n ...c,\n keySkills: [...c.keySkills],\n competencies: c.competencies.map((k) => ({ ...k })),\n aiHighlights: [...c.aiHighlights],\n growthAreas: [...c.growthAreas],\n interviews: c.interviews.map((i) => ({ ...i })),\n compensation: { ...c.compensation },\n })),\n )\n\n readonly selectedCandidateId = signal('cand-1')\n\n readonly selectedCandidate = computed(() => {\n return this.candidates().find((c) => c.id === this.selectedCandidateId()) ?? this.candidates()[0]!\n })\n\n get rootClass(): string {\n return cn('w-full space-y-6 font-sans', this.className)\n }\n\n stageDotClass(stageId: PipelineStage['id']): string {\n return cn(\n 'size-2 shrink-0 rounded-full',\n stageId === 'screening'\n ? 'bg-info'\n : stageId === 'technical'\n ? 'bg-chart-1'\n : stageId === 'culture'\n ? 'bg-warning'\n : 'bg-success',\n )\n }\n\n candidateCardClass(candidateId: string): string {\n return cn(\n 'group bg-card relative flex cursor-pointer flex-col gap-3 rounded-lg border p-3.5 shadow-xs transition-colors duration-200',\n this.selectedCandidateId() === candidateId\n ? 'border-primary ring-primary/20 bg-card shadow-sm ring-2'\n : 'border-border/80 hover:border-border hover:shadow-sm',\n )\n }\n\n switcherClass(candidateId: string): string {\n return cn(\n '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',\n this.selectedCandidateId() === candidateId\n ? 'bg-primary text-primary-foreground shadow-xs'\n : 'bg-background hover:bg-muted text-muted-foreground hover:text-foreground border-border/70 border',\n )\n }\n\n switcherScoreClass(candidateId: string): string {\n return cn(\n 'py-0.2 rounded-full px-1 text-xs font-semibold tabular-nums',\n this.selectedCandidateId() === candidateId\n ? 'bg-primary-foreground/20 text-primary-foreground'\n : 'bg-muted text-muted-foreground',\n )\n }\n\n selectCandidate(id: string): void {\n this.selectedCandidateId.set(id)\n }\n\n advanceCandidate(candidateId: string): void {\n this.candidates.update((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 { ...c, stageId: 'offer', stageName: 'Offer Extended', stageDuration: 'Offer stage initiated' }\n }\n return c\n }),\n )\n }\n\n getCandidatesForStage(stageId: PipelineStage['id']): Candidate[] {\n return this.candidates().filter((c) => c.stageId === stageId)\n }\n}\n", "type": "registry:page", "target": "~/src/app/components/blocks/recruitment-candidate-pipeline/recruitment-candidate-pipeline.component.ts" }, { "path": "packages/registry-angular/blocks/recruitment-candidate-pipeline/index.ts", "content": "export {\n UiRecruitmentCandidatePipelineComponent,\n type Candidate,\n type CandidateCompetency,\n type CompensationModel,\n type InterviewFeedback,\n type PipelineStage,\n} from './recruitment-candidate-pipeline.component'\n", "type": "registry:page", "target": "~/src/app/components/blocks/recruitment-candidate-pipeline/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/table.json" ], "description": "AI-powered applicant tracking pipeline, candidate scorecard, resume match scoring, and interview stages board.", "categories": [ "hr", "app", "dashboard", "ai" ] }