[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":21,"_26":27,"_28":27,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","693db12e7350819193b4ddb90daf7986","versionInt","title","RE101 CRE Calculator","type","code/react","content","import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Slider } from \"@/components/ui/slider\";\n\n// --- formatting helpers ---\nconst currencyFormatter = new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n});\n\nfunction formatCurrencyAccounting(n) {\n const num = Number(n);\n if (!Number.isFinite(num)) return \"$0.00\";\n if (num < 0) return `(${currencyFormatter.format(Math.abs(num))})`;\n return currencyFormatter.format(num);\n}\n\nfunction parseCurrencyInput(str) {\n // Allow users to type $, commas, spaces, etc. Keep digits, ., and leading -.\n if (str == null) return 0;\n const cleaned = String(str)\n .replace(/[^0-9.\\-]/g, \"\")\n .replace(/(?!^)-/g, \"\"); // remove any minus signs not at start\n\n // handle multiple decimals by keeping the first\n const parts = cleaned.split(\".\");\n const normalized = parts.length <= 2 ? cleaned : `${parts[0]}.${parts.slice(1).join(\"\")}`;\n\n const n = Number(normalized);\n return Number.isFinite(n) ? n : 0;\n}\n\nfunction clamp(n, min, max) {\n const num = Number(n);\n if (!Number.isFinite(num)) return min;\n return Math.min(max, Math.max(min, num));\n}\n\nfunction CurrencyInput({ label, value, onValueChange, placeholder }) {\n const [display, setDisplay] = useState(formatCurrencyAccounting(value));\n const isEditingRef = useRef(false);\n\n useEffect(() => {\n // Only overwrite the display when the user is NOT actively editing\n if (!isEditingRef.current) setDisplay(formatCurrencyAccounting(value));\n }, [value]);\n\n return (\n

\n {label ? {label} : null}\n {\n isEditingRef.current = true;\n // Helpful UX: select all on focus\n requestAnimationFrame(() => e.target.select());\n }}\n onChange={(e) => {\n const next = e.target.value;\n setDisplay(next);\n onValueChange(parseCurrencyInput(next));\n }}\n onBlur={() => {\n isEditingRef.current = false;\n setDisplay(formatCurrencyAccounting(value));\n }}\n />\n

\n );\n}\n\n// Main Crexi-style Valuation Calculator (default export)\nexport default function CrexiStyleCalculator() {\n const [purchasePrice, setPurchasePrice] = useState(3900000);\n const [noi, setNoi] = useState(295376);\n const [downPaymentPct, setDownPaymentPct] = useState(30);\n const [interestRate, setInterestRate] = useState(7);\n const [term, setTerm] = useState(25);\n const [mode, setMode] = useState(\"percent\"); // \"percent\" or \"dollar\"\n\n // derived values\n const loanAmount = useMemo(() => purchasePrice * (1 - downPaymentPct / 100), [purchasePrice, downPaymentPct]);\n const monthlyRate = interestRate / 100 / 12;\n const numPayments = Math.max(1, term * 12);\n\n const monthlyPayment = useMemo(() => {\n if (monthlyRate === 0) return loanAmount / numPayments;\n return (loanAmount * monthlyRate) / (1 - Math.pow(1 / (1 + monthlyRate), numPayments));\n }, [loanAmount, monthlyRate, numPayments]);\n\n const annualDebtService = monthlyPayment * 12;\n const annualCashFlow = noi - annualDebtService;\n\n const dscr = annualDebtService === 0 ? 0 : noi / annualDebtService;\n const capRate = purchasePrice === 0 ? 0 : noi / purchasePrice;\n const roi =\n purchasePrice * (downPaymentPct / 100) === 0\n ? 0\n : annualCashFlow / (purchasePrice * (downPaymentPct / 100));\n\n // handlers\n const handleInterestChange = (val) => setInterestRate(Number.isFinite(Number(val)) ? Number(val) : 0);\n const handleTermChange = (val) => setTerm(Number.isFinite(Number(val)) ? Number(val) : 0);\n\n const handleDownPaymentPercentChange = (val) => {\n const pct = clamp(val, 0, 100);\n setDownPaymentPct(pct);\n };\n\n const handleDownPaymentDollarChange = (val) => {\n const dollars = Number(val);\n const pct = purchasePrice === 0 ? 0 : (dollars / purchasePrice) * 100;\n handleDownPaymentPercentChange(pct);\n };\n\n const downPaymentDollars = (purchasePrice * downPaymentPct) / 100;\n\n return (\n <>\n

