Recognition Tier Banner
Component Detail
Description
Displays named recognition tiers such as 'Coordinator of the Year' and seasonal awards on the peer mentor profile. Shows current tier status with visual hierarchy that communicates prestige without enabling competitive ranking.
recognition-tier-banner
Summaries
The Recognition Tier Banner surfaces named honors like 'Coordinator of the Year' on peer mentor profiles, providing meaningful, prestige-based recognition that motivates long-term contribution without creating harmful competitive ranking dynamics. This directly supports the organization's values around inclusive recognition, while giving coordinators a clear signal of who their most dedicated peer mentors are. The animated tier reveal creates a memorable moment of acknowledgment that strengthens the emotional connection between peer mentors and the platform, improving retention and volunteer satisfaction.
Low complexity, mobile-only component with a single dependency on recognition-tier-repository. The main scheduling consideration is that recognition tier data must be defined and seeded in the backend before this component can be fully tested with real data. The award animation (playAwardAnimation) should be scoped carefully — if it uses a third-party animation library not already in the project, add that as a dependency task. Accessibility testing is required to ensure tier labels are readable by screen readers.
Plan for coordinator-facing profile views to be updated to include this banner as a placement task.
RecognitionTierBanner is a stateless Flutter widget accepting a nullable RecognitionTier. When activeTier is null, the widget renders nothing (or a placeholder). buildTierLabel() and buildAwardPeriodLabel() extract display strings from the RecognitionTier model. playAwardAnimation() should be triggered via a post-frame callback or AnimationController when the widget first renders with a newly assigned tier — coordinate with the parent to pass an isNewlyAwarded flag if animation should not replay on every profile view.
Data flows from recognition-tier-repository, which should cache tier state locally to avoid redundant network calls on profile renders.
Responsibilities
- Render active recognition tier with name and icon
- Show tier award period (e.g., annual, seasonal)
- Display tier on coordinator-visible profile views
- Animate tier reveal when newly awarded
Interfaces
RecognitionTierBanner({required RecognitionTier? activeTier})
buildTierLabel(RecognitionTier tier)
buildAwardPeriodLabel(RecognitionTier tier)
playAwardAnimation()