Vai al contenuto

Dashboard — shell e navigazione

La dashboard è il contenitore principale dell'applicazione autenticata. Tutte le funzionalità operative vivono sotto il path /dashboard/....

Esperienza utente

Dopo il login, l'utente entra nella dashboard con:

  • Sidebar a sinistra (collassabile; lo stato è salvato in localStorage come isCollapsed)
  • Area contenuto centrale con breadcrumb e router-outlet
  • Adattamento mobile: su viewport ridotta la sidebar si comporta come menu mobile tramite MobileMenuService e ViewportService

La sidebar è organizzata per categorie (per te, business, altro, settings). Le voci visibili dipendono dalle policies — vedi Accesso e ruoli.

Ogni route figlia può definire in data i campi breadcrumb e showBreadcrumb. Il componente ContentComponent costruisce il percorso di navigazione in base a questi metadati.

Logout

Dal menu impostazioni in sidebar (avatar utente) è possibile effettuare il logout, che pulisce localStorage, resetta policies/profilo e reindirizza a /login.

Dettaglio tecnico

Composizione layout

DashboardComponent
├── SidebarComponent      → navigazione, filtro policies, collapse
└── ContentComponent      → breadcrumb + <router-outlet>

DashboardComponent (src/pages/dashboard/) è il parent di tutte le route figlie definite in app.routes.ts sotto path: Paths.dashboard.

Filtro sidebar per policy

SidebarComponent reagisce a PoliciesService.policies() e nasconde le voci con requiresPolicy se can(policy) è false:

Flag su item Esempio
requiresPolicy: "jobApplications.show" Gestione risorse
requiresPolicy: "clients.show" Partnership e contratti
requiresPolicy: "leaveRequests.show" Richieste e permessi

Route protette

  • authGuard su /dashboard e /login
  • policyChildGuard come canActivateChild — intercetta clients, buyers, buyer-contracts
  • requirePolicy("leaveRequests.show") su /permissions
  • teamDetailGuard su /teams/:id

File principali

File Ruolo
src/pages/dashboard/dashboard.component.ts Shell layout
src/pages/content/content.component.ts Breadcrumb e outlet
src/components/sidebar/sidebar.component.ts Menu laterale
src/utils/sidebar-items.ts Voci e requiresPolicy
src/services/policies.service.ts ACL UI
src/app/app.routes.ts Definizione route