{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "performance-review-matrix", "title": "Performance Review Matrix", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/performance-review-matrix/performance-review-matrix.component.ts", "content": "import { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport {\n Award,\n Calendar,\n CheckCircle2,\n FileDown,\n LucideAngularModule,\n MessageSquareQuote,\n Target,\n TrendingUp,\n Users,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport {\n UiAccordionComponent,\n UiAccordionContentComponent,\n UiAccordionItemComponent,\n UiAccordionTriggerComponent,\n} from '@/ui/accordion/accordion.component'\nimport { UiAvatarComponent, UiAvatarFallbackComponent, UiAvatarImageComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\ninterface MetricTile {\n title: string\n value: string\n subtitle: string\n progress: number\n icon: unknown\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 { title: 'Core Goals Achieved', value: '94%', subtitle: '+4% vs H1 target', progress: 94, icon: Target },\n { title: 'Technical Leadership', value: '4.8 / 5.0', subtitle: 'Top 5% org percentile', progress: 96, icon: Award },\n { title: 'Culture & Mentorship', value: '4.7 / 5.0', subtitle: '3 mentees promoted', progress: 94, icon: Users },\n { title: 'Execution Velocity', value: '4.5 / 5.0', subtitle: '18 epics delivered', progress: 90, icon: Zap },\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\n/**\n * PerformanceReviewMatrix -- the React block, 1:1: employee header with overall rating,\n * executive scorecard tiles, self-vs-manager calibration pillars, a competency accordion\n * with manager remarks, an OKR progress table, and 360 peer feedback quotes.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-performance-review-matrix, [ui-performance-review-matrix]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAccordionComponent,\n UiAccordionContentComponent,\n UiAccordionItemComponent,\n UiAccordionTriggerComponent,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiAvatarImageComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiProgressComponent,\n UiSeparatorComponent,\n UiTableComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n
\n
\n
\n
\n \n \n ER\n \n
\n
\n

Elena Rostova

\n Senior Staff Engineer\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 Exceeds Expectations · 4.6 / 5.0\n \n \n
\n
\n
\n
\n\n
\n @for (tile of metricTiles; track tile.title) {\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
\n
\n

Self-Assessment vs Manager Assessment

\n

Consensus and score calibration across core performance pillars.

\n
\n \n \n 96% Consensus Index\n \n
\n
\n
\n @for (pillar of assessmentPillars; track pillar.title) {\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
\n
\n

Competency Breakdown

\n

\n Detailed behavioral criteria, manager qualitative remarks, and observable strengths.\n

\n
\n
\n \n @for (category of competencyCategories; track category.id) {\n \n \n \n
\n
\n
\n Competency Mastery\n {{ category.progress }}%\n
\n \n
\n
\n
\n \n Manager Remarks\n
\n

{{ category.managerRemarks }}

\n
\n
\n Key Demonstrated Strengths\n
\n @for (strength of category.strengths; track strength) {\n {{ strength }}\n }\n
\n
\n
\n \n \n }\n \n
\n
\n\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 \n \n \n \n \n \n \n @for (okr of okrItems; track okr.id) {\n \n \n \n \n \n \n }\n \n
Objective & Key ResultTarget MetricProgressStatus
\n
\n

{{ okr.title }}

\n

{{ okr.description }}

\n
\n 		{{ okr.target }}\n
\n \n {{ okr.progress }}%\n
\n 		\n {{ okr.status }}\n
\n
\n
\n
\n
\n\n
\n
\n

360° Peer Feedback

\n

\n Synthesized qualitative reviews from cross-functional peers, mentees, and collaborators.\n

\n
\n
\n
\n @for (peer of peerFeedbacks; track peer.id) {\n
\n
\n {{ peer.category }}\n

“{{ peer.quote }}”

\n
\n
\n

{{ peer.author }}

\n

{{ peer.role }}

\n
\n
\n }\n
\n
\n
\n
\n `,\n})\nexport class UiPerformanceReviewMatrixComponent {\n protected readonly Award = Award\n protected readonly Calendar = Calendar\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly FileDown = FileDown\n protected readonly MessageSquareQuote = MessageSquareQuote\n protected readonly TrendingUp = TrendingUp\n\n @Input('class') className?: string\n\n protected readonly metricTiles = metricTiles\n protected readonly assessmentPillars = assessmentPillars\n protected readonly competencyCategories = competencyCategories\n protected readonly okrItems = okrItems\n protected readonly peerFeedbacks = peerFeedbacks\n protected readonly openCompetencies = ['tech-excellence', 'collab-mentorship', 'strategic-impact']\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n asIcon(icon: unknown): never {\n return icon as never\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/performance-review-matrix/performance-review-matrix.component.ts" }, { "path": "packages/registry-angular/blocks/performance-review-matrix/index.ts", "content": "export { UiPerformanceReviewMatrixComponent } from './performance-review-matrix.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/performance-review-matrix/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/accordion.json", "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/table.json" ], "description": "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" ] }