Timesheet & Attendance Tracking

Log hours, track approvals, and analyze time by project or employee.

Overview

Timesheet & Attendance is a single-page browser app for teams who need to log billable hours, track approval status, and summarize time by week or month. It combines Alpine.js forms, AG-Grid with employee grouping, Chart.js analytics, and SheetJS import/export in one HTML file.

Key features

Time entry grid

• AG-Grid with Date, Employee, Project, Task, Hours, Rate, and Amount columns
• Rows grouped by employee with expandable subtotals
• Auto-calculated amount from hours × rate

Log entry form

• Alpine.js form with date picker, employee selector, and project dropdown
• Hours and rate fields with instant amount calculation on save
• Status selector (Draft, Submitted, Approved)

Period & summary

• View this week, this month, or all time
• Summary cards: total hours, total amount, daily average, entry count
• Daily and weekly hour totals shown above the grid

Approval workflow

• Draft, Submitted, and Approved status with color-coded column
• Count of approved vs draft entries in summary card

Charts & filters

• Bar chart of hours by project or employee (toggle)
• Filter by employee and custom date range
• Chart and grid stay in sync with filters

Import & export

• Import Excel/CSV to replace all entries
• Export filtered rows to timesheets-export.xlsx

Theme & persistence

• All entries saved to localStorage
• Dark mode toggle with saved preference
• Responsive layout from mobile to desktop

Data & persistence

• 10 sample entries across three employees and four projects
• Data stored in localStorage (`timesheets_v1`)
• Import replaces all rows after confirmation

Built with

Tailwind CSS, Alpine.js, AG-Grid Community, Chart.js, and SheetJS — all from CDN in a single HTML page.

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