Administration

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 - Add Cypress test support.
 - Added localization.
+- Added separate administration area and user navigation menu to switch between delivery, administration and STAC browser.
 
 ### Changed
 

src/Geopilot.Frontend/package.json

@@ -18,6 +18,7 @@
     "@azure/msal-react": "^2.0.7",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.21",
     "@mui/material": "^5.14.18",
     "@mui/x-data-grid": "^6.18.1",
     "bootstrap": "^5.3.2",

src/Geopilot.Frontend/public/locale/de/common.json

@@ -43,7 +43,9 @@
   "logInForDelivery": "Anmelden um Lieferung zu erstellen",
   "logOut": "Abmelden",
   "mandate": "Mandat",
+  "mandates": "Mandate",
   "noErrors": "Keine Fehler",
+  "organisations": "Organisationen",
   "predecessor": "Vorgänger",
   "privacyPolicy": "Datenschutz",
   "stacBrowser": "STAC Browser",
@@ -52,6 +54,7 @@
   "type": "Typ",
   "uploadFile": "{{fileName}} hochladen...",
   "uploadNotSuccessful": "Der Upload war nicht erfolgreich. Die Validierung wurde abgebrochen.",
+  "users": "Benutzer:innen",
   "validate": "Validieren",
   "version": "Version",
   "versionInformation": "Versionsinformationen"

src/Geopilot.Frontend/public/locale/en/common.json

@@ -43,7 +43,9 @@
   "logInForDelivery": "Log in to create delivery",
   "logOut": "Log Out",
   "mandate": "Mandate",
+  "mandates": "Mandates",
   "noErrors": "No Errors",
+  "organisations": "Organisations",
   "predecessor": "Predecessor",
   "privacyPolicy": "Privacy policy",
   "stacBrowser": "STAC Browser",
@@ -52,6 +54,7 @@
   "type": "Type",
   "uploadFile": "Upload {{fileName}}...",
   "uploadNotSuccessful": "The upload was not successful. Validation has been aborted.",
+  "users": "Users",
   "validate": "Validate",
   "version": "Version",
   "versionInformation": "Version information"

src/Geopilot.Frontend/public/locale/fr/common.json

@@ -43,7 +43,9 @@
   "logInForDelivery": "Connectez-vous pour créer une livraison",
   "logOut": "Se déconnecter",
   "mandate": "Mandat",
+  "mandates": "Mandats",
   "noErrors": "Pas d'erreurs",
+  "organisations": "Organisations",
   "predecessor": "Prédécesseur",
   "privacyPolicy": "Politique de confidentialité",
   "stacBrowser": "Navigateur STAC",
@@ -52,6 +54,7 @@
   "type": "Type",
   "uploadFile": "Télécharger {{fileName}}...",
   "uploadNotSuccessful": "Le téléchargement n'a pas réussi. La validation a été annulée.",
+  "users": "Utilisateurs",
   "validate": "Valider",
   "version": "Version",
   "versionInformation": "Informations sur la version"

src/Geopilot.Frontend/public/locale/it/common.json

@@ -43,7 +43,9 @@
   "logInForDelivery": "Accedi per creare una consegna",
   "logOut": "Esci",
   "mandate": "Mandato",
+  "mandates": "Mandati",
   "noErrors": "Nessun errore",
+  "organisations": "Organizzazioni",
   "predecessor": "Predecessore",
   "privacyPolicy": "Informativa sulla privacy",
   "stacBrowser": "Browser STAC",
@@ -52,6 +54,7 @@
   "type": "Tipo",
   "uploadFile": "Carica {{fileName}}...",
   "uploadNotSuccessful": "Caricamento non riuscito. La validazione è stata interrotta.",
+  "users": "Utenti",
   "validate": "Valida",
   "version": "Versione",
   "versionInformation": "Informazioni sulla versione"

src/Geopilot.Frontend/src/App.jsx

@@ -2,11 +2,10 @@ import { PublicClientApplication } from "@azure/msal-browser";
 import { MsalProvider } from "@azure/msal-react";
 import { useEffect, useMemo, useState } from "react";
 import { Alert } from "react-bootstrap";
