# Changelog - Frontend Angular

Tracciamento modifiche specifiche del frontend Angular.

---

## ✅ Completato

### Setup Iniziale
- [x] Inizializzazione progetto Angular 20
- [x] Configurazione Vite come bundler
- [x] Configurazione Tailwind CSS
- [x] Setup TypeScript 5.8
- [x] Configurazione RxJS 7.8

### Architettura & Struttura

#### Servizi
- [x] **ApiService** (`services/api.service.ts`)
  - Comunicazione HTTP con backend
  - Base URL configurabile
  - Metodi per tutte le entità (users, groups, bets, friends)
  - Gestione errori HTTP

- [x] **DataService** (`services/data.service.ts`)
  - State management con RxJS signals
  - Cache dati utente corrente
  - Cache amici, gruppi, scommesse
  - Metodi per refresh dati
  - Observable streams per reactive updates

#### Modelli TypeScript
- [x] **Bet Model** (`models/bet.model.ts`)
  - Interface Bet completa
  - Enum BetStatus (ACTIVE, AWAITING_VALIDATION, COMPLETED)
  - Enum ParticipantRole (PARTICIPANT, OBSERVER)
  - Type BetParticipant

- [x] **User Model** (inline nei servizi per ora)
- [x] **Group Model** (inline nei servizi per ora)

### Componenti Implementati

#### App Component
- [x] **AppComponent** (`app.component.ts`)
  - Layout principale con navigation bar
  - Gestione routing tra viste con signal
  - Bottom navigation responsive
  - 5 sezioni: Home, Scopri, Crea Scommessa, Gruppi, Profilo
  - FAB centrale per creazione scommessa

#### Home Section
- [x] **HomeComponent** (`components/home/home.component.ts`)
  - Dashboard principale
  - Visualizzazione scommesse attive/passate
  - Toggle tra filtri temporali e per gruppo
  - Integrazione con sotto-componenti

- [x] **BetsByTimeComponent** (`components/home/bets-by-time/bets-by-time.component.ts`)
  - Filtro scommesse per periodo temporale
  - Periodi: Oggi, Questa Settimana, Questo Mese
  - Indicatore visuale periodo selezionato
  - Fetch dati da API con filtri

- [x] **BetsByGroupComponent** (`components/home/bets-by-group/bets-by-group.component.ts`)
  - Filtro scommesse per gruppo
  - Selezione gruppo da dropdown
  - Opzione "Tutti i Gruppi"
  - Fetch dati da API per gruppo specifico

#### Discover Section
- [x] **DiscoverComponent** (`components/discover/discover.component.ts`)
  - Esplorazione scommesse pubbliche
  - Lista scommesse scopribili
  - Possibilità di entrare come observer

#### Create Bet Section
- [x] **CreateBetComponent** (`components/create-bet/create-bet.component.ts`)
  - Form creazione nuova scommessa
  - Campi: titolo, descrizione, posta in gioco, data fine, gruppo, visibilità
  - Validazione form
  - Event emitter per chiusura
  - Integrazione con API

#### Groups Section
- [x] **GroupsComponent** (`components/groups/groups.component.ts`)
  - Lista tutti i gruppi dell'utente
  - Navigazione verso dettaglio gruppo
  - Creazione nuovo gruppo
  - Badge contatore membri

- [x] **GroupDetailComponent** (`components/groups/group-detail/group-detail.component.ts`)
  - Dettaglio singolo gruppo
  - Lista membri con avatar
  - Aggiunta membri al gruppo
  - Rimozione membri (se admin)
  - Eliminazione gruppo

#### Profile Section
- [x] **ProfileComponent** (`components/profile/profile.component.ts`)
  - Visualizzazione profilo utente
  - Avatar, nome, email, punteggio
  - Statistiche personali
  - Lista richieste di amicizia pending
  - Bottone modifica profilo

- [x] **EditProfileComponent** (`components/profile/edit-profile/edit-profile.component.ts`)
  - Form modifica dati profilo
  - Campi: nome, email, avatar URL
  - Validazione input
  - Save/Cancel actions

