{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "recruitment-candidate-pipeline",
  "title": "Recruitment Candidate Pipeline",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-vue/blocks/recruitment-candidate-pipeline/RecruitmentCandidatePipeline.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref, type HTMLAttributes } from 'vue'\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  Bot,\n  ShieldCheck,\n  Star,\n  Timer,\n  UserCheck,\n  UserPlus,\n  Users,\n} from 'lucide-vue-next'\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\ninterface Props {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<Props>()\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 candidates = ref<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\nconst selectedCandidateId = ref<string>('cand-1')\n\nconst selectedCandidate = computed(() => {\n  return candidates.value.find((c) => c.id === selectedCandidateId.value) ?? candidates.value[0]\n})\n\nfunction selectCandidate(id: string) {\n  selectedCandidateId.value = id\n}\n\nfunction advanceCandidate(candidateId: string) {\n  const c = candidates.value.find((item) => item.id === candidateId)\n  if (!c) return\n\n  if (c.stageId === 'screening') {\n    c.stageId = 'technical'\n    c.stageName = 'Technical Architecture Interview'\n    c.stageDuration = 'Just advanced'\n  } else if (c.stageId === 'technical') {\n    c.stageId = 'culture'\n    c.stageName = 'Executive & Team Culture Sync'\n    c.stageDuration = 'Just advanced'\n  } else if (c.stageId === 'culture') {\n    c.stageId = 'offer'\n    c.stageName = 'Offer Extended'\n    c.stageDuration = 'Offer stage initiated'\n  }\n}\n\nfunction getCandidatesForStage(stageId: PipelineStage['id']) {\n  return candidates.value.filter((c) => c.stageId === stageId)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full space-y-6 font-sans', props.class)\">\n    <!-- Header Section -->\n    <div\n      class=\"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\"\n    >\n      <div class=\"space-y-1.5\">\n        <div class=\"flex flex-wrap items-center gap-2.5\">\n          <h1 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">Senior Staff Design Engineer</h1>\n          <Badge variant=\"secondary\" class=\"gap-1 font-medium\">\n            <Building2 class=\"text-muted-foreground size-3\" />\n            Engineering & Product\n          </Badge>\n          <Badge variant=\"outline\" class=\"border-success/30 bg-success/10 text-success gap-1 font-medium\">\n            <span class=\"bg-success size-1.5 animate-pulse rounded-full\" />\n            1 Open Headcount\n          </Badge>\n          <Badge variant=\"outline\" class=\"text-muted-foreground hidden sm:inline-flex\"> Req: #ENG-2026-08 </Badge>\n        </div>\n        <p class=\"text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-1 text-xs sm:text-sm\">\n          <span>AI Candidate Pipeline & Interactive Talent Scorecard</span>\n          <span class=\"text-foreground font-medium tabular-nums\">48 Total Applicants</span>\n          <span class=\"text-success text-success font-medium tabular-nums\">6 Active in Pipeline</span>\n          <span>Hiring Lead: Alex Rivera</span>\n        </p>\n      </div>\n\n      <div class=\"flex flex-wrap items-center gap-2.5\">\n        <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 shadow-xs\">\n          <FileDown class=\"size-3.5\" />\n          <span>Export ATS CSV</span>\n        </Button>\n        <Button size=\"sm\" class=\"gap-1.5 shadow-xs\">\n          <UserPlus class=\"size-3.5\" />\n          <span>Add Candidate</span>\n        </Button>\n      </div>\n    </div>\n\n    <!-- 4 Recruiting KPI Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- Total Applicants -->\n      <Card class=\"border-border/80 shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium\">Total Applicants</CardTitle>\n          <div class=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-lg\">\n            <Users class=\"size-4\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-1\">\n          <div class=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n            <div class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">48</div>\n            <Badge\n              variant=\"outline\"\n              class=\"border-success/30 bg-success/10 text-success text-success text-xs font-medium tabular-nums\"\n            >\n              +28% WoW\n            </Badge>\n          </div>\n          <p class=\"text-muted-foreground text-xs\">+14 this week · 82% qualified threshold</p>\n        </CardContent>\n      </Card>\n\n      <!-- AI Resume Match Rate -->\n      <Card class=\"border-border/80 shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium\">AI Resume Match Rate</CardTitle>\n          <div class=\"bg-success/10 text-success flex size-8 items-center justify-center rounded-lg\">\n            <Award class=\"size-4\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-1\">\n          <div class=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n            <div class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">88.4%</div>\n            <Badge\n              variant=\"outline\"\n              class=\"border-info/30 bg-info/10 text-info text-info text-xs font-medium tabular-nums\"\n            >\n              Top Quartile\n            </Badge>\n          </div>\n          <p class=\"text-muted-foreground text-xs\">Avg match score · Claude 3.7 Sonnet analysis</p>\n        </CardContent>\n      </Card>\n\n      <!-- Time to Hire Velocity -->\n      <Card class=\"border-border/80 shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium\">Time to Hire Velocity</CardTitle>\n          <div class=\"bg-chart-1/10 text-chart-1 flex size-8 items-center justify-center rounded-lg\">\n            <Timer class=\"size-4\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-1\">\n          <div class=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n            <div class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">18 Days</div>\n            <Badge\n              variant=\"outline\"\n              class=\"border-success/30 bg-success/10 text-success text-success text-xs font-medium tabular-nums\"\n            >\n              -6d vs Q2\n            </Badge>\n          </div>\n          <p class=\"text-muted-foreground text-xs\">Industry benchmark: 32d avg cycle</p>\n        </CardContent>\n      </Card>\n\n      <!-- Offers Extended -->\n      <Card class=\"border-border/80 shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium\">Offers Extended</CardTitle>\n          <div class=\"bg-warning/10 text-warning flex size-8 items-center justify-center rounded-lg\">\n            <Award class=\"size-4\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-1\">\n          <div class=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n            <div class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">1 Pending</div>\n            <Badge\n              variant=\"outline\"\n              class=\"border-warning/30 bg-warning/10 text-warning text-warning text-xs font-medium tabular-nums\"\n            >\n              95% Close Prob\n            </Badge>\n          </div>\n          <p class=\"text-muted-foreground text-xs\">$240k base + equity package under review</p>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- 4-Stage Candidate Pipeline Board -->\n    <div class=\"space-y-3\">\n      <div class=\"flex items-center justify-between gap-x-2\">\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <h2 class=\"text-foreground text-base font-semibold\">Active Interview Pipeline</h2>\n          <Badge variant=\"outline\" class=\"text-xs tabular-nums\"> 6 in Progress </Badge>\n        </div>\n        <p class=\"text-muted-foreground hidden text-xs sm:block\">\n          Select any candidate to load their detailed AI Scorecard below\n        </p>\n      </div>\n\n      <div class=\"grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4\">\n        <div\n          v-for=\"stage in stages\"\n          :key=\"stage.id\"\n          class=\"border-border/80 bg-muted/20 flex flex-col gap-3 rounded-xl border p-3.5\"\n        >\n          <!-- Stage Column Header -->\n          <div class=\"border-border/70 border-b pb-2.5\">\n            <div class=\"flex items-center justify-between gap-1.5\">\n              <div class=\"flex min-w-0 items-center gap-2\">\n                <span\n                  :class=\"\n                    cn(\n                      'size-2 shrink-0 rounded-full',\n                      stage.id === 'screening'\n                        ? 'bg-info'\n                        : stage.id === 'technical'\n                          ? 'bg-chart-1'\n                          : stage.id === 'culture'\n                            ? 'bg-warning'\n                            : 'bg-success',\n                    )\n                  \"\n                />\n                <h3 class=\"text-foreground truncate text-xs font-semibold\" :title=\"stage.title\">\n                  {{ stage.title }}\n                </h3>\n              </div>\n              <Badge variant=\"secondary\" class=\"shrink-0 px-1.5 py-0 text-xs tabular-nums\">\n                {{ getCandidatesForStage(stage.id).length }}\n              </Badge>\n            </div>\n            <div class=\"text-muted-foreground mt-1 flex items-center justify-between gap-x-2 text-xs\">\n              <span class=\"truncate\">{{ stage.stageMetric }}</span>\n            </div>\n          </div>\n\n          <!-- Candidates list in Stage -->\n          <div class=\"flex flex-col gap-3\">\n            <div\n              v-for=\"cand in getCandidatesForStage(stage.id)\"\n              :key=\"cand.id\"\n              :class=\"\n                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                  selectedCandidateId === cand.id\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              @click=\"selectCandidate(cand.id)\"\n            >\n              <!-- Candidate Top Row: Avatar + Name + AI Match Pill -->\n              <div class=\"flex items-start justify-between gap-2\">\n                <div class=\"flex min-w-0 items-center gap-2.5\">\n                  <Avatar class=\"border-border/80 size-9 shrink-0 border\">\n                    <AvatarImage :src=\"cand.avatar\" :alt=\"cand.name\" />\n                    <AvatarFallback class=\"text-xs font-semibold\">{{ cand.initials }}</AvatarFallback>\n                  </Avatar>\n                  <div class=\"min-w-0\">\n                    <h4\n                      class=\"text-foreground group-hover:text-primary truncate text-xs font-semibold transition-colors\"\n                    >\n                      {{ cand.name }}\n                    </h4>\n                    <p class=\"text-muted-foreground truncate text-xs\">\n                      {{ cand.currentCompany }}\n                    </p>\n                  </div>\n                </div>\n\n                <!-- AI Resume Match pill -->\n                <Badge\n                  variant=\"outline\"\n                  class=\"border-success/30 bg-success/10 text-success text-success shrink-0 gap-1 text-xs font-medium tabular-nums\"\n                >\n                  <CheckCircle2 class=\"text-success size-3\" />\n                  <span>{{ cand.aiMatchScore }}% Match</span>\n                </Badge>\n              </div>\n\n              <!-- Candidate Rating & Stage Duration -->\n              <div class=\"flex items-center justify-between gap-2 text-xs\">\n                <div class=\"text-warning flex items-center gap-1 font-medium tabular-nums\">\n                  <Star class=\"fill-warning text-warning size-3\" />\n                  <span class=\"text-foreground font-semibold\">{{ cand.overallRating.toFixed(1) }}</span>\n                  <span class=\"text-muted-foreground font-normal\">({{ cand.reviewCount }} interviewers)</span>\n                </div>\n                <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                  <Clock class=\"text-muted-foreground/80 size-3 shrink-0\" />\n                  <span class=\"truncate\">{{ cand.stageDuration }}</span>\n                </div>\n              </div>\n\n              <!-- Key Skills badges -->\n              <div class=\"flex flex-wrap gap-1\">\n                <Badge\n                  v-for=\"skill in cand.keySkills\"\n                  :key=\"skill\"\n                  variant=\"secondary\"\n                  class=\"px-1.5 py-0 text-xs font-normal\"\n                >\n                  {{ skill }}\n                </Badge>\n              </div>\n\n              <!-- Card Action Buttons -->\n              <div class=\"border-border/60 flex flex-wrap items-center gap-2 border-t pt-1\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  class=\"text-muted-foreground hover:text-foreground h-7 flex-1 justify-start gap-1 px-2 text-xs\"\n                  @click.stop=\"selectCandidate(cand.id)\"\n                >\n                  <FileText class=\"size-3\" />\n                  <span>View Scorecard</span>\n                </Button>\n\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  class=\"hover:bg-primary hover:text-primary-foreground hover:border-primary h-7 gap-1 px-2 text-xs\"\n                  @click.stop=\"advanceCandidate(cand.id)\"\n                >\n                  <span>Advance</span>\n                  <ChevronRight class=\"size-3\" />\n                </Button>\n              </div>\n            </div>\n\n            <!-- Empty stage placeholder if all candidates moved -->\n            <div\n              v-if=\"getCandidatesForStage(stage.id).length === 0\"\n              class=\"border-border/80 text-muted-foreground flex flex-col items-center justify-center rounded-lg border border-dashed p-6 text-center\"\n            >\n              <UserCheck class=\"text-muted-foreground/60 mb-1 size-5\" />\n              <p class=\"text-xs font-medium\">No candidates in this stage</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Candidate Detailed AI Scorecard Card / Drawer Section -->\n    <Card class=\"border-border/80 overflow-hidden shadow-sm\">\n      <!-- Top Scorecard Header Bar -->\n      <div class=\"border-border bg-muted/30 border-b p-4 sm:p-5\">\n        <!-- Candidate Quick Selector Bar -->\n        <div class=\"mb-4 flex flex-wrap items-center justify-between gap-3\">\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <UserCheck class=\"text-success size-4\" />\n            <span class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n              Candidate AI Scorecard & Interview Matrix\n            </span>\n          </div>\n\n          <!-- Switcher pills for all 6 candidates -->\n          <div class=\"flex flex-wrap items-center gap-1.5\">\n            <button\n              v-for=\"c in candidates\"\n              :key=\"c.id\"\n              type=\"button\"\n              :class=\"\n                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                  selectedCandidateId === c.id\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              @click=\"selectCandidate(c.id)\"\n            >\n              <span>{{ c.name }}</span>\n              <span\n                :class=\"\n                  cn(\n                    'py-0.2 rounded-full px-1 text-xs font-semibold tabular-nums',\n                    selectedCandidateId === c.id\n                      ? 'bg-primary-foreground/20 text-primary-foreground'\n                      : 'bg-muted text-muted-foreground',\n                  )\n                \"\n              >\n                {{ c.aiMatchScore }}%\n              </span>\n            </button>\n          </div>\n        </div>\n\n        <!-- Selected Candidate Bio Header -->\n        <div class=\"flex flex-col justify-between gap-4 lg:flex-row lg:items-center\">\n          <div class=\"flex items-start gap-3.5 sm:items-center\">\n            <Avatar class=\"border-background size-12 shrink-0 border-2 shadow-xs\">\n              <AvatarImage :src=\"selectedCandidate.avatar\" :alt=\"selectedCandidate.name\" />\n              <AvatarFallback class=\"text-sm font-semibold\">{{ selectedCandidate.initials }}</AvatarFallback>\n            </Avatar>\n\n            <div class=\"space-y-1\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <h3 class=\"text-foreground text-lg font-bold\">\n                  {{ selectedCandidate.name }}\n                </h3>\n                <Badge\n                  variant=\"outline\"\n                  class=\"border-success/30 bg-success/10 text-success text-success gap-1 text-xs font-medium tabular-nums\"\n                >\n                  <CheckCircle2 class=\"text-success size-3\" />\n                  {{ selectedCandidate.aiMatchScore }}% AI Fit\n                </Badge>\n                <Badge variant=\"default\" class=\"text-xs font-medium\">\n                  {{ selectedCandidate.decision }}\n                </Badge>\n              </div>\n\n              <div class=\"text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-xs\">\n                <span class=\"flex items-center gap-1\">\n                  <Briefcase class=\"size-3\" />\n                  {{ selectedCandidate.currentCompany }}\n                </span>\n                <span class=\"flex items-center gap-1\">\n                  <MapPin class=\"size-3\" />\n                  {{ selectedCandidate.location }}\n                </span>\n                <span class=\"flex items-center gap-1\">\n                  <Mail class=\"size-3\" />\n                  {{ selectedCandidate.email }}\n                </span>\n                <span class=\"flex items-center gap-1\">\n                  <Calendar class=\"size-3\" />\n                  Applied {{ selectedCandidate.appliedDate }}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Header Action Buttons -->\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              class=\"gap-1.5 text-xs shadow-xs\"\n              @click=\"advanceCandidate(selectedCandidate.id)\"\n            >\n              <span>Advance to Next Round</span>\n              <ArrowRight class=\"size-3.5\" />\n            </Button>\n            <Button size=\"sm\" class=\"gap-1.5 text-xs shadow-xs\">\n              <CheckCircle2 class=\"size-3.5\" />\n              <span>Extend Offer Letter</span>\n            </Button>\n          </div>\n        </div>\n      </div>\n\n      <!-- Scorecard Content: 3-Column Grid -->\n      <CardContent class=\"space-y-6 p-5\">\n        <!-- AI Executive Summary Banner -->\n        <div class=\"border-success/20 bg-success/5 flex flex-col items-start gap-3 rounded-lg border p-4 sm:flex-row\">\n          <div class=\"bg-success/10 text-success flex size-8 shrink-0 items-center justify-center rounded-md\">\n            <Bot class=\"size-4.5\" />\n          </div>\n          <div class=\"space-y-1\">\n            <h4 class=\"text-foreground flex items-center gap-1.5 text-xs font-semibold\">\n              <span>AI Synthesized Resume & Interview Consensus</span>\n              <Badge variant=\"outline\" class=\"border-success/30 text-success py-0 text-xs\">\n                High Confidence (98.2%)\n              </Badge>\n            </h4>\n            <p class=\"text-muted-foreground text-xs leading-relaxed\">\n              {{ selectedCandidate.aiSummary }}\n            </p>\n          </div>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n          <!-- Column 1: AI Competency & Skill Radar Breakdown -->\n          <div class=\"border-border/80 bg-card space-y-4 rounded-xl border p-4\">\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <div>\n                <h4 class=\"text-foreground text-xs font-semibold\">Competency Scorecard</h4>\n                <p class=\"text-muted-foreground text-xs\">AI parsed technical signals</p>\n              </div>\n              <Badge variant=\"secondary\" class=\"text-xs tabular-nums\">\n                {{ selectedCandidate.competencies.length }} Pillars\n              </Badge>\n            </div>\n\n            <div class=\"space-y-3.5\">\n              <div v-for=\"comp in selectedCandidate.competencies\" :key=\"comp.name\" class=\"space-y-1.5\">\n                <div class=\"flex items-center justify-between gap-x-2 text-xs\">\n                  <span class=\"text-foreground truncate pr-2 font-medium\" :title=\"comp.name\">\n                    {{ comp.name }}\n                  </span>\n                  <span class=\"text-foreground shrink-0 font-bold tabular-nums\"> {{ comp.score }}% </span>\n                </div>\n                <Progress :model-value=\"comp.score\" class=\"h-1.5\" />\n                <div class=\"text-muted-foreground flex items-center justify-between gap-x-2 text-xs\">\n                  <span class=\"text-xs\">{{ comp.benchmark }}</span>\n                </div>\n              </div>\n            </div>\n\n            <Separator class=\"my-3\" />\n\n            <!-- AI Highlights list -->\n            <div class=\"space-y-2\">\n              <h5 class=\"text-foreground flex items-center gap-1.5 text-xs font-semibold\">\n                <Check class=\"text-success size-3.5\" />\n                <span>Key AI Resume Signals</span>\n              </h5>\n              <ul class=\"text-muted-foreground space-y-1.5 text-xs\">\n                <li\n                  v-for=\"(highlight, idx) in selectedCandidate.aiHighlights\"\n                  :key=\"idx\"\n                  class=\"flex items-start gap-1.5\"\n                >\n                  <span class=\"text-success font-bold\">•</span>\n                  <span>{{ highlight }}</span>\n                </li>\n              </ul>\n            </div>\n\n            <!-- Growth Areas / Calibration -->\n            <div class=\"bg-muted/40 border-border/60 space-y-1.5 rounded-lg border p-3 text-xs\">\n              <div class=\"text-foreground flex items-center gap-1.5 font-medium\">\n                <ShieldCheck class=\"text-chart-1 size-3.5\" />\n                <span>Interviewer Calibration Note</span>\n              </div>\n              <p class=\"text-muted-foreground leading-relaxed\">\n                {{ selectedCandidate.growthAreas[0] }}\n              </p>\n            </div>\n          </div>\n\n          <!-- Column 2: Interviewer Scorecards & Qualitative Notes -->\n          <div class=\"border-border/80 bg-card space-y-4 rounded-xl border p-4\">\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <div>\n                <h4 class=\"text-foreground text-xs font-semibold\">Interviewer Scorecards</h4>\n                <p class=\"text-muted-foreground text-xs\">Direct debrief ratings & feedback</p>\n              </div>\n              <div class=\"text-warning flex items-center gap-1 text-xs font-bold tabular-nums\">\n                <Star class=\"fill-warning text-warning size-3.5\" />\n                <span>{{ selectedCandidate.overallRating.toFixed(1) }} / 5.0</span>\n              </div>\n            </div>\n\n            <div class=\"space-y-3\">\n              <div\n                v-for=\"(review, index) in selectedCandidate.interviews\"\n                :key=\"index\"\n                class=\"border-border/70 bg-muted/20 space-y-2 rounded-lg border p-3\"\n              >\n                <div class=\"flex items-start justify-between gap-2\">\n                  <div>\n                    <p class=\"text-foreground text-xs font-semibold\">{{ review.interviewer }}</p>\n                    <p class=\"text-muted-foreground text-xs\">{{ review.role }}</p>\n                  </div>\n                  <div class=\"flex shrink-0 items-center gap-1.5\">\n                    <Badge variant=\"outline\" class=\"border-success/30 bg-success/10 text-success text-xs font-medium\">\n                      {{ review.verdict }}\n                    </Badge>\n                    <Badge variant=\"secondary\" class=\"text-xs font-bold tabular-nums\">\n                      {{ review.score.toFixed(1) }} ★\n                    </Badge>\n                  </div>\n                </div>\n                <p class=\"text-muted-foreground text-xs leading-relaxed italic\">“{{ review.feedback }}”</p>\n              </div>\n            </div>\n\n            <Separator class=\"my-3\" />\n\n            <!-- Debrief Consensus Banner -->\n            <div\n              class=\"border-success/20 bg-success/10 flex items-center justify-between gap-x-2 rounded-lg border p-3 text-xs\"\n            >\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <UserCheck class=\"text-success size-4\" />\n                <span class=\"text-foreground font-medium\">Hiring Committee Consensus</span>\n              </div>\n              <Badge variant=\"outline\" class=\"border-success/30 text-success font-semibold\">\n                Unanimous Strong Hire\n              </Badge>\n            </div>\n          </div>\n\n          <!-- Column 3: Compensation Package & Offer Structuring -->\n          <div class=\"border-border/80 bg-card space-y-4 rounded-xl border p-4\">\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <div>\n                <h4 class=\"text-foreground text-xs font-semibold\">Compensation & Package Model</h4>\n                <p class=\"text-muted-foreground text-xs\">Target offer & benchmarking</p>\n              </div>\n              <Badge variant=\"outline\" class=\"border-chart-1/30 bg-chart-1/10 text-chart-1 text-xs\">\n                Level 7 Band\n              </Badge>\n            </div>\n\n            <div class=\"border-border/70 overflow-hidden rounded-lg border\">\n              <div class=\"overflow-x-auto\">\n                <Table>\n                  <TableBody>\n                    <TableRow class=\"hover:bg-transparent\">\n                      <TableCell class=\"text-muted-foreground py-2.5 text-xs font-medium\">Target Base Salary</TableCell>\n                      <TableCell class=\"text-foreground py-2.5 text-right text-xs font-bold tabular-nums\">\n                        {{ selectedCandidate.compensation.targetBase }}\n                      </TableCell>\n                    </TableRow>\n                    <TableRow class=\"hover:bg-transparent\">\n                      <TableCell class=\"text-muted-foreground py-2.5 text-xs font-medium\"\n                        >Equity (RSUs / Grant)</TableCell\n                      >\n                      <TableCell class=\"text-foreground py-2.5 text-right text-xs font-bold tabular-nums\">\n                        {{ selectedCandidate.compensation.equity }}\n                      </TableCell>\n                    </TableRow>\n                    <TableRow class=\"hover:bg-transparent\">\n                      <TableCell class=\"text-muted-foreground py-2.5 text-xs font-medium\"\n                        >Target Annual Bonus</TableCell\n                      >\n                      <TableCell class=\"text-foreground py-2.5 text-right text-xs font-bold tabular-nums\">\n                        {{ selectedCandidate.compensation.bonus }}\n                      </TableCell>\n                    </TableRow>\n                    <TableRow class=\"hover:bg-transparent\">\n                      <TableCell class=\"text-muted-foreground py-2.5 text-xs font-medium\">Sign-on Incentive</TableCell>\n                      <TableCell class=\"text-foreground py-2.5 text-right text-xs font-bold tabular-nums\">\n                        {{ selectedCandidate.compensation.signOn }}\n                      </TableCell>\n                    </TableRow>\n                    <TableRow class=\"bg-muted/40 hover:bg-muted/40 font-semibold\">\n                      <TableCell class=\"text-foreground py-2.5 text-xs\">Target Year 1 OTE</TableCell>\n                      <TableCell class=\"text-success text-success py-2.5 text-right text-xs font-bold tabular-nums\">\n                        {{ selectedCandidate.compensation.totalYear1 }}\n                      </TableCell>\n                    </TableRow>\n                  </TableBody>\n                </Table>\n              </div>\n            </div>\n\n            <div class=\"space-y-2\">\n              <div class=\"flex items-center justify-between gap-x-2 text-xs\">\n                <span class=\"text-muted-foreground\">Notice Period</span>\n                <span class=\"text-foreground font-medium tabular-nums\">{{\n                  selectedCandidate.compensation.noticePeriod\n                }}</span>\n              </div>\n              <div class=\"flex items-center justify-between gap-x-2 text-xs\">\n                <span class=\"text-muted-foreground\">Band Status</span>\n                <Badge variant=\"secondary\" class=\"text-xs font-normal\">\n                  {{ selectedCandidate.compensation.bandStatus }}\n                </Badge>\n              </div>\n            </div>\n\n            <Separator class=\"my-3\" />\n\n            <div class=\"flex flex-col gap-2\">\n              <Button size=\"sm\" class=\"w-full gap-1.5 text-xs shadow-xs\">\n                <FileSpreadsheet class=\"size-3.5\" />\n                <span>Generate Official Offer Doc</span>\n              </Button>\n              <Button variant=\"outline\" size=\"sm\" class=\"w-full gap-1.5 text-xs shadow-xs\">\n                <Calendar class=\"size-3.5\" />\n                <span>Schedule Executive Alignment</span>\n              </Button>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:page",
      "target": "~/app/components/blocks/RecruitmentCandidatePipeline.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/progress.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "AI-powered applicant tracking pipeline, candidate scorecard, resume match scoring, and interview stages board.",
  "categories": [
    "hr",
    "app",
    "dashboard",
    "ai"
  ]
}