POA&MTracker

Phase 1 UI Mockups

Static, click-through screens for the POA&M Management Platform — no backend, no framework, no build step. Field names and workflow rules follow the FedRAMP POA&M template (SSP Appendix O v3) so the screens map cleanly onto the data model when these get rebuilt as React/Inertia pages.

16 screens Left nav + top nav Opens straight from disk
Two navigation layouts, one codebase. The sidebar is the default. Use the layout button in the top bar of any screen to switch to top navigation — the choice sticks as you move between screens. The button beside it collapses the sidebar to icons.
Core Workflow — Finding → POA&M → Tasks → Evidence → Review → Closed

Dashboard

KPI tiles, risk distribution, opened-vs-closed trend, remediation-window compliance, overdue table and activity feed.

dashboard.html

Findings

Triage queue with source, severity and asset columns. Bulk-convert selected findings into POA&M items.

findings.html

Finding Detail

Scanner output, affected assets, mapped controls, attachments and the triage decision panel.

finding-detail.html

POA&M Items

The main register. Open / Closed / Configuration Findings / Deviations tabs, filters, bulk actions, row menus.

poams.html

POA&M Detail

The richest screen — overview, milestones, evidence, comments, history, plus every FedRAMP field in the side rail and a deviation-request modal.

poam-detail.html

New POA&M Item

Full create form grouped into template sections, with mandatory/situational markers and inline template guidance.

poam-new.html

Tasks & Milestones

Kanban board across four workflow columns, plus a dated milestone schedule that rolls up to parent items.

tasks.html

Evidence Library

Approval queue, file grid, upload panel, version history with rejection reasons, and retention policy.

evidence.html
Reporting & Compliance

Reports & Exports

Report library, programme analytics (ageing, closure time, backlog) and scheduled deliveries.

reports.html

FedRAMP Import

Five-step wizard: upload, choose worksheets, map columns, validate with per-row resolutions, then import.

import.html

Notifications

Inbox with mention, assignment and due-date tabs, alongside a full per-event preference panel.

notifications.html

Audit Trail

Append-only change history with actor, field-level before/after values and source IP.

audit-log.html
Administration & Access

Organizations & Systems

Tenant profile, systems with impact level and health, submission calendar, isolation model and usage.

organizations.html

Users & Roles

User table with MFA and expiry state, a full 6×20 RBAC permission matrix, pending invitations and an invite modal.

users.html

Settings

Statuses, closure rules, ID patterns, risk ratings with remediation windows, sources, frameworks, security and integrations.

settings.html
Authentication

Sign In

Entra ID, Okta and SAML/OIDC single sign-on, email fallback, and a passkey path that satisfies MFA in one step.

login.html

TOTP Challenge

Six-digit code entry with a rotation timer, trust-this-browser, and fallbacks to security key, passkey or recovery code.

login-mfa.html

MFA Enrolment

Method chooser, QR pairing with a manual key, verification, single-use recovery codes and trusted-device management.

login-mfa-setup.html
Companion Mobile App

Mobile App Mockups — 5 screens

Dashboard, Findings, Tasks, Evidence and Reports as a handheld app: bottom tab navigation, card lists instead of tables, bottom sheets instead of modals, and camera-first evidence capture. Same tokens and risk palette as these web screens.

Bottom tabs Bottom sheets Live previews in phone frames Full-bleed on a real handset
Open mobile set
Design System

Four ordered ratings. The hue is always paired with a written label — colour never carries the meaning on its own, and the set was validated for colour-vision deficiency separation on a white surface.

Critical High Moderate Low
Draft Open In Progress Pending Review Delayed Overdue Closed
#111E36 nav #1C5CAB brand #F5F7FA page #FFFFFF surface #E3E8EF border
How These Are Built
Stylesheetassets/css/app.css
Shell & chartsassets/js/shell.js
DependenciesNone — no CDN, no build
IconsInline SVG, stroked
ChartsHand-built SVG with hover + table view

Navigation, top bar and page header are rendered once by shell.js, so each screen file holds only its own content. To add a screen: copy any page, change the POAM.init() call, and add an entry to the NAV array in the shell.

Everything is static. Buttons, filters and forms are visual only — the exceptions are tabs, modals, chart tooltips, the table-view toggles, row checkboxes and the navigation layout switch, which all work so the flow can be demonstrated.