feat: implement v0.4.0 - Reports, Charts, Comparison, Dark Mode, E2E Testing

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
2026-04-07 16:11:47 +02:00
parent 311a576f40
commit a5fc85897b
63 changed files with 9218 additions and 246 deletions
--- a/export/kanban-v0.4.0.md
+++ b/export/kanban-v0.4.0.md
@@ -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