feat(admin): add IA shell and protected section skeleton routes

apps/admin/src/app/commissions/page.tsx

@@ -0,0 +1,34 @@
+import { AdminSectionPlaceholder } from "@/components/admin-section-placeholder"
+import { AdminShell } from "@/components/admin-shell"
+import { requirePermissionForRoute } from "@/lib/route-guards"
+
+export const dynamic = "force-dynamic"
+
+export default async function CommissionsManagementPage() {
+  const role = await requirePermissionForRoute({
+    nextPath: "/commissions",
+    permission: "commissions:read",
+    scope: "own",
+  })
+
+  return (
+    <AdminShell
+      role={role}
+      activePath="/commissions"
+      badge="Admin App"
+      title="Commissions"
+      description="Prepare commissions intake and kanban workflow tooling."
+    >
+      <AdminSectionPlaceholder
+        feature="Commissions Workflow"
+        summary="This route is reserved for request intake, ownership assignment, and kanban transitions."
+        requiredPermission="commissions:read (own)"
+        nextSteps={[
+          "Add commissions board with status columns.",
+          "Add assignment, due-date, and notes editing.",
+          "Add transition rules and audit history.",
+        ]}
+      />
+    </AdminShell>
+  )
+}

apps/admin/src/app/media/page.tsx

@@ -0,0 +1,34 @@
+import { AdminSectionPlaceholder } from "@/components/admin-section-placeholder"
+import { AdminShell } from "@/components/admin-shell"
+import { requirePermissionForRoute } from "@/lib/route-guards"
+
+export const dynamic = "force-dynamic"
+
+export default async function MediaManagementPage() {
+  const role = await requirePermissionForRoute({
+    nextPath: "/media",
+    permission: "media:read",
+    scope: "team",
+  })
+
+  return (
+    <AdminShell
+      role={role}
+      activePath="/media"
+      badge="Admin App"
+      title="Media"
+      description="Prepare media library and enrichment workflows."
+    >
+      <AdminSectionPlaceholder
+        feature="Media Library"
+        summary="This route is ready for media browsing, upload, and metadata refinement features."
+        requiredPermission="media:read (team)"
+        nextSteps={[
+          "Add media upload and asset listing.",
+          "Add enrichment fields (alt text, source, tags).",
+          "Add artwork-specific refinement fields.",
+        ]}
+      />
+    </AdminShell>
+  )
+}

apps/admin/src/app/page.tsx

@@ -5,11 +5,10 @@ import { revalidatePath } from "next/cache"
 import Link from "next/link"
 import { redirect } from "next/navigation"
 
-import { AdminLocaleSwitcher } from "@/components/admin-locale-switcher"
+import { AdminShell } from "@/components/admin-shell"
 import { translateMessage } from "@/i18n/messages"
 import { getAdminMessages, resolveAdminLocale } from "@/i18n/server"
-import { resolveRoleFromServerContext } from "@/lib/access-server"
-import { LogoutButton } from "./logout-button"
+import { requirePermissionForRoute } from "@/lib/route-guards"
 
 export const dynamic = "force-dynamic"
 
