1. Abstract

TimeTrack is a web-based project time tracking application. The application enables employees to clock in and clock out against specific assigned projects, while providing managers with a real-time dashboard, Excel-based reporting, and visual analytics. The system is built as a single-file Progressive Web Application (PWA) using HTML5, CSS3, and Vanilla JavaScript, with Supabase serving as the cloud database and authentication backend. TimeTrack is deployed on Netlify and the clock functional offline as well. This document presents a comprehensive account of the system's objectives, technology architecture, feature set, user navigation guide, data model, and compliance with the Digital Personal Data Protection Act (DPDP) 2023.

2. Introduction

Accurate project time tracking is a foundational requirement for any professional services organisation. Without a reliable and accessible system, managers lack the data necessary to assess project profitability, employee productivity, and billing accuracy. Traditional spreadsheet-based methods are prone to human error, version conflicts, and loss of data.

TimeTrack was developed to address these challenges with a lightweight, zero-installation web application that works on any device with a browser. The application is built using only free-tier services — making it fully reproducible and cost-free to operate — while delivering a professional-grade user experience complete with offline support, Excel exports, and visual analytics.

3. Problem Statement

SAM Associates (hypothetical) operates across multiple client projects with a team of employees spanning different designations. Prior to TimeTrack, time tracking was handled manually/ semi-automated systems, which were mostly based on spreadsheets or informal self-reporting, leading to the following documented challenges:

• No centralised, real-time visibility of employee time allocation across projects.

• Inability to generate per-project or per-employee effort reports reliably.

• Risk of data loss due to locally stored spreadsheets.

• No audit trail of clock-in and clock-out events.

• No mechanism to enforce which employees are assigned to which projects.

• No compliance framework for the collection and storage of employee personal data

• Inapplicability of existing tools in no-internet zones, forcing manual workarounds.

4. Project Objectives

1. Build a centralised, cloud-backed time tracking application accessible from any browser on any device.

2. Allow employees to clock in and clock out against assigned projects only, with a live running timer.

3. Provide managers with a real-time dashboard with key metrics, charts, and a filterable log of all time entries.

4. Export data to Excel in a structured, analysis-ready format with per-project breaksheets.

5. Support offline usage with automatic synchronisation upon reconnection.

6. Enable installation as a Progressive Web App (PWA) on mobile and desktop devices.

7. Comply with the Digital Personal Data Protection Act (DPDP) 2023, including consent management, data retention policy, and the right to erasure.

8. Use only free-tier services (Supabase, Netlify, Chart.js, SheetJS) to ensure zero operational cost.

5. Technology Stack

5.1 Frontend

Technology Version / Source Purpose

HTML5 Native Browser API Application structure and PWA manifest

CSS3

Native Browser API Responsive layout, light theme, sidebar, animations

Vanilla JavaScript ES6+ Full application logic — no external framework

Chart.js CDN (cdnjs) Doughnut and bar charts on the manager dashboard

SheetJS (xlsx) CDN (cdnjs) Excel (.xlsx) generation for reports and exports

5.2 Backend & Infrastructure

Service Tier Used Purpose

Supabase

Free (PostgreSQL) Cloud database, Row Level Security, user authentication

Netlify Free tier Static hosting, CDN delivery, HTTPS

Service Worker API Native PWA API Offline caching, background sync, PWA install ability

6. System Architecture

6.1 Architecture Overview

Time Track follows a Jamstack architecture. The entire frontend is delivered as a single HTML file (index.html) with all JavaScript and CSS inlined. This approach eliminates build tooling, dependency managers, and complex deployment pipelines. The service worker (sw.js) is served alongside the main file on Netlify and provides offline capability.

All data persistence is handled by Supabase — a PostgreSQL-based Backend-as-a-Service. The frontend communicates with Supabase via its JavaScript client library (loaded from a CDN). Row Level Security (RLS) policies on the database ensure that employees can only read their own data, while managers have broader access.

6.2 Offline-First Strategy

TimeTrack is designed to function without an internet connection. When an employee clocks in or clocks out in an offline state, the time log entry is stored in the browser's local storage under a queue key. When connectivity is restored, a background sync routine automatically sends all queued entries to Supabase. The UI displays a banner indicating the current connection status.

6.3 Database Schema

The Supabase PostgreSQL database consists of four tables:

Table Primary Key Key Columns

Profiles id (UUID) name, email, designation, role (manager/employee), active

Projects id (UUID) code, name, customer, active

Assignments id (UUID) employee_id → profiles, project_id → projects (UNIQUE pair)

time_logs

id (UUID) employee_id, employee_name, designation, project_id, project_name, customer, project_code, clock_in (timestamptz), clock_out (timestamptz), synced (bool)

