From 11f2b802171e29fac88570650633c0898a4846ef Mon Sep 17 00:00:00 2001
From: Chandler Copeland <ccopeland@motivhealth.com>
Date: Sat, 21 Mar 2026 12:20:08 -0600
Subject: [PATCH] fix(09-01): fix propertyAddress pre-seed and polish
 PreparePanel text fill UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- TextFillForm: add initialData prop; buildInitialRows seeds rows from
  pre-seeded data so propertyAddress row renders populated on mount
- PreparePanel: pass initialData={...} to TextFillForm so the lazy
  useState in PreparePanel correctly flows through to the visible UI
- TextFillForm: replace AcroForm jargon instruction with friendly copy
- TextFillForm: add Field name / Value column headers for clear layout
- TextFillForm: improve spacing (py-1.5), softer remove button (gray→red on hover)
- TypeScript: npx tsc --noEmit passes clean
---
 .../[docId]/_components/PreparePanel.tsx      |  5 ++-
 .../[docId]/_components/TextFillForm.tsx      | 34 +++++++++++++------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PreparePanel.tsx b/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PreparePanel.tsx
index fb25259..1592cee 100644
--- a/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PreparePanel.tsx
+++ b/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PreparePanel.tsx
@@ -151,7 +151,10 @@ export function PreparePanel({ docId, defaultEmail, clientName, currentStatus, a
 
       <div>
         <label className="block text-sm font-medium text-gray-700 mb-2">Text fill fields</label>
-        <TextFillForm onChange={setTextFillData} />
+        <TextFillForm
+          onChange={setTextFillData}
+          initialData={clientPropertyAddress ? { propertyAddress: clientPropertyAddress } : undefined}
+        />
       </div>
 
       <button
diff --git a/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/TextFillForm.tsx b/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/TextFillForm.tsx
index 6cb7e3f..9e1a197 100644
--- a/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/TextFillForm.tsx
+++ b/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/TextFillForm.tsx
@@ -5,10 +5,19 @@ interface TextRow { label: string; value: string; }
 
 interface TextFillFormProps {
   onChange: (data: Record<string, string>) => void;
+  initialData?: Record<string, string>;
 }
 
-export function TextFillForm({ onChange }: TextFillFormProps) {
-  const [rows, setRows] = useState<TextRow[]>([{ label: '', value: '' }]);
+function buildInitialRows(initialData?: Record<string, string>): TextRow[] {
+  if (initialData && Object.keys(initialData).length > 0) {
+    const seeded = Object.entries(initialData).map(([label, value]) => ({ label, value }));
+    return [...seeded, { label: '', value: '' }];
+  }
+  return [{ label: '', value: '' }];
+}
+
+export function TextFillForm({ onChange, initialData }: TextFillFormProps) {
+  const [rows, setRows] = useState<TextRow[]>(() => buildInitialRows(initialData));
 
   function updateRow(index: number, field: 'label' | 'value', val: string) {
     const next = rows.map((r, i) => i === index ? { ...r, [field]: val } : r);
@@ -29,26 +38,31 @@ export function TextFillForm({ onChange }: TextFillFormProps) {
 
   return (
     <div className="space-y-2">
-      <p className="text-xs text-gray-500">
-        Field label = AcroForm field name in the PDF (e.g. &quot;PropertyAddress&quot;). Leave blank to skip.
+      <p className="text-xs text-gray-400 mt-0.5">
+        Pre-fill text fields in the PDF before sending. Leave blank to skip a field.
       </p>
+      <div className="flex gap-2 items-center px-1">
+        <span className="flex-1 text-xs font-medium text-gray-500 uppercase tracking-wide">Field name</span>
+        <span className="flex-1 text-xs font-medium text-gray-500 uppercase tracking-wide">Value</span>
+        <span className="w-6" />
+      </div>
       {rows.map((row, i) => (
         <div key={i} className="flex gap-2 items-center">
           <input
-            placeholder="Field label"
+            placeholder="e.g. PropertyAddress"
             value={row.label}
             onChange={e => updateRow(i, 'label', e.target.value)}
-            className="flex-1 border rounded px-2 py-1 text-sm"
+            className="flex-1 border rounded px-2 py-1.5 text-sm focus:border-[var(--gold)] focus:ring-[var(--gold)]"
           />
           <input
-            placeholder="Value"
+            placeholder="Value to fill in"
             value={row.value}
             onChange={e => updateRow(i, 'value', e.target.value)}
-            className="flex-1 border rounded px-2 py-1 text-sm"
+            className="flex-1 border rounded px-2 py-1.5 text-sm focus:border-[var(--gold)] focus:ring-[var(--gold)]"
           />
           <button
             onClick={() => removeRow(i)}
-            className="text-red-400 hover:text-red-600 text-sm px-1"
+            className="w-6 text-gray-300 hover:text-red-500 text-base leading-none flex items-center justify-center"
             aria-label="Remove row"
             type="button"
           >&times;</button>
@@ -57,7 +71,7 @@ export function TextFillForm({ onChange }: TextFillFormProps) {
       {rows.length < 10 && (
         <button
           onClick={addRow}
-          className="text-blue-600 hover:text-blue-800 text-sm"
+          className="text-sm text-gray-500 hover:text-gray-700"
           type="button"
         >
           + Add field