🔹 ApexFlow - SaaS Enterprise Dashboard (Angular 19 + PrimeNG)

Applicazione gestionale Single Page Application (SPA) ApexFlow, basata su un modello di business SaaS (Software as a Service), sviluppata con Angular 19 e PrimeNG. Il progetto è progettato seguendo architetture enterprise moderne, focalizzate su performance, manutenibilità e un design system premium.

🚀 Funzionalità Principali

🔐 Autenticazione & Sicurezza

• Reactive Login Flow: Gestione accesso tramite Reactive Forms con validazione avanzata e feedback in tempo reale.
• Interactive Demo Login: Pagina di login ridisegnata con blocco credenziali interattivo (One-click fill) per accesso rapido Admin/User.
• Role-Based Access Control (RBAC): Gestione permessi granulare.
  • adminGuard: Protezione delle rotte amministrative (/settings).
  • ownerOrAdminGuard: Protezione delle rotte profilo (/users/:id), accessibili solo all'admin o al proprietario del profilo.
  • Auto-Redirect: Reindirizzamento automatico alla home se un Admin degrada il proprio ruolo a User mentre è in un'area riservata.
• HTTP Interceptors:
  • AuthInterceptor: Gestione centralizzata del token Bearer per ogni richiesta HTTP.
  • ErrorInterceptor: Gestione globale degli errori con notifiche toast tramite PrimeNG MessageService.

🌍 Interfaccia Pubblica

• Landing Page (Demo Gateway): Nuova pagina di benvenuto (/welcome) presentata come gateway per la "Live Demo".
  • Design System: Stile "Light/Glassmorphism" coerente con l'applicazione.
  • Componenti Modulari:
    • MarqueeComponent: Infinite scroll per loghi partner/tech stack.
    • FeaturesComponent: Sezione features alternata con immagini.
    • FeedbackComponent: Carosello recensioni responsive (Swipe su mobile).
    • CtaComponent: Call to Action finale.
  • Footer: Componente standalone con link social e copyright.

⚙️ Gestione & Manutenzione

• Area Impostazioni (Admin Only): Sezione protetta per la manutenzione del sistema.
• Gestione Utenti Completa:
  • CRUD Utenti: Creazione, Modifica e Cancellazione utenti tramite modale dedicata (UserModalComponent).
  • Pagina Profilo: Dettaglio utente (/users/:id) con statistiche e azioni rapide.
  • Sincronizzazione Sessione: Logica centralizzata in UserService che aggiorna immediatamente la sessione locale (currentUser) e la UI (es. Sidebar) quando un utente modifica il proprio profilo o ruolo.
• Backup Dati: Funzionalità di backup one-click che scarica un'istantanea completa del database (db.json) in formato JSON direttamente dal browser.

💼 Modello di Business (SaaS Domain)

L'applicazione simula una piattaforma gestionale per aziende tecnologiche:

• Clienti (Anagrafica):
  • Gestione di aziende con attributi specifici come Industry e Subscription Plan.
  • Soft Delete: Eliminazione logica (stato "Inattivo") per preservare lo storico degli ordini collegati.
  • Generazione ID Casuali: Utilizzo di ID alfanumerici univoci a 16 caratteri (IdGenerator).
  • Status Lifecycle: Gestione automatica dello stato (Active, Expired, Suspended). Il cliente diventa attivo al primo acquisto e scade automaticamente al termine del periodo.
  • Controllo Scadenze: Tag "In Scadenza" automatico per abbonamenti che terminano entro 30 giorni.
• Prodotti (Catalogo Servizi):
  • Gestione Completa: Visualizzazione lista prodotti, dettaglio servizio (/products/:id) e modifica stato rapida.
  • Soft Delete: Supporto per disattivazione prodotti ("Disattivato") mantenendoli visibili negli ordini storici.
• Ordini & Transazioni:
  • Supporto Ibrido: Gestione unificata per Prodotti Una-Tantum (basati su Quantità) e Abbonamenti (basati su Durata Mesi/anni).
  • Financial Engine: Logica integrata per calcolo Subtotale, Sconti Piano (0%, 10%, 20%) e IVA automatica (11%).
  • Estensione Automatica: L'acquisto di un abbonamento estende dinamicamente la data di scadenza del cliente.
  • Metriche Real-Time: Dashboard collegata ai dati reali per calcolo fatturato e KPI.

📊 Dashboard & Analytics

