Summary Period Selector
Component Detail
Description
Allows the user to toggle between yearly and half-year summary views. Renders as a segmented control or tab bar with accessible labels, and triggers reload of the relevant aggregated stats from the service layer.
summary-period-selector
Summaries
The Summary Period Selector gives peer mentors and programme coordinators the flexibility to review performance across meaningful time windows — a full year or half-year segments — rather than being locked to a single view. This directly supports how coordinators review programme health at mid-year check-ins and how mentors track their own progress across different phases of activity. The feature costs minimal development effort relative to the analytical value it provides and reinforces the programme's commitment to giving mentors transparent, meaningful insight into their contributions.
Low complexity widget with no external dependencies, making it a low-risk deliverable that can be built and tested in isolation early in the sprint cycle. The primary integration point is the BLoC or provider layer, which must expose a SummaryPeriod enum and respond to change events by reloading aggregated stats. Testing should cover period toggle state persistence within widget lifecycle, event emission verification, and keyboard and screen reader navigability on both platforms. No backend coordination is needed for the widget itself, though the downstream stats reload depends on annual-stats-aggregation-service availability.
SummaryPeriodSelector is a stateful widget holding selected SummaryPeriod locally and emitting changes via the required onChanged callback, which the parent BLoC or ChangeNotifier handles to trigger data reload. Renders as a CupertinoSlidingSegmentedControl on iOS and a custom segmented tab on Android, both using design token colours. getSelectedPeriod() exposes current state for parent reads. reset() reverts to the default period.
Accessibility is implemented via Semantics with button roles and selected state. The SummaryPeriod enum should include values for full_year, first_half, and second_half to cover all supported views.
Responsibilities
- Render period toggle (full year / first half / second half)
- Emit period change events to the BLoC or provider
- Maintain selected period in local widget state
- Ensure keyboard and screen reader navigability
Interfaces
SummaryPeriodSelector({required SummaryPeriod selected, required Function(SummaryPeriod) onChanged})
getSelectedPeriod(): SummaryPeriod
reset(): void