Period Selection Screen
Component Detail
Description
Primary screen allowing coordinators and organization admins to choose a Bufdir report period. Displays predefined grant-cycle period options alongside a custom date range picker, and surfaces a record count confirmation before the user proceeds.
period-selection-screen
Summaries
The Period Selection Screen is the entry point through which coordinators and organization administrators define the exact date boundaries for their Bufdir grant reports. A clear, intuitive period selection experience directly reduces the most common source of reporting errors: submitting reports for incorrect date ranges. By surfacing predefined grant-cycle periods alongside a custom date picker and showing a real-time record count before the user proceeds, this screen prevents costly report rejections caused by wrong period selection. For staff processing quarterly or annual Bufdir submissions across multiple organizations, even small usability improvements at this step translate to meaningful time savings and reduced rework across each reporting cycle.
This is a low-complexity frontend screen with three child component dependencies: period-preset-list, custom-date-range-picker, and record-count-banner. All three must be available before this screen can be integration-tested end-to-end. The screen itself introduces minimal business logic — its primary responsibility is rendering and event delegation — so development time is short once dependencies are ready. Testing should cover the incomplete-period warning display, the transition between preset and custom range modes, and the onConfirm event payload structure, as downstream components depend on the emitted ReportPeriod format.
Mobile layout testing on iOS and Android is required given the execution context. This screen is on the critical path for the Bufdir export flow and should be prioritized alongside its dependencies.
Period Selection Screen is a stateful Flutter widget that manages a local selectedPeriod state of type ReportPeriod. It renders period-preset-list to display predefined PeriodPreset options and switches to the custom-date-range-picker when the user selects a custom range. showIncompleteWarning(bool) controls visibility of the record-count-banner's warning state, which is computed externally based on the selected period and surfaced back to this screen via a boolean prop. The onPeriodPresetSelected and onCustomRangeChanged callbacks update local state and trigger a record count refresh in the parent via onConfirm's upstream binding.
The onConfirm callback emits a fully constructed ReportPeriod object consumed by the downstream export orchestrator. The screen does not perform any data fetching directly — record counts are injected by the parent screen controller. BuildContext is the sole required constructor argument, with all callbacks passed as named parameters for testability.
Responsibilities
- Render predefined period presets for the organization
- Render custom date range picker for edge cases
- Display record count and incomplete-period warning
- Emit confirmed period selection to downstream export flow
Interfaces
build(BuildContext)
onPeriodPresetSelected(PeriodPreset)
onCustomRangeChanged(DateTimeRange)
onConfirm(ReportPeriod)
onCancel()
showIncompleteWarning(bool)
Relationships
Dependencies (3)
Components this component depends on