# 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 |

### Period Navigation
- "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