{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "performance-review-matrix",
  "title": "Performance Review Matrix",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/performance-review-matrix/PerformanceReviewMatrix.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport {\n  Award,\n  Calendar,\n  CheckCircle2,\n  FileDown,\n  MessageSquareQuote,\n  Target,\n  TrendingUp,\n  Users,\n  Zap,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\ninterface Props {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<Props>()\n\ninterface MetricTile {\n  title: string\n  value: string\n  subtitle: string\n  progress: number\n  icon: typeof Target\n}\n\ninterface AssessmentPillar {\n  title: string\n  selfScore: number\n  managerScore: number\n  delta: string\n  status: 'consensus' | 'above'\n}\n\ninterface CompetencyCategory {\n  id: string\n  title: string\n  score: string\n  ratingLabel: string\n  badgeVariant: 'success' | 'default' | 'secondary'\n  progress: number\n  criteria: string\n  managerRemarks: string\n  strengths: string[]\n}\n\ninterface OKRItem {\n  id: string\n  title: string\n  description: string\n  target: string\n  progress: number\n  status: 'Completed' | 'Exceeded' | 'On Track'\n  statusVariant: 'success' | 'default' | 'secondary'\n}\n\ninterface PeerFeedback {\n  id: string\n  quote: string\n  author: string\n  role: string\n  category: string\n}\n\nconst metricTiles: MetricTile[] = [\n  {\n    title: 'Core Goals Achieved',\n    value: '94%',\n    subtitle: '+4% vs H1 target',\n    progress: 94,\n    icon: Target,\n  },\n  {\n    title: 'Technical Leadership',\n    value: '4.8 / 5.0',\n    subtitle: 'Top 5% org percentile',\n    progress: 96,\n    icon: Award,\n  },\n  {\n    title: 'Culture & Mentorship',\n    value: '4.7 / 5.0',\n    subtitle: '3 mentees promoted',\n    progress: 94,\n    icon: Users,\n  },\n  {\n    title: 'Execution Velocity',\n    value: '4.5 / 5.0',\n    subtitle: '18 epics delivered',\n    progress: 90,\n    icon: Zap,\n  },\n]\n\nconst assessmentPillars: AssessmentPillar[] = [\n  {\n    title: 'Technical Excellence & Architecture',\n    selfScore: 4.8,\n    managerScore: 5.0,\n    delta: '+0.2 Manager higher',\n    status: 'above',\n  },\n  {\n    title: 'Collaboration & Mentorship',\n    selfScore: 4.5,\n    managerScore: 4.5,\n    delta: '0.0 Full consensus',\n    status: 'consensus',\n  },\n  {\n    title: 'Strategic Impact & Roadmapping',\n    selfScore: 4.2,\n    managerScore: 4.5,\n    delta: '+0.3 Manager higher',\n    status: 'above',\n  },\n  {\n    title: 'Execution Velocity & Delivery',\n    selfScore: 4.5,\n    managerScore: 4.5,\n    delta: '0.0 Full consensus',\n    status: 'consensus',\n  },\n]\n\nconst competencyCategories: CompetencyCategory[] = [\n  {\n    id: 'tech-excellence',\n    title: 'Technical Excellence & Architecture',\n    score: '5.0 / 5.0',\n    ratingLabel: 'Outstanding (5.0 / 5.0)',\n    badgeVariant: 'success',\n    progress: 100,\n    criteria:\n      'Architects resilient, distributed frontend systems. Sets technical standard across multiple squads and prevents architectural debt.',\n    managerRemarks:\n      'Led the migration to micro-frontends with 0 downtime. Spearheaded the core component architecture and established strict bundle size budgets across the team, lowering bundle footprint by 38%.',\n    strengths: [\n      'Zero-downtime micro-frontend rollout',\n      'Distributed caching architecture',\n      'Framework token standardization',\n    ],\n  },\n  {\n    id: 'collab-mentorship',\n    title: 'Collaboration & Mentorship',\n    score: '4.5 / 5.0',\n    ratingLabel: 'Exceeds (4.5 / 5.0)',\n    badgeVariant: 'default',\n    progress: 90,\n    criteria:\n      'Actively grows engineering talent, fosters inclusive code review practices, and unblocks cross-discipline initiatives.',\n    managerRemarks:\n      'Mentored 3 junior engineers to promotion. Fostered an open engineering culture, instituted weekly architecture reviews, and unblocked cross-functional teams across APAC and EMEA.',\n    strengths: ['Promotion sponsorship (3 engineers)', 'Weekly architecture reviews', 'Cross-squad pairing cohorts'],\n  },\n  {\n    id: 'strategic-impact',\n    title: 'Strategic Impact & Roadmapping',\n    score: '4.5 / 5.0',\n    ratingLabel: 'Exceeds (4.5 / 5.0)',\n    badgeVariant: 'default',\n    progress: 90,\n    criteria:\n      'Aligns engineering strategy with quarterly business goals. Identifies high-ROI technical initiatives and champions developer productivity.',\n    managerRemarks:\n      'Key driver of developer experience KPIs. Aligned product roadmaps with technical debt reduction, reducing build times by 42% across CI and accelerating shipping velocity.',\n    strengths: ['Developer experience KPIs', 'CI turnaround optimization (-42%)', 'Quarterly tech debt roadmap'],\n  },\n]\n\nconst okrItems: OKRItem[] = [\n  {\n    id: 'okr-1',\n    title: 'Micro-Frontend Migration Phase II',\n    description: 'Decompose legacy monolithic checkout and account dashboards into standalone remote modules',\n    target: '100% modules · 0 downtime',\n    progress: 100,\n    status: 'Completed',\n    statusVariant: 'success',\n  },\n  {\n    id: 'okr-2',\n    title: 'CI Pipeline & Build Acceleration',\n    description: 'Optimize build caching, monorepo graph execution, and parallelize end-to-end test suites',\n    target: '< 4.0m build time (Achieved 3.2m)',\n    progress: 100,\n    status: 'Exceeded',\n    statusVariant: 'success',\n  },\n  {\n    id: 'okr-3',\n    title: 'Design System Token Federation',\n    description: 'Automate Tailwind OKLCH token sync between Figma variables and registry codebases',\n    target: 'Full Vue & React parity',\n    progress: 85,\n    status: 'On Track',\n    statusVariant: 'default',\n  },\n  {\n    id: 'okr-4',\n    title: 'Staff Mentorship & Tech Talks',\n    description: 'Host bi-weekly deep dives on web performance, distributed state, and accessibility standards',\n    target: '12 sessions · 3 mentees',\n    progress: 100,\n    status: 'Completed',\n    statusVariant: 'secondary',\n  },\n]\n\nconst peerFeedbacks: PeerFeedback[] = [\n  {\n    id: 'peer-1',\n    quote:\n      'Elena’s architectural guidance transformed our release velocity. Her deep dive sessions on performance optimization helped the frontend team cut latency in half.',\n    author: 'Anonymous Peer',\n    role: 'Staff Frontend Engineer · Checkout Core',\n    category: 'Peer Review · Systems',\n  },\n  {\n    id: 'peer-2',\n    quote:\n      'Mentoring from Elena was the highlight of my year. Her patient code reviews and architecture walkthroughs gave me the confidence to lead our squad’s largest migration.',\n    author: 'Direct Mentee',\n    role: 'Software Engineer II · Design Systems',\n    category: 'Mentee Review · Growth',\n  },\n  {\n    id: 'peer-3',\n    quote:\n      'Elena bridges technical complexity with product goals effortlessly. She spots risks weeks in advance and consistently delivers robust, high-impact platform features ahead of schedule.',\n    author: 'Cross-Functional Partner',\n    role: 'Principal Product Manager · Core Platform',\n    category: 'Partner Review · Strategy',\n  },\n]\n</script>\n\n<template>\n  <div data-slot=\"performance-review-matrix\" :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- Employee & Review Header -->\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          <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                <h2 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">Elena Rostova</h2>\n                <Badge variant=\"secondary\" class=\"font-medium\">Senior Staff Engineer</Badge>\n              </div>\n              <p class=\"text-muted-foreground text-sm\">Core Platform & Architecture · Engineering</p>\n              <div class=\"flex flex-wrap items-center gap-3 pt-1\">\n                <Badge variant=\"outline\" class=\"gap-1.5 text-xs font-normal\">\n                  <Calendar class=\"size-3.5\" />\n                  H2 2026 Review Cycle\n                </Badge>\n                <Separator orientation=\"vertical\" class=\"hidden h-3.5 sm:block\" />\n                <span class=\"text-muted-foreground text-xs\">\n                  Reviewer: <strong class=\"text-foreground font-medium\">Manager: Marcus Vance</strong>\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"flex flex-wrap items-center gap-3 sm:self-start lg:self-center\">\n            <Badge variant=\"success\" class=\"gap-1.5 px-3.5 py-1.5 text-sm font-semibold shadow-xs\">\n              <Award class=\"size-4 shrink-0\" />\n              Exceeds Expectations · 4.6 / 5.0\n            </Badge>\n            <Button variant=\"outline\" size=\"sm\" class=\"gap-2 shadow-xs\">\n              <FileDown class=\"size-4\" />\n              Export PDF Report\n            </Button>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Executive Summary Scorecard -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <Card v-for=\"tile in metricTiles\" :key=\"tile.title\" 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\">{{ tile.title }}</CardTitle>\n          <component :is=\"tile.icon\" class=\"text-muted-foreground size-4\" />\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums sm:text-3xl\">\n            {{ tile.value }}\n          </div>\n          <div class=\"space-y-1.5\">\n            <Progress :model-value=\"tile.progress\" class=\"h-1.5 w-full\" />\n            <div class=\"flex items-center gap-1\">\n              <TrendingUp class=\"text-success size-3\" />\n              <p class=\"text-muted-foreground text-xs\">{{ tile.subtitle }}</p>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Self-Assessment vs Manager Assessment Comparison Strip -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"flex flex-col gap-2 pb-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <CardTitle class=\"text-base font-semibold\">Self-Assessment vs Manager Assessment</CardTitle>\n          <CardDescription class=\"text-xs\">\n            Consensus and score calibration across core performance pillars.\n          </CardDescription>\n        </div>\n        <Badge variant=\"outline\" class=\"gap-1.5 text-xs font-normal\">\n          <CheckCircle2 class=\"text-success size-3.5\" />\n          96% Consensus Index\n        </Badge>\n      </CardHeader>\n      <CardContent class=\"space-y-4\">\n        <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n          <div\n            v-for=\"pillar in assessmentPillars\"\n            :key=\"pillar.title\"\n            class=\"bg-muted/40 border-border space-y-2.5 rounded-lg border p-3.5\"\n          >\n            <div class=\"flex items-start justify-between gap-2\">\n              <span class=\"text-foreground line-clamp-1 text-xs font-medium\">{{ pillar.title }}</span>\n              <Badge\n                :variant=\"pillar.status === 'consensus' ? 'secondary' : 'success'\"\n                class=\"px-1.5 py-0 text-xs font-normal\"\n              >\n                {{ pillar.delta }}\n              </Badge>\n            </div>\n            <div class=\"space-y-1.5\">\n              <div class=\"flex items-center justify-between text-xs\">\n                <span class=\"text-muted-foreground\">Self:</span>\n                <span class=\"text-foreground font-semibold tabular-nums\">{{ pillar.selfScore }} / 5.0</span>\n              </div>\n              <Progress :model-value=\"(pillar.selfScore / 5) * 100\" class=\"h-1.5 w-full\" />\n            </div>\n            <div class=\"space-y-1.5\">\n              <div class=\"flex items-center justify-between text-xs\">\n                <span class=\"text-muted-foreground\">Manager:</span>\n                <span class=\"text-foreground font-semibold tabular-nums\">{{ pillar.managerScore }} / 5.0</span>\n              </div>\n              <Progress :model-value=\"(pillar.managerScore / 5) * 100\" class=\"h-1.5 w-full\" />\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Competency Breakdown Accordion -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"pb-4\">\n        <CardTitle class=\"text-base font-semibold\">Competency Breakdown</CardTitle>\n        <CardDescription class=\"text-xs\">\n          Detailed behavioral criteria, manager qualitative remarks, and observable strengths.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <Accordion\n          type=\"multiple\"\n          :default-value=\"['tech-excellence', 'collab-mentorship', 'strategic-impact']\"\n          class=\"space-y-3\"\n        >\n          <AccordionItem\n            v-for=\"category in competencyCategories\"\n            :key=\"category.id\"\n            :value=\"category.id\"\n            class=\"border-border bg-card overflow-hidden rounded-lg border\"\n          >\n            <AccordionTrigger class=\"px-5 py-4 hover:no-underline\">\n              <div class=\"flex w-full flex-wrap items-center justify-between gap-3 pr-2 text-left\">\n                <div class=\"space-y-0.5\">\n                  <span class=\"text-foreground text-sm font-semibold\">{{ category.title }}</span>\n                  <p class=\"text-muted-foreground line-clamp-1 text-xs\">{{ category.criteria }}</p>\n                </div>\n                <div class=\"flex flex-wrap items-center gap-3\">\n                  <span class=\"text-foreground shrink-0 text-xs font-semibold tabular-nums\">{{ category.score }}</span>\n                  <Badge :variant=\"category.badgeVariant\" class=\"text-xs\">\n                    {{ category.ratingLabel }}\n                  </Badge>\n                </div>\n              </div>\n            </AccordionTrigger>\n            <AccordionContent class=\"px-5 pt-0 pb-5\">\n              <div class=\"border-border/60 space-y-4 border-t pt-4\">\n                <div class=\"space-y-1.5\">\n                  <div class=\"flex items-center justify-between text-xs\">\n                    <span class=\"text-muted-foreground font-medium\">Competency Mastery</span>\n                    <span class=\"text-foreground font-semibold tabular-nums\">{{ category.progress }}%</span>\n                  </div>\n                  <Progress :model-value=\"category.progress\" class=\"h-2 w-full\" />\n                </div>\n\n                <div class=\"bg-muted/40 border-border/80 space-y-1.5 rounded-md border p-3.5\">\n                  <div class=\"flex items-center gap-1.5\">\n                    <MessageSquareQuote class=\"text-primary size-4 shrink-0\" />\n                    <span class=\"text-foreground text-xs font-medium\">Manager Remarks</span>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs leading-relaxed\">{{ category.managerRemarks }}</p>\n                </div>\n\n                <div class=\"space-y-2\">\n                  <span class=\"text-muted-foreground text-xs font-medium\">Key Demonstrated Strengths</span>\n                  <div class=\"flex flex-wrap gap-1.5\">\n                    <Badge\n                      v-for=\"strength in category.strengths\"\n                      :key=\"strength\"\n                      variant=\"outline\"\n                      class=\"text-xs font-normal\"\n                    >\n                      {{ strength }}\n                    </Badge>\n                  </div>\n                </div>\n              </div>\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>\n      </CardContent>\n    </Card>\n\n    <!-- Goals & Objectives Progress Table -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"pb-4\">\n        <CardTitle class=\"text-base font-semibold\">Goals & Objectives Progress</CardTitle>\n        <CardDescription class=\"text-xs\">\n          Evaluation of quarterly OKRs, measurable deliverables, and milestone completion.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div class=\"border-border overflow-hidden rounded-lg border\">\n          <div class=\"overflow-x-auto\">\n            <Table>\n              <TableHeader class=\"bg-muted/50\">\n                <TableRow>\n                  <TableHead class=\"text-xs\">Objective & Key Result</TableHead>\n                  <TableHead class=\"text-xs\">Target Metric</TableHead>\n                  <TableHead class=\"w-44 text-xs\">Progress</TableHead>\n                  <TableHead class=\"text-right text-xs\">Status</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow v-for=\"okr in okrItems\" :key=\"okr.id\">\n                  <TableCell class=\"py-3\">\n                    <div class=\"space-y-0.5\">\n                      <p class=\"text-foreground text-sm font-medium\">{{ okr.title }}</p>\n                      <p class=\"text-muted-foreground text-xs\">{{ okr.description }}</p>\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"text-muted-foreground py-3 text-xs tabular-nums\">{{ okr.target }}</TableCell>\n                  <TableCell class=\"py-3\">\n                    <div class=\"flex items-center gap-2\">\n                      <Progress :model-value=\"okr.progress\" class=\"h-2 w-24\" />\n                      <span class=\"text-muted-foreground text-xs font-medium tabular-nums\">{{ okr.progress }}%</span>\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"py-3 text-right\">\n                    <Badge :variant=\"okr.statusVariant\" class=\"text-xs\">\n                      {{ okr.status }}\n                    </Badge>\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n            </Table>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- 360 Peer Feedback Quotes Card -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"pb-4\">\n        <CardTitle class=\"text-base font-semibold\">360° Peer Feedback</CardTitle>\n        <CardDescription class=\"text-xs\">\n          Synthesized qualitative reviews from cross-functional peers, mentees, and collaborators.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div class=\"grid grid-cols-1 gap-4 lg:grid-cols-3\">\n          <div\n            v-for=\"peer in peerFeedbacks\"\n            :key=\"peer.id\"\n            class=\"bg-muted/30 border-border flex flex-col justify-between space-y-3 rounded-lg border p-4.5\"\n          >\n            <div class=\"space-y-2\">\n              <Badge variant=\"outline\" class=\"text-xs font-normal\">\n                {{ peer.category }}\n              </Badge>\n              <p class=\"text-foreground text-xs leading-relaxed italic\">“{{ peer.quote }}”</p>\n            </div>\n            <div class=\"border-border/60 border-t pt-3\">\n              <p class=\"text-foreground text-xs font-semibold\">{{ peer.author }}</p>\n              <p class=\"text-muted-foreground text-xs\">{{ peer.role }}</p>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/PerformanceReviewMatrix.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/accordion.json",
    "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": "360-degree employee performance review scorecard and competency matrix: executive metrics, self vs manager rating comparison, detailed competency accordion with manager remarks, OKR progress table, and peer feedback quotes.",
  "categories": [
    "hr",
    "app"
  ]
}