function MainComponent({ items, addItem, removeItem, updateItem }) { const handleChange = (index, field, value)=>{ const updatedItem = { ...items[index], [field]: value }; if (field === 'quantity' || field === 'unitCost') { updatedItem.totalCost = updatedItem.quantity * updatedItem.unitCost; } updateItem(index, updatedItem); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto max-w-screen-xl mx-auto p-4", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full text-left border-collapse", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, "Item/Service"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "Quantity"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, "Unit Cost"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, "Total Cost"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, "Vendor"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, "Contact Information"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "Payment Terms"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, "Currency"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "Discount"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "Tax (%)"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, "Shipping Cost"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "Deposit"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Payment Schedule"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Cancellation Policy"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "Approval"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Notes"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "Actions"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "border-b", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { value: item.name, onChange: (e)=>handleChange(index, 'name', e.target.value), name: "name", type: "text", __source: { fileName: "", lineNumber: 38, columnNumber: 35 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { value: item.quantity, onChange: (e)=>handleChange(index, 'quantity', parseFloat(e.target.value)), name: "quantity", type: "number", __source: { fileName: "", lineNumber: 39, columnNumber: 35 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { value: item.unitCost, onChange: (e)=>handleChange(index, 'unitCost', parseFloat(e.target.value)), name: "unitCost", type: "number", __source: { fileName: "", lineNumber: 40, columnNumber: 35 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, item.totalCost.toFixed(2)), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { value: item.vendor, onChange: (e)=>handleChange(index, 'vendor', e.target.value), name: "vendor", type: "text", __source: { fileName: "", lineNumber: 42, columnNumber: 35 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { value: item.contact, onChange: (e)=>handleChange(index, 'contact', e.target.value), name: "contact", type: "text", __source: { fileName: "", lineNumber: 43, columnNumber: 35 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { value: item.paymentTerms, onChange: (e)=>handleChange(index, 'paymentTerms', e.target.value), name: "paymentTerms", type: "text", __source: { fileName: "", lineNumber: 44, columnNumber: 35 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { value: item.currency, onChange: (e)=>handleChange(index, 'currency', e.target.value), name: "currency", type: "text", __source: { fileName: "", lineNumber: 45, columnNumber: 35 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { value: item.description, onChange: (e)=>handleChange(index, 'description', e.target.value), name: "description", type: "text", __source: { fileName: "", lineNumber: 46, columnNumber: 35 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { value: item.discount, onChange: (e)=>handleChange(index, 'discount', parseFloat(e.target.value)), name: "discount", type: "number", __source: { fileName: "", lineNumber: 47, columnNumber: 35 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { value: item.tax, onChange: (e)=>handleChange(index, 'tax', e.target.value), name: "tax", type: "text", __source: { fileName: "", lineNumber: 48, columnNumber: 35 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { value: item.shippingCost, onChange: (e)=>handleChange(index, 'shippingCost', parseFloat(e.target.value)), name: "shippingCost", type: "number", __source: { fileName: "", lineNumber: 49, columnNumber: 35 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { value: item.deposit, onChange: (e)=>handleChange(index, 'deposit', parseFloat(e.target.value)), name: "deposit", type: "number", __source: { fileName: "", lineNumber: 50, columnNumber: 35 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { value: item.paymentSchedule, onChange: (e)=>handleChange(index, 'paymentSchedule', e.target.value), name: "paymentSchedule", type: "text", __source: { fileName: "", lineNumber: 51, columnNumber: 35 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { value: item.cancellationPolicy, onChange: (e)=>handleChange(index, 'cancellationPolicy', e.target.value), name: "cancellationPolicy", type: "text", __source: { fileName: "", lineNumber: 52, columnNumber: 35 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2 text-center", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: item.approval, onChange: (e)=>handleChange(index, 'approval', e.target.checked), name: "approval", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { value: item.notes, onChange: (e)=>handleChange(index, 'notes', e.target.value), name: "notes", type: "text", __source: { fileName: "", lineNumber: 56, columnNumber: 35 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2 flex space-x-2", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>addItem(), className: "bg-green-500 text-white px-3 py-1 rounded shadow", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-plus", __source: { fileName: "", lineNumber: 59, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeItem(index), className: "bg-red-500 text-white px-3 py-1 rounded shadow", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-minus", __source: { fileName: "", lineNumber: 62, columnNumber: 19 }, __self: this })))))))); } function StoryComponent() { const [items, setItems] = React.useState([ { name: "Sound System", quantity: 2, unitCost: 500, totalCost: 1000, vendor: "DJ Gear Ltd.", contact: "djgear@example.com", paymentTerms: "50% upfront", currency: "USD", description: "Professional sound system for large events", discount: 0, tax: "10%", shippingCost: 100, deposit: 500, paymentSchedule: "50% now, 50% on delivery", cancellationPolicy: "Full refund 7 days prior", approval: false, notes: "Confirm setup time" } ]); const addItem = ()=>{ setItems([ ...items, { name: "", quantity: 0, unitCost: 0, totalCost: 0, vendor: "", contact: "", paymentTerms: "", currency: "", description: "", discount: 0, tax: "", shippingCost: 0, deposit: 0, paymentSchedule: "", cancellationPolicy: "", approval: false, notes: "" } ]); }; const removeItem = (index)=>{ setItems(items.filter((_, i)=>i !== index)); }; const updateItem = (index, updatedItem)=>{ const updatedItems = items.map((item, i)=>i === index ? updatedItem : item); setItems(updatedItems); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 131, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { items: items, addItem: addItem, removeItem: removeItem, updateItem: updateItem, __source: { fileName: "", lineNumber: 132, columnNumber: 7 }, __self: this })); }