{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "performance-review-matrix", "title": "Performance Review Matrix", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/performance-review-matrix/PerformanceReviewMatrix.tsx", "content": "import * as React from 'react'\nimport {\n Award,\n Calendar,\n CheckCircle2,\n FileDown,\n MessageSquareQuote,\n Target,\n TrendingUp,\n Users,\n Zap,\n} from 'lucide-react'\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\nexport interface PerformanceReviewMatrixProps extends React.HTMLAttributes {}\n\ninterface MetricTile {\n title: string\n value: string\n subtitle: string\n progress: number\n icon: React.ComponentType<{ className?: string }>\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\nexport function PerformanceReviewMatrix({ className, ...props }: PerformanceReviewMatrixProps) {\n return (\n
\n {/* Employee & Review Header */}\n \n \n
\n
\n \n \n ER\n \n
\n
\n

Elena Rostova

\n \n Senior Staff Engineer\n \n
\n

Core Platform & Architecture · Engineering

\n
\n \n \n H2 2026 Review Cycle\n \n \n \n Reviewer: Manager: Marcus Vance\n \n
\n
\n
\n\n
\n \n \n Exceeds Expectations · 4.6 / 5.0\n \n \n
\n
\n \n \n\n {/* Executive Summary Scorecard */}\n
\n {metricTiles.map((tile) => {\n const Icon = tile.icon\n return (\n \n \n {tile.title}\n \n \n \n
\n {tile.value}\n
\n
\n \n
\n \n

{tile.subtitle}

\n
\n
\n \n \n )\n })}\n
\n\n {/* Self-Assessment vs Manager Assessment Comparison Strip */}\n \n \n
\n Self-Assessment vs Manager Assessment\n \n Consensus and score calibration across core performance pillars.\n \n
\n \n \n 96% Consensus Index\n \n \n \n
\n {assessmentPillars.map((pillar) => (\n
\n
\n {pillar.title}\n \n {pillar.delta}\n \n
\n
\n
\n Self:\n {pillar.selfScore} / 5.0\n
\n \n
\n
\n
\n Manager:\n {pillar.managerScore} / 5.0\n
\n \n
\n
\n ))}\n
\n \n \n\n {/* Competency Breakdown Accordion */}\n \n \n Competency Breakdown\n \n Detailed behavioral criteria, manager qualitative remarks, and observable strengths.\n \n \n \n \n {competencyCategories.map((category) => (\n \n \n
\n
\n {category.title}\n

{category.criteria}

\n
\n
\n \n {category.score}\n \n \n {category.ratingLabel}\n \n
\n
\n \n \n
\n
\n
\n Competency Mastery\n {category.progress}%\n
\n \n
\n\n
\n
\n \n Manager Remarks\n
\n

{category.managerRemarks}

\n
\n\n
\n Key Demonstrated Strengths\n
\n {category.strengths.map((strength) => (\n \n {strength}\n \n ))}\n
\n
\n
\n \n \n ))}\n \n \n \n\n {/* Goals & Objectives Progress Table */}\n \n \n Goals & Objectives Progress\n \n Evaluation of quarterly OKRs, measurable deliverables, and milestone completion.\n \n \n \n
\n
\n \n \n \n Objective & Key Result\n Target Metric\n Progress\n Status\n \n \n \n {okrItems.map((okr) => (\n \n \n
\n

{okr.title}

\n

{okr.description}

\n
\n \n {okr.target}\n \n
\n \n \n {okr.progress}%\n \n
\n \n \n \n {okr.status}\n \n \n \n ))}\n \n
\n
\n
\n \n \n\n {/* 360 Peer Feedback Quotes Card */}\n \n \n 360° Peer Feedback\n \n Synthesized qualitative reviews from cross-functional peers, mentees, and collaborators.\n \n \n \n
\n {peerFeedbacks.map((peer) => (\n \n
\n \n {peer.category}\n \n

“{peer.quote}”

\n
\n
\n

{peer.author}

\n

{peer.role}

\n
\n
\n ))}\n
\n \n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/PerformanceReviewMatrix.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/accordion.json", "https://uipkge.dev/r/react/avatar.json", "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/table.json" ], "description": "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" ] }