+
+ );
+ }
+
+ if (!deliverable) {
+ return (
+
+ Deliverable not found.
+
+ );
+ }
+
+ return (
+
+ {/* ── Top bar ──────────────────────────────────────────────── */}
+
+ );
+}
diff --git a/src/app/api/stages/[stageId]/revisions/[revisionId]/upload/route.ts b/src/app/api/stages/[stageId]/revisions/[revisionId]/upload/route.ts
new file mode 100644
index 0000000..0c03e51
--- /dev/null
+++ b/src/app/api/stages/[stageId]/revisions/[revisionId]/upload/route.ts
@@ -0,0 +1,103 @@
+import { NextResponse } from "next/server";
+import { getAuthSession, badRequest, notFound, serverError } from "@/lib/api-utils";
+import { prisma } from "@/lib/prisma";
+import {
+ processAndStoreImage,
+ deleteRevisionImage,
+} from "@/lib/services/upload-service";
+import type { UploadedImage } from "@/lib/services/upload-service";
+
+type Params = { params: Promise<{ stageId: string; revisionId: string }> };
+
+interface Attachments {
+ referenceImage?: UploadedImage;
+ currentImage?: UploadedImage;
+}
+
+// POST /api/stages/:stageId/revisions/:revisionId/upload
+export async function POST(request: Request, { params }: Params) {
+ const { error } = await getAuthSession();
+ if (error) return error;
+
+ try {
+ const { stageId, revisionId } = await params;
+
+ // Verify revision belongs to this stage
+ const revision = await prisma.revision.findFirst({
+ where: { id: revisionId, deliverableStageId: stageId },
+ });
+ if (!revision) return notFound("Revision not found");
+
+ const formData = await request.formData();
+ const file = formData.get("file") as File | null;
+ const imageType = formData.get("type") as "reference" | "current" | null;
+
+ if (!file) return badRequest("No file provided");
+ if (!imageType || !["reference", "current"].includes(imageType)) {
+ return badRequest('Image type must be "reference" or "current"');
+ }
+
+ // Process and store the image
+ const uploaded = await processAndStoreImage(revisionId, file, imageType);
+
+ // Update revision attachments JSON
+ const existing = (revision.attachments as Attachments) ?? {};
+ const updated: Attachments = {
+ ...existing,
+ [imageType === "reference" ? "referenceImage" : "currentImage"]: uploaded,
+ };
+
+ await prisma.revision.update({
+ where: { id: revisionId },
+ data: { attachments: updated },
+ });
+
+ return NextResponse.json(uploaded, { status: 201 });
+ } catch (e) {
+ if (e instanceof Error && e.message.includes("Unsupported file type")) {
+ return badRequest(e.message);
+ }
+ if (e instanceof Error && e.message.includes("File too large")) {
+ return badRequest(e.message);
+ }
+ return serverError(e);
+ }
+}
+
+// DELETE /api/stages/:stageId/revisions/:revisionId/upload?type=reference|current
+export async function DELETE(request: Request, { params }: Params) {
+ const { error } = await getAuthSession();
+ if (error) return error;
+
+ try {
+ const { stageId, revisionId } = await params;
+ const url = new URL(request.url);
+ const imageType = url.searchParams.get("type") as "reference" | "current" | null;
+
+ if (!imageType || !["reference", "current"].includes(imageType)) {
+ return badRequest('Query param "type" must be "reference" or "current"');
+ }
+
+ const revision = await prisma.revision.findFirst({
+ where: { id: revisionId, deliverableStageId: stageId },
+ });
+ if (!revision) return notFound("Revision not found");
+
+ // Delete files from disk
+ await deleteRevisionImage(revisionId, imageType);
+
+ // Remove from attachments JSON
+ const existing = (revision.attachments as Attachments) ?? {};
+ const key = imageType === "reference" ? "referenceImage" : "currentImage";
+ const { [key]: _removed, ...rest } = existing;
+
+ await prisma.revision.update({
+ where: { id: revisionId },
+ data: { attachments: Object.keys(rest).length > 0 ? rest : null },
+ });
+
+ return NextResponse.json({ ok: true });
+ } catch (e) {
+ return serverError(e);
+ }
+}
diff --git a/src/components/review/image-gallery.tsx b/src/components/review/image-gallery.tsx
new file mode 100644
index 0000000..22b45d1
--- /dev/null
+++ b/src/components/review/image-gallery.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+interface RevisionImage {
+ revisionId: string;
+ roundNumber: number;
+ type: "reference" | "current";
+ url: string;
+ thumbnailUrl: string;
+ filename: string;
+}
+
+interface ImageGalleryProps {
+ images: RevisionImage[];
+ activeUrl: string | null;
+ onSelect: (image: RevisionImage) => void;
+}
+
+export function ImageGallery({
+ images,
+ activeUrl,
+ onSelect,
+}: ImageGalleryProps) {
+ if (images.length === 0) return null;
+
+ return (
+
+
+
+ {/* ── Image viewer ─────────────────────────────────────────── */}
+
+
+
+
+ {/* Stage navigator */}
+ {selectedStage && (
+ + {deliverable.name} +
+
+
+
+
+
+
+
+
+ Upload Images
+
+
+
+
+ )}
+
+
+ {selectedStage.template.order}.
+
+
+ {selectedStage.template.name}
+
+
+
+
+
+
+ ) : (
+ + Uploading to Round {latestRevision.roundNumber} +
+
+
+ + Reference Image +
+
+
+ + Current Render +
++ Submit a revision first before uploading images. +
+ )} +
+ setActiveImageUrl(img.url)}
+ />
+
+ )}
+
+
+ Gallery
+
+
+ {images.map((img) => (
+
+ ))}
+
+ );
+}
diff --git a/src/components/review/image-upload-zone.tsx b/src/components/review/image-upload-zone.tsx
new file mode 100644
index 0000000..9b72128
--- /dev/null
+++ b/src/components/review/image-upload-zone.tsx
@@ -0,0 +1,196 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+import { Upload, ImageIcon, X, Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+
+interface ImageUploadZoneProps {
+ stageId: string;
+ revisionId: string;
+ imageType: "reference" | "current";
+ existingImage?: {
+ url: string;
+ filename: string;
+ width: number;
+ height: number;
+ } | null;
+ onUploadComplete: () => void;
+ compact?: boolean;
+}
+
+export function ImageUploadZone({
+ stageId,
+ revisionId,
+ imageType,
+ existingImage,
+ onUploadComplete,
+ compact = false,
+}: ImageUploadZoneProps) {
+ const [isDragging, setIsDragging] = useState(false);
+ const [isUploading, setIsUploading] = useState(false);
+ const fileInputRef = useRef
+ 
+
+ );
+ }
+
+ // Empty state: drop zone
+ return (
+
+
+
+
+
+ {
+ e.preventDefault();
+ setIsDragging(true);
+ }}
+ onDragLeave={() => setIsDragging(false)}
+ onDrop={handleDrop}
+ onClick={() => !isUploading && fileInputRef.current?.click()}
+ role="button"
+ tabIndex={0}
+ >
+ {isUploading ? (
+
+ );
+}
diff --git a/src/components/review/image-viewer.tsx b/src/components/review/image-viewer.tsx
new file mode 100644
index 0000000..f62a7a9
--- /dev/null
+++ b/src/components/review/image-viewer.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { useEffect } from "react";
+import { useImageViewer } from "@/hooks/use-image-viewer";
+import { ZoomControls } from "@/components/review/zoom-controls";
+import { Minimap } from "@/components/review/minimap";
+import { ImageIcon, Loader2 } from "lucide-react";
+
+interface ImageViewerProps {
+ src: string | null;
+ imageDimensionsOverride?: { width: number; height: number } | null;
+ className?: string;
+}
+
+export function ImageViewer({
+ src,
+ imageDimensionsOverride,
+ className,
+}: ImageViewerProps) {
+ const viewer = useImageViewer();
+
+ // Load image when src changes
+ useEffect(() => {
+ if (src) {
+ viewer.loadImage(src);
+ }
+ }, [src]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ const containerRect =
+ viewer.containerRef.current?.getBoundingClientRect();
+ const containerW = containerRect?.width ?? 0;
+ const containerH = containerRect?.height ?? 0;
+ const dims = imageDimensionsOverride ?? viewer.imageDimensions;
+
+ return (
+ + {imageType === "reference" ? "Reference Image" : "Current Render"} +
++ Drop file or click to browse +
++ PNG, JPEG, WebP, TIFF — up to 50MB +
+ + )} + +
+ {/* Toolbar */}
+
+ );
+}
diff --git a/src/components/review/minimap.tsx b/src/components/review/minimap.tsx
new file mode 100644
index 0000000..374b705
--- /dev/null
+++ b/src/components/review/minimap.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { useCallback, useEffect, useRef } from "react";
+
+interface MinimapProps {
+ imageSrc: string | null;
+ imageWidth: number;
+ imageHeight: number;
+ zoom: number;
+ panX: number;
+ panY: number;
+ containerWidth: number;
+ containerHeight: number;
+ onNavigate: (panX: number, panY: number) => void;
+}
+
+const MINIMAP_SIZE = 150;
+
+export function Minimap({
+ imageSrc,
+ imageWidth,
+ imageHeight,
+ zoom,
+ panX,
+ panY,
+ containerWidth,
+ containerHeight,
+ onNavigate,
+}: MinimapProps) {
+ const canvasRef = useRef
+
+
+ {/* Canvas viewport */}
+
+
+
+ {/* Pixel info */}
+ {viewer.pixelInfo && (
+
+
+ {viewer.pixelInfo.x}, {viewer.pixelInfo.y}
+
+
+ )}
+
+
+ {viewer.pixelInfo.color}
+
+
+ {!src && !viewer.isLoading && (
+ {
+ viewer.setPan(panX, panY);
+ }}
+ />
+ )}
+
+
+
+ )}
+
+ {viewer.isLoading && (
+ No image loaded
++ Upload images to a revision to start reviewing +
+
+
+ )}
+
+
+
+ {/* Minimap */}
+ {src && dims && (
+
+
+
+ );
+}
diff --git a/src/components/review/zoom-controls.tsx b/src/components/review/zoom-controls.tsx
new file mode 100644
index 0000000..1e012d2
--- /dev/null
+++ b/src/components/review/zoom-controls.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { Minus, Plus, Maximize, Square } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import type { ZoomPreset } from "@/hooks/use-image-viewer";
+
+const PRESETS: { label: string; value: ZoomPreset }[] = [
+ { label: "Fit", value: "fit" },
+ { label: "50%", value: "50" },
+ { label: "100%", value: "100" },
+ { label: "150%", value: "150" },
+ { label: "200%", value: "200" },
+];
+
+interface ZoomControlsProps {
+ zoom: number;
+ onZoomIn: () => void;
+ onZoomOut: () => void;
+ onFitToView: () => void;
+ onZoomToPreset: (preset: ZoomPreset) => void;
+}
+
+export function ZoomControls({
+ zoom,
+ onZoomIn,
+ onZoomOut,
+ onFitToView,
+ onZoomToPreset,
+}: ZoomControlsProps) {
+ const percent = Math.round(zoom * 100);
+
+ return (
+
+
+
+
+
+
+
+
+ {PRESETS.map((p) => (
+ onZoomToPreset(p.value)}
+ className="font-mono text-xs"
+ >
+ {p.label}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/hooks/use-image-viewer.ts b/src/hooks/use-image-viewer.ts
new file mode 100644
index 0000000..41c54e4
--- /dev/null
+++ b/src/hooks/use-image-viewer.ts
@@ -0,0 +1,395 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export type ZoomPreset = "fit" | "50" | "100" | "150" | "200";
+
+interface ViewerState {
+ zoom: number;
+ panX: number;
+ panY: number;
+}
+
+interface ImageDimensions {
+ width: number;
+ height: number;
+}
+
+export interface UseImageViewerReturn {
+ canvasRef: React.RefObject