Performance Review Tracking

Track employee performance reviews, ratings, and development areas in one browser page.

Overview

Performance Review Tracking is a single-page app for HR and people managers who need to record review cycles without a separate HRIS module. Capture ratings on a 1–5 scale with labeled strengths and development areas, group reviews by employee or status, export Excel workbooks with trend data, visualize rating distribution and monthly averages, and resume work with automatic browser save.

Key features

Summary cards

• Total reviews — count of performance review records.
• Average rating — mean score across all reviews (1–5 scale).
• Completed — reviews marked Complete.
• Trend (90d) — compares recent 90-day average rating to the prior period (↑, ↓, or Stable).

New performance review form

• Alpine.js form with employee selector, review date, 1–5 rating slider with labels (Needs improvement through Exceptional), strengths and areas text areas, and status (Draft, Scheduled, Complete).
• Save review adds a row to the grid and refreshes KPIs and charts.

Grouping

• Radio controls to group the grid by Employee, Status, or none.
• Pinned bottom rows show average rating per group.

Performance reviews grid

• AG Grid with Employee, Review Date, Rating, Strengths, Areas, and Status columns.
• Color-coded ratings (green ≥4, amber ≥3, red below 3) and status styling.
• Overdue rows highlight when review date has passed and status is not Complete.
• Delete removes a review with confirmation.

Excel export and trend tracking

• Export Excel downloads `performance-reviews.xlsx` with Reviews and Rating Trend sheets.
• Average rating trend line chart shows monthly average ratings over time.
• Trend table in export summarizes avg rating and review count per month.

Rating distribution chart

• Chart.js bar chart showing count of reviews at each rating level (1–5).
• Updates when reviews are added or deleted.

Theme and persistence

• Dark mode toggle (☀️ / 🌙) with Tailwind class switching and theme-aware AG Grid and Chart.js colors.
• Reviews and next ID auto-save to browser localStorage; dark mode preference is remembered.

Data & persistence

Sample data includes seven performance reviews across six employees. Edits auto-save to localStorage; sample records load when no saved state exists. Excel export uses SheetJS.

Charts & reporting

Chart.js powers the rating distribution bar chart and average rating trend line chart. Four KPI summary cards highlight team performance at a glance.

Built with

Tailwind CSS, Alpine.js, AG Grid Community, Chart.js, and SheetJS (xlsx).

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.