Extending the Dashboard

The SaaSStinger Lite dashboard is built using the Next.js App Router.

Dashboard features are organized around:

• Routes
• Components
• Workspace context
• Permissions
• Server actions

Dashboard Structure

Dashboard routes are located at:

src/app/dashboard/

Current structure:

dashboard/

├── page.tsx
├── projects/
├── members/
├── invites/
├── activity/
├── audit-logs/
├── notifications/
├── settings/
└── usage/

Dashboard Layout

The shared dashboard layout is:

src/app/dashboard/layout.tsx

It provides:

• Navigation
• Workspace context
• Authentication protection
• Shared UI

All dashboard pages inherit this layout.

Creating a Dashboard Page

Example:

Creating:

Reports

Create:

src/app/dashboard/reports/page.tsx

Example:

export default function ReportsPage() {
  return (
    <div>
      Reports
    </div>
  );
}

Workspace-Aware Pages

Dashboard features operate inside a workspace.

A page should know:

Current User

+

Active Workspace

+

Membership Role

Workspace Access Pattern

Recommended flow:

Dashboard Page

        ↓

WorkspaceGate

        ↓

Active Workspace

        ↓

Feature Data

Adding Navigation Items

Dashboard navigation is located in:

src/components/dashboard/

Common files:

SidebarNav.tsx

DashboardSidebar.tsx

Navigation Example

Adding:

Reports

requires:

1. Add navigation item.
2. Create route.
3. Add permissions if needed.
4. Test mobile navigation.

Navigation Permissions

Not every user should see every feature.

Example:

Audit Logs

OWNER + ADMIN only

Navigation visibility should match permissions.

Route Protection

Dashboard routes should use existing protection patterns.

Protection layers:

Authentication

        ↓

Email Verification

        ↓

Workspace Membership

        ↓

Role Permission

Adding Feature Data

Avoid loading data directly inside components.

Recommended:

Page

 ↓

Server Function

 ↓

Service

 ↓

Repository

 ↓

Firestore

Example Feature Addition

Adding:

Reports Dashboard

Structure:

src/app/dashboard/reports/

page.tsx


src/components/reports/

ReportCard.tsx

ReportTable.tsx


src/services/reports/

reports.service.ts


src/server/

reports.server.ts

Using Existing Dashboard Components

Reuse:

DashboardNavbar

DashboardSidebar

WorkspaceSwitcher

Avoid creating duplicate dashboard shells.

Adding Dashboard Widgets

Dashboard widgets belong in:

src/components/widgets/

Existing examples:

MetricCardWidget.tsx

ChartWidget.tsx

TaskListWidget.tsx

Widget Development Pattern

A widget should:

• Have a clear purpose
• Receive typed data
• Avoid direct database access

Example:

Data Source

      ↓

Server Logic

      ↓

Widget Props

      ↓

UI

Mobile Dashboard Considerations

When adding dashboard features:

Test:

• Desktop sidebar
• Mobile navigation
• Responsive layouts
• Long content areas

Dashboard Checklist

Before adding a dashboard feature:

• Route created
• Authentication checked
• Workspace access verified
• Permissions defined
• Navigation updated
• Components added
• Loading states handled
• Error states handled
• Documentation updated

Common Mistakes

Creating Pages Without Access Control

Avoid:

Route

 ↓

Database

without authorization.

Adding Navigation Without Routes

Avoid broken links.

Always create:

Navigation

+

Route

together.

Bypassing Workspace Context

Never assume:

user = workspace owner

Always verify membership.

Related Documentation

• Adding a Feature
• Feature Components
• RBAC Permissions
• Workspaces
• Server Actions
• Working With Services