Timesheet System

Introduction

A multi-role platform for timesheet submission, approval workflows, and reporting dashboards — replacing spreadsheet-based processes.

Problem Statement

Timesheets and approvals ran on spreadsheets and email with no real-time visibility for managers.

Scope

Employee/Manager/Admin dashboards, approval workflow UI, reporting charts, exports, and optimistic UI updates.

Target Audience

Employees, managers, and administrators.

Functional Requirements

• Multi-role dashboards
• Approval workflow with edge cases
• Reporting charts and export layouts
• Optimistic UI updates
• Validation rules
• Real-time visibility into submissions

Challenges

• Complex workflow states (revisions, rejections)
• Optimistic UI consistency with failed APIs
• Shared components across role dashboards
• Reporting views for large datasets

Solution

Built status-driven approval flows, dashboards, and reporting with export-friendly UI. Used optimistic updates for fast interaction.

Technical Overview

React UI with Tailwind. Chart.js for reporting. Centralized state handling for workflow status.

Advantages

Limitations

• Complex approval chains require configuration
• Historical data migration requires manual work
• Offline entry is out of scope

Outcome

The system replaced a manual process and reduced approval turnaround from days to hours while improving reporting visibility.

Key Learnings

• Status-driven UI prevents invalid transitions
• Optimistic updates need rollback handling
• Shared components reduce build time significantly
• Reporting features are always underestimated