Report Builder UI
Component Detail
Description
Next.js client-side page that lets Org Admins and Coordinators select dimensions, filters (date range, activity type, contact category, peer mentor grouping), and aggregations to construct ad-hoc reports. Renders available options from the Report Schema Registry and assembles query parameters for submission to the Custom Report Service. Must meet WCAG 2.2 AA keyboard navigation and contrast requirements throughout all filter and dimension controls.
report-builder-ui
Sources & reasoning
The report builder is the primary user surface for this feature. NHF's 1,400-chapter org structure requires flexible dimension selection to slice activity data by organizational level. WCAG 2.2 AA keyboard navigation and contrast are required throughout per the platform-wide accessibility mandate.
No source references — this artifact was included based on reasoning alone (see above).
Responsibilities
- Render dimension and filter selection controls from schema registry metadata
- Assemble validated query parameter objects for report execution
- Display paginated report results in a data table
- Provide save-as-template and export (CSV/XLSX) actions
- Ensure full keyboard navigation and WCAG 2.2 AA contrast on all controls
Interfaces
buildReportParams(dimensions, filters, groupings): ReportParams
previewReport(params: ReportParams): Promise<ReportResult>
saveTemplate(name: string, params: ReportParams): Promise<void>
exportReport(params: ReportParams, format: 'csv' | 'xlsx'): void
Relationships
Dependencies (2)
Components this component depends on