Initial commit: Craft2Prints with Stages 1-3

2026-07-15 18:09:59 +01:00
commit 41937ffc15
158 changed files with 16054 additions and 0 deletions
@@ -0,0 +1,71 @@
+import { notFound } from 'next/navigation';
+import { prisma } from '@/lib/prisma';
+import { toProofDTO } from '@/lib/product';
+import ApproveSection from '@/components/ApproveSection';
+import Chat from '@/components/Chat';
+import Price from '@/components/Price';
+
+export default async function ProofPage({ params }: { params: { id: string } }) {
+  const row = await prisma.designProof.findUnique({
+    where: { id: params.id },
+    include: { product: true },
+  });
+  if (!row) notFound();
+
+  const proof = toProofDTO(row);
+
+  return (
+    <div className="mx-auto max-w-4xl px-6 py-14">
+      <p className="tag-label text-splash-pink">Your design is ready to review</p>
+      <h1 className="mt-2 font-display text-4xl">{proof.productName}</h1>
+      {proof.customerName && <p className="mt-1 text-muted">Hi {proof.customerName} — here's what we made.</p>}
+
+      <div className="mt-10 grid gap-10 md:grid-cols-2">
+        <div className="border border-line bg-surface p-6">
+          {proof.imageDataUrl ? (
+            <img src={proof.imageDataUrl} alt={`${proof.productName} design`} className="w-full object-contain" />
+          ) : (
+            <p className="text-center text-sm text-muted">No image was uploaded with this design.</p>
+          )}
+        </div>
+
+        <div className="flex flex-col gap-6">
+          {proof.note && (
+            <div className="border-l-2 border-splash-pink pl-4 text-sm italic text-ink">"{proof.note}"</div>
+          )}
+
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between border-b border-line pb-2">
+              <span className="text-muted">Color</span>
+              <span className="flex items-center gap-2">
+                <span
+                  className="h-4 w-4 rounded-full border border-line"
+                  style={{ backgroundColor: proof.color }}
+                />
+                {proof.color}
+              </span>
+            </div>
+            <div className="flex justify-between border-b border-line pb-2">
+              <span className="text-muted">Quantity</span>
+              <span>{proof.quantity}</span>
+            </div>
+            <div className="flex justify-between border-b border-line pb-2">
+              <span className="text-muted">Price</span>
+              <span className="font-mono"><Price cents={proof.unitPrice * proof.quantity} /></span>
+            </div>
+          </div>
+
+          <ApproveSection proof={proof} />
+
+          <p className="text-center text-sm text-muted">
+            Not quite right? Send a message below and we'll fix it up.
+          </p>
+        </div>
+      </div>
+
+      <div className="mt-10">
+        <Chat proofId={proof.id} role="CUSTOMER" otherPartyLabel="Craft2Prints" />
+      </div>
+    </div>
+  );
+}