Row Level Security is enabled on all tables. Email confirmation is disabled in Supabase Auth to allow seamless demo logins.

7. Features & Modules

7.1 Authentication Module

• Login screen with email and password fields.

• Quick sign-in dropdown populated from the Supabase database (demo users).

• DPDP Act 2023 consent checkbox — mandatory before sign-in is permitted.

• Role detection post-login: manager is redirected to the Manager Dashboard; employee is redirected to the Clock In/Out screen.

• Change Password feature available to all employees.

7.2 Manager Dashboard

• Four metric cards: Total Entries, Total Hours, Employees Active Today, Projects Logged.

• Interactive doughnut chart: hours by project (updates with filters).

• Interactive bar chart: hours by employee (updates with filters).

• Full log table with columns: Employee, Designation, Project, Code, Customer, Clock In, Clock Out, Duration.

• Filter panel: checkbox multi-select for employees, project dropdown, and date range picker.

• Export to Excel button: generates a multi-sheet workbook.

7.3 Employee Management

• Add new employees with name, email, designation, and role.

• Edit employee details.

• Delete employee details

7.4 Project Management

• Add projects with a project code, project name, and customer name.

• Edit project details.

• Activate and deactivate projects.

7.5 Project Assignment

• Chip-based assignment interface: manager selects an employee, then toggles project chips on or off.

• Assignments are stored in the assignments table with a unique constraint to prevent duplicates.

7.6 Reports Module

• Per-employee Excel download: all entries for the selected employee.

• Per-project Excel download: all entries for the selected project.

• Full report download: Summary sheet + Chart Data sheet + All Entries sheet + one sheet per project.

• All sheets include a TOTAL row and use consistent duration calculation (integer minutes, decimal hours).

7.7 Employee Clock In/Out

• Displays only the projects assigned to the logged-in employee.

• Clock In button starts a live running timer (HH:MM:SS).

• Clock Out stops the timer and saves the entry to Supabase (or local queue if offline).

• My Log tab shows the employee's personal history.

• Download My Data button: exports personal time logs to Excel.

7.8 DPDP Compliance Module

• Consent Notice displayed at every login — checkbox must be checked to proceed.

• Data Retention Policy: manager can configure the retention period (1–10 years) and trigger a bulk delete of records older than that threshold.

• Employee Data Erasure: manager can select an employee and permanently delete all their personal data (right to erasure).

• Breach Notification Guide: step-by-step instructions for configuring Supabase webhooks to meet the 72-hour breach notification requirement.

• Compliance Status Dashboard: visual checklist showing 7 of 8 DPDP requirements met out-of-the-box.

7.9 Progressive Web App (PWA)

• Installable on Android and iOS home screens.

• Service worker caches all assets for offline use.

• Custom app icon generated from the SAM Associates logo.

• Web App Manifest with display mode standalone.

8. Application Navigation Guide

This section provides a step-by-step walkthrough of every screen and feature in the application, for both manager and employee roles.

8.1 Accessing the Application

9. Open a web browser and navigate

10. The Login Screen is displayed with the SAM Associates branding on the left panel.

11. On mobile devices, the branding panel is hidden and a compact logo is shown above the form.

8.2 Login Screen

Step-by-step login:

12. Click the Quick Sign-In dropdown and select a user, OR type your email address manually in the Email field.

13. Enter your password in the Password field.

14. Read the Privacy Notice – DPDP Act 2023 displayed in the blue-bordered box.

15. Tick the checkbox labelled 'I have read and understood the privacy notice...' — the Sign In button will not function unless this box is checked.

16. Click Sign In.

17. The system detects your role and redirects you accordingly:

◦ If you are a Manager, you are taken to the Manager Dashboard.

◦ If you are an Employee, you are taken to the Clock In/Out screen.

8.3 Manager Navigation

Sidebar Sections

After manager login, a sidebar is displayed on the left with the following six navigation sections. On mobile, the sidebar is accessible via the hamburger menu (☰) in the top navigation bar.

Desktop View Mobile View

8.3.1 Dashboard

18. Click Dashboard in the sidebar.

19. Four metric cards are displayed at the top: Total Entries, Total Hours, Active Today, Projects.

20. Below the cards, two charts are displayed side-by-side: Doughnut Chart (Hours by Project) and Bar Chart (Hours by Employee).

21. A full log table occupies the lower portion of the screen.

22. Filtering the log:

◦ Click the checkbox beside one or more employee names to filter entries by employee.

◦ Select a project from the Project dropdown to filter to that project only.

◦ Set From Date and To Date in the date fields to restrict the date range.

◦ Both charts and the table update simultaneously when filters are changed.

23. Click Export Excel to download a multi-sheet Excel workbook of the currently filtered data.

8.3.2 Employees

