Dashboard & Admin
Authenticated dashboard layouts, settings panels, an admin panel, and billing screens — ready to extend.
Overview
The internal UI kit powers everything behind sign-in: the dashboard shell, settings, the admin panel, and billing screens. You compose your authenticated app from these instead of building layouts by hand.
Dashboard
The dashboard layout provides collapsible sidebar navigation, a top bar with the user menu, theme switcher, and language switcher, and a responsive content area.
import { DashboardLayout } from "@siteknock/ui-internal/dashboard-layout"
import { SettingsCard } from "@siteknock/ui-internal/settings-card"
Settings
Settings screens use tabbed panels with unsaved-changes tracking, section cards with save/cancel actions, and validated form fields. Shared field components include a path browser, a syntax-highlighted source editor, and an info tooltip.
Admin panel
The admin UI includes:
- User management — list, search, assign roles, and suspend or activate users.
- Organization management — list, create, edit, and delete organizations.
- System settings — application-wide configuration.
The matching backend admin routes require an admin-role session, validated server-side.
Admin routes verify an admin role on every request. Never gate admin functionality on the frontend alone — always validate the session and role on the backend.
Billing screens
The billing UI shows the current subscription tier, payment method management, an invoice history table, and a link to the Stripe-hosted customer portal. See Billing.
Add a dashboard page
pnpm sk:scaffold page my-page
This creates a page in the protected (dashboard) zone. Compose it from the dashboard layout components, add i18n keys, and include data-testid on interactive elements.