# 📋 Piano Sviluppo Frontend

## Obiettivo

Applicazione React per tablet che gestisce il flusso di accesso ai varchi votazione, con lettura badge RFID.
Ottimizzata per tablet in orizzontale.

---

## Checklist Sviluppo

### 1. Setup Progetto

- [x] Inizializzare Vite + React + TypeScript
- [x] Installare Tailwind CSS 4
- [x] Configurare `tsconfig.json`
- [x] Configurare `vite.config.ts` con proxy API
- [x] Configurare `.gitignore`
- [x] Path relativi per build (base: './')
- [x] Output build in `frontend/dist/`
- [x] Favicon con logo Focolari

### 2. Design System

- [x] Configurare colori custom in Tailwind
    - [x] `focolare-blue: #0072CE`
    - [x] `focolare-orange: #F5A623`
    - [x] `focolare-yellow: #FFD700`
- [x] Stili globali in `index.css`
- [x] Animazioni custom (fade-in, slide-up, pulse-error, blink)
- [x] Classe `.glass` per effetto glassmorphism

### 3. Tipi TypeScript (`types/index.ts`)

- [x] `RoomInfo` - info sala + **server_start_time**
- [x] `User` - dati utente
- [x] `LoginRequest/Response`
- [x] `EntryRequest/Response` (SENZA welcome_message)
- [x] `AppState` - stati applicazione
- [x] `ValidatorSession` - sessione validatore + **serverStartTime**
- [x] `RFIDScannerState` - stato scanner
- [x] `RFIDScanResult` - risultato scan

### 4. API Service (`services/api.ts`)

- [x] Classe `ApiError` custom
- [x] Funzione `apiFetch` generica con error handling
- [x] `getRoomInfo()` - GET /info-room
- [x] `loginValidator()` - POST /login-validate
- [x] `getUserByBadge()` - GET /anagrafica/{badge}
- [x] `requestEntry()` - POST /entry-request
- [x] Logging con prefisso `[API]`
- [x] Path relativi (proxy Vite in dev, stesso server in prod)

### 5. Hook RFID Scanner (`hooks/useRFIDScanner.ts`)

- [x] Supporto pattern multipli (US: `;?`, IT: `ò_`)
- [x] Rilevamento automatico pattern in uso
- [x] Gestione Enter post-completamento
- [x] Timeout 2.5s per scansioni accidentali
- [x] ESC annulla scansione in corso
- [x] Logging avanzato con prefisso `[RFID]`
- [x] Export `keyLog` per debug

### 6. Componenti UI (`components/`)

- [x] `Logo.tsx` - logo Focolari
- [x] `Button.tsx` - varianti primary/secondary/danger
- [x] `Input.tsx` - campo input styled + **toggle password visibility**
- [x] `Modal.tsx` - modale base
- [x] `RFIDStatus.tsx` - indicatore stato scanner
- [x] `UserCard.tsx` - card utente con foto e ruolo
- [x] `CountdownTimer.tsx` - timer con progress bar
- [x] `WelcomeCarousel.tsx` - carosello messaggi multilingua con **animazione smooth sliding**
- [x] `NumLockBanner.tsx` - avviso NumLock per desktop

### 7. Schermate (`screens/`)

- [x] `LoadingScreen.tsx` - caricamento iniziale + ping automatico
- [x] `ValidatorLoginScreen.tsx` - attesa badge + password + NumLockBanner
- [x] `ActiveGateScreen.tsx` - varco attivo:
    - [x] Card utente (layout largo per tablet)
    - [x] **Schermata "badge non trovato"** con countdown barra visiva (30s)
    - [x] **Pulsante "Annulla" nella schermata badge non trovato**
    - [x] **Badge diverso durante errore "non trovato" → ricarica nuovo utente/errore**
    - [x] **Notifica badge validatore ignorato**
    - [x] NumLockBanner
- [x] `SuccessModal.tsx` - conferma ingresso con carosello:
    - [x] **Carosello fullwidth** (nessun troncamento testo)
    - [x] **Scorrimento lento** (più rilassato, meno ansioso)
    - [x] **Durata aumentata 8s**
