The companion handheld app for POA&M Tracker — built for the jobs people actually do away from a desk: check what's overdue, triage a finding, tick off a milestone, capture evidence on the spot, and pull a report. Same design tokens and risk palette as the web mockups, native mobile patterns throughout.
Posture at a glance — past-due count, what's assigned to you, risk mix, remediation-window compliance and recent activity.
Triage queue with filter chips and search. Tapping a finding opens the triage sheet — convert to a POA&M, attach to an existing one, or dismiss.
Overdue / this week / all, grouped with a red rail on late items. Tick to complete; tap the row to reschedule with a recorded reason.
Camera-first capture, an approve/reject queue sized for thumbs, recent uploads and the storage position.
Next submission countdown, the report library, month-at-a-glance figures, and a generate sheet that produces the FedRAMP workbook.
Entra ID, Okta and SAML/OIDC single sign-on, email fallback, and a Face ID path that unlocks the device passkey.
Six-digit entry with a rotation timer and trust-this-device, plus Face ID, security key and recovery-code fallbacks.
Tables became cards — a POA&M register is unreadable on a 390px screen, so each item carries its ID, risk, days late and owner in a stacked row instead of eleven columns.
The left sidebar became a five-item bottom tab bar. Filters became horizontally scrolling chips and a segmented control. Modals became bottom sheets. Every tap target clears 44px.
The evidence screen leads with the camera, because photographing a console or a printout is the one thing a phone does better than a laptop.
Identical tokens, so both surfaces read as one product:
The risk ramp is the colour-vision-validated set from the web mockups, and hue is always paired with a written label — never the only signal.
assets/css/mobile.css holds the design system; assets/js/mobile.js renders the device frame, status bar, header and tab bar so each screen file contains only its own content inside <div id="screen">.
No framework, no CDN, no build step — the same as the web set. Adding a screen means copying a file, editing its MOBILE.init() call, and adding a tab to the TABS array.
Static, with the interactions needed to demo a flow: bottom sheets, filter chips, the segmented control and task checkboxes all respond.