Training & Certification Tracking

Track course completions, certification expiry, and team compliance in one browser page.

Overview

Training & Certification Tracking is a single-page app for HR and operations teams who need to monitor employee certifications without a separate LMS. Record completions with auto-calculated expiry dates, group by employee or course, see compliance KPIs, import or export Excel workbooks, chart completion rates, and resume work with automatic browser save.

Key features

Compliance summary cards

• Total records — count of training completion entries.
• Compliance rate — percentage of records with Valid certification status.
• Expiring soon — certifications expiring within 30 days.
• Expired — overdue certifications requiring renewal.
• Cards update when records are added, imported, or deleted.

Record completion form

• Alpine.js form with employee selector, course picker (with validity period), completion date, and score.
• Expiry date auto-calculates from completion date plus course validity days and previews before save.
• Save completion adds a row to the grid and refreshes KPIs, alerts, and chart.

Overdue alerts

• Red alert banner lists all expired certifications with employee, course, and expiry date.
• Banner appears when any record has Expired status and updates live.

Completion rate chart

• Chart.js bar chart showing valid certification rate % by course.
• Bars color-coded green (≥80%), amber (≥50%), or red below 50%.
• Axis labels adapt to light or dark theme.

Grouping

• Radio controls to group the grid by Employee, Course, or none.
• Pinned bottom rows show compliance summary (valid count and average score) per group.

Training records grid

• AG Grid with Employee, Course, Completion Date, Expiry Date, Status, and Score columns.
• Status derived from expiry date: Valid, Expiring Soon, or Expired with color-coded text.
• Expired rows use red background; expiring-soon rows use amber.
• Delete removes a record; sortable, resizable columns.

Excel import and export

• Export Excel downloads `training-records.xlsx` with Training Records and Overdue Alerts sheets.
• Import Excel merges rows from a spreadsheet with matching column layout.

Theme and persistence

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

Data & persistence

Sample data includes seven training records across six employees and courses (Safety Induction, Forklift Certification, First Aid, Fire Safety, Data Privacy, Leadership Essentials). Edits auto-save to localStorage; sample records load when no saved state exists. Excel import/export uses SheetJS.

Charts & reporting

Chart.js powers the completion rate by course bar chart. Four KPI summary cards and the overdue alerts banner summarize compliance risk. Pinned group rows show per-employee or per-course compliance when grouping is enabled.

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.