#### Shared Components
- [x] **BetCardComponent** (`components/bet-card/bet-card.component.ts`)
  - Card riutilizzabile per visualizzare scommesse
  - Badge stato scommessa (Attiva, In Attesa, Completata)
  - Informazioni partecipanti con avatar
  - Posta in gioco
  - Date inizio/fine
  - Responsive design

### UI/UX

#### Design System
- [x] Tema dark con palette:
  - Background: slate-900
  - Cards: slate-800
  - Accenti: cyan-400/cyan-500
  - Testo: white/slate-300
- [x] Tailwind CSS utilities
- [x] Responsive layout mobile-first
- [x] Icone SVG per navigation

#### Navigation
- [x] Bottom navigation bar sticky
- [x] 5 tab con icone e label
- [x] Indicatore visuale tab attiva (color cyan)
- [x] FAB centrale per azione primaria (Crea Scommessa)
- [x] Hover states e transitions

#### Interazioni
- [x] Click handlers per navigazione
- [x] Form submissions
- [x] Toggle filters
- [x] Dropdown selects
- [x] Event emitters tra parent/child components

### Configurazione

- [x] **package.json** - Dipendenze e scripts
- [x] **angular.json** - Configurazione Angular CLI
- [x] **tsconfig.json** - TypeScript configuration
- [x] **tailwind.config.js** (implicito con Tailwind)
- [x] **vite.config** (gestito da Angular)

---

## 📋 Da Fare

### Funzionalità Core Mancanti

#### Scommesse
- [ ] Visualizzazione dettaglio scommessa completo
  - Modal o pagina dedicata
  - Cronologia eventi
  - Commenti (se implementati)
- [ ] Modifica scommessa esistente
- [ ] Eliminazione scommessa con conferma
- [ ] Dichiarazione vincitore
- [ ] Sistema di votazione vincitore
- [ ] Join scommessa pubblica come observer
- [ ] Leave scommessa
- [ ] Invita amici a scommessa

#### Profilo & Amici
- [ ] Ricerca utenti
- [ ] Invio richiesta di amicizia (UI)
- [ ] Accetta/rifiuta richiesta amicizia (UI)
- [ ] Lista amici visualizzata nel profilo
- [ ] Visualizzazione profilo altri utenti
- [ ] Statistiche avanzate profilo
  - Win rate
  - Streak
  - Classifica generale
- [ ] Notifiche

#### Gruppi
- [ ] Modifica info gruppo
- [ ] Invita utenti al gruppo
- [ ] Gestione permessi gruppo (admin/membro)
- [ ] Statistiche gruppo
- [ ] Ricerca membri
- [ ] Leave gruppo

### UX Improvements

#### Stati & Feedback
- [ ] Loading states per tutti i componenti
  - Skeleton loaders
  - Spinners
  - Progress indicators
- [ ] Error handling UI
  - Toast notifications
  - Error messages inline
  - Retry mechanisms
- [ ] Empty states
  - Nessuna scommessa
  - Nessun amico
  - Nessun gruppo
- [ ] Success confirmations
  - Toast per azioni completate
  - Feedback visuale

#### Animazioni & Transizioni
- [ ] Animazioni transizione tra viste
- [ ] Micro-interazioni su bottoni
- [ ] Slide/fade effects per modal
- [ ] Loading animations
- [ ] Skeleton loading per cards

#### Interattività
- [ ] Pull-to-refresh
- [ ] Infinite scroll per liste lunghe
- [ ] Swipe gestures (elimina, archivia)
- [ ] Drag and drop (riordino)
- [ ] Conferme azioni critiche
  - Modal di conferma eliminazione
  - Double-tap protection

#### Filtri & Ricerca
- [ ] Ricerca scommesse per titolo
- [ ] Filtri avanzati scommesse
  - Per stato
  - Per partecipanti
  - Per data
  - Per posta in gioco
- [ ] Ordinamento scommesse
  - Per data
  - Per popolarità
  - Per punteggio
- [ ] Salvataggio preferenze filtri

### Componenti da Creare

