function MainComponent() { const [invoiceNumber, setInvoiceNumber] = useState("INV-001"); const [items, setItems] = useState([ { description: "", quantity: 1, price: 0 } ]); const [clientName, setClientName] = useState(""); const [clientEmail, setClientEmail] = useState(""); const [dueDate, setDueDate] = useState(""); const [companyName, setCompanyName] = useState(""); const addItem = ()=>{ setItems([ ...items, { description: "", quantity: 1, price: 0 } ]); }; const updateItem = (index, field, value)=>{ const newItems = [ ...items ]; newItems[index][field] = value; setItems(newItems); }; const removeItem = (index)=>{ setItems(items.filter((_, i)=>i !== index)); }; const calculateTotal = ()=>{ return items.reduce((sum, item)=>sum + item.quantity * item.price, 0); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-8", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-white rounded-lg shadow p-8", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-8", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "companyName", placeholder: "Your Company Name", className: "text-2xl font-bold mb-2 p-2 border rounded", value: companyName, onChange: (e)=>setCompanyName(e.target.value), __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "invoiceNumber", className: "p-2 border rounded", value: invoiceNumber, onChange: (e)=>setInvoiceNumber(e.target.value), __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", name: "dueDate", className: "p-2 border rounded", value: dueDate, onChange: (e)=>setDueDate(e.target.value), __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-gray-600 mb-2", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Bill To:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "clientName", placeholder: "Client Name", className: "w-full p-2 border rounded mb-2", value: clientName, onChange: (e)=>setClientName(e.target.value), __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "email", name: "clientEmail", placeholder: "Client Email", className: "w-full p-2 border rounded", value: clientEmail, onChange: (e)=>setClientEmail(e.target.value), __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "border-b", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "text-left p-2", __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("th", { className: "text-right p-2", __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }, "Quantity"), /*#__PURE__*/ React.createElement("th", { className: "text-right p-2", __source: { fileName: "", lineNumber: 89, columnNumber: 17 }, __self: this }, "Price"), /*#__PURE__*/ React.createElement("th", { className: "text-right p-2", __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this }, "Total"), /*#__PURE__*/ React.createElement("th", { className: "w-10", __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "border-b", __source: { fileName: "", lineNumber: 96, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 97, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: `item-description-${index}`, className: "w-full p-1 border rounded", value: item.description, onChange: (e)=>updateItem(index, "description", e.target.value), __source: { fileName: "", lineNumber: 98, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 108, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: `item-quantity-${index}`, className: "w-20 p-1 border rounded text-right", value: item.quantity, onChange: (e)=>updateItem(index, "quantity", parseInt(e.target.value)), __source: { fileName: "", lineNumber: 109, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 119, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: `item-price-${index}`, className: "w-24 p-1 border rounded text-right", value: item.price, onChange: (e)=>updateItem(index, "price", parseFloat(e.target.value)), __source: { fileName: "", lineNumber: 120, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2 text-right", __source: { fileName: "", lineNumber: 130, columnNumber: 19 }, __self: this }, "$", (item.quantity * item.price).toFixed(2)), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 133, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeItem(index), className: "text-red-500 hover:text-red-700", __source: { fileName: "", lineNumber: 134, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 138, columnNumber: 23 }, __self: this }))))))), /*#__PURE__*/ React.createElement("button", { onClick: addItem, className: "mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 145, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }), "Add Item")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 153, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-64", __source: { fileName: "", lineNumber: 154, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between p-2 border-t", __source: { fileName: "", lineNumber: 155, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 156, columnNumber: 15 }, __self: this }, "Total:"), /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 157, columnNumber: 15 }, __self: this }, "$", calculateTotal().toFixed(2))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 flex justify-end", __source: { fileName: "", lineNumber: 162, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white px-6 py-2 rounded hover:bg-green-600", __source: { fileName: "", lineNumber: 163, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 164, columnNumber: 13 }, __self: this }), "Download Invoice")))); }