function MainComponent() { const [customers, setCustomers] = React.useState([]); const [searchTerm, setSearchTerm] = React.useState(""); const handleAddCustomer = (event)=>{ event.preventDefault(); const newCustomer = { name: event.target.name.value, email: event.target.email.value, zipCode: event.target.zipCode.value, playerCard: event.target.playerCard.value, referralBETMGM: event.target.referralBETMGM.value, referralFanduel: event.target.referralFanduel.value, statusBETMGM: event.target.statusBETMGM.value, statusFanduel: event.target.statusFanduel.value, statusDraftkings: event.target.statusDraftkings.value, statusGoldenNugget: event.target.statusGoldenNugget.value, withdrawals: [ { timeOfWithdrawal: event.target.timeOfWithdrawal.value, amountWithdrawn: parseFloat(event.target.amountWithdrawn.value), expectedTimeForWithdrawal: event.target.expectedTimeForWithdrawal.value } ] }; setCustomers([ ...customers, newCustomer ]); event.target.reset(); }; const handleSearch = (event)=>{ setSearchTerm(event.target.value); }; const filteredCustomers = customers.filter((customer)=>customer.name.includes(searchTerm) || customer.email.includes(searchTerm) || customer.playerCard.includes(searchTerm)); const handleDelete = (index)=>{ setCustomers(customers.filter((_, i)=>i !== index)); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, "Casino Withdrawal Tracker"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "Add New Customer"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleAddCustomer, __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-medium", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { name: "name", className: "w-full p-2 border rounded", type: "text", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-medium", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { name: "email", className: "w-full p-2 border rounded", type: "email", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-medium", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Zip Code"), /*#__PURE__*/ React.createElement("input", { name: "zipCode", className: "w-full p-2 border rounded", type: "text", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-medium", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Last 4 digits of the player number"), /*#__PURE__*/ React.createElement("input", { name: "playerCard", className: "w-full p-2 border rounded", type: "text", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-medium", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Referral To BETMGM"), /*#__PURE__*/ React.createElement("input", { name: "referralBETMGM", className: "w-full p-2 border rounded", type: "text", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-medium", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Referral To Fanduel"), /*#__PURE__*/ React.createElement("input", { name: "referralFanduel", className: "w-full p-2 border rounded", type: "text", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-medium", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Casino Signup Status: BETMGM"), /*#__PURE__*/ React.createElement("input", { name: "statusBETMGM", className: "w-full p-2 border rounded", type: "text", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-medium", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Casino Signup Status: Fanduel"), /*#__PURE__*/ React.createElement("input", { name: "statusFanduel", className: "w-full p-2 border rounded", type: "text", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-medium", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, "Casino Signup Status: Draftkings"), /*#__PURE__*/ React.createElement("input", { name: "statusDraftkings", className: "w-full p-2 border rounded", type: "text", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-medium", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "Casino Signup Status: Golden Nugget"), /*#__PURE__*/ React.createElement("input", { name: "statusGoldenNugget", className: "w-full p-2 border rounded", type: "text", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-medium", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "Time of Withdrawal"), /*#__PURE__*/ React.createElement("input", { name: "timeOfWithdrawal", className: "w-full p-2 border rounded", type: "datetime-local", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-medium", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, "Amount Withdrawn ($)"), /*#__PURE__*/ React.createElement("input", { name: "amountWithdrawn", className: "w-full p-2 border rounded", type: "number", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-medium", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, "Expected Time for Withdrawal"), /*#__PURE__*/ React.createElement("input", { name: "expectedTimeForWithdrawal", className: "w-full p-2 border rounded", type: "datetime-local", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-500 text-white p-2 rounded", type: "submit", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, "Add Customer"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 107, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, "Search Customer"), /*#__PURE__*/ React.createElement("input", { name: "searchCustomer", className: "w-full p-2 border rounded", type: "text", placeholder: "Enter customer name, email, or player card number", value: searchTerm, onChange: handleSearch, __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, "Customer List"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-white", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "py-2", __source: { fileName: "", lineNumber: 118, columnNumber: 17 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("th", { className: "py-2", __source: { fileName: "", lineNumber: 119, columnNumber: 17 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("th", { className: "py-2", __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this }, "Player Card"), /*#__PURE__*/ React.createElement("th", { className: "py-2", __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }, "Withdrawals"), /*#__PURE__*/ React.createElement("th", { className: "py-2", __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }, "Actions"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, filteredCustomers.map((customer, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 128, columnNumber: 19 }, __self: this }, customer.name), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 129, columnNumber: 19 }, __self: this }, customer.email), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 130, columnNumber: 19 }, __self: this }, customer.playerCard), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 131, columnNumber: 19 }, __self: this }, "$", customer.withdrawals.reduce((total, withdrawal)=>total + withdrawal.amountWithdrawn, 0)), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 132, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-300 text-white px-2 py-1 rounded mr-2", __source: { fileName: "", lineNumber: 133, columnNumber: 21 }, __self: this }, "Edit"), /*#__PURE__*/ React.createElement("button", { className: "bg-red-300 text-white px-2 py-1 rounded", onClick: ()=>handleDelete(index), __source: { fileName: "", lineNumber: 134, columnNumber: 21 }, __self: this }, "Delete"))))))))); }