82 lines
3.4 KiB
Markdown
82 lines
3.4 KiB
Markdown
# 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
|