function MainComponent() { const [customers, setCustomers] = React.useState([]); const [customerName, setCustomerName] = React.useState(''); const [searchTerm, setSearchTerm] = React.useState(''); const [bulkPrice, setBulkPrice] = React.useState(''); const [editingDrink, setEditingDrink] = React.useState(null); const addCustomer = ()=>{ const newCustomer = { name: customerName, drinks: [], total: 0, paid: false }; setCustomers([ ...customers, newCustomer ]); setCustomerName(''); }; const addDrinkToCustomer = (index, price)=>{ const updatedCustomers = [ ...customers ]; updatedCustomers[index].drinks.push(price); updatedCustomers[index].total += price; setCustomers(updatedCustomers); }; const toggleDetails = (index)=>{ const updatedCustomers = [ ...customers ]; updatedCustomers[index].showDetails = !updatedCustomers[index].showDetails; setCustomers(updatedCustomers); }; const editDrink = (customerIndex, drinkIndex)=>{ const drinkPrice = customers[customerIndex].drinks[drinkIndex]; setEditingDrink({ customerIndex, drinkIndex, price: drinkPrice }); }; const deleteDrink = (customerIndex, drinkIndex)=>{ const updatedCustomers = [ ...customers ]; updatedCustomers[customerIndex].total -= updatedCustomers[customerIndex].drinks[drinkIndex]; updatedCustomers[customerIndex].drinks.splice(drinkIndex, 1); setCustomers(updatedCustomers); }; const updateDrink = (customerIndex, drinkIndex, price)=>{ const updatedCustomers = [ ...customers ]; updatedCustomers[customerIndex].total -= updatedCustomers[customerIndex].drinks[drinkIndex]; updatedCustomers[customerIndex].drinks[drinkIndex] = price; updatedCustomers[customerIndex].total += price; setCustomers(updatedCustomers); setEditingDrink(null); }; const bulkAddDrink = ()=>{ if (bulkPrice) { const updatedCustomers = customers.map((customer)=>{ if (customer.checked) { const total = customer.total + Number(bulkPrice); return { ...customer, drinks: [ ...customer.drinks, Number(bulkPrice) ], total, checked: false }; } return customer; }); setCustomers(updatedCustomers); setBulkPrice(''); } }; const togglePaymentStatus = (index)=>{ const updatedCustomers = [ ...customers ]; updatedCustomers[index].paid = !updatedCustomers[index].paid; setCustomers(updatedCustomers); }; const toggleCheckbox = (index)=>{ const updatedCustomers = [ ...customers ]; updatedCustomers[index].checked = !updatedCustomers[index].checked; setCustomers(updatedCustomers); }; const handleSearch = (event)=>{ setSearchTerm(event.target.value); }; const filteredCustomers = customers.filter((customer)=>customer.name.includes(searchTerm) || customer.paid && searchTerm === '会計済み' || !customer.paid && searchTerm === '未会計'); return /*#__PURE__*/ React.createElement("div", { className: "max-w-[800px] mx-auto p-4", __source: { fileName: "", lineNumber: 85, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "mb-4 p-4 border border-gray-200 rounded", onSubmit: (e)=>e.preventDefault(), __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-1", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "名前:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "customerName", className: "w-full p-2 border border-gray-300 rounded", value: customerName, onChange: (e)=>setCustomerName(e.target.value), __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-blue-500 text-white p-2 rounded", onClick: addCustomer, __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, "追加")), /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-4 border border-gray-200 rounded", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "検索...", className: "w-full p-2 mb-2 border border-gray-300 rounded", value: searchTerm, onChange: handleSearch, __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "customer-list", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, filteredCustomers.map((customer, cIndex)=>/*#__PURE__*/ React.createElement("div", { key: cIndex, className: `customer mb-2 p-4 border border-gray-200 rounded ${customer.paid ? 'bg-green-100' : ''}`, __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, bulkPrice && /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: `check-${cIndex}`, checked: customer.checked || false, onChange: ()=>toggleCheckbox(cIndex), className: "mr-2", __source: { fileName: "", lineNumber: 101, columnNumber: 31 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium cursor-pointer", onClick: ()=>toggleDetails(cIndex), __source: { fileName: "", lineNumber: 102, columnNumber: 17 }, __self: this }, customer.name)), /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-green-500 text-white px-2 py-1 rounded", onClick: ()=>togglePaymentStatus(cIndex), __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, customer.paid ? '未会計に戻す' : '会計済み')), customer.showDetails && /*#__PURE__*/ React.createElement("div", { className: "details mt-2 px-4 py-2 border border-gray-100 rounded", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "mb-2", onSubmit: (e)=>{ e.preventDefault(); addDrinkToCustomer(cIndex, Number(editingDrink ? editingDrink.price : e.target.drinkPrice.value)); editingDrink ? updateDrink(editingDrink.customerIndex, editingDrink.drinkIndex, Number(editingDrink.price)) : setEditingDrink(null); }, __source: { fileName: "", lineNumber: 110, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 111, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-1", __source: { fileName: "", lineNumber: 112, columnNumber: 21 }, __self: this }, "ドリンクの値段:"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "drinkPrice", className: "w-full p-2 border border-gray-300 rounded", value: editingDrink ? editingDrink.price : '', onChange: editingDrink ? (e)=>setEditingDrink({ ...editingDrink, price: e.target.value }) : null, __source: { fileName: "", lineNumber: 113, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white p-2 rounded mt-2", __source: { fileName: "", lineNumber: 115, columnNumber: 19 }, __self: this }, editingDrink ? '保存' : '追加')), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 117, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-bold", __source: { fileName: "", lineNumber: 118, columnNumber: 19 }, __self: this }, "ドリンク一覧:"), /*#__PURE__*/ React.createElement("ul", { className: "mb-2", __source: { fileName: "", lineNumber: 119, columnNumber: 19 }, __self: this }, customer.drinks.map((drink, dIndex)=>/*#__PURE__*/ React.createElement("li", { key: dIndex, className: "flex justify-between items-center mb-1", __source: { fileName: "", lineNumber: 121, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 122, columnNumber: 25 }, __self: this }, drink, "円"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 123, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-yellow-400 text-white px-2 py-1 rounded mr-1", onClick: ()=>editDrink(cIndex, dIndex), __source: { fileName: "", lineNumber: 124, columnNumber: 27 }, __self: this }, "編集"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-red-500 text-white px-2 py-1 rounded", onClick: ()=>deleteDrink(cIndex, dIndex), __source: { fileName: "", lineNumber: 125, columnNumber: 27 }, __self: this }, "削除"))))), /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 130, columnNumber: 19 }, __self: this }, "合計金額: ", customer.total, "円")), /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 132, columnNumber: 17 }, __self: this }, "会計ステータス: ", customer.paid ? '会計済み' : '未会計'))))), /*#__PURE__*/ React.createElement("form", { className: "p-4 border border-gray-200 rounded", onSubmit: (e)=>e.preventDefault(), __source: { fileName: "", lineNumber: 138, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-1", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, "ドリンクの値段:"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "bulkDrinkPrice", className: "w-full p-2 border border-gray-300 rounded", value: bulkPrice, onChange: (e)=>setBulkPrice(e.target.value), __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-blue-500 text-white p-2 rounded", onClick: bulkAddDrink, __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, "一括追加"))); }