Grab Clappia’s 50% OFF Black Friday Deal before it’s gone! Ends 05 Dec 2025.
View offer →
#bf-banner-text { text-transform: none !important; }
How to Build a QR Code Attendance and Wages Tracker from Scratch in Clappia

How to Build a QR Code Attendance and Wages Tracker from Scratch in Clappia

By
Verin D'souza
June 1, 2026
|
15 Mins
Table of Contents

Tracking attendance and calculating wages for shift workers involves more moving parts than most payroll tools are built to handle. You need a reliable way to record each punch, correctly attribute post-midnight entries to the right shift date, calculate worked hours across multiple time segments, and accumulate monthly totals in a format that feeds directly into payroll. Most organisations doing this manually spend significant time every month fixing the gaps between what was recorded and what was actually worked.

This guide walks through building the entire system from scratch in Clappia, a no-code platform for field and operational apps. The finished system consists of four connected apps: an employee master that generates unique QR codes, a scanner app that records each punch and pulls pay parameters automatically, a daily ledger that calculates worked hours per segment, and a wages sheet that accumulates monthly totals without manual aggregation. No coding is required at any step.

The build described here reflects a specific working configuration. Treat it as a practical starting point rather than a rigid blueprint. You can adapt field names, add or remove fields, adjust the section structure, modify automation logic, or skip components that do not apply to your operation. The core architecture remains the same; the details are yours to shape.

What Apps Make Up the QR Attendance and Wages System?

Before building, it helps to understand how the four apps connect and what role each one plays.

AppRoleWho Uses It
Employee MasterCentral database of employee records. Generates a unique QR code per employee. Source of all pay parameters pulled on each scan.HR or admin team; maintained before deployment
Attendance ScannerMobile app used to record each punch. QR scan auto-fills employee details and pay parameters. Records date, time, and the After Midnight flag.Supervisors or gate operators at each scan point
Attendance LedgerPer-day record for each employee. Stores up to six timestamps across three shift segments. Calculates hours per segment and daily totals automatically.Built automatically by the scanner; reviewed and corrected by HR
Wages SheetMonthly rollup of worked hours per employee. Accumulates daily totals automatically. Recalculates correctly when historical records are corrected.Payroll team; built automatically by the ledger

The build sequence follows the dependency order: Employee Master first, then Scanner, then Ledger, then Wages Sheet, then automations. The automations are configured last because they reference fields across all four apps.

App 1: How to Build the Employee Master

Create a new Clappia app and name it something like Employee Records or Staff Master. This app holds one record per employee and is the source that every QR scan reads from. Use Single Line Text blocks for most fields and Dropdown blocks for fields with defined options.

Which Fields Does the Employee Master Need?

Add the following fields to the form. These establish the employee's identity and employment record:

  • Employee ID - Single Line Text; mark as required; add a Validation rule to enforce uniqueness so no two employees share the same ID
  • Full Name - Single Line Text; required
  • Department - Single Line Text or Dropdown; the team or operational unit
  • Designation - Single Line Text; job title or role
  • Work Unit - Single Line Text; the specific location, site, or cost centre
  • Date of Joining - Date block
  • Date of Leaving - Date block; optional; fill when an employee exits
  • Contact Number - Phone Number block
  • State or Region - Single Line Text or Dropdown; the operating location
  • Address - Multi-Line Text block

How to Configure Pay Type, Wages, and Bank Details

These fields define the employee's pay parameters. They are pulled automatically on every QR scan, so accuracy here matters for every downstream record.

  • Pay Type - Dropdown with two options: Bank Transfer and Cash
  • Bank Name - Single Line Text; configure a Display Condition so this field appears and becomes required only when Pay Type = Bank Transfer
  • Account Number - Single Line Text; same Display Condition as Bank Name
  • Account Details - Single Line Text; additional bank reference; same Display Condition
  • Daily Hours - Dropdown with options representing contracted daily working hours, for example 8 hours, 9 hours, 10 hours, 12 hours
  • Daily Wages - Number block; the employee's daily wage amount

The Hourly Rate Formula

Add a Formula block labelled Hourly Rate. In Clappia, formula fields reference other fields using curly brace notation. This formula divides the daily wage by the daily hours to produce the hourly rate:

Formula: {Daily Wages} / {Daily Hours}

