IS-TER CRM – Gestionale su misura per azienda di impermeabilizzazione

 

Panoramica del progetto

IS-TER CRM è un gestionale web completo progettato per digitalizzare l’intero flusso di lavoro di un centro servizi che gestisce pratiche, clienti, documenti ed eventi.
È stato sviluppato interamente con React.js e Firebase (Firestore + Storage + Auth), con un’attenzione particolare alla sicurezza dei dati e alla scalabilità.

Il progetto rappresenta un esempio concreto di app gestionale professionale realizzata da zero, con architettura moderna e processi aziendali complessi mappati in modo chiaro e intuitivo.

Obiettivi principali

• Eliminare completamente la gestione su carta.

• Offrire un’interfaccia semplice per operatori non tecnici.

• Automatizzare processi ricorrenti (email, scadenze, eventi).

• Permettere a ogni operatore di gestire solo i propri clienti.

• Gestire documenti, preventivi, rinnovi e incassi in un unico ambiente.

 

Funzionalità principali

1. Anagrafica Clienti avanzata

Strutturata in 5 tab:

• Dati generali (privato, azienda, ente pubblico)

• Email dinamiche

• Telefoni dinamici

• Eventi pratica

• Documenti (con upload su Firebase Storage)

Tutti i dati vengono salvati con un solo submit finale, semplificando il lavoro dell’operatore.

Punti chiave

• Validazioni avanzate (codice fiscale, date, campi obbligatori).

• Gestione dinamica dei campi (add/remove).

• Evento automatico “Apertura pratica” creato senza intervento dell’utente.

 

2. Gestione Eventi della Pratica

Sistema completo per tracciare ogni fase della pratica.

• Inserimento tramite modale dedicato

• Visualizzazione eventi cronologica

• Tipologie personalizzate

• Caso speciale: “Rinnovo pratica” → con importo + metodo di pagamento

• Riattivazione del timer automatico per l’email di scadenza

 

3. Caricamento Documenti

Ogni cliente ha la propria sottocollezione documenti, con:

• Titolo

• Note

• Data inserimento

• File (PDF / immagini / Word) salvati su Firebase Storage

• Eliminazione tramite modale di conferma

• Ordinamento alfabetico automatico

 

4. Ricerca avanzata

Sistema di ricerca affidabile, case-insensitive e molto rapido grazie a:

• Campi normalizzati (*_lowercase)

• Array di prefissi (*_search)

• Query Firestore ottimizzate

Permette di trovare anche clienti con:

• ricerca parziale

• errori di battitura

• mix nome/cognome/email

 

5. Dashboard Admin completa

La dashboard è lo strumento di controllo più potente del CRM.

Include:

• Filtri per data, metodo di pagamento, operatore

• Tabella dei clienti filtrati

• Conteggi per operatore

• Totale incassi giornalieri + suddivisi per metodo di pagamento

• Grafici su Recharts (numero clienti, numero utenti, incassi)

I dati non vengono mostrati automaticamente: compaiono solo dopo che l’amministratore applica i filtri.

6. Calendario interno

Realizzato con react-big-calendar, ogni utente vede solo i propri impegni, salvati su Firestore.

7. Sicurezza & Autorizzazioni

• Regole Firestore avanzate: ogni utente vede solo i propri dati

• Gestione ruoli con AuthContext

• Upload e lettura file protetti

• Prevenzione accessi non autorizzati

Tecnologie utilizzate

• React.js

• Firebase Authentication

• Firestore

• Firebase Storage

• React-Big-Calendar

• Recharts

• pdfmake / pdf-lib

• CSS personalizzato con design moderno e responsive

Valore aggiunto del progetto

✔ Digitalizzazione completa di processi complessi
✔ Riduzione errori e tempi di compilazione
✔ Interfaccia user-friendly per operatori non tecnici
✔ Architettura scalabile e pronta per nuove funzionalità
✔ Sicurezza e privacy di livello enterprise

Gestionale Sinalp – Gestionale creato su misura per centro CAF

1. Anagrafica clienti avanzata

Gestione completa dell’anagrafica cliente, pensata per i flussi tipici di patronati e CAF.

Include:

• Dati generali (nome, cognome, data nascita, CF, indirizzi, contatti, provincia di nascita con ricerca dinamica).

• Tipologia cliente: privato, azienda privata, ente pubblico.

