Filter Statistics by Time Window
The statistics dashboard must provide a time window selector that allows peer mentors to choose preset periods (current week, current month, last 3 months, current year) or define a custom date range. The selection should persist during the session and all charts and summary cards must react to the change. The component should be visually prominent and easy to interact with for users with cognitive or motor accessibility needs.
User Story
Audience Summaries
Time-window filtering on the statistics dashboard delivers direct business value by empowering peer mentors to conduct meaningful self-assessment across flexible periods — weekly, monthly, quarterly, annual, or custom. This capability supports organizational reporting cycles at both NHF and HLF, where mentors logging up to 380 activities annually need to review specific windows for performance conversations with coordinators. By making engagement patterns visible and actionable, the platform becomes a retention tool: mentors who understand their own impact are more likely to remain active. The accessible, prominent design also ensures that users with cognitive or motor accessibility needs can fully utilize the feature, broadening the effective user base and demonstrating the platform's commitment to inclusive design — a key competitive differentiator in the disability-sector nonprofit space.
This high-priority story requires coordinated delivery across the UI, data-fetching, and state management layers. Effort is moderate-to-high: the date range picker must meet accessibility standards (WCAG AA minimum), preset options must map correctly to calendar boundaries, and session persistence must be implemented so selected periods survive navigation. The primary delivery risk is custom date range validation edge cases — overlapping ranges, future dates, and empty-result states all require explicit handling per acceptance criteria. Dependencies link directly to the base statistics dashboard story (story-activity-statistics-dashboard-peer-mentor-001), so sequencing is critical.
QA must cover all five preset options, custom range input, navigation persistence, and the empty-state UX path. Accessibility testing with assistive technology should be included in the definition of done. Stakeholder sign-off on the empty-state messaging copy is needed before final release.
Implementation requires a controlled date-range selector component integrated with the statistics dashboard's data-fetching layer. The component must expose a shared state (context or state management store) consumed by all charts and summary cards, so a single selection triggers a coordinated re-fetch or re-filter across the entire screen. Preset options (This Week, This Month, Last 3 Months, This Year) need deterministic date boundary calculations accounting for calendar edge cases (month-end, year boundary). Custom range input requires start/end date validation with guards against inverted ranges.
Session persistence can be implemented via React state lifted to a parent navigator or lightweight session storage. The empty-state path must be handled at the chart rendering level — each chart component should detect zero-data conditions and render an informative fallback rather than a blank canvas. Accessibility requirements (touch target sizing, contrast, screen-reader labels) must be applied to the selector component itself.
Acceptance Criteria
- Given I am on the statistics screen, When I tap the time window selector, Then I see options for: This Week, This Month, Last 3 Months, This Year, and Custom Range
- Given I select 'This Month', When the selection is confirmed, Then all statistics including charts and summary cards update to show data only for the current calendar month
- Given I select 'Custom Range', When I provide a start and end date, Then the statistics recalculate for exactly that date range
- Given I have selected a time window, When I navigate away and return to the stats screen, Then the previously selected time window is still applied
- Given the selected time window returns no data, When charts attempt to render, Then I see an informative empty state message specific to the selected period rather than a blank or broken chart
Business Value
Time-period filtering enables peer mentors to identify patterns in their own engagement — seeing that activity drops in certain months helps both the mentor and coordinator plan outreach. It also supports HLF's use case where mentors logged up to 380 activities in a year and need to review specific periods for self-assessment and performance conversations.
Components
- Time Window Selector ui
- Time Window Service service
- Stats Async Notifier service
- Stats Repository data
- Coordinator Statistics BLoC infrastructure
- Statistics Period Filter Bar ui