The formula uses two fields: {Daily Wages} and {Daily Hours}. When an admin enters the wage and selects a daily hours option, the hourly rate populates automatically as a read-only calculated value. This rate carries into every scan and into the attendance ledger as payroll context. Set this field to read-only so it cannot be manually overwritten.

How to Add Shift Assignment to the Employee Record

  • Shift - Dropdown or Single Line Text; the assigned shift pattern

Once all fields are in place, populate the master by adding one record per employee. Each record automatically generates a unique QR code based on the Employee ID. This is the code employees carry on their ID badge or card and scan at each punch point.

App 2: How to Build the Attendance Scanner

Create a second Clappia app named Attendance Scanner or similar. This is the mobile-first form operators use at each punch point. It needs to be fast: a scan should take seconds, not minutes.

How the QR Code Scanner Field Pulls Employee Data

Add a Barcode Scanner block as the first and primary field. Configure it to look up the scanned code against the Employee Master. When a valid QR code is scanned, the following fields auto-fill from the matched employee record. Add each as a read-only Single Line Text or Number block:

  • Employee name and reference number
  • Department and work unit
  • Designation
  • Daily wages and contracted daily hours
  • Hourly rate
  • Pay type and account details
  • Shift assignment

All auto-filled fields should be read-only. They confirm to the operator that the right employee was scanned and carry forward into the ledger record without any additional input.

How Attendance Date and Time Are Captured on Each Scan

Add a Date block labelled Attendance Date with a default value of today. Add a Time block labelled Attendance Time with a default value of the current time. Both fields are editable to allow corrections, but the defaults mean operators simply accept them for standard punches.

The After Midnight Flag

Add a Yes/No block labelled After Midnight. When the operator answers Yes, the automation attributes this punch to the previous calendar day. This is essential for night shifts: a clock-out at 02:00 Tuesday belongs to Monday's shift, not Tuesday's. The Yes answer on this single field tells the system to make that attribution automatically.

Fields That Can be Hidden in the App

Add three hidden fields that the automation uses as internal keys. These should never be visible to operators; hide them using a Display Condition set to an impossible value such as Date equals 99999:

  • Employee Date Key - a Formula block that concatenates the employee identifier with the correct attendance date (the scan date, or the previous day if After Midnight = Yes). This becomes the unique key used to match punches to ledger records.
  • Date Key - a Single Line Text helper field set by the automation after save to hold the resolved attendance date
  • Period Tag - a Single Line Text helper field set by the automation to hold the month and year of the attendance date in a consistent format

These three fields are never shown to users. They exist purely for the automation logic to reference when creating and updating ledger records.

App 3: How to Build the Attendance Ledger

Create a third app named Attendance Ledger or Daily Time Record. This app is populated entirely by the scanner's automation; operators do not fill it in manually. Add the following fields:

Adding Identity and Date Fields

  • Department - Dropdown or Single Line Text; required
  • Employee Reference Number - Single Line Text
  • Employee Name - Single Line Text
  • Date - Date block; set as read-only; the automation populates this from the scan date adjusted for the After Midnight flag

How to Set Up Time Segments for Multi-Period Shifts

Add six time fields across three segments. Each segment represents one in/out period. The second, fourth, and sixth time fields each need a companion date field and an After Midnight flag because those are the clock-out or return times that can cross midnight:

SegmentTime In FieldTime Out FieldAfter Midnight FlagCompanion Date
Segment 1Time In 1 (Time block)Time Out 1 (Time block)After Midnight 1 (Yes/No)Date 1 (Date block)
Segment 2Time In 2 (Time block)Time Out 2 (Time block)After Midnight 2 (Yes/No)Date 2 (Date block)
Segment 3Time In 3 (Time block)Time Out 3 (Time block)After Midnight 3 (Yes/No)Date 3 (Date block)

Also add two summary fields that the automation keeps updated:

  • Exit Date - Date block; the date of the most recent clock-out
  • Exit Time - Time block; the time of the most recent clock-out

How to Calculate Worked Hours Automatically for Each Segment

Add a Formula block pair for each segment to calculate worked hours and minutes. Each formula calculates the time difference between the segment's time-in and time-out, adjusted using the companion date when the time-out is after midnight:

Segment 1 Hours: calculated from {Time In 1} and {Time Out 1}, adjusted using {After Midnight 1} and {Date 1}

