Clock in. Work your shift. Clock out.
Every punch is stamped to the exact second and saved to your timecard — breaks, totals, and leave all in one place, right here at the store clock.
On shift right now
0 inFirst-time setup — create the manager account
No accounts exist on this clock yet. Create the manager account first — you'll add each employee and their 4-digit PIN from the Admin Panel. Choose a PIN that isn't easy to guess and keep it private.
Enter your 4-digit Employee ID
Tap the keypad or type on a keyboard. The clock stamps the exact time — down to the second — when you punch.
📍 Punch from the store: when location check is on, you must be at the store to clock in or out. Allow location when your browser asks.
Managers: sign in with your manager PIN, then open the Admin Panel tab for employee setup, timecard edits, approvals, and the audit log.
—
Store rule: break time is tracked for the record but not deducted from paid hours.
Today's punches
My hours
Tap any day on the calendar to see exact punch-in, punch-out, and break times.
—
Hours shown are paid hours (breaks not deducted). L = approved leave. A dot means a shift is in progress or has notes.
Hours chart
Leave requests
Admin Panel — manager sign-in required
This is the manager's admin area: employee setup, timecard adjustments, leave approvals, and the audit log. It is separate from the employee portal. Sign in on the Clock tab with a manager PIN to open it.
At a glance
Employees & PINs
Create accounts, assign each person to their store, change PINs, promote a manager, or deactivate someone who has left. Tap an employee's name or “View timecard” to open their full chart detail — total hours each day, plus weekly, biweekly and monthly totals. The list follows the Viewing store pick in the sidebar. PIN changes and deactivations are logged.
| Name | PIN / ID | Store | Role | Status | This week | Actions |
|---|
Employee
—
Chart and table update from the switcher above: Daily = total hours for each day, Weekly = each Mon–Sun week, Biweekly = each 14-day pay period, Monthly = each calendar month.
Timecards — adjust any punch
Every edit is written to the audit log with the manager's name, the old value, and the new value. Rows follow the Viewing store pick in the sidebar; each punch records the store it was at.
| Employee | Store | Date | In | Out | Break | Paid hrs | Actions |
|---|
Stores & locations
Every employee belongs to one store. Their punches are checked against their own store's location and radius — not a single global point — and every punch records which store it was at. Deactivating a store keeps its history; its staff keep their assignment until you move them.
| Store | Address | Location check | Staff | Status | Actions |
|---|
Edit store
Not set upWhen the check is on for a store, its employees can only Clock In, start/end a break, or Clock Out while physically at that store. A punch from home is blocked and the attempt is written to the audit log.
- Select the store above (Edit), then open this page on a phone / tablet / PC at that store.
- Tap Use my current location below — allow location when the browser asks.
- Choose a radius (100 m is recommended — 50 m can be too tight when GPS drifts indoors), turn the check ON, and Save.
Filled automatically by “Use my current location”, or paste from Google Maps.
Policy is 50–100 m. Anything above 100 m is a deliberate manager exception for that store and is recorded in the audit log when saved.
No store location saved yet.
What employees will see
On their first punch the browser asks for location permission — they must tap Allow. Inside the radius: the punch goes through and the distance is saved in the audit log (e.g. “38 m from store”). Outside the radius: only that punch action is blocked, with a message showing how far away they are, and the blocked attempt is logged with their name, time, and distance. Location is only checked at the moment of a punch; there is no background tracking.
Punch-only rule: signing in, viewing their own timecard, calendar and hours, checking leave status, and submitting leave requests are never location-blocked — employees can do all of that from home or anywhere. The check applies only to Clock In, Clock Out, Start Break, and End Break.
GPS note: Indoors, GPS can drift 20–50 m. If staff standing inside get blocked, raise the radius to 150 m. On the dedicated store clock (a PC/tablet that never leaves the store), the check will pass from that device’s location — still set the store point from that same device for best accuracy.
Emergency override: If GPS fails for a genuine at-store punch, a manager can turn the check OFF for that store here, let the employee punch, then turn it back ON — both actions are logged. Managers can also add a manual shift in Timecards for a missed punch.
Leave approvals
Approve or deny employee leave requests — and change your mind at any time: no status is final. A denied request can be approved later, an approval can be denied, and either can be re-opened to Pending. Every change is logged with the old and new status, and the employee sees the updated status on their own leave list. The list follows the Viewing store pick in the sidebar.
Audit log — every action, recorded
Reports — manager access only
Payroll summaries, store-wide hours, exports, backups, and sign-off are admin data — only a signed-in manager can see them. Employees can view their own hours, calendar, and charts under My Hours & Calendar.
Payroll summary
Monday–Sunday weeks. Paid hours = clock-in to clock-out with no break deduction. Break minutes are shown for the record. Showing all stores.
| Employee | Store | Week hrs | Week break | Month hrs | Shifts |
|---|
Sign-off for the period
Both signatures are saved with the period and printed on the report.
Hosting this on Cloudflare — setup guide
What you have
This timeclock is one self-contained page (index.html) built for Cloudflare Pages. Punches are stamped by the device clock to the exact second. Right now the page runs in kiosk mode: records are stored in the browser on the clock device, with one-click JSON backup/restore and CSV export above — so export a backup regularly, and use one dedicated store tablet/PC as the clock.
Option A — Put it online in about 5 minutes (single store clock)
- Go to dash.cloudflare.com → Workers & Pages → Create → Pages → Upload assets.
- Upload this page as
index.html(zip the folder if asked). Name the project e.g.shopnsave-timeclock. - Cloudflare gives you a URL like
shopnsave-timeclock.pages.dev. Open it on the store clock device and add it to the home screen / bookmark it — that's your timeclock. - Optional: attach your own domain under the Pages project → Custom domains.
- Open the clock once and complete the first-run setup: create the manager account with your own private 4-digit PIN, then add each employee with their own PIN from the Admin Panel.
Option B — True cloud database, every device in sync (Cloudflare D1 + Worker)
When you want phones and the register PC to share one live database, add a small Worker API in front of Cloudflare D1 (free tier is plenty for a store). The page is already structured around these endpoints — point API_BASE at your Worker and swap the storage functions to fetch() calls:
POST /api/login { pin } → employee session
POST /api/punch { employeeId, type: "in" | "out" | "break_start" | "break_end" }
GET /api/shifts?employeeId=&from=&to= → punches for calendar & reports
POST /api/leaves { employeeId, from, to, type, reason }
PUT /api/leaves/:id { status } (manager)
POST /api/employees (manager) · PUT / DELETE /api/employees/:id
PUT /api/shifts/:id (manager, timecard adjustment — server writes audit row)
GET /api/audit (manager)
D1 tables:
CREATE TABLE stores (id TEXT PRIMARY KEY, name TEXT NOT NULL, address TEXT DEFAULT '', lat REAL, lng REAL, radius INTEGER DEFAULT 100, geofence_enabled INTEGER DEFAULT 0, active INTEGER DEFAULT 1); CREATE TABLE employees (id INTEGER PRIMARY KEY, pin TEXT UNIQUE NOT NULL, name TEXT NOT NULL, role TEXT DEFAULT 'employee', active INTEGER DEFAULT 1, store_id TEXT REFERENCES stores(id)); CREATE TABLE shifts (id TEXT PRIMARY KEY, employee_id INTEGER, store_id TEXT, date TEXT, clock_in TEXT, clock_out TEXT, breaks TEXT DEFAULT '[]', note TEXT); CREATE TABLE leaves (id TEXT PRIMARY KEY, employee_id INTEGER, store_id TEXT, from_date TEXT, to_date TEXT, type TEXT, reason TEXT, status TEXT DEFAULT 'Pending'); CREATE TABLE audit (id INTEGER PRIMARY KEY AUTOINCREMENT, ts TEXT, actor TEXT, store_id TEXT, action TEXT, details TEXT);
- Create the database: Cloudflare dashboard → Storage & Databases → D1 → Create, then run the SQL above in its Console tab.
- Create a Worker, bind the D1 database as
DB, and implement the endpoints above (each punch inserts/updates ashiftsrow using the server time, and every manager change inserts anauditrow). - Deploy the Worker, set
API_BASEin this page to the Worker URL, and re-upload the page to Pages. - Keep PINs hashed on the server (e.g. SHA-256) — never check PINs only in the browser for a public URL.
Multiple stores & location check (geofence)
Admin Panel → Stores & Locations: add each location (name, address), stand inside that store, tap Use my current location, pick its radius (50–100 m; 100 m recommended, 150 m allows for indoor GPS drift), turn its check ON, and Save store. Assign every employee to a store in Employees — their Clock In / Out and break punches are verified against their own store's point and radius at the moment of the punch, and each punch records its store (calendar day detail, timecards, CSV). Outside the radius the punch is blocked, the distance is shown, and the blocked attempt is written to the audit log. The Viewing store pick in the admin sidebar (also on Reports) filters Employees, Timecards, Leave, Reports & Analytics, and the audit log to one store, or choose All Stores for everything. The existing Belmont store is kept as the first/default store; older data without a store is assigned to it automatically. The location check is punch-only: it runs only for Clock In, Clock Out, Start Break, and End Break — signing in, viewing hours/calendar/leave, and submitting leave requests work from anywhere and are never blocked by location. Leave statuses are reversible: a manager can change any request between Pending, Approved, and Denied at any time, and every change is audit-logged. Location requires HTTPS (your *.pages.dev address qualifies) and the employee tapping Allow for location. There is no background tracking. Note: on this static page the check runs in the browser — for tamper-proof enforcement, verify the coordinates server-side in the Worker (Option B) against the employee's store row before saving the punch.
Good practice either way
- Keep the manager PIN private; only managers should see the Admin Panel contents.
- Export the CSV weekly for payroll and keep the JSON backup with it.
- Make sure the clock device's date & time are set to automatic — punches use that clock.
- Set the store location from inside the store and test with “Check my location” on an employee phone before relying on a 50 m radius.