Badges Screen
Component Detail
User Interface
medium complexity
mobile
2
Dependencies
0
Dependents
4
Entities
0
Integrations
Description
Dedicated screen displaying all available and earned achievement badges in a grid layout. Shows locked/unlocked states with SVG badge assets, progress indicators for partially completed milestones, and badge detail modals with award date and criteria. Supports pull-to-refresh and animated unlock transitions.
badges-screen
Responsibilities
- Render badge grid with locked/unlocked visual states
- Display badge detail bottom sheet with criteria and award date
- Show progress indicators for in-progress achievements
- Animate badge unlock transitions when newly awarded
- Filter badges by category (activity, hours, mentoring, special)
Interfaces
buildBadgeGrid(badges: List<Badge>)
showBadgeDetail(badge: Badge)
renderProgressIndicator(badge: Badge, progress: double)
playUnlockAnimation(badgeId: String)
filterByCategory(category: BadgeCategory)
refreshBadges()
renderLockedBadge(badgeType: AchievementType)
renderUnlockedBadge(badge: Badge)
Relationships
Dependencies (2)
Components this component depends on
Related Data Entities (4)
Data entities managed by this component