Periodic Summary Digest Card
Component Detail
Description
In-app card rendered on the home screen during the relevant summary period showing key metrics: sessions held, hours contributed, and year-over-year comparison. Designed as a lightweight, scannable digest that does not overwhelm the user.
periodic-summary-card
Summaries
The Periodic Summary Digest Card delivers a powerful retention and motivation tool by surfacing each peer mentor's own impact data — sessions held, hours contributed, and year-over-year growth — directly on the home screen at meaningful moments. This transforms abstract data into a personal achievement narrative, reinforcing why mentors continue to contribute. For coordinators and program owners, it demonstrates the platform's ability to surface programme health signals automatically, reducing the need for manual reporting. Year-over-year comparison in particular supports ongoing engagement by giving mentors a visible sense of progress and momentum within the programme.
Medium-complexity mobile UI component with dependencies on periodic-summary-service and summary-cache-repository. The offline capability (rendering from cached data) adds implementation scope and must be tested explicitly with network-off device scenarios. The card's dismissal/archive behaviour must be agreed with product before development begins — specifically, whether dismissal is per-device or synced server-side, as this affects backend scope. Animation entrance adds polish but should be marked as a stretch goal to protect delivery timeline.
The YoY delta calculation must be validated against edge cases (first-year mentors with no prior data). Recommend defining the summary period trigger logic (what activates card display) as a formal acceptance criterion.
Mobile UI component (Flutter widget) that consumes a summary object from periodic-summary-service and caches it via summary-cache-repository for offline display. The SummaryCard widget accepts summary, period, and onDismiss props following Flutter's composition model. renderMetricRow handles label/value/delta display with conditional delta formatting (positive/negative YoY). renderOfflineBadge conditionally renders based on connectivity state — integrate with a connectivity stream or inherited widget.
animateEntrance should use Flutter's AnimationController with a fade+slide curve on first render. renderPeriodLabel maps periodType enum values to localised display strings. The dismissal callback should persist acknowledgment state to summary-cache-repository to prevent card reappearing after app restart. Ensure the component degrades gracefully when summary data is null or partially populated.
Responsibilities
- Render half-year and quarterly summary digest on home screen
- Display sessions held, hours contributed, and YoY delta
- Show cached data when offline
- Dismiss or archive card after user acknowledges it
Interfaces
SummaryCard({summary, period, onDismiss})
renderMetricRow(label, value, delta)
renderOfflineBadge()
renderPeriodLabel(periodType, year)
animateEntrance()
handleDismiss()
Relationships
Related Data Entities (1)
Data entities managed by this component