{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "exit-interview-survey",
  "title": "Exit Interview Survey",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/exit-interview-survey/ExitInterviewSurvey.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, reactive, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  Award,\n  Building2,\n  Calendar,\n  CheckCircle2,\n  ClipboardCheck,\n  Compass,\n  FileCheck,\n  FileCode2,\n  HeartHandshake,\n  KeyRound,\n  Laptop,\n  Lock,\n  MessageSquareQuote,\n  Rocket,\n  RotateCcw,\n  Send,\n  ShieldCheck,\n  Star,\n  TrendingUp,\n  UserCheck,\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, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Checkbox } from '@/components/ui/checkbox'\nimport { Label } from '@/components/ui/label'\nimport { Progress } from '@/components/ui/progress'\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'\nimport { Rating } from '@/components/ui/rating'\nimport { Separator } from '@/components/ui/separator'\nimport { Textarea } from '@/components/ui/textarea'\n\ninterface Props {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<Props>()\n\n// Primary Departure Reasons\ninterface DepartureReason {\n  value: string\n  label: string\n  description: string\n  icon: typeof Compass\n}\n\nconst departureReasons: DepartureReason[] = [\n  {\n    value: 'career-growth',\n    label: 'Career Growth & Promotion',\n    description: 'Seeking broader technical leadership scope, faster progression, or new architectural challenges.',\n    icon: TrendingUp,\n  },\n  {\n    value: 'compensation',\n    label: 'Compensation / Total Rewards',\n    description: 'Competitive market offers, higher base salary band, equity incentives, or bonus structures.',\n    icon: Award,\n  },\n  {\n    value: 'relocation',\n    label: 'Relocation & Remote Freedom',\n    description: 'Geographic move, personal relocation, or seeking broader international and async flexibility.',\n    icon: Building2,\n  },\n  {\n    value: 'work-life',\n    label: 'Work-Life Balance',\n    description: 'Need for sustainable working cadence, reduced on-call intensity, and dedicated personal time.',\n    icon: HeartHandshake,\n  },\n  {\n    value: 'leadership',\n    label: 'Leadership & Direction',\n    description: 'Strategic alignment with executive roadmap, product vision, or communication cadence.',\n    icon: Compass,\n  },\n  {\n    value: 'venture',\n    label: 'Starting Own Venture',\n    description: 'Launching an independent technical startup, consulting practice, or entrepreneurial venture.',\n    icon: Rocket,\n  },\n]\n\n// Experience Rating Dimensions\ninterface RatingDimension {\n  id: 'management' | 'collaboration' | 'compensation' | 'culture' | 'flexibility'\n  title: string\n  description: string\n  category: string\n}\n\nconst ratingDimensions: RatingDimension[] = [\n  {\n    id: 'management',\n    title: 'Management & Leadership',\n    description: 'Direct manager support, transparent 1:1 mentorship, goal clarity, and career advocacy.',\n    category: 'Leadership',\n  },\n  {\n    id: 'collaboration',\n    title: 'Team Collaboration',\n    description: 'Cross-functional synergy, peer code review quality, mutual trust, and psychological safety.',\n    category: 'Team Dynamics',\n  },\n  {\n    id: 'compensation',\n    title: 'Compensation & Benefits',\n    description: 'Base salary competitiveness, equity appreciation, health coverage, and wellness allowances.',\n    category: 'Total Rewards',\n  },\n  {\n    id: 'culture',\n    title: 'Engineering Culture',\n    description: 'Architectural standards, modern tooling, automated testing, CI/CD speed, and technical autonomy.',\n    category: 'Craft & Standards',\n  },\n  {\n    id: 'flexibility',\n    title: 'Work-Life Flexibility',\n    description: 'Async-first communication, sustainable sprint planning, and reasonable on-call expectations.',\n    category: 'Well-being',\n  },\n]\n\n// Return Willingness Options\nconst returnOptions = [\n  {\n    value: 'yes',\n    label: 'Yes, definitely open',\n    description: 'Strongly open to returning for future leadership or staff-level architectural initiatives.',\n    badge: 'Alumni Priority',\n    badgeVariant: 'success' as const,\n  },\n  {\n    value: 'maybe',\n    label: 'Maybe, under right conditions',\n    description: 'Would consider returning under different organizational structure or roadmap scope.',\n    badge: 'Conditionally Open',\n    badgeVariant: 'secondary' as const,\n  },\n  {\n    value: 'no',\n    label: 'No, pursuing new pathways',\n    description: 'Focused on long-term career growth in independent ventures or other sectors.',\n    badge: 'New Trajectory',\n    badgeVariant: 'outline' as const,\n  },\n]\n\n// Form State\nconst primaryReason = ref<string>('career-growth')\nconst departureNotes = ref<string>(\n  'Accepted a Principal Systems Architect role at a Series B infrastructure startup focusing on WebAssembly runtime tooling.',\n)\n\nconst ratings = reactive<Record<RatingDimension['id'], number>>({\n  management: 4,\n  collaboration: 5,\n  compensation: 4,\n  culture: 5,\n  flexibility: 4,\n})\n\nconst enjoyedMost = ref<string>(\n  'The engineering team’s exceptional craft and collaborative spirit. Building high-scale distributed platform services alongside humble, brilliant peers was deeply rewarding. Leadership always supported architectural innovation and design system investments.',\n)\n\nconst toImprove = ref<string>(\n  'Cross-functional roadmap alignment between product management and core platform squads. Late-quarter requirement shifts occasionally created sprint friction and compressed delivery timelines.',\n)\n\nconst returnWillingness = ref<string>('yes')\n\nconst handoverChecklist = reactive({\n  codebase: true,\n  architecture: true,\n  credentials: true,\n  equipment: false,\n})\n\nconst isSubmitted = ref<boolean>(false)\nconst submissionId = ref<string>('EXIT-2026-9042')\n\n// Computed Metrics\nconst averageRating = computed(() => {\n  const values = Object.values(ratings)\n  const sum = values.reduce((acc, val) => acc + val, 0)\n  return (sum / values.length).toFixed(1)\n})\n\nconst sentimentPercentage = computed(() => {\n  return Math.round((Number(averageRating.value) / 5) * 100)\n})\n\nconst handoverCompletedCount = computed(() => {\n  return Object.values(handoverChecklist).filter(Boolean).length\n})\n\nconst handoverPercentage = computed(() => {\n  return Math.round((handoverCompletedCount.value / 4) * 100)\n})\n\nfunction handleSubmit() {\n  isSubmitted.value = true\n}\n\nfunction handleReset() {\n  isSubmitted.value = false\n}\n</script>\n\n<template>\n  <div data-slot=\"exit-interview-survey\" :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- Header & Employee Context Card -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardContent class=\"p-6\">\n        <div class=\"flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between\">\n          <!-- Employee Details -->\n          <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center\">\n            <Avatar class=\"border-border size-16 shrink-0 border sm:size-20\">\n              <AvatarImage\n                src=\"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=200&auto=format&fit=crop&q=80\"\n                alt=\"Elena Rostova\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <div class=\"space-y-1.5\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <h1 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">\n                  Employee Exit Survey & Offboarding Review\n                </h1>\n              </div>\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                Elena Rostova · Senior Staff Engineer · 3.5 Years Tenure\n              </p>\n              <div class=\"flex flex-wrap items-center gap-2 pt-1 text-xs\">\n                <Badge variant=\"secondary\" class=\"font-medium\"> Engineering · Core Platform </Badge>\n                <Badge variant=\"outline\" class=\"gap-1 text-xs font-normal\">\n                  <Calendar class=\"size-3\" />\n                  Final Day: Sep 30, 2026\n                </Badge>\n                <span class=\"text-muted-foreground\">\n                  Manager: <strong class=\"text-foreground font-medium\">Marcus Vance</strong>\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Header Actions -->\n          <div class=\"flex flex-wrap items-center gap-3 sm:self-start lg:self-center\">\n            <Button\n              v-if=\"!isSubmitted\"\n              size=\"sm\"\n              class=\"bg-primary text-primary-foreground gap-2 shadow-xs\"\n              @click=\"handleSubmit\"\n            >\n              <Send class=\"size-4\" />\n              Submit Survey\n            </Button>\n            <Button v-else variant=\"outline\" size=\"sm\" class=\"gap-2 shadow-xs\" @click=\"handleReset\">\n              <RotateCcw class=\"size-4\" />\n              Edit Survey Answers\n            </Button>\n          </div>\n        </div>\n\n        <!-- Confidentiality Notice Banner -->\n        <div class=\"border-border/80 bg-muted/40 mt-6 flex items-start gap-3 rounded-lg border p-3.5 text-xs\">\n          <ShieldCheck class=\"text-primary mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n          <div class=\"space-y-0.5\">\n            <p class=\"text-foreground font-semibold\">Strictly Confidential People Ops Review</p>\n            <p class=\"text-muted-foreground leading-relaxed\">\n              Your candid responses are confidential and used exclusively by People Ops to improve company culture,\n              leadership effectiveness, and engineering workflows. Summary insights are aggregated and anonymized.\n            </p>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Submission Success Alert (When Submitted) -->\n    <div\n      v-if=\"isSubmitted\"\n      class=\"border-success/30 bg-success/10 text-foreground dark:text-foreground flex items-start gap-3 rounded-xl border p-4 shadow-xs\"\n    >\n      <CheckCircle2 class=\"text-success mt-0.5 size-5 shrink-0\" />\n      <div class=\"flex-1 space-y-1\">\n        <div class=\"flex flex-wrap items-center justify-between gap-2\">\n          <p class=\"text-sm font-semibold\">Exit Survey Successfully Submitted</p>\n          <span class=\"font-mono text-xs font-medium\">Receipt #{{ submissionId }}</span>\n        </div>\n        <p class=\"text-success text-xs leading-relaxed\">\n          Thank you for your dedicated 3.5 years of service and leadership. Your constructive feedback has been securely\n          logged for the People Ops quarterly retention review and alumni network registration.\n        </p>\n      </div>\n    </div>\n\n    <!-- Department Sentiment & Handover Scorecard Strip -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- Overall Sentiment Index -->\n      <Card class=\"border-border bg-card 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\">Overall Experience Score</CardTitle>\n          <Star class=\"text-warning size-4\" />\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"flex items-baseline gap-2\">\n            <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums sm:text-3xl\">\n              {{ averageRating }}\n            </span>\n            <span class=\"text-muted-foreground text-xs font-medium\">/ 5.0</span>\n          </div>\n          <div class=\"space-y-1\">\n            <Progress :model-value=\"sentimentPercentage\" class=\"h-1.5 w-full\" />\n            <div class=\"flex items-center justify-between text-xs\">\n              <span class=\"text-success font-medium\">+0.4 vs Dept Avg</span>\n              <span class=\"text-muted-foreground font-mono tabular-nums\">{{ sentimentPercentage }}%</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Primary Driver -->\n      <Card class=\"border-border bg-card 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\">Primary Departure Driver</CardTitle>\n          <Compass class=\"text-primary size-4\" />\n        </CardHeader>\n        <CardContent class=\"space-y-1.5\">\n          <div class=\"text-foreground text-base font-bold tracking-tight sm:text-lg\">Career Growth</div>\n          <p class=\"text-muted-foreground text-xs leading-relaxed\">\n            Targeting Principal/Architect roles in cloud infrastructure.\n          </p>\n        </CardContent>\n      </Card>\n\n      <!-- Knowledge Handover Progress -->\n      <Card class=\"border-border bg-card 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\">Knowledge Handover</CardTitle>\n          <ClipboardCheck class=\"text-primary size-4\" />\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"flex items-baseline gap-2\">\n            <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums sm:text-3xl\">\n              {{ handoverPercentage }}%\n            </span>\n            <span class=\"text-muted-foreground text-xs font-medium\">({{ handoverCompletedCount }} of 4 tasks)</span>\n          </div>\n          <div class=\"space-y-1\">\n            <Progress :model-value=\"handoverPercentage\" class=\"h-1.5 w-full\" />\n            <p class=\"text-muted-foreground text-xs\">IT asset return pending</p>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Alumni & Return Eligibility -->\n      <Card class=\"border-border bg-card 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\">Alumni Status</CardTitle>\n          <UserCheck class=\"text-success size-4\" />\n        </CardHeader>\n        <CardContent class=\"space-y-1.5\">\n          <div class=\"flex items-center gap-1.5\">\n            <Badge variant=\"success\" class=\"text-xs font-semibold\">Eligible for Re-Hire</Badge>\n          </div>\n          <p class=\"text-muted-foreground text-xs leading-relaxed\">\n            Registered for Alumni Leadership Network & fast-track referrals.\n          </p>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- ================================================================= -->\n    <!-- SECTION 1: Primary Reason for Departure                           -->\n    <!-- ================================================================= -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"pb-4\">\n        <div class=\"flex items-center gap-2\">\n          <div class=\"bg-primary/10 text-primary flex size-7 items-center justify-center rounded-md\">\n            <Compass class=\"size-4\" />\n          </div>\n          <div>\n            <CardTitle class=\"text-base font-semibold\">1. Primary Reason for Departure</CardTitle>\n            <CardDescription class=\"text-xs\">\n              Select the primary factor that most heavily influenced your decision to pursue new opportunities.\n            </CardDescription>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"space-y-4\">\n        <RadioGroup v-model=\"primaryReason\" class=\"grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3\">\n          <label\n            v-for=\"item in departureReasons\"\n            :key=\"item.value\"\n            :for=\"`reason-${item.value}`\"\n            :class=\"\n              cn(\n                'hover:bg-muted/30 flex cursor-pointer items-start gap-3 rounded-lg border p-3.5 transition-colors',\n                primaryReason === item.value\n                  ? 'border-primary/80 bg-primary/5 ring-primary/20 ring-1'\n                  : 'border-border bg-card',\n              )\n            \"\n          >\n            <RadioGroupItem :id=\"`reason-${item.value}`\" :value=\"item.value\" class=\"mt-0.5\" />\n            <div class=\"space-y-1\">\n              <div class=\"flex items-center gap-1.5\">\n                <span class=\"text-foreground text-xs leading-none font-semibold\">{{ item.label }}</span>\n              </div>\n              <p class=\"text-muted-foreground text-xs leading-relaxed\">{{ item.description }}</p>\n            </div>\n          </label>\n        </RadioGroup>\n\n        <!-- Departure Context Details -->\n        <div class=\"space-y-2 pt-2\">\n          <Label for=\"departure-notes\" class=\"text-xs font-medium\">\n            Additional Context on Your Departure Decision (Optional)\n          </Label>\n          <Textarea\n            id=\"departure-notes\"\n            v-model=\"departureNotes\"\n            :rows=\"2\"\n            placeholder=\"Share specific context regarding your career progression, next steps, or decision drivers...\"\n            class=\"text-xs\"\n          />\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- ================================================================= -->\n    <!-- SECTION 2: Experience & Culture Ratings (1 to 5 Stars)            -->\n    <!-- ================================================================= -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"pb-4\">\n        <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n          <div class=\"flex items-center gap-2\">\n            <div class=\"bg-primary/10 text-primary flex size-7 items-center justify-center rounded-md\">\n              <Star class=\"size-4\" />\n            </div>\n            <div>\n              <CardTitle class=\"text-base font-semibold\">2. Experience & Culture Ratings</CardTitle>\n              <CardDescription class=\"text-xs\">\n                Rate each dimension of your experience on a scale of 1 (Needs Serious Improvement) to 5 (Outstanding).\n              </CardDescription>\n            </div>\n          </div>\n          <Badge variant=\"outline\" class=\"w-fit text-xs font-medium tabular-nums\">\n            Average: {{ averageRating }} / 5.0\n          </Badge>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"space-y-4\">\n        <div class=\"divide-border divide-y rounded-lg border\">\n          <div\n            v-for=\"dim in ratingDimensions\"\n            :key=\"dim.id\"\n            class=\"hover:bg-muted/20 flex flex-col gap-3 p-4 transition-colors sm:flex-row sm:items-center sm:justify-between\"\n          >\n            <div class=\"space-y-1\">\n              <div class=\"flex items-center gap-2\">\n                <span class=\"text-foreground text-sm font-semibold\">{{ dim.title }}</span>\n                <Badge variant=\"secondary\" class=\"text-xs font-normal\">\n                  {{ dim.category }}\n                </Badge>\n              </div>\n              <p class=\"text-muted-foreground max-w-xl text-xs leading-relaxed\">\n                {{ dim.description }}\n              </p>\n            </div>\n\n            <!-- Star Rating Control -->\n            <div class=\"flex shrink-0 items-center gap-3 sm:self-center\">\n              <Rating v-model=\"ratings[dim.id]\" :max=\"5\" density=\"comfortable\" size=\"small\" />\n              <span class=\"text-foreground min-w-8 text-right font-mono text-xs font-semibold tabular-nums\">\n                {{ ratings[dim.id] }} / 5\n              </span>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- ================================================================= -->\n    <!-- SECTION 3: Qualitative In-Depth Feedback                          -->\n    <!-- ================================================================= -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"pb-4\">\n        <div class=\"flex items-center gap-2\">\n          <div class=\"bg-primary/10 text-primary flex size-7 items-center justify-center rounded-md\">\n            <MessageSquareQuote class=\"size-4\" />\n          </div>\n          <div>\n            <CardTitle class=\"text-base font-semibold\">3. Qualitative In-Depth Feedback</CardTitle>\n            <CardDescription class=\"text-xs\">\n              Detailed reflections to guide organizational enhancements and executive leadership planning.\n            </CardDescription>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"space-y-5\">\n        <!-- Question 1: What did you enjoy most -->\n        <div class=\"space-y-2\">\n          <Label for=\"enjoyed-most\" class=\"text-foreground text-xs font-semibold tracking-wide\">\n            What did you enjoy most about working at the company?\n          </Label>\n          <Textarea\n            id=\"enjoyed-most\"\n            v-model=\"enjoyedMost\"\n            :rows=\"3\"\n            placeholder=\"Highlight positive aspects of your team, projects, technical challenges, or company traditions...\"\n            class=\"text-xs leading-relaxed\"\n          />\n        </div>\n\n        <Separator />\n\n        <!-- Question 2: What should leadership improve -->\n        <div class=\"space-y-2\">\n          <Label for=\"to-improve\" class=\"text-foreground text-xs font-semibold tracking-wide\">\n            What is one thing the leadership team should immediately improve?\n          </Label>\n          <Textarea\n            id=\"to-improve\"\n            v-model=\"toImprove\"\n            :rows=\"3\"\n            placeholder=\"Suggest actionable improvements for strategy, tooling, engineering velocity, or team communication...\"\n            class=\"text-xs leading-relaxed\"\n          />\n        </div>\n\n        <Separator />\n\n        <!-- Question 3: Would you consider returning -->\n        <div class=\"space-y-3\">\n          <Label class=\"text-foreground text-xs font-semibold tracking-wide\">\n            Would you consider returning to the company in the future?\n          </Label>\n          <RadioGroup v-model=\"returnWillingness\" class=\"grid grid-cols-1 gap-3 sm:grid-cols-3\">\n            <label\n              v-for=\"opt in returnOptions\"\n              :key=\"opt.value\"\n              :for=\"`return-${opt.value}`\"\n              :class=\"\n                cn(\n                  'hover:bg-muted/30 flex cursor-pointer items-start gap-3 rounded-lg border p-3.5 transition-colors',\n                  returnWillingness === opt.value\n                    ? 'border-primary/80 bg-primary/5 ring-primary/20 ring-1'\n                    : 'border-border bg-card',\n                )\n              \"\n            >\n              <RadioGroupItem :id=\"`return-${opt.value}`\" :value=\"opt.value\" class=\"mt-0.5\" />\n              <div class=\"space-y-1.5\">\n                <div class=\"flex items-center gap-1.5\">\n                  <span class=\"text-foreground text-xs font-semibold\">{{ opt.label }}</span>\n                </div>\n                <p class=\"text-muted-foreground text-xs leading-relaxed\">{{ opt.description }}</p>\n                <Badge :variant=\"opt.badgeVariant\" class=\"text-xs font-normal\">\n                  {{ opt.badge }}\n                </Badge>\n              </div>\n            </label>\n          </RadioGroup>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- ================================================================= -->\n    <!-- SECTION 4: Knowledge Handover & Asset Return Checklist            -->\n    <!-- ================================================================= -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"pb-4\">\n        <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n          <div class=\"flex items-center gap-2\">\n            <div class=\"bg-primary/10 text-primary flex size-7 items-center justify-center rounded-md\">\n              <ClipboardCheck class=\"size-4\" />\n            </div>\n            <div>\n              <CardTitle class=\"text-base font-semibold\"> 4. Knowledge Handover & Asset Return Checklist </CardTitle>\n              <CardDescription class=\"text-xs\">\n                Administrative and technical transition milestones prior to official offboarding date.\n              </CardDescription>\n            </div>\n          </div>\n          <Badge\n            :variant=\"handoverCompletedCount === 4 ? 'success' : 'secondary'\"\n            class=\"w-fit text-xs font-medium tabular-nums\"\n          >\n            {{ handoverCompletedCount }} of 4 Completed ({{ handoverPercentage }}%)\n          </Badge>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"space-y-4\">\n        <div class=\"divide-border divide-y rounded-lg border\">\n          <!-- Item 1: Codebase Ownership -->\n          <div class=\"hover:bg-muted/20 flex items-start gap-3.5 p-4 transition-colors\">\n            <Checkbox id=\"ho-codebase\" v-model=\"handoverChecklist.codebase\" class=\"mt-0.5\" />\n            <div class=\"space-y-1\">\n              <div class=\"flex items-center gap-2\">\n                <FileCode2 class=\"text-primary size-4\" />\n                <Label for=\"ho-codebase\" class=\"text-foreground cursor-pointer text-xs font-semibold\">\n                  Codebase repository ownership transferred\n                </Label>\n              </div>\n              <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                Transferred GitHub admin rights, codeowners assignments, and CI/CD secret manager access to incoming\n                lead (Liam Vance).\n              </p>\n            </div>\n          </div>\n\n          <!-- Item 2: Architecture Documentation -->\n          <div class=\"hover:bg-muted/20 flex items-start gap-3.5 p-4 transition-colors\">\n            <Checkbox id=\"ho-architecture\" v-model=\"handoverChecklist.architecture\" class=\"mt-0.5\" />\n            <div class=\"space-y-1\">\n              <div class=\"flex items-center gap-2\">\n                <FileCheck class=\"text-primary size-4\" />\n                <Label for=\"ho-architecture\" class=\"text-foreground cursor-pointer text-xs font-semibold\">\n                  Architecture documentation updated\n                </Label>\n              </div>\n              <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                Core system architecture diagrams, service topology maps, and disaster recovery runbooks completed in\n                Notion & DevPortal.\n              </p>\n            </div>\n          </div>\n\n          <!-- Item 3: Credentials Rotated -->\n          <div class=\"hover:bg-muted/20 flex items-start gap-3.5 p-4 transition-colors\">\n            <Checkbox id=\"ho-credentials\" v-model=\"handoverChecklist.credentials\" class=\"mt-0.5\" />\n            <div class=\"space-y-1\">\n              <div class=\"flex items-center gap-2\">\n                <KeyRound class=\"text-primary size-4\" />\n                <Label for=\"ho-credentials\" class=\"text-foreground cursor-pointer text-xs font-semibold\">\n                  Passwords & credentials rotated\n                </Label>\n              </div>\n              <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                Revoked personal staging SSH keys, rotated AWS IAM secret access tokens, and decommissioned VPN and\n                Vault credentials.\n              </p>\n            </div>\n          </div>\n\n          <!-- Item 4: Hardware Returned -->\n          <div class=\"hover:bg-muted/20 flex items-start gap-3.5 p-4 transition-colors\">\n            <Checkbox id=\"ho-equipment\" v-model=\"handoverChecklist.equipment\" class=\"mt-0.5\" />\n            <div class=\"space-y-1\">\n              <div class=\"flex items-center gap-2\">\n                <Laptop class=\"text-primary size-4\" />\n                <Label for=\"ho-equipment\" class=\"text-foreground cursor-pointer text-xs font-semibold\">\n                  Company laptop & security hardware returned\n                </Label>\n              </div>\n              <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                MacBook Pro M3 Max, hardware security YubiKey, and company physical access badge received by IT Asset\n                Ops.\n              </p>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n\n      <CardFooter class=\"border-border/60 bg-muted/20 flex flex-wrap items-center justify-between gap-3 border-t p-4\">\n        <div class=\"text-muted-foreground flex items-center gap-2 text-xs\">\n          <Lock class=\"size-3.5\" />\n          <span>Requires final sign-off from IT Security & People Operations</span>\n        </div>\n        <Button\n          v-if=\"!isSubmitted\"\n          size=\"sm\"\n          class=\"bg-primary text-primary-foreground gap-2 shadow-xs\"\n          @click=\"handleSubmit\"\n        >\n          <Send class=\"size-4\" />\n          Submit Final Exit Review\n        </Button>\n      </CardFooter>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/ExitInterviewSurvey.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/checkbox.json",
    "https://uipkge.dev/r/vue/label.json",
    "https://uipkge.dev/r/vue/progress.json",
    "https://uipkge.dev/r/vue/radio-group.json",
    "https://uipkge.dev/r/vue/rating.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/textarea.json"
  ],
  "description": "Structured employee offboarding survey with department sentiment analysis, departure drivers, 5-star experience ratings, qualitative feedback textareas, and a knowledge handover & asset return checklist.",
  "categories": [
    "hr",
    "app",
    "forms"
  ]
}