Prepend a Home tab (linking to /dashboard) to the bottom navigation bar
for both Manager/SuperUser and Accounts roles, giving one-tap access to
the dashboard from any mobile screen.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add ACCOUNTS to MOBILE_ROLES so the desktop-required wall no longer
blocks them on small screens.
- MobileBottomNav is now role-aware: ACCOUNTS gets Payments + Profile tabs;
MANAGER/SUPERUSER keep Approvals + Profile. Role prop threaded from
layout → MobileBottomNav.
- PaymentActions (both MGR_APPROVED and SENT_FOR_PAYMENT states) stacks
vertically on small screens — input takes full width, button below it —
then reverts to the horizontal inline layout at sm+ breakpoint.
- Payments page card bottom row (status badge + action) stacks on mobile
(flex-col sm:flex-row) so the reference input isn't squashed.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds a responsive mobile experience scoped to MANAGER and SUPERUSER roles:
Layout:
- Sidebar hidden on small screens (md: breakpoint)
- New MobileHeader (logo + notification bell + sign out) visible on mobile
- New MobileBottomNav (Approvals + Profile tabs) pinned to bottom on mobile
- New DesktopRequired overlay shown to all other roles on small screens —
a fixed full-screen message directing them to use a desktop browser
Approvals queue:
- Desktop: existing table layout (hidden md:block)
- Mobile: tap-to-review card stack (md:hidden) — shows PO number, title,
submitter, cost centre, amount, and a full-width Review button
PO approval detail:
- ManagerEditPoForm (direct field editing) hidden on mobile; still available
on desktop (direct edits not required per spec)
- ApprovalActions buttons stack full-width on mobile, row on sm+
- Paddings reduced on small screens throughout
PO detail component:
- Order Details and Vendor grids switch from grid-cols-2 → grid-cols-1
on small screens (sm:grid-cols-2 restores two columns at 640px+)
- Section padding reduced on mobile (p-3 md:p-6, p-4 md:p-6)
- Line items table already had overflow-x-auto — no change needed
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
