Peer Mentor Detail Screen
Component Detail
Description
Top-level Flutter screen widget that orchestrates the peer mentor profile view. Assembles all sub-sections (profile header, status badge, assigned contacts, activity summary, certification alert) into a scrollable detail page accessible to coordinators.
peer-mentor-detail-screen-widget
Summaries
The Peer Mentor Detail Screen gives coordinators a single, comprehensive view of every peer mentor in the system — their current status, assigned contacts, recent activity, and certification standing — without requiring navigation across multiple screens. For organizations like HLF where certification expiry carries real operational consequences, the screen's direct link to course enrollment from a certification alert means coordinators can act on compliance issues in seconds rather than minutes. This kind of streamlined workflow reduces the time coordinators spend managing peer mentor relationships, freeing them for higher-value work and ensuring that no certification gaps slip through unnoticed. Accessibility compliance (WCAG 2.2 AA) means the screen is usable by coordinators who rely on assistive technologies.
Peer Mentor Detail Screen is a medium-complexity UI orchestration component with six declared dependencies — peer-mentor-profile-header, certification-status-badge, certification-alert-banner, assigned-contacts-list, mentor-activity-summary-panel, and peer-mentor-detail-bloc. All six must be completed and integration-tested before this screen can be considered shippable, making dependency management the primary scheduling risk. Plan the build order so BLoC and sub-widgets are delivered early enough to allow end-to-end screen integration testing within the same sprint. The HLF-specific certification expiry navigation flow requires sign-off from HLF stakeholders on the target screen and routing logic before implementation.
WCAG 2.2 AA compliance adds testing effort — allocate dedicated time for accessibility review with a screen reader and contrast analyzer.
PeerMentorDetailScreen is a stateful Flutter widget that takes a required mentorId String and delegates all data loading to PeerMentorDetailBloc via BlocBuilder/BlocConsumer. The build method assembles a CustomScrollView or SingleChildScrollView wrapping the six sub-component widgets in a defined vertical order, with conditional rendering for loading and error states driven by BLoC state classes. Navigation callbacks (_onCertificationTap routes to the HLF course enrollment screen, _onContactTap pushes the contact detail route with contactId, _onEditMentorTap opens the edit mentor form) should be implemented as methods rather than inline closures to keep the build method readable. All interactive elements require Semantics wrappers and sufficient color contrast ratios per WCAG 2.2 AA — run flutter_lints and a contrast checker as part of the PR checklist.
BLoC injection should use BlocProvider.of context lookup rather than direct instantiation to support widget testing with mock BLoCs.
Responsibilities
- Render full peer mentor detail layout with vertical scroll
- Coordinate BLoC state to show loading, error, and data states
- Route to course enrollment screen on certification expiry tap (HLF)
- Apply WCAG 2.2 AA contrast and accessible semantics throughout
Interfaces
PeerMentorDetailScreen({required String mentorId})
build(BuildContext context)
_onCertificationTap()
_onContactTap(String contactId)
_onEditMentorTap()
Relationships
Dependencies (6)
Components this component depends on