# 📋 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
- [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 30s
    - [x] **Notifica badge validatore ignorato**
    - [x] NumLockBanner
- [x] `SuccessModal.tsx` - conferma ingresso con carosello
- [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] Timeout sessione 30 minuti
- [x] Timeout utente 60 secondi
- [x] **Timeout badge non trovato 30 secondi**
- [x] Cambio rapido badge partecipante
- [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] Scorrimento automatico ogni 800ms
- [x] Modale fullscreen verde
- [x] Durata totale: 5 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  | Votante | ✅ Sì          |
| `0007399575` | Laura Rossi    | Votante | ✅ Sì          |
| `0000514162` | Giuseppe Verdi | Tecnico | ❌ No          |
| `0006478281` | -              | -       | ⚠️ Non nel DB |

---

## ✅ FRONTEND COMPLETATO