function MainComponent() { const [showList, setShowList] = React.useState(false); const [data, setData] = React.useState([]); const handleToggleList = ()=>{ setShowList(!showList); }; const handleSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const newData = Object.fromEntries(formData.entries()); newData.amount = parseFloat(newData.amount); const dataIndex = data.findIndex((item)=>item.email === newData.email || item.phone_number === newData.phone_number); if (dataIndex === -1) { setData([ ...data, newData ]); } else { const updatedData = [ ...data ]; updatedData[dataIndex].amount += newData.amount; setData(updatedData); } }; const dataList = data.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-2 border-b border-[#ddd]", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, item.name, " - ", item.email, " - ", item.amount)); const handleExportToExcel = ()=>{ // Functionality for exporting data to Excel is implemented here }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7] p-4", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, !showList ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("header", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/logo.png", alt: "Tax receipt company logo", className: "w-[100px] h-[100px]", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-[#121212] text-3xl mt-2", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "Company Name"), /*#__PURE__*/ React.createElement("button", { onClick: handleToggleList, className: "mt-8 bg-[#2345c7] text-white font-roboto py-2 px-4 rounded hover:bg-[#1a34a8]", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Start"))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("main", { className: "w-full mt-8", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4 max-w-[500px] mx-auto", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: "Name", className: "p-2 border border-[#ddd] rounded", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "address", placeholder: "Address", className: "p-2 border border-[#ddd] rounded", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "city", placeholder: "City", className: "p-2 border border-[#ddd] rounded", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "province", placeholder: "Province", className: "p-2 border border-[#ddd] rounded", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "Email", className: "p-2 border border-[#ddd] rounded", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phone_number", placeholder: "Phone Number", className: "p-2 border border-[#ddd] rounded", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", step: "0.01", name: "amount", placeholder: "Amount", className: "p-2 border border-[#ddd] rounded", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#28a745] text-white font-roboto py-2 px-4 rounded hover:bg-[#218838]", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "Submit"))), showList && /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-20 inset-x-0 mx-auto w-full max-w-[600px] max-h-[50vh] overflow-auto bg-white p-4 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, dataList), /*#__PURE__*/ React.createElement("button", { onClick: handleToggleList, className: "fixed bottom-4 right-4 bg-[#007bff] text-white font-roboto p-3 rounded-full hover:bg-[#0069d9]", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "sr-only", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "Toggle Data List"), "📋"), /*#__PURE__*/ React.createElement("button", { onClick: handleExportToExcel, className: "fixed bottom-4 left-4 bg-[#ffc107] text-white font-roboto py-2 px-3 rounded-lg hover:bg-[#e0a800]", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Export to Excel")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, ` .list-enter { animation: slideUp 0.3s forwards; } .list-leave { animation: slideDown 0.3s forwards; } @keyframes slideUp { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } } @keyframes slideDown { 0% { transform: translateY(0); } 100% { transform: translateY(100%); } } `)); }