Clocking In and Out with the Time Clock

Summary

Torqueflow provides two ways for staff to clock in and out: a shared kiosk interface at /time-clock (designed for a workshop tablet) and a personal header widget available on every page. Both record check-in/out times, optional photo verification, and break periods. Staff can view their own time history at /my-time.

Prerequisites

• You are signed in with any staff account.
• Your organisation has time tracking enabled.
• For the kiosk, you need the time.clock.self or time.clock.others capability. For self-service, you need time.clock.self.

Steps

Using the Kiosk Interface

1. Open /time-clock on the workshop tablet or any browser. This is a standalone full-screen page with no sidebar navigation.
2. The header shows your organisation name, “Time Clock” label, the current time in large format, and the current date.
3. If photo verification is enabled, a “Photo Required” badge appears next to the organisation name.
4. A grid of staff cards displays all staff enabled for time tracking. Each card shows:
   • Staff initials (or a coffee icon if on break).
   • Display name.
   • Status badge: “Not checked in”, “In since HH:MM”, or “On Break (Xm)”.
5. If your organisation has more than 10 staff, a search bar appears above the grid. Type a name to filter.

Clocking In

1. Tap your staff card. A confirmation dialog opens.
2. If photo verification is enabled, the dialog prompts you to take a photo using the device camera.
3. Tap Check In (or Confirm if photo was captured).
4. A green success overlay appears for 4 seconds showing “Checked In!”, your name, the time, and your photo thumbnail (if taken). The overlay auto-dismisses.
5. Your card updates to show a green border and “In since HH:MM”.

Clocking Out

1. Tap your staff card again while checked in.
2. A confirmation dialog shows “Check Out” with an optional photo capture.
3. Tap Check Out.
4. An orange success overlay appears for 4 seconds showing “Checked Out!”, your name, the time, and total hours worked (e.g. “7.50 hours worked”).
5. Your card updates to show no border and “Not checked in”.

Taking a Break

1. If break tracking is enabled, a Break button (amber) appears on your card while you are checked in.
2. Tap the Break button. A confirmation dialog opens.
3. Tap Start Break. An amber success overlay shows “On Break!”.
4. Your card changes to amber with a coffee icon and “On Break (Xm)” showing running duration.
5. To end your break, tap your card or the End Break button. An amber overlay shows “Back from Break!” with the break duration in minutes.

Using the Header Clock Widget

1. On any page, look for the clock icon in the application header. A coloured dot indicates your current status:
   • Green dot: you are checked in.
   • No dot: you are not checked in.
2. Click the clock icon to open a popover showing:
   • Your current status (“Checked In” or “Not Checked In”).
   • Hours worked today (if checked in).
   • A Check In or Check Out button.
3. Tap the button to toggle your clock status. A toast notification confirms the action.
4. This uses the self clock method (no photo capture).

Viewing Your Time History

1. Navigate to /my-time (accessible from the sidebar navigation under “My Time”).
2. The page title is “My Time” with subtitle “View your time clock history”.
3. A table displays your entries with columns:
   • (expand arrow) - click to expand and view audit history for that entry.
   • Date - day of the entry (e.g. “Mon, Mar 29, 2026”).
   • Check In - check-in time with a green dot (e.g. “08:15”).
   • Check Out - check-out time with an orange dot, or “In Progress” badge if still clocked in.
   • Hours - total hours worked (e.g. “7.50h”), or ”-” if still in progress.
4. Use the Filter button to set a start and/or end date. The calendar picker restricts dates to the past.
5. Tap Apply to filter. An “Active” badge appears on the Filter button. Tap the X to clear filters.
6. The page shows total entry count and pagination (20 entries per page). Use the left/right arrows to navigate pages.
7. Click any row to expand it and view the audit trail for that entry (clock-in/out events, device info, photo links).

Expected Outcome

• Staff can clock in and out from the kiosk or the header widget.
• Break periods are tracked separately when break tracking is enabled.
• Photo verification captures are stored against the time entry when enabled.
• Time history shows accurate records with expandable audit details.
• The kiosk footer shows a summary: “X of Y staff checked in” and the rounding configuration.

Troubleshooting

Problem	Cause	Fix
”You are offline” banner on the kiosk	The device has lost network connectivity.	Check the Wi-Fi or ethernet connection on the kiosk device. Clock actions do not work offline.
Check-in or check-out fails with error	Server-side validation issue (e.g. duplicate clock-in).	Tap the Retry button in the red error banner that appears. If it persists, refresh the page.
Photo capture does not open	Browser does not have camera permissions.	Grant camera access in the browser settings for this site.
Staff card missing from the kiosk	Staff member is not enabled for time tracking.	Ask an admin to enable time tracking for the staff member in organisation settings.
No clock icon in the header	Your account does not have the time.clock.self capability.	Ask an admin to grant you time clock access.
”No Time Entries” shown on My Time	No clock-in records exist, or the date filter excludes all entries.	Clear any active date filters. If you have never clocked in, your history will be empty.
Rapid taps register only one action	Debounce protection (300ms).	This is expected behaviour to prevent duplicate entries. Wait a moment and try again.

Notes

• The kiosk interface is designed for tablets with large touch targets (minimum 56px).
• Success overlays display for 4 seconds and auto-dismiss. Tap anywhere to dismiss early.
• The kiosk collects device fingerprint and geolocation (if available) for audit purposes. Geolocation is optional and does not block clock actions.
• Time rounding configuration (interval and direction) is set by the organisation admin and displayed in the kiosk footer.
• Kiosk sessions have an expiry overlay for dedicated kiosk devices.

Permissions

• Kiosk access requires time.clock.self or time.clock.others capability.
• Self-service header widget requires time.clock.self capability.
• My Time page requires time.clock.self capability.
• The kiosk page at /time-clock requires authentication. Unauthenticated users see a sign-in prompt.