feat(pages): add pages and navigation builder baseline

apps/admin/src/app/pages/[id]/page.tsx

@@ -0,0 +1,242 @@
+import { deletePage, getPageById, updatePage } from "@cms/db"
+import { Button } from "@cms/ui/button"
+import Link from "next/link"
+import { redirect } from "next/navigation"
+
+import { AdminShell } from "@/components/admin-shell"
+import { requirePermissionForRoute } from "@/lib/route-guards"
+
+export const dynamic = "force-dynamic"
+
+type SearchParamsInput = Record<string, string | string[] | undefined>
+
+type PageProps = {
+  params: Promise<{ id: string }>
+  searchParams: Promise<SearchParamsInput>
+}
+
+function readFirstValue(value: string | string[] | undefined): string | null {
+  if (Array.isArray(value)) {
+    return value[0] ?? null
+  }
+
+  return value ?? null
+}
+
+function readInputString(formData: FormData, field: string): string {
+  const value = formData.get(field)
+  return typeof value === "string" ? value.trim() : ""
+}
+
+function readNullableString(formData: FormData, field: string): string | null {
+  const value = readInputString(formData, field)
+  return value.length > 0 ? value : null
+}
+
+function redirectWithState(pageId: string, params: { notice?: string; error?: string }) {
+  const query = new URLSearchParams()
+
+  if (params.notice) {
+    query.set("notice", params.notice)
+  }
+
+  if (params.error) {
+    query.set("error", params.error)
+  }
+
+  const value = query.toString()
+  redirect(value ? `/pages/${pageId}?${value}` : `/pages/${pageId}`)
+}
+
+export default async function PageEditorPage({ params, searchParams }: PageProps) {
+  const role = await requirePermissionForRoute({
+    nextPath: "/pages",
+    permission: "pages:read",
+    scope: "team",
+  })
+  const resolvedParams = await params
+  const pageId = resolvedParams.id
+
+  const [resolvedSearchParams, pageRecord] = await Promise.all([searchParams, getPageById(pageId)])
+
+  if (!pageRecord) {
+    redirect("/pages?error=Page+not+found")
+  }
+
+  const page = pageRecord
+  const notice = readFirstValue(resolvedSearchParams.notice)
+  const error = readFirstValue(resolvedSearchParams.error)
+
+  async function updatePageAction(formData: FormData) {
+    "use server"
+
+    await requirePermissionForRoute({
+      nextPath: "/pages",
+      permission: "pages:write",
+      scope: "team",
+    })
+
+    try {
+      await updatePage({
+        id: pageId,
+        title: readInputString(formData, "title"),
+        slug: readInputString(formData, "slug"),
+        status: readInputString(formData, "status"),
+        summary: readNullableString(formData, "summary"),
+        content: readInputString(formData, "content"),
+        seoTitle: readNullableString(formData, "seoTitle"),
+        seoDescription: readNullableString(formData, "seoDescription"),
+      })
+    } catch {
+      redirectWithState(pageId, {
+        error: "Failed to update page. Validate values and try again.",
+      })
+    }
+
+    redirectWithState(pageId, {
+      notice: "Page updated.",
+    })
+  }
+
+  async function deletePageAction() {
+    "use server"
+
+    await requirePermissionForRoute({
+      nextPath: "/pages",
+      permission: "pages:write",
+      scope: "team",
+    })
+
+    try {
+      await deletePage(pageId)
+    } catch {
+      redirectWithState(pageId, {
+        error: "Failed to delete page. Remove linked navigation references first.",
+      })
+    }
+
+    redirect("/pages?notice=Page+deleted")
+  }
+
+  return (
+    <AdminShell
+      role={role}
+      activePath="/pages"
+      badge="Admin App"
+      title="Page Editor"
+      description="Edit page metadata, content, and publication status."
+    >
+      {notice ? (
+        <section className="rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
+          {notice}
+        </section>
+      ) : null}
+
+      {error ? (
+        <section className="rounded-xl border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-800">
+          {error}
+        </section>
+      ) : null}
+
+      <section className="rounded-xl border border-neutral-200 p-6">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div>
+            <h2 className="text-xl font-medium">{page.title}</h2>
+            <p className="mt-1 text-xs text-neutral-600">ID: {page.id}</p>
+          </div>
+          <Link href="/pages" className="text-sm text-neutral-700 underline underline-offset-2">
+            Back to pages
+          </Link>
+        </div>
+
+        <form action={updatePageAction} className="mt-6 space-y-3">
+          <div className="grid gap-3 md:grid-cols-3">
+            <label className="space-y-1 md:col-span-2">
+              <span className="text-xs text-neutral-600">Title</span>
+              <input
+                name="title"
+                defaultValue={page.title}
+                required
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">Status</span>
+              <select
+                name="status"
+                defaultValue={page.status}
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              >
+                <option value="draft">draft</option>
+                <option value="published">published</option>
+              </select>
+            </label>
+          </div>
+
+          <label className="space-y-1">
+            <span className="text-xs text-neutral-600">Slug</span>
+            <input
+              name="slug"
+              defaultValue={page.slug}
+              required
+              className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+            />
+          </label>
+
+          <label className="space-y-1">
+            <span className="text-xs text-neutral-600">Summary</span>
+            <input
+              name="summary"
+              defaultValue={page.summary ?? ""}
+              className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+            />
+          </label>
+
+          <label className="space-y-1">
+            <span className="text-xs text-neutral-600">Content</span>
+            <textarea
+              name="content"
+              rows={10}
+              defaultValue={page.content}
+              required
+              className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+            />
+          </label>
+
+          <div className="grid gap-3 md:grid-cols-2">
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">SEO title</span>
+              <input
+                name="seoTitle"
+                defaultValue={page.seoTitle ?? ""}
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">SEO description</span>
+              <input
+                name="seoDescription"
+                defaultValue={page.seoDescription ?? ""}
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+          </div>
+
+          <Button type="submit">Save page</Button>
+        </form>
+      </section>
+
+      <section className="rounded-xl border border-red-300 bg-red-50 p-6">
+        <h3 className="text-lg font-medium text-red-800">Danger Zone</h3>
+        <p className="mt-1 text-sm text-red-700">
+          Deleting this page is permanent and may break linked navigation items.
+        </p>
+        <form action={deletePageAction} className="mt-4">
+          <Button type="submit" variant="secondary" className="border border-red-300 text-red-800">
+            Delete page
+          </Button>
+        </form>
+      </section>
+    </AdminShell>
+  )
+}

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

