Create List

In src/app/modules/<module-name>/<module-name>.routes.ts, add the new route:

export const <Module>Routes = {
  Base: '/<module>',
  // ... existing routes
  <Entity>Listing: '/<module>/<entity>-listing',
};

3. Update the module index

In src/app/modules/<module-name>/index.ts, add the lazy export:

export const Lazy<Entity>ListingPage = lazy(() => import(/* webpackPrefetch: true */ './<entity>-listing.page'));

4. Update root.router.tsx

In src/root.router.tsx:

1. Add the lazy component import (if it doesn't exist):

import { Lazy<Entity>ListingPage } from '@app/modules/<module>';

2. Add the routes import (if it doesn't exist):

import { <Module>Routes } from '@app/modules/<module>/<module>.routes';

3. Add the route inside the Layout:

<Route path={<Module>Routes.<Entity>Listing} element={<Lazy<Entity>ListingPage />} />

4. Add an item to the sidebar menu in the links array:

export const links: MenuLink[] = [
  // ... existing links
  { to: <Module>Routes.<Entity>Listing, content: '<Entities>', icon: <FaIcon.List /> },
];

IMPORTANT: The links array is passed to the <Layout> component and renders the sidebar menu. Always add the new page to the menu so the user can navigate to it.

5. Verify

Run npx tsc --noEmit to ensure there are no type errors.

Available components

Reference

• Page example: src/atomic-samples/example-pages/create-list-example.page.tsx
• Routes pattern: src/atomic-samples/example-pages/example-pages.routes.ts
• Index pattern: src/atomic-samples/example-pages/index.ts
• Main router: src/root.router.tsx