// app/components.jsx — formatters, config, metric math, shared UI primitives
const { useState, useEffect, useRef, useMemo, useCallback } = React;
/* ============================ Formatters ============================ */
const TODAY = new Date(window.ALTUS_TODAY + 'T12:00:00');
const DAY = 86400000;
function parseD(s){ return s ? new Date(s + 'T12:00:00') : null; }
function daysAgo(s){ const d = parseD(s); return d ? Math.round((TODAY - d) / DAY) : null; }
function fmtMoney(n){ if(n==null||isNaN(n)) return '—'; return '$' + Math.round(n).toLocaleString('en-US'); }
function fmtShort(n){
if(n==null||isNaN(n)) return '—';
const a = Math.abs(n);
if(a >= 1e9) return '$' + (n/1e9).toFixed(a>=1e10?1:2).replace(/\.0+$/,'') + 'B';
if(a >= 1e6) return '$' + (n/1e6).toFixed(a>=1e7?1:2).replace(/\.?0+$/,'') + 'M';
if(a >= 1e3) return '$' + Math.round(n/1e3) + 'K';
return '$' + Math.round(n);
}
function fmtPct(n, d=2){ if(n==null||isNaN(n)) return '—'; return (n*100).toFixed(d) + '%'; }
function fmtNum(n){ if(n==null||isNaN(n)) return '—'; return Math.round(n).toLocaleString('en-US'); }
function fmtDate(s){ const d = parseD(s); if(!d) return '—'; return d.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'}); }
function fmtDateShort(s){ const d = parseD(s); if(!d) return '—'; return d.toLocaleDateString('en-US',{month:'short',day:'numeric'}); }
// relative “time ago” label, matching how a CRM reads activity recency
function fmtRelative(s){
const d = daysAgo(s);
if(d==null) return '—';
if(d<=0) return 'Today';
if(d===1) return 'Yesterday';
if(d<7) return d+' days ago';
if(d<11) return '1 week ago';
if(d<31) return Math.round(d/7)+' weeks ago';
if(d<45) return 'about a month ago';
if(d<340) return 'about '+Math.round(d/30)+' months ago';
const y = Math.round(d/365); return 'about '+y+' year'+(y>1?'s':'')+' ago';
}
// most-recent pipeline milestone for a deal (latest ISO date string)
function lastActivityOf(d){
const dates = [d.dateEntered, d.dateLOISubmitted, d.dateUnderContract, d.dateLost].filter(Boolean);
if(!dates.length) return null;
return dates.slice().sort().pop();
}
/* ============================ Domain config ============================ */
// funnel progression, then terminal/negative outcomes
// Active-pipeline review stages, then LOI-process stages, then dead.
const PIPELINE_STAGES = ['New Deal','Quick UW','Full UW','Excel UW'];
const LOI_STAGES = ['LOI Submitted','LOI Lost','Under Contract','Purchased'];
// Linear happy-path progression used by the deal-detail stepper.
const STAGES = ['New Deal','Quick UW','Full UW','Excel UW','LOI Submitted','Under Contract','Purchased'];
const STAGE_ALL = ['New Deal','Quick UW','Full UW','Excel UW','LOI Submitted','LOI Lost','Under Contract','Purchased','Dead'];
const STAGE_META = {
'New Deal': { c:'#5b7088', bg:'#eef1f5', label:'New Deal' },
'Quick UW': { c:'#2f6df0', bg:'#e8f0fe', label:'Quick UW' },
'Full UW': { c:'#1b59c4', bg:'#e2ebfb', label:'Full UW' },
'Excel UW': { c:'#6b46e0', bg:'#ece6fd', label:'Excel UW' },
'LOI Submitted': { c:'#b87214', bg:'#fdf0d8', label:'LOI Submitted' },
'LOI Lost': { c:'#c93c40', bg:'#fce8e8', label:'LOI Lost' },
'Under Contract': { c:'#0c7a43', bg:'#e0f2ea', label:'Under Contract' },
'Purchased': { c:'#0a6b3b', bg:'#d6efe0', label:'Purchased' },
'Dead': { c:'#8c7460', bg:'#f2ece4', label:'Dead' },
};
// Map legacy stage names (and Notion imports) onto the current set.
const STAGE_MIGRATE = {
'Needs UW':'New Deal', 'Needs Underwriting':'New Deal', 'New':'New Deal',
'Underwritten':'Full UW', 'Underwriting':'Full UW',
'Pass':'Dead', 'Passed':'Dead', 'Done':'Dead', 'Dead/Pass':'Dead',
};
function normalizeStage(s){
if(STAGE_META[s]) return s;
return STAGE_MIGRATE[s] || 'New Deal';
}
const isPipelineStage = (s)=> PIPELINE_STAGES.includes(s);
const isLOIStage = (s)=> LOI_STAGES.includes(s);
const isDeadStage = (s)=> s==='Dead';
const TYPE_META = {
'Multifamily': '#2f6df0',
'Industrial': '#5b6b7f',
'Retail': '#bd7a16',
'Mixed-Use': '#7c5cff',
'Development': '#0f8a4d',
'Other': '#9eabb9',
};
/* ============================ Metric math ============================ */
// Per Garrett's spec — Going-In and Stabilized (Pro Forma) cap rates.
function computeMetrics(d){
const units = d.units || 1;
const marketOpex = (d.marketOpexPerUnit||0) * units; // our market-rate expense assumption
const currentOpexPerUnit = (d.currentOpexTotal||0) / units; // current T12 per unit (output)
const goingInNOI = (d.trailingEGI||0) - marketOpex; // trailing EGI − market expenses
const goingInCap = d.purchasePrice ? goingInNOI / d.purchasePrice : 0;
const proformaNOI = (d.brokerEGI||0) - marketOpex; // broker/pro-forma EGI − market expenses
const totalBasis = (d.purchasePrice||0) + (d.capex||0);
const stabilizedCap = totalBasis ? proformaNOI / totalBasis : 0;
return { units, marketOpex, currentOpexPerUnit, marketOpexPerUnit:d.marketOpexPerUnit||0,
goingInNOI, goingInCap, proformaNOI, stabilizedCap, totalBasis };
}
/* ============================ Tiny icons ============================ */
function Icon({ name, size=16, style }){
const p = { width:size, height:size, viewBox:'0 0 24 24', fill:'none', stroke:'currentColor',
strokeWidth:1.8, strokeLinecap:'round', strokeLinejoin:'round', style };
const paths = {
board: <>{paths[name]} ;
}
/* ============================ Primitives ============================ */
function StageBadge({ stage, dot=true, size='md' }){
const m = STAGE_META[stage] || STAGE_META['New Deal'];
const pad = size==='sm' ? '2px 8px' : '3px 10px';
const fs = size==='sm' ? 11 : 12;
return (
{dot &&
);
}
// large solid badge — the dominant, instant-read stage indicator
function StageBadgeSolid({ stage, count }){
const m = STAGE_META[stage] || STAGE_META['New Deal'];
return (
{m.label}
{count!=null && {count} }
);
}
function TypeTag({ type }){
const c = TYPE_META[type] || TYPE_META.Other;
return (
);
}
function Avatar({ name, size=26 }){
const colors = { Will:'#2f6df0', Garrett:'#0f8a4d' };
return (
{name ? name[0] : '?'}
);
}
function Delta({ value, suffix='', good='up' }){
if(value==null || value===0) return — ;
const up = value > 0;
const positive = good==='up' ? up : !up;
const col = positive ? 'var(--pos)' : 'var(--neg)';
return (
{Math.abs(value)}{suffix}
);
}
/* KPI tile */
function Kpi({ label, value, sub, delta, deltaSuffix, deltaGood='up', accent, icon }){
return (
{accent &&
}
{label}
{icon &&
{value}
{delta!=null && }
{sub && {sub} }
{options.map(o=>{
const v = typeof o==='string'?o:o.value; const l = typeof o==='string'?o:o.label;
const on = v===value;
return (
onChange(v)} style={{
border:'none', background:on?'var(--panel)':'transparent', color:on?'var(--ink)':'var(--slate)',
fontWeight:on?600:500, fontSize:size==='sm'?12.5:13, padding:size==='sm'?'5px 11px':'6px 14px',
borderRadius:6, boxShadow:on?'0 1px 2px rgba(16,30,50,.12)':'none', transition:'all .12s' }}>
{l}
);
})}
);
}
/* horizontal bar within a track */
function Bar({ value, max, color, height=8, track='var(--panel-3)' }){
const pct = max>0 ? Math.min(100, (value/max)*100) : 0;
return (
);
}
/* Donut chart from segments [{label,value,color}] */
function Donut({ segments, size=132, thickness=18, center }){
const total = segments.reduce((s,x)=>s+x.value,0) || 1;
const r = (size - thickness)/2; const C = 2*Math.PI*r; let off = 0;
return (
{segments.map((s,i)=>{
const len = (s.value/total)*C; const el =
{center &&
{center}
}
);
}
/* Card shell */
function Card({ title, right, children, pad=true, style }){
return (
{(title||right) && (
{title}
{right}
)}
{children}
e.stopPropagation()}>
setOpen((o) => !o)} title="Assign reviewers"
style={{ display: 'inline-flex', alignItems: 'center', gap: 0, border: '1px solid var(--line-2)', background: 'var(--panel)',
borderRadius: 999, padding: sel.length ? '2px 7px 2px 3px' : '0 9px', height: size + 6, cursor: 'pointer', minWidth: sel.length ? 'auto' : 56 }}>
{sel.length === 0 ?
+ Assign :
{sel.map((n, i) => (
{n[0]}
))}
}
{open && (
{ASSIGNEES.map((name) => {
const on = sel.includes(name);
return (
toggle(name)}
style={{ display: 'flex', alignItems: 'center', gap: 9, width: '100%', border: 'none', background: on ? 'var(--accent-soft)' : 'transparent',
borderRadius: 7, padding: '7px 9px', cursor: 'pointer', textAlign: 'left', fontFamily: 'var(--font)' }}
onMouseEnter={(e) => { if (!on) e.currentTarget.style.background = 'var(--panel-2)'; }}
onMouseLeave={(e) => { if (!on) e.currentTarget.style.background = 'transparent'; }}>
{name[0]}
{name}
{on &&
);
})}
)}