Segment 2 Hours: calculated from {Time In 2} and {Time Out 2}, adjusted using {After Midnight 2} and {Date 2}

Segment 3 Hours: calculated from {Time In 3} and {Time Out 3}, adjusted using {After Midnight 3} and {Date 3}

Add two daily total Formula blocks:

Daily Hours Total: sum of Segment 1 Hours + Segment 2 Hours + Segment 3 Hours (with minutes rolling into hours when they exceed 59)

Daily Minutes Total: remaining minutes after full hours are extracted

Each pair of formula blocks outputs a hours value and a minutes value separately. The daily totals aggregate all three segments, carrying minutes over into hours correctly.

Which Payroll Fields Should Be Stored in the Ledger?

Add the following fields to store payroll context from the scan. These are populated by the automation when the ledger record is created and are used for downstream payroll processing:

  • Designation
  • Daily Wages
  • Daily Hours
  • Pay Type
  • Account Number
  • Account Details

Hidden Helper Fields

Add three hidden fields using the same Display Condition approach as the scanner (Date equals 99999):

  • Employee Date Key - composite key used by automations to match this record to scanner submissions
  • Punch Counter - tracks how many punches have been recorded for this employee on this date
  • Date Reference Key - holds the resolved attendance date used in cross-app lookups

App 4: How to Build the Wages Sheet

Create a fourth app named Monthly Wages Summary or similar. This app holds one record per employee per month and accumulates worked hours as each day's ledger record closes. Add the following fields:

  • Department - required
  • Month and Year - Single Line Text; the automation populates this in a consistent format such as Jan-2025
  • Employee Reference Number - Single Line Text
  • Employee Name - Single Line Text
  • Monthly Hours Total - Number block; running total of worked hours for the month
  • Monthly Minutes Total - Number block; running total of worked minutes for the month
  • 9th Day Hours - Number block; the hours worked on the 9th of the month; stored separately for correction-safe recalculation
  • 9th Day Minutes - Number block; the minutes worked on the 9th
  • 10th Day Hours - Number block; the hours worked on the 10th
  • 10th Day Minutes - Number block; the minutes worked on the 10th

The 9th and 10th day fields exist because when a historical record for those dates is corrected, the monthly total needs to recalculate accurately rather than adding the corrected value on top of the original. The stored day-specific values enable the correction formula described in the automation section below.

How to Configure the Automations

The automations are what connect the four apps and make the system work without manual data transfer. Open the workflow settings in the Attendance Scanner app and create a workflow triggered On Save. This workflow runs two parallel processes every time a scan is saved.

Process A: How the Scanner Automation Creates and Updates Daily Ledger Records

After a brief wait to ensure the saved data is ready, the automation:

  1. Sets the Date Key helper field to the correct attendance date, adjusting to the previous calendar day if After Midnight = Yes.
  2. Sets the Period Tag helper field to the month and year of the attendance date.
  3. Searches for existing same-day records in the scanner app using the Date Key and Employee fields.
  4. Searches for an existing ledger record using the Date Reference Key and Employee fields.

Based on what it finds:

  • If no ledger record exists (first punch of the day): create a new ledger record with Department, Employee Reference, Employee Name, Date, and Time In 1 set to the current time. Copy all payroll context fields from the scan. Set the Punch Counter to 1. Also create a corresponding record in the Wages Sheet for this employee and period.
  • If a ledger record exists (second punch): set Time Out 1 to the current time. Update Exit Date and Exit Time. Set Punch Counter to 2. Email the operator a confirmation.
  • Third punch: set Time In 2. Punch Counter = 3. Email confirmation.
  • Fourth punch: set Time Out 2 and companion date/flag. Update Exit Date and Exit Time. Punch Counter = 4. Email confirmation.
  • Fifth punch: set Time In 3. Punch Counter = 5. Email confirmation.
  • Sixth punch: set Time Out 3 and companion date/flag. Update Exit Date and Exit Time. Punch Counter = 6. Email confirmation.

For every update, also set the ledger's Date field to the resolved attendance date (accounting for the After Midnight flag).

Process B: How the System Detects Duplicate or Suspicious Scans

Running in parallel with Process A, this immediate check retrieves the earliest scan recorded for the same employee and date combination and compares the time gap between that scan and the current one. If the gap is less than ten time units, the current scan is flagged as a potential duplicate. This check is read-only: it does not block or reject the scan. It creates a flag that supervisors can monitor for patterns of rapid re-scans.

