function MainComponent() { const [customerName, setCustomerName] = React.useState(''); const [customers, setCustomers] = React.useState([]); const [bulkDrinkPrice, setBulkDrinkPrice] = React.useState(''); const [editDrinkPrice, setEditDrinkPrice] = React.useState({ customerIndex: null, drinkIndex: null, price: '' }); const [filterName, setFilterName] = React.useState(''); const [filterAmount, setFilterAmount] = React.useState(''); const [filterStatus, setFilterStatus] = React.useState(''); const handleAddCustomer = ()=>{ const newCustomer = { name: customerName, drinks: [], total: 0, paid: false, detailsVisible: false, checked: false }; setCustomers([ ...customers, newCustomer ]); setCustomerName(''); }; const handleToggleDetails = (index)=>{ setCustomers(customers.map((customer, i)=>i === index ? { ...customer, detailsVisible: !customer.detailsVisible } : customer)); }; const handleAddDrink = (price, customerIndex)=>{ const drinkPrice = parseFloat(price); if (isNaN(drinkPrice)) return; const updatedCustomers = customers.map((customer, i)=>{ if (i === customerIndex) { const newDrinks = [ ...customer.drinks, drinkPrice ]; const newTotal = newDrinks.reduce((sum, price)=>sum + price, 0); return { ...customer, drinks: newDrinks, total: newTotal }; } return customer; }); setCustomers(updatedCustomers); }; const handleRemoveDrink = (customerIndex, drinkIndex)=>{ const updatedCustomers = customers.map((customer, i)=>{ if (i === customerIndex) { const newDrinks = customer.drinks.filter((_, idx)=>idx !== drinkIndex); const newTotal = newDrinks.reduce((sum, price)=>sum + price, 0); return { ...customer, drinks: newDrinks, total: newTotal }; } return customer; }); setCustomers(updatedCustomers); }; const handleEditDrink = (customerIndex, drinkIndex, price)=>{ const drinkPrice = parseFloat(price); if (isNaN(drinkPrice)) return; const updatedCustomers = customers.map((customer, i)=>{ if (i === customerIndex) { const newDrinks = customer.drinks.map((p, j)=>j === drinkIndex ? drinkPrice : p); const newTotal = newDrinks.reduce((sum, price)=>sum + price, 0); return { ...customer, drinks: newDrinks, total: newTotal }; } return customer; }); setCustomers(updatedCustomers); setEditDrinkPrice({ customerIndex: null, drinkIndex: null, price: '' }); }; const handleStatusChange = (index)=>{ setCustomers(customers.map((customer, i)=>i === index ? { ...customer, paid: !customer.paid } : customer)); }; const handleBulkAdd = ()=>{ const drinkPrice = parseFloat(bulkDrinkPrice); if (isNaN(drinkPrice)) return; const updatedCustomers = customers.map((customer)=>{ if (customer.checked) { const newDrinks = [ ...customer.drinks, drinkPrice ]; const newTotal = newDrinks.reduce((sum, price)=>sum + price, 0); return { ...customer, drinks: newDrinks, total: newTotal, checked: false }; } return customer; }); setCustomers(updatedCustomers); setBulkDrinkPrice(''); }; const handleCustomerCheck = (index)=>{ setCustomers(customers.map((customer, i)=>i === index ? { ...customer, checked: !customer.checked } : customer)); }; const filteredCustomers = customers.filter((customer)=>{ const nameMatch = customer.name.includes(filterName); const amountMatch = filterAmount ? customer.total === parseFloat(filterAmount) : true; const statusMatch = filterStatus === '' || filterStatus === 'paid' && customer.paid || filterStatus === 'unpaid' && !customer.paid; return nameMatch && amountMatch && statusMatch; }); return /*#__PURE__*/ React.createElement("div", { className: "p-8 font-roboto", __source: { fileName: "", lineNumber: 92, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, "顧客追加"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "border p-2 mb-2 w-full", type: "text", placeholder: "顧客名", name: "customerName", value: customerName, onChange: (e)=>setCustomerName(e.target.value), __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 px-4 rounded", type: "button", onClick: handleAddCustomer, __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, "追加"))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 114, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, "顧客一覧"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, filteredCustomers.map((customer, i)=>/*#__PURE__*/ React.createElement("li", { key: i, className: "mb-2", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `flex justify-between items-center border-b pb-2 ${customer.paid ? 'bg-green-200' : ''}`, __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", className: "mr-2", checked: !!customer.checked, onChange: ()=>handleCustomerCheck(i), __source: { fileName: "", lineNumber: 121, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { onClick: ()=>handleToggleDetails(i), className: "cursor-pointer", __source: { fileName: "", lineNumber: 127, columnNumber: 19 }, __self: this }, customer.name)), /*#__PURE__*/ React.createElement("button", { className: "text-blue-500", onClick: ()=>handleToggleDetails(i), __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this }, "詳細")), customer.detailsVisible && /*#__PURE__*/ React.createElement("div", { className: "ml-4 bg-gray-100 p-2", __source: { fileName: "", lineNumber: 132, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "mb-4", __source: { fileName: "", lineNumber: 133, columnNumber: 19 }, __self: this }, editDrinkPrice.customerIndex === i ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("input", { className: "border p-2 mb-2 w-full", type: "text", placeholder: "ドリンク値段", name: "editDrinkPrice", value: editDrinkPrice.price, onChange: (e)=>setEditDrinkPrice({ ...editDrinkPrice, price: e.target.value }), __source: { fileName: "", lineNumber: 136, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 px-4 rounded", type: "button", onClick: ()=>handleEditDrink(i, editDrinkPrice.drinkIndex, editDrinkPrice.price), __source: { fileName: "", lineNumber: 144, columnNumber: 25 }, __self: this }, "追加")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("input", { className: "border p-2 mb-2 w-full", type: "text", placeholder: "ドリンク値段", name: "drinkPrice", onChange: (e)=>setEditDrinkPrice({ customerIndex: i, drinkIndex: null, price: e.target.value }), __source: { fileName: "", lineNumber: 154, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 px-4 rounded", type: "button", onClick: ()=>handleAddDrink(editDrinkPrice.price, i), __source: { fileName: "", lineNumber: 161, columnNumber: 25 }, __self: this }, "追加"))), /*#__PURE__*/ React.createElement("ul", { className: "mb-4", __source: { fileName: "", lineNumber: 171, columnNumber: 19 }, __self: this }, customer.drinks.map((drink, j)=>/*#__PURE__*/ React.createElement("li", { key: j, className: "flex justify-between items-center border-b pb-2", __source: { fileName: "", lineNumber: 173, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 174, columnNumber: 25 }, __self: this }, drink, "円"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 175, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-yellow-400 text-white py-1 px-2 mr-2 rounded", onClick: ()=>setEditDrinkPrice({ customerIndex: i, drinkIndex: j, price: drink }), __source: { fileName: "", lineNumber: 176, columnNumber: 27 }, __self: this }, "編集"), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 text-white py-1 px-2 rounded", onClick: ()=>handleRemoveDrink(i, j), __source: { fileName: "", lineNumber: 182, columnNumber: 27 }, __self: this }, "削除"))))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 192, columnNumber: 19 }, __self: this }, "合計金額: ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 192, columnNumber: 47 }, __self: this }, customer.total), "円"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 193, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 194, columnNumber: 21 }, __self: this }, "会計ステータス: ", customer.paid ? '会計済み' : '未会計'), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white py-1 px-2 rounded", onClick: ()=>handleStatusChange(i), __source: { fileName: "", lineNumber: 195, columnNumber: 21 }, __self: this }, "会計済み"))))))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 209, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 210, columnNumber: 9 }, __self: this }, "一括追加"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 211, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "border p-2 mb-2 w-full", type: "text", placeholder: "全体ドリンク値段", name: "bulkDrinkPrice", value: bulkDrinkPrice, onChange: (e)=>setBulkDrinkPrice(e.target.value), __source: { fileName: "", lineNumber: 212, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 px-4 rounded", type: "button", onClick: handleBulkAdd, __source: { fileName: "", lineNumber: 220, columnNumber: 11 }, __self: this }, "一括追加"))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 230, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 231, columnNumber: 9 }, __self: this }, "フィルター"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 232, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "border p-2 mb-2 w-full", type: "text", placeholder: "顧客名でフィルター", name: "filterName", value: filterName, onChange: (e)=>setFilterName(e.target.value), __source: { fileName: "", lineNumber: 233, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "border p-2 mb-2 w-full", type: "text", placeholder: "合計金額でフィルター", name: "filterAmount", value: filterAmount, onChange: (e)=>setFilterAmount(e.target.value), __source: { fileName: "", lineNumber: 241, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("select", { className: "border p-2 mb-2 w-full", name: "filterStatus", value: filterStatus, onChange: (e)=>setFilterStatus(e.target.value), __source: { fileName: "", lineNumber: 249, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 255, columnNumber: 13 }, __self: this }, "会計ステータスでフィルター"), /*#__PURE__*/ React.createElement("option", { value: "paid", __source: { fileName: "", lineNumber: 256, columnNumber: 13 }, __self: this }, "会計済み"), /*#__PURE__*/ React.createElement("option", { value: "unpaid", __source: { fileName: "", lineNumber: 257, columnNumber: 13 }, __self: this }, "未会計"))))); }