Documentación

Dashboard

FeatureProtected app areaSection-switcher pattern

The dashboard is a protected area served by a single page at src/app/[locale]/dashboard/page.tsx.

Instead of real subroutes, it uses a section-switcher pattern: a sidebar controls which section component is rendered inside the same page. This keeps the dashboard simple while still offering a multi-section experience.

Need to add a new section?

Use this page as the architectural overview, then continue with Add a Dashboard Page when you want to extend it.

What this feature includes

Section switcher

The dashboard renders different section components based on sidebar selection, keeping all sections under one route.

Sidebar navigation

The sidebar component manages navigation entries and controls which section is currently visible.

Protected shell

A shared layout applies authentication and keeps the user experience consistent across the app area.

Current section model

The dashboard renders sections through a switcher in dashboard-page.tsx:

  • Overview
  • Customers
  • Billing
  • Settings

All sections are served at the single /[locale]/dashboard route.

Main files and folders

  • src/app/[locale]/dashboard/page.tsx: Dashboard route entry point.
  • src/features/dashboard/dashboard-layout.tsx: Shared protection and shell boundary.
  • src/features/dashboard/dashboard-page.tsx: Section switcher logic.
  • src/features/dashboard/sidebar.tsx: Sidebar navigation and section control.
  • src/features/dashboard/overview-section.tsx: Overview section component.
  • src/features/dashboard/customers-section.tsx: Customers section component.
  • src/features/dashboard/billing-section.tsx: Billing section component.
  • src/features/dashboard/settings-section.tsx: Settings section component.
  • src/features/dashboard/modals/cancelation-modal.tsx: Cancelation modal.
Navigation and protection

Protection

Access control is enforced in the dashboard layout.

If no session is found, the user is redirected to the localized sign-in page.

Dashboard navigation is managed directly inside src/features/dashboard/sidebar.tsx.

The sidebar defines which sections are available, their labels, and their icons. There is no separate config file — the sidebar is the single source of truth for dashboard navigation.

UI shell

The dashboard shell is composed from src/features/dashboard/dashboard-layout.tsx and the sidebar component.

Adding a new section

To add a new dashboard section:

  1. Create a new section component in src/features/dashboard/ (e.g. reports-section.tsx)
  2. Add a case to the section switcher in src/features/dashboard/dashboard-page.tsx
  3. Add a navigation entry in src/features/dashboard/sidebar.tsx
  4. Add translation keys for the navigation label

Keep it simple

Add new sections through the switcher pattern. Create the section component, register it in the page switcher, and add it to the sidebar.

Why this structure matters

The section-switcher pattern keeps the dashboard:

  • simple to extend with new sections
  • consistent through a shared layout and sidebar
  • protected at a single boundary
  • easy to reason about as the product grows