Skip to main content

Screens and navigation

References: SOLUTION_DESIGN.md §2, SPEC.md FR-PORT-004..013.


1. Information architecture (tabs)

Map bottom tabs (or equivalent) to the primary areas:

Tab / areaContents
HomeShortcuts, next appointment, unread messages badge, health alerts (policy-driven)
ScheduleUpcoming appointments, book flow, cancel/reschedule, telehealth join when licensed (FR-PORT-009, SPEC.md)
MessagesThread list and detail when Messaging licensed (FR-PORT-011, SPEC.md)
RecordsReleased results, medications, allergies, documents as permitted (FR-PORT-003, SPEC.md)
More or ProfileProfile, demographics requests, billing entry, settings, export, account deletion request, help

Billing as a dedicated tab is optional; often nested under More unless tenant prioritizes payments (FR-PORT-012, SPEC.md).


2. Stack patterns

  • Auth stack: Welcome → OIDC login → (optional) biometric consent.
  • App stack: Tabs + modal stacks for booking wizard, result detail, message compose, payment WebView/sheet.
  • Deep link stack: Resolve target screen after auth gate (PUSH_AND_DEEP_LINKS.md).

3. Licensing and feature gates

Hide or disable tabs when not licensed:

  • Messages tab if Messaging off.
  • Billing entry if Billing off.
  • Telehealth join button if not licensed.

Use server-driven flags or 404/403 handling with consistent empty states (“Not available for your organization”).


4. Proxy / caregiver (FR-PORT-008)

  • Patient switcher in header or profile: list allowed patients; confirm on switch; refresh all queries.
  • Show active patient name persistently while browsing clinical data.

5. Key flows (screen sequence)

FlowScreens
BookSearch providers → Provider detail → Slot picker → Confirm → Success
ResultsList → Detail (prelim/final badge) → optional PDF viewer
Demographics updateForm → Evidence upload (if allowed) → Pending status
ExportRequest → status polling or download when ready (FR-PORT-010, SPEC.md)

Align acceptance criteria with patient-portal-requirements-doc.md §7 and mobile subsections.


6. Back navigation

  • Android hardware back SHOULD map to React Navigation goBack without exiting app from root tabs.
  • iOS swipe-back on stacks; preserve tab state.