Add a Dashboard Page

The dashboard uses a section-switcher pattern inside a single page at src/app/[locale]/dashboard/page.tsx.

This guide explains how to add a new section while keeping navigation, localization, and the switcher logic aligned with the current architecture.

What this guide covers

Main files and folders

Steps

1. Create the section component

Add a new section file in the dashboard features folder:

src/features/dashboard/<name>-section.tsx

2. Add the section to the switcher

Open src/features/dashboard/dashboard-page.tsx and add a new conditional render for your section:

{section === "<name>" ? <YourSection /> : null}

This registers the section in the page so the sidebar can activate it.

3. Add a navigation entry to the sidebar

Open src/features/dashboard/sidebar.tsx and add an entry for your new section with:

• section identifier
• label (or translation key)
• icon

The sidebar is the single source of truth for dashboard navigation.

4. Add translation keys

Add the matching label key to all message files used by the dashboard sidebar.

5. Add data loading

Use:

• server components for page-level data loading when possible
• tRPC protected procedures for authenticated server access
• src/server/services when domain logic grows beyond the page

6. Verify the full flow

After adding the section, test:

• sidebar navigation switches to the new section
• sidebar highlighting is correct
• localized label rendering
• authenticated access and redirect behavior
• responsive sidebar behavior on mobile and desktop