Pause Status Banner
Component Detail
Description
Informational banner shown on coordinator-facing peer mentor list and detail views when a mentor is paused. Prevents coordinators from unknowingly assigning work to unavailable mentors by surfacing status prominently.
pause-status-banner
Summaries
The Pause Status Banner prevents a costly operational error: assigning work to a peer mentor who is unavailable. By surfacing paused status prominently in coordinator-facing views — including the timestamp, reason, and whether the pause was manual or triggered by certification expiry — coordinators can make informed assignment decisions without needing to investigate individual mentor profiles. This reduces misassignments, protects program participants from gaps in support, and saves coordinator time spent on reassignments. The built-in reactivation shortcut further accelerates recovery when a mentor becomes available again, keeping the program running efficiently.
A low-complexity mobile UI component with no external dependencies, targeting coordinator-facing list and detail views. Delivery requires coordination with the team responsible for those views to ensure the banner is correctly integrated at the layout level. The component renders three data points — paused timestamp, reason, and pause trigger type — all of which must be supplied by the parent view. Testing scope includes rendering with and without a reason, both pause trigger types (manual vs.
certification expiry), and the reactivation shortcut interaction. Permission gating for the reactivate button should be handled by the parent, not this component. Low risk, but integration timing with coordinator views is the key scheduling dependency.
Renders via `renderBanner(status: MentorStatus, pausedAt: DateTime, reason: String?)` and exposes `onReactivatePressed()` and `isCertificationExpiry(bool)` to allow callers to pass contextual metadata. The component is purely presentational — all permission checks for showing the reactivate button must be performed by the parent and reflected via props or callbacks. Use conditional rendering to show or hide the reason text and to switch between manual-pause and certification-expiry messaging. The `pausedAt` DateTime should be formatted using the app's localization utilities for consistency.
Ensure the banner is visually distinct from standard info banners (consider using a warning-level color token) to guarantee coordinators notice it without active scanning.
Responsibilities
- Display paused status with timestamp and reason if available
- Indicate whether pause was manual or triggered by certification expiry
- Provide reactivate shortcut for coordinators with appropriate permissions
Interfaces
renderBanner(status: MentorStatus, pausedAt: DateTime, reason: String?)
onReactivatePressed()
isCertificationExpiry(bool)