Peer Mentor Profile Header
Component Detail
Description
Displays the peer mentor's avatar, full name, organization label, and primary status badge in a prominent card at the top of the detail screen. Visually flags expired certification with design token error color (HLF requirement). Supports VoiceOver and TalkBack accessibility.
peer-mentor-profile-header
Summaries
The Peer Mentor Profile Header is the first touchpoint coordinators see when reviewing a mentor's record, directly shaping trust and decision speed. By surfacing certification status and organizational role at a glance — with immediate visual flagging of expired HLF certifications — coordinators can act on compliance risks in seconds rather than hunting through records. This reduces administrative overhead, mitigates regulatory exposure from uncertified mentors operating in the field, and reinforces the platform's credibility as a professional-grade coordination tool that respects the specific branding and labeling conventions of each partner organization.
This component has low development complexity and is scoped to a single screen, making it a fast delivery item with minimal scheduling risk. Its only hard dependency is the Certification Status Badge component, which must be completed first — sequence this accordingly in sprint planning. Accessibility requirements for VoiceOver and TalkBack add a modest QA overhead: budget time for screen-reader testing on both iOS and Android. The org-specific role label system requires integration with the organization labels data source, so confirm that API contract is stable before starting.
Overall risk to delivery is low if the badge dependency ships on time.
Implemented as a stateless Flutter widget accepting a `PeerMentorProfile` prop. Renders avatar with `_resolveAvatarFallback` providing initials when no image URL is present. The `_resolveStatusColor` method maps `MentorStatus` enum values to design token color constants — ensure token names align with the shared design token package version in use. Composes `CertificationStatusBadge` for status rendering; do not duplicate badge logic here.
Organization role labels are resolved externally and passed in via the profile model. Accessibility: wrap name and status in `Semantics` nodes with merged labels for VoiceOver/TalkBack. No state, no async calls — straightforward to unit test with widget tests against mock `PeerMentorProfile` fixtures.
Responsibilities
- Display mentor avatar with fallback initials
- Render name and organization-specific role label using org labels system
- Show primary status badge (active, paused, expired) with design token colors
- Apply visual error state styling for expired HLF certification
Interfaces
PeerMentorProfileHeader({required PeerMentorProfile mentor})
build(BuildContext context)
_resolveStatusColor(MentorStatus status)
_resolveAvatarFallback(String name)