feat(admin): add posts CRUD sandbox and shared CRUD foundation

apps/admin/src/app/page.tsx

@@ -1,6 +1,7 @@
 import { hasPermission } from "@cms/content/rbac"
-import { listPosts } from "@cms/db"
+import { createPost, deletePost, listPosts, updatePost } from "@cms/db"
 import { Button } from "@cms/ui/button"
+import { revalidatePath } from "next/cache"
 import Link from "next/link"
 import { redirect } from "next/navigation"
 
@@ -9,7 +10,131 @@ import { LogoutButton } from "./logout-button"
 
 export const dynamic = "force-dynamic"
 
-export default async function AdminHomePage() {
+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 readRequiredField(formData: FormData, field: string): string {
+  const value = formData.get(field)
+
+  if (typeof value !== "string") {
+    return ""
+  }
+
+  return value.trim()
+}
+
+function readOptionalField(formData: FormData, field: string): string | undefined {
+  const value = readRequiredField(formData, field)
+  return value.length > 0 ? value : undefined
+}
+
+async function requireNewsWritePermission() {
+  const role = await resolveRoleFromServerContext()
+
+  if (!role || !hasPermission(role, "news:write", "team")) {
+    redirect("/unauthorized?required=news:write&scope=team")
+  }
+}
+
+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 ? `/?${value}` : "/")
+}
+
+async function createPostAction(formData: FormData) {
+  "use server"
+
+  await requireNewsWritePermission()
+
+  const status = readRequiredField(formData, "status")
+
+  try {
+    await createPost({
+      title: readRequiredField(formData, "title"),
+      slug: readRequiredField(formData, "slug"),
+      excerpt: readOptionalField(formData, "excerpt"),
+      body: readRequiredField(formData, "body"),
+      status: status === "published" ? "published" : "draft",
+    })
+  } catch {
+    redirectWithState({ error: "Create failed. Please check your input." })
+  }
+
+  revalidatePath("/")
+  redirectWithState({ notice: "Post created." })
+}
+
+async function updatePostAction(formData: FormData) {
+  "use server"
+
+  await requireNewsWritePermission()
+
+  const id = readRequiredField(formData, "id")
+  const status = readRequiredField(formData, "status")
+
+  if (!id) {
+    redirectWithState({ error: "Update failed. Missing post id." })
+  }
+
+  try {
+    await updatePost(id, {
+      title: readRequiredField(formData, "title"),
+      slug: readRequiredField(formData, "slug"),
+      excerpt: readOptionalField(formData, "excerpt"),
+      body: readRequiredField(formData, "body"),
+      status: status === "published" ? "published" : "draft",
+    })
+  } catch {
+    redirectWithState({ error: "Update failed. Please check your input." })
+  }
+
+  revalidatePath("/")
+  redirectWithState({ notice: "Post updated." })
+}
+
+async function deletePostAction(formData: FormData) {
+  "use server"
+
+  await requireNewsWritePermission()
+
+  const id = readRequiredField(formData, "id")
+
+  if (!id) {
+    redirectWithState({ error: "Delete failed. Missing post id." })
+  }
+
+  try {
+    await deletePost(id)
+  } catch {
+    redirectWithState({ error: "Delete failed." })
+  }
+
+  revalidatePath("/")
+  redirectWithState({ notice: "Post deleted." })
+}
+
+export default async function AdminHomePage({
+  searchParams,
+}: {
+  searchParams: Promise<SearchParamsInput>
+}) {
   const role = await resolveRoleFromServerContext()
 
   if (!role) {
@@ -20,6 +145,9 @@ export default async function AdminHomePage() {
     redirect("/unauthorized?required=news:read&scope=team")
   }
 
+  const resolvedSearchParams = await searchParams
+  const notice = readFirstValue(resolvedSearchParams.notice)
+  const error = readFirstValue(resolvedSearchParams.error)
   const canCreatePost = hasPermission(role, "news:write", "team")
   const posts = await listPosts()
 
@@ -40,22 +168,168 @@ export default async function AdminHomePage() {
         </div>
       </header>
 
+      {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="mb-4 flex items-center justify-between">
-          <h2 className="text-xl font-medium">Posts</h2>
-          <Button disabled={!canCreatePost}>Create post</Button>
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <h2 className="text-xl font-medium">Posts CRUD Sandbox</h2>
+            <p className="text-xs uppercase tracking-wide text-neutral-500">MVP0 functional test</p>
+          </div>
+
+          {canCreatePost ? (
+            <form
+              action={createPostAction}
+              className="space-y-3 rounded-lg border border-neutral-200 p-4"
+            >
+              <h3 className="text-sm font-semibold">Create post</h3>
+              <div className="grid gap-3 md:grid-cols-2">
+                <label className="space-y-1">
+                  <span className="text-xs text-neutral-600">Title</span>
+                  <input
+                    name="title"
+                    required
+                    minLength={3}
+                    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">Slug</span>
+                  <input
+                    name="slug"
+                    required
+                    minLength={3}
+                    className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+                  />
+                </label>
+              </div>
+              <label className="space-y-1">
+                <span className="text-xs text-neutral-600">Excerpt</span>
+                <input
+                  name="excerpt"
+                  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">Body</span>
+                <textarea
+                  name="body"
+                  required
+                  minLength={1}
+                  rows={4}
+                  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>
+              <Button type="submit">Create post</Button>
+            </form>
+          ) : (
+            <div className="rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 text-sm text-amber-800">
+              You can read posts, but your role cannot create/update/delete posts.
+            </div>
+          )}
         </div>
 
         <div className="space-y-3">
           {posts.map((post) => (
             <article key={post.id} className="rounded-lg border border-neutral-200 p-4">
-              <div className="flex items-center justify-between gap-3">
-                <h3 className="text-lg font-medium">{post.title}</h3>
-                <span className="rounded-full bg-neutral-100 px-3 py-1 text-xs uppercase tracking-wide">
-                  {post.status}
-                </span>
-              </div>
-              <p className="mt-2 text-sm text-neutral-600">{post.slug}</p>
+              {canCreatePost ? (
+                <>
+                  <form action={updatePostAction} className="space-y-3">
+                    <input type="hidden" name="id" value={post.id} />
+                    <div className="grid gap-3 md:grid-cols-2">
+                      <label className="space-y-1">
+                        <span className="text-xs text-neutral-600">Title</span>
+                        <input
+                          name="title"
+                          required
+                          minLength={3}
+                          defaultValue={post.title}
+                          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">Slug</span>
+                        <input
+                          name="slug"
+                          required
+                          minLength={3}
+                          defaultValue={post.slug}
+                          className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+                        />
+                      </label>
+                    </div>
+                    <label className="space-y-1">
+                      <span className="text-xs text-neutral-600">Excerpt</span>
+                      <input
+                        name="excerpt"
+                        defaultValue={post.excerpt ?? ""}
+                        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">Body</span>
+                      <textarea
+                        name="body"
+                        required
+                        minLength={1}
+                        rows={4}
+                        defaultValue={post.body}
+                        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={post.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>
+                    <Button type="submit">Save changes</Button>
+                  </form>
+                  <form action={deletePostAction} className="mt-3">
+                    <input type="hidden" name="id" value={post.id} />
+                    <Button type="submit" variant="secondary">
+                      Delete
+                    </Button>
+                  </form>
+                </>
+              ) : (
+                <>
+                  <div className="flex items-center justify-between gap-3">
+                    <h3 className="text-lg font-medium">{post.title}</h3>
+                    <span className="rounded-full bg-neutral-100 px-3 py-1 text-xs uppercase tracking-wide">
+                      {post.status}
+                    </span>
+                  </div>
+                  <p className="mt-2 text-sm text-neutral-600">{post.slug}</p>
+                  <p className="mt-2 text-sm text-neutral-600">{post.excerpt ?? "No excerpt"}</p>
+                </>
+              )}
             </article>
           ))}
         </div>