adjust network config

Co-authored-by: Copilot <copilot@github.com>

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,90 +0,0 @@
-import {
-  Field,
-  Textarea,
-  Button,
-  Alert,
-  Container,
-  Text,
-} 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 [alert, setAlert] = useState<Alert | null>(null);
-
-  const sendMessage = async () => {
-    // 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"),
-      });
-    }
-  };
-
-  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>
-      )}
-      <Button onClick={sendMessage}>{t("contactPage_sendButton")}</Button>
-    </Container>
-  );
-};

FrontendV2/src/pages/HomePage.tsx

@@ -133,12 +133,6 @@ export const HomePage = () => {
           >
             {t("get-borrowable-items")}
           </Button>
-          {isLoadingA && (
-            <VStack colorPalette="teal">
-              <Spinner color="colorPalette.600" />
-              <Text color="colorPalette.600">{t("loading")}</Text>
-            </VStack>
-          )}
           {borrowableItems.length > 0 && (
             <Table.ScrollArea borderWidth="1px" rounded="md">
               <Table.Root size="sm" stickyHeader>
@@ -191,9 +185,11 @@ export const HomePage = () => {
           )}
           {selectedItems.length >= 1 && (
             <Button
-              onClick={() =>
+              onClick={() => {
+                setIsLoadingA(true);
                 createLoan(selectedItems, startDate, endDate, note).then(
                   (response) => {
+                    setIsLoadingA(false);
                     if (response.status === "error") {
                       setMsgStatus("error");
                       setMsgTitle(response.title || t("error"));
@@ -209,12 +205,18 @@ export const HomePage = () => {
                     setMsgDescription(t("loan-success"));
                     setIsMsg(true);
                   },
-                )
+                );
-              }
+              }}
             >
               {t("create-loan")}
             </Button>
           )}
+          {isLoadingA && (
+            <VStack colorPalette="teal">
+              <Spinner color="colorPalette.600" />
+              <Text color="colorPalette.600">{t("loading")}</Text>
+            </VStack>
+          )}
         </Stack>
       </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",
@@ -99,5 +99,7 @@
     "contactPage_serviceDeactivatedText": "Der Kontaktservice ist derzeit deaktiviert. Bitte versuchen Sie es später erneut.",
     "loan_page_serviceDeactivatedText": "Der Ausleihservice ist derzeit deaktiviert. Bitte versuchen Sie es später erneut.",
     "is-deactivated": "ist deaktiviert.",
-    "deactivated-services": "Deaktivierte Services"
+    "deactivated-services": "Deaktivierte Services",
+    "contactPage_messageErrorHeadline": "Fehler bei der Nachrichteneingabe",
+    "contactPage_messageErrorText2": "Bitte geben Sie eine Nachricht ein, bevor Sie sie senden."
 }

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",
@@ -99,5 +99,7 @@
     "contactPage_serviceDeactivatedText": "The contact service is currently deactivated. Please try again later.",
     "loan_page_serviceDeactivatedText": "The loan service is currently deactivated. Please try again later.",
     "is-deactivated": "is deactivated.",
-    "deactivated-services": "Deactivated services"
+    "deactivated-services": "Deactivated services",
+    "contactPage_messageErrorHeadline": "Error submitting message",
+    "contactPage_messageErrorText2": "Please enter a message before sending it."
 }

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.3.2 (dev)"
+        "version": "v1.4 (demo)"
     }
 }

backendV2/package-lock.json

@@ -16,7 +16,7 @@
         "express-rate-limit": "^8.4.1",
         "jose": "^6.0.12",
         "mysql2": "^3.14.3",
