adjust network config

FrontendV2/nginx.conf

@@ -14,7 +14,7 @@ server {
   }
 
   location /backend/ {
-    proxy_pass http://borrow_system-backend_v2:8004/;
+    proxy_pass http://demo_borrow_system-backend_v2:8004/;
   }
 
   location ~* \.(?:js|mjs|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {

FrontendV2/src/App.tsx

@@ -16,7 +16,6 @@ import { Flex } from "@chakra-ui/react";
 import { Footer } from "./components/footer/Footer";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { API_BASE } from "@/config/api.config";
-import { ContactPage } from "./pages/ContactPage";
 
 const queryClient = new QueryClient();
 
@@ -81,7 +80,6 @@ function App() {
                   <Route path="/" element={<HomePage />} />
                   <Route path="/my-loans" element={<MyLoansPage />} />
                   <Route path="/landingpage" element={<Landingpage />} />
-                  <Route path="/contact" element={<ContactPage />} />
                 </Route>
 
                 <Route path="/login" element={<LoginPage />} />

FrontendV2/src/components/Header.tsx

@@ -23,7 +23,6 @@ import {
   MoreVertical,
   Languages,
   Table,
-  ContactRound,
 } from "lucide-react";
 import { useUserContext } from "@/states/Context";
 import { useState } from "react";
@@ -156,16 +155,6 @@ export const Header = () => {
                   </HStack>
                 }
               />
-              <Menu.Item
-                value="contact"
-                onSelect={() => navigate("/contact", { replace: true })}
-                children={
-                  <HStack gap={3}>
-                    <ContactRound size={16} />
-                    <Text as="span">{t("contact")}</Text>
-                  </HStack>
-                }
-              />
               <Menu.Separator />
               <Menu.Item
                 value="logout"
@@ -298,17 +287,6 @@ export const Header = () => {
               </HStack>
             </Button>
           </a>
-
-          <Button
-            variant={"outline"}
-            onClick={() => navigate("/contact", { replace: true })}
-          >
-            <HStack gap={2}>
-              <ContactRound size={18} />
-              <Text as="span">{t("contact")}</Text>
-            </HStack>
-          </Button>
-
           <Button onClick={logout} variant="outline" colorScheme="red">
             <HStack gap={2}>
               <LogOut size={18} />

FrontendV2/src/components/ui/provider.tsx

@@ -1,15 +1,23 @@
-"use client"
+"use client";
 
-import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
+import { ChakraProvider, defaultSystem } from "@chakra-ui/react";
-import {
+import * as React from "react";
-  ColorModeProvider,
+import type { ReactNode } from "react";
-  type ColorModeProviderProps,
+import { ColorModeProvider as ThemeColorModeProvider } from "./color-mode";
-} from "./color-mode"
 
-export function Provider(props: ColorModeProviderProps) {
+export interface ColorModeProviderProps {
+  children: React.ReactNode;
+}
+
+export function ColorModeProvider({ children }: ColorModeProviderProps) {
+  // Wrap children with the real color-mode provider
+  return <ThemeColorModeProvider>{children}</ThemeColorModeProvider>;
+}
+
+export function Provider({ children }: { children: ReactNode }) {
   return (
     <ChakraProvider value={defaultSystem}>
-      <ColorModeProvider {...props} />
+      <ColorModeProvider>{children}</ColorModeProvider>
     </ChakraProvider>
-  )
+  );
 }

FrontendV2/src/pages/ContactPage.tsx

@@ -1,111 +0,0 @@
-import {
-  Field,
-  Textarea,
-  Button,
-  Alert,
-  Container,
-  Text,
-  VStack,
-  Spinner,
-} from "@chakra-ui/react";
-import { useTranslation } from "react-i18next";
-import { useState } from "react";
-import { API_BASE } from "@/config/api.config";
-import Cookies from "js-cookie";
-import { Header } from "@/components/Header";
-
-interface Alert {
-  type: "info" | "warning" | "success" | "error" | "neutral";
-  headline: string;
-  text: string;
-}
-
-export const ContactPage = () => {
-  const { t } = useTranslation();
-  const [message, setMessage] = useState("");
-  const [isSending, setIsSending] = useState(false);
-  const [alert, setAlert] = useState<Alert | null>(null);
-
-  const sendMessage = async () => {
-    setIsSending(true);
-    if (message.trim() === "") {
-      setAlert({
-        type: "error",
-        headline: t("contactPage_messageErrorHeadline"),
-        text: t("contactPage_messageErrorText2"),
-      });
-      setIsSending(false);
-      return;
-    }
-
-    // Logic to send the message
-    const result = await fetch(`${API_BASE}/api/users/contact`, {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${Cookies.get("token") || ""}`,
-        "Content-Type": "application/json",
-        Accept: "application/json",
-      },
-      body: JSON.stringify({ message }),
-    });
-
-    if (result.ok) {
-      setAlert({
-        type: "success",
-        headline: t("contactPage_successHeadline"),
-        text: t("contactPage_successText"),
-      });
-      setMessage("");
-    } else if (result.status === 503) {
-      setAlert({
-        type: "error",
-        headline: t("serviceDeactivatedHeadline"),
-        text: t("contactPage_serviceDeactivatedText"),
-      });
-    } else {
-      setAlert({
-        type: "error",
-        headline: t("contactPage_errorHeadline"),
-        text: t("contactPage_errorText"),
-      });
-    }
-    setIsSending(false);
-  };
-
-  return (
-    <Container className="px-6 sm:px-8 pt-10">
-      <Header />
-      <Field.Root invalid={message === ""}>
-        <Field.Label>
-          <Text>{t("contactPage_messageDescription")}</Text>
-          <Field.RequiredIndicator />
-        </Field.Label>
-        <Textarea
-          placeholder={t("contactPage_messagePlaceholder")}
-          variant="subtle"
-          value={message}
-          onChange={(e) => setMessage(e.target.value)}
-        />
-        {message === "" && (
-          <Field.ErrorText>{t("contactPage_messageErrorText")}</Field.ErrorText>
-        )}
-      </Field.Root>
-      {alert && (
-        <Alert.Root status={alert.type}>
-          <Alert.Indicator />
-          <Alert.Content>
-            <Alert.Title>{alert.headline}</Alert.Title>
-            <Alert.Description>{alert.text}</Alert.Description>
-          </Alert.Content>
-        </Alert.Root>
-      )}
-      {isSending && (
-        <VStack colorPalette="teal">
-          <Spinner color="colorPalette.600" />
-          <Text color="colorPalette.600">{t("loading")}</Text>
-        </VStack>
-      )}
-      <Button onClick={sendMessage}>{t("contactPage_sendButton")}</Button>
-    </Container>
-  );
-};

FrontendV2/src/pages/MyLoansPage.tsx

@@ -121,10 +121,28 @@ export const MyLoansPage = () => {
 
   const formatDate = (iso: string | null) => {
     if (!iso) return "-";
-    const m = iso.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/);
+    const date = new Date(iso);
-    if (!m) return iso;
+    if (isNaN(date.getTime())) return iso;
-    const [, y, M, d, h, min] = m;
+    return date.toLocaleString("de-DE", {
-    return `${d}.${M}.${y} ${h}:${min}`;
+      timeZone: "Europe/Berlin",
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  const dateAndTime = (isISO: boolean) => {
+    const date = new Date();
+
+    if (isISO) {
+      return date.toISOString();
+    }
+
+    if (!isISO) {
+      return date;
+    }
   };
 
   const handleTakeAction = async (loanCode: string) => {
@@ -151,7 +169,7 @@ export const MyLoansPage = () => {
       setLoans((prev) =>
         prev.map((loan) =>
           loan.loan_code === loanCode
-            ? { ...loan, take_date: new Date().toISOString() }
+            ? { ...loan, take_date: dateAndTime(true) }
             : loan,
         ),
       );
@@ -191,7 +209,7 @@ export const MyLoansPage = () => {
       setLoans((prev) =>
         prev.map((loan) =>
           loan.loan_code === loanCode
-            ? { ...loan, returned_date: new Date().toISOString() }
+            ? { ...loan, returned_date: dateAndTime(true) }
             : loan,
         ),
       );

FrontendV2/src/utils/i18n/locales/de/de.json

@@ -60,7 +60,7 @@
     "sure-delete-loan-2": "Für den Admin bleibt sie weiterhin sichtbar.",
     "delete": "Löschen",
     "change-language": "Sprache ändern",
-    "timezone-info": "Die angezeigten Daten und Uhrzeiten werden in deutscher Zeitzone dargestellt und müssen auch so eingegeben werden.",
+    "timezone-info": "Die angezeigten Daten und Uhrzeiten werden in deutscher Zeitzone dargestellt und müssen auch so eingegeben werden. Das gesamte System ist auf die deutsche Zeitzone eingestellt.",
     "optional-note": "Optionale Notiz",
     "note": "Notiz",
     "user-info-desc": "Hier können Sie Ihre persönlichen Informationen einsehen und das Passwort ändern. Falls Sie weitere Änderungen benötigen, wenden Sie sich bitte an einen Administrator.",
@@ -68,7 +68,7 @@
     "admin-status": "Admin-Status",
     "first-name": "Vorname",
     "last-name": "Nachname",
-    "app-title": "Ausleihsystem",
+    "app-title": "Ausleihsystem (demo)",
     "last-borrowed-person": "Zuletzt ausgeliehen von",
     "currently-borrowed-by": "Derzeit ausgeliehen von",
     "back": "Zurückgehen",

FrontendV2/src/utils/i18n/locales/en/en.json

@@ -60,7 +60,7 @@
     "sure-delete-loan-2": "It will remain visible to the admin.",
     "delete": "Delete",
     "change-language": "Change language",
-    "timezone-info": "The displayed dates and times are shown in Berlin timezone and must also be entered as such.",
+    "timezone-info": "The displayed dates and times are shown in Berlin timezone and must also be entered as such. The entire system is set to Berlin timezone.",
     "optional-note": "Optional note",
     "note": "Note",
     "user-info-desc": "Here you can view your personal information and change your password. If you need to make further changes, please contact an administrator.",
@@ -68,7 +68,7 @@
     "admin-status": "Admin status",
     "first-name": "First name",
     "last-name": "Last name",
-    "app-title": "Borrow System",
+    "app-title": "Borrow System (demo)",
     "last-borrowed-person": "Last borrowed by",
     "currently-borrowed-by": "Currently borrowed by",
     "back": "Go back",

FrontendV2/vite.config.ts

@@ -1,16 +1,23 @@
 import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import svgr from "vite-plugin-svgr";
 import tailwindcss from "@tailwindcss/vite";
-import tsconfigPaths from "vite-tsconfig-paths";
+import path from "node:path";
 
 export default defineConfig({
-  plugins: [react(), svgr(), tailwindcss(), tsconfigPaths()],
+  plugins: [tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+    },
+  },
   server: {
     host: "0.0.0.0",
-    port: 8001,
+    allowedHosts: ["insta.the1s.de"],
-    watch: {
+    port: 8101,
-      usePolling: true,
+    watch: { usePolling: true },
+    hmr: {
+      host: "insta.the1s.de",
+      port: 8101,
+      protocol: "wss",
     },
   },
 });

admin/nginx.conf

@@ -14,7 +14,7 @@ server {
   }
 
   location /backend/ {
-    proxy_pass http://borrow_system-backend_v2:8004/;
+    proxy_pass http://demo_borrow_system-backend_v2:8102/;
   }
 
   location ~* \.(?:js|mjs|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {

admin/src/Layout/Dashboard.tsx

@@ -47,7 +47,7 @@ const Dashboard: React.FC<DashboardProps> = ({ onLogout }) => {
         viewAPI={() => setActiveView("API")}
         viewConfig={() => setActiveView("Server Konfiguration")}
       />
-      <Box flex="1" display="flex" flexDirection="column">
+      <Box flex="1" display="flex" flexDirection="column" minH={0}>
         <Flex
           as="header"
           align="center"
@@ -68,7 +68,7 @@ const Dashboard: React.FC<DashboardProps> = ({ onLogout }) => {
             </Button>
           </Flex>
         </Flex>
-        <Box as="main" flex="1" p={6}>
+        <Box as="main" flex="1" p={6} minH={0} overflow="hidden">
           {activeView === "" && (
             <Flex
               align="center"

admin/src/components/ItemTable.tsx

@@ -57,32 +57,32 @@ const ItemTable: React.FC = () => {
 
   const handleItemNameChange = (id: number, value: string) => {
     setItems((prev) =>
-      prev.map((it) => (it.id === id ? { ...it, item_name: value } : it))
+      prev.map((it) => (it.id === id ? { ...it, item_name: value } : it)),
     );
   };
 
   const handleCanBorrowRoleChange = (id: number, value: string) => {
     setItems((prev) =>
-      prev.map((it) => (it.id === id ? { ...it, can_borrow_role: value } : it))
+      prev.map((it) => (it.id === id ? { ...it, can_borrow_role: value } : it)),
     );
   };
 
   const handleLockerNumberChange = (id: number, value: string) => {
     setItems((prev) =>
-      prev.map((it) => (it.id === id ? { ...it, safe_nr: value } : it))
+      prev.map((it) => (it.id === id ? { ...it, safe_nr: value } : it)),
     );
   };
 
   const handleDoorKeyChange = (id: number, value: string) => {
     setItems((prev) =>
-      prev.map((it) => (it.id === id ? { ...it, door_key: value } : it))
+      prev.map((it) => (it.id === id ? { ...it, door_key: value } : it)),
     );
   };
 
   const setError = (
     status: "error" | "success",
     message: string,
-    description: string
+    description: string,
   ) => {
     setIsError(false);
     setErrorStatus(status);
@@ -102,7 +102,7 @@ const ItemTable: React.FC = () => {
             headers: {
               Authorization: `Bearer ${Cookies.get("token")}`,
             },
-          }
+          },
         );
         const data = await response.json();
         return data;
@@ -193,185 +193,229 @@ const ItemTable: React.FC = () => {
 
       {/* make table fill available width, like UserTable */}
       {!isLoading && (
-        <Table.Root
+        <Table.ScrollArea flex="1" minH={0} rounded="md" mt={4}>
-          size="sm"
+          <Table.Root
-          striped
+            size="sm"
-          w="100%"
+            striped
-          style={{ tableLayout: "auto" }} // Spalten nach Content
+            stickyHeader
-        >
+            css={{
-          <Table.Header>
+              "& [data-sticky]": {
-            <Table.Row>
+                position: "sticky",
-              <Table.ColumnHeader>
+                zIndex: 1,
-                <strong>#</strong>
+                bg: "bg",
-              </Table.ColumnHeader>
+
-              <Table.ColumnHeader>
+                _after: {
-                <strong>Gegenstand</strong>
+                  content: '""',
-              </Table.ColumnHeader>
+                  position: "absolute",
-              <Table.ColumnHeader>
+                  pointerEvents: "none",
-                <strong>Ausleih Berechtigung</strong>
+                  top: "0",
-              </Table.ColumnHeader>
+                  bottom: "-1px",
-              <Table.ColumnHeader>
+                  width: "32px",
-                <strong>Im Schließfach</strong>
+                },
-              </Table.ColumnHeader>
+              },
-              <Table.ColumnHeader width="1%" whiteSpace="nowrap">
+
-                <strong>Schließfachnummer</strong>
+              "& [data-sticky=end]": {
-              </Table.ColumnHeader>
+                _after: {
-              <Table.ColumnHeader width="1%" whiteSpace="nowrap">
+                  insetInlineEnd: "0",
-                <strong>Schlüssel</strong>
+                  translate: "100% 0",
-              </Table.ColumnHeader>
+                  shadow: "inset 8px 0px 8px -8px rgba(0, 0, 0, 0.16)",
-              <Table.ColumnHeader>
+                },
-                <strong>Eintrag erstellt am</strong>
+              },
-              </Table.ColumnHeader>
+
-              <Table.ColumnHeader>
+              "& [data-sticky=start]": {
-                <strong>Eintrag aktualisiert am</strong>
+                _after: {
-              </Table.ColumnHeader>
+                  insetInlineStart: "0",
-              <Table.ColumnHeader>
+                  translate: "-100% 0",
-                <strong>LaP *</strong>
+                  shadow: "inset -8px 0px 8px -8px rgba(0, 0, 0, 0.16)",
-              </Table.ColumnHeader>
+                },
-              <Table.ColumnHeader>
+              },
-                <strong>Dav **</strong>
+
-              </Table.ColumnHeader>
+              "& thead tr": {
-              <Table.ColumnHeader width="1%" whiteSpace="nowrap">
+                shadow: "0 1px 0 0 {colors.border}",
-                <strong>Aktionen</strong>
+                "&:has(th[data-sticky])": {
-              </Table.ColumnHeader>
+                  zIndex: 2,
-            </Table.Row>
+                },
-          </Table.Header>
+              },
-          <Table.Body>
+            }}
-            {items.map((item) => (
+          >
-              <Table.Row key={item.id}>
+            <Table.Header>
-                <Table.Cell>{item.id}</Table.Cell>
+              <Table.Row>
-                <Table.Cell>
+                <Table.ColumnHeader>
-                  <Input
+                  <strong>#</strong>
-                    size="sm"
+                </Table.ColumnHeader>
-                    w="max-content"
+                <Table.ColumnHeader>
-                    onChange={(e) =>
+                  <strong>Gegenstand</strong>
-                      handleItemNameChange(item.id, e.target.value)
+                </Table.ColumnHeader>
-                    }
+                <Table.ColumnHeader>
-                    value={item.item_name}
+                  <strong>Ausleih Berechtigung</strong>
-                  />
+                </Table.ColumnHeader>
-                </Table.Cell>
+                <Table.ColumnHeader>
-                <Table.Cell>
+                  <strong>Im Schließfach</strong>
-                  <Input
+                </Table.ColumnHeader>
-                    size="sm"
+                <Table.ColumnHeader width="1%" whiteSpace="nowrap">
-                    w="max-content"
+                  <strong>Schließfachnummer</strong>
-                    onChange={(e) =>
+                </Table.ColumnHeader>
-                      handleCanBorrowRoleChange(item.id, e.target.value)
+                <Table.ColumnHeader width="1%" whiteSpace="nowrap">
-                    }
+                  <strong>Schlüssel</strong>
-                    value={item.can_borrow_role}
+                </Table.ColumnHeader>
-                  />
+                <Table.ColumnHeader>
-                </Table.Cell>
+                  <strong>Eintrag erstellt am</strong>
-                <Table.Cell>
+                </Table.ColumnHeader>
-                  <Button
+                <Table.ColumnHeader>
-                    onClick={() =>
+                  <strong>Eintrag aktualisiert am</strong>
-                      changeSafeState(item.id).then(() => setReload(!reload))
+                </Table.ColumnHeader>
-                    }
+                <Table.ColumnHeader>
-                    size="xs"
+                  <strong>LaP *</strong>
-                    rounded="full"
+                </Table.ColumnHeader>
-                    px={3}
+                <Table.ColumnHeader>
-                    py={1}
+                  <strong>Dav **</strong>
-                    gap={2}
+                </Table.ColumnHeader>
-                    variant="ghost"
+                <Table.ColumnHeader width="1%" whiteSpace="nowrap">
-                    color={item.in_safe ? "green.600" : "red.600"}
+                  <strong>Aktionen</strong>
-                    borderWidth="1px"
+                </Table.ColumnHeader>
-                    borderColor={item.in_safe ? "green.300" : "red.300"}
-                    _hover={{
-                      bg: item.in_safe ? "green.50" : "red.50",
-                      borderColor: item.in_safe ? "green.400" : "red.400",
-                      transform: "translateY(-1px)",
-                      shadow: "sm",
-                    }}
-                    _active={{ transform: "translateY(0)" }}
-                    aria-label={
-                      item.in_safe ? "Mark as not in safe" : "Mark as in safe"
-                    }
-                  >
-                    <Icon
-                      as={item.in_safe ? CheckCircle2 : XCircle}
-                      boxSize={3.5}
-                      mr={2}
-                    />
-                    <Text as="span" fontSize="xs" fontWeight="semibold">
-                      {item.in_safe ? "Yes" : "No"}
-                    </Text>
-                  </Button>
-                </Table.Cell>
-                <Table.Cell>
-                  <Input
-                    size="sm"
-                    w="max-content"
-                    onChange={(e) =>
-                      handleLockerNumberChange(item.id, e.target.value)
-                    }
-                    value={item.safe_nr}
-                  />
-                </Table.Cell>
-                <Table.Cell>
-                  <Input
-                    size="sm"
-                    w="max-content"
-                    onChange={(e) =>
-                      handleDoorKeyChange(item.id, e.target.value)
-                    }
-                    value={item.door_key}
-                  />
-                </Table.Cell>
-                <Table.Cell>{formatDateTime(item.entry_created_at)}</Table.Cell>
-                <Table.Cell>{formatDateTime(item.entry_updated_at)}</Table.Cell>
-                <Table.Cell>{item.last_borrowed_person}</Table.Cell>
-                <Table.Cell>{item.currently_borrowing}</Table.Cell>
-                <Table.Cell whiteSpace="nowrap">
-                  <Button
-                    onClick={() =>
-                      handleEditItems(
-                        item.id,
-                        item.item_name,
-                        item.safe_nr,
-                        item.door_key,
-                        item.can_borrow_role
-                      ).then((response) => {
-                        if (response.success) {
-                          setError(
-                            "success",
-                            "Gegenstand erfolgreich bearbeitet!",
-                            "Gegenstand " +
-                              '"' +
-                              item.item_name +
-                              '" mit ID ' +
-                              item.id +
-                              " bearbeitet."
-                          );
-                        }
-                      })
-                    }
-                    colorPalette="teal"
-                    size="sm"
-                  >
-                    <Save />
-                  </Button>
-                  <Button
-                    onClick={() =>
-                      deleteItem(item.id).then((response) => {
-                        if (response.success) {
-                          setItems(items.filter((i) => i.id !== item.id));
-                          setError(
-                            "success",
-                            "Gegenstand gelöscht",
-                            "Der Gegenstand wurde erfolgreich gelöscht."
-                          );
-                        }
-                      })
-                    }
-                    colorPalette="red"
-                    size="sm"
-                    ml={2}
-                  >
-                    <Trash2 />
-                  </Button>
-                </Table.Cell>
               </Table.Row>
-            ))}
+            </Table.Header>
-          </Table.Body>
+            <Table.Body>
-        </Table.Root>
+              {items.map((item) => (
+                <Table.Row key={item.id}>
+                  <Table.Cell>{item.id}</Table.Cell>
+                  <Table.Cell>
+                    <Input
+                      size="sm"
+                      w="max-content"
+                      onChange={(e) =>
+                        handleItemNameChange(item.id, e.target.value)
+                      }
+                      value={item.item_name}
+                    />
+                  </Table.Cell>
+                  <Table.Cell>
+                    <Input
+                      size="sm"
+                      w="max-content"
+                      onChange={(e) =>
+                        handleCanBorrowRoleChange(item.id, e.target.value)
+                      }
+                      value={item.can_borrow_role}
+                    />
+                  </Table.Cell>
+                  <Table.Cell>
+                    <Button
+                      onClick={() =>
+                        changeSafeState(item.id).then(() => setReload(!reload))
+                      }
+                      size="xs"
+                      rounded="full"
+                      px={3}
+                      py={1}
+                      gap={2}
+                      variant="ghost"
+                      color={item.in_safe ? "green.600" : "red.600"}
+                      borderWidth="1px"
+                      borderColor={item.in_safe ? "green.300" : "red.300"}
+                      _hover={{
+                        bg: item.in_safe ? "green.50" : "red.50",
+                        borderColor: item.in_safe ? "green.400" : "red.400",
+                        transform: "translateY(-1px)",
+                        shadow: "sm",
+                      }}
+                      _active={{ transform: "translateY(0)" }}
+                      aria-label={
+                        item.in_safe ? "Mark as not in safe" : "Mark as in safe"
+                      }
+                    >
+                      <Icon
+                        as={item.in_safe ? CheckCircle2 : XCircle}
+                        boxSize={3.5}
+                        mr={2}
+                      />
+                      <Text as="span" fontSize="xs" fontWeight="semibold">
+                        {item.in_safe ? "Yes" : "No"}
+                      </Text>
+                    </Button>
+                  </Table.Cell>
+                  <Table.Cell>
+                    <Input
+                      size="sm"
+                      w="max-content"
+                      onChange={(e) =>
+                        handleLockerNumberChange(item.id, e.target.value)
+                      }
+                      value={item.safe_nr}
+                    />
+                  </Table.Cell>
+                  <Table.Cell>
+                    <Input
+                      size="sm"
+                      w="max-content"
+                      onChange={(e) =>
+                        handleDoorKeyChange(item.id, e.target.value)
+                      }
+                      value={item.door_key}
+                    />
+                  </Table.Cell>
+                  <Table.Cell>
+                    {formatDateTime(item.entry_created_at)}
+                  </Table.Cell>
+                  <Table.Cell>
+                    {formatDateTime(item.entry_updated_at)}
+                  </Table.Cell>
+                  <Table.Cell>{item.last_borrowed_person}</Table.Cell>
+                  <Table.Cell>{item.currently_borrowing}</Table.Cell>
+                  <Table.Cell whiteSpace="nowrap">
+                    <Button
+                      onClick={() =>
+                        handleEditItems(
+                          item.id,
+                          item.item_name,
+                          item.safe_nr,
+                          item.door_key,
+                          item.can_borrow_role,
+                        ).then((response) => {
+                          if (response.success) {
+                            setError(
+                              "success",
+                              "Gegenstand erfolgreich bearbeitet!",
+                              "Gegenstand " +
+                                '"' +
+                                item.item_name +
+                                '" mit ID ' +
+                                item.id +
+                                " bearbeitet.",
+                            );
+                          }
+                        })
+                      }
+                      colorPalette="teal"
+                      size="sm"
+                    >
+                      <Save />
+                    </Button>
+                    <Button
+                      onClick={() =>
+                        deleteItem(item.id).then((response) => {
+                          if (response.success) {
+                            setItems(items.filter((i) => i.id !== item.id));
+                            setError(
+                              "success",
+                              "Gegenstand gelöscht",
+                              "Der Gegenstand wurde erfolgreich gelöscht.",
+                            );
+                          }
+                        })
+                      }
+                      colorPalette="red"
+                      size="sm"
+                      ml={2}
+                    >
+                      <Trash2 />
+                    </Button>
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table.Root>
+        </Table.ScrollArea>
       )}
       <Text>* LaP = Letzte ausleihende Person</Text>
       <Text>** Dav = Derzeit ausgeliehen von</Text>

admin/src/components/LoanTable.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import {
+  Box,
   Table,
   Spinner,
   Text,
@@ -31,7 +32,7 @@ const LoanTable: React.FC = () => {
   const setError = (
     status: "error" | "success",
     message: string,
-    description: string
+    description: string,
   ) => {
     setIsError(false);
     setErrorStatus(status);
@@ -65,7 +66,7 @@ const LoanTable: React.FC = () => {
             headers: {
               Authorization: `Bearer ${Cookies.get("token")}`,
             },
-          }
+          },
         );
         const data = await response.json();
         return data;
@@ -83,7 +84,7 @@ const LoanTable: React.FC = () => {
   }, [reload]);
 
   return (
-    <>
+    <Box h="full" display="flex" flexDirection="column" minH={0}>
       {/* Action toolbar */}
       <HStack
         mb={4}
@@ -131,86 +132,131 @@ const LoanTable: React.FC = () => {
         </VStack>
       )}
       {!isLoading && (
-        <Table.Root size="sm" striped>
+        <Table.ScrollArea flex="1" minH={0} rounded="md" mt={4}>
-          <Table.Header>
+          <Table.Root
-            <Table.Row>
+            size="sm"
-              <Table.ColumnHeader>
+            striped
-                <strong>#</strong>
+            stickyHeader
-              </Table.ColumnHeader>
+            css={{
-              <Table.ColumnHeader>
+              "& [data-sticky]": {
-                <strong>Besitzer</strong>
+                position: "sticky",
-              </Table.ColumnHeader>
+                zIndex: 1,
-              <Table.ColumnHeader>
+                bg: "bg",
-                <strong>Ausleih code</strong>
+
-              </Table.ColumnHeader>
+                _after: {
-              <Table.ColumnHeader>
+                  content: '""',
-                <strong>Startdatum</strong>
+                  position: "absolute",
-              </Table.ColumnHeader>
+                  pointerEvents: "none",
-              <Table.ColumnHeader>
+                  top: "0",
-                <strong>Enddatum</strong>
+                  bottom: "-1px",
-              </Table.ColumnHeader>
+                  width: "32px",
-              <Table.ColumnHeader>
+                },
-                <strong>Ausleihdatum</strong>
+              },
-              </Table.ColumnHeader>
+
-              <Table.ColumnHeader>
+              "& [data-sticky=end]": {
-                <strong>Rückgabedatum</strong>
+                _after: {
-              </Table.ColumnHeader>
+                  insetInlineEnd: "0",
-              <Table.ColumnHeader>
+                  translate: "100% 0",
-                <strong>Erstellt am</strong>
+                  shadow: "inset 8px 0px 8px -8px rgba(0, 0, 0, 0.16)",
-              </Table.ColumnHeader>
+                },
-              <Table.ColumnHeader>
+              },
-                <strong>Ausgeliehene Artikel</strong>
+
-              </Table.ColumnHeader>
+              "& [data-sticky=start]": {
-              <Table.ColumnHeader>
+                _after: {
-                <strong>Notiz</strong>
+                  insetInlineStart: "0",
-              </Table.ColumnHeader>
+                  translate: "-100% 0",
-              <Table.ColumnHeader>
+                  shadow: "inset -8px 0px 8px -8px rgba(0, 0, 0, 0.16)",
-                <strong>Aktionen</strong>
+                },
-              </Table.ColumnHeader>
+              },
-            </Table.Row>
+
-          </Table.Header>
+              "& thead tr": {
-          <Table.Body>
+                shadow: "0 1px 0 0 {colors.border}",
-            {items.map((item) => (
+                "&:has(th[data-sticky])": {
-              <Table.Row color={item.deleted ? "red" : "white"} key={item.id}>
+                  zIndex: 2,
-                <Table.Cell>{item.id}</Table.Cell>
+                },
-                <Table.Cell>{item.username}</Table.Cell>
+              },
-                <Table.Cell>
+            }}
-                  <Code>{item.loan_code}</Code>
+          >
-                </Table.Cell>
+            <Table.Header>
-                <Table.Cell>{formatDateTime(item.start_date)}</Table.Cell>
+              <Table.Row>
-                <Table.Cell>{formatDateTime(item.end_date)}</Table.Cell>
+                <Table.ColumnHeader>
-                <Table.Cell>{formatDateTime(item.take_date)}</Table.Cell>
+                  <strong>#</strong>
-                <Table.Cell>{formatDateTime(item.returned_date)}</Table.Cell>
+                </Table.ColumnHeader>
-                <Table.Cell>{formatDateTime(item.created_at)}</Table.Cell>
+                <Table.ColumnHeader>
-                <Table.Cell>{item.loaned_items_name.join(", ")}</Table.Cell>
+                  <strong>Besitzer</strong>
-                <Table.Cell>{item.note}</Table.Cell>
+                </Table.ColumnHeader>
-                <Table.Cell>
+                <Table.ColumnHeader>
-                  <Button
+                  <strong>Ausleihcode</strong>
-                    onClick={() =>
+                </Table.ColumnHeader>
-                      deleteLoan(item.id).then((response) => {
+                <Table.ColumnHeader>
-                        if (response.success) {
+                  <strong>Startdatum</strong>
-                          setItems(items.filter((i) => i.id !== item.id));
+                </Table.ColumnHeader>
-                          setError(
+                <Table.ColumnHeader>
-                            "success",
+                  <strong>Enddatum</strong>
-                            "Loan deleted",
+                </Table.ColumnHeader>
-                            "The loan has been successfully deleted."
+                <Table.ColumnHeader>
-                          );
+                  <strong>Ausleihdatum</strong>
-                        }
+                </Table.ColumnHeader>
-                      })
+                <Table.ColumnHeader>
-                    }
+                  <strong>Rückgabedatum</strong>
-                    colorPalette="red"
+                </Table.ColumnHeader>
-                    size="sm"
+                <Table.ColumnHeader>
-                    ml={2}
+                  <strong>Erstellt am</strong>
-                  >
+                </Table.ColumnHeader>
-                    <Trash2 />
+                <Table.ColumnHeader>
-                  </Button>
+                  <strong>Ausgeliehene Artikel</strong>
-                </Table.Cell>
+                </Table.ColumnHeader>
+                <Table.ColumnHeader>
+                  <strong>Notiz</strong>
+                </Table.ColumnHeader>
+                <Table.ColumnHeader>
+                  <strong>Aktionen</strong>
+                </Table.ColumnHeader>
               </Table.Row>
-            ))}
+            </Table.Header>
-          </Table.Body>
+            <Table.Body>
-        </Table.Root>
+              {items.map((item) => (
+                <Table.Row color={item.deleted ? "red" : "white"} key={item.id}>
+                  <Table.Cell>{item.id}</Table.Cell>
+                  <Table.Cell>{item.username}</Table.Cell>
+                  <Table.Cell>
+                    <Code>{item.loan_code}</Code>
+                  </Table.Cell>
+                  <Table.Cell>{formatDateTime(item.start_date)}</Table.Cell>
+                  <Table.Cell>{formatDateTime(item.end_date)}</Table.Cell>
+                  <Table.Cell>{formatDateTime(item.take_date)}</Table.Cell>
+                  <Table.Cell>{formatDateTime(item.returned_date)}</Table.Cell>
+                  <Table.Cell>{formatDateTime(item.created_at)}</Table.Cell>
+                  <Table.Cell>{item.loaned_items_name.join(", ")}</Table.Cell>
+                  <Table.Cell>{item.note}</Table.Cell>
+                  <Table.Cell>
+                    <Button
+                      onClick={() =>
+                        deleteLoan(item.id).then((response) => {
+                          if (response.success) {
+                            setItems(items.filter((i) => i.id !== item.id));
+                            setError(
+                              "success",
+                              "Loan deleted",
+                              "The loan has been successfully deleted.",
+                            );
+                          }
+                        })
+                      }
+                      colorPalette="red"
+                      size="sm"
+                      ml={2}
+                    >
+                      <Trash2 />
+                    </Button>
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table.Root>
+        </Table.ScrollArea>
       )}
-    </>
+    </Box>
   );
 };
 

admin/vite.config.ts

@@ -8,9 +8,13 @@ export default defineConfig({
   plugins: [react(), svgr(), tailwindcss(), tsconfigPaths()],
   server: {
     host: "0.0.0.0",
-    port: 8003,
+    allowedHosts: ["admin.insta.the1s.de"],
-    watch: {
+    port: 8103,
-      usePolling: true,
+    watch: { usePolling: true },
+    hmr: {
+      host: "admin.insta.the1s.de",
+      port: 8103,
+      protocol: "wss",
     },
   },
 });

backendV2/info.json

@@ -1,11 +1,11 @@
 {
     "backend-info": {
-        "version": "v2.2 (dev)"
+        "version": "v2.2 (demo)"
     },
     "frontend-info": {
-        "version": "v2.2 (dev)"
+        "version": "v2.2 (demo)"
     },
     "admin-panel-info": {
-        "version": "v1.4(dev)"
+        "version": "v1.4 (demo)"
     }
 }

backendV2/routes/admin/database/loanDataMgmt.database.js

@@ -12,7 +12,7 @@ const pool = mysql
   .promise();
 
 export const getAllLoans = async () => {
-  const [rows] = await pool.query("SELECT * FROM loans");
+  const [rows] = await pool.query("SELECT * FROM loans WHERE deleted_admin = 0;");
   return { success: true, data: rows };
 };
 

backendV2/routes/admin/database/userDataMgmt.database.js

@@ -29,14 +29,14 @@ export const createUser = async (
 };
 
 export const deleteUserById = async (userId) => {
-  const [result] = await pool.query("DELETE FROM users WHERE id = ?", [userId]);
+  const [result] = await pool.query("DELETE FROM users WHERE id = ? AND secret_user = false", [userId]);
   if (result.affectedRows > 0) return { success: true };
   return { success: false };
 };
 
 export const changePassword = async (username, newPassword) => {
   const [result] = await pool.query(
-    "UPDATE users SET password = ?, entry_updated_at = NOW() WHERE username = ?",
+    "UPDATE users SET password = ?, entry_updated_at = NOW() WHERE username = ? AND secret_user = false",
     [newPassword, username],
   );
   if (result.affectedRows > 0) return { success: true };
@@ -52,7 +52,7 @@ export const editUserById = async (
   is_admin,
 ) => {
   const [result] = await pool.query(
-    "UPDATE users SET  first_name = ?, last_name = ?, role = ?, email = ?, is_admin = ?, entry_updated_at = NOW() WHERE id = ?",
+    "UPDATE users SET  first_name = ?, last_name = ?, role = ?, email = ?, is_admin = ?, entry_updated_at = NOW() WHERE id = ? AND secret_user = false",
     [first_name, last_name, role, email, is_admin, userId],
   );
   if (result.affectedRows > 0) return { success: true };
@@ -61,7 +61,7 @@ export const editUserById = async (
 
 export const getAllUsers = async () => {
   const [result] = await pool.query(
-    "SELECT id, username, first_name, last_name, role, email, is_admin, entry_created_at, entry_updated_at FROM users",
+    "SELECT id, username, first_name, last_name, role, email, is_admin, entry_created_at, entry_updated_at FROM users WHERE secret_user = false",
   );
   if (result.length > 0) return { success: true, data: result };
   return { success: false };
@@ -69,7 +69,7 @@ export const getAllUsers = async () => {
 
 export const getUserById = async (userId) => {
   const [rows] = await pool.query(
-    "SELECT id, username, first_name, last_name, role, email, is_admin FROM users WHERE id = ?",
+    "SELECT id, username, first_name, last_name, role, email, is_admin FROM users WHERE id = ? AND secret_user = false",
     [userId],
   );
   if (rows.length === 0) {

backendV2/routes/api/api.database.js

@@ -119,14 +119,6 @@ export const setTakeDateV2 = async (loanCode) => {
   return { message: "Failed to set take date", success: false };
 };
 
-export const getAllLoansV2 = async () => {
-  const [result] = await pool.query("SELECT * FROM loans;");
-  if (result.length > 0) {
-    return { success: true, data: result };
-  }
-  return { success: false };
-};
-
 export const openDoor = async (doorKey) => {
   const [result] = await pool.query(
     "SELECT safe_nr, id FROM items WHERE door_key = ?;",

backendV2/routes/app/database/loansMgmt.database.js

@@ -63,11 +63,9 @@ export const createLoanInDatabase = async (
       };
     }
 
-    const itemNames = itemIds
+    const itemNames = itemIds.map(
-      .map(
+      (id) => itemsRows.find((r) => Number(r.id) === Number(id)).item_name,
-        (id) => itemsRows.find((r) => Number(r.id) === Number(id))?.item_name,
+    );
-      )
-      .filter(Boolean);
 
     // Build lockers array (unique, only 2-digit numbers from safe_nr)
     const lockers = [
@@ -109,27 +107,24 @@ export const createLoanInDatabase = async (
       };
     }
 
-    // Generate unique loan_code (retry a few times)
+    let index = false;
-    let loanCode = null;
+    let candidate;
-    for (let i = 0; i < 6; i++) {
+    let loanCode;
-      const candidate = Math.floor(100000 + Math.random() * 899999); // 6 digits
+
-      const [exists] = await conn.query(
+    // Generates 6-digit loan code
-        "SELECT 1 FROM loans WHERE loan_code = ? LIMIT 1",
+    do {
+      candidate = Math.floor(100000 + Math.random() * 899999);
+
+      const [rows] = await conn.query(
+        "SELECT 1 FROM loans where loan_code = ? LIMIT 1",
         [candidate],
       );
-      if (exists.length === 0) {
+
+      if (rows.length == 0) {
+        index = true;
         loanCode = candidate;
-        break;
       }
-    }
+    } while (index === false);
-    if (!loanCode) {
-      await conn.rollback();
-      return {
-        success: false,
-        code: "SERVER_ERROR",
-        message: "Failed to generate unique loan code",
-      };
-    }
 
     // Insert loan (now includes lockers)
     const [insertRes] = await conn.query(

backendV2/schemeV2.mock.sql

@@ -0,0 +1,100 @@
+USE borrow_system_new;
+
+-- USERS
+INSERT INTO users (username, password, email, first_name, last_name, role, is_admin)
+VALUES
+  ('user1', 'passwordhash1', 'user1@example.com', 'First1', 'Last1', 1, false),
+  ('user2', 'passwordhash2', 'user2@example.com', 'First2', 'Last2', 1, false),
+  ('user3', 'passwordhash3', 'user3@example.com', 'First3', 'Last3', 2, false),
+  ('admin1', 'passwordhash4', 'admin1@example.com', 'Admin',  'One',  9, true),
+  ('admin2', 'passwordhash5', 'admin2@example.com', 'Admin',  'Two',  9, true);
+
+-- ITEMS
+INSERT INTO items (item_name, can_borrow_role, in_safe, safe_nr, door_key, last_borrowed_person, currently_borrowing)
+VALUES
+  ('Item1', 1, true,  1, 101, NULL, NULL),
+  ('Item2', 1, true,  2, 102, 'user1', 'user1'),
+  ('Item3', 2, true,  3, 103, 'user2', NULL),
+  ('Item4', 1, false, NULL, NULL, NULL, NULL),
+  ('Item5', 2, false, NULL, NULL, 'user3', 'user3');
+
+-- LOANS
+INSERT INTO loans (
+  username,
+  lockers,
+  loan_code,
+  start_date,
+  end_date,
+  take_date,
+  returned_date,
+  created_at,
+  loaned_items_id,
+  loaned_items_name,
+  deleted,
+  note
+)
+VALUES
+  (
+    'user1',
+    JSON_ARRAY('Locker1', 'Locker2'),
+    '123456',
+    '2026-02-01 09:00:00',
+    '2026-02-10 17:00:00',
+    '2026-02-01 09:15:00',
+    NULL,
+    '2026-02-01 09:00:00',
+    JSON_ARRAY(1, 2),
+    JSON_ARRAY('Item1', 'Item2'),
+    false,
+    'Erste allgemeine Ausleihe'
+  ),
+  (
+    'user2',
+    JSON_ARRAY('Locker3'),
+    '234567',
+    '2026-02-02 10:00:00',
+    '2026-02-05 16:00:00',
+    '2026-02-02 10:05:00',
+    '2026-02-05 15:30:00',
+    '2026-02-02 10:00:00',
+    JSON_ARRAY(3),
+    JSON_ARRAY('Item3'),
+    false,
+    'Zurückgegeben vor Enddatum'
+  ),
+  (
+    'user3',
+    JSON_ARRAY(),
+    '345678',
+    '2026-02-03 08:30:00',
+    '2026-02-15 18:00:00',
+    NULL,
+    NULL,
+    '2026-02-03 08:30:00',
+    JSON_ARRAY(5),
+    JSON_ARRAY('Item5'),
+    false,
+    'Noch ausgeliehen'
+  ),
+  (
+    'user1',
+    JSON_ARRAY('Locker4'),
+    '456789',
+    '2025-12-01 09:00:00',
+    '2025-12-03 17:00:00',
+    '2025-12-01 09:10:00',
+    '2025-12-03 16:45:00',
+    '2025-12-01 09:00:00',
+    JSON_ARRAY(1),
+    JSON_ARRAY('Item1'),
+    true,
+    'Alte, gelöschte Ausleihe'
+  );
+
+-- API KEYS
+INSERT INTO apiKeys (api_key, entry_name)
+VALUES
+  ('10000001', 'Entry1'),
+  ('10000002', 'Entry2'),
+  ('10000003', 'Entry3'),
+  ('10000004', 'Entry4');

backendV2/schemeV2.sql

@@ -11,6 +11,7 @@ CREATE TABLE users (
   is_admin bool NOT NULL DEFAULT false,
   entry_created_at timestamp NULL DEFAULT CURRENT_TIMESTAMP,
   entry_updated_at timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  secret_user bool NOT NULL DEFAULT false,
   PRIMARY KEY (id)
 ) ENGINE=InnoDB;
 

changelog.md

@@ -1,36 +1,28 @@
-# Changelog for upcoming version: v2.2
+# Changelog for upcoming version: vX.X
 
-This update provides some new features for the design. It also contains some improvements and I have also fixed some bugs.
+Introduction
 
 ## New features
 
-- **Deactivatable services:** I have added the ability to deactivate services, which can be useful for maintenance or other purposes. The admin can activate and deactivate services in the admin panel. If a service is deactivated, it will not be available for users and they will get an error message if they try to use it. They will also get an warning banner on the homepage.
+- 
-- **New Animations:** I have added some new animations to the frontend, which make the user experience more enjoyable.
-- **New Icon:** I have added a new icon for the frontend, which is now also used in the header and the favicon. It is a dark version of the old icon, which fits better to the overall design. I have made it with Icon Composer. The old icon is still used for the admin panel, which has a light design. (Maybe I will change the admin panel design in the future...)
-- **New Button:** When you go to your user card (over the user icon in the header) you have a new button "Click me". If you click it, you will get an message... _I am just saying: I have implemented the no-as-a-service code in to my Backend._
 
 ## Improvements
 
-- The overview page now shows the note column and is overall better organised.
+- 
-- Improved error logging
-- If you try to delete a loan that has not been returned yet, you will get an 507 error code.
-- When the admin deletes a loan, the loan will be still visible in the database, but it will be marked as deleted. This is to prevent data loss and to keep track of deleted loans.
 
 ## Fixed bugs
 
-- Fixed bug: #13
+- 
-- Fixed bug for messaging when server has an error
-- Fixed footer height
 
 ---
 
 ## New version numbers
 
-**Backend:** v2.2
+**Backend:** vX.X
 
-**Frontend:** v2.2
+**Frontend:** vX.X
 
-**Admin panel:** v1.4
+**Admin panel:** vX.X
 
 ---
 

docker-compose.yml

@@ -1,51 +1,56 @@
 services:
-  #  usr-frontend_v2:
+  demo_usr_frontend:
-  #    container_name: borrow_system-usr-frontend
+    container_name: demo_borrow_system-usr-frontend
-  #    build: ./FrontendV2
+    networks:
-  #    ports:
+      proxynet:
-  #      - "8001:80"
+        ipv4_address: 172.20.0.14
-  #    restart: always
+    build: ./FrontendV2
+    restart: unless-stopped
 
-  #  admin-frontend:
+  demo_admin_frontend:
-  #    container_name: borrow_system-admin-frontend
+    container_name: demo_borrow_system-admin-frontend
-  #    build: ./admin
+    networks:
-  #    ports:
+      proxynet:
-  #      - "8003:80"
+        ipv4_address: 172.20.0.11
-  #    restart: always
+    build: ./admin
+    restart: unless-stopped
 
-  backend_v2:
+  demo_backend_v2:
-    container_name: borrow_system-backend_v2
+    container_name: demo_borrow_system-backend_v2
+    networks:
+      proxynet:
+        ipv4_address: 172.20.0.2
     build: ./backendV2
-    ports:
-      - "8004:8004"
     environment:
       NODE_ENV: production
-      DB_HOST: mysql_v2
+      DB_HOST: demo_mysql_v2
       DB_USER: root
       DB_PASSWORD: ${DB_PASSWORD_V2}
       DB_NAME: borrow_system_new
     depends_on:
-      - mysql_v2
+      - demo_mysql_v2
-    restart: always
+    restart: unless-stopped
 
-  mysql_v2:
+  demo_mysql_v2:
-    container_name: borrow_system-mysql-v2
+    container_name: demo_borrow_system-mysql-v2
+    networks:
+      proxynet:
+        ipv4_address: 172.20.0.10
     image: mysql:8.0
-    restart: always
+    restart: unless-stopped
     environment:
       MYSQL_ROOT_PASSWORD: ${DB_PASSWORD_V2}
       MYSQL_DATABASE: borrow_system_new
       TZ: Europe/Berlin
     volumes:
-      - mysql-v2-data:/var/lib/mysql
+      - demo_mysql-v2-data:/var/lib/mysql
       - ./mysql-timezone.cnf:/etc/mysql/conf.d/timezone.cnf:ro
-    ports:
-      - "3310:3306"
 
   no-as-a-service:
-    container_name: borrow_system-naas
+    container_name: demo_borrow_system-naas
-    ports:
+    networks:
-      - "3000:3000"
+      proxynet:
+        ipv4_address: 172.20.0.31
     build:
       context: ./no-as-a-service
       dockerfile: Dockerfile
@@ -53,4 +58,8 @@ services:
 
 volumes:
   mysql-data:
-  mysql-v2-data:
+  demo_mysql-v2-data:
+
+networks:
+  proxynet:
+    external: true