Performance & Onboarding

The performance and onboarding modules handle employee reviews, goal tracking, review cycle management, and structured onboarding workflows. These are grouped under Talent in the sidebar.

Performance Overview

Route: /performance

Summary dashboard showing overall performance metrics.

• Average rating -- company-wide average across all completed reviews
• Rating distribution -- horizontal bar chart showing how many employees fall into each rating tier (1-5 stars)
• Recent reviews -- list of recently completed reviews with employee name, reviewer, rating, and date
• Team summaries -- department-level performance averages

import { RatingChart } from "@/components/performance/rating-chart"

Individual Review Form

Route: /performance/reviews/[id]

A multi-section review form for conducting employee performance reviews.

• Review header -- employee info, review period, reviewer name, and status (Draft, In Progress, Completed)
• Rating sections -- multiple review categories, each with:
  • Section title (e.g., "Technical Skills", "Communication", "Leadership")
  • Star rating input (1-5 stars) with hover and click interaction
  • Comments textarea for qualitative feedback
• Overall rating -- auto-calculated average with option to override
• Summary -- final comments and recommendations textarea
• Actions -- Save Draft, Submit Review buttons

import { RatingInput } from "@/components/performance/rating-input"
import { ReviewSection } from "@/components/performance/review-section"

Star Rating Component

The RatingInput renders 5 interactive stars with hover preview, click to set, and keyboard support (arrow keys to adjust, Enter to confirm). Includes half-star display for calculated averages.

Goals & OKRs

Route: /performance/goals

Goal management with OKR-style key results and progress tracking.

• Goal cards -- each goal shows title, description, owner, due date, status (On Track, At Risk, Behind), and progress percentage
• Key results -- nested under each goal, each key result has a title, target value, current value, and progress bar
• Progress tracking -- circular progress indicator and linear progress bars
• Filters -- filter by status, department, quarter
• Add goal -- form to create a new goal with key results

import { GoalCard } from "@/components/performance/goal-card"
import { GoalProgressCard } from "@/components/performance/goal-progress-card"

Goal Card Layout

┌─────────────────────────────────────────┐
│ 🎯 Improve engineering velocity         │
│ Due: Q2 2026          Status: On Track  │
│ ████████████░░░░░░░░ 65%                │
│                                          │
│ Key Results:                             │
│ ├─ Reduce PR review time to < 4hrs  80% │
│ ├─ Ship 3 features per sprint       66% │
│ └─ Zero critical bugs in prod       50% │
└─────────────────────────────────────────┘

Review Cycles

Route: /performance/cycles

Admin view for managing review cycle periods.

• Cycle cards -- each cycle shows name (e.g., "Q1 2026 Review"), date range, status (Upcoming, Active, Completed), and completion percentage
• Timeline visualization -- horizontal timeline showing cycle phases (Self Review, Peer Review, Manager Review, Calibration)
• Progress tracking -- how many reviews are completed vs total expected
• Cycle management -- create new cycles, set dates, assign reviewers

import { CycleCard } from "@/components/performance/cycle-card"
import { CycleTimeline } from "@/components/performance/cycle-timeline"

Review Cycle Phases

Phase	Description
Self Review	Employee completes self-assessment
Peer Review	Selected peers provide feedback
Manager Review	Direct manager completes evaluation with ratings
Calibration	Leadership calibrates ratings across teams

Onboarding Dashboard

Route: /onboarding

Overview of active onboarding processes with progress tracking.

• Active hires -- cards for each employee currently being onboarded, showing name, role, start date, and progress ring
• Progress rings -- SVG circular progress indicators showing completion percentage
• Status summary -- counts of completed, in-progress, and not-started tasks

import { OnboardingCard } from "@/components/onboarding/onboarding-card"
import { ProgressRing } from "@/components/onboarding/progress-ring"

Onboarding Checklists

Route: /onboarding/[id]

Detailed checklist view for a specific onboarding process.

• Phased tasks -- tasks organized by phase (Pre-boarding, Day 1, Week 1, Month 1)
• Task checklist -- each task has a checkbox, title, description, assignee, and due date
• Progress tracking -- overall and per-phase progress bars
• Buddy assignment -- assigned onboarding buddy with contact info

import { TaskChecklist } from "@/components/onboarding/task-checklist"

Onboarding Phases

Phase	Example Tasks
Pre-boarding	IT setup, desk assignment, welcome email, access provisioning
Day 1	Office tour, team introductions, tool walkthroughs, lunch with manager
Week 1	Product overview, codebase orientation, first task assignment
Month 1	30-day check-in, feedback session, goal setting

Onboarding Templates

Route: /onboarding/templates

Reusable onboarding templates organized by role and department.

• Template cards -- name, department, task count, estimated duration
• Template editor -- add/remove/reorder tasks, set default assignees and durations
• Department filter -- filter templates by Engineering, Design, Marketing, etc.

import { TemplateCard } from "@/components/onboarding/template-card"

Data Sources

Data	Source	Location
Performance reviews	performanceReviews	data/seed.ts
Review cycles	reviewCycles	data/seed.ts
Goals	goals	data/seed.ts
Onboarding checklists	onboardingChecklists	data/seed.ts
Onboarding templates	onboardingTemplates	data/seed.ts

Next Steps

• Recruitment Pipeline -- job postings and applicant management
• Design Tokens -- oklch color system and theming