Bufdir Report Preview Screen
Component Detail
Description
Full-screen preview of the assembled Bufdir report, organized into the official form's sections and field order. Renders all aggregated figures with the same labels used on the official Bufdir reporting form so coordinators can cross-reference before export. Supports screen readers (VoiceOver) and meets WCAG 2.2 AA contrast requirements.
bufdir-preview-screen
Summaries
The Bufdir Report Preview Screen is the final quality-control checkpoint before coordinators submit their report to Bufdir. By rendering aggregated figures using the exact field labels and section order from the official Bufdir reporting form, it allows coordinators to cross-reference their data visually before export — dramatically reducing the risk of submitting incorrect figures. Its accessibility compliance with WCAG 2.2 AA and VoiceOver support ensures the tool is usable by coordinators with visual impairments, broadening its effective user base and supporting organizational inclusivity commitments. A well-designed preview experience directly reduces post-submission corrections and strengthens the organization's reporting credibility with Bufdir.
The Bufdir Report Preview Screen is the highest-complexity component in this set, with four widget and service dependencies: bufdir-report-section-widget, bufdir-validation-summary-banner, bufdir-preview-service, and bufdir-period-diff-view. All four must be delivered and stable before this screen can be completed, making it a late-stage integration task. Accessibility requirements (WCAG 2.2 AA, VoiceOver) add testing scope that should be explicitly budgeted — plan for dedicated accessibility QA sessions with screen reader testing on both iOS and Android. The section scroll navigation and validation panel overlay interactions also require thorough UI testing.
Risk: if the official Bufdir form layout changes, this screen will require a coordinated update across section widgets and field label constants — establish a change process for this dependency.
Bufdir Report Preview Screen is a high-complexity UI component with execution contexts in frontend and mobile. It renders bufdir-report and bufdir-report-period data models through a set of child widgets: bufdir-report-section-widget handles individual form sections, bufdir-validation-summary-banner displays grouped validation issues, and bufdir-period-diff-view shows period comparison data. The scrollToSection(sectionId) interface requires a ScrollController with section-keyed GlobalKeys or a similar anchor-scrolling mechanism — implement this as a mixin or utility to avoid duplicating scroll logic. All field labels must be sourced from a single constants file mapping Bufdir form field identifiers to display strings, not hardcoded in the widget tree.
WCAG AA contrast compliance must be validated against the design system color tokens at build time if possible. The showValidationPanel() overlay should use a bottom sheet or slide-in panel that does not obscure the section currently being reviewed.
Responsibilities
- Render all Bufdir report sections in official form order
- Display field labels matching the official Bufdir form
- Show validation issue indicators alongside affected fields
- Provide navigation to export or back to period selection
Interfaces
build(BuildContext)
scrollToSection(sectionId)
showValidationPanel()
navigateToExport()
navigateBack()
Relationships
Dependencies (4)
Components this component depends on