HazirDesign preview
Design preview v0.1 · for sign-off

Hazir screens.

Six staff-app screens, five kiosk screens and three admin screens, drawn in the Hazir green theme. The layout language follows the reference you shared: soft cards, a big circular punch dial, a week strip across the top, and a floating pill nav. Every number and name on these screens is example content, not live data.

01 · Foundations

Tokens before screens

Every colour, size and radius below lives in one token file, mirrored from Dart to CSS. White-labelling a customer is then a JSON override at login, not a rebuild.

Brand green

50500 primary900

Status colours

presentlateabsentleaveoff

Neutrals

inklines & surfaces

Type

Bricolagedisplay · headings
Plus Jakarta SansUI · body
IBM Plex Monotime · numbers

Radii

8
13
18
pill

Changed from the reference

Purple → Hazir green. Lavender canvas → light mint. LCD timer → tabular mono. Nav relabelled to our modules. Everything else in the layout language is kept.

02 · Staff app

What the person on the ground sees

Designed for a ₹8,000 Android phone held in one hand, often outdoors in sunlight. The punch dial is the biggest touch target on the screen because it is the only thing 90% of staff will ever tap.

8:58
September 2026
Request
1Tue
2Wed
3Thu
4Fri
5Sat
6Sun
7Mon
8Tue
--:--
Check-in
--:--
Check-out
--:--
Total hours
🏠 I'm working from home today
01 · Presence, before check-inGeofence state is shown before the tap, so nobody punches and then discovers they were out of range.
10:54
September 2026
Request
1Tue
2Wed
3Thu
4Fri
5Sat
6Sun
7Mon
8Tue
Work duration
01:52:14
6h 07m left today
09:02
Check-in
--:--
Check-out
01:52
Total hours
Check-out available after 6h 07m
Check Out
02 · Presence, on dutyRing fills toward shift end. The locked check-out is a policy the org switches on, not a default.
12:41
Register a visit
Cancel
LIVENESS OK
Face matched 0.94
Hold steady — capturing
Nirmal Tower, Powai 19.1176, 72.9060 · ±8 m accuracy
12:41:07 server time · location not mocked
Customer or contact name (optional)
Add a note about this visit…
Register visit
03 · Visit proofFace, place and time in one tap at any address. Camera only, never the gallery, so an old selfie cannot be reused.
12:58
My tasks
Filter
Today · 4 Overdue · 1 Done
412
AC servicing, 3rd floorSite A · 14:00 · 2 of 4 done
Doing
398
Water pump inspectionSite B · overdue since 17:00
Overdue
415
Meter reading, block CSite B, Thane · due 16:30
To do
417
Replace corridor lightsHQ Andheri East · due 18:00
To do
Completed today
✓
Lift inspection roundHQ Andheri · 09:40 · proof ✓
Done
04 · Task listNumber badge is the ticket id, so staff and manager quote the same thing on the phone.
13:44
Task #412
In progress
AC servicing, 3rd floor
Site A, Powai · due 14:00 · assigned by Priya M.
Checklist · 4 of 4
Filter cleaned and refitted
Gas pressure checked · 65 psi
Drain line flushed
Customer signature collected
Proof of completion
12:52
13:10
13:41
Verified inside Site A geofence 19.1176, 72.9060 · 64 min on task · signed by R. Mehta
Mark complete
05 · Task detail with proofEvery photo carries its own time and coordinates. This is the screen that settles disputes with a client.
19:20
My month
August ▾
22Present
3Late
1Absent
2Leave
August 2026
M
T
W
T
F
S
S
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Present Late Absent Leave
Leave balance
Casual
4 of 12 used
8 left
Sick
1 of 6 used
5 left
Apply for leave
06 · My monthStaff see their own record, always. Transparency is what makes tracking survive week two of a rollout.
03 · Kiosk mode

One tablet at the gate, no phones needed

A different design problem to the phone: mounted on a wall, used by forty people in ten minutes, often with dirty hands and in bright sun. So the targets are large, the text is readable from a metre away, and every screen returns itself to the start. Nobody has to know how to use it twice.

Hazir
Acme Facilities · HQ Andheri East — Gate 1
SyncedEN · हिंदीLocked
09:02:14
Friday, 4 September 2026
Scan your cardHold your badge to the reader
Enter your PIN4 digits, then press the tick
Just now Priya M. in 08:44 Mahesh V. in 06:58 Anita D. in 09:31 39 of 48 present today
Kiosk 01 · IdleThe clock is the biggest thing on screen because it is what staff check as they walk in. Both punch methods are offered at once, so nobody has to choose a mode first.
Hazir
Acme Facilities · HQ Andheri East — Gate 1
SyncedEN · हिंदीLocked

Enter your PIN

Four digits, the same ones you use on your phone. Ask your supervisor if you have forgotten it.

Cancel · returns in 12s
1
2
3
4
5
6
7
8
9
0
Kiosk 02 · PIN entry74px keys with 11px gaps, sized for a gloved thumb. The screen cancels itself after 20 seconds so an abandoned entry never blocks the queue.
Hazir
Acme Facilities · HQ Andheri East — Gate 1
SyncedEN · हिंदीLocked
LIVENESS OK
SK
Suresh K.Maintenance · Employee 1042Last punch: yesterday 18:04 out
Look at the camera
Hold still for a moment. The photo is matched against your enrolled face and stored with the punch.
Not you? Cancel
Kiosk 03 · Face confirmThe PIN says who you claim to be; the face confirms it. This pairing is what makes a shared tablet as trustworthy as a personal phone.
Hazir
Acme Facilities · HQ Andheri East — Gate 1
SyncedEN · हिंदीLocked

Checked in

