Dashboards
SaaS dashboard architecture
Where a SaaS dashboard reads plan state, and how the Admin Dashboard Kit's shell, table, and empty states fit around it.
A SaaS dashboard is the first screen after login. It should show the account and the plan without inventing metrics the database does not have. The Complete SaaS Starter Kit gates that screen on the session and reads plan from the user row. The Admin Dashboard Kit is the shell you put around lists: sidebar, table, and the empty, loading, and error states.
Plan is a column, not a chart
plan is "free" until the webhook sets "pro". A dashboard can render that string. It should not draw revenue, seat counts, or MRR unless you have stored them. The admin kit’s bar chart is SVG with sample marks, meant to be replaced by an API. See building a React admin dashboard.
States that belong on day one
Empty: the user has no rows yet. Loading: the server component or fetch has not returned. Error: the query failed. The admin kit includes those three so a table does not collapse into a blank page. Wire them to your Prisma queries. Do not leave the sample rows in production.
Authentication for the page is the session from Next.js authentication architecture. Billing changes belong in Stripe webhooks with Next.js, not in a dashboard button that writes plan directly.