function MainComponent() { const [entries, setEntries] = React.useState({ savings: 0, expenses: 0 }); const [inputValues, setInputValues] = React.useState({ savings: '', expenses: '' }); const handleInputChange = (e)=>{ setInputValues({ ...inputValues, [e.target.name]: e.target.value }); }; const handleSavingsSubmit = (e)=>{ e.preventDefault(); const amount = parseFloat(inputValues.savings); if (!isNaN(amount) && amount > 0) { setEntries({ ...entries, savings: entries.savings + amount }); setInputValues({ ...inputValues, savings: '' }); } }; const handleExpensesSubmit = (e)=>{ e.preventDefault(); const amount = parseFloat(inputValues.expenses); if (!isNaN(amount) && amount > 0) { setEntries({ ...entries, expenses: entries.expenses + amount }); setInputValues({ ...inputValues, expenses: '' }); } }; const currencyFormatter = new Intl.NumberFormat('en-PH', { style: 'currency', currency: 'PHP' }); const formattedSavings = currencyFormatter.format(entries.savings); const formattedExpenses = currencyFormatter.format(entries.expenses); const formattedTotal = currencyFormatter.format(entries.savings - entries.expenses); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl p-6 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-6 text-center text-[#333] font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "Personal Savings & Expense Tracker"), /*#__PURE__*/ React.createElement("div", { className: "flex mb-8", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSavingsSubmit, className: "w-1/2 pr-2", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", htmlFor: "savings", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "Savings (₱)"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white", id: "savings", type: "number", placeholder: "Enter savings", name: "savings", value: inputValues.savings, onChange: handleInputChange, __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "Add Savings"))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleExpensesSubmit, className: "w-1/2 pl-2", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", htmlFor: "expenses", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "Expenses (₱)"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white", id: "expenses", type: "number", placeholder: "Enter expenses", name: "expenses", value: inputValues.expenses, onChange: handleInputChange, __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "Add Expenses")))), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-3xl text-[#27ae60] font-semibold font-roboto", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, formattedSavings), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, "Total Savings")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-3xl text-[#c0392b] font-semibold font-roboto", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, formattedExpenses), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, "Total Expenses")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-3xl text-[#2980b9] font-semibold font-roboto", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, formattedTotal), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, "Balance"))))); }