/* =============================================================
Results panel — all output views, tabbed.
============================================================= */
const { useState: useStateR, useMemo: useMemoR, useEffect: useEffectR } = React;
const { StackedArea, HBars, Tornado, Histogram, Waterfall, Donut, Sparkline } = window.Charts;
const { formatCurrency: fc, formatPct: fp, formatNumber: fn } = window.Feas;
/* ---------- KPI tile ---------- */
function KPI({ eyebrow, value, sub, tone = "default", spark, large = false }) {
const tones = {
default: "var(--fg-1)",
positive: "var(--ad-success)",
negative: "var(--ad-danger)",
warning: "var(--ad-warning)",
accent: "var(--ad-gold-600)",
};
return (
{eyebrow}
{spark &&
{spark}
}
);
}
/* ---------- Summary panel ---------- */
function SummaryPanel({ result, input, scenarios }) {
const k = result.kpi;
const cf = result.cashflow;
const monthLabel = (m) => m === null ? "—" : `${(m / 12).toFixed(1)} yrs`;
// Build summary cashflow sparkline (cumulative)
const cumNet = [];
let cum = 0;
for (const v of cf.net) { cum += v; cumNet.push(cum); }
return (
Investment Committee · Summary
{(k.equityIRR ?? 0) > (input.discountRate || 0)
? "Project clears the hurdle"
: "Project below hurdle — review assumptions"}
{/* Headline KPIs */}
= (input.discountRate || 0) ? "positive" : "negative"} large />
{/* Secondary KPIs */}
= 0 ? "default" : "negative"} />
{/* Project facts */}
Cumulative Net Cashflow (Levered)
cf.land[i] + cf.soft[i] + cf.construction[i] + cf.infra[i] + cf.contingency[i] + cf.selling[i] + cf.opex[i] + cf.interest[i]) },
{ label: "Revenue", color: "var(--ad-success)", opacity: 0.85, values: cf.sales.map((_, i) => cf.sales[i] + cf.rent[i] + cf.exit[i]) },
{ label: "Debt", color: "var(--ad-navy-400)", opacity: 0.6, values: cf.debtDraw.map((_, i) => cf.debtDraw[i] + cf.debtRepay[i]) },
]}
height={220}
formatY={(v) => v === 0 ? "0" : `${(v / 1e6).toFixed(0)}M`}
/>
Massing
c.enabled).length} />
{/* Scenario comparison strip */}
{scenarios && (
)}
);
}
function FactRow({ label, value }) {
return (
{label}
{value}
);
}
function Legend({ color, label, line }) {
return (
{line ? (
);
}
function ScenarioCard({ label, tone, result, hurdle }) {
const k = result.kpi;
const irrTone = (k.equityIRR ?? 0) >= hurdle ? "positive" : "negative";
return (
{label}
Equity IRR
{fp(k.equityIRR)}
Payback
{k.equityPayback ? `${(k.equityPayback / 12).toFixed(1)} yrs` : "—"}
);
}
function Eyebrow({ children }) {
return {children}
;
}
/* ---------- Cashflow panel ---------- */
function CashflowPanel({ result, input }) {
const cf = result.cashflow;
const months = cf.months;
// Annual aggregation
const years = Math.ceil(months.length / 12);
const yearly = useMemoR(() => {
const out = [];
for (let y = 0; y < years; y++) {
const slice = (arr) => arr.slice(y * 12, (y + 1) * 12).reduce((s, v) => s + v, 0);
out.push({
year: y,
land: slice(cf.land),
soft: slice(cf.soft),
construction: slice(cf.construction),
siteWork: slice(cf.siteWork),
contingency: slice(cf.contingency),
sales: slice(cf.sales),
selling: slice(cf.selling),
rent: slice(cf.rent),
opex: slice(cf.opex),
noi: slice(cf.noi),
exit: slice(cf.exit),
debtDraw: slice(cf.debtDraw),
debtRepay: slice(cf.debtRepay),
interest: slice(cf.interest),
net: slice(cf.net),
});
}
return out;
}, [result]);
let cumNet = 0;
return (
Cashflow · S-Curve & Annual Table
Sources & uses over time
Monthly cashflow — stacked
v === 0 ? "0" : `${(v / 1e6).toFixed(0)}M`}
/>
① Project cashflow (unlevered)
All project uses and revenues — before any debt activity.
② Equity cashflow (levered)
Project cashflow + debt draws + debt repayments (incl. interest) = equity cashflow.
③ Capital deployed — debt draws & equity contributions
Where the funding came from each year — debt drawn from the facility vs. equity contributed by investors. Together they fund the project deficit.
);
}
function ProjectCashflowTable({ yearly }) {
let cumProject = 0;
return (
Year
Land
Soft
Constr.
Site work
Cont.
Sales
Sell costs
Rent
OpEx
Exit
Project CF
Cum.
{yearly.map((y) => {
const project = y.land + y.soft + y.construction + y.siteWork + y.contingency +
y.sales + y.selling + y.rent + y.opex + y.exit;
cumProject += project;
return (
Y{y.year + 1}
{y.land === 0 ? "—" : fc(y.land)}
{y.soft === 0 ? "—" : fc(y.soft)}
{y.construction === 0 ? "—" : fc(y.construction)}
{y.siteWork === 0 ? "—" : fc(y.siteWork)}
{y.contingency === 0 ? "—" : fc(y.contingency)}
{y.sales === 0 ? "—" : fc(y.sales)}
{y.selling === 0 ? "—" : fc(y.selling)}
{y.rent === 0 ? "—" : fc(y.rent)}
{y.opex === 0 ? "—" : fc(y.opex)}
{y.exit === 0 ? "—" : fc(y.exit)}
{fc(project)}
{fc(cumProject)}
);
})}
);
}
function EquityCashflowTable({ yearly }) {
let cumEquity = 0;
return (
Year
Project CF
+ Debt draw − Debt repay of which: interest
= Equity CF
Cum. equity
{yearly.map((y) => {
const project = y.land + y.soft + y.construction + y.siteWork + y.contingency +
y.sales + y.selling + y.rent + y.opex + y.exit;
const equity = y.net;
cumEquity += equity;
return (
Y{y.year + 1}
{project === 0 ? "—" : fc(project)}
0 ? "var(--ad-success)" : "var(--fg-4)" }}>{y.debtDraw === 0 ? "—" : `+${fc(y.debtDraw).replace("SAR ", "")}`}
{y.debtRepay === 0 ? "—" : fc(y.debtRepay)}
{y.interest === 0 ? "—" : fc(y.interest)}
{fc(equity)}
{fc(cumEquity)}
);
})}
);
}
function CapitalDeployedTable({ cf, yearly }) {
// From the engine: equityInjected[m] = max(0, uses[m] - debtDraw[m])
// We aggregate to years for clarity.
const equityInjected = cf.equityInjected || [];
const sliceSum = (arr, y) => arr.slice(y * 12, (y + 1) * 12).reduce((s, v) => s + v, 0);
const horizon = cf.months.length;
const years = Math.ceil(horizon / 12);
let cumDebt = 0, cumEquity = 0, cumDeployed = 0;
const rows = [];
for (let y = 0; y < years; y++) {
const debtDraw = sliceSum(cf.debtDraw, y);
const equityIn = sliceSum(equityInjected, y);
const debtRepay = sliceSum(cf.debtRepay, y);
const deployed = debtDraw + equityIn;
cumDebt += debtDraw;
cumEquity += equityIn;
cumDeployed += deployed;
if (Math.abs(deployed) < 0.5 && Math.abs(debtRepay) < 0.5) continue;
rows.push({ y, debtDraw, equityIn, deployed, debtRepay, cumDebt, cumEquity, cumDeployed });
}
const totalDebt = rows.reduce((s, r) => s + r.debtDraw, 0);
const totalEquity = rows.reduce((s, r) => s + r.equityIn, 0);
const totalRepay = rows.reduce((s, r) => s + r.debtRepay, 0);
return (
Year
Debt draw Equity contribution Total deployed
Debt repay
Cum. debt drawn
Cum. equity contrib.
{rows.map((r) => (
Y{r.y + 1}
0 ? "var(--ad-navy-500)" : "var(--fg-4)" }}>{r.debtDraw === 0 ? "—" : fc(r.debtDraw)}
0 ? "var(--ad-navy-900)" : "var(--fg-4)" }}>{r.equityIn === 0 ? "—" : fc(r.equityIn)}
{r.deployed === 0 ? "—" : fc(r.deployed)}
{r.debtRepay === 0 ? "—" : fc(r.debtRepay)}
{fc(r.cumDebt)}
{fc(r.cumEquity)}
))}
Total
{fc(totalDebt)}
{fc(totalEquity)}
{fc(totalDebt + totalEquity)}
{fc(totalRepay)}
Funds the uses = capital tab Sources
);
}
const thStyle = { padding: "10px 12px", textAlign: "left", fontWeight: 500, fontFamily: "var(--font-body)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--fg-3)" };
const thStyleNum = { ...thStyle, textAlign: "right" };
const tdStyle = { padding: "8px 12px", color: "var(--fg-1)" };
const tdNum = (v) => ({
padding: "8px 12px", textAlign: "right",
color: v === 0 ? "var(--fg-4)" : v < 0 ? "var(--ad-danger)" : "var(--fg-1)",
fontVariantNumeric: "tabular-nums",
});
/* ---------- Cost breakdown panel ---------- */
function CostPanel({ result, input }) {
const k = result.kpi;
const totalDev = k.devCostExFinance;
const totalAll = totalDev + k.totalInterest + k.marketing + k.salesCommission + k.govFees;
const donutData = [
{ label: "Land", value: k.landCost, color: "var(--ad-navy-900)" },
{ label: "Transfer fees", value: k.landTransferFees, color: "var(--ad-navy-700)" },
{ label: "Construction", value: k.constructionCost, color: "var(--ad-navy-500)" },
{ label: "Infrastructure", value: k.landInfraCost || 0, color: "var(--ad-navy-600)" },
{ label: "Site work", value: k.siteWorkCost - (k.landInfraCost || 0), color: "var(--ad-navy-400)" },
{ label: "Soft", value: k.softCosts, color: "var(--ad-navy-300)" },
{ label: "Contingency", value: k.contingency, color: "var(--ad-sand-500)" },
{ label: "Selling", value: k.marketing + k.salesCommission + k.govFees, color: "var(--ad-sand-300)" },
{ label: "Interest", value: k.totalInterest, color: "var(--ad-danger)" },
].filter(d => d.value > 0);
const barData = donutData.map(d => ({ label: d.label, value: d.value, color: d.color }));
const waterfallSteps = [
{ label: "Revenue", value: k.totalRevenue, type: "start" },
{ label: "−Land", value: -(k.landCost + k.landTransferFees), type: "delta" },
{ label: "−Constr.", value: -k.constructionCost, type: "delta" },
{ label: "−Infra", value: -(k.landInfraCost || 0), type: "delta" },
{ label: "−Site", value: -(k.siteWorkCost - (k.landInfraCost || 0)), type: "delta" },
{ label: "−Soft", value: -k.softCosts, type: "delta" },
{ label: "−Cont.", value: -k.contingency, type: "delta" },
{ label: "−Selling", value: -(k.marketing + k.salesCommission + k.govFees), type: "delta" },
{ label: "−Interest", value: -k.totalInterest, type: "delta" },
{ label: "Profit", value: k.profit, type: "end" },
].filter(s => s.type !== "delta" || Math.abs(s.value) > 0.5);
return (
Cost build-up
Where the money goes
Cost stack
Total cost · all-in
{fc(totalAll)}
Composition
{donutData.map((d, i) => (
{d.label}
{fp(d.value / totalAll)}
))}
);
}
/* ---------- Units & revenue panel ---------- */
function ProgramPanel({ result, input }) {
const k = result.kpi;
const cf = result.cashflow;
const totalSales = cf.sales.reduce((s, v) => s + v, 0);
return (
Unit mix · sales velocity · NOI
Program & revenue
Component table
Component
Mode
Land %
FAR
GFA
NSA
Units / Keys
Price / Rent
Gross / NOI
Exit cap
Exit value
Timing
{result.components.filter(c => c.enabled).map((c) => {
const isLease = c.mode === "lease";
const basis = c.revenueBasis || "sqm";
let priceLabel = "—";
if (c.mode === "sale") {
if (basis === "sqm") priceLabel = `${fn(c.pricePerSqm)} SAR/m²`;
if (basis === "unit") priceLabel = `${fn(c.pricePerUnit)} SAR/unit`;
if (basis === "key") priceLabel = `${fn(c.pricePerKey)} SAR/key`;
} else if (isLease) {
if (basis === "sqm") priceLabel = `${fn(c.rentPerSqmYr)} SAR/m²·yr`;
if (basis === "unit") priceLabel = `${fn(c.rentPerUnitYr)} SAR/unit·yr`;
if (basis === "key") priceLabel = `${fn(c.adr)} SAR ADR`;
}
const unitsKeys = basis === "key" ? `${fn(c.keys)} keys` : `${fn(c.units)} units`;
const timing = c.mode === "sale"
? `${c.salesPeriodMonths} mo sales`
: `${c.operatingPeriodMonths} mo hold`;
return (
{c.name}
{c.mode}
{fp(c.allocationPct, 1)}
{(+c.far).toFixed(2)}
{fn(c.gfa)}
{fn(c.nsa)}
{unitsKeys}
{priceLabel}
{c.mode === "sale" ? fc(c.salesRevenue) : `${fc(c.grossIncome)} → ${fc(c.noi)} NOI`}
{isLease ? fp(c.exitCapRate, 2) : "—"}
{c.exitValue ? fc(c.exitValue) : "—"}
{timing}
);
})}
Sales velocity (cumulative)
`${(v / 1e6).toFixed(0)}M`}
/>
Total sales: {fc(totalSales)}
Avg velocity: {fc(totalSales / Math.max(1, cf.sales.filter(v=>v>0).length))}/mo
Rent / lease income (monthly)
`${(v / 1e6).toFixed(1)}M`}
/>
Stab. gross: {fc(k.totalGrossIncome)}/yr
Stab. NOI: {fc(k.totalNOI)}/yr
Operating starts: M{(input.predesignMonths || 0) + (input.constructionMonths || 0)}
{result.components.filter(c => c.enabled && c.noi > 0).length > 0 && (
Annual rent income build-up by component
{result.components.filter(c => c.enabled && c.noi > 0).map((c, i) => {
const maxGross = Math.max(...result.components.map(c2 => c2.grossIncome || 0));
const ratio = (c.grossIncome || 0) / Math.max(1, maxGross);
const noiRatio = (c.noi || 0) / Math.max(1, c.grossIncome || 1);
return (
{c.name} {c.mode}
{fc(c.grossIncome)}
−
{fc(c.opex)}
→
{fc(c.noi)}
NOI /yr
);
})}
)}
);
}
/* ---------- Sensitivity panel ---------- */
function SensitivityPanel({ result, input }) {
const drivers = [
{ key: "landPricePerSqm", label: "Land price / m²" },
{ key: "interestRate", label: "Interest rate" },
{ key: "ltc", label: "LTC" },
{ key: "softCostsPct", label: "Soft costs %" },
{ key: "contingencyPct", label: "Contingency %" },
{ key: "marketingPct", label: "Marketing %" },
{ key: "salesCommissionPct", label: "Sales commission" },
{ key: "govFeesPct", label: "Gov / sales fees" },
{ key: "constructionMonths", label: "Construction duration" },
];
// Add per-component price/cost drivers
input.components.forEach((c, i) => {
if (!c.enabled) return;
if (c.costPerSqmGFA) {
drivers.push({ key: `comp_${i}_buildcost`, label: `${c.name} build cost`, path: `components[${i}].costPerSqmGFA` });
}
if (c.mode === "sale") {
if (c.pricePerSqm) drivers.push({ key: `comp_${i}_psqm`, label: `${c.name} price/m²`, path: `components[${i}].pricePerSqm` });
if (c.pricePerUnit) drivers.push({ key: `comp_${i}_punit`, label: `${c.name} price/unit`, path: `components[${i}].pricePerUnit` });
if (c.pricePerKey) drivers.push({ key: `comp_${i}_pkey`, label: `${c.name} price/key`, path: `components[${i}].pricePerKey` });
}
if (c.mode === "lease") {
if (c.rentPerSqmYr) drivers.push({ key: `comp_${i}_rsqm`, label: `${c.name} rent/m²`, path: `components[${i}].rentPerSqmYr` });
if (c.rentPerUnitYr) drivers.push({ key: `comp_${i}_runit`, label: `${c.name} rent/unit`, path: `components[${i}].rentPerUnitYr` });
if (c.adr) drivers.push({ key: `comp_${i}_adr`, label: `${c.name} ADR`, path: `components[${i}].adr` });
if (c.exitCapRate) drivers.push({ key: `comp_${i}_cap`, label: `${c.name} exit cap`, path: `components[${i}].exitCapRate` });
}
});
const tornado = useMemoR(() => Feas.tornado(input, drivers, 0.15), [input]);
const baseIRR = result.kpi.equityIRR || 0;
// Two-way heatmap (price shock × construction shock)
const heatData = useMemoR(() => {
const priceShifts = [-0.15, -0.10, -0.05, 0, 0.05, 0.10, 0.15];
const costShifts = [-0.15, -0.10, -0.05, 0, 0.05, 0.10, 0.15];
const grid = [];
for (let r = 0; r < priceShifts.length; r++) {
const row = [];
for (let c = 0; c < costShifts.length; c++) {
const sim = JSON.parse(JSON.stringify(input));
sim.components = sim.components.map(comp => ({
...comp,
costPerSqmGFA: comp.costPerSqmGFA ? comp.costPerSqmGFA * (1 + costShifts[c]) : comp.costPerSqmGFA,
pricePerSqm: comp.pricePerSqm ? comp.pricePerSqm * (1 + priceShifts[r]) : comp.pricePerSqm,
pricePerUnit: comp.pricePerUnit ? comp.pricePerUnit * (1 + priceShifts[r]) : comp.pricePerUnit,
pricePerKey: comp.pricePerKey ? comp.pricePerKey * (1 + priceShifts[r]) : comp.pricePerKey,
rentPerSqmYr: comp.rentPerSqmYr ? comp.rentPerSqmYr * (1 + priceShifts[r]) : comp.rentPerSqmYr,
rentPerUnitYr: comp.rentPerUnitYr ? comp.rentPerUnitYr * (1 + priceShifts[r]) : comp.rentPerUnitYr,
adr: comp.adr ? comp.adr * (1 + priceShifts[r]) : comp.adr,
}));
const res = Feas.runFeasibility(sim);
row.push(res.kpi.equityIRR || 0);
}
grid.push(row);
}
return { grid, priceShifts, costShifts };
}, [input]);
return (
Sensitivity
What moves the needle
Tornado · Equity IRR sensitivity (±15%)
Two-way: Price (rows) × Construction cost (cols)
);
}
function Heatmap({ data, hurdle }) {
const { grid, priceShifts, costShifts } = data;
const flat = grid.flat();
const max = Math.max(...flat);
const min = Math.min(...flat);
const color = (v) => {
if (v >= hurdle) {
// green range
const t = (v - hurdle) / Math.max(0.001, max - hurdle);
return `oklch(${60 - t * 12}% ${0.10 + t * 0.06} 150)`;
} else {
const t = (hurdle - v) / Math.max(0.001, hurdle - min);
return `oklch(${70 - t * 18}% ${0.05 + t * 0.10} 30)`;
}
};
return (
{s >= 0 ? "+" : ""}{(s * 100).toFixed(0)}%
))}
{grid.map((row, r) => (
{priceShifts[r] >= 0 ? "+" : ""}{(priceShifts[r] * 100).toFixed(0)}%
{row.map((v, c) => (
{(v * 100).toFixed(1)}%
))}
))}
);
}
/* ---------- Monte Carlo panel ---------- */
function MonteCarloPanel({ input }) {
const [trials, setTrials] = useStateR(400);
const [tick, setTick] = useStateR(0);
const mc = useMemoR(() => Feas.monteCarlo(input, trials), [input, trials, tick]);
return (
Monte Carlo
Probabilistic outcomes
Trials
{[200, 400, 800, 1600].map(n => (
setTrials(n)} style={{
fontSize: 11, padding: "5px 12px", border: "1px solid var(--border-1)",
background: trials === n ? "var(--ad-navy-800)" : "transparent",
color: trials === n ? "white" : "var(--fg-2)",
cursor: "pointer", letterSpacing: "0.08em", fontVariantNumeric: "tabular-nums",
}}>{n}
))}
setTick(t => t + 1)} style={{
fontSize: 11, padding: "5px 12px", border: "1px solid var(--border-1)",
color: "var(--fg-2)", background: "transparent", cursor: "pointer", marginLeft: 12,
letterSpacing: "0.08em", textTransform: "uppercase",
}}>↻ Re-run
Shocks: ±7% pricing · ±8% cost · ±2mo delay · ±5% occupancy
0.7 ? "positive" : mc.probAboveHurdle > 0.4 ? "warning" : "negative"} sub={`vs ${fp(input.discountRate)}`} />
Equity IRR distribution
fp(v, 0)} />
Equity NPV distribution
fc(v)} />
Levered profit distribution
fc(v)} />
);
}
/* ---------- Waterfall (debt + equity) panel ---------- */
function WaterfallPanel({ result, input }) {
const cf = result.cashflow;
const k = result.kpi;
return (
Capital structure
Debt & equity waterfall
1 ? ` · peak ${fc(k.peakEquity)}` : ""}`} />
Sources cover uses · over time
Cumulative funding stack vs cumulative project spend
Uses incurred · over time
Cumulative spend broken down by category
Debt schedule · balance, draws & repayments
Outstanding balance (top) · monthly draws and repayments (bottom)
Returns split — base case
);
}
/* ---------- Coverage timeline (sources stack vs uses line) ---------- */
function CoverageChart({ cf, k }) {
const W = 900, H = 280;
const padL = 70, padR = 18, padT = 14, padB = 36;
const months = cf.months;
const horizon = months.length - 1;
// Cumulative sources (stacked: equity, debt, revenue)
const cumsum = (a) => { const o = new Array(a.length); let s = 0; for (let i = 0; i < a.length; i++) { s += a[i] || 0; o[i] = s; } return o; };
const cumEq = cumsum(cf.equityInjected || []);
const cumRev = cumsum(cf.revenueApplied || []);
const cumUse = cumsum(cf.totalUses || []);
// Debt cover (cost draws + capitalised interest) is the residual by
// construction: uses − equity − revenue applied.
const cumDb = cumUse.map((v, i) => Math.max(0, v - cumEq[i] - cumRev[i]));
// Stacked source totals at each month (eq + debt + revenue) ≡ cumUse.
const max = Math.max(cumUse[horizon] || 1, 1);
const x = (i) => padL + (i / Math.max(1, horizon)) * (W - padL - padR);
const y = (v) => padT + (1 - v / max) * (H - padT - padB);
// Build stacked polygons (bottom → top: equity, debt, revenue)
const stackArea = (lower, upper) => {
const top = upper.map((v, i) => `${x(i)},${y(v)}`).join(" ");
const bot = lower.map((v, i) => `${x(i)},${y(v)}`).reverse().join(" ");
return `${top} ${bot}`;
};
const z = new Array(cumEq.length).fill(0);
const eqTop = cumEq;
const dbTop = cumEq.map((v, i) => v + cumDb[i]);
const revTop = dbTop.map((v, i) => v + cumRev[i]);
// Milestone markers
const horizonYears = (horizon / 12);
const ticks = [];
for (let yr = 0; yr <= Math.ceil(horizonYears); yr++) {
ticks.push({ m: yr * 12, label: `Y${yr}` });
}
// Find construction-end marker if cumUse jumps in a recognizable way
// (use the predesign+construction midpoint of usage curve as a heuristic — skip)
return (
{/* Y gridlines */}
{[0, 0.25, 0.5, 0.75, 1].map((p, i) => (
{fc(max * p)}
))}
{/* Stacked source areas */}
`${x(i)},${y(v)}`).join(" ")}
/>
{/* X year ticks */}
{ticks.map((t, i) => t.m <= horizon && (
{t.label}
M{t.m}
))}
{/* Legend + totals */}
Horizon auto-sized to {horizon} months ({(horizon / 12).toFixed(1)} yrs) — predesign + construction + sell-down / hold + tail.
);
}
function LegendChip({ color, label, value, dashed }) {
return (
{label}
{value !== undefined && (
{fc(value)}
)}
);
}
function DebtChart({ cf, input }) {
const W = 900, H = 340;
const padL = 70, padR = 18, padT = 14, padB = 38;
const months = cf.months;
const horizon = months.length - 1;
// Split chart into two vertical zones to avoid overlap:
// • top zone (60%) — outstanding balance area + line
// • bottom zone (35%) — monthly draws (up) and repayments (down) as bars
const splitY = padT + (H - padT - padB) * 0.62;
const gap = 18;
const topPlot = { y0: padT, y1: splitY - gap / 2 };
const botPlot = { y0: splitY + gap / 2, y1: H - padB };
const topH = topPlot.y1 - topPlot.y0;
const botH = botPlot.y1 - botPlot.y0;
const botMid = botPlot.y0 + botH / 2;
// Scales
const balance = cf.debtBalance;
const draw = cf.debtDraw;
const repay = cf.debtRepay; // negative numbers
const interest = cf.interest || []; // negative numbers
const balMax = Math.max(1, ...balance);
const flowMax = Math.max(1, ...draw, ...repay.map(v => -v));
const x = (i) => padL + (i / Math.max(1, horizon)) * (W - padL - padR);
const yBal = (v) => topPlot.y1 - (v / balMax) * topH;
const yFlow = (v) => botMid - (v / flowMax) * (botH / 2);
const innerW = W - padL - padR;
const bw = Math.max(1.5, innerW / months.length * 0.75);
// Year ticks
const ticks = [];
for (let yr = 0; yr <= Math.ceil(horizon / 12); yr++) {
if (yr * 12 <= horizon) ticks.push({ m: yr * 12, label: `Y${yr}` });
}
// Y tick values for balance
const balTicks = [0, balMax / 2, balMax];
return (
{/* ===== TOP ZONE — balance ===== */}
{balTicks.map((v, i) => (
{fc(v)}
))}
{/* Balance area fill */}
`${x(i)},${yBal(v)}`).join(" ")} ${x(horizon)},${yBal(0)}`}
fill="var(--ad-navy-500)" opacity="0.18"
/>
`${x(i)},${yBal(v)}`).join(" ")} />
Outstanding balance
Peak {fc(balMax)}
{/* Divider between zones */}
+{fc(flowMax)}
0
−{fc(flowMax)}
{/* Draw bars (up, navy) */}
{draw.map((v, i) => v > 0 && (
Monthly flows
{/* X axis (year markers, span both zones) */}
{ticks.map((t, i) => (
{t.label}
M{t.m}
))}
);
}
/* ---------- Uses-by-category cumulative chart (mirror of CoverageChart) ---------- */
function UsesChart({ cf }) {
const W = 900, H = 280;
const padL = 70, padR = 18, padT = 14, padB = 36;
const months = cf.months;
const horizon = months.length - 1;
const ubc = cf.usesByCat || {};
const cumsum = (a) => { const o = new Array((a || []).length); let s = 0; for (let i = 0; i < (a || []).length; i++) { s += a[i] || 0; o[i] = s; } return o; };
// Stack order (bottom → top) mirrors the typical cost narrative
const layers = [
{ key: "land", label: "Land + fees", color: "var(--ad-navy-900)" },
{ key: "siteWork", label: "Site work", color: "var(--ad-navy-700)" },
{ key: "construction", label: "Construction", color: "var(--ad-navy-500)" },
{ key: "soft", label: "Soft costs", color: "var(--ad-navy-300)" },
{ key: "contingency", label: "Contingency", color: "var(--ad-sand-700)" },
{ key: "marketing", label: "Selling / mktg", color: "var(--ad-sand-500)" },
{ key: "interest", label: "Interest", color: "var(--ad-gold-500)" },
].filter(l => ubc[l.key] && ubc[l.key].some(v => v));
const cums = layers.map(l => cumsum(ubc[l.key]));
// Stacked cumulative tops
const tops = [];
for (let li = 0; li < layers.length; li++) {
const prev = li === 0 ? new Array(cums[0].length).fill(0) : tops[li - 1];
tops.push(cums[li].map((v, i) => v + prev[i]));
}
const totalTop = tops[tops.length - 1] || [0];
const max = Math.max(1, totalTop[horizon] || 1);
const x = (i) => padL + (i / Math.max(1, horizon)) * (W - padL - padR);
const y = (v) => padT + (1 - v / max) * (H - padT - padB);
const stackArea = (lower, upper) => {
const top = upper.map((v, i) => `${x(i)},${y(v)}`).join(" ");
const bot = lower.map((v, i) => `${x(i)},${y(v)}`).reverse().join(" ");
return `${top} ${bot}`;
};
const z = new Array((tops[0] || []).length).fill(0);
const ticks = [];
for (let yr = 0; yr <= Math.ceil(horizon / 12); yr++) {
if (yr * 12 <= horizon) ticks.push({ m: yr * 12, label: `Y${yr}` });
}
return (
{[0, 0.25, 0.5, 0.75, 1].map((p, i) => (
{fc(max * p)}
))}
{layers.map((l, li) => (
{t.label}
M{t.m}
))}
{layers.map((l, i) => {
const total = cums[i][horizon] || 0;
return
);
}
/* ---------- Yearly debt schedule table + repayment-driver note ---------- */
function DebtScheduleTable({ cf, input, k }) {
const months = cf.months;
const years = Math.ceil(months.length / 12);
const rows = [];
let openBal = 0;
for (let yr = 0; yr < years; yr++) {
const slice = (arr) => arr.slice(yr * 12, (yr + 1) * 12).reduce((s, v) => s + v, 0);
const draw = slice(cf.debtDraw);
const repay = -slice(cf.debtRepay); // make positive
const interest = -slice(cf.interest); // make positive
const endIdx = Math.min(months.length - 1, (yr + 1) * 12 - 1);
const closeBal = cf.debtBalance[endIdx] || 0;
rows.push({ yr, openBal, draw, interest, repay, closeBal });
openBal = closeBal;
}
const totDraw = rows.reduce((s, r) => s + r.draw, 0);
const totRepay = rows.reduce((s, r) => s + r.repay, 0);
const totInt = rows.reduce((s, r) => s + r.interest, 0);
return (
Annual debt schedule
Year
Opening balance
Drawn
Interest accrued
Repaid (principal + int.)
Closing balance
{rows.map(r => (
Y{r.yr + 1}
{r.openBal ? fc(r.openBal) : "—"}
0 ? "var(--ad-navy-800)" : "var(--fg-4)" }}>{r.draw ? fc(r.draw) : "—"}
0 ? "var(--ad-danger)" : "var(--fg-4)" }}>{r.interest ? fc(r.interest) : "—"}
0 ? "var(--ad-gold-600)" : "var(--fg-4)" }}>{r.repay ? fc(r.repay) : "—"}
{r.closeBal ? fc(r.closeBal) : "—"}
))}
Total
—
{fc(totDraw)}
{fc(totInt)}
{fc(totRepay)}
—
Funding order · Debt-first draw + cash sweep
The facility funds 100% of each month's development outflows (land,
construction, site, soft, contingency) — and accrued interest capitalises into the balance, consuming headroom —
until the facility cap of {fc(k.devCostExFinance * input.ltc)} ({fp(input.ltc)} LTC)
is reached. Only then is equity called for the remainder.
Interest accrues monthly at {fp(input.interestRate)} on
the outstanding balance. Every SAR of positive operating cashflow —
sales receipts, NOI, and exit proceeds — sweeps against accrued interest first, then principal, until the loan is fully closed.
Any residual balance at the project's natural exit month is force-cleared from exit proceeds.
);
}
/* ---------- Cash-sweep table — where the principal repayment came from ---------- */
function CashSweepTable({ cf }) {
const months = cf.months;
const years = Math.ceil(months.length / 12);
// Slice helpers
const slice = (arr, yr) => arr.slice(yr * 12, (yr + 1) * 12).reduce((s, v) => s + v, 0);
const rows = [];
for (let yr = 0; yr < years; yr++) {
const sales = slice(cf.sales, yr);
const noi = slice(cf.noi, yr); // NOI = rent - opex (already net)
const exit = slice(cf.exit, yr);
const cashIn = sales + noi + exit;
const intPaid = slice(cf.interestPaid, yr);
const principal = slice(cf.principalRepay, yr);
const sweep = intPaid + principal;
const toEquity = Math.max(0, cashIn - sweep);
// Skip rows where there's no positive cash AND no repayment (i.e. construction-only years)
if (cashIn <= 0.5 && sweep <= 0.5) continue;
rows.push({ yr, sales, noi, exit, cashIn, intPaid, principal, sweep, toEquity });
}
const totals = rows.reduce((t, r) => ({
sales: t.sales + r.sales, noi: t.noi + r.noi, exit: t.exit + r.exit,
cashIn: t.cashIn + r.cashIn,
intPaid: t.intPaid + r.intPaid, principal: t.principal + r.principal,
sweep: t.sweep + r.sweep, toEquity: t.toEquity + r.toEquity,
}), { sales: 0, noi: 0, exit: 0, cashIn: 0, intPaid: 0, principal: 0, sweep: 0, toEquity: 0 });
return (
Cash applied to debt service — positive cashflow swept against the loan
Each row shows the year's positive operating cashflow (sales + NOI + exit) and how much was swept
against interest then principal. The remainder is what flowed through to equity that year.
Year
Sales
NOI
Exit
Positive cashflow
→ Interest paid
→ Principal repaid
Net to equity
{rows.map(r => (
Y{r.yr + 1}
{r.sales ? fc(r.sales) : "—"}
{r.noi ? fc(r.noi) : "—"}
{r.exit ? fc(r.exit) : "—"}
{r.cashIn ? fc(r.cashIn) : "—"}
0 ? "var(--ad-danger)" : "var(--fg-4)" }}>{r.intPaid ? fc(r.intPaid) : "—"}
0 ? "var(--ad-gold-600)" : "var(--fg-4)" }}>{r.principal ? fc(r.principal) : "—"}
0 ? "var(--ad-success)" : "var(--fg-4)", fontWeight: 600 }}>{r.toEquity ? fc(r.toEquity) : "—"}
))}
Total
{totals.sales ? fc(totals.sales) : "—"}
{totals.noi ? fc(totals.noi) : "—"}
{totals.exit ? fc(totals.exit) : "—"}
{fc(totals.cashIn)}
{fc(totals.intPaid)}
{fc(totals.principal)}
{fc(totals.toEquity)}
);
}
function ReturnsSplit({ k, input }) {
// ----- USES: every dollar the project spends, over its life -----
const usesItems = [
{ label: "Land + transfer fees", value: k.landCost + k.landTransferFees, color: "var(--ad-navy-900)" },
{ label: "Construction", value: k.constructionCost, color: "var(--ad-navy-700)" },
{ label: "Land infrastructure", value: k.landInfraCost || 0, color: "var(--ad-navy-600)" },
{ label: "Site work", value: k.siteWorkCost - (k.landInfraCost || 0), color: "var(--ad-navy-500)" },
{ label: "Soft costs", value: k.softCosts, color: "var(--ad-navy-300)" },
{ label: "Contingency", value: k.contingency, color: "var(--ad-sand-700)" },
{ label: "Marketing", value: k.marketing, color: "var(--ad-sand-500)" },
{ label: "Sales commission", value: k.salesCommission, color: "var(--ad-sand-300)" },
{ label: "Government fees", value: k.govFees, color: "var(--ad-sand-200)" },
{ label: "Financing interest", value: k.totalInterest, color: "var(--ad-gold-500)" },
].filter(i => i.value > 0.5);
const totalUses = usesItems.reduce((s, i) => s + i.value, 0);
// ----- SOURCES: tie to uses — equity (cash called), debt drawn, and
// revenue the project retained against costs (interest rolled past the
// facility cap, selling costs netted from receipts).
const debtDrawn = k.debtDrawnTotal || 0;
const equity = k.totalEquity;
const revenueApplied = Math.max(0, totalUses - equity - debtDrawn);
const sourcesItems = [
{ label: "Equity contributed", value: equity, color: "var(--ad-navy-900)" },
{ label: "Debt drawn", value: debtDrawn, color: "var(--ad-navy-500)" },
{ label: "Revenue applied", value: revenueApplied, color: "var(--ad-gold-500)" },
].filter(i => i.value > 0.5 || i.label === "Equity contributed");
const totalSources = sourcesItems.reduce((s, i) => s + i.value, 0);
// For visual balance, scale both columns to the same max so length ⇔ SAR.
const scaleMax = Math.max(totalSources, totalUses, 1);
const tie = Math.abs(totalSources - totalUses) < 1;
// ----- RETURNS: what the equity holder actually gets back -----
const profit = k.profit;
const peakEquityAtRisk = k.peakEquity || equity;
const equityReturn = equity + profit;
const debtPaid = debtDrawn + k.totalInterest;
const returnsMax = Math.max(debtPaid, equityReturn, 1);
return (
{/* Sources */}
Sources
{sourcesItems.map(s => (
{/* Uses */}
Uses
{usesItems.map(u => (
{/* Returns */}
Returns
Equity multiple {equity > 0 ? `${(equityReturn / equity).toFixed(2)}×` : "—"}
Peak equity at risk {fc(peakEquityAtRisk)}
Profit (levered) = 0 ? "var(--ad-success)" : "var(--ad-danger)", fontWeight: 500 }}>{fc(profit)}
{/* Balance check — confirms sources = uses */}
{tie ? "Balanced — Σ sources = Σ uses" : "Out of balance"}
{fc(totalSources)} = {fc(totalUses)}
);
}
function TotalRow({ label, value }) {
return (
{label}
{fc(value)}
);
}
function Bar({ label, value, max, color }) {
const pct = max > 0 ? value / max : 0;
return (
);
}
/* ---------- Risk panel ---------- */
function RiskPanel({ result, input }) {
const k = result.kpi;
const risks = result.risks;
const tones = {
success: { bg: "rgba(46,125,91,0.06)", border: "var(--ad-success)", color: "var(--ad-success)", label: "OK" },
warning: { bg: "rgba(184,118,30,0.07)", border: "var(--ad-warning)", color: "var(--ad-warning)", label: "Watch" },
danger: { bg: "rgba(176,50,28,0.06)", border: "var(--ad-danger)", color: "var(--ad-danger)", label: "Red Flag" },
};
const byLevel = { danger: [], warning: [], success: [] };
risks.forEach(r => byLevel[r.level].push(r));
return (
Diligence
Risk register & red flags
0 ? "negative" : "positive"} />
0 ? "warning" : "positive"} />
{[...byLevel.danger, ...byLevel.warning, ...byLevel.success].map((r, i) => {
const t = tones[r.level];
return (
);
})}
Quick diagnostics
0.12} />
0.15} />
);
}
function Diag({ label, value, ok }) {
return (
{label}
{value}
);
}
/* ---------- Returns panel ---------- */
function ReturnsPanel({ result, input }) {
const k = result.kpi;
const cf = result.cashflow;
const monthLabel = (m) => m === null ? "—" : `${(m / 12).toFixed(1)} yrs`;
// Cumulative equity (net) cashflow — shows when payback hits
const cumEquity = [];
let cum = 0;
for (const v of cf.net) { cum += v; cumEquity.push(cum); }
// Cumulative project (unlevered, gross) cashflow
const cumProject = [];
cum = 0;
for (const v of cf.gross) { cum += v; cumProject.push(cum); }
const hurdle = input.discountRate || 0;
const irrTone = (k.equityIRR ?? 0) >= hurdle ? "positive" : "negative";
const equityMultiple = k.totalEquity > 0 ? 1 + (k.profit / k.totalEquity) : null;
const projectMultiple = k.totalCost > 0 ? 1 + (k.profitUnlevered / k.totalCost) : 0;
return (
Returns
Levered vs unlevered, multiples, payback and profit decomposition
{/* Headline 2x2 — Equity vs Project */}
{/* Equity (levered) */}
Equity · Levered
{irrTone === "positive" ? "Clears hurdle" : "Below hurdle"}
= 0 ? "positive" : "negative"} />
{/* Project (unlevered) */}
Project · Unlevered
Property fundamentals
{/* Leverage benefit strip */}
Leverage benefit on IRR
{k.equityIRR !== null && k.projectIRR !== null ? `+${((k.equityIRR - k.projectIRR) * 100).toFixed(1)} pp` : "—"}
Equity IRR − Project IRR
Interest paid
{fc(k.totalInterest)}
Cost of leverage
Profit boost from debt
{fc(k.profit - k.profitUnlevered)}
Levered − unlevered profit
{/* Two-column: cumulative cashflow chart + profit waterfall */}
Cumulative cashflow — equity vs project
{/* Revenue → Profit waterfall (moved from Cost tab) */}
Revenue → Profit waterfall
s.type !== "delta" || Math.abs(s.value) > 0.5)} height={260} formatY={v => `${(v / 1e6).toFixed(0)}M`} />
);
}
function ReturnsMetric({ eyebrow, value, sub, tone = "default" }) {
const colors = {
default: "var(--fg-1)",
positive: "var(--ad-success)",
negative: "var(--ad-danger)",
};
return (
{eyebrow}
{value}
{sub &&
{sub}
}
);
}
function CumulativeCashflowChart({ months, equityCum, projectCum, equityPayback, projectPayback, horizon }) {
const W = 600, H = 220;
const padL = 40, padR = 12, padT = 12, padB = 24;
const innerW = W - padL - padR;
const innerH = H - padT - padB;
const len = months.length;
const allValues = [...equityCum, ...projectCum, 0];
const minV = Math.min(...allValues);
const maxV = Math.max(...allValues);
const range = maxV - minV || 1;
const x = (i) => padL + (i / Math.max(1, len - 1)) * innerW;
const y = (v) => padT + (1 - (v - minV) / range) * innerH;
const path = (arr) => arr.map((v, i) => `${i === 0 ? "M" : "L"} ${x(i)} ${y(v)}`).join(" ");
const fmtY = (v) => {
const a = Math.abs(v);
if (a >= 1e9) return `${(v / 1e9).toFixed(1)}B`;
if (a >= 1e6) return `${(v / 1e6).toFixed(0)}M`;
if (a >= 1e3) return `${(v / 1e3).toFixed(0)}K`;
return v.toFixed(0);
};
return (
{/* Zero baseline */}
{fmtY(maxV)}
0
{fmtY(minV)}
{/* X-axis ticks at each year */}
{Array.from({ length: Math.floor(horizon / 12) + 1 }, (_, i) => i * 12).map((m) => (
{`Y${m/12}`}
))}
{/* Project line */}
)}
);
}
function ProfitWaterfall({ k }) {
// Revenue → Costs → Interest → Profit
const items = [
{ label: "Total revenue", value: k.totalRevenue, color: "var(--ad-success)", sign: "+" },
{ label: "Project costs", value: -k.totalCost, color: "var(--ad-danger)", sign: "−" },
{ label: "Finance interest", value: -k.totalInterest, color: "var(--ad-gold-600)", sign: "−" },
{ label: "Net profit", value: k.profit, color: k.profit >= 0 ? "var(--ad-navy-900)" : "var(--ad-danger)", sign: "=", bold: true },
];
const max = Math.max(...items.map(i => Math.abs(i.value)), 1);
return (
{items.map((it, i) => {
const pct = (Math.abs(it.value) / max) * 100;
return (
{it.sign}
{it.label}
{fc(it.value)}
);
})}
Margin on revenue
{k.totalRevenue > 0 ? fp(k.profit / k.totalRevenue) : "—"}
Margin on cost
{(k.totalCost + k.totalInterest) > 0 ? fp(k.profit / (k.totalCost + k.totalInterest)) : "—"}
Year
Project CFunlevered
+ Debt draw − Debt repay
= Equity CFlevered
Cum. equity
{rows.map((r) => (
Y{r.y + 1}
{r.project === 0 ? "—" : fc(r.project)}
{r.debtDraw === 0 ? "—" : `+${fc(r.debtDraw).replace("SAR ", "")}`}
{r.debtRepay === 0 ? "—" : fc(r.debtRepay)}
{fc(r.equity)}
{fc(r.cumEquity)}
))}
Total
{fc(totalProject)}
{`+${fc(totalDraw).replace("SAR ", "")}`}
{fc(totalRepay)}
{fc(totalEquity)}
= profit
);
}
/* ---------- Scenarios panel ---------- */
function ScenariosPanel({ scenarios, input }) {
if (!scenarios) return null;
const rows = [
["Equity IRR", "equityIRR", fp],
["Equity NPV", "equityNPV", fc],
["Project IRR", "projectIRR", fp],
["Equity ROI", "equityROI", fp],
["Profit (levered)", "profit", fc],
["Profit (unlevered)", "profitUnlevered", fc],
["Peak debt", "peakDebt", fc],
["Peak equity", "totalEquity", fc],
["Total interest", "totalInterest", fc],
["Min DSCR", "minDSCR", v => v ? `${v.toFixed(2)}×` : "—"],
["Equity payback (mo)", "equityPayback", v => v ? `${v}` : "—"],
];
return (
Scenario comparison
Down · Base · Up
Side-by-side
Metric
Downside
Base
Upside
Δ Range
{rows.map(([label, key, fmt]) => {
const dv = scenarios.downside.kpi[key];
const bv = scenarios.base.kpi[key];
const uv = scenarios.upside.kpi[key];
return (
{label}
{fmt(dv)}
{fmt(bv)}
{fmt(uv)}
{typeof bv === "number" && typeof uv === "number" && typeof dv === "number" ? fmt(uv - dv) : "—"}
);
})}
Scenario assumptions: Downside shifts pricing −10%, construction +10%, and adds 3-month delay. Upside shifts pricing +10%, construction −5%, removes 2 months. Base = your inputs.
);
}
window.Panels = { SummaryPanel, CashflowPanel, CostPanel, ProgramPanel, ReturnsPanel, SensitivityPanel, MonteCarloPanel, WaterfallPanel, RiskPanel, ScenariosPanel };