Wireframe CADMI v7

Questo wireframe interattivo mostra la struttura e il comportamento dell'interfaccia finale dell'applicazione. I dati mostrati sono di esempio e non sono collegati al database reale.

Credenziali di test:   email test@cadmi.it  ·  password test  →  nella pagina Login clicca Accedi, poi Verifica per il 2FA.
Vai al login →
1
Login
Entra con le credenziali di test e completa il 2FA
2
Menu principale
Scegli la sezione dall'elenco tile
3
Naviga con la topbar
Icona 🏠 torna sempre al menu. Il breadcrumb mostra dove sei
4
Clicca le righe
Nelle liste, clicca una riga per aprire il dettaglio
5
Interagisci
Tab, Modifica inline, cambio anno, dropdown — tutto è cliccabile

Cosa funziona nel wireframe

  • Login con step 2FA simulato (test@cadmi.it / test)
  • Menu principale con tile e simulazione accessi per ruolo
  • Topbar con icona home e breadcrumb su tutte le pagine
  • Scheda donna: tutti gli 8 tab navigabili
  • Cambio anno: anni passati in sola lettura (banner giallo)
  • Pallini colorati sui tab cambiano con l'anno selezionato
  • Modifica inline nelle card (tab Figli e conoscenti, Situazione annuale)
  • Modifica inline lista operatrici (Salva / Annulla)
  • Dashboard: tab "Stato del centro" e "Il mio lavoro"
  • Contatti: form nuovo contatto sempre visibile in cima
  • Legenda pallini: Verificato / Copiato / Mancante / Non applicabile

Limitazioni note del wireframe

  • Nessuna autenticazione reale — il login è simulato
  • Il menu Admin (Tabelle decodifica) non apre una pagina reale
  • I filtri di ricerca non filtrano i dati (sono solo UI)
  • I form non salvano dati reali
  • La paginazione e l'ordinamento sono statici
  • Il report non genera grafici reali

Struttura delle pagine

  • Login — accesso con 2FA
  • Menu — launcher con tile per sezione
  • Dashboard — stato del centro + il mio lavoro
  • Contatti — nuovo contatto rapido + storico
  • Calendario — vista mensile e settimanale dei contatti, filtro per operatrice, click su slot vuoto apre nuovo contatto con data precompilata
  • Donne — lista → Scheda donna con 8 tab
  • Report annuale — statistiche aggregate
  • Operatrici CADMI — gestione profili e accessi

A chi è rivolto

  • Team di sviluppo — specifica tecnica per costruire le schermate in ToolJet, seguendo fedelmente layout, nomi dei campi e comportamenti interattivi
  • Responsabili CADMI — verificare che il flusso di lavoro corrisponda alle esigenze reali prima che lo sviluppo sia completato
  • Qualsiasi feedback su layout, nomi, ordine dei tab o flusso è benvenuto e facilmente incorporabile prima dell'inizio della costruzione
Nota tecnica: Il wireframe è composto da più file HTML collegati tramite link normali. Funziona aprendo index.html direttamente nel browser (File → Apri) oppure da un server locale. Non richiede connessione internet (tranne per le icone Tabler Icons, caricate da CDN). Per condividerlo, inviare l'intera cartella cadmi_wireframe_v2/ come archivio ZIP.