old.cms.fellies.org/apps/admin/src/app/pages/page.tsx

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"

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
      role={role}
      activePath="/pages"
      badge="Admin App"
      title="Pages"
      description="Create, update, and manage published page entities."
    >
      {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>
  )
}