function MainComponent() { const [receipts, setReceipts] = React.useState([]); const [file, setFile] = React.useState(null); const [totalExpenses, setTotalExpenses] = React.useState(0); const handleFileChange = (e)=>setFile(e.target.files[0]); const addReceipt = async ()=>{ if (!file) return; const formData = new FormData(); formData.append('receiptImage', file); const response = await fetch('/api/upload', { method: 'POST', body: formData }); const receipt = await response.json(); setReceipts([ ...receipts, receipt ]); setTotalExpenses((prev)=>prev + receipt.amount); }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[600px] mx-auto bg-white shadow-lg rounded-lg p-6", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "Receipt Tracker App"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", htmlFor: "receiptImage", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Upload Receipt Image"), /*#__PURE__*/ React.createElement("input", { className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", type: "file", name: "receiptImage", id: "receiptImage", onChange: handleFileChange, __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-500 text-white py-2 rounded-md font-semibold hover:bg-blue-600", type: "button", onClick: addReceipt, __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Add Receipt")), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "Budget Summary"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, receipts.map((receipt, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex justify-between p-2 bg-gray-100 rounded-md", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, receipt.category), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "¥", receipt.amount.toFixed(2))))), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mt-4", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "Total Expenses"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "¥", totalExpenses.toFixed(2)))); }