-import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 import { Snackbar } from "@mui/material";
 import BannerContent from "./BannerContent";
 import Footer from "./Footer";
-import Header from "./Header";
 import Home from "./pages/home/Home";
 import Admin from "./pages/admin/Admin";
 import ModalContent from "./ModalContent";
@@ -18,6 +17,10 @@ import { I18nextProvider } from "react-i18next";
 import i18n from "./i18n";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import { deDE, enUS, frFR, itIT } from "@mui/material/locale";
+import DeliveryOverview from "./pages/admin/DeliveryOverview.jsx";
+import Users from "./pages/admin/Users.jsx";
+import Mandates from "./pages/admin/Mandates.jsx";
+import Organisations from "./pages/admin/Organisations.jsx";
 
 export const App = () => {
   const [modalContent, setModalContent] = useState(false);
@@ -159,20 +162,32 @@ export const App = () => {
         <MsalProvider instance={msalInstance}>
           <AuthProvider authScopes={clientSettings?.authScopes} onLoginError={setAlertText}>
             <div className="app">
-              <Router>
-                <Header clientSettings={clientSettings} />
+              <BrowserRouter>
                 <Routes>
                   <Route
                     exact
                     path="/"
                     element={
-                      <Home
-                        clientSettings={clientSettings}
-                        nutzungsbestimmungenAvailable={nutzungsbestimmungenContent ? true : false}
-                        showNutzungsbestimmungen={() => openModalContent(nutzungsbestimmungenContent, "markdown")}
-                        quickStartContent={quickStartContent}
-                        setShowBannerContent={setShowBannerContent}
-                      />
+                      <>
+                        <Home
+                          clientSettings={clientSettings}
+                          nutzungsbestimmungenAvailable={nutzungsbestimmungenContent ? true : false}
+                          showNutzungsbestimmungen={() => openModalContent(nutzungsbestimmungenContent, "markdown")}
+                          quickStartContent={quickStartContent}
+                          setShowBannerContent={setShowBannerContent}
+                        />
+                        <Footer
+                          openModalContent={openModalContent}
+                          infoHilfeContent={infoHilfeContent}
+                          nutzungsbestimmungenContent={nutzungsbestimmungenContent}
+                          datenschutzContent={datenschutzContent}
+                          impressumContent={impressumContent}
+                          clientSettings={clientSettings}
+                          appVersion={backendVersion}
+                          licenseInfoCustom={licenseInfoCustom}
+                          licenseInfo={licenseInfo}
+                        />
+                      </>
                     }
                   />
                 </Routes>
@@ -183,21 +198,16 @@ export const App = () => {
                 </LoggedOutTemplate>
                 <AdminTemplate>
                   <Routes>
-                    <Route path="/admin" element={<Admin />} />
+                    <Route path="admin" element={<Navigate to="/admin/delivery-overview" replace />} />
+                    <Route path="admin" element={<Admin clientSettings={clientSettings} />}>
+                      <Route path="delivery-overview" element={<DeliveryOverview />} />
+                      <Route path="users" element={<Users />} />
+                      <Route path="mandates" element={<Mandates />} />
+                      <Route path="organisations" element={<Organisations />} />
+                    </Route>
                   </Routes>
                 </AdminTemplate>
-              </Router>
-              <Footer
-                openModalContent={openModalContent}
-                infoHilfeContent={infoHilfeContent}
-                nutzungsbestimmungenContent={nutzungsbestimmungenContent}
-                datenschutzContent={datenschutzContent}
-                impressumContent={impressumContent}
-                clientSettings={clientSettings}
-                appVersion={backendVersion}
-                licenseInfoCustom={licenseInfoCustom}
-                licenseInfo={licenseInfo}
-              />
+              </BrowserRouter>
               <ModalContent
                 className="modal"
                 show={showModalContent}

src/Geopilot.Frontend/src/Header.jsx

@@ -7,19 +7,22 @@ import {
   Button,
   Divider,
   Drawer,
+  IconButton,
   List,
   ListItem,
   ListItemButton,
   ListItemText,
   Toolbar,
   Typography,
 } from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
+import AccountCircleOutlinedIcon from "@mui/icons-material/AccountCircleOutlined";
 import { LoggedInTemplate } from "./auth/LoggedInTemplate.jsx";
 import { LoggedOutTemplate } from "./auth/LoggedOutTemplate.jsx";
 import { AdminTemplate } from "./auth/AdminTemplate.jsx";
 import { useLocation, useNavigate } from "react-router-dom";
 
-export const Header = ({ clientSettings }) => {
+export const Header = ({ clientSettings, hasDrawerToggle, handleDrawerToggle }) => {
   const { user, login, logout } = useAuth();
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -31,16 +34,37 @@ export const Header = ({ clientSettings }) => {
   };
 
   return (
-    <header>
-      <Box sx={{ flexGrow: 1 }}>
-        <AppBar position="static">
-          <Toolbar
-            sx={{
-              display: "flex",
-              flexDirection: "row",
-              justifyContent: "space-between",
-            }}>
-            <Box sx={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
+    <>
+      <AppBar>
+        <Toolbar
+          sx={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+          }}>
+          <Box sx={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
+            {hasDrawerToggle ? (
+              <>
+                <IconButton
+                  color="inherit"
+                  aria-label="open drawer"
+                  edge="start"
+                  onClick={handleDrawerToggle}
+                  sx={{ mr: 2, display: { sm: "none" } }}>
+                  <MenuIcon fontSize="large" />
+                </IconButton>
+                <Box sx={{ display: { xs: "none", sm: "block" } }}>
+                  <img
+                    className="vendor-logo"
+                    src={clientSettings?.vendor?.logo}
+                    alt={`Logo of ${clientSettings?.vendor?.name}`}
+                    onError={e => {
+                      e.target.style.display = "none";
+                    }}
+                  />
+                </Box>
+              </>
+            ) : (
               <img
                 className="vendor-logo"
                 src={clientSettings?.vendor?.logo}
@@ -49,25 +73,25 @@ export const Header = ({ clientSettings }) => {
                   e.target.style.display = "none";
                 }}
               />
-              <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-                {location.pathname.includes("admin") ? t("administration").toUpperCase() : t("delivery").toUpperCase()}
-              </Typography>
-            </Box>
-            <Box sx={{ flexGrow: 0 }}>
-              <LoggedOutTemplate>
-                <Button className="nav-button" sx={{ color: "white" }} onClick={login}>
-                  {t("logIn")}
-                </Button>
-              </LoggedOutTemplate>
-              <LoggedInTemplate>
-                <Button className="nav-button" sx={{ color: "white" }} onClick={toggleUserMenu(true)}>
-                  {user?.name}
-                </Button>
-              </LoggedInTemplate>
-            </Box>
-          </Toolbar>
-        </AppBar>
-      </Box>
+            )}
+            <Typography variant="h6" component="div" sx={{ display: { xs: "none", sm: "block" }, flexGrow: 1 }}>
+              {location.pathname.includes("admin") ? t("administration").toUpperCase() : t("delivery").toUpperCase()}
+            </Typography>
+          </Box>
+          <Box sx={{ flexGrow: 0 }}>
+            <LoggedOutTemplate>
+              <Button className="nav-button" sx={{ color: "white" }} onClick={login}>
+                {t("logIn")}
+              </Button>
+            </LoggedOutTemplate>
+            <LoggedInTemplate>
+              <IconButton className="nav-button" sx={{ color: "white" }} onClick={toggleUserMenu(true)}>
+                <AccountCircleOutlinedIcon fontSize="large" />
+              </IconButton>
+            </LoggedInTemplate>
+          </Box>
+        </Toolbar>
+      </AppBar>
       <Drawer anchor={"right"} open={userMenuOpen} onClose={toggleUserMenu(false)}>
         <div className="user-menu">
           <Box
@@ -115,7 +139,7 @@ export const Header = ({ clientSettings }) => {
           </Button>
         </div>
       </Drawer>
-    </header>
+    </>
   );
 };