24. Click Employees in the sidebar to view the employee list.

25. Each row shows the employee's name, email, designation, role, and current status (Active / Inactive).

26. To add a new employee:

◦ Click the + Add Employee button.

◦ Fill in the Name, Email, Designation, and Role fields in the form that appears.

◦ Click Save. The new employee is created in Supabase Auth and the profiles table.

27. To edit an employee: Click the Edit button on the employee's row, update the details, and click Save.

28. To delete an employee: Click the Delete button on the employee's row to set their status to Inactive. Inactive employees cannot log in.

8.3.3 Projects

29. Click Projects in the sidebar.

30. Each row displays the project code, name, customer, and active/inactive status.

31. To add a project:

◦ Click + Add Project.

◦ Enter the Project Code (short identifier, e.g., PROJ001), Project Name, and Customer Name.

◦ Click Save.

32. To edit a project: Click the Edit icon, modify the fields, and Save.

33. To deactivate a project: Use the toggle to mark it Inactive. Inactive projects do not appear on the clock-in dropdown for employees.

8.3.4 Assign Projects

34. Click Assign Projects in the sidebar.

35. Each employee is placed in a box.

36. Each employee box has all active projects displayed as chips (pill-shaped buttons).

37. Chips that are highlighted (filled) indicate projects currently assigned to the particular employee.

38. Click a chip to toggle the assignment on or off.

39. Changes are saved immediately to the assignments table in Supabase.

8.3.5 Reports

40. Click Reports in the sidebar.

41. Three report download options are displayed:

◦ Per Employee Report: select an employee from the dropdown and click Download. An Excel file is generated with all-time entries for that employee.

◦ Per Project Report: select a project from the dropdown and click Download. An Excel file is generated with all entries for that project.

◦ Full Report: click Download All. A multi-sheet Excel workbook is generated containing: Summary sheet — grand total hours per employee and per project.

Chart Data sheet — tabular data suitable for Excel charting. All Entries sheet — complete flat log of all-time records.

One sheet per project — entries filtered to that project.

8.3.6 Settings / DPDP

42. Click Settings in the sidebar.

43. The DPDP Compliance panel is displayed with the following sub-sections:

◦ Consent Notice Status: confirms the consent checkbox is active on the login screen.

◦ Breach Notification: step-by-step guide for configuring a Supabase webhook to notify authorities within 72 hours of a breach.

◦ Data Retention Policy: use the slider to set a retention period (1–10 years). Click Delete Old Records to permanently remove all time logs entries older than the selected threshold.

◦ Employee Data Erasure: select an employee from the dropdown and click Erase Data to delete all their personal time log records from the database (Right to Erasure under DPDP).

◦ Compliance Status: a checklist showing the status of all 8 DPDP requirements, with green ticks for met requirements and amber for items requiring manual configuration.

8.4 Employee Navigation

After logging in as an employee, two tabs are displayed at the top of the screen: Clock In/Out and My Log.

8.4.1 Clock In/Out Tab

44. The Clock In/Out tab is selected by default upon login.

45. Separate boxes show projects assigned to you by the manager. If no projects appear, contact your manager to request assignment.

46. Click the Clock In button of the project you start to work upon. A green timer begins running, displaying the elapsed time in HH:MM:SS format.

47. The button label changes to Clock Out. The selected project is locked during active clocking.

48. When you complete work on the project, click Clock Out. The time entry is saved to Supabase.

49. If you are offline when clocking in or out, the entry is stored locally and automatically synced the next time the device connects to the internet. An Offline banner is visible at the top of the screen.

8.4.2 My Log Tab

50. Click the My Log tab.

51. A table shows all your personal time entries: Project, Customer, Clock In, Clock Out, and Duration.

52. Entries are sorted from most recent to oldest. Click Download My Data to export your complete personal time log as an Excel file.

8.4.3 Change Password

53. Click the Change Password option in the sidebar or profile menu.

54. Enter your current password in the Current Password field.

55. Enter your new password in the New Password field.

56. Confirm the new password in the Confirm Password field.

57. Click Update Password. Supabase Auth updates your credentials. You are prompted to log in again.

8.4.4 Sign Out

58. Click Sign Out in the sidebar (visible at the bottom of the navigation).

59. Your session is cleared and you are returned to the Login screen.

9. Excel Export Format

All Excel files are generated client-side using the SheetJS library. The following conventions apply to all exported files:

• Duration (min) column: integer value representing the total minutes worked in a session.

• Duration (hrs) column: decimal value (e.g., 1.5 for 90 minutes), derived from the integer minute value.

• A TOTAL row is appended at the bottom of every data sheet, summing the duration columns.

• The Full Report workbook includes a Summary sheet with per-employee and per-project total hours.

