Add commission type example image

prisma/schema.prisma

@@ -399,6 +399,7 @@ model CommissionGuidelines {
   updatedAt DateTime @updatedAt
 
   markdown String
+  exampleImageUrl String?
   isActive Boolean @default(true)
 
   @@index([isActive])

src/app/(normal)/commissions/page.tsx

@@ -1,21 +1,60 @@
 import { CommissionCard } from "@/components/commissions/CommissionCard";
 import CommissionGuidelines from "@/components/commissions/CommissionGuidelines";
 import { CommissionOrderForm } from "@/components/commissions/CommissionOrderForm";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import { prisma } from "@/lib/prisma";
+import Image from "next/image";
 
 export default async function CommissionsPage() {
-  const commissions = await prisma.commissionType.findMany({
+  const [commissions, guidelines] = await Promise.all([
+    prisma.commissionType.findMany({
       include: {
         options: { include: { option: true }, orderBy: { sortIndex: "asc" } },
         extras: { include: { extra: true }, orderBy: { sortIndex: "asc" } },
         customInputs: { include: { customInput: true }, orderBy: { sortIndex: "asc" } },
       },
       orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
-  })
+    }),
+    prisma.commissionGuidelines.findFirst({
+      where: { isActive: true },
+      orderBy: { createdAt: "desc" },
+      select: { exampleImageUrl: true },
+    }),
+  ]);
 
   return (
     <div className="mx-auto w-full max-w-6xl px-4 py-8 flex flex-col gap-8">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <h1 className="text-3xl font-bold">Commission Pricing</h1>
+        {guidelines?.exampleImageUrl ? (
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button variant="secondary">View example</Button>
+            </DialogTrigger>
+            <DialogContent className="w-[min(95vw,1200px)] max-w-300 p-4 sm:p-6">
+              <DialogHeader>
+                <DialogTitle></DialogTitle>
+              </DialogHeader>
+              <div className="relative w-full h-[80vh] max-h-[80vh] overflow-hidden rounded-xl border-2 border-border/60 bg-muted shadow-2xl">
+                <Image
+                  src={guidelines.exampleImageUrl}
+                  alt="Commission example"
+                  fill
+                  sizes="(max-width: 640px) 95vw, 1200px"
+                  className="object-contain"
+                />
+              </div>
+            </DialogContent>
+          </Dialog>
+        ) : null}
+      </div>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 items-start">
         {commissions.map((commission) => (
           <CommissionCard key={commission.id} commission={commission} />