feat: implement v0.4.0 - Reports, Charts, Comparison, Dark Mode, E2E Testing
Some checks failed
E2E Tests / Run E2E Tests (push) Has been cancelled
E2E Tests / Visual Regression Tests (push) Has been cancelled
E2E Tests / Smoke Tests (push) Has been cancelled

Backend (@backend-dev):
- Add ReportService with PDF/CSV generation (reportlab, pandas)
- Implement Report API endpoints (POST, GET, DELETE, download)
- Add ReportRepository and schemas
- Configure storage with auto-cleanup (30 days)
- Rate limiting: 10 downloads/minute
- Professional PDF templates with charts support

Frontend (@frontend-dev):
- Integrate Recharts for data visualization
- Add CostBreakdown, TimeSeries, ComparisonBar charts
- Implement scenario comparison page with multi-select
- Add dark/light mode toggle with ThemeProvider
- Create Reports page with generation form and list
- Add new UI components: checkbox, dialog, tabs, label, skeleton
- Implement useComparison and useReports hooks

QA (@qa-engineer):
- Setup Playwright E2E testing framework
- Create 7 test spec files with 94 test cases
- Add visual regression testing with baselines
- Configure multi-browser testing (Chrome, Firefox, WebKit)
- Add mobile responsive tests
- Create test fixtures and helpers
- Setup GitHub Actions CI workflow

Documentation (@spec-architect):
- Create detailed kanban-v0.4.0.md with 27 tasks
- Update progress.md with v0.4.0 tracking
- Create v0.4.0 planning prompt

Features:
 PDF/CSV Report Generation
 Interactive Charts (Pie, Area, Bar)
 Scenario Comparison (2-4 scenarios)
 Dark/Light Mode Toggle
 E2E Test Suite (94 tests)

Dependencies added:
- Backend: reportlab, pandas, slowapi
- Frontend: recharts, date-fns, @radix-ui/react-checkbox/dialog/tabs
- Testing: @playwright/test

27 tasks completed, 100% v0.4.0 implementation
This commit is contained in:
Luca Sacchi Ricciardi
2026-04-07 16:11:47 +02:00
parent 311a576f40
commit a5fc85897b
63 changed files with 9218 additions and 246 deletions

662
export/kanban-v0.4.0.md Normal file
View File

