lucasacchi/mockupAWS

Fork 0

Files

Luca Sacchi Ricciardi a5fc85897b

E2E Tests / Run E2E Tests (push) Has been cancelled

Details

E2E Tests / Visual Regression Tests (push) Has been cancelled

Details

E2E Tests / Smoke Tests (push) Has been cancelled

Details

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

24 KiB

Raw Blame History

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

# 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

24 KiB Raw Blame History

Kanban v0.4.0 - Reports, Charts & Comparison

📊 Panoramica

🏷️ Legenda

Priorità

Effort

Stato

🗂️ BACKEND - Report Generation (5 Tasks)

BE-RPT-001: Report Service Implementation

BE-RPT-002: Report Generation API

BE-RPT-003: Report Download API

BE-RPT-004: Report Storage

BE-RPT-005: Report Templates

🎨 FRONTEND - Report UI (4 Tasks)

FE-RPT-001: Report Generation UI

FE-RPT-002: Reports List

FE-RPT-003: Report Download Handler

FE-RPT-004: Report Preview

📊 FRONTEND - Data Visualization (6 Tasks)

FE-VIZ-001: Recharts Integration

FE-VIZ-002: Cost Breakdown Chart

FE-VIZ-003: Time Series Chart

FE-VIZ-004: Comparison Bar Chart

FE-VIZ-005: Metrics Distribution Chart

FE-VIZ-006: Dashboard Overview Charts

🔍 FRONTEND - Scenario Comparison (4 Tasks)

FE-CMP-001: Comparison Selection UI

FE-CMP-002: Compare Page

FE-CMP-003: Comparison Tables

FE-CMP-004: Visual Comparison

🌓 FRONTEND - Dark/Light Mode (4 Tasks)

FE-THM-001: Theme Provider Setup

FE-THM-002: Tailwind Dark Mode Configuration

FE-THM-003: Component Theme Support

FE-THM-004: Chart Theming

🧪 QA - E2E Testing (4 Tasks)

QA-E2E-001: Playwright Setup

QA-E2E-002: Test Scenarios

QA-E2E-003: Test Data

QA-E2E-004: Visual Regression

📅 Timeline Dettagliata

Week 1: Foundation & Reports (Giorni 1-5)

Week 2: Charts & Comparison (Giorni 6-10)

Week 3: Polish & Testing (Giorni 11-15)

🔗 Dependency Graph

Critical Path

Task Senza Dipendenze (Possono Iniziare Subito)

Task Bloccanti Molteplici

👥 Team Assignments

@backend-dev

@frontend-dev

@qa-engineer

🎯 Acceptance Criteria Checklist

Report Generation

Charts

Comparison

Dark Mode

Testing

🚨 Risks & Mitigations

📝 Notes

Libraries da Installare

Pattern da Seguire

Performance Considerations

24 KiB

Raw Blame History