backend for queues & minor front tweaks

frontend/app/src/App.tsx

@@ -21,8 +21,9 @@ const App = () => {
         <MessageContext.Provider value={messageApi}>
           <div className="content">
             {contextHolder}
-            <HeaderComponent />
-            <AppRoutes />
+            <AppRoutes>
+              <HeaderComponent />
+            </AppRoutes>
           </div>
         </MessageContext.Provider>
       </ConfigProvider>

frontend/app/src/components/HeaderComponent.tsx

@@ -1,11 +1,17 @@
-import { LogoutOutlined, UserOutlined } from "@ant-design/icons";
-import { Button, Layout, Menu, MenuProps, Popover, Tooltip } from "antd";
-import React, { useEffect, useState } from "react";
+import {
+  DesktopOutlined,
+  LogoutOutlined,
+  SettingOutlined,
+  UserOutlined,
+} from "@ant-design/icons";
+import { Layout, Menu, MenuProps, Popover } from "antd";
+import React, { useState } from "react";
 import AuthModal from "./AuthModal";
 import "./styles.css";
 import { StorePrototype, logOut, store } from "../config/store";
 import { useSelector } from "react-redux";
 import tr from "../config/translation";
+import { Link } from "react-router-dom";
 
 const { Header } = Layout;
 
@@ -20,15 +26,27 @@ const HeaderComponent = () => {
   );
 
   const userMenuItems: MenuProps["items"] = [
+    {
+      label: <Link to="/settings">{tr("Settings")}</Link>,
+      key: "settings",
+      icon: <SettingOutlined />,
+    },
     {
       label: tr("Log out"),
       key: "logout",
       icon: <LogoutOutlined />,
+      danger: true,
       onClick: () => store.dispatch(logOut()),
     },
   ];
 
   const items: MenuProps["items"] = [
+    {
+      label: <Link to={user ? "/dashboard" : "#"}>{tr("Dashboard")}</Link>,
+      key: "dashboard",
+      icon: <DesktopOutlined />,
+      disabled: !user,
+    },
     {
       label: user ? (
         <Popover

frontend/app/src/config/baseUrl.ts

@@ -1 +1 @@
-export const baseUrl = "http://localhost/api";
+export const baseUrl = `${window.location.protocol}//${window.location.host}/api`;

frontend/app/src/pages/AppRoutes.tsx

@@ -1,19 +1,25 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import MainPage from "./MainPage";
 import { getLocalToken, loadLanguage, store } from "../config/store";
+import DashboardPage from "./DashboardPage";
+import PropTypes from "prop-types";
 
-const AppRoutes = () => {
+const AppRoutes = ({ children }: { children: ReactNode }) => {
   store.dispatch(getLocalToken());
   store.dispatch(loadLanguage());
 
   return (
     <BrowserRouter>
+      {children}
       <Routes>
-        <Route path="/" Component={MainPage} />
+        <Route path="/" element={<MainPage />} />
+        <Route path="/dashboard" element={<DashboardPage />} />
       </Routes>
     </BrowserRouter>
   );
 };
-
+AppRoutes.propTypes = {
+  children: PropTypes.node,
+};
 export default AppRoutes;

frontend/app/src/pages/DashboardPage.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import "./styles.css";
+import logoSquare from "../../static/logo-square.png";
+import { Button } from "antd";
+import tr from "../config/translation";
+
+const DashboardPage = () => {
+  return (
+    <div className="card main">
+      <img src={logoSquare} alt="logo" className="image" />
+      <p style={{ fontSize: "2rem" }}>
+        {tr("Queuing has never been so simple")}
+      </p>
+      <div className="button-box">
+        <Button>{tr("Join a queue")}</Button>
+        <Button>{tr("Take a tour")}</Button>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardPage;

frontend/app/src/pages/MainPage.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import "./styles.css";
-import logoSquare from "../../static/logo-square.png";
+import logo from "../../static/logo-full.png";
 import { Button } from "antd";
 import tr from "../config/translation";
 
 const MainPage = () => {
   return (
     <div className="card main">
-      <img src={logoSquare} alt="logo" className="image" />
+      <img src={logo} alt="logo" className="image" />
       <p style={{ fontSize: "2rem" }}>
         {tr("Queuing has never been so simple")}
       </p>

frontend/app/src/pages/styles.css

@@ -14,7 +14,7 @@
 }
 
 .image {
-    height: 10vw;
+    height: 100px;
     width: auto;
 }