• All calculations use a single rounding pipeline (milliseconds → integer minutes → decimal hours) to ensure consistency across all sheets.

10. DPDP Act 2023 Compliance

The Digital Personal Data Protection Act 2023 (DPDP Act) is India's primary legislation governing the processing of digital personal data. Time Track has been designed with DPDP compliance as a first-class requirement. The following table summarises the compliance status:

DPDP Requirement Implementation in TimeTrack Status

Lawful purpose for data collection

Free, specific, informed consent

Data minimisation

Purpose limitation

Time tracking for internal project management and client billing — stated in consent notice.

DPDP-compliant consent notice displayed at every login. Checkbox is mandatory before sign-in proceeds.

Only name, email, designation, and clock-in/out timestamps are collected. No unnecessary data fields. ✓ Met

Data used exclusively for internal time tracking.

Customer data shared in aggregated form only, as disclosed in the notice. ✓ Met

Right to access

Right to erasure

Employees can view and download their personal time log data at any time via the My Log tab. ✓ Met

Manager can permanently delete all personal data

for any employee via the DPDP Settings panel. ✓ Met

Data retention limits

Breach notification (72 hrs)

Configurable retention period (1–10 years). Automated deletion of records beyond the configured threshold.

Step-by-step guide in Settings to configure Supabase webhooks. Requires one-time manual setup by administrator.

11. Testing Summary

11.1 Functional Testing

Test Case Expected Behaviour Result

Login with valid credentials

Redirects to correct role dashboard Pass

Login without consent checkbox

Sign In button remains disabled Pass

Clock in on assigned project

Timer starts; Clock Out button appears Pass

Clock out

Entry saved; timer resets Pass

Clock in while offline

Entry queued locally; sync indicator shown Pass

Sync after reconnection

Queued entries uploaded to Supabase Pass

Filter dashboard by employee

Charts and table update to show filtered data Pass

Export Excel – Full Report

Multi-sheet workbook downloaded with TOTAL rows Pass

Assign project to employee

Project appears in employee's clock-in dropdown Pass

Erase employee data (DPDP)

All time_logs records for that employee deleted Pass

Install as PWA on mobile

Add to Home Screen option available; app loads offline Pass

12. Future Enhancements

• Email notifications to managers when entries are synced from offline devices.

• PDF export of individual timesheets for formal client submission.

• Multi-language support (English and regional Indian languages).

• Automated breach notification via Supabase Edge Functions and email integration.

• Advanced reporting: project burn-down charts, employee utilisation heatmaps.

• Two-factor authentication (2FA) for enhanced security.

• Integration with billing/invoicing tools (e.g., Zoho Invoice, QuickBooks).

• Mobile native app (React Native or Capacitor) for improved offline experience.

13. Deployment Guide

13.1 Prerequisites

• A free Supabase account (supabase.com).

• A free Netlify account (netlify.com).

• The index.html and sw.js files from this project.

13.2 Database Setup

60. Log in to Supabase and create a new project.

61. Navigate to the SQL Editor and execute the table creation scripts for profiles, projects, assignments, and time_logs.

62. Enable Row Level Security on all tables and apply the provided RLS policies.

63. Disable email confirmation in Authentication → Settings to allow immediate login after account creation.

64. Note the project URL and publishable API key — these are embedded in index.html.

13.3 Netlify Deployment

65. Log in to Netlify and create a new site.

66. Drag and drop the project folder (containing index.html and sw.js) into the Netlify deploy interface.

67. Netlify generates a unique URL. Optionally configure a custom subdomain.

68. Verify the application loads and the login screen appears.

14. Conclusion

TimeTrack demonstrates that a fully functional, production-quality, DPDP-compliant time tracking application can be built rapidly using only free-tier tools. The project spans a complete software development lifecycle: from requirements gathering and architecture design to implementation, testing, PWA packaging, and cloud deployment.

The application effectively addresses all identified pain points — centralised data, real-time visibility, offline resilience, exportable reports, and regulatory compliance — within a zero-cost operational envelope.

This project also demonstrates the transformative potential of AI-assisted development. By leveraging Claude AI as a development accelerator, the full system was built iteratively over a concentrated development period. The AI was used not as a code generator in isolation, but as a true pair programmer: debugging, refining, and extending the application in real time.

15. References

69. Supabase Documentation — https://supabase.com/docs

70. Netlify Documentation — https://docs.netlify.com

71. Chart.js Documentation — https://www.chartjs.org/docs

72. SheetJS Community Edition — https://sheetjs.com

73. MDN Web Docs: Service Workers — https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

74. Digital Personal Data Protection Act, 2023 — Ministry of Electronics and Information Technology, Government of India — https://meity.gov.in

75. Anthropic Claude AI — https://www.anthropic.com