-        "nodemailer": "^7.0.6"
+        "nodemailer": "^8.0.6"
       }
     },
     "node_modules/accepts": {
@@ -54,29 +54,49 @@
       "license": "MIT"
     },
     "node_modules/body-parser": {
-      "version": "2.2.0",
+      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.2.tgz",
-      "integrity": "sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==",
+      "integrity": "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==",
       "license": "MIT",
       "dependencies": {
         "bytes": "^3.1.2",
         "content-type": "^1.0.5",
-        "debug": "^4.4.0",
+        "debug": "^4.4.3",
         "http-errors": "^2.0.0",
-        "iconv-lite": "^0.6.3",
+        "iconv-lite": "^0.7.0",
         "on-finished": "^2.4.1",
-        "qs": "^6.14.0",
+        "qs": "^6.14.1",
-        "raw-body": "^3.0.0",
+        "raw-body": "^3.0.1",
-        "type-is": "^2.0.0"
+        "type-is": "^2.0.1"
       },
       "engines": {
         "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/body-parser/node_modules/iconv-lite": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
+      "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/brace-expansion": {
-      "version": "2.0.2",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
-      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
@@ -528,18 +548,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "license": "MIT",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -684,9 +692,9 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "5.1.6",
+      "version": "5.1.9",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.9.tgz",
-      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "integrity": "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==",
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
@@ -759,9 +767,9 @@
       }
     },
     "node_modules/nodemailer": {
-      "version": "7.0.10",
+      "version": "8.0.6",
-      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-7.0.10.tgz",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-8.0.6.tgz",
-      "integrity": "sha512-Us/Se1WtT0ylXgNFfyFSx4LElllVLJXQjWi2Xz17xWw7amDKO2MLtFnVp1WACy7GkVGs+oBlRopVNUzlrGSw1w==",
+      "integrity": "sha512-Nm2XeuDwwy2wi5A+8jPWwQwNzcjNjhWdE3pVLoXEusxJqCnAPAgnBGkSmiLknbnWuOF9qraRpYZjfxqtKZ4tPw==",
       "license": "MIT-0",
       "engines": {
         "node": ">=6.0.0"
@@ -819,9 +827,9 @@
       }
     },
     "node_modules/path-to-regexp": {
-      "version": "8.3.0",
+      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.4.2.tgz",
-      "integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
+      "integrity": "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -848,9 +856,9 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.14.0",
+      "version": "6.15.1",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.1.tgz",
-      "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==",
+      "integrity": "sha512-6YHEFRL9mfgcAvql/XhwTvf5jKcOiiupt2FiJxHkiX1z4j7WL8J/jRHYLluORvc1XxB5rV20KoeK00gVJamspg==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "side-channel": "^1.1.0"

backendV2/package.json

@@ -18,6 +18,6 @@
     "express-rate-limit": "^8.4.1",
     "jose": "^6.0.12",
     "mysql2": "^3.14.3",
-    "nodemailer": "^7.0.6"
+    "nodemailer": "^8.0.6"
   }
 }

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

@@ -12,12 +12,15 @@ 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 };
 };
 
 export const deleteLoanById = async (loanId) => {
-  const [result] = await pool.query("DELETE FROM loans WHERE id = ?", [loanId]);
+  const [result] = await pool.query(
+    "UPDATE loans SET deleted = true, deleted_admin = true WHERE id = ?",
+    [loanId],
+  );
   if (result.affectedRows > 0) return { success: true };
   return { success: false };
 };

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/routes/app/loanMgmt.route.js

@@ -4,9 +4,14 @@ import {
   checkIfServiceIsActive,
   checkIfServiceIsActive2,
 } from "../../services/functions.js";
-const router = express.Router();
+
+// mailer imports
+import { sendMail } from "../../services/mailer/send.js";
+import { loanMail } from "../../services/mailer/templates/loan_created.js";
+
 import dotenv from "dotenv";
 dotenv.config();
+const router = express.Router();
 
 const loan_service = "Loan Service";
 const loan_mailer_service = "Loan Mailer";
@@ -23,7 +28,6 @@ import {
   setReturnDate,
   setTakeDate,
 } from "./database/loansMgmt.database.js";