@@ -1,15 +1,92 @@
-import { AdminSectionPlaceholder } from "@/components/admin-section-placeholder"
+import { createPage, listPages } 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 { AdminShell } from "@/components/admin-shell"
 import { requirePermissionForRoute } from "@/lib/route-guards"
 
 export const dynamic = "force-dynamic"
 
-export default async function PagesManagementPage() {
+type SearchParamsInput = Record<string, string | string[] | undefined>
+
+function readFirstValue(value: string | string[] | undefined): string | null {
+  if (Array.isArray(value)) {
+    return value[0] ?? null
+  }
+
+  return value ?? null
+}
+
+function readInputString(formData: FormData, field: string): string {
+  const value = formData.get(field)
+  return typeof value === "string" ? value.trim() : ""
+}
+
+function readNullableString(formData: FormData, field: string): string | null {
+  const value = readInputString(formData, field)
+  return value.length > 0 ? value : null
+}
+
+function redirectWithState(params: { notice?: string; error?: string }) {
+  const query = new URLSearchParams()
+
+  if (params.notice) {
+    query.set("notice", params.notice)
+  }
+
+  if (params.error) {
+    query.set("error", params.error)
+  }
+
+  const value = query.toString()
+  redirect(value ? `/pages?${value}` : "/pages")
+}
+
+async function createPageAction(formData: FormData) {
+  "use server"
+
+  await requirePermissionForRoute({
+    nextPath: "/pages",
+    permission: "pages:write",
+    scope: "team",
+  })
+
+  try {
+    await createPage({
+      title: readInputString(formData, "title"),
+      slug: readInputString(formData, "slug"),
+      status: readInputString(formData, "status"),
+      summary: readNullableString(formData, "summary"),
+      content: readInputString(formData, "content"),
+      seoTitle: readNullableString(formData, "seoTitle"),
+      seoDescription: readNullableString(formData, "seoDescription"),
+    })
+  } catch {
+    redirectWithState({
+      error: "Failed to create page. Validate slug/title/content and try again.",
+    })
+  }
+
+  revalidatePath("/pages")
+  revalidatePath("/navigation")
+  redirectWithState({ notice: "Page created." })
+}
+
+export default async function PagesManagementPage({
+  searchParams,
+}: {
+  searchParams: Promise<SearchParamsInput>
+}) {
   const role = await requirePermissionForRoute({
     nextPath: "/pages",
     permission: "pages:read",
     scope: "team",
   })
+  const [resolvedSearchParams, pages] = await Promise.all([searchParams, listPages(100)])
+  const notice = readFirstValue(resolvedSearchParams.notice)
+  const error = readFirstValue(resolvedSearchParams.error)
 
   return (
     <AdminShell
@@ -17,18 +94,137 @@ export default async function PagesManagementPage() {
       activePath="/pages"
       badge="Admin App"
       title="Pages"
-      description="Manage page entities and publication workflows."
+      description="Create, update, and manage published page entities."
     >
-      <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.",
-        ]}
-      />
+      {notice ? (
+        <section className="rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
+          {notice}
+        </section>
+      ) : null}
+
+      {error ? (
+        <section className="rounded-xl border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-800">
+          {error}
+        </section>
+      ) : null}
+
+      <section className="rounded-xl border border-neutral-200 p-6">
+        <h2 className="text-xl font-medium">Create Page</h2>
+        <form action={createPageAction} className="mt-4 space-y-3">
+          <div className="grid gap-3 md:grid-cols-3">
+            <label className="space-y-1 md:col-span-2">
+              <span className="text-xs text-neutral-600">Title</span>
+              <input
+                name="title"
+                required
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">Status</span>
+              <select
+                name="status"
+                defaultValue="draft"
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              >
+                <option value="draft">draft</option>
+                <option value="published">published</option>
+              </select>
+            </label>
+          </div>
+
+          <label className="space-y-1">
+            <span className="text-xs text-neutral-600">Slug</span>
+            <input
+              name="slug"
+              required
+              className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+            />
+          </label>
+
+          <label className="space-y-1">
+            <span className="text-xs text-neutral-600">Summary</span>
+            <input
+              name="summary"
+              className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+            />
+          </label>
+
+          <label className="space-y-1">
+            <span className="text-xs text-neutral-600">Content</span>
+            <textarea
+              name="content"
+              rows={6}
+              required
+              className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+            />
+          </label>
+
+          <div className="grid gap-3 md:grid-cols-2">
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">SEO title</span>
+              <input
+                name="seoTitle"
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">SEO description</span>
+              <input
+                name="seoDescription"
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+          </div>
+
+          <Button type="submit">Create page</Button>
+        </form>
+      </section>
+
+      <section className="rounded-xl border border-neutral-200 p-6">
+        <h2 className="text-xl font-medium">Pages</h2>
+        <div className="mt-4 overflow-x-auto">
+          <table className="min-w-full text-left text-sm">
+            <thead className="text-xs uppercase tracking-wide text-neutral-500">
+              <tr>
+                <th className="py-2 pr-4">Title</th>
+                <th className="py-2 pr-4">Slug</th>
+                <th className="py-2 pr-4">Status</th>
+                <th className="py-2 pr-4">Updated</th>
+                <th className="py-2 pr-4">Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {pages.length === 0 ? (
+                <tr>
+                  <td className="py-3 text-neutral-500" colSpan={5}>
+                    No pages yet.
+                  </td>
+                </tr>
+              ) : (
+                pages.map((page) => (
+                  <tr key={page.id} className="border-t border-neutral-200">
+                    <td className="py-3 pr-4">{page.title}</td>
+                    <td className="py-3 pr-4 text-neutral-600">/{page.slug}</td>
+                    <td className="py-3 pr-4">{page.status}</td>
+                    <td className="py-3 pr-4 text-neutral-600">
+                      {page.updatedAt.toLocaleDateString("en-US")}
+                    </td>
+                    <td className="py-3 pr-4">
+                      <Link
+                        href={`/pages/${page.id}`}
+                        className="text-xs font-medium text-neutral-700 underline underline-offset-2"
+                      >
+                        Open
+                      </Link>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </section>
     </AdminShell>
   )
 }