🏠 Overview › 🧩 Components ›🧩 Badges Screen

Badges Screen

Component Detail

User Interface medium complexity mobile
0
Dependencies
0
Dependents
0
Entities
0
Integrations

Description

Displays earned and locked achievement badges for the current user with progress indicators toward upcoming milestones. Surfaces badge details including award date, qualification criteria, and role-specific achievements. Provides entry points from the profile screen and home dashboard.

Feature: Achievement Badges

badges-screen

Sources & reasoning

Badges are explicitly mentioned in §2.2 alongside Wrapped and listed by name in the Fase 3 (Growth & Engagement) deliverables, anchoring both scope and target_release.

  • Også nevnt: «Årets koordinator», statusbadges og halvårsoppsummeringer.
  • Fase 3 - Vekst og engasjement - Gamification / «Ditt likepersonsår» (Wrapped, badges, Advantage Calculator)

Responsibilities

  • Render grid of earned badges with award dates and visual styling
  • Render locked badges with progress indicators toward qualification thresholds
  • Display badge detail view with qualification rules and milestone description
  • Group badges by category (activity milestones, anniversaries, certifications, role-specific)
  • Trigger refresh when new badges are awarded via Badge Service notifications

Interfaces

renderBadgeGrid(userId): View
openBadgeDetail(badgeId): View
refreshBadges(): void