function MainComponent() { const [transactions, setTransactions] = React.useState([]); const [editingIndex, setEditingIndex] = React.useState(null); const [formData, setFormData] = React.useState({ date: '', amount: '', type: 'Income', category: 'Groceries' }); const handleInputChange = (e)=>{ setFormData({ ...formData, [e.target.name]: e.target.value }); }; const handleSubmit = (e)=>{ e.preventDefault(); if (editingIndex != null) { updateTransaction(); } else { setTransactions([ ...transactions, formData ]); } resetForm(); }; const resetForm = ()=>{ setFormData({ date: '', amount: '', type: 'Income', category: 'Groceries' }); setEditingIndex(null); }; const handleEdit = (index)=>{ setEditingIndex(index); setFormData(transactions[index]); }; const updateTransaction = ()=>{ const updatedTransactions = transactions.map((transaction, index)=>index === editingIndex ? formData : transaction); setTransactions(updatedTransactions); }; const handleDelete = (index)=>{ const filteredTransactions = transactions.filter((_, i)=>i !== index); setTransactions(filteredTransactions); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-8 p-4", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "date", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Date"), /*#__PURE__*/ React.createElement("input", { value: formData.date, onChange: handleInputChange, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", type: "date", id: "date", name: "date", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "amount", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Amount"), /*#__PURE__*/ React.createElement("input", { value: formData.amount, onChange: handleInputChange, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline", id: "amount", type: "number", placeholder: "Amount", name: "amount", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "type", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Type"), /*#__PURE__*/ React.createElement("select", { value: formData.type, onChange: handleInputChange, className: "block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline", id: "type", name: "type", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Income"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Expense"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "category", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Category"), /*#__PURE__*/ React.createElement("select", { value: formData.category, onChange: handleInputChange, className: "block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline", id: "category", name: "category", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "Groceries"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "Bills"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "Salary"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, "Other"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, editingIndex != null ? 'Update Transaction' : 'Add Transaction'))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-start w-full", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-xl mb-4", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, "Transactions"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, transactions.map((transaction, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center w-full", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "block text-sm font-medium", __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }, `${transaction.date} - ${transaction.category} - ${transaction.type} - $${transaction.amount}`), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 100, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleEdit(index), className: "text-yellow-500", __source: { fileName: "", lineNumber: 101, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit", __source: { fileName: "", lineNumber: 101, columnNumber: 89 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDelete(index), className: "text-red-500", __source: { fileName: "", lineNumber: 102, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash-alt", __source: { fileName: "", lineNumber: 102, columnNumber: 88 }, __self: this }))))))))); }