Browse Personal Badge Collection
The Achievements screen displays every badge in the user's organisation-scoped catalogue, grouped by recognition category (activity volume, tenure, participation streak, special awards). Earned badges are rendered in full colour with an unlocked visual state using Flutter's AnimatedSwitcher; locked badges are rendered greyed-out. Each badge card shows the badge name and a short description of what it represents. The screen is accessible from the main navigation and loads badge data from the Badge Repository scoped to the user's organisation.
User Story
Acceptance Criteria
- Given a peer mentor or coordinator opens the Achievements screen, when the screen loads, then all badge categories for their organisation are displayed with at least one badge visible per category
- Given a user has earned a badge, when they view the Achievements screen, then that badge appears in an unlocked, full-colour animated state distinct from locked badges
- Given a user has not yet earned a badge, when they view the Achievements screen, then that badge is displayed in a greyed-out locked state
- Given the user's organisation is HLF, when they view the Achievements screen, then only HLF-specific badges are shown (no Blindeforbundet assignment-count badges)
- Given the user's organisation is Blindeforbundet, when they view the Achievements screen, then only Blindeforbundet-specific badges are shown
- Given the screen loads, when badge data is unavailable, then a graceful empty-state message is displayed rather than a crash
Business Value
A visible, browsable badge catalogue is the foundation of the recognition programme. Without it, milestone achievements have no surface for display and the motivational loop is broken. For organisations relying entirely on unpaid volunteers, giving peer mentors a moment of visible reward after completing milestones meaningfully increases retention and engagement at zero material cost.
Components
- Achievements Screen ui
- Badge Widget ui
- Badge Repository data