// app/dealDetail.jsx — deal side panel: overview, cap-rate calculators, debt, notes, OM parsed results
const { useState: useStateD, useEffect: useEffectD, useRef: useRefD } = React;
/* ── Editable number/money field ── */
function FieldInput({ value, onChange, prefix, suffix, placeholder, align = 'right', width }) {
const fmt = (v) => {
if (v === '' || v == null) return '';
const [int, dec] = String(v).split('.');
const intF = int === '' || int === '-' ? int : Number(int).toLocaleString('en-US');
return dec != null ? intF + '.' + dec : intF;
};
const [txt, setTxt] = useStateD(fmt(value));
useEffectD(() => {
const curNum = txt === '' ? '' : Number(txt.replace(/[^0-9.]/g, ''));
const valNum = value === '' || value == null ? '' : Number(value);
if (curNum !== valNum) setTxt(fmt(value));
}, [value]);
const handle = (e) => {
let raw = e.target.value.replace(/[^0-9.]/g, '');
const parts = raw.split('.');
if (parts.length > 2) raw = parts[0] + '.' + parts.slice(1).join('');
setTxt(fmt(raw));
onChange(raw === '' ? '' : Number(raw));
};
return (
{const w = e.currentTarget;w.style.borderColor = 'var(--accent)';w.style.boxShadow = '0 0 0 3px var(--accent-soft)';}}
onBlurCapture={(e) => {const w = e.currentTarget;w.style.borderColor = 'var(--line-2)';w.style.boxShadow = 'none';}}>
{prefix && {prefix} }
{suffix} }
);
}
/* ── Calculator row ── */
function CalcRow({ kind, label, hint, children, strong, accent }) {
const isOut = kind === 'OUTPUT';
return (
{kind}
{isOut ?
{children} :
children}
);
}
function SectionHead({ icon, title, desc, right }) {
return (
);
}
function PerUnit({ total, units }) {
if (!units || !(Number(total) > 0)) return null;
return (
{fmtMoney(Number(total) / units)} / unit
);
}
function OverviewItem({ label, children, edit }) {
return (
{label}
{edit ? children :
{children}
}
);
}
/* ── OM Parsed Results Banner ── */
/* ── Shared parsed-banner pieces ── */
function BannerShell({ title, sub, canApply, onApplyAll, onDismiss, onReupload, children }) {
return (
{canApply &&
Apply All
}
{onReupload &&
}
{children}
);
}
function FoundRow({ label, display, onUse }) {
return (
{label}
{display}
{onUse &&
Use
}
);
}
function MissingRow({ label, note }) {
return (
{label}
{note || 'not found — enter manually'}
);
}
const fmtMoneyRaw = (v) => v != null && v !== '' ? '$' + Number(v).toLocaleString() : null;
/* ── Parse error / empty-result banner ── */
function ParseErrorBanner({ label, error }) {
const [dismissed, setDismissed] = useStateD(false);
if (dismissed) return null;
return (
{label} couldn’t be parsed
{error || 'No data could be extracted from this file.'}
setDismissed(true)} style={{ border: '1px solid rgba(192,42,42,.25)',
background: 'transparent', color: 'var(--muted)', borderRadius: 6, padding: '5px 9px', fontSize: 12, cursor: 'pointer', flex: 'none' }}>
);
}
/* ── OM Parsed Results Banner ── */
function OMParsedSection({ parsed, deal, onAccept }) {
const [dismissed, setDismissed] = useStateD(false);
if (dismissed) return null;
const _rawC = Array.isArray(parsed.brokerContacts) ? parsed.brokerContacts :
Array.isArray(parsed.isrContacts) ? parsed.isrContacts : [];
const _named = _rawC.filter((c) => c && c.name);
const _withInfo = _named.filter((c) => c.email || c.phone);
const contacts = (_withInfo.length ? _withInfo : _named).slice(0, 6);
const firstContact = contacts[0];
const brokerStr = (name) => [parsed.brokerFirm, name].filter(Boolean).join(' — ');
const FIELD_DEFS = [
{ key: 'name', label: 'Property Name', patch: (v) => ({ name: v }) },
{ key: 'market', label: 'Location', patch: (v) => ({ market: v }) },
{ key: 'units', label: 'Units', patch: (v) => ({ units: Number(v) || v }) },
{ key: 'vintage', label: 'Vintage (Year Built)', patch: (v) => ({ vintage: String(v) }) },
{ key: 'effectiveGrossIncome', label: 'Effective Gross Income (in-place)', patch: (v) => ({ trailingEGI: Number(v) || v }), fmt: fmtMoneyRaw },
{ key: 'totalOpex', label: 'Total Operating Expenses' + (parsed.opexBasis ? ' · ' + parsed.opexBasis : ''), patch: (v) => ({ currentOpexTotal: Number(v) || v }), fmt: fmtMoneyRaw },
{ key: 'brokerEGI', label: 'Pro Forma EGI (annual)', patch: (v) => ({ brokerEGI: Number(v) || v }), fmt: fmtMoneyRaw },
{ key: 'brokerFirm', label: 'Broker Firm', patch: (v) => ({ broker: brokerStr(firstContact?.name) }) }];
// Current OpEx / Unit is DERIVED (total operating expenses ÷ units) — shown for confirmation,
// not applied directly (the underwriting card recomputes it from the figures above).
const opexUnits = deal && deal.units ? deal.units : Number(parsed.units) || null;
const opexPerUnit = parsed.totalOpex != null && parsed.totalOpex !== '' && opexUnits ?
Math.round(Number(parsed.totalOpex) / opexUnits) : null;
const found = FIELD_DEFS.filter((f) => parsed[f.key] != null && parsed[f.key] !== '');
const missing = FIELD_DEFS.filter((f) => parsed[f.key] == null || parsed[f.key] === '');
const totalFields = FIELD_DEFS.length + 1; // +1 for broker contacts
const foundCount = found.length + (contacts.length ? 1 : 0);
const acceptAll = () => {
let patch = {};
found.forEach((f) => Object.assign(patch, f.patch(parsed[f.key])));
if (firstContact) patch.broker = brokerStr(firstContact.name);
onAccept(patch);
setDismissed(true);
};
return (
0} onApplyAll={acceptAll} onDismiss={() => setDismissed(true)}>
{found.map((f) =>
onAccept(f.patch(parsed[f.key]))} />
)}
{opexPerUnit != null &&
onAccept({ broker: brokerStr(c.name) })} />
)}
{missing.map((f) => );
}
/* ── full-page detail building blocks ── */
const Sep = () => · ;
function DateInput({ value, onChange }) {
return (
{title}
{hint && {hint} }
{children}
);
}
/* right-rail card */
function RailCard({ icon, title, children }) {
return (
);
}
function RailRow({ label, value, num = true, muted }) {
return (
);
}
/* numbered stage stepper */
function StageStepper({ stage, onChange }) {
const idx = STAGES.indexOf(stage);
return (
{STAGES.map((s, i) => {
const active = i === idx;
return (
{i > 0 &&
}
onChange(s)} style={{
display: 'inline-flex', alignItems: 'center', gap: 9, padding: '6px 14px 6px 7px', borderRadius: 999,
border: active ? '1px solid var(--accent)' : '1px solid transparent',
background: active ? 'var(--accent-soft)' : 'transparent', cursor: 'pointer', whiteSpace: 'nowrap' }}>
{i + 1}
{STAGE_META[s].label}
);
})}
{cells.map((c, i) =>
{c.label}
{c.value}
{c.sub &&
{c.sub}
}
)}
{tabs.map((t) => {
const on = tab === t.key;
return (
setTab(t.key)} style={{
display: 'inline-flex', alignItems: 'center', gap: 7, padding: '13px 12px', border: 'none', background: 'none',
borderBottom: on ? '2px solid var(--accent)' : '2px solid transparent', marginBottom: -1,
color: on ? 'var(--accent)' : 'var(--muted)', fontSize: 13.5, fontWeight: on ? 600 : 500, cursor: 'pointer' }}
onMouseEnter={(e) => {if (!on) e.currentTarget.style.color = 'var(--slate)';}}
onMouseLeave={(e) => {if (!on) e.currentTarget.style.color = 'var(--muted)';}}>
);
})}
);
}
/* shared notes editor */
function NotesEditor({ value, onChange, minHeight = 140 }) {
return (