Back to home
Take me there!
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.
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.