function MainComponent({ customers, addCustomer, recordSale, settleAmount, issueInvoice, sendReminder, inventoryItems, addInventoryItem, generateReport }) { return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-gray-100 min-h-screen p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-blue-600 text-white p-4 rounded-lg shadow-md mb-6", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "MyAccounting")), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "bg-white p-4 rounded-lg shadow-md mb-6", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, "Add Customer"), /*#__PURE__*/ React.createElement("form", { onSubmit: addCustomer, className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "customerName", placeholder: "Customer Name", className: "border p-2 rounded", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-green-500 text-white p-2 rounded hover:bg-green-600", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, "Add Customer"))), /*#__PURE__*/ React.createElement("section", { className: "bg-white p-4 rounded-lg shadow-md mb-6", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "Record Sale"), /*#__PURE__*/ React.createElement("form", { onSubmit: recordSale, className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "customerId", className: "border p-2 rounded", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }, "Select Customer"), customers.map((customer)=>/*#__PURE__*/ React.createElement("option", { key: customer.id, value: customer.id, __source: { fileName: "", lineNumber: 23, columnNumber: 17 }, __self: this }, customer.name))), /*#__PURE__*/ React.createElement("input", { type: "number", name: "amount", placeholder: "Amount", className: "border p-2 rounded", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white p-2 rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "Record Sale"))), /*#__PURE__*/ React.createElement("section", { className: "bg-white p-4 rounded-lg shadow-md mb-6", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Customer Balances"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, customers.map((customer)=>/*#__PURE__*/ React.createElement("li", { key: customer.id, className: "flex flex-col md:flex-row md:justify-between md:items-center border-b pb-2", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, customer.name), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row md:items-center mt-2 md:mt-0", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-4", __source: { fileName: "", lineNumber: 38, columnNumber: 19 }, __self: this }, "Balance: $", customer.balance), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 mt-2 md:mt-0", __source: { fileName: "", lineNumber: 39, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>settleAmount(customer.id), className: "bg-yellow-500 text-white p-2 rounded hover:bg-yellow-600", __source: { fileName: "", lineNumber: 40, columnNumber: 21 }, __self: this }, "Settle"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>issueInvoice(customer.id), className: "bg-purple-500 text-white p-2 rounded hover:bg-purple-600", __source: { fileName: "", lineNumber: 41, columnNumber: 21 }, __self: this }, "Issue Invoice"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>sendReminder(customer.id), className: "bg-red-500 text-white p-2 rounded hover:bg-red-600", __source: { fileName: "", lineNumber: 42, columnNumber: 21 }, __self: this }, "Send Reminder"))))))), /*#__PURE__*/ React.createElement("section", { className: "bg-white p-4 rounded-lg shadow-md mb-6", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Inventory"), /*#__PURE__*/ React.createElement("form", { onSubmit: addInventoryItem, className: "flex flex-col space-y-4 mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "itemName", placeholder: "Item Name", className: "border p-2 rounded", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "quantity", placeholder: "Quantity", className: "border p-2 rounded", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-green-500 text-white p-2 rounded hover:bg-green-600", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Add Item")), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, inventoryItems.map((item)=>/*#__PURE__*/ React.createElement("li", { key: item.id, className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, "Quantity: ", item.quantity))))), /*#__PURE__*/ React.createElement("section", { className: "bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Reports"), /*#__PURE__*/ React.createElement("button", { onClick: generateReport, className: "bg-indigo-500 text-white p-2 rounded hover:bg-indigo-600", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "Generate Report")))); } function StoryComponent() { const mockCustomers = [ { id: 1, name: 'John Doe', balance: 500 }, { id: 2, name: 'Jane Smith', balance: 750 }, { id: 3, name: 'Bob Johnson', balance: 1000 } ]; const mockInventoryItems = [ { id: 1, name: 'Item A', quantity: 10 }, { id: 2, name: 'Item B', quantity: 15 }, { id: 3, name: 'Item C', quantity: 20 } ]; const mockAddCustomer = (e)=>{ e.preventDefault(); console.log('Add customer'); }; const mockRecordSale = (e)=>{ e.preventDefault(); console.log('Record sale'); }; const mockSettleAmount = (id)=>{ console.log('Settle amount for customer', id); }; const mockIssueInvoice = (id)=>{ console.log('Issue invoice for customer', id); }; const mockSendReminder = (id)=>{ console.log('Send reminder to customer', id); }; const mockAddInventoryItem = (e)=>{ e.preventDefault(); console.log('Add inventory item'); }; const mockGenerateReport = ()=>{ console.log('Generate report'); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 121, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { customers: mockCustomers, addCustomer: mockAddCustomer, recordSale: mockRecordSale, settleAmount: mockSettleAmount, issueInvoice: mockIssueInvoice, sendReminder: mockSendReminder, inventoryItems: mockInventoryItems, addInventoryItem: mockAddInventoryItem, generateReport: mockGenerateReport, __source: { fileName: "", lineNumber: 122, columnNumber: 7 }, __self: this })); }