Back to home

React

Material UI

REST API

Developed time & attendance module for HR Management System of INVOKE's in-house product, collaboration with Tencent.

The Time and Attendance Module is a feature-rich, access-controlled system designed for authenticated users under a subscription model. It captures user clock-in and clock-out events, pairing them with contextual metadata such as geolocation and system time to provide reliable and tamper-proof records.

To implement location tracking, I utilized the JavaScript Geolocation API in conjunction with the Permissions API to determine whether location access had been granted, denied, or remained in prompt state. This allowed me to provide conditional UX flows and precise error handling based on permission status. The captured coordinates were also stored to help identify and verify access points.

For time tracking, I implemented a live timer using useEffect and setInterval, which calculates elapsed seconds in real-time using differenceInSeconds from the date-fns library. The timer is initialized from the persisted clockin.created_at timestamp, and auto-clears if both clock-in and clock-out data already exist, avoiding unnecessary computations.

gif of project

Beyond basic time logging, the module introduces status tracking and productivity tagging. Each attendance entry can hold contextual notes to capture user intent or reasons for irregularities. I designed this to assist in qualitative analysis of quantitative data — such as identifying patterns in late arrivals or overtime.

The employment status handling includes logic for flagging incomplete hours, overtime, and other edge cases. These rules are applied dynamically based on a user's configured schedule and are represented in both the UI and the backend data model. To support decision-making, I integrated a real-time dashboard for admins, where they can view individual and organizational attendance analytics.

The system is optimized for both desktop and mobile users, with a responsive layout and minimal network overhead. All features were designed with scalability in mind — particularly the timer logic, which remains lightweight even with frequent re-renders, and theGeolocation API, which degrades gracefully if permissions are not granted.

gif of project

© 2025 Afi Hillman |

Based in Kuala Lumpur