function MainComponent() { const [expenses, setExpenses] = React.useState([]); const [expenseInput, setExpenseInput] = React.useState(''); const [cycleStartDate, setCycleStartDate] = React.useState(''); const cycleStartInputRef = React.useRef(); const [editCycleStart, setEditCycleStart] = React.useState(false); const categorizeExpense = (input)=>{ const description = input.replace(/[\d.,\s]+/g, '').trim(); const amount = input.match(/[\d.,]+/g)?.[0]?.replace(/[,]/g, '') || ''; let category; if (/^(salary|rental\s+income|freelancing|consulting)/i.test(description)) category = 'Income'; else if (/^(investment|irr|invest|shares|mutual\s+funds)/i.test(description)) category = 'Investment'; else if (/^(savings\s+account|fixed\s+deposit|ppf)/i.test(description)) category = 'Savings'; else if (/^(food|restaurant|groceries|breakfast|lunch|dinner|snacks)/i.test(description)) category = 'Food'; else if (/^(electricity|water|gas|utilities)/i.test(description)) category = 'Utilities'; else if (/^(bus|train|petrol|fare|transport)/i.test(description)) category = 'Transport'; else if (/^(movie|entertainment|games|netflix)/i.test(description)) category = 'Entertainment'; else if (/^(rent|lease)/i.test(description)) category = 'Rent'; else if (/^(health|fitness|doctor|hospital|medicine)/i.test(description)) category = 'Health & Fitness'; else if (/^(credit\s+card)/i.test(description)) category = 'Credit Card Bills'; else if (/^(expenditure|bills|groceries)/i.test(description)) category = 'Expenditure'; else category = 'Other'; return { description, amount, category }; }; const handleExpenseInputChange = (event)=>{ setExpenseInput(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); if (!cycleStartDate) { const cycleStartInput = cycleStartInputRef.current.value; setCycleStartDate(cycleStartInput); setEditCycleStart(false); } const { description, amount, category } = categorizeExpense(expenseInput); if (description && amount) { const newExpense = { serialNumber: expenses.length + 1, description, amount: parseFloat(amount).toFixed(2), category, addedDate: new Date().toLocaleDateString() }; setExpenses([ ...expenses, newExpense ]); setExpenseInput(''); } }; const handleEditCycleStart = ()=>{ setEditCycleStart(true); }; const downloadExcel = ()=>{}; let expenseTableContents = expenses.map((expense, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-3 border border-[#ddd] font-roboto text-[#333]", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, expense.serialNumber), /*#__PURE__*/ React.createElement("td", { className: "p-3 border border-[#ddd] font-roboto text-[#333]", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, expense.addedDate), /*#__PURE__*/ React.createElement("td", { className: "p-3 border border-[#ddd] font-roboto text-[#333]", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, expense.description), /*#__PURE__*/ React.createElement("td", { className: "p-3 border border-[#ddd] font-roboto text-[#333]", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, expense.category), /*#__PURE__*/ React.createElement("td", { className: "p-3 border border-[#ddd] font-roboto text-[#333]", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, `₹${expense.amount}`))); let cycleSettingElement = !cycleStartDate || editCycleStart ? /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "cycle-start-date", className: "block text-sm font-roboto text-[#333]", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, "Monthly Cycle Start Date"), /*#__PURE__*/ React.createElement("input", { name: "cycleStartDate", id: "cycle-start-date", type: "date", ref: cycleStartInputRef, className: "w-full p-2 border border-[#ddd] rounded mt-2", defaultValue: cycleStartDate || '', __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this })) : null; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-xl text-[#333] my-4", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, "Expense Tracker"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] bg-white shadow-md rounded-md p-4 mb-4", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, cycleSettingElement, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "expense-input", className: "block text-sm font-roboto text-[#333]", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "Record Transaction"), /*#__PURE__*/ React.createElement("input", { name: "expenseInput", id: "expense-input", type: "text", placeholder: "E.g., ₹450 Groceries or ₹38.50 Petrol", className: "w-full p-2 border border-[#ddd] rounded mt-2", value: expenseInput, onChange: handleExpenseInputChange, __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#28a745] hover:bg-[#218838] text-white font-roboto py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "Add Transaction"), !editCycleStart && cycleStartDate && /*#__PURE__*/ React.createElement("button", { type: "button", className: "w-full bg-[#ffc107] hover:bg-[#e0a800] text-white font-roboto py-2 px-4 rounded focus:outline-none focus:shadow-outline mt-3", onClick: handleEditCycleStart, __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "Change Cycle"))), cycleStartDate && /*#__PURE__*/ React.createElement("button", { className: "w-full max-w-[200px] bg-[#007bff] hover:bg-[#0069d9] text-white font-roboto py-2 px-4 rounded focus:outline-none focus:shadow-outline mb-8", onClick: downloadExcel, __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, "Download Excel"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px]", __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-md p-4", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg text-[#333] mb-4", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, "Transactions"), expenses.length > 0 ? /*#__PURE__*/ React.createElement("table", { className: "w-full table-auto", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 119, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-3 border border-[#ddd] font-roboto text-[#333]", __source: { fileName: "", lineNumber: 120, columnNumber: 19 }, __self: this }, "S.No"), /*#__PURE__*/ React.createElement("th", { className: "p-3 border border-[#ddd] font-roboto text-[#333]", __source: { fileName: "", lineNumber: 121, columnNumber: 19 }, __self: this }, "Date"), /*#__PURE__*/ React.createElement("th", { className: "p-3 border border-[#ddd] font-roboto text-[#333]", __source: { fileName: "", lineNumber: 122, columnNumber: 19 }, __self: this }, "Expense Name"), /*#__PURE__*/ React.createElement("th", { className: "p-3 border border-[#ddd] font-roboto text-[#333]", __source: { fileName: "", lineNumber: 123, columnNumber: 19 }, __self: this }, "Category"), /*#__PURE__*/ React.createElement("th", { className: "p-3 border border-[#ddd] font-roboto text-[#333]", __source: { fileName: "", lineNumber: 124, columnNumber: 19 }, __self: this }, "Amount (₹)"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, expenseTableContents)) : /*#__PURE__*/ React.createElement("div", { className: "text-center text-sm font-roboto text-[#333] p-3", __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }, "No transactions recorded")))); }