Dev – Auto-Break & Auto-Checkout – Time Tracking Policy Implementation

🎯 Objective

Automatically mark a user as on Break or Checked Out when:

1. They are inactive on the system for a defined time (idle detection). => 30 mins
2. They log out, close the browser, or the session expires. => 30mins
3. Their system/browser is offline or locked. => 30 mins

Note: This 30mins can be changed from Time Tracking Policy Page

1 message is sent on slack:

Since

🧩 Key Functional Modules

1. Activity Detection Module (Client-Side)

🔹 Responsibilities:

• Detect user inactivity (no mouse, keyboard, or interaction).
• Detect browser tab inactivity, system lock, or network offline.
• Trigger “Auto Break” after X minutes of inactivity.

🔹 Implementation:

• Use useIdleTimer hook (or custom code).
• Add tab visibility + focus/blur events.
• Detect system sleep or offline with:

window.addEventListener("offline", handleBreak)
document.addEventListener("visibilitychange", ...)

• WebSocket pings every 60s to confirm connection.

2. Session Monitoring & Logout Detection

🔹 Responsibilities:

• Detect:
• User logout
• Session timeout
• Browser tab/window close

🔹 Implementation:

• Listen to onbeforeunload, unload, and session expiration.
• On logout or unload, mark time log as “Checked Out”.
• Use navigator.sendBeacon() to send final log data.

window.addEventListener('beforeunload', () => {
  navigator.sendBeacon('/api/track/checkout', JSON.stringify({ userId, timestamp: Date.now() }));
});

3. Time Log State Machine (Server-Side Logic)

🔹 States:

• Active
• Start Break
• End Break
• Checked Out

🔹 Transitions:

TriggerFromToUser logs in / moves mouseBreak/OutActiveIdle timeout (e.g., 30 min)ActiveBreakLogout / browser close / offlineAnyChecked OutManual Checkout / BreakAnyBreak/Out

4. API Endpoints

As per Vinyak

🧪 Testing Plan

• Simulate inactivity, logout, browser close, offline scenarios.
• Verify state transitions: Active → Break → Checked Out.
• Confirm backend logs time correctly.
• Test across tabs, browsers, and incognito.