// form.jsx — Form step. Collects all deal details with coaching + completeness sidebar. const { useState: useFormState, useEffect: useFormEffect, useMemo: useFormMemo } = React; function FormStep({ docId, initialValues, onSubmit, onBack, showCompleteness, showCoaching }) { const schema = window.getSchema(docId); const doc = window.DOC_BY_ID[docId]; const [values, setValues] = useFormState(() => applyAutoFills(initialValues || window.DEMO_VALUES[docId] || {}, schema)); const [touched, setTouched] = useFormState({}); const [activeSection, setActiveSection] = useFormState(schema.sections[0].id); const [notes, setNotes] = useFormState(''); // ─── LOI pre-fill state (Purchase Agreement only) ─────────────────── const [loiBusy, setLoiBusy] = useFormState(false); const [loiError, setLoiError] = useFormState(null); const [loiResult, setLoiResult] = useFormState(null); // Field-id → friendly label map for the "pre-filled" success summary const fieldLabel = (id) => { for (const sec of schema.sections) { for (const f of sec.fields) { if (f.id === id) return f.label; } } return id; }; const handleLoiUpload = async (file) => { if (!file) return; setLoiBusy(true); setLoiError(null); try { const fd = new FormData(); fd.append('file', file); const res = await window.authedFetch('/api/extract-loi', { method: 'POST', body: fd, }); if (!res.ok) { const errBody = await res.json().catch(() => ({ error: res.statusText })); throw new Error(errBody.error || `Extraction failed (HTTP ${res.status})`); } const data = await res.json(); // Merge non-null extracted values into form state const filled = []; const newValues = { ...values }; for (const [k, v] of Object.entries(data.fields || {})) { if (v !== null && v !== undefined && v !== '') { newValues[k] = v; filled.push(k); } } setValues(newValues); setLoiResult({ filename: file.name, filledFields: filled, notes: data.notes || '', }); } catch (e) { console.error('LOI extraction failed:', e); setLoiError(String(e.message || e)); } finally { setLoiBusy(false); } }; useFormEffect(() => { if (window.lucide) window.lucide.createIcons(); }); const setField = (id, val) => { setValues(v => { const next = {...v, [id]: val}; // Auto-compute expiration when effective date changes (1 year + 1 month, rounded to end of month) if (id === 'effectiveDate' && val) { const exp = computeExpiration(val); if (exp) next.expirationDate = exp; } // Cascade defaults from select fields (e.g. leaseStructure -> Option 1/2 defaults) const fld = findField(schema, id); if (fld && fld.cascade && fld.cascade[val]) { Object.assign(next, fld.cascade[val]); } return next; }); setTouched(t => ({...t, [id]: true})); }; // ─── Completeness logic ───────────────────────────────────────────── const { allFields, requiredFields, filledRequired, missingRequired, completeness, warnings } = useFormMemo(() => { const all = schema.sections.flatMap(s => s.fields.filter(f => shouldShow(f, values)).map(f => ({...f, sectionTitle: s.title}))); const required = all.filter(f => f.required); const filled = required.filter(f => isFilled(values[f.id])); const missing = required.filter(f => !isFilled(values[f.id])); const optional = all.filter(f => !f.required); const filledOpt = optional.filter(f => isFilled(values[f.id])); const totalScore = (filled.length * 1.0) + (filledOpt.length * 0.5); const maxScore = (required.length * 1.0) + (optional.length * 0.5); const pct = Math.round((totalScore / maxScore) * 100); // warnings — domain-aware checks const warns = []; const commVal = parseFloat(values.commissionPct || values.commission); if (docId === 'tenant-rep' && commVal && (commVal < 4 || commVal > 6)) { warns.push({ field: 'commissionPct', label: 'Commission outside CEG standard 4–6%', sev: 'warn' }); } if (docId === 'list-lease' && commVal && (commVal < 4 || commVal > 6)) { warns.push({ field: 'commission', label: 'Listing commission outside CEG standard 4–6%', sev: 'warn' }); } if (docId === 'buyer-rep' && commVal && (commVal < 2 || commVal > 3)) { warns.push({ field: 'commissionPct', label: 'Buyer commission outside 2–3% range', sev: 'warn' }); } if (values.termMonths === 'Custom') { warns.push({ field: 'termMonths', label: 'Custom term — requires Jeff to review', sev: 'warn' }); } return { allFields: all, requiredFields: required, filledRequired: filled, missingRequired: missing, completeness: Math.min(pct, 100), warnings: warns, }; }, [values, docId]); const canSubmit = missingRequired.length === 0; // section completion const sectionStatus = (sec) => { const visible = sec.fields.filter(f => shouldShow(f, values)); const reqs = visible.filter(f => f.required); const done = reqs.filter(f => isFilled(values[f.id])); return { total: reqs.length, done: done.length, complete: done.length === reqs.length }; }; return (
Step 03 · Fill in the details

{schema.title}

{schema.subtitle}. We’ll merge these into approved CEG boilerplate language — fields marked * are required for a valid first draft.
{/* ─── LOI pre-fill card (Purchase Agreement only) ─────────────── */} {docId === 'purchase-agreement' && ( { setLoiResult(null); setLoiError(null); }} /> )}
{/* Main column */}
{schema.sections.map((sec, si) => { const st = sectionStatus(sec); return (
setActiveSection(activeSection === sec.id ? null : sec.id)} >
{st.complete ? : (si + 1)}
{sec.title}
{st.done}/{st.total} required
{activeSection === sec.id && (
{sec.fields.filter(f => shouldShow(f, values)).map(f => ( setField(f.id, v)} showCoaching={showCoaching} /> ))}
)}
); })} {/* Notes box */}
Anything else we should know about this deal?
AI-assisted