- [ ] **BetDetailModal/Page** - Dettaglio completo scommessa
- [ ] **ToastNotification** - Notifiche toast
- [ ] **ConfirmDialog** - Dialog conferma generica
- [ ] **SearchBar** - Barra di ricerca riutilizzabile
- [ ] **UserCard** - Card utente riutilizzabile
- [ ] **EmptyState** - Componente empty state generico
- [ ] **LoadingSpinner** - Spinner riutilizzabile
- [ ] **AvatarUpload** - Upload avatar con preview
- [ ] **DatePicker** - Selettore date customizzato
- [ ] **FriendsList** - Lista amici con azioni
- [ ] **NotificationsList** - Lista notifiche
- [ ] **StatsCard** - Card statistiche riutilizzabile

### Routing & Navigation

- [ ] Implementare Angular Router
  - Route per ogni vista
  - Route parametriche (es. /group/:id)
  - Query parameters per filtri
  - Route guards
- [ ] Deep linking
- [ ] Browser back button handling
- [ ] Route transition animations

### State Management

- [ ] Migliorare DataService
  - Gestione stato più robusta
  - Cache invalidation strategy
  - Optimistic updates
  - Rollback on error
- [ ] Considerare NgRx o Signals API avanzate
- [ ] Persistent state (localStorage)
- [ ] Sync state across tabs

### Forms & Validation

- [ ] Reactive forms everywhere
- [ ] Validatori custom
- [ ] Error messages user-friendly
- [ ] Form dirty/pristine tracking
- [ ] Unsaved changes warning
- [ ] Auto-save drafts

### Testing

- [ ] Unit test per componenti
- [ ] Unit test per servizi
- [ ] Integration test
- [ ] E2E test con Cypress/Playwright
- [ ] Coverage almeno 80%
- [ ] Visual regression testing

### Performance

- [ ] Lazy loading components
- [ ] Virtual scrolling per liste lunghe
- [ ] Image lazy loading
- [ ] OnPush change detection
- [ ] Memoization expensive computations
- [ ] Bundle size optimization
- [ ] Tree shaking
- [ ] Code splitting

### Accessibilità (a11y)

- [ ] ARIA labels
- [ ] Keyboard navigation
- [ ] Focus management
- [ ] Screen reader support
- [ ] Contrast ratios WCAG AA
- [ ] Semantic HTML

### PWA Features

- [ ] Service Worker
- [ ] Offline mode
- [ ] App manifest
- [ ] Install prompt
- [ ] Push notifications
- [ ] Background sync

### Internazionalizzazione

- [ ] i18n setup (Angular i18n)
- [ ] Traduzioni IT/EN
- [ ] Date/number formatting locale-aware
- [ ] RTL support (se necessario)

### DevOps & Build

- [ ] Environment files (dev, staging, prod)
- [ ] Build optimization per production
- [ ] Source maps
- [ ] Linting (ESLint)
- [ ] Formatting (Prettier)
- [ ] Pre-commit hooks (Husky)
- [ ] CI/CD pipeline

### Monitoring & Analytics

- [ ] Error tracking (Sentry)
- [ ] Analytics (Google Analytics / Plausible)
- [ ] Performance monitoring
- [ ] User behavior tracking

---

## 🐛 Bug Conosciuti

- [ ] Nessun handling errori API in caso di network failure
- [ ] Refresh dati non automatico (solo manuale al mount)
- [ ] Possibili race conditions su multiple API calls

---

## 🔧 Miglioramenti Tecnici Proposti

- [ ] Separare models in file dedicati
- [ ] Creare barrel exports per organizzazione
- [ ] Introdurre design patterns (Repository, Facade)
- [ ] Standardizzare naming conventions
- [ ] Constants file per magic strings
- [ ] Utility functions file
- [ ] Typed HTTP responses
- [ ] Error types customizzati
- [ ] Logging service
- [ ] Configuration service

---

## Note Tecniche

### Dipendenze Principali
- **@angular/core**: ^20.3.0
- **@angular/common**: ^20.3.0
- **@angular/platform-browser**: ^20.3.0
- **rxjs**: ^7.8.2
- **tailwindcss**: latest
- **typescript**: ~5.8.2
- **vite**: ^6.2.0

### Scripts NPM
```bash
npm run dev      # Avvia dev server (porta 4200)
npm run build    # Build production
npm run preview  # Preview build production
```

### Porte
- Dev server: `4200`
- API backend: `3000`

### Browser Target
- Modern browsers (Chrome, Firefox, Safari, Edge)
- ES2022+ support required