Docs
Dashboard

Overview

Learn how the dashboard is designed and works from a technical standpoint.

The dashboard is the actual SaaS application with built-in onboarding, multi-org selection, example pages (graphs, tables, details), account settings (profile, security, notifications) and organization settings (general, team, billing, developers).

Start the dashboard

To start the app, run the following command::

pnpm --filter dashboard dev
Dashboard App

Structure

The folders are based on a standard Next.js application.

DirectoryPurpose
/actionsServer-side mutations (Create, Update, Delete)
/appApp Router components
/componentsDashboard UI components
/dataFetches data from the database or external APIs (Read)
/hooksCustom React hooks
/libShared utility functions
/publicStatic assets like images
/schemasValidation schemas for actions and data
/typesGeneral types and DTOs

CRUD workflow

The workflow revolves around three key directories:

  /actions  → Server Actions (Create/Update/Delete)
  /data     → Data Functions (Read)
  /schemas  → Zod Schemas (Validation)

To illustrate it with examples:

  • Action: Add new contact with /actions/contacts/add-contact.ts
  • Data: Retrieve contacts with /data/contacts/get-contacts.ts
  • Schema: Validate client form and server action with /schemas/contacts/add-contact-schema.ts

Data Fetching

Mutations

CustomizationData Fetching