@@ -39,11 +38,11 @@ function readOptionalField(formData: FormData, field: string): string | undefine
 }
 
 async function requireNewsWritePermission() {
-  const role = await resolveRoleFromServerContext()
-
-  if (!role || !hasPermission(role, "news:write", "team")) {
-    redirect("/unauthorized?required=news:write&scope=team")
-  }
+  await requirePermissionForRoute({
+    nextPath: "/",
+    permission: "news:write",
+    scope: "team",
+  })
 }
 
 function redirectWithState(params: { notice?: string; error?: string }) {
@@ -156,15 +155,11 @@ export default async function AdminHomePage({
 }: {
   searchParams: Promise<SearchParamsInput>
 }) {
-  const role = await resolveRoleFromServerContext()
-
-  if (!role) {
-    redirect("/login?next=/")
-  }
-
-  if (!hasPermission(role, "news:read", "team")) {
-    redirect("/unauthorized?required=news:read&scope=team")
-  }
+  const role = await requirePermissionForRoute({
+    nextPath: "/",
+    permission: "news:read",
+    scope: "team",
+  })
 
   const [resolvedSearchParams, locale, posts] = await Promise.all([
     searchParams,
@@ -179,21 +174,14 @@ export default async function AdminHomePage({
   const canCreatePost = hasPermission(role, "news:write", "team")
 
   return (
-    <main className="mx-auto flex min-h-screen w-full max-w-4xl flex-col gap-8 px-6 py-16">
-      <header className="space-y-3">
-        <div className="flex items-center justify-between gap-3">
-          <p className="text-sm uppercase tracking-[0.2em] text-neutral-500">
-            {t("dashboard.badge", "Admin App")}
-          </p>
-          <AdminLocaleSwitcher />
-        </div>
-        <h1 className="text-4xl font-semibold tracking-tight">
-          {t("dashboard.title", "Content Dashboard")}
-        </h1>
-        <p className="text-neutral-600">
-          {t("dashboard.description", "Manage posts from a dedicated admin surface.")}
-        </p>
-        <div className="flex items-center gap-3 pt-2">
+    <AdminShell
+      role={role}
+      activePath="/"
+      badge={t("dashboard.badge", "Admin App")}
+      title={t("dashboard.title", "Content Dashboard")}
+      description={t("dashboard.description", "Manage posts from a dedicated admin surface.")}
+      actions={
+        <>
           <Link
             href="/todo"
             className="inline-flex rounded-md border border-neutral-300 px-4 py-2 text-sm font-medium hover:bg-neutral-100"
@@ -206,10 +194,9 @@ export default async function AdminHomePage({
           >
             {t("settings.title", "Settings")}
           </Link>
-          <LogoutButton />
-        </div>
-      </header>
-
+        </>
+      }
+    >
       {notice ? (
         <section className="rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
           {notice}
@@ -413,6 +400,6 @@ export default async function AdminHomePage({
           ))}
         </div>
       </section>
-    </main>
+    </AdminShell>
   )
 }

apps/admin/src/app/pages/page.tsx

@@ -0,0 +1,34 @@
+import { AdminSectionPlaceholder } from "@/components/admin-section-placeholder"
+import { AdminShell } from "@/components/admin-shell"
+import { requirePermissionForRoute } from "@/lib/route-guards"
+
+export const dynamic = "force-dynamic"
+
+export default async function PagesManagementPage() {
+  const role = await requirePermissionForRoute({
+    nextPath: "/pages",
+    permission: "pages:read",
+    scope: "team",
+  })
+
+  return (
+    <AdminShell
+      role={role}
+      activePath="/pages"
+      badge="Admin App"
+      title="Pages"
+      description="Manage page entities and publication workflows."
+    >
+      <AdminSectionPlaceholder
+        feature="Page Management"
+        summary="This MVP0 scaffold defines information architecture and access boundaries for future page CRUD."
+        requiredPermission="pages:read (team)"
+        nextSteps={[
+          "Add page entity list and search.",
+          "Add create/edit draft flows with validation.",
+          "Add publish/unpublish scheduling controls.",
+        ]}
+      />
+    </AdminShell>
+  )
+}

apps/admin/src/app/settings/page.tsx

@@ -1,14 +1,13 @@
-import { hasPermission } from "@cms/content/rbac"
 import { isAdminSelfRegistrationEnabled, setAdminSelfRegistrationEnabled } from "@cms/db"
 import { Button } from "@cms/ui/button"
 import { revalidatePath } from "next/cache"
 import Link from "next/link"
 import { redirect } from "next/navigation"
 
-import { AdminLocaleSwitcher } from "@/components/admin-locale-switcher"
+import { AdminShell } from "@/components/admin-shell"
 import { translateMessage } from "@/i18n/messages"
 import { getAdminMessages, resolveAdminLocale } from "@/i18n/server"
-import { resolveRoleFromServerContext } from "@/lib/access-server"
+import { requirePermissionForRoute } from "@/lib/route-guards"
 
 type SearchParamsInput = Promise<Record<string, string | string[] | undefined>>
 
@@ -21,15 +20,11 @@ function toSingleValue(input: string | string[] | undefined): string | null {
 }
 
 async function requireSettingsPermission() {
-  const role = await resolveRoleFromServerContext()
-
-  if (!role) {
-    redirect("/login?next=/settings")
-  }
-
-  if (!hasPermission(role, "users:manage_roles", "global")) {
-    redirect("/unauthorized?required=users:manage_roles&scope=global")
-  }
+  await requirePermissionForRoute({
+    nextPath: "/settings",
+    permission: "users:manage_roles",
+    scope: "global",
+  })
 }
 
 async function getSettingsTranslator() {
@@ -85,7 +80,11 @@ async function updateRegistrationPolicyAction(formData: FormData) {
 }
 
 export default async function SettingsPage({ searchParams }: { searchParams: SearchParamsInput }) {
-  await requireSettingsPermission()
+  const role = await requirePermissionForRoute({
+    nextPath: "/settings",
+    permission: "users:manage_roles",
+    scope: "global",
+  })
 
   const [params, locale, isRegistrationEnabled] = await Promise.all([
     searchParams,
@@ -99,31 +98,24 @@ export default async function SettingsPage({ searchParams }: { searchParams: Sea
   const error = toSingleValue(params.error)
 
   return (
-    <main className="mx-auto flex min-h-screen w-full max-w-4xl flex-col gap-8 px-6 py-16">
-      <header className="space-y-3">
-        <div className="flex items-center justify-between gap-3">
-          <p className="text-sm uppercase tracking-[0.2em] text-neutral-500">
-            {t("settings.badge", "Admin Settings")}
-          </p>
-          <AdminLocaleSwitcher />
-        </div>
-        <h1 className="text-4xl font-semibold tracking-tight">{t("settings.title", "Settings")}</h1>
-        <p className="text-neutral-600">
-          {t(
-            "settings.description",
-            "Manage runtime policies for the admin authentication and onboarding flow.",
-          )}
-        </p>
-        <div className="flex items-center gap-3 pt-2">
-          <Link
-            href="/"
-            className="inline-flex rounded-md border border-neutral-300 px-4 py-2 text-sm font-medium hover:bg-neutral-100"
-          >
-            {t("settings.actions.backToDashboard", "Back to dashboard")}
-          </Link>
-        </div>
-      </header>
-
+    <AdminShell
+      role={role}
+      activePath="/settings"
+      badge={t("settings.badge", "Admin Settings")}
+      title={t("settings.title", "Settings")}
+      description={t(
+        "settings.description",
+        "Manage runtime policies for the admin authentication and onboarding flow.",
+      )}
+      actions={
+        <Link
+          href="/"
+          className="inline-flex rounded-md border border-neutral-300 px-4 py-2 text-sm font-medium hover:bg-neutral-100"
+        >
+          {t("settings.actions.backToDashboard", "Back to dashboard")}
+        </Link>
+      }
+    >
       {notice ? (
         <section className="rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
           {notice}
@@ -183,6 +175,6 @@ export default async function SettingsPage({ searchParams }: { searchParams: Sea
           </form>
         </div>
       </section>
-    </main>
+    </AdminShell>
   )
 }

apps/admin/src/app/todo/page.tsx

@@ -1,10 +1,9 @@
 import { readFile } from "node:fs/promises"
 import path from "node:path"
-import { hasPermission } from "@cms/content/rbac"
 import Link from "next/link"
-import { redirect } from "next/navigation"
 
-import { resolveRoleFromServerContext } from "@/lib/access-server"
+import { AdminShell } from "@/components/admin-shell"
+import { requirePermissionForRoute } from "@/lib/route-guards"
 
 export const dynamic = "force-dynamic"
 
@@ -405,15 +404,11 @@ function filterButtonClass(active: boolean): string {
 export default async function AdminTodoPage(props: {
   searchParams?: SearchParamsInput | Promise<SearchParamsInput>
 }) {
-  const role = await resolveRoleFromServerContext()
-
-  if (!role) {
-    redirect("/login?next=/todo")
-  }
-
-  if (!hasPermission(role, "roadmap:read", "global")) {
-    redirect("/unauthorized?required=roadmap:read&scope=global")
-  }
+  const role = await requirePermissionForRoute({
+    nextPath: "/todo",
+    permission: "roadmap:read",
+    scope: "global",
+  })
 
   const content = await getTodoMarkdown()
   const sections = parseTodo(content)
@@ -434,26 +429,21 @@ export default async function AdminTodoPage(props: {
   }
 
   return (
-    <main className="mx-auto flex min-h-screen w-full max-w-6xl flex-col gap-8 px-6 py-12">
-      <header className="space-y-4">
-        <p className="text-sm uppercase tracking-[0.2em] text-neutral-500">Admin App</p>
-        <div className="flex flex-wrap items-end justify-between gap-4">
-          <div className="space-y-2">
-            <h1 className="text-4xl font-semibold tracking-tight">Roadmap and Progress</h1>
-            <p className="text-neutral-600">
-              Structured view from root `TODO.md` (single source of truth).
-            </p>
-          </div>
-
-          <Link
-            href="/"
-            className="inline-flex rounded-md border border-neutral-300 px-4 py-2 text-sm font-medium hover:bg-neutral-100"
-          >
-            Back to dashboard
-          </Link>
-        </div>
-      </header>
-
+    <AdminShell
+      role={role}
+      activePath="/todo"
+      badge="Admin App"
+      title="Roadmap and Progress"
+      description="Structured view from root TODO.md (single source of truth)."
+      actions={
+        <Link
+          href="/"
+          className="inline-flex rounded-md border border-neutral-300 px-4 py-2 text-sm font-medium hover:bg-neutral-100"
+        >
+          Back to dashboard
+        </Link>
+      }
+    >
       <section className="rounded-xl border border-neutral-200 bg-neutral-50 p-5">
         <div className="mb-4 flex items-center justify-between gap-4">
           <p className="text-sm font-medium text-neutral-600">Weighted completion</p>
@@ -607,6 +597,6 @@ export default async function AdminTodoPage(props: {
           {content}
         </pre>
       </details>
-    </main>
+    </AdminShell>
   )
 }

apps/admin/src/app/users/page.tsx

@@ -0,0 +1,34 @@
+import { AdminSectionPlaceholder } from "@/components/admin-section-placeholder"
+import { AdminShell } from "@/components/admin-shell"
+import { requirePermissionForRoute } from "@/lib/route-guards"
+
+export const dynamic = "force-dynamic"
+
+export default async function UsersManagementPage() {
+  const role = await requirePermissionForRoute({
+    nextPath: "/users",
+    permission: "users:read",
+    scope: "own",
+  })
+
+  return (
+    <AdminShell
+      role={role}
+      activePath="/users"
+      badge="Admin App"
+      title="Users"
+      description="Prepare user lifecycle and role management operations."
+    >
+      <AdminSectionPlaceholder
+        feature="Users Management"
+        summary="This route sets the guardrail and UX entrypoint for role assignment, status, and invitation flows."
+        requiredPermission="users:read (own)"
+        nextSteps={[
+          "Add user list, filter, and detail views.",
+          "Add role and permission editing actions with owner/support safety rules.",
+          "Add disable/ban and invite workflows.",
+        ]}
+      />
+    </AdminShell>
+  )
+}