basic-erp/apps/web/src/app/app.routes.ts

import { isDevMode } from '@angular/core';
import type { Route, Routes } from '@angular/router';
import { MENU } from '@basic-erp/sap-types';
import { authGuard, guestGuard, menuLoadedGuard, permissionGuard } from './core/auth/guards';
import { DOCUMENT_SCREENS, menuLabel } from './features/documents/document-screens';

/**
 * Pantallas de documento: la ruta del menú muestra la lista de los últimos documentos;
 * `nuevo` abre el formulario vacío y `:docEntry` el documento para ver o editar.
 * El permiso de menú gobierna las tres (el guard del padre; `data` se hereda en los hijos).
 */
const documentRoutes: Routes = DOCUMENT_SCREENS.map(
  (screen): Route => ({
    path: screen.path.slice(1),
    canActivate: [permissionGuard],
    data: { path: screen.path, title: menuLabel(screen.path), screen },
    children: [
      {
        path: '',
        loadComponent: () => import('./features/documents/document-list.page').then((m) => m.DocumentListPage),
      },
      {
        path: 'nuevo',
        loadComponent: () => import('./features/documents/document-form.page').then((m) => m.DocumentFormPage),
      },
      {
        path: ':docEntry',
        loadComponent: () => import('./features/documents/document-form.page').then((m) => m.DocumentFormPage),
      },
    ],
  }),
);

/**
 * Página de componentes: solo coincide al ejecutar `npm run dev:web` (isDevMode se evalúa al navegar);
 * en producción cae en la ruta comodín. No aparece en el menú.
 */
const devRoutes: Routes = [
  {
    path: 'dev/componentes',
    canMatch: [() => isDevMode()],
    loadComponent: () => import('./features/dev/showcase.page').then((m) => m.ShowcasePage),
  },
];

/** Resto de pantallas del menú (maestros, etc.): aún sin construir. */
const documentPaths = new Set(DOCUMENT_SCREENS.map((s) => s.path));
const pendingRoutes: Routes = MENU.flatMap((m) => m.items)
  .filter((item) => !documentPaths.has(item.path))
  .map(
    (item): Route => ({
      path: item.path.slice(1),
      canActivate: [permissionGuard],
      data: { path: item.path, title: item.label },
      loadComponent: () => import('./features/shared/coming-soon.page').then((m) => m.ComingSoonPage),
    }),
  );

export const routes: Routes = [
  {
    path: 'login',
    canActivate: [guestGuard],
    loadComponent: () => import('./features/login/login.page').then((m) => m.LoginPage),
  },
  {
    path: '',
    canActivate: [authGuard, menuLoadedGuard],
    loadComponent: () => import('./layout/main-layout').then((m) => m.MainLayout),
    children: [
      { path: '', pathMatch: 'full', loadComponent: () => import('./features/home/home.page').then((m) => m.HomePage) },
      {
        path: 'sin-acceso',
        loadComponent: () => import('./features/shared/no-access.page').then((m) => m.NoAccessPage),
      },
      ...devRoutes,
      ...documentRoutes,
      ...pendingRoutes,
    ],
  },
  { path: '**', redirectTo: '' },
];