backend for queues & minor front tweaks

frontend/app/package-lock.json

@@ -11,6 +11,7 @@
         "@ant-design/icons": "^5.3.5",
         "@reduxjs/toolkit": "^2.2.2",
         "antd": "^5.15.4",
+        "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-redux": "^9.1.0",
@@ -3051,7 +3052,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3336,7 +3336,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -3346,8 +3345,7 @@
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/punycode": {
       "version": "2.3.1",

frontend/app/package.json

@@ -11,6 +11,7 @@
     "@ant-design/icons": "^5.3.5",
     "@reduxjs/toolkit": "^2.2.2",
     "antd": "^5.15.4",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.1.0",

frontend/app/rsbuild.config.ts

@@ -1,10 +1,15 @@
-import { defineConfig } from '@rsbuild/core';
-import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from "@rsbuild/core";
+import { pluginReact } from "@rsbuild/plugin-react";
 
 export default defineConfig({
   plugins: [pluginReact()],
   server: {
-    host: '0.0.0.0',
+    host: "0.0.0.0",
     port: 3000,
   },
+  html: {
+    favicon: "./static/logo-square.png",
+    title: "queueful!",
+    template: "./static/index.html",
+  },
 });

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;
 }
 

frontend/app/static/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="<%= mountId %>"></div>
+  </body>
+</html>