function MainComponent() { const [data, setData] = React.useState([]); const [inputs, setInputs] = React.useState({ workerName: '', date: '', day: '', hours: '', status: '' }); const [managerLogin, setManagerLogin] = React.useState({ username: '', password: '' }); const [isManagerView, setIsManagerView] = React.useState(false); const handleChange = (e)=>{ const { name, value } = e.target; setInputs({ ...inputs, [name]: value }); }; const handleManagerChange = (e)=>{ const { name, value } = e.target; setManagerLogin({ ...managerLogin, [name]: value }); }; const handleSubmit = (e)=>{ e.preventDefault(); setData([ ...data, inputs ]); setInputs({ workerName: '', date: '', day: '', hours: '', status: '' }); }; const handleManagerLogin = (e)=>{ e.preventDefault(); if (managerLogin.username === "hagaynuma" && managerLogin.password === "Hagainuma1") { setIsManagerView(true); } else { alert("Invalid credentials"); } }; const handleLogOut = ()=>{ setIsManagerView(false); setManagerLogin({ username: '', password: '' }); }; if (isManagerView) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7fafc]", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-xl mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "Work Hours History"), /*#__PURE__*/ React.createElement("button", { onClick: handleLogOut, className: "mb-4 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Logout"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xs", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, data.map((record, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, "Worker Name: ", record.workerName), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "Date: ", record.date), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, "Day: ", record.day), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, "Hours Worked: ", record.hours), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "Status: ", record.status))))); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7fafc]", __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-xl mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, "Work Hours Tracker"), /*#__PURE__*/ React.createElement("form", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", type: "text", name: "workerName", placeholder: "John Doe", value: inputs.workerName, onChange: handleChange, __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", type: "date", name: "date", value: inputs.date, onChange: handleChange, __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", type: "text", name: "day", placeholder: "Monday", value: inputs.day, onChange: handleChange, __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", type: "number", name: "hours", placeholder: "8", value: inputs.hours, onChange: handleChange, __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { id: "option1", type: "radio", name: "status", value: "Worked", className: "mr-2", checked: inputs.status === 'Worked', onChange: handleChange, __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "option1", className: "mr-4", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "Worked"), /*#__PURE__*/ React.createElement("input", { id: "option2", type: "radio", name: "status", value: "Did not work", className: "mr-2", checked: inputs.status === 'Did not work', onChange: handleChange, __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "option2", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "Did not work"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "Save"))), /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-xl mb-4", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, "Manager Login"), /*#__PURE__*/ React.createElement("form", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8", onSubmit: handleManagerLogin, __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", type: "text", name: "username", placeholder: "Username", value: managerLogin.username, onChange: handleManagerChange, __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", type: "password", name: "password", placeholder: "Password", value: managerLogin.password, onChange: handleManagerChange, __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, "Login")))); }