From 6c5e4afd86b410f046c785fffd3ad4a06e6a8cd1 Mon Sep 17 00:00:00 2001
From: Chandler Copeland <ccopeland@motivhealth.com>
Date: Thu, 19 Mar 2026 22:01:58 -0600
Subject: [PATCH] fix(04-03): move ssr:false dynamic import into client wrapper
 to fix DOMMatrix SSR error

---
 .../documents/[docId]/_components/PdfViewerWrapper.tsx    | 8 ++++++++
 .../src/app/portal/(protected)/documents/[docId]/page.tsx | 4 ++--
 2 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PdfViewerWrapper.tsx

diff --git a/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PdfViewerWrapper.tsx b/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PdfViewerWrapper.tsx
new file mode 100644
index 0000000..ae241d0
--- /dev/null
+++ b/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PdfViewerWrapper.tsx
@@ -0,0 +1,8 @@
+'use client';
+import dynamic from 'next/dynamic';
+
+const PdfViewer = dynamic(() => import('./PdfViewer').then(m => m.PdfViewer), { ssr: false });
+
+export function PdfViewerWrapper({ docId }: { docId: string }) {
+  return <PdfViewer docId={docId} />;
+}
diff --git a/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/page.tsx b/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/page.tsx
index f691366..e32ab10 100644
--- a/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/page.tsx
+++ b/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/page.tsx
@@ -4,7 +4,7 @@ import { db } from '@/lib/db';
 import { documents, clients } from '@/lib/db/schema';
 import { eq } from 'drizzle-orm';
 import Link from 'next/link';
-import { PdfViewer } from './_components/PdfViewer';
+import { PdfViewerWrapper } from './_components/PdfViewerWrapper';
 
 export default async function DocumentPage({
   params,
@@ -37,7 +37,7 @@ export default async function DocumentPage({
           <p className="text-sm text-gray-500">{doc.client?.name}</p>
         </div>
       </div>
-      <PdfViewer docId={docId} />
+      <PdfViewerWrapper docId={docId} />
     </div>
   );
 }