Estructura completa del módulo de contabilidad: rutas anidadas, componentes standalone (CostCenter, CostCenterType, Ciudades, Master), integración con TabContainer y configuración de breadcrumbs.
📑 ACCOUNTING_ROUTES
🎯 TabContainer integration
🍞 Breadcrumb config
📦 Standalone components
🏷️ ModuleKey: 'accounting'
index.ts
export { AccountingComponent } from './lib/feature-accounting/src/lib/accounting/accounting.component';
export { ACCOUNTING\_ROUTES } from './lib/accounting.routes';
🚪 Exportaciones para consumo externo
✔️ AccountingComponent: componente contenedor principal del módulo de contabilidad.
✔️ ACCOUNTING_ROUTES: configuración de rutas anidadas para lazy loading desde la aplicación principal.
accounting.routes.ts
export const ACCOUNTING\_ROUTES: Routes = \[
{
path: '',
component: AccountingComponent,
title: 'Nebula ERP - Contabilidad',
data: {
showSidebar: true,
showHeader: true,
showBreadcrumb: true,
},
children: \[
{ path: 'masters/cost-center/list', component: CostCenterComponent,
title: 'Centros de Costo', data: { breadcrumb: 'Centros de Costo' } },
{ path: 'masters/cost-center-type/list', component: CostCenterTypeComponent,
title: 'Tipos de Centro de Costo', data: { breadcrumb: 'Tipos de Centro de Costo' } },
{ path: 'masters/masters', component: MasterComponent,
title: 'Maestros', data: { breadcrumb: 'Maestros' } },
{ path: 'department-city/list', component: CiudadesComponent,
title: 'Departamentos y Ciudades', data: { breadcrumb: 'Departamentos y Ciudades' } }
\],
runGuardsAndResolvers: 'paramsOrQueryParamsChange',
},
\];
🗺️ Rutas anidadas con layout compartido
accounting/accounting.component.ts
@Component({
selector: 'app-accounting',
standalone: true,
imports: \[CommonModule, TabContainerComponent\],
template: \`
<app-tab-container
\[config\]="tabConfig"
\[showClose\]="true"
\[contentMinHeight\]="'500px'"
\[emptyMessage\]="'Selecciona una opción de Contabilidad para comenzar'"
(tabActivated)="onTabActivated($event)"
(tabClosed)="onTabClosed($event)">
</app-tab-container>
\`
})
export class AccountingComponent {
readonly tabConfig: TabContainerConfig = {
moduleKey: 'accounting',
moduleLabel: 'Contabilidad',
enableBreadcrumb: true,
enableUrlSync: true
};
}
🎯 Contenedor principal con TabContainer
✔️ TabContainer reutilizable: componente de @nebula/layout que gestiona pestañas multi-módulo.
✔️ Configuración específica: moduleKey: 'accounting' filtra pestañas del módulo de contabilidad.
✔️ enableBreadcrumb: true sincroniza automáticamente las migas de pan con la pestaña activa.
✔️ enableUrlSync: true mantiene la URL sincronizada con la pestaña seleccionada.
✔️ Empty message: mensaje amigable cuando no hay pestañas abiertas.
Componentes de página
1. masters/cost-center/list
2. masters/mastersC
📋 Estructura de rutas
Todas las rutas son hijas del componente AccountingComponent, lo que significa que comparten el TabContainer y la navegación por pestañas. Cada componente es standalone y se carga de forma lazy.
Standalone + CommonModule
// MasterComponent - Ejemplo base
@Component({
selector: 'app-master',
templateUrl: './master.component.html',
styleUrls: \['./master.component.scss'\],
standalone: true,
imports: \[CommonModule\],
})
export class MasterComponent {}
// HomeComponent (placeholder)
@Component({
selector: 'app-home',
standalone: true,
imports: \[CommonModule\],
template: \`<div>Home Accounting</div>\`
})
export class HomeComponent {}
📄 Estructura base de componentes
✔️ Standalone: todos los componentes son standalone, no requieren NgModule.
✔️ CommonModule: importado para directivas como ngIf, ngFor.
✔️ HomeComponent: componente placeholder (actualmente sin uso, pero disponible para futuros dashboards).
✔️ MasterComponent: página de maestros contables (centro de costos, tipos, etc).
✔️ CostCenterComponent, CostCenterTypeComponent, CiudadesComponent: componentes específicos para cada entidad.
TabContainerConfig para Accounting
interface TabContainerConfig {
moduleKey: 'accounting' | 'tesorería' | 'budget';
moduleLabel: string;
enableBreadcrumb?: boolean;
enableUrlSync?: boolean;
}
// Configuración usada en AccountingComponent:
const tabConfig: TabContainerConfig = {
moduleKey: 'accounting', // Filtra pestañas de este módulo
moduleLabel: 'Contabilidad', // Etiqueta para breadcrumb base
enableBreadcrumb: true, // Sincroniza breadcrumb con pestaña activa
enableUrlSync: true // Sincroniza URL con pestaña seleccionada
};
⚙️ Comportamiento del TabContainer
Accounting + Layout + Tabs
📋 Flujo completo del módulo de contabilidad:
1. Usuario selecciona "Contabilidad" desde el selector de productos
2. productsGuard redirige a /layout/accounting
3. LayoutComponent carga el sidebar y topbar
4. ACCOUNTING_ROUTES carga AccountingComponent (con TabContainer)
5. TabContainer se inicializa con moduleKey='accounting'
6. Usuario navega por el menú lateral (ej: "Centros de Costo")
7. SidebarWrapper llama a navService.addTabFromMenu()
8. TabContainer filtra y muestra la nueva pestaña
9. BreadcrumbSyncService actualiza breadcrumb: "Contabilidad > Centros de Costo"
10. El componente CostCenterComponent se renderiza dentro del router-outlet del TabContainer
🔄 Sincronización de URL: Al cambiar de pestaña, la URL se actualiza a /layout/accounting/masters/cost-center/list
🔗 Integración con layout: El módulo de contabilidad depende completamente de @nebula/layout para la gestión de pestañas, breadcrumbs y estado del sidebar. Esto permite una experiencia consistente entre todos los módulos (accounting, tesorería, budget).
Relación con otras librerías
package.json (peerDependencies)
{
"peerDependencies": {
"@angular/core": "~21.1.0",
"@nebula/layout": "\*", // ← TabContainer, servicios de layout
"nebula-ui-kit": "^0.2.1", // ← TabsComponent, GridCard, etc
"@nebula/shared/data-access": "\*" // ← HttpService, AuthService
}
}
Integración con el ecosistema Nebula
✔️ @nebula/layout: proporciona TabContainerComponent y servicios de breadcrumb.
✔️ nebula-ui-kit: componentes UI reutilizables (tabs, botones, inputs).
✔️ @nebula/shared/data-access: servicios HTTP y autenticación.
✔️ Lazy loading: el módulo se carga bajo demanda desde la aplicación principal.
📁 raíz del módulo
index.ts, accounting.routes.ts
🎨 feature-accounting/
AccountingComponent + subcarpetas por feature (cost-center, ciudades, master)
📋 Componentes de página
CostCenterComponent, CostCenterTypeComponent, CiudadesComponent, MasterComponent
🔌 Dependencias externas
@nebula/layout, nebula-ui-kit, @nebula/shared/data-access
Buenas prácticas implementadas: Standalone components, lazy loading, configuración centralizada de rutas, breadcrumbs declarativos en data, integración con TabContainer para multi-pestañas, y separación clara entre contenedor (AccountingComponent) y páginas hijas.
nx test accounting → pruebas unitarias para componentes y servicios del módulo.
📚 @nebula/accounting · Módulo de contabilidad con arquitectura de pestañas, rutas anidadas y total integración con el sistema de layout de Nebula ERP.