function MainComponent() { const [borrowings, setBorrowings] = useState([]); const [incomeStreams, setIncomeStreams] = useState([]); const [investments, setInvestments] = useState([]); const [showProjections, setShowProjections] = useState(false); const [formType, setFormType] = useState(null); const addBorrowing = (e)=>{ e.preventDefault(); const form = e.target; setBorrowings([ ...borrowings, { name: form.loanName.value, amount: parseFloat(form.amount.value), interest: parseFloat(form.interest.value), tenure: parseInt(form.tenure.value), monthlyPayment: parseFloat(form.monthlyPayment.value) } ]); setFormType(null); }; const addIncome = (e)=>{ e.preventDefault(); const form = e.target; setIncomeStreams([ ...incomeStreams, { source: form.source.value, monthly: parseFloat(form.monthly.value), growth: parseFloat(form.growth.value) } ]); setFormType(null); }; const addInvestment = (e)=>{ e.preventDefault(); const form = e.target; setInvestments([ ...investments, { name: form.investmentName.value, amount: parseFloat(form.amount.value), returns: parseFloat(form.returns.value) } ]); setFormType(null); }; const calculateProjections = ()=>{ let projections = []; for(let year = 1; year <= 20; year++){ let yearlyIncome = incomeStreams.reduce((acc, stream)=>{ return acc + stream.monthly * 12 * Math.pow(1 + stream.growth / 100, year); }, 0); let yearlyDebt = borrowings.reduce((acc, loan)=>{ if (year <= loan.tenure) { return acc + loan.monthlyPayment * 12; } return acc; }, 0); let investmentValue = investments.reduce((acc, inv)=>{ return acc + inv.amount * Math.pow(1 + inv.returns / 100, year); }, 0); projections.push({ year, yearlyIncome, yearlyDebt, investmentValue }); } return projections; }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4 font-roboto", __source: { fileName: "", lineNumber: 79, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto space-y-6", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "Personal Finance Planner"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "Borrowings"), borrowings.map((loan, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "mb-2 p-2 bg-gray-50 rounded", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this }, loan.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }, "Amount: $", loan.amount), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }, "Monthly: $", loan.monthlyPayment))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setFormType("borrowing"), className: "mt-2 bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "Add Borrowing")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, "Income Streams"), incomeStreams.map((income, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "mb-2 p-2 bg-gray-50 rounded", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }, income.source), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this }, "Monthly: $", income.monthly), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 109, columnNumber: 17 }, __self: this }, "Growth: ", income.growth, "%"))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setFormType("income"), className: "mt-2 bg-green-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, "Add Income")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, "Investments"), investments.map((inv, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "mb-2 p-2 bg-gray-50 rounded", __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 124, columnNumber: 17 }, __self: this }, inv.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 125, columnNumber: 17 }, __self: this }, "Amount: $", inv.amount), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 126, columnNumber: 17 }, __self: this }, "Expected Returns: ", inv.returns, "%"))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setFormType("investment"), className: "mt-2 bg-purple-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, "Add Investment"))), formType === "borrowing" && /*#__PURE__*/ React.createElement("form", { onSubmit: addBorrowing, className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, "Add New Borrowing"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "loanName", placeholder: "Loan Name", className: "p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "amount", type: "number", placeholder: "Loan Amount", className: "p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 151, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "interest", type: "number", step: "0.1", placeholder: "Interest Rate %", className: "p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 158, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "tenure", type: "number", placeholder: "Tenure (years)", className: "p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "monthlyPayment", type: "number", placeholder: "Monthly Payment", className: "p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 173, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }, "Add")), formType === "income" && /*#__PURE__*/ React.createElement("form", { onSubmit: addIncome, className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 191, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 192, columnNumber: 13 }, __self: this }, "Add Income Stream"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 193, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "source", placeholder: "Income Source", className: "p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 194, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "monthly", type: "number", placeholder: "Monthly Amount", className: "p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "growth", type: "number", step: "0.1", placeholder: "Yearly Growth %", className: "p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 207, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/personal-finance-planner", target: "_blank", __source: { fileName: "", lineNumber: 216, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 bg-green-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 216, columnNumber: 65 }, __self: this }, "Add"))), formType === "investment" && /*#__PURE__*/ React.createElement("form", { onSubmit: addInvestment, className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 226, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 230, columnNumber: 13 }, __self: this }, "Add Investment"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 231, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "investmentName", placeholder: "Investment Name", className: "p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 232, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "amount", type: "number", placeholder: "Amount", className: "p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 238, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "returns", type: "number", step: "0.1", placeholder: "Expected Returns %", className: "p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 245, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 bg-purple-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 254, columnNumber: 13 }, __self: this }, "Add")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowProjections(!showProjections), className: "w-full bg-indigo-600 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 263, columnNumber: 9 }, __self: this }, showProjections ? "Hide" : "Show", " 20 Year Projection"), showProjections && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow overflow-x-auto", __source: { fileName: "", lineNumber: 271, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 272, columnNumber: 13 }, __self: this }, "20 Year Projection"), /*#__PURE__*/ React.createElement("table", { className: "min-w-full", __source: { fileName: "", lineNumber: 273, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 274, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 275, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 276, columnNumber: 19 }, __self: this }, "Year"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 277, columnNumber: 19 }, __self: this }, "Income"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 278, columnNumber: 19 }, __self: this }, "Debt Payments"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 279, columnNumber: 19 }, __self: this }, "Investment Value"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 280, columnNumber: 19 }, __self: this }, "Net Position"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 283, columnNumber: 15 }, __self: this }, calculateProjections().map((proj)=>/*#__PURE__*/ React.createElement("tr", { key: proj.year, className: "border-t", __source: { fileName: "", lineNumber: 285, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 286, columnNumber: 21 }, __self: this }, proj.year), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 287, columnNumber: 21 }, __self: this }, "$", proj.yearlyIncome.toFixed(2)), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 290, columnNumber: 21 }, __self: this }, "$", proj.yearlyDebt.toFixed(2)), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 291, columnNumber: 21 }, __self: this }, "$", proj.investmentValue.toFixed(2)), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 294, columnNumber: 21 }, __self: this }, "$", (proj.yearlyIncome - proj.yearlyDebt + proj.investmentValue).toFixed(2))))))))); }