➕ Aggiungere una nuova sezione (feature) al Backoffice

Questa guida spiega come creare una nuova sezione principale del Backoffice (modulo + rotta lazy + voce di menu).

Struttura di riferimento: i moduli delle sezioni vivono in src/dashboards/<feature>/.

---

1) Crea il modulo della sezione

Crea una cartella, ad esempio src/dashboards/<feature>/, e definisci il modulo della nuova feature per evitare errori si puo copiare uno dei moduli principali gia esistenti come quello di company (sostituisci <Feature> e i percorsi in base al tuo caso):

// src/dashboards/<feature>/<feature>.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { SharedModule } from 'src/modules/shared.module';
import { FeatureService } from 'src/services/feature.service';
import { <Feature>DashboardComponent } from './<feature>.component';

export const <FEATURE>_NAME = '<feature-path>'; // es. 'orders', 'warehouses', ecc.

@NgModule({
  declarations: [
    <Feature>DashboardComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    // rotta di ingresso della sezione (root del modulo)
    RouterModule.forChild([{ path: '', component: <Feature>DashboardComponent }]),
  ],
  providers: [
    { provide: 'featureName', useValue: <FEATURE>_NAME },
    FeatureService
  ]
})
export class <Feature>Module {}

E il componente principale della sezione:

// src/dashboards/<feature>/<feature>.component.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  selector: '<feature>-dashboard',
  template: `<h1><Feature> dashboard</h1>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class <Feature>DashboardComponent {}

---

2) Aggiungi la rotta in app.routing.ts con lazy loading

Registra il path della nuova sezione dentro i children di /dashboard usando loadChildren:

// src/modules/app.routing.ts (estratto)
export const ROUTES: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard],
    children: [
      // ...altre sezioni...
      {
        path: '<feature-path>', // es. 'orders'
        loadChildren: () =>
          import('../dashboards/<feature>/<feature>.module')
            .then(m => m.<Feature>Module)
      },
    ]
  },
  { path: 'not-found', component: NotFoundComponent },
  { path: '**', redirectTo: '/not-found' }
];

Nota: il lazy loading tiene leggero il bundle iniziale e carica la sezione solo quando l’utente la visita.

---

3) Esporre la sezione nel menu laterale (AppPageLayoutComponent)

Aggiungi un menu item nel componente di layout: src/dashboards/components/app-page-layout/app-page-layout.component.ts.

// src/dashboards/components/app-page-layout/app-page-layout.component.ts (estratto)
menuItems = [
  // ...voci esistenti...
  {
    name: '<Nome sezione>',                // es. 'Ordini'
    path: '<feature-path>',                // es. 'orders'
    icon: 'menu.profile',                  // usa un'icona esistente della UI lib
    subsections: [
      { name: '<Voce principale>', path: '<feature-path>' } // es. 'Ordini'
      // eventuali sottosezioni: { name: '...', path: '<feature-path>/sub' }
    ]
  }
];

Il componente gestisce già la vista mobile / side menu e chiude il pannello quando si naviga su mobile (onPathClick()), quindi non servono ulteriori modifiche.

---

✅ Checklist finale

• Cartella src/dashboards/<feature>/ creata con Module e Component root.
• Rotta lazy registrata in app.routing.ts dentro dashboard.children.
• Voce di menu aggiunta in AppPageLayoutComponent.menuItems.
• (Opzionale) Servizi dedicati registrati nel modulo (es. FeatureService).
• (Opzionale) Traduzioni aggiunte in translations/* per le etichette di menu e testi.

---

Esempio rapido (sezione “Ordini”)

• Path: orders
• Modulo: OrdersModule
• Componente root: OrdersDashboardComponent
• Menu item: { name: 'Ordini', path: 'orders', ... }

Con questi tre passi la sezione appare nel menu, è raggiungibile via /dashboard/orders ed è caricata on-demand.