Layer 1 — Presentation: React + React Native

The operator workspace, banker mobile app, and executive dashboard.

4.1 Operator Workspace (React Web)
4.2 Key Screens
4.3 Playbook Pattern
4.4 React Native Mobile App
4.5 Executive Dashboard

4.1 Operator Workspace (React Web)

The operator workspace is a modern, role-aware single-page application. The layout follows a three-panel workspace pattern — Queue Panel · Case Detail · AI Assistant — persistent across all screens.

Left — Queue Panel My Queue (personally assigned cases) · Team Queue (cases assigned to the operator’s group) · Metrics snapshot showing pipeline health and SLA status (manager role only)

Center — Case Detail Case header: client name, case number, segment flag, and selected products · Playbook stage tracker: visual phase-by-phase progress with per-stage status indicators (pending / in-progress / awaiting-input / complete / rejected / error) · Active task panel: the role-filtered input form for the current workflow step — content changes based on phase and the operator’s role

Right — AI Assistant Proactive suggestions surfaced automatically for the open case · Natural language Q&A on case status, missing documents, product requirements, and next steps · Context-aware actions available without the operator needing to prompt

4.2 Key Screens

Screen	Purpose	Role Access
Case Queue (My Queue + Team Queue)	Personal and team case queue with SLA indicators	All operators
Case Detail + Playbook Panel	Full case view with phase-by-phase progress tracker	All operators (role-filtered sections)
Case Intake Form	New case creation — company info, product selection, document upload	Banker / Treasury Implementation Team
Document Review Panel	AI-assisted document completeness review and approval	Document Review Analyst
BSA/AML Review Panel	Compliance questionnaire review and attestation	Compliance Officer
Order Approval Panel	Enterprise-tier order approval gate	Operations Supervisor (ENTERPRISE only)
Product Operations Panel	Product-specific operational tasks	Product Operations Team
Error Recovery Panel	Integration failure triage — retry, skip, or escalate	Integration Error Handler team
Credential Delivery Panel	Credential delivery confirmation	Operations Team
Executive Dashboard	Cross-case metrics, SLA health, throughput trends	Manager / Leadership
AI Assistant Panel	Conversational AI co-pilot, proactive suggestions	All operators

4.3 Playbook Pattern

Each case progresses through a Playbook — a visual stage tracker surfaced in the Case Detail view. Stages map directly to Temporal workflow phases:

Intake → [Order Approval*] → Compliance Review → Core Data Retrieval
  → Product Provisioning → Digital Banking Setup → Credentials → Complete
* ENTERPRISE only

Stage statuses: pending · in-progress · awaiting-input · complete · rejected · error

The Playbook is read directly from the Temporal workflow state via a @QueryMethod — the React UI polls for updates and receives live stage transitions via GraphQL subscriptions.

4.4 React Native Mobile App

The mobile app targets bankers and Relationship Managers who initiate onboarding requests and need status visibility. Scope is intentionally narrower than the web workspace:

New case intake (company info, product selection, initial document upload)
Push notifications: “Your case ACME Corp moved to Compliance Review”
Case status viewer (read-only Playbook progress)
AI Assistant chat interface (status questions, product guidance)
Document camera capture → direct S3 upload via pre-signed URL

Code sharing: React Native shares approximately 60–70% of business logic with the React web workspace — form validation, API client code, state management, and AI Assistant conversation logic. The UI layer diverges (mobile navigation patterns, camera APIs, push notification handlers).

4.5 Executive Dashboard

Standalone React page (manager role required) showing cross-case operational metrics. Feeds from the metrics pipeline written to Aurora by Temporal activity completions:

Open cases by stage and segment
SLA health (on track / at risk / breached) by segment and product type
Average time at each stage (last 30/60/90 days)
Bottleneck heatmap — which stage holds cases longest
Throughput trend — cases opened vs. closed per week

The Executive Dashboard is a read-only view. All data is computed by metrics-service from Aurora case records in near-real-time.