Valuation Calculator

\n\n

\n {/* Left Inputs */}\n

\n setPurchasePrice(n)}\n placeholder=\"$0.00\"\n />\n setNoi(n)}\n placeholder=\"$0.00\"\n />\n

\n\n

\n Down Payment\n\n {/* Toggle */}\n

\n setMode(\"percent\")}\n className={`px-4 py-1 rounded-xl border w-20 text-center ${mode === \"percent\" ? \"bg-black text-white\" : \"bg-white\"}`}\n >\n %\n \n setMode(\"dollar\")}\n className={`px-4 py-1 rounded-xl border w-20 text-center ${mode === \"dollar\" ? \"bg-black text-white\" : \"bg-white\"}`}\n >\n $\n \n

\n\n {/* Down Payment Input */}\n {mode === \"percent\" ? (\n

\n handleDownPaymentPercentChange(e.target.value)}\n />\n %\n

\n ) : (\n

\n handleDownPaymentDollarChange(n)}\n placeholder=\"$0.00\"\n />\n

\n )}\n\n {/* Slider */}\n handleDownPaymentPercentChange(val[0])}\n />\n\n {/* LTV display */}\n

LTV: {(100 - downPaymentPct).toFixed(2)}%

\n\n

\n Interest Rate *\n handleInterestChange(e.target.value)} />\n

\n Term (years) *\n handleTermChange(e.target.value)} />\n

\n\n {/* Right Outputs */}\n

\n \n \n

Loan Amount

{formatCurrencyAccounting(loanAmount)}

\n\n

Down Payment

{formatCurrencyAccounting(downPaymentDollars)}

{downPaymentPct.toFixed(2)}%

\n\n

Annual Debt Service

{formatCurrencyAccounting(annualDebtService)}

{formatCurrencyAccounting(annualDebtService / 12)}/mo

\n\n

Annual Cash Flow

{formatCurrencyAccounting(annualCashFlow)}

{formatCurrencyAccounting(annualCashFlow / 12)}/mo

\n \n \n

\n\n {/* Valuation Metrics */}\n

Valuation Metrics

\n\n

\n \n

DSCR

{dscr.toFixed(2)}

\n \n\n \n

Cap Rate

{(capRate * 100).toFixed(2)}%

\n \n\n \n

ROI

{(roi * 100).toFixed(2)}%

\n \n

\n\n {/* Embed NOI Calculator below (single declaration) */}\n \n \n {/* Attribution / Disclosure */}\n

\n This calculator was originally created by one of our community members, Miren Karmele Alvarez,\n and replaces the valuation calculator functionality that Crexi.com recently moved behind a paywall.\n

\n Real Estate 101 is making this tool publicly available to help investors quickly evaluate commercial real estate deals.\n

\n We typically target purchase prices that produce a 12–15% ROI or a 7%+ cap rate,\n which gives us room to negotiate creative financing options such as seller financing.\n

