function RentInputField({ id, name, value, onChange }) { return /*#__PURE__*/ React.createElement("input", { type: "number", id: id, name: name, value: value, onChange: onChange, className: "mt-1 p-2 w-full border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function RentInputFieldStory() { const [baseRent, setBaseRent] = React.useState(""); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RentInputField, { id: "baseRent", name: "baseRent", value: baseRent, onChange: (e)=>setBaseRent(e.target.value), __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const [result, setResult] = React.useState(null); const [rentIncreases, setRentIncreases] = React.useState([ { from: "", to: "", rent: "" } ]); const handleRentIncreaseChange = (index, event)=>{ const newRentIncreases = [ ...rentIncreases ]; newRentIncreases[index][event.target.name] = event.target.value; setRentIncreases(newRentIncreases); }; const addRentIncreaseField = ()=>{ setRentIncreases([ ...rentIncreases, { from: "", to: "", rent: "" } ]); }; const calculateNER = (event)=>{ event.preventDefault(); const leaseSize = parseFloat(event.target.leaseSize.value); const term = parseFloat(event.target.term.value); const baseRent = parseFloat(event.target.baseRent.value); const freeRent = parseFloat(event.target.freeRent.value); const tenantImprovement = parseFloat(event.target.tenantImprovement.value); const commission = parseFloat(event.target.commission.value); const discountRate = parseFloat(event.target.discountRate.value) / 100; let annualRentArray = []; rentIncreases.forEach(({ from, to, rent })=>{ const months = (new Date(to) - new Date(from)) / (1000 * 60 * 60 * 24 * 30); for(let i = 0; i < months; i++){ annualRentArray.push(parseFloat(rent) * leaseSize / 12); } }); const npv = annualRentArray.reduce((acc, rent, month)=>acc + rent / Math.pow(1 + discountRate, month / 12), 0); const totalFreeRent = baseRent * leaseSize * freeRent / 12; const totalCommission = commission; const netEffectiveRent = (npv - totalFreeRent - tenantImprovement * leaseSize - totalCommission) / term / leaseSize * 12; setResult(netEffectiveRent.toFixed(2)); }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, "Net Effective Rent Calculator"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: calculateNER, __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "leaseSize", className: "block text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Leasing Size (sq ft)"), /*#__PURE__*/ React.createElement(RentInputField, { id: "leaseSize", name: "leaseSize", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "term", className: "block text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Term (years)"), /*#__PURE__*/ React.createElement(RentInputField, { id: "term", name: "term", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "baseRent", className: "block text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "Base Rent ($/sq ft/year)"), /*#__PURE__*/ React.createElement(RentInputField, { id: "baseRent", name: "baseRent", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Rent Increase"), rentIncreases.map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "space-y-2", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, "From"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "from", value: rentIncreases[index].from, onChange: (e)=>handleRentIncreaseChange(index, e), className: "mt-1 p-2 w-full border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, "To"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "to", value: rentIncreases[index].to, onChange: (e)=>handleRentIncreaseChange(index, e), className: "mt-1 p-2 w-full border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }, "Rent ($/sq ft)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "rent", value: rentIncreases[index].rent, onChange: (e)=>handleRentIncreaseChange(index, e), className: "mt-1 p-2 w-full border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: addRentIncreaseField, className: "mt-2 py-1 px-3 bg-gray-300 text-gray-700 rounded-md font-roboto", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "Add Rent Increase")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "freeRent", className: "block text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, "Free Rent (months)"), /*#__PURE__*/ React.createElement(RentInputField, { id: "freeRent", name: "freeRent", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "tenantImprovement", className: "block text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, "Tenant Improvement Allowance ($/sq ft)"), /*#__PURE__*/ React.createElement(RentInputField, { id: "tenantImprovement", name: "tenantImprovement", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "commission", className: "block text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, "Commission ($)"), /*#__PURE__*/ React.createElement(RentInputField, { id: "commission", name: "commission", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "discountRate", className: "block text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, "Discount Rate (%)"), /*#__PURE__*/ React.createElement(RentInputField, { id: "discountRate", name: "discountRate", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-blue-600 text-white font-bold rounded-md shadow-sm hover:bg-blue-700 font-roboto", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, "Calculate")), result !== null && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-lg font-roboto", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, "Net Effective Rent: $", result, " per sq ft/year")); }