Pause Status Notification Card
Component Detail
Description
In-app notification card that displays pause and resume status change events to coordinators. Shows peer mentor name, effective date, optional reason text, and action buttons to redistribute assignments. Renders consistently within the existing notification feed.
pause-notification-card
Summaries
The Pause Status Notification Card keeps coordinators immediately informed when a peer mentor pauses or resumes their availability, enabling fast reassignment decisions that protect mentee experience continuity. Without clear, actionable in-app notifications, coordinators may miss status changes and leave mentees without active support for extended periods. This card surfaces the mentor name, effective date, and reason — all the context needed to act immediately — and includes a direct link to the mentor's profile for rapid reassignment. It directly reduces the operational lag between a status change and coordinator response.
This is a low-complexity mobile UI component that integrates into the existing notification feed, making it a relatively contained delivery item. The primary dependency is the notification data model providing structured pause/resume event payloads from the backend. The component must conform to existing notification feed rendering conventions — card dimensions, typography, action button placement — so coordination with the UI/design lead is needed before implementation begins. Testing should cover both pause and resume card variants, the profile deep-link navigation, and the mark-as-read interaction.
No external service dependencies introduce scheduling risk here.
This mobile component renders within the notification feed list, receiving a typed `PauseNotification` or `ResumeNotification` object. Implement `renderPauseCard` and `renderResumeCard` as separate widget builders that share a common card layout component, differing only in icon, color accent, and label text. The `onProfileLinkTapped` handler should push the peer mentor profile route using the existing app router. `markAsRead` should call the notification service's read-state endpoint and update local state optimistically.
Ensure the optional `reason` field is conditionally rendered with a null guard — do not show an empty reason section. Follow existing notification card padding, font sizing, and action button styles from the design system to maintain visual consistency.
Responsibilities
- Display peer mentor name and effective date for pause/resume events
- Show optional reason text when provided by the peer mentor
- Provide quick-action link to the peer mentor's profile for reassignment
Interfaces
renderPauseCard(notification: PauseNotification)
renderResumeCard(notification: ResumeNotification)
onProfileLinkTapped(peerMentorId: String)
markAsRead(notificationId: String)