148 lines
4.1 KiB
Markdown
148 lines
4.1 KiB
Markdown
# Academy Aziendale — Frontend
|
|
|
|
Interfaccia web CSR (Client Side Rendering) per la piattaforma formativa interna (esame ITS Web Developer Full Stack 24-26, Prova C).
|
|
|
|
React + TypeScript, comunicazione con il backend tramite API REST e autenticazione cookie (Auth.js).
|
|
|
|
## URL produzione
|
|
|
|
| Risorsa | URL |
|
|
|---------|-----|
|
|
| Applicazione | https://esameits24-26frontend.andreavillari.it |
|
|
| Backend API | https://esameits24-26backend.andreavillari.it |
|
|
| Swagger | https://esameits24-26backend.andreavillari.it/api/docs |
|
|
|
|
## Stack tecnologico
|
|
|
|
- React 19 + TypeScript
|
|
- Vite 8
|
|
- React Router 7
|
|
- Tailwind CSS 4 + shadcn/ui (Base UI)
|
|
- Auth cookie-based con CSRF
|
|
- Tema chiaro/scuro (WCAG AA)
|
|
|
|
## Credenziali di test
|
|
|
|
Password per tutti gli utenti: `Password123!`
|
|
|
|
| Email | Ruolo | Cosa testare |
|
|
|-------|-------|--------------|
|
|
| `admin@academy.it` | Referente Academy | Catalogo corsi, assegnazioni, dipendenti, statistiche |
|
|
| `maria.bianchi@academy.it` | Dipendente | I miei corsi, completamento, dashboard |
|
|
| `luca.conti@academy.it` | Dipendente | — |
|
|
| `elena.rossi@academy.it` | Dipendente | — |
|
|
|
|
## Funzionalità per ruolo
|
|
|
|
### Dipendente
|
|
|
|
- Dashboard con riepilogo assegnazioni e scadenze
|
|
- **I miei corsi** — elenco, filtri, dettaglio, segna come completato
|
|
|
|
### Referente Academy
|
|
|
|
- Dashboard con indicatori e link rapidi
|
|
- **Catalogo corsi** — crea, modifica, disattiva, elimina
|
|
- **Assegnazioni** — assegna corsi, modifica date, annulla
|
|
- **Dipendenti** — elenco e ricerca
|
|
- **Statistiche** — aggregati per mese, categoria e dipendente
|
|
|
|
## Avvio in sviluppo
|
|
|
|
### Prerequisiti
|
|
|
|
- Node.js 20+
|
|
- Backend in esecuzione (locale o produzione)
|
|
|
|
### Configurazione
|
|
|
|
Crea un file `.env` nella root del frontend (vedi `.env.example`):
|
|
|
|
```env
|
|
VITE_API_URL=http://localhost:3011
|
|
```
|
|
|
|
Per puntare al backend di produzione:
|
|
|
|
```env
|
|
VITE_API_URL=https://esameits24-26backend.andreavillari.it
|
|
```
|
|
|
|
### Comandi
|
|
|
|
```bash
|
|
npm ci
|
|
npm run dev
|
|
```
|
|
|
|
L'app è disponibile su http://localhost:5173
|
|
|
|
```bash
|
|
npm run build # build produzione in dist/
|
|
npm run preview # anteprima build locale
|
|
npm run lint # ESLint
|
|
```
|
|
|
|
## Avvio con Docker
|
|
|
|
```bash
|
|
docker compose up -d --build
|
|
```
|
|
|
|
Il container espone l'app su http://127.0.0.1:3010 (nginx).
|
|
|
|
La variabile `VITE_API_URL` viene passata in fase di build (vedi `docker-compose.yml` e `dockerfile/Dockerfile`).
|
|
|
|
## Tema chiaro / scuro
|
|
|
|
L'applicazione supporta tre modalità (menu in sidebar e pagina login):
|
|
|
|
- **Chiaro**
|
|
- **Scuro** — palette ottimizzata per ridurre affaticamento visivo (sfondo ~#121212, testo ~#E0E0E0, colori desaturati)
|
|
- **Sistema** — segue le preferenze del sistema operativo
|
|
|
|
La preferenza è salvata in `localStorage` (`academy-theme`).
|
|
|
|
## Struttura progetto
|
|
|
|
```
|
|
src/
|
|
api/client.ts Client HTTP verso il backend
|
|
components/ Layout, sidebar, route guard, UI shadcn
|
|
config/navigation.ts Voci menu per ruolo
|
|
context/AuthContext.tsx Stato autenticazione
|
|
lib/ Utility (date, formattazione)
|
|
pages/ Pagine dell'applicazione
|
|
types/ Tipi TypeScript condivisi
|
|
validation/ Validazione client-side (corsi, assegnazioni)
|
|
```
|
|
|
|
## Pagine e route
|
|
|
|
| Route | Ruolo | Descrizione |
|
|
|-------|-------|-------------|
|
|
| `/login` | Guest | Accesso |
|
|
| `/dashboard` | Tutti | Home personalizzata per ruolo |
|
|
| `/i-miei-corsi` | Dipendente | Elenco corsi assegnati |
|
|
| `/i-miei-corsi/:id` | Dipendente | Dettaglio e completamento |
|
|
| `/corsi` | Referente | Catalogo CRUD |
|
|
| `/assegnazioni` | Referente | Gestione assegnazioni |
|
|
| `/dipendenti` | Referente | Elenco dipendenti |
|
|
| `/statistiche` | Referente | Riepiloghi formativi |
|
|
|
|
## Validazione lato client
|
|
|
|
I form di corsi e assegnazioni validano i dati prima dell'invio. Gli errori del server (status 400) vengono mostrati per campo tramite `ApiClientError` e toast Sonner.
|
|
|
|
## Deploy
|
|
|
|
Il deploy su VPS è automatizzato tramite Forgejo Actions (`.github/workflows/deploy.yml`):
|
|
|
|
1. Build Vite su runner CI con `VITE_API_URL` di produzione
|
|
2. SSH sul VPS → `git pull` → `docker compose up -d --build`
|
|
|
|
Il job deploy ha `command_timeout: 30m` per i build Docker sul VPS.
|
|
|
|
## Autore
|
|
|
|
Andrea Villari — esame ITS 24-26
|