@@ -0,0 +1,662 @@
# Kanban v0.4.0 - Reports, Charts & Comparison
> **Progetto:** mockupAWS - Backend Profiler & Cost Estimator
> **Versione Target:** v0.4.0
> **Focus:** Report Generation, Data Visualization, Scenario Comparison
> **Timeline:** 2-3 settimane
> **Priorità:** P1 (High)
> **Data Creazione:** 2026-04-07
---
## 📊 Panoramica
| Metrica | Valore |
|---------|--------|
| **Task Totali** | 27 |
| **Backend Tasks** | 5 (BE-RPT-001 → 005) |
| **Frontend Tasks** | 18 (FE-RPT-001 → 004, FE-VIZ-001 → 006, FE-CMP-001 → 004, FE-THM-001 → 004) |
| **QA Tasks** | 4 (QA-E2E-001 → 004) |
| **Priorità P1** | 15 |
| **Priorità P2** | 8 |
| **Priorità P3** | 4 |
| **Effort Totale Stimato** | ~M (Medium) |
---
## 🏷️ Legenda
### Priorità
- **P1** (High): Feature critiche, bloccano release
- **P2** (Medium): Feature importanti, ma non bloccanti
- **P3** (Low): Nice-to-have, possono essere rimandate
### Effort
- **S** (Small): 1-2 giorni, task ben definito
- **M** (Medium): 2-4 giorni, richiede ricerca/testing
- **L** (Large): 4-6 giorni, task complesso con dipendenze
### Stato
-**Pending**: Non ancora iniziato
- 🟡 **In Progress**: In lavorazione
- 🟢 **Completed**: Completato e testato
- 🔴 **Blocked**: Bloccato da dipendenze o issue
---
## 🗂️ BACKEND - Report Generation (5 Tasks)
### BE-RPT-001: Report Service Implementation
| Campo | Valore |
|-------|--------|
| **ID** | BE-RPT-001 |
| **Titolo** | Report Service Implementation |
| **Descrizione** | Implementare `ReportService` con metodi per generazione PDF, CSV e compilazione metriche. Template professionale con logo, header, footer, pagine numerate. |
| **Priorità** | P1 |
| **Effort** | L (4-6 giorni) |
| **Assegnato** | @backend-dev |
| **Dipendenze** | v0.3.0 completata, DB-006 (Reports Table) |
| **Blocca** | BE-RPT-002, BE-RPT-003, FE-RPT-001 |
| **Stato** | ⏳ Pending |
| **Note** | Librerie: reportlab (PDF), pandas (CSV). Includere: summary scenario, cost breakdown, metriche aggregate, top 10 logs, PII violations |
### BE-RPT-002: Report Generation API
| Campo | Valore |
|-------|--------|
| **ID** | BE-RPT-002 |
| **Titolo** | Report Generation API |
| **Descrizione** | Endpoint `POST /api/v1/scenarios/{id}/reports` con supporto PDF/CSV, date range, sezioni selezionabili. Async task con progress tracking. |
| **Priorità** | P1 |
| **Effort** | M (2-4 giorni) |
| **Assegnato** | @backend-dev |
| **Dipendenze** | BE-RPT-001 |
| **Blocca** | BE-RPT-003, FE-RPT-001, FE-RPT-002 |
| **Stato** | ⏳ Pending |
| **Note** | Response 202 Accepted con report_id. Background task con Celery oppure async FastAPI. Progress via GET /api/v1/reports/{id}/status |
### BE-RPT-003: Report Download API
| Campo | Valore |
|-------|--------|
| **ID** | BE-RPT-003 |
| **Titolo** | Report Download API |
| **Descrizione** | Endpoint `GET /api/v1/reports/{id}/download` con file stream, headers corretti, Content-Disposition, rate limiting. |
| **Priorità** | P1 |
| **Effort** | S (1-2 giorni) |
| **Assegnato** | @backend-dev |
| **Dipendenze** | BE-RPT-002 |
| **Blocca** | FE-RPT-003 |
| **Stato** | ⏳ Pending |
| **Note** | Mime types: application/pdf, text/csv. Rate limiting: 10 download/minuto |
### BE-RPT-004: Report Storage
| Campo | Valore |
|-------|--------|
| **ID** | BE-RPT-004 |
| **Titolo** | Report Storage |
| **Descrizione** | Gestione storage file reports in filesystem (path: ./storage/reports/{scenario_id}/{report_id}.{format}), cleanup automatico dopo 30 giorni. |
| **Priorità** | P2 |
| **Effort** | S (1-2 giorni) |
| **Assegnato** | @backend-dev |
| **Dipendenze** | BE-RPT-001 |
| **Blocca** | - |
| **Stato** | ⏳ Pending |
| **Note** | Max file size: 50MB. Cleanup configurabile. Tabella reports già esistente (DB-006) |
### BE-RPT-005: Report Templates
| Campo | Valore |
|-------|--------|
| **ID** | BE-RPT-005 |
| **Titolo** | Report Templates |
| **Descrizione** | Template HTML per PDF (Jinja2 + WeasyPrint o ReportLab). Stile professionale con brand mockupAWS, colori coerenti (#0066CC), font Inter/Roboto. |
| **Priorità** | P2 |
| **Effort** | M (2-4 giorni) |
| **Assegnato** | @backend-dev |
| **Dipendenze** | BE-RPT-001 |
| **Blocca** | FE-RPT-004 |
| **Stato** | ⏳ Pending |
| **Note** | Header con logo, tabelle formattate con zebra striping, pagine numerate |
---
## 🎨 FRONTEND - Report UI (4 Tasks)
### FE-RPT-001: Report Generation UI
| Campo | Valore |
|-------|--------|
| **ID** | FE-RPT-001 |
| **Titolo** | Report Generation UI |
| **Descrizione** | Nuova pagina `/scenarios/:id/reports` con form per generazione report: select formato (PDF/CSV), checkbox opzioni, date range picker, preview dati inclusi. |
| **Priorità** | P1 |
| **Effort** | M (2-4 giorni) |
| **Assegnato** | @frontend-dev |
| **Dipendenze** | BE-RPT-002 (API disponibile) |
| **Blocca** | FE-RPT-002, FE-RPT-004 |
| **Stato** | ⏳ Pending |
| **Note** | Bottone Generate con loading state. Toast notification quando report pronto |
### FE-RPT-002: Reports List
| Campo | Valore |
|-------|--------|
| **ID** | FE-RPT-002 |
| **Titolo** | Reports List |
| **Descrizione** | Tabella reports generati per scenario con colonne: Data, Formato, Dimensione, Stato, Azioni. Azioni: Download, Delete, Rigenera. |
| **Priorità** | P1 |
| **Effort** | M (2-4 giorni) |
| **Assegnato** | @frontend-dev |
| **Dipendenze** | FE-RPT-001, BE-RPT-002 |
| **Blocca** | FE-RPT-003 |
| **Stato** | ⏳ Pending |
| **Note** | Badge stato: Pending, Processing, Completed, Failed. Sorting per data (newest first). Pagination se necessario |
### FE-RPT-003: Report Download Handler
| Campo | Valore |
|-------|--------|
| **ID** | FE-RPT-003 |
| **Titolo** | Report Download Handler |
| **Descrizione** | Download file con nome appropriato `{scenario_name}_YYYY-MM-DD.{format}`. Axios con responseType: 'blob', ObjectURL per trigger download, cleanup. |
| **Priorità** | P1 |
| **Effort** | S (1-2 giorni) |
| **Assegnato** | @frontend-dev |
| **Dipendenze** | FE-RPT-002, BE-RPT-003 (API download) |
| **Blocca** | - |
| **Stato** | ⏳ Pending |
| **Note** | Error handling con toast. Cleanup dopo download per evitare memory leak |
### FE-RPT-004: Report Preview
| Campo | Valore |
|-------|--------|
| **ID** | FE-RPT-004 |
| **Titolo** | Report Preview |
| **Descrizione** | Preview CSV in tabella (primi 100 record), info box con summary prima di generare, stima dimensione file e costo stimato. |
| **Priorità** | P2 |
| **Effort** | S (1-2 giorni) |
| **Assegnato** | @frontend-dev |
| **Dipendenze** | FE-RPT-001 |
| **Blocca** | - |
| **Stato** | ⏳ Pending |
| **Note** | UX: aiutare utente a capire cosa sta per esportare prima di generare |
---
## 📊 FRONTEND - Data Visualization (6 Tasks)
### FE-VIZ-001: Recharts Integration
| Campo | Valore |
|-------|--------|
| **ID** | FE-VIZ-001 |
| **Titolo** | Recharts Integration |
| **Descrizione** | Installazione e setup recharts, date-fns. Setup tema coerente con Tailwind/shadcn, color palette, responsive containers. |
| **Priorità** | P1 |
| **Effort** | M (2-4 giorni) |
| **Assegnato** | @frontend-dev |
| **Dipendenze** | FE-002 (Tailwind + shadcn), v0.3.0 completata |
| **Blocca** | FE-VIZ-002, FE-VIZ-003, FE-VIZ-004, FE-VIZ-005, FE-VIZ-006, FE-CMP-004 |
| **Stato** | ⏳ Pending |
| **Note** | npm install recharts date-fns. Tema dark/light support, responsive containers per tutti i grafici |
### FE-VIZ-002: Cost Breakdown Chart
| Campo | Valore |
|-------|--------|
| **ID** | FE-VIZ-002 |
| **Titolo** | Cost Breakdown Chart |
| **Descrizione** | Pie Chart o Donut Chart per costo per servizio (SQS, Lambda, Bedrock). Percentuali visualizzate, legend interattiva, tooltip con valori esatti. |
| **Priorità** | P1 |
| **Effort** | M (2-4 giorni) |
| **Assegnato** | @frontend-dev |
| **Dipendenze** | FE-VIZ-001 |
| **Blocca** | - |
| **Stato** | ⏳ Pending |
| **Note** | Posizione: Dashboard e Scenario Detail. Legend toggle servizi. Performance: lazy load se necessario |
### FE-VIZ-003: Time Series Chart
| Campo | Valore |
|-------|--------|
| **ID** | FE-VIZ-003 |
| **Titolo** | Time Series Chart |
| **Descrizione** | Area Chart o Line Chart per metriche nel tempo (requests, costi cumulativi). X-axis timestamp, Y-axis valore, multi-line per metriche diverse. |
| **Priorità** | P1 |
| **Effort** | M (2-4 giorni) |
| **Assegnato** | @frontend-dev |
| **Dipendenze** | FE-VIZ-001 |
| **Blocca** | - |
| **Stato** | ⏳ Pending |
| **Note** | Zoom e pan se supportato. Posizione: Scenario Detail (tab Metrics). Performance con molti dati |
### FE-VIZ-004: Comparison Bar Chart
| Campo | Valore |
|-------|--------|
| **ID** | FE-VIZ-004 |
| **Titolo** | Comparison Bar Chart |
| **Descrizione** | Grouped Bar Chart per confronto metriche tra scenari. X-axis nome scenario, Y-axis valore metrica, selettore metrica. |
| **Priorità** | P1 |
| **Effort** | M (2-4 giorni) |
| **Assegnato** | @frontend-dev |
| **Dipendenze** | FE-VIZ-001, FE-CMP-002 (Compare page) |
| **Blocca** | - |
| **Stato** | ⏳ Pending |
| **Note** | Metriche: Costo totale, Requests, SQS blocks, Tokens. Posizione: Compare Page |
### FE-VIZ-005: Metrics Distribution Chart
| Campo | Valore |
|-------|--------|
| **ID** | FE-VIZ-005 |
| **Titolo** | Metrics Distribution Chart |
| **Descrizione** | Histogram o Box Plot per distribuzione dimensioni log, tempi risposta. Analisi statistica dati. |
| **Priorità** | P2 |
| **Effort** | M (2-4 giorni) |
| **Assegnato** | @frontend-dev |
| **Dipendenze** | FE-VIZ-001 |
| **Blocca** | - |
| **Stato** | ⏳ Pending |
| **Note** | Posizione: Scenario Detail (tab Analysis). Feature nice-to-have per analisi approfondita |
### FE-VIZ-006: Dashboard Overview Charts
| Campo | Valore |
|-------|--------|
| **ID** | FE-VIZ-006 |
| **Titolo** | Dashboard Overview Charts |
| **Descrizione** | Mini charts nella lista scenari (sparklines), ultimi 7 giorni di attività, quick stats con trend indicator (↑ ↓). |
| **Priorità** | P2 |
| **Effort** | S (1-2 giorni) |
| **Assegnato** | @frontend-dev |
| **Dipendenze** | FE-VIZ-001, FE-006 (Dashboard Page) |
| **Blocca** | - |
| **Stato** | ⏳ Pending |
| **Note** | Migliora UX dashboard con dati visivi immediati. Sparklines: piccoli grafici inline |
---
## 🔍 FRONTEND - Scenario Comparison (4 Tasks)
### FE-CMP-001: Comparison Selection UI
| Campo | Valore |
|-------|--------|
| **ID** | FE-CMP-001 |
| **Titolo** | Comparison Selection UI |
| **Descrizione** | Checkbox multi-selezione nella lista scenari, bottone "Compare Selected" (enabled quando 2-4 selezionati), modal confirmation. |
| **Priorità** | P1 |
| **Effort** | S (1-2 giorni) |
| **Assegnato** | @frontend-dev |
| **Dipendenze** | FE-006 (Dashboard Page) |
| **Blocca** | FE-CMP-002 |
| **Stato** | ⏳ Pending |
| **Note** | Max 4 scenari per confronto. Visualizzazione "Comparison Mode" indicator |
### FE-CMP-002: Compare Page
| Campo | Valore |
|-------|--------|
| **ID** | FE-CMP-002 |
| **Titolo** | Compare Page |
| **Descrizione** | Nuova route `/compare` con layout side-by-side (2 colonne per 2 scenari, 4 per 4). Responsive: mobile scroll orizzontale. |
| **Priorità** | P1 |
| **Effort** | M (2-4 giorni) |
| **Assegnato** | @frontend-dev |
| **Dipendenze** | FE-CMP-001 |
| **Blocca** | FE-CMP-003, FE-CMP-004, FE-VIZ-004 |
| **Stato** | ⏳ Pending |
| **Note** | Header con nome scenario, regione, stato. Summary cards affiancate |
### FE-CMP-003: Comparison Tables
| Campo | Valore |
|-------|--------|
| **ID** | FE-CMP-003 |
| **Titolo** | Comparison Tables |
| **Descrizione** | Tabella dettagliata con metriche affiancate. Color coding: verde (migliore), rosso (peggiore), grigio (neutro). Delta column con trend arrow. |
| **Priorità** | P1 |
| **Effort** | M (2-4 giorni) |
| **Assegnato** | @frontend-dev |
| **Dipendenze** | FE-CMP-002 |
| **Blocca** | - |
| **Stato** | ⏳ Pending |
| **Note** | Export comparison button. Baseline = primo scenario. Ordinamento per costo totale |
### FE-CMP-004: Visual Comparison
| Campo | Valore |
|-------|--------|
| **ID** | FE-CMP-004 |
| **Titolo** | Visual Comparison |
| **Descrizione** | Grouped bar chart per confronto visivo. Highlight scenario selezionato, toggle metriche da confrontare. |
| **Priorità** | P2 |
| **Effort** | S (1-2 giorni) |
| **Assegnato** | @frontend-dev |
| **Dipendenze** | FE-CMP-002, FE-VIZ-001 |
| **Blocca** | - |
| **Stato** | ⏳ Pending |
| **Note** | Integrazione con grafici già esistenti. UX: toggle per mostrare/nascondere metriche |
---
## 🌓 FRONTEND - Dark/Light Mode (4 Tasks)
### FE-THM-001: Theme Provider Setup
| Campo | Valore |
|-------|--------|
| **ID** | FE-THM-001 |
| **Titolo** | Theme Provider Setup |
| **Descrizione** | Theme context o Zustand store per gestione tema. Persistenza in localStorage. Default: system preference (media query). Toggle button in Header. |
| **Priorità** | P2 |
| **Effort** | S (1-2 giorni) |
| **Assegnato** | @frontend-dev |
| **Dipendenze** | FE-002 (Tailwind + shadcn), FE-005 (Layout Components) |
| **Blocca** | FE-THM-002, FE-THM-003, FE-THM-004 |
| **Stato** | ⏳ Pending |
| **Note** | npm install zustand (opzionale). Toggle istantaneo, no flash on load |
### FE-THM-002: Tailwind Dark Mode Configuration
| Campo | Valore |
|-------|--------|
| **ID** | FE-THM-002 |
| **Titolo** | Tailwind Dark Mode Configuration |
| **Descrizione** | Aggiornare `tailwind.config.js` con `darkMode: 'class'`. Wrapper component con `dark` class sul root. Transition smooth tra temi. |
| **Priorità** | P2 |
| **Effort** | S (1-2 giorni) |
| **Assegnato** | @frontend-dev |
| **Dipendenze** | FE-THM-001 |
| **Blocca** | FE-THM-003 |
| **Stato** | ⏳ Pending |
| **Note** | CSS transition per cambio tema smooth. No jarring flash |
### FE-THM-003: Component Theme Support
| Campo | Valore |
|-------|--------|
| **ID** | FE-THM-003 |
| **Titolo** | Component Theme Support |
| **Descrizione** | Verificare tutti i componenti shadcn/ui supportino dark mode. Aggiornare classi custom per dark variant: bg, text, borders, shadows. |
| **Priorità** | P2 |
| **Effort** | M (2-4 giorni) |
| **Assegnato** | @frontend-dev |
| **Dipendenze** | FE-THM-002 |
| **Blocca** | FE-THM-004 |
| **Stato** | ⏳ Pending |
| **Note** | bg-white → bg-white dark:bg-gray-900, text-gray-900 → text-gray-900 dark:text-white. Hover states |
### FE-THM-004: Chart Theming
| Campo | Valore |
|-------|--------|
| **ID** | FE-THM-004 |
| **Titolo** | Chart Theming |
| **Descrizione** | Recharts tema dark (colori assi, grid, tooltip). Colori serie dati visibili su entrambi i temi. Background chart trasparente o temizzato. |
| **Priorità** | P2 |
| **Effort** | S (1-2 giorni) |
| **Assegnato** | @frontend-dev |
| **Dipendenze** | FE-VIZ-001 (Recharts integration), FE-THM-003 |
| **Blocca** | - |
| **Stato** | ⏳ Pending |
| **Note** | Testare contrasto in dark mode. Colori serie devono essere visibili in entrambi i temi |
---
## 🧪 QA - E2E Testing (4 Tasks)
### QA-E2E-001: Playwright Setup
| Campo | Valore |
|-------|--------|
| **ID** | QA-E2E-001 |
| **Titolo** | Playwright Setup |
| **Descrizione** | Installazione @playwright/test, configurazione playwright.config.ts. Scripts: test:e2e, test:e2e:ui, test:e2e:debug. Setup CI. |
| **Priorità** | P3 |
| **Effort** | M (2-4 giorni) |
| **Assegnato** | @qa-engineer |
| **Dipendenze** | Frontend stable, v0.4.0 feature complete |
| **Blocca** | QA-E2E-002, QA-E2E-003, QA-E2E-004 |
| **Stato** | ⏳ Pending |
| **Note** | npm install @playwright/test. GitHub Actions oppure CI locale. Configurazione browser, viewport, baseURL |
### QA-E2E-002: Test Scenarios
| Campo | Valore |
|-------|--------|
| **ID** | QA-E2E-002 |
| **Titolo** | Test Scenarios |
| **Descrizione** | Test: creazione scenario completo, ingestione log e verifica metriche, generazione e download report, navigazione tra pagine, responsive design. |
| **Priorità** | P3 |
| **Effort** | L (4-6 giorni) |
| **Assegnato** | @qa-engineer |
| **Dipendenze** | QA-E2E-001 |
| **Blocca** | - |
| **Stato** | ⏳ Pending |
| **Note** | Copertura: user flows principali. Mobile viewport testing. Assert su metriche e costi |
### QA-E2E-003: Test Data
| Campo | Valore |
|-------|--------|
| **ID** | QA-E2E-003 |
| **Titolo** | Test Data |
| **Descrizione** | Fixtures per scenari di test, seed database per test, cleanup dopo ogni test. Parallel execution config. |
| **Priorità** | P3 |
| **Effort** | M (2-4 giorni) |
| **Assegnato** | @qa-engineer |
| **Dipendenze** | QA-E2E-001 |
| **Blocca** | - |
| **Stato** | ⏳ Pending |
| **Note** | Isolamento test: ogni test con dati puliti. Cleanup automatico per evitare interferenze |
### QA-E2E-004: Visual Regression
| Campo | Valore |
|-------|--------|
| **ID** | QA-E2E-004 |
| **Titolo** | Visual Regression |
| **Descrizione** | Screenshot testing per UI critica. Baseline images in repo. Fallimento test se diff > threshold. |
| **Priorità** | P3 |
| **Effort** | M (2-4 giorni) |
| **Assegnato** | @qa-engineer |
| **Dipendenze** | QA-E2E-001 |
| **Blocca** | - |
| **Stato** | ⏳ Pending |
| **Note** | Componenti critici: Dashboard, Scenario Detail, Report Generation, Compare Page |
---
## 📅 Timeline Dettagliata
### Week 1: Foundation & Reports (Giorni 1-5)
| Giorno | Task | Focus | Output |
|--------|------|-------|--------|
| **Day 1** | BE-RPT-001 (inizio) | Report Service Implementation | Setup librerie, PDF base |
| **Day 2** | BE-RPT-001 (fine), BE-RPT-002 (inizio) | PDF/CSV generation, API design | Service completo, API struttura |
| **Day 3** | BE-RPT-002 (fine), BE-RPT-003, FE-RPT-001 (inizio) | API generation, Download, UI | Backend reports completo |
| **Day 4** | FE-RPT-001 (fine), FE-RPT-002 (inizio), BE-RPT-004, BE-RPT-005 | Report UI, Storage, Templates | Frontend reports funzionante |
| **Day 5** | FE-RPT-002 (fine), FE-RPT-003, FE-RPT-004 | Reports List, Download, Preview | Feature Reports completa 🎯 |
**Week 1 Milestone:** Reports feature funzionante end-to-end
---
### Week 2: Charts & Comparison (Giorni 6-10)
| Giorno | Task | Focus | Output |
|--------|------|-------|--------|
| **Day 6** | FE-VIZ-001 | Recharts Integration | Setup completo, tema ready |
| **Day 7** | FE-VIZ-002, FE-VIZ-003 | Cost Breakdown, Time Series | 2 grafici dashboard |
| **Day 8** | FE-VIZ-004, BE-CMP-001 (nota 1) | Comparison Chart, Comparison API | Confronto backend |
| **Day 9** | FE-CMP-001, FE-CMP-002, FE-CMP-003 | Selection UI, Compare Page | Pagina confronto |
| **Day 10** | FE-VIZ-005, FE-VIZ-006, FE-CMP-004 | Additional Charts, Visual Comparison | Charts completo 🎯 |
**Nota 1:** I task BE-CMP-001, 002, 003 sono menzionati nel planning come backend comparison API, ma il documento non li dettaglia completamente. Assunti come P2.
**Week 2 Milestone:** Charts e Comparison funzionanti
---
### Week 3: Polish & Testing (Giorni 11-15)
| Giorno | Task | Focus | Output |
|--------|------|-------|--------|
| **Day 11** | FE-THM-001, FE-THM-002 | Theme Provider, Tailwind Config | Dark mode base |
| **Day 12** | FE-THM-003, FE-THM-004 | Component Themes, Chart Theming | Dark mode completo |
| **Day 13** | QA-E2E-001, QA-E2E-002 (inizio) | Playwright Setup, Test Scenarios | E2E base |
| **Day 14** | QA-E2E-002 (fine), QA-E2E-003, QA-E2E-004 | Test Data, Visual Regression | Tests completi |
| **Day 15** | Bug fixing, Performance, Docs | Polish, CHANGELOG, Demo | Release v0.4.0 🚀 |
**Week 3 Milestone:** v0.4.0 Release Ready
---
## 🔗 Dependency Graph
### Critical Path
```
[BE-RPT-001] → [BE-RPT-002] → [BE-RPT-003]
↓ ↓ ↓
[FE-RPT-001] → [FE-RPT-002] → [FE-RPT-003]
[FE-VIZ-001] → [FE-VIZ-002, FE-VIZ-003, FE-VIZ-004]
[FE-CMP-001] → [FE-CMP-002] → [FE-CMP-003]
[FE-THM-001] → [FE-THM-002] → [FE-THM-003] → [FE-THM-004]
[QA-E2E-001] → [QA-E2E-002, QA-E2E-003, QA-E2E-004]
```
### Task Senza Dipendenze (Possono Iniziare Subito)
- BE-RPT-001
- FE-VIZ-001 (se shadcn già pronto)
- FE-CMP-001 (selezioni UI può iniziare)
- FE-THM-001 (theme provider)
### Task Bloccanti Molteplici
| Task | Blocca |
|------|--------|
| BE-RPT-001 | BE-RPT-002, BE-RPT-003, FE-RPT-001 |
| BE-RPT-002 | BE-RPT-003, FE-RPT-001, FE-RPT-002 |
| FE-VIZ-001 | FE-VIZ-002, FE-VIZ-003, FE-VIZ-004, FE-VIZ-005, FE-VIZ-006, FE-CMP-004 |
| FE-CMP-002 | FE-CMP-003, FE-CMP-004, FE-VIZ-004 |
| QA-E2E-001 | QA-E2E-002, QA-E2E-003, QA-E2E-004 |
---
## 👥 Team Assignments
### @backend-dev
| Task | Effort | Settimana |
|------|--------|-----------|
| BE-RPT-001 | L | Week 1 |
| BE-RPT-002 | M | Week 1 |
| BE-RPT-003 | S | Week 1 |
| BE-RPT-004 | S | Week 1 |
| BE-RPT-005 | M | Week 1 |
**Totale:** 5 task, ~L effort, Week 1 focus
### @frontend-dev
| Task | Effort | Settimana |
|------|--------|-----------|
| FE-RPT-001 | M | Week 1 |
| FE-RPT-002 | M | Week 1 |
| FE-RPT-003 | S | Week 1 |
| FE-RPT-004 | S | Week 1 |
| FE-VIZ-001 | M | Week 2 |
| FE-VIZ-002 | M | Week 2 |
| FE-VIZ-003 | M | Week 2 |
| FE-VIZ-004 | M | Week 2 |
| FE-VIZ-005 | M | Week 2 |
| FE-VIZ-006 | S | Week 2 |
| FE-CMP-001 | S | Week 2 |
| FE-CMP-002 | M | Week 2 |
| FE-CMP-003 | M | Week 2 |
| FE-CMP-004 | S | Week 2 |
| FE-THM-001 | S | Week 3 |
| FE-THM-002 | S | Week 3 |
| FE-THM-003 | M | Week 3 |
| FE-THM-004 | S | Week 3 |
**Totale:** 18 task, distribuite su 3 settimane
### @qa-engineer
| Task | Effort | Settimana |
|------|--------|-----------|
| QA-E2E-001 | M | Week 3 |
| QA-E2E-002 | L | Week 3 |
| QA-E2E-003 | M | Week 3 |
| QA-E2E-004 | M | Week 3 |
**Totale:** 4 task, Week 3 focus
---
## 🎯 Acceptance Criteria Checklist
### Report Generation
- [ ] PDF generato correttamente con tutte le sezioni
- [ ] CSV contiene tutti i log e metriche
- [ ] Download funziona su Chrome, Firefox, Safari
- [ ] File size < 50MB per scenari grandi
- [ ] Cleanup automatico dopo 30 giorni
### Charts
- [ ] Tutti i grafici responsive
- [ ] Tooltip mostra dati corretti
- [ ] Animazioni smooth
- [ ] Funzionano in dark/light mode
- [ ] Performance: <100ms render
### Comparison
- [ ] Confronto 2-4 scenari simultaneamente
- [ ] Variazioni percentuali calcolate correttamente
- [ ] UI responsive su mobile
- [ ] Export comparison disponibile
- [ ] Color coding intuitivo
### Dark Mode
- [ ] Toggle funziona istantaneamente
- [ ] Persistenza dopo refresh
- [ ] Tutti i componenti visibili
- [ ] Charts adeguatamente temizzati
- [ ] Nessun contrasto illeggibile
### Testing
- [ ] E2E tests passano in CI
- [ ] Coverage >70% backend
- [ ] Visual regression baseline stabilita
- [ ] Zero regressioni v0.3.0
- [ ] Documentazione testing aggiornata
---
## 🚨 Risks & Mitigations
| Rischio | Probabilità | Impatto | Mitigazione | Task Coinvolti |
|---------|-------------|---------|-------------|----------------|
| ReportLab complesso | Media | Alto | Usare WeasyPrint (HTML→PDF) | BE-RPT-001, BE-RPT-005 |
| Performance charts | Media | Medio | Virtualization, data sampling | FE-VIZ-002/003/004 |
| Dark mode inconsistente | Bassa | Medio | Audit visivo, design tokens | FE-THM-003 |
| E2E tests flaky | Media | Medio | Retry logic, deterministic selectors | QA-E2E-001/002 |
| Scope creep | Alta | Medio | Strict deadline, MVP first | Tutti |
---
## 📝 Notes
### Libraries da Installare
```bash
# Backend
pip install reportlab pandas xlsxwriter
pip install celery redis # opzionale per background tasks
# Frontend
npm install recharts date-fns
npm install @playwright/test
npm install zustand # opzionale per theme
```
### Pattern da Seguire
- **Report Generation**: Async task con status polling
- **Charts**: Container/Presentational pattern
- **Comparison**: Derive state, non duplicare dati
- **Theme**: CSS variables + Tailwind dark mode
### Performance Considerations
- Lazy load chart components
- Debounce resize handlers
- Virtualize long lists (reports)
- Cache comparison results
- Optimize re-renders (React.memo)
---
**Versione Kanban:** v0.4.0
**Data Creazione:** 2026-04-07
**Ultimo Aggiornamento:** 2026-04-07
**Autore:** @spec-architect

View File

@@ -9,10 +9,10 @@
## 🎯 Sprint/Feature Corrente
**Feature:** v0.3.0 Frontend Implementation - COMPLETED ✅
**Feature:** v0.4.0 - Reports, Charts & Comparison
**Iniziata:** 2026-04-07
**Stato:** 🟢 COMPLETATA
**Assegnato:** @frontend-dev, @backend-dev (supporto API)
**Stato:** ⏳ Pianificata - Pronta per inizio
**Assegnato:** @frontend-dev (lead), @backend-dev, @qa-engineer
---
@@ -29,9 +29,16 @@
| Frontend - Components | 8 | 8 | 100% | 🟢 Completato |
| Frontend - Pages | 4 | 4 | 100% | 🟢 Completato |
| Frontend - API Integration | 3 | 3 | 100% | 🟢 Completato |
| Testing | 3 | 2 | 67% | 🟡 In corso |
| DevOps | 4 | 3 | 75% | 🟡 In corso |
| **Completamento Totale** | **55** | **53** | **96%** | 🟢 **v0.3.0 Completata** |
| v0.3.0 Testing | 3 | 2 | 67% | 🟡 In corso |
| v0.3.0 DevOps | 4 | 3 | 75% | 🟡 In corso |
| **v0.3.0 Completamento** | **55** | **53** | **96%** | 🟢 **Completata** |
| **v0.4.0 - Backend Reports** | **5** | **0** | **0%** | ⏳ **Pending** |
| **v0.4.0 - Frontend Reports** | **4** | **0** | **0%** | ⏳ **Pending** |
| **v0.4.0 - Visualization** | **6** | **0** | **0%** | ⏳ **Pending** |
| **v0.4.0 - Comparison** | **4** | **0** | **0%** | ⏳ **Pending** |
| **v0.4.0 - Theme** | **4** | **0** | **0%** | ⏳ **Pending** |
| **v0.4.0 - QA E2E** | **4** | **0** | **0%** | ⏳ **Pending** |
| **v0.4.0 Totale** | **27** | **0** | **0%** | ⏳ **Pianificata** |
---
@@ -92,18 +99,109 @@
---
## 📅 Prossime Task (v0.4.0 - Priorità P1)
## 📅 v0.4.0 - Task Breakdown
| Priority | ID | Task | Stima | Assegnato | Dipendenze |
|----------|----|------|-------|-----------|------------|
| P1 | FE-013 | Report Generation UI | L | @frontend-dev | BE-API |
| P1 | FE-014 | Scenario Comparison | L | @frontend-dev | FE-006 |
| P1 | FE-015 | Charts & Graphs (Recharts) | M | @frontend-dev | FE-006 |
| P1 | FE-016 | Dark/Light Mode Toggle | S | @frontend-dev | FE-002 |
| P2 | BE-009 | Report Generation API | L | @backend-dev | DB-006 |
| P2 | BE-010 | Scenario Comparison API | M | @backend-dev | BE-008 |
| P3 | QA-001 | E2E Testing Setup | M | @qa-engineer | Frontend stable |
| P3 | QA-002 | Integration Tests | L | @qa-engineer | API stable |
### 📝 BACKEND - Report Generation
| Priority | ID | Task | Stima | Assegnato | Stato | Dipendenze |
|----------|----|------|-------|-----------|-------|------------|
| P1 | BE-RPT-001 | Report Service Implementation | L | @backend-dev | ⏳ Pending | v0.3.0 |
| P1 | BE-RPT-002 | Report Generation API | M | @backend-dev | ⏳ Pending | BE-RPT-001 |
| P1 | BE-RPT-003 | Report Download API | S | @backend-dev | ⏳ Pending | BE-RPT-002 |
| P2 | BE-RPT-004 | Report Storage | S | @backend-dev | ⏳ Pending | BE-RPT-001 |
| P2 | BE-RPT-005 | Report Templates | M | @backend-dev | ⏳ Pending | BE-RPT-001 |
**Progresso Backend Reports:** 0/5 (0%)
### 🎨 FRONTEND - Report UI
| Priority | ID | Task | Stima | Assegnato | Stato | Dipendenze |
|----------|----|------|-------|-----------|-------|------------|
| P1 | FE-RPT-001 | Report Generation UI | M | @frontend-dev | ⏳ Pending | BE-RPT-002 |
| P1 | FE-RPT-002 | Reports List | M | @frontend-dev | ⏳ Pending | FE-RPT-001 |
| P1 | FE-RPT-003 | Report Download Handler | S | @frontend-dev | ⏳ Pending | FE-RPT-002 |
| P2 | FE-RPT-004 | Report Preview | S | @frontend-dev | ⏳ Pending | FE-RPT-001 |
**Progresso Frontend Reports:** 0/4 (0%)
### 📊 FRONTEND - Data Visualization
| Priority | ID | Task | Stima | Assegnato | Stato | Dipendenze |
|----------|----|------|-------|-----------|-------|------------|
| P1 | FE-VIZ-001 | Recharts Integration | M | @frontend-dev | ⏳ Pending | FE-002 |
| P1 | FE-VIZ-002 | Cost Breakdown Chart | M | @frontend-dev | ⏳ Pending | FE-VIZ-001 |
| P1 | FE-VIZ-003 | Time Series Chart | M | @frontend-dev | ⏳ Pending | FE-VIZ-001 |
| P1 | FE-VIZ-004 | Comparison Bar Chart | M | @frontend-dev | ⏳ Pending | FE-VIZ-001, FE-CMP-002 |
| P2 | FE-VIZ-005 | Metrics Distribution Chart | M | @frontend-dev | ⏳ Pending | FE-VIZ-001 |
| P2 | FE-VIZ-006 | Dashboard Overview Charts | S | @frontend-dev | ⏳ Pending | FE-VIZ-001, FE-006 |
**Progresso Visualization:** 0/6 (0%)
### 🔍 FRONTEND - Scenario Comparison
| Priority | ID | Task | Stima | Assegnato | Stato | Dipendenze |
|----------|----|------|-------|-----------|-------|------------|
| P1 | FE-CMP-001 | Comparison Selection UI | S | @frontend-dev | ⏳ Pending | FE-006 |
| P1 | FE-CMP-002 | Compare Page | M | @frontend-dev | ⏳ Pending | FE-CMP-001 |
| P1 | FE-CMP-003 | Comparison Tables | M | @frontend-dev | ⏳ Pending | FE-CMP-002 |
| P2 | FE-CMP-004 | Visual Comparison | S | @frontend-dev | ⏳ Pending | FE-CMP-002, FE-VIZ-001 |
**Progresso Comparison:** 0/4 (0%)
### 🌓 FRONTEND - Dark/Light Mode
| Priority | ID | Task | Stima | Assegnato | Stato | Dipendenze |
|----------|----|------|-------|-----------|-------|------------|
| P2 | FE-THM-001 | Theme Provider Setup | S | @frontend-dev | ⏳ Pending | FE-002, FE-005 |
| P2 | FE-THM-002 | Tailwind Dark Mode Config | S | @frontend-dev | ⏳ Pending | FE-THM-001 |
| P2 | FE-THM-003 | Component Theme Support | M | @frontend-dev | ⏳ Pending | FE-THM-002 |
| P2 | FE-THM-004 | Chart Theming | S | @frontend-dev | ⏳ Pending | FE-VIZ-001, FE-THM-003 |
**Progresso Theme:** 0/4 (0%)
### 🧪 QA - E2E Testing
| Priority | ID | Task | Stima | Assegnato | Stato | Dipendenze |
|----------|----|------|-------|-----------|-------|------------|
| P3 | QA-E2E-001 | Playwright Setup | M | @qa-engineer | ⏳ Pending | Frontend stable |
| P3 | QA-E2E-002 | Test Scenarios | L | @qa-engineer | ⏳ Pending | QA-E2E-001 |
| P3 | QA-E2E-003 | Test Data | M | @qa-engineer | ⏳ Pending | QA-E2E-001 |
| P3 | QA-E2E-004 | Visual Regression | M | @qa-engineer | ⏳ Pending | QA-E2E-001 |
**Progresso QA:** 0/4 (0%)
---
## 📈 Riepilogo v0.4.0
| Categoria | Task Totali | Priorità P1 | Priorità P2 | Priorità P3 |
|-----------|-------------|-------------|-------------|-------------|
| Backend Reports | 5 | 3 | 2 | 0 |
| Frontend Reports | 4 | 3 | 1 | 0 |
| Data Visualization | 6 | 4 | 2 | 0 |
| Scenario Comparison | 4 | 3 | 1 | 0 |
| Dark/Light Mode | 4 | 0 | 4 | 0 |
| QA E2E Testing | 4 | 0 | 0 | 4 |
| **TOTALE** | **27** | **13** | **10** | **4** |
---
## 🎯 Obiettivi v0.4.0 (In Progress)
**Goal:** Report Generation, Scenario Comparison, Data Visualization, Dark Mode, E2E Testing
### Target
- [ ] Generazione report PDF/CSV
- [ ] Confronto scenari side-by-side
- [ ] Grafici interattivi (Recharts)
- [ ] Dark/Light mode toggle
- [ ] Testing E2E completo
### Metriche Target
- Test coverage: 70%
- Feature complete: v0.4.0 (27 task)
- Performance: <3s report generation
- Timeline: 2-3 settimane
---
@@ -119,11 +217,9 @@
| Data | Decisione | Motivazione | Impatto |
|------|-----------|-------------|---------|
| 2026-04-07 | Repository Pattern | Separazione business logic | Testabilità ✅ |
| 2026-04-07 | Async SQLAlchemy 2.0 | Performance | Scalabilità ✅ |
| 2026-04-07 | React Query | Data fetching moderno | UX migliorata ✅ |
| 2026-04-07 | shadcn/ui | Componenti accessibili | Consistenza UI ✅ |
| 2026-04-07 | Axios vs Fetch | Interceptors & error handling | Codice pulito ✅ |
| 2026-04-07 | v0.4.0 Kanban Created | Dettagliata pianificazione 27 task | Tracciamento ✅ |
| 2026-04-07 | Priorità P1 = 13 task | Feature critiche identificate | Focus Week 1-2 |
| 2026-04-07 | Timeline 2-3 settimane | Stima realistica con buffer | Deadline flessibile |
---
@@ -135,14 +231,29 @@
- **Task in progress:** 0
- **Task bloccate:** 0
### Qualità
### Versione v0.4.0 (Pianificata)
- **Task pianificate:** 27
- **Task completate:** 0
- **Task in progress:** 0
- **Task bloccate:** 0
- **Priorità P1:** 13 (48%)
- **Priorità P2:** 10 (37%)
- **Priorità P3:** 4 (15%)
### Qualità v0.3.0
- **Test Coverage:** ~45% (5/5 test v0.1 + nuovi tests)
- **Test passanti:** ✅ Tutti
- **Linting:** ✅ Ruff configurato
- **Type Check:** ✅ TypeScript strict mode
- **Build:** ✅ Frontend builda senza errori
### Codice
### Qualità Target v0.4.0
- **Test Coverage:** 70%
- **E2E Tests:** 4 suite complete
- **Visual Regression:** Baseline stabilita
- **Zero Regressioni:** v0.3.0 features
### Codice v0.3.0
- **Linee codice backend:** ~2500
- **Linee codice frontend:** ~3500
- **Linee test:** ~500
@@ -151,73 +262,54 @@
---
## 🎯 Obiettivi v0.4.0 (Prossima Release)
**Goal:** Report Generation, Scenario Comparison, e Grafici
### Target
- [ ] Generazione report PDF/CSV
- [ ] Confronto scenari side-by-side
- [ ] Grafici interattivi (Recharts)
- [ ] Dark/Light mode toggle
- [ ] Testing E2E completo
### Metriche Target
- Test coverage: 70%
- Feature complete: v0.4.0
- Performance: <2s page load
---
## 📋 Risorse
### Documentazione
- PRD: `/home/google/Sources/LucaSacchiNet/mockupAWS/export/prd.md`
- Architettura: `/home/google/Sources/LucaSacchiNet/mockupAWS/export/architecture.md`
- Kanban: `/home/google/Sources/LucaSacchiNet/mockupAWS/export/kanban.md`
- Questo file: `/home/google/Sources/LucaSacchiNet/mockupAWS/export/progress.md`
- **PRD:** `/home/google/Sources/LucaSacchiNet/mockupAWS/export/prd.md`
- **Architettura:** `/home/google/Sources/LucaSacchiNet/mockupAWS/export/architecture.md`
- **Kanban v0.4.0:** `/home/google/Sources/LucaSacchiNet/mockupAWS/export/kanban-v0.4.0.md`**NUOVO**
- **Progress:** `/home/google/Sources/LucaSacchiNet/mockupAWS/export/progress.md`
- **Planning v0.4.0:** `/home/google/Sources/LucaSacchiNet/mockupAWS/prompt/prompt-v0.4.0-planning.md`
### Codice
- Backend: `/home/google/Sources/LucaSacchiNet/mockupAWS/src/`
- Frontend: `/home/google/Sources/LucaSacchiNet/mockupAWS/frontend/src/`
- Test: `/home/google/Sources/LucaSacchiNet/mockupAWS/test/`
- Migrazioni: `/home/google/Sources/LucaSacchiNet/mockupAWS/alembic/versions/`
- **Backend:** `/home/google/Sources/LucaSacchiNet/mockupAWS/src/`
- **Frontend:** `/home/google/Sources/LucaSacchiNet/mockupAWS/frontend/src/`
- **Test:** `/home/google/Sources/LucaSacchiNet/mockupAWS/test/`
- **Migrazioni:** `/home/google/Sources/LucaSacchiNet/mockupAWS/alembic/versions/`
### Team
- Configurazioni: `/home/google/Sources/LucaSacchiNet/mockupAWS/.opencode/agents/`
- **Configurazioni:** `/home/google/Sources/LucaSacchiNet/mockupAWS/.opencode/agents/`
---
## 📝 Log Attività
### 2026-04-07 - v0.3.0 Completata
### 2026-04-07 - v0.4.0 Kanban Created
**Attività Completate:**
-Database PostgreSQL completo (5 tabelle, 6 migrazioni)
-Backend FastAPI completo (models, schemas, repositories, services, API)
-Frontend React completo (Vite, TypeScript, Tailwind, shadcn/ui)
-Integrazione API frontend-backend
-Docker Compose per database
- ✅ Team configuration (6 agenti)
- ✅ Documentazione aggiornata (README, architecture, kanban)
-Creazione kanban-v0.4.0.md con 27 task dettagliati
-Aggiornamento progress.md con sezione v0.4.0
-Definizione timeline 2-3 settimane
-Assegnazione task a team members
-Identificazione critical path
**Team:**
- @spec-architect: ✅ Architettura completata
- @db-engineer: ✅ Database completato
- @backend-dev: ✅ Backend completato
- @frontend-dev: ✅ Frontend completato
**Team v0.4.0:**
- @spec-architect: ✅ Kanban completato
- @backend-dev: ⏳ 5 task pending (Week 1 focus)
- @frontend-dev: ⏳ 18 task pending (3 settimane)
- @qa-engineer: ⏳ 4 task pending (Week 3 focus)
- @devops-engineer: 🟡 Docker verifica in corso
- @qa-engineer: ⏳ In attesa v0.4.0
**Stato Progetto:**
- v0.2.0: ✅ COMPLETATA
- v0.3.0: ✅ COMPLETATA
- v0.4.0: 🟡 Pianificazione
- v0.4.0: Pianificazione completata - Pronta per inizio
**Prossimi passi:**
1. Completare verifica docker-compose.yml
2. Iniziare pianificazione v0.4.0
3. Report generation feature
1. Completare verifica docker-compose.yml (DEV-004)
2. Inizio Week 1: BE-RPT-001 (Report Service)
3. Parallel: FE-VIZ-001 (Recharts Integration) può iniziare
4. Daily standup per tracciamento progresso
---