`apps/web/src/app/plans/[id]/page.tsx`

51 lines
import Link from "next/link";
import { notFound } from "next/navigation";
import { prisma } from "@homesonspec/database";
import { fmtPrice } from "@homesonspec/shared-ui";

export const dynamic = "force-dynamic";

export default async function PlanPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const plan = await prisma.floorPlan.findUnique({
    where: { id },
    include: {
      community: true,
      builder: true,
      homes: { where: { status: "PUBLISHED", isDemo: false } },
    },
  });
  if (!plan) notFound();

  return (
    <div className="mx-auto max-w-4xl px-4 py-8">
      <nav className="text-sm text-neutral-500">
        <Link href={`/communities/${plan.community.slug}`} className="hover:text-teal-700">{plan.community.name}</Link>
      </nav>
      <h1 className="mt-2 text-3xl font-bold">{plan.name}</h1>
      <p className="mt-1 text-neutral-600">{plan.builder.name} · {plan.community.name}</p>
      <dl className="mt-6 grid grid-cols-2 gap-4 text-sm sm:grid-cols-4">
        <div><dt className="text-neutral-500">Base price</dt><dd className="font-semibold">{fmtPrice(plan.basePrice === null ? null : Number(plan.basePrice))}</dd></div>
        <div><dt className="text-neutral-500">Beds</dt><dd className="font-semibold">{plan.beds ?? "—"}{plan.bedsMax && plan.bedsMax !== plan.beds ? `–${plan.bedsMax}` : ""}</dd></div>
        <div><dt className="text-neutral-500">Sq ft</dt><dd className="font-semibold">{plan.sqft?.toLocaleString() ?? "—"}</dd></div>
        <div><dt className="text-neutral-500">Stories</dt><dd className="font-semibold">{plan.stories ?? "—"}</dd></div>
      </dl>
      <p className="mt-2 text-xs text-neutral-400">
        Floor-plan drawings render only when the source registry confirms media rights (rights status: {plan.planMediaRights ?? "none"}).
      </p>
      <section className="mt-8">
        <h2 className="text-xl font-semibold">Available homes on this plan</h2>
        <div className="mt-3 grid gap-4 sm:grid-cols-2">
          {plan.homes.map((home) => (
            <Link key={home.id} href={`/homes/${home.id}`} className="rounded-lg border border-neutral-200 p-3 text-sm hover:border-teal-400">
              <div className="font-semibold">{fmtPrice(home.price === null ? null : Number(home.price))}</div>
              <div className="text-neutral-600">{home.street}</div>
            </Link>
          ))}
          {plan.homes.length === 0 && <p className="text-sm text-neutral-500">No inventory homes on this plan right now.</p>}
        </div>
      </section>
    </div>
  );
}