-import { sendMailLoan } from "./services/mailer.js";
 
 router.post(
   "/createLoan",
@@ -63,19 +67,24 @@ router.post(
         note,
         itemIds,
       );
-
       if (result.success) {
         if (await checkIfServiceIsActive2(loan_mailer_service)) {
           const mailInfo = await getLoanInfoWithID(result.data.id);
           console.log(mailInfo);
-          sendMailLoan(
+          const { html, text } = loanMail(
-            mailInfo.data.username,
+            req.user.first_name + " " + req.user.last_name,
             mailInfo.data.loaned_items_name,
             mailInfo.data.start_date,
             mailInfo.data.end_date,
             mailInfo.data.created_at,
             mailInfo.data.note,
           );
+          await sendMail({
+            to: process.env.MAIL_SENDEES,
+            subject: "Neue Ausleihe erstellt!",
+            html,
+            text,
+          });
         }
 
         return res.status(201).json({

backendV2/routes/app/services/mailer.js

@@ -1,215 +0,0 @@
-import nodemailer from "nodemailer";
-import dotenv from "dotenv";
-dotenv.config();
-
-const formatDateTime = (value) => {
-  if (value == null) return "N/A";
-
-  const toOut = (d) => {
-    if (!(d instanceof Date) || isNaN(d.getTime())) return "N/A";
-    const dd = String(d.getDate()).padStart(2, "0");
-    const mm = String(d.getMonth() + 1).padStart(2, "0");
-    const yyyy = d.getFullYear();
-    const hh = String(d.getHours()).padStart(2, "0");
-    const mi = String(d.getMinutes()).padStart(2, "0");
-    return `${dd}.${mm}.${yyyy} ${hh}:${mi} Uhr`;
-  };
-
-  if (value instanceof Date) return toOut(value);
-  if (typeof value === "number") return toOut(new Date(value));
-
-  const s = String(value).trim();
-
-  // Direct pattern: "YYYY-MM-DD[ T]HH:mm[:ss]"
-  const m = s.match(/^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2})(?::\d{2})?/);
-  if (m) {
-    const [, y, M, d, h, min] = m;
-    return `${d}.${M}.${y} ${h}:${min} Uhr`;
-  }
-
-  // ISO or other parseable formats
-  const dObj = new Date(s);
-  if (!isNaN(dObj.getTime())) return toOut(dObj);
-
-  return "N/A";
-};
-
-function buildLoanEmail({
-  user,
-  items,
-  startDate,
-  endDate,
-  createdDate,
-  note,
-}) {
-  const brand = process.env.MAIL_BRAND_COLOR || "#0ea5e9";
-  const itemsList =
-    Array.isArray(items) && items.length
-      ? `<ul style="margin:4px 0 0 18px; padding:0;">${items
-          .map(
-            (i) =>
-              `<li style="margin:2px 0; color:#111827; line-height:1.3;">${i}</li>`,
-          )
-          .join("")}</ul>`
-      : "<span style='color:#111827;'>N/A</span>";
-
-  return `<!doctype html>
-<html lang="de">
-<head>
-  <meta charset="utf-8">
-  <meta name="color-scheme" content="light">
-  <meta name="supported-color-schemes" content="light">
-  <meta name="x-apple-disable-message-reformatting">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <style>
-    :root { color-scheme: light; supported-color-schemes: light; }
-    body { margin:0; padding:0; }
-    /* Mobile stacking */
-    @media (max-width:480px) {
-      .outer { width:100% !important; }
-      .pad-sm { padding:16px !important; }
-      .w-label { width:120px !important; }
-    }
-    /* Dark-mode override safety */
-    @media (prefers-color-scheme: dark) {
-      body, table, td, p, a, h1, h2, h3 { background:#ffffff !important; color:#111827 !important; }
-      .brand-header { background:${brand} !important; color:#ffffff !important; }
-      a { color:${brand} !important; }
-    }
-  </style>
-</head>
-<body bgcolor="#ffffff" style="background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#111827; -webkit-text-size-adjust:100%;">
-  <!-- Preheader (hidden) -->
-  <div style="display:none; max-height:0; overflow:hidden; opacity:0; mso-hide:all;">
-    Neue Ausleihe erstellt – Übersicht der Buchung.
-  </div>
-  <div role="article" aria-roledescription="email" lang="de" style="padding:24px; background:#f2f4f7;">
-    <table role="presentation" cellpadding="0" cellspacing="0" width="100%" class="outer" style="max-width:600px; margin:0 auto; background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden;">
-      <tr>
-        <td class="brand-header" style="padding:22px 26px; background:${brand}; color:#ffffff;">
-          <h1 style="margin:0; font-size:18px; line-height:1.35; font-weight:600;">Neue Ausleihe erstellt</h1>
-        </td>
-      </tr>
-      <tr>
-        <td class="pad-sm" style="padding:24px 26px; color:#111827;">
-          <p style="margin:0 0 14px 0; line-height:1.4;">Es wurde eine neue Ausleihe angelegt. Hier sind die Details:</p>
-          <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; font-size:14px; line-height:1.3; background:#fcfcfd; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden;">
-            <tbody>
-              <tr>
-                <td class="w-label" style="padding:10px 14px; color:#6b7280; width:170px; border-bottom:1px solid #ececec;">Benutzer</td>
-                <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${
-                  user || "N/A"
-                }</td>
-              </tr>
-              <tr>
-                <td style="padding:10px 14px; color:#6b7280; vertical-align:top; border-bottom:1px solid #ececec;">Ausgeliehene Gegenstände</td>
-                <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${itemsList}</td>
-              </tr>
-              <tr>
-                <td style="padding:10px 14px; color:#6b7280; border-bottom:1px solid #ececec;">Startdatum</td>
-                <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${formatDateTime(
-                  startDate,
-                )}</td>
-              </tr>
-              <tr>
-                <td style="padding:10px 14px; color:#6b7280; border-bottom:1px solid #ececec;">Enddatum</td>
-                <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${formatDateTime(
-                  endDate,
-                )}</td>
-              </tr>
-              <tr>
-                <td style="padding:10px 14px; color:#6b7280;">Erstellt am</td>
-                <td style="padding:10px 14px; font-weight:600; color:#111827;">${formatDateTime(
-                  createdDate,
-                )}</td>
-              </tr>
-              <tr>
-                <td style="padding:10px 14px; color:#6b7280; vertical-align:top;">Notiz</td>
-                <td style="padding:10px 14px; font-weight:600; color:#111827;">${
-                  note || "Keine Notiz"
-                }</td>
-              </tr>
-            </tbody>
-          </table>
-          <p style="margin:22px 0 0 0; font-size:14px;">
-            <a href="https://admin.insta.the1s.de/api" style="display:inline-block; background:${brand}; color:#ffffff; text-decoration:none; padding:10px 16px; border-radius:6px; font-weight:600; font-size:14px;" target="_blank" rel="noopener noreferrer">
-              Übersicht öffnen
-            </a>
-          </p>
-          <p style="margin:18px 0 0 0; font-size:12px; color:#6b7280; line-height:1.4;">
-            Diese E-Mail wurde automatisch vom Ausleihsystem gesendet. Bitte nicht antworten.
-          </p>
-        </td>
-      </tr>
-    </table>
-  </div>
-</body>
-</html>`;
-}
-
-function buildLoanEmailText({
-  user,
-  items,
-  startDate,
-  endDate,
-  createdDate,
-  note,
-}) {
-  const itemsText =
-    Array.isArray(items) && items.length ? items.join(", ") : "N/A";
-  return [
-    "Neue Ausleihe erstellt",
-    "",
-    `Benutzer: ${user || "N/A"}`,
-    `Gegenstände: ${itemsText}`,
-    `Start: ${formatDateTime(startDate)}`,
-    `Ende: ${formatDateTime(endDate)}`,
-    `Erstellt am: ${formatDateTime(createdDate)}`,
-    `Notiz: ${note || "Keine Notiz"}`,
-  ].join("\n");
-}
-
-export function sendMailLoan(
-  user,
-  items,
-  startDate,
-  endDate,
-  createdDate,
-  note,
-) {
-  const transporter = nodemailer.createTransport({
-    host: process.env.MAIL_HOST,
-    port: process.env.MAIL_PORT,
-    secure: true,
-    auth: {
-      user: process.env.MAIL_USER,
-      pass: process.env.MAIL_PASSWORD,
-    },
-  });
-
-  (async () => {
-    const info = await transporter.sendMail({
-      from: '"Ausleihsystem" <noreply@mcs-medien.de>',
-      to: process.env.MAIL_SENDEES,
-      subject: "Eine neue Ausleihe wurde erstellt!",
-      text: buildLoanEmailText({
-        user,
-        items,
-        startDate,
-        endDate,
-        createdDate,
-        note,
-      }),
-      html: buildLoanEmail({
-        user,
-        items,
-        startDate,
-        endDate,
-        createdDate,
-        note,
-      }),
-    });
-
-    console.log("Loan message sent:", info.messageId);
-  })();
-}

backendV2/routes/app/services/mailer_v2.js

@@ -1,43 +0,0 @@
-import nodemailer from "nodemailer";
-import dotenv from "dotenv";
-dotenv.config();
-
-export function sendMail(username, message) {
-  const transporter = nodemailer.createTransport({
-    host: process.env.MAIL_HOST,
-    port: process.env.MAIL_PORT,
-    secure: true,
-    auth: {
-      user: process.env.MAIL_USER,
-      pass: process.env.MAIL_PASSWORD,
-    },
-  });
-
-  (async () => {
-    const mailText = `Neue Kontaktanfrage im Ausleihsystem.\n\nBenutzername: ${username}\n\nNachricht:\n${message}`;
-
-    const mailHtml = `<!DOCTYPE html>
-<html lang="de">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Neue Nachricht im Ausleihsystem</title>
-  </head>
-  <body style="font-family: Arial, sans-serif; line-height: 1.5; color: #222;">
-    <h2>Neue Nachricht im Ausleihsystem</h2>
-    <p><strong>Benutzername:</strong> ${username}</p>
-    <p><strong>Nachricht:</strong></p>
-    <p style="white-space: pre-line;">${message}</p>
-  </body>
-</html>`;
-
-    const info = await transporter.sendMail({
-      from: '"Ausleihsystem" <noreply@mcs-medien.de>',
-      to: process.env.MAIL_SENDEES_CONTACT,
-      subject: "Sie haben eine neue Nachricht!",
-      text: mailText,
-      html: mailHtml,
-    });
-
-    console.log("Contact message sent: %s", info.messageId);
-  })();
-}

backendV2/routes/app/userMgmt.route.js

@@ -14,7 +14,10 @@ import {
   changePassword,
   getDeactivatedServices,
 } from "./database/userMgmt.database.js";
-import { sendMail } from "./services/mailer_v2.js";
+
+// mailer imports
+import { sendMail } from "../../services/mailer/send.js";
+import { contactMail } from "../../services/mailer/templates/contact.js";
 
 router.post(
   "/login",
@@ -58,12 +61,29 @@ router.post(
   checkIfServiceIsActive(contact_form_service),
   authenticate,
   async (req, res) => {
-    const message = req.body.message;
+    try {
-    const username = req.user.username;
+      const message = req.body?.message;
+      const username = req.user?.first_name + " " + req.user?.last_name;
 
-    sendMail(username, message);
+      if (!username || !message) {
+        return res
+          .status(400)
+          .json({ message: "Username and message are required" });
+      }
 
-    res.status(200).json({ message: "Contact message sent successfully" });
+      const { html, text } = contactMail({ username, message });
+      await sendMail({
+        to: process.env.MAIL_SENDEES_CONTACT,
+        subject: "Neue Nachricht!",
+        html,
+        text,
+      });
+
+      res.status(200).json({ message: "Contact message sent successfully" });
+    } catch (error) {
+      console.error("Failed to send contact mail:", error);
+      res.status(500).json({ message: "Failed to send contact message" });
+    }
   },
 );
 

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;
 
@@ -27,6 +28,7 @@ CREATE TABLE loans (
   loaned_items_id json NOT NULL DEFAULT ('[]'),
   loaned_items_name json NOT NULL DEFAULT ('[]'),
   deleted bool NOT NULL DEFAULT false,
+  deleted_admin bool NOT NULL DEFAULT false,
   note varchar(500) DEFAULT NULL,
   PRIMARY KEY (id),
   CHECK (loan_code REGEXP '^[0-9]{6}$')

backendV2/services/mailer/send.js

@@ -0,0 +1,13 @@
+import { transporter } from "./transporter.js";
+
+export async function sendMail({ to, subject, text, html }) {
+  const info = await transporter.sendMail({
+    from: '"Ausleihsystem" <noreply@mcs-medien.de>',
+    to,
+    subject,
+    text,
+    html,
+  });
+  console.log("Mail sent:", info.messageId);
+  return info;
+}

backendV2/services/mailer/templates/contact.js

@@ -0,0 +1,76 @@
+export function contactMail({ username, message }) {
+  const brand = process.env.MAIL_BRAND_COLOR || "#0ea5e9";
+
+  const html = `<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="color-scheme" content="light">
+  <title>Neue Nachricht</title>
+</head>
+<body style="margin:0;padding:0;background:#f2f4f7;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;color:#111827;-webkit-text-size-adjust:100%;">
+  <div style="display:none;max-height:0;overflow:hidden;opacity:0;">Neue Kontaktanfrage im Ausleihsystem.</div>
+  <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="background:#f2f4f7;">
+    <tr>
+      <td align="center" style="padding:32px 16px;">
+        <table role="presentation" cellpadding="0" cellspacing="0" width="600" style="max-width:600px;width:100%;border-radius:14px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.06);">
+
+          <!-- Header -->
+          <tr>
+            <td style="background:${brand};padding:32px 30px 28px;">
+              <h1 style="margin:0;font-size:24px;color:#ffffff;font-weight:700;">Neue Nachricht</h1>
+              <p style="margin:8px 0 0;font-size:14px;color:rgba(255,255,255,0.85);">Eine neue Kontaktanfrage ist eingegangen.</p>
+            </td>
+          </tr>
+
+          <!-- Accent line -->
+          <tr>
+            <td style="height:3px;line-height:3px;font-size:1px;background:${brand};">&nbsp;</td>
+          </tr>
+
+          <!-- Content -->
+          <tr>
+            <td style="background:#ffffff;padding:28px 30px;">
+              <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="background:#fafbfc;border:1px solid #f3f4f6;border-radius:10px;border-collapse:collapse;">
+                <tr>
+                  <td style="padding:14px 16px;color:#6b7280;font-size:13px;white-space:nowrap;vertical-align:top;border-bottom:1px solid #f3f4f6;">
+                    Benutzername
+                  </td>
+                  <td style="padding:14px 16px;font-weight:600;color:#111827;font-size:14px;vertical-align:top;border-bottom:1px solid #f3f4f6;">
+                    ${username || "N/A"}
+                  </td>
+                </tr>
+                <tr>
+                  <td style="padding:14px 16px;color:#6b7280;font-size:13px;white-space:nowrap;vertical-align:top;">
+                    Nachricht
+                  </td>
+                  <td style="padding:14px 16px;font-weight:600;color:#111827;font-size:14px;vertical-align:top;white-space:pre-line;">
+                    ${message || "N/A"}
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+
+          <!-- Footer -->
+          <tr>
+            <td style="background:#f9fafb;padding:20px 30px;border-top:1px solid #e5e7eb;">
+              <p style="margin:0;font-size:12px;color:#9ca3af;text-align:center;line-height:1.6;">
+                Diese E-Mail wurde automatisch vom Ausleihsystem gesendet.<br>
+                Bitte antworten Sie nicht auf diese Nachricht.
+              </p>
+            </td>
+          </tr>
+
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`;
+
+  const text = `Neue Kontaktanfrage\n\nBenutzername: ${username}\nNachricht:\n${message}`;
+
+  return { html, text };
+}

backendV2/services/mailer/templates/loan_created.js

@@ -0,0 +1,124 @@
+const formatDateTime = (value) => {
+  if (value == null) return "N/A";
+  const d = value instanceof Date ? value : new Date(value);
+  if (isNaN(d.getTime())) return "N/A";
+  return (
+    d.toLocaleString("de-DE", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    }) + " Uhr"
+  );
+};
+
+export function loanMail(user, items, startDate, endDate, createdDate, note) {
+  const brand = process.env.MAIL_BRAND_COLOR || "#0ea5e9";
+
+  const itemsHtml =
+    Array.isArray(items) && items.length
+      ? items
+          .map(
+            (i) =>
+              `<span style="display:inline-block;background:#f0f9ff;color:#0369a1;padding:4px 12px;margin:2px 4px 2px 0;border-radius:20px;font-size:13px;font-weight:500;">${i}</span>`,
+          )
+          .join(" ")
+      : '<span style="color:#9ca3af;">Keine Gegenst&auml;nde</span>';
+
+  const row = (label, value, isLast = false) => `
+    <tr>
+      <td style="padding:14px 16px;color:#6b7280;font-size:13px;white-space:nowrap;vertical-align:top;${isLast ? "" : "border-bottom:1px solid #f3f4f6;"}">
+        ${label}
+      </td>
+      <td style="padding:14px 16px;font-weight:600;color:#111827;font-size:14px;vertical-align:top;${isLast ? "" : "border-bottom:1px solid #f3f4f6;"}">
+        ${value}
+      </td>
+    </tr>`;
+
+  const html = `<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="color-scheme" content="light">
+  <title>Neue Ausleihe</title>
+</head>
+<body style="margin:0;padding:0;background:#f2f4f7;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;color:#111827;-webkit-text-size-adjust:100%;">
+  <div style="display:none;max-height:0;overflow:hidden;opacity:0;">Neue Ausleihe erstellt – Details zur Buchung.</div>
+  <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="background:#f2f4f7;">
+    <tr>
+      <td align="center" style="padding:32px 16px;">
+        <table role="presentation" cellpadding="0" cellspacing="0" width="600" style="max-width:600px;width:100%;border-radius:14px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.06);">
+
+          <!-- Header -->
+          <tr>
+            <td style="background:${brand};padding:32px 30px 28px;">
+              <h1 style="margin:0;font-size:24px;color:#ffffff;font-weight:700;">Neue Ausleihe</h1>
+              <p style="margin:8px 0 0;font-size:14px;color:rgba(255,255,255,0.85);">Es wurde soeben eine neue Ausleihe im System angelegt.</p>
+            </td>
+          </tr>
+
+          <!-- Accent line -->
+          <tr>
+            <td style="background:#ffffff;padding:0;height:3px;line-height:3px;font-size:1px;background:${brand};">&nbsp;</td>
+          </tr>
+
+          <!-- Details -->
+          <tr>
+            <td style="background:#ffffff;padding:28px 30px 10px;">
+              <p style="margin:0 0 14px;font-size:11px;font-weight:700;color:#9ca3af;letter-spacing:1.5px;text-transform:uppercase;">Details zur Ausleihe</p>
+              <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="background:#fafbfc;border:1px solid #f3f4f6;border-radius:10px;border-collapse:collapse;">
+                ${row("Benutzer", user || "N/A")}
+                ${row("Gegenst&auml;nde", itemsHtml)}
+                ${row("Startdatum", formatDateTime(startDate))}
+                ${row("Enddatum", formatDateTime(endDate))}
+                ${row("Erstellt am", formatDateTime(createdDate))}
+                ${row("Notiz", note || '<span style="color:#9ca3af;">Keine Notiz</span>', true)}
+              </table>
+            </td>
+          </tr>
+
+          <!-- Button -->
+          <tr>
+            <td style="background:#ffffff;padding:20px 30px 32px;" align="center">
+              <a href="https://admin.insta.the1s.de/api" target="_blank" rel="noopener noreferrer"
+                 style="display:inline-block;background:${brand};color:#ffffff;text-decoration:none;padding:13px 28px;border-radius:8px;font-weight:600;font-size:15px;">
+                Ausleihe ansehen &rarr;
+              </a>
+            </td>
+          </tr>
+
+          <!-- Footer -->
+          <tr>
+            <td style="background:#f9fafb;padding:20px 30px;border-top:1px solid #e5e7eb;">
+              <p style="margin:0;font-size:12px;color:#9ca3af;text-align:center;line-height:1.6;">
+                Diese E-Mail wurde automatisch vom Ausleihsystem gesendet.<br>
+                Bitte antworten Sie nicht auf diese Nachricht.
+              </p>
+            </td>
+          </tr>
+
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`;
+
+  const itemsText = Array.isArray(items) ? items.join(", ") : "N/A";
+  const text = [
+    "Neue Ausleihe erstellt",
+    "-".repeat(30),
+    `Benutzer:      ${user || "N/A"}`,
+    `Gegenstaende:  ${itemsText}`,
+    `Start:         ${formatDateTime(startDate)}`,
+    `Ende:          ${formatDateTime(endDate)}`,
+    `Erstellt:      ${formatDateTime(createdDate)}`,
+    `Notiz:         ${note || "Keine Notiz"}`,
+    "",
+    "-> https://admin.insta.the1s.de/api",
+  ].join("\n");
+
+  return { html, text };
+}

backendV2/services/mailer/transporter.js

@@ -0,0 +1,13 @@
+import nodemailer from "nodemailer";
+import dotenv from "dotenv";
+dotenv.config();
+
+export const transporter = nodemailer.createTransport({
+  host: process.env.MAIL_HOST,
+  port: process.env.MAIL_PORT,
+  secure: true,
+  auth: {
+    user: process.env.MAIL_USER,
+    pass: process.env.MAIL_PASSWORD,
+  },
+});

changelog.md

@@ -1,35 +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
 
-- The overview page now has the note column and is overall better organised
+- 
-- I also addded the regular header to the page
-- I have added three animations to the Borrow System
-- 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...)
-- 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
 
-- I have the error logging for the API route wehre you can take loans improved.
+- 
-- If you try to delete a loan that has not been returned yet, you will get an 507 error code.
 
 ## 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.3.2
+**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