\n \n );\n}\n\n// --- Single NOICalculator Component (declared once) ---\nexport function NOICalculator() {\n // Keep numeric values as source of truth for calculations.\n const [price, setPrice] = useState(0);\n const [noi, setNoi] = useState(0);\n const [capRatePct, setCapRatePct] = useState(0); // user-entered percent, e.g. 11.5\n\n // Separate display state so we never fight the user's typing (especially decimals).\n const [priceDisplay, setPriceDisplay] = useState(formatCurrencyAccounting(0));\n const [noiDisplay, setNoiDisplay] = useState(formatCurrencyAccounting(0));\n const [capDisplay, setCapDisplay] = useState(\"0.00\");\n\n const priceEditing = useRef(false);\n const noiEditing = useRef(false);\n const capEditing = useRef(false);\n\n const anyEditing = () => priceEditing.current || noiEditing.current || capEditing.current;\n\n const parsePercentInput = (str) => {\n if (str == null) return 0;\n const cleaned = String(str)\n .replace(/[^0-9.\\-]/g, \"\")\n .replace(/(?!^)-/g, \"\");\n\n // allow a trailing dot while typing (\"11.\"), treat as number 11 for calculations\n const parts = cleaned.split(\".\");\n const normalized = parts.length <= 2 ? cleaned : `${parts[0]}.${parts.slice(1).join(\"\")}`;\n\n const n = Number(normalized);\n return Number.isFinite(n) ? n : 0;\n };\n\n const formatPercent = (n) => {\n const num = Number(n);\n if (!Number.isFinite(num)) return \"0.00\";\n return num.toFixed(2);\n };\n\n const providedCount = () => {\n const hasPrice = Number.isFinite(price) && price !== 0;\n const hasNoi = Number.isFinite(noi) && noi !== 0;\n const hasCap = Number.isFinite(capRatePct) && capRatePct !== 0;\n return { hasPrice, hasNoi, hasCap, count: [hasPrice, hasNoi, hasCap].filter(Boolean).length };\n };\n\n const syncDisplaysIfNotEditing = () => {\n if (!priceEditing.current) setPriceDisplay(formatCurrencyAccounting(price));\n if (!noiEditing.current) setNoiDisplay(formatCurrencyAccounting(noi));\n if (!capEditing.current) setCapDisplay(formatPercent(capRatePct));\n };\n\n useEffect(() => {\n // Keep displays aligned when values change programmatically (but never while the user is typing).\n if (!anyEditing()) syncDisplaysIfNotEditing();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [price, noi, capRatePct]);\n\n const tryAutoCalculate = () => {\n const { hasPrice, hasNoi, hasCap, count } = providedCount();\n if (count !== 2) return;\n\n // Compute the missing value.\n if (!hasPrice && hasNoi && hasCap) {\n const c = capRatePct / 100;\n const calculatedPrice = c === 0 ? 0 : noi / c;\n setPrice(calculatedPrice);\n setPriceDisplay(formatCurrencyAccounting(calculatedPrice));\n return;\n }\n\n if (!hasNoi && hasPrice && hasCap) {\n const c = capRatePct / 100;\n const calculatedNoi = price * c;\n setNoi(calculatedNoi);\n setNoiDisplay(formatCurrencyAccounting(calculatedNoi));\n return;\n }\n\n if (!hasCap && hasPrice && hasNoi) {\n const calculatedCap = price === 0 ? 0 : (noi / price) * 100;\n setCapRatePct(calculatedCap);\n setCapDisplay(formatPercent(calculatedCap));\n }\n };\n\n const clearAll = () => {\n setPrice(0);\n setNoi(0);\n setCapRatePct(0);\n setPriceDisplay(formatCurrencyAccounting(0));\n setNoiDisplay(formatCurrencyAccounting(0));\n setCapDisplay(\"0.00\");\n };\n\n const { count } = providedCount();\n const helperText =\n count < 2\n ? \"Enter any two values to calculate the third.\"\n : count === 3\n ? \"All three fields are filled. To re-calculate, clear the other field (set it to 0).\"\n : \"Nice. Clear the other field and the third value will auto-fill.\";\n\n return (\n

NOI / Cap Rate / Price Calculator

{helperText}

\n \n Clear\n \n

\n\n

\n {/* Purchase Price */}\n

\n Purchase Price\n {\n priceEditing.current = true;\n requestAnimationFrame(() => e.target.select());\n }}\n onChange={(e) => {\n const next = e.target.value;\n setPriceDisplay(next);\n setPrice(parseCurrencyInput(next));\n }}\n onBlur={() => {\n priceEditing.current = false;\n setPriceDisplay(formatCurrencyAccounting(price));\n tryAutoCalculate();\n }}\n />\n

\n\n {/* Cap Rate */}\n

\n Cap Rate\n

\n {\n capEditing.current = true;\n requestAnimationFrame(() => e.target.select());\n }}\n onChange={(e) => {\n const next = e.target.value;\n setCapDisplay(next);\n setCapRatePct(parsePercentInput(next));\n }}\n onBlur={() => {\n capEditing.current = false;\n setCapDisplay(formatPercent(capRatePct));\n tryAutoCalculate();\n }}\n />\n %\n

\n\n {/* NOI */}\n

\n Net Operating Income (NOI)\n {\n noiEditing.current = true;\n requestAnimationFrame(() => e.target.select());\n }}\n onChange={(e) => {\n const next = e.target.value;\n setNoiDisplay(next);\n setNoi(parseCurrencyInput(next));\n }}\n onBlur={() => {\n noiEditing.current = false;\n setNoiDisplay(formatCurrencyAccounting(noi));\n tryAutoCalculate();\n }}\n />\n

\n\n

\n Formula: Price = NOI ÷ (Cap Rate %)\n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch","shouldPrefetchAccount",true,"shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","11261164182541548498","traceTime",1776474409624]