- [x] `ErrorModal.tsx` - errore fullscreen
- [x] `DebugScreen.tsx` - pagina diagnostica RFID

### 8. State Machine (`App.tsx`)

- [x] Stati applicazione gestiti
- [x] Integrazione `useRFIDScanner`
- [x] Gestione sessione validatore (localStorage)
- [x] **Qualsiasi badge può essere validatore** (verificato con password)
- [x] Password salvata in sessione per conferme ingresso
- [x] **Invalidazione sessione se server riparte** (serverStartTime)
- [x] **Polling periodico (30s) per verificare server restart**
- [x] Timeout sessione 30 minuti
- [x] Timeout utente 60 secondi
- [x] **Timeout badge non trovato 30 secondi**
- [x] **Ignora stesso badge passato più volte** (no ricaricamento)
- [x] Cambio rapido badge partecipante
- [x] **Badge durante success modal chiude modal e carica nuovo utente** (fix dipendenze useCallback)
- [x] Conferma con badge validatore (quello della sessione)
- [x] **Notifica se badge validatore rippassato senza utente**
- [x] Logging transizioni con prefisso `[FLOW]`

### 9. Modale Successo - Carosello Internazionale

- [x] Componente `WelcomeCarousel.tsx`
- [x] 10 lingue supportate
- [x] **Animazione smooth sliding** (slide up/down)
- [x] Scorrimento automatico lento (più rilassato)
- [x] Modale fullscreen verde
- [x] **Contenitore fullwidth** (nessun troncamento testo lungo)
- [x] **Durata totale: 8 secondi**

### 10. Debug & Diagnostica

- [x] Pagina `/debug` dedicata
- [x] Logging console strutturato `[RFID]`, `[FLOW]`, `[API]`

### 11. Routing

- [x] React Router
- [x] Route principale `/`
- [x] Route debug `/debug`

---

## Badge di Test

| Badge        | Nome           | Ruolo     | Ammesso       |
|--------------|----------------|-----------|---------------|
| `0008988288` | Marco Bianchi  | Convocato | ✅ Sì          |
| `0007399575` | Laura Rossi    | Invitato  | ✅ Sì          |
| `0000514162` | Giuseppe Verdi | Tecnico   | ❌ No          |
| `0006478281` | -              | -         | ⚠️ Non nel DB |

---

## 🧪 TODO: Test Automatici

### Test da Implementare

- [ ] **Test RFID Scanner:**
    - [ ] Rilevamento pattern US (`;` → `?`)
    - [ ] Rilevamento pattern IT (`ò` → `_`)
    - [ ] Timeout scansione incompleta
    - [ ] ESC annulla scansione
    - [ ] Enter post-completamento ignorato

- [ ] **Test Flow Validatore:**
    - [ ] Login con password corretta
    - [ ] Login con password errata
    - [ ] Sessione persistente in localStorage
    - [ ] Invalidazione sessione al riavvio server
    - [ ] Logout manuale

- [ ] **Test Flow Partecipante:**
    - [ ] Badge trovato ammesso → mostra card verde
    - [ ] Badge trovato non ammesso → mostra card rossa + warning
    - [ ] Badge non trovato → mostra schermata errore con countdown
    - [ ] Stesso badge passato più volte → ignorato
    - [ ] Badge diverso passato → cambia utente visualizzato
    - [ ] Timeout 60s → torna in attesa

- [ ] **Test Conferma Ingresso:**
    - [ ] Badge validatore su utente ammesso → success modal
    - [ ] Badge validatore su utente NON ammesso → notifica ignorato
    - [ ] Badge validatore senza utente → notifica ignorato
    - [ ] **⚠️ IMPORTANTE:** Simulare bug che bypassa frontend → backend DEVE bloccare

- [ ] **Test Success Modal:**
    - [ ] Carosello scorre tutte le lingue
    - [ ] Durata corretta (8s)
    - [ ] Badge durante modal → chiude modal e carica nuovo utente

---

## ✅ FRONTEND COMPLETATO

Tutte le funzionalità principali sono state implementate. Rimangono da sviluppare i test automatici.