Admin console design
The Meridian admin console is the operator surface for managing tenants, models, routes, quotas, and audit trails. This recipe documents the shipping pattern: a server-rendered shell with violet/pink accents on a dark canvas, role-gated routes, and a single source of truth for navigation. Every panel is keyboard-accessible and renders without client JavaScript on first paint.
1. Shell & navigation
The console uses an AdminShell layout component rendered on the server. The left rail lists Tenants, Models, Routes, Quotas, Audit, and Settings. The top bar shows the operator email, the active environment, and a link to the public site. No public Navbar or Footer ever leaks into the admin tree.
- One layout file owns the chrome.
- Routes are nested under
/dashboard/admin/*. - Role check happens in the layout, not in each page.
2. Color & type system
Three colors carry the brand: violet #8B5CF6 for primary actions and accents, pink #F472B6 for secondary highlights and links, and dark #0A0612 as the canvas. Headings use a violet-to-pink gradient. Body copy stays neutral gray so the accents do the work. Buttons get a subtle ring on hover; destructive actions invert to a red border with a violet glow.
3. Server-first data flow
Every admin page is a server component that reads from the gateway with a service-role token. Mutations route through server actions or thin POST handlers; the client never holds a privileged key. The pattern below is the minimum viable page.
// app/dashboard/admin/tenants/page.tsx
export default async function TenantsPage() {
const res = await fetch(
process.env.GATEWAY_URL + '/admin/tenants',
{ headers: { Authorization: 'Bearer ' + process.env.GATEWAY_KEY },
cache: 'no-store' }
);
const tenants = await res.json();
return (
<ul>
{tenants.map((t) => (
<li key={t.id}>{t.name}</li>
))}
</ul>
);
}