function MainComponent() { const [onlineEmployeesOfficeOne, setOnlineEmployeesOfficeOne] = React.useState({ levelOne: 3, levelTwo: 2, levelThree: 4, time: new Date() }); const [onlineEmployeesOfficeTwo, setOnlineEmployeesOfficeTwo] = React.useState({ levelOne: 4, levelTwo: 1, levelThree: 0, time: new Date() }); const [onlineEmployeesOfficeThree, setOnlineEmployeesOfficeThree] = React.useState({ levelOne: 2, levelTwo: 3, levelThree: 2, time: new Date() }); const [tickets, setTickets] = React.useState([]); const [isUserOnline, setIsUserOnline] = React.useState(true); const [newsFeed, setNewsFeed] = React.useState([ 'New encryption standards released', 'Zero-day vulnerability discovered', 'Maintenance window scheduled for 23:00 UTC' ]); const loggedInUser = { name: "Jane Doe", level: "Security Expert", pfp: "/profile-pic.jpg" }; const handleFileUpload = (event)=>{}; const createTicket = ()=>{ const newTicket = { id: tickets.length + 1, detail: `Ticket Detail #${tickets.length + 1}` }; setTickets((tickets)=>[ ...tickets, newTicket ]); }; const getTimeString = (officeTime)=>{ return officeTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); }; const getColorForOnlineEmployees = (office)=>{ const total = office.levelOne + office.levelTwo + office.levelThree; if (total >= 10) return 'border-green-500'; if (total >= 5) return 'border-orange-500'; return 'border-red-500'; }; const officeOneBorderColor = getColorForOnlineEmployees(onlineEmployeesOfficeOne); const officeTwoBorderColor = getColorForOnlineEmployees(onlineEmployeesOfficeTwo); const officeThreeBorderColor = getColorForOnlineEmployees(onlineEmployeesOfficeThree); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] text-[#c9d1d9] min-h-screen p-4 font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/viking-horn-logo.png", alt: "Logo featuring a viking horn", className: "w-10 h-10 mr-2", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-3xl text-[#58a6ff]", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Gjallarhorn")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "cursor-pointer bg-[#21262d] hover:bg-[#161b22] transition p-2 rounded text-sm", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: ".csv", className: "hidden", onChange: handleFileUpload, name: "fileUpload", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-upload mr-2 text-[#58a6ff]", "aria-hidden": "true", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }), "Upload CSV"), /*#__PURE__*/ React.createElement("button", { onClick: createTicket, className: "bg-[#238636] hover:bg-[#2ea043] transition p-2 rounded text-sm", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-plus-circle mr-2 text-[#58a6ff]", "aria-hidden": "true", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }), "Create Ticket")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm mr-2", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, loggedInUser.name, ", ", loggedInUser.level), /*#__PURE__*/ React.createElement("img", { src: loggedInUser.pfp, alt: "Profile picture of Jane Doe", className: `w-8 h-8 rounded-full ${isUserOnline ? 'ring-[#58a6ff] ring-2' : 'ring-red-500 ring-2'}`, __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "grid grid-cols-1 xl:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: `col-span-3 bg-[#1c1c1c] p-4 rounded-lg`, __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `border-2 p-6 rounded ${officeOneBorderColor}`, __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2 text-lg text-[#58a6ff]", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, "Dublin Office"), /*#__PURE__*/ React.createElement("div", { className: "text-[#8b949e]", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, "Level 1: ", onlineEmployeesOfficeOne.levelOne), /*#__PURE__*/ React.createElement("div", { className: "text-[#8b949e]", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, "Level 2: ", onlineEmployeesOfficeOne.levelTwo), /*#__PURE__*/ React.createElement("div", { className: "text-[#8b949e]", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, "Level 3: ", onlineEmployeesOfficeOne.levelThree), /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-sm text-[#8b949e]", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, "Time: ", getTimeString(onlineEmployeesOfficeOne.time))), /*#__PURE__*/ React.createElement("div", { className: `border-2 p-6 rounded ${officeTwoBorderColor}`, __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2 text-lg text-[#58a6ff]", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, "New York Office"), /*#__PURE__*/ React.createElement("div", { className: "text-[#8b949e]", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, "Level 1: ", onlineEmployeesOfficeTwo.levelOne), /*#__PURE__*/ React.createElement("div", { className: "text-[#8b949e]", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, "Level 2: ", onlineEmployeesOfficeTwo.levelTwo), /*#__PURE__*/ React.createElement("div", { className: "text-[#8b949e]", __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }, "Level 3: ", onlineEmployeesOfficeTwo.levelThree), /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-sm text-[#8b949e]", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, "Time: ", getTimeString(onlineEmployeesOfficeTwo.time))), /*#__PURE__*/ React.createElement("div", { className: `border-2 p-6 rounded ${officeThreeBorderColor}`, __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2 text-lg text-[#58a6ff]", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, "Tokyo Office"), /*#__PURE__*/ React.createElement("div", { className: "text-[#8b949e]", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }, "Level 1: ", onlineEmployeesOfficeThree.levelOne), /*#__PURE__*/ React.createElement("div", { className: "text-[#8b949e]", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, "Level 2: ", onlineEmployeesOfficeThree.levelTwo), /*#__PURE__*/ React.createElement("div", { className: "text-[#8b949e]", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, "Level 3: ", onlineEmployeesOfficeThree.levelThree), /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-sm text-[#8b949e]", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, "Time: ", getTimeString(onlineEmployeesOfficeThree.time))))), /*#__PURE__*/ React.createElement("aside", { className: "bg-[#1c1c1c] p-4 rounded-lg", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4 text-[#58a6ff]", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, "News Feed"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] p-3 rounded overflow-y-auto h-[300px]", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, newsFeed.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border-b border-[#30363d] py-2 px-3 last:border-b-0 text-[#8b949e]", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, item))))), /*#__PURE__*/ React.createElement("section", { className: "my-12", __source: { fileName: "", lineNumber: 120, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-6 text-[#58a6ff]", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, "Queue"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1c1c1c] p-4 rounded-lg", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, tickets.map((ticket)=>/*#__PURE__*/ React.createElement("div", { key: ticket.id, className: "bg-[#121212] border-b border-[#30363d] py-3 px-4 last:border-b-0 text-[#8b949e]", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, ticket.detail))))); }