From e179b9284f37a5465d42d437d31bee7945884473 Mon Sep 17 00:00:00 2001
From: Chandler Copeland <ccopeland@motivhealth.com>
Date: Sat, 21 Mar 2026 13:41:04 -0600
Subject: [PATCH] fix(10-03): transparent field boxes and fixed-size checkbox
 in FieldPlacer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- preparePdf: remove opaque fill from all field type rectangles (signature,
  initials, checkbox, date, text) — underlying PDF content now shows through
- preparePdf: checkbox draws X lines only (no border rectangle); date draws
  no placeholder at all; text draws nothing (position marker only)
- sign route: remove white overwrite rectangle on date stamp — date text
  draws directly on existing PDF content
- FieldPlacer: suppress resize corner handles for checkbox fields; hide
  "Checkbox" label (too small at 24x24pt); checkbox is fixed-size only

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/app/api/sign/[token]/route.ts         |  7 +---
 .../[docId]/_components/FieldPlacer.tsx       |  6 ++--
 .../src/lib/pdf/prepare-document.ts           | 33 +++----------------
 3 files changed, 10 insertions(+), 36 deletions(-)

diff --git a/teressa-copeland-homes/src/app/api/sign/[token]/route.ts b/teressa-copeland-homes/src/app/api/sign/[token]/route.ts
index 854a21b..36708d7 100644
--- a/teressa-copeland-homes/src/app/api/sign/[token]/route.ts
+++ b/teressa-copeland-homes/src/app/api/sign/[token]/route.ts
@@ -191,12 +191,7 @@ export async function POST(
     for (const field of dateFields) {
       const page = pages[field.page - 1];
       if (!page) continue;
-      // Overwrite the amber placeholder rectangle with white background + date text
-      page.drawRectangle({
-        x: field.x, y: field.y, width: field.width, height: field.height,
-        borderColor: rgb(0.39, 0.45, 0.55), borderWidth: 0.5,
-        color: rgb(1.0, 1.0, 1.0),
-      });
+      // Draw signing date directly — no background rectangle so underlying PDF content shows through
       page.drawText(signingDateStr, {
         x: field.x + 4,
         y: field.y + field.height / 2 - 4,  // vertically center
diff --git a/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/FieldPlacer.tsx b/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/FieldPlacer.tsx
index c0f80e4..7465543 100644
--- a/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/FieldPlacer.tsx
+++ b/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/FieldPlacer.tsx
@@ -639,7 +639,9 @@ export function FieldPlacer({ docId, pageInfo, currentPage, children, readOnly =
               handleMoveStart(e, field.id);
             }}
           >
-            <span style={{ pointerEvents: 'none' }}>{fieldLabel}</span>
+            {fieldType !== 'checkbox' && (
+              <span style={{ pointerEvents: 'none' }}>{fieldLabel}</span>
+            )}
             {!readOnly && (
               <button
                 data-no-move
@@ -673,7 +675,7 @@ export function FieldPlacer({ docId, pageInfo, currentPage, children, readOnly =
                 ×
               </button>
             )}
-            {!readOnly && (
+            {!readOnly && fieldType !== 'checkbox' && (
               <>
                 {resizeHandle('nw')}
                 {resizeHandle('ne')}
diff --git a/teressa-copeland-homes/src/lib/pdf/prepare-document.ts b/teressa-copeland-homes/src/lib/pdf/prepare-document.ts
index 3dd3df8..733a9ed 100644
--- a/teressa-copeland-homes/src/lib/pdf/prepare-document.ts
+++ b/teressa-copeland-homes/src/lib/pdf/prepare-document.ts
@@ -95,11 +95,10 @@ export async function preparePdf(
     const fieldType = getFieldType(field);
 
     if (fieldType === 'client-signature') {
-      // Blue "Sign Here" placeholder — client will sign at signing time
+      // Blue "Sign Here" placeholder — transparent background, border + label only
       page.drawRectangle({
         x: field.x, y: field.y, width: field.width, height: field.height,
         borderColor: rgb(0.15, 0.39, 0.92), borderWidth: 1.5,
-        color: rgb(0.90, 0.94, 0.99),
       });
       page.drawText('Sign Here', {
         x: field.x + 4, y: field.y + 4, size: 8, font: helvetica,
@@ -107,11 +106,10 @@ export async function preparePdf(
       });
 
     } else if (fieldType === 'initials') {
-      // Purple "Initials" placeholder — client will initial at signing time
+      // Purple "Initials" placeholder — transparent background, border + label only
       page.drawRectangle({
         x: field.x, y: field.y, width: field.width, height: field.height,
         borderColor: rgb(0.49, 0.23, 0.93), borderWidth: 1.5,
-        color: rgb(0.95, 0.92, 1.0),
       });
       page.drawText('Initials', {
         x: field.x + 4, y: field.y + 4, size: 8, font: helvetica,
@@ -119,13 +117,7 @@ export async function preparePdf(
       });
 
     } else if (fieldType === 'checkbox') {
-      // Checked box: light gray background + X crossing diagonals (embedded at prepare time)
-      page.drawRectangle({
-        x: field.x, y: field.y, width: field.width, height: field.height,
-        borderColor: rgb(0.1, 0.1, 0.1), borderWidth: 1.5,
-        color: rgb(0.95, 0.95, 0.95),
-      });
-      // X mark: two diagonals
+      // X mark only — no background or border so underlying PDF content shows through
       page.drawLine({
         start: { x: field.x + 2, y: field.y + 2 },
         end: { x: field.x + field.width - 2, y: field.y + field.height - 2 },
@@ -138,25 +130,10 @@ export async function preparePdf(
       });
 
     } else if (fieldType === 'date') {
-      // Light placeholder rectangle — actual signing date stamped at POST time in route.ts
-      page.drawRectangle({
-        x: field.x, y: field.y, width: field.width, height: field.height,
-        borderColor: rgb(0.85, 0.47, 0.04), borderWidth: 1,
-        color: rgb(1.0, 0.97, 0.90),
-      });
-      page.drawText('Date', {
-        x: field.x + 4, y: field.y + 4, size: 8, font: helvetica,
-        color: rgb(0.85, 0.47, 0.04),
-      });
+      // No placeholder drawn — actual signing date stamped at POST time in route.ts
 
     } else if (fieldType === 'text') {
-      // Light background rectangle — text content is provided via textFillData (separate pipeline)
-      // type='text' SignatureFieldData fields are visual position markers only
-      page.drawRectangle({
-        x: field.x, y: field.y, width: field.width, height: field.height,
-        borderColor: rgb(0.39, 0.45, 0.55), borderWidth: 1,
-        color: rgb(0.96, 0.97, 0.98),
-      });
+      // No marker drawn — text content is provided via textFillData (separate pipeline)
 
     } else if (fieldType === 'agent-signature') {
       // Skip — agent signature handled by Phase 11; no placeholder drawn here