Dashboard

The product shell: an org-scoped home, analytics, users and settings behind a workspace switcher.

The dashboard surface is the shell of a product: a header with a workspace switcher and a command palette, a sidebar, and the pages every SaaS starts with. Its files are src/app/(product) and src/content/misc/kbar.ts.

Bash

node scripts/scaffold.mjs --surfaces landing,dashboard --out ../my-app

It requires the orgs slice, which brings auth with it: every route but /profile lives under an organization. Add --slices billing to sell plans; see Billing. Without the landing surface, / redirects to /app.

Routes

/app — resolves the signed-in user's organizations and redirects to the first.
/app/[org] — the organization's home: stats, charts and a table.
/app/[org]/analytics — charts.
/app/[org]/users — the members table, with invitations.
/app/[org]/settings — organization, account, style and security tabs.
/app/[org]/billing — the current plan and the plans to change to, from the billing slice.
/profile — the signed-in user's profile.

src/app/(product)/app/[org]/layout.tsx is the tenancy gate for the whole segment: it calls requireOrg, sends a signed-out visitor to /auth, and answers a non-member with a 404. How membership and roles work is in Organizations.

Demo mode

With no Supabase configured, the gate lets every slug through and /app redirects to /app/demo. The users table answers its search, sort and paging from sample rows in memory, and says it is sample data. Configured, the same table reads GET /api/orgs/[org]/members.

The seams

The sidebar. src/app/(product)/components/Sidebar.tsx is navigation as data. Each entry's subPath is relative to the current organization; an entry without one is a placeholder for a route not built yet, like Reports, Roles and Permissions.
The command palette. src/content/misc/kbar.ts exports kbar(org), a function of the slug so every entry lands in the tenant you are in:

const kbar = (org: string): KbarItem[] => [
  { id: "analytics", name: "Analytics", icon: "trend", shortcut: [],
    section: "Navigation", keywords: "analytics metrics",
    href: orgPath(org, "/analytics") },
];

The workspace switcher. src/app/(product)/components/Header.tsx lists the user's organizations from useOrg() and opens NewOrgDialog to create one through POST /api/orgs.
The charts and stats. The home and analytics pages render sample numbers. Replace them with your own queries; links inside the shell should go through orgPath(org, subPath) so they keep the slug.
Plan features. With the billing slice and Supabase configured, analytics is gated by requireOrgFeature(org, "analytics") and shows an upgrade notice on a plan without it. Without the billing slice, that gate is removed.

When it is absent

Sign-in, the demo button and a password reset land on / instead of /app, the landing navigation drops its Dashboard links, and the product block goes from src/resources/seo.js.

Last updated October 18, 2026

Edit this page on GitHub