TT-009 — Reports Feature UI

Type: Story
Priority: High
Labels: ui, feature, reports, charts
Depends on: TT-005
Blocks: —

Summary

Implement the Reports screen with day / week / month views and bar charts powered by fl_chart. Users can navigate between periods and filter by project.

UI Specification

ReportsScreen layout

┌──────────────────────────────┐
│  AppBar: "Reports"  [export] │
│  [Day] [Week] [Month]  tabs  │
├──────────────────────────────┤
│  ◀  Mon 7 Jul – Sun 13 Jul ▶ │
│                              │
│  Total: 22h 15m              │
│                              │
│  ┌────────────────────────┐  │
│  │   Bar chart (fl_chart) │  │
│  │   Mon Tue Wed Thu Fri  │  │
│  └────────────────────────┘  │
│                              │
│  By project:                 │
│  🟦 My Project   14h (63%)   │
│  🟩 Backend       8h (36%)   │
└──────────────────────────────┘

Views

Tab	X-axis	Bar value
Day	Hours (0–23)	Minutes per hour
Week	Weekdays (Mo–Su)	Hours per day
Month	Weeks 1–5	Hours per week

Widgets to build

Widget	File	Description
`ReportsScreen`	`reports_screen.dart`	Tabbed screen + period navigator
`PeriodNavigator`	`widgets/period_navigator.dart`	◀ Period label ▶
`DurationBarChart`	`widgets/duration_bar_chart.dart`	fl_chart BarChart wrapper
`ProjectBreakdownList`	`widgets/project_breakdown_list.dart`	Per-project totals + %
`SummaryHeader`	`widgets/summary_header.dart`	Total duration + avg daily

"Previous" / "Next" arrows call reportsNotifier.goToPrevious() / .goToNext()
Tapping the period label opens a DateRangePicker (week/month snapped)

Project Filter

Optional DropdownButton in AppBar actions to filter by project
Default: all projects

Acceptance Criteria

Three tabs: Day / Week / Month with distinct chart shapes
Period navigator updates charts and summary reactively
DurationBarChart renders correct number of bars per period
Y-axis labeled in hours; bars show duration for that bucket
Project breakdown list sorted by duration descending
Export button in AppBar triggers export flow (see TT-010)
Widget test: week view renders 7 bars
Widget test: navigating period changes displayed label

Files to create / modify

lib/features/reports/presentation/reports_screen.dart (replace stub)
lib/features/reports/presentation/widgets/period_navigator.dart
lib/features/reports/presentation/widgets/duration_bar_chart.dart
lib/features/reports/presentation/widgets/project_breakdown_list.dart
lib/features/reports/presentation/widgets/summary_header.dart
test/features/reports/reports_screen_test.dart

Notes

See .ai/features/reports.md for Drift query details and chart data format
fl_chart docs: https://pub.dev/packages/fl_chart

3.4 KiB Raw Blame History Unescape Escape