How the Ledger Automation Updates Exit Time and Monthly Totals

In the Attendance Ledger app, create a workflow triggered On Edit with three condition chains:

  1. When After Midnight 1 is answered: set Exit Time to Time Out 1 and Exit Date to Date 1. If After Midnight 2 is also answered, update Exit Time to Time Out 2 and Exit Date to Date 2. If After Midnight 3 is answered, update again to Time Out 3 and Date 3.
  2. When the day of the Date field equals 9: update the Wages Sheet for this employee by setting 9th Day Hours and 9th Day Minutes from the day's totals, incrementing Monthly Minutes Total, setting Month and Year, and recalculating Monthly Hours Total as:

Monthly Hours Total = previous Monthly Hours Total + today's hours - previous 9th Day Hours

  1. When the day of the Date field equals 10: the same logic applies but updates 10th Day Hours and 10th Day Minutes instead:

Monthly Hours Total = previous Monthly Hours Total + today's hours - previous 10th Day Hours

This recalculation pattern ensures that correcting a historical ledger entry on the 9th or 10th automatically updates the monthly total to reflect the corrected value rather than adding to the previous one.

How to Set Up User Permissions for Each Role and Offline Use

Configure user permissions in Clappia's user management settings. The recommended access structure for this system is:

RoleAppAccess Level
Gate Supervisor or OperatorAttendance ScannerSubmit Only: record punches; view own scan history
HR OfficerAttendance LedgerView and Edit: review and correct daily records
Payroll TeamWages SheetView Only: access monthly totals for payroll processing
AdminAll four appsFull Access: manage employee master, configure settings, manage all records

The Clappia mobile app, available on Android and iOS, supports offline mode. Scans can be recorded and queued locally when there is no network connection. The automations fire after the submission syncs when connectivity returns. For offline lookups to work, the Employee Master data needs to be cached on the scanning device. Open the Clappia app on Wi-Fi before each shift to ensure the employee data is available for offline QR scans throughout the shift.

How to Test the System Before Going Live

Before using the system with your full workforce, run the following test scenarios to confirm each component is working correctly:

  • Standard day shift: scan in at 08:00 (After Midnight = No), scan out at 17:00 (After Midnight = No). Confirm the ledger record shows 9 hours in Segment 1 and the daily total is correct.
  • Night shift crossing midnight: scan in at 22:30 on Monday (After Midnight = No), scan out at 06:00 on Tuesday (After Midnight = Yes). Confirm the ledger record date is Monday, Segment 1 shows 7.5 hours, and no separate Tuesday record was created.
  • Split shift with break: scan in, scan out for break, scan in again, scan out at end. Confirm Segments 1 and 2 both have correct hours and the daily total sums them correctly.
  • Edit a record on the 9th of the month and change a time. Confirm the Wages Sheet Monthly Hours Total updates to reflect the corrected value, not a double-counted total.
  • Rapid duplicate scan: scan the same employee twice within seconds. Confirm the duplicate flag is set but the second scan is not rejected.

Key Steps to Build a QR Attendance and Wages System in Clappia

Building this system from scratch involves four apps and a set of automations that connect them. The Employee Master holds all employee and pay data and generates QR codes. The Attendance Scanner records each punch in seconds with automatic data pull. The Attendance Ledger builds a complete daily time record with per-segment hour calculations and correct midnight handling. The Wages Sheet accumulates monthly totals automatically with correction-safe recalculation.

The configuration described here is one working implementation. Your version may have different field names, additional fields for your industry context, different dropdown values for shift types or pay structures, or different automation timing. The structure of four connected apps with the After Midnight flag, hidden helper keys, and day-specific monthly buckets is what makes the system accurate. Those design decisions are worth keeping; everything else is configurable to your needs.

To start building, create your Employee Master first in Clappia. Once it is populated with your workforce and QR codes are generated, the remaining three apps and automations follow in sequence. The complete system can be built and tested in a single session without writing any code.

FAQ

Build Your QR Code Attendance With Payroll App Today – No Coding Needed!

Build Your QR Code Attendance With Payroll App Today – No Coding Needed!Get Started – It’s Free

Build Your QR Code Attendance With Payroll App Today – No Coding Needed!

Summary

Close