11 KiB
phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves
| phase | plan | type | wave | depends_on | files_modified | autonomous | requirements | must_haves | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 20-apply-template-and-portal-nav | 02 | execute | 2 |
|
|
false |
|
|
Purpose: When a document is created from a template, text fields with hints (e.g., "Property Address", "Purchase Price") show those hints as one-click quick-fill chips, saving the agent from remembering what each blank field is for. Output: Modified DocumentPageClient.tsx (fields state + hint derivation), modified PreparePanel.tsx (hint chip), human verification of the full template-to-document flow.
<execution_context> @$HOME/.claude/get-shit-done/workflows/execute-plan.md @$HOME/.claude/get-shit-done/templates/summary.md </execution_context>
@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md @.planning/phases/20-apply-template-and-portal-nav/20-CONTEXT.md @.planning/phases/20-apply-template-and-portal-nav/20-RESEARCH.md @.planning/phases/20-apply-template-and-portal-nav/20-01-SUMMARY.mdFrom src/app/portal/(protected)/documents/[docId]/_components/DocumentPageClient.tsx:
interface DocumentPageClientProps {
docId: string;
docStatus: string;
defaultEmail: string;
clientName: string;
agentDownloadUrl?: string | null;
signedAt?: Date | null;
clientPropertyAddress?: string | null;
initialSigners: DocumentSigner[];
clientContacts?: { name: string; email: string }[];
}
// Existing state:
// selectedFieldId: string | null
// textFillData: Record<string, string>
// aiPlacementKey: number
// signers: DocumentSigner[]
From src/app/portal/(protected)/documents/[docId]/_components/PreparePanel.tsx:
interface PreparePanelProps {
docId: string;
defaultEmail: string;
clientName: string;
currentStatus: string;
agentDownloadUrl?: string | null;
signedAt?: Date | null;
clientPropertyAddress?: string | null;
previewToken: string | null;
onPreviewTokenChange: (token: string | null) => void;
textFillData: Record<string, string>;
selectedFieldId: string | null;
onQuickFill: (fieldId: string, value: string) => void;
onAiAutoPlace: () => Promise<void>;
signers?: DocumentSigner[];
onSignersChange?: (signers: DocumentSigner[]) => void;
unassignedFieldIds?: Set<string>;
onUnassignedFieldIdsChange?: (ids: Set<string>) => void;
}
Quick Fill section pattern (PreparePanel lines 313-355):
{/* Quick-fill panel — only shown when a text field is selected */}
{selectedFieldId ? (
<div className="space-y-1.5">
<p className="text-xs text-gray-400">Click a suggestion to fill the selected field.</p>
{clientName && ( <button onClick={() => onQuickFill(selectedFieldId, clientName)}>...</button> )}
{clientPropertyAddress && ( <button onClick={() => onQuickFill(selectedFieldId, clientPropertyAddress)}>...</button> )}
<button onClick={() => onQuickFill(selectedFieldId, defaultEmail)}>Client Email chip</button>
</div>
) : (
<p>Click a text field on the document...</p>
)}
-
Add import:
import type { SignatureFieldData } from '@/lib/db/schema';(DocumentSigner is already imported). -
Add state for fields:
const [fields, setFields] = useState<SignatureFieldData[]>([]);
- Add useEffect to fetch fields on mount and when aiPlacementKey changes:
useEffect(() => {
fetch(`/api/documents/${docId}/fields`)
.then(r => r.json())
.then((data: SignatureFieldData[]) => setFields(Array.isArray(data) ? data : []))
.catch(() => {});
}, [docId, aiPlacementKey]);
- Derive the hint for the selected field:
const selectedFieldHint = selectedFieldId
? fields.find(f => f.id === selectedFieldId)?.hint
: undefined;
- Pass new prop to PreparePanel:
<PreparePanel
// ... all existing props unchanged ...
selectedFieldHint={selectedFieldHint}
/>
In PreparePanel.tsx:
-
Add
selectedFieldHint?: string;to thePreparePanelPropsinterface (afteronQuickFill). -
Destructure it in the function signature: add
selectedFieldHint,to the destructured props. -
In the Quick Fill section (inside the
{selectedFieldId ? (branch), add a new chip AFTER the existing Client Email chip button (before the closing</div>ofspace-y-1.5):
{selectedFieldHint && (
<button
type="button"
onClick={() => onQuickFill(selectedFieldId, selectedFieldHint)}
className="w-full text-left px-3 py-2 text-sm border rounded bg-white hover:bg-blue-50 hover:border-blue-300 transition-colors"
>
<span className="text-xs text-gray-400 block">Template Hint</span>
<span className="truncate block">{selectedFieldHint}</span>
</button>
)}
This follows the exact same markup pattern as the existing Client Name / Property Address / Client Email chips. The prop is optional with no default — existing callers (DocumentPageClient without template-sourced documents) simply don't pass it, and undefined means no chip renders.
cd teressa-copeland-homes && npx tsc --noEmit
<acceptance_criteria>
- grep "selectedFieldHint" src/app/portal/(protected)/documents/[docId]/_components/DocumentPageClient.tsx returns at least 2 matches (derivation + prop pass)
- grep "selectedFieldHint" src/app/portal/(protected)/documents/[docId]/_components/PreparePanel.tsx returns at least 3 matches (interface + destructure + render)
- grep "Template Hint" src/app/portal/(protected)/documents/[docId]/_components/PreparePanel.tsx returns 1 match
- grep "api/documents.*fields" src/app/portal/(protected)/documents/[docId]/_components/DocumentPageClient.tsx returns at least 1 match
- grep "SignatureFieldData" src/app/portal/(protected)/documents/[docId]/_components/DocumentPageClient.tsx returns at least 1 match (import)
- npx tsc --noEmit exits 0
</acceptance_criteria>
DocumentPageClient fetches fields on mount, derives selectedFieldHint from selected field, passes it to PreparePanel. PreparePanel renders a "Template Hint" quick-fill chip when the hint exists.
1. Navigate to /portal/templates — verify the list page shows saved templates with form name, field count, and updated date (TMPL-16)
2. Verify "Templates" appears in the portal top nav (TMPL-15)
3. Go to a client profile page → click "Add Document"
4. Verify the modal shows two tabs: "Forms Library" and "My Templates" (TMPL-10)
5. Click "My Templates" tab → verify saved templates appear with name, form name, and field count
6. Select a template → verify the document name auto-fills with the template name
7. Click "Add Document" → verify the document is created and you're returned to the client page
8. Open the newly created document → verify fields are pre-loaded at the correct positions on the PDF (TMPL-11)
9. In PreparePanel, click a text field that has a hint → verify a "Template Hint" chip appears in the Quick Fill section alongside Client Name/Address/Email (TMPL-13)
10. Click the hint chip → verify the field is filled with the hint text
11. Click the "Forms Library" tab back in a new Add Document modal → verify the existing form library still works exactly as before (D-04)
12. (TMPL-14 — snapshot independence): Go to /portal/templates → edit the template (change a field position) → go back to the document created in step 7 → verify the document's fields are unchanged (still at original positions)
<success_criteria>
- Template Hint chip appears in Quick Fill when a text field with a hint is selected
- Chip click fills the field (same behavior as existing quick-fill chips)
- Fields without hints show no extra chip
- Human confirms full template-to-document flow works end-to-end
- All 7 TMPL requirements (TMPL-10 through TMPL-16) are satisfied </success_criteria>