Suresh K.
09:02 AM · HQ Andheri East — Gate 1
On time Shift ends 18:00 3 tasks today
Returning to the start in 3 seconds
Kiosk 04 · ConfirmedName and time are stated back plainly, because the commonest kiosk complaint is "I punched but it did not register". The chips answer what staff ask next.
Hazir
Acme Facilities · HQ Andheri East — Gate 1
Offline · 7 queuedEN · हिंदीLocked
No internet — punches are still being recorded 7 punches saved on this tablet. They will sync by themselves with their original times when the connection returns.
09:14:02
Friday, 4 September 2026
Scan your cardWorks without internet
Enter your PINWorks without internet
Kiosk 05 · OfflineA gate tablet on shared Wi-Fi will lose connection. It keeps accepting punches and says so in plain words, rather than showing an error nobody at the gate can act on.
04 · Admin panel

The owner's morning screen

Dense, scannable, and built to answer one question in the first two seconds: is anyone missing right now. Wallet balance is permanently visible, because a dry wallet is the one thing that quietly degrades the whole system.

Today · Friday, 4 September
Search staff, site or task
RP
Present
39
81% of 48
Late
4
avg 22 min
Absent
2
no punch yet
On leave
3
2 approved today
On site now
31
8 travelling
Ramesh T. has not punched — 47 min past shift startCall · Notify
1 punch flagged: location mockedReview
Attendance today All teams
Today ▾ Export
StaffTeamSiteInOutWorkedStatusTasks
SKSuresh K.
MaintenanceSite A, Powai09:02—1h 52mOn site2 / 4
PMPriya M.
SupervisorsHQ Andheri08:44—2h 10mOn site5 / 5
ADAnita D.
HousekeepingHQ Andheri09:31—1h 23mLate 26m1 / 3
RTRamesh T.
SecuritySite B, Thane———Not punched0 / 2
FSFarhan S.
Maintenance————Casual leave—
MVMahesh V.
SecuritySite A, Powai06:5815:048h 06mShift done3 / 3
Admin 01 · TodayExceptions sit above the table, because a good morning is one where the owner only reads the two alert strips and closes the tab.
Live map
32 on duty now
Find a staff member
RP
HQ ANDHERI EAST · 14 SITE A POWAI · 11 Suresh K. outside fence
All teamsSecurityMaintenanceHousekeeping
On site · 25
Travelling · 6
Outside fence · 1
Route replay 09:02
18:00 Live ●
SK
Suresh K.Maintenance · on duty 4h 42m
StatusTravelling
Speed34 km/h
Distance today21.4 km
Last ping12 s ago
Battery78%
Next task#412 · 14:00
Visits today
10:12 Kotak Bank38 min
11:30 Hiranandani22 min
12:41 Nirmal Towerlive
Location is captured only between check-in and check-out. Staff see the same trail you do.
Admin 02 · Live mapRoute replay scrubber doubles as the audit tool. The green note is deliberate: it reminds the manager what staff were promised.
Billing & wallet
Search ledger
RP
Wallet balance
₹18,240
About 14 days left at today's usage
Today's charge₹96
Active staff48
Rate · Pro₹2/day
Auto-rechargeEnabled
Add money
₹1,000 
₹5,000+5%
₹20,000+10%
₹50,000+15%
Pay ₹20,000 on apie.tech →

Payment is completed on apie.tech. The balance updates here within seconds of the gateway confirming, through a signed callback. GST invoice is emailed automatically.

Ledger
Last 30 days ▾
DateEntryDetailAmountBalance
4 SepDaily charge48 staff × ₹2−₹96₹18,240
3 SepDaily charge48 staff × ₹2−₹96₹18,336
3 SepWhatsApp42 messages−₹16.80₹18,432
2 SepDaily charge47 staff × ₹2−₹94₹18,449
1 SepRechargeUPI · apie.tech · HZ-8213-0917+₹20,000₹18,543
1 SepBonus credit10% on Team pack+₹2,000−₹1,457
31 AugDaily charge46 staff × ₹2−₹92−₹3,457
Admin 03 · Billing & walletThe ledger is append-only and shows exactly what a day cost. Note the negative balance rows: the grace period is visible, not hidden.
05 · Decisions

Seven things to confirm before I build

Each has a recommendation. Reply with the numbers you want changed and I'll take the rest as agreed.

1
Locked check-out

The reference greys out check-out until the shift hours are complete. That is right for factory-style shifts and wrong for field staff who legitimately finish early.

Recommend: make it a per-team policy, default off, with an early-checkout reason prompt
2
Bottom nav labels

Currently Home, Tasks, Presence, My month, Me. Presence sits in the centre as the dark pill, matching the reference.

Recommend: keep these five, rename "Me" to "Profile" if staff find it unclear in testing
3
Work-from-home button

Useful for office teams, meaningless for guards and technicians, and a fraud vector if left on for field roles.

Recommend: per-team toggle, off by default, hidden entirely when the team has assigned sites
4
Timer typeface

The reference uses an LCD seven-segment face. I have used tabular mono instead, which stays legible at small sizes and in sunlight, and does not read as a gimmick to a business buyer.

Recommend: keep tabular mono
5
Admin panel navigation

Dark left sidebar with the wallet pinned at the bottom, versus a light top bar. The sidebar scales better once Reports, Sites, Billing and Settings all exist.

Recommend: dark sidebar as drawn, collapsing to icons under 1100px
6
Staff app dark mode

Guards work nights and will ask for it. It is roughly two extra days of work if the tokens are built for it now, and roughly two weeks if retrofitted later.

Recommend: build tokens dark-ready now, ship the dark theme in Phase 7
7
Languages at launch

Seven languages is the eventual goal. Translating screens that are still changing wastes money.

Recommend: English and Hindi for the pilot, remaining five in Phase 9