Onboarding Checklists

Manage new-hire and role-specific onboarding tasks with live progress tracking.

Overview

Onboarding Checklists is a single-page browser app for HR and people operations teams who need to coordinate onboarding tasks across departments. Load pre-built templates, track completion percentages, filter by status, export checklists with audit history, visualize task distribution, and resume work with automatic browser save.

Key features

Summary dashboard

• Four KPI cards: Total tasks, Completed, Overdue, and Completion %.
• Overall progress bar shows completed vs total tasks at a glance.
• Chart.js doughnut chart breaks down tasks by status (Pending, In Progress, Complete, Overdue).

Checklist templates

• New Hire — standard first-week onboarding for all employees.
• Engineering — Role-specific — technical setup, security training, and code review milestones.
• Sales — Role-specific — CRM setup, product demo certification, and territory briefing.
• Reload template tasks replaces the current checklist with the selected template defaults.

Add and manage tasks

• Alpine.js form to add custom tasks with task name, owner, and due date.
• AG Grid lists Task, Owner, Due Date, and Status with color-coded status text.
• Cycle status advances Pending → In Progress → Complete; overdue tasks derive automatically from due dates.
• Delete removes a task with confirmation.
• Status filter radios show All, Pending, In Progress, Complete, or Overdue rows only.

Export and audit log

• Export Excel downloads `onboarding-checklist.xlsx` with Checklist and Audit Log sheets.
• Simulated audit log panel records template loads, task adds, status changes, deletions, and exports with timestamps.

Theme and persistence

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

Data & persistence

Sample data loads from the New Hire template when no saved state exists. Edits auto-save to localStorage on every change. Excel export uses SheetJS.

Charts & reporting

Chart.js doughnut chart summarizes task counts by status. Four KPI cards and the progress bar provide at-a-glance completion metrics.

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.