From 7a367363b16a487bf0f4a71ef817024d72330c3d Mon Sep 17 00:00:00 2001
From: Chandler Copeland <ccopeland@motivhealth.com>
Date: Fri, 20 Mar 2026 00:00:22 -0600
Subject: [PATCH] feat(05-02): extend PdfViewer with pageInfo state and
 FieldPlacer integration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add pageInfo state (PageInfo | null) to track rendered PDF page dimensions
- Wire onLoadSuccess callback on Page to capture originalWidth/Height using Math.max mediaBox pattern
- Import and wrap Document/Page tree inside FieldPlacer component
- Pass docId, pageInfo, currentPage to FieldPlacer for coordinate conversion
- Only scale prop used on Page (not both width+scale — avoids double scaling)
- All existing controls (Prev, Next, Zoom In/Out, Download) preserved unchanged
---
 .../[docId]/_components/PdfViewer.tsx         | 40 +++++++++++++++----
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PdfViewer.tsx b/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PdfViewer.tsx
index 3344c37..e2c09b7 100644
--- a/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PdfViewer.tsx
+++ b/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PdfViewer.tsx
@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { Document, Page, pdfjs } from 'react-pdf';
 import 'react-pdf/dist/Page/AnnotationLayer.css';
 import 'react-pdf/dist/Page/TextLayer.css';
+import { FieldPlacer } from './FieldPlacer';
 
 // Worker setup — must use import.meta.url for local/Docker environments (no CDN)
 pdfjs.GlobalWorkerOptions.workerSrc = new URL(
@@ -10,10 +11,19 @@ pdfjs.GlobalWorkerOptions.workerSrc = new URL(
   import.meta.url,
 ).toString();
 
+interface PageInfo {
+  originalWidth: number;
+  originalHeight: number;
+  width: number;
+  height: number;
+  scale: number;
+}
+
 export function PdfViewer({ docId }: { docId: string }) {
   const [numPages, setNumPages] = useState(0);
   const [pageNumber, setPageNumber] = useState(1);
   const [scale, setScale] = useState(1.0);
+  const [pageInfo, setPageInfo] = useState<PageInfo | null>(null);
 
   return (
     <div className="flex flex-col items-center gap-4">
@@ -54,13 +64,29 @@ export function PdfViewer({ docId }: { docId: string }) {
         </a>
       </div>
 
-      <Document
-        file={`/api/documents/${docId}/file`}
-        onLoadSuccess={({ numPages }) => setNumPages(numPages)}
-        className="shadow-lg"
-      >
-        <Page pageNumber={pageNumber} scale={scale} />
-      </Document>
+      {/* PDF canvas wrapped in FieldPlacer for drag-and-drop field placement */}
+      <FieldPlacer docId={docId} pageInfo={pageInfo} currentPage={pageNumber}>
+        <Document
+          file={`/api/documents/${docId}/file`}
+          onLoadSuccess={({ numPages }) => setNumPages(numPages)}
+          className="shadow-lg"
+        >
+          <Page
+            pageNumber={pageNumber}
+            scale={scale}
+            onLoadSuccess={(page) => {
+              setPageInfo({
+                // Math.max handles non-standard mediaBox ordering (view is [x1, y1, x2, y2])
+                originalWidth: Math.max(page.view[0], page.view[2]),
+                originalHeight: Math.max(page.view[1], page.view[3]),
+                width: page.width,
+                height: page.height,
+                scale: page.scale,
+              });
+            }}
+          />
+        </Document>
+      </FieldPlacer>
     </div>
   );
 }