• Data Visualization: Grafici dinamici tramite PrimeNG Charts collegati all'OrderService.
• KPI Reattivi: Card statistiche aggiornate in tempo reale (es. "Fatturato Totale" calcolato al centesimo).

🗃️ Data Table Avanzate (Server-Side)

• Paginazione Reattiva: Tabelle PrimeNG completamente collegate ad Angular Signals (TablePaginationState).
• Ordinamento & Filtraggio Dinamico: Ricerca full-text e filtri di colonna multipli integrati direttamente con json-server (es. _like per partial match) generati dinamicamente.
• Tipizzazione Rigorosa: Gestione delle query string tramite interfaccia HttpParamsConfig per eliminare l'uso di any e garantire la validazione a compile-time (Strict TypeScript).

🎨 Design System & UI

• PrimeNG Integration: Utilizzo del tema Aura personalizzato e icone PrimeIcons.

🛠 Architettura Tecnica

• Angular Signals (Core): Migrazione estensiva a Signals per componenti chiave (OrderDetail, OrderModal, ProductDetail). Eliminazione di RxJS subscriptions manuali e pipe async.
• Hybrid Reactivity: Utilizzo di toSignal e toObservable per il bridging tra form reattivi e segnali.
• Fault Tolerance: Architettura crash-proof con intercettazione globale degli errori HTTP (ErrorInterceptor) combinata a safe-fallback nativi nei Service (catchError con of(0)) per non interrompere i flussi dati in caso di instabilità di rete.
• Custom RxJS Operators: Utilizzo di operatori custom (es. notifySuccess) per standardizzare il feedback visivo.
• CSS Strategy: Gestione avanzata dei livelli CSS (@layer) per risolvere i conflitti tra Tailwind CSS e PrimeNG.
• Shared Styles: Design system centralizzato gestito tramite SCSS (_forms.scss, _cards.scss, _loading.scss).
• Mock Server Avanzato: Estensione di json-server (server.js) con middleware custom in Node.js per supportare query complesse su campi aggregati, paginazione avanzata su filter concatenati e un Cron Job nativo in background che invalida ciclicamente le sottoscrizioni in scadenza.
• Quality Assurance: Suite di Unit Test completa per AuthService utilizzando Jasmine e Karma, con mocking delle dipendenze HTTP (provideHttpClientTesting) e verifica dei flussi asincroni reattivi (Observable).

---

🛠 Tech Stack

• Framework: Angular 19 (Fully Standalone Architecture)
• UI Library: PrimeNG v19+ (Theme: Aura)
• Styling: Tailwind CSS + SCSS Modules + prettier-plugin-tailwindcss
• State Management: Angular Signals & RxJS
• Visualizzazione Dati: PrimeNG Charts (Chart.js)
• Tooling: Angular CLI, JSON Server (Mock API)

🔗 Backend Integration (WIP)

Esiste un repository separato per il backend sviluppato con Spring Boot, attualmente in fase di sviluppo (Work in Progress). Il backend replicherà le funzionalità simulate attualmente dal JSON Server.

👉 Repository Backend: github.com/xdelmo/backend-tesi

---

📂 Struttura del Progetto

src/app/
├── core/           # Singleton: Auth, Services, Guards, Interceptors, Models
├── shared/         # Reusable: Components (Cards, Tables, Charts), Styles, Pipes
├── public/         # Public: Landing Page, Login, Footer (Accessible without Auth)
└── features/       # Modules: Dashboard, Customers, Produtcs (Lazy Loaded)

---

▶️ Setup & Installazione Locale

1. Clona il repository:

   git clone https://github.com/xdelmo/dashboard-tesi.git

2. Installa le dipendenze:

   npm install

3. Avvia il Mock Server (Terminale 1): Il server simula un'API REST persistente su http://localhost:3000

   npm run server

4. Avvia l'applicazione Angular (Terminale 2):

   ng serve

5. Accedi: Vai su http://localhost:4200

🔑 Credenziali Demo

(Clicca sui box nella login page per l'autofill immediato)

Admin:

• Email: admin@demo.com
• Password: password
• Accesso completo a tutte le funzionalità e modifica dati.

Utente Standard:

• Email: user@demo.com
• Password: password
• Visualizzazione limitata (es. no modifica fatturato/stato).

---

Autore: Emanuele Del Monte
Progetto: Advanced Web Development / Tesi Dashboard Reattiva