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.

Per le route di dettaglio utente, team e progetto, il BreadcrumbComponent legge il nome direttamente dai dati iniettati dal resolver (data.person.profile / data.team.name / data.project.name): non esegue una GET aggiuntiva per risolvere l'etichetta del breadcrumb. Questo garantisce che il nome sia disponibile immediatamente all'attivazione della route, senza flash di caricamento.

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.

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
`src/utils/resolver-factory.ts`	Factory condivisa per resolver di dettaglio (user, team, project)