Mobile Adaptations

Responsive patterns for AttOT on mobile devices (375px viewport)

1. Staff Bottom Tab Navigation

4-tab navigation: Dashboard, Punch, History, Profile

9:41 AM AttOT 100%
Dashboard
JS
Punched In · 08:02 · Morning Shift
Today's Schedule
Monday 29 Jun 2026
Morning 06:00–14:00
Quick Stats
This Week
32h
OT Hours
4.5h
Dashboard
Punch
History
Profile

2. Admin Mobile Collapsed Sidebar

Hamburger menu + scrollable bottom nav with 8 items

9:41 AM AttOT 100%
Audit Log
SA
Sidebar hidden — use bottom tabs to navigate.
Recent Actions
10:00 · Admin (Sys)
UPDATE Settings
OT threshold: 44→48
09:30 · Admin (Sys)
CREATE User
J. Smith added
08:32 · J. Smith
LOGIN Auth
Google SSO
Dashboard
Staff
Timetable
Attendance
Units
Audit Log
Settings
Profile

3. Mobile Form

Full-width fields, back button header

9:41 AM AttOT 100%
Back
Manual Entry

4. Mobile Notification Panel

Full-screen overlay with swipe-to-dismiss

9:41 AM AttOT 100%
Notifications
Auto-Closed: A. Khan's punch
Auto-closed at 23:59 · 8h limit exceeded
2 min ago
Missed Punch: J. Smith
No punch-in after 08:45 · Morning shift
45 min ago
Timetable Updated
Your schedule updated for Week 27
Yesterday
OT Report Generated
Weekly overtime report ready
Yesterday
Swipe right to dismiss

5. Mobile Punch State Banners

Sticky banner variants for different states

9:41 AM AttOT 100%
Punch States
Punched In
Punched In · 08:02 AM · Morning Shift
Not Punched In
No active shift · Ready to punch in
Auto-Closed
Auto-Closed at 23:59 · 8h shift limit
Rest Period
Rest Period · Eligible at 14:00

6. Mobile Timetable

Card-per-day layout replacing grid timetable

9:41 AM AttOT 100%
My Timetable
Week 27
23 Jun — 29 Jun 2026
Mon 23 Jun
Morning 06:00–14:00
Tue 24 Jun
Morning 06:00–14:00
Wed 25 Jun
OFF
Thu 26 Jun
Evening 14:00–22:00
Fri 27 Jun
Evening 14:00–22:00
Sat 28 Jun
Night 22:00–06:00
Sun 29 Jun · Today
Morning 06:00–14:00