• Campi obbligatori e validazioni (es. codice fiscale con regex + unicità).

• Select per tipo di contributo.

• Select per metodologia di pagamento con react-select.

• Importo pagato con gestione corretta dei decimali.

• Salvataggio automatico dell’evento “Apertura pratica” con data e operatore.

La pagina è organizzata in tab, ognuna gestita separatamente ma salvate con un unico submit finale.

---

2. Email dinamiche

• Aggiunta di più email tramite pulsante.

• Validazioni automatiche.

• Rimozione dinamica.

• Salvataggio nella sottocollezione email.

---

3. Telefoni dinamici

• Aggiunta e rimozione dinamica di numeri telefonici.

• Scelta del tipo (mobile, fisso, lavoro, ecc.).

• Esclusione dei campi vuoti.

• Sottocollezione dedicata.

---

4. Eventi pratica (tab dedicata)

Uno dei moduli più importanti.

Caratteristiche:

• Inserimento eventi tramite modale (non con input fissi in tab).

• Eventi non modificabili dopo l’inserimento → solo lettura.

• Ordinamento cronologico automatico.

Tipologie particolari:

• Rinnovo pratica → fa comparire:

  • importo del rinnovo

  • metodologia di pagamento del rinnovo

• Al salvataggio riattiva il countdown per email di scadenza abbonamento (10 min in test, 335 giorni in produzione).

---

5. Documenti

Uno dei moduli più complessi e professionali.

Funzionalità:

• Apertura modale “Nuovo documento” con:

  • titolo

  • note

  • data

  • file da scegliere dal PC

• Validazioni e toast.error per campi vuoti.

• Salvataggio file su Firebase Storage.

• Salvataggio metadati in sottocollezione documenti.

• Ordinamento alfabetico.

• Visualizzazione sotto forma di card.

• Eliminazione con modale di conferma.

---

6. Prevenzione duplicati

• Controllo automatico sul codice fiscale già registrato.

• Prevenzione errori durante l’inserimento.

---

7. Preventivi

Modulo progettato con caratteristiche professionali.

Include:

• Voci di preventivo dinamiche (quantità, valore unitario, totale automatico).

• Archivio delle tipologie lavoro modificabile dall’utente.

• Numero progressivo che si resetta ogni anno (con possibilità di impostare manualmente il primo numero).

• Stati preventivo: pendente, accettato, archiviato.

• Generazione PDF professionale.

• Creazione di un preventivo direttamente dalla scheda cliente.

---

8. Dashboard amministrativa

Uno dei punti più potenti.

Funzionalità:

• Filtri per:

  • data da / a

  • metodologia di pagamento

  • operatore

• Tabella clienti filtrata (inizialmente vuota).

• Totali incassi giornalieri + suddivisione per metodo di pagamento.

• Conteggio registrazioni per operatore.

• Grafici Recharts (numero clienti, andamento registrazioni, metodi di pagamento).

---

9. Ricerca avanzata del cliente

Sistema affidabile con:

• Campi _lowercase per ricerca case-insensitive.

• Campi _search per prefissi (ricerca parziale).

• Migliore compatibilità con Firestore e query indicizzate.

• Modal di ricerca personalizzata.

---

10. Calendario interno

Con react-big-calendar.

• Ogni operatore vede solo i propri appuntamenti.

• Salvataggio eventi calendario su Firestore.

• Integrazione con pratiche e clienti.

---

11. Sicurezza avanzata

• Ruoli admin/non admin tramite AuthContext.

• Controlli sugli upload Storage per impedire accessi non autorizzati.

---

12. Invio automatico email

Due casi:

1. All’inserimento cliente → invio ricevuta tramite Cloud Function.

2. Countdown scadenza abbonamento → email automatica al cliente dopo 335 giorni (10 minuti per test).

---

13. Struttura tecnica pulita e modulare

• React con componenti per tab separati.

• Gestione stato divisa per:

  • Email

  • Telefoni

  • Eventi

  • Documenti

  • Dati generali

• Un unico submit finale che sincronizza Firestore.

---

14. Integrazione dinamica dei moduli

• Transizione tra tab senza perdita dei dati.

• Valori sempre visibili anche dopo cambio tab (es. metodologia pagamento).

• Gestione unificata del form.

---

15. Ricerca e filtri

• Ricerca globale

• Ricerca in dashboard per operatore

• Filtri combinati e salvataggio locale dei risultati