function MainComponent() { const [role, setRole] = React.useState(''); const [loggedIn, setLoggedIn] = React.useState(false); const [shopDetails, setShopDetails] = React.useState({ name: '', location: '', contact: '', currency: 'USD' }); const [cashierDetails, setCashierDetails] = React.useState({ name: '', username: '', password: '' }); const handleLogin = (e)=>{ e.preventDefault(); setLoggedIn(true); }; const handleShopRegistration = (e)=>{ e.preventDefault(); }; const handleCashierRegistration = (e)=>{ e.preventDefault(); }; const renderLoginForm = ()=>{ const isOwner = role === 'owner'; return /*#__PURE__*/ React.createElement("form", { onSubmit: handleLogin, className: "bg-white p-6 rounded shadow-md w-[300px]", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Role"), /*#__PURE__*/ React.createElement("select", { name: "role", className: "w-full p-2 border rounded", value: role, onChange: (e)=>setRole(e.target.value), required: true, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "Select Role"), /*#__PURE__*/ React.createElement("option", { value: "owner", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Owner"), /*#__PURE__*/ React.createElement("option", { value: "manager", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "Manager"), /*#__PURE__*/ React.createElement("option", { value: "cashier", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "Cashier"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("input", { name: "username", type: "text", className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this })), !isOwner && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { name: "password", type: "password", className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-blue-600 text-white rounded", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Login")); }; const renderShopForm = ()=>/*#__PURE__*/ React.createElement("form", { onSubmit: handleShopRegistration, className: "bg-white p-6 rounded shadow-md w-[400px]", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "Shop Name"), /*#__PURE__*/ React.createElement("input", { name: "shopName", type: "text", className: "w-full p-2 border rounded", value: shopDetails.name, onChange: (e)=>setShopDetails({ ...shopDetails, name: e.target.value }), required: true, __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "Location"), /*#__PURE__*/ React.createElement("input", { name: "location", type: "text", className: "w-full p-2 border rounded", value: shopDetails.location, onChange: (e)=>setShopDetails({ ...shopDetails, location: e.target.value }), required: true, __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, "Contact Information"), /*#__PURE__*/ React.createElement("input", { name: "contact", type: "text", className: "w-full p-2 border rounded", value: shopDetails.contact, onChange: (e)=>setShopDetails({ ...shopDetails, contact: e.target.value }), required: true, __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, "Currency Preferences"), /*#__PURE__*/ React.createElement("select", { name: "currency", className: "w-full p-2 border rounded", value: shopDetails.currency, onChange: (e)=>setShopDetails({ ...shopDetails, currency: e.target.value }), required: true, __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "USD", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, "$ - USD"), /*#__PURE__*/ React.createElement("option", { value: "ZiG", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, "ZiG - Z"), /*#__PURE__*/ React.createElement("option", { value: "R", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, "R - R"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-green-600 text-white rounded", __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, "Register Shop")); const renderCashierForm = ()=>/*#__PURE__*/ React.createElement("form", { onSubmit: handleCashierRegistration, className: "bg-white p-6 rounded shadow-md w-[400px]", __source: { fileName: "", lineNumber: 123, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 124, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, "Cashier Name"), /*#__PURE__*/ React.createElement("input", { name: "cashierName", type: "text", className: "w-full p-2 border rounded", value: cashierDetails.name, onChange: (e)=>setCashierDetails({ ...cashierDetails, name: e.target.value }), required: true, __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 135, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("input", { name: "username", type: "text", className: "w-full p-2 border rounded", value: cashierDetails.username, onChange: (e)=>setCashierDetails({ ...cashierDetails, username: e.target.value }), required: true, __source: { fileName: "", lineNumber: 137, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 146, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 147, columnNumber: 9 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { name: "password", type: "password", className: "w-full p-2 border rounded", value: cashierDetails.password, onChange: (e)=>setCashierDetails({ ...cashierDetails, password: e.target.value }), required: true, __source: { fileName: "", lineNumber: 148, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-green-600 text-white rounded", __source: { fileName: "", lineNumber: 157, columnNumber: 7 }, __self: this }, "Register Cashier")); if (!loggedIn) { return /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen items-center justify-center bg-[#f0f0f0] font-roboto", __source: { fileName: "", lineNumber: 165, columnNumber: 7 }, __self: this }, renderLoginForm()); } return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 172, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f0f0] p-6", __source: { fileName: "", lineNumber: 173, columnNumber: 7 }, __self: this }, role === 'owner' && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 175, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 176, columnNumber: 13 }, __self: this }, "Shop Registration"), renderShopForm(), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mt-8 mb-4", __source: { fileName: "", lineNumber: 178, columnNumber: 13 }, __self: this }, "Cashier Registration"), renderCashierForm()), role === 'manager' && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 183, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }, "Manager Dashboard"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 185, columnNumber: 13 }, __self: this }, "Access to shop-specific management tasks like inventory and sales management.")), role === 'cashier' && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 189, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 190, columnNumber: 13 }, __self: this }, "Cashier Dashboard"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 191, columnNumber: 13 }, __self: this }, "Access restricted to POS operations such as sales and returns.")))); }